/* TOKYO 3AM — a film still you can walk into */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Chakra+Petch:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@500;700&family=JetBrains+Mono:wght@500;700&display=swap');
:root{
  --ink:#030409; --ink2:#070912; --glass:rgba(8,10,20,.62); --line:rgba(150,170,230,.13); --line2:rgba(150,170,230,.24);
  --txt:#eef2fb; --mute:#8a95b4; --dim:#4f5a7a;
  --pink:#ff2e7e; --cyan:#2ee6ff; --gold:#ffc94a; --green:#4dffa6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{color:var(--txt);font-family:'Chakra Petch',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.jp{font-family:'Zen Kaku Gothic New',sans-serif;letter-spacing:.3em}

/* ================= HERO ================= */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:-4%;background:url(/img/hero.jpg) center 60%/cover no-repeat;animation:drift 38s ease-in-out infinite alternate;z-index:-3;filter:saturate(1.08) contrast(1.05)}
@keyframes drift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-2.5%,-1.5%)}}
#rain{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;mix-blend-mode:screen;opacity:.55}
.hero-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(3,4,9,.94) 0%,rgba(3,4,9,.78) 30%,rgba(3,4,9,.18) 62%,rgba(3,4,9,.25) 100%),
  linear-gradient(0deg,rgba(3,4,9,1) 0%,rgba(3,4,9,0) 28%),
  linear-gradient(180deg,rgba(3,4,9,.7) 0%,rgba(3,4,9,0) 18%)}
