:root{
  --bg:#0c0e13; --bg2:#111319; --panel:#171a22; --panel2:#1e222c; --hover:#262b37;
  --stroke:#2c313d; --text:#e7e9ee; --dim:#9aa1ad; --faint:#5f6672;
  --yellow:#fcee0a; --yellow2:#b8ad12; --cyan:#19e3ff; --cyan2:#0e9bb0;
  --magenta:#ff2e88; --magenta2:#b01f5f; --green:#3ad17a; --orange:#ff9f1c;
  --red:#ff4d4d; --purple:#b388ff;
  --ui:"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --mono:"Consolas","SF Mono","Roboto Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--ui);line-height:1.55;
  -webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}

.landing{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px 20px;
  background:
    radial-gradient(900px 360px at 85% -10%,rgba(255,46,136,.16),transparent),
    radial-gradient(800px 360px at 0% 110%,rgba(25,227,255,.13),transparent),
    var(--bg);}
.hero{max-width:760px;width:100%;text-align:center}
.kicker{font-family:var(--mono);letter-spacing:5px;color:var(--cyan);font-size:.78rem;
  text-transform:uppercase}
.hero h1{font-size:3.2rem;margin:.2em 0 .1em;line-height:1.02;color:#fff;
  text-shadow:0 0 22px rgba(25,227,255,.25)}
.hero h1 b{color:var(--yellow)}
.hero .sub{color:var(--dim);max-width:60ch;margin:8px auto 0}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px;width:100%;
  margin-top:34px}
.tile{display:block;text-align:left;background:linear-gradient(160deg,#15151f,#0f1117);
  border:1px solid var(--stroke);border-radius:14px;padding:24px 22px;color:var(--text);
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.tile:hover{transform:translateY(-3px);text-decoration:none}
.tile.player:hover{border-color:var(--cyan);box-shadow:0 8px 30px rgba(25,227,255,.14)}
.tile.gm:hover{border-color:var(--yellow);box-shadow:0 8px 30px rgba(252,238,10,.14)}
.tile .ic{font-size:1.7rem}
.tile h2{margin:10px 0 4px;font-size:1.3rem;color:#fff}
.tile.player h2{color:var(--cyan)}
.tile.gm h2{color:var(--yellow)}
.tile p{margin:0;color:var(--dim);font-size:.95rem}
.tile .tag{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--stroke);border-radius:20px;padding:3px 9px}
.tile.gm .tag{color:var(--yellow2);border-color:var(--yellow2)}
.footnote{margin-top:34px;color:var(--faint);font-family:var(--mono);font-size:.72rem;
  text-align:center;max-width:60ch}
.landing{position:relative}
.landing::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);opacity:.35}
.hero h1{text-shadow:0 0 22px rgba(252,238,10,.28),0 0 60px rgba(255,46,136,.12)}
.sysline{font-family:var(--mono);font-size:.66rem;letter-spacing:2px;color:var(--faint);
  text-transform:uppercase;margin-bottom:18px;text-align:center}
.sysline b{color:var(--green);font-weight:400}
.sysline .cur{display:inline-block;width:.6em;height:1em;background:var(--green);vertical-align:-2px;
  margin-left:4px;animation:ncblink 1.1s steps(1) infinite}
@keyframes ncblink{50%{opacity:0}}
.cards.minimal{margin-top:40px;max-width:920px;grid-template-columns:repeat(3,1fr)}
.cards.minimal .tile{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:0;padding:32px 22px 28px}
.cards.minimal .tile .ic{font-size:2.8rem;line-height:1}
.cards.minimal .tile .ic svg{width:44px;height:44px;display:block}
.cards.minimal .tile.player .ic{color:var(--cyan)}
.cards.minimal .tile.gm .ic{color:var(--yellow)}
.cards.minimal .tile.tracker .ic{color:var(--magenta)}
.cards.minimal .tile .lbl{margin-top:16px;font-size:1.6rem;font-weight:800;letter-spacing:.5px;color:#fff}
.cards.minimal .tile.player .lbl{color:var(--cyan)}
.cards.minimal .tile.gm .lbl{color:var(--yellow)}
.cards.minimal .tile.tracker .lbl{color:var(--magenta)}
.cards.minimal .tile .sub{margin-top:10px;color:var(--dim);font-size:.9rem;line-height:1.45;max-width:32ch}
.tile.tracker:hover{border-color:var(--magenta);box-shadow:0 8px 30px rgba(255,46,136,.14)}
@media(max-width:680px){.cards{grid-template-columns:1fr}.cards.minimal{grid-template-columns:1fr;margin-top:30px;gap:14px}.hero h1{font-size:2.3rem}
  .cards.minimal .tile{min-height:0;flex-direction:row;gap:16px;justify-content:flex-start;text-align:left;padding:18px 20px}
  .cards.minimal .tile .lbl{margin-top:0;font-size:1.25rem}}

.gate-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(800px 340px at 50% -10%,rgba(252,238,10,.10),transparent),var(--bg)}
.gate{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--stroke);
  border-radius:14px;padding:28px 26px;text-align:center}
.gate .lock{font-size:2rem;color:var(--yellow)}
.gate .lock svg{display:inline-block}
.gate h1{font-size:1.5rem;margin:.3em 0 .1em;color:var(--yellow)}
.gate p{color:var(--dim);font-size:.9rem;margin:.2em 0 1.2em}
.gate input[type=password]{width:100%;padding:12px 14px;border-radius:9px;border:1px solid var(--stroke);
  background:var(--panel2);color:var(--text);font-size:1rem;font-family:var(--mono)}
.gate input[type=password]:focus{outline:none;border-color:var(--yellow)}
.btn{display:inline-block;border:none;cursor:pointer;border-radius:9px;font-weight:700;
  font-family:var(--ui);padding:11px 18px;font-size:.95rem}
.btn-primary{background:var(--yellow);color:#0a0a0f;width:100%;margin-top:12px}
.btn-primary:hover{background:var(--yellow2)}
.gate .err{color:var(--red);font-size:.85rem;min-height:1.2em;margin-top:10px}
.gate .home{display:inline-block;margin-top:16px;color:var(--faint);font-size:.8rem;font-family:var(--mono)}
.gate .busy{color:var(--cyan);font-size:.85rem;min-height:1.2em;margin-top:10px}

:root{
  --bg:#0a0b0e; --bg2:#0e1015; --panel:#12141b; --panel2:#181b23; --hover:#232733;
  --stroke:#2a2e38;
  --cyan:#00f0ff; --cyan2:#0aa8b8; --red:#ff003c;
  --disp:'Rajdhani',"Segoe UI",system-ui,sans-serif;
  --cut-tr:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  --cut-tr-sm:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);
  --cut-both:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
@keyframes cpjitter{
  0%{transform:translate(0,-3px)}
  25%{transform:translate(-2px,-3px) skewX(-2deg)}
  55%{transform:translate(2px,-3px)}
  80%{transform:translate(-1px,-3px) skewX(1deg)}
  100%{transform:translate(0,-3px)}
}
.hero h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:2px;
  font-size:3.6rem;
  text-shadow:2px 0 0 rgba(255,0,60,.45),-2px 0 0 rgba(0,240,255,.4),0 0 26px rgba(252,238,10,.22)}
.kicker{font-family:var(--disp);font-weight:600;letter-spacing:6px}
.cards.minimal .tile{border-radius:0;clip-path:var(--cut-tr);border-width:1px;
  background:linear-gradient(165deg,#14161d,#0d0f14);position:relative}
.cards.minimal .tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;opacity:.85}
.cards.minimal .tile.player::after{background:var(--cyan)}
.cards.minimal .tile.gm::after{background:var(--yellow)}
.cards.minimal .tile.tracker::after{background:var(--magenta)}
.cards.minimal .tile .lbl{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:1.45rem}
.tile:hover{animation:cpjitter .18s steps(2) 1;transform:translateY(-3px)}
.gate{border-radius:0;clip-path:var(--cut-both);border-top:3px solid var(--yellow);position:relative}
.gate h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:2px}
.gate input[type=password]{border-radius:0}
.btn{border-radius:0;clip-path:var(--cut-tr-sm);font-family:var(--disp);font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px}
.gate .home{text-transform:uppercase;letter-spacing:1px}

/* ==================== POLISH (finish + accessibility) ====================
   Subtle and additive only — no layout changes.
   1. Dark, themed scrollbars (the bright OS default clashes with the palette).
   2. Brand-colored text selection.
   3. Keyboard-only focus rings (:focus-visible — invisible to mouse users).
      Chamfered (clip-path) controls draw the ring INSIDE so it isn't clipped.
   4. A gentle pressed state + smooth hover transitions on controls. */
html{scrollbar-color:var(--stroke) var(--bg)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--stroke);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}
::-webkit-scrollbar-corner{background:transparent}

::selection{background:var(--yellow);color:#0a0a0f}

:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* clip-path'd controls: ring inside the shape so the chamfer doesn't cut it off */
.btn:focus-visible,.button:focus-visible,.choice:focus-visible,.tile:focus-visible,
.nav button:focus-visible,.idx button:focus-visible,.gmtop a:focus-visible,
.gmtop button.lk:focus-visible,.crow:focus-visible{outline-offset:-2px}

.btn:active,.button:active,.gmtop a:active,.gmtop button.lk:active{transform:translateY(1px)}

a,button{transition:color .12s ease,background-color .12s ease,border-color .12s ease,
  filter .12s ease,box-shadow .12s ease}
@media (prefers-reduced-motion:reduce){a,button{transition:none}}