/* NETHERNET — game table */
:root {
  --bg: #0E0E11; --bg-2: #16161B; --bg-3: #1E1E25; --line: #2B2B33; --line-2: #3A3A44;
  --fg: #ECE8DF; --mute: #8C897F; --dim: #5D5B56;
  --hi: #E5A50A;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 14px; }
button { font: inherit; color: inherit; background: var(--bg-2); border: 1px solid var(--line-2); padding: 7px 12px; border-radius: 3px; cursor: pointer; font-weight: 700; }
button:hover:not(:disabled) { border-color: var(--fg); }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
button.ghost { background: none; }
button.sel { outline: 2px solid var(--hi); outline-offset: 1px; }
input, select { font: inherit; color: var(--fg); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 3px; padding: 7px 9px; }
.mono { font-family: var(--f-mono); }
.hidden { display: none !important; }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: 0; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.topbar .brand { font-family: var(--f-display); font-size: 17px; letter-spacing: .02em; }
.topbar .stat { font-family: var(--f-mono); font-size: 12px; color: var(--mute); }
.topbar .stat b { color: var(--fg); font-weight: 600; }
.topbar .sp { flex: 1; }
.topbar button { padding: 5px 10px; font-size: 12px; }

/* ---------- layout ---------- */
.table { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto 1fr; gap: 14px; padding: 14px 16px 18px; min-height: calc(100vh - 50px); }
.seats { grid-column: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 10px; }
.center { grid-column: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: stretch; }
.mine { grid-column: 1; }
.log { grid-column: 2; grid-row: 1 / 4; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 82px); position: sticky; top: 64px; }
.log h3 { margin: 0; padding: 10px 12px; font-size: 12px; color: var(--mute); border-bottom: 1px solid var(--line); font-weight: 700; letter-spacing: .08em; }
.log ol { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; flex: 1; font-size: 12.5px; line-height: 1.55; }
.log li { padding: 3px 12px; display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.log li.turn { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 8px; color: var(--fg); font-weight: 900; }
.log li.round { color: var(--hi); font-family: var(--f-mono); font-size: 11px; }
.log li.priv { color: #B9B2FF; }
.log li.priv::before { content: '私'; font-size: 10px; font-weight: 900; background: #3B3470; color: #DCD7FF; padding: 0 4px; border-radius: 2px; }
.log li.big { color: #FF8A73; font-weight: 900; }
.log li.over { color: var(--hi); font-weight: 900; }
.log li .chip { height: 19px; font-size: 10.5px; }
.log li .chip .k { font-size: 11px; }
.log .nm { font-weight: 900; }

/* ---------- seats ---------- */
.seat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 9px 10px 10px; position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.seat.turn { border-color: var(--fg); }
.seat.holder { box-shadow: 0 0 0 2px var(--hi); }
.seat.dead { opacity: .55; background: repeating-linear-gradient(135deg, var(--bg-2) 0 8px, #19191E 8px 16px); }
/* the old dot is replaced by the acting banner */
@keyframes blink { 50% { opacity: .2; } }
.s-top { display: flex; align-items: center; gap: 7px; min-width: 0; padding-right: 14px; }
.s-no { font-family: var(--f-mono); font-size: 11px; color: var(--mute); }
.s-name { font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { font-size: 10.5px; font-weight: 900; padding: 1px 5px; border-radius: 2px; background: var(--bg-3); color: var(--mute); white-space: nowrap; }
.tag.on { background: var(--fg); color: var(--bg); }
.tag.hi { background: var(--hi); color: #141210; }
.tag.lock { background: var(--virus); color: #fff; }
.tag.dead { background: #5A2A22; color: #FFB3A3; }
.s-role { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); cursor: pointer; min-width: 0; }
.s-role b { color: var(--fg); font-weight: 700; white-space: nowrap; }
.s-role span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-role:hover b { text-decoration: underline; }
.meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.meter div { display: flex; align-items: center; gap: 4px; font-weight: 900; font-size: 12px; }
.meter i { width: 9px; height: 12px; border: 1px solid currentColor; border-radius: 1px; opacity: .45; }
.meter i.f { opacity: 1; background: currentColor; }
.meter .mO { color: var(--order); } .meter .mG { color: var(--ghost); } .meter .mV { color: #A27BFF; }
.s-field { display: flex; flex-wrap: wrap; gap: 3px; min-height: 22px; }
.s-field:empty::before { content: '—'; color: var(--dim); font-size: 12px; }
.s-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--mute); }
.idbadge { font-weight: 900; font-size: 11px; padding: 1px 6px; border-radius: 2px; }
.id-ORDER { background: var(--order); color: #141210; } .id-GHOST { background: var(--ghost); color: #0E1315; }
.id-ZERO { background: var(--zero); color: #0F1410; } .id-REAPER { background: #2B2B2B; color: #FF6A55; border: 1px solid #FF6A55; }
.handpips { display: inline-flex; gap: 2px; vertical-align: -2px; margin-left: 4px; }
.handpips i { width: 7px; height: 10px; background: var(--line-2); border-radius: 1px; }

/* ---------- channel + prompt ---------- */
.channel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 12px; width: 230px; display: flex; flex-direction: column; gap: 9px; align-items: center; --mm: 2.75px; }
.channel .ch-head { align-self: stretch; display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); }
.channel .ch-head b { color: var(--fg); }
.channel .ch-card { position: relative; min-height: calc(88 * var(--mm)); display: flex; align-items: center; justify-content: center; }
.channel .ch-empty { width: calc(63 * var(--mm)); height: calc(88 * var(--mm)); border: 1px dashed var(--line-2); border-radius: calc(3 * var(--mm)); display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 12px; text-align: center; padding: 10px; }
.channel .ch-flag { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-size: 10.5px; font-weight: 900; background: var(--hi); color: #141210; padding: 2px 6px; border-radius: 2px; white-space: nowrap; }
.channel .ch-info { align-self: stretch; font-size: 12px; line-height: 1.7; color: var(--mute); }
.channel .ch-info b { color: var(--fg); }

.prompt { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.prompt.mine-turn { border-color: var(--hi); }
.prompt .pr-phase { font-family: var(--f-mono); font-size: 11px; color: var(--mute); letter-spacing: .1em; }
.prompt .pr-text { font-size: 15px; font-weight: 700; line-height: 1.55; }
.prompt .pr-sub { font-size: 12px; color: var(--mute); }
.prompt .pr-btns { display: flex; flex-wrap: wrap; gap: 7px; }
.prompt .pr-btns button { display: inline-flex; align-items: center; gap: 6px; }
.prompt .pr-btns .chip { pointer-events: none; }
.prompt .wait { color: var(--mute); font-size: 13px; }

/* ---------- my area ---------- */
.mine { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 12px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 14px; align-items: start; }
.mine.turn { border-color: var(--fg); }
.mine.holder { box-shadow: 0 0 0 2px var(--hi); }
.mine .m-col { display: flex; flex-direction: column; gap: 6px; --mm: 1.75px; }
.mine .m-col .cn { cursor: zoom-in; }
.mine .m-lbl { font-size: 11px; color: var(--mute); font-weight: 700; letter-spacing: .06em; }
.mine .m-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.mine .m-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mine .m-head b { font-size: 15px; font-weight: 900; }
.hand { display: flex; gap: 10px; flex-wrap: wrap; --mm: 2.7px; padding-top: 4px; }
.hand .cn { cursor: pointer; transition: transform .12s; }
.hand .cn:hover { transform: translateY(-4px); }
.hand .cn.can { outline: 2px solid var(--hi); outline-offset: 2px; }
.hand .cn.dim { opacity: .45; }
.hand .cn.chosen { transform: translateY(-8px); outline: 3px solid var(--fg); outline-offset: 2px; }
.hand-empty { color: var(--dim); font-size: 12px; padding: 20px 0; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; background: rgba(8,8,10,.86); z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; }
.overlay .box { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 5px; max-width: 920px; width: 100%; max-height: calc(100vh - 32px); overflow: auto; padding: 22px; }
.overlay h2 { margin: 0 0 4px; font-weight: 900; font-size: 24px; }
.zoomer { cursor: zoom-out; }
.zoomer .holder { --mm: min(7px, calc((100vh - 40px) / 88), calc((100vw - 40px) / 63)); }
.curtain .box { text-align: center; max-width: 420px; }
.curtain h2 { margin-bottom: 18px; }

.res-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.res-head .big { font-weight: 900; font-size: 28px; }
.res-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.res-table td, .res-table th { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.res-table th { color: var(--mute); font-size: 12px; }
.res-table tr.win td:first-child { box-shadow: inset 3px 0 0 var(--hi); }
.res-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

.rules h3 { margin: 18px 0 6px; font-size: 14px; }
.rules p, .rules li { font-size: 13px; line-height: 1.75; color: #CFCBC2; }
.rules ul { padding-left: 18px; margin: 4px 0; }

/* ---------- setup ---------- */
.setup { max-width: 1060px; margin: 0 auto; padding: 28px 16px 60px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; }
.setup h1 { font-family: var(--f-display); font-weight: 400; font-size: 38px; margin: 0; letter-spacing: .01em; }
.setup .lead { color: var(--mute); margin: 6px 0 22px; font-size: 13px; }
.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: 18px; }
.panel h2 { margin: 0 0 14px; font-size: 14px; letter-spacing: .06em; }
.row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.row:last-of-type { border-bottom: 0; }
.row > label { font-size: 13px; color: var(--mute); font-weight: 700; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg button { padding: 6px 11px; font-size: 13px; }
.seg button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--mute); cursor: pointer; }
.start-row { display: flex; gap: 10px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
.start-row .primary { font-size: 15px; padding: 10px 20px; }
.sim-out { margin-top: 12px; font-size: 12.5px; }
.sim-bar { height: 18px; display: flex; border-radius: 2px; overflow: hidden; margin: 8px 0 6px; background: var(--bg-3); }
.sim-bar span { display: block; height: 100%; }
.sim-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-family: var(--f-mono); font-size: 12px; }
.sim-note { color: var(--mute); font-size: 12px; line-height: 1.6; margin-top: 10px; }
.cards-strip { display: flex; gap: 10px; --mm: 2.3px; margin-top: 18px; overflow-x: auto; padding-bottom: 4px; }

@media (max-width: 1100px) {
  .table { grid-template-columns: 1fr; }
  .log { grid-column: 1; grid-row: auto; max-height: 260px; position: static; }
  .setup { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .center { grid-template-columns: 1fr; }
  .channel { width: auto; flex-direction: row; align-items: flex-start; --mm: 2.1px; }
  .channel .ch-head { display: none; }
  .mine { grid-template-columns: 1fr; }
  .mine .m-col { flex-direction: row; align-items: flex-start; }
  .hand { --mm: 2.2px; }
  .seats { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .row { grid-template-columns: 1fr; gap: 6px; }
}

.sim-roles { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; }
.sim-roles th, .sim-roles td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: right; }
.sim-roles th:first-child, .sim-roles td:first-child { text-align: left; }
.sim-roles th { color: var(--mute); font-weight: 700; }

/* ---------- live ticker ---------- */
.ticker { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 0; min-height: 66px; }
.ticker .tk { font-size: 12.5px; color: var(--mute); line-height: 1.6; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ticker .tk.now { font-size: 17px; font-weight: 900; color: var(--fg); animation: tk-in .35s ease-out; }
.ticker .tk.big.now { color: #FF7A62; }
.ticker .tk .chip { height: 20px; }
.ticker .tk.now .chip { height: 24px; font-size: 12px; }
@keyframes tk-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- picking a target on the board ---------- */
.seats.picking .seat:not(.pick) { opacity: .42; }
.seat.pick, .mine.pick { cursor: pointer; box-shadow: 0 0 0 2px var(--hi), 0 0 0 6px rgba(229,165,10,.18); animation: pick-pulse 1.1s ease-in-out infinite; }
.seat.pick:hover, .mine.pick:hover { box-shadow: 0 0 0 3px var(--hi), 0 0 0 8px rgba(229,165,10,.3); }
.pick-tag { position: absolute; top: -11px; left: 10px; z-index: 2; background: var(--hi); color: #141210; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 2px; white-space: nowrap; }
.mine { position: relative; }
.mine .m-head .pick-tag { position: static; margin-right: 4px; }
.chip-pick { cursor: pointer; border-radius: 4px; outline: 2px solid var(--hi); outline-offset: 2px; animation: pick-pulse 1.1s ease-in-out infinite; }
@keyframes pick-pulse { 50% { filter: brightness(1.25); } }

/* ---------- effects overlay ---------- */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.fx-fly { position: fixed; z-index: 31; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.fx-back { display: block; width: 26px; height: 36px; border-radius: 3px; background: var(--stock); border: 1.5px solid var(--paper); box-shadow: inset 0 0 0 3px var(--stock), inset 0 0 0 4px rgba(236,232,223,.5); }
.fx-icon { display: flex; width: 34px; height: 34px; border-radius: 50%; background: var(--fg); color: var(--bg); align-items: center; justify-content: center; }
.fx-icon svg { width: 20px; height: 20px; }
.fx-icon.fx-skill { background: var(--hi); color: #141210; }
.fx-stamp { position: fixed; z-index: 32; white-space: nowrap; font-weight: 900; font-size: 18px; letter-spacing: .04em; padding: 4px 12px; border: 2.5px solid currentColor; border-radius: 4px; background: rgba(14,14,17,.92); color: var(--fg); display: flex; align-items: center; gap: 6px; }
.fx-stamp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.fx-stamp .chip { height: 24px; font-size: 12px; }
.fx-stamp.st-card { border-color: var(--fg); padding: 4px 6px; }
.fx-stamp.st-mute { font-size: 13px; color: var(--mute); border-width: 1.5px; }
.fx-stamp.st-ORDER { color: var(--order); font-size: 26px; }
.fx-stamp.st-GHOST { color: var(--ghost); font-size: 26px; }
.fx-stamp.st-VIRUS { color: #A27BFF; font-size: 26px; }
.fx-stamp.st-jam { color: #FF8A73; }
.fx-stamp.st-void { color: #FF8A73; text-decoration: line-through; }
.fx-stamp.st-shield { color: var(--zero); }
.fx-stamp.st-lock { color: #B99BFF; }
.fx-stamp.st-direct { color: #B99BFF; font-size: 15px; }
.fx-stamp.st-hi { color: var(--hi); }
.fx-stamp.st-skill { color: var(--hi); background: #1E1A0E; }
.fx-stamp.st-crash { color: #FF4A3D; font-size: 34px; border-width: 4px; background: rgba(40,8,6,.94); letter-spacing: .1em; }
.fx-flash { position: fixed; border-radius: 4px; box-shadow: 0 0 0 3px var(--c), 0 0 26px 4px var(--c), inset 0 0 40px var(--c); }
.fx-shake { animation: shake .45s 2; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.fx-flip { animation: flip .5s ease-out; }
@keyframes flip { 0% { transform: perspective(600px) rotateY(90deg); } 100% { transform: perspective(600px) rotateY(0); } }
@media (prefers-reduced-motion: reduce) { .fx-fly, .fx-stamp, .fx-flash { display: none; } .fx-shake, .fx-flip, .seat.pick, .chip-pick { animation: none; } }

/* ---------- role draft ---------- */
.role-pick { display: flex; gap: 14px; flex-wrap: wrap; --mm: 2.9px; }
.role-opt { padding: 0; border: 0; background: none; border-radius: calc(3 * var(--mm)); transition: transform .12s; }
.role-opt:hover { transform: translateY(-4px); outline: 3px solid var(--hi); outline-offset: 3px; }
.fx-stamp.st-reveal { color: var(--fg); font-size: 15px; }

/* ---------- online lobby ---------- */
.invite { font-size: 18px; font-weight: 600; padding: 10px 12px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 3px; margin-bottom: 8px; user-select: all; word-break: break-all; }
.lobby-list { list-style: none; margin: 0 0 6px; padding: 0; }
.lobby-list li { display: flex; gap: 8px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.lobby-list li.ai-slot { color: var(--dim); font-family: var(--f-mono); font-size: 12px; }

/* =========================================================
   CHANNEL — the centre of the table
   ========================================================= */
.center { grid-template-columns: auto minmax(0, 1fr); }
.channel { width: 290px; --mm: 3.25px; padding: 14px; gap: 10px; position: relative; border-width: 2px; transition: border-color .2s, box-shadow .2s; }
.channel:has(.ch-mode) { border-color: var(--hi); box-shadow: 0 0 0 1px rgba(229,165,10,.35), 0 0 34px -6px rgba(229,165,10,.55); animation: ch-breathe 2.4s ease-in-out infinite; }
@keyframes ch-breathe { 50% { box-shadow: 0 0 0 1px rgba(229,165,10,.55), 0 0 48px -4px rgba(229,165,10,.75); } }
.channel .ch-head { align-items: center; }
.ch-mode { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 900; color: var(--fg); padding: 3px 10px 3px 6px; border-radius: 3px; background: var(--bg-3); }
.ch-mode svg { width: 18px; height: 18px; }
.ch-mode.m-DIRECT { background: #3B2A63; }
.ch-mode.m-OPEN { background: #13414B; }
.channel .ch-card { min-height: calc(88 * var(--mm)); }
.channel .ch-card > .cn { box-shadow: 0 14px 30px -10px #000, 0 0 0 1px rgba(255,255,255,.08); }
.ch-status { font-size: 19px; font-weight: 900; text-align: center; line-height: 1.3; }
.ch-status.me { color: #141210; background: var(--hi); border-radius: 3px; padding: 4px 8px; align-self: stretch; animation: me-blink 1s ease-in-out infinite; }
@keyframes me-blink { 50% { filter: brightness(1.25); } }
.ch-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 2px; font-size: 12px; }
.ch-track .tn { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 2px; border: 1px solid var(--line-2); color: var(--mute); font-weight: 700; }
.ch-track .tn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.ch-track .tn.from { border-style: dashed; }
.ch-track .tn.passed { opacity: .45; text-decoration: line-through; }
.ch-track .tn.now { background: var(--hi); border-color: var(--hi); color: #141210; transform: scale(1.12); }
.ch-track .tn.lock { border-color: #B99BFF; color: #CDB8FF; }
.ch-track .tn.me:not(.now) { color: var(--fg); }
.ch-track .ta { font-style: normal; color: var(--dim); }
.fx-pulse { animation: pulse-once .55s ease-out; }
@keyframes pulse-once { 0% { transform: scale(1); } 30% { transform: scale(1.025); box-shadow: 0 0 0 3px var(--hi), 0 0 60px rgba(229,165,10,.8); } 100% { transform: scale(1); } }

/* packet pinned on the holder's seat */
.pk-pin { position: absolute; top: -12px; right: -8px; z-index: 3; animation: pin-bob 1.1s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.pk-pin .fx-back { width: 22px; height: 30px; }
@keyframes pin-bob { 50% { transform: translateY(-4px); } }

/* floating HUD when the channel is off-screen */
#pk-hud { position: fixed; right: 16px; bottom: 16px; z-index: 25; display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 2px solid var(--hi); border-radius: 5px; padding: 8px 12px; box-shadow: 0 10px 30px -8px #000; font-weight: 900; font-size: 14px; cursor: pointer; }
#pk-hud small { display: block; font-size: 11px; color: var(--mute); font-weight: 700; }
#pk-hud.me { background: var(--hi); color: #141210; animation: me-blink 1s ease-in-out infinite; }
#pk-hud.me small { color: #3d3000; }

/* =========================================================
   SKILLS
   ========================================================= */
.skill-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 2px solid var(--tc); background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, transparent), transparent); color: var(--fg); }
.skill-btn svg { width: 28px; height: 28px; fill: none; stroke: var(--tc); stroke-width: 3; }
.skill-btn span { display: flex; flex-direction: column; align-items: flex-start; font-size: 14px; font-weight: 900; line-height: 1.2; }
.skill-btn small { font-size: 10.5px; color: var(--mute); font-weight: 700; }
.skill-btn:hover { box-shadow: 0 0 18px -2px var(--tc); }
.m-col.skill-ready { cursor: pointer; }
.m-col.skill-ready .cn { box-shadow: 0 0 0 2px var(--hi), 0 0 24px rgba(229,165,10,.6); animation: pick-pulse 1.1s ease-in-out infinite; }
.m-col .m-lbl .tag { margin-left: 6px; }
.tag.immune { display: inline-flex; align-items: center; gap: 3px; color: var(--order); background: #2A220D; }
.tag.immune svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* cut-in band */
.fx-cutin { position: fixed; left: 0; right: 0; top: 34%; z-index: 35; display: flex; justify-content: center; pointer-events: none; }
.ci-band { display: flex; align-items: center; gap: 18px; padding: 12px 48px 12px 28px; background: rgba(12,12,15,.94); border-top: 3px solid var(--tc); border-bottom: 3px solid var(--tc); box-shadow: 0 0 60px -10px var(--tc); min-width: min(560px, 92vw); }
.ci-emblem svg { width: 64px; height: 64px; fill: none; stroke: var(--tc); stroke-width: 2.6; stroke-linecap: square; }
.ci-text { display: flex; flex-direction: column; transform: skewX(12deg); }
.ci-emblem { transform: skewX(12deg); }
.ci-text small { font-size: 12px; color: var(--mute); font-weight: 700; letter-spacing: .06em; }
.ci-text b { font-size: 32px; font-weight: 900; color: var(--fg); line-height: 1.1; }
.ci-text span { font-family: var(--f-mono); font-size: 12px; color: var(--tc); letter-spacing: .14em; }
.fx-beam { position: fixed; transform-origin: 0 50%; margin-top: -3px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--c) 20%, #fff 60%, var(--c)); box-shadow: 0 0 16px 2px var(--c); z-index: 33; }
.fx-ring { position: fixed; z-index: 33; width: 150px; height: 150px; border-radius: 50%; border: 4px solid var(--c); box-shadow: 0 0 30px var(--c), inset 0 0 30px var(--c); display: flex; align-items: center; justify-content: center; }
.ring-emblem svg { width: 64px; height: 64px; fill: none; stroke: var(--c); stroke-width: 2.6; }
@media (max-width: 720px) {
  .channel { width: auto; --mm: 2.4px; flex-direction: column; align-items: center; }
  .ci-text b { font-size: 22px; }
  .ci-emblem svg { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .fx-cutin, .fx-beam, .fx-ring { display: none; } .channel, .ch-status.me, #pk-hud.me, .pk-pin { animation: none !important; } }

.fx-icon { --acc: var(--hi); }
.fx-icon svg { width: 22px; height: 22px; }

/* =========================================================
   WHERE IS THE PACKET
   ========================================================= */
#route-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 22; overflow: visible; }
#route-layer .rt { fill: none; stroke: var(--hi); stroke-width: 3; stroke-dasharray: 10 8; animation: rt-flow .7s linear infinite; }
#route-layer .rt-glow { fill: none; stroke: var(--hi); stroke-width: 12; opacity: .18; }
#route-layer .rt-dot { fill: var(--hi); animation: rt-dot 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
#route-layer .rt-src { fill: var(--hi); opacity: .7; }
#route-layer .direct { stroke: #B99BFF; }
#route-layer .rt-dot.direct { fill: #B99BFF; }
#route-layer .rt-glow.direct { stroke: #B99BFF; }
@keyframes rt-flow { to { stroke-dashoffset: -18; } }
@keyframes rt-dot { 50% { transform: scale(1.5); } }
.seat.holder, .mine.holder { box-shadow: 0 0 0 3px var(--hi), 0 0 30px -4px rgba(229,165,10,.7); }
.pk-banner { position: absolute; left: -1px; right: -1px; top: -1px; z-index: 3; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--hi); color: #141210; border-radius: 4px 4px 0 0; font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.pk-banner .chip { height: 18px; font-size: 10px; }
.pk-banner .fx-back { width: 13px; height: 18px; border-width: 1px; box-shadow: none; }
.seat:has(.pk-banner) { padding-top: 34px; }
.mine .pk-banner { border-radius: 4px 4px 0 0; }
.mine:has(.pk-banner) { padding-top: 36px; }
.tag.next { background: #3A3523; color: var(--hi); border: 1px dashed var(--hi); }
.tag.direct { display: inline-flex; align-items: center; gap: 3px; background: #3B2A63; color: #DCCBFF; }
.tag.direct svg { width: 11px; height: 11px; fill: none; stroke: currentColor; }

/* =========================================================
   MY DOSSIER — identity + operator
   ========================================================= */
.mine { grid-template-columns: auto minmax(0, 1fr); }
.dossier { display: grid; grid-template-columns: 148px 248px; gap: 10px; align-self: start; align-items: stretch; }
.id-panel { position: relative; border-radius: 4px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; cursor: zoom-in; background: var(--ic); color: var(--iink); overflow: hidden; }
.id-panel.i-ORDER { --ic: var(--order); --iink: #141210; }
.id-panel.i-GHOST { --ic: var(--ghost); --iink: #0E1315; }
.id-panel.i-ZERO  { --ic: var(--zero);  --iink: #0F1410; }
.id-panel.dead { filter: grayscale(.7) brightness(.8); }
.id-panel::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.05) 3px 4px); pointer-events: none; }
.dp-top { display: flex; justify-content: space-between; align-items: center; }
.dp-top .mono { font-size: 10px; font-weight: 600; letter-spacing: .18em; opacity: .8; }
.dp-dead { font-size: 10px; font-weight: 900; background: #141210; color: #FF6A55; padding: 1px 5px; border-radius: 2px; }
.dp-kanji { font-family: var(--f-display); font-size: 52px; line-height: 1; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border: 3px solid currentColor; border-radius: 4px; margin: 6px 0 2px; }
.dp-name { font-family: var(--f-display); font-size: 22px; letter-spacing: .06em; line-height: 1; }
.dp-goal { font-size: 11.5px; font-weight: 700; line-height: 1.45; margin-top: auto; padding-top: 6px; border-top: 1.5px solid currentColor; }
.dp-reborn { font-size: 11px; font-weight: 900; background: #141210; color: var(--fg); padding: 3px 6px; border-radius: 2px; }

.role-panel { position: relative; border-radius: 4px; background: var(--stock); border: 1px solid var(--line-2); padding: 10px 12px 12px 16px; display: flex; flex-direction: column; gap: 8px; cursor: zoom-in; overflow: hidden; }
.role-panel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc); }
.role-panel.empty { color: var(--mute); align-items: center; justify-content: center; font-size: 13px; }
.rp-top { display: flex; justify-content: space-between; align-items: center; }
.rp-top .mono { font-size: 10px; letter-spacing: .18em; color: var(--mute); font-weight: 600; }
.rp-timing { font-size: 10.5px; font-weight: 900; padding: 1px 6px; border-radius: 2px; background: var(--tc); color: #141210; }

.rp-id { display: flex; align-items: center; gap: 10px; }
.rp-id svg { width: 44px; height: 44px; flex-shrink: 0; fill: none; stroke: var(--tc); stroke-width: 2.6; stroke-linecap: square; }
.rp-id b { display: block; font-size: 20px; font-weight: 900; line-height: 1.1; }
.rp-id small { font-family: var(--f-mono); font-size: 10.5px; color: var(--mute); letter-spacing: .1em; }
.rp-skill { background: var(--paper); color: var(--ink); border-radius: 3px; padding: 7px 9px 8px; }
.rp-skill > b { font-size: 13px; font-weight: 900; display: block; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1.5px solid var(--ink); }
.rp-skill p { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.55; }
.rp-rows { --mm: 3.5px; display: flex; flex-direction: column; gap: 6px; padding: 2px 0 2px 5px; }
.rp-rows .sk-txt { font-size: 12px; line-height: 1.45; }
.rp-go { font-size: 12px; font-weight: 900; color: #141210; background: var(--hi); padding: 4px 8px; border-radius: 2px; text-align: center; }
.rp-used { font-size: 11px; font-weight: 700; color: var(--mute); text-align: center; border: 1px dashed var(--line-2); padding: 3px; border-radius: 2px; }
.role-panel.used .rp-id svg { opacity: .45; }
.role-panel.skill-ready { cursor: pointer; border-color: var(--hi); box-shadow: 0 0 0 2px var(--hi), 0 0 26px -4px rgba(229,165,10,.7); animation: pick-pulse 1.1s ease-in-out infinite; }
@media (max-width: 1100px) { .dossier { grid-template-columns: 140px minmax(0, 1fr); } }
@media (max-width: 720px) { .mine { grid-template-columns: 1fr; } .dossier { grid-template-columns: 1fr 1.6fr; } .dp-kanji { width: 56px; height: 56px; font-size: 40px; } }

/* =========================================================
   SEAT v2 — who, which role, how many cards: one glance
   ========================================================= */
.seat { gap: 6px; }
.s-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.s-emb { width: 38px; height: 38px; border-radius: 4px; background: var(--stock); border: 1.5px solid var(--tc); display: flex; align-items: center; justify-content: center; cursor: zoom-in; flex-shrink: 0; }
.s-emb svg { width: 28px; height: 28px; fill: none; stroke: var(--tc); stroke-width: 3; stroke-linecap: square; }
.s-emb.empty { --tc: var(--line-2); color: var(--dim); font-weight: 900; cursor: default; }
.s-who { min-width: 0; }
.s-nameline { display: flex; align-items: center; gap: 5px; min-width: 0; }
.s-nameline .s-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-rolename { font-size: 12px; font-weight: 900; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; cursor: zoom-in; }
.s-rolename span { color: var(--mute); font-weight: 700; }
.s-hand { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 4px; align-items: end; justify-items: end; }
.s-hand b { font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: .9; grid-row: 1; grid-column: 2; }
.s-hand small { grid-column: 1 / 3; font-size: 10px; color: var(--mute); font-weight: 700; line-height: 1.2; }
.s-cards { display: flex; grid-row: 1; grid-column: 1; height: 22px; align-items: flex-end; }
.s-cards i { width: 11px; height: 16px; border-radius: 2px; background: var(--stock); border: 1.5px solid var(--paper); margin-left: -6px; box-shadow: -1px 0 0 var(--bg-2); }
.s-cards i:first-child { margin-left: 0; }
.s-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 18px; }
.s-tags .sp { flex: 1; }
.seat .meter div { font-size: 13px; }
.seat .meter i { width: 10px; height: 13px; }
.s-godhand { display: flex; flex-wrap: wrap; gap: 3px; opacity: .85; }
.m-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.m-info .m-lbl b { color: var(--fg); font-size: 13px; }

/* =========================================================
   ONE-SCREEN MODE (window ≥ 1000 × 560): nothing scrolls
   ========================================================= */
body.fit { overflow: hidden; }
body.fit #app { height: 100vh; display: flex; flex-direction: column; }
body.fit .topbar { flex: none; position: static; padding: 6px 14px; }
body.fit .table { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) var(--mineH, 240px); gap: 8px; padding: 8px 12px 10px; }
body.fit .seats { grid-template-columns: repeat(var(--opp, 4), minmax(0, 1fr)); gap: 8px; }
body.fit .seat { padding: 7px 9px 8px; gap: 5px; }
body.fit .seat:has(.pk-banner) { padding-top: 32px; }
body.fit .s-field { min-height: 20px; max-height: 44px; overflow: hidden; }
body.fit .seat .s-field .chip { font-size: 0; gap: 2px; padding: 0 4px 0 2px; height: 19px; }
body.fit .seat .s-field .chip .k { font-size: 11px; width: 13px; }
body.fit .s-godhand { display: none; }
body.fit .mid { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 280px); gap: 10px; min-height: 0; }
body.fit .channel { width: auto; min-width: 200px; height: 100%; min-height: 0; overflow: hidden; padding: 10px; gap: 7px; }
body.fit .channel .ch-card { min-height: 0; }
body.fit .ch-status { font-size: 16px; }
body.fit .midcol { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
body.fit .ticker { flex: none; padding: 0; min-height: 0; }
body.fit .ticker .tk { font-size: 12px; }
body.fit .ticker .tk.now { font-size: 16px; }
body.fit .prompt { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; gap: 10px; }
body.fit .role-pick { --mm: 2.2px; }
body.fit .log { grid-column: auto; grid-row: auto; position: static; max-height: none; min-height: 0; }
body.fit .mine { display: grid; grid-template-columns: auto minmax(170px, 210px) minmax(0, 1fr); gap: 12px; padding: 10px 12px; min-height: 0; overflow: hidden; align-items: stretch; }
body.fit .mine:has(.pk-banner) { padding-top: 34px; }
body.fit .dossier { grid-template-columns: 118px 236px; align-self: stretch; min-height: 0; }
body.fit .id-panel { padding: 8px 10px 10px; }
body.fit .dp-kanji { width: 52px; height: 52px; font-size: 36px; margin: 4px 0 0; }
body.fit .dp-name { font-size: 17px; }
body.fit .dp-goal { font-size: 10.5px; }
body.fit .role-panel { padding: 8px 10px 10px 14px; gap: 6px; min-height: 0; }
body.fit .rp-id svg { width: 34px; height: 34px; }
body.fit .rp-id b { font-size: 17px; }
body.fit .rp-skill { padding: 6px 8px; min-height: 0; overflow: auto; flex: 1; }
body.fit .rp-skill p { font-size: 11.5px; line-height: 1.5; }
body.fit .rp-rows { --mm: 2.9px; gap: 5px; }
body.fit .rp-rows .sk-txt { font-size: 11.5px; }
body.fit .mine .hand { flex-wrap: nowrap; align-items: flex-start; padding-top: 2px; overflow: visible; min-width: 0; }
body.fit .mine .hand .cn:hover { transform: translateY(-6px) scale(1.04); z-index: 5; }
body.fit #pk-hud { display: none; }
@media (max-height: 700px) {
  body.fit .ticker .tk:not(.now) { display: none; }
  body.fit .seat .meter { display: none; }
}

/* =========================================================
   PACKET COLOUR — gold / cyan / purple when known, white when not
   ========================================================= */
:root { --pk-unknown: #F2EFE8; --pkc: var(--pk-unknown); --pkc-ink: #141210; }
.channel:has(.ch-mode) { border-color: var(--pkc); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pkc) 40%, transparent), 0 0 34px -6px color-mix(in srgb, var(--pkc) 60%, transparent); animation: none; }
.ch-status.me { background: var(--pkc); color: var(--pkc-ink); }
.ch-track .tn.now { background: var(--pkc); border-color: var(--pkc); color: var(--pkc-ink); }
.pk-banner { background: var(--pkc); color: var(--pkc-ink); }
.seat.holder, .mine.holder { box-shadow: 0 0 0 3px var(--pkc), 0 0 30px -4px color-mix(in srgb, var(--pkc) 70%, transparent); }
#route-layer .rt, #route-layer .rt-glow, #route-layer .direct { stroke: var(--pkc); }
#route-layer .rt-dot, #route-layer .rt-src, #route-layer .rt-dot.direct { fill: var(--pkc); }
#route-layer .rt.direct { stroke-dasharray: 3 7; stroke-width: 4; }
#pk-hud { border-color: var(--pkc); }
#pk-hud.me { background: var(--pkc); color: var(--pkc-ink); }
.fx-pulse { animation: pulse-pk .55s ease-out; }
@keyframes pulse-pk { 30% { transform: scale(1.025); box-shadow: 0 0 0 3px var(--pkc), 0 0 60px color-mix(in srgb, var(--pkc) 80%, transparent); } }
/* "unknown" gets a fine dashed edge so white never reads as a faction */
body[data-pk="unknown"] .pk-banner { background: repeating-linear-gradient(-45deg, #F2EFE8 0 6px, #D9D5CB 6px 8px); }
/* protocol pill in the channel follows the card strips */
.ch-mode.m-ROUTE { background: #050506; color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.ch-mode.m-DIRECT { background: #050506 repeating-linear-gradient(-55deg, transparent 0 6px, rgba(236,232,223,.14) 6px 8px); color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.ch-mode.m-OPEN { background: var(--paper); color: var(--ink); }
.tag.direct { background: #050506; color: var(--paper); border: 1px solid var(--paper); }

/* =========================================================
   DEAD SEATS take their revealed identity colour
   ========================================================= */
.seat.dead { opacity: 1; filter: none; --dc: var(--line-2); border: 2px solid var(--dc);
  background: linear-gradient(color-mix(in srgb, var(--dc) 16%, var(--bg-2)), color-mix(in srgb, var(--dc) 16%, var(--bg-2))),
              repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,.18) 8px 16px); }
.seat.dead-ORDER { --dc: var(--order); }
.seat.dead-GHOST { --dc: var(--ghost); }
.seat.dead-ZERO  { --dc: var(--zero); }
.seat.dead .s-head, .seat.dead .meter, .seat.dead .s-field { opacity: .55; }
.s-deadid { position: absolute; right: 8px; bottom: 6px; display: flex; align-items: center; gap: 6px; font-family: var(--f-display); font-size: 18px; color: var(--dc); letter-spacing: .06em; pointer-events: none; }
.s-deadid span { width: 28px; height: 28px; border: 2px solid currentColor; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 17px; }

/* =========================================================
   PRIVATE GUESSES
   ========================================================= */
.guess-btn { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; font-size: 11px; font-weight: 900; border-radius: 2px; border: 1px dashed var(--line-2); background: none; color: var(--mute); }
.guess-btn:hover { border-color: var(--fg); color: var(--fg); }
.guess-btn i { width: 8px; height: 8px; border-radius: 50%; background: var(--gc); }
.guess-btn.g-ORDER, .seat.guess-ORDER { --gc: var(--order); }
.guess-btn.g-GHOST, .seat.guess-GHOST { --gc: var(--ghost); }
.guess-btn.g-ZERO,  .seat.guess-ZERO  { --gc: var(--zero); }
.guess-btn[class*="g-"] { border-style: solid; border-color: var(--gc); color: var(--gc); }
.seat[class*="guess-"]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 4px 0 0 4px; background: var(--gc); }
.seat[class*="guess-"] { background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 12%, var(--bg-2)), var(--bg-2) 45%); }
.channel .ch-flag { background: var(--pkc); color: var(--pkc-ink); }

/* ---------- online: two modes, room code, disconnected seats ---------- */
.net-sec { padding: 12px 0; border-bottom: 1px solid var(--line); }
.net-sec:last-of-type { border-bottom: 0; }
.net-h { display: flex; align-items: center; gap: 8px; }
.net-h b { font-size: 14px; }
.code-in { width: 130px; text-transform: uppercase; letter-spacing: .2em; font-size: 16px; font-weight: 600; }
.room-code { display: flex; gap: 8px; margin: 4px 0 12px; }
.room-code span { width: 54px; height: 66px; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 38px; background: var(--fg); color: var(--bg); border-radius: 4px; }
.tag.dc { background: #5A2A22; color: #FFB3A3; animation: me-blink 1.4s ease-in-out infinite; }
.seat.dc { border-style: dashed; border-color: #FF8A73; }

.link-lbl { font-size: 12px; font-weight: 900; color: var(--mute); margin: 10px 0 4px; letter-spacing: .04em; }
.invite.small { font-size: 13px; padding: 6px 10px; }
.warn-box { margin-top: 10px; padding: 10px 12px; border: 1px solid #FF8A73; border-radius: 3px; background: #2A1512; color: #FFD2C8; font-size: 13px; line-height: 1.7; }

/* Traditional Chinese headings: the display face lacks many glyphs. */
:lang(zh-Hant) .setup h1, :lang(zh-Hant) .overlay h2 { font-family: var(--f-body); font-weight: 900; }

/* ---------- decision clock ---------- */
.pr-timer { position: relative; height: 18px; border-radius: 2px; background: var(--bg-3); overflow: hidden; display: flex; align-items: center; }
.pr-timer i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: color-mix(in srgb, var(--fg) 22%, transparent); transition: width .2s linear; }
.pr-timer span { position: relative; margin-left: auto; padding: 0 8px; font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--fg); }
.pr-timer.low i { background: color-mix(in srgb, #FF4A3D 55%, transparent); }
.pr-timer.low span { color: #FF8A73; }

/* ---------- role pick: large cards, pick then confirm ---------- */
.rp-overlay { position: fixed; inset: 0; z-index: 38; background: rgba(8,8,10,.88); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rp-box { --mm: 4.4px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 14px; max-width: 100%; max-height: 100%; overflow: auto; }
.rp-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.rp-title b { font-size: 24px; font-weight: 900; }
.rp-title span { font-size: 14px; color: var(--mute); display: inline-flex; align-items: center; gap: 6px; }
.rp-sub { margin: 0; font-size: 15px; color: var(--mute); }
.rp-cards { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.rp-card { padding: 0; border: 0; background: none; border-radius: calc(3 * var(--mm)); transition: transform .15s, opacity .15s, box-shadow .15s; }
.rp-card:hover { transform: translateY(-4px); }
.rp-card.sel { box-shadow: 0 0 0 4px var(--hi), 0 0 40px -6px rgba(229,165,10,.8); transform: translateY(-6px); }
.rp-card.off { opacity: .4; }
.rp-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rp-actions .big { font-size: 17px; padding: 12px 26px; }
.rp-box .pr-timer { height: 22px; }

/* =========================================================
   BACK BUTTON
   ========================================================= */
.back-btn { order: -1; background: var(--bg-3); border: 2px solid var(--fg); color: var(--fg); font-size: 14px; font-weight: 900; padding: 7px 14px; }
.back-btn:hover { background: var(--fg); color: var(--bg); }

/* =========================================================
   WHO MUST ACT NOW — loud, with the countdown
   ========================================================= */
.seat.acting { border-color: #FFFFFF; box-shadow: 0 0 0 3px #FFFFFF, 0 0 34px -2px rgba(255,255,255,.65); animation: act-pulse 1.2s ease-in-out infinite; z-index: 2; }
@keyframes act-pulse { 50% { box-shadow: 0 0 0 3px #FFFFFF, 0 0 46px 2px rgba(255,255,255,.85); } }
.act-banner { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); z-index: 4; white-space: nowrap; background: #FFFFFF; color: #0E0E11; font-size: 12px; font-weight: 900; letter-spacing: .06em; padding: 3px 10px; border-radius: 3px; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.act-banner b { font-family: var(--f-mono); margin-left: 4px; }
.seat:has(.act-banner) { margin-bottom: 6px; }
.mine.my-move { box-shadow: 0 0 0 3px #FFFFFF, 0 0 40px -4px rgba(255,255,255,.6); }
.prompt.my-move { border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px #FFFFFF, 0 0 40px -6px rgba(255,255,255,.7); animation: act-pulse-p 1.2s ease-in-out infinite; }
@keyframes act-pulse-p { 50% { box-shadow: 0 0 0 1px #FFFFFF, 0 0 56px -2px rgba(255,255,255,.9); } }
/* when it's your move, the holder frame (packet colour) and the acting frame stack */
.seat.holder.acting { box-shadow: 0 0 0 3px var(--pkc), 0 0 0 7px #FFFFFF, 0 0 40px rgba(255,255,255,.6); }

/* =========================================================
   PACKET ROUTE — thicker, a runner dot, dashed hop to the next stop
   ========================================================= */
#route-layer .rt { stroke-width: 5; stroke-dasharray: 14 9; animation: rt-flow .6s linear infinite; }
#route-layer .rt-glow { stroke-width: 20; opacity: .28; }
#route-layer .rt-runner { fill: #FFFFFF; filter: drop-shadow(0 0 6px var(--pkc)); }
#route-layer .rt-next { fill: none; stroke: var(--pkc); stroke-width: 3; stroke-dasharray: 4 7; opacity: .7; }
@keyframes rt-flow { to { stroke-dashoffset: -23; } }
.seat.holder { border-width: 2px; border-color: var(--pkc); }
.tag.next { font-size: 12px; padding: 2px 8px; border-width: 2px; border-color: var(--pkc); color: var(--pkc); background: color-mix(in srgb, var(--pkc) 14%, var(--bg-2)); }

/* =========================================================
   PROBE — pop-up and seat note
   ========================================================= */
.reveal { position: fixed; inset: 0; z-index: 36; display: flex; align-items: center; justify-content: center; background: rgba(8,8,10,.6); padding: 16px; animation: rv-in .25s ease-out; }
@keyframes rv-in { from { opacity: 0; } }
.rv-box { --mm: 4.2px; background: var(--bg-2); border: 2px solid var(--fg); border-radius: 6px; padding: 18px 22px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
.rv-head { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.rv-head svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.rv-card .cn { animation: rv-flip .45s ease-out; }
@keyframes rv-flip { from { transform: perspective(700px) rotateY(90deg); } }
.rv-box p { margin: 0; font-size: 13px; color: var(--mute); text-align: center; max-width: 300px; line-height: 1.6; }
.s-probed { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 6px; border: 1px dashed var(--line-2); border-radius: 3px; background: var(--bg-3); }
.s-probed > span:first-child { font-size: 11px; font-weight: 900; color: var(--mute); }
body.fit .s-probed .chip { font-size: 10.5px; height: 19px; }
@media (max-height: 760px) { .rv-box { --mm: 3.4px; } }
@media (prefers-reduced-motion: reduce) { .seat.acting, .prompt.my-move { animation: none; } }

/* =========================================================
   VICTORY SCREEN
   ========================================================= */
.overlay.rs-wrap { padding: 0; background: #07070A; }
.result { position: relative; width: 100%; height: 100%; overflow: hidden auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 28px 16px;
  background: radial-gradient(120% 70% at 50% 30%, color-mix(in srgb, var(--wc) 30%, transparent), transparent 62%), #07070A; }
.result::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-58deg, transparent 0 22px, color-mix(in srgb, var(--wc) 7%, transparent) 22px 24px); }
.rs-burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.rs-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%); font-family: var(--f-display); font-size: min(62vh, 52vw); line-height: 1; color: var(--wc); opacity: .09; pointer-events: none; animation: rs-mark 1.2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rs-mark { from { transform: translate(-50%, -58%) scale(1.5); opacity: 0; } }
.rs-top { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rs-band { background: var(--wc); color: var(--wink); padding: 10px 56px 12px; transform: skewX(-12deg); box-shadow: 0 0 80px -10px var(--wc); animation: rs-band .7s cubic-bezier(.2,.9,.2,1) both; display: flex; flex-direction: column; align-items: center; }
.rs-band > * { transform: skewX(12deg); }
@keyframes rs-band { from { transform: skewX(-12deg) translateX(-120vw); } }
.rs-kicker { font-size: 12px; font-weight: 600; letter-spacing: .3em; opacity: .75; }
.rs-title { font-size: clamp(34px, 6vw, 64px); font-weight: 900; line-height: 1.05; letter-spacing: .04em; }
.r-ORDER .rs-title, .r-GHOST .rs-title, .r-ZERO .rs-title { font-family: var(--f-display); font-weight: 400; }
:lang(zh-Hant) .r-ORDER .rs-title, :lang(zh-Hant) .r-GHOST .rs-title, :lang(zh-Hant) .r-ZERO .rs-title { font-family: var(--f-body); font-weight: 900; }
.rs-me { font-family: var(--f-display); font-size: clamp(28px, 4.4vw, 46px); letter-spacing: .32em; padding-left: .32em; color: #FFFFFF; text-shadow: 0 0 24px var(--wc); animation: rs-stamp .5s .55s cubic-bezier(.2,1.4,.4,1) both; }
.m-lose .rs-me { color: #8C897F; text-shadow: none; }
@keyframes rs-stamp { from { transform: scale(2.4); opacity: 0; } }
.rs-finale { margin: 0; font-size: 15px; font-weight: 700; color: var(--fg); background: rgba(7,7,10,.7); padding: 6px 14px; border-radius: 3px; animation: rs-fade .5s .8s both; }
@keyframes rs-fade { from { opacity: 0; transform: translateY(8px); } }
.rs-row { position: relative; z-index: 2; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 1180px; }
.rs-p { width: 132px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; animation: rs-fade .4s var(--d) both; }
.rs-flip { width: 112px; height: 150px; position: relative; perspective: 800px; }
.rs-flip > div { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; }
.rs-back { background: var(--stock); border: 1.5px solid #3A3A44; animation: rs-back .5s var(--d) both; }
.rs-front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--iink); background: var(--ic); animation: rs-front .5s var(--d) both; }
@keyframes rs-back { to { transform: rotateY(180deg); } }
@keyframes rs-front { from { transform: rotateY(-180deg); } }
.rs-front.i-ORDER { --ic: var(--order); --iink: #141210; } .rs-front.i-GHOST { --ic: var(--ghost); --iink: #0E1315; } .rs-front.i-ZERO { --ic: var(--zero); --iink: #0F1410; }
.rs-kanji { font-family: var(--f-display); font-size: 46px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border: 3px solid currentColor; border-radius: 5px; line-height: 1; }
.rs-id { font-family: var(--f-display); font-size: 16px; letter-spacing: .06em; display: flex; flex-direction: column; align-items: center; }
.rs-id small { font-family: var(--f-body); font-size: 11px; font-weight: 900; }
.rs-p.won .rs-flip { box-shadow: 0 0 0 3px #FFFFFF, 0 0 34px var(--wc); border-radius: 8px; }
.rs-p.out .rs-flip { filter: grayscale(.5) brightness(.75); }
.rs-p:not(.won) { opacity: .78; }
.rs-name { font-weight: 900; font-size: 14px; display: flex; gap: 4px; align-items: center; max-width: 100%; }
.rs-name span { font-size: 10px; background: #FFFFFF; color: #0E0E11; padding: 0 4px; border-radius: 2px; }
.rs-p.me .rs-name { color: #FFFFFF; }
.rs-role { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--mute); font-weight: 700; }
.rs-role svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 3; }
.rs-meter { display: flex; gap: 6px; font-size: 11px; }
.rs-meter i { font-style: normal; } .rs-meter .o { color: var(--order); } .rs-meter .g { color: var(--ghost); } .rs-meter .v { color: #A27BFF; }
.rs-crown { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-4deg); background: #FFFFFF; color: #0E0E11; font-family: var(--f-display); font-size: 14px; letter-spacing: .14em; padding: 2px 10px; border-radius: 2px; z-index: 2; box-shadow: 0 0 18px var(--wc); }
.rs-dead { position: absolute; top: 60px; left: 50%; transform: translateX(-50%) rotate(-8deg); border: 2px solid #FF4A3D; color: #FF4A3D; background: rgba(20,8,8,.85); font-family: var(--f-display); font-size: 13px; letter-spacing: .14em; padding: 1px 8px; z-index: 2; }
.rs-actions { position: relative; z-index: 4; animation: rs-fade .4s 1.6s both; }
.rs-actions .primary { font-size: 16px; padding: 10px 24px; }
@media (prefers-reduced-motion: reduce) { .result *, .result { animation: none !important; } }
@media (max-width: 720px) { .rs-p { width: 104px; } .rs-flip { width: 92px; height: 124px; } .rs-band { padding: 8px 26px 10px; } }

/* ---------- help dock + illustrated guide ---------- */
#help-dock { position: fixed; top: 6px; right: 10px; z-index: 48; display: flex; gap: 6px; }
#help-dock button { display: flex; align-items: center; gap: 6px; background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 900; font-size: 13px; padding: 6px 12px; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
#help-dock button b { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); color: var(--fg); font-size: 12px; }
#help-dock button.on { background: var(--hi); border-color: var(--hi); }
#help-dock.in-bar { position: static; order: 99; box-shadow: none; }
#help-dock.in-bar button { padding: 5px 10px; box-shadow: none; }
.guide-ov { z-index: 47; align-items: flex-start; padding-top: 52px; }
.guide { max-width: 980px !important; padding: 0 !important; display: flex; flex-direction: column; max-height: calc(100vh - 64px) !important; overflow: hidden !important; }
.gd-tabs { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-3); }
.gd-tabs .sp { flex: 1; }
.gd-tabs button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.gd-body { overflow: auto; padding: 6px 22px 22px; }
.guide section { padding: 14px 0 6px; border-bottom: 1px dashed var(--line); }
.guide section:last-child { border-bottom: 0; }
.guide h3 { margin: 14px 0 8px; font-size: 17px; font-weight: 900; color: var(--fg); letter-spacing: .02em; }
.guide section > h3 { margin-top: 0; }
.guide small { display: block; font-size: 12.5px; line-height: 1.55; color: #BDB9AF; font-weight: 500; }
.gd-lead { font-size: 15px; margin: 0 0 10px; color: var(--fg); }
.gd-note { font-size: 12.5px; color: var(--mute); margin: 6px 0 0; }
.gd-mc { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 22px; border-radius: 2px; margin-right: 3px; vertical-align: middle; font-style: normal; font-size: 11px; font-weight: 900; color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.gd-goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gd-goal { display: flex; gap: 10px; background: var(--bg-3); border: 1px solid var(--line-2); border-top: 4px solid var(--gc); border-radius: 4px; padding: 10px; }
.gd-goal p { margin: 4px 0 8px; font-size: 13px; line-height: 1.5; }
.gd-goal p b { color: var(--gc); }
.gd-idt { flex: none; width: 34px; height: 46px; border-radius: 3px; background: var(--gc); color: #121212; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; }
.gd-row { display: flex; align-items: center; flex-wrap: wrap; }
.gd-res { font-weight: 900; margin-left: 4px; color: var(--gc); }
.gd-danger { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border: 1px solid #7D4FD8; background: rgba(125,79,216,.12); border-radius: 4px; font-size: 14px; }
.gd-danger b { color: #B593FF; }
.gd-anat { display: flex; gap: 22px; align-items: center; }
.gd-excard { position: relative; --mm: 2.6px; flex: none; }
.gd-tag { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--hi); color: #141210; font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg-2); }
.gd-tag.t1 { left: -10px; bottom: 14px; } .gd-tag.t2 { right: -10px; top: 46%; } .gd-tag.t3 { right: -10px; top: 8px; }
.gd-calls { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gd-calls li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.gd-calls li i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--hi); color: #141210; font-style: normal; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.gd-calls li b { display: block; font-size: 15px; }
.gd-steps { display: flex; align-items: stretch; gap: 6px; }
.gd-step { position: relative; flex: 1; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 10px 10px 10px 40px; min-height: 64px; }
.gd-step i { position: absolute; left: 9px; top: 10px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--fg); font-style: normal; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.gd-step b { font-size: 15px; }
.gd-step.key { border-color: var(--hi); box-shadow: 0 0 0 1px var(--hi); }
.gd-step.key i { background: var(--hi); border-color: var(--hi); color: #141210; }
.gd-step em { position: absolute; top: -9px; right: 8px; background: var(--hi); color: #141210; font-style: normal; font-size: 11px; font-weight: 900; padding: 1px 6px; border-radius: 2px; }
.gd-arr { align-self: center; color: var(--mute); font-size: 12px; flex: none; }
.gd-arr.long { letter-spacing: -2px; color: var(--hi); }
.gd-lane { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: center; padding: 10px; margin-bottom: 8px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 4px; border-left: 6px solid #4A4A55; }
.gd-lane.p-DIRECT { border-left-color: var(--hi); }
.gd-lane.p-OPEN { border-left-color: var(--fg); }
.gd-lh { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: center; }
.gd-lh small { grid-column: 1 / -1; }
.gd-lh b { font-size: 16px; }
.gd-pi svg { width: 24px; height: 24px; display: block; stroke: currentColor; fill: none; }
.gd-face { font-size: 11px; font-weight: 900; padding: 1px 6px; border-radius: 2px; background: #2B2B33; }
.p-OPEN .gd-face { background: var(--fg); color: var(--bg); }
.gd-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gd-node { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 5px 9px; text-align: center; min-width: 64px; }
.gd-node b { font-size: 13px; display: block; }
.gd-node small { font-size: 11px; color: var(--mute); }
.gd-node.me { border-color: var(--fg); }
.gd-node.hot { border-color: var(--hi); background: rgba(229,165,10,.12); }
.gd-node.hot small { color: var(--hi); font-weight: 900; }
.gd-node.wide { min-width: 140px; }
.gd-dots { color: var(--mute); }
.gd-sep { width: 10px; }
.gd-end { flex-basis: 100%; margin: 4px 0 0; font-size: 12.5px; color: var(--hi); font-weight: 700; }
.gd-stop { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: stretch; }
.gd-tools { display: flex; gap: 8px; align-items: center; padding: 10px; border: 1px dashed var(--line-2); border-radius: 4px; flex-wrap: wrap; }
.gd-tools > small { flex-basis: 100%; margin-bottom: -2px; }
.gd-tool { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; width: 70px; }
.gd-pic { display: inline-flex; width: 34px; height: 34px; flex: none; }
.gd-pic svg { width: 100%; height: 100%; }
.gd-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gd-btn { border-radius: 6px; padding: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.gd-btn b { font-size: 22px; font-weight: 900; }
.gd-btn.yes { background: var(--fg); color: var(--bg); } .gd-btn.yes small { color: #3b3a36; }
.gd-btn.no { border: 2px solid var(--fg); }
.gd-warn { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 10px; background: rgba(229,165,10,.08); border: 1px solid rgba(229,165,10,.35); border-radius: 4px; font-size: 13.5px; }
.gd-warn .gd-pic { width: 26px; height: 26px; --acc: var(--hi); }
.gd-ints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gd-int, .gd-cmd { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 10px; }
.gd-int b, .gd-cmd b { font-size: 15px; }
.gd-cmds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gd-when { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 900; padding: 0 5px; border-radius: 2px; background: #2B2B33; color: var(--fg); vertical-align: 2px; }
.gd-timings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gd-timings > div { --mm: 3.6px; background: var(--paper, #ECE8DF); color: #141414; border-radius: 4px; padding: 10px; align-items: center; }
.gd-timings > div > span:last-child b { font-size: 14px; color: #141414; }
.gd-timings > div > span:last-child small { color: #444; }

.gd-list { margin: 0; padding-left: 20px; }
.gd-list li { font-size: 14px; line-height: 1.7; margin-bottom: 4px; }
.gd-list li b { color: #FF6A55; }
.gd-flow h3 { margin-top: 18px; }
.gd-steps.compact .gd-step { min-height: 0; }
.gd-trip { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 640px; margin: 0 auto; }
.gd-fn { width: 100%; text-align: center; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 8px 12px; }
.gd-fn b { font-size: 15px; }
.gd-fn.start { background: var(--fg); color: var(--bg); font-weight: 900; font-size: 15px; }
.gd-fn.gap { border-style: dashed; }
.gd-fv { color: var(--mute); font-size: 12px; line-height: 1.1; }
.gd-fq { font-weight: 900; font-size: 16px; padding: 6px 18px; border: 2px solid var(--hi); color: var(--hi); border-radius: 3px; margin: 2px 0 6px; }
.gd-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.gd-fb { border-radius: 5px; padding: 10px; text-align: center; }
.gd-fb b { font-size: 17px; }
.gd-fb.yes { background: var(--fg); color: var(--bg); } .gd-fb.yes small { color: #3b3a36; }
.gd-fb.no { border: 2px solid var(--fg); }
.gd-loop { margin-top: 6px; color: var(--hi) !important; font-weight: 700 !important; }
.gd-fn.gd-chk { border-color: var(--hi); }
.gd-checks { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
@media (max-width: 760px) {
  .gd-goals, .gd-ints, .gd-cmds { grid-template-columns: 1fr; }
  .gd-timings { grid-template-columns: 1fr 1fr; }
  .gd-steps { flex-direction: column; } .gd-steps .gd-arr { transform: rotate(90deg); }
  .gd-lane { grid-template-columns: 1fr; }
  .gd-anat, .gd-stop { display: flex; flex-direction: column; align-items: flex-start; }
  .gd-body { padding: 6px 14px 16px; }
}

/* ---------- packet route v3: fibre line, light pulses, lock-on brackets ---------- */
#route-layer .rt2-s0 { stop-color: var(--pkc); stop-opacity: .05; }
#route-layer .rt2-s1 { stop-color: var(--pkc); stop-opacity: .85; }
#route-layer .rt2-base { fill: none; stroke-width: 1.6; }
#route-layer .rt2-pulse { fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 7 93; stroke-dashoffset: 100;
  filter: drop-shadow(0 0 4px var(--pkc)) drop-shadow(0 0 10px var(--pkc)); animation: rt2-run 1.5s cubic-bezier(.45,.05,.55,.95) infinite; }
#route-layer .rt2-p2 { animation-delay: .75s; stroke-width: 1.8; opacity: .7; }
@keyframes rt2-run { to { stroke-dashoffset: 0; } }
#route-layer .rt2-src circle { fill: none; stroke: var(--pkc); stroke-width: 1.2; opacity: .6; }
#route-layer .rt2-src rect { fill: var(--pkc); }
#route-layer .rt2-ret { fill: none; stroke: var(--pkc); stroke-width: 2.2; stroke-linecap: square; transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pkc) 60%, transparent)); animation: rt2-lock .45s cubic-bezier(.2,.9,.3,1.2) both, rt2-breathe 2.4s ease-in-out .45s infinite; }
#route-layer .rt2-ret circle { fill: var(--pkc); stroke: none; }
#route-layer .rt2-ret.me { stroke-width: 3; }
@keyframes rt2-lock { from { transform: scale(1.18); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rt2-breathe { 50% { opacity: .55; } }
#route-layer .rt2-next { fill: none; stroke: var(--pkc); stroke-width: 1.4; stroke-dasharray: 1 6; stroke-linecap: round; opacity: .55; }
#route-layer .rt2-chev { fill: none; stroke: var(--pkc); stroke-width: 1.6; }
/* calmer seat states: crisp outline instead of a big glow */
.seat.holder, .mine.holder { box-shadow: 0 0 0 1.5px var(--pkc); border-color: var(--line-2); }
.seat.holder.acting { box-shadow: 0 0 0 1.5px var(--pkc), 0 0 0 5px rgba(255,255,255,.85), 0 0 26px rgba(255,255,255,.35); }
.pk-banner { height: 24px; background: color-mix(in srgb, var(--pkc) 14%, #0E0E11); color: var(--pkc); border-bottom: 1.5px solid var(--pkc); border-radius: 4px 4px 0 0; font-family: var(--f-mono), var(--f-body); letter-spacing: .08em; }
.pk-banner::before { content: ''; width: 6px; height: 6px; background: var(--pkc); box-shadow: 0 0 8px var(--pkc); animation: rt2-breathe 1.2s ease-in-out infinite; }
body[data-pk="unknown"] .pk-banner { background: #1C1C21; color: #F2EFE8; }
.tag.next { font-family: var(--f-mono), var(--f-body); font-size: 11px; letter-spacing: .08em; padding: 1px 7px; border: 1px solid color-mix(in srgb, var(--pkc) 55%, transparent); color: var(--pkc); background: transparent; }
.tag.next i { font-style: normal; margin-left: 4px; letter-spacing: -1px; animation: rt2-breathe 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #route-layer .rt2-pulse, #route-layer .rt2-ret, .pk-banner::before, .tag.next i { animation: none; } }

/* setup: learn row */
.learn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: -6px 0 18px; }
.learn-row button { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 9px 16px; }
.learn-row button b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 11px; }
.learn-row button.tut { border-color: var(--hi); color: var(--hi); }
.learn-row button.tut b { background: var(--hi); }

/* guide: field diagram */
.gd-fieldwrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.gd-table { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; background: radial-gradient(ellipse at center, #1E1E26, #121216); display: flex; flex-direction: column; gap: 10px; }
.gd-others { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gd-seat { border: 1px solid var(--line-2); border-radius: 5px; padding: 6px; background: var(--bg-2); }
.gd-seat.me { border-color: var(--fg); }
.gd-sn { font-size: 11px; font-weight: 900; color: var(--mute); margin-bottom: 4px; }
.gd-seat.me .gd-sn { color: var(--fg); }
.gd-zs { display: flex; flex-wrap: wrap; gap: 4px; }
.gd-z { display: flex; align-items: center; gap: 4px; font-size: 10.5px; border-radius: 3px; padding: 3px 5px; flex: 1 1 40%; }
.gd-z.wide { flex-basis: 100%; }
.gd-z i { font-style: normal; width: 15px; height: 15px; border-radius: 50%; background: var(--hi); color: #141210; font-size: 10px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gd-z.sec { background: repeating-linear-gradient(-45deg, #26262E 0 5px, #1C1C22 5px 10px); border: 1px dashed #5D5B66; }
.gd-z.pub { background: #2C2C35; border: 1px solid #4A4A55; }
.gd-seat:not(.me) .gd-z b { display: none; }
.gd-seat:not(.me) .gd-z { flex: 0 0 auto; }
.gd-center { display: flex; gap: 8px; align-items: stretch; }
.gd-chan { flex: 1; display: flex; gap: 10px; align-items: center; border: 1px solid var(--hi); border-radius: 5px; padding: 8px 10px; background: rgba(229,165,10,.06); }
.gd-chan b { font-size: 13px; color: var(--hi); }
.gd-pk { width: 22px; height: 30px; border-radius: 3px; background: var(--stock, #17171B); border: 1.5px solid var(--paper, #ECE8DF); box-shadow: 0 0 12px rgba(229,165,10,.5); flex: none; }
.gd-deck { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--mute); padding: 0 8px; }
.gd-deck span { width: 20px; height: 28px; border-radius: 3px; border: 1.5px solid var(--mute); box-shadow: 3px 3px 0 -1px var(--bg-2), 3px 3px 0 0 var(--mute); }
.gd-zlist small { margin-top: 2px; }
.gd-pv { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 900; padding: 0 6px; border-radius: 2px; vertical-align: 2px; }
.gd-pv.sec { border: 1px dashed #8C897F; color: #CFCBC2; }
.gd-pv.pub { background: var(--fg); color: var(--bg); }
/* guide: command timing colours */
.tg-turn { --tg: #F2EFE8; } .tg-front { --tg: #FF9F43; } .tg-move { --tg: #FF5FA2; } .tg-resp { --tg: #FF5A5A; }
.gd-tgs { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 10px; }
.gd-tg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.gd-tg i { width: 14px; height: 14px; border-radius: 3px; background: var(--tg); }
.gd-cmd[class*="tg-"] { border-left: 5px solid var(--tg); }
.gd-cmd[class*="tg-"] .gd-when { background: var(--tg); color: #141210; }
@media (max-width: 760px) { .gd-fieldwrap { grid-template-columns: 1fr; } }

/* ---------- tutorial ---------- */
.tut-ov { z-index: 47; align-items: flex-start; padding-top: 52px; }
.tut { max-width: 1120px !important; padding: 0 !important; display: flex; flex-direction: column; max-height: calc(100vh - 64px) !important; overflow: hidden !important; }
.tut-title { font-size: 15px; }
.tut-count { font-size: 12px; color: var(--mute); margin-right: 8px; align-self: center; }
.tut-body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 0; overflow: auto; }
.tut-table { padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; background: radial-gradient(ellipse at center, #1C1C24, #111115); }
.tut-table > .tut-seat.pos2 { align-self: center; width: 46%; }
.tut-mid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 10px; align-items: center; }
.tut-me { display: flex; gap: 10px; align-items: stretch; border-radius: 6px; }
.tut-me .tut-seat { flex: 0 0 210px; }
.tut-seat { position: relative; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; transition: box-shadow .2s; }
.tut-seat.dead > :not(.ts-stamps) { opacity: .5; filter: grayscale(.4); }
.tut-seat.dead .ts-top b { text-decoration: line-through; }
.tut-seat.holds { border-color: var(--fg); }
.tut-seat.won { border-color: var(--order); box-shadow: 0 0 0 2px var(--order), 0 0 24px rgba(229,165,10,.45); }
.ts-top { display: flex; align-items: center; gap: 7px; }
.ts-top b { font-size: 14px; flex: 1; min-width: 0; }
.ts-emb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; }
.ts-id { font-size: 11px; font-weight: 900; padding: 1px 7px; border-radius: 3px; border: 1px dashed #6A6873; color: var(--mute); }
.ts-id.show { background: var(--ic); color: #121212; border: 0; }
.ts-front { display: flex; align-items: center; min-height: 28px; color: var(--dim); border-radius: 4px; padding: 2px; }
.ts-front .gd-mc { width: 20px; height: 27px; font-size: 11px; }
.ts-hand { font-size: 11px; color: var(--mute); }
.ts-lock { position: absolute; top: -9px; right: 8px; background: #FF5FA2; color: #141210; font-size: 10px; font-weight: 900; padding: 1px 6px; border-radius: 2px; letter-spacing: .08em; }
.ts-stamps { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; white-space: nowrap; }
.tut-stamp { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 900; padding: 3px 9px; border-radius: 3px; background: #0E0E11; border: 1.5px solid var(--fg); box-shadow: 0 6px 14px rgba(0,0,0,.6); animation: tut-pop .35s cubic-bezier(.2,.9,.3,1.3) both; }
.tut-stamp svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.tut-stamp.lock { border-color: #FF5FA2; color: #FF5FA2; }
.tut-stamp.crash { border-color: #FF4A3D; color: #FF4A3D; font-size: 15px; letter-spacing: .1em; }
.tut-stamp.win { border-color: var(--order); color: var(--order); font-size: 15px; }
.tut-stamp.peek { padding: 2px 4px; }
@keyframes tut-pop { from { transform: scale(.6); opacity: 0; } }
.tut-chan { background: #15151A; border: 1px solid var(--line-2); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; --mm: 1.35px; min-height: 170px; justify-content: center; }
.tut-chan > small { font-size: 10px; letter-spacing: .14em; color: var(--mute); font-weight: 700; }
.tc-empty { color: var(--dim); font-size: 12px; }
.tc-card { position: relative; }
.tc-card.blocked .cn { opacity: .45; }
.tc-x { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-10deg); border: 2px solid var(--zero); color: var(--zero); background: rgba(14,14,17,.9); font-size: 12px; font-weight: 900; padding: 2px 8px; white-space: nowrap; }
.tc-mode { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 900; }
.tc-mode svg { width: 15px; height: 15px; fill: none; stroke: currentColor; }
.tc-at { font-size: 12px; color: var(--hi); font-weight: 700; }
.tut-hand { flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 8px 10px; }
.tut-hand > small { font-size: 11px; color: var(--mute); font-weight: 700; display: block; margin-bottom: 6px; }
.tut-hcs { display: flex; gap: 6px; flex-wrap: wrap; --mm: 1.3px; }
.tut-hc { position: relative; transition: transform .2s; }
.tut-hc.fresh { transform: translateY(-4px); }
.tut-hc.fresh::after { content: 'NEW'; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--hi); color: #141210; font-size: 9px; font-weight: 900; padding: 0 5px; border-radius: 2px; }
.tut-hc.used { opacity: .35; transform: translateY(6px) rotate(-3deg); }
.tut-hc.used::after { content: '▶'; position: absolute; top: 40%; left: 50%; transform: translateX(-50%); color: var(--fg); font-size: 14px; }
.tut-hi { box-shadow: 0 0 0 2px var(--hi), 0 0 22px -2px rgba(229,165,10,.55); animation: tut-glow 1.4s ease-in-out infinite; }
@keyframes tut-glow { 50% { box-shadow: 0 0 0 2px var(--hi), 0 0 6px -2px rgba(229,165,10,.3); } }
.tut-side { border-left: 1px solid var(--line); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-2); }
.tut-step { font-size: 11px; letter-spacing: .2em; color: var(--hi); font-weight: 700; }
.tut-side h3 { margin: 0; font-size: 20px; font-weight: 900; }
.tut-side p { margin: 0; font-size: 14.5px; line-height: 1.8; color: #DAD6CC; flex: 1; }
.tut-side p b { color: #FFFFFF; }   /* faction words take their own colours (CN_MISSION.colorize) */
.tut-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.tut-nav button { flex: 1; padding: 10px 12px; font-size: 14px; }
.tut-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.tut-dot { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; }
.tut-dot.done { background: #5D5B56; }
.tut-dot.on { background: var(--hi); border-color: var(--hi); }
@media (max-width: 860px) {
  .tut-body { grid-template-columns: 1fr; }
  .tut-side { border-left: 0; border-top: 1px solid var(--line); }
  .tut-me { flex-direction: column; } .tut-me .tut-seat { flex: none; }
  .tut-table > .tut-seat.pos2 { width: 70%; }
  .tut-mid { grid-template-columns: 1fr 1fr; } .tut-mid .tut-chan { grid-column: 1 / -1; order: -1; min-height: 0; }
}

/* role pick: faction badge must keep its own dark ink, not the grey header colour */
.rp-title > span { color: var(--mute); }
.rp-title .idbadge { display: inline-flex; align-items: center; font-size: 16px; letter-spacing: .08em; padding: 4px 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.rp-title .idbadge.id-ORDER { color: #141210; } .rp-title .idbadge.id-GHOST { color: #0B1416; } .rp-title .idbadge.id-ZERO { color: #0B140F; }
.idbadge.id-ORDER { color: #141210 !important; } .idbadge.id-GHOST { color: #0B1416 !important; } .idbadge.id-ZERO { color: #0B140F !important; }

/* ---------- mock battle coach ---------- */
.learn-row button.prac { border-color: #FF5FA2; color: #FF5FA2; }
.learn-row button.prac b { background: #FF5FA2; }
.coach { margin-top: 12px; border: 1px solid #3E5A7A; background: linear-gradient(180deg, rgba(76,140,220,.12), rgba(76,140,220,.04)); border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.6; color: #D7E4F2; }
.coach .co-h { font-size: 11px; font-weight: 900; letter-spacing: .16em; color: #7FB3F0; margin-bottom: 4px; }
.coach .co-h::before { content: '\25C6  '; }
.coach p { margin: 0 0 4px; }
.coach .co-intro { color: #9FB6CC; font-size: 12px; }
.coach .co-sub { font-size: 11px; font-weight: 900; color: #9FB6CC; margin: 6px 0 2px; }
.coach ul { margin: 0; padding-left: 16px; }
.coach li { margin: 1px 0; }
.coach li b { color: #FFFFFF; margin-right: 6px; }
body.fit .coach { font-size: 12px; padding: 8px 10px; line-height: 1.5; }
/* tutorial: illustrated steps, chapter tag, role pick */
.tut-ch { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 2px; background: var(--hi); color: #141210; letter-spacing: .06em; }
.tut-aside { padding: 16px 20px; overflow: auto; background: var(--bg-2); }
.tut-aside section { border: 0 !important; padding: 0 !important; }
.tut-aside section > h3 { display: none; }
.tut-rcs { display: flex; gap: 18px; justify-content: center; margin-bottom: 16px; --mm: 3.4px; }
.tut-rc { position: relative; transition: opacity .2s; }
.tut-rc.off { opacity: .4; }
.tut-rc.on .cn { box-shadow: 0 0 0 3px var(--hi), 0 0 26px rgba(229,165,10,.45); }
.tut-pick { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--hi); color: #141210; font-size: 12px; font-weight: 900; padding: 2px 10px; border-radius: 3px; white-space: nowrap; }
.tut-dot.gap { margin-left: 6px; }
.tut-aside .gd-timings { grid-template-columns: repeat(2, 1fr); }

.learn-row button { flex: none; white-space: nowrap; }

/* ---------- home screen + sub pages ---------- */
.setup2 { min-height: 100vh; position: relative; }
.setup2::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 78% 45%, rgba(229,165,10,.10), transparent 70%),
    radial-gradient(ellipse 40% 40% at 12% 90%, rgba(26,166,196,.08), transparent 70%),
    linear-gradient(rgba(236,232,223,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(236,232,223,.035) 1px, transparent 1px) 0 0 / 44px 44px; }
.setup2 > * { position: relative; z-index: 1; }
.home { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 0 40px; padding: 56px 56px 20px; max-width: 1280px; margin: 0 auto; }
.hm-left { display: flex; flex-direction: column; gap: 30px; justify-content: center; }
.hm-logo small { font-family: var(--f-mono); font-size: 12px; letter-spacing: .3em; color: var(--hi); }
.hm-logo h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(56px, 8vw, 96px); line-height: .92; margin: 12px 0 14px; letter-spacing: .01em; }
.hm-logo p { margin: 0; color: #BDB9AF; font-size: 15px; letter-spacing: .04em; }
.hm-menu { display: flex; flex-direction: column; gap: 10px; }
.hm-group { display: flex; flex-direction: column; gap: 8px; }
.hm-group.hm-row { flex-direction: row; margin-top: 4px; }
.hm-group.hm-row .hm-item { flex: 1; }
.hm-label { font-size: 11px; font-weight: 900; letter-spacing: .24em; color: var(--mute); margin: 10px 0 0; }
.hm-item { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; padding: 12px 16px; border-radius: 4px; background: rgba(22,22,27,.85); border: 1px solid var(--line-2); transition: border-color .15s, transform .15s, background .15s; }
.hm-item:hover { border-color: var(--fg); transform: translateX(4px); background: #1C1C22; }
.hm-ic { flex: none; width: 34px; height: 34px; border-radius: 3px; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; }
.hm-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-tx b { font-size: 15px; font-weight: 900; }
.hm-tx small { font-size: 12px; color: var(--mute); font-weight: 500; }
.hm-go { font-size: 20px; color: var(--mute); }
.hm-item.big { padding: 16px 18px; }
.hm-item.big .hm-tx b { font-size: 19px; }
.hm-item.big:first-child { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.hm-item.big:first-child .hm-tx small, .hm-item.big:first-child .hm-go { color: #55524C; }
.hm-item.big:first-child:hover { background: #FFFFFF; }
.hm-item.small { padding: 10px 14px; }
.hm-item.small .hm-ic { width: 28px; height: 28px; font-size: 13px; }
.hm-item.small .hm-go { display: none; }
.hm-right { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
.hm-fan { position: relative; width: 100%; height: 480px; --mm: 3.1px; }
.hm-fan > .cn { position: absolute; left: 50%; top: 50%; box-shadow: 0 30px 60px -10px rgba(0,0,0,.8); transition: transform .4s; }
.hm-fan > .cn:nth-child(1) { transform: translate(-100%, -48%) rotate(-12deg); }
.hm-fan > .cn:nth-child(2) { transform: translate(-70%, -54%) rotate(-4deg); }
.hm-fan > .cn:nth-child(3) { transform: translate(-40%, -50%) rotate(4deg); }
.hm-fan > .cn:nth-child(4) { transform: translate(-8%, -44%) rotate(11deg); }
.hm-fan:hover > .cn:nth-child(1) { transform: translate(-106%, -48%) rotate(-15deg); }
.hm-fan:hover > .cn:nth-child(4) { transform: translate(-2%, -44%) rotate(14deg); }
.hm-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; letter-spacing: .14em; }
/* sub pages */
.pg { max-width: 720px; margin: 0 auto; padding: 56px 20px 60px; display: flex; flex-direction: column; gap: 16px; }
.pg-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 4px; }
.pg-head h2 { font-family: var(--f-display); font-weight: 400; font-size: 34px; margin: 0; }
.pg-head p { margin: 6px 0 0; color: var(--mute); font-size: 14px; }
.pg-back { align-self: flex-start; background: none; border-color: var(--line-2); font-size: 13px; }
.pg .panel { padding: 18px 20px; }
.pg-sec { margin: 0 0 6px; font-size: 13px; color: var(--mute); letter-spacing: .1em; }
.pg-adv, .pg-dev { margin-top: 8px; }
.pg-adv summary, .pg-dev summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--mute); padding: 8px 0; }
.pg-dev summary { color: var(--fg); }
.start-row .primary.big { font-size: 16px; padding: 12px 34px; }
@media (max-width: 1080px) {
  .home { grid-template-columns: 1fr; padding: 40px 20px 18px; max-width: 620px; }
  .hm-right { display: none; }
}
/* coach inside the action box */
.prompt .coach { display: block; margin-top: auto; }
.prompt .coach > p, .prompt .coach > ul, .prompt .coach > div { display: block; }
.prompt .coach li b { display: inline; margin-right: 6px; }
.prompt .coach li { color: #C5D6E8; }
.coach.co-me { border-color: #4C78A8; }

/* tutorial prologue */
.tut-story { position: relative; overflow: hidden; padding: 34px 40px 30px; background:
    repeating-linear-gradient(0deg, rgba(236,232,223,.025) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(229,165,10,.08), transparent 70%),
    radial-gradient(ellipse 60% 60% at 85% 85%, rgba(26,166,196,.08), transparent 70%), #0B0B0E; }
.sy-year { position: absolute; right: -10px; top: -20px; font-family: var(--f-display); font-size: 180px; line-height: 1; color: rgba(236,232,223,.04); pointer-events: none; }
.sy-head { font-size: 11px; letter-spacing: .24em; color: #FF4A3D; margin-bottom: 18px; animation: sy-blink 1.4s steps(2) 3; }
.tut-story p { position: relative; margin: 0 0 16px; font-size: 15px; line-height: 1.95; color: #D9D5CB; opacity: 0; animation: sy-in .7s ease-out forwards; }
.tut-story p:first-of-type { font-family: var(--f-display); font-size: 22px; color: var(--fg); letter-spacing: .06em; }
.tut-story p big { display: inline-block; font-size: 21px; font-weight: 900; color: var(--fg); letter-spacing: .06em; line-height: 1.6; }
.tut-story b[class^="sy-"] { font-family: var(--f-mono); font-weight: 700; padding: 0 5px; margin: 0 2px; border-radius: 2px; letter-spacing: .06em; }
.sy-ORDER { background: var(--order); color: #141210; }
.sy-GHOST { background: var(--ghost); color: #0B1416; }
.sy-VIRUS { background: #7D4FD8; color: #F4F1EA; }
.sy-ZERO { background: var(--zero); color: #0B140F; }
.sy-CRASH { color: #FF4A3D !important; border: 1px solid #FF4A3D; }
@keyframes sy-in { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sy-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .tut-story p { animation: none; opacity: 1; } }

/* tutorial: every page has the same size, so Next never moves */
.tut { height: min(760px, calc(100vh - 64px)); width: 100%; }
.tut-body { flex: 1; min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr); }
.tut-body > .tut-table, .tut-body > .tut-aside, .tut-body > .tut-story { min-height: 0; overflow: auto; }
.tut-side { min-height: 0; }
.tut-side p { min-height: 0; overflow: auto; }
.tut-nav, .tut-dots { flex: none; }
@media (max-width: 860px) { .tut-body { grid-template-rows: minmax(0, 1fr) auto; } .tut-side { max-height: 46%; } }
.tut-body > .tut-story { overflow-x: hidden; overflow-y: auto; }
.tut-body > .tut-table, .tut-body > .tut-aside { overflow-x: hidden; }
.tb-lang { display: inline-flex; gap: 2px; }
.tb-lang button { padding: 5px 8px; min-width: 32px; }
.tb-lang button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* tutorial: attack cards step */
.tut-atk { display: flex; gap: 18px; justify-content: center; --mm: 3.4px; margin: 6px 0 18px; }
.tut-check { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.tut-check .tc-deck { padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 4px; background: #15151A; }
.tut-check .tc-res { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 4px; font-weight: 900; }
.tut-check .tc-res.hit { border: 1.5px solid #9B75FF; color: #C7B2FF; }
.tut-check .tc-res.dud { border: 1.5px dashed var(--line-2); color: var(--mute); }
.tut-stamp.peek s { text-decoration: none; position: relative; opacity: .55; }
.tut-stamp.peek s::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; border-top: 2px solid #FF4A3D; transform: rotate(-12deg); }
/* probe: the two seen cards in the action box */
.pr-cards { display: flex; gap: 10px; --mm: 1.6px; }

/* ---------- 3D card flip ---------- */
.fx-flip3d { position: fixed; z-index: 34; transform: translate(-50%, -50%); perspective: 1100px; pointer-events: none; }
.fx-flip3d .f3-card { position: relative; width: 100%; aspect-ratio: 63 / 88; transform-style: preserve-3d; animation: f3-turn var(--dur) cubic-bezier(.3,.1,.25,1) forwards; }
.fx-flip3d .f3-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: calc(3 * var(--fmm)); overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.fx-flip3d .f3-face > .cn { --mm: var(--fmm); }
.fx-flip3d .f3-front { transform: rotateY(180deg); }
.fx-flip3d .f3-glint { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%); transform: translateX(-120%); animation: f3-glint calc(var(--dur) * .6) ease-out calc(var(--dur) * .75) forwards; mix-blend-mode: screen; }
@keyframes f3-turn {
  0%   { transform: translateZ(0) rotateY(0) rotateX(0); }
  35%  { transform: translateZ(90px) rotateY(80deg) rotateX(8deg) scale(1.06); }
  70%  { transform: translateZ(60px) rotateY(196deg) rotateX(-3deg) scale(1.04); }
  85%  { transform: translateZ(10px) rotateY(176deg) rotateX(0) scale(1); }
  100% { transform: translateZ(0) rotateY(180deg); }
}
.fx-flip3d.fixed-size .f3-card { animation-name: f3-turn-fixed; }
@keyframes f3-turn-fixed {
  0% { transform: rotateY(0); }
  45% { transform: rotateY(88deg); }
  55% { transform: rotateY(96deg); }
  100% { transform: rotateY(180deg); }
}
/* lift shadow: a soft ellipse under the card (filters would flatten the 3D card) */
.fx-flip3d .f3-shadow { position: absolute; left: 8%; right: 8%; bottom: -6%; height: 14%; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(8px); animation: f3-shadow var(--dur) cubic-bezier(.3,.1,.25,1) forwards; }
@keyframes f3-shadow { 0% { transform: scale(1); opacity: .7; } 35% { transform: translateY(18px) scale(1.25); opacity: .3; } 85% { transform: scale(1.02); opacity: .6; } 100% { transform: scale(1); opacity: .7; } }
@keyframes f3-glint { to { transform: translateX(120%); } }
/* centre stage (Check): rises from the deck, flips, then shows the result colour */
.fx-flip3d.center { z-index: 37; }
.fx-flip3d.center::before { content: ''; position: fixed; inset: -100vmax; background: radial-gradient(circle at center, rgba(0,0,0,.25), rgba(0,0,0,.72) 60%); z-index: -1; animation: f3-dim .3s ease-out both; }
.fx-flip3d.center.from { animation: f3-rise .45s cubic-bezier(.2,.8,.3,1) both; }
.fx-flip3d.center.from .f3-card, .fx-flip3d.center.from .f3-shadow { animation-delay: .4s; animation-fill-mode: both; }
@keyframes f3-rise { from { transform: translate(calc(-50% + var(--fx0, 0px)), calc(-50% + var(--fy0, 0px))) scale(.35); opacity: .2; } }
@keyframes f3-dim { from { opacity: 0; } }
.fx-flip3d .f3-label { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); white-space: nowrap; font-weight: 900; font-size: 15px; letter-spacing: .12em; color: #fff; background: rgba(14,14,17,.9); border: 1px solid var(--line-2); padding: 4px 14px; border-radius: 3px; }
.fx-flip3d.virus .f3-front { animation: f3-hit .8s ease-out calc(var(--dur) * .9) both; }
.fx-flip3d.safe .f3-front { animation: f3-safe .8s ease-out calc(var(--dur) * .9) both; }
@keyframes f3-hit { 0% { box-shadow: 0 0 0 0 rgba(155,117,255,0); } 40% { box-shadow: 0 0 0 6px #9B75FF, 0 0 60px 10px rgba(155,117,255,.8); } 100% { box-shadow: 0 0 0 3px #9B75FF, 0 0 34px 4px rgba(155,117,255,.5); } }
@keyframes f3-safe { 40% { box-shadow: 0 0 0 4px #ECE8DF, 0 0 30px rgba(236,232,223,.5); } 100% { box-shadow: 0 0 0 2px #8C897F; filter: saturate(.6); } }
.fx-flip3d.out { transition: opacity .35s, transform .35s; opacity: 0; transform: translate(-50%, -50%) scale(.9); }
.fx-bomb { display: inline-flex; width: 46px; height: 46px; color: #F4F1EA; --acc: #9B75FF; filter: drop-shadow(0 0 10px rgba(155,117,255,.8)); }
.fx-bomb svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 4; }
@media (prefers-reduced-motion: reduce) { .fx-flip3d .f3-card { animation-duration: 1ms; } .fx-flip3d .f3-glint { display: none; } }

/* ---------- faction reveal (game start) ---------- */
.idr { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; background: #050507; overflow: hidden;
  --ic: var(--order); }
.idr.i-GHOST { --ic: var(--ghost); } .idr.i-ZERO { --ic: var(--zero); }
.idr::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px); pointer-events: none; }
.idr::after { content: ''; position: absolute; inset: -20%; background: radial-gradient(ellipse 50% 45% at 50% 42%, color-mix(in srgb, var(--ic) 55%, transparent), transparent 70%); opacity: 0; animation: idr-glow 1.2s ease-out 1.6s forwards; pointer-events: none; }
@keyframes idr-glow { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 100% { opacity: .55; transform: scale(1); } }
.idr-scan { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 18px; animation: idr-scan-out .35s ease-in 1.5s forwards; }
.idr-scan p { color: #8C897F; letter-spacing: .3em; font-size: 12px; animation: idr-blink .5s steps(2) infinite; }
.idr-roll { position: relative; width: 120px; height: 120px; border: 3px solid #ECE8DF; border-radius: 10px; overflow: hidden; }
.idr-roll span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 70px; color: #ECE8DF; opacity: 0; animation: idr-roll .45s steps(1) infinite; }
.idr-roll span:nth-child(2) { animation-delay: .15s; } .idr-roll span:nth-child(3) { animation-delay: .3s; }
@keyframes idr-roll { 0%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes idr-blink { 50% { opacity: .3; } }
@keyframes idr-scan-out { to { opacity: 0; transform: scale(1.4); filter: blur(6px); } }
.idr-main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 20px; max-width: 760px; opacity: 0; animation: idr-in .7s cubic-bezier(.2,.9,.3,1.1) 1.65s forwards; }
@keyframes idr-in { from { opacity: 0; transform: scale(1.25); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.idr-kicker { color: #CFCBC2; letter-spacing: .4em; font-size: 13px; }
.idr-seal { width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; background: var(--ic); color: #111; font-family: var(--f-display); font-size: 84px; border-radius: 14px; box-shadow: 0 0 0 4px #050507, 0 0 0 7px var(--ic), 0 0 80px color-mix(in srgb, var(--ic) 70%, transparent); transform: none; animation: idr-stamp .5s cubic-bezier(.2,1.4,.4,1) 1.75s both; }
@keyframes idr-stamp { from { transform: scale(2.6); opacity: 0; } }
.idr h1 { margin: 6px 0 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(54px, 9vw, 104px); line-height: 1; letter-spacing: .06em; color: var(--ic); text-shadow: 0 0 40px color-mix(in srgb, var(--ic) 60%, transparent); }
.idr-org { font-size: 13px; letter-spacing: .32em; color: #ECE8DF; opacity: .75; }
.idr-goal { margin: 4px 0 6px; font-size: 16px; font-weight: 700; color: #ECE8DF; max-width: 560px; }
.idr-line { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.idr-p { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; animation: idr-p .4s ease-out forwards; }
.idr-p:nth-child(1) { animation-delay: 2.1s; } .idr-p:nth-child(2) { animation-delay: 2.2s; } .idr-p:nth-child(3) { animation-delay: 2.3s; } .idr-p:nth-child(4) { animation-delay: 2.4s; }
.idr-p:nth-child(5) { animation-delay: 2.5s; } .idr-p:nth-child(6) { animation-delay: 2.6s; } .idr-p:nth-child(7) { animation-delay: 2.7s; }
@keyframes idr-p { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.idr-sil { position: relative; width: 46px; height: 60px; display: block; }
.idr-sil svg { width: 100%; height: 100%; fill: #2A2A33; stroke: #4A4A55; stroke-width: 1.5; }
.idr-sil i { position: absolute; left: 0; right: 0; top: 4px; text-align: center; font-style: normal; font-weight: 900; color: #8C897F; font-size: 18px; }
.idr-p b { font-size: 12px; color: #8C897F; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idr-p.me .idr-sil svg { fill: var(--ic); stroke: #fff; filter: drop-shadow(0 0 14px var(--ic)); }
.idr-p.me b { color: #fff; }
.idr-roster { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.idr-roster small { color: #8C897F; font-size: 12px; letter-spacing: .1em; margin-right: 4px; }
.idr-chip { font-size: 13px; font-weight: 900; padding: 3px 10px; border-radius: 3px; }
.idr-note { margin: 4px 0 8px; font-size: 13px; color: #BDB9AF; max-width: 520px; }
.idr .primary.big { font-size: 16px; padding: 12px 34px; opacity: 0; animation: idr-p .4s ease-out 2.9s forwards; }
@media (prefers-reduced-motion: reduce) { .idr-scan { display: none; } .idr-main, .idr-p, .idr .primary.big, .idr::after { animation: none; opacity: 1; } }
.fx-flip3d { display: block !important; }

/* ---------- Truth Serum effects ---------- */
.fx-serum { display: inline-flex; width: 50px; height: 50px; color: #F4F1EA; --acc: #9B75FF; filter: drop-shadow(0 0 10px rgba(155,117,255,.85)); }
.fx-serum svg { width: 100%; height: 100%; stroke: currentColor; }
.fx-serum-banner { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 60; pointer-events: none; --dc: var(--order);
  animation: sb-in .45s cubic-bezier(.2,1.2,.4,1) both; }
.fx-serum-banner.dose-GHOST { --dc: var(--ghost); }
.fx-serum-banner::before { content: ''; position: fixed; inset: -100vmax; background: radial-gradient(circle at center, rgba(0,0,0,.2), rgba(0,0,0,.66) 60%); z-index: -1; animation: f3-dim .3s ease-out both; }
.fx-serum-banner.out { transition: opacity .35s, transform .35s; opacity: 0; transform: translate(-50%, -50%) scale(.92); }
@keyframes sb-in { from { opacity: 0; transform: translate(-50%, -50%) scale(1.3); filter: blur(6px); } }
.sb-in { display: flex; align-items: center; gap: 20px; padding: 18px 28px 18px 20px; background: #0E0E11; border: 2px solid #9B75FF; border-radius: 8px;
  box-shadow: 0 0 0 1px #000, 0 0 50px rgba(155,117,255,.55); max-width: min(560px, 92vw); }
.sb-pic { flex: none; width: 84px; height: 84px; padding: 8px; background: #ECE8DF; border-radius: 6px; color: #111; --acc: #7B4DFF; animation: sb-jab .5s ease-out .25s both; }
.sb-pic svg { width: 100%; height: 100%; stroke: currentColor; }
@keyframes sb-jab { 0% { transform: translate(-14px, -14px) rotate(-8deg); } 60% { transform: translate(5px, 5px); } 100% { transform: none; } }
.sb-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sb-main small { color: #BDB9AF; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.sb-main small b { color: #fff; }
.sb-col { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-size: 34px; line-height: 1; color: var(--dc); letter-spacing: .04em; }
.sb-kj { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: var(--dc); color: #111; border-radius: 5px; font-size: 32px; }
.sb-main p { margin: 0; color: #ECE8DF; font-size: 15px; font-weight: 900; }
.sb-main p i { font-style: normal; color: #9B75FF; margin: 0 4px; }
/* the target's seat while they decide */
.seat.fx-dosed { --dc: var(--order); box-shadow: 0 0 0 3px var(--dc), 0 0 22px var(--dc); animation: dosed 1s ease-in-out infinite; }
.seat.fx-dosed.dose-GHOST { --dc: var(--ghost); }
@keyframes dosed { 50% { box-shadow: 0 0 0 3px var(--dc), 0 0 6px var(--dc); } }
@media (prefers-reduced-motion: reduce) { .fx-serum-banner, .sb-pic, .seat.fx-dosed { animation: none; } }
/* Truth Serum banner: a little larger so nobody misses it */
.sb-in { gap: 24px; padding: 22px 34px 22px 24px; }
.sb-pic { width: 104px; height: 104px; }
.sb-col { font-size: 44px; }
.sb-kj { width: 58px; height: 58px; font-size: 40px; }
.sb-main p { font-size: 17px; }
.sb-main small { font-size: 14px; }

/* ---------- Lock: the locked seat stays marked until the packet is resolved ---------- */
.seat.locked { box-shadow: 0 0 0 3px #9B75FF, 0 0 18px rgba(155,117,255,.55);
  background-image: repeating-linear-gradient(-45deg, rgba(155,117,255,.13) 0 6px, transparent 6px 14px); }
.lock-plate { position: absolute; right: 8px; top: -12px; z-index: 5; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  background: #9B75FF; color: #fff; padding: 3px 10px 3px 8px; border-radius: 3px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.lock-plate svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.lock-plate b { font-weight: 900; letter-spacing: .06em; }
.lock-plate span { font-weight: 700; opacity: .9; }
.lock-plate small { font-size: 11px; opacity: .8; padding-left: 6px; border-left: 1px solid rgba(255,255,255,.4); }
.seat { position: relative; }
.fx-clamp { animation: clamp .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes clamp { 0% { transform: scale(1.04); } 40% { transform: scale(.97); } 100% { transform: none; } }
/* Scan sweep over the packet */
.fx-scan { position: fixed; pointer-events: none; overflow: hidden; border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(120,220,255,.7); }
.fx-scan::after { content: ''; position: absolute; left: -10%; right: -10%; height: 18%; top: -20%;
  background: linear-gradient(to bottom, transparent, rgba(120,220,255,.75) 50%, transparent); animation: scan-sweep 1s ease-in-out both; }
@keyframes scan-sweep { to { top: 100%; } }
/* Purge: the removed card gets struck out */
.fx-flip3d.purged .f3-front::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 3px), #E5322D calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px));
  opacity: 0; animation: purge-x .35s ease-out calc(var(--dur) * .95) forwards; }
@keyframes purge-x { from { opacity: 0; transform: scale(1.3); } to { opacity: .9; transform: none; } }
.fx-flip3d.purged .f3-front { position: relative; }
/* Jamming: a red band and a glitching seat */
.fx-jamband { position: fixed; left: 0; right: 0; top: 34%; z-index: 60; pointer-events: none; display: flex; justify-content: center;
  animation: jb .9s steps(1) 0s 1, jb-out 1.3s ease-in forwards; }
.jb-in { display: flex; align-items: center; gap: 14px; padding: 10px 40px; background: #E5322D; color: #fff; transform: skewX(-12deg);
  box-shadow: 0 0 40px rgba(229,50,45,.6); }
.jb-in b { font-family: var(--f-display); font-weight: 400; font-size: 30px; letter-spacing: .08em; }
.jb-in span { font-size: 15px; font-weight: 900; }
.jb-ic svg { width: 28px; height: 28px; stroke: currentColor; fill: none; }
@keyframes jb { 0% { transform: translateX(-6px); } 10% { transform: translateX(8px); } 20% { transform: none; } 30% { transform: translateX(-3px); } 40% { transform: none; } }
@keyframes jb-out { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
.fx-glitch { animation: glitch .3s steps(2) 3; }
@keyframes glitch { 0% { transform: translate(2px, -1px); filter: hue-rotate(40deg); } 50% { transform: translate(-3px, 1px); filter: none; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .fx-scan::after, .fx-jamband, .fx-glitch, .fx-clamp { animation: none; } }
.mine.locked { position: relative; box-shadow: 0 0 0 3px #9B75FF, 0 0 18px rgba(155,117,255,.55); }

/* ---------- command band: a hologram. A scan line opens into a see-through band in the card's colour;
   the icon and card name dash in from the left;
   the card name flickers with an RGB split now and then, and the band folds back into a line and goes. ---------- */
.fx-band { position: fixed; left: 0; right: 0; top: 34%; z-index: 60; pointer-events: none; display: flex; justify-content: center; --bc: #F4F1EA; --bi: #111; }
.bd-in { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; gap: 16px; padding: 14px 24px;
  /* the card's colour as a light tint over a dark layer, so the table behind stays faint and the text reads */
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bc) 22%, transparent) 20%, color-mix(in srgb, var(--bc) 22%, transparent) 80%, transparent),
    linear-gradient(90deg, transparent, rgba(5,6,10,.86) 14%, rgba(5,6,10,.86) 86%, transparent);
  transform-origin: center; animation: bd-holo var(--bd, 1.5s) cubic-bezier(.3,.9,.3,1) both; }
.bd-in::before, .bd-in::after { content: ''; position: absolute; left: 6%; right: 6%; height: 2px; background: var(--bc); box-shadow: 0 0 12px var(--bc), 0 0 30px var(--bc); }
.bd-in::before { top: 0; } .bd-in::after { bottom: 0; }
.bd-lines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--bc) 18%, transparent) 0 1px, transparent 1px 4px); opacity: .6; }
.bd-in b { position: relative; font-family: var(--f-body); font-weight: 900; font-size: 34px; letter-spacing: .14em; line-height: 1; color: #fff;
  text-shadow: -1.5px 0 rgba(255,62,165,.6), 1.5px 0 rgba(63,224,255,.6), 0 0 12px color-mix(in srgb, var(--bc) 60%, transparent);
  animation: bd-glitch 1.1s steps(1) .3s infinite; }
.bd-in span { position: relative; }
.bd-cap { display: inline-flex; align-items: center; gap: 16px; animation: bd-cap .42s cubic-bezier(.2,1.25,.4,1) .14s both; }
@keyframes bd-cap { from { transform: translateX(-55vw); opacity: 0; } }
.bd-ic { display: inline-flex; width: 36px; height: 36px; color: var(--bc); filter: drop-shadow(0 0 8px var(--bc)); }
.bd-ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
@keyframes bd-holo { 0% { transform: scaleX(0) scaleY(.04); opacity: 1; } 12% { transform: scaleX(1) scaleY(.04); } 22% { transform: scaleX(1) scaleY(1); }
  82% { transform: scaleX(1) scaleY(1); opacity: 1; } 92% { transform: scaleX(1) scaleY(.04); opacity: 1; } 100% { transform: scaleX(0) scaleY(.04); opacity: 0; } }
@keyframes bd-glitch { 0%, 86% { transform: none; clip-path: none; } 88% { transform: translateX(4px); clip-path: inset(0 0 55% 0); } 90% { transform: translateX(-3px); clip-path: inset(45% 0 0 0); } 92% { transform: none; clip-path: none; } }
.fx-bigback .fx-back { transform: scale(1.6); display: inline-block; }
/* Shield dome */
.fx-dome { position: fixed; pointer-events: none; z-index: 55; border-radius: 10px; border: 3px solid var(--zero);
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--zero) 45%, transparent), transparent 70%);
  box-shadow: 0 0 30px var(--zero), inset 0 0 26px color-mix(in srgb, var(--zero) 55%, transparent);
  display: flex; align-items: center; justify-content: center; animation: dome 1.5s ease-out forwards; }
.fx-dome i { width: 54px; height: 54px; color: var(--zero); filter: drop-shadow(0 0 10px var(--zero)); }
.fx-dome i svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
@keyframes dome { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 18% { transform: scaleY(1.04); opacity: 1; } 28% { transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
/* Rewrite: two face-down cards trade places */
.fx-swap { position: fixed; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: 59; pointer-events: none; display: flex; align-items: center; gap: 70px; }
.fx-swap > span { display: block; width: 92px; --mm: calc(92px / 63); }

.fx-swap b { font-size: 46px; color: #F0B429; text-shadow: 0 0 18px #F0B429; animation: sw-pop var(--d) ease-in-out both; }
.fx-swap .sw-a { animation: sw-a var(--d) cubic-bezier(.5,0,.3,1) both; }
.fx-swap .sw-b { animation: sw-b var(--d) cubic-bezier(.5,0,.3,1) both; }
@keyframes sw-a { 0% { opacity: 0; transform: translateY(20px); } 15% { opacity: 1; transform: none; } 30% { transform: none; } 75% { transform: translate(calc(92px + 70px + 46px), -40px) rotate(8deg); } 100% { opacity: 0; transform: translate(calc(92px + 70px + 46px), 0); } }
@keyframes sw-b { 0% { opacity: 0; transform: translateY(20px); } 15% { opacity: 1; transform: none; } 30% { transform: none; } 75% { transform: translate(calc(-92px - 70px - 46px), 40px) rotate(-8deg); } 100% { opacity: 0; transform: translate(calc(-92px - 70px - 46px), 0); } }
@keyframes sw-pop { 0%, 25% { transform: scale(.6); opacity: 0; } 45% { transform: scale(1.3); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-band, .bd-in b, .bd-cap, .fx-dome, .fx-swap > *, .fx-swap b { animation: none; }
  .bd-in { animation: bd-out var(--bd, 1.5s) ease-in forwards; } }
@keyframes bd-out { 0%, 78% { opacity: 1; } 100% { opacity: 0; } }
.fx-swap::before { content: ''; position: fixed; inset: -100vmax; background: radial-gradient(circle at center, rgba(0,0,0,.25), rgba(0,0,0,.7) 60%); z-index: -1; animation: f3-dim .3s ease-out both; }
.fx-swap > span { box-shadow: 0 0 0 2px #F0B429, 0 0 22px rgba(240,180,41,.55); border-radius: 5px; }

/* ---------- command band: same look for every card ---------- */
.bd-tag { font-family: var(--f-mono); font-size: 11px !important; font-weight: 700; letter-spacing: .2em; padding: 3px 7px; background: var(--bi); color: var(--bc); }
.bd-tx { font-size: 16px; font-weight: 700; color: #F4F1EA; text-shadow: 0 0 8px rgba(0,0,0,.8); }
.bd-kj { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 4px; background: var(--bc); color: #111; border-radius: 3px; font-family: var(--f-body); font-weight: 900; font-size: 15px; vertical-align: middle; }
@media (max-width: 760px) { .bd-in { padding: 10px 14px; gap: 10px; } .bd-in b { font-size: 24px; } .bd-ic { width: 28px; height: 28px; } .bd-tx { font-size: 13px; } .bd-tag { display: none; } .bd-cap { gap: 10px; } }
/* phone landscape: a lower, slimmer band so it covers less of the table */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .bd-in { padding: 8px 18px; gap: 10px; } .bd-in b { font-size: 22px; } .bd-ic { width: 24px; height: 24px; } .bd-tx { font-size: 12px; } .bd-cap { gap: 10px; } }

.sk-hex { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 58px; background: #F4F1EA; color: #0B0B0E;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.sk-hex svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3; }

/* ---------- operator skill: "jack-in" cut-in, bigger for a rarer card ----------
   N a sonar pulse · R circuit traces · SR a gold firewall shatters · UR a full-width cut-in with the Prototype art ·
   SAR the screen sinks into the Soul Archive (binary rain). Only the skill name and "player · operator" are shown.
   --rc / --rc2: the card's colours (UR and SAR follow the coating the player wears); --d: how long it stays. */
.skx { position: fixed; inset: 0; z-index: 75; pointer-events: none; display: flex; align-items: center; justify-content: center; --rc: #A9A59C; --rc2: #3FE0FF; }
.skx .dim { position: absolute; inset: 0; background: rgba(0,0,0,.55); animation: skx-dim var(--d) ease both; }
@keyframes skx-dim { 0% { opacity: 0; } 10%, 86% { opacity: 1; } 100% { opacity: 0; } }
.skx .hex { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 58px; background: var(--rc); color: #0B0B0E;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.skx .hex svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3; }
.skx .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.skx .life { animation: skx-life var(--d) cubic-bezier(.3,0,.2,1) both; }
@keyframes skx-life { 0% { opacity: 0; transform: translateY(18px); } 10% { opacity: 1; transform: none; } 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
.skx .tx2 { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.skx .sk { font-family: var(--f-body); font-weight: 900; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.1; letter-spacing: .08em; color: #fff; }
.skx .who { font-size: 14px; font-weight: 700; color: #CFCBC1; letter-spacing: .04em; }
@keyframes skx-spin { to { transform: rotate(360deg); } }

/* N: sonar rings from the emblem, the skill name wiped in */
.skx-N { position: relative; display: flex; align-items: center; gap: 26px; padding: 16px 34px; background: radial-gradient(ellipse at 40% 50%, rgba(6,7,10,.95), rgba(6,7,10,.82) 62%, transparent 74%); }
.skx-N .em { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; flex: none; }
.skx-N .ring { position: absolute; inset: 14px; border-radius: 50%; border: 2px solid var(--rc); opacity: 0; animation: skx-pulse 1.3s ease-out infinite; }
.skx-N .ring:nth-child(2) { animation-delay: .43s; } .skx-N .ring:nth-child(3) { animation-delay: .86s; }
@keyframes skx-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
.skx-N .hex { background: #D8D4CB; position: relative; }
.skx-N .tx2 { clip-path: inset(0 100% 0 0); animation: skx-wipe .45s cubic-bezier(.3,0,.2,1) .2s forwards; padding-bottom: 10px; }
.skx-N .tx2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--rc), transparent); }
@keyframes skx-wipe { to { clip-path: inset(0 0 0 0); } }

/* R: circuit traces run in from both edges and plug into the emblem, packets keep flowing */
.skx-R { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.skx-R > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.skx-R > svg path { fill: none; stroke: var(--rc); stroke-width: 2; vector-effect: non-scaling-stroke; }
.skx-R .tr { opacity: .45; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: skx-trace .55s ease-out forwards; }
.skx-R .pk { stroke-width: 3; filter: drop-shadow(0 0 4px var(--rc)); stroke-dasharray: 60 1000; stroke-dashoffset: 60; animation: skx-packet .9s linear .35s infinite; }
@keyframes skx-trace { to { stroke-dashoffset: 0; } }
@keyframes skx-packet { from { stroke-dashoffset: 60; } to { stroke-dashoffset: -1000; } }
.skx-R .core { position: relative; display: flex; align-items: center; gap: 22px; padding: 14px 26px; background: radial-gradient(ellipse at 30% 50%, rgba(6,14,18,.96), rgba(6,14,18,.85) 70%, transparent); }
.skx-R .em { position: relative; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; flex: none; }
.skx-R .em::before { content: ''; position: absolute; inset: 6px; border: 1.5px solid var(--rc); animation: skx-spin45 4s linear infinite; box-shadow: 0 0 12px -2px var(--rc); }
@keyframes skx-spin45 { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
.skx-R .hex { filter: brightness(.35); animation: skx-lit .25s ease .55s forwards; }
@keyframes skx-lit { to { filter: brightness(1) drop-shadow(0 0 10px var(--rc)); } }
.skx-R .tx2 { opacity: 0; animation: skx-land .35s ease .6s forwards; }
.skx-R .sk { text-shadow: 0 0 12px color-mix(in srgb, var(--rc) 60%, transparent); }
@keyframes skx-land { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* SR: a wall of gold hex tiles closes up, then shatters outward and reveals the skill in gold */
.skx-SR { position: relative; display: flex; align-items: center; justify-content: center; width: 540px; max-width: 94%; height: 220px; }
.skx-SR .wall { position: absolute; left: 50%; top: 50%; width: 540px; height: 220px; transform: translate(-50%, -50%); }
.skx-SR .wall i { position: absolute; width: 56px; height: 62px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 55%, #000), color-mix(in srgb, var(--rc) 18%, #000));
  animation: skx-tileIn .22s ease-out var(--dl) both, skx-shatter .55s cubic-bezier(.2,.6,.3,1) .5s forwards; }
@keyframes skx-tileIn { from { opacity: 0; transform: scale(.4); } }
@keyframes skx-shatter { to { transform: translate(var(--tx), var(--ty)) rotate(var(--rt)) scale(.5); opacity: 0; } }
.skx-SR .flash { position: absolute; inset: 20% 10%; background: radial-gradient(ellipse, color-mix(in srgb, var(--rc) 80%, #fff), transparent 65%); opacity: 0; animation: skx-flash .45s ease-out .5s; }
@keyframes skx-flash { 0% { opacity: 0; } 25% { opacity: .9; } 100% { opacity: 0; } }
.skx-SR .core { position: relative; display: flex; align-items: center; gap: 22px; padding: 14px 30px; background: radial-gradient(ellipse, rgba(8,6,2,.96), rgba(8,6,2,.84) 62%, transparent 76%); opacity: 0; transform: scale(1.15); animation: skx-reveal .35s cubic-bezier(.2,1.3,.4,1) .55s forwards; }
@keyframes skx-reveal { to { opacity: 1; transform: none; } }
.skx-SR .sk { color: var(--rc); text-shadow: 0 0 14px color-mix(in srgb, var(--rc) 55%, transparent); }
.skx-SR .core::after { content: ''; position: absolute; left: -20px; right: -20px; bottom: -14px; height: 2px; background: linear-gradient(90deg, transparent, var(--rc), transparent); }

/* UR: a slanted full-width band with speed lines in the coating's colours, the Prototype art in a slanted window */
.skx-UR { position: absolute; left: 0; right: 0; top: 50%; height: min(240px, 46vh); transform: translateY(-50%); }
.skx-UR .band { position: absolute; inset: 0; background: #08070C; transform: skewY(-4deg); border-top: 3px solid var(--rc); border-bottom: 3px solid var(--rc2);
  box-shadow: 0 0 40px -6px var(--rc); animation: skx-urBand var(--d) cubic-bezier(.2,.9,.2,1) both; overflow: hidden; }
.skx-UR .speed { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 40px, color-mix(in srgb, var(--rc) 25%, transparent) 40px 42px, transparent 42px 90px, color-mix(in srgb, var(--rc2) 20%, transparent) 90px 91px);
  animation: skx-speed .4s linear infinite; }
@keyframes skx-speed { to { background-position: -180px 0; } }
@keyframes skx-urBand { 0% { clip-path: inset(0 0 0 100%); } 12% { clip-path: inset(0 0 0 0); } 86% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 100% 0 0); opacity: 1; } }
.skx-UR .win { position: absolute; left: 6%; top: -14%; bottom: -14%; width: 34%; overflow: hidden; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); animation: skx-urArt var(--d) cubic-bezier(.2,.9,.2,1) both; }
.skx-UR .win::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 35%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--rc2) 35%, transparent)); mix-blend-mode: screen; }
@keyframes skx-urArt { 0% { transform: translateX(-40%); opacity: 0; } 14% { transform: none; opacity: 1; } 86% { transform: none; opacity: 1; } 100% { transform: translateX(10%); opacity: 0; } }
.skx-UR .txt { position: absolute; left: 44%; right: 4%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; animation: skx-urTxt var(--d) ease both; }
@keyframes skx-urTxt { 0%, 10% { opacity: 0; transform: translate(30px, -50%); } 20% { opacity: 1; transform: translate(0, -50%); } 86% { opacity: 1; } 100% { opacity: 0; transform: translate(0, -50%); } }
.skx-UR .sk { font-size: clamp(26px, 4.2vw, 50px); line-height: 1.05; letter-spacing: .06em;
  text-shadow: -2px 0 color-mix(in srgb, var(--rc) 80%, transparent), 2px 0 color-mix(in srgb, var(--rc2) 80%, transparent); }
.skx-UR .who { color: #DAD6CC; }

/* SAR: the screen goes dark, binary rain falls at three depths, the Soul Archive art opens from a point of light */
.skx-SAR { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4%; }
.skx-SAR .void { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rc) 18%, rgba(10,8,4,.9)), #020203 70%); animation: skx-dim var(--d) ease both; }
.skx-SAR .rain { position: absolute; inset: 0; overflow: hidden; animation: skx-dim var(--d) ease both; }
.skx-SAR .rain span { position: absolute; top: -60%; font-family: var(--f-mono); font-size: var(--fs); font-weight: 600; line-height: 1.15; color: var(--rc);
  writing-mode: vertical-rl; text-orientation: upright; opacity: var(--op); white-space: nowrap;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 75%); mask-image: linear-gradient(to bottom, transparent, #000 75%);
  animation: skx-fall var(--sp) linear var(--dl) infinite; text-shadow: 0 0 6px color-mix(in srgb, var(--rc) 60%, transparent); }
.skx-SAR .rain span b { color: #FFFDF2; text-shadow: 0 0 8px #fff, 0 0 16px var(--rc); }
@keyframes skx-fall { to { transform: translateY(190%); } }
.skx-SAR .halo { position: absolute; width: min(420px, 60vmin); aspect-ratio: 1; border-radius: 50%; left: 50%; top: 50%; transform: translate(-80%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 40%, transparent), transparent 60%); animation: skx-halo var(--d) ease both; }
.skx-SAR .halo::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed var(--rc); opacity: .6; animation: skx-spin 12s linear infinite; }
@keyframes skx-halo { 0% { opacity: 0; transform: translate(-80%, -50%) scale(.3); } 20% { opacity: 1; transform: translate(-80%, -50%) scale(1); } 86% { opacity: 1; } 100% { opacity: 0; } }
.skx-SAR .frame { position: relative; width: min(200px, 26vw, 34vh); aspect-ratio: 63 / 88; border: 2px solid var(--rc); outline: 1px solid var(--rc); outline-offset: 5px; overflow: hidden;
  box-shadow: 0 0 50px -6px var(--rc); animation: skx-open var(--d) cubic-bezier(.2,.9,.2,1) both; }
@keyframes skx-open { 0% { clip-path: circle(0% at 50% 50%); opacity: 1; } 22% { clip-path: circle(75% at 50% 50%); } 86% { clip-path: circle(75% at 50% 50%); opacity: 1; } 100% { clip-path: circle(75% at 50% 50%); opacity: 0; } }
.skx-SAR .txt { position: relative; display: flex; flex-direction: column; gap: 8px; max-width: 46%; animation: skx-sarTxt var(--d) ease both; }
@keyframes skx-sarTxt { 0%, 16% { opacity: 0; transform: translateY(10px); } 28% { opacity: 1; transform: none; } 86% { opacity: 1; } 100% { opacity: 0; } }
.skx-SAR .sk { font-family: 'Noto Serif TC', 'Noto Serif JP', serif; font-size: clamp(28px, 4.4vw, 54px); color: #FFF8E6; letter-spacing: .1em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--rc) 70%, transparent); }
.skx-SAR .who { color: #D9CFB4; }
.skx-SAR .dust { position: absolute; inset: 0; }
.skx-SAR .dust i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 6px var(--rc); animation: skx-rise 2.2s ease-out infinite; }
@keyframes skx-rise { to { transform: translateY(-420px); opacity: 0; } }

@media (max-width: 760px) {
  .skx .sk { font-size: 22px; } .skx .who { font-size: 12px; } .skx .hex { width: 40px; height: 46px; } .skx .hex svg { width: 22px; height: 22px; }
  .skx-N, .skx-R .core { gap: 14px; } .skx-N .em, .skx-R .em { width: 60px; height: 60px; }
}
/* phone landscape: shorter screen, everything a size smaller */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .skx .sk { font-size: 22px; } .skx .who { font-size: 11px; } .skx .hex { width: 40px; height: 46px; } .skx .hex svg { width: 22px; height: 22px; }
  .skx-N .em, .skx-R .em { width: 62px; height: 62px; } .skx-SR { transform: scale(.8); }
  .skx-UR .sk { font-size: 26px; } .skx-SAR .sk { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .skx *, .skx *::before, .skx *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; } .skx .life, .skx-N .tx2, .skx-R .tx2, .skx-SR .core, .skx-SAR .txt, .skx-UR .txt { opacity: 1; clip-path: none; } }

/* ---------- buttons: command cards vs operator skills ---------- */
.cmd-btn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-left: 5px solid var(--bc) !important; }
.cmd-btn .cb-ic { display: inline-flex; width: 26px; height: 26px; background: var(--bc); color: #111; border-radius: 3px; align-items: center; justify-content: center; }
.cmd-btn .cb-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.cmd-btn > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.cmd-btn small { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em; opacity: .65; font-weight: 700; }
.skill-btn { background: #0B0B0E !important; border: 2px solid #F4F1EA !important; outline: 1px solid #F4F1EA; outline-offset: 2px; border-radius: 22px !important; padding: 4px 16px 4px 4px !important; color: #F4F1EA; }
.skill-btn .sk-hex { width: 36px; height: 40px; }
.skill-btn .sk-hex svg { width: 20px; height: 20px; }
.skill-btn small { font-family: var(--f-mono); letter-spacing: .1em; color: #BDB9AF !important; }
.skill-btn:hover { box-shadow: 0 0 18px -2px #F4F1EA; }
/* log: operator lines */
.op-badge { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 1px 7px 1px 3px; background: #F4F1EA; color: #0B0B0E; border-radius: 10px; font-size: 11px; font-weight: 900; vertical-align: middle; }
.op-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 4; }
li.op, .tk.op { border-left: 3px solid #F4F1EA; padding-left: 6px; }

/* ---------- drawing ---------- */
.fx-deal .fx-back { width: 34px; height: 47px; box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.fx-drawcard { display: block; width: 74px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
.fx-drawcard > .cn { --mm: calc(74px / 63); }
#tb-deck { position: relative; }
.mine .hand .cn.fresh { animation: hand-in 3.2s ease-out both; }
@keyframes hand-in {
  0%, 16% { opacity: 0; transform: translateY(-18px) scale(.94); }
  26% { opacity: 1; transform: none; box-shadow: 0 0 0 3px #F4F1EA, 0 0 26px rgba(244,241,234,.7); }
  80% { box-shadow: 0 0 0 2px #F4F1EA, 0 0 14px rgba(244,241,234,.35); }
  100% { box-shadow: none; } }

/* ---------- phase bar ---------- */
.phasebar:empty { display: none; }
.pb { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; }
.pb.my-turn { border-color: #F4F1EA; }
.pb-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pb-who { font-size: 13px; font-weight: 900; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--mute); white-space: nowrap; }
.pb-who.me { background: #F4F1EA; color: #0E0E11; border-color: #F4F1EA; }
.pb-steps { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.pb-sep { flex: 1; min-width: 8px; max-width: 26px; height: 2px; background: var(--line-2); }
.pb-step { display: flex; align-items: center; gap: 6px; opacity: .45; white-space: nowrap; }
.pb-step i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 11px; font-weight: 900; }
.pb-step b { font-size: 14px; font-weight: 900; }
.pb-step small { font-size: 11px; color: var(--mute); }
.pb-step.done { opacity: .6; }
.pb-step.on { opacity: 1; }
.pb-step.on i { background: #F4F1EA; color: #0E0E11; border-color: #F4F1EA; }
.pb.my-turn .pb-step.on b { color: #fff; text-decoration: underline 2px; text-underline-offset: 4px; }
.pb-task { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 3px; background: #1A1A20; }
.pb-lbl { flex: none; font-size: 12px; font-weight: 900; letter-spacing: .08em; padding: 3px 8px; border-radius: 2px; }
.pb-task b { font-size: 14px; font-weight: 900; }
.pb-task.act { background: #F4F1EA; color: #0E0E11; animation: pb-pulse 1.6s ease-in-out infinite; }
.pb-task.act .pb-lbl { background: #0E0E11; color: #F4F1EA; }
.pb-task.resp { background: #FF9F43; color: #1A1000; animation: pb-pulse 1.6s ease-in-out infinite; }
.pb-task.resp .pb-lbl { background: #1A1000; color: #FF9F43; }
.pb-task.wait { color: var(--mute); }
.pb-task.wait .pb-lbl { border: 1px solid var(--line-2); }
@keyframes pb-pulse { 50% { box-shadow: 0 0 0 3px rgba(255,255,255,.18); } }
@media (max-width: 760px) { .pb-step small { display: none; } .pb-step b { font-size: 12px; } .pb-task b { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .pb-task.act, .pb-task.resp, .mine .hand .cn.fresh { animation: none; } }

/* ---------- colour gauges (秩 / 霊 / 毒) ---------- */
.meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.meter .mt { --c: var(--order); --ink: #141210; display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 6px 3px 3px;
  border-radius: 3px; background: color-mix(in srgb, var(--c) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); color: var(--c); }
.meter .mG { --c: var(--ghost); } .meter .mV { --c: #A27BFF; --ink: #141210; }
.meter .mt b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 2px;
  background: var(--c); color: var(--ink); font-family: var(--f-body); font-size: 13px; font-weight: 900; line-height: 1; }
.meter .seg { flex: 1; display: flex; gap: 3px; min-width: 0; }
.meter .seg i { flex: 1; min-width: 5px; height: 9px; border-radius: 1px; background: color-mix(in srgb, var(--c) 22%, transparent); opacity: 1; border: 0; width: auto; }
.meter .seg i.f { background: var(--c); box-shadow: 0 0 6px color-mix(in srgb, var(--c) 60%, transparent); }
.meter .mt em { flex: none; font-style: normal; font-family: var(--f-mono); font-size: 13px; font-weight: 700; min-width: 9px; text-align: right; opacity: .55; }
.meter .mt.two, .meter .mt.full { border-color: var(--c); }
.meter .mt.two em, .meter .mt.full em { opacity: 1; }
.meter .mt.two { box-shadow: 0 0 10px -2px var(--c); }
.meter .mt[data-field-view] { cursor: pointer; touch-action: manipulation; }
.meter .mt[data-field-view]:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.meter .mV.two { animation: mt-warn 1.4s ease-in-out infinite; }
@keyframes mt-warn { 50% { box-shadow: 0 0 14px 0 var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); } }
.seat .meter div { font-size: inherit; }
.seat .meter i { width: auto; height: 9px; }
.mine .meter .mt b { width: 24px; height: 24px; font-size: 15px; }
.mine .meter .seg i { height: 11px; }
@media (prefers-reduced-motion: reduce) { .meter .mV.two { animation: none; } }
/* own panel is narrow: drop the number and tighten the tile so the bar keeps its length */
.mine .meter { gap: 4px; }
.mine .meter .mt { gap: 4px; padding: 2px 4px 2px 2px; }
.mine .meter .mt b { width: 21px; height: 21px; font-size: 13px; }
.mine .meter .mt em { display: none; }
.mine .meter .seg { gap: 2px; }
.mine .meter .seg i { min-width: 4px; height: 10px; }

/* ---------- brand: NETHERNET ---------- */
.nn-word { font-family: 'Orbitron', var(--f-display); font-weight: 900; letter-spacing: .02em; color: #ECE8DF; }
.nn-word i { font-style: normal; }
.nn-word .g { color: #F0B429; } .nn-word .c { color: #18C8E8; }
.nn-logo h1.nn-word { font-family: 'Orbitron', var(--f-display); font-weight: 900; letter-spacing: .02em; margin: 12px 0 0; font-size: clamp(34px, 5vw, 58px); line-height: 1; white-space: nowrap; }
.nn-sub { display: flex; align-items: center; gap: 12px; margin: 12px 0 14px; }
.nn-zh { font-style: normal; font-family: 'Noto Sans TC', var(--f-body); font-weight: 900; font-size: 19px; border: 1.5px solid #ECE8DF; padding: 1px 9px; border-radius: 3px; line-height: 1.3; }
.nn-ja { font-family: 'Zen Kaku Gothic New', var(--f-body); font-weight: 900; font-size: 14px; color: #8C897F; letter-spacing: .06em; }
.topbar .brand.nn-word { font-family: 'Orbitron', var(--f-display); font-weight: 900; font-size: 15px; }
/* opening screen */
.nn-boot { position: fixed; inset: 0; z-index: 200; background: #0B0B10; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .4s; }
.nn-boot.out { opacity: 0; }
.nb-in { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 24px; }
.nb-in > div { opacity: 0; animation: nb-in .3s ease-out var(--d) forwards; }
.nb-l { font-size: 14px; color: #8C897F; }
.nb-l i { font-style: normal; color: #18C8E8; margin-right: 4px; }
.nb-badge { margin-top: 18px; width: 64px; height: 64px; }
.nb-badge svg { width: 100%; height: 100%; }
.nb-word { font-family: 'Orbitron', var(--f-display); font-weight: 900; font-size: clamp(36px, 7vw, 72px); color: #ECE8DF; line-height: 1; margin-top: 8px; }
.nb-word b { color: #2BD07A; animation: nb-blink 1s steps(1) infinite; }
.nb-sub { font-size: 14px; color: #8C897F; letter-spacing: .14em; }
@keyframes nb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes nb-blink { 50% { opacity: 0; } }
.nb-zero { color: #2BD07A; font-weight: 500; letter-spacing: .1em; margin-left: 6px; }

/* ---------- logo: word + route line ---------- */
.nn-lock { display: inline-flex; flex-direction: column; align-items: stretch; }
.nn-logo .nn-lock { margin-top: 12px; }
.nn-logo h1.nn-word { margin: 0; }
.nn-route { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.nn-sub { margin-top: 10px; }
.nb-word { display: flex; align-items: flex-start; gap: 4px; }
.nb-word .nn-route { margin-top: 10px; }
/* compact version for the top bar: three thin muted segments under the word */
.nn-mini { padding-bottom: 3px; background: linear-gradient(90deg, #B89B5E 0 32%, transparent 32% 34%, #5F9AA4 34% 66%, transparent 66% 68%, #6E9E7C 68%) left bottom / 100% 2px no-repeat; }
@media (prefers-reduced-motion: reduce) { .nn-pk.mv { transform: translateX(134px); } }

/* ---------- language dropdown ---------- */
.lang-sel { position: relative; display: inline-flex; align-items: center; }
.lang-sel .ls-ic { position: absolute; left: 9px; font-size: 11px; font-weight: 900; color: var(--mute); pointer-events: none; letter-spacing: -.02em; }
.lang-sel select { appearance: none; -webkit-appearance: none; background: #16161B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ECE8DF' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px;
  color: var(--fg); border: 1px solid var(--line-2); border-radius: 4px; padding: 7px 30px 7px 32px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.lang-sel select:hover { border-color: var(--fg); }
.lang-sel select:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.lang-sel select option { background: #16161B; color: #ECE8DF; }
.lang-sel.tb select { padding: 5px 26px 5px 30px; font-size: 12px; }
.lang-sel { gap: 6px; }
.lang-sel .ls-ic { position: static; }
.lang-sel select { padding-left: 10px; }
.lang-sel.tb select { padding-left: 9px; }
#help-dock .lang-sel.home-lang { flex: none; gap: 6px; margin-left: 2px; }
#help-dock .lang-sel.home-lang .ls-lbl { font-size: 11px; color: var(--mute); letter-spacing: 0; white-space: nowrap; }
#help-dock .lang-sel.home-lang select { min-height: 32px; padding: 5px 26px 5px 8px; font-size: 12px; }
@media (max-width: 700px) {
  #help-dock .lang-sel.home-lang .ls-lbl { display: none; }
  #help-dock .lang-sel.home-lang select { min-height: 30px; padding: 4px 23px 4px 7px; font-size: 11px; }
}
.tag.antibody { display: inline-flex; align-items: center; gap: 3px; color: #7FE3D0; background: #0E2622; }
.tag.antibody svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* ---------- faction seal: a heavy slam with impact ---------- */
.idr-sealwrap { position: relative; width: 132px; height: 132px; }
.idr .idr-seal { animation: idr-slam .55s cubic-bezier(.55,0,.75,.2) 1.7s both, idr-sealglow 2.4s ease-in-out 2.4s infinite; }
@keyframes idr-slam {
  0% { transform: scale(3.4) translateY(-40px); opacity: 0; filter: blur(8px); }
  55% { opacity: 1; filter: blur(0); }
  70% { transform: scale(.86); }
  84% { transform: scale(1.07); }
  100% { transform: none; opacity: 1; } }
@keyframes idr-sealglow { 50% { box-shadow: 0 0 0 4px #050507, 0 0 0 7px var(--ic), 0 0 120px var(--ic); } }
/* shockwaves */
.idr-wave { position: absolute; inset: 0; border-radius: 16px; border: 3px solid var(--ic); opacity: 0; pointer-events: none; animation: idr-wave .9s cubic-bezier(.1,.7,.3,1) 2.08s forwards; }
.idr-wave.w2 { border-width: 2px; animation-delay: 2.2s; animation-duration: 1.2s; }
@keyframes idr-wave { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(3.6); opacity: 0; } }
/* sparks */
.idr-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.idr-burst b { position: absolute; left: -2px; top: -2px; width: 4px; height: 22px; background: var(--ic); border-radius: 2px; opacity: 0;
  transform: rotate(var(--a)) translateY(-60px); animation: idr-spark .7s cubic-bezier(.15,.8,.3,1) 2.08s forwards; }
.idr-burst b:nth-child(3n) { background: #fff; height: 14px; }
@keyframes idr-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-60px) scaleY(1.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-60px - var(--l))) scaleY(.4); } }
/* white flash and screen shake on impact */
.idr-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 2; animation: idr-flash .5s ease-out 2.08s; }
@keyframes idr-flash { 0% { opacity: .55; } 100% { opacity: 0; } }
.idr .idr-main { animation: idr-in .7s cubic-bezier(.2,.9,.3,1.1) 1.65s forwards, idr-shake .42s linear 2.08s; }
@keyframes idr-shake { 0%, 100% { translate: 0 0; } 15% { translate: -9px 5px; } 30% { translate: 8px -6px; } 45% { translate: -6px 4px; } 60% { translate: 5px -3px; } 75% { translate: -2px 2px; } }
@media (prefers-reduced-motion: reduce) { .idr-wave, .idr-burst, .idr-flash { display: none; } .idr .idr-seal, .idr .idr-main { animation: none; opacity: 1; } }

/* ---------- home: tips / world lines ---------- */
.hm-right { flex-direction: column; justify-content: center; gap: 8px; }
.hm-right .hm-fan { height: 420px; }
.hm-tips { width: min(440px, 100%); padding: 16px 18px 12px; border: 1px solid var(--line); border-radius: 4px; background: rgba(14,14,17,.7); }
.ht-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ht-lbl { font-size: 11px; font-weight: 900; letter-spacing: .14em; padding: 2px 8px; border-radius: 2px; background: #F4F1EA; color: #0E0E11; }
.k-world .ht-lbl { background: transparent; color: #7FE3D0; border: 1px solid #2E5A53; font-family: var(--f-mono); }
.ht-n { font-size: 11px; color: var(--dim); }
.ht-tx { margin: 0; min-height: 3.2em; font-size: 15px; line-height: 1.6; font-weight: 700; color: var(--fg); animation: ht-in .45s ease-out; }
.k-world .ht-tx { font-weight: 500; color: #DAD6CD; }
@keyframes ht-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.ht-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.ht-arrow { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; background: transparent; border: 1px solid var(--line-2); border-radius: 50%; color: var(--fg); }
.ht-arrow:hover { border-color: var(--fg); }
.ht-dots { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.ht-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); cursor: pointer; }
.ht-dots i.on { background: var(--fg); width: 16px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .ht-tx { animation: none; } }
/* tips: a slim, borderless strip that sits under the card fan */
.hm-tips { width: min(470px, 100%); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  padding: 0; border: 0; background: none; border-radius: 0; }
.ht-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ht-lbl { align-self: flex-start; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .18em; padding: 0; background: none !important; border: 0 !important; color: var(--dim); }
.k-world .ht-lbl { color: #5FA79B; }
.ht-tx { min-height: 2.9em; font-size: 13px; line-height: 1.45; font-weight: 500; color: #BDB9AF; display: flex; align-items: center; }
.k-world .ht-tx { color: #BDB9AF; }
.ht-arrow { width: 22px; height: 22px; font-size: 16px; border: 0; color: var(--dim); background: none; }
.ht-arrow:hover { color: var(--fg); background: none; }
.ht-dots { grid-column: 1 / -1; display: flex; gap: 3px; justify-content: stretch; }
.ht-dots i { flex: 1; height: 2px; width: auto; border-radius: 0; background: #26262D; }
.ht-dots i.on { width: auto; background: #8C897F; border-radius: 0; }
.lang-sel .ls-lbl { font-size: 12px; font-weight: 700; color: var(--mute); letter-spacing: .04em; }
/* tips: no progress bar; slightly larger, brighter text and arrows */
.ht-tx { font-size: 15px; color: #D8D4CB; }
.k-world .ht-tx { color: #D8D4CB; }
.ht-lbl { font-size: 11px; color: #8C897F; }
.k-world .ht-lbl { color: #6FBFB2; }
.ht-arrow { width: 28px; height: 28px; font-size: 22px; color: #8C897F; }
.ht-tx { min-height: 4.4em; }

/* ---------- covert operators ---------- */
.s-emb.covert { background: repeating-linear-gradient(-45deg, #1C1C22 0 5px, #24242B 5px 10px); color: #F4F1EA; border: 1px dashed #8C897F; font-weight: 900; }
.s-rolename.covert { color: #BDB9AF; font-style: normal; letter-spacing: .04em; }
.fx-rain { position: fixed; inset: 0; z-index: 58; pointer-events: none; overflow: hidden; background: rgba(40,20,70,.18); animation: rain-fade 3.2s ease-out forwards; }
.fx-rain i { position: absolute; top: -20%; width: 2px; height: 70px; background: linear-gradient(to bottom, transparent, rgba(185,155,255,.85)); transform: rotate(12deg); animation: rain-fall .8s linear infinite; }
@keyframes rain-fall { to { transform: translate(-90px, 140vh) rotate(12deg); } }
@keyframes rain-fade { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.fx-slash { position: fixed; z-index: 58; pointer-events: none; }
.fx-slash i { position: absolute; left: -10%; right: -10%; height: 4px; background: #F4F1EA; box-shadow: 0 0 14px #F4F1EA; top: 40%; transform: rotate(-18deg) scaleX(0); transform-origin: left; animation: slash-cut .35s ease-out forwards; }
.fx-slash i + i { top: 62%; animation-delay: .18s; }
@keyframes slash-cut { 0% { transform: rotate(-18deg) scaleX(0); opacity: 1; } 70% { transform: rotate(-18deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-18deg) scaleX(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-rain, .fx-slash { display: none; } }
.rp-hidden { margin-left: auto; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; padding: 1px 7px; border: 1px dashed currentColor; border-radius: 2px; opacity: .8; }
.rp-top { display: flex; align-items: center; }

/* access badge inside the in-game operator panel */
.rp-id .id-class { --mm: 2.3px; margin-top: 4px; }
.rp-id .id-class.root { background: #F4F1EA; color: #111; }
.rp-id .id-class.covert { color: #F4F1EA; border-color: #F4F1EA; }
.rp-id .id-class svg { width: calc(3 * var(--mm)); height: calc(3 * var(--mm)); stroke: currentColor; stroke-width: 2.6; }
.rp-id .id-class b { display: inline; font-size: calc(2.7 * var(--mm)); font-weight: 700; line-height: 1; }
.rp-id > div { display: flex; flex-direction: column; align-items: flex-start; }
.rp-id .id-class { height: 18px !important; padding: 0 7px 0 5px !important; gap: 4px !important; }
.rp-id .id-class svg { width: 11px !important; height: 11px !important; }
.rp-id .id-class b { font-size: 10.5px !important; letter-spacing: .14em; }
/* command list: timing label on its own line, description below it */
.gd-cmd .gd-when { display: table; margin: 4px 0 5px; }
.gd-cmd small { display: block; }

/* ---------- role pick: selected frame in your faction colour ---------- */
.rp-box { --ic: var(--hi); }
.rp-box.i-ORDER { --ic: var(--order); } .rp-box.i-GHOST { --ic: var(--ghost); } .rp-box.i-ZERO { --ic: var(--zero); }
.rp-card.sel { box-shadow: 0 0 0 4px var(--ic), 0 0 40px -6px color-mix(in srgb, var(--ic) 80%, transparent); }

/* ---------- faction reveal: slot reel that lands and becomes the seal ---------- */
.idr-scan { top: auto; bottom: 12%; animation: idr-scan-fade .4s ease-in 1.95s forwards; }
@keyframes idr-scan-fade { to { opacity: 0; } }
.idr .idr-main { opacity: 1; animation: idr-shake .42s linear 2.02s; }
.idr .idr-main > :not(.idr-sealwrap):not(.idr-kicker) { opacity: 0; animation: idr-p .45s ease-out 2.25s forwards; }
.idr .idr-kicker { opacity: 0; animation: idr-p .4s ease-out .15s forwards; }
.idr .idr-seal { overflow: hidden; background: #1C1C22; color: #ECE8DF;
  animation: idr-fill .25s ease-out 2s forwards, idr-lock .45s cubic-bezier(.3,1.6,.5,1) 2s, idr-sealglow 2.4s ease-in-out 2.6s infinite; }
@keyframes idr-fill { to { background: var(--ic); color: #111; } }
@keyframes idr-lock { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 70% { transform: scale(.96); } 100% { transform: scale(1); } }
.idr-reel { display: flex; flex-direction: column; animation: idr-spin 1.8s cubic-bezier(.1,.55,.12,1) .2s both; }
.idr-reel span { flex: none; height: 132px; display: flex; align-items: center; justify-content: center; line-height: 1; }
@keyframes idr-spin {
  0% { transform: translateY(0); filter: blur(0); }
  12% { filter: blur(2px); }
  70% { filter: blur(.6px); }
  92% { transform: translateY(calc((var(--n) - 1) * -132px - 10px)); filter: blur(0); }
  100% { transform: translateY(calc((var(--n) - 1) * -132px)); } }
/* impact now lands exactly when the reel stops */
.idr-wave { animation-delay: 2s; } .idr-wave.w2 { animation-delay: 2.12s; }
.idr-burst b { animation-delay: 2s; }
.idr-flash { animation-delay: 2s; }
.idr::after { animation-delay: 2s; }
@media (prefers-reduced-motion: reduce) {
  .idr-reel { animation: none; transform: translateY(calc((var(--n) - 1) * -132px)); }
  .idr .idr-seal { animation: none; background: var(--ic); color: #111; }
  .idr .idr-main > *, .idr .idr-kicker { animation: none; opacity: 1; } }
.idr .idr-seal { align-items: flex-start; justify-content: center; }
/* the reel frame stays neutral while spinning; the faction colour only appears when it lands */
.idr .idr-seal { box-shadow: 0 0 0 4px #050507, 0 0 0 7px #6E6B64, 0 0 40px rgba(236,232,223,.12); }
@keyframes idr-fill { to { background: var(--ic); color: #111; box-shadow: 0 0 0 4px #050507, 0 0 0 7px var(--ic), 0 0 80px color-mix(in srgb, var(--ic) 70%, transparent); } }

/* ---------- home status line: "connecting…" then the lockdown status ---------- */
.hm-logo small.hm-status { position: relative; display: block; height: 1.4em; color: #BDB9AF; letter-spacing: .22em; }
.hm-status > span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.hs-c { color: #8C897F; overflow: hidden; clip-path: inset(0 100% 0 0); animation: hs-type 1.1s steps(28) .2s forwards, hs-out .3s ease-in 1.7s forwards; }
.hs-c b { font-weight: 400; animation: nb-blink .6s steps(1) infinite; }
.hs-a { display: inline-flex; align-items: center; gap: 9px; opacity: 0; animation: hs-in .4s ease-out 2s forwards; }
.hs-a i { width: 8px; height: 8px; border-radius: 50%; background: #2BD07A; box-shadow: 0 0 8px #2BD07A; animation: hs-dot 1.6s ease-in-out infinite; }
@keyframes hs-type { to { clip-path: inset(0 0 0 0); } }
@keyframes hs-out { to { opacity: 0; } }
@keyframes hs-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes hs-dot { 50% { opacity: .25; box-shadow: none; } }
.hm-status.done .hs-c { display: none; }
.hm-status.done .hs-a { opacity: 1; animation: none; }
@media (prefers-reduced-motion: reduce) { .hs-c { display: none; } .hs-a { opacity: 1; animation: none; } .hs-a i { animation: none; } }

/* ---------- back buttons: always top-left ---------- */
.nav-back { position: fixed; top: 14px; left: 16px; z-index: 40; display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  background: rgba(14,14,17,.85); border: 1px solid var(--line-2); border-radius: 4px; color: var(--fg); font-size: 13px; font-weight: 700; }
.nav-back:hover { border-color: var(--fg); }
.pg-back.nav-back { align-self: auto; }
.tb-back { order: -1; font-weight: 700; }

/* ---------- card picker window ---------- */
#pickwin:empty { display: none; }
.pw-bg { position: fixed; inset: 0; z-index: 70; background: rgba(6,6,8,.6); display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.pw { background: var(--bg-2); border: 2px solid #FFFFFF; border-radius: 6px; box-shadow: 0 0 0 1px #FFFFFF, 0 24px 70px rgba(0,0,0,.65);
  width: max-content; max-width: min(1120px, 100%); max-height: 100%; overflow: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.pw-phase { font-family: var(--f-mono); font-size: 11px; color: var(--mute); letter-spacing: .1em; }
.pw-text { font-size: 17px; font-weight: 700; line-height: 1.5; }
.pw-sub { font-size: 13px; color: var(--mute); }
.pw-sub b { color: var(--fg); }
.pw-cards { --mm: 2.3px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 8px 4px; }
.pw-card { padding: 0; background: none; border: 0; border-radius: 6px; cursor: pointer; transition: transform .12s ease-out; }
.pw-card .cn { pointer-events: none; }
.pw-card:hover, .pw-card:focus-visible { transform: translateY(-6px); }
.pw-card:hover .cn, .pw-card:focus-visible .cn { box-shadow: 0 0 0 3px var(--hi), 0 10px 30px rgba(0,0,0,.5); }
.pw-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pw-foot > div { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-height: 640px) { .pw-cards { --mm: 1.8px; } }
.pw-take { border-color: var(--virus) !important; color: #E9DDF7; font-weight: 700; }
.pw-take:hover { background: color-mix(in srgb, var(--virus) 35%, transparent); }

/* ================= LOG (redesign) ================= */
.log-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 6px; border-bottom: 1px solid var(--line); }
.log-tog { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 6px; color: var(--mute); cursor: pointer; }
.log-tog b { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--fg); }
.log-tog i { font-style: normal; font-size: 12px; }
.log-unread:empty { display: none; }
.log-unread { font-size: 10px; font-weight: 900; background: #FF9F43; color: #1A1000; padding: 1px 6px; border-radius: 8px; }
.log-modes { display: inline-flex; border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; }
.log-modes button { border: 0; border-radius: 0; background: none; padding: 3px 9px; font-size: 11px; font-weight: 700; color: var(--mute); }
.log-modes button.on { background: #F4F1EA; color: #0E0E11; }
.log ol { padding: 4px 0 8px; font-size: 12.5px; line-height: 1.5; }
.log li { padding: 4px 10px 4px 10px; border-left: 3px solid transparent; gap: 0; }
.log li > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.log li .lw { font-weight: 900; color: var(--fg); }
.log li .lt { font-weight: 900; color: var(--fg); }
.log li .la, .log li .lv { font-style: normal; color: var(--mute); font-weight: 900; }
.log li .lm { font-style: normal; font-size: 10.5px; color: var(--mute); border: 1px solid var(--line-2); border-radius: 2px; padding: 0 5px; }
.log li .lback { display: inline-block; width: 13px; height: 18px; border-radius: 2px; background: var(--stock); border: 1px solid var(--paper); vertical-align: middle; }
.log li .lc { font-size: 11px; font-weight: 900; padding: 0 6px; border-radius: 2px; color: #141210; }
.log li .lc.c-ORDER { background: var(--order); } .log li .lc.c-GHOST { background: var(--ghost); }
.log li .ld { flex-basis: 100%; font-size: 11px; color: var(--mute); }
.log li.play { border-left-color: #F4F1EA; }
.log li.op { border-left-color: #BDB9AF; background: rgba(244,241,234,.03); padding-left: 10px; border-left-style: double; border-left-width: 4px; }
.log li.pk { border-left-color: #4A4A55; color: var(--mute); }
.log li.pk .lw { color: #CFCBC2; }
.log li.res { border-left-color: #FF9F43; }
.log li.bad { border-left-color: #E5322D; color: #FF8A73; font-weight: 900; }
.log li.crashrow { background: rgba(229,50,45,.1); }
.log li.minor { color: var(--mute); font-size: 11.5px; }
.log li.turn { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); border-left: 0; font-weight: 900; color: var(--fg); }
.log li.turn .lr { font-style: normal; font-family: var(--f-mono); font-size: 10.5px; color: #0E0E11; background: #8C897F; padding: 0 5px; border-radius: 2px; margin-right: 6px; }
.log li.priv { border-left-color: #8E7CFF; }
.log li.over { border-left-color: var(--hi); }
.log.brief li.minor { display: none; }
/* closed: a slim vertical tab */
.log.closed { overflow: hidden; }
.log.closed ol, .log.closed .log-modes { display: none; }
.log.closed .log-head { flex-direction: column; border: 0; padding: 8px 0; height: 100%; justify-content: flex-start; }
.log.closed .log-tog { flex-direction: column; gap: 8px; }
.log.closed .log-tog b { writing-mode: vertical-rl; }
body.log-closed:not(.fit) .table { grid-template-columns: minmax(0, 1fr) 44px; }
body.fit.log-closed .mid { grid-template-columns: auto minmax(0, 1fr) 44px; }

/* ================= CRASH transition ================= */
.fx-crashing { animation: crashing 1.7s steps(1) both; }
@keyframes crashing {
  0% { filter: none; transform: none; } 6% { transform: translate(-4px, 2px); filter: hue-rotate(-40deg) saturate(2); }
  12% { transform: translate(5px, -2px); filter: invert(.15); } 18% { transform: translate(-2px, 0); filter: none; }
  30% { transform: translate(3px, 1px); filter: saturate(3) hue-rotate(20deg); } 40% { transform: none; filter: brightness(1.6); }
  60% { filter: grayscale(.6) brightness(.8); } 100% { filter: grayscale(1) brightness(.7); transform: none; } }
.fx-crash { position: fixed; inset: 0; z-index: 64; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.fx-crash::before { content: ''; position: absolute; inset: 0; background: rgba(8,0,0,.72); animation: cr-dim .35s ease-out both; }
@keyframes cr-dim { from { opacity: 0; } }
.cr-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(229,50,45,.12) 0 2px, transparent 2px 5px); animation: cr-flick .12s steps(2) 6; }
@keyframes cr-flick { 50% { opacity: .2; transform: translateY(3px); } }
.cr-card { position: relative; text-align: center; padding: 26px 46px 24px; border-top: 3px solid #E5322D; border-bottom: 3px solid #E5322D; background: rgba(14,6,6,.92);
  animation: cr-in .5s cubic-bezier(.2,1.3,.4,1) .15s both; min-width: min(460px, 90vw); }
@keyframes cr-in { from { opacity: 0; transform: scaleY(.1); } }
.cr-sys { font-size: 11px; letter-spacing: .2em; color: #FF8A73; opacity: .8; }
.cr-word { position: relative; font-family: var(--f-display); font-size: clamp(64px, 11vw, 120px); line-height: 1; letter-spacing: .08em; color: #F4F1EA; margin: 6px 0 4px; animation: cr-glitch .9s steps(1) .2s 2; }
.cr-word::before, .cr-word::after { content: attr(data-t); position: absolute; inset: 0; mix-blend-mode: screen; }
.cr-word::before { color: #E5322D; transform: translate(-4px, 0); clip-path: inset(0 0 55% 0); }
.cr-word::after { color: #18C8E8; transform: translate(4px, 0); clip-path: inset(55% 0 0 0); opacity: .7; }
@keyframes cr-glitch { 0% { transform: none; } 10% { transform: skewX(-12deg) translateX(-6px); } 20% { transform: none; } 45% { transform: translateX(5px); } 50% { transform: none; } }
.cr-name { font-size: 26px; font-weight: 900; color: #fff; }
.cr-sub { font-size: 13px; color: #FF8A73; font-weight: 700; margin-top: 4px; }
.cr-id { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed #5A2A28; animation: cr-in .45s ease-out .9s both; }
.cr-id small { font-size: 12px; color: #BDB9AF; }
.cr-seal { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--ic); color: #111; font-family: var(--f-body); font-weight: 900; font-size: 24px; border-radius: 4px; }
.cr-id b { font-family: var(--f-display); font-weight: 400; font-size: 26px; letter-spacing: .06em; }
.fx-crash.out { transition: opacity .4s; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fx-crashing, .cr-scan, .cr-word, .cr-card, .cr-id { animation: none; } }

/* ---------- CRASH inside the seat: CRASH first, then the faction ---------- */
.fx-crash { display: none !important; }
.seat.fx-crashing, .mine.fx-crashing { --dc: var(--mute); }
.seat.fx-crashing .s-deadid { visibility: hidden; }
.fx-crashbox { position: fixed; z-index: 40; pointer-events: none; overflow: hidden; border-radius: 4px; background: rgba(20,4,4,.9);
  box-shadow: inset 0 0 0 2px #E5322D; display: flex; align-items: center; justify-content: center; animation: cb-in .25s ease-out both; }
@keyframes cb-in { from { opacity: 0; transform: scale(1.06); } }
.cb-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(229,50,45,.16) 0 2px, transparent 2px 5px); animation: cr-flick .12s steps(2) 6; }
.cb-step { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.cb-1 { animation: cb-out calc(.4s * var(--k, 1)) ease-in calc(1.2s * var(--k, 1)) forwards; }
.cb-1 b { position: relative; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: .1em; color: #F4F1EA; line-height: 1; animation: cr-glitch .7s steps(1) .1s 2; }
.cb-1 b::before, .cb-1 b::after { content: attr(data-t); position: absolute; inset: 0; mix-blend-mode: screen; }
.cb-1 b::before { color: #E5322D; transform: translate(-3px, 0); clip-path: inset(0 0 55% 0); }
.cb-1 b::after { color: #18C8E8; transform: translate(3px, 0); clip-path: inset(55% 0 0 0); opacity: .7; }
.cb-1 small { font-size: 12px; font-weight: 700; color: #FF8A73; }
.cb-2 { flex-direction: row; gap: 10px; opacity: 0; animation: cb-show calc(.4s * var(--k, 1)) ease-out calc(1.35s * var(--k, 1)) forwards; }
.cb-2 small { font-size: 12px; color: #BDB9AF; }
.cb-2 .cr-seal { width: 34px; height: 34px; font-size: 20px; }
.cb-2 b { font-family: var(--f-display); font-weight: 400; font-size: 22px; letter-spacing: .06em; }
@keyframes cb-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes cb-show { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.fx-crashbox.out { transition: opacity .4s; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cb-scan, .cb-1 b { animation: none; } }

/* ---------- discard pile ---------- */
.tb-discard { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 7px; color: inherit; font: inherit; cursor: pointer; }
.tb-discard:hover { border-color: #F4F1EA; color: #fff; }
.tb-discard i { font-style: normal; opacity: .7; }
.overlay.dz-ov { align-items: flex-start; }
.dz { width: min(1080px, 94vw); max-height: 86vh; display: flex; flex-direction: column; background: #0E0E11; border: 1px solid var(--line-2); border-radius: 6px; margin-top: 5vh; }
.dz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dz-head h2 { margin: 0; font-size: 20px; }
.dz-head h2 b { font-family: var(--f-mono); color: var(--mute); margin-left: 6px; }
.dz-head p { margin: 6px 0 0; font-size: 13px; color: var(--mute); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dz-c { font-weight: 900; padding: 1px 7px; border-radius: 2px; color: #141210; }
.dz-c.c-ORDER { background: var(--order); } .dz-c.c-GHOST { background: var(--ghost); } .dz-c.c-VIRUS { background: #A27BFF; }
.dz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; padding: 16px 20px 20px; overflow-y: auto; --mm: 1.87px; }
/* cards keep their own size (never stretched); the grid uses fixed card-width columns */
.dz-grid { grid-template-columns: repeat(auto-fill, calc(63 * 1.87px)); justify-content: center; }
.dz-back { opacity: .6; }
.dz-empty { color: var(--mute); }
.overlay.field-ov { z-index: 45; }
.field-window { width: min(920px, 94vw); max-height: 86vh; max-height: 86dvh; display: flex; flex-direction: column; overflow: hidden; background: #101015; border: 1px solid var(--line-2); border-radius: 6px; box-shadow: 0 24px 70px rgba(0,0,0,.65); }
.fv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.fv-head h2 { margin: 3px 0 0; font-size: 20px; }
.fv-head h2 b { margin-left: 5px; color: var(--mute); font-family: var(--f-mono); }
.fv-head p { margin: 4px 0 0; color: var(--mute); font-size: 12px; }
.fv-owner { font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.fv-owner.c-ORDER { color: var(--order); } .fv-owner.c-GHOST { color: var(--ghost); } .fv-owner.c-VIRUS { color: #A27BFF; }
.fv-close { flex: none; width: 38px; height: 38px; padding: 0; font-size: 18px; }
.fv-grid { --mm: 1.87px; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: repeat(auto-fill, calc(63 * var(--mm))); justify-content: center; align-content: start; gap: 12px; padding: 16px; }
.fv-card { width: calc(63 * var(--mm)); height: calc(88 * var(--mm)); padding: 0; border: 0; border-radius: 3px; background: none; box-shadow: 0 10px 24px rgba(0,0,0,.42); transition: transform .14s, filter .14s; }
.fv-card:hover:not(:disabled) { border: 0; transform: translateY(-3px); filter: brightness(1.08); }
.fv-card:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.fv-card .cn { pointer-events: none; }
.fv-empty { grid-column: 1 / -1; padding: 26px 12px; color: var(--mute); text-align: center; }
@media (max-width: 480px) { .field-window { width: 100%; max-height: 100%; } .fv-head { padding: 12px 14px; } .fv-grid { gap: 10px; padding: 12px; } }
.lobby-time { font-size: 13px; color: var(--mute); margin: 10px 0; }
.lobby-time b { color: var(--fg); }

/* heading of a choice in progress: what the chosen skill / card does */
.pt-desc { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--mute); line-height: 1.5; }
.pt-cmd { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; padding: 2px 10px 2px 6px; border-left: 4px solid var(--bc); background: color-mix(in srgb, var(--bc) 14%, transparent); }
.pt-cmd svg { width: 16px; height: 16px; fill: none; stroke: var(--bc); stroke-width: 2.4; }
.rp-wait .rp-card { pointer-events: none; }

/* faction held back until the CRASH reveal */
.crash-id.held { display: none; }
/* your own CRASH: full screen */
.fx-crashbig { position: fixed; inset: 0; z-index: 64; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.fx-crashbig::before { content: ''; position: absolute; inset: 0; background: rgba(8,0,0,.72); animation: cr-dim .35s ease-out both; }
.fx-crashbig.out { transition: opacity .4s; opacity: 0; }
/* lineup figures: no outline */
.idr-sil svg { stroke: none !important; }
.idr-sil .sl-head, .idr-sil .sl-body { fill: #2C2C35; }
.idr-sil .sl-visor { fill: #4A4A55; }
.idr-sil .sl-collar { fill: none; stroke: #0B0B10 !important; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.idr-sil i { top: 2px; font-size: 13px; color: #6E6B64; }
.idr-p.me .idr-sil svg { filter: drop-shadow(0 0 12px var(--ic)); }
.idr-p.me .idr-sil .sl-head, .idr-p.me .idr-sil .sl-body { fill: var(--ic); }
.idr-p.me .idr-sil .sl-visor { fill: #0B0B10; }
/* ghost line: the drawn card is shown, not clicked */
.pw-show { pointer-events: none; }
/* lineup figure H1: hooded hacker with ear cups */
.idr-sil { width: 48px; height: 56px; color: #3A3A45; }
.idr-p.me .idr-sil { color: var(--ic); }
.idr-sil .sl-hood { fill: currentColor; fill-opacity: .62; }
.idr-sil .sl-rim, .idr-sil .sl-eye { fill: currentColor; }
.idr-sil .sl-face { fill: #0B0B10; }
.idr-sil .sl-cord { fill: none; stroke: currentColor !important; stroke-width: 1.4; }
.idr-p.me .idr-sil .sl-hood, .idr-p.me .idr-sil .sl-rim { fill: currentColor; }
.idr-p.me .idr-sil .sl-face { fill: #0B0B10; }
.idr-sil .sl-q { fill: #8C897F; font-family: var(--f-body); font-weight: 900; font-size: 12.5px; }

/* ================= card finish (game only; the print sheet stays flat) =================
   Operator cards: clear laminate (O3) - a bright diagonal glint and a lit edge.
   Command cards: soft gloss (D2) - a gentle light that follows the pointer. */
.cn.role, .cn.data { --mx: 30%; --my: 22%; }
.cn.role::after, .cn.data::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6; }
.cn.role::after {
  background: linear-gradient(125deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.32) 42%, rgba(255,255,255,.05) 48%, rgba(255,255,255,0) 60%);
  background-size: 260% 260%; background-position: var(--mx) var(--my); mix-blend-mode: screen;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.26), inset 0 2px 0 rgba(255,255,255,.32); }
.cn.data::after {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.34), rgba(255,255,255,.07) 28%, rgba(255,255,255,0) 50%);
  mix-blend-mode: overlay; box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
@media (prefers-reduced-motion: reduce) { .cn.role::after, .cn.data::after { background-position: 30% 22%; } }
/* Faction cards: holographic film (O1) - rainbow sheen that flows with the pointer, fine scan lines */
.cn.ident { --mx: 40%; --my: 35%; }
.cn.ident::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6; mix-blend-mode: color-dodge; opacity: .5;
  background: repeating-linear-gradient(115deg, rgba(255,40,160,0) 0%, rgba(255,40,160,.55) 5%, rgba(40,220,255,.55) 10%, rgba(255,225,80,.5) 15%, rgba(140,255,170,.45) 20%, rgba(255,40,160,0) 25%);
  background-size: 220% 220%; background-position: var(--mx) var(--my);
  -webkit-mask: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.15) 80%);
          mask: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.15) 80%); }
.cn.ident::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
/* enlarged card: tilts toward the pointer */
.zoomer .holder { --rx: 0deg; --ry: 0deg; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .14s ease-out; will-change: transform; }
.zoomer .holder > .cn { box-shadow: 0 24px 50px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .zoomer .holder { transform: none; } }
/* Truth Serum colour choice in the pick window */
.pw-color { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 190px; min-height: 220px; padding: 20px 14px;
  border: 0 !important; border-radius: 8px; cursor: pointer; color: #141210; transition: transform .12s, box-shadow .12s; }
.pw-color.c-ORDER { background: var(--order); } .pw-color.c-GHOST { background: var(--ghost); }
.pw-color b { display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; border: 4px solid #141210; border-radius: 8px; font-family: var(--f-body); font-weight: 900; font-size: 60px; line-height: 1; }
.pw-color span { font-size: 22px; font-weight: 900; }
.pw-color small { font-size: 12px; font-weight: 700; opacity: .75; text-align: center; }
.pw-color:hover { transform: translateY(-4px); box-shadow: 0 0 0 3px #F4F1EA, 0 14px 30px rgba(0,0,0,.5); }
/* AI thinking: three dots on the acting seat */
.act-banner.ai-think { display: inline-flex; align-items: center; gap: 6px; background: #2C2C35; color: #ECE8DF; }
.th-dots { display: inline-flex; gap: 3px; }
.th-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: th-dot 1.1s ease-in-out infinite; }
.th-dots i:nth-child(2) { animation-delay: .18s; } .th-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes th-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .th-dots i { animation: none; opacity: .7; } }
/* AI auto-play */
.tb-auto { display: inline-flex; align-items: center; gap: 6px; }
.tb-auto .au-dot { width: 7px; height: 7px; border-radius: 50%; background: #5A5A66; }
.tb-auto.on { background: #7FE3D0 !important; color: #06201B !important; border-color: #7FE3D0 !important; }
.tb-auto.on .au-dot { background: #06201B; animation: au-pulse 1.2s ease-in-out infinite; }
@keyframes au-pulse { 50% { opacity: .3; } }
.auto-box { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid #7FE3D0; border-radius: 4px; background: rgba(127,227,208,.07); }
.au-h { display: flex; align-items: center; gap: 8px; font-weight: 900; color: #7FE3D0; }
.au-h .au-dot { width: 8px; height: 8px; border-radius: 50%; background: #7FE3D0; animation: au-pulse 1.2s ease-in-out infinite; }
.auto-box p { margin: 0; font-size: 13px; color: var(--mute); }
.auto-box .primary { align-self: flex-start; }
body.auto-on .mine { box-shadow: 0 0 0 2px #7FE3D0 inset; }
/* log toggle: a real button */
.log-title { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; }
.log-title b { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--fg); }
.log-head .log-tog { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border: 1px solid var(--line-2) !important; border-radius: 3px; background: #1A1A20 !important; color: var(--fg); font-size: 12px; font-weight: 700; cursor: pointer; }
.log-head .log-tog svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.log-head .log-tog:hover { border-color: #F4F1EA !important; background: #26262E !important; }
.log-head { flex-wrap: wrap; }
.log-modes { margin-left: auto; }
/* closed: the whole slim tab is the button */
.log.closed .log-head { align-items: center; gap: 10px; }
.log.closed .log-title { flex-direction: column; padding: 0; order: 2; }
.log.closed .log-title b { writing-mode: vertical-rl; }
.log.closed .log-tog { flex-direction: column; padding: 8px 4px; order: 1; }
.log.closed .log-tog span { writing-mode: vertical-rl; letter-spacing: .1em; }

/* ================= 3 KEYS (3 gold / 3 cyan) ================= */
.fx-keys { position: fixed; inset: 0; z-index: 63; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.fx-keys::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(0,0,0,.35), rgba(0,0,0,.78) 65%); animation: cr-dim .3s ease-out both; }
.ks-card { position: relative; text-align: center; padding: 22px 40px 22px; min-width: min(460px, 90vw); background: rgba(10,10,13,.94);
  border-top: 3px solid var(--kc); border-bottom: 3px solid var(--kc); animation: cr-in .45s cubic-bezier(.2,1.3,.4,1) both; }
.ks-sys { font-size: 11px; letter-spacing: .22em; color: var(--kc); opacity: .85; }
.ks-name { margin: 8px 0 16px; font-size: 18px; font-weight: 900; color: #F4F1EA; }
.ks-row { position: relative; display: flex; justify-content: center; gap: 16px; }
.ks-key { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 8px; background: var(--kc); color: #111;
  font-family: var(--f-body); font-weight: 900; font-size: 44px; box-shadow: 0 0 0 3px #0A0A0D, 0 0 0 5px var(--kc);
  opacity: 0; animation: ks-lock .32s cubic-bezier(.2,1.6,.4,1) calc((.35s + var(--i) * .22s) * var(--k, 1)) forwards; }
@keyframes ks-lock { from { opacity: 0; transform: scale(2) rotate(-8deg); } to { opacity: 1; transform: none; } }
.ks-scan { position: absolute; top: -8px; bottom: -8px; left: -20px; width: 6px; background: #F4F1EA; box-shadow: 0 0 16px #F4F1EA, 0 0 30px var(--kc); opacity: 0;
  animation: ks-scan calc(.9s * var(--k, 1)) ease-in-out calc(1.2s * var(--k, 1)) forwards; }
@keyframes ks-scan { 0% { opacity: 0; left: -20px; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; left: calc(100% + 14px); } }
.ks-verify { margin-top: 16px; font-size: 12px; letter-spacing: .2em; color: #BDB9AF; display: inline-flex; align-items: center; gap: 6px;
  opacity: 0; animation: ks-fade calc(1s * var(--k, 1)) ease calc(1.1s * var(--k, 1)) both; }
@keyframes ks-fade { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }
.ks-verdict { height: 0; overflow: visible; opacity: 0; font-family: var(--f-display); font-size: 30px; letter-spacing: .1em;
  animation: ks-verdict .4s ease-out calc(2.15s * var(--k, 1)) forwards; }
@keyframes ks-verdict { from { opacity: 0; transform: translateY(-18px) scale(1.4); } to { opacity: 1; transform: translateY(-26px); } }
.fx-keys.win .ks-verdict { color: var(--kc); text-shadow: 0 0 24px var(--kc); }
.fx-keys.win .ks-key { animation: ks-lock .32s cubic-bezier(.2,1.6,.4,1) calc((.35s + var(--i) * .22s) * var(--k, 1)) forwards, ks-glow .6s ease-out calc(2.15s * var(--k, 1)) 2 alternate; }
@keyframes ks-glow { to { box-shadow: 0 0 0 3px #0A0A0D, 0 0 0 5px var(--kc), 0 0 40px 8px var(--kc); } }
.fx-keys.void .ks-verdict { color: #6E6B64; font-family: var(--f-body); font-weight: 900; font-size: 18px; letter-spacing: .3em; }
.fx-keys.void .ks-key { animation: ks-lock .32s cubic-bezier(.2,1.6,.4,1) calc((.35s + var(--i) * .22s) * var(--k, 1)) forwards, ks-dark .5s ease-in calc(2.15s * var(--k, 1)) forwards; }
@keyframes ks-dark { to { filter: grayscale(1) brightness(.45); box-shadow: 0 0 0 3px #0A0A0D, 0 0 0 5px #3A3A45; } }
.fx-keys.out { transition: opacity .4s; opacity: 0; }
.fx-keyseat { animation: keyseat .5s ease-out 3; }
@keyframes keyseat { 50% { box-shadow: 0 0 0 3px var(--hi), 0 0 24px var(--hi); } }
@media (prefers-reduced-motion: reduce) { .ks-key, .ks-verdict { animation: none !important; opacity: 1; } .ks-scan, .ks-verify { display: none; } }
/* verdict sits where the "verifying" line was, with room below */
.ks-verify { display: flex; justify-content: center; height: 22px; margin-top: 14px; }
.ks-verdict { height: 34px; line-height: 34px; margin-top: -28px; }
@keyframes ks-verdict { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: none; } }
/* 3 keys inside another player's seat */
.fx-keybox { position: fixed; z-index: 40; pointer-events: none; border-radius: 4px; background: rgba(10,10,13,.92); box-shadow: inset 0 0 0 2px var(--kc);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; animation: cb-in .25s ease-out both; }
.kb-sys { font-size: 10px; letter-spacing: .22em; color: var(--kc); }
.fx-keybox .ks-row { gap: 8px; }
.fx-keybox .ks-key { width: 34px; height: 34px; font-size: 20px; border-radius: 5px; box-shadow: 0 0 0 2px #0A0A0D, 0 0 0 3px var(--kc); }
.fx-keybox .ks-scan { width: 4px; top: -5px; bottom: -5px; }
.fx-keybox .ks-verdict { height: 22px; line-height: 22px; margin: 0; font-size: 17px; }
.fx-keybox.void .ks-verdict { font-size: 13px; }
.fx-keybox.win .ks-verdict { color: var(--kc); text-shadow: 0 0 16px var(--kc); }
.fx-keybox.void .ks-verdict { color: #8C897F; font-family: var(--f-body); font-weight: 900; letter-spacing: .25em; }
.fx-keybox.win .ks-key { animation: ks-lock .32s cubic-bezier(.2,1.6,.4,1) calc((.35s + var(--i) * .22s) * var(--k, 1)) forwards, ks-glow .6s ease-out calc(2.15s * var(--k, 1)) 2 alternate; }
.fx-keybox.void .ks-key { animation: ks-lock .32s cubic-bezier(.2,1.6,.4,1) calc((.35s + var(--i) * .22s) * var(--k, 1)) forwards, ks-dark .5s ease-in calc(2.15s * var(--k, 1)) forwards; }
.fx-keybox.out { transition: opacity .4s; opacity: 0; }
/* failed keys: ERROR 403 + ACCESS DENIED in red, with red scan lines */
.fx-keys.void .ks-verdict, .fx-keybox.void .ks-verdict { display: flex; flex-direction: column; align-items: center; gap: 2px; height: auto; line-height: 1.05;
  color: #E5322D; font-family: var(--f-display); font-weight: 400; letter-spacing: .08em; text-shadow: 0 0 14px rgba(229,50,45,.55); }
.fx-keys.void .ks-verdict { font-size: 28px; margin-top: -34px; }
.fx-keybox.void .ks-verdict { font-size: 15px; }
.ks-err { font-family: var(--f-mono); font-size: 11px; letter-spacing: .24em; color: #FF8A73; text-shadow: none; }
.fx-keys.void .ks-err { font-size: 12px; }
.ks-deny { position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(229,50,45,.16) 0 2px, transparent 2px 5px);
  animation: ks-deny .5s ease-out calc(2.15s * var(--k, 1)) forwards; }
@keyframes ks-deny { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .5; } 60%, 100% { opacity: 1; } }
.fx-keybox.void { animation: cb-in .25s ease-out both, kb-red .4s ease-out calc(2.15s * var(--k, 1)) forwards; }
@keyframes kb-red { to { box-shadow: inset 0 0 0 2px #E5322D; } }
.fx-keys.void .ks-verdict { margin-top: -18px; }

/* ================= rebirth: ZERO card overwritten into the new identity ================= */
.fx-reborn { position: fixed; inset: 0; z-index: 66; pointer-events: none; display: flex; align-items: center; justify-content: center; --rc: #18C8E8; }
.fx-reborn.reaper { --rc: #E5322D; }
.fx-reborn::before { content: ''; position: absolute; inset: 0; background: rgba(4,6,8,.86); animation: cr-dim .4s ease-out both; }
.rb-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rb-sys { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .24em; color: var(--rc); }
.rb-wrap { position: relative; --mm: 3.5px; width: calc(63 * 3.5px); height: calc(88 * 3.5px); }
.rb-card { position: absolute; inset: 0; }
.rb-card > .cn { box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.rb-old { animation: rb-jitter .14s steps(2) calc(.7s * var(--k, 1)) 16; }
@keyframes rb-jitter { 0% { transform: translate(2px, 0); filter: hue-rotate(30deg); } 50% { transform: translate(-3px, 1px); filter: none; } 100% { transform: none; } }
.rb-new { clip-path: inset(0 0 100% 0); animation: rb-write calc(2.4s * var(--k, 1)) cubic-bezier(.6,0,.4,1) calc(.8s * var(--k, 1)) forwards; }
@keyframes rb-write { 0% { clip-path: inset(0 0 100% 0); } 30% { clip-path: inset(0 0 72% 0); } 34% { clip-path: inset(0 0 76% 0); } 60% { clip-path: inset(0 0 40% 0); } 63% { clip-path: inset(0 0 44% 0); } 100% { clip-path: inset(0 0 0 0); } }
.rb-band { position: absolute; left: -14px; right: -14px; height: 54px; top: -27px; display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--rc) 28%, transparent) 40%, color-mix(in srgb, var(--rc) 28%, transparent) 60%, transparent);
  border-top: 1px solid var(--rc); border-bottom: 1px solid var(--rc); box-shadow: 0 0 22px var(--rc);
  opacity: 0; animation: rb-band calc(2.4s * var(--k, 1)) cubic-bezier(.6,0,.4,1) calc(.8s * var(--k, 1)) forwards; }
.rb-band i { display: block; font-style: normal; font-size: 8px; line-height: 7.5px; letter-spacing: .32em; color: var(--rc); white-space: nowrap; text-align: center; opacity: .85; }
@keyframes rb-band { 0% { top: -27px; opacity: 1; } 30% { top: calc(28% - 27px); } 34% { top: calc(24% - 27px); } 60% { top: calc(60% - 27px); } 63% { top: calc(56% - 27px); } 95% { opacity: 1; } 100% { top: calc(100% - 27px); opacity: 0; } }
.rb-done { font-size: 20px; font-weight: 900; color: var(--rc); letter-spacing: .08em; text-shadow: 0 0 18px var(--rc); opacity: 0;
  animation: ks-show-in .45s ease-out calc(3.3s * var(--k, 1)) forwards; }
@keyframes ks-show-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fx-reborn.out { transition: opacity .4s; opacity: 0; }
/* the Reaper card: blood red */
.cn.ident.reaper { background: #B8242A !important; color: #F4F1EA !important; }
.cn.ident.reaper .id-kanji { border-color: #F4F1EA !important; color: #F4F1EA !important; }
.cn.ident.reaper .id-title { color: #F4F1EA !important; }
.cn.ident.reaper .id-text { background: #1A0506 !important; }
@media (prefers-reduced-motion: reduce) { .rb-old, .rb-band { animation: none; } .rb-new { animation: none; clip-path: none; } .rb-done { animation: none; opacity: 1; } }

/* ================= rebirth v2: broken colour TV mutation =================
   Neutral palette (magenta / white static); red only for the Reaper. No gold, no cyan. */
.fx-reborn { --rc: #FF2E88; }
.fx-reborn.reaper { --rc: #E5322D; }
.fx-reborn::before { background: rgba(6,4,8,.9); }
.rb-wrap, .rb-band { display: none; }
.rb-sys { position: relative; height: 16px; color: var(--rc); }
.rb-sys span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.rb-sys span:first-child { animation: rb-sys1 calc(4s * var(--k, 1)) steps(1) both; }
.rb-sys span:last-child { opacity: 0; animation: rb-sys2 calc(4s * var(--k, 1)) steps(1) both; }
@keyframes rb-sys1 { 0%, 8%, 14%, 22%, 30%, 60% { opacity: 1; } 6%, 12%, 20%, 28% { opacity: 0; } 62%, 100% { opacity: 0; } }
@keyframes rb-sys2 { 0%, 61% { opacity: 0; } 62%, 66%, 70%, 100% { opacity: 1; } 64%, 68% { opacity: 0; } }
.rb-tv { position: relative; --mm: 3.5px; width: calc(63 * 3.5px); height: calc(88 * 3.5px); border-radius: 10px;
  animation: rb-tv calc(4s * var(--k, 1)) linear both; }
@keyframes rb-tv {
  0% { transform: none; filter: none; }
  10% { transform: translate(-3px, 0) skewX(-2deg); filter: drop-shadow(-5px 0 var(--rc)) drop-shadow(5px 0 #fff); }
  12% { transform: translate(4px, -6px); filter: none; }
  16% { transform: translate(0, 10px) skewX(4deg); filter: drop-shadow(7px 0 var(--rc)) drop-shadow(-6px 0 #8A8A99) saturate(2.5); }
  19% { transform: translate(-2px, -18px); filter: contrast(1.8) brightness(1.3); }
  23% { transform: none; filter: drop-shadow(-9px 0 var(--rc)) drop-shadow(9px 0 #fff); }
  28% { transform: translate(5px, 4px) skewX(-6deg); filter: grayscale(1) contrast(2.4); }
  31% { transform: translate(0, -26px); filter: none; }
  35% { transform: translate(-6px, 14px) skewX(8deg); filter: drop-shadow(12px 0 var(--rc)) saturate(3); }
  41% { transform: translate(3px, 0); filter: contrast(2.2) grayscale(.6); }
  46% { transform: translate(0, -9px) skewX(-10deg); filter: drop-shadow(-12px 0 var(--rc)) drop-shadow(10px 0 #fff); }
  52% { transform: translate(-4px, 22px); filter: grayscale(1) contrast(3) brightness(.7); }
  56% { transform: translate(2px, -4px) skewX(5deg); filter: brightness(1.8) contrast(2); }
  61% { transform: scale(1, .02); filter: brightness(4) grayscale(1); }
  66% { transform: scale(.02, .02); filter: brightness(5) grayscale(1); }
  70% { transform: scale(1.04, 1.04); filter: brightness(1.6) drop-shadow(0 0 30px var(--rc)); }
  74%, 100% { transform: none; filter: none; } }
.rb-old { animation: rb-old calc(4s * var(--k, 1)) steps(1) both; }
@keyframes rb-old { 0%, 24%, 28%, 36%, 40%, 47%, 52% { opacity: 1; } 25%, 37%, 48% { opacity: 0; } 61%, 100% { opacity: 0; } }
.rb-new { clip-path: none !important; opacity: 0; animation: rb-new calc(4s * var(--k, 1)) steps(1) both; }
@keyframes rb-new { 0%, 24% { opacity: 0; } 25%, 27% { opacity: 1; } 28%, 36% { opacity: 0; } 37%, 40% { opacity: 1; } 41%, 47% { opacity: .6; } 48%, 52% { opacity: 1; } 53%, 60% { opacity: 0; } 66%, 100% { opacity: 1; } }
.rb-noise { position: absolute; inset: -6px; border-radius: 10px; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: rb-noise calc(4s * var(--k, 1)) steps(1) both, rb-noise-move .12s steps(3) infinite; }
@keyframes rb-noise { 0%, 8% { opacity: 0; } 10% { opacity: .5; } 20% { opacity: .85; } 30% { opacity: .55; } 40% { opacity: .95; } 50% { opacity: .7; } 58% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes rb-noise-move { 0% { background-position: 0 0; } 33% { background-position: -47px 31px; } 66% { background-position: 63px -22px; } 100% { background-position: 0 0; } }
.rb-roll { position: absolute; left: -8px; right: -8px; height: 26%; top: -30%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.22) 45%, rgba(255,46,136,.25) 55%, transparent);
  animation: rb-roll calc(.55s * var(--k, 1)) linear infinite, rb-roll-life calc(4s * var(--k, 1)) steps(1) both; }
@keyframes rb-roll { from { top: -30%; } to { top: 105%; } }
@keyframes rb-roll-life { 0%, 9% { opacity: 0; } 10%, 59% { opacity: 1; } 60%, 100% { opacity: 0; } }
.rb-tear { position: absolute; left: -10px; right: -10px; height: 7%; top: 40%; pointer-events: none; background: rgba(255,255,255,.85); mix-blend-mode: difference;
  animation: rb-tear calc(4s * var(--k, 1)) steps(1) both; }
@keyframes rb-tear { 0%, 13% { opacity: 0; } 14% { opacity: 1; top: 22%; height: 4%; } 17% { opacity: 0; } 29% { opacity: 1; top: 63%; height: 9%; } 32% { opacity: 0; } 43% { opacity: 1; top: 12%; height: 6%; } 45% { opacity: 1; top: 50%; height: 3%; } 48% { opacity: 0; } 55% { opacity: 1; top: 76%; height: 11%; } 58%, 100% { opacity: 0; } }
.rb-done { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #F4F1EA; text-shadow: 0 0 16px var(--rc);
  animation: ks-show-in .45s ease-out calc(3s * var(--k, 1)) both; }
.rb-done small { font-size: 11px; letter-spacing: .28em; color: var(--rc); text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .rb-tv, .rb-old, .rb-noise, .rb-roll, .rb-tear, .rb-sys span { animation: none !important; } .rb-old, .rb-noise, .rb-roll, .rb-tear { display: none; } .rb-new { opacity: 1; animation: none; } }

/* someone else reborn: the seat loses signal for a moment (no faction colours) */
.fx-rebornseat { position: fixed; z-index: 40; pointer-events: none; border-radius: 4px; overflow: hidden; background: rgba(8,6,10,.88);
  box-shadow: inset 0 0 0 2px #FF2E88; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  animation: rbs-in .3s steps(3) both; }
@keyframes rbs-in { 0% { opacity: 0; transform: scaleY(.05); } 50% { opacity: 1; transform: scaleY(1.1) skewX(8deg); } 100% { transform: none; } }
.fx-rebornseat .rb-noise { inset: 0; opacity: .6; animation: rb-noise-move .12s steps(3) infinite; }
.fx-rebornseat .rb-roll { animation: rb-roll calc(.5s * var(--k, 1)) linear infinite; }
.fx-rebornseat b { position: relative; font-size: 22px; letter-spacing: .2em; color: #F4F1EA; animation: cr-glitch .5s steps(1) 4; }
.fx-rebornseat b::before { content: attr(data-t); position: absolute; inset: 0; color: #FF2E88; transform: translate(-3px, 0); clip-path: inset(0 0 50% 0); }
.fx-rebornseat span { position: relative; font-size: 12px; font-weight: 900; color: #FF8AC0; letter-spacing: .2em; }
.fx-rebornseat.out { transition: opacity .35s; opacity: 0; }

/* ================= fixed play layout: the channel and the action box keep one size ================= */
body.fit .mid { grid-template-columns: 240px minmax(0, 1fr) minmax(220px, 280px); }
body.fit.log-closed .mid { grid-template-columns: 240px minmax(0, 1fr) 44px; }
body.fit .channel { width: 240px; min-width: 0; max-width: 240px; box-sizing: border-box; }
body.fit .channel * { min-width: 0; }
body.fit .seats { min-height: var(--seatsMin, 176px); align-items: stretch; }
body.fit .phasebar { flex: none; height: 98px; overflow: hidden; }
body.fit .phasebar:empty { display: block; }
body.fit .pb-task b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.fit .pb-task { min-width: 0; }
body.fit .ticker { flex: none; height: 70px; overflow: hidden; justify-content: flex-end; }
/* seat row: one fixed height for the whole game (content that doesn't fit is clipped, never pushes) */
body.fit .seats { min-height: 0; height: 176px; }
body.fit .seat { overflow: hidden; min-height: 0; }
/* give the action box more of the middle row: slimmer phase bar, one-line message strip */
body.fit .phasebar { height: 80px; }
body.fit .pb { padding: 7px 12px; gap: 6px; }
body.fit .pb-task { padding: 5px 9px; }
body.fit .ticker { height: 26px; }
body.fit .ticker .tk.now { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* seats: keep the outside tags (thinking, lock plate) visible; only the card chips area gives way */
body.fit .seat { overflow: visible; }
body.fit .seat > .s-field { flex: 1 1 auto; min-height: 0; overflow: hidden; }
body.fit .phasebar { height: 86px; }
/* countdown lives in the phase bar: always there, never pushes the action box */
.prompt .pr-timer { display: none !important; }
.pb { position: relative; overflow: hidden; }
.pb-time { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.06); }
.pb-time i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #F4F1EA; transition: width .2s linear, background .3s; }
.pb-time.idle i { background: rgba(255,255,255,.14); }
.pb-time.low i { background: #FF4A3D; }
.pb-sec { margin-left: auto; flex: none; min-width: 44px; text-align: right; font-family: var(--f-mono); font-size: 14px; font-weight: 700; color: var(--fg); }
.pb-sec.low { color: #FF8A73; }
.pr-timer.idle i { background: rgba(255,255,255,.08); }
.pr-timer.idle span { color: var(--mute); }
/* faction reveal: no button, a 3-second bar, then everyone moves on together */
.idr-next { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; opacity: 0; animation: idr-p .4s ease-out 2.9s forwards; }
.idr-next span { font-size: 13px; color: #BDB9AF; letter-spacing: .08em; }
.idr-next i { display: block; width: 220px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.idr-next b { display: block; height: 100%; width: 0; background: var(--ic); animation: idr-nextbar 3s linear 2.9s forwards; }
@keyframes idr-nextbar { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .idr-next { animation: none; opacity: 1; } }

/* ================= operator pick: rigid cards dealt face down, then flipped ================= */
.rp-cards { perspective: 1400px; }
.rp-card { position: relative; }
.rp-flip { position: relative; transform-style: preserve-3d; transform-origin: 50% 50%;
  animation: rp-deal .5s cubic-bezier(.2,.85,.25,1) calc(var(--i) * .14s) both, rp-turn .62s cubic-bezier(.55,0,.25,1) calc(.62s + var(--i) * .14s) both; }
.rp-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: calc(3 * var(--mm)); }

.rp-back { position: absolute; inset: 0; transform: rotateY(180deg); }
/* a hard card: it slides in flat and heavy, lands with a small bounce, then turns over in one
   stiff motion with a short overshoot - it never bends */
@keyframes rp-deal {
  0% { opacity: 0; transform: translateY(-140px) translateZ(120px) rotateY(180deg) rotateZ(-7deg); }
  70% { opacity: 1; transform: translateY(6px) translateZ(0) rotateY(180deg) rotateZ(1deg); }
  100% { opacity: 1; transform: translateY(0) rotateY(180deg) rotateZ(0); } }
@keyframes rp-turn {
  0% { transform: rotateY(180deg); }
  45% { transform: translateZ(60px) rotateY(95deg); }
  82% { transform: translateZ(0) rotateY(-9deg); }
  92% { transform: rotateY(3deg); }
  100% { transform: rotateY(0); } }
/* edge and weight: a thick dark rim and a contact shadow that tightens as the card lands */
.rp-face > .cn { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 2px 0 rgba(0,0,0,.55), 0 4px 0 rgba(0,0,0,.35), 0 18px 34px rgba(0,0,0,.55); }
.rp-cards.dealt .rp-flip { animation: none; }
@media (prefers-reduced-motion: reduce) { .rp-flip { animation: none; } }
/* fade on the button, not on the 3D element (opacity on it would flatten the flip and show a mirrored back) */
@keyframes rp-deal {
  0% { transform: translateY(-140px) translateZ(120px) rotateY(180deg) rotateZ(-7deg); }
  70% { transform: translateY(6px) translateZ(0) rotateY(180deg) rotateZ(1deg); }
  100% { transform: translateY(0) rotateY(180deg) rotateZ(0); } }
.rp-cards:not(.dealt) .rp-card { animation: rp-show .3s ease-out calc(var(--i) * .14s) both; }
@keyframes rp-show { from { opacity: 0; } to { opacity: 1; } }
.rp-card.off { animation: none !important; }
.rp-card { perspective: 1400px; }
/* operator pick: no gold focus ring after clicking; keyboard focus uses the faction colour */
.rp-card:focus { outline: none; }
.rp-card:focus-visible { outline: 2px solid var(--ic, #F4F1EA); outline-offset: 4px; }
/* the general "selected button" gold outline does not apply to operator cards: they use the faction frame */
button.rp-card.sel { outline: none; }

/* ================= game start: chip insert, faction boot, hand deal ================= */
/* operator card -> chip -> flies into the operator slot */
.fx-chip { position: fixed; z-index: 62; pointer-events: none; transform: translate(-50%, -50%); }
.fc-card { width: 150px; --mm: calc(150px / 63); animation: fc-card .55s cubic-bezier(.5,0,.75,0) both; }
@keyframes fc-card { 0% { transform: scale(1.2); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.35, .2); opacity: 0; filter: brightness(2); } }
.fc-chip { position: absolute; left: 50%; top: 50%; width: 150px; height: 64px; transform: translate(-50%, -50%) scale(.6); opacity: 0;
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 0 12px;
  background: linear-gradient(135deg, #2A2A33, #121217); border: 1px solid #6E6B64; border-radius: 5px; color: #F4F1EA;
  box-shadow: 0 0 0 1px #000, 0 10px 24px rgba(0,0,0,.6), 0 0 22px rgba(244,241,234,.25);
  animation: fc-chip 1.45s cubic-bezier(.5,0,.2,1) both; }
.fc-pins { position: absolute; left: 8px; right: 8px; top: -5px; bottom: -5px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #C9B27A 0 3px, transparent 3px 8px) top / 100% 4px no-repeat,
              repeating-linear-gradient(90deg, #C9B27A 0 3px, transparent 3px 8px) bottom / 100% 4px no-repeat; opacity: .85; }
.fc-emb { grid-row: 1 / 3; display: inline-flex; width: 36px; height: 36px; }
.fc-emb svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; }
.fc-chip b { font-size: 15px; font-weight: 900; line-height: 1.1; align-self: end; }
.fc-chip small { font-size: 10px; letter-spacing: .18em; color: #BDB9AF; align-self: start; }
@keyframes fc-chip {
  0%, 30% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  48% { transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 1; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px) - 26px)) scale(.9) rotate(-3deg); }
  92% { opacity: 1; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(.82); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px) + 3px)) scale(.8); } }
/* the operator slot stays empty until the chip is pushed in, then lights up once */
.role-panel.chip-in { animation: rp-chipin 1.9s linear both; animation-delay: calc(var(--age, 0) * -1ms); }
@keyframes rp-chipin {
  0%, 70% { opacity: 0; }
  72% { opacity: 1; box-shadow: 0 0 0 2px #F4F1EA, 0 0 30px rgba(244,241,234,.6); filter: brightness(1.6); }
  100% { opacity: 1; box-shadow: none; filter: none; } }
/* faction slot: a terminal boot */
.fx-boot { position: fixed; z-index: 41; pointer-events: none; border-radius: 4px; overflow: hidden; background: #050507;
  box-shadow: inset 0 0 0 1px #2A2A33; animation: bt-on .25s steps(2) both; }
@keyframes bt-on { 0% { transform: scaleY(.02); filter: brightness(4); } 100% { transform: none; filter: none; } }
.bt-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); }
.bt-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(transparent, rgba(255,255,255,.08), transparent); animation: rb-roll .9s linear infinite; }
.bt-lines { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px; font-size: 10.5px; letter-spacing: .08em; color: #8C897F; }
.bt-lines span { white-space: nowrap; overflow: hidden; width: 0; animation: bt-type .22s steps(14) var(--d) forwards; }
.bt-lines .bt-ok { color: var(--ic); font-weight: 700; }
@keyframes bt-type { to { width: 100%; } }
.fx-boot.out { transition: opacity .35s, filter .35s; opacity: 0; filter: brightness(2.2); }
/* hand: hidden during the pick, then each card pops up from below and snaps into its slot */
.mine .hand.hand-pre .cn { opacity: 0; }
.mine .hand .cn.yugi { animation: yugi .55s cubic-bezier(.2,1.25,.35,1) var(--yd, 0s) both; transform-origin: 50% 100%; }
@keyframes yugi {
  0% { opacity: 0; transform: translateY(150%) rotateX(55deg) scale(.9); }
  55% { opacity: 1; transform: translateY(-10%) rotateX(-6deg) scale(1.04); }
  80% { transform: translateY(2%) rotateX(2deg) scale(.99); }
  100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fx-chip, .fx-boot { display: none; } .role-panel.chip-in, .mine .hand .cn.yugi { animation: none; } }
/* ---------- game start v2: slower, and nothing shows before its own animation ---------- */
.id-panel.id-standby { background: #050507; border: 1px solid #2A2A33; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; cursor: default; }
.id-standby span { font-size: 10px; letter-spacing: .2em; color: #6E6B64; }
.id-standby b { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .2em; color: #8C897F; font-weight: 600; }
.role-panel.slot-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border: 1px dashed #3A3A45; background: rgba(255,255,255,.02); }
.slot-empty span { font-size: 10px; letter-spacing: .2em; color: #6E6B64; }
.slot-empty b { font-size: 13px; color: #8C897F; }
.fc-card { animation-duration: .9s; }
.fc-chip { animation-duration: 2.4s; }
.role-panel.chip-in { animation-duration: 3.1s; }
.mine .hand .cn.yugi { animation-duration: .75s; }
.fx-boot { animation-duration: .4s; }
.bt-lines span { animation-duration: .35s; }
/* faction panel: invisible under the boot screen, appears only as the boot finishes */
.id-panel.booting { animation: id-booting 3s linear both; animation-delay: calc(var(--age, 0) * -1ms); }
@keyframes id-booting { 0%, 82% { opacity: 0; } 100% { opacity: 1; } }

/* ================= operator intro v3: scan, vanish, the slot is pressed in from above =================
   All class names here start with "opi-" so they can never touch the cards' own classes. */
.fx-chip.v3 .fc-card { position: relative; width: 170px; --mm: calc(170px / 63); animation: opi-card 1.25s cubic-bezier(.45,0,.3,1) both; }
@keyframes opi-card { 0% { opacity: 0; transform: scale(1.15) translateY(14px); } 18% { opacity: 1; transform: none; }
  74% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: scale(1.04); filter: brightness(2.6) blur(2px); } }
.opi-scan { position: absolute; left: -6px; right: -6px; height: 3px; top: 0; background: #F4F1EA; box-shadow: 0 0 14px #F4F1EA, 0 0 30px rgba(244,241,234,.6);
  opacity: 0; animation: opi-scanline .65s linear .28s both; }
@keyframes opi-scanline { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 1; } }
.opi-grid { position: absolute; inset: 0; border-radius: calc(3 * var(--mm)); pointer-events: none; background-color: #07070A;
  background-image: repeating-linear-gradient(0deg, rgba(244,241,234,.2) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, rgba(244,241,234,.12) 0 1px, transparent 1px 9px);
  clip-path: inset(0 0 100% 0); animation: opi-gridin .65s linear .28s both; }
@keyframes opi-gridin { to { clip-path: inset(0 0 0 0); } }
/* the slot frame and the two clamps that lock the panel */
.fx-opslot { position: fixed; z-index: 61; pointer-events: none; }
.opi-br { position: absolute; width: 18px; height: 18px; border: 2px solid #F4F1EA; opacity: 0; animation: opi-in .3s ease-out 1.0s forwards, opi-out .4s ease-in 2.4s forwards; }
.opi-br.tl { left: 4px; top: 4px; border-right: 0; border-bottom: 0; } .opi-br.tr { right: 4px; top: 4px; border-left: 0; border-bottom: 0; }
.opi-br.bl { left: 4px; bottom: 4px; border-right: 0; border-top: 0; } .opi-br.br { right: 4px; bottom: 4px; border-left: 0; border-top: 0; }
@keyframes opi-in { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: none; } }
@keyframes opi-out { to { opacity: 0; } }
.opi-clamp { position: absolute; top: 50%; width: 8px; height: 46%; margin-top: -23%; background: #C9B27A; border-radius: 2px; opacity: 0; }
.opi-clamp.l { left: -5px; animation: opi-clamp-l .2s cubic-bezier(.5,1.6,.5,1) 1.82s forwards, opi-out .4s ease-in 2.4s forwards; }
.opi-clamp.r { right: -5px; animation: opi-clamp-r .2s cubic-bezier(.5,1.6,.5,1) 1.82s forwards, opi-out .4s ease-in 2.4s forwards; }
@keyframes opi-clamp-l { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes opi-clamp-r { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.opi-ok { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font-size: 10px; letter-spacing: .3em; font-weight: 700; color: #F4F1EA; opacity: 0;
  animation: opi-in .2s ease-out 1.85s forwards, opi-out .3s ease-in 2.5s forwards; }
/* the operator panel itself drops in from above, presses down, and locks */
.role-panel.chip-in { animation: opi-press 2.8s linear both; animation-delay: calc(var(--age, 0) * -1ms); }
@keyframes opi-press {
  0%, 44% { opacity: 0; transform: translateY(-70px) scale(1.04); }
  46% { opacity: 1; transform: translateY(-70px) scale(1.04); filter: brightness(1.5); }
  60% { transform: translateY(-14px) scale(1.02); }
  65% { transform: translateY(4px) scale(.985, .97); filter: brightness(2); box-shadow: 0 0 0 2px #F4F1EA, 0 0 30px rgba(244,241,234,.6); }
  70% { transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: none; filter: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .fx-opslot { display: none; } }
/* opening, in order left to right: faction boot (0-2.6 s), operator slot (2.6-5.4 s), then the hand */
.role-panel.chip-in { animation-delay: calc((2600 - var(--age, 0)) * 1ms); }

/* ================= colour boxes: received cards land in their box ================= */
.s-field .rcv-wait { visibility: hidden; }
.s-field .rcv-pop { animation: rcv-chip .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes rcv-chip { 0% { transform: scale(1.7); filter: brightness(2.2); } 100% { transform: none; filter: none; } }
.meter .mt.rcv-pop { animation: rcv-tile .7s ease-out; }
@keyframes rcv-tile { 0% { transform: scale(1.12); box-shadow: 0 0 0 2px var(--c), 0 0 22px var(--c); filter: brightness(1.5); } 100% { transform: none; } }
.fx-boxbadge { position: fixed; z-index: 45; pointer-events: none; transform: translate(-50%, -100%); }
.fx-boxbadge b { display: block; padding: 1px 7px; border-radius: 3px; font-size: 13px; font-weight: 900; color: #141210; background: var(--bc, #F4F1EA);
  box-shadow: 0 4px 12px rgba(0,0,0,.5); animation: boxbadge calc(1.2s * var(--k, 1)) ease-out forwards; }
.fx-boxbadge.c-ORDER { --bc: var(--order); } .fx-boxbadge.c-GHOST { --bc: var(--ghost); } .fx-boxbadge.c-VIRUS { --bc: var(--virus); }
.fx-boxbadge.c-VIRUS b { color: #F4F1EA; }
.fx-boxbadge.down b { background: #2A2A33; color: #F4F1EA; box-shadow: inset 0 0 0 1.5px var(--bc), 0 4px 12px rgba(0,0,0,.5); }
@keyframes boxbadge { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 15% { opacity: 1; transform: translateY(-2px) scale(1.1); }
  25% { transform: none; } 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .fx-boxbadge b, .s-field .rcv-pop, .meter .mt.rcv-pop { animation: none; } }
/* ================= seat overlays cover the whole seat ================= */
.fx-crashbox, .fx-keybox, .fx-rebornseat { border-radius: 6px; }
.fx-crashbox { background: rgb(20,4,4); }
.fx-keybox { background: rgb(10,10,13); }
.fx-rebornseat { background: rgb(8,6,10); }
.seat.fx-covered .act-banner, .seat.fx-covered .pick-tag, .seat.fx-covered .lock-plate, .seat.fx-covered .pk-banner { visibility: hidden; }

/* ================= fade-outs that actually fade =================
   These boxes keep their entry animation; an active animation beats a transition, so the
   .out fade never showed. A fade animation of its own replaces the entry one. */
.fx-crashbox.out, .fx-keybox.out, .fx-rebornseat.out, .fx-crashbig.out, .fx-keys.out, .fx-reborn.out, .fx-boot.out, .fx-serum-banner.out {
  animation: fx-fadeaway .4s ease-in forwards; transition: none; }
@keyframes fx-fadeaway { from { opacity: 1; } to { opacity: 0; } }
/* ================= send: the card tossed onto the channel ================= */
.fx-toss { z-index: 36; }
.fx-toss .fx-drawcard { filter: drop-shadow(0 12px 20px rgba(0,0,0,.65)); }

/* ================= scan result: private pop-up ================= */
#peekwin .pk-bg { position: fixed; inset: 0; z-index: 72; background: rgba(4,10,14,.55); display: flex; align-items: center; justify-content: center; padding: 24px 16px; animation: pk-in .2s ease-out both; }
#peekwin .pk-win { background: var(--bg-2); border: 2px solid #78DCFF; border-radius: 6px; box-shadow: 0 0 0 1px #78DCFF, 0 0 40px rgba(120,220,255,.25), 0 24px 70px rgba(0,0,0,.65);
  padding: 16px 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: min(420px, 100%); animation: pk-pop .25s cubic-bezier(.2,1.3,.4,1) both; }
#peekwin .pk-top { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .12em; color: #78DCFF; }
#peekwin .pk-top span { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
#peekwin .pk-top svg { width: 16px; height: 16px; }
#peekwin .pk-top b { color: #141210; background: #78DCFF; padding: 2px 8px; border-radius: 2px; letter-spacing: .04em; font-family: var(--f-sans, inherit); }
#peekwin .pk-text { font-size: 16px; font-weight: 700; }
#peekwin .pk-card { width: 170px; --mm: calc(170px / 63); }
#peekwin .pk-sub { font-size: 12px; color: var(--mute); }
@keyframes pk-in { from { opacity: 0; } }
@keyframes pk-pop { from { opacity: 0; transform: scale(.92) translateY(8px); } }
.ch-flag.ch-peek { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border: 1px solid #78DCFF; color: #78DCFF; background: rgba(6,16,22,.9); font: inherit; font-size: 11px; font-weight: 700; }
.ch-flag.ch-peek svg { width: 13px; height: 13px; }
.ch-flag.ch-peek:hover { background: #78DCFF; color: #141210; }

/* ================= "packet is here": a floating tag on the seat's top edge =================
   It no longer pushes the seat's content down; the seat keeps its normal shape. */
.seat:has(.pk-banner) { padding-top: 9px; }
body.fit .seat:has(.pk-banner) { padding-top: 7px; }
.seat > .pk-banner { left: 50%; right: auto; top: -12px; transform: translateX(-50%); height: auto; z-index: 4;
  padding: 2px 10px 2px 8px; gap: 6px; white-space: nowrap; font-size: 11.5px; line-height: 1.5;
  border: 1.5px solid var(--pkc); border-radius: 3px; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
body[data-pk="unknown"] .seat > .pk-banner { border-color: #F2EFE8; }
.seat > .pk-banner::before { flex: none; }
.seat:has(.act-banner) { margin-bottom: 0; }   /* the tags float on the edges; the seat keeps its size */

/* ================= Codex & Deep Salvage =================
   Every class here starts with cx- or gc-. Cards are only wrapped, never styled inside. */
.pg.pg-wide { max-width: 1180px; }
#help-dock .dock-cards b { border-radius: 2px; }
.hm-item.hm-gacha .hm-ic { color: #FF3EA5; }

.cx { display: flex; flex-direction: column; gap: 14px; }
.cx-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cx-tabs { display: flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 4px; }
.cx-tabs button { border: 0; background: none; color: var(--mute); font-weight: 900; padding: 8px 16px; display: flex; gap: 8px; align-items: center; }
.cx-tabs button em { font-style: normal; font-size: 11px; opacity: .7; }
.cx-tabs button.on { background: var(--fg); color: var(--bg); }
.cx-prog { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); letter-spacing: .08em; }
.cx-prog b { color: var(--fg); font-size: 15px; }
.cx-bar-in { width: 140px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.cx-bar-in i { display: block; height: 100%; background: linear-gradient(90deg, #A9A59C, #3FC7E8, #E5A50A, #FF3EA5, #F6E7B0); }
.cx-body { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 22px; align-items: start; }
.cx-right { position: sticky; top: 56px; width: 420px; height: min(700px, max(560px, calc(100vh - 112px))); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 560px; overflow-y: auto; overscroll-behavior: contain; }

/* operators: a honeycomb board */
.cx-left { container-type: inline-size; min-width: 0; }
.cx-board { --hw: min(124px, calc((100cqw - 36px) / 4.5)); --hh: calc(var(--hw) * 1.1547); padding: 10px 0 20px; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(242,239,232,.05), transparent 70%); }
.cx-hrow { display: flex; gap: 8px; }
.cx-hrow + .cx-hrow { margin-top: calc(var(--hh) * -0.25 + 8px); }
.cx-hrow { transform: translateX(calc(var(--hw) / -4 - 2px)); }
.cx-hrow.odd { transform: translateX(calc(var(--hw) / 4 + 2px)); }
.cx-hex { width: var(--hw); height: var(--hh); padding: 0; border: 0; background: var(--line-2); cursor: pointer;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background .15s, transform .15s; position: relative; }
.cx-hex-in { position: absolute; inset: 2px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #1B1B21, #101014);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--fg); }
.cx-hex-in small { font-size: 10px; color: var(--mute); letter-spacing: .14em; }
.cx-emb { width: calc(var(--hw) * .27); height: calc(var(--hw) * .27); display: inline-flex; }
.cx-emb svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }
.cx-hex-in b { font-size: max(9.5px, calc(var(--hw) * .097)); font-weight: 900; max-width: calc(var(--hw) * .76); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-pips { display: flex; gap: 3px; margin-top: 2px; }
.cx-pips i { width: 9px; height: 3px; background: #2C2C35; }
.cx-pips i.on { background: var(--rc); box-shadow: 0 0 6px var(--rc); }
.cx-hex:hover { background: #8C897F; transform: translateY(-2px); }
.cx-hex.sel { background: var(--hi); transform: scale(1.06); z-index: 1; }
.cx-hex.sel .cx-hex-in { background: linear-gradient(160deg, #2A2414, #14120C); color: var(--hi); }

/* rarity tabs */
.cx-head { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-width: 0; }
.cx-action-slot { display: flex; justify-content: flex-end; align-items: center; min-height: 32px; }
.cx-action-slot:empty { display: none; }
.cx-head .cx-rtabs { grid-column: auto; grid-row: auto; }
.cx-rtabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 100%; }
.cx-rtab { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; background: #121216; border: 1px solid var(--line); border-radius: 3px; color: var(--mute); cursor: pointer; }
.cx-rtab b { color: var(--rc); font-size: 13px; }
.cx-rtab span { font-size: 10.5px; white-space: nowrap; }
.cx-rtab em { font-style: normal; font-size: 10px; }
.cx-rtab.on { border-color: var(--rc); box-shadow: inset 0 0 0 1px var(--rc), 0 0 14px -4px var(--rc); color: var(--fg); }
.cx-rtab.locked { opacity: .55; }

/* the stage: the card floats and tilts (tilt is set from the pointer, like the enlarged card) */
.cx-stage { position: relative; padding: 18px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cx-float { animation: cx-bob 4.2s ease-in-out infinite; }
@keyframes cx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.cx-holder { --mm: 3.7px; --rx: 0deg; --ry: 0deg; position: relative; cursor: zoom-in; touch-action: manipulation; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .14s ease-out; will-change: transform;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.6)); }
.cx-holder.r-R { filter: drop-shadow(0 0 10px var(--rc)) drop-shadow(0 22px 30px rgba(0,0,0,.6)); }
.cx-holder.r-SR { filter: drop-shadow(0 0 16px var(--rc)) drop-shadow(0 22px 30px rgba(0,0,0,.6)); }
.cx-holder.r-UR { filter: drop-shadow(0 0 22px var(--rc)) drop-shadow(0 0 6px #fff) drop-shadow(0 22px 30px rgba(0,0,0,.6)); }
.cx-holder.locked > .cn { filter: grayscale(1) brightness(.35); }
.cx-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: var(--fg); padding: 20px; }
.cx-lock b { font-size: 34px; }
.cx-lock span { font-weight: 900; font-size: 16px; }
.cx-lock small { color: var(--mute); font-size: 11.5px; }
.cx-rbadge { font-size: 10.5px; letter-spacing: .2em; color: var(--rc); border: 1px solid var(--rc); padding: 2px 10px; border-radius: 2px; }
.cx-info { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.cx-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cx-name small { color: var(--mute); font-size: 11px; letter-spacing: .12em; }
.cx-name b { font-size: 22px; font-weight: 900; }
.cx-name span { font-size: 12px; color: var(--mute); border: 1px solid var(--line-2); padding: 1px 8px; border-radius: 2px; }
.cx-skill { font-size: 13px; color: var(--mute); }
.cx-skill b { color: var(--hi); }
.cx-info h4 { margin: 6px 0 0; font-size: 11px; letter-spacing: .2em; color: var(--mute); font-weight: 400; }
.cx-lore { margin: 0; font-size: 14px; line-height: 1.75; color: #D9D5CB; }

/* commands: a slim list */
.cx-list { display: flex; flex-direction: column; gap: 4px; }
.cx-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 44px; align-items: center; gap: 12px; padding: 8px 12px; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; color: var(--fg); cursor: pointer; transition: border-color .12s, transform .12s; }
.cx-row:hover { border-color: #8C897F; transform: translateX(3px); }
.cx-row.sel { border-color: var(--hi); box-shadow: inset 3px 0 0 var(--hi); }
.cx-pic { width: 34px; height: 34px; display: inline-flex; }
.cx-pic svg { width: 100%; height: 100%; }
.cx-rt { display: flex; flex-direction: column; min-width: 0; }
.cx-rt b { font-size: 15px; font-weight: 900; }
.cx-rt small { font-size: 11.5px; color: var(--mute); }
.cx-dots { display: flex; gap: 4px; }
.cx-dot { font-style: normal; font-size: 10.5px; font-weight: 900; min-width: 20px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; color: #141210; padding: 0 4px; }
.cx-dot.c-ORDER { background: var(--order); } .cx-dot.c-GHOST { background: var(--ghost); } .cx-dot.c-VIRUS { background: var(--virus); color: #F4F1EA; }
.cx-row em { font-style: normal; font-size: 12px; color: var(--mute); text-align: right; }
.cx-var { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.cx-vrow { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.cx-vb { padding: 4px 12px; font-size: 12px; font-weight: 900; background: #121216; border: 1px solid var(--line-2); border-radius: 3px; color: var(--mute); cursor: pointer; }
.cx-vb.on { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.cx-vb.c-ORDER.on { background: var(--order); border-color: var(--order); color: #141210; }
.cx-vb.c-GHOST.on { background: var(--ghost); border-color: var(--ghost); color: #141210; }
.cx-vb.c-VIRUS.on { background: var(--virus); border-color: var(--virus); color: #F4F1EA; }
.cx-body.cmd .cx-var { grid-column: 1 / -1; grid-row: 1; display: flex; flex-direction: column; align-self: start; gap: 6px; width: 100%; }
.cx-body.cmd .cx-vrow { width: 100%; gap: 6px; }
.cx-body.cmd .cx-vb { flex: 1; min-width: 0; }

/* ---------------- Deep Salvage ---------------- */
.gc { display: flex; flex-direction: column; gap: 14px; }
.gc-banner { position: relative; overflow: hidden; border: 1px solid #2C2C35; border-radius: 6px; padding: 26px 28px;
  background: radial-gradient(ellipse at 80% 120%, rgba(255,62,165,.18), transparent 60%), radial-gradient(ellipse at 10% -20%, rgba(63,199,232,.16), transparent 55%), #0B0B0F; }
.gc-grid { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(0deg, rgba(242,239,232,.05) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(242,239,232,.05) 0 1px, transparent 1px 22px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000); mask-image: linear-gradient(180deg, transparent, #000 40%, #000); }
.gc-scan { position: absolute; left: 0; right: 0; height: 40%; top: -40%; pointer-events: none; background: linear-gradient(transparent, rgba(63,199,232,.12), transparent); animation: gc-sweep 4s linear infinite; }
@keyframes gc-sweep { to { top: 100%; } }
.gc-banner.dive .gc-scan { animation: gc-sweep .7s linear 3; }
.gc-banner.dive[data-best="2"] { box-shadow: inset 0 0 0 1px #E5A50A, 0 0 40px -10px #E5A50A; }
.gc-banner.dive[data-best="3"] { box-shadow: inset 0 0 0 1px #FF3EA5, 0 0 50px -8px #FF3EA5; }
.gc-copy { position: relative; display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.gc-copy > small { color: #3FC7E8; letter-spacing: .2em; font-size: 11px; }
.gc-copy h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 38px; }
.gc-copy p { margin: 0; color: #CFCBC1; line-height: 1.7; }
.gc-rates { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.gc-rates span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border: 1px solid var(--rc); border-radius: 2px; color: var(--fg); }
.gc-rates b { color: var(--rc); }
.gc-rates em { font-style: normal; color: var(--mute); }
.gc-note { color: var(--mute); font-size: 11.5px; }
.gc-note b { color: #FF3EA5; }
.gc-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gc-sim { font-size: 10.5px; letter-spacing: .14em; color: var(--mute); border: 1px dashed var(--line-2); padding: 4px 8px; border-radius: 2px; margin-right: auto; }
.gc-chips { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; }
.gc-chips i { width: 12px; height: 12px; background: #3FC7E8; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.gc-chips b { font-size: 16px; }
.gc-chips small { color: var(--mute); font-size: 11px; }
.gc-mini { font-size: 12px; padding: 3px 9px; }
.gc-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 22px; background: var(--bg-2); border: 1px solid #3FC7E8; color: var(--fg); border-radius: 3px; cursor: pointer; }
.gc-btn small { color: #3FC7E8; font-size: 11px; }
.gc-btn.big { background: linear-gradient(135deg, #2A0F22, #12121A); border-color: #FF3EA5; box-shadow: 0 0 22px -8px #FF3EA5; }
.gc-btn.big small { color: #FF3EA5; }
.gc-btn:disabled { opacity: .4; cursor: not-allowed; }
.gc-out { min-height: 300px; border: 1px solid var(--line); border-radius: 6px; background: #0C0C10; padding: 22px 22px 28px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.gc-empty { margin: auto; color: var(--mute); letter-spacing: .14em; }
.gc-res { display: grid; grid-template-columns: repeat(5, auto); gap: 22px 14px; justify-content: center; }
.gc-res.n1 { grid-template-columns: auto; }
.gc-res.n1 .gc-card { --mm: 3.4px; }
/* each salvaged card drops in face down, then turns over; the rarity shows as a glow around it */
.gc-card { --mm: 2.2px; position: relative; perspective: 900px; width: calc(63 * var(--mm)); height: calc(88 * var(--mm));
  animation: gc-drop .4s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--d) - .3s - var(--age) * 1ms); }
@keyframes gc-drop { from { opacity: 0; transform: translateY(-30px) scale(.9); } }
.gc-turn { position: absolute; inset: 0; transform-style: preserve-3d; animation: gc-flip .6s cubic-bezier(.3,.1,.25,1) both; animation-delay: calc(var(--d) + .25s - var(--age) * 1ms); }
@keyframes gc-flip { 0% { transform: rotateY(0); } 100% { transform: rotateY(180deg); } }
.gc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: calc(3 * var(--mm)); }
.gc-front { transform: rotateY(180deg); }
.gc-card::after { content: ''; position: absolute; inset: -3px; border-radius: calc(3 * var(--mm) + 3px); pointer-events: none; opacity: 0;
  animation: gc-glow .5s ease-out both; animation-delay: calc(var(--d) + .6s - var(--age) * 1ms); }
@keyframes gc-glow { to { opacity: 1; } }
.gc-card.r-N::after { box-shadow: 0 0 0 1px rgba(169,165,156,.5); }
.gc-card.r-R::after { box-shadow: 0 0 0 2px var(--rc), 0 0 16px var(--rc); }
.gc-card.r-SR::after { box-shadow: 0 0 0 2px var(--rc), 0 0 26px var(--rc), 0 0 50px -10px var(--rc); }
.gc-card.r-UR::after { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rc), 0 0 36px var(--rc), 0 0 70px -6px var(--rc); }
.gc-tag, .gc-new { position: absolute; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .12em; padding: 1px 6px; border-radius: 2px; opacity: 0;
  animation: gc-glow .3s ease-out both; animation-delay: calc(var(--d) + .7s - var(--age) * 1ms); }
.gc-tag { left: 50%; bottom: -10px; transform: translateX(-50%); background: var(--rc); color: #0E0E11; }
.gc-new { right: -6px; top: -8px; background: #F4F1EA; color: #0E0E11; }
.gc-after { display: flex; gap: 8px; }
@media (max-width: 900px) {
  .cx-body { grid-template-columns: minmax(0, 1fr); }
  .cx-right { position: static; width: 100%; height: min(680px, max(460px, calc(100vh - 100px))); min-height: 460px; }
  .cx-hrow { gap: 4px; }
  .cx-hex-in small { display: none; }
  .gc-res { grid-template-columns: repeat(auto-fill, calc(63 * 2.2px)); }
}
@media (prefers-reduced-motion: reduce) { .cx-float, .gc-scan, .gc-card, .gc-turn, .gc-card::after, .gc-tag, .gc-new { animation-duration: .01s; } }

/* SAR: top tier (Live2D later) */
.cx-holder.r-SAR { filter: drop-shadow(0 0 18px rgba(246,231,176,.8)) drop-shadow(0 0 40px rgba(255,62,165,.35)) drop-shadow(0 22px 30px rgba(0,0,0,.6)); }
.gc-card.r-SAR::after { box-shadow: 0 0 0 2px #F6E7B0, 0 0 0 4px #141210, 0 0 0 5px #F6E7B0, 0 0 40px #F6E7B0, 0 0 80px -10px #FF3EA5; }
.gc-banner.dive[data-best="4"] { box-shadow: inset 0 0 0 1px #F6E7B0, 0 0 60px -6px #F6E7B0; }

/* ================= rarity coatings (R: cold neon scan · SR: gold leaf · UR: data stream · SAR: soul archive) =================
   Layers placed right after a role card in the same box; they never touch the card itself. */
.rp-face.rp-front, .zoomer .holder { position: relative; }
.zoomer .holder { width: max-content; }
.rcoat { position: absolute; inset: 0; border-radius: calc(3 * var(--mm)); pointer-events: none; z-index: 7; --mx: 50%; --my: 40%; }
.rcoat.rc-R.c1 { background: radial-gradient(circle at var(--mx) var(--my), rgba(63,199,232,.38), transparent 46%),
    repeating-linear-gradient(0deg, rgba(160,240,255,.06) 0 1px, transparent 1px 3px); mix-blend-mode: screen; }
.rcoat.rc-R.c2 { box-shadow: inset 0 0 0 1.5px #3FC7E8, inset 0 0 24px rgba(63,199,232,.45), 0 0 14px rgba(63,199,232,.45);
  background: linear-gradient(180deg, transparent, rgba(160,240,255,.45), transparent) 0 -30% / 100% 16% no-repeat; mix-blend-mode: screen;
  animation: rcoat-scan 2.6s linear infinite; }
@keyframes rcoat-scan { to { background-position: 0 130%; } }
.rcoat.rc-SR.c1 { background:
    radial-gradient(circle, rgba(255,222,120,1) 0 .7px, transparent 1.3px) 0 0 / 13px 11px,
    radial-gradient(circle, rgba(255,244,190,1) 0 .9px, transparent 1.6px) 5px 7px / 17px 19px,
    radial-gradient(circle, rgba(229,165,10,1) 0 1.1px, transparent 1.9px) 9px 3px / 23px 21px;
  mix-blend-mode: color-dodge;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, rgba(0,0,0,.35) 40%, rgba(0,0,0,.08) 70%);
  mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, rgba(0,0,0,.35) 40%, rgba(0,0,0,.08) 70%); }
.rcoat.rc-SR.c2 { background: linear-gradient(120deg, transparent 35%, rgba(255,196,80,.5) 50%, transparent 65%); background-size: 250% 250%;
  background-position: var(--mx) var(--my); mix-blend-mode: overlay;
  box-shadow: inset 0 0 0 2px #E5A50A, inset 0 0 0 4px #1A1206, inset 0 0 0 5px rgba(229,165,10,.7); }
.rcoat.rc-UR.c1 { background:
    linear-gradient(180deg, transparent, rgba(255,120,200,.75) 50%, transparent) 12% 0 / 2px 30% no-repeat,
    linear-gradient(180deg, transparent, rgba(120,230,255,.7) 50%, transparent) 34% 0 / 2px 22% no-repeat,
    linear-gradient(180deg, transparent, rgba(255,120,200,.7) 50%, transparent) 58% 0 / 2px 36% no-repeat,
    linear-gradient(180deg, transparent, rgba(120,230,255,.7) 50%, transparent) 81% 0 / 2px 26% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,62,165,.12) 7px 8px);
  mix-blend-mode: screen; animation: rcoat-rain 2.4s linear infinite; }
@keyframes rcoat-rain { from { background-position: 12% -40%, 34% -30%, 58% -50%, 81% -35%, 0 0; } to { background-position: 12% 160%, 34% 150%, 58% 170%, 81% 140%, 0 0; } }
.rcoat.rc-UR.c2 { background: linear-gradient(130deg, transparent 30%, rgba(62,200,255,.38) 45%, rgba(255,62,165,.38) 55%, transparent 70%);
  background-size: 250% 250%; background-position: var(--mx) var(--my); mix-blend-mode: color-dodge; }
.rcoat.rc-UR.c3 { box-shadow: inset 0 0 0 2px #FF3EA5, inset 0 0 22px rgba(255,62,165,.5); animation: rcoat-breathe 1.8s ease-in-out infinite; }
@keyframes rcoat-breathe { 50% { box-shadow: inset 0 0 0 2px #FF7CC4, inset 0 0 34px rgba(255,62,165,.75), 0 0 26px rgba(255,62,165,.6); } }
.rcoat.rc-SAR.c1 { background: radial-gradient(ellipse at 20% 30%, rgba(255,62,165,.45), transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(62,200,255,.4), transparent 50%),
    radial-gradient(ellipse at 60% 20%, rgba(246,231,176,.45), transparent 45%);
  background-size: 200% 200%; mix-blend-mode: soft-light; animation: rcoat-aurora 7s ease-in-out infinite alternate; }
@keyframes rcoat-aurora { from { background-position: 0% 0%, 100% 100%, 50% 0%; } to { background-position: 100% 60%, 0% 30%, 20% 100%; } }
.rcoat.rc-SAR.c2 { background: linear-gradient(115deg, #ff3e9e, #ffd23e, #3effc8, #3ea0ff, #b03eff, #ff3e9e); background-size: 300% 300%;
  background-position: var(--mx) var(--my); mix-blend-mode: color-dodge; opacity: .26;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000, transparent 60%); mask-image: radial-gradient(circle at var(--mx) var(--my), #000, transparent 60%); }
.rcoat.rc-SAR.c3 { background: radial-gradient(circle, rgba(255,240,190,1) 0 .5px, transparent 1.1px) 0 0 / 9px 8px,
    radial-gradient(circle, rgba(255,255,255,1) 0 .6px, transparent 1.2px) 4px 5px / 13px 11px; mix-blend-mode: color-dodge; opacity: .45;
  -webkit-mask-image: linear-gradient(180deg, #000 0 45%, rgba(0,0,0,.15) 60%); mask-image: linear-gradient(180deg, #000 0 45%, rgba(0,0,0,.15) 60%); }
.rcoat.rc-SAR.c4 { overflow: hidden; }
.rcoat.rc-SAR.c4 b { position: absolute; bottom: -6px; width: 3px; height: 3px; border-radius: 50%; background: #F6E7B0; box-shadow: 0 0 6px #F6E7B0; animation: rcoat-mote 4s linear infinite; }
@keyframes rcoat-mote { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(calc(-88 * var(--mm))); opacity: 0; } }
/* the archive frame: a gold double frame just outside the card, with a plate */
.rcoat.rc-SAR.frame { inset: calc(-1.6 * var(--mm)); border-radius: calc(4.2 * var(--mm)); z-index: 8;
  box-shadow: 0 0 0 1.5px #F6E7B0, inset 0 0 0 calc(.9 * var(--mm)) #8C6A1E, inset 0 0 0 calc(1.2 * var(--mm)) #F6E7B0, 0 0 26px rgba(246,231,176,.45), 0 0 60px -14px #FF3EA5; }
.rcoat.rc-SAR.frame span { position: absolute; left: 50%; bottom: calc(-1.3 * var(--mm)); transform: translateX(-50%); font-size: max(8px, calc(2.6 * var(--mm)));
  letter-spacing: .24em; color: #141210; background: #F6E7B0; padding: 0 calc(1.6 * var(--mm)); border-radius: 2px; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .rcoat, .rcoat b { animation: none !important; } }

/* everyone sees which version a player uses: the seat emblem and your operator slot get the rarity's rim */
.s-emb.sk-R { box-shadow: 0 0 0 1.5px #3FC7E8, 0 0 10px rgba(63,199,232,.6); }
.s-emb.sk-SR { box-shadow: 0 0 0 1.5px #E5A50A, 0 0 12px rgba(229,165,10,.65); }
.s-emb.sk-UR { box-shadow: 0 0 0 1.5px #FF3EA5, 0 0 14px rgba(255,62,165,.7); animation: rcoat-emb 1.8s ease-in-out infinite; }
.s-emb.sk-SAR { box-shadow: 0 0 0 1.5px #F6E7B0, 0 0 0 3px #8C6A1E, 0 0 16px rgba(246,231,176,.75); }
@keyframes rcoat-emb { 50% { box-shadow: 0 0 0 1.5px #FF7CC4, 0 0 20px rgba(255,62,165,.85); } }
.role-panel.sk-R:not(.skill-ready) { box-shadow: inset 0 0 0 1.5px rgba(63,199,232,.8), 0 0 14px -4px #3FC7E8; }
.role-panel.sk-SR:not(.skill-ready) { box-shadow: inset 0 0 0 1.5px rgba(229,165,10,.85), 0 0 16px -4px #E5A50A; }
.role-panel.sk-UR:not(.skill-ready) { box-shadow: inset 0 0 0 1.5px rgba(255,62,165,.85), 0 0 18px -4px #FF3EA5; }
.role-panel.sk-SAR:not(.skill-ready) { box-shadow: inset 0 0 0 1.5px #F6E7B0, inset 0 0 0 3px rgba(140,106,30,.8), 0 0 22px -4px #F6E7B0; }
/* the Codex: the version you play with */
.cx-rtab { position: relative; }
.cx-eq { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 9px; letter-spacing: .08em; background: var(--rc); color: #0E0E11; padding: 0 5px; border-radius: 2px; white-space: nowrap; }
.cx-use { font-size: 12px; padding: 5px 12px; }
.cx-use.on { color: var(--hi); border: 1px solid var(--hi); border-radius: 3px; }

/* Phone play is designed for landscape: keep the table, action prompt, and hand
   visible together, with the log available as a compact side panel. */
#rotate-screen { display: none; }
@media (max-width: 700px) and (orientation: portrait) {
  body { overflow: hidden; }
  #rotate-screen { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
    padding: 24px; background: rgba(8,9,12,.97); }
  .rotate-card { width: min(100%, 360px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
    padding: 28px 22px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); box-shadow: 0 20px 70px #000; }
  .rotate-icon { font-size: 54px; line-height: 1; color: var(--hi); }
  .rotate-card b { font-size: 19px; }
  .rotate-card small { color: var(--mute); line-height: 1.6; }
  .rotate-card button { min-height: 46px; width: 100%; }
}
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  #help-dock:not(.in-bar) { z-index: 46; }
  html, body { height: 100%; min-height: 100%; overflow: hidden; overscroll-behavior: none; }
  #app { height: 100vh; height: 100svh; height: 100dvh; display: flex; flex-direction: column; }
  #app > .topbar { position: static; height: auto; min-height: 54px; max-height: 60px; flex-wrap: wrap; align-content: center; overflow: hidden; justify-content: flex-start;
    padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 2px max(8px, env(safe-area-inset-left)); gap: 2px 4px; }
  #app > .topbar button, #app > .topbar select { padding: 3px 6px; font-size: 11px; }
  #app > .topbar .stat { max-width: 132px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; }
  #app > .topbar #tb-round { max-width: 58px; }
  #app > .topbar #tb-deck { max-width: 132px; }
  #app > .topbar #tb-phase { max-width: 118px; }
  .table { flex: 1; height: auto; min-height: 0; overflow: hidden;
    padding: 4px max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); gap: 5px;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(68px, 23dvh) minmax(0, 1fr) auto; }
  .seats { grid-column: 1; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; min-height: 0 !important; height: auto !important; overflow: hidden; }
  .seat { padding: 3px 4px; gap: 2px; }
  .seat .s-head { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 3px; }
  .seat .s-emb { width: 22px; height: 22px; }
  .seat .s-emb svg { width: 16px; height: 16px; }
  .seat .s-rolename { display: block !important; max-width: 100%; font-size: 8px; line-height: 1.1; }
  .seat .s-cards { display: flex !important; width: auto; height: 10px; }
  .seat .s-cards i { width: 6px; height: 9px; margin-left: -4px; }
  .seat .s-hand small, .seat .s-nameline .tag { display: none !important; }
  .seat .s-hand { position: static; }
  .seat .s-hand b { font-size: 13px; }
  .seat .s-tags { min-height: 12px; gap: 2px; }
  .seat .s-tags .tag { font-size: 8px; padding: 0 3px; }
  .seat .meter { gap: 1px; }
  .seat .meter .mt { padding: 0; gap: 1px; }
  .seat .meter .mt b { width: 12px; height: 12px; font-size: 9px; }
  .seat .meter .mt .seg { display: inline-flex !important; }
  .seat .meter .mt em { font-size: 9px; }
  .seat .meter .mt .seg i { width: 3px; }
  .seat .s-field { display: flex !important; max-height: 15px; min-height: 0; overflow: hidden; gap: 2px; }
  .seat .s-field .chip { height: 13px; padding: 0 3px; font-size: 8px; }
  .seat .s-field .chip .k { font-size: 8px; }
  .mid { grid-column: 1; min-height: 0; display: grid !important; grid-template-columns: 86px minmax(0, 1fr) minmax(118px, 18vw); gap: 5px; }
  .channel { width: auto !important; max-width: none !important; padding: 3px; gap: 1px; --mm: .82px !important; }
  .channel .ch-head { display: flex !important; font-size: 9px; }
  .channel .ch-card { min-height: 42px; }
  .channel .ch-info, .channel .ch-track { font-size: 9px; line-height: 1.15; }
  .channel .ch-status { font-size: 8px; line-height: 1.1; text-align: center; }
  .channel .ch-track .tn { padding: 1px 3px; font-size: 0; }
  .channel .ch-track .tn::after { content: attr(data-seat); font-size: 8px; }
  .midcol { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 4px; }
  .phasebar { min-height: 0; max-height: 52px; overflow: hidden; }
  .ticker { min-height: 0; max-height: 24px; overflow: hidden; }
  .prompt { min-height: 0; overflow: hidden; padding: 5px 7px; gap: 4px; }
  .prompt .pr-phase { font-size: 9px; }
  .prompt .pr-text { font-size: 12px; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .prompt .pr-btns { min-height: 0; align-content: start; gap: 4px; }
  .prompt .pr-btns button { flex: 1 1 calc(33.333% - 4px); min-width: 96px; justify-content: center; white-space: normal; font-size: 11px; }
  .prompt button { min-height: 40px; padding: 5px 8px; touch-action: manipulation; }
  .log { grid-column: auto; grid-row: auto; position: relative; top: auto; min-height: 0; max-height: none; overflow: hidden; }
  .log h3 { padding: 4px 6px; }
  .log .log-modes { display: none; }
  .log ol { font-size: 10px; }
  .mine { display: grid !important; grid-template-columns: minmax(220px, 35vw) minmax(0, 1fr) !important; grid-column: 1; min-height: 0; height: 88px; padding: 3px !important; gap: 5px; align-items: stretch; }
  #mine .dossier { display: grid !important; grid-template-columns: 82px minmax(132px, 1fr); min-width: 0; height: 80px; gap: 4px; }
  #mine .m-info { display: none !important; }
  #mine .id-panel { min-width: 0; padding: 3px 4px; gap: 1px; }
  #mine .dp-top .mono { font-size: 7px; letter-spacing: .05em; }
  #mine .dp-kanji { width: 22px; height: 22px; margin: 0; border-width: 1px; font-size: 16px; }
  #mine .dp-name { font-family: var(--f-mono); font-size: 9px; }
  #mine .dp-goal { font-size: 6.5px; line-height: 1.1; padding-top: 1px; }
  #mine .role-panel { min-width: 0; padding: 3px 4px 3px 7px; gap: 2px; }
  #mine .rp-top .mono { font-size: 7px; letter-spacing: .06em; }
  #mine .rp-timing { font-size: 7px; padding: 0 3px; }
  #mine .rp-id { gap: 3px; }
  #mine .rp-id svg { width: 18px; height: 18px; }
  #mine .rp-id b { font-size: 10px; }
  #mine .rp-id small { font-size: 7px; }
  #mine .rp-skill { padding: 2px 3px; min-height: 0; overflow: hidden; }
  #mine .rp-skill > b { font-size: 8px; padding-bottom: 1px; margin-bottom: 1px; }
  #mine .rp-rows { gap: 0; padding: 0; }
  #mine .rp-rows .sk-txt, #mine .rp-skill p { font-size: 7px; line-height: 1.15; }
  #mine .rp-go, #mine .rp-used { font-size: 7px; padding: 1px 3px; }
  #mine .hand { position: static; min-width: 0; min-height: 0; height: 80px; max-height: none; overflow: hidden; align-items: center; padding: 2px 5px; gap: 4px; background: var(--bg-2);
    border: 1px solid var(--line); border-radius: 4px; box-shadow: none; justify-content: center; --mm: .88px !important; }
  #mine .hand > .cn { flex: none; }
  #mine .hand .cn.chosen { transform: translateY(-2px); }
  body.log-closed .mid { grid-template-columns: 86px minmax(0, 1fr) 30px; }
  .overlay { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .overlay .box, .rp-box, .pk-win { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px); overflow-y: auto; }
  input, select { font-size: 16px; }

  /* Home and setup screens use the same landscape-first mobile frame. */
  .setup2 { height: 100vh; height: 100svh; height: 100dvh; min-height: 0; overflow: hidden; }
  .home { height: 100%; min-height: 0; max-width: none; grid-template-columns: minmax(0, 1fr) minmax(150px, .42fr); grid-template-rows: minmax(0, 1fr) auto;
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); gap: 4px; }
  .hm-left { min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
  .hm-logo h1 { font-size: clamp(34px, 6vw, 52px); margin: 3px 0 4px; }
  .hm-logo p { font-size: 10px; }
  .hm-logo small { font-size: 8px; letter-spacing: .1em; }
  .hm-menu { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 4px; }
  .hm-menu > .hm-group:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .hm-menu > .hm-label { grid-column: 1 / -1; margin: 1px 0 0; font-size: 8px; }
  .hm-menu > .hm-group:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .hm-menu .hm-item, .hm-menu .hm-item.big, .hm-menu .hm-item.small { min-width: 0; min-height: 42px; padding: 4px 6px; gap: 5px; }
  .hm-menu .hm-item .hm-ic { width: 22px; height: 22px; font-size: 11px; }
  .hm-menu .hm-item .hm-tx b, .hm-menu .hm-item.big .hm-tx b { font-size: 11px; }
  .hm-menu .hm-item .hm-tx small, .hm-menu .hm-go { display: none; }
  .hm-menu .hm-group.hm-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; }
  .hm-menu .hm-group.hm-row .hm-item { flex-direction: row; }
  .hm-menu .hm-group.hm-row .hm-tx { align-items: flex-start; }
  .hm-menu .hm-group.hm-row .hm-tx b { font-size: 9px; }
  .hm-right { display: flex !important; min-height: 0; flex-direction: column; justify-content: center; gap: 3px; }
  .hm-right .hm-fan { flex: 1; min-height: 110px; width: 100%; height: auto; --mm: min(.9px, calc((100dvh - 120px) / 88), calc((42vw - 30px) / 63)); }
  .hm-tips { flex: none; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 4px; }
  .hm-tips .ht-tx { min-height: 2.4em; font-size: 9px; line-height: 1.25; }
  .hm-tips .ht-lbl { font-size: 8px; }
  .hm-tips .ht-arrow { width: 24px; height: 24px; font-size: 17px; }
  .hm-tips .ht-dots { display: none; }
  .hm-foot { min-height: 24px; padding-top: 4px; font-size: 9px; }

  .pg { height: 100%; min-height: 0; max-width: 980px; overflow: hidden; padding: max(7px, env(safe-area-inset-top)) 14px max(8px, env(safe-area-inset-bottom)); gap: 7px; }
  .pg-head { flex-direction: row; align-items: center; gap: 12px; margin: 0; }
  .pg-head h2 { font-size: 22px; white-space: nowrap; }
  .pg-head p { margin: 0; font-size: 11px; }
  .pg-back.nav-back { position: static; flex: none; height: 34px; padding: 5px 8px; }
  .pg .panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; align-content: start; padding: 8px 10px; }
  .pg .panel h2 { margin-bottom: 5px; }
  .page-local .pg .panel, .page-settings .pg .panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
  .pg .row { grid-template-columns: minmax(72px, .7fr) minmax(0, 1.3fr); gap: 5px; padding: 4px 0; }
  .pg .row > label { font-size: 11px; }
  .pg .seg { gap: 3px; }
  .pg .seg button { min-height: 38px; padding: 4px 8px; font-size: 11px; }
  .pg .start-row { grid-column: 1 / -1; margin-top: 5px; }
  .page-local .pg .panel { padding-bottom: 70px; }
  .page-local .pg .panel > .start-row { position: fixed; left: max(14px, calc((100vw - 980px) / 2 + 14px)); right: max(14px, calc((100vw - 980px) / 2 + 14px)); bottom: max(6px, env(safe-area-inset-bottom)); z-index: 55;
    justify-content: center; margin: 0; padding: 7px 12px max(7px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(22,22,27,.92), var(--bg-2));
    border: 1px solid var(--line-2); border-radius: 6px 6px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.45); }
  .pg .pg-adv, .pg .pg-dev, .pg .sim-note { grid-column: 1 / -1; }
  .pg .start-row .primary.big { min-height: 40px; padding: 7px 18px; }
  .page-online .pg .panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; }
  .page-online .net-sec { min-width: 0; padding: 4px 0; }
  .page-online .sim-note { font-size: 10px; line-height: 1.3; }
  .page-online .start-row { flex-wrap: wrap; }
  .pg.pg-wide { overflow: hidden; }
  .pg.pg-wide #cx-root { min-height: 0; overflow: auto; }
  .setup { height: 100%; max-height: 100%; overflow: hidden; padding: max(8px, env(safe-area-inset-top)) 14px max(8px, env(safe-area-inset-bottom)); gap: 8px; }
  .setup > div { min-width: 0; height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto minmax(0, 1fr); align-content: start; gap: 6px 10px; }
  .setup > div > h1 { grid-column: 1; grid-row: 1; }
  .setup > div > .lead { grid-column: 2; grid-row: 1; align-self: center; }
  .setup > div > .panel:first-of-type { grid-column: 1; grid-row: 2 / 4; }
  .setup > div > .panel:nth-of-type(2) { grid-column: 2; grid-row: 2 / 4; }
  .setup.lobby-client > div > .panel { grid-column: 1 / -1; grid-row: 2 / 4; }
  .setup h1 { font-size: 24px; }
  .setup .lead { margin: 3px 0 7px; font-size: 11px; }
  .setup .panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; align-content: start; padding: 8px 10px; margin-top: 6px !important; }
  .setup .panel h2 { margin-bottom: 5px; }
  .setup .lobby-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 4px 0; }
  .setup .lobby-list li { padding: 4px 6px; font-size: 11px; }
  .setup .room-code { gap: 4px; margin: 4px 0 6px; }
  .setup .room-code span { width: clamp(32px, 6vw, 44px); height: 48px; font-size: 28px; }
  .setup .invite { word-break: break-all; font-size: 9px; padding: 4px 6px; }
  .setup .sim-note { font-size: 10px; line-height: 1.3; }
  .setup .row { grid-template-columns: 100px minmax(0, 1fr); padding: 4px 0; }
  .setup .start-row { margin-top: 6px; }
  .setup.lobby-host .panel:nth-of-type(2) .start-row { position: sticky; bottom: -8px; z-index: 5; margin: 4px -10px -8px; padding: 8px 10px max(8px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(22,22,27,.9), var(--bg-2) 24%); border-top: 1px solid var(--line-2); }
  .setup .primary, .setup .nav-back { min-height: 40px; }

  /* Assignment screens are kept inside the visible safe area. */
  .rp-overlay { padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); }
  .rp-box { width: min(100%, 760px); max-height: 100%; overflow: hidden; padding: 6px 10px; gap: 5px;
    --mm: min(2.05px, calc((100dvh - 165px) / 88), calc((100vw - 80px) / 126)) !important; }
  .rp-title { min-height: 24px; flex-wrap: nowrap; gap: 6px; }
  .rp-title b { font-size: 16px; }
  .rp-title span { font-size: 10px; }
  .rp-sub { font-size: 11px; line-height: 1.2; margin: 0; }
  .rp-cards { flex: 1 1 auto; min-height: 0; flex-wrap: nowrap !important; gap: clamp(8px, 3vw, 22px) !important; align-items: center; }
  .rp-card { flex: none; }
  .rp-actions { min-height: 40px; gap: 6px; }
  .rp-actions button { min-height: 40px; padding: 6px 14px !important; font-size: 12px !important; }
  .rp-box .pr-timer { flex: none; height: 16px; }
  .rp-wait .rp-cards { max-height: min(56dvh, 190px); }
  .rp-wait .rp-card { --mm: min(2px, calc((100dvh - 145px) / 88)) !important; }

  .idr { padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .idr .idr-main { width: 100%; max-width: 900px; max-height: 100%; overflow: hidden; padding: 4px; gap: 3px;
    display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto auto auto auto auto auto auto; align-content: center; justify-items: center; }
  .idr-kicker { grid-column: 1 / -1; grid-row: 1; font-size: 9px; letter-spacing: .18em; }
  .idr .idr-sealwrap { grid-column: 1; grid-row: 2 / 5; width: 66px; height: 66px; align-self: center; }
  .idr .idr-seal { width: 66px; height: 66px; border-radius: 8px; font-size: 42px; }
  .idr .idr-reel span { height: 66px; }
  .idr .idr-main h1 { grid-column: 2; grid-row: 2; align-self: end; margin: 0; font-size: clamp(26px, 5vw, 40px); }
  .idr-org { grid-column: 2; grid-row: 3; font-size: 8px; letter-spacing: .18em; }
  .idr-goal { grid-column: 2; grid-row: 4; margin: 0; max-width: none; font-size: 10px; line-height: 1.25; }
  .idr-line { grid-column: 1 / -1; grid-row: 5; width: 100%; gap: 3px; margin: 2px 0; flex-wrap: nowrap; justify-content: space-around; }
  .idr-p { min-width: 0; gap: 1px; }
  .idr-sil { width: 28px; height: 32px; }
  .idr-sil i { font-size: 11px; }
  .idr-p b { max-width: 76px; font-size: 8px; }
  .idr-roster { grid-column: 1 / -1; grid-row: 6; gap: 3px; flex-wrap: nowrap; }
  .idr-roster small { font-size: 8px; margin-right: 1px; }
  .idr-chip { padding: 2px 5px; font-size: 8px; }
  .idr-note { grid-column: 1 / -1; grid-row: 7; max-width: none; margin: 0; font-size: 9px; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .idr-next { grid-column: 1 / -1; grid-row: 8; margin: 1px 0 0; gap: 3px; }
  .idr-next span { font-size: 9px; }
  .idr-next i { width: min(220px, 60vw); height: 3px; }
  @keyframes idr-spin {
    0% { transform: translateY(0); filter: blur(0); }
    12% { filter: blur(2px); }
    70% { filter: blur(.6px); }
    92% { transform: translateY(calc((var(--n) - 1) * -66px - 6px)); filter: blur(0); }
    100% { transform: translateY(calc((var(--n) - 1) * -66px)); }
  }
  @media (prefers-reduced-motion: reduce) { .idr-reel { transform: translateY(calc((var(--n) - 1) * -66px)); } }

  .pw-bg { padding: max(4px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)); }
  .pw { width: 100%; max-width: 920px; max-height: 100%; overflow: hidden; padding: 6px 8px; gap: 4px; }
  .pw-phase { font-size: 9px; }
  .pw-text { font-size: 12px; line-height: 1.25; }
  .pw-sub { font-size: 10px; }
  .pw-cards { flex-wrap: nowrap; min-height: 0; overflow: hidden; gap: 5px; padding: 2px; --mm: min(1.65px, calc((100dvh - 130px) / 88), calc((100vw - 90px) / 252)); }
  .pw-card { flex: none; }
  .pw-foot, .pw-foot > div { flex-wrap: nowrap; gap: 4px; }
  .pw-foot button { min-height: 40px; padding: 5px 8px; font-size: 11px; }
  .pw .pr-timer { flex: none; height: 14px; }
  .overlay { padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  .overlay .box, .rp-box, .pk-win { max-height: 100%; }
}
@media (max-width: 700px) and (orientation: landscape) and (max-height: 430px) {
  .seats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .seat .meter .mt .seg { display: inline-flex !important; }
  .log ol { line-height: 1.3; }
}

/* Landscape layouts for every non-home, non-table screen. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .page-online .pg, .page-settings .pg { min-height: 0; }
  .page-online .pg .panel, .page-settings .pg > .panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .page-online .net-sec { min-width: 0; }
  .page-online .code-in { width: min(130px, 34vw); }
  .page-online .pg .panel button, .page-settings .pg button { min-height: 40px; touch-action: manipulation; }
  .page-settings .pg { overflow-y: auto; }
  .page-settings .pg-dev { flex: none; }

  .page-codex .pg, .page-gacha .pg { width: 100%; max-width: none; }
  .page-codex .pg #cx-root, .page-gacha .pg #cx-root { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .page-codex .cx { height: 100%; min-height: 0; gap: 6px; }
  .page-codex .cx-bar { flex: none; flex-wrap: nowrap; gap: 6px; }
  .page-codex .cx-tabs { flex: none; }
  .page-codex .cx-tabs button { min-height: 40px; padding: 5px 9px; font-size: 11px; }
  .page-codex .cx-prog { gap: 4px; font-size: 9px; }
  .page-codex .cx-bar-in { width: 64px; }
  .page-codex .cx-body { flex: 1; min-height: 0; overflow: hidden; grid-template-columns: minmax(0, 1fr) minmax(210px, 37vw); grid-template-rows: minmax(0, 1fr); gap: 6px; }
  .page-codex .cx-left { min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .page-codex .cx-right { position: static; min-height: 0; max-height: 100%; overflow: auto; padding: 7px; gap: 5px; }
  .page-codex .cx-board { --hw: min(54px, calc((100cqw - 24px) / 4.5)); --hh: calc(var(--hw) * 1.1547); padding: 4px 0 8px; }
  .page-codex .cx-hrow { gap: 4px; }
  .page-codex .cx-hrow + .cx-hrow { margin-top: calc(var(--hh) * -.25 + 5px); }
  .page-codex .cx-hex-in { gap: 1px; }
  .page-codex .cx-hex-in small { display: none; }
  .page-codex .cx-hex-in b { font-size: 8px; }
  .page-codex .cx-pips { gap: 1px; }
  .page-codex .cx-pips i { width: 6px; height: 2px; }
  .page-codex .cx-rtabs { gap: 2px; }
  .page-codex .cx-rtab { min-height: 38px; padding: 3px 1px; }
  .page-codex .cx-rtab b { font-size: 10px; }
  .page-codex .cx-rtab span, .page-codex .cx-rtab em { font-size: 7px; }
  .page-codex .cx-stage { padding: 3px 0; gap: 3px; }
  .page-codex .cx-holder { --mm: min(1.45px, calc((100dvh - 155px) / 88), calc((37vw - 35px) / 63)) !important; }
  .page-codex .cx-name { gap: 4px; }
  .page-codex .cx-name b { font-size: 14px; }
  .page-codex .cx-name small, .page-codex .cx-name span, .page-codex .cx-skill { font-size: 9px; }
  .page-codex .cx-info h4 { margin: 2px 0 0; font-size: 8px; }
  .page-codex .cx-lore { font-size: 10px; line-height: 1.35; }
  .page-codex .cx-row { grid-template-columns: 26px minmax(0, 1fr) auto 24px; min-height: 40px; padding: 4px; gap: 5px; }
  .page-codex .cx-pic { width: 22px; height: 22px; }
  .page-codex .cx-rt b { font-size: 11px; }
  .page-codex .cx-rt small, .page-codex .cx-row em { font-size: 8px; }
  .page-codex .cx-dots { gap: 1px; }
  .page-codex .cx-dot { min-width: 15px; height: 14px; font-size: 8px; padding: 0 2px; }
  .page-codex .cx-var { gap: 3px; }
  .page-codex .cx-vb { min-height: 36px; padding: 3px 8px; font-size: 10px; }

  .page-gacha .gc { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr); grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }
  .page-gacha .gc-banner { min-height: 0; padding: 8px 10px; grid-column: 1; grid-row: 1; }
  .page-gacha .gc-copy { max-width: none; gap: 4px; }
  .page-gacha .gc-copy > small { font-size: 8px; letter-spacing: .1em; }
  .page-gacha .gc-copy h3 { font-size: 22px; }
  .page-gacha .gc-copy p { font-size: 9px; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .page-gacha .gc-rates { gap: 3px; margin-top: 0; }
  .page-gacha .gc-rates span { gap: 3px; padding: 2px 4px; font-size: 8px; }
  .page-gacha .gc-note { font-size: 8px; line-height: 1.2; }
  .page-gacha .gc-ctl { grid-column: 1; grid-row: 2; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; align-items: center; }
  .page-gacha .gc-sim { grid-column: 1 / -1; margin: 0; padding: 2px 5px; font-size: 8px; }
  .page-gacha .gc-chips { min-width: 0; gap: 3px; padding: 3px 4px; }
  .page-gacha .gc-chips small { font-size: 8px; }
  .page-gacha .gc-chips b { font-size: 12px; }
  .page-gacha .gc-mini { min-height: 36px; padding: 3px 5px; font-size: 9px; }
  .page-gacha .gc-btn { min-width: 70px; min-height: 42px; padding: 4px 7px; font-size: 10px; }
  .page-gacha .gc-btn small { font-size: 8px; }
  .page-gacha .gc-out { grid-column: 2; grid-row: 1 / 3; min-height: 0; overflow: auto; padding: 8px; gap: 6px; }
  .page-gacha .gc-res { width: 100%; grid-template-columns: repeat(5, auto); justify-content: center; gap: 12px 5px; align-content: center; }
  .page-gacha .gc-res.n1 { grid-template-columns: auto; }
  .page-gacha .gc-card, .page-gacha .gc-res.n1 .gc-card { width: calc(63 * var(--mm)); height: calc(88 * var(--mm)); --mm: min(1.2px, calc((100dvh - 190px) / 176), calc((45vw - 44px) / 315)); }
  .page-gacha .gc-after { flex: none; }

  .guide-ov { align-items: center; padding: max(5px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  .guide { width: 100%; height: 100%; max-height: 100% !important; min-height: 0; }
  .guide .gd-tabs { flex: none; min-height: 40px; padding: 4px 8px; overflow-x: auto; align-items: center; }
  .guide .gd-tabs button { min-height: 34px; padding: 4px 8px; white-space: nowrap; }
  .guide .gd-body { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 10px 12px; }
  .guide section { padding: 7px 0 3px; }
  .guide h3 { margin: 5px 0; font-size: 13px; }
  .guide small, .guide .gd-list li { font-size: 10px; line-height: 1.35; }
  .guide .gd-goals, .guide .gd-ints, .guide .gd-cmds { gap: 4px; }
  .guide .gd-goal, .guide .gd-int, .guide .gd-cmd { padding: 5px; gap: 5px; }
  .guide .gd-goal p { font-size: 9px; line-height: 1.25; margin: 2px 0; }
  .guide .gd-idt { width: 24px; height: 32px; font-size: 15px; }
  .guide .gd-steps { gap: 3px; }
  .guide .gd-step { min-height: 42px; padding: 5px 4px 5px 26px; }
  .guide .gd-step i { left: 4px; top: 6px; width: 18px; height: 18px; font-size: 10px; }
  .guide .gd-step b { font-size: 10px; }
  .guide .gd-lane { grid-template-columns: 130px minmax(0, 1fr); gap: 5px; padding: 5px; margin-bottom: 4px; }
  .guide .gd-node { min-width: 40px; padding: 3px; }
  .guide .gd-node b, .guide .gd-fn b { font-size: 10px; }
  .guide .gd-tools { gap: 4px; padding: 5px; }
  .guide .gd-tool { width: 52px; font-size: 9px; }
  .guide .gd-pic { width: 24px; height: 24px; }
  .guide .gd-timings { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }

  .tut-ov { align-items: center; padding: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)); }
  .tut { width: 100%; height: 100%; max-height: 100% !important; min-height: 0; }
  .tut .gd-tabs { flex: none; min-height: 36px; padding: 3px 7px; }
  .tut-body { flex: 1; min-height: 0; overflow: hidden; grid-template-columns: minmax(0, 1fr) minmax(190px, 30vw); grid-template-rows: minmax(0, 1fr); }
  .tut-side { min-width: 0; max-height: none; overflow-y: auto; padding: 8px; gap: 5px; border-left: 1px solid var(--line); border-top: 0; }
  .tut-side h3 { font-size: 14px; }
  .tut-side p { min-height: 0; overflow-y: auto; font-size: 10px; line-height: 1.4; }
  .tut-nav { flex: none; flex-wrap: nowrap; gap: 4px; }
  .tut-nav button { min-height: 40px; padding: 5px 7px; font-size: 10px; }
  .tut-dots { flex: none; max-height: 32px; overflow: auto; }
  .tut-table, .tut-aside, .tut-story { min-width: 0; min-height: 0; overflow: auto; padding: 6px; }
  .tut-mid { grid-template-columns: minmax(0, .9fr) minmax(72px, .5fr) minmax(0, .9fr); gap: 4px; }
  .tut-me { flex-direction: row; gap: 4px; }
  .tut-me .tut-seat { flex: 0 1 130px; min-width: 0; }
  .tut-chan { --mm: .75px; min-height: 0; padding: 4px; }
  .tut-rcs { --mm: 1.3px; gap: 6px; margin-bottom: 5px; }
  .tut-atk { --mm: 1.3px; gap: 6px; margin: 3px 0; }
  .tut-hcs { --mm: .75px; gap: 3px; }
  .tut-story { padding: 8px; }
  .tut-story p { font-size: 10px; line-height: 1.35; margin-bottom: 5px; }
  .tut-story p:first-of-type { font-size: 14px; }
}

/* Gameplay: show the board first, keep controls legible, remove the history panel. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  #app > .topbar { height: 36px; min-height: 36px; max-height: 36px; flex-wrap: nowrap; align-content: center; justify-content: flex-start; gap: 4px; padding: 2px max(7px, env(safe-area-inset-right)) 2px max(7px, env(safe-area-inset-left)); }
  #app > .topbar .brand, #app > .topbar .sp, #app > .topbar #tb-coach, #app > .topbar #tb-god, #help-dock.in-bar { display: none !important; }
  #app > .topbar .stat { max-width: 112px; font-size: 9px; }
  #app > .topbar #tb-round { max-width: 48px; }
  #app > .topbar #tb-phase { max-width: 110px; }
  #app > .topbar #tb-deck { max-width: 122px; }
  #app > .topbar button, #app > .topbar select { flex: none; min-height: 30px; padding: 2px 6px; font-size: 10px; }

  .table { grid-template-rows: minmax(83px, max-content) minmax(0, 1fr) 82px; gap: 4px; padding: 3px max(6px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  .seats { grid-template-columns: repeat(var(--pcol, 3), minmax(0, 1fr)) !important; grid-auto-rows: 40px; align-content: start; gap: 3px; overflow: hidden; }
  .seat { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr);
    align-items: center; gap: 3px; overflow: hidden; padding: 2px 4px; }
  .seat .s-head { grid-column: 1; grid-row: 1; min-width: 0; display: grid; grid-template-columns: 21px minmax(0, 1fr) auto; gap: 3px; }
  .seat .s-emb { width: 20px; height: 20px; }
  .seat .s-emb svg { width: 15px; height: 15px; }
  .seat .s-nameline { gap: 2px; }
  .seat .s-no { font-size: 8px; }
  .seat .s-name { font-size: 10px; }
  .seat .s-rolename { display: block !important; max-width: 100%; margin-top: 0; font-size: 7px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .seat .s-nameline .tag, .seat .s-cards, .seat .s-hand small { display: none !important; }
  .seat .s-hand { position: static; display: flex; }
  .seat .s-hand b { font-size: 11px; }
  .seat .s-tags { grid-column: 2; grid-row: 1; min-height: 0; max-height: 20px; overflow: hidden; flex-wrap: nowrap; gap: 2px; }
  .seat .s-tags .tag { font-size: 7px; padding: 0 3px; }
  .seat .s-tags .guess-btn { font-size: 7px; padding: 0 3px; }
  .seat .meter { grid-column: 3; grid-row: 1; display: flex; width: auto; gap: 2px; }
  .seat .meter .mt { display: flex; gap: 1px; padding: 0; }
  .seat .meter .mt b { width: 11px; height: 11px; font-size: 8px; }
  .seat .meter .mt .seg { display: none !important; }
  .seat .meter .mt em { font-size: 8px; }
  .seat .s-field { display: flex !important; position: absolute; left: 4px; bottom: 1px; max-width: 42%; max-height: 12px; min-height: 0; overflow: hidden; gap: 2px; }
  .seat .s-field .chip { height: 11px; padding: 0 2px; font-size: 7px; }
  .seat .s-field .chip .k { width: 9px; font-size: 7px; }
  .seat .s-probed, .seat .s-deadid { display: none !important; }
  .seat > .pk-banner { top: -8px; padding: 0 4px; font-size: 8px; }
  .seat:has(.pk-banner) { padding-top: 3px; }
  .seat .act-banner { bottom: -8px; font-size: 8px; padding: 1px 4px; }

  .mid, body.log-closed .mid { grid-template-columns: 62px minmax(0, 1fr); gap: 4px; }
  .mid > .log { display: none !important; }
  .channel { padding: 2px; gap: 1px; --mm: .62px !important; }
  .channel .ch-head { font-size: 7px; }
  .channel .ch-head .ch-mode svg { width: 12px; height: 12px; }
  .channel .ch-card { min-height: 0; }
  .channel .ch-status { font-size: 7px; line-height: 1; }
  .channel .ch-track { gap: 1px; font-size: 7px; }
  .channel .ch-track .tn { padding: 0 2px; }
  .channel .ch-track .tn::after { font-size: 7px; }
  .midcol { grid-template-rows: auto minmax(0, 1fr); gap: 3px; }
  .phasebar { max-height: 34px; overflow: hidden; }
  .ticker { display: none !important; }
  .prompt { padding: 4px 6px; gap: 3px; }
  .prompt .pr-phase { display: none; }
  .prompt .pr-text { font-size: 11px; line-height: 1.2; -webkit-line-clamp: 1; }
  .prompt .pr-btns { gap: 3px; }
  .prompt .pr-btns button { flex: 0 1 auto; min-width: 74px; min-height: 38px; padding: 4px 7px; font-size: 10px; }
  .prompt .coach, .prompt .pr-sub { display: none !important; }

  .mine { height: 82px; grid-template-columns: 146px minmax(0, 1fr) !important; gap: 4px; padding: 2px !important; }
  #mine .dossier { height: 76px; grid-template-columns: 48px 94px; gap: 3px; }
  #mine .id-panel { align-items: center; justify-content: center; padding: 2px; }
  #mine .dp-top, #mine .dp-goal, #mine .dp-reborn { display: none !important; }
  #mine .dp-kanji { width: 22px; height: 22px; margin: 0; border-width: 1px; font-size: 15px; }
  #mine .dp-name { font-family: var(--f-mono); font-size: 8px; }
  #mine .role-panel { align-items: center; justify-content: center; padding: 2px 4px; gap: 2px; }
  #mine .rp-top, #mine .rp-skill, #mine .rp-go, #mine .rp-used { display: none !important; }
  #mine .rp-id { gap: 3px; }
  #mine .rp-id svg { width: 18px; height: 18px; }
  #mine .rp-id b { font-size: 9px; }
  #mine .rp-id small { display: none; }
  #mine .hand { height: 76px; --mm: .82px !important; justify-content: center; gap: 4px; padding: 1px 4px; }
  #mine .hand .cn.chosen { transform: translateY(-2px); }

  /* Faction reveal artwork remains centered on the physical screen. */
  .idr .idr-main { grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr); grid-template-rows: auto auto auto auto auto auto auto auto auto; }
  .idr-kicker { grid-column: 1 / -1; grid-row: 1; }
  .idr .idr-sealwrap { grid-column: 2; grid-row: 2; }
  .idr .idr-main h1 { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
  .idr-org { grid-column: 1 / -1; grid-row: 4; }
  .idr-goal { grid-column: 1 / -1; grid-row: 5; text-align: center; }
  .idr-line { grid-column: 1 / -1; grid-row: 6; }
  .idr-roster { grid-column: 1 / -1; grid-row: 7; }
  .idr-note { grid-column: 1 / -1; grid-row: 8; text-align: center; }
  .idr-next { grid-column: 1 / -1; grid-row: 9; }

  /* Keep the faction reveal clear of the mobile viewport edge and let its light breathe. */
  .idr { overflow: hidden; }
  .idr .idr-main { max-height: none; overflow: visible; padding: 10px 4px; gap: clamp(3px, 1dvh, 6px); animation: none; opacity: 1; transform: none; filter: none; }
  .idr .idr-main > :not(.idr-sealwrap):not(.idr-kicker) { opacity: 0; animation: idr-phone-fade .42s cubic-bezier(.22,.68,.24,1) 2.25s forwards; }
  .idr .idr-kicker { opacity: 0; animation: idr-phone-fade .36s ease-out .15s forwards; }
  .idr .idr-seal { animation: idr-phone-fill .42s ease-out 2s both, idr-phone-lock .38s cubic-bezier(.22,.68,.24,1) 2s both, idr-phone-seal-glow 2.8s ease-in-out 2.5s infinite; }
  .idr-wave { border-width: 2px; animation: idr-phone-wave .95s cubic-bezier(.22,.65,.25,1) 2s both; }
  .idr-wave.w2 { animation-duration: 1.15s; animation-delay: 2.12s; }
  .idr-burst, .idr-flash { display: none; }
  .idr::after { animation: idr-phone-glow 1.35s cubic-bezier(.2,.65,.25,1) 2s forwards; }
  .idr h1 { text-shadow: 0 0 24px color-mix(in srgb, var(--ic) 42%, transparent); }
  @keyframes idr-phone-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes idr-phone-fill {
    from { background: #1C1C22; color: #ECE8DF; box-shadow: 0 0 0 4px #050507, 0 0 0 7px #6E6B64, 0 0 24px rgba(236,232,223,.12); }
    to { background: var(--ic); color: #111; box-shadow: 0 0 0 4px #050507, 0 0 0 7px var(--ic), 0 0 46px color-mix(in srgb, var(--ic) 42%, transparent); }
  }
  @keyframes idr-phone-lock { 0%, 100% { transform: none; } 38% { transform: scale(1.045); } 72% { transform: scale(.99); } }
  @keyframes idr-phone-seal-glow { 50% { box-shadow: 0 0 0 4px #050507, 0 0 0 7px var(--ic), 0 0 58px color-mix(in srgb, var(--ic) 48%, transparent); } }
  @keyframes idr-phone-wave { from { transform: scale(.92); opacity: .42; } to { transform: scale(2.8); opacity: 0; } }
  @keyframes idr-phone-glow { 0% { opacity: 0; transform: scale(.84); } 68% { opacity: .4; transform: scale(1.02); } 100% { opacity: .32; transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) {
    .idr::after, .idr .idr-main, .idr .idr-main > *, .idr .idr-kicker, .idr-p, .idr .idr-seal, .idr-wave { animation: none !important; opacity: 1; transform: none; filter: none; }
    .idr-burst, .idr-flash, .idr-scan { display: none !important; }
  }

  /* Victory: every player's result card and the next action fit without scrolling. */
  .result { height: 100%; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; gap: 5px;
    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .rs-top { gap: 3px; }
  .rs-band { padding: 3px 18px 4px; }
  .rs-kicker { font-size: 8px; letter-spacing: .12em; }
  .rs-title { font-size: clamp(19px, 4vw, 30px); }
  .rs-me { font-size: clamp(16px, 3vw, 23px); letter-spacing: .16em; padding-left: .16em; }
  .rs-finale { max-width: 96vw; padding: 2px 6px; font-size: 9px; line-height: 1.2; }
  .rs-row { width: 100%; min-width: 0; min-height: 0; max-width: none; flex-wrap: nowrap; align-items: center; gap: 3px; overflow: hidden; }
  .rs-p { width: calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 56px) / 7); min-width: 0; gap: 2px; }
  .rs-row:not(:has(.rs-p:nth-child(5))) .rs-p { width: calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px) / 4); }
  .rs-row:has(.rs-p:nth-child(5)):not(:has(.rs-p:nth-child(6))) .rs-p { width: calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 32px) / 5); }
  .rs-row:has(.rs-p:nth-child(6)):not(:has(.rs-p:nth-child(7))) .rs-p { width: calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 40px) / 6); }
  .rs-flip { width: min(68px, 80%); height: auto; aspect-ratio: 112 / 150; }
  .rs-kanji { width: 30px; height: 30px; border-width: 2px; font-size: 21px; }
  .rs-id { font-size: 9px; }
  .rs-id small { font-size: 7px; }
  .rs-name { max-width: 100%; font-size: 8px; gap: 2px; white-space: nowrap; }
  .rs-name span { font-size: 7px; }
  .rs-role { gap: 3px; font-size: 10px; white-space: nowrap; }
  .rs-role, .rs-name { overflow: hidden; text-overflow: ellipsis; }
  .rs-role svg { width: 15px; height: 15px; }
  .rs-meter { gap: 2px; font-size: 7px; }
  .rs-crown { top: -6px; font-size: 8px; padding: 1px 4px; }
  .rs-dead { top: 35px; font-size: 8px; padding: 1px 3px; }
  .rs-actions { justify-self: center; }
  .rs-actions button { min-height: 40px; padding: 5px 10px; font-size: 10px; }
}

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) and (max-height: 360px) {
  #app > .topbar { height: 32px; min-height: 32px; max-height: 32px; }
  .table { grid-template-rows: minmax(66px, 21dvh) minmax(0, 1fr) 72px; }
  .mine { height: 72px; }
  #mine .dossier, #mine .hand { height: 66px; }
  #mine .hand { --mm: .72px !important; }
  .phasebar { max-height: 28px; }
}

/* Compact landscape play: the packet and action area stay on the left, the full turn order on the right. */
.tb-log { display: none; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  #app > .topbar .tb-log { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 28px; padding: 2px 5px; border-color: var(--line-2); border-radius: 3px; font: 800 9px var(--f-mono); letter-spacing: .08em; }
  #app > .topbar .tb-log.on { color: var(--hi); border-color: var(--hi); background: rgba(229,165,10,.1); }

  .table, body.fit .table, body.log-closed:not(.fit) .table, body.fit.log-closed .table { grid-template-columns: minmax(0, 1fr) minmax(142px, 25vw); grid-template-rows: minmax(0, 1fr) 88px; gap: 4px;
    padding: 3px max(6px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  .seats, body.fit .seats { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none; grid-auto-rows: minmax(0, 1fr);
    align-content: stretch; min-height: 0 !important; height: auto !important; gap: 2px; overflow: hidden; }
  .seat, body.fit .seat { min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(16px, 1fr) 10px;
    align-items: center; gap: 1px; overflow: hidden; padding: 1px 3px; }
  .seat .s-head { grid-column: 1; grid-row: 1; min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 3px; }
  .seat .s-emb { flex: none; width: 17px; height: 17px; overflow: visible; }
  .seat .s-emb svg { display: block; width: 14px; height: 14px; overflow: visible; }
  .seat .s-who { min-width: 0; padding-right: 18px; }
  .seat .s-nameline { min-width: 0; gap: 2px; line-height: 1; }
  .seat .s-no { font-size: 7px; }
  .seat .s-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 9px; white-space: nowrap; }
  .seat .s-rolename { display: block !important; max-width: 100%; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; font-size: 7px; line-height: 1; white-space: nowrap; }
  .seat .s-rolename span, .seat .s-nameline .tag, .seat .s-cards, .seat .s-hand small { display: none !important; }
  .seat .s-hand { position: static; display: flex; align-items: center; }
  .seat .s-hand b { font-size: 9px; line-height: 1; }
  .seat .s-tags { position: absolute; top: 2px; right: 23px; z-index: 2; display: flex; width: auto; min-height: 0; max-height: 13px; overflow: hidden; gap: 1px; }
  .seat .s-tags > .sp, .seat .s-tags > .tag, .seat .s-tags > .guess-btn { display: none !important; }
  .seat .idbadge { padding: 0 2px; font-size: 6px; line-height: 1.2; white-space: nowrap; }
  .seat .meter { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 2px; }
  body.phone-game.fit .seat .meter { display: grid !important; }
  .seat .meter .mt { display: flex; align-items: center; justify-content: center; min-width: 0; gap: 2px; padding: 0; border-width: 1px; }
  .seat .meter .mt b { flex: none; width: 10px; height: 9px; font-size: 7px; line-height: 1; }
  .seat .meter .mt .seg { display: none !important; }
  .seat .meter .mt em { font-size: 7px; line-height: 1; }
  .seat .s-field, .seat .s-probed, .seat .s-deadid, .seat .pk-banner, .seat .act-banner, .seat .pick-tag { display: none !important; }
  .seat .lock-plate { display: none !important; }

  .mid, body.fit .mid, body.log-closed .mid, body.fit.log-closed .mid { grid-column: 1; grid-row: 1; min-height: 0; display: grid !important; grid-template-columns: minmax(104px, min(150px, 20vw)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 4px; }
  .midcol { min-width: 0; min-height: 0; grid-template-rows: 28px minmax(0, 1fr); gap: 3px; }
  .mid > .log { display: none !important; }
  .channel { width: auto !important; max-width: none !important; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: stretch; justify-items: center; overflow: hidden; padding: 3px; gap: 2px; --mm: min(1.42px, calc((100dvh - 180px) / 88), calc((min(150px, 20vw) - 14px) / 63)) !important; }
  .channel .ch-head { width: 100%; min-width: 0; display: flex !important; justify-content: center; font-size: 8px; }
  .channel .ch-head .ch-mode { max-width: 100%; justify-content: center; gap: 2px; padding: 1px 3px; overflow: hidden; font-size: 7px; white-space: nowrap; }
  .channel .ch-head .ch-mode svg { flex: none; width: 12px; height: 12px; }
  .channel .ch-card { min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; overflow: visible; }
  .channel .ch-card > .cn { flex: none; }
  .channel .ch-status { max-width: 100%; overflow: hidden; font-size: 8px; line-height: 1.1; }
  .channel .ch-track { width: 100%; max-height: 22px; overflow: hidden; gap: 1px; font-size: 6px; line-height: 1; }
  .channel .ch-track .tn { gap: 1px; padding: 1px 2px; font-size: 6px; }
  .channel .ch-track .tn svg { width: 8px; height: 8px; }
  .phasebar { max-height: 28px; overflow: hidden; }
  .ticker { display: none !important; }
  .prompt { min-height: 0; overflow: hidden; padding: 3px 5px; gap: 3px; }
  .prompt .pr-phase { font-size: 8px; line-height: 1; }
  .prompt .pr-text { display: -webkit-box; overflow: hidden; font-size: 10px; line-height: 1.2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .prompt .pr-sub, .prompt .coach { display: none !important; }
  .prompt .pr-btns { gap: 3px; align-content: start; }
  .prompt .pr-btns button { min-width: 0; min-height: 34px; padding: 3px 6px; font-size: 9px; }

  .mine, body.fit .mine { grid-column: 1 / -1; grid-row: 2; height: 88px; min-height: 0; grid-template-columns: 146px minmax(0, 1fr) !important; gap: 4px; padding: 2px !important; overflow: hidden; }
  body.phone-game #seats > .seat.viewer-seat { display: none !important; }
  body.phone-game .mine, body.phone-game.fit .mine { grid-template-columns: 146px minmax(112px, 20vw) minmax(0, 1fr) !important; gap: 4px; }
  body.phone-game #mine .m-info { display: grid !important; min-width: 0; min-height: 0; height: 100%; grid-template-rows: 14px 16px 20px 10px; align-content: center; gap: 2px; overflow: hidden; padding: 2px 5px; border-left: 1px solid var(--line); }
  body.phone-game #mine .m-head { min-width: 0; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
  body.phone-game #mine .m-head > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 10px; white-space: nowrap; }
  body.phone-game #mine .m-head .tag { flex: none; padding: 0 3px; font-size: 7px; }
  body.phone-game #mine .m-info .meter { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
  body.phone-game #mine .m-info .meter .mt { min-width: 0; justify-content: center; gap: 2px; padding: 1px 2px; border-width: 1px; }
  body.phone-game #mine .m-info .meter .mt b { flex: none; width: 12px; height: 12px; font-size: 8px; }
  body.phone-game #mine .m-info .meter .mt .seg { display: none !important; }
  body.phone-game #mine .m-info .meter .mt em { display: inline !important; min-width: 8px; opacity: 1; font-size: 9px; }
  body.phone-game #mine .m-info .s-field { min-width: 0; min-height: 0; max-height: 20px; flex-wrap: nowrap; overflow: hidden; gap: 2px; cursor: zoom-in; }
  body.phone-game #mine .m-info .s-field > [data-card] { display: inline-flex; min-width: 28px; min-height: 20px; align-items: center; justify-content: center; touch-action: manipulation; }
  body.phone-game #mine .m-info .s-field .chip { flex: none; height: 12px; padding: 0 2px; font-size: 7px; }
  body.phone-game #mine .m-info .s-field .chip .k { width: 9px; font-size: 7px; }
  body.phone-game #mine .m-info .m-lbl { overflow: hidden; color: var(--mute); font-size: 7px; line-height: 1; white-space: nowrap; }
  body.phone-game #mine .m-info .m-lbl b { color: var(--fg); font-size: 8px; }
  #mine .dossier { height: 82px; grid-template-columns: 48px 94px; gap: 3px; }
  #mine .id-panel { align-items: center; justify-content: center; padding: 2px; }
  #mine .dp-top, #mine .dp-goal, #mine .dp-reborn { display: none !important; }
  #mine .dp-kanji { width: 22px; height: 22px; margin: 0; border-width: 1px; font-size: 15px; }
  #mine .dp-name { font-family: var(--f-mono); font-size: 8px; }
  #mine .role-panel { align-items: center; justify-content: center; padding: 2px 4px; gap: 2px; }
  #mine .rp-top, #mine .rp-skill, #mine .rp-go, #mine .rp-used { display: none !important; }
  #mine .rp-id { gap: 3px; }
  #mine .rp-id svg { width: 18px; height: 18px; }
  #mine .rp-id b { font-size: 9px; }
  #mine .rp-id small { display: none; }
  #mine .hand { height: 82px; min-width: 0; overflow: visible; --mm: .84px !important; align-items: center; justify-content: flex-start; gap: 4px; padding: 0 4px; }
  #mine .hand .cn.chosen { transform: translateY(-3px); }

  /* Keep victory artwork and winner glows inside the row without clipping its edges. */
  .result { overflow: visible; }
  /* the row uses the full screen width, so seven result cards get room for their names */
  .result { grid-template-columns: minmax(0, 1fr); }
  .rs-row { width: 100%; min-width: 0; min-height: 0; max-width: none; flex-wrap: nowrap; align-items: center; justify-content: space-evenly; gap: clamp(2px, .8vw, 8px); overflow: visible; padding: 7px clamp(4px, 1vw, 12px); }
  .rs-p { flex: 1 1 0; width: auto; max-width: 112px; min-width: 0; gap: 2px; overflow: visible; }
  .rs-flip { flex: none; width: min(68px, 88%); height: auto; aspect-ratio: 112 / 150; overflow: visible; }
  .rs-flip > div { overflow: visible; }
  .rs-kanji { flex: none; width: 30px; height: 30px; border-width: 2px; font-size: 21px; }
  .rs-role { width: 100%; justify-content: center; gap: 3px; font-size: 10px; white-space: nowrap; overflow: visible; }
  .rs-role svg { flex: none; width: 15px; height: 15px; overflow: visible; }
  .rs-name { width: 100%; justify-content: center; max-width: 100%; font-size: 8px; gap: 2px; white-space: nowrap; }
  .rs-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  body.mobile-log-open .mid > .log { display: flex !important; position: fixed; z-index: 60; inset: max(42px, calc(env(safe-area-inset-top) + 38px)) max(8px, env(safe-area-inset-right)) calc(90px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    width: auto; max-width: none; max-height: none; min-height: 0; overflow: hidden; background: var(--bg-2); box-shadow: 0 12px 40px rgba(0,0,0,.72); }
  body.mobile-log-open #logbox .log-tog { display: none !important; }
  body.mobile-log-open #logbox .log-head { flex-direction: row; align-items: center; justify-content: space-between; height: auto; padding: 6px 8px; border-bottom: 1px solid var(--line); }
  body.mobile-log-open #logbox .log-title { flex-direction: row; align-items: center; order: 0; }
  body.mobile-log-open #logbox .log-title b { writing-mode: initial; }
  body.mobile-log-open #logbox .log-modes { display: inline-flex; margin-left: auto; }
  body.mobile-log-open #logbox ol { display: block; min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}

/* Touch gives the foil a visible, short-lived highlight and lets a drag tilt a preview card. */
@media (hover: none) and (pointer: coarse) {
  .zoomer .holder, .cx-holder { --mx: 50%; --my: 40%; }
  .zoomer .holder.touching::after, .cx-holder.touching::after { content: ''; position: absolute; inset: 0; z-index: 9; border-radius: calc(3 * var(--mm)); pointer-events: none;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.62), rgba(255,255,255,.2) 20%, transparent 48%),
      linear-gradient(125deg, transparent 30%, rgba(255,255,255,.45) 43%, rgba(255,255,255,.08) 49%, transparent 62%);
    mix-blend-mode: screen; opacity: .95; animation: touch-foil .9s ease-out both; }
  @keyframes touch-foil { from { opacity: .35; } 35% { opacity: 1; } to { opacity: .82; } }
  .cn.touching::after { background-position: var(--mx) var(--my); }
  .rcoat.touching { filter: brightness(1.4) saturate(1.35); }
  .cn.role::after { background-size: 190% 190%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4), inset 0 2px 0 rgba(255,255,255,.42); }
  .cn.data::after { background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.43), rgba(255,255,255,.1) 31%, transparent 56%); }
  .cn.ident::after { opacity: .72; }
  .rcoat.rc-R.c1 { opacity: .9; }
  .rcoat.rc-SR.c1 { opacity: .85; }
  .rcoat.rc-SR.c2 { opacity: .9; }
  .rcoat.rc-UR.c2 { opacity: .86; }
  .rcoat.rc-SAR.c2 { opacity: .55; }
}
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) and (max-height: 360px) {
  .table, body.fit .table, body.log-closed:not(.fit) .table, body.fit.log-closed .table { grid-template-rows: minmax(0, 1fr) 78px; }
  .seat { grid-template-rows: minmax(14px, 1fr) 9px; gap: 0; }
  .seat .s-emb { width: 15px; height: 15px; }
  .seat .s-emb svg { width: 12px; height: 12px; }
  .seat .s-rolename { font-size: 6px; }
  .seat .meter .mt b { width: 9px; height: 8px; font-size: 6px; }
  .seat .meter .mt em { font-size: 6px; }
  .mine, body.fit .mine { height: 78px; }
  #mine .dossier, #mine .hand { height: 72px; }
  #mine .hand { --mm: .76px !important; }
}

/* Mobile landscape: fit the Codex and every tutorial step into the visible viewport. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .page-codex .pg-head { flex: none; min-height: 32px; gap: 7px; }
  .page-codex .pg-head p { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .page-codex .cx { gap: 4px; }
  .page-codex .cx-bar { min-height: 38px; justify-content: flex-start; gap: 6px; }
  .page-codex .cx-tabs { min-width: 0; gap: 2px; padding: 2px; }
  .page-codex .cx-tabs button { min-height: 34px; gap: 4px; padding: 4px 8px; font-size: 10px; white-space: nowrap; }
  .page-codex .cx-tabs button em { font-size: 9px; }
  .page-codex .cx-prog { flex: 1; min-width: 0; justify-content: flex-end; gap: 4px; overflow: hidden; font-size: 8px; white-space: nowrap; }
  .page-codex .cx-prog b { font-size: 11px; }
  .page-codex .cx-bar-in { width: clamp(34px, 8vw, 64px); }
  .page-codex .cx-body { grid-template-columns: minmax(0, 1fr) minmax(250px, .92fr); grid-template-rows: minmax(0, 1fr); gap: 6px; }
  .page-codex .cx-left { display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .page-codex .cx-board { width: 100%; height: 100%; max-height: 100%; justify-content: center; --hw: min(60px, calc((100dvh - 100px) * .18), calc((100cqw - 26px) / 4.5)); --hh: calc(var(--hw) * 1.1547); padding: 2px 0; }
  .page-codex .cx-hrow { gap: 2px; }
  .page-codex .cx-hrow + .cx-hrow { margin-top: calc(var(--hh) * -.28 + 2px); }
  .page-codex .cx-hrow { transform: translateX(calc(var(--hw) / -4 - 1px)); }
  .page-codex .cx-hrow.odd { transform: translateX(calc(var(--hw) / 4 + 1px)); }
  .page-codex .cx-hex-in { inset: 1px; gap: 1px; }
  .page-codex .cx-hex-in small { display: none; }
  .page-codex .cx-emb { width: calc(var(--hw) * .25); height: calc(var(--hw) * .25); }
  .page-codex .cx-hex-in b { max-width: calc(var(--hw) * .82); font-size: max(8px, calc(var(--hw) * .15)); }
  .page-codex .cx-pips { gap: 1px; margin-top: 0; }
  .page-codex .cx-pips i { width: max(4px, calc(var(--hw) * .105)); height: 2px; }
  .page-codex .cx-right { width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: 100%; display: grid; grid-template-columns: minmax(80px, .78fr) minmax(0, 1.22fr); grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch; gap: 5px; overflow: hidden; padding: 5px; }
  .page-codex .cx-rtabs { grid-column: 1 / -1; grid-row: 1; gap: 3px; }
  .page-codex .cx-head { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; min-width: 0; }
  .page-codex .cx-head .cx-rtabs { grid-column: auto; grid-row: auto; }
  .page-codex .cx-action-slot { display: flex; justify-content: flex-end; align-items: center; min-height: 30px; }
  .page-codex .cx-rtab { min-width: 0; min-height: 36px; padding: 3px 1px; gap: 0; }
  .page-codex .cx-rtab b { font-size: 10px; line-height: 1; }
  .page-codex .cx-rtab span { overflow: hidden; max-width: 100%; font-size: 7px; text-overflow: ellipsis; }
  .page-codex .cx-rtab em { font-size: 7px; line-height: 1; }
  .page-codex .cx-eq { top: -5px; font-size: 6px; padding: 0 2px; }
  .page-codex .cx-stage { grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; justify-content: center; padding: 3px 0; gap: 5px; }
  .page-codex .cx-holder { --mm: min(1.22px, calc((100dvh - 160px) * .0078), calc((42vw - 50px) / 63)) !important; }
  .page-codex .cx-rbadge { max-width: 100%; font-size: 8px; padding: 2px 4px; white-space: nowrap; }
  .page-codex .cx-use { width: auto; max-width: 100%; min-width: 30px; min-height: 30px; padding: 3px 5px; font-size: 0; line-height: 1; white-space: nowrap; }
  .page-codex .cx-use::after { content: '使用'; font-size: 8px; }
  .page-codex .cx-use.on::after { content: '✓'; }
  .page-codex .cx-info { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; max-height: 100%; align-self: stretch; gap: 4px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .page-codex .cx-name { align-items: baseline; gap: 3px; }
  .page-codex .cx-name small { font-size: 7px; }
  .page-codex .cx-name b { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .page-codex .cx-name span { display: none; }
  .page-codex .cx-skill { font-size: 9px; line-height: 1.25; }
  .page-codex .cx-info h4 { margin: 2px 0 0; font-size: 7px; }
  .page-codex .cx-lore { display: block; overflow: visible; margin: 0; font-size: 9px; line-height: 1.3; }
  .page-codex .cx-body.cmd { grid-template-columns: minmax(0, 1fr) minmax(250px, .92fr); }
  .page-codex .cx-body.cmd .cx-left { align-items: stretch; }
  .page-codex .cx-body.cmd .cx-right { grid-template-rows: auto minmax(0, 1fr); }
  .page-codex .cx-body.cmd .cx-list { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); align-content: center; gap: 4px; }
  .page-codex .cx-row { min-width: 0; min-height: 0; grid-template-columns: 20px minmax(0, 1fr) auto 20px; gap: 3px; padding: 3px 4px; overflow: hidden; }
  .page-codex .cx-pic { width: 18px; height: 18px; }
  .page-codex .cx-rt { overflow: hidden; }
  .page-codex .cx-rt b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .page-codex .cx-rt small { display: none; }
  .page-codex .cx-dots { gap: 1px; }
  .page-codex .cx-dot { min-width: 12px; height: 12px; padding: 0 2px; font-size: 7px; }
  .page-codex .cx-row em { font-size: 7px; }
  .page-codex .cx-var { min-width: 0; justify-content: center; gap: 5px; }
  .page-codex .cx-vrow { gap: 3px; }
  .page-codex .cx-vb { min-height: 34px; padding: 4px 7px; font-size: 9px; }
  .page-codex .cx-body.cmd .cx-stage { grid-column: 1; grid-row: 2; }
  .page-codex .cx-body.cmd .cx-var { grid-column: 1 / -1; grid-row: 1; display: flex; flex-direction: column; align-self: start; width: 100%; }
  .page-codex .cx-body.cmd .cx-vrow { gap: 3px; }
  .page-codex .cx-body.ops .cx-stage { justify-content: flex-start; padding: 4px 0 3px; }
  .page-codex .cx-body.cmd .cx-info { grid-column: 2; grid-row: 2; align-self: stretch; justify-content: center; }
  .tut-ov { align-items: center; }
  .tut { width: 100%; height: 100%; max-height: 100% !important; }
  .tut .gd-tabs { flex: none; min-height: 34px; padding: 3px 6px; gap: 4px; }
  .tut-title { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .tut-count { flex: none; margin-right: 2px; font-size: 9px; }
  .tut .gd-tabs .gd-x { flex: none; min-width: 34px; min-height: 32px; padding: 3px; }
  .tut-body { flex: 1; min-height: 0; overflow: hidden; grid-template-columns: minmax(0, 1.25fr) minmax(205px, .75fr); grid-template-rows: minmax(0, 1fr); gap: 0; }
  .tut-table, .tut-aside, .tut-story { min-width: 0; min-height: 0; overflow: hidden !important; padding: 6px; }
  .tut-table { display: grid; grid-template-rows: minmax(0, .82fr) minmax(0, 1.25fr) minmax(0, .9fr); gap: 4px; }
  .tut-table > .tut-seat.pos2 { align-self: stretch; justify-self: center; width: 48%; }
  .tut-mid { min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(62px, .7fr) minmax(0, 1fr); gap: 3px; }
  .tut-seat { min-width: 0; min-height: 0; justify-content: center; gap: 2px; padding: 3px; }
  .ts-top { min-width: 0; gap: 3px; }
  .ts-top b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .ts-emb svg { width: 15px; height: 15px; }
  .ts-id { padding: 1px 3px; font-size: 7px; white-space: nowrap; }
  .ts-front { min-height: 15px; padding: 0; }
  .ts-front .gd-mc { width: 11px; height: 15px; margin-right: 1px; font-size: 7px; }
  .ts-hand { font-size: 7px; line-height: 1; }
  .ts-lock { top: -4px; right: 2px; padding: 0 3px; font-size: 6px; }
  .ts-stamps { bottom: -8px; gap: 2px; }
  .tut-stamp { gap: 2px; padding: 1px 3px; font-size: 7px; }
  .tut-stamp svg { width: 9px; height: 9px; }
  .tut-chan { min-width: 0; min-height: 0; justify-content: center; gap: 3px; padding: 3px; --mm: .72px; }
  .tut-chan > small { font-size: 7px; }
  .tc-mode, .tc-at { font-size: 7px; line-height: 1.1; text-align: center; }
  .tc-mode svg { flex: none; width: 10px; height: 10px; }
  .tc-empty { font-size: 8px; text-align: center; }
  .tc-x { padding: 1px 3px; font-size: 7px; }
  .tut-me { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(84px, .45fr) minmax(0, 1fr); gap: 3px; }
  .tut-me .tut-seat { min-width: 0; flex: none; }
  .tut-hand { min-height: 0; overflow: hidden; padding: 3px; }
  .tut-hand > small { margin-bottom: 2px; font-size: 7px; }
  .tut-hcs { min-width: 0; min-height: 0; height: calc(100% - 12px); align-items: center; flex-wrap: nowrap; overflow: hidden; gap: 3px; --mm: .58px; }
  .tut-hc { flex: none; }
  .tut-hc.fresh { transform: translateY(-2px); }
  .tut-hc.used { transform: translateY(2px); }
  .tut-hc.fresh::after { top: -5px; font-size: 6px; padding: 0 2px; }
  .tut-hc.used::after { font-size: 9px; }
  .tut-side { min-width: 0; min-height: 0; max-height: none; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; align-content: stretch; gap: 4px; overflow: hidden; padding: 6px; border-left: 1px solid var(--line); border-top: 0; }
  .tut-step { overflow: hidden; font-size: 8px; white-space: nowrap; }
  .tut-ch { margin-right: 3px; padding: 1px 4px; }
  .tut-side h3 { overflow: hidden; font-size: 13px; line-height: 1.15; text-overflow: ellipsis; }
  .tut-side p { display: -webkit-box; min-height: 0; overflow: hidden; margin: 0; font-size: clamp(9px, 2.6dvh, 11px); line-height: 1.32; -webkit-line-clamp: 9; -webkit-box-orient: vertical; }
  .tut-nav { min-width: 0; display: flex; flex-wrap: nowrap; gap: 3px; }
  .tut-nav button { min-width: 0; min-height: 36px; padding: 3px 4px; font-size: 9px; line-height: 1.1; }
  .tut-dots { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; max-height: none; overflow: hidden; }
  .tut-dot { width: 100%; min-width: 14px; min-height: 14px; margin-left: 0; border-radius: 4px; }
  .tut-story { display: flex; flex-direction: column; justify-content: center; padding: 8px 12px; }
  .tut-story .sy-year { top: -8px; right: 0; font-size: 92px; }
  .tut-story .sy-head { margin-bottom: 7px; font-size: 8px; }
  .tut-story p { margin: 0 0 6px; font-size: 9px; line-height: 1.3; }
  .tut-story p:first-of-type { font-size: 14px; }
  .tut-story p big { font-size: 13px; line-height: 1.25; }
  .tut-aside { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
  .tut-rcs { flex: none; justify-content: center; gap: 8px; margin: 0; --mm: min(1px, calc((100dvh - 180px) * .007)); }
  .tut-pick { top: -5px; font-size: 7px; padding: 1px 4px; }
  .tut-atk { flex: none; justify-content: center; gap: 8px; margin: 0; --mm: min(.9px, calc((100dvh - 180px) * .006)); }
  .tut-check { gap: 3px; font-size: 8px; }
  .tut-check .tc-deck, .tut-check .tc-res { padding: 3px 4px; }
  .tut-check .gd-mc { width: 11px; height: 15px; font-size: 7px; }
  .tut-aside .gd-anat { gap: 6px; align-items: center; }
  .tut-aside .gd-excard { --mm: .78px; }
  .tut-aside .gd-tag { width: 15px; height: 15px; font-size: 8px; }
  .tut-aside .gd-calls { gap: 3px; }
  .tut-aside .gd-calls li { gap: 4px; font-size: 8px; line-height: 1.25; }
  .tut-aside .gd-calls li i { width: 16px; height: 16px; font-size: 8px; }
  .tut-aside .gd-calls li b { font-size: 9px; }
  .tut-aside .gd-steps { gap: 2px; }
  .tut-aside .gd-step { min-width: 0; min-height: 40px; padding: 5px 3px 3px 20px; }
  .tut-aside .gd-step i { left: 3px; top: 5px; width: 14px; height: 14px; font-size: 8px; }
  .tut-aside .gd-step b { font-size: 8px; }
  .tut-aside .gd-step em { top: -5px; right: 2px; padding: 0 2px; font-size: 6px; }
  .tut-aside .gd-lane { grid-template-columns: minmax(76px, .65fr) minmax(0, 1.35fr); gap: 3px; padding: 3px; margin-bottom: 3px; border-left-width: 3px; }
  .tut-aside .gd-lh { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1px 3px; }
  .tut-aside .gd-lh b, .tut-aside .gd-node b { font-size: 8px; }
  .tut-aside .gd-lh small, .tut-aside .gd-node small { font-size: 6px; }
  .tut-aside .gd-pi svg { width: 14px; height: 14px; }
  .tut-aside .gd-path { gap: 2px; }
  .tut-aside .gd-node { min-width: 32px; padding: 2px; }
  .tut-aside .gd-node.wide { min-width: 48px; }
  .tut-aside .gd-end { margin-top: 2px; font-size: 8px; }
  .tut-aside .gd-stop { grid-template-columns: 70px minmax(0, 1fr); gap: 4px; }
  .tut-aside .gd-tools { gap: 3px; padding: 4px; }
  .tut-aside .gd-tool { width: 38px; gap: 2px; font-size: 7px; }
  .tut-aside .gd-pic { width: 20px; height: 20px; }
  .tut-aside .gd-choice { gap: 3px; }
  .tut-aside .gd-btn { padding: 4px; }
  .tut-aside .gd-btn b { font-size: 12px; }
  .tut-aside .gd-ints, .tut-aside .gd-cmds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .tut-aside .gd-int, .tut-aside .gd-cmd { min-width: 0; gap: 3px; padding: 3px; }
  .tut-aside .gd-int b, .tut-aside .gd-cmd b { font-size: 7px; }
  .tut-aside .gd-int .gd-pic, .tut-aside .gd-cmd .gd-pic { width: 14px; height: 14px; }
  .tut-aside .gd-lead { margin: 0 0 3px; font-size: 8px; line-height: 1.2; }
  .tut-aside .gd-tgs { gap: 2px 5px; margin: 0 0 3px; }
  .tut-aside .gd-tg { gap: 2px; font-size: 7px; }
  .tut-aside .gd-tg i { width: 8px; height: 8px; }
  .tut-aside .gd-cmd { border-left-width: 2px !important; }
  .tut-aside .gd-cmd > div { min-width: 0; overflow: hidden; }
  .tut-aside .gd-cmd .gd-when { margin: 1px 0; padding: 0 2px; font-size: 5px; }
  .tut-aside .gd-cmd small, .tut-aside .gd-int small { display: -webkit-box; overflow: hidden; font-size: 6px; line-height: 1.15; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .tut-aside .gd-warn { gap: 3px; margin: 3px 0 0; padding: 3px; font-size: 7px; line-height: 1.2; }
  .tut-aside .gd-warn .gd-pic { flex: none; width: 14px; height: 14px; }
  .tut-aside .gd-when { margin-left: 1px; font-size: 6px; }
  .tut-aside .gd-list { padding-left: 12px; }
  .tut-aside .gd-list li { margin-bottom: 1px; font-size: 8px; line-height: 1.25; }
}

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) and (max-height: 360px) {
  .page-codex .cx-board { --hw: min(56px, calc((100dvh - 90px) * .18), calc((100cqw - 26px) / 4.5)); }
  .page-codex .cx-holder { --mm: min(1px, calc((100dvh - 150px) * .0078), calc((42vw - 50px) / 63)) !important; }
  .tut-body { grid-template-columns: minmax(0, 1.12fr) minmax(190px, .88fr); }
  .tut-side { gap: 3px; padding: 4px; }
  .tut-side p { font-size: 9px; line-height: 1.25; -webkit-line-clamp: 8; }
  .tut-dot { min-height: 12px; }
  .tut-nav button { min-height: 32px; font-size: 8px; }
  .tut-aside .gd-steps { gap: 1px; }
  .tut-aside .gd-step { padding-left: 17px; }
}

/* Desktop Codex preview: give the selected card a broad, fixed detail panel. */
@media (min-width: 1025px) {
  .page-codex .cx-body { grid-template-columns: minmax(0, 1fr) 640px; gap: 24px; }
  .page-codex .cx-right {
    position: sticky; top: 56px; width: 640px; height: min(560px, max(520px, calc(100vh - 80px))); min-height: 520px;
    display: grid; grid-template-columns: minmax(210px, .9fr) minmax(0, 1.1fr); grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch; gap: 16px; overflow: hidden; padding: 18px; border-radius: 8px;
  }
  .page-codex .cx-head { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-width: 0; }
  .page-codex .cx-action-slot { display: flex; justify-content: flex-end; align-items: center; min-height: 32px; }
  .page-codex .cx-action-slot:empty { display: none; }
  .page-codex .cx-rtabs { grid-column: auto; grid-row: auto; }
  .page-codex .cx-stage { grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; justify-content: center; padding: 10px 0; }
  .page-codex .cx-info { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; max-height: 100%; justify-content: center; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .page-codex .cx-body.ops .cx-stage { justify-content: flex-start; padding: 8px 0 10px; }
  .page-codex .cx-body.cmd .cx-right { grid-template-rows: auto minmax(0, 1fr); }
  .page-codex .cx-body.cmd .cx-stage { grid-column: 1; grid-row: 2; }
  .page-codex .cx-body.cmd .cx-var { grid-column: 1 / -1; grid-row: 1; display: flex; flex-direction: column; align-self: start; width: 100%; }
  .page-codex .cx-body.cmd .cx-vrow { gap: 6px; }
  .page-codex .cx-body.cmd .cx-info { grid-column: 2; grid-row: 2; align-self: stretch; justify-content: center; }
}

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .page-codex .cx-hex:hover:not(.sel) { background: var(--line-2); transform: none; }
  .page-codex .cx-hex:active { background: var(--hi); transform: scale(.97); }
  .page-codex .cx-row:hover:not(.sel) { border-color: var(--line); transform: none; }
  .page-codex .cx-row:active { border-color: var(--hi); transform: scale(.99); }
  .page-codex .cx-rtab, .page-codex .cx-vb, .page-codex .cx-use { min-height: 36px; touch-action: manipulation; }
  .page-codex .cx-holder, .page-codex .cx-holder .cn { touch-action: none; }
  .tut-nav button, .tut-dot, .tut .gd-x { touch-action: manipulation; }
  .tut-dot { min-height: 16px; }
}

/* Mobile game controls: make the active instruction and choices the visual focus. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  body.phone-game .midcol { grid-template-rows: 36px minmax(0, 1fr); gap: 5px; }
  body.phone-game .midcol:not(:has(.phasebar:not(:empty))) { grid-template-rows: minmax(0, 1fr); }
  body.phone-game .phasebar { height: 36px; min-height: 36px; max-height: 36px; overflow: hidden; }
  body.phone-game .pb { height: 100%; justify-content: center; gap: 0; padding: 3px 8px; }
  body.phone-game .pb-top { min-width: 0; flex-wrap: nowrap; gap: 5px; }
  body.phone-game .pb-who { flex: none; padding: 3px 5px; font-size: 8px; }
  body.phone-game .pb-steps { min-width: 0; justify-content: space-between; gap: 3px; }
  body.phone-game .pb-sep { min-width: 3px; max-width: 12px; }
  body.phone-game .pb-step { flex: none; gap: 2px; }
  body.phone-game .pb-step i { width: 18px; height: 18px; font-size: 9px; }
  body.phone-game .pb-step b { font-size: 9px; }
  body.phone-game .pb-step small, body.phone-game .pb-task { display: none !important; }
  body.phone-game .pb-time { display: block; height: 4px; }
  body.phone-game .pb-sec { flex: none; font-size: 9px; }

  body.phone-game .prompt { min-height: 0; justify-content: center; overflow: hidden; padding: 8px 10px; gap: 8px; }
  body.phone-game .prompt .pr-phase { display: none; }
  body.phone-game .prompt .pr-text { display: -webkit-box; width: 100%; overflow: hidden; font-size: 13px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  body.phone-game .prompt .pr-btns { flex: none; min-height: 0; justify-content: center; align-content: center; gap: 8px; }
  body.phone-game .prompt .pr-btns button { flex: 1 1 106px; min-width: 106px; max-width: 180px; min-height: 44px; justify-content: center; padding: 6px 9px; font-size: 12px; line-height: 1.15; }
  body.phone-game .prompt .pr-btns button:not(.cmd-btn):not(.skill-btn) { white-space: normal; }
  body.phone-game .prompt .cmd-btn { gap: 7px; padding: 5px 8px 5px 6px; }
  body.phone-game .prompt .cmd-btn .cb-ic { flex: none; width: 32px; height: 32px; }
  body.phone-game .prompt .cmd-btn .cb-ic svg { width: 22px; height: 22px; }
  body.phone-game .prompt .cmd-btn > span { min-width: 0; font-size: 11px; }
  body.phone-game .prompt .cmd-btn small { font-size: 8px; letter-spacing: .08em; }
  body.phone-game .prompt .skill-btn { min-height: 46px; padding: 3px 10px 3px 4px !important; }
  body.phone-game .prompt .skill-btn .sk-hex { flex: none; width: 31px; height: 34px; }
  body.phone-game .prompt .skill-btn .sk-hex svg { width: 18px; height: 18px; }
  body.phone-game .prompt .skill-btn span { min-width: 0; font-size: 11px; }
  body.phone-game .prompt .skill-btn small { font-size: 7px; }
  body.phone-game .prompt .pr-timer { flex: none; height: 3px; margin-top: 1px; }
}

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) and (max-height: 360px) {
  body.phone-game .midcol { grid-template-rows: 32px minmax(0, 1fr); gap: 4px; }
  body.phone-game .phasebar { height: 32px; min-height: 32px; max-height: 32px; }
  body.phone-game .pb { padding: 2px 5px; }
  body.phone-game .pb-who { font-size: 7px; }
  body.phone-game .pb-step i { width: 16px; height: 16px; font-size: 8px; }
  body.phone-game .pb-step b { font-size: 8px; }
  body.phone-game .prompt { padding: 6px 8px; gap: 6px; }
  body.phone-game .prompt .pr-text { font-size: 11px; }
  body.phone-game .prompt .pr-btns { gap: 6px; }
  body.phone-game .prompt .pr-btns button { min-height: 40px; padding: 4px 7px; font-size: 10px; }
}

/* Tutorial board follows the phone game's landscape layout: channel and action area,
   opponents in a right rail, and the player's hand along the bottom. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .channel .ch-card[data-zoom-packet] { cursor: zoom-in; touch-action: manipulation; }
  body.phone-game .seat .s-field { min-height: 22px; max-height: 22px; touch-action: manipulation; cursor: zoom-in; }
  body.phone-game .seat .s-field .chip { min-height: 18px; display: inline-flex; align-items: center; }
  .tut-ov { align-items: center !important; padding: 3px !important; }
  .tut { width: 100%; height: 100%; max-height: 100dvh !important; }
  .tut-body { grid-template-columns: minmax(0, 1fr) minmax(170px, 29%); grid-template-rows: minmax(0, 1fr); }
  .tut-body > .tut-phoneboard { min-width: 0; min-height: 0; overflow: hidden; }
  .tut-phoneboard { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(88px, 22%); grid-template-rows: minmax(0, 1fr) minmax(66px, 22dvh); gap: 4px; padding: 5px; }
  .tut-play { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; display: grid; grid-template-rows: 25px minmax(0, 1fr); gap: 4px; }
  .tut-phone-phase { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .tut-phone-phase span { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; color: var(--mute); font-size: clamp(8px, 2.2dvh, 10px); font-weight: 800; white-space: nowrap; }
  .tut-phone-phase span.on { border-color: var(--hi); color: var(--hi); background: rgba(229,165,10,.1); }
  .tut-phone-phase i { flex: none; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: var(--line-2); color: var(--fg); font-size: 8px; font-style: normal; }
  .tut-phone-phase .on i { background: var(--hi); color: #141210; }
  .tut-phone-main { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(76px, .35fr) minmax(0, 1fr); gap: 4px; }
  .tut-phone-main .tut-chan { min-width: 0; min-height: 0; justify-content: center; gap: 5px; padding: 5px; --mm: min(1px, calc((100vw - 400px) * .002 + .7px)); }
  .tut-phone-main .tut-chan > small { font-size: 9px; }
  .tut-phone-main .tc-mode, .tut-phone-main .tc-at { font-size: 9px; line-height: 1.2; text-align: center; }
  .tut-phone-main .tc-mode svg { flex: none; width: 13px; height: 13px; }
  .tut-phone-prompt { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px; border: 1px solid var(--line-2); border-radius: 5px; background: #15151A; text-align: center; }
  .tut-phone-prompt > small { color: var(--mute); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
  .tut-phone-actions { width: 100%; display: flex; justify-content: center; gap: 6px; }
  .tut-phone-actions span { min-width: 0; min-height: 36px; flex: 1; display: grid; place-items: center; padding: 4px 5px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--fg); font-size: clamp(10px, 2.7dvh, 12px); font-weight: 800; }
  .tut-phone-actions span:first-child { border-color: var(--hi); background: rgba(229,165,10,.1); }
  .tut-rail { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .tut-rail .tut-seat { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); align-content: center; align-items: center; gap: 2px 4px; overflow: hidden; padding: 3px 4px; }
  .tut-rail .ts-top { min-width: 0; grid-column: 1 / -1; gap: 3px; }
  .tut-rail .ts-top b { font-size: clamp(8px, 2.5dvh, 10px); }
  .tut-rail .ts-emb svg { width: 15px; height: 15px; }
  .tut-rail .ts-id { padding: 1px 3px; font-size: 7px; }
  .tut-rail .ts-front { min-width: 0; min-height: 14px; padding: 0; overflow: hidden; }
  .tut-rail .ts-front .gd-mc { width: 10px; height: 14px; margin-right: 1px; font-size: 6px; }
  .tut-rail .ts-hand { font-size: 8px; white-space: nowrap; }
  .tut-rail .ts-stamps { left: auto; right: 3px; bottom: 2px; transform: none; gap: 2px; }
  .tut-rail .tut-stamp { gap: 2px; padding: 1px 3px; font-size: 7px; }
  .tut-rail .ts-lock { top: 1px; right: 2px; padding: 0 3px; font-size: 6px; }
  .tut-phoneboard > .tut-me { grid-column: 1 / -1; grid-row: 2; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(82px, 22%) minmax(0, 1fr); gap: 4px; }
  .tut-phoneboard > .tut-me > .tut-seat { min-width: 0; min-height: 0; display: flex; flex: none; justify-content: center; gap: 2px; overflow: hidden; padding: 3px 5px; }
  .tut-phoneboard > .tut-me .ts-top b { font-size: 9px; }
  .tut-phoneboard > .tut-me .ts-id { font-size: 7px; }
  .tut-phoneboard > .tut-me .ts-front { min-height: 13px; }
  .tut-phoneboard > .tut-me .tut-hand { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 3px 5px; }
  .tut-phoneboard > .tut-me .tut-hand > small { flex: none; margin: 0 0 2px; font-size: 8px; }
  .tut-phoneboard > .tut-me .tut-hcs { min-width: 0; min-height: 0; height: auto; flex-wrap: nowrap; align-items: center; overflow: hidden; gap: 4px; --mm: min(.68px, calc((22dvh - 16px) * .01136)); }
  .tut-phoneboard > .tut-me .tut-hc { flex: none; }
  .tut-phoneboard > .tut-me .tut-hc.fresh { transform: translateY(-2px); }
  .tut-phoneboard > .tut-me .tut-hc.used { transform: translateY(2px); }
  .tut-phoneboard > .tut-me .tut-hc.fresh::after { top: -5px; font-size: 6px; padding: 0 2px; }
  .tut-phoneboard > .tut-me .tut-hc.used::after { font-size: 9px; }
  .tut-side { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 5px; overflow: hidden; padding: 7px; }
  .tut-step { overflow: hidden; font-size: 8px; white-space: nowrap; }
  .tut-side h3 { overflow: hidden; font-size: clamp(13px, 3.5dvh, 16px); line-height: 1.15; text-overflow: ellipsis; }
  .tut-side p { display: block; min-height: 0; overflow: auto; margin: 0; font-size: clamp(10px, 2.8dvh, 12px); line-height: 1.4; scrollbar-width: none; }
  .tut-side p::-webkit-scrollbar { display: none; }
  .tut-nav { min-width: 0; flex-wrap: nowrap; gap: 4px; }
  .tut-nav button { min-width: 0; min-height: 38px; padding: 4px 5px; font-size: 9px; line-height: 1.15; }
  .tut-dots { min-width: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; overflow: hidden; }
  .tut-dot { width: 100%; min-width: 12px; min-height: 14px; margin: 0; border-radius: 4px; }
  .tut-story p { font-size: 10px; line-height: 1.35; }
  .tut-story p:first-of-type { font-size: 14px; }
}

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) and (max-height: 360px) {
  .tut-phoneboard { grid-template-rows: minmax(0, 1fr) minmax(62px, 21dvh); gap: 3px; padding: 4px; }
  .tut-play { grid-template-rows: 22px minmax(0, 1fr); gap: 3px; }
  .tut-phone-main .tut-chan { gap: 3px; padding: 3px; }
  .tut-phone-prompt { gap: 6px; padding: 5px; }
  .tut-phone-actions span { min-height: 32px; }
  .tut-phoneboard > .tut-me .tut-hcs { --mm: min(.58px, calc((21dvh - 16px) * .01136)); }
  .tut-side { gap: 3px; padding: 5px; }
  .tut-side p { font-size: 10px; line-height: 1.3; }
  .tut-nav button { min-height: 34px; }
}

/* Align the tutorial controls and the final, incomplete dot row to the same right edge. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .tut-side > .tut-nav,
  .tut-side > .tut-dots { width: 100%; box-sizing: border-box; }
  .tut-side > .tut-nav { justify-content: flex-start; }
  .tut-side > .tut-nav button { flex: 1 1 0; }
  .tut-side > .tut-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: flex-start;
    gap: 3px;
    overflow: hidden;
  }
  .tut-side > .tut-dots > .tut-dot {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 24px) / 9);
    width: calc((100% - 24px) / 9);
    min-width: 0;
    max-width: none;
    margin: 0;
  }
}

/* Root-page override: keep the operator preview pinned to the top of its left column. */
@media (min-width: 1025px) {
  .cx-body.ops .cx-stage { justify-content: flex-start !important; padding-top: 8px !important; }
}

/* Mobile game opening: center the faction seal and keep every reveal row inside the screen. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  /* The bracket/clamp overlay follows the same press path as the operator panel. */
  .fx-opslot { animation: opi-press 2.8s linear both; }
  .fx-boot .bt-lines {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    font-size: 7px;
  }
  .fx-boot .bt-lines span { max-width: 100%; }
  .idr .idr-main {
    box-sizing: border-box;
    width: min(100%, 820px);
    max-width: 820px;
    max-height: 100%;
    min-width: 0;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr);
    grid-template-rows: repeat(9, auto);
    align-content: center;
    justify-items: center;
    gap: clamp(2px, .7dvh, 5px);
    padding: 6px 10px;
  }
  .idr-kicker { grid-column: 1 / -1; grid-row: 1; }
  .idr .idr-sealwrap { grid-column: 2; grid-row: 2; width: 66px; height: 66px; }
  .idr .idr-seal { width: 66px; height: 66px; }
  .idr .idr-reel span { height: 66px; }
  .idr .idr-main h1 { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
  .idr-org { grid-column: 1 / -1; grid-row: 4; }
  .idr-goal { grid-column: 1 / -1; grid-row: 5; max-width: 100%; text-align: center; }
  .idr-line { grid-column: 1 / -1; grid-row: 6; width: 100%; justify-content: space-around; }
  .idr-roster { grid-column: 1 / -1; grid-row: 7; max-width: 100%; flex-wrap: wrap; }
  .idr-note { grid-column: 1 / -1; grid-row: 8; max-width: 100%; text-align: center; }
  .idr-next { grid-column: 1 / -1; grid-row: 9; }
}

/* Keep rarity choices aligned whether a version is owned or locked. */
.page-codex .cx-body.ops .cx-head {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}
.page-codex .cx-body.ops .cx-head > .cx-rtabs { grid-column: 1; grid-row: 1; width: 100%; }
.page-codex .cx-body.ops .cx-head > .cx-action-slot {
  grid-column: 1;
  grid-row: 2;
  min-height: 34px;
  justify-content: flex-end;
}
.page-codex .cx-body.ops .cx-use.locked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(255,255,255,.025);
  color: var(--mute);
  cursor: default;
}
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .page-codex .cx-body.ops .cx-head { gap: 4px; }
  .page-codex .cx-body.ops .cx-head > .cx-action-slot { min-height: 30px; }
}

/* Mobile: keep the version action readable and the same size in every state. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .page-codex .cx-body.ops .cx-head > .cx-action-slot {
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
  }
  .page-codex .cx-body.ops .cx-action-slot > .cx-use {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 176px;
    align-items: center;
    justify-content: center;
    width: 176px;
    min-width: 176px;
    max-width: 176px;
    height: 32px;
    min-height: 32px;
    padding: 0 6px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .page-codex .cx-body.ops .cx-action-slot > .cx-use::after { content: none; display: none; }
}

/* Mobile command preview: keep both full-width option rows compact. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .page-codex .cx-body.cmd .cx-var { gap: 3px; }
  .page-codex .cx-body.cmd .cx-var .cx-vrow { gap: 3px; }
  .page-codex .cx-body.cmd .cx-var .cx-vrow > .cx-vb {
    box-sizing: border-box;
    height: 28px;
    min-height: 28px;
    padding: 1px 4px;
    font-size: 10px;
    line-height: 1;
  }
}

/* ================= Codex: hidden (covert) vs public (root) operators =================
   Told apart by pattern and an eye icon, never by colour (colours belong to the factions). */
.cx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 4px; font-size: 12px; color: var(--mute); }
.cx-lg { display: inline-flex; align-items: center; gap: 6px; }
.cx-lg svg { width: 14px; height: 14px; }
.cx-lg em { font-style: normal; font-size: 10px; letter-spacing: .12em; opacity: .75; }
.cx-lg-hex { width: 13px; height: 15px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--line-2); }
.cx-lg.cv .cx-lg-hex { background: repeating-linear-gradient(135deg, #A9A59C 0 2px, #2A2A33 2px 4px); }
/* hidden hexes: a striped rim, scanlines inside, an eye-slash by the number, a glitch on hover */
.cx-hex.cv { background: repeating-linear-gradient(135deg, #8C897F 0 4px, #24242B 4px 8px); }
.cx-hex.cv .cx-hex-in { background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px), linear-gradient(160deg, #131317, #08080A); }
.cx-hex.cv .cx-hex-in small { display: inline-flex; align-items: center; gap: 3px; }
.cx-cv-ic { display: inline-flex; width: 11px; height: 11px; color: #BDB9AF; }
.cx-cv-ic svg { width: 100%; height: 100%; }
.cx-hex.cv .cx-emb { filter: drop-shadow(1.5px 0 0 rgba(242,239,232,.28)) drop-shadow(-1px 0 0 rgba(0,0,0,.9)); }
.cx-hex.cv:hover .cx-emb { animation: cx-cv-glitch .42s steps(3) 1; }
@keyframes cx-cv-glitch { 0% { transform: translate(0); opacity: 1; } 33% { transform: translate(-2px, 1px); opacity: .55; } 66% { transform: translate(2px, -1px); opacity: .85; } 100% { transform: translate(0); opacity: 1; } }
.cx-hex.cv:hover { background: repeating-linear-gradient(135deg, #C9C5BB 0 4px, #2A2A33 4px 8px); }
.cx-hex.cv.sel { background: repeating-linear-gradient(135deg, var(--hi) 0 4px, #4A3D16 4px 8px); }
/* detail panel */
.cx-access { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 1px 8px 1px 6px; border-radius: 2px; color: var(--fg); border: 1px solid var(--line-2); }
.cx-access svg { width: 13px; height: 13px; }
.cx-access b { font-size: 10px; letter-spacing: .14em; }
.cx-access.cv { border-style: dashed; border-color: #A9A59C; background: repeating-linear-gradient(135deg, rgba(169,165,156,.14) 0 3px, transparent 3px 6px); }
.cx-cv-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--mute); border-left: 2px dashed #8C897F; padding-left: 8px; }
.cx-stage.cv::before { content: 'COVERT'; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 10px; letter-spacing: .5em;
  color: #A9A59C; opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cx-hex.cv:hover .cx-emb { animation: none; } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  /* phones: no room for the legend or the long note; the striped hexes and the badge still tell hidden operators apart */
  .page-codex .cx-legend, .page-codex .cx-cv-note { display: none; }
  .page-codex .cx-stage.cv::before { display: none; }
}

/* ================= operator pick: three cards, no selection frame =================
   The picked card lifts and gets a tick under it; the others dim. Rarity frames stay untouched. */
.rp-cards .rp-card, .rp-cards .rp-card.sel, .rp-cards button.rp-card.sel { box-shadow: none; outline: none; }
.rp-cards .rp-card { display: flex; flex-direction: column; align-items: center; gap: 0; }
.rp-cards .rp-card.sel { transform: translateY(-8px); }
.rp-cards .rp-card.off { opacity: .38; }
.rp-cards .rp-card:hover:not(.sel):not(.off) { transform: translateY(-4px); }
.rp-cap { display: flex; align-items: center; justify-content: center; gap: 6px; height: 24px; margin-top: calc(3.4 * var(--mm) + 4px); }
.rp-rar { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--rc); border: 1px solid var(--rc); border-radius: 2px; padding: 1px 7px; line-height: 1.4; }
.rp-chk { font-size: 12px; font-weight: 900; color: #141210; background: var(--ic, var(--hi)); border-radius: 2px; padding: 2px 10px; line-height: 1.4;
  opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; white-space: nowrap; }
.rp-card.sel .rp-chk { opacity: 1; transform: none; }
.rp-wait .rp-card .rp-chk { opacity: 1; transform: none; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .rp-box { --mm: min(2.05px, calc((100dvh - 195px) / 88), calc((100vw - 100px) / 189)) !important; }
  .rp-cap { height: 18px; margin-top: 4px; gap: 4px; }
  .rp-rar { font-size: 9px; padding: 0 5px; }
  .rp-chk { font-size: 10px; padding: 1px 7px; }
  .rp-cards .rp-card.sel { transform: translateY(-4px); }
}

/* ================= Skip ================= */
.fx-stamp.st-skip { color: #B4E33D; }
.fx-stamp.st-skip svg { width: 16px; height: 16px; }
.tag.skipped { display: inline-flex; align-items: center; gap: 3px; color: #B4E33D; border-color: rgba(180,227,61,.6); }
.tag.skipped svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; }

.sim-roles tr.sim-none td { color: var(--mute); }

/* balance sim: reference tier */
.sim-tier { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 3px; font-weight: 900; font-size: 12px; font-family: var(--f-mono); color: #141210; cursor: help; }
.sim-tier.t-S { background: #FF5F5F; }
.sim-tier.t-A { background: #FF9F43; }
.sim-tier.t-B { background: #F4F1EA; }
.sim-tier.t-C { background: #8C897F; }
.sim-tier.t-D { background: #4A4752; color: #ECE8DF; }
.sim-tier.t-none { background: transparent; color: var(--mute); border: 1px dashed var(--line-2); }

/* ================= packet frame: glides between seats ================= */
.pk-frame { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 21; pointer-events: none; opacity: 0; border-radius: 7px;
  box-shadow: 0 0 0 1.5px var(--pkc), 0 0 26px -4px color-mix(in srgb, var(--pkc) 70%, transparent); transition: opacity .25s; }
.pk-frame.on { opacity: 1; }
.pk-frame.slide { transition: left .52s cubic-bezier(.45,0,.2,1), top .52s cubic-bezier(.45,0,.2,1), width .52s cubic-bezier(.45,0,.2,1), height .52s cubic-bezier(.45,0,.2,1), opacity .25s; }
.pk-frame.me { box-shadow: 0 0 0 2.5px var(--pkc), 0 0 34px -2px color-mix(in srgb, var(--pkc) 80%, transparent); }
.pk-frame.direct { box-shadow: none; }
.pk-frame .pf-c { position: absolute; width: 16px; height: 16px; border: 2.2px solid var(--pkc); }
.pk-frame .pf-c.tl { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.pk-frame .pf-c.tr { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
.pk-frame .pf-c.bl { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
.pk-frame .pf-c.br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.pk-frame.on:not(.slide) .pf-c { animation: pf-lock .35s ease-out; }
@keyframes pf-lock { from { transform: scale(1.6); opacity: 0; } }
.pk-frame.me .pf-c { border-width: 3px; }
/* the seat itself no longer draws a ring for the packet; the frame does */
.seat.holder, .mine.holder { box-shadow: none; }
.seat.holder.acting, .mine.holder.acting { box-shadow: 0 0 0 3px #FFFFFF, 0 0 34px -2px rgba(255,255,255,.65); }
@media (prefers-reduced-motion: reduce) { .pk-frame.slide { transition: opacity .25s; } .pk-frame .pf-c { animation: none !important; } }

/* ================= in-game quick Codex ================= */
.overlay.qx-ov { align-items: flex-start; }
.qx { width: min(760px, 94vw); max-height: 86vh; max-height: 86dvh; margin-top: 5vh; display: flex; flex-direction: column; background: #0F0F13; border: 1px solid var(--line-2); border-radius: 6px; box-shadow: 0 24px 70px rgba(0,0,0,.65); }
.qx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.qx-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.qx-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 900; background: none; border: 1px solid transparent; color: var(--mute); }
.qx-tabs button em { font-style: normal; font-size: 10px; opacity: .7; }
.qx-tabs button.on { background: var(--fg); color: var(--bg); }
.qx-close { width: 34px; height: 34px; padding: 0; font-size: 16px; flex: none; }
.qx-list { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 12px; }
.qx-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.qx-row:last-child { border-bottom: 0; }
.qx-emb { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; background: #17171C; border: 1px solid var(--line-2); border-radius: 4px; color: var(--fg); cursor: zoom-in; }
.qx-emb svg { width: 28px; height: 28px; fill: none; stroke: currentColor; }
.qx-emb.pic { cursor: default; --acc: var(--fg); }
.qx-row.cv .qx-emb { border-style: dashed; background: repeating-linear-gradient(135deg, rgba(169,165,156,.12) 0 3px, transparent 3px 6px); }
.qx-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.qx-name b { font-size: 15px; font-weight: 900; }
.qx-skn { font-size: 12px; color: var(--hi); font-weight: 700; }
.qx-tag { font-size: 10px; padding: 0 6px; border-radius: 2px; line-height: 1.6; }
.qx-tag.cv { color: #BDB9AF; border: 1px dashed #8C897F; }
.qx-tag.on { color: #141210; background: #F4F1EA; font-weight: 900; }
.qx-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.qx-sk { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.55; color: #D9D5CB; }
.qx-tm { display: inline-flex; align-items: center; gap: 4px; align-self: start; font-size: 10.5px; font-weight: 900; color: var(--mute); border: 1px solid var(--line-2); border-radius: 2px; padding: 0 5px; white-space: nowrap; }
.qx-tm i { font-style: normal; font-size: 12px; color: var(--fg); }
.qx-sk.tm-PASSIVE .qx-tm { background: #23232A; }
.qx-sk.tm-ROUND .qx-tm { border-style: dashed; }
.qx-sk.tm-DEATH .qx-tm i { color: #FF8A73; }
.qx-txt { margin: 0; font-size: 13px; line-height: 1.55; color: #D9D5CB; }
.qx-foot { margin: 0; padding: 7px 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--mute); }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .qx { width: min(820px, 96vw); max-height: 92dvh; margin-top: 2dvh; }
  .qx-head { padding: 5px 8px; }
  .qx-tabs button { padding: 4px 9px; font-size: 11px; }
  .qx-list { padding: 2px 10px; }
  .qx-row { padding: 6px 0; gap: 8px; grid-template-columns: 32px minmax(0, 1fr); }
  .qx-emb { width: 32px; height: 32px; } .qx-emb svg { width: 22px; height: 22px; }
  .qx-sk, .qx-txt { font-size: 11.5px; line-height: 1.45; }
  .qx-sk { grid-template-columns: 64px minmax(0, 1fr); }
  .qx-foot { display: none; }
}

/* ================= Skip: lime fast-forward ================= */
.skip-plate { position: absolute; right: 8px; top: -12px; z-index: 5; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  background: #B4E33D; color: #141210; padding: 3px 10px 3px 8px; border-radius: 3px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.skip-plate svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.skip-plate b { font-weight: 900; letter-spacing: .06em; }
.skip-plate span { font-weight: 700; opacity: .9; }
.skip-plate small { font-size: 11px; opacity: .75; padding-left: 6px; border-left: 1px solid rgba(20,18,16,.35); }
.seat:has(> .skip-plate), .mine.skipped { outline: 1.5px dashed rgba(180,227,61,.55); outline-offset: 2px; }
.seat.fx-covered .skip-plate { visibility: hidden; }
.fx-skipsweep { position: fixed; z-index: 31; pointer-events: none; overflow: hidden; border-radius: 6px; }
.skp-streak { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(180,227,61,.15) 40%, rgba(214,255,120,.55) 85%, transparent);
  animation: skp-run calc(.75s * var(--k, 1)) cubic-bezier(.3,0,.2,1) forwards; }
.skp-chev { position: absolute; top: 50%; left: -14%; width: 34px; height: 34px; margin-top: -17px; color: #B4E33D; opacity: 0;
  filter: drop-shadow(0 0 8px rgba(180,227,61,.9)); animation: skp-chev calc(.7s * var(--k, 1)) cubic-bezier(.35,0,.2,1) forwards;
  animation-delay: calc(var(--i) * .09s * var(--k, 1)); }
.skp-chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }
@keyframes skp-run { to { left: 110%; } }
@keyframes skp-chev { 0% { left: -14%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 108%; opacity: 0; } }
.fx-skipsweep.quick .skp-streak, .fx-skipsweep.quick .skp-chev { animation-duration: calc(.45s * var(--k, 1)); }
@media (prefers-reduced-motion: reduce) { .skp-streak, .skp-chev { animation: none; display: none; } }
/* plates never get wider than their seat; the "by …" part shortens first */
.lock-plate, .skip-plate { max-width: calc(100% - 16px); overflow: hidden; }
.lock-plate small, .skip-plate small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* rotate prompt: the other two languages under the current one */
.rotate-card button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 10px; }
.rotate-card button small { font-size: 11px; opacity: .7; font-weight: 600; }
.rot-alt { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-top: 10px; border-top: 1px solid var(--line-2); }
.rot-alt span { display: flex; flex-direction: column; gap: 2px; }
.rotate-card .rot-alt b { font-size: 14px; color: #CFCBC1; }
.rotate-card .rot-alt small { font-size: 11px; line-height: 1.45; }

/* ================= phones: Skip / Lock fit inside the short seats =================
   Seats are ~40px tall with overflow hidden, so the edge plates would be cut in half.
   Instead: a tiny badge on the corner of the operator icon and a thin inner border. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .seats .seat > .skip-plate, .seats .seat > .lock-plate {
    display: flex !important; top: 1px; left: 1px; right: auto; width: 11px; height: 11px; max-width: none; padding: 0; gap: 0;
    justify-content: center; align-items: center; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.6); z-index: 3; }
  .seats .seat > .skip-plate svg, .seats .seat > .lock-plate svg { width: 8px; height: 8px; }
  .seats .seat > .skip-plate > :not(svg), .seats .seat > .lock-plate > :not(svg) { display: none; }
  .seat:has(> .skip-plate) { outline: none; box-shadow: inset 0 0 0 1.5px rgba(180,227,61,.8); }
  .seat:has(> .lock-plate) { box-shadow: inset 0 0 0 1.5px rgba(155,117,255,.85); }
  .mine.skipped { outline: none; box-shadow: inset 0 0 0 1.5px rgba(180,227,61,.8); }
  /* your own panel has room: keep its plate inside the panel instead of above it */
  .mine > .skip-plate, .mine > .lock-plate { top: 2px; right: 6px; font-size: 9px; padding: 1px 6px; }
}
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) { .fx-ring { width: 92px; height: 92px; border-width: 3px; } .fx-ring .ring-emblem svg { width: 30px; height: 30px; } }

:lang(zh-Hans) .nn-zh { font-family: 'Noto Sans SC', var(--f-body); }

/* ---------- faction reveal on phones (landscape): the same layout as on a computer ----------
   One centred column — "your identity is", the seal, the big faction name, the goal, the players
   side by side, the roster, the note and the progress bar — scaled to the screen height. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .idr { --sz: clamp(60px, 20dvh, 96px); }
  .idr .idr-main { display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; max-width: 760px; max-height: 100%; padding: 6px 12px; gap: clamp(3px, 1.15dvh, 8px); overflow: visible; }
  .idr .idr-main > * { grid-column: auto; grid-row: auto; }
  .idr-kicker { font-size: clamp(9px, 2.8dvh, 12px); letter-spacing: .36em; padding-left: .36em; margin-bottom: 4px; }
  .idr .idr-sealwrap { width: var(--sz); height: var(--sz); margin: 4px 0 6px; flex: none; }
  .idr .idr-seal { width: var(--sz); height: var(--sz); border-radius: calc(var(--sz) * .11); font-size: calc(var(--sz) * .64); }
  .idr .idr-reel span { height: var(--sz); }
  .idr-wave { border-radius: calc(var(--sz) * .12); }
  .idr .idr-main h1 { margin: 0; font-size: clamp(34px, 13dvh, 64px); line-height: 1; justify-self: auto; align-self: center; }
  .idr .idr-main > * { align-self: center; }
  .idr-org { font-size: clamp(8px, 2.5dvh, 11px); letter-spacing: .3em; padding-left: .3em; }
  .idr-goal { margin: 1px 0 2px; max-width: 600px; font-size: clamp(10px, 3.3dvh, 14px); line-height: 1.3; text-align: center; }
  .idr-line { width: auto; max-width: 100%; margin: 2px 0; gap: clamp(8px, 2vw, 14px); flex-wrap: nowrap; justify-content: center; }
  .idr-p { gap: 2px; }
  .idr-sil { width: clamp(26px, 9dvh, 40px); height: clamp(30px, 10.5dvh, 46px); }
  .idr-p b { max-width: 70px; font-size: clamp(8px, 2.6dvh, 11px); }
  .idr-roster { max-width: 100%; gap: 6px; flex-wrap: nowrap; }
  .idr-roster small { font-size: clamp(8px, 2.6dvh, 11px); margin-right: 2px; }
  .idr-chip { padding: 2px 8px; font-size: clamp(8px, 2.8dvh, 12px); }
  .idr-note { max-width: 560px; margin: 0; font-size: clamp(8px, 2.7dvh, 12px); line-height: 1.3; text-align: center; display: block; -webkit-line-clamp: unset; }
  .idr-next { margin-top: 2px; gap: 4px; }
  .idr-next span { font-size: clamp(8px, 2.7dvh, 12px); }
  .idr-next i { width: min(200px, 50vw); height: 3px; }
  /* the light rays from the seal, as on a computer, scaled to the smaller seal */
  .idr-burst { display: block; transform: scale(.66); }
  /* the white flash when the faction locks in, as on a computer */
  .idr-flash { display: block; animation: idr-flash .5s ease-out 2s; }
  @keyframes idr-spin {
    0% { transform: translateY(0); filter: blur(0); }
    12% { filter: blur(2px); }
    70% { filter: blur(.6px); }
    92% { transform: translateY(calc((var(--n) - 1) * -1 * var(--sz) - 6px)); filter: blur(0); }
    100% { transform: translateY(calc((var(--n) - 1) * -1 * var(--sz))); }
  }
  @media (prefers-reduced-motion: reduce) { .idr-reel { transform: translateY(calc((var(--n) - 1) * -1 * var(--sz))); } .idr-burst, .idr-flash { display: none; } }
}

/* =====================================================================
   Deep Salvage, mobile-gacha layout (.gc2) — the same on computers and phones:
   banner with featured cards on the left; chips, rates, pity and the salvage buttons on the right.
   ===================================================================== */
.page-gacha .pg.pg-wide { max-width: 1240px; }
.gc.gc2 { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .85fr); gap: 12px;
  height: clamp(440px, calc(100dvh - 170px), 760px); min-height: 0; }
.gc2 .gc-hero { position: relative; overflow: hidden; min-height: 0; border: 1px solid #2C2C35; border-radius: 8px; container-type: size;
  background: radial-gradient(ellipse 70% 80% at 68% 50%, rgba(63,199,232,.14), transparent 70%), linear-gradient(180deg, #0C0E14, #07080B); }
.gc2 .gc-hero-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 68% 48%, rgba(255,62,165,.16), transparent 42%), radial-gradient(circle at 80% 70%, rgba(246,231,176,.1), transparent 40%); }
.gc2 .gc-show { position: absolute; left: 66%; top: 50%; transform: translate(-50%, -50%); --mm: min(.8cqh, .48cqw); width: calc(63 * var(--mm)); height: calc(88 * var(--mm)); }
.gc2 .gc-show-c { position: absolute; inset: 0; transition: transform .3s; }
.gc2 .gc-show-c > .cn { --mm: inherit; }
.gc2 .gc-show-c.s1 { z-index: 3; animation: gc-float 5s ease-in-out infinite; }
.gc2 .gc-show-c.s0 { z-index: 2; transform: translateX(-56%) rotate(-9deg) scale(.84); filter: brightness(.82); }
.gc2 .gc-show-c.s2 { z-index: 1; transform: translateX(56%) rotate(9deg) scale(.84); filter: brightness(.82); }
@keyframes gc-float { 50% { transform: translateY(-1.6%); } }
.gc2 .gc-copy { position: absolute; left: 0; bottom: 0; top: 0; width: 44%; z-index: 4; padding: 22px 24px; max-width: none; justify-content: flex-end; gap: 8px;
  background: linear-gradient(90deg, rgba(7,8,11,.92) 0%, rgba(7,8,11,.75) 70%, transparent 100%); }
.gc2 .gc-copy h3 { font-size: clamp(26px, 3.6vw, 40px); }
.gc2 .gc-copy p { font-size: 13px; line-height: 1.6; }
.gc-pick { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 11px; letter-spacing: .12em; color: #F4F1EA;
  padding: 4px 10px 4px 4px; border: 1px solid rgba(255,62,165,.6); border-radius: 3px; background: rgba(255,62,165,.08); }
.gc-pick span { background: #FF3EA5; color: #fff; padding: 2px 6px; border-radius: 2px; font-weight: 700; }
.gc2 .gc-side { min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #0B0C10; overflow: auto; }
.gc-wallet { display: flex; gap: 8px; flex-wrap: wrap; }
.gc2 .gc-chips, .gc-coats { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; }
.gc2 .gc-chips b, .gc-coats b { font-size: 16px; }
.gc2 .gc-chips small, .gc-coats small { color: var(--mute); font-size: 11px; }
.gc2 .gc-chips .gc-mini { width: 24px; height: 24px; padding: 0; border-radius: 50%; font-size: 15px; line-height: 1; }
.gc-coats { padding-right: 12px; }
.gc-coats i { width: 13px; height: 13px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: conic-gradient(#FF3EA5, #7FD8FF, #9B6BFF, #5CF0C8, #7CFF4F, #FF3EA5); }
.gc2 .gc-rates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gc2 .gc-rates li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-left: 3px solid var(--rc); background: rgba(255,255,255,.03); font-size: 12.5px; }
.gc2 .gc-rates li b { color: var(--rc); font-size: 12px; }
.gc2 .gc-rates li span { display: block; border: 0; padding: 0; font-size: inherit; color: var(--fg); }
.gc2 .gc-rates li em { font-style: normal; color: var(--fg); }
.gc2 .gc-rates li.coat { border-left: 3px solid transparent; border-image: linear-gradient(180deg, #FF3EA5, #7FD8FF, #9B6BFF, #5CF0C8, #7CFF4F) 1; }
.gc2 .gc-rates li.coat b { background: conic-gradient(#FF3EA5, #7FD8FF, #9B6BFF, #5CF0C8, #7CFF4F, #FF3EA5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gc-pity { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; font-size: 11.5px; color: var(--mute); }
.gc-pity > b { color: #FF3EA5; font-size: 14px; }
.gc-pity > i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.gc-pity > i b { display: block; height: 100%; background: linear-gradient(90deg, #3FC7E8, #FF3EA5); }
.gc2 .gc-sim { margin: 0; align-self: flex-start; }
.gc-pulls { margin-top: auto; display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; }
.gc2 .gc-btn { min-height: 64px; justify-content: center; gap: 3px; padding: 8px 10px; font-size: 14px; border-width: 1.5px; position: relative; overflow: hidden;
  transition: transform .12s, box-shadow .2s; }
.gc2 .gc-btn small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.gc2 .gc-btn small i { width: 9px; height: 9px; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.gc2 .gc-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 0 22px -6px #3FC7E8; }
.gc2 .gc-btn.big:not(:disabled):hover { box-shadow: 0 0 30px -6px #FF3EA5; }
.gc2 .gc-btn:not(:disabled)::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%) -100% 0 / 220% 100% no-repeat;
  animation: gc-btn-sheen 3.2s ease-in-out infinite; }
@keyframes gc-btn-sheen { 60%, 100% { background-position: 200% 0; } }
/* the press: a quick squash and a ring out of the button */
.gc-btn.press { animation: gc-press .32s cubic-bezier(.3,1.6,.5,1); }
.gc-btn.press::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  border: 2px solid currentColor; animation: gc-ring .45s ease-out forwards; pointer-events: none; }
@keyframes gc-press { 0% { transform: scale(1); } 35% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes gc-ring { to { transform: scale(30); opacity: 0; } }

/* ---------- the dive (full screen) ---------- */
@property --cc { syntax: "<color>"; inherits: true; initial-value: #3FC7E8; }
.gc-dive { position: fixed; inset: 0; z-index: 9000; background: #03040A; color: #F4F1EA; overflow: hidden; --cc: var(--c1, #3FC7E8); }
.gc-dive.diving { cursor: pointer; --cc: var(--c1); background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cc) 22%, #03040A) 0%, #03040A 60%); }
.gc-dive.diving.turn { animation: gc-dv-turn var(--dur, 2s) linear forwards; }
.gc-dive.diving.turn.long { animation: gc-dv-turn var(--dur, 2s) linear forwards, gc-dv-shake .5s linear calc(var(--dur, 2s) * .62) 2; }
@keyframes gc-dv-turn { 0%, 42% { --cc: var(--c0); } 70%, 100% { --cc: var(--c1); } }
@keyframes gc-dv-shake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 3px; } 40% { translate: 5px -4px; } 60% { translate: -3px 4px; } 80% { translate: 3px -2px; } }
.gc-dv-warp { position: absolute; inset: 0; animation: gc-dv-spin 6s linear infinite; }
@keyframes gc-dv-spin { to { transform: rotate(40deg); } }
.gc-dv-warp b { position: absolute; left: 50%; top: 50%; width: 46vmax; height: var(--w); margin-top: calc(var(--w) / -2); transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, var(--cc) 70%, #fff); border-radius: var(--w); opacity: 0;
  animation: gc-dv-streak var(--du) cubic-bezier(.5,0,1,1) var(--dl) infinite; }
.gc-dive.long .gc-dv-warp b { animation-duration: calc(var(--du) * .7); }
@keyframes gc-dv-streak {
  0% { transform: rotate(var(--a)) translateX(3vmax) scaleX(.02); opacity: 0; }
  25% { opacity: .9; }
  100% { transform: rotate(var(--a)) translateX(58vmax) scaleX(1); opacity: 0; } }
.gc-dv-core { position: absolute; left: 50%; top: 50%; width: 22vmin; height: 22vmin; margin: -11vmin 0 0 -11vmin; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--cc) 22%, color-mix(in srgb, var(--cc) 40%, transparent) 45%, transparent 70%);
  animation: gc-dv-core var(--dur, 2s) cubic-bezier(.6,0,.9,.4) forwards; }
@keyframes gc-dv-core { 0% { transform: scale(.25); opacity: .5; } 80% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(6); opacity: 1; } }
.gc-dv-ring { position: absolute; left: 50%; top: 50%; width: 30vmin; height: 30vmin; margin: -15vmin 0 0 -15vmin; border-radius: 50%;
  border: 2px solid var(--cc); box-shadow: 0 0 24px var(--cc), inset 0 0 24px var(--cc); animation: gc-dv-ring 1.1s ease-out infinite; }
.gc-dv-ring.r2 { animation-delay: .55s; }
@keyframes gc-dv-ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.gc-dv-txt { position: absolute; left: 0; right: 0; bottom: 16%; display: flex; flex-direction: column; align-items: center; gap: 6px; letter-spacing: .3em; text-shadow: 0 0 12px var(--cc); }
.gc-dv-txt b { font-size: clamp(20px, 4vmin, 34px); animation: gc-dv-glitch .18s steps(2) infinite; }
.gc-dv-txt span { font-size: 12px; color: color-mix(in srgb, var(--cc) 60%, #fff); }
.gc-dv-txt em { font-style: normal; }
@keyframes gc-dv-glitch { 50% { transform: translateX(2px); text-shadow: -2px 0 #FF3EA5, 2px 0 #3FC7E8; } }
.gc-dv-skip { position: absolute; right: 18px; bottom: 16px; font-size: 11px; letter-spacing: .14em; color: rgba(244,241,234,.55); }
/* the reveal */
.gc-dive.reveal { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 45%, #141824 0%, #04050A 70%); }
.gc-dv-flash { position: absolute; inset: 0; background: #fff; pointer-events: none; animation: gc-dv-flash .55s ease-out forwards; }
@keyframes gc-dv-flash { from { opacity: .95; } to { opacity: 0; } }
.gc-dv-res { position: relative; display: flex; flex-direction: column; align-items: center; gap: 34px; padding: 24px; max-width: 100%; max-height: 100%; }
/* ten cards: 5 × 2 with room for each card's rarity tag below and NEW tag above */
.gc-dive .gc-res { display: grid; grid-template-columns: repeat(5, auto); gap: 40px 28px; justify-content: center; }
.gc-dive .gc-res.n1 { grid-template-columns: auto; }
.gc-dive .gc-res .gc-card { --mm: min(calc((100vw - 220px) / 315), calc((100dvh - 230px) / 176), 2.5px); }
.gc-dive .gc-res.n1 .gc-card { --mm: min(calc((100dvh - 190px) / 92), 4.2px); }
.gc-dive .gc-after { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; opacity: 0; animation: gc-glow .4s ease-out 1.4s both; }
.gc-dive .gc-after .gc-btn { min-height: 44px; padding: 6px 18px; flex-direction: row; }
.gc-dive .gc-after .gc-mini { min-height: 44px; padding: 6px 16px; }
.gc-card.r-COAT::after { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rc), 0 0 30px var(--rc), 0 0 60px -6px var(--rc); }
.gc-card.r-COAT .gc-tag { background: linear-gradient(90deg, #FF3EA5, #7FD8FF, #9B6BFF, #5CF0C8, #7CFF4F); color: #0E0E11; }
@media (prefers-reduced-motion: reduce) { .gc-dive *, .gc2 .gc-show-c.s1, .gc2 .gc-btn::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }

/* ---------- a prototype coating as a card ---------- */
.gc-coatcard { position: absolute; inset: 0; border-radius: calc(3 * var(--mm)); overflow: hidden;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--cc) 28%, #0B0C10) 0%, #050608 72%); }
.gc-cc-frame { position: absolute; inset: 0; border-radius: inherit; padding: calc(2.5 * var(--mm));
  background: linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,.38) 100%), var(--rar-frame);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.gc-cc-frame::after { content: ""; position: absolute; inset: 0; background: var(--rar-sheen) 0 0 / 300% 100%; animation: sar-sheen 5.5s linear infinite; }
.gc-cc-in { position: absolute; inset: calc(4 * var(--mm)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1.6 * var(--mm)); text-align: center; }
.gc-cc-in small { font-size: calc(2 * var(--mm)); letter-spacing: .16em; color: color-mix(in srgb, var(--cc) 70%, #fff); }
.gc-cc-ic { width: calc(26 * var(--mm)); height: calc(26 * var(--mm)); fill: color-mix(in srgb, var(--cc) 18%, transparent); stroke: var(--cc); stroke-width: 2.2; stroke-linejoin: round;
  filter: drop-shadow(0 0 calc(2 * var(--mm)) var(--cc)); }
.gc-cc-in b { font-size: calc(5.2 * var(--mm)); font-weight: 900; line-height: 1.1; background: var(--rar-foil); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sar-sheen 6s linear infinite; }
.gc-cc-in span { font-size: calc(2.6 * var(--mm)); color: rgba(236,232,223,.8); font-weight: 700; }
.gc-cc-in em { font-style: normal; font-size: calc(1.9 * var(--mm)); letter-spacing: .12em; color: rgba(236,232,223,.55); }

/* ---------- the Codex: UR coatings ---------- */
.cx-coat { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.02); }
.cx-coat-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cx-coat-h b { font-size: 13px; }
.cx-coat-h small { font-size: 10px; letter-spacing: .12em; color: var(--mute); }
.cx-coat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.cx-coat-b { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg-2); color: var(--fg); cursor: pointer; min-width: 0; }
.cx-coat-b i { width: 20px; height: 20px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--cc); }
.cx-coat-b span { font-size: 10.5px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-coat-b em { font-style: normal; font-size: 10px; color: var(--mute); }
.cx-coat-b.cur { border-color: var(--cc); }
.cx-coat-b.cur em { color: var(--cc); }
.cx-coat-b.on { border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 0 14px -2px var(--cc); }
.cx-coat-desc { margin: 0; font-size: 12px; line-height: 1.5; color: #CFCBC1; }
.cx-coat-tip { font-size: 11px; color: var(--mute); }
.cx-coat-tip.warn { color: #E5A50A; }
.cx-coat-go { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border: 1.5px solid var(--cc); border-radius: 4px;
  background: color-mix(in srgb, var(--cc) 14%, var(--bg-2)); color: #fff; font-weight: 700; cursor: pointer; }
.cx-coat-go small { font-size: 10.5px; color: rgba(255,255,255,.7); font-weight: 500; }

/* ---------- phones (landscape) ---------- */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .page-gacha .gc.gc2 { height: 100%; grid-template-columns: minmax(0, 1.55fr) minmax(200px, .9fr); grid-template-rows: minmax(0, 1fr); gap: 6px; }
  .page-gacha .gc2 .gc-copy { width: 46%; padding: 8px 10px; gap: 4px; }
  .page-gacha .gc2 .gc-copy h3 { font-size: 20px; }
  .page-gacha .gc2 .gc-copy p { font-size: 9px; line-height: 1.3; -webkit-line-clamp: 3; }
  .gc-pick { font-size: 8px; padding: 2px 6px 2px 2px; gap: 4px; }
  .page-gacha .gc2 .gc-side { padding: 6px; gap: 5px; }
  .page-gacha .gc2 .gc-chips, .page-gacha .gc-coats { padding: 2px 4px 2px 7px; gap: 4px; }
  .page-gacha .gc2 .gc-chips b, .page-gacha .gc-coats b { font-size: 12px; }
  .page-gacha .gc2 .gc-chips small, .page-gacha .gc-coats small { font-size: 8px; }
  .page-gacha .gc2 .gc-chips .gc-mini { width: 22px; height: 22px; min-height: 0; font-size: 13px; }
  .page-gacha .gc2 .gc-rates { gap: 2px; }
  .page-gacha .gc2 .gc-rates li { grid-template-columns: 28px 1fr auto; gap: 4px; padding: 2px 6px; font-size: 9px; }
  .page-gacha .gc2 .gc-rates li b { font-size: 9px; }
  .page-gacha .gc-pity { font-size: 8.5px; gap: 2px 6px; }
  .page-gacha .gc-pity > b { font-size: 11px; }
  .page-gacha .gc2 .gc-sim { font-size: 7px; padding: 1px 4px; }
  .page-gacha .gc-pulls { gap: 5px; }
  .page-gacha .gc2 .gc-btn { min-width: 0; min-height: 46px; padding: 4px 6px; font-size: 11px; }
  .page-gacha .gc2 .gc-btn small { font-size: 9px; }
  .gc-dive .gc-res { gap: 22px 16px; }
  .gc-dive .gc-res .gc-card { --mm: min(calc((100vw - 140px) / 315), calc((100dvh - 132px) / 176)); }
  .gc-dive .gc-res.n1 .gc-card { --mm: calc((100dvh - 120px) / 92); }
  .gc-dv-res { gap: 16px; padding: 10px; }
  .gc-dive .gc-after .gc-btn, .gc-dive .gc-after .gc-mini { min-height: 36px; padding: 4px 12px; font-size: 11px; }
  .cx-coat { padding: 6px; gap: 4px; }
  .cx-coat-b { padding: 3px 1px; }
  .cx-coat-b i { width: 14px; height: 14px; }
  .cx-coat-b span { font-size: 8px; }
  .cx-coat-b em { font-size: 8px; }
  .cx-coat-desc { font-size: 9px; }
  .cx-coat-go { padding: 5px 8px; font-size: 11px; }
}

/* =====================================================================
   Player profile page (.pf): name and record, inventory, match history, backups.
   ===================================================================== */
.pf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.pf .panel { display: flex; flex-direction: column; gap: 10px; }
.pf .pg-sec { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.pf .pg-sec small { font-size: 11px; color: var(--mute); font-weight: 500; }
.pf h4 { margin: 4px 0 0; font-size: 12px; color: var(--mute); letter-spacing: .08em; }
.pf-name { display: flex; flex-direction: column; gap: 4px; }
.pf-name label { font-size: 11px; color: var(--mute); letter-spacing: .08em; }
.pf-name input { font-size: 20px; font-weight: 900; padding: 8px 10px; }
.pf-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--mute); letter-spacing: .08em; }
.pf-stats { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 6px; }
.pf-st { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); }
.pf-st b { font-size: 22px; }
.pf-st b small { font-size: 12px; }
.pf-st > small { font-size: 11px; color: var(--mute); }
.pf-st.chips { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 4px 6px; border-color: rgba(63,199,232,.5); }
.pf-st.chips i { width: 13px; height: 13px; background: #3FC7E8; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pf-st.chips > small { flex-basis: 100%; text-align: center; }
.pf-safe { margin: 0; font-size: 11.5px; color: var(--mute); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-safe i { width: 8px; height: 8px; border-radius: 50%; background: #3FD07A; box-shadow: 0 0 8px #3FD07A; }
.pf-inv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pf-inv-r { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 8px; padding: 7px 10px; border-left: 3px solid var(--rc); background: rgba(255,255,255,.03); border-radius: 0 4px 4px 0; font-size: 12.5px; }
.pf-inv-r b { color: var(--rc); }
.pf-inv-r em { font-style: normal; font-size: 15px; font-weight: 700; }
.pf-inv-r em small { font-size: 10px; color: var(--mute); }
.pf-inv-r i { font-style: normal; font-size: 11px; color: var(--mute); }
.pf-coats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.pf-coat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); min-width: 0; }
.pf-coat i { width: 18px; height: 18px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--cc); }
.pf-coat span { font-size: 10.5px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-coat em { font-style: normal; font-size: 11px; color: var(--mute); }
.pf-note { margin: 0; font-size: 12px; color: var(--mute); line-height: 1.6; }
.pf-note b { color: var(--fg); }
.pf-note.warn { color: #E5A50A; }
.pf-hist { grid-column: 1; }
.pf-ms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow: auto; }
.pf-m { display: grid; grid-template-columns: 54px 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; background: rgba(255,255,255,.03); border-left: 3px solid var(--mute); }
.pf-m.r-win { border-left-color: #3FD07A; }
.pf-m.r-lose { border-left-color: #FF4A3D; }
.pf-m-res { font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.pf-m.r-win .pf-m-res { color: #3FD07A; }
.pf-m.r-lose .pf-m-res { color: #FF8A73; }
.pf-m-id { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ic); color: var(--ic); border-radius: 4px; font-family: var(--f-display); font-size: 16px; line-height: 1; }
.pf-m-main { display: flex; flex-direction: column; min-width: 0; }
.pf-m-main b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-m-main b i { font-style: normal; font-size: 10px; padding: 0 4px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--mute); }
.pf-m-main small { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-m-at { font-size: 10.5px; color: var(--mute); }
.pf-more { align-self: center; }
.pf-bk { grid-column: 2; }
.pf-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-code { display: flex; gap: 6px; align-items: stretch; }
.pf-code textarea { flex: 1; min-width: 0; resize: vertical; font-size: 11px; padding: 6px 8px; background: var(--bg-2); color: var(--fg); border: 1px solid var(--line); border-radius: 4px; word-break: break-all; }
.pf-col { display: flex; flex-direction: column; gap: 6px; }
.pf-filebtn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg-2); font-size: 13px; cursor: pointer; }
.pf-filebtn input { display: none; }
.pf-pend { border: 1px solid #E5A50A; border-radius: 6px; padding: 10px; background: rgba(229,165,10,.06); display: flex; flex-direction: column; gap: 6px; }
.pf-pend p { margin: 0; font-size: 12.5px; }
.pf-pend ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--mute); }
.pf-msg { margin: 0; font-size: 12.5px; }
.pf-msg.ok { color: #3FD07A; }
.pf-msg.err { color: #FF8A73; }
@media (max-width: 760px) and (orientation: portrait) { .pf { grid-template-columns: 1fr; } .pf-hist, .pf-bk { grid-column: auto; } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .page-profile .pg.pg-wide #pf-root { min-height: 0; overflow: auto; }
  .pf { gap: 6px; }
  .pf .panel { gap: 6px; padding: 8px 10px; }
  .pf-name input { font-size: 15px; padding: 4px 8px; }
  .pf-st { padding: 5px 2px; }
  .pf-st b { font-size: 16px; }
  .pf-inv-r { padding: 4px 8px; font-size: 11px; grid-template-columns: 34px 1fr auto auto; }
  .pf-ms { max-height: none; }
  .pf-m { grid-template-columns: 44px 24px minmax(0, 1fr) auto; padding: 4px 6px; gap: 6px; }
  .pf-m-id { width: 22px; height: 22px; font-size: 13px; }
}

/* ---------- smooth floating cards ----------
   The floats move on their own compositor layer with 3D translation (sub-pixel smooth, no snapping),
   and the Codex card glow is a box-shadow layer behind the card instead of a drop-shadow filter:
   a filter over a playing video is redrawn on every frame, which made the float stutter. */
.cx-float { animation: cx-bob3d 4.2s ease-in-out infinite; will-change: transform; }
@keyframes cx-bob3d { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
.cx-holder, .cx-holder.r-R, .cx-holder.r-SR, .cx-holder.r-UR, .cx-holder.r-SAR { filter: none; }
.cx-holder::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: calc(3 * var(--mm)); pointer-events: none; box-shadow: 0 22px 30px rgba(0,0,0,.6); }
.cx-holder.r-R::before { box-shadow: 0 0 10px var(--rc), 0 22px 30px rgba(0,0,0,.6); }
.cx-holder.r-SR::before { box-shadow: 0 0 16px var(--rc), 0 0 30px -6px var(--rc), 0 22px 30px rgba(0,0,0,.6); }
.cx-holder.r-UR::before { box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 7px rgba(255,255,255,.7), 0 0 22px var(--rc), 0 0 46px -6px var(--rc), 0 22px 30px rgba(0,0,0,.6); }
.cx-holder.r-SAR::before { box-shadow: 0 0 18px rgba(246,231,176,.8), 0 0 40px rgba(255,62,165,.35), 0 22px 30px rgba(0,0,0,.6); }
.gc2 .gc-show-c.s1 { animation: gc-float3d 5s ease-in-out infinite; will-change: transform; }
@keyframes gc-float3d { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -1.6%, 0); } }
@media (prefers-reduced-motion: reduce) { .cx-float, .gc2 .gc-show-c.s1 { animation: none; } }

/* ---------- Deep Salvage pools: tabs above the banner, a still key art with the UR card beside it ---------- */
.gc.gc2 { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "tabs side" "hero side"; }
.gc2 .gc-banners { grid-area: tabs; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px; }
.gc2 .gc-hero { grid-area: hero; }
.gc2 .gc-side { grid-area: side; }
.gc-bn { position: relative; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 12px 0 0; overflow: hidden; cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-radius: 6px; background: #0B0C10; color: var(--fg); transition: border-color .2s, box-shadow .2s; }
.gc-bn img { width: 72px; height: 100%; object-fit: cover; object-position: 50% 18%; flex: none; filter: saturate(.7) brightness(.7); transition: filter .2s; }
.gc-bn::after { content: ""; position: absolute; left: 48px; top: 0; bottom: 0; width: 40px; background: linear-gradient(90deg, transparent, #0B0C10); pointer-events: none; }
.gc-bn span { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gc-bn small { font-size: 9.5px; letter-spacing: .14em; color: var(--bc); }
.gc-bn b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-bn:hover { border-color: rgba(236,232,223,.35); }
.gc-bn.on { border-color: var(--bc); box-shadow: inset 0 0 0 1px var(--bc), 0 0 18px -6px var(--bc); }
.gc-bn.on img { filter: none; }
.gc-bn.on::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bc); z-index: 2; }
/* the banner */
.gc2 .gc-hero { background: #07080B; }
.gc-key { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; }
.gc-key img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
.gc-key3 { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
.gc-key3 img { object-position: 50% 30%; filter: brightness(.75); }
.gc-key-fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,8,11,0) 30%, rgba(7,8,11,.75) 56%, #07080B 66%),
    linear-gradient(0deg, rgba(7,8,11,.95) 0%, rgba(7,8,11,.4) 32%, rgba(7,8,11,0) 55%); }
.gc-hero.std .gc-key-fade { background: linear-gradient(0deg, rgba(7,8,11,.96) 0%, rgba(7,8,11,.6) 40%, rgba(7,8,11,.15) 75%); }
.gc-hero.pick::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 40%, transparent), inset 0 0 80px -30px var(--bc); border-radius: inherit; }
/* the UR card beside the picture: no float, no filter */
.gc-urcard { position: absolute; right: 5%; top: 50%; transform: translateY(-54%); z-index: 3; --mm: min(.84cqh, .44cqw); }
.gc-urcard > .cn { --mm: inherit; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 0 28px -4px var(--bc), 0 18px 30px rgba(0,0,0,.6); }
.gc2 .gc-hero .gc-copy { top: auto; width: 58%; background: none; padding: 20px 22px; z-index: 4; }
.gc2 .gc-hero.std .gc-copy { width: 70%; }
.gc2 .gc-copy p { margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.gc2 .gc-copy h3 { text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.gc-pick { border-color: color-mix(in srgb, var(--bc, #FF3EA5) 70%, transparent); background: color-mix(in srgb, var(--bc, #FF3EA5) 12%, transparent); }
.gc-pick span { background: var(--bc, #FF3EA5); color: #0B0C10; }
.gc-up { font-size: 12px; color: var(--bc, #CFCBC1); font-weight: 700; }
.gc-hero.std .gc-up { color: #CFCBC1; }
.gc-up-n { display: block; font-style: normal; font-size: 10.5px; color: var(--mute); }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .page-gacha .gc.gc2 { grid-template-rows: auto minmax(0, 1fr); }
  .page-gacha .gc2 .gc-banners { gap: 5px; }
  .gc-bn { height: 38px; gap: 6px; padding-right: 6px; }
  .gc-bn img { width: 46px; }
  .gc-bn::after { left: 28px; width: 20px; }
  .gc-bn small { font-size: 7px; }
  .gc-bn b { font-size: 11px; }
  .page-gacha .gc2 .gc-hero .gc-copy { padding: 8px 10px; width: 60%; }
  .gc-up { font-size: 9px; }
  .gc-up-n { font-size: 8px; }
}
.gc2 .gc-rates li.up { background: color-mix(in srgb, var(--rc) 12%, transparent); }
.gc2 .gc-rates li.up span { font-weight: 700; }

/* pick-up banners: the key art across the whole banner, like the Data Graveyard (no card beside it) */
.gc-key.gc-key1 { width: 100%; }
.gc-key.gc-key1 img { object-position: 60% 22%; }
.gc-hero.pick .gc-key-fade { background: linear-gradient(0deg, rgba(7,8,11,.96) 0%, rgba(7,8,11,.6) 34%, rgba(7,8,11,.1) 70%), linear-gradient(90deg, rgba(7,8,11,.55) 0%, rgba(7,8,11,0) 50%); }

/* =====================================================================
   Home page as a mobile-game lobby (.lobby): player bar on top, logo and play buttons on the left,
   animated UR key art on the right at about card size (never stretched past the art's resolution),
   a dock along the bottom with the tips beside it.
   ===================================================================== */
.lobby { --lb-side: max(28px, calc((100vw - 1240px) / 2)); position: fixed; inset: 0; overflow: hidden; background: #07080B; color: var(--fg);
  display: grid; grid-template-columns: minmax(340px, 520px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top top" "main feat" "dock tips"; gap: 14px 32px;
  padding: max(16px, env(safe-area-inset-top)) max(var(--lb-side), env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(var(--lb-side), env(safe-area-inset-left)); }
/* key art: the card picture whole (no crop), at most about 3/4 of the screen height, edges fading out */
.lb-art { position: absolute; z-index: 0; pointer-events: none; top: 0; bottom: 0; right: max(0px, calc(var(--lb-side) - 60px));
  height: 100%; width: auto; aspect-ratio: 720 / 1008; max-width: 66%;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 26%); mask: linear-gradient(90deg, transparent 0%, #000 26%); }
/* wide screens: the art no longer reaches the screen's right edge, so that side fades out too */
@media (min-width: 1400px) {
  .lb-art { -webkit-mask: linear-gradient(90deg, transparent 0%, #000 26%, #000 80%, transparent 100%); mask: linear-gradient(90deg, transparent 0%, #000 26%, #000 80%, transparent 100%); } }
.lb-art-s { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.lb-art-s.on { opacity: 1; }
.lb-art-s .sar-bg { position: absolute; inset: 0; }
.lb-art-s .sar-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.lb-art-s video.sar-art { opacity: 0; }
.lb-art-s video.sar-art.on { opacity: 1; }
.lb-art-fade { position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(7,8,11,.95) 0%, rgba(7,8,11,.55) 18%, rgba(7,8,11,0) 38%),
    linear-gradient(180deg, rgba(7,8,11,.6) 0%, rgba(7,8,11,0) 16%); }
.lb-grid { position: absolute; inset: 0; opacity: .35; mix-blend-mode: screen;
  background-image: linear-gradient(rgba(63,199,232,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(63,199,232,.08) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask: linear-gradient(90deg, transparent, #000 40%); mask: linear-gradient(90deg, transparent, #000 40%); }
.lb-scan { position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(transparent, rgba(63,199,232,.07), transparent); animation: lb-scan 7s linear infinite; }
@keyframes lb-scan { to { top: 100%; } }
/* player bar */
.lb-top { grid-area: top; position: relative; z-index: 2; display: flex; align-items: center; min-height: 44px; }
.lb-player { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border: 1px solid rgba(236,232,223,.16); border-radius: 30px;
  background: rgba(10,11,15,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--fg); cursor: pointer; text-align: left; }
.lb-player:hover { border-color: rgba(236,232,223,.4); }
.lb-av { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; color: #0B0C10;
  background: linear-gradient(135deg, #F0B429, #18C8E8); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.lb-pn { display: flex; flex-direction: column; line-height: 1.2; }
.lb-pn b { font-size: 14px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pn small { font-size: 10.5px; color: var(--mute); letter-spacing: .06em; }
.lb-chips { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding-left: 12px; border-left: 1px solid rgba(236,232,223,.16); font-size: 14px; font-weight: 700; }
.lb-chips i { width: 11px; height: 11px; background: #3FC7E8; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
/* left column */
.lb-main { grid-area: main; position: relative; z-index: 2; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.lb-logo small.hm-status { position: relative; display: block; height: 1.4em; color: #BDB9AF; letter-spacing: .22em; font-size: 11px; }
.lb-logo .nn-logo h1.nn-word { font-size: clamp(40px, 5.2vw, 66px); }
.lb-logo p { margin: 10px 0 0; color: #CFCBC1; font-size: 14px; }
.lb-play { display: flex; flex-direction: column; gap: 10px; }
.lb-go { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 20px 14px 16px; text-align: left; cursor: pointer;
  border: 1px solid rgba(63,199,232,.45); background: rgba(10,12,16,.78); color: var(--fg); border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); transition: transform .15s, background .2s, box-shadow .2s; }
.lb-go:hover { transform: translateX(4px); background: rgba(18,22,30,.9); }
.lb-go-ic { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 18px; border: 1.5px solid currentColor; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); color: #3FC7E8; }
.lb-go-tx b { display: block; font-size: 20px; font-weight: 900; letter-spacing: .04em; }
.lb-go-tx small { display: block; margin-top: 2px; font-size: 12px; color: var(--mute); }
.lb-go-ar { font-size: 24px; color: var(--mute); }
.lb-go.main { background: linear-gradient(100deg, #ECE8DF 0%, #F6F2E8 60%, #DCD6C8 100%); color: #0B0C10; border-color: transparent; padding: 18px 22px 18px 18px; position: relative; overflow: hidden; }
.lb-go.main .lb-go-ic { color: #0B0C10; background: rgba(11,12,16,.06); }
.lb-go.main .lb-go-tx b { font-size: 24px; }
.lb-go.main .lb-go-tx small { color: #4A4840; }
.lb-go.main .lb-go-ar { color: #0B0C10; }
.lb-go.main::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.7) 50%, transparent 62%) -120% 0 / 240% 100% no-repeat; animation: lb-sheen 4.5s ease-in-out infinite; }
@keyframes lb-sheen { 55%, 100% { background-position: 220% 0; } }
.lb-learn { display: flex; flex-direction: column; gap: 8px; }
.lb-lbl { font-size: 10.5px; letter-spacing: .2em; color: var(--mute); }
.lb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lb-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; text-align: left; cursor: pointer; min-width: 0;
  border: 1px solid var(--line); border-radius: 6px; background: rgba(12,13,17,.8); color: var(--fg); transition: border-color .2s, transform .15s; }
.lb-tile:hover { border-color: rgba(236,232,223,.4); transform: translateY(-2px); }
.lb-ic { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 50%; font-size: 14px; }
.lb-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-tx b { font-size: 14px; }
.lb-tx small { font-size: 11px; color: var(--mute); line-height: 1.35; }
/* featured operator */
.lb-feature { grid-area: feat; position: relative; z-index: 2; align-self: end; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-height: 96px; min-width: 260px; }
.lb-plate { position: absolute; right: 0; bottom: 46px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .9s, transform .9s; }
.lb-plate.on { opacity: 1; transform: none; }
.lb-plate span { font-size: 11px; letter-spacing: .2em; color: #FF8FC8; text-shadow: 0 0 10px rgba(255,62,165,.6); }
.lb-plate b { font-size: clamp(26px, 3vw, 40px); font-weight: 900; line-height: 1.1; background: linear-gradient(115deg, #FF3EA5 0%, #FF9AD0 20%, #FFFFFF 32%, #9FEBFF 46%, #3EC8FF 60%, #B07CFF 78%, #FF3EA5 100%);
  background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sar-sheen 6s linear infinite; filter: drop-shadow(0 2px 6px rgba(0,0,0,.8)); }
.lb-plate small { font-size: 11px; letter-spacing: .3em; color: rgba(236,232,223,.7); }
.lb-feat-go { margin-top: auto; padding: 7px 16px; border: 1px solid rgba(255,62,165,.7); background: rgba(40,8,26,.6); color: #FFD2EC; border-radius: 20px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.lb-feat-go:hover { background: rgba(255,62,165,.2); }
/* dock */
.lb-dock { grid-area: dock; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-self: end; }
.lb-dk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; cursor: pointer; min-width: 0;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(12,13,17,.85); color: var(--fg); transition: border-color .2s, transform .15s; }
.lb-dk:hover { border-color: rgba(236,232,223,.4); transform: translateY(-2px); }
.lb-dk-ic { font-size: 22px; line-height: 1; }
.lb-dk b { font-size: 13px; white-space: nowrap; }
.lb-dk.hot { border-color: rgba(255,62,165,.7); box-shadow: 0 0 22px -8px #FF3EA5; }
.lb-dk.hot .lb-dk-ic { color: #FF3EA5; text-shadow: 0 0 10px rgba(255,62,165,.7); }
.lb-badge { position: absolute; top: -8px; right: 6px; font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; padding: 1px 5px; border-radius: 2px; background: #FF3EA5; color: #fff; }
/* tips */
.lb-tips { grid-area: tips; position: relative; z-index: 2; align-self: end; justify-self: end; width: min(460px, 100%); }
.lb-tips .hm-tips { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(10,11,15,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb-tips .ht-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lb-tips .ht-lbl { align-self: flex-start; }
.lb-tips .ht-tx { min-height: 0; font-size: 13.5px; line-height: 1.5; }
.lb-foot { position: absolute; right: max(var(--lb-side), env(safe-area-inset-right)); bottom: 4px; z-index: 2; font-size: 9.5px; letter-spacing: .14em; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .lb-scan, .lb-go.main::after, .lb-plate b { animation: none; } }

/* phones, landscape */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .lobby { grid-template-columns: minmax(280px, 48%) minmax(0, 1fr); gap: 6px 16px;
    padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .lb-art { right: 0; max-width: 62%; }
  .lb-top { min-height: 34px; }
  .lb-player { padding: 3px 10px 3px 3px; gap: 7px; }
  .lb-av { width: 26px; height: 26px; font-size: 12px; }
  .lb-pn b { font-size: 11.5px; max-width: 110px; }
  .lb-pn small { font-size: 8.5px; }
  .lb-chips { font-size: 11px; padding-left: 8px; margin-left: 2px; }
  .lb-main { gap: 8px; justify-content: center; }
  .lb-logo small.hm-status { display: none; }
  .lb-logo .nn-logo h1.nn-word { font-size: clamp(26px, 5.4vw, 38px); }
  .lb-logo .nn-logo .nn-lock { margin-top: 0; }
  .lb-logo p { margin-top: 4px; font-size: 10px; }
  .lb-play { flex-direction: row; gap: 6px; }
  .lb-go { flex: 1; min-width: 0; grid-template-columns: 26px minmax(0, 1fr); gap: 7px; padding: 8px 10px 8px 8px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
  .lb-go.main { padding: 8px 10px 8px 8px; }
  .lb-go-ic { width: 26px; height: 26px; font-size: 11px; }
  .lb-go-tx b, .lb-go.main .lb-go-tx b { font-size: 14px; }
  .lb-go-tx small { font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lb-go-ar { display: none; }
  .lb-learn { gap: 4px; }
  .lb-lbl { font-size: 8px; }
  .lb-tiles { gap: 5px; }
  .lb-tile { flex-direction: row; align-items: center; gap: 6px; padding: 6px 7px; }
  .lb-ic { width: 22px; height: 22px; font-size: 11px; flex: none; }
  .lb-tx b { font-size: 11px; white-space: nowrap; }
  .lb-tx small { display: none; }
  .lb-feature { min-height: 60px; gap: 6px; }
  .lb-plate { bottom: 32px; }
  .lb-plate span { font-size: 8px; }
  .lb-plate b { font-size: 22px; }
  .lb-plate small { font-size: 8px; }
  .lb-feat-go { padding: 4px 10px; font-size: 10px; }
  .lb-dock { gap: 5px; }
  .lb-dk { flex-direction: row; justify-content: center; gap: 5px; padding: 7px 4px; border-radius: 6px; }
  .lb-dk-ic { font-size: 14px; }
  .lb-dk b { font-size: 10.5px; }
  .lb-badge { top: -7px; right: 3px; font-size: 6.5px; padding: 0 3px; }
  .lb-tips { width: 100%; }
  .lb-tips .hm-tips { padding: 5px 8px; gap: 6px; }
  .lb-tips .ht-arrow { width: 22px; height: 22px; font-size: 13px; }
  .lb-tips .ht-lbl { font-size: 8px; padding: 1px 5px; }
  .lb-tips .ht-tx { font-size: 10px; line-height: 1.35; }
  .lb-foot { display: none; }
}
/* phones, portrait */
@media (max-width: 700px) and (orientation: portrait) {
  .lobby { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "top" "main" "feat" "dock"; gap: 10px;
    padding: max(10px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom)); }
  .lb-art { right: 0; left: 0; height: 62%; bottom: auto; width: 100%; max-width: none; aspect-ratio: auto; -webkit-mask: none; mask: none; }
  .lb-main { justify-content: flex-end; gap: 12px; }
  .lb-logo .nn-logo h1.nn-word { font-size: 38px; }
  .lb-feature { display: none; }
  .lb-tips { display: none; }
  .lb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lb-tx small { display: none; }
  .lb-dk { padding: 9px 4px 8px; }
  .lb-dk b { font-size: 11px; }
  .lb-foot { display: none; }
}

/* ---------- boot: press any key ---------- */
.nb-press { margin-top: 26px; display: flex; flex-direction: column; gap: 4px; }
.nb-press b { font-family: var(--f-mono); font-size: 14px; font-weight: 600; letter-spacing: .4em; color: #ECE8DF; animation: nb-press 1.4s ease-in-out 2.2s infinite; }
.nb-press small { font-size: 11px; color: #8C897F; letter-spacing: .1em; }
@keyframes nb-press { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .nb-press b { animation: none; } }

/* ---------- first visit: operator registration ---------- */
.nn-reg { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, rgba(24,200,232,.08), transparent 60%), rgba(6,7,10,.94); animation: nr-in .35s ease-out both; transition: opacity .35s; }
.nn-reg.out { opacity: 0; }
@keyframes nr-in { from { opacity: 0; } }
.nr-box { width: min(460px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 20px; border: 1px solid rgba(24,200,232,.35); border-radius: 6px;
  background: linear-gradient(180deg, #0F1117, #0A0B0F); box-shadow: 0 0 40px -12px rgba(24,200,232,.45);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.nr-box > small.mono { font-size: 10.5px; letter-spacing: .2em; color: #18C8E8; }
.nr-box h2 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: .04em; }
.nr-box p { margin: 0; font-size: 13px; line-height: 1.6; color: #BDB9AF; }
.nr-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.nr-av { width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 22px; color: #0B0C10;
  background: linear-gradient(135deg, #F0B429, #18C8E8); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.nr-in { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nr-in small { font-size: 10px; letter-spacing: .16em; color: var(--mute); }
.nr-in input { width: 100%; font-size: 20px; font-weight: 900; padding: 8px 10px; background: #07080B; border: 1px solid var(--line-2); border-radius: 4px; color: var(--fg); }
.nr-in input:focus { outline: none; border-color: #18C8E8; box-shadow: 0 0 0 2px rgba(24,200,232,.25); }
.nr-go { margin-top: 6px; font-size: 16px; padding: 11px 18px; }
.nr-note { font-size: 11px; color: var(--mute); text-align: center; }

/* ---------- setup pages: the profile name, read only ---------- */
.name-show { display: flex; align-items: center; gap: 10px; min-width: 0; }
.name-show .ns-av { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; color: #0B0C10;
  background: linear-gradient(135deg, #F0B429, #18C8E8); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.name-show b { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-show button { margin-left: auto; padding: 4px 12px; font-size: 12px; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .nr-box { gap: 7px; padding: 14px 18px 12px; }
  .nr-box h2 { font-size: 18px; }
  .nr-box p { font-size: 11px; line-height: 1.45; }
  .nr-av { width: 40px; height: 40px; font-size: 17px; }
  .nr-in input { font-size: 16px; padding: 5px 8px; }
  .nr-go { padding: 8px 14px; font-size: 14px; margin-top: 2px; }
  .nb-press { margin-top: 12px; }
}

/* =====================================================================
   Home lobby: texture (a deep-net terminal), whole icons, the tips in the left column.
   ===================================================================== */
/* background: fine grain, a faint grid fading in from the right, a dark vignette */
.lobby { background:
    radial-gradient(ellipse 80% 70% at 30% 45%, rgba(24,200,232,.05), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
    #07080B; }
.lobby::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(63,199,232,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(63,199,232,.045) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask: radial-gradient(ellipse 70% 80% at 35% 50%, #000 20%, transparent 80%); mask: radial-gradient(ellipse 70% 80% at 35% 50%, #000 20%, transparent 80%); }
.lobby::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
/* HUD: corner brackets round the screen, a terminal label down the left edge */
.lb-hud { position: absolute; inset: 10px; z-index: 1; pointer-events: none; --hc: rgba(63,199,232,.45);
  background:
    linear-gradient(var(--hc), var(--hc)) left top / 26px 1px no-repeat, linear-gradient(var(--hc), var(--hc)) left top / 1px 26px no-repeat,
    linear-gradient(var(--hc), var(--hc)) right top / 26px 1px no-repeat, linear-gradient(var(--hc), var(--hc)) right top / 1px 26px no-repeat,
    linear-gradient(var(--hc), var(--hc)) left bottom / 26px 1px no-repeat, linear-gradient(var(--hc), var(--hc)) left bottom / 1px 26px no-repeat,
    linear-gradient(var(--hc), var(--hc)) right bottom / 26px 1px no-repeat, linear-gradient(var(--hc), var(--hc)) right bottom / 1px 26px no-repeat; }
.lb-hud span { position: absolute; left: 3px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg) translateY(50%); transform-origin: center;
  white-space: nowrap; font-size: 9px; letter-spacing: .32em; color: rgba(236,232,223,.22); }
.lb-hud span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; vertical-align: middle; background: #2BD07A; box-shadow: 0 0 6px #2BD07A; }

/* play buttons: glass with fine hatching, a light edge on top, glowing lines along the cut corners */
.lb-go { position: relative; isolation: isolate;
  background:
    linear-gradient(225deg, transparent 10.6px, rgba(63,199,232,.85) 10.6px, rgba(63,199,232,.85) 12.4px, transparent 12.4px),
    linear-gradient(45deg, transparent 10.6px, rgba(63,199,232,.85) 10.6px, rgba(63,199,232,.85) 12.4px, transparent 12.4px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(22,27,36,.94), rgba(10,12,16,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.6); }
.lb-go:hover { background:
    linear-gradient(225deg, transparent 10.6px, #7FE3F5 10.6px, #7FE3F5 12.4px, transparent 12.4px),
    linear-gradient(45deg, transparent 10.6px, #7FE3F5 10.6px, #7FE3F5 12.4px, transparent 12.4px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(26,33,44,.96), rgba(12,15,20,.96)); }
.lb-go.main { background:
    linear-gradient(225deg, transparent 10.6px, rgba(11,12,16,.55) 10.6px, rgba(11,12,16,.55) 12.4px, transparent 12.4px),
    linear-gradient(45deg, transparent 10.6px, rgba(11,12,16,.55) 10.6px, rgba(11,12,16,.55) 12.4px, transparent 12.4px),
    repeating-linear-gradient(135deg, rgba(11,12,16,.035) 0 1px, transparent 1px 6px),
    linear-gradient(100deg, #EFEBE2 0%, #FAF7EF 55%, #DAD4C5 100%);
  box-shadow: inset 4px 0 0 #F0B429, inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(0,0,0,.18); }
.lb-go.main:hover { background:
    linear-gradient(225deg, transparent 10.6px, rgba(11,12,16,.7) 10.6px, rgba(11,12,16,.7) 12.4px, transparent 12.4px),
    linear-gradient(45deg, transparent 10.6px, rgba(11,12,16,.7) 10.6px, rgba(11,12,16,.7) 12.4px, transparent 12.4px),
    repeating-linear-gradient(135deg, rgba(11,12,16,.035) 0 1px, transparent 1px 6px),
    linear-gradient(100deg, #F6F2E9 0%, #FFFDF6 55%, #E2DCCD 100%); }
.lb-go-code { position: absolute; right: 26px; top: 7px; font-style: normal; font-size: 9px; letter-spacing: .2em; color: rgba(236,232,223,.35); }
.lb-go.main .lb-go-code { color: rgba(11,12,16,.4); }
/* the icon: a whole hexagon (SVG) with the glyph in the middle */
.lb-go-ic { position: relative; border: 0; clip-path: none; background: none; }
.lb-go.main .lb-go-ic { background: none; }
.lb-hex { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lb-hex polygon { fill: color-mix(in srgb, currentColor 10%, transparent); stroke: currentColor; stroke-width: 1.6; }
.lb-go-ic b { position: relative; font-size: 16px; line-height: 1; }
.lb-go:not(.main) .lb-hex { filter: drop-shadow(0 0 4px rgba(63,199,232,.6)); }

/* learning tiles and the dock: glass panels with corner brackets */
.lb-tile, .lb-dk { position: relative; --bk: rgba(63,199,232,.55);
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(20,24,32,.88), rgba(10,11,15,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.lb-tile::before, .lb-tile::after, .lb-dk::before, .lb-dk::after { content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none; transition: width .2s, height .2s; }
.lb-tile::before, .lb-dk::before { left: -1px; top: -1px; border-left: 1.5px solid var(--bk); border-top: 1.5px solid var(--bk); border-top-left-radius: 6px; }
.lb-tile::after, .lb-dk::after { right: -1px; bottom: -1px; border-right: 1.5px solid var(--bk); border-bottom: 1.5px solid var(--bk); border-bottom-right-radius: 6px; }
.lb-tile:hover, .lb-dk:hover { --bk: #7FE3F5; }
.lb-tile:hover::before, .lb-tile:hover::after, .lb-dk:hover::before, .lb-dk:hover::after { width: 16px; height: 16px; }
.lb-dk.hot { --bk: rgba(255,62,165,.85); }
.lb-ic { box-shadow: inset 0 0 0 3px rgba(7,8,11,.9), inset 0 0 0 4px rgba(63,199,232,.25); }

/* tips: a small terminal readout in the left column, under the learning tiles */
.lb-feature { grid-area: auto; grid-column: 2; grid-row: 2 / 4; }
.lb-main .lb-tips { grid-area: auto; align-self: stretch; justify-self: stretch; width: 100%; }
.lb-main .lb-tips .hm-tips { padding: 8px 10px; gap: 8px; border: 1px solid rgba(63,199,232,.22); border-left: 2px solid rgba(63,199,232,.7); border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(0deg, rgba(63,199,232,.025) 0 1px, transparent 1px 3px), rgba(8,10,14,.85); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lb-main .lb-tips .ht-tx { font-size: 12.5px; line-height: 1.5; min-height: 3em; }
.lb-main .lb-tips .ht-arrow { width: 24px; height: 24px; font-size: 14px; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .lb-hud { inset: 5px; } .lb-hud span { display: none; }
  .lb-go-code { display: none; }
  .lb-go-ic b { font-size: 11px; }
  .lb-main .lb-tips .hm-tips { padding: 4px 6px; gap: 5px; }
  .lb-main .lb-tips .ht-tx { font-size: 9.5px; line-height: 1.35; min-height: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .lb-main .lb-tips .ht-lbl { font-size: 7px; padding: 0 4px; }
  .lb-main .lb-tips .ht-arrow { width: 18px; height: 18px; font-size: 11px; }
  .lb-tile::before, .lb-tile::after, .lb-dk::before, .lb-dk::after { width: 6px; height: 6px; }
}
@media (max-width: 700px) and (orientation: portrait) { .lb-hud span { display: none; } .lb-main .lb-tips { display: none; } }

/* =====================================================================
   Home lobby: the dock sits in the left column under the learning tiles; the tips (logs)
   run along the bottom, centered and wide, over the art, with no panel behind them.
   ===================================================================== */
.lobby { grid-template-areas: "top top" "main feat" "tips tips"; }
.lb-feature { grid-row: auto; grid-area: feat; align-self: end; }
.lb-main .lb-dock { grid-area: auto; align-self: stretch; margin-top: 2px; }
.lobby > .lb-tips { grid-area: tips; position: relative; z-index: 3; justify-self: center; align-self: end; width: min(860px, 100%); margin-bottom: clamp(18px, 4vh, 44px); }
.lobby > .lb-tips .hm-tips { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 18px;
  padding: 6px 0 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lobby > .lb-tips .ht-body { align-items: center; text-align: center; gap: 5px; }
.lobby > .lb-tips .ht-lbl { align-self: center; font-size: 11.5px; letter-spacing: .3em; color: #8FD9EC; text-shadow: 0 0 8px rgba(63,199,232,.6); }
.lobby > .lb-tips .k-world .ht-lbl { color: #7FE3D0; text-shadow: 0 0 8px rgba(127,227,208,.55); }
.lobby > .lb-tips .ht-lbl::before, .lobby > .lb-tips .ht-lbl::after { content: ""; display: inline-block; width: 28px; height: 1px; margin: 0 12px; vertical-align: middle; background: currentColor; opacity: .55; }
.lobby > .lb-tips .ht-tx { justify-content: center; min-height: 3em; font-size: 17px; font-weight: 700; line-height: 1.5; color: #F2EEE5;
  text-shadow: 0 1px 2px #000, 0 0 14px rgba(0,0,0,.95), 0 0 30px rgba(0,0,0,.8); }
.lobby > .lb-tips .ht-arrow { width: 32px; height: 32px; font-size: 24px; color: #BDB9AF; text-shadow: 0 0 8px #000; }
.lobby > .lb-tips .ht-arrow:hover { color: #7FE3F5; }
/* a soft dark band behind the text so it stays readable over the art (no box, fades out at both ends) */
.lobby > .lb-tips::before { content: ""; position: absolute; left: -10%; right: -10%; top: -14px; bottom: -14px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 55%, rgba(5,6,9,.75), transparent 100%); }
.lb-foot { bottom: 4px; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .lb-main { gap: 6px; }
  .lb-main .lb-dock { margin-top: 0; }
  .lobby > .lb-tips { width: min(640px, 100%); margin-bottom: 8px; }
  /* the left column sits nearer the middle, and a little wider, so less black shows between it and the art */
  .lobby { grid-template-columns: minmax(300px, 50%) minmax(0, 1fr); padding-left: max(9vw, env(safe-area-inset-left)); }
  .lobby > .lb-tips .hm-tips { padding: 0; gap: 2px 10px; }
  .lobby > .lb-tips .ht-body { gap: 1px; }
  .lobby > .lb-tips .ht-lbl { font-size: 8px; }
  .lobby > .lb-tips .ht-lbl::before, .lobby > .lb-tips .ht-lbl::after { width: 16px; margin: 0 6px; }
  .lobby > .lb-tips .ht-tx { min-height: 0; font-size: 11.5px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .lobby > .lb-tips .ht-arrow { width: 22px; height: 22px; font-size: 16px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .lobby { grid-template-areas: "top" "main" "feat"; grid-template-rows: auto minmax(0, 1fr) auto; }
  .lobby > .lb-tips { display: none; }
}
/* phones: buttons show their names only, no descriptions */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape), (max-width: 700px) and (orientation: portrait) {
  .lb-go-tx small, .lb-tx small { display: none; }
  .lb-go-tx b, .lb-go.main .lb-go-tx b { font-size: 15px; }
}
/* salvage pick-up banner: a note on what a UR operator brings into the game */
.gc2 .gc-copy p.gc-perk { display: flex; align-items: flex-start; gap: 8px; max-width: 520px; padding: 6px 10px; font-size: 12.5px; line-height: 1.55; color: #ECE8DF;
  border-left: 2px solid var(--bc, #FF3EA5); background: linear-gradient(90deg, color-mix(in srgb, var(--bc, #FF3EA5) 18%, transparent), transparent);
  -webkit-line-clamp: unset; overflow: visible; }
.gc-perk b { flex: none; margin-top: 1px; padding: 0 5px; font-size: 10px; letter-spacing: .1em; line-height: 1.6; color: #0B0C10; background: var(--bc, #FF3EA5); border-radius: 2px; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .page-gacha .gc2 .gc-copy p.gc-perk { display: flex; gap: 5px; padding: 3px 6px; font-size: 9px; line-height: 1.35; }
  .gc-perk b { font-size: 7.5px; padding: 0 3px; }
}
/* home plate: the UR name is drawn by the shared emblem + name tag (its own foil and coating) */
.lb-plate b.lb-pl-n { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; animation: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.8)); }
.lb-plate b.lb-pl-n .sar-nt-n { font-size: inherit; }
.gc2 .gc-rates li.up .sar-nt { font-weight: 700; }
/* tutorial (computer): progress dots on an even grid, so a wrapped row lines up under the first */
@media (min-width: 1025px) {
  .tut-dots { display: grid; grid-template-columns: repeat(auto-fill, 12px); gap: 6px; justify-content: start; }
  .tut-dot, .tut-dot.gap { width: 12px; height: 12px; margin: 0; }
}
/* salvage: buttons that open the card face full size */
.gc-views { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.gc-views > span { font-size: 10px; letter-spacing: .16em; color: #8C897F; margin-right: 2px; }
.gc-view { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: zoom-in;
  color: #ECE8DF; background: rgba(8,10,14,.72); border: 1px solid var(--bc, rgba(236,232,223,.35)); border-radius: 3px; }
.gc-view svg { width: 15px; height: 15px; flex: none; color: var(--bc, #CFCBC1); }
.gc-view:hover { background: color-mix(in srgb, var(--bc, #ECE8DF) 20%, rgba(8,10,14,.8)); }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .gc-views { gap: 4px; margin-top: 0; }
  .gc-views > span { font-size: 7.5px; }
  .gc-view { padding: 3px 8px; font-size: 9.5px; gap: 4px; }
  .gc-view svg { width: 11px; height: 11px; }
}
/* salvage, standard pool: the card gallery (still thumbnails; the game's card zoom sits above it) */
.gc-gal { position: fixed; inset: 0; z-index: 47; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,5,8,.82); animation: gc-gal-in .2s ease-out both; }
@keyframes gc-gal-in { from { opacity: 0; } }
.gc-gal-box { width: min(1080px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px;
  background: #0B0C10; border: 1px solid rgba(236,232,223,.16); border-top: 2px solid var(--rc); border-radius: 4px; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.gc-gal-box header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gc-gal-box header > b { font-size: 18px; font-weight: 900; letter-spacing: .04em; }
.gc-gal-box header > small { font-size: 11px; color: #8C897F; }
.gc-gal-tabs { display: flex; gap: 6px; }
.gc-gal-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; color: #BDB9AF; background: transparent; border: 1px solid rgba(236,232,223,.18); border-radius: 3px; cursor: pointer; }
.gc-gal-tab b { color: var(--rc); font-size: 11px; letter-spacing: .1em; }
.gc-gal-tab.on { color: #F4F1EA; border-color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent); }
.gc-gal-x { margin-left: auto; width: 32px; height: 32px; padding: 0; font-size: 16px; color: #BDB9AF; background: transparent; border: 1px solid rgba(236,232,223,.2); border-radius: 3px; cursor: pointer; }
.gc-gal-x:hover { color: #fff; border-color: rgba(236,232,223,.5); }
.gc-gal-grid { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; padding: 2px 4px 4px 2px; }
.gc-gal-it { position: relative; display: block; padding: 0; aspect-ratio: 720 / 1008; overflow: hidden; cursor: zoom-in; background: #111318;
  border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); border-radius: 5px; contain: layout paint; }
.gc-gal-it img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.gc-gal-it span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 5px; padding: 18px 7px 6px; background: linear-gradient(transparent, rgba(4,5,8,.92) 55%); }
.gc-gal-it i { width: 15px; height: 15px; flex: none; color: var(--rc); display: inline-flex; }
.gc-gal-it i svg { width: 100%; height: 100%; }
.gc-gal-it b { min-width: 0; font-size: 12.5px; font-weight: 900; color: #F4F1EA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-gal-it:hover { border-color: var(--rc); box-shadow: 0 0 0 1px var(--rc); }
.gc-gal-note { margin: 0; font-size: 11.5px; color: #8C897F; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .gc-gal { padding: 8px; }
  .gc-gal-box { max-height: calc(100vh - 16px); gap: 6px; padding: 8px 10px 10px; }
  .gc-gal-box header { gap: 8px; }
  .gc-gal-box header > b { font-size: 13px; }
  .gc-gal-box header > small { font-size: 8.5px; }
  .gc-gal-tab { padding: 3px 8px; font-size: 10px; }
  .gc-gal-x { width: 26px; height: 26px; font-size: 13px; }
  .gc-gal-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
  .gc-gal-it span { padding: 12px 4px 3px; gap: 3px; }
  .gc-gal-it i { width: 10px; height: 10px; }
  .gc-gal-it b { font-size: 9px; }
}
/* while the gallery is open, the game's card zoom (#overlay) goes above it */
body:has(#gc-gal) #overlay { position: relative; z-index: 48; }
/* the same over the salvage result: tapping a pulled card opens it full size on top */
body:has(#gc-dive.reveal) #overlay { position: relative; z-index: 9001; }
.gc-dive .gc-card[data-role] { cursor: zoom-in; }
/* play-button glyphs (SVG, centred in the hexagon) */
.lb-go-ic .lb-go-gl { position: relative; width: 20px; height: 20px; display: block; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) { .lb-go-ic .lb-go-gl { width: 13px; height: 13px; } }
/* profile: the player name, shown read only (set once at registration) */
.pf-name-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0 2px; }
.pf-name-v b { font-size: 22px; font-weight: 900; letter-spacing: .02em; }
.pf-name-v small { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--mute); }
.pf-name-v small svg { width: 12px; height: 12px; }
.nr-box p b { color: #F0B429; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .pf-name-v { padding: 2px 0 0; } .pf-name-v b { font-size: 16px; } .pf-name-v small { font-size: 9px; }
}
/* operator registration: its own black page (nothing of the home screen shows behind it) */
.nn-reg { background: #05060A; animation: none; }
.nn-reg::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(63,199,232,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(63,199,232,.05) 1px, transparent 1px); background-size: 36px 36px;
  -webkit-mask: radial-gradient(ellipse 60% 60% at 50% 50%, #000 10%, transparent 75%); mask: radial-gradient(ellipse 60% 60% at 50% 50%, #000 10%, transparent 75%); }
.nn-reg .nr-box { position: relative; animation: nr-box-in .45s ease-out both; }
@keyframes nr-box-in { from { opacity: 0; transform: translateY(10px); } }
.nr-hud, .nr-foot { position: absolute; left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); display: flex; justify-content: space-between; gap: 16px;
  font-size: 10px; letter-spacing: .22em; color: rgba(236,232,223,.32); pointer-events: none; }
.nr-hud { top: max(16px, env(safe-area-inset-top)); padding-bottom: 8px; border-bottom: 1px solid rgba(63,199,232,.14); }
.nr-foot { bottom: max(14px, env(safe-area-inset-bottom)); padding-top: 8px; border-top: 1px solid rgba(63,199,232,.14); }
.nr-foot i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: middle; background: #F0B429; box-shadow: 0 0 6px #F0B429; animation: nb-press 1.4s ease-in-out infinite; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .nr-hud, .nr-foot { font-size: 7.5px; letter-spacing: .16em; }
  .nr-hud { top: 6px; padding-bottom: 4px; } .nr-foot { bottom: 5px; padding-top: 4px; }
}
@media (max-width: 700px) and (orientation: portrait) { .nr-hud span + span, .nr-foot span + span { display: none; } }
@media (prefers-reduced-motion: reduce) { .nn-reg .nr-box, .nr-foot i { animation: none; } }
/* coatings: the five that salvage gives (the factory finish is not an item) */
.pf-coats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 520px) { .pf-coats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* codex: a coating this operator has not unlocked yet looks dimmed; unlocked ones get a tick */
.cx-coat-b.locked i { opacity: .38; filter: saturate(.5); }
.cx-coat-b.locked span { color: var(--mute); }
.cx-coat-b.open:not(.cur) em { color: #BDB9AF; }
.cx-coat-b.open:not(.cur) em::before { content: "✓ "; color: var(--cc); }
/* salvage pool tabs on narrower computer windows: a slimmer thumbnail so four names fit */
@media (max-width: 1240px) and (min-height: 601px) {
  .gc-bn { gap: 7px; padding-right: 8px; }
  .gc-bn img { width: 50px; }
  .gc-bn::after { left: 30px; width: 24px; }
  .gc-bn b { font-size: 14px; }
}
/* boot: a loading bar first; "press any key" only once everything is loaded */
.nb-load { margin-top: 26px; width: min(340px, 78vw); display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; align-items: baseline; font-size: 12px; color: #8C897F; letter-spacing: .12em; }
.nb-load span i { font-style: normal; color: #18C8E8; margin-right: 4px; }
.nb-load em { font-style: normal; color: #ECE8DF; font-variant-numeric: tabular-nums; }
.nb-load > i { grid-column: 1 / -1; height: 3px; background: rgba(236,232,223,.12); overflow: hidden; }
.nb-load > i b { display: block; height: 100%; background: linear-gradient(90deg, #18C8E8, #F0B429); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.nn-boot:not(.ready) { cursor: progress; }
.nn-boot:not(.ready) .nb-press { display: none; }
.nn-boot.ready .nb-load { display: none; }
.nn-boot.ready .nb-press { margin-top: 26px; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) { .nb-load { margin-top: 12px; font-size: 10px; } .nn-boot.ready .nb-press { margin-top: 12px; } }
.nn-boot.ready .nb-press { animation-delay: .05s; }
/* phones and tablets: the home screen's grain is drawn plainly (no blending over the moving art every frame) */
@media (pointer: coarse) { .lobby::after { mix-blend-mode: normal; opacity: .035; } }
/* touch (phones and tablets): a large card is held, not scrolled; pressing lifts it, letting go settles it */
@media (hover: none) and (pointer: coarse) {
  .zoomer .holder, .zoomer .holder .cn, .cx-holder, .cx-holder .cn { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  /* the tilt (transform) is eased by script every frame, so it has no transition of its own;
     the lift is a separate translate / scale that animates on its own */
  .zoomer .holder, .cx-holder { transition: translate .3s cubic-bezier(.2, .8, .2, 1), scale .3s cubic-bezier(.2, .8, .2, 1); }
  .zoomer .holder.pressing, .cx-holder.pressing { translate: 0 -6px; scale: 1.035; transition: translate .14s ease-out, scale .14s ease-out; }
  .zoomer .holder.touching, .cx-holder.touching { will-change: transform, translate, scale; }
  .zoomer .holder.pressing > .cn { box-shadow: 0 34px 60px rgba(0,0,0,.65); }
  .cx-holder.pressing::before { box-shadow: 0 30px 44px rgba(0,0,0,.65); }
}

/* invite links and room code: copy buttons */
.invite-row, .code-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.code-row { align-items: center; }
.invite-row .invite { flex: 1; min-width: 0; margin: 0; }
.copy-btn { flex: none; align-self: stretch; min-width: 76px; padding: 0 14px; font-size: 13px; font-weight: 900; letter-spacing: .06em;
  background: var(--bg-3); color: var(--fg); border: 1px solid var(--line-2); border-radius: 3px; cursor: pointer; }
.code-row .copy-btn { align-self: center; height: 44px; }
.copy-btn:hover { border-color: #3FC7E8; color: #3FC7E8; }
.copy-btn.done { border-color: #3FC7E8; color: #0a0a0a; background: #3FC7E8; }
@media (max-width: 900px), (pointer: coarse) {
  .setup .invite-row { gap: 4px; margin-bottom: 4px; }
  .setup .copy-btn { min-width: 52px; padding: 0 8px; font-size: 11px; }
  .setup .code-row .copy-btn { height: 36px; }
}

/* scan result: harder to miss */
#peekwin .pk-bg { background: rgba(4,10,14,.72); backdrop-filter: blur(2px); }
#peekwin .pk-title { font-size: 22px; font-weight: 900; letter-spacing: .08em; color: #78DCFF; text-shadow: 0 0 14px rgba(120,220,255,.45); margin-top: -2px; }
#peekwin .pk-text { font-size: 14px; color: #CFCBC1; }
#peekwin .pk-col { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--bg-3); }
#peekwin .pk-col i { width: 12px; height: 12px; border-radius: 2px; }
#peekwin .pk-ok { min-width: 160px; }
#peekwin .pk-win.fresh { animation: pk-pop .25s cubic-bezier(.2,1.3,.4,1) both, pk-glow 1.1s ease-out .2s 2; }
@keyframes pk-glow { 50% { box-shadow: 0 0 0 1px #78DCFF, 0 0 70px rgba(120,220,255,.6), 0 24px 70px rgba(0,0,0,.65); } }
@media (max-height: 500px) {
  #peekwin .pk-bg { padding: 8px; }
  #peekwin .pk-win { padding: 8px 16px 10px; gap: 5px; }
  #peekwin .pk-title { font-size: 16px; }
  #peekwin .pk-text, #peekwin .pk-sub { font-size: 11px; }
  #peekwin .pk-card { width: 96px; --mm: calc(96px / 63); }
  #peekwin .pk-win { gap: 4px; }
  #peekwin .pk-ok { padding-top: 6px; padding-bottom: 6px; }
  #peekwin .pk-col { font-size: 12px; padding: 2px 10px; }
}

/* ================= boot: loading bar and PRESS ANY KEY, centred under the logo ================= */
.nn-boot { flex-direction: column; gap: clamp(18px, 5vh, 46px); }
.nb-act { width: min(560px, 84vw); min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.nb-act > div { opacity: 0; animation: nb-in .3s ease-out var(--d) forwards; }
.nn-boot .nb-load, .nn-boot.ready .nb-press { margin-top: 0; }
/* loading: label + big percentage, a wide glowing bar */
.nn-boot .nb-load { width: 100%; grid-template-columns: 1fr auto; align-items: end; gap: 10px 12px; font-size: 13px; letter-spacing: .18em; color: #B9B5AA; text-align: left; }
.nn-boot .nb-load em { font-family: 'Orbitron', var(--f-display); font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: .04em; color: #ECE8DF; text-shadow: 0 0 14px rgba(24,200,232,.45); }
.nn-boot .nb-load > i { height: 8px; border-radius: 1px; background: rgba(236,232,223,.08); box-shadow: inset 0 0 0 1px rgba(236,232,223,.16); position: relative; }
.nn-boot .nb-load > i b { box-shadow: 0 0 12px rgba(24,200,232,.7), 0 0 26px rgba(240,180,41,.35); }
.nn-boot .nb-load > i::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(11,11,16,.9) calc(10% - 2px) 10%); }
/* ready: a large glowing call to action */
.nn-boot .nb-press { align-items: center; gap: 10px; }
.nn-boot .nb-press b { font-family: 'Orbitron', var(--f-display); font-weight: 900; font-size: clamp(22px, 3.4vw, 34px); letter-spacing: .32em; padding-left: .32em; color: #ECE8DF;
  text-shadow: 0 0 10px rgba(24,200,232,.8), 0 0 28px rgba(24,200,232,.45); animation: nb-press-glow 1.6s ease-in-out infinite; white-space: nowrap; }
.nn-boot .nb-press b s { text-decoration: none; color: #F0B429; text-shadow: 0 0 10px rgba(240,180,41,.7); margin: 0 .5em; letter-spacing: 0; display: inline-block; animation: nb-bracket 1.6s ease-in-out infinite; }
.nn-boot .nb-press b s:last-child { animation-direction: reverse; }
.nn-boot .nb-press small { font-size: 13px; color: #B9B5AA; letter-spacing: .14em; }
.nn-boot.ready .nb-press { animation: nb-in .3s ease-out forwards, nb-ready-flash .7s ease-out; }
@keyframes nb-press-glow { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes nb-bracket { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@keyframes nb-ready-flash { 0% { filter: brightness(2.2); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .nn-boot .nb-press b, .nn-boot .nb-press b s { animation: none; } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .nn-boot { gap: 14px; }
  .nn-boot .nb-in { padding: 0; gap: 2px; }
  .nn-boot .nb-l { font-size: 10px; }
  .nn-boot .nb-badge { width: 34px; height: 34px; margin-top: 6px; }
  .nn-boot .nb-word { font-size: 32px; margin-top: 4px; }
  .nn-boot .nb-word .nn-route { margin-top: 6px; }
  .nn-boot .nb-sub { font-size: 10px; }
  .nb-act { min-height: 62px; width: min(480px, 70vw); }
  .nn-boot .nb-load { font-size: 10px; gap: 6px 10px; }
  .nn-boot .nb-load em { font-size: 20px; }
  .nn-boot .nb-load > i { height: 6px; }
  .nn-boot .nb-press { gap: 6px; }
  .nn-boot .nb-press b { font-size: 20px; }
  .nn-boot .nb-press small { font-size: 10px; }
}

/* ================= command buttons: card icon + command, coloured by the hand card used ================= */
.prompt .pr-btns .cmd-btn { gap: 8px; padding: 6px 14px 6px 8px; border-left: 0 !important; }
.cmd-btn .cb-ic { width: 26px; height: 26px; background: none; color: inherit; flex: none; }
.cmd-btn .cb-ic svg { width: 20px; height: 20px; }
.cmd-btn > b { font-size: 15px; font-weight: 900; white-space: nowrap; }
.cmd-btn.c-ORDER { background: var(--order) !important; color: #141210 !important; border-color: var(--order) !important; }
.cmd-btn.c-GHOST { background: var(--ghost) !important; color: #0E1315 !important; border-color: var(--ghost) !important; }
.cmd-btn.c-VIRUS { background: var(--virus) !important; color: #F4F1EA !important; border-color: var(--virus) !important; }
.cmd-btn[class*="c-"]:hover { filter: brightness(1.12); }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .prompt .pr-btns .cmd-btn { gap: 5px; padding: 4px 10px 4px 6px; }
  .cmd-btn .cb-ic { width: 20px; height: 20px; }
  .cmd-btn .cb-ic svg { width: 16px; height: 16px; }
  .cmd-btn > b { font-size: 12px; }
}
body.phone-game .prompt .pr-btns .cmd-btn { justify-content: center; white-space: nowrap; }
.cmd-btn.c-MIX { background: var(--mix) !important; color: #F4F1EA !important; border-color: transparent !important; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.6); }
.cmd-btn.c-MIX .cb-ic svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }

/* ================= prompt: what is happening, then what you are asked ================= */
.pr-now { display: inline-block; vertical-align: 2px; margin-right: 8px; padding: 1px 7px; border-radius: 2px; font-size: 10px; font-weight: 900; letter-spacing: .12em;
  background: rgba(236,232,223,.12); color: #B9B5AA; border: 1px solid rgba(236,232,223,.22); }
.pr-q { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 16px; font-weight: 900; color: #3FE0FF; text-shadow: 0 0 10px rgba(63,224,255,.35); }
.pr-q i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 50%; font-style: normal; font-size: 13px;
  background: #3FE0FF; color: #0B0B10; box-shadow: 0 0 10px rgba(63,224,255,.6); }
.pw .pr-q { justify-content: center; margin: 2px 0 8px; }

/* ================= do nothing / end the step / back: 3D red neon ================= */
.prompt .pr-btns button.btn-stop, .prompt .pr-btns .back-btn, .pw .back-btn, button.btn-stop {
  position: relative; background: linear-gradient(180deg, #2A0710, #14030A) !important; color: #FF6A7C !important; border: 2px solid #FF2D4A !important; border-radius: 6px !important;
  font-weight: 900; letter-spacing: .04em;
  text-shadow: 0 0 6px rgba(255,45,74,.9), 0 0 14px rgba(255,45,74,.55);
  box-shadow: 0 0 10px rgba(255,45,74,.55), 0 0 22px rgba(255,45,74,.25), inset 0 0 10px rgba(255,45,74,.35), inset 0 1px 0 rgba(255,160,170,.35), 0 4px 0 #6E0A1A !important;
  transform: translateY(-2px); transition: transform .08s, box-shadow .08s, filter .15s; animation: btn-stop-hum 2.4s ease-in-out infinite; }
.prompt .pr-btns button.btn-stop:hover, .prompt .pr-btns .back-btn:hover, .pw .back-btn:hover, button.btn-stop:hover { filter: brightness(1.18); }
.prompt .pr-btns button.btn-stop:active, .prompt .pr-btns .back-btn:active, .pw .back-btn:active, button.btn-stop:active {
  transform: translateY(1px); box-shadow: 0 0 8px rgba(255,45,74,.5), inset 0 0 12px rgba(255,45,74,.45), 0 1px 0 #6E0A1A !important; }
@keyframes btn-stop-hum { 0%, 100% { filter: none; } 50% { filter: brightness(1.12) saturate(1.1); } }
@media (prefers-reduced-motion: reduce) { .btn-stop, .back-btn { animation: none !important; } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .pr-now { font-size: 8px; padding: 0 5px; margin-right: 5px; }
  .pr-q { font-size: 12px; margin: 3px 0 1px; gap: 5px; }
  .pr-q i { width: 15px; height: 15px; font-size: 10px; }
}

/* ================= players in prompts and choices: operator in front of the name ================= */
.who { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; white-space: nowrap; }
.who-op { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 4px; border-radius: 10px; font-size: .78em; font-weight: 900; line-height: 1.5;
  background: #F4F1EA; color: #0B0B0E; }
.who-op svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 3; flex: none; }
.who-op.hid { background: #2B2A31; color: #CFCBC1; border: 1px dashed #8C897F; }
.who-op.hid i { font-style: normal; width: 1.1em; text-align: center; }
.who-n { font-weight: 900; }
.prompt .pr-btns button.who-btn { gap: 8px; padding-left: 6px; }
.prompt .pr-btns button.who-btn .who-op { font-size: 12px; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .who { gap: 4px; }
  .who-op { padding: 0 6px 0 3px; }
  .prompt .pr-btns button.who-btn .who-op { font-size: 9.5px; }
}
/* operator tag before a name: the emblem alone */
.who-op { padding: 2px; border-radius: 50%; width: 1.5em; height: 1.5em; justify-content: center; gap: 0; }
.who-op svg { width: 1.1em; height: 1.1em; }
.who-op.hid { border-radius: 50%; }
.prompt .pr-btns button.who-btn .who-op { font-size: 13px; }
/* mixed colours: equal bands across the whole button, text centred over them */
.prompt .pr-btns .cmd-btn.c-MIX { background-origin: border-box !important; background-size: 100% 100% !important; border: 0 !important; justify-content: center; }

/* ================= All Pick: icon grid + card and skills ================= */
.ap-box { width: min(1180px, 100%); max-height: 100%; overflow: auto; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 16px 20px 14px; display: flex; flex-direction: column; gap: 12px; }
.ap-head { display: flex; flex-direction: column; gap: 8px; }
.ap-status { margin: 0; font-size: 14px; font-weight: 700; color: #CFCBC1; }
.ap-status.me { color: #3FE0FF; font-size: 16px; font-weight: 900; text-shadow: 0 0 10px rgba(63,224,255,.35); }
.ap-order { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ap-o { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 3px; font-size: 12px; color: #8C897F; background: var(--bg-3); }
.ap-o small { font-size: 10px; opacity: .7; }
.ap-o b { font-weight: 900; }
.ap-o.me b { color: #ECE8DF; }
.ap-o.me { border-color: #ECE8DF; }
.ap-o.now { color: #0B0B10; background: #3FE0FF; border-color: #3FE0FF; box-shadow: 0 0 12px rgba(63,224,255,.5); }
.ap-o.done { color: #CFCBC1; }
.ap-o-ic { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; background: #F4F1EA; color: #0B0B0E; font-style: normal; font-size: 11px; font-weight: 900; }
.ap-o-ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; }
.ap-o-ic.hid { background: #2B2A31; color: #CFCBC1; border: 1px dashed #8C897F; }
.ap-arrow { color: #5D5B55; font-size: 12px; }
.ap-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 16px; align-items: start; }
.ap-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ap-it { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border: 1px solid var(--line-2) !important; border-radius: 4px; background: #121217 !important; color: #ECE8DF; cursor: pointer; min-width: 0; }
.ap-it i { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }
.ap-it i svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.ap-it span { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ap-it em { position: absolute; left: 3px; right: 3px; bottom: 3px; font-style: normal; font-size: 9.5px; font-weight: 900; padding: 1px 2px; border-radius: 2px; background: rgba(255,45,74,.85); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-it.covert::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #B07CFF; }
.ap-it:hover { border-color: #ECE8DF !important; }
.ap-it.taken, .ap-it.gone { opacity: .42; }
.ap-it.taken i, .ap-it.gone i { filter: grayscale(1); }
.ap-it.sel { border-color: #3FE0FF !important; box-shadow: 0 0 0 1px #3FE0FF, 0 0 14px rgba(63,224,255,.45); opacity: 1; }
.ap-side { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.ap-card { width: 200px; align-self: center; --mm: calc(200px / 63); }
.ap-info h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 900; }
.ap-info h3 i { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: #F4F1EA; color: #0B0B0E; }
.ap-info h3 i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; }
.ap-cov { font-size: 11px; padding: 1px 7px; border-radius: 2px; background: #2B2A31; color: #CFCBC1; border: 1px dashed #8C897F; }
.ap-sk { display: block; margin: 6px 0 4px; font-size: 14px; color: #F0B429; }
.ap-rows { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; }
.ap-rows .sk-row { display: flex; gap: 8px; align-items: flex-start; }
.ap-act { display: flex; }
.ap-act button { flex: 1; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .ap-overlay { padding: 6px; }
  .ap-box { padding: 8px 10px; gap: 6px; }
  .ap-head { gap: 4px; }
  .ap-head .rp-title b { font-size: 14px; }
  .ap-status, .ap-status.me { font-size: 11px; }
  .ap-o { padding: 1px 5px; font-size: 10px; gap: 4px; }
  .ap-main { grid-template-columns: minmax(0, 1fr) 210px; gap: 8px; }
  .ap-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
  .ap-it { padding: 4px 2px 3px; gap: 1px; }
  .ap-it i { width: 24px; height: 24px; }
  .ap-it i svg { width: 21px; height: 21px; }
  .ap-it span { font-size: 8.5px; }
  .ap-it em { font-size: 7.5px; bottom: 1px; }
  .ap-side { display: grid; grid-template-columns: 92px 1fr; gap: 6px; align-items: start; }
  .ap-card { width: 92px; --mm: calc(92px / 63); grid-row: span 2; }
  .ap-info h3 { font-size: 13px; gap: 4px; }
  .ap-info h3 i { width: 18px; height: 18px; }
  .ap-info h3 i svg { width: 13px; height: 13px; }
  .ap-sk { font-size: 10px; margin: 2px 0; }
  .ap-rows { font-size: 9px; line-height: 1.35; gap: 3px; max-height: 120px; overflow: auto; }
  .ap-act button.big { padding: 6px 8px; font-size: 11px; }
}
.draft-pick { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.draft-hint { font-size: 12px; color: #8C897F; line-height: 1.45; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .ap-main { grid-template-columns: minmax(0, 1fr) 300px; }
  .ap-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .ap-side { grid-template-columns: 96px minmax(0, 1fr); }
  .ap-card { width: 96px; --mm: calc(96px / 63); }
  .ap-rows { max-height: 150px; }
  .ap-rows .sk-row { gap: 5px; }
  .ap-rows .sk-badge { flex: none; width: 24px !important; min-width: 24px !important; height: 24px !important; padding: 0 !important; font-size: 6.5px !important; }
  .ap-rows .sk-badge i { font-size: 10px !important; line-height: 1; }
  .ap-rows .sk-badge b { font-size: 6px !important; }
  .ap-rows .sk-txt { font-size: 9.5px; line-height: 1.35; }
  .ap-act { grid-column: 1 / -1; }
}
/* mode buttons: English name + the mode in the player's language */
.draft-pick .seg button { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; padding-top: 5px; padding-bottom: 5px; }
.draft-pick .seg button b { font-size: 13px; font-weight: 900; }
.draft-pick .seg button small { font-size: 10.5px; font-weight: 700; opacity: .75; }
.ap-sub { margin-left: 10px; font-size: 13px; font-weight: 700; color: #B9B5AA; letter-spacing: .04em; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .draft-pick .seg button b { font-size: 11px; }
  .draft-pick .seg button small { font-size: 9px; }
  .ap-sub { font-size: 10px; margin-left: 6px; }
}
/* All Pick: the rarity layers (R / SR …) are sized to the card slot, not the window */
.ap-card { position: relative; border-radius: calc(3 * var(--mm)); }
.ap-it.ap-mine { border-color: #F0B429 !important; }
.ap-it.ap-mine em { background: #F0B429; color: #141210; }
.ap-o-st { font-style: normal; font-weight: 900; }
.ap-o.done .ap-o-st { color: #2BD07A; }
.ap-o.done { color: #ECE8DF; }

/* ================= scrollbars: a slim data rail with a neon cursor (whole game) =================
   Track: dark rail with a faint segmented signal line. Thumb: cyan packet with data stripes,
   gold while held or hovered. No arrow buttons. */
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-track {
  background:
    repeating-linear-gradient(180deg, rgba(24,200,232,.28) 0 6px, transparent 6px 10px) center / 1px 100% no-repeat,
    rgba(8,8,12,.75);
  border-left: 1px solid rgba(236,232,223,.06); border-right: 1px solid rgba(236,232,223,.06);
}
::-webkit-scrollbar-track:horizontal {
  background:
    repeating-linear-gradient(90deg, rgba(24,200,232,.28) 0 6px, transparent 6px 10px) center / 100% 1px no-repeat,
    rgba(8,8,12,.75);
  border: 0; border-top: 1px solid rgba(236,232,223,.06); border-bottom: 1px solid rgba(236,232,223,.06);
}
::-webkit-scrollbar-thumb {
  border: 2px solid transparent; background-clip: padding-box; border-radius: 1px; min-height: 28px;
  background-color: #18C8E8;
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.5) 0 1px, transparent 1px 4px),
                    linear-gradient(180deg, #5FE6FF, #18C8E8 55%, #0E8FAA);
  box-shadow: inset 0 0 0 1px rgba(160,240,255,.45), 0 0 6px rgba(24,200,232,.7);
}
::-webkit-scrollbar-thumb:horizontal {
  min-width: 28px; min-height: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 4px),
                    linear-gradient(90deg, #5FE6FF, #18C8E8 55%, #0E8FAA);
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
  background-color: #F0B429;
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.55) 0 1px, transparent 1px 4px),
                    linear-gradient(180deg, #FFD36B, #F0B429 55%, #B8820F);
  box-shadow: inset 0 0 0 1px rgba(255,230,160,.5), 0 0 8px rgba(240,180,41,.8);
}
/* Firefox has no shaped scrollbars: the same colours, thin */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: #18C8E8 rgba(8,8,12,.75); }
}
/* small panels on phones: an even slimmer rail */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-thumb { border-width: 1px; min-height: 20px; }
}

/* All Pick: one fixed window size whatever operator is shown; long skill text scrolls inside */
.ap-box { width: min(1180px, 100%); height: min(700px, calc(100dvh - 32px)); overflow: hidden; }
.ap-main { flex: 1; min-height: 0; align-items: stretch; }
.ap-grid { min-height: 0; overflow: auto; align-content: start; padding-right: 2px; }
.ap-side { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.ap-card { flex: none; height: calc(88 * var(--mm)); }
.ap-info { flex: 1; min-height: 0; overflow: auto; padding-right: 4px; }
.ap-info h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-rows { max-height: none; }
.ap-act { flex: none; }
.ap-box > .pr-timer { flex: none; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .ap-box { height: calc(100dvh - 12px); }
  .ap-side { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
  .ap-card { grid-row: 1; height: calc(88 * var(--mm)); }
  .ap-info { grid-row: 1; grid-column: 2; overflow: auto; }
  .ap-rows { max-height: none; overflow: visible; }
  .ap-act { grid-row: 2; grid-column: 1 / -1; }
}

/* log: card chips without the faction character; the colour alone tells gold / cyan / VIRUS */
.log .chip .k { display: none; }
.log .chip { padding: 0 7px 0 5px; gap: 3px; }

/* card tags everywhere in the game: icon + card name on the card's colour, no faction character */
.chip .k { display: none !important; }
.chip { padding: 0 7px 0 5px; gap: 3px; }
/* compact seats show the icon alone on its colour */
body.fit .seat .s-field .chip { padding: 0 3px; gap: 0; }
body.fit .seat .s-field .chip svg { width: 12px; height: 12px; }
/* scan result: a 5-second bar that empties, then the window closes */
#peekwin .pk-timer { align-self: stretch; position: relative; height: 16px; margin-top: 2px; background: rgba(236,232,223,.08); border: 1px solid rgba(120,220,255,.35); border-radius: 2px; overflow: hidden; }
#peekwin .pk-timer i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #18C8E8, #78DCFF); box-shadow: 0 0 10px rgba(120,220,255,.6);
  animation: pk-count var(--pk-t, 5000ms) linear forwards; }
#peekwin .pk-timer span { position: relative; display: block; text-align: center; font-family: var(--f-mono); font-size: 11px; font-weight: 700; line-height: 14px; color: #0B0B10; mix-blend-mode: normal; }
@keyframes pk-count { from { transform: scaleX(1); } to { transform: scaleX(0); background: linear-gradient(90deg, #FF2D4A, #FF6A7C); } }
@media (max-height: 500px) { #peekwin .pk-timer { height: 12px; } #peekwin .pk-timer span { font-size: 9px; line-height: 10px; } }
#peekwin .pk-timer span { color: #F4F1EA; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.ch-flag.ch-peek.done { cursor: default; }
.ch-flag.ch-peek.done:hover { background: rgba(6,16,22,.9); color: #78DCFF; }
.sfx-vol { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ================= salvage: one PICK UP pool with a dropdown of featured operators ================= */
.gc-pk { position: relative; min-width: 0; display: flex; }
.gc-pk > .gc-bn { flex: 1; min-width: 0; padding-right: 34px; }
.gc-pk-arrow { position: absolute; right: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 3px; z-index: 3;
  background: rgba(236,232,223,.1); border: 1px solid var(--bc); }
.gc-pk-arrow::before { content: ""; position: absolute; left: 50%; top: 45%; width: 6px; height: 6px; margin: -4px 0 0 -3px;
  border-right: 2px solid var(--bc); border-bottom: 2px solid var(--bc); transform: rotate(45deg); transition: transform .15s; }
.gc-pk.open .gc-pk-arrow::before { transform: rotate(-135deg); margin-top: -1px; }
.gc-pk-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: max(100%, 280px); max-height: 60vh; overflow: auto;
  display: flex; flex-direction: column; gap: 4px; padding: 8px; background: #0B0C10; border: 1px solid rgba(236,232,223,.22); border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.65); animation: gc-pk-in .14s ease-out both; }
.gc-pk-menu > small { padding: 2px 4px 6px; font-size: 10px; letter-spacing: .14em; color: #8C897F; }
@keyframes gc-pk-in { from { opacity: 0; transform: translateY(-4px); } }
.gc-pk-it { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 10px 0 0; overflow: hidden; text-align: left; cursor: pointer;
  background: #14151B !important; border: 1px solid rgba(236,232,223,.12) !important; border-left: 3px solid var(--bc) !important; border-radius: 3px; color: #ECE8DF; }
.gc-pk-it img { width: 60px; height: 100%; object-fit: cover; object-position: 50% 18%; flex: none; filter: saturate(.75) brightness(.8); }
.gc-pk-it span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.gc-pk-it b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-pk-it small { font-size: 9.5px; letter-spacing: .1em; color: var(--bc); }
.gc-pk-it em { font-style: normal; font-weight: 900; color: var(--bc); width: 16px; text-align: center; }
.gc-pk-it:hover { border-color: var(--bc) !important; }
.gc-pk-it:hover img, .gc-pk-it.on img { filter: none; }
.gc-pk-it.on { box-shadow: inset 0 0 0 1px var(--bc), 0 0 14px -6px var(--bc); }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .gc-pk > .gc-bn { padding-right: 24px; }
  .gc-pk-arrow { right: 5px; width: 14px; height: 14px; margin-top: -7px; }
  .gc-pk-arrow::before { width: 4px; height: 4px; margin: -3px 0 0 -2px; border-width: 1.5px; }
  .gc-pk-menu { width: max(100%, 220px); padding: 5px; gap: 3px; max-height: 70vh; }
  .gc-pk-it { height: 38px; gap: 6px; }
  .gc-pk-it img { width: 42px; }
  .gc-pk-it b { font-size: 11px; }
  .gc-pk-it small { font-size: 7.5px; }
}
.pr-warn { display: block; margin-top: 4px; font-size: 12px; font-weight: 800; color: #FF6A7C; text-shadow: 0 0 8px rgba(255,45,74,.35); }

/* Phone landscape: every non-game page scrolls as one page with a finger drag, so nothing
   below the fold (start buttons, last options) is ever cut off. The game table itself stays fixed. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  #app > .setup, .setup2 { flex: 1 1 auto; height: auto; min-height: 0; max-height: none;
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; touch-action: pan-y; }
  .setup > div { height: auto; min-height: 100%; grid-template-rows: auto auto auto; }
  .setup .panel { overflow: visible; max-height: none; }
  .setup2 > .pg:not(.pg-wide) { height: auto; min-height: 100%; overflow: visible; }
  .setup2 > .pg:not(.pg-wide) .panel { flex: none; overflow: visible; max-height: none; }
  .setup.lobby-host .panel:nth-of-type(2) .start-row { bottom: calc(-1 * max(8px, env(safe-area-inset-bottom))); }
  .page-local .pg .panel > .start-row { position: sticky; left: auto; right: auto; bottom: 0; }
  .page-local .pg .panel { padding-bottom: 10px; }
  /* the back button and the help dock float in a band of their own above the scrolling page */
  #app > .setup { margin-top: calc(46px + env(safe-area-inset-top)); padding-top: 4px; }
  .setup .nav-back { top: max(6px, env(safe-area-inset-top)); min-height: 34px; height: 34px; padding-top: 4px; padding-bottom: 4px; }
  #app > .setup.lobby-host, .setup2.page-local { scroll-padding-bottom: 72px; }
  /* page title row stays put while the page scrolls under it; the help dock floats on its right */
  .setup2 > .pg:not(.pg-wide) { padding-top: 0; }
  .setup2 > .pg:not(.pg-wide) > .pg-head { position: sticky; top: 0; z-index: 6; margin: 0 -14px; min-height: 46px;
    padding: max(6px, env(safe-area-inset-top)) min(280px, 46vw) 6px 14px;
    background: var(--bg); border-bottom: 1px solid var(--line); }
  .page-local .pg .panel > .start-row { background: var(--bg-2); }
  /* codex: the operator board and the detail column each scroll when they do not fit */
  .page-codex .cx-left { align-self: stretch; max-height: 100%; align-items: safe center; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
  .page-codex .cx-board { height: auto; max-height: none; min-height: 100%; }
  .page-codex .cx-right { align-self: stretch; max-height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  /* folding sections (advanced rules, developer tools): title on its own line, options in two columns below */
  .setup2 .pg details.panel { display: block; }
  .setup2 .pg details.panel::details-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
  .setup2 .pg details.panel > :not(summary) { min-width: 0; }
  /* home: the menu column always stays above the showcase art, so its buttons take the tap */
  .lobby .lb-main { z-index: 3; }
  .setup .code-row { gap: 6px; }
  .setup .code-row .room-code { flex: 1 1 auto; min-width: 0; }
  .setup .code-row .room-code span { flex: 1 1 0; width: auto; min-width: 0; max-width: 44px; height: 42px; font-size: clamp(18px, 3.6vw, 24px); }
  .setup .code-row .copy-btn { flex: none; }
}

/* Result screen: each player shows the operator's head (SAR / UR art) or its emblem (lower rarities),
   and below it a faction bar that carries the square-framed faction kanji. A reborn player shows 【零/秩】 or 【零/死】. */
.rs-flip { width: 112px; height: auto; aspect-ratio: 1 / 1; }
.rs-flip > div { border-radius: 6px; }
.rs-p.won .rs-flip { border-radius: 6px; }
.rs-front.rs-av { display: block; padding: 0; overflow: hidden; color: #ECE8DF;
  background: radial-gradient(circle at 50% 38%, #2A2A33, var(--bg-2) 70%); border: 1px solid var(--line-2); }
.rs-front.rs-av .rp-art { border-radius: inherit; }
.rs-emb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.rs-emb svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 3; filter: drop-shadow(0 0 10px rgba(236,232,223,.18)); }
.rs-flip > .rs-dead { inset: auto; left: 50%; top: 50%; width: auto; height: auto; z-index: 3; border-radius: 3px; backface-visibility: visible; transform: translate(-50%, -50%) rotate(-8deg); }

.rs-fac { --ic: var(--line-2); --iink: #ECE8DF; --kb: 24px; width: 112px; max-width: 100%; height: 32px; display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 4px; background: var(--ic); color: var(--iink); border-radius: 0 0 6px 6px; margin-top: -2px;
  font-family: var(--f-display); font-size: 13px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.rs-fac.i-ORDER { --ic: var(--order); --iink: #141210; }
.rs-fac.i-GHOST { --ic: var(--ghost); --iink: #0E1315; }
.rs-fac.i-ZERO { --ic: var(--zero); --iink: #0F1410; }
.rs-fac > span { flex: 1; text-align: center; }
/* the original identity mark: a kanji framed in a square */
.rs-k { flex: none; width: var(--kb); height: var(--kb); display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: 2px solid currentColor; border-radius: 3px; font-family: var(--f-display); font-weight: 400; font-size: calc(var(--kb) * .68); line-height: 1; }
.rs-k.k-ORDER { color: #141210; } .rs-k.k-GHOST { color: #0E1315; } .rs-k.k-ZERO { color: #0F1410; } .rs-k.k-REAPER { color: #FFE3E6; }
/* reborn: the bar splits on a slash, the old faction on the left and the new one on the right */
.rs-fac.re { --c2: var(--ic); justify-content: center; gap: 0; padding: 0 4px;
  background: linear-gradient(110deg, var(--ic) calc(50% - 1px), rgba(0,0,0,.55) calc(50% - 1px) calc(50% + 1px), var(--c2) calc(50% + 1px)); }
.rs-fac.re-ORDER { --c2: var(--order); } .rs-fac.re-GHOST { --c2: var(--ghost); } .rs-fac.re-ZERO { --c2: var(--zero); } .rs-fac.re-REAPER { --c2: #8E0F22; }
.rs-slash { flex: none; width: 18px; }
.rs-p.out .rs-fac { filter: grayscale(.5) brightness(.75); }
@media (max-width: 720px) { .rs-flip, .rs-fac { width: 92px; } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .rs-flip { width: min(68px, 88%); height: auto; aspect-ratio: 1 / 1; }
  .rs-flip > div, .rs-p.won .rs-flip { border-radius: 4px; }
  .rs-fac { --kb: 15px; width: min(68px, 88%); height: 20px; gap: 3px; padding: 0 4px 0 2px; border-radius: 0 0 4px 4px; font-size: 8px; letter-spacing: .04em; }
  .rs-fac.re { padding: 0 2px; }
  .rs-k { border-width: 1.5px; border-radius: 2px; }
  .rs-slash { width: 10px; }
  .rs-flip .rs-dead { font-size: 8px; padding: 1px 3px; }
}

/* One frame holds the avatar and its faction bar together, with no seam between them. */
.rs-unit { position: relative; width: 112px; max-width: 100%; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--bg-2); isolation: isolate; }
.rs-unit > .rs-flip { width: 100%; flex: none; }
.rs-unit > .rs-flip > div, .rs-p.won .rs-unit > .rs-flip { border-radius: 0; box-shadow: none; }
.rs-unit .rs-front.rs-av { border: 0; }
.rs-unit .rs-front.rs-av .rp-art { border-radius: 0; }
.rs-unit > .rs-fac { width: 100%; margin: 0; border-radius: 0; flex: none; }
.rs-unit > .rp-art-frame { z-index: 4; border-radius: inherit; }
.rs-p.sar-skin .rs-front { box-shadow: none; }
.rs-p.sar-skin .rs-unit { border-color: transparent; box-shadow: 0 0 16px -2px var(--rar-edge-a); }
.rs-p.won .rs-unit { border-color: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF, 0 0 34px var(--wc); }
.rs-p.out .rs-flip, .rs-p.out .rs-fac { filter: none; }
.rs-p.out .rs-unit { filter: grayscale(.5) brightness(.75); }
@media (max-width: 720px) { .rs-unit { width: 92px; } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .rs-unit { width: min(68px, 88%); border-radius: 4px; }
  .rs-unit > .rs-flip, .rs-unit > .rs-fac { width: 100%; }
  .rs-p.won .rs-unit { box-shadow: 0 0 0 1.5px #FFFFFF, 0 0 20px var(--wc); }
}

/* Faction bar = one third of the frame (the avatar is square, so the bar is half its height).
   Everything inside is sized from the frame's width, so it reads the same on a computer and a phone. */
.rs-unit { container-type: inline-size; }
.rs-unit > .rs-fac { --kb: 30cqw; height: 50cqw; justify-content: center; gap: 6cqw; padding: 0 5cqw; box-shadow: none;
  font-size: 10.5cqw; letter-spacing: .04em; line-height: 1; }
.rs-unit > .rs-fac > span { flex: none; text-align: left; padding-top: .08em; }
.rs-unit .rs-k { border-width: max(1.5px, 1.8cqw); border-radius: max(2px, 2.6cqw); font-size: calc(var(--kb) * .66); }
/* reborn 【零/秩】: the two colours meet on a soft diagonal, no dark line */
.rs-unit > .rs-fac.re { gap: 0; padding: 0 4cqw;
  background: linear-gradient(110deg, var(--ic) 44%, var(--c2) 56%); }
.rs-unit > .rs-fac.re .rs-slash { width: 16cqw; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  /* small frames: a slightly smaller kanji box leaves room for readable text */
  .rs-unit > .rs-fac { --kb: 27cqw; height: 50cqw; gap: 4cqw; padding: 0 3cqw; font-size: max(8px, 12.5cqw); letter-spacing: 0; }
  .rs-unit > .rs-fac.re { padding: 0 4cqw; }
}

/* Reborn ZERO identity panel: the same 【零/秩】 split as the result screen — the old colour on the left,
   the new one on the right, meeting on a soft diagonal; two square-framed kanji side by side. */
.id-panel.re { --c2: var(--ic); background: linear-gradient(110deg, var(--ic) 44%, var(--c2) 56%); }
.id-panel.re-ORDER { --c2: var(--order); } .id-panel.re-GHOST { --c2: var(--ghost); } .id-panel.re-REAPER { --c2: #8E0F22; }
.dp-pair { display: flex; align-items: center; margin: 6px 0 2px; }
.dp-pair .dp-kanji { width: 52px; height: 52px; font-size: 37px; margin: 0; }
.dp-slash { flex: none; width: 14px; }
.id-panel.re { container-type: inline-size; }
.id-panel.re .dp-name { display: flex; align-items: baseline; gap: .25em; font-size: min(17px, 9.6cqw); letter-spacing: .03em; white-space: nowrap; }
.id-panel.re .dp-name i { font-style: normal; opacity: .55; }
.id-panel.re .k-ORDER { color: #141210; } .id-panel.re .k-GHOST { color: #0E1315; } .id-panel.re .k-ZERO { color: #0F1410; } .id-panel.re .k-REAPER { color: #FFE3E6; }
/* the Reaper's dark red half carries light text; the goal line runs across both halves, so it gets a soft shadow */
.id-panel.re-REAPER { --iink: #FFF4F5; }
.id-panel.re-REAPER .dp-name { font-size: min(17px, 12.5cqw); }
.id-panel.re-REAPER .dp-goal, .id-panel.re-REAPER .dp-top .mono { text-shadow: 0 1px 2px rgba(0,0,0,.65); }
body.fit .dp-pair .dp-kanji { width: 40px; height: 40px; font-size: 28px; }
body.fit .dp-slash { width: 10px; }
@media (max-width: 720px) { .dp-pair .dp-kanji { width: 42px; height: 42px; font-size: 30px; } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  #mine .dp-pair { margin: 0; }
  #mine .dp-pair .dp-kanji { width: 18px; height: 18px; font-size: 12px; border-width: 1px; border-radius: 2px; }
  #mine .dp-slash { width: 5px; }
  #mine .id-panel.re .dp-name { font-family: var(--f-mono); font-size: 8px; gap: 0; }
  #mine .id-panel.re .dp-name > :first-child, #mine .id-panel.re .dp-name i { display: none; }
}

/* Guessing a player's identity: the full chip on a computer, a compact one on a phone seat. */
.guess-btn .g-full { display: inline-flex; align-items: center; gap: 4px; }
.guess-btn .g-short { display: none; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .seat .s-tags > .guess-btn { display: inline-flex !important; position: relative; align-items: center; justify-content: center; flex: none;
    min-width: 18px; height: 12px; padding: 0 3px; font-size: 7px; line-height: 1; border-radius: 2px; touch-action: manipulation; }
  .seat .s-tags > .guess-btn::after { content: ''; position: absolute; inset: -7px -5px; }   /* a finger-sized tap area */
  .seat .s-tags > .guess-btn .g-full { display: none; }
  .seat .s-tags > .guess-btn .g-short { display: inline; font-weight: 900; }
  /* a guessed chip fills with the guessed faction's colour and shows its kanji */
  .seat .s-tags > .guess-btn[class*="g-"] { background: var(--gc); border-color: var(--gc); color: #0E0E11; font-family: var(--f-display); font-weight: 400; font-size: 8px; }
  .seat .s-tags { overflow: visible; }
  .seat[class*="guess-"]::before { width: 3px; }
}

/* ---------- player card (js/pcard.js): mini / mid / full, and the pop-up over a game ---------- */
.pc { --pc-line: #3A3A44; color: var(--fg); }
.pc.pc-mini { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pc.pc-mid, .pc.pc-full { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--pc-line); border-radius: 8px;
  background: linear-gradient(160deg, #1D1D24, #121216 72%); }
.pc.pc-mid { width: min(300px, 100%); }
.pc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pc-av { position: relative; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: #1E1E25; border: 1px solid #3A3A44; color: var(--fg); }
.pc-av.pc-l { width: 56px; height: 56px; }
.pc-av.pc-s { width: 28px; height: 28px; border-radius: 4px; }
.pc-av.emb svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 3; }
.pc-av.art { border-color: transparent; }
.pc-av.art .rp-art { position: absolute; inset: 0; }
.pc-av.art .rp-art-frame { padding: 2px; }
.pc-av.ai { background: #121217; border-style: dashed; color: var(--mute); }
.pc-av.ai b { font-size: 12px; letter-spacing: .08em; }
.pc-av.pc-s.ai b { font-size: 8px; }
.pc-nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pc-nm b { font-size: 16px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-nm small { font-size: 11px; color: var(--mute); }
.pc.pc-mini .pc-nm b { font-size: 13px; }
.pc.pc-mini .pc-nm small { font-size: 9.5px; }
.pc-hex { flex: none; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--tc, #3A3A44); color: #0E0E11; }
.pc-hex.pc-m { width: 34px; height: 38px; }
.pc-hex.pc-s { width: 18px; height: 20px; }
.pc-hex b { font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.pc-hex.pc-s b { font-size: 6.5px; }
.pc-hex.none { background: #2B2B33; color: var(--mute); }
.pc-rank { display: flex; align-items: center; gap: 10px; }
.pc-rt { display: flex; flex-direction: column; line-height: 1.3; }
.pc-rt b { font-size: 14px; font-weight: 900; }
.pc-rt small { font-size: 11px; color: var(--mute); }
.pc-stars { color: #E5A50A; letter-spacing: 1px; font-size: 12px; margin-left: 4px; }
.pc-stars i { font-style: normal; opacity: .25; }
.pc-prog { height: 6px; border-radius: 3px; background: #2B2B33; overflow: hidden; }
.pc-prog i { display: block; height: 100%; background: var(--tc); }
.pc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--mute); }
.pc-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.pc-f { display: flex; flex-direction: column; gap: 1px; padding: 6px 7px; border-radius: 4px; background: #1E1E25; min-width: 0; }
.pc-f span { font-size: 10px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-f b { font-size: 15px; line-height: 1.2; }
.pc-f small { font-size: 9.5px; color: var(--mute); }
.pc-f.f-ORDER b { color: var(--order); } .pc-f.f-GHOST b { color: var(--ghost); } .pc-f.f-ZERO b { color: var(--zero); }
.pc-recent { display: flex; gap: 3px; }
.pc-recent i { width: 13px; height: 6px; border-radius: 1px; background: #3A3A44; }
.pc-recent i.w { background: var(--zero); }
.pc-recent i.d { background: #8C897F; }
.pc-top3 { display: flex; gap: 4px; }
.pc-top3 i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; background: #1E1E25; color: var(--fg); }
.pc-top3 svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; }
.pc-note { margin: 0; font-size: 12px; color: var(--mute); }
#pc-pop { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.pc-pop-bg { position: absolute; inset: 0; background: rgba(5,6,9,.62); }
.pc-pop-box { position: relative; max-height: 100%; overflow-y: auto; animation: pc-in .18s ease-out both; }
.pc-pop-box .pc.pc-mid { width: min(320px, calc(100vw - 24px)); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.pc-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; padding: 0; border-radius: 50%; }
@keyframes pc-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .pc-pop-box { animation: none; } }
[data-pcard] { cursor: pointer; }
.seat .s-name[data-pcard]:hover { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .pc-pop-box .pc.pc-mid { padding: 10px; gap: 7px; }
  .pc-av.pc-l { width: 44px; height: 44px; }
}

/* ranked page */
.rk-me { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.rk-how ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #CFCAC0; line-height: 1.6; }
.rk-rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rk-room { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid #3A3A44; border-top: 3px solid var(--rc); border-radius: 6px; background: #16161B; }
.rk-room.lock { opacity: .55; }
.rk-rh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rk-rh b { font-size: 17px; font-weight: 900; color: var(--rc); }
.rk-rh span { font-size: 9.5px; letter-spacing: .14em; color: var(--mute); }
.rk-room small { font-size: 12px; color: #CFCAC0; }
.rk-pts { display: flex; gap: 12px; font-size: 12px; color: var(--mute); }
.rk-st { font-style: normal; font-size: 12px; font-weight: 700; color: var(--mute); }
.rk-room.ok .rk-st { color: var(--zero); }
.rk-go { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rk-go button[disabled] { opacity: .5; cursor: not-allowed; }
/* home: the ranked entry (purple) and the player card in the top bar */
.lb-go.ranked { color: #CDB8FF; box-shadow: inset 4px 0 0 #9B75FF, inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.6); }
.lb-go.ranked .lb-go-tx b { color: #ECE8DF; }
.lb-go.ranked .lb-go-code { color: #9B75FF; }
.lb-player .pc-av.pc-s { width: 36px; height: 36px; border-radius: 50%; }
.lb-player .pc-hex.pc-s { width: 22px; height: 24px; }
.lb-player .pc-hex.pc-s b { font-size: 7.5px; }
@media (max-width: 760px) { .rk-me { grid-template-columns: minmax(0, 1fr); } .rk-rooms { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .lb-player .pc-av.pc-s { width: 26px; height: 26px; }
  .lb-player .pc-hex.pc-s { width: 16px; height: 18px; }
  .lb-player .pc-hex.pc-s b { font-size: 5.5px; }
  .rk-me { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
  .rk-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rk-room { padding: 8px 10px; gap: 3px; }
  .rk-rh b { font-size: 14px; }
}

/* profile page: player card and avatar picker */
.pf-pc { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 18px; align-items: start; }
.pf-av { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf-avh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-avh h3 { margin: 0; }
.pf-avgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px; }
.pf-avc { position: relative; display: grid; place-items: center; padding: 3px; border: 1px solid #3A3A44; border-radius: 8px; background: #121217; aspect-ratio: 1; }
.pf-avc .pc-av.pc-l { width: 100%; height: 100%; }
.pf-avc small { position: absolute; right: 4px; bottom: 3px; font-size: 8.5px; padding: 0 3px; border-radius: 2px; background: #0E0E11; color: #E5A50A; }
.pf-avc.on { border-color: #3FE0FF; box-shadow: 0 0 0 1px #3FE0FF; }
.pc.pc-full { width: 100%; }
@media (max-width: 760px) { .pf-pc { grid-template-columns: minmax(0, 1fr); } }
/* home: the big Local button, then Ranked and Friend room side by side */
.lb-play-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lb-play-row .lb-go { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 11px 14px 11px 12px; }
.lb-play-row .lb-go-ic { width: 36px; height: 36px; }
.lb-play-row .lb-go-tx b { font-size: 17px; }
.lb-play-row .lb-go-tx small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-play-row .lb-go-code { right: 14px; top: 5px; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .lb-play-row { display: contents; }
  .lb-play-row .lb-go { grid-template-columns: 26px minmax(0, 1fr); gap: 7px; padding: 8px 10px 8px 8px; }
  .lb-play-row .lb-go-ic { width: 26px; height: 26px; }
  .lb-play-row .lb-go-tx b { font-size: 14px; }
  .lb-play-row .lb-go-code { display: none; }
}
/* avatars: a still picture, and the frame's shimmer stays still too */
.pc-av .pc-pic { position: absolute; inset: 0; background-repeat: no-repeat; }
.pc-av .rp-art-frame::after { animation: none !important; }
.name-show .pc-av.pc-s { width: 28px; height: 28px; }
/* avatar picker: groups by rarity, each tile named */
.pf-avlist { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; padding: 2px; }
.pf-avlist .pf-avgrid { max-height: none; overflow: visible; }
.pf-avg { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0; font-size: 12px; color: var(--mute); font-weight: 700; }
.pf-avg small { font-size: 10px; }
.pf-avc { aspect-ratio: auto; display: flex; flex-direction: column; gap: 3px; padding: 4px 4px 3px; }
.pf-avi { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.pf-avi .pc-av.pc-l { width: 100%; height: 100%; }
.pf-avc em { font-style: normal; font-size: 10px; color: var(--mute); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-avc.on em { color: var(--fg); }
/* profile: tap the avatar to change it (a pop-up picker) */
.pf-pc { display: block; }
.pf-pc .pc.pc-full { max-width: 420px; }
.pc-avbtn { position: relative; flex: none; padding: 0; border: 0; background: none; border-radius: 6px; cursor: pointer; }
.pc-avbtn:hover .pc-av, .pc-avbtn:focus-visible .pc-av { outline: 2px solid #3FE0FF; outline-offset: 2px; }
/* the avatar keeps its art and metal frame layers inside itself, so the edit badge always sits on top */
.pc-avbtn .pc-av { isolation: isolate; }
.pc-edit { position: absolute; right: -6px; bottom: -6px; z-index: 2; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: #ECE8DF; color: #0E0E11; box-shadow: 0 0 0 2px #16161B, 0 2px 6px rgba(0,0,0,.5); }
.pc-edit svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pf-avpop { position: fixed; inset: 0; z-index: 9400; display: grid; place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.pf-avpop-bg { position: absolute; inset: 0; background: rgba(5,6,9,.66); }
.pf-avpop-box { position: relative; width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
  border: 1px solid #3A3A44; border-radius: 10px; background: #16161B; box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: pc-in .18s ease-out both; }
.pf-avpop-box .pf-avlist { max-height: none; flex: 1; min-height: 0; }
.pf-avx { width: 32px; height: 32px; padding: 0; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .pf-avpop-box { animation: none; } }

/* Profile page: the player card and account details on top (full width); inventory and backup on
   the left, match history on the right; one column on narrow screens. */
.pf .pf-pc { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.pf .pf-pc .pc.pc-full { max-width: none; }
.pf-acct { display: flex; flex-direction: column; gap: 10px; justify-content: center; min-width: 0; }
.pf-chips { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 14px; border: 1px solid rgba(63,199,232,.5); border-radius: 6px; background: var(--bg-2); }
.pf-chips i { width: 13px; height: 13px; background: #3FC7E8; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pf-chips b { font-size: 22px; }
.pf-chips small { font-size: 11px; color: var(--mute); }
.pf-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 12px; }
.pf-kv dt { color: var(--mute); letter-spacing: .08em; }
.pf-kv dd { margin: 0; letter-spacing: .06em; }
.pf-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; }
.pf-lock svg { width: 12px; height: 12px; flex: none; }
.pf .pf-inv { grid-column: 1; grid-row: 2; }
.pf .pf-hist { grid-column: 2; grid-row: 2 / span 2; }
.pf .pf-bk { grid-column: 1; grid-row: 3; }
@media (max-width: 760px) {
  .pf { grid-template-columns: minmax(0, 1fr); }
  .pf .pf-pc { grid-template-columns: minmax(0, 1fr); }
  .pf .pf-inv, .pf .pf-hist, .pf .pf-bk { grid-column: 1; grid-row: auto; }
}
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .pf .pf-pc { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 10px; }
  .pf-acct { gap: 6px; }
  .pf-chips { padding: 5px 10px; }
  .pf-chips b { font-size: 17px; }
  .pf-kv { font-size: 11px; }
}
.pf-acct .pf-safe { flex-wrap: nowrap; align-items: flex-start; }
.pf-acct .pf-safe i { flex: none; margin-top: 5px; }

/* ---------- session open: 「傳輸開始」 before the first draw (FX.matchStart, ~3.2 s) ---------- */
.fx-mstart { position: fixed; inset: 0; z-index: 9000; pointer-events: none; display: grid; place-items: center; overflow: hidden;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.ms-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(8,9,12,.78), rgba(4,5,7,.92)); animation: ms-fade .35s ease-out both; }
.ms-dim::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(236,232,223,.035) 3px 4px); }
.ms-scan { position: absolute; left: 0; right: 0; height: 22vh; top: -24vh;
  background: linear-gradient(180deg, transparent, rgba(63,224,255,.10) 70%, rgba(63,224,255,.45) 98%, transparent);
  animation: ms-scan 1.1s cubic-bezier(.3,.1,.3,1) .85s both; }
.ms-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 100%; }
.ms-term { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 12px; color: #8C897F; letter-spacing: .04em; }
.ms-term span { opacity: 0; animation: ms-line .25s steps(6) both; animation-delay: calc(.12s + var(--i) * .22s); white-space: nowrap; }
.ms-term b { color: #3FE0FF; font-weight: 600; margin-left: 6px; }
.ms-sides { display: inline-flex; gap: 8px; }
.ms-sides i { font-style: normal; font-weight: 700; }
.ms-title { position: relative; font-family: var(--f-display); font-size: clamp(40px, 9vw, 104px); line-height: 1; letter-spacing: .06em; color: #ECE8DF;
  text-shadow: 0 0 24px rgba(63,224,255,.35); animation: ms-title .5s cubic-bezier(.2,.9,.2,1) .9s both; }
.ms-title b { font-weight: 400; }
.ms-title::before, .ms-title::after { content: attr(data-t); position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.ms-title::before { color: #FF3E5E; animation: ms-glitch-a .5s steps(2) .9s both; }
.ms-title::after { color: #3FE0FF; animation: ms-glitch-b .5s steps(2) .9s both; }
.ms-rule { width: min(520px, 80vw); height: 2px; background: rgba(236,232,223,.12); overflow: hidden; }
.ms-rule i { display: block; height: 100%; background: linear-gradient(90deg, #E5A50A, #3FE0FF 50%, #2BAE66); transform-origin: left; animation: ms-rule .6s ease-out 1.1s both; }
.ms-sub { font-size: 11px; letter-spacing: .3em; color: #8C897F; animation: ms-fade .4s ease-out 1.25s both; }
.ms-first { display: inline-flex; align-items: baseline; gap: 10px; padding: 6px 16px; border: 1px solid rgba(236,232,223,.22); background: rgba(14,14,17,.7);
  font-size: 13px; color: #CFCAC0; animation: ms-up .45s cubic-bezier(.2,.9,.2,1) 1.5s both; }
.ms-first b { font-size: 18px; font-weight: 900; color: #ECE8DF; }
.fx-mstart.out { animation: ms-out .5s ease-in both; }
@keyframes ms-fade { from { opacity: 0; } }
@keyframes ms-out { to { opacity: 0; } }
@keyframes ms-line { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes ms-scan { to { top: 104vh; } }
@keyframes ms-title { 0% { opacity: 0; transform: scale(1.35); filter: blur(6px); letter-spacing: .3em; } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; letter-spacing: .06em; } }
@keyframes ms-glitch-a { 0% { opacity: .9; transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); } 50% { transform: translate(4px, -1px); clip-path: inset(60% 0 8% 0); } 100% { opacity: 0; transform: none; } }
@keyframes ms-glitch-b { 0% { opacity: .9; transform: translate(6px, -2px); clip-path: inset(55% 0 10% 0); } 50% { transform: translate(-4px, 1px); clip-path: inset(8% 0 60% 0); } 100% { opacity: 0; transform: none; } }
@keyframes ms-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ms-up { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .ms-box { gap: 7px; }
  .ms-term { font-size: 9.5px; }
  .ms-title { font-size: clamp(32px, 9vh + 2vw, 64px); }
  .ms-sub { font-size: 8.5px; letter-spacing: .22em; }
  .ms-first { padding: 4px 12px; font-size: 11px; }
  .ms-first b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-scan, .ms-title::before, .ms-title::after { display: none; }
  .ms-term span, .ms-title, .ms-rule i, .ms-sub, .ms-first { animation: ms-fade .3s ease-out both; opacity: 1; }
}
/* opening: the operator panel fades in after the faction boot (no chip insert, no slot overlay) */
.role-panel.chip-in { animation: rp-fadein .6s ease-out both !important; animation-delay: calc((2600 - var(--age, 0)) * 1ms) !important; }
@keyframes rp-fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .role-panel.chip-in { animation: none !important; } }
/* opening, after the card scan: the operator panel rebuilds itself, drawn inside the panel (so it always lines up).
   It builds up from top to bottom behind a bright scan bar, over a grid, with a little signal jitter; ~1.3 s from 3.5 s. */
.role-panel.chip-in { animation: rp-rebuild 1.3s linear both !important; animation-delay: calc((3500 - var(--age, 0)) * 1ms) !important; }
@keyframes rp-rebuild {
  0% { opacity: 1; clip-path: inset(0 0 100% 0); filter: brightness(2.4) saturate(0); transform: none; }
  12% { transform: translateX(-3px); }
  16% { transform: translateX(2px); }
  20% { transform: none; }
  70% { clip-path: inset(0 0 0 0); filter: brightness(1.7) saturate(.5); }
  74% { transform: translateX(2px); }
  78% { transform: none; }
  100% { clip-path: inset(0 0 0 0); filter: none; transform: none; } }
.role-panel .rp-rebuild { position: absolute !important; inset: 0; z-index: 6 !important; pointer-events: none; overflow: hidden; border-radius: inherit;
  animation: rr-out .35s ease-out both; animation-delay: calc((4800 - var(--age, 0)) * 1ms); }
.rp-rebuild .rr-grid { position: absolute; inset: 0;
  background: linear-gradient(rgba(63,224,255,.16) 1px, transparent 1px) 0 0 / 100% 12px, linear-gradient(90deg, rgba(63,224,255,.12) 1px, transparent 1px) 0 0 / 12px 100%;
  animation: rr-grid 1.3s linear both; animation-delay: calc((3500 - var(--age, 0)) * 1ms); }
.rp-rebuild .rr-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #CFF7FF; box-shadow: 0 0 10px #3FE0FF, 0 0 24px rgba(63,224,255,.6);
  animation: rr-scan .95s cubic-bezier(.4,0,.2,1) both; animation-delay: calc((3500 - var(--age, 0)) * 1ms); }
.rp-rebuild .rr-tag { position: absolute; right: 8px; bottom: 6px; font-size: 9px; letter-spacing: .3em; color: #3FE0FF; text-shadow: 0 0 8px rgba(63,224,255,.8);
  animation: rr-tag 1.3s steps(1) both; animation-delay: calc((3500 - var(--age, 0)) * 1ms); }
@keyframes rr-scan { 0% { top: 0; opacity: 1; } 100% { top: calc(100% - 3px); opacity: .9; } }
@keyframes rr-grid { 0% { opacity: .9; } 70% { opacity: .5; } 100% { opacity: 0; } }
@keyframes rr-tag { 0%, 30%, 60% { opacity: 1; } 15%, 45% { opacity: .2; } 100% { opacity: 0; } }
@keyframes rr-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .role-panel.chip-in { animation: none !important; }
  .role-panel .rp-rebuild { display: none; }
}

/* sound test panel (game.html#fxlab only) */
#fx-lab { position: fixed; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 9800; display: flex; flex-direction: column; gap: 4px;
  padding: 10px; border: 1px solid #FF4A3D; border-radius: 8px; background: rgba(14,14,17,.94); box-shadow: 0 10px 30px rgba(0,0,0,.6); font-size: 12px; }
#fx-lab > b { font-size: 11px; letter-spacing: .1em; color: #FF8A73; margin-bottom: 2px; }
#fx-lab .fl-row { display: flex; align-items: center; gap: 6px; }
#fx-lab .fl-row span { min-width: 92px; display: inline-flex; gap: 6px; align-items: center; }
#fx-lab .fl-row i { font-style: normal; color: #FF8A73; }
#fx-lab button { padding: 3px 8px; font-size: 11px; }

/* ---------- codex: unlocking a coating repaints the card ----------
   The old finish (a copy laid on top) is wiped away from the top under a glowing spray line in the coating's colour,
   then a flash, hex sparks flying out, and a "COATING INSTALLED" tag. */
.cx-cfx { position: absolute; inset: 0; z-index: 6; pointer-events: none; --cc: #FF3EA5; }
.cfx-old { position: absolute; inset: 0; clip-path: inset(0 0 0 0); animation: cfx-wipe 1.05s cubic-bezier(.55,0,.45,1) .2s forwards; }
@keyframes cfx-wipe { to { clip-path: inset(100% 0 0 0); } }
.cfx-scan { position: absolute; left: -10%; right: -10%; top: 0; height: 4px; border-radius: 2px; background: #fff;
  box-shadow: 0 0 10px 2px var(--cc), 0 0 30px 6px var(--cc); opacity: 0; animation: cfx-scan 1.05s cubic-bezier(.55,0,.45,1) .2s forwards; }
.cfx-scan::before { content: ''; position: absolute; left: 10%; right: 10%; bottom: 100%; height: 60px;
  background: linear-gradient(to top, color-mix(in srgb, var(--cc) 55%, transparent), transparent); }
@keyframes cfx-scan { 0% { top: 0; opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.cfx-flash { position: absolute; inset: -6%; border-radius: 12px; background: radial-gradient(ellipse, #fff, color-mix(in srgb, var(--cc) 70%, transparent) 40%, transparent 70%);
  opacity: 0; animation: cfx-flash .6s ease-out 1.2s; }
@keyframes cfx-flash { 0% { opacity: 0; } 20% { opacity: .85; } 100% { opacity: 0; } }
.cfx-sparks i { position: absolute; left: 50%; top: 50%; width: 12px; height: 13px; margin: -6px 0 0 -6px; background: var(--cc); box-shadow: 0 0 8px var(--cc);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: 0; animation: cfx-spark .8s cubic-bezier(.1,.7,.3,1) calc(1.22s + var(--dl)) forwards; }
@keyframes cfx-spark { 0% { opacity: 1; transform: translate(0, 0) scale(1.2); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.3) rotate(120deg); } }
.cfx-tag { position: absolute; left: 50%; bottom: 16%; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 14px; white-space: nowrap;
  background: rgba(8,9,13,.95); border: 1px solid var(--cc); border-radius: 3px; box-shadow: 0 0 18px -4px var(--cc);
  opacity: 0; transform: translate(-50%, 8px); animation: cfx-tag 1.1s ease 1.3s forwards; }
.cfx-tag small { font-size: 9px; letter-spacing: .22em; color: var(--cc); }
.cfx-tag b { font-size: 14px; font-weight: 900; color: #fff; }
@keyframes cfx-tag { 0% { opacity: 0; transform: translate(-50%, 8px); } 18% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cx-cfx > * { animation-duration: .01s !important; animation-delay: 0s !important; } .cfx-tag { opacity: 1; transform: translate(-50%, 0); } }