/* Math Duel: one shared tabletop, two fixed seats, one equation rail. */
:root {
  color-scheme: light;
  --paper: #ebe9e4;
  --surface: #fffefa;
  --surface-soft: #f5f3ee;
  --surface-deep: #e7e4dc;
  --ink: #263142;
  --muted: #697586;
  --line: #d7dbe1;
  --blue: #2563eb;
  --danger: #b45355;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { min-height: 0 !important; background: var(--paper) !important; color: var(--ink); -webkit-tap-highlight-color: transparent; }
#game-board {
  position: fixed; inset: 0; width: min(100%, 760px); height: 100dvh; max-height: 100svh; margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  display: grid; grid-template-rows: minmax(110px, 1fr) minmax(280px, 2.1fr) minmax(110px, 1fr); gap: 8px;
}
#white-area { grid-row: 1; }
#table-area { grid-row: 2; }
#black-area { grid-row: 3; }
#white-area, #black-area {
  min-height: 0; margin: 0 !important; padding: 8px 10px !important; display: flex; flex-direction: column;
  justify-content: center; gap: 5px; background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important; box-shadow: 0 1px 0 #ffffff, 0 2px 9px #3341550b !important;
}
#white-area.border-blue-500, #black-area.border-blue-500 { background: #fff !important; border-color: #87adfa !important; box-shadow: 0 0 0 2px #2563eb18, 0 2px 10px #3341550c !important; }
#white-area > div:first-child, #black-area > div:first-child { min-height: 18px; margin: 0 !important; display: flex; align-items: center; justify-content: center; }
#white-label, #black-label { color: var(--muted); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .03em; }
body.is-pvp #white-area { transform: rotate(180deg); }
.hand-grid { width: min(100%, 250px); min-height: 106px; margin-inline: auto; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; }
.hand-grid [data-card-id], .hand-card-slot { width: 43px; height: 50px; flex: 0 0 43px; }
.hand-card-slot { border: 0; border-radius: 8px; background: transparent; }
[data-card-id] { flex-shrink: 0; touch-action: manipulation; box-shadow: 0 2px 2px #17243a12; transition: box-shadow 160ms, background-color 160ms, border-color 160ms; }
[data-card-id].bg-slate-800 { background: #27364a; border-color: #172338; }
[data-card-id].bg-white { background: #fff; border-color: #bbc7d6; }
[data-card-id]:hover { transform: none !important; }
#table-area {
  min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); background: var(--surface);
  border: 1px solid #d5d8dc; border-radius: 17px; box-shadow: 0 3px 12px #33415512; overflow: hidden;
}
.utility-rail { position: static; display: contents; pointer-events: none; }
.utility-rail .table-icon { position: fixed; z-index: 1200; width: 42px; height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; color: #53647b; background: #fffefa; border: 1px solid #cfd7e1; border-radius: 50%; text-decoration: none; box-shadow: 0 5px 16px #26314230, 0 1px 0 #ffffff; font: inherit; font-size: 8px; line-height: 9px; pointer-events: auto; }
.utility-rail-left .table-icon { left: max(8px, env(safe-area-inset-left)); right: auto; }
.utility-rail-right .table-icon { left: auto; right: max(8px, env(safe-area-inset-right)); }
.utility-rail-left .table-icon:nth-child(1) { top: calc(var(--utility-center-y, 50vh) - 47px); }
.utility-rail-left .table-icon:nth-child(2) { top: calc(var(--utility-center-y, 50vh) + 5px); }
.utility-rail-right .table-icon:nth-child(1) { top: calc(var(--utility-center-y, 50vh) - 99px); }
.utility-rail-right .table-icon:nth-child(2) { top: calc(var(--utility-center-y, 50vh) - 47px); }
.utility-rail-right .table-icon:nth-child(3) { top: calc(var(--utility-center-y, 50vh) + 5px); }
.utility-rail-right .table-icon:nth-child(4) { top: calc(var(--utility-center-y, 50vh) + 57px); }
.utility-rail .table-icon svg { flex: 0 0 auto; }
.utility-rail .utility-cycle { width: 44px; height: 44px; }
.utility-rail .utility-cycle [data-role="utility-label"] { max-width: 38px; overflow: hidden; white-space: nowrap; font-size: 8px; line-height: 9px; font-weight: 700; }
.table-icon:hover, .table-icon:focus-visible { background: var(--surface-soft); }
.utility-menu { position: fixed; z-index: 1300; width: min(176px, calc(100vw - 76px)); padding: 5px; display: grid; gap: 3px; color: var(--ink); background: var(--surface); border: 1px solid #cfd7e1; border-radius: 12px; box-shadow: 0 8px 24px #26314230, 0 1px 0 #ffffff; }
.utility-menu.hidden { display: none; }
.utility-menu button { width: 100%; min-height: 34px; padding: 6px 9px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 12px; line-height: 16px; text-align: left; white-space: nowrap; }
.utility-menu button:hover, .utility-menu button:focus-visible { color: var(--ink); background: var(--surface-soft); border-color: var(--line); }
.utility-menu button.is-selected { color: var(--blue); background: #eef4ff; border-color: #c9dafe; font-weight: 700; }
#game-meta { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
#status-banner { min-width: 0; overflow: hidden; padding: 0 !important; color: var(--blue) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 11px !important; line-height: 18px !important; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
#status-banner .text-xl { margin: 0 2px; font-size: 12px; }
#race2-scoreboard { padding: 0 !important; color: var(--muted) !important; background: transparent !important; border: 0 !important; font-size: 9px; line-height: 12px; }
#history-area { display: none !important; }
.player-area-header { position: relative; width: 100%; }
.player-turn-status { position: absolute; left: 0; top: 50%; max-width: 38%; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; transform: translateY(-50%); }
.player-turn-status.is-current { color: var(--blue); }
.player-score { position: absolute; right: 0; top: 50%; color: var(--muted); font-size: 10px; line-height: 14px; font-weight: 700; transform: translateY(-50%); }
#table-surface { min-height: 0; display: grid; grid-template-rows: minmax(52px, .82fr) minmax(48px, 1fr) minmax(54px, .95fr) minmax(48px, 1fr) minmax(52px, .82fr); background: transparent; }
.table-zone { min-height: 0; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.table-zone:last-child { border-bottom: 0; }
.action-zone { background: var(--surface); transition: opacity 180ms ease, background-color 180ms ease; }
.action-zone:not(.is-active) { background: #fbfaf7; opacity: .66; }
.action-content { width: min(100%, 460px); height: 100%; min-height: 0; display: grid; grid-template-columns: 74px minmax(0, 1fr) 92px; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 12px; transform-origin: center; }
.action-zone[data-side="WHITE"] .action-content { transform: rotate(180deg); }
.operator-group { grid-area: 1 / 2; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; }
.op-btn { width: 38px !important; height: 42px !important; min-height: 0; padding: 0 !important; color: #475569; background: var(--surface-soft) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: none !important; font-size: 24px; line-height: 1; transform: none !important; }
.op-btn.bg-blue-600, .op-btn[data-selected="true"] { color: #fff; background: var(--blue) !important; border-color: var(--blue) !important; }
.action-content [data-role="main-btn"] { grid-area: 1 / 3; }
.action-content [data-role="giveup-btn"], .action-content [data-role="pass-btn"], .action-content [data-role="plan-continue-btn"] { grid-area: 1 / 1; }
.action-content [data-role="main-btn"], .action-content [data-role="giveup-btn"], .action-content [data-role="pass-btn"], .action-content [data-role="plan-continue-btn"] { width: 100%; height: 30px; min-height: 0; margin: 0 !important; padding: 4px 7px !important; border-radius: 8px !important; box-shadow: none !important; font-size: 11px; line-height: 13px; }
.action-content [data-role="main-btn"].bg-blue-600 { background: var(--blue) !important; }
.action-content [data-role="giveup-btn"] { color: var(--danger) !important; background: #fff7f6 !important; border-color: #efd7d4 !important; }
.equation-zone { background: #fcfbf8; }
.equation-content { width: min(100%, 460px); min-height: 0; position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center; transform-origin: center; transition: transform 520ms cubic-bezier(.65, 0, .35, 1); }
body.is-pvp.is-white-turn .equation-zone .equation-content { transform: rotate(180deg); }
#center-area { min-height: 54px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; padding: 5px 12px !important; background: var(--surface-soft) !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; }
#center-area > * { transform-origin: center; transition: transform 520ms cubic-bezier(.65, 0, .35, 1); }
body.is-pvp.is-white-turn #center-area > * { transform: rotate(180deg); }
#ui-center-label { position: absolute; left: 56px; top: 50%; z-index: 1; display: block; margin: 0 !important; color: var(--muted); font-size: 10px; line-height: 13px; font-weight: 700; letter-spacing: .1em; transform: translateY(-50%); }
body.is-pvp.is-white-turn #center-area > #ui-center-label { transform: translateY(-50%) rotate(180deg); }
#center-cards { min-height: 44px !important; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 5px !important; }
#center-cards [data-card-id] { width: 31px; height: 45px; font-size: 23px; border-width: 1px; opacity: 1; }
.play-stage-grid { width: 100%; min-height: 48px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); align-items: center; gap: 6px; padding-inline: 12px; }
.play-stage-slot { min-width: 0; min-height: 42px; display: flex; align-items: center; }
[data-role="stage-hand-slot"] { justify-content: flex-end; }
[data-role="stage-center-slot"] { justify-content: flex-start; }
.play-stage-cards { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; }
.play-stage-cards [data-card-id] { width: 31px; height: 46px; font-size: 24px; border-width: 1px; }
.operand-group { display: flex; align-items: center; gap: 2px; }
.operand-divider { padding: 0 4px; color: #586679; font-size: 21px; line-height: 1; font-weight: 700; }
.play-stage-operator { color: #566477; text-align: center; font-size: 23px; line-height: 1; font-weight: 500; }
[data-role="stage-hand-cards"]:empty::before, [data-role="stage-center-cards"]:empty::before { color: #b5bdc8; font-size: 24px; }
[data-role="stage-hand-cards"]:empty::before { content: '··'; letter-spacing: 7px; }
[data-role="stage-center-cards"]:empty::before { content: '·'; }
[data-role="move-preview"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.legacy-header { display: none !important; }
.app-header { gap: 16px !important; padding: 0 !important; color: var(--ink) !important; background: transparent !important; box-shadow: none !important; }
.app-header > div { max-width: none; }
.app-header > div:first-child { flex-wrap: wrap; gap: 10px; }
.app-header > div:last-child { flex-direction: column; }
#mode-select, #rule-mode-select { width: 100%; height: 40px; color: var(--ink); background: #f5f3ee; border-color: var(--line); border-radius: 9px; }
#rules-modal { z-index: 100; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (orientation: landscape) {
  #game-board { padding: 7px 18px; gap: 6px; grid-template-rows: minmax(48px, .55fr) minmax(228px, 2.6fr) minmax(48px, .55fr); }
  #white-area, #black-area { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); align-items: center; padding: 2px 10px !important; gap: 0; }
  .player-area-header { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  #white-area #white-label, #black-area #black-label { position: absolute; left: 0; top: 50%; margin: 0 !important; text-align: left; transform: translateY(-50%); }
  .player-turn-status { left: auto; right: 0; max-width: 34%; }
  #white-area > div:first-child, #black-area > div:first-child { min-height: 12px; }
  #white-label, #black-label { font-size: 9px; line-height: 12px; }
  .hand-grid { width: 100%; height: 100%; min-height: 0; grid-row: 1; flex-wrap: nowrap; justify-content: space-around; gap: 6px; }
  .hand-grid [data-card-id], .hand-card-slot { width: 34px; height: 42px; flex-basis: 34px; }
  .hand-grid [data-card-id] { font-size: 22px; }
  #table-area { grid-template-rows: minmax(0, 1fr); }
  #table-surface { grid-template-rows: minmax(35px, .8fr) minmax(34px, 1fr) minmax(40px, .9fr) minmax(34px, 1fr) minmax(35px, .8fr); }
  .action-content { grid-template-columns: 76px minmax(0, 1fr) 92px; grid-template-rows: minmax(0, 1fr); gap: 6px; padding: 2px 12px; }
  .op-btn { width: 38px !important; height: 32px !important; font-size: 20px; }
  .action-content [data-role="main-btn"], .action-content [data-role="giveup-btn"], .action-content [data-role="pass-btn"], .action-content [data-role="plan-continue-btn"] { height: 20px; padding: 2px 5px !important; font-size: 10px; line-height: 11px; }
  #center-area { min-height: 40px; padding: 3px 12px !important; }
  #center-cards { min-height: 35px !important; }
  .play-stage-grid { min-height: 36px; padding-inline: 18px; }
  .play-stage-slot { min-height: 34px; }
  #center-cards [data-card-id], .play-stage-cards [data-card-id] { height: 36px; }
  .play-stage-cards [data-card-id] { width: 27px; font-size: 20px; }
}
@media (max-height: 420px) and (orientation: landscape) {
  #game-board { padding: 3px 10px; gap: 3px; grid-template-rows: minmax(42px, .5fr) minmax(190px, 2.8fr) minmax(42px, .5fr); }
  #white-area, #black-area { padding: 1px 6px !important; gap: 0; }
  #white-area > div:first-child, #black-area > div:first-child { min-height: 10px; }
  .hand-grid { min-height: 34px; gap: 2px; }
  .hand-grid [data-card-id], .hand-card-slot { width: 29px; height: 34px; flex-basis: 29px; }
  .hand-grid [data-card-id] { font-size: 19px; }
  #table-area { grid-template-rows: minmax(0, 1fr); }
  #table-surface { grid-template-rows: minmax(28px, .8fr) minmax(25px, 1fr) minmax(35px, .9fr) minmax(25px, 1fr) minmax(28px, .8fr); }
  .action-content { grid-template-columns: 62px minmax(0, 1fr) 76px; grid-template-rows: minmax(0, 1fr); gap: 4px; padding: 1px 6px; }
  .operator-group { gap: 3px; }
  .op-btn { width: 28px !important; height: 24px !important; font-size: 17px; }
  .action-content [data-role="main-btn"], .action-content [data-role="giveup-btn"], .action-content [data-role="pass-btn"], .action-content [data-role="plan-continue-btn"] { height: 16px; padding: 1px 3px !important; font-size: 8px; line-height: 9px; }
  #center-area { min-height: 35px; grid-template-columns: minmax(0, 1fr); padding: 2px 6px !important; }
  #ui-center-label { font-size: 8px; }
  #center-cards { min-height: 29px !important; gap: 3px !important; }
  #center-cards [data-card-id] { width: 24px; height: 30px; font-size: 16px; }
  .play-stage-grid { min-height: 27px; gap: 3px; padding-inline: 6px; }
  .play-stage-slot { min-height: 25px; }
  .play-stage-cards [data-card-id] { width: 23px; height: 30px; font-size: 16px; }
  .play-stage-operator { font-size: 18px; }
  .operand-divider { padding-inline: 2px; font-size: 16px; }
}
@media (max-height: 590px) and (orientation: portrait) {
  #game-board { padding: 4px 6px; gap: 4px; grid-template-rows: minmax(78px, .85fr) minmax(228px, 2.3fr) minmax(78px, .85fr); }
  #white-area, #black-area { padding: 3px 6px !important; gap: 2px; }
  .hand-grid { width: min(100%, 220px); min-height: 70px; gap: 3px; }
  .hand-grid [data-card-id], .hand-card-slot { width: 32px; height: 36px; flex-basis: 32px; }
  .hand-grid [data-card-id] { font-size: 20px; }
  #table-area { grid-template-rows: minmax(0, 1fr); }
  #table-surface { grid-template-rows: minmax(42px, .78fr) minmax(34px, 1fr) minmax(40px, .9fr) minmax(34px, 1fr) minmax(42px, .78fr); }
  .action-content { grid-template-columns: 64px minmax(0, 1fr) 84px; grid-template-rows: minmax(0, 1fr); gap: 4px; padding: 2px 8px; }
  .operator-group { gap: 4px; }
  .op-btn { width: 30px !important; height: 30px !important; font-size: 18px; }
  .action-content [data-role="main-btn"], .action-content [data-role="giveup-btn"], .action-content [data-role="pass-btn"], .action-content [data-role="plan-continue-btn"] { height: 20px; padding: 2px 4px !important; font-size: 9px; line-height: 10px; }
  #center-area { min-height: 40px; padding: 4px 8px !important; }
  #center-cards { min-height: 34px !important; gap: 4px !important; }
  #center-cards [data-card-id] { width: 28px; height: 34px; font-size: 20px; }
  .play-stage-grid { min-height: 35px; padding-inline: 8px; }
  .play-stage-slot { min-height: 33px; }
  .play-stage-cards [data-card-id] { width: 26px; height: 34px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }