/* 式神符陣 table — "夜の陰陽寮、漆と金箔の盤".
   Shared by the local play page (play/index.html) and the online room
   (online/room.html). Colours and type live in the tokens below only. */

:root {
  --bg: oklch(18% 0.02 260);
  --bg-deep: oklch(12.5% 0.018 262);
  --board: oklch(14% 0.01 30);
  --gold: oklch(80% 0.12 85);
  --gold-hi: oklch(90% 0.09 90);
  --gold-dim: oklch(58% 0.08 80);
  --gold-line: oklch(52% 0.07 80 / 0.55);
  --p0: oklch(62% 0.13 250);
  --p1: oklch(62% 0.16 30);
  --ink: oklch(20% 0.01 260);
  --ink-soft: oklch(42% 0.02 260);
  --text: oklch(90% 0.02 85);
  --text-dim: oklch(70% 0.02 260);
  --jade: oklch(79% 0.13 165);
  --vermilion: oklch(64% 0.19 32);
  --amber: oklch(80% 0.14 72);
  --violet: oklch(72% 0.14 305);
  --lacquer: oklch(16% 0.014 40 / 0.92);
  --lacquer-hi: oklch(22% 0.02 45 / 0.95);

  /* the 記号体系 (3x3_duel print/icon-system-v1): cards and board share these */
  --washi: #f3eee1;
  --washi-hi: #f7f5f0;
  --sym-ink: #26262b;
  --sym-verm: #c0332b;     /* attack */
  --sym-verm-hi: #e0674f;  /* attack on the dark board, damage numbers */
  --sym-sage: #c6d8b4;     /* counter range */
  --sym-khaki: #a08d74;    /* blind spot */
  --sym-amber: #e0a43a;    /* gap (provisional: the system has no gap mark yet) */
  --sym-flame: #91c8dc;    /* 生命価 */
  /* lacquer cell grounds */
  --lq-void: linear-gradient(160deg, #1e1b18, #131110);
  --lq-yin: linear-gradient(160deg, #1c2339, #10131d);
  --lq-yang: linear-gradient(160deg, #3b2418, #20140d);
  /* 11/10: the 太極 cell takes the 空 ground (the paper board's 1110a decision) */
  --lq-taiji: var(--lq-void);
  /* the placeholder face: ink-wash ground (shikigami: indigo, reigu: umber) */
  --glyph-ground: radial-gradient(120% 80% at 50% 110%, oklch(78% 0.1 85 / 0.14), transparent 60%), radial-gradient(120% 90% at 50% 26%, #2b3453 0%, #161b2b 55%, #0c0e15 100%);
  --glyph-ground-reigu: radial-gradient(120% 80% at 50% 110%, oklch(78% 0.1 85 / 0.18), transparent 60%), radial-gradient(120% 90% at 50% 26%, #4a3a26 0%, #2a2016 55%, #120e0a 100%);

  --font-mincho: "Shippori Mincho B1", "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;

  --top-h: 78px;
  --self-h: 184px;
  --side-l: 172px;
  --side-r: 300px;
  --prompt-h: 56px;
  --prompt-gap: 8px; /* the prompt's distance from the bottom of the centre column */
  color-scheme: dark; /* native scrollbars and pickers match the lacquer */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-mid: 240ms;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .92  0 0 0 0 .86  0 0 0 0 .72  0 0 0 .07 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--bg-deep);
  background-image:
    var(--grain),
    radial-gradient(120% 90% at 50% 38%, oklch(22% 0.03 258) 0%, var(--bg) 42%, var(--bg-deep) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
.muted { color: var(--text-dim); }
.err { color: var(--vermilion); font-weight: 700; }
b, .num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ layout */

.yy {
  position: relative;
  display: grid;
  height: 100dvh;
  min-height: 660px;
  grid-template-columns: var(--side-l) minmax(0, 1fr) var(--side-r);
  grid-template-rows: var(--top-h) minmax(0, 1fr) var(--self-h);
  grid-template-areas: "top top top" "left center right" "self self self";
  overflow: hidden;
  overflow: clip; /* hidden still lets focus() scroll the table */
}
.yy-top { grid-area: top; display: flex; align-items: center; gap: 18px; padding: 8px 16px; min-width: 0; }
.yy-left { grid-area: left; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 6px 0 10px 14px; min-height: 0; }
.yy-turn { margin-right: 6px; }
.yy-center { grid-area: center; position: relative; z-index: 5; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 4px 8px 0; }
/* the column's empty band (round the prompt) lies over the tops of the fanned hand: taps go through it */
.yy-center { pointer-events: none; }
.yy-slot-notice, .yy-board-wrap { pointer-events: auto; }
.yy-right { grid-area: right; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 10px 6px; min-height: 0; }
.yy-self { grid-area: self; z-index: 4; display: grid; grid-template-columns: 352px minmax(0, 1fr) var(--side-r); align-items: end; position: relative; min-width: 0; }
.yy-fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; }

.yy-slot-header { flex: 0 0 auto; }
.yy-opp { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 18px; min-width: 0; }
.yy-slot-tools { flex: 0 0 auto; display: flex; justify-content: flex-end; }
.yy-slot-notice:empty { display: none; }
/* the other side's last turn in a line: portrait phones only (elsewhere the log is beside the board) */
.yy-recap { display: none; }

/* ------------------------------------------------------------------- brand */

.brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.brand-mark {
  display: inline-grid; place-items: center; width: 34px; height: 34px; align-self: center;
  font-family: var(--font-mincho); font-weight: 800; font-size: 22px; color: var(--bg-deep);
  background: linear-gradient(145deg, var(--gold-hi), var(--gold) 55%, var(--gold-dim));
  border-radius: 3px; transform: rotate(-4deg); box-shadow: 0 2px 10px oklch(0% 0 0 / 0.45);
}
.brand-name { font-family: var(--font-mincho); font-weight: 800; font-size: 20px; letter-spacing: 0.08em; color: var(--text); }
.brand-name small { font-size: 12px; color: var(--text-dim); font-weight: 500; }
.brand-sub { font-size: 12px; color: var(--gold-dim); letter-spacing: 0.2em; }

.tools { display: flex; align-items: center; gap: 8px; }
.rules-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--gold-line); background: var(--lacquer); font-size: 12px; color: var(--text);
  white-space: nowrap; max-width: 36vw; overflow: hidden; text-overflow: ellipsis;
}
button.rules-badge { cursor: pointer; }
.rules-badge .mod { color: var(--gold); font-weight: 700; }

/* ------------------------------------------------------------------ buttons */

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: 4px; cursor: pointer; white-space: nowrap;
  background: var(--lacquer-hi); color: var(--text); border: 1px solid var(--gold-line);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), background-color var(--t-fast);
}
.btn:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible, .cell:focus-visible, .hand-card:focus-visible, .rd-btn:focus-visible, .fc-btn:focus-visible {
  outline: 2px solid var(--gold-hi); outline-offset: 2px;
}
.btn-gold { background: linear-gradient(170deg, var(--gold-hi), var(--gold) 60%, oklch(70% 0.11 80)); color: var(--ink); border-color: var(--gold-hi); font-weight: 700; }
.btn-red { background: linear-gradient(170deg, oklch(66% 0.19 32), oklch(52% 0.18 30)); color: oklch(97% 0.01 85); border-color: oklch(74% 0.15 35); font-weight: 700; }
.btn-jade { background: linear-gradient(170deg, oklch(76% 0.12 165), oklch(58% 0.1 170)); color: var(--ink); border-color: var(--jade); font-weight: 700; }
.btn-violet { background: linear-gradient(170deg, oklch(66% 0.14 305), oklch(50% 0.13 305)); color: oklch(97% 0.01 85); border-color: var(--violet); font-weight: 700; }
.btn-quiet { background: transparent; border-color: oklch(60% 0.02 260 / 0.45); color: var(--text-dim); }
.btn-quiet:hover:not(:disabled) { color: var(--text); }
.btn-auto[aria-pressed="true"] { color: var(--ink); background: var(--gold); border-color: var(--gold-hi); font-weight: 700; }
.btn-end {
  font-family: var(--font-mincho); font-weight: 800; font-size: 19px; letter-spacing: 0.2em; padding: 14px 26px 14px 30px;
  background: radial-gradient(120% 140% at 50% 0%, oklch(30% 0.04 60), var(--board));
  color: var(--gold-hi); border: 1px solid var(--gold); box-shadow: inset 0 0 0 3px var(--board), inset 0 0 0 4px var(--gold-line), 0 8px 24px oklch(0% 0 0 / 0.5);
}
.btn-end:hover:not(:disabled) { color: oklch(96% 0.06 90); }
.btn-end.is-asking { border-color: var(--gold-hi); box-shadow: inset 0 0 0 3px var(--board), inset 0 0 0 4px var(--gold), 0 0 0 3px oklch(80% 0.12 85 / 0.35), 0 8px 24px oklch(0% 0 0 / 0.5); }

/* --------------------------------------------------------------- nameplates */

.np {
  display: flex; align-items: center; gap: 14px; padding: 7px 14px 7px 8px; min-width: 0;
  background: linear-gradient(180deg, var(--lacquer-hi), var(--lacquer)); border: 1px solid oklch(40% 0.03 60 / 0.5);
  border-radius: 6px; box-shadow: 0 6px 18px oklch(0% 0 0 / 0.35);
}
.np.is-turn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-line), 0 6px 22px oklch(80% 0.12 85 / 0.16); }
.np-seal {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
  font-family: var(--font-mincho); font-weight: 800; font-size: 19px; color: oklch(97% 0.01 85);
}
.np.o0 .np-seal { background: var(--p0); border-radius: 2px; }
.np.o1 .np-seal { background: var(--p1); border-radius: 50%; }
.np-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.np-name {
  font-family: var(--font-mincho); font-weight: 700; font-size: 15px; line-height: 1.15; max-width: 11em; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.np-turn, .np-ctl { font-size: 10px; letter-spacing: 0.12em; }
.np-short { display: none; }
/* my own plate says あなた (the full name is its tooltip): a long name was cut to 「プレイヤー1(あ…」 */
.np.is-you .np-full { display: none; }
.np.is-you .np-short { display: inline; }
.np-turn { color: var(--gold); }
.np-ctl { color: var(--ink); background: var(--gold); padding: 0 6px; border-radius: 2px; align-self: flex-start; margin-top: 2px; font-weight: 700; }
.np-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.np-stat i { font-style: normal; font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; white-space: nowrap; }
.np-stat { flex: 0 0 auto; }
.np-stat b { font-family: var(--font-mincho); font-size: 24px; font-weight: 800; }
.np-stat small { font-size: 11px; color: var(--text-dim); }
.np-life b { color: oklch(88% 0.06 40); }
.np-mana b { color: var(--gold-hi); }
/* the late-game control line (controlWinLate) and 制圧点 (controlWinMode points) */
.np-occ.is-late small { color: var(--sym-verm-hi); font-weight: 700; }
.np-pts b { color: var(--gold-hi); }
/* 山札切れ n/2 (deckOutMode second): vermilion once one more ends the game */
.np-deckout b { font-size: 18px; }
.np-deckout.is-late b, .np-deckout.is-late small { color: var(--sym-verm-hi); }
.np-chips { display: grid; grid-auto-flow: column; gap: 2px; align-self: center; }
.chip { display: block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid oklch(60% 0.03 80 / 0.6); }
.chip.step { border-color: var(--gold-dim); }
.chip.on { background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 60%, var(--gold-dim)); border-color: var(--gold); }

/* ------------------------------------------------------------ opponent hand */

.ohand { position: relative; display: flex; align-items: center; height: 58px; padding: 0 22px 0 6px; }
.ohand-card { width: 30px; margin-left: -12px; transform: rotate(calc(var(--i) * 4deg)) translateY(calc(var(--i) * var(--i) * 0.8px)); transform-origin: 50% 120%; }
.ohand-card:first-child { margin-left: 0; }
.ohand-card .fu-back { width: 34px; }
.ohand-n { position: absolute; right: 0; bottom: 2px; font-family: var(--font-mincho); font-weight: 800; font-size: 15px; color: var(--text-dim); }

/* -------------------------------------------------------------------- piles */

