/* EGOIST — printed sports manga. Paper, ink, one red spot. */
:root{
  --paper:#f1e9d6; --paper2:#e7dcc2; --paper3:#f8f3e6;
  --ink:#141210; --ink2:#3a3733; --ink3:#6b655c;
  --red:#d81e2c; --blue:#17356b;
  --display:"Anton","Archivo Black",Impact,"Arial Black",sans-serif;
  --body:"Zen Kaku Gothic New",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body)}
body{min-height:100vh;overflow-x:hidden}
::selection{background:var(--red);color:#fff}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── print texture ─────────────────────────────────────────────────────── */
.paper-grain{position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.42;mix-blend-mode:multiply;
  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='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E")}
.reg-marks{position:fixed;inset:12px;pointer-events:none;z-index:79}
.reg-marks i{position:absolute;width:18px;height:18px;border:1px solid var(--ink);opacity:.35}
.reg-marks i:after{content:"";position:absolute;inset:7px 0;border-top:1px solid var(--ink)}
.reg-marks i:nth-child(1){left:0;top:0}.reg-marks i:nth-child(2){right:0;top:0}
.reg-marks i:nth-child(3){left:0;bottom:0}.reg-marks i:nth-child(4){right:0;bottom:0}

/* ── masthead ─────────────────────────────────────────────────────────── */
.masthead{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:clamp(12px,3vw,48px);
  padding:18px clamp(16px,4vw,56px) 12px;border-bottom:3px solid var(--ink);position:relative;z-index:20;background:var(--paper)}
.brand{font-family:var(--display);font-size:clamp(46px,8.2vw,104px);line-height:.78;letter-spacing:-.02em;
  text-decoration:none;display:inline-block;transform:translateY(2px)}
.brand span{color:var(--red)}
.brand:hover{text-decoration:none;transform:translateY(0) rotate(-.4deg)}
.mh-mid{padding-bottom:5px;border-left:2px solid var(--ink);padding-left:clamp(10px,2vw,22px)}
.issue{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;margin:0 0 7px;color:var(--ink2)}
.issue b{color:var(--red)}
.strap{font-size:clamp(11px,1.15vw,14px);line-height:1.35;margin:0;max-width:44ch}
.mh-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding-bottom:4px}
.who{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px solid var(--red);padding-bottom:3px}
.icon-btn{background:none;border:2px solid var(--ink);width:34px;height:34px;cursor:pointer;font-family:var(--mono)}
.icon-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ── buttons / inputs ─────────────────────────────────────────────────── */
.btn{font-family:var(--display);font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  padding:12px 16px;border:2px solid var(--ink);background:var(--paper3);cursor:pointer;
  box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s,background .12s,color .12s;text-decoration:none;display:inline-block}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:transparent}
.btn.tiny{font-size:10px;padding:8px 10px;box-shadow:none}
.btn.wide{width:100%;text-align:center}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none}
.btn.sel{background:var(--red);border-color:var(--red);color:#fff}
.field{display:grid;gap:5px;margin:0 0 12px}
.field label{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2)}
.field input,.field select,.field textarea{border:2px solid var(--ink);background:var(--paper3);padding:10px 11px;
  font-family:var(--mono);font-size:13px;outline:none;border-radius:0;box-shadow:inset 2px 2px 0 rgba(20,18,16,.10)}
.field input::placeholder{color:var(--ink3);letter-spacing:.08em}
.field input:focus,.field select:focus{border-color:var(--red);box-shadow:3px 3px 0 var(--red)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}

/* ── layout ───────────────────────────────────────────────────────────── */
.view{max-width:1480px;margin:0 auto;padding:clamp(14px,2.6vw,30px) clamp(14px,4vw,56px) 48px;min-height:62vh}
.view > .panel,.view > .cover,.view > .lobby,.view > .room,.view > .match,.view > .codex,.view > .result{
  animation:feed .44s steps(5,end) both}
.panel{border:2px solid var(--ink);background:var(--paper3);padding:clamp(14px,2vw,22px);box-shadow:var(--shadow)}
.panel.flat{box-shadow:none}
.panel h2,.panel h3{margin:0 0 10px}
.section-label{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink2);
  border-bottom:2px solid var(--ink);padding-bottom:5px;margin:0 0 12px;display:flex;justify-content:space-between;gap:8px}
.kicker{font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;margin:0 0 8px;color:var(--red)}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em;line-height:.92}
h2{font-size:clamp(24px,3.2vw,40px)}
h3{font-size:clamp(16px,1.8vw,22px)}
p{line-height:1.45}
.muted{color:var(--ink3)}
.mono{font-family:var(--mono)}
.center{text-align:center}
.hr{height:2px;background:var(--ink);margin:14px 0}

/* ── cover / auth ─────────────────────────────────────────────────────── */
.cover{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:0;border:3px solid var(--ink);
  background:var(--paper3);box-shadow:10px 10px 0 var(--ink);overflow:hidden}
.cover-art{position:relative;border-right:3px solid var(--ink);min-height:min(66vh,620px);overflow:hidden;background:var(--paper2)}
.cover-art img.hero{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:contrast(1.05)}
.cover-form .tabs{margin-top:14px}
.cover-art .bigword{text-shadow:4px 4px 0 rgba(20,18,16,.28)}
.cover-art .bigword{position:absolute;left:18px;bottom:6px;font-family:var(--display);font-size:clamp(58px,9vw,120px);
  line-height:.8;color:var(--paper);mix-blend-mode:screen;text-shadow:4px 4px 0 var(--ink);letter-spacing:-.03em}
.cover-art .stamp{position:absolute;right:14px;top:14px;transform:rotate(7deg);border:3px solid var(--red);color:var(--red);
  font-family:var(--display);text-align:center;font-size:12px;line-height:1.05;padding:7px 9px;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--red)}
.cover-form{padding:clamp(20px,3vw,38px);display:flex;flex-direction:column;justify-content:center}
.cover-form h1{font-size:clamp(40px,5vw,66px);margin:0 0 4px}
.cover-form .dek{font-size:14px;line-height:1.5;margin:0 0 18px;color:var(--ink2);max-width:40ch}
.tabs{display:flex;border:2px solid var(--ink);margin:0 0 16px}
.tabs button{flex:1;border:0;background:var(--paper3);padding:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.tabs button.on{background:var(--ink);color:var(--paper)}
.cover-foot{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--ink3);margin-top:14px;line-height:1.6}

/* ── lobby ────────────────────────────────────────────────────────────── */
.lobby{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:16px}
.hero-strip{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;
  border-bottom:3px solid var(--ink);padding-bottom:12px}
