/* Rival Courts identity: website ink #26333b, gold #e6de2f and paper #f7f6f2. */
:root {
  --brand-blue:#26333b;--brand-gold:#e6de2f;--brand-paper:#f7f6f2;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
}
body {
  --scene-bg:#f7f6f2;--panel-bg:#ffffff;--foreground:#26333b;--secondary:#4c5659;
  --rule:#c7ccc9;--accent-ink:#817914;--action-bg:#26333b;--action-ink:#e6de2f;
  --cream:var(--foreground);--muted:var(--secondary);--gold:var(--accent-ink);--yellow:#e6de2f;
  color-scheme:light;background:var(--scene-bg);color:var(--foreground);
}
body[data-court=gold] {
  --scene-bg:#26333b;--panel-bg:#303f49;--foreground:#f7f6f2;--secondary:#c2cbc9;
  --rule:#66706d;--accent-ink:#e6de2f;--action-bg:#e6de2f;--action-ink:#26333b;
  color-scheme:dark;
}
body,#viewport,#table,.game-header,.modal,.action-panel,.guard,.play-zone-outline,#peek-view,#layer-controls,.icon-button,.seat,.slot-price,.action-button {
  transition:background-color .6s ease,color .6s ease,border-color .6s ease,box-shadow .3s ease;
}
#viewport,#table { background:var(--scene-bg);box-shadow:none; }
.table-grain { display:none; }
.table-border { inset:100px 30px 35px;border:0;border-inline:1px solid var(--rule);border-radius:0;box-shadow:none; }
.table-border:after { content:'RIVAL COURTS';left:50%;top:20%;width:100%;font:900 90px 'Segoe UI',sans-serif;letter-spacing:12px;color:var(--foreground);opacity:.035;text-align:center; }
.game-header { background:var(--scene-bg);border-bottom:3px solid var(--foreground);box-shadow:0 4px 0 var(--brand-gold); }
.wordmark { color:var(--foreground);font:900 22px 'Segoe UI',sans-serif;letter-spacing:2px; }
.wordmark-diamond { color:var(--brand-gold);text-shadow:0 0 1px var(--brand-blue); }
.wordmark small { color:var(--secondary);font-family:inherit;letter-spacing:5px; }
.session-label,.seat p,.glory span,.game-footer,.turn-standard p,.spades-counter,.pile p { color:var(--secondary)!important; }
.session-label span { color:var(--accent-ink); }
.icon-button { background:var(--panel-bg);border:1px solid var(--rule);color:var(--foreground);border-radius:3px; }
.icon-button:hover { background:var(--panel-bg);border-color:var(--foreground); }
.seat h2,.glory b,.turn-standard h1,.market-heading h2,.slot-name,.pile h3,.pile h3 b { color:var(--foreground); }
.glory { border-color:var(--rule); }
.crest { border:1px solid var(--foreground);filter:none;box-shadow:none; }
.crest.blue { background:var(--brand-blue);color:var(--brand-paper); }
.crest.gold { background:var(--brand-gold);color:var(--brand-blue); }
.hit-badge { background:var(--panel-bg);color:var(--foreground);border-color:var(--rule);border-radius:2px; }
.eyebrow,.spades-counter,#last-stand { color:var(--accent-ink); }
.phase-medallion { background:var(--panel-bg);border:2px solid var(--foreground);box-shadow:none; }
.phase-track { color:var(--secondary); }
.phase-track li { border-color:var(--rule); }
.phase-track .active { color:var(--foreground);border-color:var(--brand-gold); }
.court-divider { background:var(--rule); }
.court-divider span { background:var(--scene-bg);color:var(--secondary); }
.market-heading h2 { font-family:inherit;font-weight:700;letter-spacing:3px; }
.market-heading span { background:var(--rule); }
.slot-name span { color:var(--secondary); }
.slot-bed,.pile-cards { border-color:var(--rule);background:var(--panel-bg); }
.slot-bed:empty:after { color:var(--rule); }
.slot-price { border:2px solid var(--foreground);border-radius:3px;background:var(--panel-bg);color:var(--foreground);box-shadow:none; }
.slot-price.chosen { background:var(--brand-gold);color:var(--brand-blue);box-shadow:none;border-color:var(--brand-blue); }
.slot-price:disabled { opacity:.55; }
.card { box-shadow:0 5px 11px #07101940; }
.card.selected { box-shadow:0 0 0 2px var(--brand-blue),0 0 0 5px var(--brand-gold),0 7px 12px #07101945; }
.guard { background:var(--panel-bg);border:1px solid var(--rule);border-radius:3px; }
.guard.targetable { border-color:var(--foreground);box-shadow:none; }
.guard.targeted { border:2px solid var(--brand-gold);box-shadow:inset 0 0 0 1px var(--brand-blue);background:var(--panel-bg); }
.guard h3,.guard .hp { color:var(--foreground); }
.guard .hp small,.empty-field { color:var(--secondary); }
.guard .health-track { background:var(--rule); }
.guard .health-track span { background:var(--accent-ink); }
.action-panel { border:1px solid var(--rule);border-radius:4px;background:var(--panel-bg);box-shadow:none; }
.action-panel:before,.action-panel:after { display:none; }
.av-display b { color:var(--foreground); }
.av-display span { color:var(--secondary); }
.action-panel p { color:var(--secondary); }
.action-button { background:var(--action-bg);color:var(--action-ink);border:2px solid var(--action-bg);border-radius:3px;box-shadow:none; }
.action-button.secondary { background:var(--panel-bg);color:var(--foreground);border-color:var(--rule); }
.quiet-button { color:var(--foreground);text-decoration-color:var(--rule); }
.quiet-button:hover { color:var(--accent-ink); }
.play-zone-outline { border-color:var(--rule);border-radius:4px;background:var(--panel-bg); }
#play-prompt,#play-detail { color:var(--secondary); }
.pending-banner,.board-instruction { color:var(--accent-ink); }
.announcement { color:var(--foreground);background:var(--panel-bg);border-color:var(--rule);text-shadow:none; }
.announcement small { color:var(--accent-ink); }
.impact { color:var(--foreground);text-shadow:0 0 12px var(--panel-bg); }
.spark { background:var(--brand-gold);box-shadow:none; }
.overlay { background:#14222eb3;backdrop-filter:blur(12px); }
.modal { background:var(--panel-bg);color:var(--foreground);border:2px solid var(--foreground);border-radius:4px;box-shadow:0 20px 70px #07131b66; }
.modal:before { display:none; }
.modal h1,.modal h2,.modal h3 { color:var(--foreground); }
.modal p,.modal ul,.modal ol,.modal .mode-note { color:var(--secondary); }
.modal .modal-symbol,.modal .eyebrow { color:var(--accent-ink); }
.modal a { color:var(--foreground);text-decoration-color:var(--accent-ink);text-underline-offset:4px; }
.modal .close { color:var(--foreground);width:44px;height:44px;top:8px;right:8px; }
.modal-divider,.history-list li { border-color:var(--rule); }
.history-list b { color:var(--foreground); }
.court-choice { background:var(--brand-blue);color:var(--brand-gold);border:2px solid var(--brand-gold);border-radius:3px; }
.court-choice.blue { background:var(--brand-paper);color:var(--brand-blue);border-color:var(--brand-blue); }
.court-choice small { color:inherit;opacity:.8; }
.reveal-card.kept span,.inspect-hint { color:var(--accent-ink)!important; }
.reveal-card.rejected span { color:var(--secondary); }
.result-score>div { padding:16px;border:2px solid var(--brand-blue);border-radius:3px; }
.result-score>div:first-child { background:var(--brand-blue);color:var(--brand-gold); }
.result-score>div:last-child { background:var(--brand-paper);color:var(--brand-blue); }
.result-score span { color:inherit; }
.toast { background:var(--panel-bg);color:var(--foreground);border:2px solid var(--foreground);border-radius:3px;box-shadow:0 8px 25px #07131b33; }

/* The rulebook is a paginated reader, with its contents as the opening slide. */
.rulebook-modal { width:min(680px,100%);height:min(780px,calc(100dvh - 32px));max-height:none;padding:24px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:18px;text-align:left;overflow:hidden; }
.rulebook-header { padding-right:38px; }
.rulebook-header h2 { font-size:30px;margin:7px 0 4px; }
.rulebook-header p { font-size:12px;margin:0; }
.rulebook-page { overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 14px 0;scrollbar-width:thin;scrollbar-color:var(--rule) transparent; }
.rulebook-page h3 { margin:18px 0 10px;font-size:18px; }
.rulebook-page p { font-size:14px;line-height:1.7;margin:0 0 15px;color:var(--foreground); }
.rulebook-page li { font-size:14px;line-height:1.7;margin-bottom:7px;color:var(--foreground); }
.rulebook-page ul,.rulebook-page ol { margin:0 0 18px;padding-left:24px; }
.rulebook-page .rules-table-wrap { overflow-x:auto;margin:16px 0; }
.rulebook-page table { border-collapse:collapse;width:100%;font-size:13px; }
.rulebook-page th,.rulebook-page td { text-align:left;padding:11px 10px;border-bottom:1px solid var(--rule); }
.rulebook-page th { background:var(--scene-bg);color:var(--foreground);font-weight:700; }
.rulebook-index { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.rulebook-index button { display:flex;gap:10px;align-items:center;text-align:left;padding:11px 10px;min-height:48px;background:var(--scene-bg);color:var(--foreground);border:1px solid var(--rule);border-radius:3px;font-size:13px; }
.rulebook-index button:hover { border-color:var(--foreground); }
.rulebook-index span { color:var(--accent-ink);font-size:10px;font-weight:bold; }
.rulebook-footer { border-top:1px solid var(--rule);padding-top:12px; }
.rulebook-progress { height:3px;background:var(--rule);margin-bottom:14px; }
.rulebook-progress>span { display:block;height:100%;background:var(--accent-ink);transition:width .2s; }
.rulebook-nav { display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:center; }
.rulebook-nav .action-button { margin:0;min-height:46px;max-width:none;font-size:12px; }
.rulebook-nav .quiet-button { margin:0;min-height:46px; }
.rulebook-position { text-align:center;font-size:10px;letter-spacing:1.5px;color:var(--secondary);margin-top:10px; }

@media (max-width:900px), (orientation:portrait) {
  .table-border { inset:110px 10px 70px;border-radius:0;border-inline:1px solid var(--rule); }
  .table-border:after { font-size:42px;letter-spacing:5px;top:8%; }
  .game-header { height:56px; }
  .wordmark { font-size:16px;letter-spacing:1px; }
  .wordmark small { font-size:6px;letter-spacing:3px; }
  #hand-layer { background:none;isolation:isolate; }
  #table:has(#own-hand:empty) { --hand-height:0px;--hand-tuck:0px; }
  #hand-layer:has(#own-hand:empty) { height:0;visibility:hidden; }
  #hand-layer:before { content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--scene-bg) 65%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);mask-image:linear-gradient(to bottom,transparent,#000 45%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);transition:background-color .6s; }
  [data-view=hand] #board-layer { opacity:1;filter:none; }
  .play-zone-outline { background:var(--panel-bg); }
  .action-panel { background:var(--panel-bg);border:1px solid var(--rule);border-radius:4px;box-shadow:none; }
  #layer-controls { background:var(--scene-bg);border-color:var(--rule); }
  #layer-court { color:var(--foreground); }
  #layer-back { background:var(--panel-bg);color:var(--foreground);border-color:var(--rule); }
  #peek-view { background:var(--action-bg);color:var(--action-ink);border:2px solid var(--action-bg);border-radius:4px;box-shadow:none; }
  #peek-view>small { color:inherit;opacity:.8; }
  #peek-view[aria-pressed=true] { background:var(--brand-gold);color:var(--brand-blue);border-color:var(--brand-blue);box-shadow:none; }
  #peek-view[aria-pressed=true]>small { color:inherit; }
}
@media(max-width:640px) {
  .rulebook-modal { height:calc(100dvh - 24px);padding:19px 16px 14px;gap:14px; }
  .rulebook-header h2 { font-size:27px; }
  .rulebook-index { gap:7px; }
  .rulebook-index button { font-size:12px;padding:10px 8px;gap:7px; }
}
@media (max-width:900px) and (max-height:560px) and (orientation:landscape) {
  .game-header { height:44px; }
  .rulebook-modal { grid-template-rows:auto minmax(0,1fr) auto;padding:14px 22px;gap:8px; }
  .rulebook-header h2 { font-size:22px; }
  .rulebook-header p { display:none; }
  .rulebook-footer { padding-top:8px; }
  .rulebook-progress { margin-bottom:7px; }
  .rulebook-position { margin-top:5px; }
}
@media (max-width:900px), (orientation:portrait) {
  #board-layer { background-color:transparent;transition:opacity .24s,filter .24s,transform .28s; }
}
@media(max-width:640px) {
  .rulebook-modal { height:min(780px,calc(100dvh - 40px)); }
}
.action-panel { transition:background-color .6s,color .6s,border-color .6s,opacity .2s,transform .25s; }

/* Tap to select: cards stay in the hand and phase actions retain their places. */
#selection-tools { display:flex;justify-content:flex-end;gap:12px; }
#selection-tools .quiet-button { font-size:10px;min-height:38px;margin:0;padding:5px 0; }
.own-hand .card.selected { box-shadow:0 0 0 2px var(--accent-ink),0 8px 15px #0006; }
.own-hand .card.ineligible { cursor:default; }
@media (max-width:900px), (orientation:portrait) {
 #selection-tools { position:absolute;right:12px;top:0;gap:10px; }
 #selection-tools #return-cards { position:static; }
 #actions { grid-column:1 / -1; }
 .action-panel { grid-template-rows:18px 36px minmax(44px,1fr); }
 .av-display { grid-row:2; }
 #actions .action-button { font-size:11px;line-height:1.3; }
}
@media (max-width:900px) and (max-height:560px) and (orientation:landscape) {
 #actions .action-button { font-size:10px;padding:5px 2px; }
 #selection-tools { gap:7px; }
 #selection-tools .quiet-button { font-size:9px; }
}

#selection-tools .quiet-button:disabled { opacity:.4;cursor:default; }

/* Mobile layout refinements: compact header, readable declarations, and action controls. */
@media (max-width:900px), (orientation:portrait) {
  .game-header { height:48px; padding:4px 10px; gap:6px; }
  .wordmark { white-space:nowrap; font-size:clamp(10px,2.5vw,15px); letter-spacing:0; flex-shrink:1; min-width:0; }
  .wordmark-diamond { font-size:.8em; }
  .wordmark-tagline { color:var(--secondary); font-size:.65em; letter-spacing:0; font-weight:600; }
  .game-header nav { flex-shrink:0; gap:4px; }
  .game-header .icon-button { min-height:44px; padding:5px 7px; font-size:clamp(9px,1.7vw,11px); }
  .game-header #menu { min-width:54px; }
  .turn-standard { top:58px; }
  #board-layer { top:102px; }
  .action-panel { grid-template-columns:70px minmax(0,1fr); grid-template-rows:18px 30px minmax(44px,1fr); gap:3px 8px; }
  .av-display { grid-column:1;grid-row:2 / 4;align-self:start; }
  .av-display b { font-size:32px; }
  .av-display span { font-size:8px; line-height:1.3; }
  .action-panel p { grid-column:2;grid-row:2; }
  #actions { grid-column:2;grid-row:3; }
  #actions .action-button { min-height:44px; padding:4px 5px; font-size:11px; }
  /* Position the incoming declaration inside the dark incoming card tray. */
  #incoming-layer .pending-banner {
    left:22px;right:22px;top:auto;
    bottom:calc(var(--dock-height) + var(--view-bar) + var(--hand-height) - var(--hand-tuck) + 20px + 103px - 34px);
    max-width:none;padding:5px 8px;text-align:center;
    font-size:11px;line-height:1.3;font-weight:700;
    color:var(--brand-gold);text-shadow:0 1px 2px #000c;
    z-index:3;pointer-events:none;
  }
}
/* Desktop mouse hover: strong outline and shadow, no brightness change. */
@media (hover:hover) and (pointer:fine) {
  .own-hand .card.selectable:not(.ineligible):not(.selected):hover {
    filter:none;
    box-shadow:0 0 0 3px var(--brand-gold),0 0 0 5px var(--brand-blue),0 12px 22px #071019aa;
  }
  .own-hand .card.ineligible:hover {
    filter:brightness(.72) saturate(.75);
  }
}
/* Touch browsers can retain :hover after tapping. Never show hover emphasis there. */
@media (hover:none), (pointer:coarse) {
  .own-hand .card.selectable:hover:not(.selected) {
    box-shadow:0 5px 11px #07101940;
  }
  .own-hand .card.ineligible:hover {
    filter:brightness(.72) saturate(.75);
  }
}
/* Keep the inline subtitle subordinate on wide displays too. */
.wordmark-tagline { color:var(--secondary);font-size:.52em;font-weight:600;letter-spacing:2px;vertical-align:middle; }
@media (max-width:900px) and (max-height:560px) and (orientation:landscape) {
  .game-header { height:44px; }
  .turn-standard { top:48px; }
  #board-layer { top:85px; }
  #incoming-layer .pending-banner { left:61%;right:14px;top:71px;bottom:auto; }
}