.piles { display: flex; gap: 10px; align-items: flex-end; }
.pile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; }
button.pile { cursor: pointer; }
button.pile:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 3px; }
.pile-stack { position: relative; width: 62px; height: 87px; }
.pile-stack > .fu { position: absolute; inset: 0; --fu-w: 62px; }
.pile-layer.l1 { transform: translate(2px, -2px); }
.pile-layer.l2 { transform: translate(4px, -4px); }
.pile-layer.l3 { transform: translate(6px, -6px); }
.pile-layer.empty { opacity: 0.18; }
.pile-grave .pile-stack > .fu { filter: saturate(0.6) brightness(0.8); }
.pile-grave:hover .pile-stack > .fu { filter: none; }
.pile-n { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.pile-n b { font-family: var(--font-mincho); font-size: 17px; }
.pile-n i { font-style: normal; font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; }
.fu-empty { border: 1px dashed oklch(60% 0.03 80 / 0.35) !important; background: none !important; box-shadow: none !important; }

/* -------------------------------------------------------------------- board */
/* 漆と螺鈿: lacquer cell grounds (indigo for 陰, warm for 陽, dark for 空, the
   太極 centre with a gold-ringed disc) and a mother-of-pearl disc holding the
   cell's attribute mark. Under a piece the disc shrinks to a chip in the
   corner, so the attribute stays readable. The range overlays speak the card
   diagram's colours: attack = vermilion (square frame = area, ring = single),
   counter = sage, blind = khaki, gap = the provisional amber ring. */

/* margin: the prompt's band; a prompt taller than that (a confirm with several lines, the
   counter order) gets room from the board instead of sitting over it (--prompt-live: table.ts) */
.yy-board-wrap { position: relative; flex: 1 1 auto; min-height: 0; margin-bottom: max(var(--prompt-h), calc(var(--prompt-live, 0px) + var(--prompt-gap) + 4px)); container-type: size; display: grid; place-items: center; }
.yy-board { width: min(100cqw, 100cqh); aspect-ratio: 1; }
.bd {
  position: relative; width: 100%; height: 100%; container-type: inline-size;
  padding: 2.4cqw; border-radius: 1.2cqw;
  background-color: #0b0b0e;
  background-image: var(--grain), radial-gradient(90% 70% at 35% 18%, oklch(24% 0.02 60 / 0.5), transparent 60%);
  box-shadow:
    inset 0 0 0 0.3cqw oklch(78% 0.1 85 / 0.5),
    inset 0 0 0 1.1cqw #16130e,
    inset 0 0 0 1.22cqw oklch(78% 0.1 85 / 0.22),
    0 3cqw 6cqw oklch(0% 0 0 / 0.6),
    0 0 9cqw -4cqw oklch(78% 0.1 85 / 0.3);
}
/* the control state's gold rim (opacity only: steady on the holder's turn, a slow pulse on the other's) */
.bd::before {
  content: ""; position: absolute; inset: 0.3cqw; border-radius: 1cqw; pointer-events: none; z-index: 1; opacity: 0;
  box-shadow: 0 0 0 0.45cqw var(--gold), 0 0 5cqw oklch(80% 0.12 85 / 0.6), inset 0 0 4cqw oklch(80% 0.12 85 / 0.28);
  transition: opacity 0.4s;
}
.bd.ctl-0::before, .bd.ctl-1::before { opacity: 1; }
.bd.ctl-wait::before { animation: rim-pulse 2.8s ease-in-out infinite; }
@keyframes rim-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.bd-grid, .bd-over { position: absolute; inset: 2.4cqw; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 0.7cqw; }
.bd-grid { background: linear-gradient(135deg, oklch(78% 0.1 85 / 0.16), oklch(60% 0.06 70 / 0.08)); padding: 0.7cqw; inset: 1.7cqw; border-radius: 0.6cqw; }
.bd-over { pointer-events: none; z-index: 3; }

.cell {
  position: relative; border: 0; margin: 0; padding: 0; cursor: default; overflow: visible;
  container-type: size; display: grid; place-items: center; border-radius: 0.5cqw;
  background: var(--grain), var(--lq-void);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.05), inset 0 -3cqw 5cqw oklch(0% 0 0 / 0.4);
}
.cell.c-yin { background: var(--grain), var(--lq-yin); }
.cell.c-yang { background: var(--grain), var(--lq-yang); }
.cell.c-taiji { background: var(--grain), var(--lq-taiji); }
.cell.has-unit, .cell[class*="mk-"] { cursor: pointer; }
.raden {
  position: absolute; left: 28cqw; top: 28cqh; width: 44cqw; height: 44cqw; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background:
    conic-gradient(from 210deg, oklch(88% 0.06 350 / 0.34), oklch(88% 0.06 230 / 0.36), oklch(90% 0.06 160 / 0.3), oklch(92% 0.05 85 / 0.3), oklch(88% 0.06 350 / 0.34)),
    radial-gradient(circle at 34% 28%, #f7f4ee, #dde1dd 42%, #bcc6cb 70%, #9aabb4);
  box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.55), 0 0 6cqw oklch(82% 0.02 230 / 0.16), inset 0 0 2cqw oklch(100% 0 0 / 0.55);
  opacity: 0.9;
}
.raden-mk { width: 80%; height: 80%; }
.cell.c-taiji .raden {
  left: 22cqw; top: 22cqh; width: 56cqw; height: 56cqw;
  box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.55), 0 0 0 1.6cqw oklch(78% 0.1 85 / 0.38), 0 0 9cqw oklch(78% 0.1 85 / 0.24), inset 0 0 2cqw oklch(100% 0 0 / 0.55);
}
.raden.chip, .cell.c-taiji .raden.chip { left: 5cqw; top: 5cqh; width: 16cqw; height: 16cqw; box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.6); opacity: 0.88; }
.cell.c-taiji .raden.chip { box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.6), 0 0 0 0.7cqw oklch(78% 0.1 85 / 0.55); }

/* range markings: colour plus line type, drawn under the piece */
.cell::before, .cell::after { content: ""; position: absolute; pointer-events: none; }
.cell.rg-counter { box-shadow: inset 0 0 0 40cqw oklch(86% 0.05 130 / 0.2), inset 0 0 0 0.5cqw oklch(86% 0.05 130 / 0.7); }
.cell.rg-attack::before {
  inset: 5cqw; border: 1.1cqw solid var(--sym-verm-hi); border-radius: 2cqw;
  box-shadow: 0 0 3cqw oklch(64% 0.17 32 / 0.5), inset 0 0 3cqw oklch(64% 0.17 32 / 0.3);
}
.cell.rg-attack.rg-single::before { border-radius: 50%; inset: 4cqw; }
.cell.rg-blind:not(.rg-attack)::before {
  inset: 5cqw; border: 1cqw dashed var(--sym-khaki); border-radius: 2cqw;
  background: repeating-linear-gradient(45deg, oklch(64% 0.04 70 / 0.3) 0 3cqw, transparent 3cqw 6cqw);
}
.cell-gap {
  position: absolute; inset: 13cqw; pointer-events: none; border: 1cqw solid var(--sym-amber); border-radius: 1.5cqw; font-size: 0;
  box-shadow: 0 0 3cqw oklch(78% 0.14 72 / 0.55);
}
.cell-gap::after {
  content: "旧・隙"; position: absolute; right: -9cqw; bottom: -9cqh; padding: 0 1.8cqw; border-radius: 1cqw;
  background: var(--sym-amber); color: var(--ink); font-family: var(--font-mincho); font-weight: 800; font-size: max(10px, 9cqw); line-height: 1.3;
}
.cell.mk-summon::after { inset: 0; border-radius: 0.5cqw; box-shadow: inset 0 0 0 1.4cqw oklch(88% 0.1 88 / 0.95), inset 0 0 16cqw oklch(80% 0.12 85 / 0.55); animation: glow-breathe 1.8s ease-in-out infinite; }
/* while a card waits for its cell, the cells it cannot go to step back, so the lit ones read at a glance on a phone */
.yy-board:has(.cell.mk-summon, .cell.mk-inherit) .cell:not(.mk-summon, .mk-inherit) { filter: brightness(0.5) saturate(0.55); transition: filter var(--t-fast); }
/* 遊びやすくする工夫 (10/17): a picked hand card's glowing squares say what they do to it,
   big enough to read on a 390px phone (cq units of the cell, with a px floor) */
.cell-hint {
  position: absolute; left: 50%; bottom: 8cqw; translate: -50% 0; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2cqw;
}
.cell-hint b {
  padding: 0.5cqw 3cqw; border-radius: 1.5cqw; white-space: nowrap; font-family: var(--font-mincho); font-weight: 800;
  font-size: max(11px, 10cqw); line-height: 1.35; box-shadow: 0 0.5cqw 2cqw oklch(0% 0 0 / 0.5);
}
.cell-hint .is-up { background: var(--sym-sage); color: var(--ink); }
.cell-hint .is-down { background: oklch(72% 0.1 30); color: var(--ink); }
.cell-hint .is-threat { background: var(--sym-verm); color: oklch(98% 0.01 85); }
.cell.mk-summon.is-threatened::after { box-shadow: inset 0 0 0 1.4cqw oklch(88% 0.1 88 / 0.95), inset 0 0 16cqw oklch(62% 0.18 30 / 0.55); }
.cell.mk-inherit::after { inset: 3cqw; border: 1cqw dashed var(--violet); border-radius: 3cqw; box-shadow: 0 0 6cqw oklch(72% 0.14 305 / 0.5); animation: glow-breathe 1.8s ease-in-out infinite; }
.cell.mk-target::after { inset: 3cqw; border: 1.2cqw solid var(--sym-verm-hi); border-radius: 50%; animation: target-pulse 1.1s ease-in-out infinite; }
.cell.mk-heal::after { inset: 3cqw; border: 1.2cqw solid var(--jade); border-radius: 50%; animation: target-pulse 1.1s ease-in-out infinite; }
.cell.mk-proxy::after { inset: 3cqw; border: 1cqw dashed var(--gold); border-radius: 50%; animation: target-pulse 1.4s ease-in-out infinite; }
/* 茨木の左腕: the cell the struck enemy is pushed / pulled onto */
.cell.mk-move::after { inset: 4cqw; border: 1.1cqw dashed var(--sym-verm-hi); border-radius: 3cqw; box-shadow: inset 0 0 10cqw oklch(70% 0.14 30 / 0.35); animation: glow-breathe 1.4s ease-in-out infinite; }
.cell.is-selected { z-index: 2; }
.cell.is-selected .pc .fu-sm { box-shadow: 0 0 0 0.12em var(--gold-hi), 0 0 1.4em -0.2em oklch(80% 0.12 85 / 0.8), 0 0.4em 0.7em -0.2em oklch(0% 0 0 / 0.75); }
.cell:hover .pc-body { translate: 0 -1.5cqh; } /* screen-space lift, whatever the card's rotation */

@keyframes glow-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes target-pulse { 0%, 100% { opacity: 0.6; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.02); } }

/* the control state on the frame: lanterns on the holder's edge (one per cell control needs) and the 「制」 seal */
.bd-ctl { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.bd-lamps { position: absolute; left: 50%; bottom: 0.25cqw; translate: -50% 0; display: flex; gap: 1.5cqw; }
.bd-ctl-high .bd-lamps { bottom: auto; top: 0.25cqw; }
.bd-lamp { display: block; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #3a3222; box-shadow: inset 0 0 0 0.15cqw oklch(78% 0.1 85 / 0.5); }
.bd-lamp.on {
  background: radial-gradient(circle at 40% 35%, #fff3c4, var(--gold) 60%, #9a7a30);
  box-shadow: 0 0 1.2cqw oklch(88% 0.12 85 / 0.95), 0 0 3cqw oklch(80% 0.12 85 / 0.5);
}
.bd-seal {
  position: absolute; right: 0.6cqw; bottom: 0.6cqw; width: 7.4cqw; height: 7.4cqw; display: grid; place-items: center;
  border: 0.55cqw solid var(--sym-verm); border-radius: 0.8cqw; rotate: -8deg;
  font-family: var(--font-mincho); font-weight: 800; font-size: 5cqw; line-height: 1; color: var(--sym-verm);
  background: oklch(20% 0.02 40 / 0.55); box-shadow: 0 0 2.4cqw oklch(55% 0.18 30 / 0.45);
  text-shadow: 0 0 0.6cqw oklch(55% 0.18 30 / 0.4);
}
.bd-ctl-high .bd-seal { bottom: auto; top: 0.6cqw; rotate: 8deg; }

/* ------------------------------------------------------------------- pieces */
/* The piece is the small card turned the way it faces (its top edge is the
   front); the numbers and the owner's cube counter-turn so they stay upright.
   The owner shows only in the cube and a faint glow under the card: the
   記号体系 keeps red / blue off the board's symbols. */

/* --pw: the piece card's width in the cell; its em (w / 5.9, the sm card's --k) also sizes the cube */
.pc { --own: var(--p0); --pw: 56cqw; position: relative; width: 100cqw; height: 100cqh; display: grid; place-items: center; }
.pc.o1 { --own: var(--p1); }
.pc.f1 { --r: 90deg; }
.pc.f2 { --r: 180deg; }
.pc.f3 { --r: 270deg; }
.pc-body { position: relative; rotate: var(--r, 0deg); font-size: calc(var(--pw) / 5.9); transition: translate var(--t-mid) var(--ease-out); }
.pc .fu-sm {
  --fu-w: var(--pw);
  box-shadow: 0 0 0 0.07em var(--sym-ink), 0 0.4em 0.7em -0.2em oklch(0% 0 0 / 0.75), 0 0 1.3em -0.25em color-mix(in oklch, var(--own) 75%, transparent);
}
.pc .num, .pc-cube { rotate: calc(-1 * var(--r, 0deg)); }
.pc-cube { position: absolute; left: -0.46em; bottom: -0.46em; width: 1.1em; height: 1.1em; color: var(--own); filter: drop-shadow(0 0.1em 0.15em oklch(0% 0 0 / 0.65)); }
.pc-dir { position: absolute; left: 0; top: 0; width: 100cqw; height: 100cqh; pointer-events: none; transition: transform var(--t-mid) var(--ease-out); }
.pc-dir.f1 { transform: rotate(90deg); }
.pc-dir.f2 { transform: rotate(180deg); }
.pc-dir.f3 { transform: rotate(270deg); }
.pc-arrow {
  position: absolute; left: 50%; top: 0.8cqh; width: 13cqw; height: 8.5cqh; margin-left: -6.5cqw;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-dim));
  clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%);
  filter: drop-shadow(0 0 1.5cqw oklch(80% 0.12 85 / 0.8));
}
.pc-flag {
  position: absolute; right: 3cqw; top: 3cqh; z-index: 2; width: 12cqw; height: 12cqw; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-mincho); font-size: max(10px, 7.5cqw); font-weight: 800; color: var(--text); background: oklch(22% 0.02 260 / 0.95); border: 1px solid oklch(62% 0.03 260 / 0.7);
}
.pc.is-spent .fu-sm { filter: brightness(0.66) saturate(0.7); }
.pc-free {
  position: absolute; left: 3cqw; top: 3cqh; z-index: 2; min-width: 12cqw; height: 12cqw; display: grid; place-items: center; border-radius: 50%;
  font-size: max(10px, 7.5cqw); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--gold);
  box-shadow: 0 0 0 1px oklch(30% 0.02 85 / 0.6), 0 0 2.5cqw oklch(85% 0.12 85 / 0.7);
}
.rd-btn.is-free .rd-cost.ok { box-shadow: 0 0 0 1px var(--ink), 0 0 6px var(--gold-hi); }
.pc-buff { position: absolute; right: 3cqw; bottom: 3cqh; z-index: 2; font-size: max(10px, 7cqw); font-weight: 700; color: var(--ink); background: var(--amber); padding: 0 1.5cqw; border-radius: 1cqw; }
.pc-fog {
  position: absolute; left: 20cqw; right: 20cqw; top: 10cqh; bottom: 10cqh; z-index: 2; border-radius: 3cqw; pointer-events: none;
  background: radial-gradient(60% 50% at 40% 40%, oklch(92% 0.01 260 / 0.75), oklch(80% 0.01 260 / 0.35) 70%, transparent);
}
.pc-hidden { position: absolute; z-index: 3; font-family: var(--font-mincho); font-weight: 800; font-size: 16cqw; color: oklch(35% 0.02 260 / 0.8); }
.pc.is-hidden .fu-sm { opacity: 0.55; }
.cell.is-turning .pc-body, .cell.is-turning .pc-dir { opacity: 0; }

/* -------------------------------------------------------------------- cards */
/* The team's card layout (print/card-design-v1) with the marks of the
   記号体系 (play/marks.ts). A size sets --fu-w; each size has its own em
   (--k): sm = board piece (w / 5.9), md = hand (w / 11.6), lg = detail
   (w / 23.6: the proposal's 236px card at 10px). Positions are in em and
   --art (the art area's height, from the width), so every size scales. */