.hero-strip h1{font-size:clamp(38px,5.4vw,74px);margin:0}
.hero-strip .dek{max-width:52ch;margin:6px 0 0;font-size:13px;color:var(--ink2)}
.ticket{border:2px dashed var(--ink);background:var(--paper3);padding:12px;min-width:220px;box-shadow:var(--shadow-sm)}
.ticket .tag{font-family:var(--mono);font-size:9px;letter-spacing:.22em}
.ticket b{display:block;font-family:var(--display);font-size:28px;margin:4px 0}
.rooms-list{display:grid;gap:8px;margin-top:10px}
.room-row{display:grid;grid-template-columns:74px 1fr auto auto;gap:10px;align-items:center;border-bottom:1px dotted var(--ink3);padding:8px 0}
.room-row .code{font-family:var(--display);font-size:20px;letter-spacing:.05em}
.room-row .meta{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--ink3)}
.daily-card{border:3px solid var(--ink);background:var(--ink);color:var(--paper);padding:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.daily-card:after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23f1e9d6' opacity='.18'/%3E%3C/svg%3E");pointer-events:none}
.daily-card h3{color:var(--paper);font-size:clamp(26px,3vw,38px);margin:0 0 6px}
.daily-card .kicker{color:#ff8a8f}
.daily-card .btn{background:var(--red);border-color:var(--red);color:#fff}
.daily-card p{font-size:12px;color:#e8dfcb;max-width:34ch}
.board{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:11px}
.board li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;border-bottom:1px dotted var(--ink3);padding:5px 0}
.board b{color:var(--red)}

/* ── room / team sheet ────────────────────────────────────────────────── */
.room{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}
.sheet{border:3px solid var(--ink);background:var(--paper3);box-shadow:var(--shadow);overflow:hidden}
.sheet-head{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:3px solid var(--ink);
  padding:10px 14px;background:var(--paper2)}
.sheet-code{font-family:var(--display);font-size:26px;letter-spacing:.08em}
.sheet-body{padding:14px}
.teams{display:grid;grid-template-columns:1fr 1fr;gap:0}
.team-col{padding:10px 12px}
.team-col:first-child{border-right:2px solid var(--ink)}
.team-title{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:20px;
  border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:10px}
.team-title .stance{font-family:var(--mono);font-size:8px;letter-spacing:.18em;border:1px solid var(--ink);padding:3px 5px}
.seat{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;border-bottom:1px dotted var(--ink3);padding:9px 0}
.seat .coin{width:56px;height:66px;border:2px solid var(--ink);background:var(--paper2);position:relative;overflow:hidden}
.seat .coin img{width:100%;height:100%;object-fit:cover}
.seat .coin.empty{display:grid;place-items:center;font-family:var(--display);font-size:22px;color:var(--ink3)}
.seat .who-name{font-weight:700;font-size:13px;line-height:1.15}
.seat .who-char{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--ink3);text-transform:uppercase}
.seat .tag{font-family:var(--mono);font-size:8px;letter-spacing:.14em;border:1px solid var(--ink);padding:2px 4px}
.seat .tag.host{background:var(--red);border-color:var(--red);color:#fff}
.seat .tag.ai{background:var(--ink);color:var(--paper)}
.start-bar{display:flex;gap:10px;align-items:center;justify-content:space-between;border-top:3px solid var(--ink);
  padding:12px 14px;background:var(--paper2);flex-wrap:wrap}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:56vh;overflow:auto;padding:2px}
.pick{position:relative;border:2px solid var(--ink);background:var(--paper2);cursor:pointer;padding:0;text-align:left;
  box-shadow:3px 3px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.pick:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.pick img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-bottom:2px solid var(--ink)}
.pick span{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.06em;padding:4px 5px;line-height:1.2;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick.sel{outline:4px solid var(--red);outline-offset:-4px}
.pick.taken{opacity:.3;filter:grayscale(1);cursor:not-allowed}
.pick.taken:hover{transform:none;box-shadow:3px 3px 0 var(--ink)}
.pick .tier{position:absolute;top:3px;left:3px;background:var(--paper);border:1px solid var(--ink);color:var(--ink);font-family:var(--mono);font-size:8px;padding:1px 3px}
.chat{display:flex;flex-direction:column;height:100%;min-height:300px}
.chat .log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:7px;padding:2px;max-height:320px}
.chat .msg{font-size:11.5px;line-height:1.35;border-bottom:1px dotted var(--ink3);padding-bottom:5px}
.chat .msg b{font-family:var(--mono);font-size:9px;letter-spacing:.1em;margin-right:4px;color:var(--red)}
.chat .msg.system{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink3)}
.chat form{display:flex;gap:6px;margin-top:8px}
.chat input{flex:1;border:2px solid var(--ink);background:var(--paper3);padding:8px;font-family:var(--mono);font-size:11px;border-radius:0}

/* ── match ────────────────────────────────────────────────────────────── */
.match{display:grid;grid-template-columns:minmax(0,1.52fr) minmax(330px,.48fr);gap:16px}
.match-main{min-width:0}
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;border:3px solid var(--ink);
  background:var(--paper2);padding:10px 14px;box-shadow:var(--shadow-sm);margin-bottom:12px}
.scoreboard .side{display:grid;gap:2px}
.scoreboard .side.r{text-align:right}
.scoreboard .tname{font-family:var(--display);font-size:clamp(14px,1.5vw,19px);letter-spacing:.02em;line-height:1;text-transform:uppercase}
.scoreboard .tchar{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase}
.scoreboard .score{font-family:var(--display);font-size:clamp(38px,5vw,60px);line-height:.8;display:flex;gap:9px;align-items:baseline}
.scoreboard .score i{font-style:normal;font-size:.42em;opacity:.35}
.scoreboard .score b:last-child{color:var(--red)}
.meta-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase}
.meta-row .tag{border:1px solid var(--ink);padding:3px 6px}
.meta-row .tag.hot{background:var(--red);border-color:var(--red);color:#fff}
.meta-row .tag.ink{background:var(--ink);color:var(--paper)}

.pitch-panel{border:3px solid var(--ink);background:var(--paper3);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.zone-strip{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:var(--paper);
  padding:5px 10px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.zone-strip b{font-family:var(--display);font-size:15px;letter-spacing:.04em}
.pitch-panel .panel-tag{position:absolute;left:8px;top:8px;z-index:3;font-family:var(--mono);font-size:8px;letter-spacing:.16em;
  background:var(--paper);border:1px solid var(--ink);padding:3px 5px}
/* the active zone sits dead centre: the camera slides, it never crops.
   The SVG is drawn at 300% width and shifted a full zone at a time, so the visible
   frame is always pitch — no dead margin, no half a goal frame. */
/* the camera is one zone wide; its height follows the 253.33:470 zone, capped so
   the action bar and dice tray stay above the fold. */
/* ── the frame ───────────────────────────────────────────────────────────────
   The pitch is 760x470 and the panel is wider than it is tall, so the frame crops
   VERTICALLY only. aspect-ratio 760/232 makes the visible band exactly viewBox
   y 119..351 — the band every token is laid out inside (SAFE in app.js) — at any
   panel width. There is no horizontal camera any more: the full width of the
   pitch is always on screen, and the active zone is shown by its red column, so
   sliding can never push the pitch or a token out of the frame. */
.pitch-cam{position:relative;overflow:hidden;width:100%;aspect-ratio:760/232;
  max-height:520px}
.pitch-cam svg{position:absolute;left:0;top:50%;width:100%;height:auto;max-width:none;margin:0;
  transform:translateY(-50%)}
.pitch-foot{display:flex;justify-content:space-between;gap:8px;border-top:2px solid var(--ink);padding:6px 10px;
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;flex-wrap:wrap}
.ball-note{color:var(--red)}

.actionbar{border:3px solid var(--ink);background:var(--paper3);margin-top:12px;box-shadow:var(--shadow)}
.action-head{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:2px solid var(--ink);
  padding:8px 10px;background:var(--paper2)}
.action-head b{font-family:var(--display);font-size:16px;letter-spacing:.02em}
.action-head .turn{font-family:var(--mono);font-size:9px;letter-spacing:.14em}
.action-body{padding:10px}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.act{display:grid;grid-template-columns:1fr auto;gap:2px;align-items:center;border:2px solid var(--ink);background:var(--paper3);
  padding:9px 10px;cursor:pointer;text-align:left;box-shadow:3px 3px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.act:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.act b{font-family:var(--display);font-size:16px;letter-spacing:.03em}
.act span{font-family:var(--mono);font-size:9px;color:var(--ink3)}
.act .num{font-family:var(--display);font-size:26px;color:var(--red);line-height:1}
.act.dis{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.intents{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.intent{border:2px solid var(--ink);background:var(--paper3);padding:8px;cursor:pointer;text-align:left;box-shadow:2px 2px 0 var(--ink)}
.intent b{font-family:var(--display);font-size:14px;display:block;letter-spacing:.04em}
.intent span{font-family:var(--mono);font-size:8px;color:var(--ink3);line-height:1.3;display:block;margin-top:3px}
.intent.sel{background:var(--red);border-color:var(--red);color:#fff}
.intent.sel span{color:#ffe1e2}
.ego-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:10px;border-top:2px solid var(--ink);padding-top:10px}
.ego-meter{display:flex;gap:3px}
.ego-meter i{display:block;width:18px;height:14px;border:2px solid var(--ink);background:var(--paper)}
.ego-meter i.on{background:var(--red);border-color:var(--red)}
.ego-label{font-family:var(--mono);font-size:8px;letter-spacing:.16em}
.burst{border:2px solid var(--ink);background:var(--paper3);padding:5px 8px;font-family:var(--display);font-size:12px;cursor:pointer}
.burst.on{background:var(--ink);color:var(--paper)}
.burst:disabled{opacity:.35;cursor:not-allowed}

/* cards */
.deck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.card{position:relative;border:3px solid var(--ink);background:var(--paper3);box-shadow:var(--shadow-sm);cursor:pointer;
  padding:0;text-align:left;animation:deal .38s steps(4,end) both;transition:transform .12s,box-shadow .12s}
.card:nth-child(2){animation-delay:.07s}.card:nth-child(3){animation-delay:.14s}
.card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.card.armed{outline:4px solid var(--red);outline-offset:-4px;transform:translate(-2px,-2px)}
.card.spent{opacity:.45}
.card .c-top{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--ink);
  padding:4px 6px;font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;text-transform:uppercase}
.card .c-top .pips{display:flex;gap:2px}
.card .c-top .pips i{width:6px;height:6px;border:1px solid var(--ink);border-radius:50%}
.card .c-top .pips i.on{background:var(--red);border-color:var(--red)}
.card .c-art{height:74px;overflow:hidden;border-bottom:2px solid var(--ink);position:relative;background:var(--paper2)}
.card .c-art img{width:100%;height:100%;object-fit:cover;object-position:top;filter:contrast(1.05)}

.card h4{font-family:var(--display);font-size:15px;line-height:.9;margin:5px 6px 3px;letter-spacing:-.01em}
.card p{font-size:9px;line-height:1.3;margin:0 6px 7px;color:var(--ink2);min-height:34px}
.card .c-foot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:7px;letter-spacing:.14em;
  border-top:1px solid var(--ink);padding:3px 6px;color:var(--ink3);text-transform:uppercase}
.card.passive{cursor:default}
.card.passive .c-foot{color:var(--red)}
.card.passive.idle{opacity:.62}
.card.passive.idle .c-art img{filter:grayscale(1) contrast(.9);opacity:.55}
.card.passive.live{border-color:var(--ink);box-shadow:inset 0 0 0 3px var(--red)}
.card.passive.live .c-foot{color:#fff;background:var(--red)}
.card .live-dot{font-family:var(--mono);font-size:6.5px;letter-spacing:.14em;border:1px solid currentColor;
  padding:1px 4px;color:var(--ink3)}
.card .live-dot.on{background:var(--red);border-color:var(--red);color:#fff}

/* dice tray */
.dice-wrap{border:2px solid var(--ink);background:var(--paper2);margin-top:10px;padding:8px}
.dice-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.dice-tray{display:flex;gap:8px;flex-wrap:wrap;min-height:52px;align-items:center}
.die-slot{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:center;border:1px solid var(--ink);padding:3px 5px;background:var(--paper3)}
.die{width:34px;height:34px;border:2px solid var(--ink);background:var(--paper);display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);padding:3px;box-shadow:2px 2px 0 var(--ink);animation:stamp .32s steps(3,end) both}
.die i{display:block;background:var(--ink);border-radius:50%;margin:1.5px;visibility:hidden}
.die i.on{visibility:visible}
.die-slot .dl{font-family:var(--mono);font-size:7px;line-height:1.25;letter-spacing:.06em;text-transform:uppercase}
.die-slot .dl b{display:block;font-size:9px}
.die-slot .dl em{font-style:normal;color:var(--red)}
.dice-empty{font-family:var(--mono);font-size:9px;color:var(--ink3);letter-spacing:.1em}

/* rail */
.rail{display:grid;gap:12px;align-content:start}
.rail .panel{padding:12px}
.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start}
.vs-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:6px}
.versus .p{display:grid;gap:3px;text-align:center}
.versus .p img{max-height:120px}
.versus .p .st{font-family:var(--mono);font-size:6.5px;letter-spacing:.02em;color:var(--ink3)}
.versus img{width:100%;aspect-ratio:3/4;object-fit:cover;border:2px solid var(--ink);filter:contrast(1.05)}
.versus .p b{font-family:var(--display);font-size:13px;line-height:1}
.versus .p span{font-family:var(--mono);font-size:7.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em}
.versus .vs{font-family:var(--display);font-size:24px;color:var(--red);transform:rotate(-8deg)}
.rail-log{max-height:250px;overflow:auto;display:grid;gap:6px;font-size:10.5px;line-height:1.32}
.rail-log .l{border-bottom:1px dotted var(--ink3);padding-bottom:4px;color:var(--ink2)}
.rail-log .l b{font-family:var(--mono);font-size:8px;letter-spacing:.1em;margin-right:4px;color:var(--ink)}
.rail-log .l.goal{color:var(--red);font-weight:700}
.rail-log .l.flow{color:var(--blue);font-weight:700}
.rail-log .l.foul{color:var(--red)}
.rail-log .l.fulltime{font-family:var(--display);font-size:13px;color:var(--ink);border-bottom:2px solid var(--ink)}
.ledger{font-family:var(--mono);font-size:8px;line-height:1.5;max-height:150px;overflow:auto;color:var(--ink3)}
.ledger b{color:var(--ink)}
.stance-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.stance-btn{border:1px solid var(--ink);background:var(--paper3);padding:5px 4px;font-family:var(--mono);font-size:7px;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-align:center}
.stance-btn.on{background:var(--ink);color:var(--paper)}
.stance-btn:disabled{opacity:.4;cursor:not-allowed}
.chat-mini{display:grid;gap:5px;max-height:150px;overflow:auto;font-size:10px}
.chat-mini div{border-bottom:1px dotted var(--ink3);padding-bottom:3px}
.chat-mini b{font-family:var(--mono);font-size:8px;color:var(--red);margin-right:3px}
.chat-mini form{display:flex;gap:4px;margin-top:5px}
.chat-mini input{flex:1;border:1px solid var(--ink);background:var(--paper3);padding:5px;font-size:10px;border-radius:0;font-family:var(--mono)}

/* ── overlay / impact ─────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(20,18,16,.86);padding:18px;animation:fade .18s steps(2,end) both}
.overlay .panel{max-width:540px;width:100%;box-shadow:10px 10px 0 var(--red)}
.overlay .close{position:absolute;right:14px;top:10px;background:none;border:0;font-family:var(--display);font-size:28px;cursor:pointer;color:var(--ink)}
.impact{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:var(--ink);color:var(--paper);overflow:hidden;pointer-events:none}
.impact .speed{position:absolute;inset:-20%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg stroke='%23f1e9d6' stroke-width='2' opacity='.35'%3E%3Cpath d='M0 200 L400 200M200 0 L200 400M0 0 L400 400M400 0 L0 400'/%3E%3C/g%3E%3C/svg%3E");animation:zoom .5s steps(4,end) both}
.impact .word{position:relative;font-family:var(--display);font-size:clamp(64px,16vw,180px);line-height:.8;letter-spacing:-.02em;text-align:center;color:var(--paper);text-shadow:6px 6px 0 var(--red);animation:stamp .42s steps(5,end) both}
.impact .sub{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.3em;margin-top:10px;text-align:center;color:#ffb3b7}
.impact.goal .word{color:var(--red);text-shadow:6px 6px 0 var(--paper)}
.impact.goal{background:var(--paper)}
.impact.goal:before{content:"";position:absolute;width:92vmax;height:92vmax;border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(216,30,44,.22) 0 2px,transparent 2px 16px);
  animation:zoom .55s steps(5,end) both;opacity:.55}
.impact.goal .speed{opacity:.45;filter:invert(1)}
.impact.flash{animation:invert .5s steps(2,end) both}
.shout{position:fixed;inset:0;z-index:70;pointer-events:none;display:grid;place-items:center;overflow:hidden}
.shout .sfx{position:absolute;font-family:var(--display);color:var(--red);font-size:clamp(54px,11vw,120px);line-height:.8;
  transform:rotate(-8deg);text-shadow:4px 4px 0 var(--ink);animation:sfx .8s steps(5,end) both;letter-spacing:-.02em}
.shout .sfx small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--ink);text-shadow:none;margin-top:8px}

/* ── codex ────────────────────────────────────────────────────────────── */
.codex-head{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;border-bottom:3px solid var(--ink);padding-bottom:10px;margin-bottom:14px}
.codex-head h1{font-size:clamp(36px,5vw,64px);margin:0}
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.idx{border:2px solid var(--ink);background:var(--paper3);box-shadow:var(--shadow-sm);display:grid;grid-template-columns:88px 1fr;min-height:150px}
.idx .face{border-right:2px solid var(--ink);overflow:hidden}
.idx .face img{width:100%;height:100%;object-fit:cover}
.idx .txt{padding:8px}
.idx h3{margin:0 0 2px;font-size:18px}
.idx .role{font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:var(--red);text-transform:uppercase}
.idx .stats{font-family:var(--mono);font-size:8px;color:var(--ink3);margin:4px 0}
.idx .mini{font-size:8.5px;line-height:1.25;color:var(--ink2);margin:0}
.idx .mini b{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--ink);margin-top:3px}
.codex-detail{display:grid;grid-template-columns:300px 1fr;gap:18px}
.codex-detail .bigface{border:3px solid var(--ink);box-shadow:var(--shadow);overflow:hidden}
.codex-detail .bigface img{width:100%;display:block}
.codex-detail .deck{grid-template-columns:repeat(3,1fr);margin-top:0}
.statline{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:10px 0}
.statline div{border:1px solid var(--ink);padding:5px;text-align:center}
.statline b{display:block;font-family:var(--display);font-size:20px;line-height:1}
.statline span{font-family:var(--mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase}

/* ── result ───────────────────────────────────────────────────────────── */
.result{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.result-head{border-bottom:3px solid var(--ink);padding-bottom:10px;margin-bottom:4px}
.result-head h1{font-size:clamp(44px,7vw,96px);margin:0;line-height:.8}
.result-score{display:flex;align-items:baseline;gap:12px;font-family:var(--display);font-size:clamp(54px,9vw,110px);line-height:.8;margin:8px 0}
.result-score i{font-style:normal;font-size:.4em;opacity:.35}
.result-score b:last-child{color:var(--red)}
.result-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.result-cols ul{margin:0;padding:0;list-style:none}
.result-cols li{border-bottom:1px dotted var(--ink3);padding:5px 0;font-size:11px}
.result-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ── toast ────────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,20px);z-index:120;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:9px 13px;border:2px solid var(--paper);opacity:0;
  transition:opacity .18s,transform .18s;pointer-events:none;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--red);border-color:var(--red)}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{display:flex;justify-content:space-between;gap:12px;padding:12px clamp(16px,4vw,56px);border-top:2px solid var(--ink);
  font-family:var(--mono);font-size:8px;letter-spacing:.2em;flex-wrap:wrap;color:var(--ink2)}

/* ── report ───────────────────────────────────────────────────────────── */
.report-page{max-width:1100px;margin:0 auto;padding:24px}
.report-head{border-bottom:3px solid var(--ink);margin-bottom:10px}
.report-head h1{font-size:clamp(36px,6vw,72px);margin:0;line-height:.9}
.report-meta{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.report-score{display:flex;gap:14px;font-family:var(--display);font-size:96px;line-height:.8;margin:10px 0;align-items:baseline}
.report-score i{font-style:normal;font-size:.4em;opacity:.4}
.report-cols{display:grid;grid-template-columns:1fr 1.4fr;gap:24px}
.report-cols ul,.report-cols ol{margin:0;padding-left:18px}
.report-cols li{font-size:12px;border-bottom:1px dotted #b9b1a0;padding:4px 0}
.report-log span{font-family:var(--mono);font-size:9px;color:var(--ink3);margin-right:5px}
.report-rolls{columns:2;font-family:var(--mono);font-size:9px}

/* ── newspaper backdrop ───────────────────────────────────────────────── */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(circle at 84% 6%,rgba(216,30,44,.065),transparent 40%),
    radial-gradient(circle at 4% 94%,rgba(23,53,107,.06),transparent 44%),
    repeating-linear-gradient(90deg,transparent 0 159px,rgba(20,18,16,.05) 159px 160px)}
.backdrop .bg-dots{position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(20,18,16,.18) 1px,transparent 1.4px);
  background-size:8px 8px;opacity:.4;mix-blend-mode:multiply}
.backdrop .bg-pitch{position:absolute;right:-16vw;top:2vh;width:94vw;max-width:none;opacity:.07;
  stroke:var(--ink);fill:none;stroke-width:1.6;transform:rotate(-7deg)}
.backdrop .bg-word{position:absolute;left:-3vw;bottom:-12vh;font-family:var(--display);font-size:38vw;line-height:.68;
  letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px rgba(20,18,16,.07);transform:rotate(-5deg);user-select:none}
.backdrop .bg-slug{position:absolute;font-family:var(--mono);font-size:8px;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(20,18,16,.3);writing-mode:vertical-rl}
.backdrop .bg-slug.l{left:9px;top:32%}
.backdrop .bg-slug.r{right:9px;bottom:18%;transform:rotate(180deg)}
.view,.foot{position:relative;z-index:1}

/* a match is a HUD: compact masthead so the dice stay above the fold */
body.in-match .masthead{padding:7px clamp(14px,3vw,36px) 5px;align-items:center}
body.in-match .brand{font-size:clamp(30px,3.4vw,44px)}
body.in-match .mh-mid{display:none}
body.in-match .mh-right{gap:6px}
body.in-match .view{padding-top:8px;padding-bottom:24px}

body.in-match .scoreboard{padding:5px 10px;margin-bottom:6px}
body.in-match .scoreboard .score{font-size:clamp(28px,3.4vw,42px)}
body.in-match .meta-row{margin:4px 0 6px}
body.in-match .action-head{padding:5px 8px}
body.in-match .action-body{padding:6px}
body.in-match .act{padding:5px 7px}
body.in-match .intent{padding:5px}
body.in-match .ego-row{margin-top:5px;padding-top:5px}
body.in-match .dice-wrap{margin-top:6px;padding:5px 7px}
body.in-match .dice-tray{min-height:38px}
body.in-match .die{width:28px;height:28px}

/* ── compact match HUD (dice + controls stay in view) ─────────────────── */
.scoreboard{padding:7px 12px;margin-bottom:8px}
.scoreboard .score{font-size:clamp(34px,4.4vw,52px)}
.meta-row{margin:6px 0 8px;gap:6px}
.actionbar{margin-top:8px}
.action-head{padding:6px 9px}
.action-head b{font-size:15px}
.action-body{padding:8px}
.actions{gap:6px}
.act{padding:6px 8px}
.act b{font-size:14px}
.act .num{font-size:22px}
.act span{font-size:8.5px}
.intents{gap:6px;margin-top:6px}
.intent{padding:6px}
.intent b{font-size:12px}
.intent span{font-size:7.5px}
.ego-row{margin-top:6px;padding-top:6px;gap:7px}
.ego-meter i{width:15px;height:12px}
.burst{padding:4px 7px;font-size:11px}
.dice-wrap{margin-top:8px;padding:6px}
.dice-head{margin-bottom:4px}
.dice-tray{min-height:42px;gap:6px}
.die{width:30px;height:30px}
.die-slot{padding:2px 4px}
.rail .cards-panel{max-height:calc(100vh - 170px);overflow-y:auto;overscroll-behavior:contain}
.rail .cards-panel .deck{grid-template-columns:1fr;gap:7px}
.rail .cards-panel .card .c-art{height:34px}
.rail .cards-panel .card h4{font-size:13px;margin:4px 6px 2px}
.rail .cards-panel .card p{min-height:0;font-size:8px;line-height:1.2;margin-bottom:5px}
.rail .cards-panel .card .c-foot{font-size:6.5px;padding:2px 5px}
.rail .cards-panel .card .c-top{font-size:6.5px;padding:3px 5px}

/* ── leaderboard ──────────────────────────────────────────────────────── */
.board-page{display:block}
.board-page .hero-strip{margin-bottom:16px}
.board-grid{display:grid;grid-template-columns:minmax(0,1.68fr) minmax(260px,.32fr);gap:16px}
.board-grid>.panel{overflow-x:auto}
.ranks{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:10px}
.ranks th{text-align:left;font-size:7.5px;letter-spacing:.16em;padding:4px;border-bottom:3px solid var(--ink);color:var(--ink3)}
.ranks td{padding:6px 4px;border-bottom:1px dotted var(--ink3);white-space:nowrap}
.ranks .rk{font-family:var(--display);font-size:16px;color:var(--red);width:38px}
.ranks .nm{font-family:var(--display);font-size:15px;letter-spacing:.02em}
.ranks .rt{font-weight:700;font-size:12px}
.ranks tr.me{background:rgba(216,30,44,.09)}
.ranks tbody tr:hover{background:rgba(20,18,16,.04)}
@media (max-width:560px){
  .tok-name{font-size:18px}
  .tok-gk{font-size:13px}
  .pitch-zones{font-size:15px}
  .mh-right{gap:4px}
  .mh-right .btn.tiny{font-size:8px;padding:4px 5px}
  .who{font-size:8px}
}
@media (max-width:820px){
  .board-grid{grid-template-columns:1fr}
  .ranks{font-size:9px}
  .ranks th:nth-child(5),.ranks td:nth-child(5),.ranks th:nth-child(6),.ranks td:nth-child(6){display:none}
  .backdrop .bg-word{font-size:56vw}
  .backdrop .bg-pitch{width:160vw;right:-50vw}
}


/* ── visual pass: print-brutalist detail ──────────────────────────────── */
.btn{position:relative;box-shadow:3px 3px 0 var(--ink);letter-spacing:.12em;
  transition:transform .08s steps(2,end),box-shadow .08s steps(2,end),background .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.btn.red{background:var(--red);color:#fff;border-color:var(--ink)}
.btn.red:hover{background:#b51623}
.btn.ghost{background:transparent}
.btn.tiny{padding:6px 9px;font-size:10px}
.btn:not(.tiny)::after{content:"";position:absolute;right:-2px;top:-2px;width:0;height:0;
  border-top:12px solid var(--red);border-left:12px solid transparent}
.btn.red:not(.tiny)::after,.btn.ink:not(.tiny)::after{border-top-color:var(--paper)}
.table-link{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:7px 0 4px;
  border-top:1px solid rgba(241,233,214,.35);font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:#e8dfcb;text-decoration:none}
.table-link span{font-family:var(--display);font-size:16px;color:var(--red)}
.table-link:hover{color:#fff;text-decoration:none}
.section-label span:first-child::before{content:"";display:inline-block;width:7px;height:7px;background:var(--red);margin-right:6px;transform:translateY(-1px)}
.hero-strip h1{text-wrap:balance}
.hero-strip.has-star{grid-template-columns:minmax(0,1fr) clamp(150px,17vw,230px) auto;align-items:end}
.cover-star{position:relative;margin:0;justify-self:end;max-width:230px;border:3px solid var(--ink);
  background:var(--ink);box-shadow:7px 7px 0 var(--ink);overflow:hidden;transform:rotate(-2.2deg)}

.cover-star img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;filter:contrast(1.08) saturate(.85)}
.cover-star .cs-no{position:absolute;top:-16px;left:-7px;z-index:3;font-family:var(--display);font-size:76px;line-height:.8;
  color:var(--paper);-webkit-text-stroke:2px var(--ink);letter-spacing:-.04em}
.cover-star figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;background:var(--ink);color:var(--paper);
  padding:5px 7px;display:flex;justify-content:space-between;align-items:baseline;gap:4px}
.cover-star figcaption b{font-family:var(--display);font-size:13px;letter-spacing:.04em;line-height:1}
.cover-star figcaption span{font-family:var(--mono);font-size:6.5px;letter-spacing:.12em;text-transform:uppercase;color:#e6dcc6}

.scoreboard .side .tname{display:block;border-bottom:4px solid transparent;padding-bottom:3px}
.scoreboard .side:first-child .tname{border-bottom-color:var(--red)}
.scoreboard .side.r .tname{border-bottom-color:var(--blue)}
.scoreboard .score i{color:var(--red);transform:rotate(6deg);font-size:.32em}

.card .c-art .c-no{position:absolute;right:3px;top:1px;z-index:2;font-family:var(--display);font-size:24px;line-height:.8;
  color:var(--paper);-webkit-text-stroke:1.5px var(--ink);letter-spacing:-.04em;opacity:.9}
.card .c-top span:first-child::before{content:"";display:inline-block;width:5px;height:5px;background:var(--red);margin-right:4px;transform:translateY(-1px)}
.card.passive .c-top span:first-child::before{background:var(--ink)}

.codex-grid{grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.idx{grid-template-columns:112px 1fr;min-height:168px;transition:transform .1s steps(2,end),box-shadow .1s steps(2,end)}
.idx:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.idx .face img{filter:contrast(1.05) saturate(.92)}
.idx h3{font-size:20px;line-height:.95}
.idx .txt{display:flex;flex-direction:column}
.idx .mini{margin-bottom:6px}

.ranks tbody tr:nth-child(even){background:rgba(20,18,16,.035)}
.ranks tbody tr.me{background:rgba(216,30,44,.1);box-shadow:inset 4px 0 0 var(--red)}

@media (min-height:820px){
  body.in-match .act b{font-size:16px}
  body.in-match .act span{font-size:9px}
  body.in-match .intent b{font-size:13px}
  body.in-match .intent span{font-size:8px}
  body.in-match .die{width:32px;height:32px}
  body.in-match .dice-wrap{padding:8px 9px}
}
@media (max-width:820px){
  .tok-name{font-size:12px}
  .tok-gk{font-size:10px}
  .pitch-zones{font-size:12px}
  body.in-match .pitch-cam{max-height:320px}
  .hero-strip.has-star{grid-template-columns:1fr}
  .cover-star{justify-self:start;max-width:170px;margin-top:10px}
  .codex-grid{grid-template-columns:1fr}
  .idx{grid-template-columns:96px 1fr;min-height:150px}
}


/* ── THE PRINT RUN (gacha) ─────────────────────────────────────────────── */
.press-page{display:block}
.press-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end;
  border-bottom:3px solid var(--ink);padding-bottom:14px}
.press-head h1{font-size:clamp(48px,7vw,104px);line-height:.8;margin:0}
.press-head .dek{max-width:58ch;margin:8px 0 0;font-size:13px;color:var(--ink2)}
.ink-tank{border:3px solid var(--ink);background:var(--red);color:#fff;padding:12px 16px;min-width:210px;
  box-shadow:6px 6px 0 var(--ink);position:relative;overflow:hidden}
.ink-tank:after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.35) 1px,transparent 1.3px);background-size:6px 6px;opacity:.4;pointer-events:none}
.ink-tank span{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.26em;text-transform:uppercase}
.ink-tank b{display:block;font-family:var(--display);font-size:58px;line-height:.85;margin:3px 0;text-shadow:3px 3px 0 var(--ink)}
.ink-bar{height:9px;border:2px solid var(--paper);background:rgba(20,18,16,.35);margin:6px 0 5px}
.ink-bar i{display:block;height:100%;background:var(--paper);transition:width .4s steps(6,end)}
.press-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:16px;margin-top:16px}
.press-machine{padding:14px}
.press-drum{height:168px;border:3px solid var(--ink);background:var(--ink);position:relative;overflow:hidden;margin:10px 0 12px}
.press-drum .roller{position:absolute;left:0;right:0;top:0;height:34px;background:repeating-linear-gradient(90deg,var(--paper) 0 6px,var(--ink) 6px 10px);opacity:.9;animation:roll 2.4s linear infinite}
.press-drum .sheet{position:absolute;left:8%;right:8%;top:42px;bottom:-10px;background:var(--paper3);border:2px solid var(--ink);transform:rotate(-1.2deg);
  background-image:radial-gradient(circle at 1px 1px,rgba(20,18,16,.25) 1px,transparent 1.3px);background-size:5px 5px}
.press-drum .drum-word{position:absolute;left:10px;bottom:2px;font-family:var(--display);font-size:74px;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--paper);opacity:.5;letter-spacing:-.03em}
.press-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.press-note{font-family:var(--mono);font-size:8.5px;color:var(--ink2);letter-spacing:.08em;margin:9px 0 0}
.rate-list{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:10px}
.rate-list li{display:grid;grid-template-columns:1fr auto auto;gap:8px;border-bottom:1px dotted var(--ink3);padding:7px 0}
.rate-list b{font-size:9px;letter-spacing:.12em}
.rate-list li:nth-child(1) b{color:var(--ink3)}
.rate-list li:nth-child(2) b{color:var(--blue)}
.rate-list li:nth-child(3) b{color:var(--red)}
.rate-list li:nth-child(4) b{background:var(--ink);color:var(--paper);padding:0 4px}
.press-archive{margin-top:16px;padding:14px}
.plate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}
.plate{border:2px solid var(--ink);background:var(--paper3);display:grid;grid-template-columns:54px 1fr;min-height:82px;position:relative;overflow:hidden}
.plate-face{position:relative;border-right:2px solid var(--ink);overflow:hidden;background:var(--paper2)}
.plate-face img{width:100%;height:100%;object-fit:cover}
.plate.locked .plate-face img{filter:grayscale(1) contrast(1.1);opacity:.22}
.plate-q{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:30px;color:var(--red);opacity:.7}
.plate-rar{position:absolute;left:0;bottom:0;right:0;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:6px;letter-spacing:.12em;padding:2px 3px;text-align:center}
.plate.rarity-RARE{border-color:var(--blue);box-shadow:3px 3px 0 var(--blue)}
.plate.rarity-EPIC{border-color:var(--red);box-shadow:3px 3px 0 var(--red)}
.plate.rarity-LEGENDARY{border-color:var(--ink);box-shadow:0 0 0 3px var(--red),4px 4px 0 var(--ink)}
.plate.rarity-EPIC .plate-rar{background:var(--red)}
.plate.rarity-RARE .plate-rar{background:var(--blue)}
.plate.rarity-LEGENDARY .plate-rar{background:var(--red)}
.plate-txt{padding:5px 6px;display:flex;flex-direction:column;min-width:0}
.plate-txt b{font-family:var(--display);font-size:13px;line-height:.95;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate-txt>span{font-family:var(--mono);font-size:7px;letter-spacing:.12em;color:var(--ink3);margin-top:2px;text-transform:uppercase}
.plate-read,.plate-lock{margin-top:auto;font-family:var(--mono);font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);background:none;border:0;padding:2px 0;text-align:left;cursor:pointer}
.plate-lock{color:var(--ink3);cursor:default}
.pull-stage{width:100%;max-width:1020px;background:var(--paper);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:18px;max-height:94vh;overflow:auto}
.pull-stage h2{font-family:var(--display);font-size:clamp(34px,5vw,62px);margin:0 0 12px;line-height:.85}
.pull-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:14px}
.pull-grid:not(.ten){grid-template-columns:minmax(220px,300px)}
.pull-card{border:2px solid var(--ink);background:var(--paper3);padding:6px;text-align:center;position:relative;
  animation:pullin .58s steps(7,end) both;animation-delay:calc(var(--i) * .11s)}
