/* TacLog — match-lobby HUD: night-blue ground with a faint scan grid, cut-corner panels,
   signal-amber for actions and highlights, cyan for data, win green / loss red. Deliberately dark-only. */
:root{
  --bg:#0E1117; --bg2:#121722; --grid:rgba(120,150,200,.06); --surface:#161B26; --raise:#1C2230; --ink:#E9EDF5; --ink2:#C2CAD8; --muted:#8C96AA; --line:#283042; --line2:#36405A;
  --accent:#FFC23D; --accent-ink:#1B1300; --accent-soft:rgba(255,194,61,.12); --accent-text:#FFC23D;
  --data:#4FD8F0; --data-soft:rgba(79,216,240,.12);
  --win:#43D18A; --win-soft:rgba(67,209,138,.13); --loss:#FF5A6E; --loss-soft:rgba(255,90,110,.13); --warn:#FFB347; --warn-soft:rgba(255,179,71,.12); --hl:#FFC23D;
  --cut:14px;
  --f-display:"Dela Gothic One","Zen Kaku Gothic New",system-ui,sans-serif;
  --f-body:"Zen Kaku Gothic New",system-ui,sans-serif;
  --f-mono:"Chakra Petch","Zen Kaku Gothic New",ui-monospace,monospace;
  --f-hand:"Chakra Petch","Zen Kaku Gothic New",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background-color:var(--bg);
  background-image:radial-gradient(1200px 500px at 85% -10%,rgba(79,216,240,.10),transparent 60%),radial-gradient(900px 500px at -10% 10%,rgba(255,194,61,.07),transparent 60%),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:auto,auto,32px 32px,32px 32px;background-attachment:fixed;
  color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.75}
a{color:var(--accent-text)}
[hidden]{display:none!important}
img{max-width:100%}
::selection{background:var(--accent);color:var(--accent-ink)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:12px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));background:rgba(14,17,23,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font:400 22px var(--f-display);letter-spacing:.02em;color:var(--ink);text-decoration:none}
.nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.nav a,.nav button.link{font:700 13px var(--f-body);letter-spacing:.04em;text-decoration:none;color:var(--ink2);padding:8px 12px;border:0;background:none;cursor:pointer;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"],.nav button.link[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.wrap{max-width:1000px;margin:0 auto;padding-block:32px 72px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));display:grid;gap:20px}
.narrow{max-width:740px}
h1{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,5vw,38px);line-height:1.3;margin:0;text-wrap:balance;letter-spacing:.02em;word-break:keep-all;overflow-wrap:anywhere}
h2{font-size:20px;font-weight:900;margin:0;letter-spacing:.02em}
h3{font-size:16px;margin:0}
p{margin:0}
.lead{font-size:16px;color:var(--ink2);max-width:62ch}
.muted{color:var(--muted)} .small{font-size:13px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{font:600 12px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--data)}
/* cut-corner panel */
.card{position:relative;background:linear-gradient(180deg,var(--raise),var(--surface));border:1px solid var(--line);padding:24px;display:grid;gap:14px;min-width:0;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.card::before{content:"";position:absolute;right:0;top:0;width:var(--cut);height:var(--cut);background:linear-gradient(225deg,var(--line2) 0 50%,transparent 50%)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
label{display:grid;gap:6px;font-size:14px;font-weight:700;min-width:0}
input,select,textarea{font:400 15px var(--f-body);color:var(--ink);background:#0F141D;border:1px solid var(--line2);border-radius:2px;padding:11px 13px;width:100%;min-width:0}
input::placeholder,textarea::placeholder{color:#677189}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent);padding:0}
input[type=range]{padding:0;accent-color:var(--accent)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 24px;border:1px solid var(--line2);background:var(--raise);color:var(--ink);font:700 15px var(--f-body);letter-spacing:.04em;text-decoration:none;cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{box-shadow:0 0 24px rgba(255,194,61,.35)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--loss)}
.btn.small{min-height:38px;padding:0 14px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.check{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);background:rgba(255,255,255,.015);cursor:pointer;font-weight:400}
.check:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.check strong{display:block;font-size:15px}
.pill{display:inline-flex;align-items:center;gap:4px;font:700 12px var(--f-body);letter-spacing:.03em;padding:3px 10px;background:var(--accent-soft);color:var(--accent-text);white-space:nowrap;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.pill.win{background:var(--win-soft);color:var(--win)} .pill.loss{background:var(--loss-soft);color:var(--loss)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.mute{background:rgba(255,255,255,.05);color:var(--muted)}
.pill.data{background:var(--data-soft);color:var(--data)}
.notice{padding:14px 16px;background:var(--warn-soft);color:var(--ink);border-left:3px solid var(--warn);font-size:14px}
.ok{padding:14px 16px;background:var(--win-soft);color:var(--win);border-left:3px solid var(--win);font-weight:700}
.empty{border:1px dashed var(--line2);padding:28px 18px;text-align:center;color:var(--muted);display:grid;gap:6px}
.empty strong{color:var(--ink);font-size:16px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:400 14px var(--f-body);padding:8px 12px;border:1px solid var(--line);background:var(--raise);color:var(--ink);cursor:pointer;text-align:left;line-height:1.5}
.chip:hover{border-color:var(--accent)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font:600 12px var(--f-mono);letter-spacing:.08em;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:7px 8px;border-bottom:1px solid var(--line)}
.tbl td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.tblbox{overflow-x:auto;max-height:440px;overflow-y:auto}
.steps{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:6px}
.steps span{display:block;height:5px;background:var(--line);transform:skewX(-20deg)}
.steps span.on{background:var(--accent);box-shadow:0 0 10px rgba(255,194,61,.5)}
.steplabels{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:6px;font:600 12px var(--f-body);color:var(--muted)}
.steplabels b{color:var(--ink)}
footer.site{border-top:1px solid var(--line);padding-block:20px 32px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));font-size:12px;color:var(--muted);display:grid;gap:6px;max-width:1000px;margin:0 auto}
footer.site a{color:var(--ink2)}
/* game picker */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.game{position:relative;display:grid;gap:6px;padding:16px 16px 14px;border:1px solid var(--line);background:linear-gradient(160deg,var(--raise),var(--surface));cursor:pointer;text-align:left;color:var(--ink);font-family:var(--f-body);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.game .gname{font:400 17px var(--f-display);letter-spacing:.02em}
.game .gsub{font-size:12px;color:var(--muted)}
.game .gbar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gc,var(--line2))}
.game input{position:absolute;opacity:0;pointer-events:none}
.game:has(input:checked){border-color:var(--accent);background:linear-gradient(160deg,rgba(255,194,61,.16),var(--surface));box-shadow:inset 0 0 0 1px var(--accent)}
.game:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.game:has(input:disabled){cursor:not-allowed;opacity:.6}
.gtabs{display:flex;gap:6px;flex-wrap:wrap}
.gtab{font:700 13px var(--f-body);padding:6px 14px;border:1px solid var(--line);background:var(--raise);color:var(--ink2);cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.gtab[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media (max-width:560px){.card{padding:18px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.hand{font-family:var(--f-hand);font-weight:600}
.tape{display:inline-block;font:700 12px var(--f-mono);letter-spacing:.14em;padding:4px 12px;background:var(--accent);color:var(--accent-ink);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.mark{color:var(--accent);text-shadow:0 0 24px rgba(255,194,61,.35)}
/* affiliate ads (PR) */
.adbox{display:grid;gap:10px;padding:14px 16px;border:1px dashed var(--line2);border-radius:10px;background:var(--bg2)}
.adhead{display:flex;align-items:center;gap:8px}.adhead a{margin-left:auto}
.adpr{font:700 11px var(--f-mono);letter-spacing:.08em;padding:2px 6px;border:1px solid var(--muted);border-radius:4px;color:var(--muted)}
.adgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.adcard{position:relative;display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);text-decoration:none}
.adcard:hover{border-color:var(--accent)}
.adcat{font:600 11px var(--f-mono);color:var(--data)}.adprice{font:600 13px var(--f-mono)}
.adimg{display:block;width:auto;max-width:100%;height:auto;border-radius:6px;margin:2px 0}
.adrail{position:fixed;top:96px;width:300px;max-height:calc(100vh - 120px);overflow:auto;display:grid;gap:10px;z-index:5}
.adrail .adcard{padding:10px}
@media print{.adrail{display:none!important}}
.adrail.r{right:16px}.adrail.l{left:16px}
.adwidebox{display:grid;justify-items:center;gap:6px;padding:10px 0}.adwidebox .adpr{justify-self:center}
.adwide{position:relative;display:block;max-width:100%}.adwide img{display:block;max-width:100%;height:auto}
@media print{.adwidebox{display:none!important}}