.fu {
  --fu-w: 118px; --k: 11.6; --pad: 0.45em; --art: calc(var(--fu-w) * 0.8);
  /* the card's em as a length, for parts that set a font size of their own */
  --em: calc(var(--fu-w) / var(--k));
  position: relative; display: block; width: var(--fu-w); aspect-ratio: 63 / 88; flex: 0 0 auto;
  font-size: var(--em); line-height: 1.2;
  color: var(--sym-ink); text-align: left; border-radius: 0.5em;
  background: var(--washi);
  box-shadow: 0 0 0 1px var(--sym-ink), 0 0.6em 1.2em -0.4em oklch(0% 0 0 / 0.7);
}
.fu > * { position: absolute; }
.fu .mk { display: block; width: 100%; height: 100%; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fu .num { display: inline-block; font-family: var(--font-mincho); font-weight: 800; font-style: normal; line-height: 1; color: var(--sym-ink); }
.fu-art {
  left: var(--pad); right: var(--pad); top: var(--pad); height: var(--art); border-radius: 0.3em; overflow: hidden;
  display: grid; place-items: center; background: var(--glyph-ground);
}
/* the print kit's art: the file covers the slot (faces sit a little above the middle of
   the crops); the glyph waits underneath, shown only when the file cannot be loaded */
.fu-art.has-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.fu-art.has-img .fu-glyph { visibility: hidden; }
.fu-art.no-img img { display: none; }
.fu-art.no-img .fu-glyph { visibility: visible; }
.fu-glyph { font-family: var(--font-mincho); font-weight: 800; font-size: var(--glyph, 2.7em); line-height: 1; color: #efe7d2; text-shadow: 0 0 0.35em oklch(93% 0.03 85 / 0.22); }
.fu.k-reigu .fu-art { background: var(--glyph-ground-reigu); }
/* a card's picture in a list (the grave): the square crop, or the glyph */
.fu-art.fu-thumb {
  position: relative; left: auto; right: auto; top: auto; display: inline-grid; place-items: center; width: 1.9em; height: 1.9em;
  margin-right: 0.5em; vertical-align: middle; border-radius: 0.25em; box-shadow: 0 0 0 1px oklch(60% 0.03 80 / 0.5);
}
.fu-thumb .fu-glyph { font-size: 1.1em; }
/* a mark inside a line of text (the 霊力価 flame in a prediction) */
.mk-inline { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.2em; }
.fu-cost { display: flex; flex-direction: column; gap: 0.05em; border-radius: 0.3em; background: oklch(95% 0.02 85 / 0.96); box-shadow: 0 0 0 0.07em var(--sym-ink); }
.fu-c { display: flex; align-items: center; gap: 0.12em; }
.fu-c .mk { flex: none; width: 1em; height: 1em; }
.fu-attr { display: block; border-radius: 50%; background: var(--washi); box-shadow: 0 0 0 0.05em oklch(20% 0.01 260 / 0.35); }
.fu-badge {
  display: grid; place-items: center; width: auto !important; height: auto !important; border-radius: 0.25em; padding: 0.15em 0.4em;
  font-family: var(--font-mincho); font-weight: 800; color: var(--sym-ink); box-shadow: 0 0 0 0.07em var(--sym-ink); letter-spacing: 0.05em; line-height: 1.2;
}
/* a name longer than the strip wraps into a second column (read right to left) rather than being cut */
.fu-name {
  writing-mode: vertical-rl; white-space: normal; text-wrap: balance; overflow: hidden;
  font-family: var(--font-mincho); font-weight: 700; letter-spacing: 0.06em; line-height: 1.05; color: var(--sym-ink);
  border-radius: 0.2em; background: var(--washi); box-shadow: 0 0 0 0.07em var(--sym-ink);
}
.fu-stats { display: flex; align-items: center; }
.gem { position: relative; display: grid; place-items: center; }
.gem .mk { position: absolute; inset: 0; }
.fu .gem .num { position: relative; }
.fu .gem .num.hurt { color: var(--sym-verm); }
.fu .gem .num.over { color: #1f7a4d; }
.fu-rblock { display: flex; flex-direction: column; align-items: flex-end; }
.fu-type { display: flex; align-items: center; white-space: nowrap; border-radius: 0.2em; background: var(--washi); box-shadow: 0 0 0 0.07em var(--sym-ink); font-weight: 700; color: var(--sym-ink); }
.fu-type .mk { flex: none; }
/* the range diagram as printed on the card (10/22): dark cells, white self with an ink ▲, 朱 attack, green counter ring, striped 隙 */
.fu-range { display: block; aspect-ratio: 1; border-radius: 0.15em; background: #2b2a2e; box-shadow: 0 0 0 0.07em #b08a4a; }
.fu-range .rs-cell { fill: #2e2d32; stroke: #9a979f; stroke-width: 0.5; }
.fu-range .rs-dot { fill: oklch(70% 0.01 270 / 0.45); }
.fu-range .rs-self { fill: #fbf8f1; stroke: #9a979f; stroke-width: 0.5; }
.fu-range .rs-fwd { fill: #141316; }
.fu-range .rs-blind { fill: #d9a441; stroke: #9a979f; stroke-width: 0.5; }
.fu-range .rs-hatch { fill: #1d1b19; }
.fu-range .rs-ctr { fill: #6fcf9e; }
.fu-range .rs-atk { fill: #e2523c; }
.fu-range .rs-gap { fill: none; stroke: var(--sym-amber); stroke-width: 1.1; }
.fu-text { border-radius: 0.3em; background: #fbf8f0; box-shadow: inset 0 0 0 1px oklch(26% 0.01 260 / 0.22); overflow: hidden; color: #2c2b30; }
.fu-tx { display: block; overflow: hidden; }
.fu-text.none .fu-tx, .fu-text.off .fu-tx { color: var(--ink-soft); }
.fu-life { position: absolute; display: grid; place-items: center; }
.fu-life .mk { position: absolute; inset: 0; }
.fu-life .num { position: relative; top: 0.18em; }
/* 霊力価 (採用 9/22): the print kit's blue flames under the attribute mark, one per point
   (from 4 up: one flame and the number); a pale halo keeps them readable on dark art */
.fu-mval { display: flex; align-items: center; justify-content: flex-end; gap: 0.06em; filter: drop-shadow(0 0 0.08em oklch(97% 0.03 230 / 0.95)) drop-shadow(0 0.04em 0.1em oklch(0% 0 0 / 0.55)); }
.fu-mval .mk-flames { display: block; height: 100%; width: auto; flex: none; }
.fu .fu-mval .num { color: #f2fbff; text-shadow: 0 0 0.1em #0b2a52, 0 0 0.1em #0b2a52, 0 0 0.25em #0b2a52; }
.fu .fu-mval.is-mod > .num { color: var(--gold-hi); text-decoration: none; }
.fu-md .fu-mval .num { font-size: max(10px, 1.3em); }
.fu-lg .fu-mval .num { font-size: max(11px, 2.1em); }
.fu-mval.is-mod { border-radius: 0.3em; box-shadow: 0 0 0 0.12em var(--gold-hi); }
.fu-md .fu-mval { top: calc(var(--em) * 2.75); right: 0.8em; height: 1.55em; }
.fu-lg .fu-mval { top: 5.1em; right: 1.45em; height: 2.7em; }
/* the print kit's card number (T-001), bottom right as printed; over the text box's bottom
   padding, so it never covers a line */
.fu-pid {
  right: var(--pad); bottom: 0; z-index: 1; padding: 0.05em 0.45em 0; border-radius: 0.3em 0.3em 0 0;
  background: var(--washi-hi); box-shadow: 0 0 0 1px oklch(26% 0.01 260 / 0.45);
  font-family: var(--font-gothic); font-weight: 700; line-height: 1.25; letter-spacing: 0.03em; color: var(--sym-ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fu-md .fu-pid { font-size: max(8px, 0.62em); }
.fu-lg .fu-pid { font-size: max(9px, 0.8em); }
.fu-md.has-pid .fu-life { bottom: 0.75em; }
.fu-lg.has-pid .fu-life { bottom: 1.1em; }
/* an edited number, attribute or range: gold underline / ring, "元の値" in the tooltip */
.fu .is-mod > .num { color: oklch(48% 0.13 70); text-decoration: underline 0.12em oklch(72% 0.13 80); text-underline-offset: 0.1em; }
.fu-attr.is-mod, .fu-type.is-mod, .fu-rblock.is-mod .fu-range { box-shadow: 0 0 0 0.14em var(--gold-hi); }

/* sm: the board piece (and the grave pile's top card) */
.fu-sm { --k: 5.9; --pad: 0.22em; --art: calc(var(--fu-w) * 0.894); --glyph: 2.7em; border-radius: 0.3em; }
.fu-sm .fu-cost { top: 0.12em; left: 0.12em; padding: 0.05em 0.2em 0.05em 0.06em; border-radius: 0.22em; }
.fu-sm .fu-c .mk { width: 0.95em; height: 0.95em; }
.fu-sm .fu-c .num { font-size: 1em; }
.fu-sm .fu-attr { top: 0.1em; right: 0.1em; width: 1.18em; height: 1.18em; }
.fu-sm .fu-badge { top: calc(var(--em) * 0.12); right: calc(var(--em) * 0.12); font-size: 0.5em; }
.fu-sm .fu-stats { left: 0.2em; bottom: 0.2em; height: 28%; gap: 0.1em; }
.fu-sm .gem { width: 1.5em; height: 1.5em; }
.fu-sm .gem .num { font-size: 0.95em; }
.fu-sm .fu-rblock { right: 0.2em; bottom: 0.2em; height: 28%; justify-content: center; }
.fu-sm .fu-range { width: 1.85em; box-shadow: none; }
.fu-sm .fu-range.g5 { width: 2.05em; }

/* md: the hand. Cost row, attribute, vertical name, HP / ATK plate, type + range, text box with the flame */
.fu-md { --k: 11.6; --pad: 0.45em; --art: calc(var(--fu-w) * 0.796); --glyph: 3.9em; }
.fu-md .fu-cost { top: 0.75em; left: 0.75em; flex-direction: row; align-items: center; gap: 0.3em; padding: 0.15em 0.35em 0.15em 0.2em; }
.fu-md .fu-c-sum .mk { width: 1.45em; height: 1.45em; }
.fu-md .fu-c-sum .num { font-size: max(11px, 1.25em); }
.fu-md .fu-c .num { font-size: max(10px, 0.95em); }
.fu-md .fu-attr { top: 0.7em; right: 0.7em; width: 1.8em; height: 1.8em; }
.fu-md .fu-badge { top: calc(var(--em) * 0.75); right: calc(var(--em) * 0.7); font-size: max(10px, 0.9em); }
.fu-md .fu-name { top: calc(var(--em) * 2.75); left: calc(var(--em) * 0.75); padding: 0.35em 0.15em; font-size: max(10px, 1.05em); max-height: calc(var(--art) - var(--em) * 2.55); }
.fu-md .fu-stats { left: 2.45em; top: calc(var(--pad) + var(--art) - 2.45em); gap: 0.12em; padding: 0.12em; border-radius: 0.3em; background: oklch(95% 0.02 85 / 0.96); box-shadow: 0 0 0 0.07em var(--sym-ink); }
.fu-md .gem { width: 2.05em; height: 2.05em; }
.fu-md .gem .num { font-size: max(10px, 1.05em); }
.fu-md .fu-rblock { right: 0.7em; top: calc(var(--pad) + var(--art) - 4.75em); gap: 0.15em; }
.fu-md .fu-type { padding: 0.12em; }
.fu-md .fu-type .mk { width: 1em; height: 1em; }
/* a plain (non-術式) attack has no mark since the 2026-10-13 glossary: the plate only holds its place */
.fu-md .fu-type.is-plain { visibility: hidden; }
.fu-md .fu-type-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fu-md .fu-range { width: 3.3em; padding: 0.12em; }
.fu-md .fu-range.g5 { width: 3.6em; }
.fu-md .fu-text { left: var(--pad); right: var(--pad); bottom: var(--pad); top: calc(var(--pad) + var(--art) + 0.3em); padding: 0.3em 0.45em; }
/* 生命価's cold flame in the corner: the text keeps clear of it */
.fu-md .fu-text.has-corner { padding-right: 1.75em; }
/* whole lines only: --lines is how many fit the text box at this card's width (set with --fu-w) */
.fu-md .fu-tx { font-size: max(10px, 0.95em); line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 3); }
.fu-md .fu-text.none .fu-tx { display: grid; place-items: center; height: 100%; text-align: center; }
.fu-md .fu-life { right: 0.2em; bottom: 0.2em; width: 1.5em; height: 1.5em; }
.fu-md .fu-life .num { font-size: max(9px, 0.8em); }
/* a reigu in hand: its text is the card, so the art gives it room */
.fu-md.k-reigu { --art: calc(var(--fu-w) * 0.67); --glyph: 3.4em; }
.fu-md.k-reigu .fu-name { top: calc(var(--em) * 2.6); max-height: calc(var(--art) - var(--em) * 2.4); letter-spacing: 0; }
.fu-md.k-reigu .fu-text { padding-right: 0.45em; }
.fu-md.k-reigu .fu-tx { -webkit-line-clamp: calc(var(--lines, 3) + 1); }

/* lg: the detail panel, the sheet and the card editor's preview; the text box grows with the text */
.fu-lg {
  --fu-w: clamp(118px, calc((100cqh - 92px) * 0.7), 206px);
  --k: 23.6; --pad: 0.8em; --art: calc(var(--fu-w) * 0.866); --glyph: 10em;
  aspect-ratio: auto; min-height: calc(var(--fu-w) * 88 / 63); display: grid;
  grid-template-rows: calc(var(--pad) + var(--art)) minmax(0, 1fr); border-radius: 0.8em;
}
.fu-lg .fu-cost { top: 1.3em; left: 1.3em; padding: 0.4em 0.8em 0.4em 0.4em; gap: 0.1em; }
.fu-lg .fu-c-sum .mk { width: 2.2em; height: 2.2em; }
.fu-lg .fu-c-sum .num { font-size: max(13px, 1.8em); }
.fu-lg .fu-c .mk { width: 1.5em; height: 1.5em; }
.fu-lg .fu-c .num { font-size: max(10px, 1.3em); }
.fu-lg .fu-attr { top: 1.3em; right: 1.3em; width: 3.4em; height: 3.4em; }
.fu-lg .fu-badge { top: calc(var(--em) * 1.3); right: calc(var(--em) * 1.3); font-size: max(11px, 1.3em); }
.fu-lg .fu-name { top: calc(var(--em) * 8); left: calc(var(--em) * 1.3); padding: 0.4em 0.25em; font-size: max(11px, 1.35em); letter-spacing: 0.03em; max-height: calc(var(--art) - var(--em) * 12); }
.fu-lg.k-reigu .fu-name { top: calc(var(--em) * 5.4); max-height: calc(var(--art) - var(--em) * 5); }
.fu-lg .fu-stats { left: 1.3em; top: calc(var(--pad) + var(--art) - 4.4em); gap: 0.4em; padding: 0.4em; border-radius: 0.5em; background: oklch(95% 0.02 85 / 0.96); box-shadow: 0 0 0 0.07em var(--sym-ink); }
.fu-lg .gem { width: 3em; height: 3em; }
.fu-lg .gem .num { font-size: max(12px, 1.5em); }
.fu-lg .fu-rblock { right: 1.3em; top: calc(var(--pad) + var(--art) - 8.6em); gap: 0.3em; }
.fu-lg .fu-type { gap: 0.4em; padding: 0.1em 0.7em 0.1em 0.5em; font-size: max(10px, 1em); line-height: 1.6; }
.fu-lg .fu-type .mk { width: 1.2em; height: 1.2em; }
.fu-lg .fu-range { width: 6em; padding: 0.2em; }
.fu-lg .fu-text { position: relative; grid-row: 2; margin: 0.6em var(--pad) var(--pad); padding: 0.8em 1em; min-height: 4em; }
.fu-lg .fu-text.has-corner { padding-right: 3.6em; }
.fu-lg.k-reigu .fu-text { padding-right: 1em; }
.fu-lg .fu-tx { font-size: max(10px, 1.15em); line-height: 1.6; }
.fu-lg .fu-text.none .fu-tx { text-align: center; }
.fu-lg .fu-life { right: 0.6em; bottom: 0.6em; width: 2.6em; height: 2.6em; }
.fu-lg .fu-life .num { font-size: max(10px, 1.2em); }

.fu-back {
  --fu-w: 62px; display: block; border-radius: 3px;
  background:
    radial-gradient(circle at 50% 50%, oklch(30% 0.05 30) 0 22%, transparent 23%),
    repeating-linear-gradient(45deg, oklch(24% 0.03 30) 0 3px, oklch(19% 0.02 30) 3px 6px);
  box-shadow: inset 0 0 0 1px var(--gold-dim), inset 0 0 0 3px oklch(19% 0.02 30), inset 0 0 0 4px var(--gold-line), 0 3px 8px oklch(0% 0 0 / 0.5);
}
.fu-back-mark { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mincho); font-weight: 800; color: var(--gold); font-size: calc(var(--fu-w) * 0.32); opacity: 0.85; }

/* --------------------------------------------------------------------- hand */

.yy-hand { position: relative; height: 100%; min-width: 0; }
.hand { position: absolute; inset: 0; container-type: size; }
.hand.is-empty, .hand.is-watch { display: grid; place-items: center; }
.hand-card {
  --gap: min(120px, calc((100cqw - 130px) / max(1, var(--n) - 1)));
  --x: calc(var(--i) * var(--gap));
  /* the fan flattens as the hand grows, so the outer cards of a big hand stay on screen */
  --bow: calc(4.8px / max(4, var(--n) - 1));
  --tilt: calc(8deg / max(4, var(--n) - 1));
  position: absolute; left: 50%; bottom: 14px; width: 116px; margin-left: -58px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateX(var(--x)) translateY(calc(var(--i) * var(--i) * var(--bow))) rotate(calc(var(--i) * var(--tilt)));
  transform-origin: 50% 110%;
  transition: transform var(--t-mid) var(--ease-out), filter var(--t-fast);
}
.hand-card .fu { --fu-w: 116px; --lines: 4; }
/* lifted just enough to read, never into the prompt bar above the hand row */
.hand-card:hover, .hand-card:focus-visible { transform: translateX(var(--x)) translateY(-9px) rotate(0deg) scale(1.03); z-index: 20; }
.hand-card.is-selected { transform: translateX(var(--x)) translateY(-8px) rotate(0deg) scale(1.02); z-index: 21; }
.hand-card.is-selected .fu { box-shadow: 0 0 0 1px var(--sym-ink), 0 0 0 3px var(--gold-hi), 0 0 26px oklch(80% 0.12 85 / 0.55), 0 12px 24px oklch(0% 0 0 / 0.55); }
.hand-card.is-playable .fu { box-shadow: 0 0 0 1px var(--sym-ink), 0 0 0 2.5px oklch(80% 0.12 85 / 0.6), 0 8px 18px oklch(0% 0 0 / 0.5); }
.hand-card.is-dead .fu { filter: brightness(0.72) saturate(0.6); }
/* a cost the mana cannot pay reads in vermilion */
.hand-card.is-dead .fu-c-sum .num { color: var(--sym-verm); }
/* 劣勢時の大型割引: the printed cost struck through, the cost now beside it */
.fu-c-sum .num-was { font-size: max(10px, 0.95em); font-weight: 700; margin-right: 0.1em; color: var(--sym-ink); text-decoration: line-through 0.1em var(--sym-verm); opacity: 0.85; }
.fu-c-sum.is-disc .num { color: oklch(52% 0.14 150); }
.pr-disc { color: var(--gold-hi); white-space: nowrap; }
.hand-card.is-playable .fu-cost { box-shadow: 0 0 0 0.07em var(--sym-ink), 0 0 0 0.2em var(--gold); }
.hand-card.is-dead:hover .fu { filter: brightness(0.9) saturate(0.8); }
.hand-card.is-marked { transform: translateX(var(--x)) translateY(-10px) rotate(0deg); z-index: 15; }
.hand-card.is-marked .fu { box-shadow: 0 0 0 2px var(--vermilion), 0 10px 22px oklch(0% 0 0 / 0.55); }
.hand-seal {
  position: absolute; top: 34%; left: 50%; width: 50px; height: 50px; margin-left: -25px; display: grid; place-items: center;
  border: 3px solid var(--vermilion); border-radius: 6px; color: var(--vermilion); background: oklch(95% 0.02 85 / 0.7);
  font-family: var(--font-mincho); font-weight: 800; font-size: 30px; transform: rotate(-12deg);
}

.yy-self-plate { align-self: center; padding: 0 0 0 14px; display: flex; }
.yy-actions { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; padding: 0 18px 14px 6px; }
.yy-extra { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* ------------------------------------------------------------------ prompt */

.yy-prompt { position: absolute; left: 8px; right: 8px; bottom: var(--prompt-gap); z-index: 6; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
.yy-prompt > * { pointer-events: auto; }
.pr {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; max-width: min(820px, 100%);
  padding: 7px 14px; border-radius: 6px; background: var(--lacquer); border: 1px solid oklch(45% 0.04 70 / 0.5);
  box-shadow: 0 8px 22px oklch(0% 0 0 / 0.45);
}
.pr-hint { margin: 0; font-size: 13px; }
.pr-hint b { font-family: var(--font-mincho); color: var(--gold-hi); }
.pr-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; font-size: 12.5px; max-width: 100%; }
.pr-lines > div + div::before { content: "・"; color: var(--gold-dim); margin-right: 6px; }
.pr-lines .warn, .pr-lines b.warn { color: oklch(76% 0.15 35); }
.pr-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-flash { flex-basis: 100%; margin: 0; text-align: center; color: oklch(80% 0.13 40); font-weight: 700; }
/* 案A counter order: the counterers top to bottom, each with ▲▼ */
.pr.co .pr-lines { flex: 1 1 100%; flex-direction: column; align-items: center; }
.pr-confirm.co .pr-hint { flex: 1 1 100%; min-width: 0; text-align: center; }
.pr.co .pr-lines > div + div::before { content: none; }
.co-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.co-row { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 2px; border-radius: 4px; background: oklch(22% 0.02 60 / 0.8); box-shadow: inset 0 0 0 1px var(--gold-line); }
.co-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gold-hi); color: oklch(18% 0.02 60); font-size: 12px; }
.co-mv { min-width: 30px; min-height: 30px; border: 1px solid var(--gold-line); border-radius: 4px; background: oklch(28% 0.02 60); color: var(--text); font-size: 12px; cursor: pointer; }
.co-mv:hover:not(:disabled), .co-mv:focus-visible { background: oklch(38% 0.05 70); outline: none; box-shadow: 0 0 0 2px var(--gold-hi); }
.co-mv:disabled { opacity: 0.3; cursor: default; }
/* a confirm step reads left to right: what happens, then the buttons */
.pr-confirm { max-width: min(1080px, 100%); column-gap: 18px; }
.pr-confirm .pr-lines { justify-content: flex-start; flex: 1 1 380px; }
.pr-confirm .pr-hint { flex: 0 0 auto; }
/* 灯籠の精 / 僵尸公主: a long question on top that wraps (a phone would push it off the sides), then the notes and the choices */
.pr-confirm.lantern .pr-hint, .pr-confirm.kyonshi .pr-hint { flex: 1 1 100%; min-width: 0; text-align: center; }
.pr-confirm.lantern .pr-lines, .pr-confirm.kyonshi .pr-lines { justify-content: center; }
.pr-confirm.lantern .pr-btns, .pr-confirm.kyonshi .pr-btns { justify-content: center; }
.kbd-hint { color: var(--text-dim); font-size: 0.9em; }
.btn .kbd-hint { color: inherit; opacity: 0.75; }
@media (hover: none), (pointer: coarse) { .kbd-hint { display: none; } }
.violet { color: var(--violet); }
.legend { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; font-size: 11.5px; color: var(--text-dim); }
/* the legend swatches are the card diagram's cells as printed (10/25): dark cell with the primitive on it */
.lg { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 2px; margin-left: 4px; vertical-align: -2px; background: #2e2d32; box-shadow: 0 0 0 1px #9a979f; }
.lg::after { content: ""; display: block; }
.lg-attack::after { width: 7px; height: 7px; background: #e2523c; }
.lg-counter::after { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px #6fcf9e; }
.lg-blind { background: repeating-linear-gradient(45deg, #d9a441 0 2.5px, #1d1b19 2.5px 5px); }
.lg-gap::after { width: 9px; height: 9px; box-shadow: inset 0 0 0 1.5px var(--sym-amber); }

/* ------------------------------------------------------------ board overlays */

.rd { position: relative; pointer-events: none; }
.rd-btn {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0;
  pointer-events: auto; cursor: pointer; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(30% 0.03 45), oklch(14% 0.01 30));
  border: 1.5px solid var(--gold); color: var(--gold-hi);
  transform: rotate(var(--a)) translateY(-21cqw) rotate(calc(-1 * var(--a)));
  box-shadow: 0 6px 14px oklch(0% 0 0 / 0.6);
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast);
}
.rd-btn:hover { transform: rotate(var(--a)) translateY(-21cqw) rotate(calc(-1 * var(--a))) scale(1.12); }
.rd-btn.is-active { background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold)); color: var(--ink); }
.rd-btn.is-off { border-color: oklch(50% 0.02 260 / 0.7); color: oklch(62% 0.02 260); filter: saturate(0.3); opacity: 0.75; }
.rd-glyph { font-family: var(--font-mincho); font-weight: 800; font-size: 20px; line-height: 46px; }
.rd-cost {
  position: absolute; right: -5px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  font-size: 11px; line-height: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rd-cost.ok { background: var(--gold); color: var(--ink); }
.rd-cost.short { background: var(--vermilion); color: oklch(97% 0.01 85); }
.rd-btn[data-tip]:hover::after, .rd-btn[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  white-space: nowrap; padding: 3px 8px; border-radius: 3px; font-size: 12px; font-family: var(--font-gothic);
  background: oklch(10% 0.01 260 / 0.95); color: var(--text); border: 1px solid var(--gold-line); z-index: 10;
}

.fc { position: relative; pointer-events: none; }
.fc-ghost { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.55; container-type: size; }
/* the ghost turns through --r: the card rotates, its numbers counter-rotate (as on a piece) */
.fc-ghost .fu-sm { --fu-w: 56cqw; rotate: var(--r, 0deg); transition: rotate var(--t-mid) var(--ease-out); }
.fc-ghost .num { rotate: calc(-1 * var(--r, 0deg)); transition: rotate var(--t-mid) var(--ease-out); }
.fc-ghost:has(~ .fc-1:is(:hover, :focus-visible)) { --r: 90deg; }
.fc-ghost:has(~ .fc-2:is(:hover, :focus-visible)) { --r: 180deg; }
.fc-ghost:has(~ .fc-3:is(:hover, :focus-visible)) { --r: 270deg; }
.fc.fc-turn .fc-ghost { opacity: 0.92; }
.fc.from-1 .fc-ghost { --r: 90deg; }
.fc.from-2 .fc-ghost { --r: 180deg; }
.fc.from-3 .fc-ghost { --r: 270deg; }
.fc.fc-turn .fc-ghost:has(~ .fc-0:is(:hover, :focus-visible)) { --r: 0deg; }
.fc.fc-turn .fc-ghost:has(~ .fc-1:is(:hover, :focus-visible)) { --r: 90deg; }
.fc.fc-turn .fc-ghost:has(~ .fc-2:is(:hover, :focus-visible)) { --r: 180deg; }
.fc.fc-turn .fc-ghost:has(~ .fc-3:is(:hover, :focus-visible)) { --r: 270deg; }
.fc-btn {
  position: absolute; width: 42px; height: 42px; pointer-events: auto; cursor: pointer; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-dim)); border: 2px solid var(--board);
  box-shadow: 0 0 0 1.5px var(--gold), 0 6px 14px oklch(0% 0 0 / 0.6); transition: transform var(--t-fast) var(--ease-out);
}
.fc-btn:hover { transform: scale(1.14); }
.fc-arrow { position: absolute; inset: 11px 12px 13px; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 50% 70%, 0 100%); }
.fc-0 { left: calc(50% - 21px); top: -14px; }
.fc-1 { right: -14px; top: calc(50% - 21px); }
.fc-1 .fc-arrow { transform: rotate(90deg); }
.fc-2 { left: calc(50% - 21px); bottom: -14px; }
.fc-2 .fc-arrow { transform: rotate(180deg); }
.fc-3 { left: -14px; top: calc(50% - 21px); }
.fc-3 .fc-arrow { transform: rotate(270deg); }
.fc-btn:disabled { opacity: 0.4; filter: grayscale(1); cursor: not-allowed; }
.fc-btn:disabled:hover { transform: none; }
/* touch: the first tap shows that facing (ghost turned, its ranges on the board); the second tap commits */
.fc.pre-0 .fc-ghost, .fc.fc-turn.pre-0 .fc-ghost { --r: 0deg; opacity: 0.92; }
.fc.pre-1 .fc-ghost, .fc.fc-turn.pre-1 .fc-ghost { --r: 90deg; opacity: 0.92; }
.fc.pre-2 .fc-ghost, .fc.fc-turn.pre-2 .fc-ghost { --r: 180deg; opacity: 0.92; }
.fc.pre-3 .fc-ghost, .fc.fc-turn.pre-3 .fc-ghost { --r: 270deg; opacity: 0.92; }
.fc-btn.is-pre, .fc-btn.is-pre:hover { box-shadow: 0 0 0 3px var(--gold-hi), 0 0 18px oklch(85% 0.14 85 / 0.8); transform: scale(1.12); }

.pv { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.3cqw; padding-bottom: 5.5cqw; pointer-events: none; }
.pv-num {
  display: grid; place-items: center; min-width: 11cqw; height: 11cqw; padding: 0 1.4cqw; border-radius: 6cqw;
  font-family: var(--font-mincho); font-weight: 800; font-size: 8cqw; line-height: 1; color: oklch(78% 0.19 32);
  background: radial-gradient(closest-side, oklch(10% 0.01 30 / 0.92), oklch(10% 0.01 30 / 0.7) 70%, transparent);
  text-shadow: 0 0 0.6cqw oklch(10% 0 0);
}
.pv-num.heal { color: var(--jade); }
.pv-num { font-size: max(15px, 8cqw); min-width: max(22px, 11cqw); height: max(22px, 11cqw); }
.pv-tag { font-size: max(10.5px, 1.6cqw); font-weight: 700; padding: 0 max(3px, 0.8cqw); border-radius: 0.5cqw; }
.pv-tag.blind { background: var(--gold); color: var(--ink); }
.pv-tag.ally { background: var(--violet); color: var(--ink); }
.pv-after { font-size: max(11px, 1.7cqw); color: var(--text); background: oklch(10% 0.01 260 / 0.8); padding: 0 max(3px, 0.8cqw); border-radius: 0.5cqw; white-space: nowrap; }
.pv-stamp {
  position: absolute; top: 6%; padding: 0.2cqw 1.2cqw; border: 0.5cqw solid oklch(62% 0.2 30); border-radius: 0.8cqw;
  font-family: var(--font-mincho); font-weight: 800; font-size: max(13px, 3.6cqw); color: oklch(66% 0.2 30); background: oklch(95% 0.02 85 / 0.82);
  transform: rotate(-14deg);
}
.pv-self { justify-content: flex-end; padding-bottom: 0.6cqw; }
.pv-counter { font-size: max(11px, 2cqw); font-weight: 700; padding: 0.2cqw max(4px, 1cqw); border-radius: 0.6cqw; background: oklch(58% 0.18 30); color: oklch(97% 0.01 85); white-space: nowrap; }
.pv-counter.none { background: oklch(30% 0.02 260 / 0.9); color: var(--text-dim); }

/* -------------------------------------------------------------- right column */

.turn {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 6px; background: var(--lacquer);
  border: 1px solid oklch(45% 0.04 70 / 0.45); border-left: 4px solid var(--gold-dim);
}
.turn.o0 { border-left-color: var(--p0); }
.turn.o1 { border-left-color: var(--p1); }
.turn-round { font-size: 11px; letter-spacing: 0.25em; color: var(--text-dim); }
.turn-who { font-family: var(--font-mincho); font-weight: 800; font-size: 16px; line-height: 1.25; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.turn-seal { display: inline-grid; place-items: center; width: 22px; height: 22px; font-size: 13px; color: oklch(97% 0.01 85); }
.turn.o0 .turn-seal { background: var(--p0); border-radius: 1px; }
.turn.o1 .turn-seal { background: var(--p1); border-radius: 50%; }
.turn-phase { font-size: 12px; color: var(--gold); }
.turn-ctl { margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--gold); padding: 1px 6px; border-radius: 2px; align-self: flex-start; }
.turn.ox { border-left-color: var(--gold); }

.yy-detail { flex: 1 1 auto; min-height: 0; container-type: size; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; }
.dt { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.dt-empty { padding: 18px 10px; border: 1px dashed oklch(55% 0.03 80 / 0.35); border-radius: 6px; color: var(--text-dim); font-size: 12px; text-align: center; }
.dt-empty p { margin: 0; }
.dt-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; font-size: 11.5px; line-height: 1.35; }
.dt-unit .fu-lg { --fu-w: clamp(108px, calc((100cqh - 150px) * 0.8), 196px); }
.dt-status i { font-style: normal; color: var(--text-dim); margin-right: 3px; font-size: 11px; }
.dt-status b { font-family: var(--font-mincho); font-size: 15px; }
.dt-flags, .dt-note { flex-basis: 100%; text-align: center; color: var(--text-dim); font-size: 11px; line-height: 1.35; }
.dt-grave { align-items: stretch; }
.dt-grave h3 { margin: 0; font-family: var(--font-mincho); font-size: 15px; }
.dt-grave ol { margin: 0; padding-left: 20px; font-size: 13px; }
.dt-grave button { background: none; border: 0; padding: 1px 0; cursor: pointer; color: var(--text); text-decoration: underline dotted oklch(60% 0.03 80); }

.yy-log { flex: 0 0 auto; display: flex; flex-direction: column; }
.log:not(.is-open) .log-list { max-height: 132px; }
.log.is-open { position: absolute; right: 14px; bottom: 10px; width: min(420px, 60vw); max-height: min(70dvh, 620px); z-index: 30; box-shadow: 0 18px 50px oklch(0% 0 0 / 0.65); background: oklch(11% 0.012 260 / 0.97); }
.log { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; border-radius: 6px; background: oklch(12% 0.012 260 / 0.7); border: 1px solid oklch(40% 0.03 260 / 0.45); }
.log-head { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid oklch(40% 0.03 260 / 0.4); }
.log-head h3 { margin: 0; font-family: var(--font-mincho); font-size: 13px; letter-spacing: 0.3em; color: var(--gold-dim); }
.log-head button { background: none; border: 0; color: var(--text-dim); font-size: 11px; cursor: pointer; }
.log-head button:hover { color: var(--gold); }
.log-list { list-style: none; margin: 0; padding: 4px 10px 8px; overflow: auto; min-height: 0; flex: 1 1 auto; font-size: 12px; line-height: 1.5; }
.log-list li { padding: 2px 0; border-bottom: 1px solid oklch(35% 0.02 260 / 0.25); color: oklch(84% 0.015 85); }
.log:not(.is-open) .log-list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-list li.hl { color: var(--gold); font-weight: 700; margin-top: 3px; }
.log-list li.wr { color: oklch(78% 0.12 35); }
.log-list li.ctl { color: var(--ink); background: var(--gold); padding: 2px 6px; font-weight: 700; }
.log-list li.inh { color: var(--violet); }
.log-list li.fx { color: oklch(82% 0.08 305); }
.log-list li.reigu { color: oklch(82% 0.08 230); }
.log-list li.cfg { color: var(--gold-hi); background: oklch(32% 0.05 80 / 0.4); box-shadow: inset 3px 0 0 var(--gold); padding: 2px 6px 2px 9px; font-weight: 700; }
.log-list li.muted { color: var(--text-dim); }
.log:not(.is-open) .log-list { overflow: hidden; }
.log-list li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------ result */

.yy-result {
  position: absolute; left: 50%; top: 50%; z-index: 8; width: min(100cqw, 100cqh); aspect-ratio: 1; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 1.2%;
  background: radial-gradient(closest-side, oklch(8% 0.01 260 / 0.78), oklch(8% 0.01 260 / 0.62) 75%, oklch(8% 0.01 260 / 0.35));
}
.yy-result[hidden] { display: none; }
.yy-result-mark {
  font-family: var(--font-mincho); font-weight: 800; font-size: min(34cqh, 250px); line-height: 1;
  color: var(--gold-hi); text-shadow: 0 0 3px oklch(40% 0.08 70), 0 0 40px oklch(80% 0.12 85 / 0.55), 6px 8px 0 oklch(10% 0.01 260 / 0.8);
}
.yy-result[data-tone="lose"] .yy-result-mark { color: oklch(66% 0.07 30); text-shadow: 0 0 30px oklch(50% 0.15 30 / 0.5), 6px 8px 0 oklch(8% 0.01 260 / 0.85); }
.yy-result[data-tone="draw"] .yy-result-mark, .yy-result[data-tone="watch"] .yy-result-mark { color: var(--text); }
.yy-result-mark.is-pair { font-size: min(22cqh, 170px); letter-spacing: -0.04em; }
.yy-result-text { margin: 0; font-family: var(--font-mincho); font-size: 17px; color: var(--text); text-align: center; padding: 0 12px; }
.yy-result-how { margin: -4px 0 0; font-family: var(--font-mincho); font-weight: 800; font-size: 20px; letter-spacing: 0.12em; color: var(--gold-hi); text-wrap: balance; text-align: center; max-width: 92%; }
.yy-result-how[hidden] { display: none; }
.yy-result-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* the numbers for comparing rule variants: small, under the result, never covering the buttons */
.yy-result:has(.yy-rs) .yy-result-mark { font-size: min(18cqh, 140px); }
.yy-result:has(.yy-rs) .yy-result-mark.is-pair { font-size: min(13cqh, 100px); }
.yy-result-stats { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 94%; font-size: 13px; color: var(--text); }
.yy-result-stats:empty { display: none; }
.yy-rs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; margin: 0; }
/* 対戦の数字: a button in the panel; opened, a sheet over the whole result (the square has no room for eight rows) */
.yy-rs-more > summary { cursor: pointer; list-style: none; padding: 3px 12px; border: 1px solid var(--gold-line); border-radius: 999px; font-size: 12.5px; color: var(--gold-hi); }
.yy-rs-more > summary::-webkit-details-marker { display: none; }
.yy-rs-more[open] { position: absolute; inset: 4%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; overflow: auto; padding: 12px;
  background: oklch(11% 0.012 260 / 0.97); border: 1px solid var(--gold-line); border-radius: 8px; box-shadow: 0 18px 40px oklch(0% 0 0 / 0.6); }
.yy-rs-more[open] > summary { align-self: flex-end; font-size: 0; padding: 4px 12px; }
.yy-rs-more[open] > summary::after { content: "閉じる"; font-size: 12.5px; }
.yy-rs-sides { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.yy-rs-sides th, .yy-rs-sides td { padding: 3px 12px; text-align: center; border-bottom: 1px solid oklch(100% 0 0 / 0.12); }
.yy-rs-sides tbody th { text-align: left; color: var(--text-dim, oklch(75% 0.02 80)); font-weight: 400; }
.yy-rs-sides td.is-more { color: var(--gold-hi); font-weight: 800; }
.yy-rs div { display: flex; gap: 6px; }
.yy-rs dt { color: var(--text-dim, oklch(75% 0.02 80)); }
.yy-rs dd { margin: 0; font-weight: 700; }
.yy-rs-steps { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.yy-rs-steps th, .yy-rs-steps td { padding: 1px 8px; text-align: center; border-bottom: 1px solid oklch(100% 0 0 / 0.12); }
.yy-rs-steps th[scope="row"], .yy-rs-steps thead th:first-child { color: var(--text-dim, oklch(75% 0.02 80)); font-weight: 400; }
.yy-rs-line { display: flex; gap: 6px; width: min(560px, 100%); }
/* wrapped, not cut: on a phone the line was 「ルール: 10/3テスト案 | 第6ラウンド 後手の手…」 */
.yy-rs-line textarea { resize: none; line-height: 1.45; overflow: auto; field-sizing: content; min-height: 3.2em; max-height: 9em; }
.yy-rs-line { align-items: center; }
.yy-rs-line textarea { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 4px 6px; color: var(--text); background: oklch(12% 0.01 260 / 0.85); border: 1px solid oklch(100% 0 0 / 0.18); border-radius: 4px; }
.yy-rs-line .btn { white-space: nowrap; }
.yy.is-over .bd { filter: brightness(0.7) saturate(0.7); }

/* ------------------------------------------------------------------ dialogs */

.yy-dialog {
  max-width: min(760px, 94vw); padding: 0; border-radius: 8px; color: var(--text);
  background: linear-gradient(170deg, oklch(21% 0.02 50), oklch(14% 0.012 40));
  border: 1px solid var(--gold-line); box-shadow: 0 30px 80px oklch(0% 0 0 / 0.7), inset 0 0 0 4px oklch(14% 0.012 40), inset 0 0 0 5px var(--gold-line);
}
.yy-dialog::backdrop { background: oklch(8% 0.01 260 / 0.78); }
.yy-sheet { width: min(460px, calc(100vw - 16px)); max-height: min(86dvh, 720px); margin: auto auto 8px; overflow: auto; }
.yy-sheet[open] { display: block; }
.sheet { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px calc(12px + env(safe-area-inset-bottom)); }
.sheet .dt { height: auto; }
.sheet .fu-lg { --fu-w: min(230px, 62vw); }
.sheet .dt-grave ol { display: flex; flex-direction: column; gap: 2px; }
.sheet .dt-grave button { min-height: 40px; padding: 6px 2px; font-size: 15px; text-align: left; width: 100%; }
.sheet-btns { display: flex; justify-content: flex-end; gap: 8px; }
.sheet-btns .btn { min-height: 40px; padding: 8px 16px; }
.setup { padding: 22px 26px 20px; }
.setup h2 { margin: 0 0 14px; font-family: var(--font-mincho); font-weight: 800; font-size: 22px; letter-spacing: 0.12em; }
.setup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.setup-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.setup-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
select, input[type="number"], input[type="text"] {
  font: inherit; font-size: 14px; color: var(--text); background: oklch(11% 0.01 260); border: 1px solid oklch(45% 0.03 70 / 0.6);
  border-radius: 4px; padding: 6px 8px;
}
select:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* -------------------------------------------------------------- narrower */

@media (max-width: 1279px) {
  :root { --side-l: 150px; --side-r: 270px; --self-h: 178px; }
  .np { gap: 10px; }
  .np-stat b { font-size: 21px; }
}

@media (max-width: 1100px) {
  :root { --self-h: 172px; --side-l: 150px; }
  .yy {
    height: auto; min-height: 100dvh; overflow: visible;
    grid-template-columns: var(--side-l) minmax(0, 1fr);
    grid-template-rows: auto minmax(430px, calc(100dvh - 124px - var(--self-h))) auto auto;
    grid-template-areas: "top top" "left center" "self self" "right right";
  }
  .yy-top { flex-wrap: wrap; row-gap: 4px; padding: 6px 12px; }
  .yy-opp { order: 2; flex-basis: 100%; justify-content: flex-start; }
  .yy-slot-tools { margin-left: auto; }
  .yy-right { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 330px; padding: 10px 14px 18px; }
  .yy-detail { grid-column: 1; grid-row: 1; }
  .yy-log { grid-column: 2; grid-row: 1; }
  .log:not(.is-open) .log-list { max-height: 290px; }
  .yy-self {
    position: sticky; bottom: 0; z-index: 30; height: var(--self-h);
    grid-template-columns: 250px minmax(0, 1fr) 150px;
    background: linear-gradient(180deg, transparent, oklch(10% 0.012 260 / 0.94) 40%);
  }
  .yy-self-plate .np { gap: 7px; padding: 6px 8px 6px 6px; flex-wrap: wrap; row-gap: 2px; }
  .yy-self-plate .np-stat b { font-size: 19px; }
  .yy-self-plate .np-chips { flex-basis: 100%; justify-content: start; padding-left: 40px; }
  /* the prompt sits a little higher and a picked card lifts a little less: the card no longer covers its buttons */
  :root { --prompt-h: 76px; --prompt-gap: 20px; }
  .hand-card:hover, .hand-card:focus-visible { transform: translateX(var(--x)) translateY(-12px) rotate(0deg) scale(1.04); }
  .hand-card.is-selected { transform: translateX(var(--x)) translateY(-10px) rotate(0deg) scale(1.02); }
  .hand-card.is-marked { transform: translateX(var(--x)) translateY(-10px) rotate(0deg); }
  .btn-end { font-size: 16px; padding: 11px 16px; letter-spacing: 0.12em; }
  .yy-actions { padding: 0 10px 12px 0; }
  /* the board can reach the screen's right edge here (tablets held upright): that column's menu moves inwards */
  .rd[data-x="2"] { translate: -22px 0; }
}

/* short screens (laptops at 720-800px): give the detail card the room the log does not need */
@media (max-height: 820px) and (min-width: 1101px) {
  /* five whole lines (each 1.5 x 12px + 4px padding + 1px rule) */
  .log:not(.is-open) .log-list { max-height: calc(5 * 23px + 12px); }
  .dt-unit .fu-lg { --fu-w: clamp(136px, calc((100cqh - 150px) * 0.8), 196px); }
}

/* ------------------------------------------------------------ phone, portrait */
/* One column: header, opponent, a slim status row, the board edge to edge,
   the prompt under it, then (pinned to the bottom) my plate and a scrolling
   hand row. The detail card and the log follow below the fold.
   Phones held sideways share these compact pieces; the landscape block at
   the end lays them out in two columns. */

@media (max-width: 700px), (max-height: 520px) and (min-aspect-ratio: 4/3) {
  :root { --prompt-h: 0px; --mob-self-h: 226px; }
  body { overflow-x: hidden; }
  .yy {
    display: flex; flex-direction: column; height: auto; min-height: 100dvh; overflow: visible; overflow-x: clip;
  }
  .yy > * { min-width: 0; }

  /* header: brand + tools on one wrapped row, the opponent plate under it */
  .yy-top { order: 1; flex-wrap: wrap; gap: 4px 6px; padding: 4px 6px 2px; }
  .yy-slot-header { order: 1; min-width: 0; }
  .yy-slot-tools { order: 2; flex: 1 1 0; min-width: 0; }
  .yy-opp { order: 3; flex: 1 1 100%; justify-content: space-between; gap: 6px; }
  .brand { gap: 6px; }
  .brand-mark { transform: scale(0.8); transform-origin: left center; }
  .brand-name { font-size: 15px; }
  .brand-name small, .brand-sub, .room-seats, .room-you { display: none; }
  .room-code { font-size: 15px; letter-spacing: 0.1em; }
  .tools { flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; }
  .tools .btn { padding: 3px 8px; font-size: 11.5px; }
  /* the "+N項目変更" badge stays in the settings panel; here it would push the board down a row */
  .yy-slot-tools .rules-badge { display: none; }

  /* name plates: one compact line */
  .np { gap: 8px; padding: 3px 8px 3px 4px; box-shadow: none; flex: 1 1 auto; }
  .np-seal { width: 22px; height: 22px; font-size: 12px; }
  .np-name { font-size: 12px; max-width: 7.5em; }
  /* labels: 10px is the smallest size that stays readable on a phone */
  .np-turn, .np-ctl { font-size: 10px; }
  .np-stat i { font-size: 10px; letter-spacing: 0; }
  .np-stat b { font-size: 17px; }
  .np-stat small { font-size: 10px; }
  .np-chips { gap: 1px; }
  .chip { width: 7px; height: 7px; }
  .ohand { height: 34px; padding: 0 18px 0 2px; }
  .ohand-card { width: 16px; margin-left: -8px; }
  .ohand-card .fu-back { width: 20px; }
  .ohand-n { font-size: 12px; }

  /* status row: opponent piles | whose turn | my piles, as plain counts */
  .yy-left { order: 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 8px; }
  .yy-piles-opp { order: 1; }
  .yy-turn { order: 2; flex: 1 1 auto; margin: 0; display: flex; justify-content: center; min-width: 0; }
  .yy-piles-self { order: 3; }
  .piles { display: flex; gap: 8px; }
  .yy-left .piles { gap: 6px; align-items: baseline; white-space: nowrap; }
  .yy-left .pile { flex-direction: row; gap: 0; }
  .yy-left .pile-stack { display: none; }
  .yy-left .pile-n { gap: 2px; white-space: nowrap; }
  .yy-left .pile-n b { font-size: 13px; }
  .yy-left .pile-n i { font-size: 10px; letter-spacing: 0; }
  /* the grave count is a button: a finger-sized hit area around the small text */
  .yy-left .pile-grave { position: relative; padding: 0 4px; margin: 0 -4px; border-radius: 4px; }
  .yy-left .pile-grave::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 42px; transform: translateY(-50%); }
  .yy-left .pile-grave .pile-n { text-decoration: underline dotted oklch(60% 0.03 80); text-underline-offset: 3px; }
  .yy-piles-opp .piles::before, .yy-piles-self .piles::before { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
  .yy-piles-opp .piles::before { content: "相手"; }
  .yy-piles-self .piles::before { content: "自分"; }
  /* whose turn is already on the name plates; this line only names it and the phase */
  .turn { flex-direction: row; align-items: center; gap: 5px; padding: 1px 7px; border-left-width: 3px; min-width: 0; box-shadow: none; }
  /* the round stays: how far the game has gone is what the 10/3 tests measure */
  .turn-round { font-size: 10px; letter-spacing: 0; white-space: nowrap; flex-shrink: 0; }
  /* the seal says whose turn (先/後 in the seat colour); the name and the everyday 行動中 do not fit beside the round */
  .turn-name:not(.is-you), .turn-phase.is-plain { display: none; }
  /* 「制圧中」 alone: with the name and 占拠 it ran over the piles on its right */
  .turn-ctl-who, .turn-ctl-occ { display: none; }
  /* owner choices with several answers: two (or three) to a row, so the board above keeps its size */
  .pr.lantern .pr-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .pr.kyonshi .pr-btns { display: grid; grid-template-columns: repeat(3, 1fr); }
  .pr.lantern .pr-btns, .pr.kyonshi .pr-btns { width: 100%; gap: 5px; }
  .pr.lantern .pr-btns .btn, .pr.kyonshi .pr-btns .btn { padding: 5px 6px; font-size: 12px; line-height: 1.3; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  .turn-who { font-family: var(--font-gothic); font-weight: 700; font-size: 11px; flex-wrap: nowrap; white-space: nowrap; gap: 3px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .turn-seal { width: 14px; height: 14px; font-size: 9px; }
  .turn-phase { font-size: 10px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .turn-ctl { margin: 0; font-size: 10px; white-space: nowrap; flex-shrink: 0; }
  /* 対局終了 / マリガン(両者) stay whole; the longer result text beside them gives way */
  .turn.ox .turn-who { flex-shrink: 0; }

  /* the board takes the full width */
  /* contents: the prompt becomes a child of the page column, so it can stick above my side */
  .yy-center { display: contents; }
  .yy-recap { display: block; order: 2; margin: 2px 6px 0; pointer-events: auto; }
  .yy-recap:empty { display: none; }
  /* the result panel sits on the board: the pasteable line itself would push もう一戦 off it, the copy button is enough */
  .yy-rs-line { justify-content: center; }
  .yy-rs-line textarea { display: none; }
  .yy-rs-line textarea.is-shown { display: block; }
  .recap { display: flex; gap: 6px; align-items: baseline; width: 100%; padding: 4px 8px; text-align: left; font: inherit; font-size: 11.5px; line-height: 1.4; color: var(--text);
    background: oklch(16% 0.014 260 / 0.92); border: 1px solid var(--gold-line); border-left: 3px solid var(--gold); border-radius: 4px; cursor: pointer; }
  .recap b { flex: 0 0 auto; color: var(--gold-hi); font-size: 11px; }
  .recap span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .yy-slot-notice { order: 3; }
  .yy-board-wrap { order: 3; flex: 0 0 auto; margin: 2px 4px 0; container-type: inline-size; display: block; position: relative; z-index: 5; }
  /* edge to edge, unless the prompt and my pinned side would then cover its bottom row: it
     shrinks (not below a floor) so the whole board shows above them. --board-top (where the
     board starts on the page) and --prompt-live come from table.ts */
  .yy-board-wrap { --board-w: min(100%, max(min(100%, 200px), calc(100svh - var(--board-top, 0px) - var(--prompt-live, 0px) - var(--mob-self-h) - 12px))); }
  .yy-board { width: var(--board-w); margin: 0 auto; }
  .yy-result { width: var(--board-w); }
  /* the prompt sticks just above my pinned side, so its buttons are never under it */
  .yy-prompt { order: 3; position: sticky; inset: auto 0 var(--mob-self-h) 0; z-index: 29; margin: 6px 6px 0; pointer-events: auto; }
  .pr { box-shadow: 0 -6px 16px oklch(0% 0 0 / 0.5); }
  .pr { max-width: 100%; width: 100%; padding: 6px 8px; gap: 4px 8px; }
  .pr-hint { font-size: 12px; }
  .pr-lines { font-size: 11.5px; }
  .pr-confirm .pr-lines { justify-content: center; flex-basis: 100%; }
  .kbd-hint { display: none; }
  .pr-btns .btn { padding: 6px 10px; font-size: 13px; }
  /* the range colours are on the board as soon as a piece is chosen: say what they are, on a line of their own */
  .legend { display: flex; flex-wrap: wrap; margin: 3px 0 0; gap: 2px 6px; font-size: 10.5px; line-height: 1.3; }

  /* radial menu and facing arrows sized for fingers on a narrow board */
  .rd-btn { width: 40px; height: 40px; margin: -20px 0 0 -20px; transform: rotate(var(--a)) translateY(-17cqw) rotate(calc(-1 * var(--a))); }
  .rd-btn:hover { transform: rotate(var(--a)) translateY(-17cqw) rotate(calc(-1 * var(--a))); }
  .rd-glyph { font-size: 17px; line-height: 40px; }
  /* edge columns: pull the menu toward the middle so no button leaves the screen */
  .rd[data-x="0"] { translate: 22px 0; }
  .rd[data-x="2"] { translate: -22px 0; }
  .fc[data-x="0"] .fc-3 { left: -2px; }
  .fc[data-x="2"] .fc-1 { right: -2px; }
  /* 44px: a finger's width. Top and bottom rows keep their outer arrow inside the board */
  .fc-btn { width: 44px; height: 44px; }
  .fc-arrow { inset: 12px 13px 14px; }
  .fc-0, .fc-2 { left: calc(50% - 22px); }
  .fc-1, .fc-3 { top: calc(50% - 22px); }
  .fc[data-row="1"] .fc-0 { top: 2px; }
  .fc[data-row="3"] .fc-2 { bottom: 2px; }
  .fc-btn:hover { transform: none; }

  /* ordering counters (the other side's turn, the hand is not in play): my side folds to its
     plate, so the board, the order and the counterers all fit on one screen */
  .yy[data-prompt="counterOrder"] { --mob-self-h: 64px; }
  .yy[data-prompt="counterOrder"] .yy-hand { display: none; }

  /* my side, pinned to the bottom: plate + end turn, then the hand as a row */
  .yy-self {
    order: 4; position: sticky; bottom: 0; z-index: 30; height: var(--mob-self-h); overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "plate actions" "hand hand"; align-items: center;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); gap: 2px 6px;
    background: linear-gradient(180deg, oklch(10% 0.012 260 / 0.85), oklch(10% 0.012 260 / 0.97) 30%);
    border-top: 1px solid var(--gold-line);
  }
  .yy-self-plate { grid-area: plate; padding: 0; min-width: 0; }
  .yy-self-plate .np { flex-wrap: nowrap; }
  .yy-self-plate .np-chips { flex-basis: auto; padding-left: 0; }
  /* my own plate: "あなた" instead of the full name, which ターン終了 and 投了 squeezed down to two letters */
  .yy-self-plate .np { gap: 6px; }
  .yy-self-plate .np-full { display: none; }
  .yy-self-plate .np-short { display: inline; }
  .yy-self-plate .np-who { flex-shrink: 0; }
  .yy-actions { grid-area: actions; flex-direction: row; align-items: center; gap: 6px; padding: 0; }
  .yy-extra { flex-wrap: nowrap; gap: 4px; }
  .yy-extra .btn { padding: 5px 6px; font-size: 12px; }
  .btn-end { font-size: 14px; letter-spacing: 0.02em; padding: 8px 9px; box-shadow: inset 0 0 0 2px var(--board), inset 0 0 0 3px var(--gold-line); }

  .yy-hand { grid-area: hand; height: auto; position: relative; }
  /* more cards off the edge: a fade and a chevron say the row scrolls */
  .yy-hand::before, .yy-hand::after { content: ""; position: absolute; top: 10px; bottom: 0; width: 28px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity var(--t-fast);
    display: grid; place-items: center; font-size: 22px; font-weight: 800; color: var(--gold-hi); }
  .yy-hand::before { left: 0; content: "‹"; background: linear-gradient(90deg, oklch(10% 0.012 260 / 0.95), transparent); }
  .yy-hand::after { right: 0; content: "›"; background: linear-gradient(270deg, oklch(10% 0.012 260 / 0.95), transparent); }
  .yy-hand.more-l::before, .yy-hand.more-r::after { opacity: 1; }
  .hand { position: static; inset: auto; container-type: normal; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 12px 2px 4px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .hand::-webkit-scrollbar { display: none; }
  .hand.is-empty, .hand.is-watch { display: flex; justify-content: center; padding: 10px; }
  .hand-card { position: relative; left: auto; bottom: auto; margin: 0; flex: 0 0 auto; width: auto; transform: none; scroll-snap-align: start; }
  .hand-card .fu { --fu-w: 104px; --lines: 3; }
  .hand-card:hover, .hand-card:focus-visible { transform: none; }
  .hand-card.is-selected, .hand-card.is-marked { transform: translateY(-9px); }
  .hand-seal { width: 38px; height: 38px; margin-left: -19px; font-size: 22px; }

  /* the detail card and the log follow below */
  .yy-right { order: 5; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 320px auto; gap: 8px; padding: 10px 8px 20px; }
  .yy-detail, .yy-log { grid-column: 1; grid-row: auto; }
  .log:not(.is-open) .log-list { max-height: 220px; }
  .log.is-open { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 70dvh; }

  .yy-result-mark { font-size: min(30cqw, 160px); }
  .yy-result-mark.is-pair { font-size: min(22cqw, 120px); }
  .yy-result-how { font-size: 16px; }
}

@media (max-width: 700px) and (max-height: 760px) and (min-height: 521px), (max-width: 700px) and (max-height: 760px) and (max-aspect-ratio: 4/3) {
  :root { --mob-self-h: 182px; }
  /* short phone screens: the status row shrinks to one thin line (turn, phase, control, piles) */
  .yy-left { padding: 0 8px; gap: 4px; min-height: 17px; }
  .yy-left .pile-n b { font-size: 12px; }
  .yy-left .pile-n i, .yy-piles-opp .piles::before, .yy-piles-self .piles::before { font-size: 10px; }
  .yy-left .piles { gap: 5px; }
  .turn { padding: 0 6px; gap: 4px; }
  .turn-who { font-size: 10.5px; }
  .turn-seal { width: 12px; height: 12px; font-size: 8px; }
  .turn-phase { font-size: 10px; }
  .turn-ctl { font-size: 10px; padding: 0 4px; }
  .turn-ctl-who, .turn-ctl-occ { display: none; }
  .yy-opp { gap: 4px; }
  .ohand { height: 26px; }
  .ohand-card .fu-back { width: 16px; }
  .brand-mark { transform: scale(0.72); }
  .tools .btn { padding: 2px 7px; }
  .yy-board-wrap { margin-top: 1px; }
  .hand { padding-top: 9px; }
  /* a smaller card, not a zoomed one: its text keeps its 10px floor */
  .hand-card .fu { --fu-w: 86px; }
  .yy-top { padding-top: 2px; padding-bottom: 0; row-gap: 2px; }
  .yy-self { padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom)); }
  .np { padding-top: 1px; padding-bottom: 1px; }
  /* my name on one line: a second line plus 制圧中 made the plate tall enough to push the hand out of the bar */
  .yy-self-plate .np-name { -webkit-line-clamp: 1; }
  .np-stat b { font-size: 15px; }
  .btn-end { padding: 6px 10px; }
  .pr { padding: 4px 8px; }
  .pr-hint { font-size: 11px; line-height: 1.35; }
  .pr-btns .btn { padding: 4px 10px; }
  .yy-prompt { margin-top: 3px; }
}

/* ---------------------------------------------------------- phone, landscape */
/* A phone on its side: the board fills the height on the left; the right
   column stacks opponent, status, prompt, my hand and my plate so nothing
   needs scrolling. The detail card and the log follow below the fold. */

@media (max-height: 520px) and (min-aspect-ratio: 4/3) {
  :root { --land-board: min(100dvh, 54vw); }
  .yy {
    display: grid; height: auto; min-height: 0; overflow: visible; overflow-x: clip;
    grid-template-columns: var(--land-board) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "board top" "board left" "board notice" "board prompt" "board self" "right right";
  }
  .yy-center { display: contents; }
  .yy-recap { display: none; }
  .yy-top { grid-area: top; padding: 3px 6px 0; gap: 2px 6px; }
  .yy-left { grid-area: left; padding: 1px 6px; min-height: 20px; }
  .yy-slot-notice { grid-area: notice; }
  .yy-board-wrap {
    grid-area: board; align-self: start; height: 100dvh; width: var(--land-board); margin: 0; padding: 4px;
    position: sticky; top: 0; container-type: size; display: grid; place-items: center; z-index: 5;
  }
  .yy-board { width: min(100cqw, 100cqh); }
  .yy-prompt { grid-area: prompt; position: relative; inset: auto; margin: 2px 6px 0; z-index: 6; }
  .pr { box-shadow: none; padding: 4px 8px; }
  .pr-hint { font-size: 11.5px; line-height: 1.35; }
  .pr-lines { font-size: 11px; }
  .pr-btns .btn { padding: 4px 10px; font-size: 12.5px; }
  .yy-self {
    grid-area: self; position: relative; bottom: auto; height: auto; min-height: 0; overflow: hidden; z-index: 4;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "hand hand" "plate actions";
    padding: 0 6px calc(3px + env(safe-area-inset-bottom)); gap: 2px 6px; background: none; border-top: 0;
  }
  .yy-hand { align-self: stretch; min-height: 0; container-type: size; }
  .hand { height: 100%; align-items: flex-end; padding: 8px 2px 2px; }
  /* the card shrinks with the height (a 104px card is 146px tall) */
  .hand-card .fu { --fu-w: 94px; }
  .hand-card.is-selected, .hand-card.is-marked { transform: translateY(-6px); }
  .yy-right { grid-area: right; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-rows: 300px; }
  .yy-detail { grid-column: 1; grid-row: 1; }
  .yy-log { grid-column: 2; grid-row: 1; }
  /* the board sits at the screen's left edge: the left column's menu still moves inwards */
  .rd[data-x="2"] { translate: none; }
  .yy-result { width: min(100cqw, 100cqh); }
}
/* narrow sideways phones (SE, 740x360): the right column is about 300px wide */
@media (max-height: 520px) and (min-aspect-ratio: 4/3) and (max-width: 760px) {
  .brand-name { display: none; }
  .tools { flex-wrap: nowrap; }
  .tools .btn { padding: 2px 6px; font-size: 10.5px; }
  .np { gap: 6px; padding-right: 6px; }
  .np-who { min-width: 3.2em; }
  .np-chips { display: none; }
  .yy-left { gap: 4px; padding: 1px 4px; }
  .yy-piles-opp .piles::before, .yy-piles-self .piles::before { display: none; }
  .yy-left .pile-n i { font-size: 0; letter-spacing: 0; }
  .yy-left .pile-n i::after { font-size: 9px; }
  .yy-left .pile-deck .pile-n i::after { content: "山"; }
  .yy-left .pile-grave .pile-n i::after { content: "墓"; }
  .turn { padding: 0 5px; }
  .btn-end { padding: 6px 8px; font-size: 13px; letter-spacing: 0.04em; }
}
@media (max-height: 440px) and (min-aspect-ratio: 4/3) { .hand-card .fu { --fu-w: 90px; } }
@media (max-height: 380px) and (min-aspect-ratio: 4/3) { .hand-card .fu { --fu-w: 77px; } .yy-top .ohand { display: none; } }
@media (max-height: 340px) and (min-aspect-ratio: 4/3) { .hand-card .fu { --fu-w: 64px; --lines: 2; } .np { gap: 4px; } .np-stat b { font-size: 15px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* the race to 制圧 at the head of the idle prompt: the opponent's check reads as a warning */
.race-note { font-weight: 800; padding: 0.1em 0.5em; border-radius: 0.3em; margin-right: 0.3em; white-space: nowrap; }
.race-note.is-danger { background: var(--sym-verm); color: oklch(98% 0.01 85); }
.race-note.is-good { background: var(--gold); color: var(--ink); }
.race-note.is-near { color: var(--gold-hi); border: 1px solid var(--gold-line); }
@media (max-width: 700px) { .race-note { white-space: normal; display: inline-block; margin-bottom: 0.2em; } }

/* 今なにをする場面か (10/17): the step label that opens the prompt */
.pr-step {
  display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 999px; vertical-align: 1px;
  font-family: var(--font-gothic, inherit); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap;
}
.pr-hint b.pr-step.is-you { font-family: inherit; color: #1a1408; background: var(--gold-hi); }
.pr-hint b.pr-step.is-opp { font-family: inherit; color: var(--paper, #efe6d2); background: oklch(40% 0.03 260); }

/* the opening mulligan: a panel of its own over the empty board, the hand large */
.yy-board { position: relative; }
.yy[data-prompt="mulligan"] .yy-prompt { display: none; }
.yy[data-prompt="mulligan"] .yy-hand .hand { visibility: hidden; }
.mull {
  position: absolute; left: 0; right: 0; top: 0; min-height: 100%; z-index: 12; container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 14px; border-radius: 10px; text-align: center;
  background: oklch(13% 0.012 60 / 0.92); box-shadow: inset 0 0 0 1px var(--gold-line), 0 18px 40px oklch(0% 0 0 / 0.5);
  backdrop-filter: blur(3px);
}
.mull-step { margin: 0; font-size: 12px; letter-spacing: 0.3em; color: var(--gold-dim); }
.mull-title { margin: 0; font-family: var(--font-mincho); font-size: clamp(22px, 6.5cqw, 34px); color: var(--gold-hi); letter-spacing: 0.08em; }
.mull-lead { margin: 0; max-width: 30em; font-size: clamp(13px, 3.3cqw, 15px); line-height: 1.6; text-wrap: balance; }
.mull-lead b { color: var(--gold-hi); }
.mull-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 2.4cqw; width: 100%; margin: 6px 0 2px; }
.mull-card { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; transition: transform var(--t-fast, 0.15s); }
.mull-card .fu { --fu-w: min(150px, 17.4cqw); --lines: 4; }
.mull-card:hover { transform: translateY(-3px); }
.mull-card.is-marked { transform: translateY(-6px); }
.mull-card.is-marked .fu { filter: brightness(0.55) saturate(0.6); box-shadow: 0 0 0 3px var(--vermilion), 0 10px 22px oklch(0% 0 0 / 0.55); }
.mull-seal {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%; rotate: -8deg; pointer-events: none;
  padding: 4px 8px; border: 2px solid var(--vermilion); border-radius: 4px; background: oklch(15% 0.02 30 / 0.85);
  color: oklch(78% 0.15 35); font-weight: 700; font-size: clamp(12px, 3cqw, 15px); white-space: nowrap; letter-spacing: 0.1em;
}
.mull-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mull-btns .btn { min-height: 44px; padding-inline: 18px; font-size: 15px; }
.mull-note { margin: 0; font-size: 12px; color: var(--muted, #9a927f); }
@container (max-width: 520px) {
  .mull-cards { gap: 10px 3cqw; }
  .mull-card .fu { --fu-w: 28cqw; --lines: 3; }
}
/* phones: the board is empty during the mulligan, so the panel takes its place in the flow
   (it may be taller than the board) and my side waits below it */
@media (max-width: 700px), (max-height: 520px) and (min-aspect-ratio: 4/3) {
  .yy[data-prompt="mulligan"] .yy-board { aspect-ratio: auto; }
  .yy[data-prompt="mulligan"] .yy-board .bd { display: none; }
  .yy[data-prompt="mulligan"] .yy-self { display: none; }
  .yy[data-prompt="mulligan"] .mull { position: static; min-height: 0; padding: 14px 10px 16px; gap: 8px; }
}
/* landscape phones: one row of five, so the buttons stay on screen */
@media (max-height: 520px) and (min-aspect-ratio: 4/3) {
  .yy[data-prompt="mulligan"] .mull-card .fu { --fu-w: 17.5cqw; --lines: 3; }
  .yy[data-prompt="mulligan"] .mull { gap: 6px; padding: 10px 10px 12px; }
  .yy[data-prompt="mulligan"] .mull-title { font-size: 22px; }
  .yy[data-prompt="mulligan"] .mull-note { display: none; }
}

/* 敵味方の赤青をはっきり (10/18): my side is always blue, the other red (the seat colours swap
   for a 後手 viewer), and a piece wears its side's colour as a frame and a pool of light */
.yy[data-viewer="1"] { --p0: oklch(62% 0.2 28); --p1: oklch(64% 0.17 252); }
.yy:not([data-viewer="1"]) { --p0: oklch(64% 0.17 252); --p1: oklch(62% 0.2 28); }
.pc::before {
  content: ""; position: absolute; inset: 4%; border-radius: 12%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--own) 55%, transparent), color-mix(in oklch, var(--own) 18%, transparent) 70%, transparent);
}
.pc .fu-sm {
  box-shadow: 0 0 0 0.09em var(--own), 0 0 0 0.15em oklch(10% 0 0 / 0.7), 0 0.4em 0.7em -0.2em oklch(0% 0 0 / 0.75), 0 0 1.4em 0.05em color-mix(in oklch, var(--own) 80%, transparent);
}
.pc-cube { width: 1.4em; height: 1.4em; left: -0.6em; bottom: -0.6em; }
/* 耐久 now (10/18): an upright tag at the top left of the cell, red once the piece is hurt */
.pc-hp {
  position: absolute; left: 2.5cqw; top: 2.5cqh; z-index: 3; pointer-events: none;
  display: inline-flex; align-items: baseline; gap: 0.6cqw; padding: 0.4cqw 2cqw 0.6cqw; border-radius: 2cqw;
  font-size: max(9px, 6.5cqw); font-weight: 700; line-height: 1.1; white-space: nowrap;
  color: var(--ink); background: oklch(94% 0.03 150); box-shadow: 0 0 0 1px oklch(25% 0.02 150 / 0.8), 0 0.5cqw 1.5cqw oklch(0% 0 0 / 0.5);
}
.pc-hp b { font-size: max(13px, 11cqw); font-variant-numeric: tabular-nums; }
.pc-hp.is-hurt { color: #fff; background: oklch(55% 0.2 28); }
.pc-hp.is-over { background: oklch(88% 0.12 95); }
.pc-free { top: 20cqh; }
/* 10/18 スマホで遊んで: the 詳細 button only where the detail panel is off screen */
.pr-peek { display: none; }
@media (max-width: 700px), (max-height: 520px) and (min-aspect-ratio: 4/3) {
  .pr-peek { display: inline-flex; }
  /* with a チェック badge the round gives way, so 「あなたの番」 is never cut to 「あな」 */
  .turn:has(.turn-ctl) .turn-round { display: none; }
  .turn-who { flex-shrink: 0; }
  /* a short prompt keeps the board large: the recap on one line, the how-to line gives way to a race note */
  .recap span { -webkit-line-clamp: 1; }
  .pr-hint:has(.race-note) .pr-how { display: none; }
  .race-note { font-size: 12px; }
}
/* 10/18: my pieces that can still attack this turn wear a gold ring (nothing picked) */
.cell.can-attack { box-shadow: inset 0 0 0 0.6cqw var(--gold-hi), inset 0 0 4cqw oklch(85% 0.12 85 / 0.45); animation: can-attack 1.8s ease-in-out infinite; }
@keyframes can-attack { 50% { box-shadow: inset 0 0 0 0.6cqw var(--gold), inset 0 0 1.5cqw oklch(85% 0.12 85 / 0.2); } }
@media (prefers-reduced-motion: reduce) { .cell.can-attack { animation: none; } }
/* whose チェック: the badge wears that side's colour (my blue / their red) */
.turn-ctl.o0 { background: var(--p0); color: #fff; }
.turn-ctl.o1 { background: var(--p1); color: #fff; }
/* 10/18 攻撃済み・回転済みを読める札に (was a small 「攻」 disc); the ring of can-attack stays still */
.pc-flag {
  width: auto; height: auto; padding: 0.4cqw 2cqw 0.6cqw; border-radius: 2cqw; right: 2.5cqw; top: 2.5cqh;
  font-family: var(--font-gothic); font-size: max(10px, 7cqw); font-weight: 700; line-height: 1.15; letter-spacing: 0.02em;
  color: #fff; background: oklch(30% 0.01 260 / 0.95); border: 1px solid oklch(70% 0.01 260 / 0.8);
}
.pc.is-spent .fu-sm { filter: brightness(0.5) saturate(0.4); }
.cell.can-attack { animation: none; }
/* はじめての1局 (10/18): the step line over the prompt, and the thing it names glows */
.coach {
  display: flex; align-items: center; gap: 8px; margin: 0 auto 6px; padding: 6px 8px 6px 10px; max-width: 100%;
  border-radius: 8px; background: oklch(88% 0.1 90); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.35;
  box-shadow: 0 6px 18px oklch(0% 0 0 / 0.45); pointer-events: auto;
}
.coach-tag { flex: 0 0 auto; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--ink); color: var(--gold-hi); }
.coach-n { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--vermilion); color: #fff; font-size: 13px; }
.coach-t { flex: 1 1 auto; min-width: 0; }
.coach-off { flex: 0 0 auto; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px; }
.yy[data-coach="hand"] .hand-card.is-playable .fu { box-shadow: 0 0 0 3px var(--gold-hi), 0 0 18px oklch(85% 0.12 85 / 0.8); }
.yy[data-coach="attack"] .cell.can-attack { animation: can-attack 1.4s ease-in-out infinite; }
.yy[data-coach="end"] .btn-end { box-shadow: 0 0 0 3px var(--gold-hi), 0 0 18px oklch(85% 0.12 85 / 0.8); }
@media (max-width: 700px), (max-height: 520px) and (min-aspect-ratio: 4/3) {
  .coach { margin: 0 0 4px; font-size: 13px; padding: 5px 6px 5px 8px; }
  .coach-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) { .yy[data-coach="attack"] .cell.can-attack { animation: none; } }
.yy-prompt:has(.coach) { flex-wrap: wrap; }
.coach { flex: 1 1 100%; box-sizing: border-box; }
@media (min-width: 701px) { .coach { flex-basis: auto; max-width: 640px; margin-inline: auto; } .yy-prompt:has(.coach) { flex-direction: column; align-items: center; } }

/* スマホの式神 (10/22, table.ts pieceTile): the piece as a tile — art upright on the left, the range on the right
   turned to the facing, 耐/攻 in a row, the name band in the side's colour */
.pc-tile .pc-body {
  rotate: none; width: 94cqw; height: 94cqh; display: grid; grid-template-columns: 44% 56%; grid-template-rows: minmax(0, 1fr) auto auto;
  border-radius: 3cqw; overflow: hidden; background: oklch(18% 0.01 260);
  box-shadow: 0 0 0 0.8cqw var(--own), 0 1cqw 3cqw oklch(0% 0 0 / 0.6);
}
.pt-art { grid-area: 1 / 1; min-height: 0; position: relative; overflow: hidden; background: oklch(25% 0.02 60); }
.pt-art .fu-art { position: absolute; inset: 0; display: grid; place-items: center; }
.pt-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pt-art .fu-glyph { font-family: var(--font-mincho); font-size: 22cqw; color: oklch(70% 0.02 60 / 0.6); }
.pt-range { grid-area: 1 / 2; display: grid; place-items: center; padding: 2cqw; min-height: 0; background: #1d1c20; }
.pt-range svg { width: 100%; height: auto; max-height: 100%; transition: rotate var(--t-mid) var(--ease-out); }
.pt-range.f1 svg { rotate: 90deg; }
.pt-range.f2 svg { rotate: 180deg; }
.pt-range.f3 svg { rotate: 270deg; }
.pt-stats { grid-area: 2 / 1 / 3 / 3; display: flex; justify-content: space-around; align-items: baseline; padding: 0 2cqw; background: oklch(22% 0.01 260); color: var(--text); font-size: 9cqw; font-weight: 700; line-height: 1; }
.pt-stats b { font-size: 24cqw; margin-left: 0.6cqw; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; text-shadow: 0 0.5cqw 0 oklch(0% 0 0 / 0.6); }
.pt-hp b { color: oklch(85% 0.12 150); }
.pt-hp.is-hurt b { color: oklch(72% 0.19 28); }
.pt-atk b { color: oklch(80% 0.14 60); }
.pt-name { grid-area: 3 / 1 / 4 / 3; padding: 0.6cqw 2cqw 1cqw; background: var(--own); color: #fff; font-size: max(9px, 7.5cqw); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.pc-tile .pc-flag { top: 2cqh; right: 2cqw; }
.pc-tile.is-spent .pc-body { filter: brightness(0.55) saturate(0.5); }
/* the cell's 陰/陽/空 stays readable over a tile, in the corner of the range panel */
.pc-tile .pc-flag { top: 30cqh; left: 22cqw; right: auto; translate: -50% 0; }
/* a tile keeps the board's own facing arrow at the cell edge, so the body leaves room for it */
.pc-tile .pc-body { width: 86cqw; height: 86cqh; }
.pc-tile .pc-dir { z-index: 2; }
/* the cell's 陰/陽/空/太極 over a tile (10/22): a tag at the top-left of the art, in the cell's own colours */
.cell:has(.pc-tile) .raden.chip { display: none; }
.cell-attr {
  position: absolute; left: 7cqw; top: 7cqh; z-index: 3; pointer-events: none; display: flex; align-items: center; gap: 1cqw;
  padding: 0.8cqw 2.4cqw 0.8cqw 1.2cqw; border-radius: 0 0 2.4cqw 0;
  font-family: var(--font-mincho); font-weight: 800; font-size: max(11px, 11cqw); line-height: 1;
  box-shadow: 0 0.6cqw 1.6cqw oklch(0% 0 0 / 0.55);
}
.cell-attr .ca-mk { width: 1em; height: 1em; }
.cell-attr.a-yin { background: #1c2339; color: oklch(92% 0.02 260); box-shadow: inset 0 0 0 1px oklch(70% 0.05 260 / 0.7), 0 0.6cqw 1.6cqw oklch(0% 0 0 / 0.55); }
.cell-attr.a-yang { background: oklch(93% 0.04 85); color: oklch(25% 0.03 60); }
/* 空は淡い水色に墨の字 (1030案: 札の召喚の丸・紙の盤の空のマスと同じ #a9d3e6。濃い青緑は陰の濃紺と見間違えた) */
.cell-attr.a-empty { background: #a9d3e6; color: #26262b; }
.cell-attr.a-taiji { background: linear-gradient(135deg, var(--gold-hi), var(--gold)); color: var(--ink); }
/* 見比べ用 (10/22, ?piece=tile with sessionStorage yy-tile-shape=wide): a shorter tile, so a strip of the cell shows above it */
:root[data-tile-shape="wide"] .pc-tile .pc-body { height: 70cqh; translate: 0 10cqh; }
:root[data-tile-shape="wide"] .pc-tile .pt-range svg { max-height: 100%; width: auto; height: 100%; }
:root[data-tile-shape="wide"] .cell:has(.pc-tile) .cell-attr { top: 2cqh; left: 4cqw; border-radius: 2cqw; background: none; box-shadow: none; color: inherit; font-size: max(11px, 12cqw); text-shadow: 0 0 1.5cqw oklch(0% 0 0 / 0.8); }
:root[data-tile-shape="wide"] .cell.c-yin:has(.pc-tile) .cell-attr { color: oklch(88% 0.04 260); }
:root[data-tile-shape="wide"] .cell.c-yang:has(.pc-tile) .cell-attr { color: oklch(92% 0.06 85); }
:root[data-tile-shape="wide"] .cell.c-empty:has(.pc-tile) .cell-attr { color: oklch(88% 0.04 200); }
:root[data-tile-shape="wide"] .cell.c-taiji:has(.pc-tile) .cell-attr { color: var(--gold-hi); }
/* スマホの手札 (10/25, hand-view handTileHtml): the board's tile, upright; a tap opens the card large */
.ht-tile { --own: var(--p0); display: block; width: 88px; aspect-ratio: 1; container-type: size; }
.yy[data-viewer="1"] .ht-tile { --own: var(--p1); }
.ht-tile .pc-body {
  width: 100cqw; height: 100cqh; display: grid; grid-template-columns: 44% 56%; grid-template-rows: minmax(0, 1fr) auto auto;
  border-radius: 3cqw; overflow: hidden; background: oklch(18% 0.01 260); box-shadow: 0 0 0 0.8cqw var(--own), 0 1cqw 3cqw oklch(0% 0 0 / 0.6);
}
.hand.is-tile .hand-card.is-playable .ht-tile .pc-body { box-shadow: 0 0 0 0.8cqw var(--own), 0 0 0 2.6cqw var(--gold-hi), 0 0 5cqw oklch(85% 0.12 85 / 0.6); }
.hand.is-tile .hand-card.is-dead .ht-tile { filter: brightness(0.6) saturate(0.5); }
.hand.is-tile .hand-card.is-selected .ht-tile .pc-body { box-shadow: 0 0 0 0.8cqw var(--own), 0 0 0 3.4cqw var(--gold-hi), 0 0 8cqw oklch(85% 0.12 85 / 0.9); }
.yy[data-coach="hand"] .hand.is-tile .hand-card.is-playable .ht-tile .pc-body { box-shadow: 0 0 0 0.8cqw var(--own), 0 0 0 3.4cqw var(--gold-hi), 0 0 8cqw oklch(85% 0.12 85 / 0.9); }
.hand.is-tile { gap: 6px; padding-top: 12px; }
.pt-kind { font-family: var(--font-mincho); font-weight: 800; font-size: 14cqw; color: var(--gold-hi); }
.pt-cost { display: inline-flex; align-items: center; gap: 0.6cqw; }
.pt-cost .pt-cost-mk { width: 1.1em; height: 1.1em; }
.pt-cost b { color: oklch(85% 0.1 230); }
.pt-cost.is-disc b { color: var(--gold-hi); }
.ht-tile .pt-stats b { font-size: 18cqw; }

/* 盤の式神を触ったときの間合 (10/25): on a phone the tiles cover their cells, so the range lies over them */
@media (max-width: 700px), (max-height: 520px) and (min-aspect-ratio: 4/3) {
  .cell.rg-attack::before, .cell.rg-blind:not(.rg-attack)::before, .cell.rg-counter:not([class*="mk-"])::after { z-index: 4; }
  .cell.rg-attack::before { inset: 3cqw; border-width: 1.6cqw; background: oklch(60% 0.2 30 / 0.28); }
  .cell.rg-attack.rg-single::before { inset: 3cqw; }
  .cell.rg-blind:not(.rg-attack)::before {
    inset: 3cqw; border: 1.2cqw solid #d9a441; border-radius: 2cqw;
    background: repeating-linear-gradient(45deg, oklch(75% 0.13 80 / 0.5) 0 4cqw, oklch(15% 0.01 60 / 0.5) 4cqw 8cqw);
  }
  .cell.rg-counter:not([class*="mk-"])::after { inset: 3cqw; border: 1.6cqw solid #6fcf9e; border-radius: 50%; box-shadow: 0 0 3cqw oklch(80% 0.12 155 / 0.6); }
  .cell.rg-attack.rg-counter:not([class*="mk-"])::after { inset: 1cqw; }
}
/* 触っている式神 (10/25): on a tile, a thick gold ring with a glow, lifted a little; the other tiles step back */
.cell.is-selected .pc-tile .pc-body {
  box-shadow: 0 0 0 0.8cqw var(--own), 0 0 0 3.2cqw var(--gold-hi), 0 0 9cqw 2cqw oklch(85% 0.14 85 / 0.85), 0 3cqw 6cqw oklch(0% 0 0 / 0.7);
  scale: 1.05; transition: scale var(--t-mid) var(--ease-out);
}
.bd:has(.cell.is-selected .pc-tile) .cell:not(.is-selected) .pc-tile .pc-body { filter: brightness(0.72) saturate(0.8); }
/* 「総制圧力」 is wider than the old 「制圧」: keep the stat label tight and my 「あなた」 on one line */
.np-occ i { letter-spacing: 0; }
.np.is-you .np-who { flex-shrink: 0; }

/* ------------------------------------------------------------ title logo (11/08) */
/* The header's 符 + 式神符陣 became the title logo (play/art/site/logo-head.webp). */
.brand-logo { display: block; height: 38px; width: auto; align-self: center; }
@media (max-width: 720px) { .brand-logo { height: 30px; } }
@media (max-height: 520px) and (min-aspect-ratio: 4/3) { .brand-logo { height: 24px; } }