.pull-card .pull-face{position:relative;border:2px solid var(--ink);overflow:hidden;margin-bottom:5px}
.pull-card .pull-face img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.pull-rar{position:absolute;left:0;bottom:0;right:0;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:6px;letter-spacing:.12em;padding:2px}
.pull-card b{display:block;font-family:var(--display);font-size:13px;line-height:.95;margin-bottom:2px}
.pull-card>span{display:block;font-family:var(--mono);font-size:7px;letter-spacing:.1em;color:var(--red);text-transform:uppercase}
.pull-card em{display:block;font-style:normal;font-family:var(--mono);font-size:6.5px;line-height:1.3;color:var(--ink3);margin-top:3px}
.pull-card.rarity-EPIC{border-color:var(--red);box-shadow:4px 4px 0 var(--red)}
.pull-card.rarity-RARE{border-color:var(--blue);box-shadow:4px 4px 0 var(--blue)}
.pull-card.rarity-LEGENDARY{border-color:var(--ink);box-shadow:0 0 0 3px var(--red),6px 6px 0 var(--ink)}
.master-deck{grid-template-columns:1fr;max-width:330px}
.master-deck .card{pointer-events:none}
.master-lock{border:2px dashed var(--ink);background:var(--paper2);padding:10px;display:grid;gap:6px;max-width:520px}
.master-lock b{font-family:var(--display);font-size:18px}
.master-lock span{font-size:10px;line-height:1.4}
.master-lock em{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--red);text-transform:uppercase}
@keyframes roll{to{transform:translateX(40px)}}
@keyframes pullin{0%{opacity:0;transform:rotateY(90deg) scale(.85)}70%{opacity:1;transform:rotateY(0) scale(1.04)}100%{transform:scale(1)}}
@keyframes tumble{0%{transform:rotate(0) scale(.8)}45%{transform:rotate(200deg) scale(1.12)}100%{transform:rotate(360deg) scale(1)}}
.die.tumble{animation:tumble .48s steps(6,end)}
@keyframes pagein{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
#view.page-enter{animation:pagein .26s steps(4,end)}
@media (max-width:820px){
  .dice-cast{top:86px;bottom:auto}
}
@media (max-width:900px){
  .press-head{grid-template-columns:1fr}
  .press-grid{grid-template-columns:1fr}
  .press-actions{grid-template-columns:1fr}
  .plate-grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
  .pull-grid{grid-template-columns:repeat(2,1fr)}
}
@media print{.press-page,.pull-stage{display:none}}


/* ── rail tabs + public dice cast ─────────────────────────────────────── */
.rail-tabs{display:grid;grid-template-columns:1.2fr .8fr 1fr;border:2px solid var(--ink);background:var(--paper3);margin-bottom:10px}
.rail-tab{border:0;border-right:1px solid var(--ink);background:transparent;padding:9px 6px;
  font-family:var(--mono);font-size:8px;letter-spacing:.18em;cursor:pointer;text-transform:uppercase}
.rail-tab:last-child{border-right:0}
.rail-tab.on{background:var(--ink);color:var(--paper)}
.rail-tab:hover:not(.on){background:var(--paper2)}
.chat-panel .chat-mini{max-height:340px;min-height:230px}
.chat-panel form{margin-top:8px}

.dice-cast{position:fixed;left:50%;top:118px;bottom:auto;transform:translateX(-50%);z-index:110;pointer-events:none;
  width:min(780px,94vw);border:3px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--ink);
  padding:7px 10px;animation:castin .2s steps(3,end) both}