.grain{position:absolute;inset:-50%;z-index:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

.nav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:20px;padding:22px 44px}
.logo{display:flex;align-items:baseline;gap:8px;font-family:'Anton',sans-serif;font-size:28px;letter-spacing:.04em}
.logo b{font-weight:400;color:var(--pink);text-shadow:0 0 18px rgba(255,46,126,.8),0 0 40px rgba(255,46,126,.4)}
.chips{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.chip{display:flex;align-items:baseline;gap:8px;padding:9px 14px;border:1px solid var(--line2);border-radius:999px;background:rgba(3,4,9,.45);backdrop-filter:blur(10px);font-family:'JetBrains Mono',monospace;color:var(--txt)}
.chip i{font-style:normal;font-size:9.5px;letter-spacing:.18em;color:var(--mute)}
.chip b{font-size:14px}
.chip s{text-decoration:none;font-size:10px;color:var(--mute)}
#potv{color:var(--gold)} #clock{color:var(--cyan)}
.ca{cursor:pointer;font:inherit}
.ca:hover{border-color:var(--pink)}

.hero-copy{position:absolute;left:44px;bottom:14vh;z-index:4;max-width:660px}
.tate{position:absolute;left:-2px;top:-260px;writing-mode:vertical-rl;font-family:'Zen Kaku Gothic New';font-weight:700;font-size:15px;letter-spacing:.55em;color:rgba(255,255,255,.34)}
.kicker{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;color:var(--cyan);margin-bottom:18px}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.hero h1{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(64px,9.2vw,148px);line-height:.9;letter-spacing:.005em;text-transform:uppercase;text-shadow:0 8px 60px rgba(0,0,0,.6)}
.lede{margin:24px 0 30px;max-width:520px;color:#c9d1e6;font-size:17px;line-height:1.6}
.join{display:flex;gap:0;max-width:560px;border:1px solid rgba(255,46,126,.55);border-radius:14px;overflow:hidden;background:rgba(3,4,9,.55);backdrop-filter:blur(14px);box-shadow:0 0 0 6px rgba(255,46,126,.06),0 30px 80px -20px rgba(255,46,126,.35)}
.join input{flex:1;min-width:0;background:transparent;border:0;color:var(--txt);padding:20px 22px;font:600 18px 'Chakra Petch';letter-spacing:.05em;outline:0}
.join input::placeholder{color:#6b7594}
.join button{border:0;background:var(--pink);color:#fff;padding:0 28px;font:700 15px 'Chakra Petch';letter-spacing:.16em;cursor:pointer;white-space:nowrap;transition:background .2s}
.join button span{display:inline-block;transition:transform .2s}
.join button:hover{background:#ff4b92}
.join button:hover span{transform:translateX(4px)}
.fine{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;color:var(--mute)}

.ticker{position:absolute;left:0;right:0;bottom:0;z-index:4;height:46px;border-top:1px solid var(--line);background:rgba(3,4,9,.6);backdrop-filter:blur(8px);overflow:hidden;display:flex;align-items:center}
.track{display:flex;gap:56px;white-space:nowrap;animation:tick 60s linear infinite;padding-left:100%;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--mute)}
.track b{color:var(--txt);font-weight:700}
.track .p{color:var(--pink)} .track .c{color:var(--cyan)} .track .g{color:var(--gold)}
@keyframes tick{to{transform:translateX(-100%)}}

/* ================= GAME ================= */
.game{position:relative;min-height:100vh;padding:34px 28px 40px;isolation:isolate}
.game-bg{position:absolute;inset:0;z-index:-1;background:url(/img/aerial.jpg) center/cover;filter:blur(26px) brightness(.32) saturate(1.3);transform:scale(1.08)}
.game::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(3,4,9,.2),rgba(3,4,9,.9) 75%),linear-gradient(180deg,var(--ink),transparent 12%,transparent 88%,var(--ink))}
.stage{display:grid;grid-template-columns:300px minmax(0,1fr) 300px;gap:22px;max-width:1720px;margin:0 auto;align-items:start}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:18px;backdrop-filter:blur(18px) saturate(1.2);display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 80px -40px #000}
.glass header{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;color:var(--mute)}
.glass header em{font-style:normal;color:var(--dim)}
.glass header.sub{margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.board{list-style:none;display:flex;flex-direction:column;gap:6px}
.board li{display:grid;grid-template-columns:22px 10px 1fr auto auto;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.03);font-size:14px}
.board li.me{background:rgba(255,46,126,.12);box-shadow:inset 0 0 0 1px rgba(255,46,126,.45)}
.board .rk{font-family:'JetBrains Mono';font-size:11px;color:var(--dim)}
.board li:first-child .rk{color:var(--gold)}
.board .dot{width:10px;height:10px;border-radius:50%}
.board .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.board .bk{font-family:'JetBrains Mono';font-size:11px;color:var(--mute)}
.board .wt{font-family:'JetBrains Mono';font-size:14px;font-weight:700;color:var(--gold);min-width:24px;text-align:right}
.board .empty,.log .empty{grid-template-columns:1fr;color:var(--mute);font-size:13px;background:none;padding:6px 2px}
.dist{list-style:none;display:flex;flex-direction:column;gap:3px;max-height:44vh;overflow:auto;scrollbar-width:thin;scrollbar-color:#2a3350 transparent}
.dist li{display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;font-family:'JetBrains Mono';font-size:11.5px;transition:background .3s}
.dist li.on{background:rgba(255,255,255,.035)}
.dist li .th{width:38px;height:24px;border-radius:5px;background:#111 center/cover;filter:grayscale(1) brightness(.4)}
.dist li.on .th{filter:none}
.dist li.off{color:#333d58}
.dist li .by{font-size:10.5px;color:var(--dim)}
.dist li.on .nm{color:var(--txt)}

.mapwrap{display:flex;flex-direction:column;gap:10px}
#map{position:relative;width:100%;max-height:calc(100vh - 110px);aspect-ratio:1631/1578;margin:0 auto;border-radius:20px;overflow:hidden;background:#030409 url(/tokyo.jpg) center/100% 100% no-repeat;box-shadow:0 0 0 1px var(--line2),0 0 120px -30px rgba(255,46,126,.35),0 50px 120px -50px #000}
#fx{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.mapfoot{display:flex;justify-content:space-between;gap:12px;font-family:'JetBrains Mono';font-size:11px;color:var(--dim);padding:0 6px}
#coinv{color:var(--mute)}
.hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:8px 14px;border-radius:999px;background:rgba(3,4,9,.7);border:1px solid var(--line);font-family:'JetBrains Mono';font-size:11px;color:var(--mute);white-space:nowrap;transition:opacity .6s;pointer-events:none}
.spect{position:absolute;left:50%;top:18px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;border-radius:999px;background:rgba(3,4,9,.75);border:1px solid rgba(255,46,126,.4);backdrop-filter:blur(8px);flex-direction:row-reverse}
.spect span{font-family:'JetBrains Mono';font-size:11px;color:var(--mute)}
.spect button{border:0;background:var(--pink);color:#fff;font:700 12px 'Chakra Petch';letter-spacing:.14em;padding:9px 16px;border-radius:999px;cursor:pointer}
.spect.off,.hint.off{opacity:0;pointer-events:none}

/* the district card that pops when ground changes hands */
.card{position:absolute;right:18px;top:18px;width:300px;border-radius:14px;overflow:hidden;background:#05060d;border:1px solid var(--line2);box-shadow:0 30px 60px -20px #000;transform:translateY(-12px);opacity:0;transition:all .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.card.on{opacity:1;transform:none}
.card .ph{height:150px;background:center/cover}
.card .tx{padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.card .tx i{font-style:normal;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.2em;color:var(--mute)}
.card .tx b{font-family:'Anton';font-weight:400;font-size:26px;letter-spacing:.02em}
.card .tx span{font-size:13px;color:#c9d1e6}

.potbox{position:relative;padding:18px;border-radius:14px;background:linear-gradient(160deg,rgba(255,201,74,.12),rgba(255,46,126,.08));border:1px solid rgba(255,201,74,.28);overflow:hidden}
.potbox>span{display:block;font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.22em;color:var(--gold)}
.potbox b{display:inline-block;margin-top:6px;font-family:'Anton';font-weight:400;font-size:56px;line-height:1;color:var(--gold);text-shadow:0 0 30px rgba(255,201,74,.35)}
.potbox s{text-decoration:none;margin-left:6px;font-family:'JetBrains Mono';color:var(--mute)}
.potbox p{margin-top:10px;font-size:12.5px;line-height:1.6;color:#b9c2d9}
.potbox p b{font:700 12.5px 'Chakra Petch';color:var(--txt);margin:0;text-shadow:none}
.log{list-style:none;display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto;scrollbar-width:thin;scrollbar-color:#2a3350 transparent}
.log li{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);font-size:13px;line-height:1.45;border-left:2px solid var(--line2)}
.log li.win{border-left-color:var(--gold)}
.log .r{display:block;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;color:var(--dim);margin-bottom:2px}
.log .w{font-weight:700}
.log .s{color:var(--gold);font-family:'JetBrains Mono'}
.paid{font-family:'JetBrains Mono';font-size:11px;color:var(--green)}

/* the last train: the whole stage goes to the platform */
.freeze{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;overflow:hidden}
.freeze.on{display:flex;animation:fin .6s ease}
@keyframes fin{from{opacity:0}}
.fz-img{position:absolute;inset:-3%;background:url(/img/train.jpg) center/cover;filter:brightness(.55);animation:drift 14s ease-out forwards}
.freeze::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(3,4,9,.35),rgba(3,4,9,.92) 80%)}
.fz-in{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px}
.fz-in .t{font-family:'JetBrains Mono';font-size:13px;letter-spacing:.4em;color:var(--cyan)}
.fz-in .n{font-family:'Anton';font-weight:400;font-size:clamp(54px,9vw,130px);line-height:.95;text-transform:uppercase;text-shadow:0 0 50px rgba(255,46,126,.5)}
.fz-in .s{font-family:'JetBrains Mono';font-size:20px;color:var(--gold)}
.fz-in .c{font-family:'JetBrains Mono';font-size:12px;color:var(--mute)}
.fz-in input{margin-top:8px;width:440px;max-width:86vw;background:rgba(3,4,9,.7);border:1px solid var(--line2);color:var(--txt);padding:13px 16px;border-radius:10px;font:500 13px 'JetBrains Mono';text-align:center}
.fz-in button{background:var(--gold);color:#1a1200;border:0;padding:12px 26px;border-radius:10px;font:700 13px 'Chakra Petch';letter-spacing:.14em;cursor:pointer}

/* ================= NIGHT ================= */
.night{padding:70px 28px 30px;max-width:1720px;margin:0 auto}
.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rule{position:relative;min-height:330px;border-radius:18px;overflow:hidden;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;border:1px solid var(--line);isolation:isolate}
.rule::before{content:'';position:absolute;inset:0;z-index:-2;background:var(--img) center/cover;transition:transform 1.2s ease}
.rule::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,4,9,.1),rgba(3,4,9,.92) 70%)}
.rule:hover::before{transform:scale(1.06)}
.rule .jp{font-size:12px;color:var(--pink)}
.rule h3{font-family:'Anton';font-weight:400;font-size:30px;letter-spacing:.01em;text-transform:uppercase}
.rule p{font-size:14px;line-height:1.6;color:#c2cae0}
.strip{display:flex;gap:10px;margin-top:16px;overflow:hidden}
.strip div{flex:1;height:120px;border-radius:12px;background:center/cover;position:relative;filter:saturate(1.1)}
.strip div span{position:absolute;left:10px;bottom:8px;font-family:'Anton';font-size:15px;letter-spacing:.06em;text-shadow:0 2px 10px #000}
footer{display:flex;gap:22px;align-items:center;margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-family:'JetBrains Mono';font-size:11.5px;color:var(--dim)}
footer .jp{margin-right:auto}
footer a:hover{color:var(--txt)}

@media (max-width:1250px){
  .stage{grid-template-columns:1fr}
  .mapwrap{order:-1}
  .glass.left,.glass.right{max-width:none}
  .rules{grid-template-columns:repeat(2,1fr)}
  .strip div:nth-child(n+5){display:none}
}
@media (max-width:700px){
  .nav{padding:16px 18px;flex-wrap:wrap}
  .chips{width:100%;margin:0}
  .chip{padding:7px 10px}.chip.ca{display:none}
  .hero-copy{left:18px;right:18px;bottom:76px}
  .tate{display:none}
  .lede{font-size:15px}
  .join button{padding:0 16px;font-size:13px}
  .game{padding:20px 12px}
  .rules{grid-template-columns:1fr}
  .card{width:220px}.card .ph{height:100px}
}

/* ---- game v2 ---- */
.mine{font-family:'JetBrains Mono';font-size:12px;color:var(--gold);min-height:14px}
.board li.taxi .nm{color:var(--mute);font-weight:500}
.toast{position:absolute;left:50%;top:70px;transform:translate(-50%,-8px);padding:10px 18px;border-radius:999px;background:rgba(3,4,9,.85);border:1px solid var(--line2);font:700 13px 'Chakra Petch';letter-spacing:.06em;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.good{border-color:var(--green);color:var(--green)}
.toast.bad{border-color:var(--pink);color:var(--pink)}
.pad{display:none;position:absolute;right:14px;bottom:14px;width:132px;height:132px}
.pad button{position:absolute;width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:rgba(3,4,9,.7);color:var(--txt);font-size:16px;touch-action:none}
.pad button:nth-child(1){left:44px;top:0}.pad button:nth-child(2){left:0;top:44px}.pad button:nth-child(3){left:44px;top:88px}.pad button:nth-child(4){left:88px;top:44px}
@media (pointer:coarse){.pad{display:block}.hint{display:none}}