:root { --card-scale: 0.64; --table-card-scale: 0.4928; color-scheme: light; font-family: system-ui, sans-serif; color: #293e35; background: #f6f4eb; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h3 { font-family: Georgia, serif; }
h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.05em; margin-bottom: 0; }
h2 { font-size: 0.85rem; letter-spacing: 0.04em; margin-bottom: 0; }
.eyebrow { text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.18em; margin-bottom: 9px; font-weight: 700; color: #637566; }
.button { display: inline-block; border: 0; border-radius: 8px; padding: 12px 20px; cursor: pointer; font-weight: 650; font-size: 0.85rem; text-align: center; text-decoration: none; }
.button:hover { filter: brightness(0.94); }
.button:focus-visible { outline: 3px solid #b18632; outline-offset: 3px; }
.button:disabled { opacity: 0.45; cursor: default; }
.button-primary { background: #304f3f; color: #fffdf5; }
.button-secondary { background: transparent; border: 1px solid #bac6b7; color: #304f3f; }
.hint { color: #6d7c71; font-size: 0.75rem; line-height: 1.6; margin: 0; }
.points { font-size: 0.95rem; margin: 0; }
.points strong { font-size: 1.7rem; font-variant-numeric: tabular-nums; margin-left: 7px; }
.notice { color: #79601f; font-size: 0.85rem; margin: 8px 0 16px; }
.notice:empty { display: none; }
.discard-pile { margin: 14px 0; padding: 10px; border: 1px solid #e5e8df; border-radius: 8px; text-align: left; font-size: 0.7rem; line-height: 1.5; }
.discard-pile summary { cursor: pointer; font-weight: 650; }
.discard-pile ul { padding-left: 16px; margin-bottom: 0; }
.discard-pile p { margin: 8px 0 0; }
.table-empty { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; color: #71806a; }
.table-empty > span { font-size: 2rem; margin-bottom: 12px; opacity: 0.6; }
.table-empty p { font: 1.5rem Georgia, serif; margin-bottom: 8px; }
.table-empty small { font-size: 0.75rem; }
.count { background: #e5e9df; border-radius: 20px; padding: 3px 8px; margin-left: 5px; font-size: 0.7rem; }
.playing-card { position: relative; isolation: isolate; width: 180px; height: 286px; flex-shrink: 0; border-radius: 10px; padding: 8px; border: 1px solid #cfcbb7; background: #fffdf5; box-shadow: 0 3px 7px #304f3f12; display: flex; flex-direction: column; color: #293e35; }
.card-art { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; background: #f1eddc; color: #b18c36; font-size: 2.6rem; border-radius: inherit; pointer-events: none; }
.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.playing-card .card-title, .playing-card .card-effect, .playing-card form { position: relative; z-index: 1; background: rgb(255 253 245 / 84%); }
.playing-card .card-title { font-size: 1rem; margin: 0 0 12px; padding: 6px 7px; border-radius: 5px; flex-shrink: 0; }
.playing-card .card-heading { position: relative; z-index: 1; background: rgb(255 253 245 / 84%); margin-bottom: 12px; padding: 6px 7px; border-radius: 5px; flex-shrink: 0; overflow-wrap: anywhere; }
.playing-card .card-heading .card-title { margin: 0; padding: 0; background: none; }
.playing-card .card-caption { margin: 4px 0 0; font: italic 0.7rem/1.3 Georgia, serif; }
.playing-card .card-labels { display: flex; flex-wrap: wrap; gap: 3px; list-style: none; margin: 5px 0 0; padding: 0; font: 500 0.55rem/1.3 system-ui, sans-serif; }
.playing-card .card-labels li { padding: 2px 5px; border-radius: 3px; background: #293e3512; }
.playing-card .card-effect { font-family: Georgia, serif; font-size: 0.88rem; font-weight: 600; line-height: 1.3; margin: auto 0 0; padding: 7px; border-radius: 5px 5px 0 0; flex-shrink: 0; }
.playing-card .card-effect--medium { font-size: 0.78rem; }
.playing-card .card-effect--long { font-size: 0.68rem; line-height: 1.4; }
.playing-card .random-points-value { display: block; margin-top: 5px; font: 800 1.15rem/1.2 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hand-card { touch-action: none; cursor: grab; user-select: none; }
.hand-card:focus-visible { outline: 3px solid #b18632; outline-offset: 3px; }
.hand-card[aria-disabled="true"] { cursor: default; }
.hand-card.is-selected, .hand-card.is-playing { opacity: 0.25; }
.hand-card.is-playing { pointer-events: none; }
.hand-card.hand-card-ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: 0.97; cursor: grabbing; scale: var(--table-card-scale); transform-origin: top left; box-shadow: 0 12px 28px #20372845; }
.player-drop-zone { position: absolute; top: calc(100% + 8px); left: 8%; width: 84%; min-height: 64px; border: 2px dashed #7b927c; border-radius: 10px; background: #f5f9ebf5; color: #304f3f; font: 600 0.8rem system-ui, sans-serif; padding: 10px; cursor: pointer; box-shadow: 0 4px 10px #304f3f18; }
.player-drop-zone.is-over, .player-drop-zone:focus-visible { border-style: solid; border-color: #a57816; background: #f6e6af; outline: 3px solid #d2ae51; }
.score-item, .player-sidebar .points { position: relative; }
.score-delta { position: absolute; top: 12px; right: 8px; z-index: 3; padding: 5px 10px; border: 2px solid #fff; border-radius: 10px; font: 900 1.35rem system-ui, sans-serif; pointer-events: none; white-space: nowrap; text-shadow: 0 1px 2px #0005; }
.score-delta.is-gain { background: #46e85d; color: #143e0c; box-shadow: 0 0 10px #b4ff24, 0 0 28px #6cff40, 0 0 45px #a6ff5980; }
.score-delta.is-loss { background: #ff593e; color: #fff; box-shadow: 0 0 10px #ffce38, 0 0 28px #ff5234, 0 0 45px #ff593e80; }
.score-impact-ring { position: absolute; z-index: 2; width: 100px; height: 100px; top: calc(50% - 50px); left: calc(50% - 50px); border: 4px solid var(--impact-color); border-radius: 50%; box-shadow: 0 0 18px var(--impact-color), inset 0 0 18px var(--impact-color); pointer-events: none; }
.playing-card form { margin: 0; padding: 0 7px 7px; border-radius: 0 0 5px 5px; flex-shrink: 0; }
.button-play { width: 100%; font-size: 0.7rem; padding: 8px; background: #e8eddf; color: #304f3f; }
.table-card { position: absolute; touch-action: none; user-select: none; cursor: grab; scale: var(--table-card-scale); rotate: var(--card-rotation, 0deg); transform-origin: top left; }
.playing-card.is-shrunken { scale: 0.45; transform-origin: top left; }
.table-card.is-shrunken { scale: 0.22176; }
.table-card.is-dragging { cursor: grabbing; box-shadow: 0 9px 20px #304f3f26; }
.playing-card .card-effect:last-child { border-radius: 5px; }
.playing-card.is-golden { border-color: #bc8513; box-shadow: 0 0 0 2px #efd581, 0 4px 12px #b7863438; }
.is-golden .card-art img { filter: sepia(1) saturate(2.2) brightness(1.1); }
.is-golden .card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, #d79b2140 10%, #ffec9860 35%, #fff8d5a0 43%, #d89b2240 52%, #f8d36c70 90%); }
.welcome { min-height: 100svh; max-width: 800px; padding: 60px 24px; margin: auto; text-align: center; }
.welcome h1 { font-size: clamp(3rem, 7vw, 5rem); margin: 20px 0; line-height: 1.05; }
.welcome > p { color: #6d7c71; }
.welcome-card { position: relative; width: 180px; height: 252px; margin: 35px auto; border: 4px solid #29262e; border-radius: 12px; transform: rotate(-7deg); box-shadow: 2px 3px 0 #88818b, 4px 6px 0 #29262e, 6px 9px 0 #88818b, 8px 12px 0 #29262e, 12px 18px 22px #18102030; }
.welcome .hint { margin-top: 18px; }

.playground { --score-height: 80px; --sidebar-width: 208px; position: fixed; inset: 0; background: #fff; }
.player-sidebar { position: fixed; top: var(--score-height); left: 0; bottom: 0; width: var(--sidebar-width); padding: 24px; overflow-y: auto; text-align: center; }
.player-sidebar h1 { font-size: 1.6rem; margin-bottom: 14px; }
.player-sidebar .points { margin-bottom: 20px; }
.player-sidebar form { margin: 12px 0; }
.player-sidebar .button { width: 100%; }
.deck-card { position: relative; width: 126px; height: 172px; margin: 20px auto; }
.deck-card-layer, .draw-card-ghost { border: 3px solid #29262e; border-radius: 10px; box-shadow: 2px 3px 4px #18102040; }
.deck-card-layer { position: absolute; inset: 0; transform: translate(calc(var(--deck-layer) * -6px), calc(var(--deck-layer) * -6px)); }
.card-back { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: 7px; container-type: inline-size; background: radial-gradient(ellipse at 50% 32%, #372046 0, #17101f 40%, #09090c 72%); }
.card-back::after { content: ""; position: absolute; inset: 5px; border: 1px solid #ada2b84d; border-radius: 4px; box-shadow: inset 0 0 0 1px #08070a; pointer-events: none; }
.card-back-swirl { position: absolute; width: 110%; height: auto; left: -5%; top: -2%; overflow: visible; transform-origin: center; animation: chaos-swirl 36s linear infinite; filter: drop-shadow(0 0 3px #f344a577); }
.swirl-haze { opacity: .55; filter: blur(7px); }
.card-back-title { position: absolute; z-index: 1; left: 6%; right: 6%; bottom: 13%; color: #fffaf0; text-align: center; text-transform: uppercase; font-family: Impact, "Arial Narrow", sans-serif; font-size: 17cqw; font-weight: 900; font-style: italic; line-height: 1.05; letter-spacing: -.04em; transform: rotate(-4deg); text-shadow: 1px 2px 0 #050407, 0 0 8px #09090c; }
@keyframes chaos-swirl { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .card-back-swirl { animation: none; }
}
.deck-count { font-size: 0.8rem; margin: 0; }
.final-round-notice { margin: 16px 0; padding: 10px; border: 1px solid #bd9b41; border-radius: 8px; background: #fff4cc; font-size: 0.8rem; line-height: 1.5; }
.game-results { position: fixed; z-index: 40; bottom: 24px; left: calc(var(--sidebar-width) + (100vw - var(--sidebar-width)) / 2); transform: translateX(-50%); width: min(440px, calc(100vw - var(--sidebar-width) - 24px)); max-height: calc(100svh - var(--score-height) - 48px); overflow-y: auto; padding: 24px; border: 1px solid #bac6b7; border-radius: 12px; background: #fffdf5; box-shadow: 0 8px 32px #304f3f33; text-align: center; }
.game-results h2 { font: bold 1.6rem Georgia, serif; }
.game-winner { margin: 12px 0; font-weight: 700; }
.game-results table { width: 100%; margin-bottom: 20px; border-collapse: collapse; text-align: left; font-variant-numeric: tabular-nums; }
.game-results th, .game-results td { padding: 8px; border-bottom: 1px solid #dce2d7; overflow-wrap: anywhere; }
.game-results td, .game-results thead th:last-child { text-align: right; }
.game-results .is-winner { background: #e8eddf; }
.table-panel { position: absolute; z-index: 1; inset: var(--score-height) 0 0 var(--sidebar-width); }
.table { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; }
.hand-panel { position: fixed; z-index: 30; inset: auto 0 0 var(--sidebar-width); height: 220px; pointer-events: none; }
.hand-heading { position: absolute; bottom: 8px; width: 100%; text-align: center; }
.hand-heading h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hand-heading .hint { display: inline-block; max-width: 95%; padding: 3px 10px; border-radius: 20px; background: #fffdf5e6; font-size: 0.65rem; }
.hand { position: absolute; inset: 0 0 34px; overflow: visible; --fan-step: min(90px, calc((100vw - var(--sidebar-width) - 150px) / var(--fan-gaps))); }
.hand > .hand-card { position: absolute; bottom: 0; left: calc(50% + var(--fan-offset) * var(--fan-step)); z-index: var(--fan-order); pointer-events: auto; transform-origin: bottom center; transform: translateX(-50%) translateY(var(--fan-lift)) rotate(calc(var(--fan-offset) * 3.5deg)) scale(var(--card-scale)); transition: transform 180ms ease, box-shadow 180ms ease; box-shadow: 0 5px 16px #20372838; }
.hand > .hand-card.is-previewed, .hand > .hand-card:focus-visible, .hand > .hand-card:focus-within { z-index: 100; transform: translateX(-50%) translateY(-22px) rotate(0deg) scale(1); box-shadow: 0 12px 26px #20372845; }
/* Basic mouse hover must work from first paint, before Stimulus has connected. */
@media (hover: hover) and (pointer: fine) {
  .hand > .hand-card:hover:not(.is-selected):not(.is-playing) { z-index: 100; transform: translateX(-50%) translateY(-22px) rotate(0deg) scale(1); box-shadow: 0 12px 26px #20372845; }
}
@media (prefers-reduced-motion: reduce) {
  .hand > .hand-card { transition: none; }
}
.hand-empty { position: absolute; bottom: 20px; width: 100%; text-align: center; color: #7d887b; font-size: 0.8rem; }
.position-status { text-align: center; }
.is-updating-table .table-card, .is-updating-table .hand-card { cursor: progress; }
.deck-picker { max-width: 440px; margin: 0 auto; }
.deck-picker fieldset { border: 1px solid #d8d7cc; border-radius: 12px; text-align: left; padding: 18px; margin-bottom: 18px; }
.deck-picker legend { padding: 0 8px; font-weight: 700; }
.deck-picker-actions { display: flex; gap: 8px; margin: 12px 0 4px; }
.deck-picker-actions .button { font-size: .75rem; padding: 6px 10px; }
.deck-option { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; }
.deck-option input { width: 18px; height: 18px; accent-color: #304f3f; }
.deck-option span { display: flex; flex-direction: column; gap: 3px; }
.deck-option small { color: #6d7c71; }
.deck-option:has(input:disabled) { opacity: .5; cursor: default; }
@media (max-width: 650px), (max-height: 750px) {
  .playground { --sidebar-width: 146px; }
  .player-sidebar { padding: 14px 10px; }
  .player-sidebar h1 { font-size: 1.25rem; }
  .player-sidebar .eyebrow { font-size: 0.55rem; }
  .player-sidebar .points { margin-bottom: 12px; }
  .player-sidebar .button { padding: 10px 6px; font-size: 0.75rem; }
  .points strong { font-size: 1.4rem; }
  .deck-card { width: 84px; height: 110px; margin: 14px auto; }
  .playing-card { width: 160px; height: 270px; padding: 7px; }
  .table-empty { text-align: center; padding: 12px; }
}

.scoreboard { position: fixed; z-index: 20; inset: 0 0 auto; height: var(--score-height); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #e5e8df; background: #fff; }
.score-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-right: 1px solid #e5e8df; }
.score-item > span { font-size: 0.75rem; }
.score-item strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.score-item small { font-size: 0.65rem; font-weight: 400; }
.score-item.is-current { background: #e8eddf; box-shadow: inset 0 -3px #304f3f; }
.target-label { display: block; margin-bottom: 3px; font-size: 0.65rem; }
.target-select { display: block; width: 100%; border: 1px solid #bdc8b6; border-radius: 5px; padding: 5px 2px; font-size: 0.7rem; margin-bottom: 7px; background: white; color: #304f3f; }

@media (max-height: 680px) {
  .playing-card { height: 240px; }
  .playing-card .card-title { font-size: 0.9rem; }
  .playing-card .card-effect { font-size: 0.8rem; }
  .playing-card .card-effect--medium { font-size: 0.74rem; }
  .playing-card .card-effect--long { font-size: 0.66rem; }
  .target-select { padding: 3px 2px; margin-bottom: 4px; }
  .button-play { padding: 6px; }
}

.scene-card-ghost { position: fixed !important; z-index: 1150; pointer-events: none; margin: 0; }
.scene-lightning { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1200; pointer-events: none; overflow: visible; }

/* Scores and persistent card columns share exactly the same grid. */
.scoreboard { left: var(--sidebar-width); }
.table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.table-column { position: relative; min-width: 0; height: 100%; overflow: hidden; border-left: 1px solid #e5e8df; }
.table-column:first-child { border-left: 0; }
.player-drop-zone { inset: 6px; width: auto; min-height: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; background: #f5f9ebc9; font-size: 1rem; }
.player-drop-zone[hidden] { display: none; }
/* Hand, drag preview and table use the same layout width, even in narrow seats. */
#sandbox .playing-card { width: min(180px, calc((100vw - var(--sidebar-width)) / var(--player-count, 3) - 12px)); }
.hand-panel:has(.hand[style*="visible"]) { z-index: 100; }

.submission-page { max-width: 850px; margin: 40px auto; padding: 24px; }
.submission-page h1 { margin-bottom: 24px; }
.submission-page h2 { font-size: 1.1rem; margin: 20px 0 10px; }
.submission-page p { line-height: 1.6; }
.submission-form { display: grid; gap: 12px; }
.submission-form input, .submission-form textarea { width: 100%; padding: 12px; border: 1px solid #bac6b7; border-radius: 6px; font: inherit; }
.submission-form label { margin-top: 12px; font-weight: 650; }
.submission-filters, .submission-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0; }
.submission-filters [aria-current="page"] { font-weight: 800; }
.submission-summary { border-bottom: 1px solid #bac6b7; padding: 12px 0; }
.submission-attempt { margin: 18px 0; }
.submission-attempt pre { overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; }
.blank-card { background: white; }
.blank-card .card-art { background: transparent; display: flex; align-items: center; }
.blank-card .card-back-swirl { position: relative; top: auto; left: 10%; width: 80%; }
.blank-card .card-effect { text-align: center; }
.blank-card .card-effect p { margin: 0; }
.blank-card .button { display: block; padding: 10px 6px; font-size: .7rem; text-decoration: none; }
.blank-card.is-generating .card-back-swirl { animation-duration: 2s; }
@media (prefers-reduced-motion: reduce) { .blank-card.is-generating .card-back-swirl { animation: none; } }
.deck-option span { flex: 1; }
.deck-option input[type="number"] { width: 80px; height: auto; padding: 8px; border: 1px solid #bdc8b6; border-radius: 5px; font: inherit; }