.cast-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);
  font-size:8px;letter-spacing:.2em; text-transform:uppercase;border-bottom:1px solid var(--ink);
  padding-bottom:4px;margin-bottom:5px}
.cast-head b{font-family:var(--display);font-size:18px;letter-spacing:.04em;color:var(--red)}
.dice-cast.goal .cast-head b{color:var(--ink)}
.dice-cast.beat{border-color:var(--red);box-shadow:8px 8px 0 var(--red)}
.dice-cast.beat .cast-head b{color:var(--red)}
.cast-tray{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cast-slot{display:grid;grid-template-columns:auto 1fr;gap:5px;align-items:center;border:1px solid var(--ink);
  background:var(--paper3);padding:2px 5px;animation:caststamp .28s steps(4,end) both;animation-delay:calc(var(--i) * .07s)}
.cast-tray .die{width:34px;height:34px;animation:tumble .42s steps(6,end) both;animation-delay:calc(var(--i) * .06s)}
.cast-label{font-family:var(--mono);font-size:7px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.cast-label b{display:block;font-size:8px}
.cast-label em{font-style:normal;color:var(--red)}
.cast-die.call{display:grid;place-items:center;font-family:var(--mono);font-size:8px}
@keyframes castin{from{opacity:0;transform:translate(-50%,16px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes caststamp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media print{.paper-grain,.reg-marks,.backdrop,.foot{display:none}body{background:#fff}}

/* ── style tile ───────────────────────────────────────────────────────── */
.tile-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tile{grid-column:span 4;border:2px solid var(--ink);background:var(--paper3);padding:12px;box-shadow:var(--shadow-sm)}
.tile.wide{grid-column:span 8}
.tile.full{grid-column:span 12}
.tile h3{margin:0 0 6px}
.swatches{display:flex;gap:6px}
.swatches i{flex:1;height:54px;border:2px solid var(--ink)}
.type-display{font-family:var(--display);font-size:64px;line-height:.8;margin:0}
.type-body{font-size:14px;max-width:34ch}
.type-mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.motion-note{font-family:var(--mono);font-size:9px;color:var(--ink3);margin-top:6px}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .match{grid-template-columns:1fr}
  .rail{grid-template-columns:repeat(2,1fr)}
  .lobby{grid-template-columns:1fr}
  .room{grid-template-columns:1fr}
  .codex-detail{grid-template-columns:220px 1fr}
}
@media (max-width:820px){
  .masthead{grid-template-columns:1fr auto;gap:8px;align-items:end}
  .mh-mid{display:none}
  .cover{grid-template-columns:1fr}
  .cover-art{border-right:0;border-bottom:3px solid var(--ink);min-height:280px}
  .hero-strip{grid-template-columns:1fr}
  .match .rail{grid-template-columns:1fr}
  .deck{grid-template-columns:repeat(3,minmax(0,1fr))}
  .actionbar{position:sticky;bottom:0;z-index:30}
  .codex-detail{grid-template-columns:1fr}
  .result{grid-template-columns:1fr}
  .tile{grid-column:span 6}
  .tile.wide,.tile.full{grid-column:span 12}
}
@media (max-width:560px){
  .tok-name{font-size:18px}
  .tok-gk{font-size:13px}
  .pitch-zones{font-size:15px}
  .brand{font-size:54px}
  .masthead{padding:12px 12px 8px}
  .mh-right .btn{font-size:9px;padding:6px 7px}
  .view{padding:12px 12px 40px}
  .teams{grid-template-columns:1fr}
  .team-col:first-child{border-right:0;border-bottom:2px solid var(--ink)}
  .deck{display:flex;overflow-x:auto;padding-bottom:4px;gap:8px}
  .deck .card{min-width:150px;flex:0 0 44vw}
  .actions{grid-template-columns:repeat(3,1fr);gap:5px}
  .act{padding:6px 5px}
  .act b{font-size:12px}
  .act span{font-size:7px}
  .act .num{font-size:18px}
  .intents{grid-template-columns:repeat(3,1fr);gap:5px}
  .intent{padding:5px}
  .intent b{font-size:10px}
  .intent span{font-size:6.5px;line-height:1.2}
  .action-head{padding:5px 8px}
  .action-body{padding:7px}
  .ego-meter i{width:12px;height:10px}
  .burst{font-size:9px;padding:4px 5px}
  .scoreboard{grid-template-columns:1fr auto 1fr;padding:8px}
  .result-cols{grid-template-columns:1fr}
  .pick-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
  .tile{grid-column:span 12}
  .toast{bottom:74px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ── keyframes ────────────────────────────────────────────────────────── */
@keyframes feed{from{opacity:0;transform:translateY(12px);clip-path:inset(0 0 92% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes deal{from{opacity:0;transform:translateY(18px) rotate(1.5deg)}to{opacity:1;transform:none}}
@keyframes stamp{0%{opacity:0;transform:scale(1.9) rotate(-7deg)}60%{opacity:1;transform:scale(.96) rotate(1deg)}100%{transform:scale(1) rotate(0)}}
@keyframes sfx{0%{opacity:0;transform:scale(1.8) rotate(-13deg)}18%{opacity:1;transform:scale(.98) rotate(-6deg)}80%{opacity:1}100%{opacity:0;transform:scale(1.05) rotate(-4deg)}}
@keyframes zoom{from{transform:scale(1.6)}to{transform:scale(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes invert{0%{filter:invert(0)}12%{filter:invert(1)}26%{filter:invert(0)}100%{filter:invert(0)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-4px,2px)}40%{transform:translate(3px,-3px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,2px)}}