/* 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; } }
/* the art window stands well past both edges of the band; it sits where the tilted band is lower (left of centre, by ~1.9vw), so it overhangs evenly */
.skx-UR .win { position: absolute; left: 6%; top: calc(-25% + 1.9vw); bottom: calc(-25% - 1.9vw); 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; display: flex; flex-direction: column; align-items: center; --bc: #F4F1EA; }
.fx-boxbadge b { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border-radius: 3px; font-size: 14px; font-weight: 900; color: #0B0B0E; background: var(--bc); box-shadow: 0 0 14px -2px var(--bc), 0 4px 12px rgba(0,0,0,.5); white-space: nowrap; }
.fx-boxbadge b em { font: 900 11px var(--f-body, 'Noto Sans TC', sans-serif); font-style: normal; background: rgba(0,0,0,.25); color: #fff; padding: 0 3px; border-radius: 2px; }
.fx-boxbadge::after { content: ''; border: 5px solid transparent; border-top-color: var(--bc); }
.fx-boxbadge.c-ORDER { --bc: var(--order); } .fx-boxbadge.c-GHOST { --bc: var(--ghost); } .fx-boxbadge.c-VIRUS { --bc: #A27BFF; }
.fx-boxbadge.down b { background: #1C1C22; color: #F4F1EA; box-shadow: inset 0 0 0 1.5px var(--bc), 0 4px 12px rgba(0,0,0,.5); }
.fx-boxbadge.down b em { background: var(--bc); color: #0B0B0E; }
.fx-cellring { position: fixed; z-index: 44; pointer-events: none; border: 2px solid var(--bc); border-radius: 4px; box-shadow: 0 0 12px var(--bc), inset 0 0 8px var(--bc); --bc: #F4F1EA; }
.fx-cellring.c-ORDER { --bc: var(--order); } .fx-cellring.c-GHOST { --bc: var(--ghost); } .fx-cellring.c-VIRUS { --bc: #A27BFF; }
@media (prefers-reduced-motion: reduce) { .fx-boxbadge b, .s-field .rcv-pop, .meter .mt.rcv-pop { animation: none; } .fx-tab, .fx-cellring { display: 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); }
/* R / SR coatings: the same layers and motion, only the colour changes to the coating's (--cc, set by CN_COL.coat) */
.rcoat.rc-R.cc.c1 { background: radial-gradient(circle at var(--mx) var(--my), color-mix(in srgb, var(--cc) 38%, transparent), transparent 46%),
    repeating-linear-gradient(0deg, color-mix(in srgb, color-mix(in srgb, var(--cc) 55%, #fff) 6%, transparent) 0 1px, transparent 1px 3px); }
.rcoat.rc-R.cc.c2 { box-shadow: inset 0 0 0 1.5px var(--cc), inset 0 0 24px color-mix(in srgb, var(--cc) 45%, transparent), 0 0 14px color-mix(in srgb, var(--cc) 45%, transparent);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, color-mix(in srgb, var(--cc) 55%, #fff) 45%, transparent), transparent) 0 -30% / 100% 16% no-repeat; }
.rcoat.rc-SR.cc.c1 { background:
    radial-gradient(circle, color-mix(in srgb, var(--cc) 55%, #fff) 0 .7px, transparent 1.3px) 0 0 / 13px 11px,
    radial-gradient(circle, color-mix(in srgb, var(--cc) 25%, #fff) 0 .9px, transparent 1.6px) 5px 7px / 17px 19px,
    radial-gradient(circle, var(--cc) 0 1.1px, transparent 1.9px) 9px 3px / 23px 21px; }
.rcoat.rc-SR.cc.c2 { background: linear-gradient(120deg, transparent 35%, color-mix(in srgb, color-mix(in srgb, var(--cc) 75%, #fff) 50%, transparent) 50%, transparent 65%); background-size: 250% 250%;
  background-position: var(--mx) var(--my);
  box-shadow: inset 0 0 0 2px var(--cc), inset 0 0 0 4px color-mix(in srgb, var(--cc) 12%, #000), inset 0 0 0 5px color-mix(in srgb, var(--cc) 70%, transparent); }
.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 > .gc-ten { grid-column: 1 / -1; color: #E5A50A; font-size: 11px; }
.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%; }
/* pick-up: the featured operator's UR and SAR side by side (both are rated up) */
.gc-key.gc-key2 { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #07080B; }
.gc-key2 figure { position: relative; margin: 0; min-width: 0; overflow: hidden; }
.gc-key2 img { object-position: 50% 18%; }
.gc-key2 figcaption { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 2px 8px; border-radius: 2px; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: #0B0C10; background: var(--rc); box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 60%, transparent); }
.gc-key2 figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 45%, transparent); }
@media (max-height: 520px), (max-width: 640px) { .gc-key2 figcaption { top: 6px; right: 6px; font-size: 8px; padding: 1px 5px; } }
.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(2, 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(5, 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(2, 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); white-space: nowrap; }
.rk-rh span { font-size: 9.5px; letter-spacing: .14em; color: var(--mute); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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); } }
/* narrow phones (about 720px wide or less, held sideways): the menu takes more of the width, the big mode
   buttons drop their icons, and the small tiles tighten, so long names (Japanese) stay on one line */
@media (max-width: 720px) and (max-height: 600px) and (orientation: landscape) {
  .lobby { grid-template-columns: minmax(0, 62%) minmax(0, 1fr); padding-left: max(4vw, calc(env(safe-area-inset-left) + 6px)); }
  .lb-go .lb-go-ic, .lb-play-row .lb-go-ic { display: none; }
  .lb-go, .lb-go.main, .lb-play-row .lb-go { grid-template-columns: minmax(0, 1fr); padding-left: 12px; }
  .lb-go-tx b, .lb-go.main .lb-go-tx b, .lb-play-row .lb-go-tx b { font-size: 14px; white-space: nowrap; }
  .lb-tile { gap: 4px; padding: 6px 5px; }
  .lb-tx b { font-size: 10.5px; }
  .lb-dk b { font-size: 11px; }
}
/* iPad (and any screen with a status bar over the page, e.g. a Home Screen web app): the top buttons, the match
   top bar and the bottom of the table keep clear of the status bar and the home indicator. env() is 0 elsewhere. */
#help-dock { top: max(6px, calc(env(safe-area-inset-top) + 4px)); right: max(10px, calc(env(safe-area-inset-right) + 6px)); }
.nav-back { top: max(14px, calc(env(safe-area-inset-top) + 6px)); left: max(16px, calc(env(safe-area-inset-left) + 6px)); }
@media (min-height: 601px) {   /* not the phone layout, which has its own insets */
  .topbar { padding-top: max(9px, calc(env(safe-area-inset-top) + 4px)); }
  body.fit .topbar, #app > .topbar { padding-top: max(6px, calc(env(safe-area-inset-top) + 4px)); }
  .table { padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 8px)); }
}
/* a tablet held upright: matches and lessons are laid out for landscape, so ask for the turn, as on phones
   (the home page and menus work upright and stay usable). An iPad cannot be turned by the page, so no button. */
@media (orientation: portrait) and (min-width: 701px) and (max-width: 1100px) {
  body.phone-game, body:has(> #mission) { overflow: hidden; }
  body.phone-game #rotate-screen, body:has(> #mission) #rotate-screen { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; background: rgba(8,9,12,.97); }
  body.phone-game .rotate-card, body:has(> #mission) .rotate-card { width: min(100%, 420px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
    padding: 32px 26px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); box-shadow: 0 20px 70px #000; }
  body.phone-game .rotate-icon, body:has(> #mission) .rotate-icon { font-size: 64px; line-height: 1; color: var(--hi); }
  body.phone-game .rotate-card b, body:has(> #mission) .rotate-card b { font-size: 21px; }
  body.phone-game .rotate-card small, body:has(> #mission) .rotate-card small { color: var(--mute); line-height: 1.6; }
  #rotate-enter { display: none; }
}

/* ================= open box (computer and tablet landscape) =================
   Nothing is covered: the phase bar (whose turn, step, task, seconds) folds into one row and stays.
   While a choice is yours the action box opens and pushes the message strip down to one line;
   otherwise the box folds to one line and the message strip shows more of what just happened.
   Phones keep their own layout (a phone on its side is at most 1024 × 600). */
@media (min-width: 1025px) and (min-height: 560px), (min-width: 1000px) and (min-height: 601px) {
  /* phase bar: one row */
  body.fit .table .phasebar { height: auto; flex: none; }
  body.fit .table .pb { flex-direction: row; align-items: center; gap: 10px; padding: 6px 10px 8px; }
  body.fit .table .pb-top { display: contents; }
  body.fit .table .pb-who { flex: none; }
  body.fit .table .pb-steps { flex: none; gap: 4px; }
  body.fit .table .pb-sep { width: 10px; flex: none; }
  body.fit .table .pb-step:not(.on) b { display: none; }
  body.fit .table .pb-task { flex: 1; min-width: 0; padding: 5px 9px; }
  body.fit .table .pb-task b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  body.fit .table .pb-sec { order: 9; margin-left: 0; }
  body.fit .table .pb-task { overflow: hidden; }

  /* someone else's move: a one-line box, a taller message strip */
  body.fit .table .ticker { flex: 1 1 auto; height: auto; min-height: 26px; overflow: hidden; justify-content: flex-end; transition: flex-grow .2s; }
  body.fit .table .ticker .tk.now { white-space: normal; }
  body.fit .table .prompt { flex: none; min-height: 0; padding: 8px 12px; gap: 8px; }
  /* the coach stays too: its heading (click to open), whoever's move it is */
  body.fit .table .prompt:not(.pr-open) .coach { margin-top: 0; }

  /* top-down: the box sits right under the phase bar and is only as tall as what it holds; the message strip
     moves below it and takes the rest (at least one line); the box scrolls only if it can't fit */
  body.fit .table .midcol > .prompt { order: 1; }
  body.fit .table .midcol > .ticker { order: 2; justify-content: flex-start; }
  body.fit .table .midcol.mc-open .ticker { flex: 1 1 0; height: auto; min-height: 26px; }
  body.fit .table .prompt.pr-open { flex: 0 1 auto; overflow-y: auto; overflow-x: hidden; padding: 8px 12px; gap: 6px; animation: pr-open .22s ease-out, act-pulse-p 1.2s ease-in-out .22s infinite; }
  @keyframes pr-open { from { opacity: .4; clip-path: inset(40% 0 0 0); } to { opacity: 1; clip-path: inset(0); } }
  body.fit .table .prompt.pr-open { position: relative; }
  /* the buttons sit on the bottom edge of the box, right above the hand: the choices in one centred row,
     and under them the finishing button (end / confirm / let it pass), always in the same spot in the middle */
  body.fit .table .prompt.pr-open .pr-btns { order: 20; margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 6px 8px; }
  /* the button row is a bar across the bottom of the middle column (between the channel and the log), right above
     the hand; it stays pinned there even when the coach notes make the box scroll */
  body.fit .table .prompt.pr-open { padding-bottom: 0; }
  body.fit .table .prompt.pr-open .pr-btns { position: sticky; bottom: 0; z-index: 2; margin: 0 -12px; padding: 8px 12px; flex: none; flex-wrap: wrap;
    background: linear-gradient(180deg, #1F1F27, #18181E); border-top: 1px solid var(--line-2); border-radius: 0 0 3px 3px; }
  body.fit .table .prompt.pr-open .pr-text, body.fit .table .prompt.pr-open .pr-q { text-align: center; justify-content: center; }
  body.fit .table .prompt.pr-open .pr-sub { display: none; }
  body.fit .table .prompt.pr-open .pt-desc { margin-top: 2px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.fit .table .prompt.pr-open .pr-btns > button { flex: 0 1 auto; width: auto; min-width: 132px; max-width: 240px; min-height: 38px; justify-content: center; text-align: center; font-size: 14px; }
  body.fit .table .prompt.pr-open .pr-btns > .btn-stop { order: 9; min-width: 160px; }
  /* one row while it fits; a second row only when there are too many choices (labels never break) */
  body.fit .table .prompt.pr-open .pr-btns > button { flex-shrink: 0; white-space: nowrap; }
  body.fit .table .prompt.pr-open:has(.coach) .pr-btns { padding-left: 100px; padding-right: 100px; }
  /* once a command is picked its description is already known: the target row needs the room */
  body.fit .table .prompt.pr-open:has(.back-btn) .pt-desc { display: none; }
  body.fit .table .prompt.pr-open .pr-btns > .back-btn { order: -1; min-width: 0; padding: 0 14px; font-size: 13px; }
  body.fit .table .prompt.pr-open .pr-btns > .skill-btn { max-width: 320px; justify-content: flex-start; text-align: left; }

  /* coach notes: folded to a small tab in the bar's bottom-right corner; click it for the notes (shown above the bar) */
  body.fit .table .prompt .coach { margin-top: auto; padding: 3px 10px; flex: none; }
  body.fit .table .prompt.pr-open .coach { order: 10; margin-top: 0; }
  body.fit .table .prompt.pr-open:not(.coach-open) .coach { position: absolute; bottom: 10px; right: 12px; z-index: 3; padding: 2px 8px; font-size: 11px; }
  body.fit .table .prompt.pr-open:not(.coach-open) .coach .co-h { font-size: 10px; letter-spacing: .12em; }
  body.fit .table .prompt .coach .co-h { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; margin: 0; }
  body.fit .table .prompt.coach-open .coach .co-h { margin-bottom: 3px; }
  body.fit .table .prompt .coach .co-h::after { content: '\25B8'; margin-left: auto; font-size: 11px; transition: transform .15s; }
  body.fit .table .prompt.coach-open .coach .co-h::after { transform: rotate(90deg); }
  body.fit .table .prompt:not(.coach-open) .coach > :not(.co-h) { display: none; }
}

/* open box on a narrower screen (tablet landscape): the phase bar drops the task label (its colour says it) */
@media (min-width: 1000px) and (max-width: 1199px) and (min-height: 560px) {
  body.fit .table .pb-task .pb-lbl { display: none; }
  body.fit .table .pb-who { padding: 4px 8px; font-size: 12px; }
  /* narrower box: the choices narrow to share the row, the coach tab shrinks to its icon */
  body.fit .table .prompt.pr-open:has(.coach) .pr-btns { padding-left: 12px; padding-right: 46px; }
  body.fit .table .prompt.pr-open .pr-btns > button:not(.btn-stop) { flex: 1 0 auto; min-width: 0; max-width: 220px; padding-left: 10px; padding-right: 10px; }
  body.fit .table .prompt.pr-open .pr-btns > .btn-stop { flex: 0 1 auto; min-width: 110px; }
  body.fit .table .prompt.pr-open .pr-btns > .back-btn { flex: none; }
  body.fit .table .prompt.pr-open:not(.coach-open) .coach { bottom: 16px; padding: 4px 6px; }
  body.fit .table .prompt.pr-open:not(.coach-open) .coach .co-h { font-size: 0; gap: 0; }
  body.fit .table .prompt.pr-open:not(.coach-open) .coach .co-h::before { font-size: 12px; }
  body.fit .table .prompt.pr-open:not(.coach-open) .coach .co-h::after { display: none; }
}

/* ================= channel: the protocol reads from the label's shape =================
   Route: an outlined pill with a turning loop arrow. Direct: a solid arrow plate that carries the target's
   name. Open: a dashed frame. Black and white, like the rest of the table. */
.channel .ch-head { flex-direction: column; align-items: stretch; gap: 5px; }
.ch-mode { align-self: flex-start; max-width: 100%; white-space: nowrap; }
.ch-mode .cm-n { flex: none; }
.ch-mode.m-ROUTE { background: transparent; color: var(--paper); box-shadow: none; border: 2px solid var(--paper); border-radius: 20px; padding: 1px 12px 1px 6px; }
.ch-mode.m-ROUTE svg { animation: chm-spin 2.4s linear infinite; }
@keyframes chm-spin { to { transform: rotate(360deg); } }
.ch-mode.m-DIRECT { align-self: stretch; background: var(--paper); color: var(--ink); box-shadow: none; border-radius: 0; padding: 4px 26px 4px 8px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.ch-mode.m-DIRECT em { font-style: normal; margin-left: auto; padding-left: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ch-mode.m-OPEN { background: transparent; color: var(--paper); box-shadow: none; border: 2px dashed var(--paper); }
.ch-sub { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--mute); line-height: 1.3; }
.ch-sub b { color: var(--fg); flex: none; }
@media (prefers-reduced-motion: reduce) { .ch-mode.m-ROUTE svg { animation: none; } }
/* phones: the channel is tiny, so the shape alone tells the protocol */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape), (max-width: 700px) and (orientation: portrait) {
  .channel .ch-head { gap: 2px; }
  .ch-sub, .ch-mode.m-DIRECT em { display: none; }
  .ch-mode.m-ROUTE, .ch-mode.m-OPEN { border-width: 1px; }
  .ch-mode.m-DIRECT { padding-right: 12px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
}

/* ================= action buttons: neon, one colour per kind =================
   Every button in the action box except the command cards glows like the red "don't respond" one: a dark base, a bright edge, glowing text
   and a raised bottom edge, so none of them looks like a card face. Each kind has its own colour (--nc):
   receive green, pass grey, send orange, take VIRUS purple. Command-card buttons, operator skills, player targets,
   discard and activate / confirm keep their original look; "don't respond" / "back" stay red. */
.prompt .pr-btns > button { --nc: #CFCBC2; }
.prompt .pr-btns > button:is(.act-accept, .act-grab) { --nc: #3DDC84; }
.prompt .pr-btns > button.act-pass { --nc: #A8A498; }
.prompt .pr-btns > button:is(.act-send, .act-keep, .act-pick, .act-fire, .act-give, .act-handover, .act-dump, .act-reflect, .act-place, .act-aim) { --nc: #FF8A3D; }
.prompt .pr-btns > button.act-take { --nc: #A783FF; }
/* Truth Serum window: "take the VIRUS" glows VIRUS purple, like the other non-card buttons */
#pickwin button.pw-take.act-take { --nc: #A783FF; background: linear-gradient(180deg, color-mix(in srgb, var(--nc) 16%, #0D0D12), #0A0A0E) !important;
  color: color-mix(in srgb, var(--nc) 82%, #FFFFFF) !important; border: 2px solid var(--nc) !important; border-radius: 6px !important; font-weight: 900;
  text-shadow: 0 0 6px color-mix(in srgb, var(--nc) 85%, transparent) !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--nc) 50%, transparent), inset 0 0 10px color-mix(in srgb, var(--nc) 30%, transparent), 0 4px 0 color-mix(in srgb, var(--nc) 35%, #000000) !important; }
#pickwin button.pw-take.act-take:hover { filter: brightness(1.18); }
.prompt .pr-btns > button:not(.btn-stop):not(.back-btn):not(.cmd-btn):not(.who-btn):not(.act-discard):not(.act-show):not(.skill-btn):not(.act-yes):not(.act-ok) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--nc) 16%, #0D0D12), #0A0A0E) !important;
  color: color-mix(in srgb, var(--nc) 82%, #FFFFFF) !important; border: 2px solid var(--nc) !important; border-radius: 6px !important; outline: none !important;
  font-weight: 900; letter-spacing: .04em; text-shadow: 0 0 6px color-mix(in srgb, var(--nc) 85%, transparent), 0 0 14px color-mix(in srgb, var(--nc) 40%, transparent) !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--nc) 50%, transparent), 0 0 22px color-mix(in srgb, var(--nc) 20%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--nc) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--nc) 40%, #FFFFFF), 0 4px 0 color-mix(in srgb, var(--nc) 35%, #000000) !important;
  transform: translateY(-2px); transition: transform .08s, box-shadow .08s, filter .15s; }
.prompt .pr-btns > button:not(.btn-stop):not(.back-btn):not(.cmd-btn):not(.who-btn):not(.act-discard):not(.act-show):not(.skill-btn):not(.act-yes):not(.act-ok):hover { filter: brightness(1.18); }
.prompt .pr-btns > button:not(.btn-stop):not(.back-btn):not(.cmd-btn):not(.who-btn):not(.act-discard):not(.act-show):not(.skill-btn):not(.act-yes):not(.act-ok):active { transform: translateY(1px);
  box-shadow: 0 0 8px color-mix(in srgb, var(--nc) 45%, transparent), inset 0 0 12px color-mix(in srgb, var(--nc) 40%, transparent), 0 1px 0 color-mix(in srgb, var(--nc) 35%, #000000) !important; }

/* ================= packet card marks (channel) =================
   A layer the size of the card, over it: Route = a point of light running round the edge, Direct = three arrows
   lighting up in turn towards the target, Open = signal rings spreading out from the card. */
.pk-fx { position: absolute; left: 50%; top: 50%; width: calc(63 * var(--mm, 2.75px)); height: calc(88 * var(--mm, 2.75px)); transform: translate(-50%, -50%);
  border-radius: calc(3 * var(--mm, 2.75px)); pointer-events: none; z-index: 2; }
.pk-ROUTE svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pk-ROUTE rect { fill: none; }
.pk-ROUTE .pk-rail { stroke: rgba(244,241,234,.22); stroke-width: 1; }
.pk-ROUTE .pk-run { stroke: #F4F1EA; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 16 84; animation: pk-run 1.8s linear infinite; filter: drop-shadow(0 0 2px #fff); }
@keyframes pk-run { to { stroke-dashoffset: -100; } }
.pk-DIRECT { display: flex; align-items: center; justify-content: center; }
.pk-DIRECT .pk-chev { filter: drop-shadow(0 0 3px #fff); display: flex; gap: calc(1 * var(--mm, 2.75px)); transform: rotate(var(--ang, 0deg)); }
.pk-DIRECT .pk-chev b { width: calc(13 * var(--mm, 2.75px)); height: calc(19 * var(--mm, 2.75px)); background: #F4F1EA; opacity: .3;
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); animation: pk-chev 1s linear infinite; }
.pk-DIRECT .pk-chev b:nth-child(2) { animation-delay: .2s; } .pk-DIRECT .pk-chev b:nth-child(3) { animation-delay: .4s; }
@keyframes pk-chev { 0%, 100% { opacity: .3; } 30% { opacity: 1; } }
.pk-OPEN::before, .pk-OPEN::after { content: ''; position: absolute; inset: 0; border: 2px solid rgba(244,241,234,.8); border-radius: inherit; animation: pk-wave 1.8s ease-out infinite; }
.pk-OPEN::after { animation-delay: .9s; }
@keyframes pk-wave { from { transform: scale(1); opacity: .85; } to { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pk-ROUTE .pk-run, .pk-DIRECT .pk-chev b, .pk-OPEN::before, .pk-OPEN::after { animation: none; } .pk-DIRECT .pk-chev b { opacity: .8; } }

/* ================= who sent the packet =================
   A light trail from the sender to the channel (fades out), the sender's name in the channel, and a SENDING
   badge on the sender's seat until the packet is taken. */
.fx-trail { position: fixed; inset: 0; pointer-events: none; }
.fx-trail svg { width: 100%; height: 100%; overflow: visible; }
.fx-trail path { fill: none; stroke: #F4F1EA; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 8px #fff); }
.channel .ch-from { align-self: stretch; text-align: center; font-size: 12px; color: var(--mute); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel .ch-from b { color: #F4F1EA; font-weight: 900; }
.seat.sending::after, .mine.sending::after { content: '⇢ SENDING'; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); z-index: 6; pointer-events: none;
  padding: 1px 8px; border: 1px solid #F4F1EA; border-radius: 2px; background: rgba(8,8,12,.92); color: #F4F1EA; white-space: nowrap;
  font: 700 10px/1.4 var(--f-mono, monospace); letter-spacing: .14em; box-shadow: 0 0 10px -2px rgba(255,255,255,.6); }
.mine.sending { position: relative; }
.mine.sending::after { bottom: auto; top: -9px; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape), (max-width: 700px) and (orientation: portrait) {
  .channel .ch-from { display: none; }
  .seat.sending::after, .mine.sending::after { font-size: 8px; padding: 0 5px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { .fx-trail { display: none; } }

/* auto-play, between your own moves: a single line (status · who is deciding · take back control) */
.auto-box.auto-mini { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 6px 10px; }
.auto-box.auto-mini .au-wait { font-size: 12px; color: var(--mute); }
.auto-box.auto-mini .primary { margin-left: auto; align-self: center; padding: 4px 12px; font-size: 12px; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .auto-box.auto-mini { padding: 4px 6px; gap: 4px 8px; }
  .auto-box.auto-mini .au-wait { display: none; }
  .auto-box.auto-mini .primary { padding: 3px 8px; font-size: 10px; }
}

/* rarity cut-in N / R / SR: the operator licence panel */
.skx-L { position: relative; width: 520px; max-width: calc(100vw - 32px); padding: 5px; border: 2px solid var(--rc); box-shadow: 0 0 22px -4px var(--rc); background: rgba(6,7,10,.6); }
.skx-L .in { border: 2px solid var(--rc); background: #0B0B0E; overflow: hidden; }
.skx-L .hd { position: relative; display: flex; align-items: center; height: 32px; padding: 0 12px; overflow: hidden;
  background: var(--rc); background: linear-gradient(90deg, var(--rc), color-mix(in srgb, var(--rc) 45%, #fff) 50%, var(--rc)); color: #0B0B0E; }
.skx-L .hd b { font: 900 14px 'Noto Sans TC', sans-serif; letter-spacing: .06em; }
.skx-L .hd i { position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); transform: skewX(-20deg); }
.skx-L .bd { display: flex; align-items: center; gap: 24px; padding: 14px 20px 16px; }
.skx-L .hx { flex: none; width: 54px; height: 62px; display: grid; place-items: center; background: var(--rc); color: #0B0B0E;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.skx-L .hx svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.skx-L .rows { display: grid; grid-template-columns: auto 1fr; column-gap: 26px; row-gap: 6px; align-items: baseline; min-width: 0; }
.skx-L .rows small { font: 500 11px 'Noto Sans TC', sans-serif; color: #8D8A82; letter-spacing: .12em; white-space: nowrap; }
.skx-L .rows b { font: 900 18px/1.25 'Noto Sans TC', sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skx-L .rows b.big { font-size: 24px; }
@media (max-width: 600px) { .skx-L .bd { gap: 14px; padding: 10px 12px 12px; } .skx-L .rows { column-gap: 14px; } .skx-L .rows b.big { font-size: 20px; } .skx-L .rows b { font-size: 16px; } }

/* seat notes (FX.stamp): a tab strip out of the seat's left edge — colour block with icon, words, small English label */
.fx-tab { position: fixed; z-index: 32; pointer-events: none; display: flex; align-items: stretch; height: 44px; white-space: nowrap; background: rgba(10,10,13,.94);
  box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 -2px 0 var(--c); --c: #F2C14E; }
.fx-tab .ic { flex: none; min-width: 44px; display: grid; place-items: center; background: var(--c); color: #0B0B0E; }
.fx-tab .ic svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fx-tab .ic b { font: 900 21px var(--f-body, 'Noto Sans TC', sans-serif); }
.fx-tab .tx { display: flex; align-items: center; gap: 10px; padding: 0 18px 0 13px; font: 900 21px var(--f-body, 'Noto Sans TC', sans-serif); color: #fff; letter-spacing: .04em; }
.fx-tab .tx small { font: 700 12px var(--f-mono, monospace); letter-spacing: .18em; color: var(--c); }
.fx-tab .tx svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.fx-tab .chip { height: 30px; font-size: 14px; }
.fx-tab.tb-mute { height: 32px; box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 -1px 0 #555; }
.fx-tab.tb-mute .ic { min-width: 32px; background: #3A3A42; color: #CFCBC2; } .fx-tab.tb-mute .ic svg { width: 18px; height: 18px; }
.fx-tab.tb-mute .tx { font-size: 15px; color: #C8C5BD; padding: 0 12px 0 10px; }
.fx-tab.tb-card { height: auto; padding: 4px; } .fx-tab.tb-card .tx { padding: 0 4px; }
.fx-tab.tb-crash { height: 56px; } .fx-tab.tb-crash .ic { min-width: 56px; } .fx-tab.tb-crash .tx { font-size: 28px; letter-spacing: .1em; }
/* the action card's own pictogram in the colour block: line work dark, the card's accent shape in white */
.fx-tab .ic .pic { display: grid; place-items: center; --acc: rgba(255,255,255,.92); }
.fx-tab .ic .pic svg { width: 30px; height: 30px; fill: initial; stroke: currentColor; stroke-width: 4.2; stroke-linecap: square; stroke-linejoin: miter; }
.fx-tab.tb-mute .ic .pic svg { width: 21px; height: 21px; } .fx-tab.tb-crash .ic .pic svg { width: 38px; height: 38px; }
/* phones keep the strip exactly as it was */
@media (max-width: 600px), (max-height: 500px) {
  .fx-tab { height: 28px; } .fx-tab .ic { min-width: 28px; } .fx-tab .ic svg { width: 16px; height: 16px; } .fx-tab .ic b { font-size: 16px; }
  .fx-tab .tx { gap: 8px; font-size: 13px; padding: 0 10px 0 8px; } .fx-tab .tx small { font-size: 10px; } .fx-tab .tx svg { width: 16px; height: 16px; } .fx-tab .chip { height: 24px; font-size: 12px; }
  .fx-tab.tb-mute { height: 26px; } .fx-tab.tb-mute .ic { min-width: 26px; } .fx-tab.tb-mute .ic svg { width: 14px; height: 14px; } .fx-tab.tb-mute .tx { font-size: 12px; padding: 0 10px 0 8px; }
  .fx-tab.tb-crash { height: 44px; } .fx-tab.tb-crash .ic { min-width: 44px; } .fx-tab.tb-crash .tx { font-size: 22px; }
  .fx-tab .ic .pic svg { width: 20px; height: 20px; } .fx-tab.tb-mute .ic .pic svg { width: 17px; height: 17px; } .fx-tab.tb-crash .ic .pic svg { width: 30px; height: 30px; }
}


/* "No response on others' turns": a small switch on your own player bar */
.m-head .auto-none { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 9px 2px 7px; border: 1px solid var(--line-2, #3A3A44); border-radius: 999px;
  background: transparent; color: var(--mute, #8D8A82); font: 700 11px/1.4 var(--f-body, 'Noto Sans TC', sans-serif); cursor: pointer; white-space: nowrap; }
.m-head .auto-none i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; }
.m-head .auto-none:hover { color: var(--fg, #F4F1EA); border-color: var(--fg, #F4F1EA); }
.m-head .auto-none.on { color: #0B0B0E; background: #3FE0FF; border-color: #3FE0FF; }
.m-head .auto-none.on i { opacity: 1; background: #0B0B0E; }
@media (max-width: 600px), (max-height: 500px) { .m-head .auto-none { margin-left: 6px; padding: 1px 7px 1px 6px; font-size: 10px; } }

.m-head .auto-none .s { display: none; }

/* ===== Phone landscape, tailored: nothing squeezed below a readable size, every box on the same lines =====
   The table keeps its places (channel · action box · seats, your bar below); the seat column is wider, type has
   a floor of about 9px, and what doesn't fit is dropped rather than shrunk. */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .table, body.fit .table, body.log-closed:not(.fit) .table, body.fit.log-closed .table { grid-template-columns: minmax(0, 1fr) minmax(172px, 27vw); }

  /* seats: name line, then the three gauges */
  .seats, body.fit .seats { gap: 3px; }
  .seat, body.fit .seat { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) 15px; column-gap: 5px; row-gap: 2px; padding: 3px 6px 4px; border-radius: 5px; }
  .seat .s-head { grid-column: 1; grid-row: 1; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 5px; }
  /* the guess chip sits on the name line (not over the name) */
  .seat .s-tags { position: static; grid-column: 2; grid-row: 1; align-self: center; max-height: none; gap: 3px; }
  .seat .s-tags > .guess-btn { min-width: 30px; height: 16px; padding: 0 6px; border-radius: 3px; font-size: 9px; }
  .seat .s-tags > .guess-btn[class*="g-"] { font-size: 10px; }
  .seat .meter { grid-column: 1 / -1; grid-row: 2; }
  .seat .s-emb { width: 18px; height: 18px; } .seat .s-emb svg { width: 16px; height: 16px; }
  .seat .s-who { padding-right: 0; }
  .seat .s-nameline { gap: 4px; align-items: baseline; }
  .seat .s-no { font: 700 9px/1 var(--f-mono, monospace); color: var(--mute); }
  .seat .s-name { font-size: 12px; font-weight: 900; line-height: 1.15; }
  .seat .s-rolename { margin-top: 2px; font-size: 9px; line-height: 1.15; color: var(--mute); }
  .seat .s-rolename .s-rn { font-size: inherit !important; }
  .seat .s-hand { gap: 4px; padding: 2px 7px; border: 1px solid var(--line-2, #3A3A44); border-radius: 999px; }
  .seat .s-hand::before { content: ''; flex: none; width: 7px; height: 9px; border: 1.5px solid currentColor; border-radius: 1.5px; opacity: .65; }
  .seat .s-hand b { font: 800 11px/1 var(--f-mono, monospace); }
  .seat .idbadge { padding: 1px 4px; font-size: 8px; }
  .seat .meter { gap: 3px; }
  .seat .meter .mt { height: 15px; gap: 4px; border-radius: 3px; }
  .seat .meter .mt b { display: grid; place-items: center; width: 12px; height: 11px; border-radius: 2px; font-size: 9px; }
  .seat .meter .mt em { font: 800 10px/1 var(--f-mono, monospace); }
  /* many seats: drop the operator line (it stays one tap away) instead of shrinking the names */
  .seats:has(> .seat:nth-child(5)) .seat .s-rolename { display: none !important; }
  .seats:has(> .seat:nth-child(6)) .seat { grid-template-rows: minmax(0, 1fr) 13px; padding: 2px 6px 3px; }
  .seats:has(> .seat:nth-child(6)) .seat .s-name { font-size: 11px; }
  .seats:has(> .seat:nth-child(6)) .seat .meter .mt { height: 13px; }

  /* SENDING: a badge inside the sender's own seat (over its hand count, never over the name or the next seat) */
  .seat.sending::after, .mine.sending::after { top: 3px; right: 3px; bottom: auto; left: auto; transform: none; padding: 1px 6px; border: 0; border-radius: 2px;
    background: #F4F1EA; color: #0B0B0E; font: 900 8px/1.4 var(--f-mono, monospace); letter-spacing: .1em; box-shadow: 0 0 10px -2px rgba(255,255,255,.7); }
  .seat.sending { box-shadow: inset 3px 0 0 #F4F1EA; }
  .mine.sending::after { top: 4px; left: auto; right: 6px; }

  /* channel */
  .channel .ch-head { font-size: 9px; }
  .channel .ch-head .ch-mode { gap: 4px; padding: 2px 6px; font-size: 9px; }
  .channel .ch-status { font-size: 10px; line-height: 1.25; }
  .channel .ch-track { max-height: 34px; flex-wrap: wrap; justify-content: center; gap: 2px; font-size: 8.5px; line-height: 1.1; }
  .channel .ch-track .tn { padding: 1px 4px; font-size: 8.5px; }
  .channel .ch-track .tn svg { width: 9px; height: 9px; }

  /* turn steps and the action box */
  body.phone-game .pb-who { padding: 3px 6px; font-size: 9px; }
  body.phone-game .pb .pb-step b, body.phone-game .pb-step i { font-size: 9px; }
  .prompt .pr-phase, .prompt .pr-now { font-size: 9px; }
  .prompt .pr-text { font-size: 11.5px; line-height: 1.3; }
  .prompt .pr-btns button { min-height: 34px; padding: 4px 8px; font-size: 11px; }

  /* your bar */
  body.phone-game #mine .m-head > b { flex: 1 1 auto; font-size: 12px; }
  body.phone-game #mine .m-head .tag { padding: 1px 4px; font-size: 8.5px; }
  body.phone-game #mine .m-info .meter .mt b { font-size: 9px; }
  body.phone-game #mine .m-info .meter .mt em { font-size: 10px; }
  body.phone-game #mine .m-info .s-field .chip { height: 14px; font-size: 8.5px; }
  body.phone-game #mine .m-info .s-field .chip .k { font-size: 8.5px; }
  body.phone-game #mine .m-info .m-lbl { font-size: 9px; }
  body.phone-game #mine .m-info .m-lbl b { font-size: 10px; }
  #mine .dp-name { font-size: 9px; }
  /* the name keeps the first line; the auto-skip switch moves down to the hand-count line, on the right */
  body.phone-game #mine .m-info { position: relative; }
  body.phone-game #mine .m-head > b { min-width: 3em; }
  body.phone-game #mine .m-head .tag { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.phone-game #mine .m-head .auto-none { position: absolute; right: 4px; bottom: 1px; z-index: 1; height: 15px; margin: 0; padding: 0 7px 0 6px; font-size: 9px; }
  .m-head .auto-none .l { display: none; } .m-head .auto-none .s { display: inline; }
}

/* no double-tap zoom anywhere in the game (pinch zoom still works) */
html, body { touch-action: manipulation; }


/* The packet frame (the one that glides from seat to seat) carries the running light: one effect, not two.
   A light runs round its edge in the packet's colour (white for a face-down packet) over a faint ring. */
@property --pka { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes pkf-run { to { --pka: 360deg; } }
.pk-frame, .pk-frame.me { box-shadow: 0 0 0 2px var(--pkc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pkc) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--pkc) 14%, transparent), 0 0 30px -4px var(--pkc); }
.pk-frame.me { box-shadow: 0 0 0 2px var(--pkc), 0 0 0 5px color-mix(in srgb, var(--pkc) 18%, transparent), 0 0 36px -2px var(--pkc); }
.pk-frame::before { content: ''; position: absolute; inset: -1px; padding: 3px; border-radius: inherit; pointer-events: none; filter: drop-shadow(0 0 4px var(--pkc));
  background: repeating-conic-gradient(from var(--pka, 0deg), transparent 0 18%, rgba(255,255,255,.25) 32%, var(--pkc) 43%, #fff 47%, transparent 49% 50%);
  background: repeating-conic-gradient(from var(--pka, 0deg), transparent 0 18%, color-mix(in srgb, var(--pkc) 45%, transparent) 32%, var(--pkc) 43%, #fff 47%, transparent 49% 50%);
  -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);
  animation: pkf-run 1.8s linear infinite; }
.pk-frame .pf-c { display: none; }
.pk-frame.direct { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pkc) 25%, transparent); }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .pk-frame { border-radius: 5px; }
  .pk-frame, .pk-frame.me { box-shadow: 0 0 0 1.5px var(--pkc), 0 0 18px -4px var(--pkc); }
  .pk-frame::before { inset: 0; padding: 2.5px; }
}
@media (prefers-reduced-motion: reduce) { .pk-frame::before { animation: none; } }

/* card marks follow the wall clock (pkClock), so they carry on when the packet reaches the next seat */
.pk-ROUTE .pk-run { animation-delay: var(--pk-t, 0s); }
.pk-DIRECT .pk-chev b { animation-delay: var(--pk-t1, 0s); }
.pk-DIRECT .pk-chev b:nth-child(2) { animation-delay: calc(var(--pk-t1, 0s) + .2s); } .pk-DIRECT .pk-chev b:nth-child(3) { animation-delay: calc(var(--pk-t1, 0s) + .4s); }
.pk-OPEN::before { animation-delay: var(--pk-t, 0s); } .pk-OPEN::after { animation-delay: calc(var(--pk-t, 0s) + .9s); }

/* the packet holder's thinking / your-move tag sits on the frame's lower edge instead of the seat's */
.pk-frame .pf-tag { position: absolute; left: 50%; bottom: 0; z-index: 1; transform: translate(-50%, 50%); pointer-events: none; }
.pk-frame .pf-tag:empty { display: none; }
.pk-frame .pf-tag .act-banner { position: static; transform: none; margin: 0; box-shadow: 0 4px 14px rgba(0,0,0,.55); }
.seat.holder > .act-banner { visibility: hidden; }
.seat.holder.acting, .mine.holder.acting { box-shadow: none; }
.pk-frame:not(.on) .pf-tag { display: none; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) { .pk-frame .pf-tag { display: none; } }

/* turn notice: a slanted plate in the middle (round number + whose turn), slides in and out */
.fx-turn { position: fixed; inset: 0; z-index: 58; pointer-events: none; display: grid; place-items: center; --ac: #ECE8DF; }
.fx-turn.tc-me { --ac: var(--hi); }
.fx-turn.tc-dead { --ac: #8C897F; }
.tc-plate { display: flex; align-items: stretch; height: clamp(64px, 17vh, 128px); transform: skewX(-12deg); filter: drop-shadow(0 10px 28px rgba(0,0,0,.65));
  animation: tc-slide var(--td, 1.6s) cubic-bezier(.2,.9,.25,1) both; }
.tc-num { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 clamp(16px, 2.6vw, 36px); background: var(--ac); color: #121212; }
.tc-num > * { transform: skewX(12deg); }
.tc-num small { font-family: var(--f-mono); font-size: clamp(9px, 1.9vh, 14px); font-weight: 600; letter-spacing: .25em; }
.tc-num b { font-family: 'Orbitron', var(--f-mono); font-weight: 900; font-size: clamp(30px, 8.5vh, 68px); line-height: 1; }
.tc-nm { display: flex; align-items: center; padding: 0 clamp(22px, 3.4vw, 48px) 0 clamp(16px, 2.4vw, 34px); background: rgba(10,11,15,.95); border: 2px solid var(--ac); border-left: 0; }
.tc-nm b { transform: skewX(12deg); font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 7vh, 56px); line-height: 1; color: #fff; white-space: nowrap; letter-spacing: .03em; }
.fx-turn.tc-me .tc-nm b { color: var(--hi); text-shadow: 0 0 18px rgba(229,165,10,.45); }
.fx-turn.tc-dead .tc-nm b { color: #B8B4AA; font-size: clamp(18px, 5vh, 40px); }
@keyframes tc-slide { 0% { transform: translateX(-60vw) skewX(-12deg); opacity: 0; } 16% { transform: translateX(0) skewX(-12deg); opacity: 1; }
  82% { transform: translateX(0) skewX(-12deg); opacity: 1; } 100% { transform: translateX(30vw) skewX(-12deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tc-plate { animation: tc-fade var(--td, 1.6s) linear both; } @keyframes tc-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } }

/* Node Works dock button and panel */
.lb-dk.nwk { border-color: rgba(63,224,255,.45); }
.lb-dk.nwk .lb-dk-ic { color: #3FE0FF; text-shadow: 0 0 10px rgba(63,224,255,.6); }
.lb-badge.nwk { background: #3FE0FF; color: #06070a; }
.nw { position: fixed; inset: 0; z-index: 900; display: none; flex-direction: column; overflow: auto; color: var(--fg);
  background: radial-gradient(ellipse at 50% 20%, rgba(63,224,255,.08), transparent 60%), repeating-linear-gradient(0deg, transparent 0 3px, rgba(236,232,223,.02) 3px 4px), #0b0c10;
  padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.nw.on { display: flex; }
.nw-top { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.nw-top.slim { margin-bottom: 6px; }
.nw-back { flex: none; font-size: 13px; padding: 7px 14px; border-radius: 20px; background: #14161c; border: 1px solid var(--line-2); color: var(--fg); cursor: pointer; }
.nw-back:hover { border-color: #3FE0FF; }
.nw-ttl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nw-ttl small { font-size: 10px; letter-spacing: .2em; color: #3FE0FF; }
.nw-ttl b { font-family: var(--f-display); font-weight: 400; font-size: 26px; letter-spacing: .06em; line-height: 1.1; }
.nw-top.slim .nw-ttl b { font-size: 18px; }
.nw-ttl span { font-size: 12px; color: var(--mute); }
.nw-stats { display: grid; grid-template-columns: 1fr 1.3fr 1.1fr .8fr; gap: 10px; max-width: 980px; width: 100%; margin: 0 auto 12px; }
.nw-lv, .nw-st { background: rgba(14,15,19,.9); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; }
.nw-lv span, .nw-st span { font-size: 11px; letter-spacing: .12em; color: var(--mute); }
.nw-lv b, .nw-st b { font-size: 30px; font-weight: 800; color: #3FE0FF; line-height: 1.05; text-shadow: 0 0 12px rgba(63,224,255,.35); }
.nw-st b small { font-size: 15px; color: var(--mute); margin-left: 2px; }
.nw-st.bp b { color: #E5A50A; text-shadow: 0 0 12px rgba(229,165,10,.35); }
.nw-st em { font-style: normal; font-size: 11px; color: var(--dim); }
.nw-bar { height: 4px; background: #24272e; border-radius: 2px; overflow: hidden; margin-top: 4px; }
.nw-bar i { display: block; height: 100%; background: #3FE0FF; box-shadow: 0 0 8px #3FE0FF; }
.nw-lv small { font-size: 10.5px; color: var(--dim); }
.nw-lead { max-width: 980px; width: 100%; margin: 0 auto 14px; font-size: 13px; line-height: 1.6; color: #cfcac0; }
.nw-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 980px; width: 100%; margin: 0 auto; }
.nw-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 16px 16px 14px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(160deg, rgba(26,30,38,.95), rgba(12,13,17,.95)); border: 1px solid rgba(63,224,255,.35); color: var(--fg); transition: transform .15s, border-color .2s, box-shadow .2s; }
.nw-card:hover { transform: translateY(-2px); border-color: #3FE0FF; box-shadow: 0 0 24px -8px #3FE0FF; }
.nw-card svg { width: 34px; height: 34px; fill: none; stroke: #3FE0FF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(63,224,255,.5)); }
.nw-cd { font-size: 10px; letter-spacing: .2em; color: #3FE0FF; }
.nw-card b { font-size: 18px; font-weight: 800; }
.nw-card small { font-size: 12px; line-height: 1.5; color: var(--mute); }
.nw-go { font-style: normal; margin-top: auto; padding-top: 6px; font-size: 11px; letter-spacing: .1em; color: #3FE0FF; }
.nw-card.lock { border-color: var(--line); filter: grayscale(.8); opacity: .6; cursor: not-allowed; }
.nw-card.lock svg { stroke: var(--mute); filter: none; }
.nw-card.lock .nw-go, .nw-card.lock .nw-cd { color: var(--mute); }
.nw-card.shake { animation: nw-shake .35s; }
@keyframes nw-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.nw-frame { flex: 1; width: 100%; min-height: 0; border: 1px solid var(--line); border-radius: 8px; background: #0b0c10; }
@media (max-width: 760px), (max-height: 520px) {
  .nw-stats { grid-template-columns: repeat(4, 1fr); gap: 6px; } .nw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nw-affs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .nw-lv b, .nw-st b { font-size: 22px; } .nw-st em { display: none; }
  .nw-lead { font-size: 12px; margin-bottom: 10px; } .nw-ttl b { font-size: 20px; }
  .nw-card { padding: 10px 12px; } .nw-card small { display: none; } .nw-card svg { width: 26px; height: 26px; } .nw-card b { font-size: 15px; } }

.mb-gift.coat { --cc: #FF9A2E; }
.mb-gift.coat b { color: var(--cc); text-shadow: 0 0 10px color-mix(in srgb, var(--cc) 50%, transparent); }
.mb-coatic { display: inline-block; width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, #fff, var(--cc) 45%, color-mix(in srgb, var(--cc) 40%, #000)); box-shadow: 0 0 10px var(--cc); vertical-align: middle; }

.lb-dk.nwk.lock { border-color: var(--line); opacity: .62; }
.lb-dk.nwk.lock .lb-dk-ic { color: var(--mute); text-shadow: none; }
.lb-badge.nwk.lock { background: #3A3A44; color: #ECE8DF; }
.rs-gain { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 6px; font-size: 12px; letter-spacing: .12em; color: rgba(236,232,223,.8); }
.rs-gain span.up { color: #2BDE7E; text-shadow: 0 0 10px rgba(43,222,126,.5); }
.rs-gain span.nw { color: #3FE0FF; text-shadow: 0 0 10px rgba(63,224,255,.5); }

.nw-help { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 14px 4px 4px; border-radius: 22px; background: #14161c; border: 1px solid rgba(63,224,255,.45); color: var(--fg); cursor: pointer; }
.nw-help span { width: 28px; height: 28px; border-radius: 50%; background-size: 330%; background-position: 54% 19%; border: 1.5px solid #3FE0FF; }
.nw-help:hover { border-color: #3FE0FF; box-shadow: 0 0 16px -6px #3FE0FF; }
.nw-st.plays b { color: #2BDE7E; text-shadow: 0 0 12px rgba(43,222,126,.4); }
.nw-sec { max-width: 980px; width: 100%; margin: 16px auto 8px; font-size: 11px; letter-spacing: .14em; color: var(--mute); }
.nw-cards { margin-bottom: 4px; }
.nw-affs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 980px; width: 100%; margin: 0 auto 18px; }
.nw-aff { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; background: rgba(14,15,19,.9); border: 1px solid var(--line); }
.nw-aff-av { grid-row: 1 / 4; width: 34px; height: 34px; border-radius: 50%; background-size: 330%; background-position: 50% 24%; background-color: #16181e; border: 1.5px solid #2B2B33; }
.nw-aff b { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-aff-bar { display: block; height: 3px; background: #24272e; border-radius: 2px; overflow: hidden; margin: 3px 0 2px; }
.nw-aff-bar u { display: block; height: 100%; background: #ff6aa8; text-decoration: none; }
.nw-aff em { font-style: normal; font-size: 10px; color: var(--mute); }
.nw-aff.max { border-color: var(--cc); box-shadow: 0 0 16px -8px var(--cc); }
.nw-aff.max .nw-aff-av { border-color: var(--cc); }
.nw-aff.max .nw-aff-bar u { background: var(--cc); box-shadow: 0 0 6px var(--cc); }
.nw-aff.max em { color: var(--cc); }
.nw-tut { position: fixed; inset: 0; z-index: 905; display: flex; align-items: flex-end; justify-content: center; padding: 18px; background: rgba(6,7,10,.55); }
.nw-tut-in, .nw-lock { display: flex; align-items: flex-end; gap: 14px; width: min(760px, 100%); }
.nw-lock { margin: 30px auto 0; align-items: center; }
.nw-tut-av { flex: none; width: 120px; height: 160px; border-radius: 10px; background-size: cover; background-position: 54% 12%; border: 1.5px solid #3FE0FF; box-shadow: 0 0 24px -8px #3FE0FF; }
.nw-tut-av.big { width: 150px; height: 200px; }
.nw-tut-b { flex: 1; background: rgba(12,14,19,.96); border: 1px solid #3FE0FF; border-radius: 10px; padding: 12px 16px; box-shadow: 0 0 30px -10px rgba(63,224,255,.6); }
.nw-tut-b small { font-size: 10.5px; letter-spacing: .16em; color: #3FE0FF; }
.nw-tut-b p { margin: 6px 0 10px; font-size: 14px; line-height: 1.65; color: #ECE8DF; }
.nw-tut-f { display: flex; align-items: center; gap: 8px; }
.nw-dots { display: flex; gap: 5px; margin-right: auto; } .nw-dots i { width: 6px; height: 6px; border-radius: 50%; background: #3A3A44; } .nw-dots i.on { background: #3FE0FF; box-shadow: 0 0 6px #3FE0FF; }
.nw-tut-skip { font-size: 12px; padding: 5px 12px; border-radius: 16px; background: transparent; border: 1px solid #3A3A44; color: var(--mute); cursor: pointer; }
.nw-tut-go { font-size: 12.5px; font-weight: 800; padding: 6px 16px; border-radius: 16px; background: #3FE0FF; border: 1px solid #3FE0FF; color: #06070a; cursor: pointer; }
.nw-lv.in { margin-top: 4px; background: transparent; border: 0; padding: 0; }
.nw-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 10px); max-width: min(560px, 90vw); padding: 9px 16px; border-radius: 8px; background: #101218; border: 1px solid #3FE0FF; color: #ECE8DF; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 6; }
.nw-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px), (max-height: 520px) {
  .nw-tut-av { width: 80px; height: 110px; } .nw-tut-b p { font-size: 12.5px; } .nw-help { font-size: 11px; }
  .nw-aff b { font-size: 10.5px; } }


/* loading screen before the game, a match, the codex, the salvage page (artGate in js/ui.js) */
.nn-gate { z-index: 9500; cursor: progress; }
.nn-gate .nb-in { align-items: center; text-align: center; }
.nn-gate .nb-badge { margin: 0 0 12px; }
.nn-gate .nb-load { margin-top: 14px; }
.nn-gate .ng-mb { font-variant-numeric: tabular-nums; }
.ng-note { margin: 14px 0 0; max-width: min(340px, 82vw); font-size: 11px; line-height: 1.6; color: #5D5B56; letter-spacing: .04em; font-family: inherit; }
.nb-skip { margin-top: 16px; background: none; border: 1px solid rgba(236,232,223,.25); color: #8C897F; font-size: 11px; letter-spacing: .14em; padding: 6px 14px; border-radius: 4px; cursor: pointer; }
.nb-skip:hover { color: #ECE8DF; border-color: #18C8E8; }

/* ===== NETHER CRED (黑網信用): violet ₦, kept apart from the cyan data chips ===== */
:root { --cred: #B98CFF; --cred-hi: #E2D2FF; }
.lb-cred { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding-left: 10px; border-left: 1px solid rgba(236,232,223,.16); font-size: 14px; font-weight: 700; color: var(--cred-hi); }
.lb-cred i, .sh-cred i, .pf-chips.cred i, .nw-st.cred .cr-ic, .sh-buy b i { font-style: normal; font-weight: 900; color: var(--cred); }
@media (max-height: 520px), (max-width: 760px) { .lb-cred { font-size: 11px; padding-left: 7px; margin-left: 2px; } }
.lb-dk.shop .lb-dk-ic { color: var(--cred); font-weight: 900; }
.pf-chips.cred { border-color: rgba(185,140,255,.55); }
.pf-chips.cred i { width: auto; height: auto; background: none; clip-path: none; font-size: 18px; }
.nw-st.cred b { color: var(--cred-hi); text-shadow: 0 0 12px rgba(185,140,255,.35); }
.nw-st.cred .cr-ic { margin-right: 3px; }
.mb-credic { font-style: normal; font-weight: 900; font-size: 18px; color: var(--cred); width: 18px; text-align: center; }

/* ===== the shop (js/shop.js) ===== */
.sh { position: relative; display: flex; flex-direction: column; gap: 14px; }
.sh-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: stretch; }
.sh-keeper { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.sh-av { flex: none; width: 54px; height: 54px; border-radius: 50%; background-size: cover; background-position: 50% 22%; border: 2px solid var(--cred); box-shadow: 0 0 14px rgba(185,140,255,.35); }
.sh-keeper small { font-size: 10px; letter-spacing: .14em; color: var(--cred); }
.sh-keeper p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--fg); }
.sh-wallet { display: flex; flex-direction: column; gap: 6px; justify-content: center; padding: 10px 16px; background: var(--bg-2); border: 1px solid rgba(185,140,255,.45); border-radius: 10px; min-width: 230px; }
.sh-cred { display: flex; align-items: baseline; gap: 8px; }
.sh-cred i { font-size: 22px; }
.sh-cred b { font-size: 28px; color: var(--cred-hi); text-shadow: 0 0 14px rgba(185,140,255,.4); }
.sh-cred small, .sh-chips small { font-size: 11px; color: var(--mute); }
.sh-chips { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #9fdcef; }
.sh-chips i { width: 10px; height: 10px; background: #3FC7E8; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sh-earn { font-size: 11px; color: var(--mute); }
.sh-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.sh-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--mute); padding: 8px 14px; font-weight: 700; font-size: 14px; cursor: pointer; margin-bottom: -1px; }
.sh-tabs button.on { color: var(--cred-hi); border-bottom-color: var(--cred); }
.sh-note { margin: -4px 0 0; font-size: 12px; color: var(--mute); }
.sh-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.sh-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.sh-item.coat { border-color: color-mix(in srgb, var(--cc) 40%, var(--line)); }
.sh-swatch { width: 46px; height: 46px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(135deg, #fff 0%, var(--cc) 35%, color-mix(in srgb, var(--cc) 40%, #000) 100%); display: grid; place-items: center; }
.sh-swatch i { width: 60%; height: 60%; clip-path: inherit; background: linear-gradient(315deg, rgba(255,255,255,.7), transparent 60%); }
.sh-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; background: rgba(185,140,255,.1); border: 1px solid rgba(185,140,255,.35); }
.sh-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--cred-hi); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-tx small { font-size: 10px; letter-spacing: .12em; color: var(--mute); }
.sh-item.coat .sh-tx small { color: var(--cc); }
.sh-tx b { font-size: 15px; color: var(--fg); }
.sh-tx p { margin: 0; font-size: 12px; line-height: 1.5; color: #a9a397; }
.sh-tx em { font-style: normal; font-size: 11px; color: var(--mute); }
.sh-tx .sh-why { color: #ffb36b; }
.sh-buy { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 92px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--cred); background: rgba(185,140,255,.12); color: var(--cred-hi); font-size: 11px; font-weight: 700; cursor: pointer; transition: background .15s, transform .1s; }
.sh-buy b { font-size: 15px; }
.sh-buy:hover:not(:disabled) { background: rgba(185,140,255,.25); }
.sh-buy:active:not(:disabled) { transform: scale(.97); }
.sh-buy.armed { background: var(--cred); color: #12071f; border-color: var(--cred-hi); animation: sh-arm 1s ease-in-out infinite; }
.sh-buy.armed b i { color: #12071f; }
@keyframes sh-arm { 50% { box-shadow: 0 0 16px rgba(185,140,255,.7); } }
.sh-buy:disabled { opacity: .4; cursor: not-allowed; }
.sh-msg { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 60; padding: 10px 18px; border-radius: 8px; background: #160d22; border: 1px solid var(--cred); color: var(--cred-hi); font-weight: 700; font-size: 14px; box-shadow: 0 0 24px rgba(185,140,255,.35); transition: opacity .2s, transform .2s; }
.sh-msg.on { opacity: 1; transform: translate(-50%, 0); }
.sh-pick { position: fixed; inset: 0; z-index: 70; background: rgba(6,7,10,.72); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; }
.sh-pick-in { width: min(760px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: #0f1116; border: 1px solid var(--cred); border-radius: 12px; box-shadow: 0 0 40px rgba(185,140,255,.25); overflow: hidden; }
.sh-pick-h { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.sh-pick-h b { font-size: 16px; color: var(--fg); }
.sh-pick-h small { flex: 1; font-size: 12px; color: var(--mute); }
.sh-x { background: none; border: 0; color: var(--mute); font-size: 22px; line-height: 1; cursor: pointer; }
.sh-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 12px 16px; overflow-y: auto; }
.sh-op { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); cursor: pointer; }
.sh-op span { width: 44px; height: 44px; border-radius: 50%; background-size: cover; background-position: 50% 22%; }
.sh-op b { font-size: 11px; text-align: center; line-height: 1.25; }
.sh-op em { font-style: normal; font-size: 10px; color: #ff6aa8; }
.sh-op.on { border-color: var(--cred); background: rgba(185,140,255,.16); box-shadow: 0 0 12px rgba(185,140,255,.3); }
.sh-op.full { opacity: .45; cursor: not-allowed; }
.sh-pick-f { display: flex; align-items: center; gap: 12px; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.sh-pick-f span { flex: 1; font-size: 11px; color: var(--mute); }
.sh-give { min-width: 150px; }
@media (max-width: 760px), (max-height: 520px) {
  .sh-top { grid-template-columns: 1fr; gap: 8px; }
  .sh-wallet { min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 14px; padding: 8px 12px; }
  .sh-cred b { font-size: 20px; }
  .sh-earn { flex-basis: 100%; }
  .sh-keeper { padding: 8px 10px; }
  .sh-av { width: 40px; height: 40px; }
  .sh-keeper p { font-size: 12px; }
  .sh-list { grid-template-columns: 1fr; }
  .sh-item { padding: 9px 10px; gap: 10px; }
  .sh-tx p { font-size: 11px; }
  .sh-ops { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); padding: 10px; }
}

/* Node Works: the clients are buttons now (choose who brings the next job) */
.nw-aff.pick { font: inherit; color: var(--fg); text-align: left; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.nw-aff.pick:hover { transform: translateY(-2px); border-color: #3FE0FF; box-shadow: 0 0 18px -8px #3FE0FF; }
.nw-aff.pick:active { transform: scale(.98); }
.nw-aff-day { grid-column: 2; font-size: 9.5px; color: #8C897F; letter-spacing: .04em; }
.nw-aff.today .nw-aff-bar u { opacity: .55; }
.nw-cards.info .nw-card { cursor: default; }
.nw-cards.info .nw-card:hover { transform: none; box-shadow: none; }
.nw-cards.info .nw-card:not(.lock) .nw-go { color: #2BDE7E; }

/* ===== Node Works laid out like every other page (.pg / .pg-head / .pg-sec, the same background and panels) ===== */
.nw { padding: 0; background: var(--bg); }
.nw::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; }
.nw > .pg { position: relative; z-index: 1; }
.nw-pg { width: 100%; }
.nw-head { flex-direction: row; align-items: flex-end; gap: 16px; }
.nw-head > div { min-width: 0; }
.nw-head .nw-help { margin-left: auto; align-self: center; flex: none; border-radius: 4px; background: var(--bg-2); border: 1px solid var(--line-2); padding: 4px 12px 4px 4px; font-size: 13px; font-weight: 700; }
.nw-head .nw-help span { border-radius: 3px; }
.nw-head .nw-help:hover { border-color: var(--fg); box-shadow: none; }
.nw-stats, .nw-sec, .nw-affs, .nw-cards { max-width: none; margin-left: 0; margin-right: 0; }
.nw-stats { margin-bottom: 0; }
.nw-affs { margin-bottom: 0; }
.nw-lv, .nw-st, .nw-aff, .nw-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.nw-lv.in { background: transparent; border: 0; }
.nw-sec { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 -6px; font-size: 13px; letter-spacing: .1em; color: var(--mute); font-family: inherit; font-weight: 700; }
.nw-sec small { font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: var(--dim); }
.nw-lock { margin: 10px 0 0; width: 100%; max-width: 820px; }
.nw-tut-b { background: var(--bg-2); border-color: var(--line-2); box-shadow: none; }
.nw-tut-b small { color: var(--mute); }
/* a job: the repair page fills the rest of the screen under the header */
.nw-pg.job { height: 100%; min-height: 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.nw-pg.job .nw-frame { flex: 1 1 auto; min-height: 0; border-radius: 10px; border-color: var(--line); }
.nw-head p .mono { color: #3FE0FF; letter-spacing: .12em; font-size: 12px; }
@media (max-width: 760px), (max-height: 520px) {
  .nw .pg { height: auto; overflow: visible; }
  .nw .pg.job { height: 100%; overflow: hidden; }
  .nw-head { align-items: center; }
  .nw-head .nw-help { font-size: 11px; padding: 3px 10px 3px 3px; }
  .nw-head .nw-help span { width: 24px; height: 24px; }
  .nw-sec { margin: 2px 0 -4px; font-size: 11.5px; }
  .nw-sec small { font-size: 10px; }
}

/* Node Works: an operator's first visit (the intro before the repair) */
.nw-meet .nw-tut-b small { display: flex; align-items: center; gap: 8px; }
.nw-meet-tag { font-style: normal; font-size: 9.5px; letter-spacing: .08em; padding: 1px 6px; border: 1px solid #3FE0FF; color: #3FE0FF; border-radius: 3px; }
.nw-meet-dev { color: #3FE0FF; font-weight: 700; }
.nw-meet .nw-tut-in { animation: nwMeetIn .35s ease-out; }
.nw-meet.out { animation: nwMeetOut .32s ease-in forwards; }
@keyframes nwMeetIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nwMeetOut { to { opacity: 0; } }
.nw-pg.nw-in { animation: nwJobIn .4s ease-out; }
@keyframes nwJobIn { from { opacity: 0; filter: brightness(1.8); } to { opacity: 1; filter: none; } }

/* ===== Online match (matchmaking): casual / ranked, the line, match found ===== */
.mm-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mm-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px; text-align: left; font: inherit; color: var(--fg); cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line); border-top: 3px solid var(--mc); border-radius: 10px; transition: transform .12s, border-color .12s, box-shadow .12s; }
.mm-card.casual { --mc: #3FE0FF; }
.mm-card.ranked { --mc: #E5A50A; }
.mm-card:hover { transform: translateY(-2px); border-color: var(--mc); box-shadow: 0 0 22px -10px var(--mc); }
.mm-card small { font-size: 11px; letter-spacing: .2em; color: var(--mc); }
.mm-card b { font-size: 22px; letter-spacing: .04em; }
.mm-card em { font-style: normal; font-size: 13px; color: var(--mute); line-height: 1.6; }
.mm-card .mm-rank { font-size: 12px; color: var(--mute); }
.mm-card .mm-rank b { font-size: 13px; color: var(--fg); margin-left: 4px; }
.mm-go { margin-top: auto; padding-top: 4px; font-style: normal; font-weight: 700; font-size: 14px; color: var(--mc); }
.mm-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-rules span { font-size: 11px; letter-spacing: .06em; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 4px; color: #CFCAC0; background: rgba(0,0,0,.2); }
.mm-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 28px 20px; }
.mm-wait h3 { margin: 0; font-size: 22px; letter-spacing: .06em; }
.mm-wait .mm-rules { justify-content: center; }
.mm-tag { margin: 0; font-size: 12px; letter-spacing: .2em; color: #3FE0FF; }
.mm-stat { display: flex; gap: 26px; font-size: 13px; color: var(--mute); }
.mm-stat span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mm-stat b { font-size: 22px; color: var(--fg); }
.mm-btn { font: inherit; font-size: 13px; font-weight: 700; color: var(--fg); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 4px; height: 36px; padding: 0 18px; cursor: pointer; }
.mm-btn:hover { border-color: var(--fg); }
.mm-wait .mm-btn { margin-top: 4px; }
.mm-found .lobby-list { width: min(420px, 100%); text-align: left; }
.mm-found .lobby-list .tag { margin-left: auto; }
.mm-found .lobby-list .tag.hi + .tag { margin-left: 8px; }
.mm-radar { position: relative; width: 84px; height: 84px; }
.mm-radar i { position: absolute; inset: 0; border: 1.5px solid #3FE0FF; border-radius: 50%; opacity: 0; animation: mmPing 2.4s ease-out infinite; }
.mm-radar i:nth-child(2) { animation-delay: .8s; }
.mm-radar i:nth-child(3) { animation-delay: 1.6s; }
.mm-radar b { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #3FE0FF; box-shadow: 0 0 16px #3FE0FF; }
@keyframes mmPing { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.mm-err { color: #FF8A73; min-height: 1em; }
button.rk-room { font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .12s, box-shadow .12s; }
button.rk-room:hover { transform: translateY(-2px); box-shadow: 0 0 20px -10px var(--rc); border-color: var(--rc); }
.rs-gain span.cr { color: #B98CFF; text-shadow: 0 0 10px rgba(185,140,255,.5); }
.rs-gain span.cr small { font-size: 11px; letter-spacing: .04em; opacity: .85; }
.rs-gain span.rk-chg.up { color: #E5A50A; text-shadow: 0 0 10px rgba(229,165,10,.5); }
.rs-gain span.rk-chg.down { color: #FF8A73; }
@media (max-width: 760px), (max-height: 520px) {
  .mm-modes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .mm-card { padding: 12px 14px; gap: 6px; }
  .mm-card b { font-size: 17px; }
  .mm-card em { font-size: 11.5px; }
  .mm-wait { padding: 16px 14px; gap: 8px; }
  .mm-radar { width: 56px; height: 56px; }
}

/* ===== Home on shorter desktop screens (laptops, about 700-880 px tall): the left column fits between the player
   bar and the tips instead of spilling under them ===== */
@media (min-width: 900px) and (min-height: 601px) and (max-height: 880px) {
  .lb-main { justify-content: center; justify-content: safe center; gap: 12px; }
  .lb-logo small.hm-status { font-size: 10px; }
  .lb-logo .nn-logo h1.nn-word { font-size: clamp(36px, 4.2vw, 54px); }
  .lb-logo p { margin-top: 6px; font-size: 13px; }
  .lb-play { gap: 8px; }
  .lb-go.main { padding-top: 12px; padding-bottom: 12px; }
  .lb-go.main .lb-go-tx b { font-size: 22px; }
  .lb-play-row .lb-go { padding-top: 9px; padding-bottom: 9px; }
  .lb-tile { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
  .lb-tx small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .lb-dk { padding: 9px 6px 8px; gap: 4px; }
  .lb-dk-ic { font-size: 19px; }
  .lobby > .lb-tips { margin-bottom: 14px; }
}
@media (min-width: 900px) and (min-height: 601px) and (max-height: 730px) {
  .lb-main { gap: 10px; }
  .lb-logo small.hm-status { display: none; }
  .lb-tx small { display: none; }
  .lb-tile { padding: 9px 12px; }
}

/* ===== iPhone notch / Dynamic Island in landscape: every page and full-screen layer keeps its content
   clear of the left and right safe areas (the home page, tutorial, rules and match already did) ===== */
.pg { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.setup { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.reveal, .nn-reg, .gc-gal, .sh-pick { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.nw-tut { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.gc-dv-skip { right: max(18px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .pg, .setup { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}

/* Home: only two learning tiles (tutorial, mock battle) — slim bars, icon on the left, one-line caption */
@media (min-height: 601px) {
  .lb-tile { flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; }
  .lb-tile .lb-ic { flex: none; }
  .lb-tx small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ===== Daily tasks: the top-bar button and the panel (same frame as the mailbox) ===== */
.lb-top .lb-daily { margin-left: 8px; }
.lb-daily.has-task { border-color: rgba(63,224,255,.6); box-shadow: 0 0 18px -6px rgba(63,224,255,.8); }
.lb-daily.has-task svg { color: #3FE0FF; }
.lb-daily .lb-mailn { background: #3FE0FF; color: #06070A; }
.overlay .box.dq { position: relative; max-width: 640px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dq-list { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; overflow: auto; }
.dq-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 96px; align-items: center; gap: 12px; padding: 10px 12px;
  background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 8px; }
.dq-row.done:not(.got) { border-color: rgba(63,224,255,.55); box-shadow: inset 3px 0 0 #3FE0FF; }
.dq-row.got { opacity: .55; }
.dq-ic { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #3FE0FF;
  border: 1px solid var(--line-2); background: #101218 center 14% / cover no-repeat; }
.dq-ic.face { border-color: #E5A50A; box-shadow: 0 0 12px -4px #E5A50A; }
.dq-tx { min-width: 0; }
.dq-tx b { display: block; font-size: 14px; }
.dq-tx small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--mute); line-height: 1.4; }
.dq-gift { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.dq-chip { width: 11px; height: 11px; background: #3FC7E8; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.dq-gift.cred i { font-style: normal; font-weight: 900; color: var(--cred); }
.dq-gift.cred b { color: #D7C2FF; }
.dq-btn { height: 34px; padding: 0 10px; font-size: 13px; border-radius: 4px; }
.dq-btn.todo { display: flex; align-items: center; justify-content: center; color: var(--mute); border: 1px dashed var(--line-2); font-size: 12px; }
.dq-btn.got { background: transparent; color: var(--mute); border: 1px solid var(--line); font-size: 12px; }
.rs-gain span.dq { color: #3FE0FF; text-shadow: 0 0 10px rgba(63,224,255,.5); }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .lb-top .lb-daily { margin-left: 5px; }
  .overlay .box.dq { max-height: calc(100vh - 16px); }
  .dq-list { gap: 5px; padding: 8px 10px 10px; }
  .dq-row { grid-template-columns: 30px minmax(0, 1fr) auto 76px; gap: 8px; padding: 6px 8px; }
  .dq-ic { width: 30px; height: 30px; font-size: 13px; }
  .dq-tx b { font-size: 12.5px; }
  .dq-tx small { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dq-gift { font-size: 12px; }
  .dq-btn { height: 28px; font-size: 11.5px; padding: 0 6px; }
}

/* ---------- Friends (js/friends.js) ---------- */
.lb-top .lb-fr { margin-left: 8px; }
.lb-fr.has-mail { border-color: rgba(63,208,122,.6); box-shadow: 0 0 18px -6px rgba(63,208,122,.8); }
.lb-fr.has-mail svg { color: #3FD07A; }
.lb-fr .lb-mailn { background: #3FD07A; color: #06070A; box-shadow: 0 0 12px rgba(63,208,122,.7); }
.fr { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
.fr-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fr .panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fr .pg-sec { display: flex; align-items: center; gap: 8px; margin: 0; }
.fr .pg-sec .mono { color: var(--mute); font-size: 12px; font-weight: 600; }
.fr-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; position: relative; }
.fr-nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; text-align: left; }
.fr-nm b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-nm small { color: var(--mute); font-size: 11px; }
.fr-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 10px 12px; border: 1px dashed rgba(63,224,255,.45); border-radius: 6px; background: rgba(63,224,255,.05); }
.fr-code small { grid-column: 1 / -1; color: var(--mute); font-size: 11px; }
.fr-code b { font-size: 24px; letter-spacing: .12em; color: #3FE0FF; }
.fr-add { display: flex; gap: 8px; }
.fr-add input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .1em; font-size: 15px; }
.fr-add button { flex: none; }
.fr-msg { margin: 0; font-size: 12.5px; color: var(--mute); }
.fr-msg.good { color: #3FD07A; }
.fr-msg.bad { color: #FF8A73; }
.fr-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.02); min-width: 0; }
.fr-row .sp { flex: 1; }
.fr-row > button:not(.fr-open) { flex: none; padding: 5px 12px; font-size: 12px; }
.fr-req .fr-row { border-color: rgba(63,208,122,.45); box-shadow: inset 3px 0 0 #3FD07A; }
.fr-list .fr-row + .fr-row, .fr-req .fr-row + .fr-row, .fr-out .fr-row + .fr-row { margin-top: -2px; }
.fr-f.off { opacity: .78; }
.fr-open { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; }
.fr-open:hover .fr-nm b { color: #3FE0FF; }
.fr-dot { position: absolute; left: 21px; top: 21px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bg-2); background: #5B6170; }
.fr-pop .fr-dot { position: static; display: inline-block; vertical-align: -1px; margin-right: 6px; border-color: transparent; }
.fr-dot.on { background: #3FD07A; box-shadow: 0 0 8px #3FD07A; }
.fr-dot.match { background: #FFB020; box-shadow: 0 0 8px #FFB020; }
.fr-st { flex: none; font-size: 12px; color: var(--mute); white-space: nowrap; }
.fr-st.on { color: #3FD07A; }
.fr-st.match { color: #FFB020; }
.fr-mail { display: inline-flex; align-items: center; gap: 5px; }
.fr-mail svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fr-ref { margin-left: auto; padding: 2px 9px; font-size: 14px; }
.fr-empty { margin: 8px 0; text-align: center; color: var(--fg); font-size: 14px; line-height: 1.8; }
.fr-empty small { color: var(--mute); font-size: 12px; }
.fr-wait { max-width: 520px; margin: 0 auto; width: 100%; }
.fr-pop { width: min(320px, calc(100vw - 24px)); margin-top: 8px; padding: 10px 12px; border-radius: 5px; background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.fr-pop small { color: var(--mute); }
.fr-pop-act { display: flex; gap: 8px; width: 100%; }
.fr-pop-act button { flex: 1; font-size: 12.5px; padding: 6px 8px; }
.fr-del.warn { border-color: #FF5A4A; color: #FF8A73; }
#fr-compose { position: fixed; inset: 0; z-index: 9600; 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)); }
.fr-cp-bg { position: absolute; inset: 0; background: rgba(4,5,8,.72); backdrop-filter: blur(3px); }
.fr-cp { position: relative; width: min(480px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px;
  background: var(--bg-2); border: 1px solid rgba(63,224,255,.35); border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: pc-in .18s ease-out both; }
.fr-cp .mb-head { margin: 0; }
.fr-cp-to { padding: 6px 0; border-bottom: 1px solid var(--line); }
.fr-cp-l { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mute); }
.fr-cp-l input, .fr-cp-l textarea { font: inherit; font-size: 14px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 7px 9px; resize: vertical; }
.fr-cp-l textarea { min-height: 110px; line-height: 1.6; }
.fr-cp-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fr-cp-foot .sp { flex: 1; }
.fr-cp-foot small { color: var(--mute); font-size: 11px; }
.mb-face.fm { border-color: #3FD07A; box-shadow: 0 0 10px -2px #3FD07A; display: grid; place-items: center; }
.mb-face.fm .pc-av { width: 100%; height: 100%; border: 0; border-radius: 50%; }
.mb-fm { white-space: normal; word-break: break-word; }
@media (max-width: 760px) and (orientation: portrait) { .fr { grid-template-columns: 1fr; } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .page-friends .pg.pg-wide #fr-root { min-height: 0; overflow: auto; }
  .lb-top .lb-fr { margin-left: 5px; }
  .fr { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 8px; }
  .fr-side { gap: 8px; }
  .fr .panel { gap: 6px; padding: 8px 10px; }
  .fr-code { padding: 6px 10px; } .fr-code b { font-size: 18px; }
  .fr-row { padding: 5px 8px; }
  .fr-cp { gap: 5px; padding: 8px 12px 10px; }
  .fr-cp .mb-head { padding-bottom: 4px; } .fr-cp-to { padding: 2px 0 4px; }
  .fr-cp-l { gap: 2px; } .fr-cp-l input { padding: 4px 8px; } .fr-cp-l textarea { min-height: 50px; height: 68px; padding: 5px 8px; }
  .fr-cp-foot button { padding: 4px 12px; }
}
.mb-reply { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.mb-reply button { min-width: 120px; }

/* ---------- Emotes in matches (js/emote.js) ---------- */
#emo-dock { position: fixed; right: max(0px, env(safe-area-inset-right)); top: 46%; transform: translateY(-50%); z-index: 26; display: flex; align-items: center; flex-direction: row-reverse; pointer-events: none; }
#emo-dock > * { pointer-events: auto; }
#app:has(#emo-dock) .mid { padding-right: 36px; }   /* room for the tab on the right edge, with a clear gap (the log keeps its width) */
#app:has(#pickwin .pw) #emo-dock { display: none; }   /* a card picker is open over the table */
.emo-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 34px; padding: 9px 0 8px; border-radius: 8px 0 0 8px; border: 1px solid rgba(57,208,255,.45); border-right: 0;
  background: linear-gradient(180deg, rgba(14,24,32,.92), rgba(8,12,16,.92)); color: #8FE6FF; box-shadow: -4px 6px 18px rgba(0,0,0,.45), inset 0 0 12px rgba(57,208,255,.12); min-height: 0; }
.emo-tab svg { width: 20px; height: 20px; }
.emo-tab span { writing-mode: vertical-rl; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
html[lang="en"] .emo-tab span { letter-spacing: .06em; }
#emo-dock.open .emo-tab { color: #fff; background: linear-gradient(180deg, rgba(20,48,62,.95), rgba(10,22,30,.95)); }
.emo-pan { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 8px 7px; margin-right: 2px; border-radius: 10px; border: 1px solid rgba(57,208,255,.35);
  background: rgba(8,12,16,.94); box-shadow: 0 10px 28px rgba(0,0,0,.55), inset 0 0 18px rgba(57,208,255,.08);
  opacity: 0; transform: translateX(14px) scale(.96); visibility: hidden; transition: opacity .16s, transform .16s, visibility 0s .16s; }
#emo-dock.open .emo-pan { opacity: 1; transform: none; visibility: visible; transition: opacity .16s, transform .16s; }
.emo-b { position: relative; display: grid; grid-template-columns: 26px auto; align-items: center; gap: 7px; min-width: 92px; min-height: 0; padding: 6px 10px 6px 7px; border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--ec) 40%, transparent); background: color-mix(in srgb, var(--ec) 9%, #0B1015); color: var(--ec); text-align: left; transition: transform .1s, background .12s; }
.emo-b svg { width: 26px; height: 26px; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ec) 55%, transparent)); }
.emo-b small { color: #E8EEF2; font-size: 12px; font-weight: 800; white-space: nowrap; }
.emo-b:hover { background: color-mix(in srgb, var(--ec) 20%, #0B1015); }
.emo-b:active { transform: scale(.94); }
.emo-left { display: flex; align-items: center; justify-content: center; gap: 5px; height: 14px; margin-top: 2px; }
.emo-left i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #39D0FF; transition: background .15s; }
.emo-left i.on { background: #39D0FF; box-shadow: 0 0 6px #39D0FF; }
.emo-left b { font-size: 11px; color: #FF8A3D; }
#emo-dock.cool .emo-b { opacity: .38; filter: grayscale(.6); }
#emo-dock.cool .emo-left i { border-color: #FF8A3D; }
#emo-dock.nope .emo-pan { animation: emo-nope .32s; }
@keyframes emo-nope { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

#emo-layer { position: fixed; inset: 0; pointer-events: none; z-index: 27; }
.emo-bub { position: fixed; transform: translate(-50%, 0); display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 22px; white-space: nowrap; pointer-events: auto; cursor: pointer;
  background: color-mix(in srgb, var(--ec) 16%, rgb(6,9,12)); border: 1.5px solid var(--ec); color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec) 14%, transparent), 0 8px 20px rgba(0,0,0,.55), 0 0 18px color-mix(in srgb, var(--ec) 35%, transparent);
  animation: emo-in .34s cubic-bezier(.2,1.6,.4,1) both; }
.emo-bub.emo-me { cursor: default; }
.emo-bub::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 9px; height: 9px; margin-left: -5px; border: inherit; border-top: 0; border-left: 0; transform: rotate(45deg); background: color-mix(in srgb, var(--ec) 16%, rgb(6,9,12)); }
.emo-bub.out { animation: emo-out .28s ease-in both; }
@keyframes emo-in { from { opacity: 0; transform: translate(-50%, 10px) scale(.6); } }
@keyframes emo-out { to { opacity: 0; transform: translate(-50%, -12px) scale(.9); } }
.emo-ic { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.35); color: var(--ec); }
.emo-ic svg { width: 24px; height: 24px; position: relative; z-index: 1; filter: drop-shadow(0 0 5px var(--ec)); }
.emo-say { font-size: 13px; font-weight: 900; letter-spacing: .02em; text-shadow: 0 0 8px color-mix(in srgb, var(--ec) 60%, transparent); }
.emo-n { font-size: 12px; color: var(--ec); }
.emo-n:empty { display: none; }
.emo-n.bump { animation: emo-bump .3s; }
@keyframes emo-bump { 40% { transform: scale(1.6); } }
.emo-back { font-style: normal; font-size: 11px; color: var(--ec); opacity: .7; margin-left: -2px; }
.emo-bub:not(.emo-me):hover .emo-back { opacity: 1; }
.emo-rip { display: none; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--ec); }
/* each one moves a little in its own way */
.e-ping .emo-rip { display: block; animation: emo-rip 1.1s ease-out infinite; }
.e-ping .emo-rip.r2 { animation-delay: .55s; }
@keyframes emo-rip { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.e-ack .e-chk { stroke-dasharray: 14; stroke-dashoffset: 14; animation: emo-draw .4s .15s ease-out forwards; stroke-width: 2.2; }
@keyframes emo-draw { to { stroke-dashoffset: 0; } }
.e-lol .emo-ic svg { animation: emo-lol .42s ease-in-out 4; }
@keyframes emo-lol { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-12deg) translateY(-2px); } 75% { transform: rotate(12deg) translateY(-2px); } }
.e-think .e-spin { transform-origin: 12px 12px; animation: emo-spin .8s linear infinite; }
@keyframes emo-spin { to { transform: rotate(360deg); } }
.e-think .emo-say { background: linear-gradient(90deg, #fff 0 40%, color-mix(in srgb, var(--ec) 70%, #fff) 50%, #fff 60% 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: emo-scan 1.2s linear infinite; }
@keyframes emo-scan { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.e-virus { animation: emo-in .34s cubic-bezier(.2,1.6,.4,1) both, emo-shake .5s .34s 2; }
.e-virus .emo-ic svg { animation: emo-pulse .5s ease-in-out infinite alternate; }
@keyframes emo-shake { 20%, 60% { transform: translate(calc(-50% - 3px), 0); } 40%, 80% { transform: translate(calc(-50% + 3px), 0); } }
@keyframes emo-pulse { to { transform: scale(1.14); filter: drop-shadow(0 0 9px var(--ec)); } }
.e-crash .emo-say { animation: emo-glitch .9s steps(2) 2; }
.e-crash .emo-ic svg { animation: emo-flick .9s steps(3) 2; }
@keyframes emo-glitch { 0% { text-shadow: 2px 0 #FF3B5C, -2px 0 #39D0FF; transform: translateX(0); } 20% { transform: translateX(-2px) skewX(-8deg); } 40% { text-shadow: -2px 0 #FF3B5C, 2px 0 #39D0FF; transform: translateX(2px); } 60% { transform: none; clip-path: inset(0 0 45% 0); } 80% { clip-path: none; } }
@keyframes emo-flick { 33% { opacity: .3; } 66% { opacity: 1; transform: translateX(1px); } }

/* phones: smaller, and the panel in two columns so it fits in landscape */
@media (max-height: 520px), (max-width: 640px) {
  #emo-dock { top: 42%; }
  .emo-tab { width: 28px; padding: 7px 0 6px; }
  .emo-tab svg { width: 17px; height: 17px; }
  .emo-tab span { font-size: 10px; }
  .emo-pan { grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; }
  .emo-left { grid-column: 1 / -1; }
  .emo-b { min-width: 0; grid-template-columns: 22px auto; gap: 5px; padding: 5px 8px 5px 5px; }
  .emo-b svg { width: 22px; height: 22px; }
  .emo-b small { font-size: 11px; }
  .emo-bub { padding: 3px 9px 3px 4px; gap: 5px; }
  .emo-ic { width: 24px; height: 24px; }
  .emo-ic svg { width: 19px; height: 19px; }
  .emo-say { font-size: 11px; }
}
/* phone landscape: the table makes room on the right for the tab instead of the log */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  #app:has(#emo-dock) .mid { padding-right: 0; }
  #app:has(#emo-dock) .table { padding-right: 36px; }
  body.mobile-log-open #app:has(#emo-dock) .mid > .log { right: calc(max(0px, env(safe-area-inset-right)) + 36px); }   /* the opened log stops before the tab */
}

/* ---------- Shop: top-up (real money, js/shop.js + worker/pay.js) ---------- */
.sh-item.topup { border-color: rgba(63,199,232,.4); }
.sh-item.topup .sh-tx small { color: #3FC7E8; }
.sh-ic.sh-chipic { background: rgba(63,199,232,.1); border-color: rgba(63,199,232,.4); }
.sh-ic.sh-chipic i { width: 22px; height: 22px; border-radius: 4px; background: linear-gradient(135deg, #9FEBFF, #3FC7E8 55%, #1A6F88); box-shadow: 0 0 10px rgba(63,199,232,.6); transform: rotate(45deg); }
.sh-bonus { display: inline-block; margin: 2px 0; padding: 1px 7px; border-radius: 3px; background: #E5A50A; color: #141210; font-size: 11px; font-style: normal; font-weight: 700; }
.sh-pays { display: flex; flex-direction: column; gap: 6px; }
.sh-buy.sh-pay { min-width: 132px; border-color: #3FC7E8; background: rgba(63,199,232,.1); color: #BFF3FF; }
.sh-buy.sh-pay.afdian { border-color: #946CE6; background: rgba(148,108,230,.12); color: #E2D6FF; }
.sh-buy.sh-pay small { font-size: 10px; font-weight: 600; opacity: .85; }
.sh-buy.sh-pay b { font-size: 14px; }
.sh-orders { grid-column: 1 / -1; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 10px; font-size: 12px; }
.sh-orders ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.sh-orders li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; color: var(--mute); }
.sh-orders li b { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-orders li em { font-style: normal; }
.sh-orders li.paid em { color: #2BDE7E; } .sh-orders li.refunded em, .sh-orders li.mismatch em { color: #FF8A3D; }
.sh-payback { position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 90; width: min(92vw, 460px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 16px; border-radius: 10px;
  background: rgba(10,14,18,.96); border: 1px solid #2BDE7E; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.sh-payback.cancel { border-color: #FF8A3D; }
.sh-payback b { grid-column: 1; font-size: 14px; }
.sh-payback span { grid-column: 1; font-size: 12px; color: var(--mute); }
.sh-payback button { grid-column: 2; grid-row: 1 / span 2; }
@media (max-height: 520px), (max-width: 640px) {
  .sh-item.topup { grid-template-columns: auto minmax(0, 1fr); }
  .sh-item.topup .sh-pays { grid-column: 1 / -1; flex-direction: row; }
  .sh-buy.sh-pay { flex: 1; min-width: 0; }
}

/* ---------- Account: sign up / sign in before the first game (js/account.js) ---------- */
.nn-acc .acc-box { max-height: calc(100dvh - 90px); overflow-y: auto; }
.acc-box > * { flex-shrink: 0; }   /* scroll instead of squeezing the tabs */
.acc-box .nr-in input { font-size: 15px; font-weight: 600; padding: 9px 10px; }
.acc-box .nr-in input[readonly] { color: var(--mute); background: #0C0D12; }
.acc-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.acc-tabs button { border: 0; border-radius: 0; background: transparent; color: var(--mute); padding: 8px; font-weight: 700; }
.acc-tabs button.on { background: rgba(24,200,232,.14); color: #18C8E8; }
.acc-link { align-self: center; border: 0; background: none; color: #18C8E8; font-size: 12px; padding: 2px 6px; text-decoration: underline; text-underline-offset: 3px; }
.acc-msg { display: none; font-size: 12.5px; color: #FF6A6A; text-align: center; }
.acc-msg.on { display: block; } .acc-msg.ok { color: #2BDE7E; }
.acc-warn { background: transparent; border-color: #FF8A3D; color: #FFB27A; }
.pf-acc { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.pf-acc button.danger { background: #C0392B; border-color: #C0392B; color: #fff; }
@media (max-height: 520px) {
  .nn-acc .acc-box { max-height: calc(100dvh - 40px); }
  .acc-box .nr-in input { font-size: 13px; padding: 5px 8px; }
  .acc-tabs button { padding: 5px; font-size: 12px; }
  .acc-box[data-m="register"] > p { display: none; }   /* the one-line intro: the form fits a phone held sideways */
  .acc-box { gap: 5px; }
  .acc-box h2 { font-size: 16px; }
  .acc-box .nr-in { gap: 1px; }
  .acc-box .nr-in small { font-size: 9px; }
  .acc-box .nr-in input { padding: 4px 8px; }
  .acc-box .nr-go { padding: 6px 14px; margin-top: 2px; }
}