/* Mintford v45 — Mintford identity
   Palette (Coolors-style): Ink #14213D · Paper #FAF8F4 · Civic Blue #2F5FE0 ·
   Coral #E4572E · Amber #F2B705 · Teal #0E8A8A
   Type: Sora (display) + Inter (body). Light civic-app base, dark only at night. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#faf8f4;--card:#ffffff;--line:#e7e2d8;--tx:#14213d;--mut:#5c6780;
  --acc:#2f5fe0;--acc2:#0e8a8a;--gacc:var(--acc);
  --ink:#14213d;
  --sky1:#a9d4f5;--sky2:#e8f2fc;--bld:#6d87ab;--bld2:#8fa6c4;--win:rgba(255,255,255,.75);--sun:#ffd76e;
  --shadow:0 1px 2px rgba(20,33,61,.05),0 4px 14px rgba(20,33,61,.07);
  --shadow-lg:0 2px 4px rgba(20,33,61,.06),0 14px 34px rgba(20,33,61,.14);
  --hard:4px 4px 0 rgba(20,33,61,.1);
}
/* ---- 8 time periods: light day tones, twilight dim, dark night ---- */
body.t-dawn{--bg:#f8f3fa;--line:#ece2f2;--acc:#9a5bb8;--acc2:#5f7fd9;
  --sky1:#d8b6dd;--sky2:#f6ecf4;--bld:#8f7699;--bld2:#ab8fb4;--win:rgba(255,240,235,.75);--sun:#f3b8c0}
body.t-sunrise{--bg:#fdf3e6;--line:#f2e3cc;--acc:#d97b3f;--acc2:#c95f7b;
  --sky1:#f6c795;--sky2:#fdeeda;--bld:#a67f6a;--bld2:#c09a80;--win:rgba(255,246,225,.85);--sun:#ffb163}
body.t-midday{--bg:#eef5fd;--line:#dbe7f5;--acc:#1a72d8;--acc2:#0e8a8a;
  --sky1:#7fc0f0;--sky2:#dceefc;--bld:#5f7fa8;--bld2:#84a0c2;--win:rgba(255,255,255,.8);--sun:#ffe17d}
body.t-afternoon{--bg:#f7f5ef;--line:#e8e3d4;--acc:#a8772a;--acc2:#0e8a8a;
  --sky1:#c3dbe8;--sky2:#f4f0e2;--bld:#8a8570;--bld2:#a8a289;--win:rgba(255,252,235,.8);--sun:#ffd97a}
body.t-sunset{--bg:#fbf3e8;--line:#f0e4d2;--acc:#c96a2a;--acc2:#9a4a8f;
  --sky1:#f2b98d;--sky2:#fbe9d8;--bld:#8d6f7e;--bld2:#ab8893;--win:rgba(255,236,200,.9);--sun:#ff9e54}
body.t-evening{--bg:#1b2130;--card:#232a3d;--line:#323b54;--tx:#e7ebf6;--mut:#9aa6bf;--ink:#e7ebf6;
  --acc:#7d92e8;--acc2:#58b8c9;
  --sky1:#232a44;--sky2:#3c3f63;--bld:#171d2e;--bld2:#212a44;--win:rgba(255,214,130,.8);--sun:#e8d9b8;
  --shadow:0 2px 10px rgba(0,0,0,.3);--shadow-lg:0 10px 30px rgba(0,0,0,.45);--hard:4px 4px 0 rgba(0,0,0,.35)}
body.t-night{--bg:#10151f;--card:#181f2e;--line:#273046;--tx:#e9edf8;--mut:#93a0ba;--ink:#e9edf8;
  --acc:#5f83e8;--acc2:#3fb8ae;
  --sky1:#0a0e18;--sky2:#131b30;--bld:#141a29;--bld2:#1c2438;--win:rgba(255,214,130,.85);--sun:#f4d27a;
  --shadow:0 2px 10px rgba(0,0,0,.3);--shadow-lg:0 10px 30px rgba(0,0,0,.45);--hard:4px 4px 0 rgba(0,0,0,.4)}

.skyline .stars{position:absolute;inset:0;opacity:0;transition:opacity 1.2s}
body.t-evening .skyline .stars{opacity:.45}
body.t-night .skyline .stars{opacity:.85}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px);
  background-size:26px 26px;
  color:var(--tx);line-height:1.65;transition:background .6s,color .6s}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(16px,3vw,28px)}
h1,h2,h3,.brand,.gname,.lb-row .sc{font-family:"Sora","Inter",sans-serif}
h1{font-size:clamp(24px,4vw,32px);margin:8px 0 12px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
h2{font-size:clamp(18px,2.6vw,23px);margin:34px 0 14px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  display:flex;align-items:center;gap:10px}
h2::after{content:"";flex:1;height:2px;border-radius:2px;max-width:64px;
  background:linear-gradient(90deg,var(--acc),transparent)}
.lead{color:var(--mut);max-width:720px;font-size:clamp(15px,1.8vw,16.5px)}
.muted{color:var(--mut);font-size:13px}
a{color:var(--acc)}

/* ---------- header + skyline ---------- */
.site-header{position:sticky;top:0;z-index:9;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;gap:14px;height:60px}
.brand{font-weight:800;font-size:19px;text-decoration:none;white-space:nowrap;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
nav.mainnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
nav.mainnav::-webkit-scrollbar{display:none}
nav.mainnav a{color:var(--mut);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;
  padding:7px 12px;border-radius:99px;transition:color .15s,background .15s}
nav.mainnav a:hover{color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,transparent)}
.userchip{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--tx);font-size:13.5px;font-weight:600;flex:none}
.userchip .av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:16px;background:linear-gradient(135deg,var(--acc),var(--acc2));overflow:hidden;
  box-shadow:0 0 0 2px var(--card),0 0 0 4px color-mix(in srgb,var(--acc) 35%,transparent)}
.userchip .av img{width:100%;height:100%;object-fit:cover}
.btn-login{background:var(--ink);color:#fff;border:none;border-radius:12px;padding:9px 18px;
  font-size:13.5px;font-weight:600;cursor:pointer;min-height:36px;font-family:inherit;
  box-shadow:3px 3px 0 color-mix(in srgb,var(--acc) 45%,transparent);transition:transform .12s,box-shadow .12s}
.btn-login:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 color-mix(in srgb,var(--acc) 55%,transparent)}
.skyline{position:relative;height:clamp(88px,14vw,130px);overflow:hidden;
  background:linear-gradient(180deg,var(--sky1),var(--sky2) 78%,var(--sky2))}
.skyline svg{position:absolute;bottom:0;left:0;width:100%;height:100%}
.skyline .sun{position:absolute;border-radius:50%;width:clamp(60px,9vw,92px);height:clamp(60px,9vw,92px);
  background:radial-gradient(circle,var(--sun),transparent 70%);top:18px;right:12%;opacity:.9;transition:top 1s,opacity 1s}

/* ---------- hero: text + illustration ---------- */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3.5vw,36px);align-items:center;
  border-radius:22px;padding:clamp(24px,4.5vw,44px) clamp(20px,4vw,42px);margin:22px 0 30px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 220px at 12% -10%,color-mix(in srgb,var(--acc) 10%,transparent),transparent 70%)}
.hero h1{font-size:clamp(26px,4.5vw,40px);line-height:1.15;position:relative}
.hero h1 em{font-style:normal;color:var(--acc);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:7px;border-radius:4px;
  background:color-mix(in srgb,var(--sun) 65%,transparent);z-index:-1}
.hero p{color:var(--mut);max-width:620px;margin-top:10px;font-size:clamp(15px,1.8vw,17px);position:relative}
.hero .hero-art{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);
  transform:rotate(1.6deg);border:1px solid var(--line)}
.hero .hero-art img{display:block;width:100%;height:auto}
.tag{display:inline-block;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);
  border-radius:99px;padding:3px 12px;font-size:12.5px;font-weight:600;margin:0 4px 6px 0;
  box-shadow:2px 2px 0 color-mix(in srgb,var(--acc) 40%,transparent)}

/* ---------- game cards (AI-illustrated covers) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:clamp(14px,2vw,20px)}
.gcard{position:relative;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--tx);
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-top:4px solid var(--gacc,var(--acc));
  box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.gcard .thumb{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--sky2)}
.gcard .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.gcard:hover .thumb img{transform:scale(1.06)}
.gcard .gchip{position:absolute;top:10px;left:10px;background:rgba(15,20,35,.72);color:#fff;
  backdrop-filter:blur(4px);border-radius:99px;padding:3px 11px;font-size:11.5px;font-weight:600;letter-spacing:.03em}
.gname{font-weight:700;font-size:16px;padding:12px 15px 0;letter-spacing:-.01em}
.gsub{color:var(--mut);font-size:12.5px;padding:4px 15px 15px;line-height:1.5}

/* ---------- game stage: per-district themed frame ---------- */
.game-stage{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:clamp(12px,2.2vw,20px);display:flex;justify-content:center;box-shadow:var(--shadow);
  border-top:4px solid var(--gacc,var(--acc));position:relative;overflow:hidden}
.game-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:var(--stagepat,none);background-size:var(--stagepat-size,26px 26px)}
canvas{border-radius:12px;touch-action:none;max-width:100%;height:auto;position:relative;box-shadow:var(--shadow-lg)}
/* district patterns — game pages set body class g-KEY */
body.g-metro-merge{--gacc:#e4572e;--stagepat:repeating-linear-gradient(90deg,color-mix(in srgb,#e4572e 9%,transparent) 0 3px,transparent 3px 26px)}
body.g-skyline-drop{--gacc:#7c5cd6;--stagepat:linear-gradient(color-mix(in srgb,#7c5cd6 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,#7c5cd6 10%,transparent) 1px,transparent 1px)}
body.g-city-hall-tycoon{--gacc:#b7791f;--stagepat:radial-gradient(color-mix(in srgb,#b7791f 16%,transparent) 2px,transparent 2.5px)}
body.g-grid-blackout{--gacc:#0e8a8a;--stagepat:radial-gradient(color-mix(in srgb,#0e8a8a 14%,transparent) 2px,transparent 2.5px)}
body.g-rush-hour{--gacc:#1b7fdb;--stagepat:repeating-linear-gradient(180deg,color-mix(in srgb,#1b7fdb 12%,transparent) 0 10px,transparent 10px 30px)}
body.g-demolition-crew{--gacc:#d64550;--stagepat:repeating-linear-gradient(45deg,color-mix(in srgb,#d64550 9%,transparent) 0 12px,transparent 12px 24px)}
body.g-fountain-fix{--gacc:#1e9ad6;--stagepat:repeating-linear-gradient(0deg,color-mix(in srgb,#1e9ad6 10%,transparent) 0 2px,transparent 2px 24px),repeating-linear-gradient(90deg,color-mix(in srgb,#1e9ad6 8%,transparent) 0 2px,transparent 2px 24px)}
body.g-parking-patrol{--gacc:#64748b;--stagepat:linear-gradient(color-mix(in srgb,#64748b 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,#64748b 12%,transparent) 1px,transparent 1px)}
body.g-signal-sync{--gacc:#c2410c;--stagepat:repeating-linear-gradient(90deg,color-mix(in srgb,#c2410c 9%,transparent) 0 10px,transparent 10px 30px)}
body.g-bridge-builder{--gacc:#8a5a33;--stagepat:repeating-linear-gradient(45deg,color-mix(in srgb,#8a5a33 9%,transparent) 0 8px,transparent 8px 26px)}
body.g-night-shift-bakery{--gacc:#d946ef;--stagepat:radial-gradient(color-mix(in srgb,#d946ef 13%,transparent) 2px,transparent 2.5px)}
body.g-street-sweeper{--gacc:#3aa76d;--stagepat:repeating-linear-gradient(90deg,color-mix(in srgb,#3aa76d 10%,transparent) 0 3px,transparent 3px 26px)}
.hud{display:flex;gap:10px;align-items:center;justify-content:center;margin:16px 0;flex-wrap:wrap;position:relative}
.hud .stat{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:8px 18px;font-size:13.5px;color:var(--mut);box-shadow:var(--shadow)}
.hud .stat b{color:var(--gacc,var(--acc));font-size:17px;margin-left:4px;font-family:"Sora",sans-serif}
#msg{color:var(--gacc,var(--acc));font-weight:600;text-align:center}
button.play{background:var(--ink);color:#fff;border:none;border-radius:12px;padding:12px 28px;
  font-size:14.5px;font-weight:700;cursor:pointer;min-height:44px;font-family:inherit;letter-spacing:.01em;
  box-shadow:4px 4px 0 color-mix(in srgb,var(--gacc,var(--acc)) 55%,transparent);
  transition:transform .12s,box-shadow .12s}
button.play:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 color-mix(in srgb,var(--gacc,var(--acc)) 65%,transparent)}
button.play:active{transform:translate(2px,2px);box-shadow:2px 2px 0 color-mix(in srgb,var(--gacc,var(--acc)) 55%,transparent)}
.ad-slot{border:1.5px dashed var(--line);border-radius:16px;background:color-mix(in srgb,var(--card) 60%,transparent);
  color:var(--mut);font-size:13px;text-align:center;padding:26px 10px;margin:28px 0}
section{max-width:780px}
section p{margin:8px 0}
section ul{margin:8px 0 8px 22px}
section li{margin:6px 0}
section b{color:var(--gacc,var(--acc))}
.crumbs{font-size:13px;color:var(--mut);margin-bottom:10px}
.crumbs a{color:var(--acc);text-decoration:none}
.site-footer{border-top:1px solid var(--line);color:var(--mut);font-size:13px;padding:20px 0;margin-top:44px}
.site-footer a{color:var(--acc)}

/* ---------- leaderboard ---------- */
.boards{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.btab{background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:99px;
  padding:9px 16px;font-size:13.5px;font-weight:500;cursor:pointer;min-height:40px;font-family:inherit}
.btab.on{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:3px 3px 0 color-mix(in srgb,var(--acc) 45%,transparent)}
.lb-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:11px 16px;margin-bottom:8px;box-shadow:var(--shadow)}
.lb-row .rk{width:34px;font-weight:800;color:var(--mut);text-align:center;font-size:15px;font-family:"Sora",sans-serif}
.lb-row:nth-child(1) .rk{color:#d9a013}.lb-row:nth-child(2) .rk{color:#94a3b8}.lb-row:nth-child(3) .rk{color:#c47b4a}
.lb-row .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc2));
  display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden;flex:none}
.lb-row .av img{width:100%;height:100%;object-fit:cover}
.lb-row .nm{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.lb-row .nm .job{display:block;font-size:12px;color:var(--mut);font-weight:400}
.lb-row .sc{font-weight:800;color:var(--acc);font-size:16px;flex:none}

/* ---------- profile ---------- */
.profile-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,3vw,24px);
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow)}
.bigav{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc2));
  display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden;flex:none;cursor:pointer;
  box-shadow:0 0 0 3px var(--card),0 0 0 5px color-mix(in srgb,var(--acc) 35%,transparent)}
.bigav img{width:100%;height:100%;object-fit:cover}
.avgrid{display:flex;gap:10px;flex-wrap:wrap}
.avopt{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:26px;cursor:pointer;border:2px solid transparent;background:var(--sky2)}
.avopt.on{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent)}
.jobcard{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:18px clamp(16px,3vw,24px);margin:12px 0;box-shadow:var(--shadow);border-left:5px solid var(--gacc,var(--acc))}
.jobcard .jname{font-size:21px;font-weight:700;color:var(--acc)}
input.txt{background:var(--bg);border:1px solid var(--line);color:var(--tx);border-radius:12px;
  padding:11px 14px;font-size:14px;width:min(240px,100%);min-height:44px;font-family:inherit}
input.txt:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}

/* ---------- login modal ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(15,20,35,.55);z-index:50;display:none;
  align-items:center;justify-content:center;padding:16px}
.modal-mask.open{display:flex}
.modal{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;
  width:min(380px,100%);box-shadow:var(--shadow-lg)}
.modal h3{margin-bottom:16px;font-size:19px}
.modal .row{display:flex;gap:8px;margin-bottom:10px}
.modal input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);color:var(--tx);
  border-radius:12px;padding:11px 13px;font-size:14px;min-height:44px;font-family:inherit}
.modal input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.modal .err{color:#d64545;font-size:13px;min-height:18px;margin:4px 0}
body.t-night .modal .err{color:#f28b8b}

/* ---------- clicker game ---------- */
.clicker{display:flex;gap:clamp(16px,3vw,30px);align-items:flex-start;flex-wrap:wrap;justify-content:center;padding:10px;position:relative}
.orb-wrap{position:relative;text-align:center}
#orb{width:clamp(150px,40vw,190px);height:clamp(150px,40vw,190px);border-radius:50%;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:center;font-size:clamp(60px,16vw,76px);
  background:radial-gradient(circle at 32% 30%,color-mix(in srgb,var(--acc) 30%,#fff),var(--acc) 62%,color-mix(in srgb,var(--acc) 70%,#000));
  box-shadow:var(--shadow-lg),inset -12px -16px 36px rgba(0,0,0,.22);transition:transform .07s}
#orb:active{transform:scale(.94)}
.float{position:absolute;color:#b7791f;font-weight:700;pointer-events:none;animation:rise .8s ease-out forwards;font-size:17px}
body.t-night .float{color:#ffd98a}
@keyframes rise{to{transform:translateY(-70px);opacity:0}}
.shop{min-width:min(300px,100%);flex:1}
.shop h3{font-size:13px;color:var(--mut);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em}
.item{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:8px;width:100%;min-height:56px;
  cursor:pointer;text-align:left;color:var(--tx);box-shadow:var(--shadow);transition:border-color .15s;font-family:inherit}
.item:hover:not(:disabled){border-color:var(--acc)}
.item:disabled{opacity:.45;cursor:default}
.item .nm{font-weight:600;font-size:14.5px}
.item .ds{font-size:12.5px;color:var(--mut)}
.item .pr{color:#b7791f;font-weight:700;font-size:13.5px;white-space:nowrap}
body.t-night .item .pr{color:#ffd98a}

/* ---------- lights-out grid ---------- */
.lgrid{display:grid;grid-template-columns:repeat(5,clamp(42px,13vw,58px));gap:clamp(6px,1.5vw,9px);justify-content:center;padding:8px;position:relative}
.cell{width:100%;aspect-ratio:1;border-radius:12px;border:1px solid var(--line);background:var(--bg);
  cursor:pointer;transition:transform .15s,background .2s}
.cell.on{background:radial-gradient(circle at 35% 30%,#fff6dd,var(--sun,#f2c14e) 72%);
  border-color:color-mix(in srgb,var(--sun,#f2c14e) 60%,#fff)}
.cell:hover{transform:scale(1.05)}

/* ---------- city map ---------- */
.citymap{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(8px,1.6vw,18px);
  box-shadow:var(--shadow);margin:8px 0 10px}
.citymap{overflow-x:auto}
.citymap svg{display:block;width:100%;height:auto}
.m-ground{fill:var(--bg)}
.m-dot{fill:color-mix(in srgb,var(--ink) 9%,transparent)}
.m-park{fill:color-mix(in srgb,#8fb98a 35%,var(--bg))}
.m-tree circle{fill:color-mix(in srgb,#6f9f6a 62%,var(--bg))}
.m-water{fill:var(--mut)}
.mlab-water,.mlab-hills{font:600 11px "Inter",sans-serif;letter-spacing:.16em;fill:color-mix(in srgb,var(--ink) 55%,transparent)}
.m-road{fill:color-mix(in srgb,var(--ink) 12%,var(--card))}
.m-road2{fill:color-mix(in srgb,var(--ink) 7%,var(--card))}
.m-road3{fill:none;stroke:color-mix(in srgb,var(--ink) 10%,var(--card));stroke-width:10}
.m-bridge{fill:color-mix(in srgb,var(--ink) 18%,var(--card))}
.m-dash path{stroke:var(--card);stroke-width:2;stroke-dasharray:10 12;fill:none}
.m-block{fill:color-mix(in srgb,var(--ink) 4%,var(--card));stroke:color-mix(in srgb,var(--ink) 10%,transparent);stroke-width:1}
.m-bld{fill:color-mix(in srgb,var(--ink) 16%,var(--card))}
.m-bld2{fill:color-mix(in srgb,var(--ink) 9%,var(--card))}
.m-win{fill:color-mix(in srgb,#ffd88a 75%,#fff)}
.m-glass{stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:.8;fill:none}
.m-plaza{fill:color-mix(in srgb,var(--ink) 6%,var(--card))}
.m-fountain{fill:color-mix(in srgb,#7fc3cc 45%,var(--card))}
.m-water2{fill:#7fc3cc}
.m-clock{fill:var(--card);stroke:color-mix(in srgb,var(--ink) 40%,transparent);stroke-width:2}
.m-hand{stroke:color-mix(in srgb,var(--ink) 60%,transparent);stroke-width:1.5;fill:none;stroke-linecap:round}
.m-winband{fill:color-mix(in srgb,#ffd88a 55%,var(--card))}
.m-flagpole{fill:color-mix(in srgb,var(--ink) 55%,transparent)}
.m-truck{fill:color-mix(in srgb,#ffd88a 70%,var(--card))}
.m-crane path{stroke:color-mix(in srgb,var(--ink) 55%,transparent);stroke-width:3;fill:none;stroke-linecap:round}
.m-cable{stroke:color-mix(in srgb,var(--ink) 40%,transparent);stroke-width:1.5;fill:none}
.m-load{fill:color-mix(in srgb,var(--ink) 30%,var(--card))}
.m-scaffold{stroke:color-mix(in srgb,var(--ink) 25%,transparent);stroke-width:1;fill:none}
.m-track{stroke:color-mix(in srgb,var(--ink) 38%,transparent);stroke-width:3;fill:none;stroke-linecap:round}
.m-sleeper path{stroke:color-mix(in srgb,var(--ink) 28%,transparent);stroke-width:2;fill:none}
.m-sign{font:700 8.5px "Inter",sans-serif;letter-spacing:.1em;fill:color-mix(in srgb,var(--ink) 70%,transparent)}
.m-metro{stroke:#e4572e;stroke-width:3;stroke-dasharray:9 7;fill:none;opacity:.8}
.m-stop circle{fill:var(--card);stroke:#e4572e;stroke-width:3}
.mlab-metro{font:600 9px "Inter",sans-serif;letter-spacing:.18em;fill:#e4572e}
.m-house path{fill:color-mix(in srgb,var(--ink) 13%,var(--card));stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:1}
.m-lit rect{fill:#ffd88a}
.m-lamp circle:last-child{fill:#fff6dd}
.m-island{fill:color-mix(in srgb,#8fb98a 40%,var(--card))}
.m-car rect{fill:color-mix(in srgb,var(--ink) 42%,var(--card))}
.m-taxi rect{fill:#f6c445;stroke:color-mix(in srgb,var(--ink) 45%,transparent);stroke-width:1}
.m-light circle{fill:#8ed6a0}
.m-brick{fill:color-mix(in srgb,#d64550 34%,var(--card))}
.m-brick2{fill:color-mix(in srgb,#d64550 22%,var(--card))}
.m-saw{stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:1.5;fill:none}
.m-rubble{fill:color-mix(in srgb,#d64550 40%,var(--card));stroke:color-mix(in srgb,var(--ink) 28%,transparent);stroke-width:1}
.m-ball{fill:color-mix(in srgb,var(--ink) 55%,var(--card))}
.m-rubblebits circle{fill:color-mix(in srgb,#d64550 45%,var(--card))}
.m-ripple path{stroke:color-mix(in srgb,#ffffff 65%,transparent);stroke-width:2;fill:none;stroke-linecap:round;opacity:.5}
.m-compass circle:first-child{fill:var(--card);stroke:color-mix(in srgb,var(--ink) 20%,transparent);stroke-width:1.5}
.m-compass path{fill:color-mix(in srgb,var(--ink) 70%,transparent)}
.m-compass text{font:700 10px "Inter",sans-serif;fill:color-mix(in srgb,var(--ink) 60%,transparent)}
.m-scale path{stroke:color-mix(in srgb,var(--ink) 40%,transparent);stroke-width:2;fill:none}
.m-scale text{font:500 9px "Inter",sans-serif;fill:color-mix(in srgb,var(--ink) 55%,transparent)}
.dlab{font:700 12px "Sora",sans-serif;letter-spacing:.08em;fill:var(--ink)}
.dsub{font:500 10.5px "Inter",sans-serif;fill:var(--mut)}
/* district hover / focus */
.dist{cursor:pointer;transition:opacity .18s}
.dist:hover g,.dist:focus-visible g{opacity:1}
.citymap svg:hover .dist{opacity:.55}
.citymap svg .dist:hover{opacity:1}
.dist:hover .m-block,.dist:focus-visible .m-block{stroke:var(--d);stroke-width:2.5;fill:color-mix(in srgb,var(--d) 8%,var(--card))}
/* night palette for the map */
body.t-evening .m-road,body.t-night .m-road{fill:color-mix(in srgb,#ffffff 9%,var(--card))}
body.t-evening .m-block,body.t-night .m-block{fill:color-mix(in srgb,#ffffff 3%,var(--card))}
body.t-evening .m-bld,body.t-night .m-bld{fill:color-mix(in srgb,#ffffff 14%,var(--card))}
body.t-evening .m-bld2,body.t-night .m-bld2{fill:color-mix(in srgb,#ffffff 7%,var(--card))}
body.t-evening .m-dash path,body.t-night .m-dash path{stroke:color-mix(in srgb,var(--card) 70%,transparent)}

.plan-wrap{overflow-x:auto;margin:6px 0 4px;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow)}
.plan-table{width:100%;border-collapse:collapse;background:var(--card);font-size:14px;min-width:640px}
.plan-table th{text-align:left;font-family:"Sora",sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);padding:12px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--acc) 4%,var(--card))}
.plan-table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55}
.plan-table tr:last-child td{border-bottom:none}
.plan-table a{color:var(--acc);font-weight:600;text-decoration:none}
.plan-table a:hover{text-decoration:underline}
.rules{max-width:780px}
.rules li{margin:8px 0}
.rules b{color:var(--acc)}
@media(max-width:760px){
  .citymap svg{min-width:760px}
}
@media(max-width:640px){
  .plan-table{min-width:560px;font-size:13px}
  .plan-table th,.plan-table td{padding:10px 12px}
  .dlab{font-size:14px}
  .dsub{font-size:11.5px}
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;margin:16px 0 22px}
  .hero .hero-art{max-width:520px;justify-self:center;width:100%}
}
@media(max-width:640px){
  .site-header .bar{height:56px;gap:8px}
  .brand{font-size:16.5px}
  nav.mainnav a{padding:6px 9px;font-size:13px}
  .userchip > span:last-child{display:none}
  .hero h1{font-size:24px}
  .hud{gap:8px}
  .hud .stat{padding:7px 13px;font-size:12.5px}
  .hud .stat b{font-size:15.5px}
  button.play{width:auto}
  .lb-row{padding:10px 12px;gap:9px}
  .lb-row .rk{width:24px;font-size:14px}
  .modal{padding:22px 18px}
  section ul{margin-left:18px}
}
@media(min-width:700px) and (max-width:1080px){
  .lead,.hero p{max-width:none}
}
@media(min-width:1400px){
  .wrap{max-width:1160px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
}

/* home map teaser */
.maplink{display:inline-block;font-weight:600;font-size:14px;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 16px;
  box-shadow:3px 3px 0 color-mix(in srgb,var(--acc) 35%,transparent);transition:transform .12s,box-shadow .12s}
.maplink:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 color-mix(in srgb,var(--acc) 45%,transparent)}

/* guides */
.article{max-width:820px}
.article section{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px 24px;margin:14px 0;box-shadow:var(--shadow)}
.article section h2{margin-top:0;font-size:19px}
.article ul{padding-left:20px;margin:10px 0}
.article li{margin:7px 0;line-height:1.55}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;align-items:center}
.toc b{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin-right:4px}
.toc a{font-size:13px;font-weight:600;color:var(--acc2);text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.toc a:hover{border-color:var(--acc2)}
.guide-hero{display:flex;gap:20px;align-items:flex-start;margin:18px 0;flex-wrap:wrap}
.guide-hero img{width:230px;height:230px;object-fit:cover;border-radius:16px;box-shadow:var(--shadow-lg)}
.guide-cta{flex:1;min-width:240px;display:flex;flex-direction:column;gap:12px}
.tiertable{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;font-size:14px}
.tiertable th{background:color-mix(in srgb,var(--acc) 8%,var(--card));text-align:left;
  padding:8px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.tiertable td{padding:8px 12px;border-top:1px solid var(--line)}
.tiertable b{font-family:"Sora",sans-serif;color:var(--acc)}
details{border:1px solid var(--line);border-radius:12px;background:var(--card);
  padding:12px 16px;margin:8px 0;box-shadow:var(--shadow)}
details summary{font-weight:700;cursor:pointer;font-size:15px}
details[open] summary{color:var(--acc2);margin-bottom:6px}
details p{margin:6px 0 0;line-height:1.55;color:var(--mut)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px;box-shadow:var(--shadow)}
.chip:hover{border-color:var(--acc);color:var(--acc)}