/* A quiet board, recognizable faces and clear targets. Cards keep the spotlight. */
.playground { --sidebar-width: 198px; --score-height: 142px; --objective-height: 78px; --final-round-height: 0px; color: #2b243b; background: #fff; }
.playground #sandbox.is-final-round { --final-round-height: 54px; }
.win-condition-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px 22px; color: #f8f2ff; background: #392653; border-bottom: 3px solid #b48be8; }
.win-condition-label { display: block; margin-bottom: 3px; color: #d7b5ff; font: 750 .58rem system-ui, sans-serif; text-transform: uppercase; letter-spacing: .16em; }
.win-condition-banner h2 { font: 750 clamp(1rem, 1.6vw, 1.3rem)/1.15 system-ui, sans-serif; letter-spacing: -.03em; }
.win-condition-banner p { max-width: 480px; margin: 0; font: 500 .7rem/1.5 system-ui, sans-serif; text-align: right; }
.playground .win-condition-banner { position: fixed; z-index: 24; top: 0; left: var(--sidebar-width); right: 0; height: var(--objective-height); }
.playground .game-results { max-height: calc(100svh - var(--score-height) - var(--objective-height) - 48px); width: min(580px, calc(100vw - var(--sidebar-width) - 24px)); }
.final-round-banner { position: fixed; z-index: 23; top: var(--objective-height); left: var(--sidebar-width); right: 0; height: var(--final-round-height); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 20px; color: #4c2e0e; background: #ffe39b; border-bottom: 2px solid #d09a26; }
.final-round-banner strong { flex-shrink: 0; font-size: .9rem; }
.final-round-banner strong span { margin-left: 8px; font-size: .65rem; font-weight: 600; }
.final-round-banner p { margin: 0; max-width: 410px; font-size: .68rem; line-height: 1.4; text-align: right; }
.final-turn-badge { padding: 3px 5px; border-radius: 4px; color: #704507; background: #ffecbf; }
.objective-progress { display: block; margin: 0 0 6px; color: #6f448f; font: 700 .62rem/1.25 system-ui, sans-serif; }
.result-objective { font-size: .75rem; line-height: 1.5; }
.lobby-page .win-condition-banner { border-radius: 12px; margin: 20px 0; }
.deck-picker select { max-width: 100%; padding: 10px; border: 1px solid #bac6b7; border-radius: 8px; background: white; }
.deck-picker [data-controller="win-condition-setup"] { display: grid; gap: 12px; }
.deck-picker [data-controller="win-condition-setup"] [hidden] { display: none; }
.deck-picker [data-controller="win-condition-setup"] label { display: block; margin-bottom: 5px; }
.playground .player-sidebar { top: 0; z-index: 25; padding: 28px 20px 20px; color: #f5efff; background: #251d35; border-right: 1px solid #3f3257; text-align: left; }
.game-brand { margin: 0 0 32px; font: 800 1.5rem/.95 Georgia, serif; letter-spacing: -.05em; }
.game-brand span, .game-brand b { display: block; }
.game-brand b { margin-top: 5px; font-size: 1.8rem; color: #d6bbff; }
.playground .player-sidebar .eyebrow { color: #b0a2c8; font-size: .58rem; letter-spacing: .16em; }
.playground .player-sidebar h1 { margin-bottom: 12px; font: 750 1.15rem/1.25 system-ui, sans-serif; letter-spacing: -.035em; }
.playground .player-sidebar > p, .playground .game-menu > p { font-size: .75rem; }
.playground .player-sidebar .points { color: #d6cde4; font-size: .72rem; }
.playground .player-sidebar .points strong { color: #fff; font-size: 1.35rem; }
.playground .player-sidebar .deck-card { margin: 32px auto 24px; }
.playground .deck-count { font-size: .69rem; color: #c7bdd6; text-align: center; }
.playground .deck-count strong { color: #fff; font-size: 1.05rem; }
.playground .player-sidebar .hint { color: #b8abc9; font-size: .67rem; }
.playground .deck-mix { margin-top: 6px; text-align: center; }
.playground .turn-instruction { padding: 13px 0; margin: 16px 0 4px; border-top: 1px solid #ffffff1c; line-height: 1.6; color: #eee5fb; }
.playground .player-sidebar .button { font-size: .73rem; padding: 11px 10px; border-radius: 9px; }
.playground .player-sidebar .button-primary { color: #241936; background: #dcc7ff; box-shadow: 0 3px 0 #9d81c4; }
.playground .player-sidebar .button-secondary { color: #e6dcf1; border-color: #625371; background: #ffffff06; }
.playground .player-sidebar a:not(.button) { color: #decbfb; text-underline-offset: 3px; }
.playground .player-sidebar .notice { color: #f5d48b; }
.playground .discard-pile { border-color: #51445f; border-radius: 9px; background: #ffffff04; }
.playground .discard-pile ul { max-height: 180px; overflow-y: auto; }
.playground .final-round-notice { color: #ffe6a1; border-color: #b4994f; background: #725d281f; font-size: .7rem; }
.seat-0 { --seat-color: #9365cc; --seat-pale: #f1eafb; }
.seat-1 { --seat-color: #328978; --seat-pale: #e6f5f0; }
.seat-2 { --seat-color: #d28b44; --seat-pale: #fff1df; }
.seat-3 { --seat-color: #5185bf; --seat-pale: #eaf2fd; }
.playground .score-item { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-content: center; align-items: center; justify-content: stretch; gap: 0 12px; padding: 13px; min-width: 0; background: #fff; border: 1px solid #e6e1ec; border-radius: 16px; box-shadow: 0 3px 0 #e7e3ec; }
.playground .score-item.is-current { background: var(--seat-pale); border: 2px solid var(--seat-color); box-shadow: 0 3px 0 var(--seat-color); }
.player-heading { display: flex; align-items: center; gap: 6px; min-width: 0; }
.player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 750 .95rem/1.2 system-ui, sans-serif; letter-spacing: -.03em; }
.you-badge { font: 500 .65rem/1.2 system-ui, sans-serif; color: #756683; white-space: nowrap; }
.playground .score-item strong { display: block; margin: 5px 0; font-size: clamp(1.25rem, 2.1vw, 1.9rem); line-height: 1; letter-spacing: -.06em; }
.playground .score-item strong small { font-size: .58rem; color: #84788f; letter-spacing: 0; }
.player-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; color: #908697; font-size: .57rem; }
.turn-badge { font-weight: 750; }
.is-current .turn-badge { color: var(--seat-color); }
.is-current .turn-badge::before { content: ""; display: inline-block; vertical-align: middle; margin: 0 4px 2px 0; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.player-statuses { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; }
.player-statuses:not(:has(*)) { display: none; }
.playground .player-statuses small { margin-top: 5px; padding: 3px 6px; font-size: .56rem; color: #765414; background: #fff2c8; border-radius: 4px; }
.player-avatar { position: relative; width: 72px; height: 72px; flex-shrink: 0; border-radius: 20px; background: #eee5f8; border: 2px solid #fff; box-shadow: 0 2px 6px #30243d1a; overflow: hidden; isolation: isolate; }
.avatar-portrait { width: 100%; height: 100%; display: block; object-fit: cover; }
.avatar-accessory { position: absolute; pointer-events: none; }
.avatar-mustache { width: 50%; left: 25%; top: 64%; }
.avatar-beard { width: 50%; left: 25%; top: 67%; }
.avatar-crown { width: 56%; left: 22%; top: 0; }
.is-golden-avatar .avatar-portrait, .is-golden-avatar .avatar-mustache, .is-golden-avatar .avatar-beard { filter: sepia(1) saturate(2.7) brightness(1.15); }
.is-golden-avatar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 25%, #ffe89366 40%, #fff9d280 46%, transparent 62%); }
.playground .table-column { border-color: #f0edf3; }
.column-watermark { position: absolute; top: 18px; left: 0; width: 100%; pointer-events: none; color: #b5abbf; text-align: center; font: 650 .6rem system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.playground .player-drop-zone { border: 2px dashed var(--seat-color); background: color-mix(in srgb, var(--seat-pale) 80%, transparent); color: #392b4c; border-radius: 14px; font: 750 1rem system-ui, sans-serif; backdrop-filter: blur(1px); box-shadow: none; }
.playground .player-drop-zone.is-over, .playground .player-drop-zone:focus-visible { background: var(--seat-pale); outline: 3px solid var(--seat-color); outline-offset: -5px; border-style: solid; }
.playground .hand-heading .hint { color: #756583; background: #fffffff2; border: 1px solid #eee7f5; box-shadow: 0 2px 8px #30243d0a; padding: 5px 14px; }
.playground .game-results { border-radius: 20px; border: 2px solid #b799df; background: #fff; box-shadow: 0 10px 50px #30243d26; }
.playground .game-results .is-winner { background: #f1eafb; }
.result-player { display: flex; gap: 12px; align-items: center; }
.result-player .player-avatar { width: 48px; height: 48px; border-radius: 13px; }
.avatar-picker { border: 0; padding: 0; margin: 4px 0; }
.avatar-picker legend { font-size: .8rem; font-weight: 700; margin: 0 0 12px; }
.avatar-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.avatar-option { position: relative; display: flex; align-items: center; flex-direction: column; padding: 5px 5px 9px; border: 2px solid transparent; border-radius: 14px; background: #fff; cursor: pointer; }
.avatar-option img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; }
.avatar-option span { font: 650 .66rem system-ui, sans-serif; margin-top: 5px; }
.avatar-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.avatar-option:has(input:checked) { border-color: #9365cc; background: #f1eafb; box-shadow: 0 3px 0 #9365cc; }
.avatar-option:has(input:focus-visible) { outline: 3px solid #9365cc; outline-offset: 3px; }
.avatar-picker .hint { margin-top: 12px; }
.guest-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82rem; }
.guest-identity img { border-radius: 14px; border: 2px solid #fff; }
.lobby-seats .player-avatar { width: 52px; height: 52px; border-radius: 15px; }
.lobby-seats li { align-items: center; }
.lobby-seats .ready-label { margin-left: auto; font-size: .8rem; }
.guest-welcome .welcome-card { width: 110px; height: 154px; margin: 24px auto; }
.guest-welcome h1 { margin: 18px 0; }
@media (max-width: 1100px) {
  .playground { --sidebar-width: 168px; --score-height: 132px; }
  .playground .player-sidebar { padding: 22px 14px; }
  .playground .score-item { grid-template-columns: 50px minmax(0, 1fr); padding: 10px 8px; gap: 0 8px; border-radius: 13px; }
  .score-item .player-avatar { width: 50px; height: 50px; border-radius: 15px; }
  .player-name { font-size: .8rem; }
  .you-badge { display: none; }
}
@media (max-height: 750px) {
  .playground .player-sidebar { padding-top: 16px; }
  .game-brand { margin-bottom: 20px; font-size: 1.2rem; }
  .game-brand b { font-size: 1.5rem; }
  .playground .player-sidebar .deck-card { margin-top: 24px; margin-bottom: 18px; }
}
/* Opponents above, your own area below, at every screen size. */
.playground .table-panel { top: calc(var(--objective-height) + var(--final-round-height)); bottom: calc(180px - var(--final-round-height)); padding: 12px; }
#sandbox .table.player-areas { grid-template-columns: repeat(var(--opponent-count), minmax(0, 1fr)); grid-template-rows: minmax(0, 3fr) minmax(248px, 2fr); gap: 12px; overflow: visible; background: transparent; }
.player-area { grid-column: var(--opponent-column); grid-row: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; }
.player-area--self { grid-column: 1 / -1; grid-row: 2; }
.player-area:has(.player-drop-zone:not([hidden])) { border-color: color-mix(in srgb, var(--seat-color) 40%, transparent); background: color-mix(in srgb, var(--seat-pale) 35%, white); }
.player-area:has(.player-drop-zone.is-over) { border-color: var(--seat-color); }
.playground .player-area > .score-item { flex: 0 0 auto; display: flex; flex-flow: row wrap; align-items: center; gap: 8px; min-height: 48px; margin: 0; padding: 6px 8px; text-align: left; border: 0; border-bottom: 1px solid #f0edf3; border-radius: 8px; box-shadow: none; background: transparent; }
.playground .player-area > .score-item.is-current { background: var(--seat-pale); box-shadow: inset 0 -2px 0 var(--seat-color); }
.player-area .player-avatar { width: 32px; height: 32px; border-radius: 10px; }
.player-area .score-details { display: contents; }
.player-area .player-heading { flex: 1; }
.player-area .score-number { flex: 0 0 auto; }
.playground .player-area .score-number strong { margin: 0; font-size: 1.25rem; white-space: nowrap; }
.player-area .objective-progress { flex-basis: 100%; margin: 0; }
.player-area .objective-progress:is([data-objective-type="most_points"], [data-objective-type="lowest_points"]) { display: none; }
.player-area:not(.player-area--self) .player-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.player-area .player-statuses { flex-basis: 100%; }
.player-area--self .score-details { display: flex; align-items: center; flex: 1; min-width: 0; gap: 24px; }
.player-area--self .player-heading { flex: 0 1 auto; }
.player-area--self .player-meta { margin-left: auto; }
.player-area--self .objective-progress { flex-basis: auto; }
.player-area--self .you-badge { display: inline-block; }
.playground .player-area > .table-column { flex: 1; height: auto; min-height: 0; border: 0; }
.column-watermark { display: none; }
.game-menu:not(:popover-open) { display: block; position: static; width: auto; margin: 0; padding: 0; overflow: visible; border: 0; color: inherit; background: transparent; }
.mobile-menu-toggle, .mobile-menu-heading { display: none; }
@media (min-width: 701px) and (max-height: 850px) {
  .playground .table-panel { bottom: calc(120px - var(--final-round-height)); }
}
@media (min-width: 701px) and (max-height: 750px) {
  #sandbox .table.player-areas { grid-template-rows: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .playground { --sidebar-width: 0px; --objective-height: 64px; --toolbar-height: 48px; --hand-height: 112px; }
  .win-condition-banner { flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding: 10px; }
  .playground .win-condition-banner { padding: 8px 14px; gap: 3px; }
  .win-condition-banner p { text-align: left; font-size: .6rem; line-height: 1.3; }
  .win-condition-label { margin-bottom: 2px; font-size: .5rem; }
  .objective-progress { font-size: .55rem; margin: 2px 0; }
  .playground #sandbox.is-final-round { --final-round-height: 58px; }
  .final-round-banner { padding: 6px 12px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
  .final-round-banner strong { font-size: .75rem; }
  .final-round-banner p { font-size: .58rem; text-align: left; }
  .playground .player-sidebar { inset: calc(var(--objective-height) + var(--final-round-height)) 0 auto; width: auto; height: var(--toolbar-height); padding: 4px 12px; display: flex; align-items: center; gap: 10px; overflow: visible; border: 0; }
  .sidebar-heading { flex: 1; min-width: 0; }
  .sidebar-heading .game-brand, .sidebar-heading > .eyebrow { display: none; }
  .playground .sidebar-heading h1 { font-size: .8rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .deck-pile { display: flex; align-items: center; gap: 7px; order: -1; }
  .playground .player-sidebar .deck-card { width: 23px; height: 32px; margin: 5px 0 0 8px; }
  .playground .deck-count { max-width: 60px; text-align: left; font-size: .5rem; line-height: 1.1; }
  .playground .deck-count strong { font-size: .8rem; }
  .deck-pile .deck-card-layer { transform: translate(calc(var(--deck-layer) * -3px), calc(var(--deck-layer) * -3px)); border-width: 1px; border-radius: 4px; }
  .mobile-menu-toggle { display: block; min-height: 40px; padding: 0 10px; color: #efe4ff; border: 1px solid #76628e; border-radius: 9px; background: transparent; font-size: .7rem; cursor: pointer; }
  .turn-actions { display: flex; align-items: center; gap: 5px; }
  .turn-actions:empty { display: none; }
  .turn-actions p { display: none; }
  .playground .turn-actions form { margin: 0; }
  .playground .turn-actions .button { padding: 8px; min-height: 40px; font-size: .65rem; white-space: nowrap; }
  .game-menu:not(:popover-open) { display: none; }
  .game-menu:popover-open { position: fixed; inset: 0; width: min(360px, calc(100vw - 24px)); max-height: 80dvh; margin: auto; padding: 20px; overflow: auto; border: 1px solid #66527f; border-radius: 18px; color: #f5efff; background: #251d35; box-shadow: 0 16px 70px #1f143b55; }
  .mobile-menu-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  .playground .table-panel { inset: calc(var(--objective-height) + var(--final-round-height) + var(--toolbar-height)) 0 calc(var(--hand-height) + env(safe-area-inset-bottom)); padding: 8px; }
  #sandbox .table.player-areas { grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; }
  .playground .player-area > .score-item { gap: 3px; min-height: 40px; padding: 4px; }
  .score-item .player-avatar { width: 28px; height: 28px; border-radius: 9px; }
  .score-details { min-width: 0; width: 100%; }
  .player-heading, .player-meta, .score-number { justify-content: center; }
  .player-name { font-size: .68rem; }
  .playground .score-item strong { font-size: 1.1rem; margin: 2px 0; }
  .playground .score-item strong small, .player-meta > span:last-child { display: none; }
  .score-number { min-height: 28px; }
  .score-item .score-info { width: 28px; height: 28px; font-size: 1rem; }
  .player-meta { font-size: .52rem; }
  .player-statuses { justify-content: center; }
  .playground .player-statuses small { font-size: .5rem; margin-top: 0; padding: 2px 3px; }
  .playground .player-area--self > .score-item { flex-flow: row nowrap; padding: 4px 10px; gap: 8px; min-height: 40px; }
  .player-area--self .score-details { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .player-area--self .player-heading { justify-content: flex-start; }
  .player-area--self .objective-progress { max-width: 84px; }
  .player-area--self .you-badge { display: inline-block; }
  .player-area--self .player-statuses { flex: 0 1 auto; }
  .player-area:not(.player-area--self) .player-avatar { width: 20px; height: 20px; border-radius: 6px; }
  .player-area:not(.player-area--self) .score-details { display: contents; }
  .player-area:not(.player-area--self) .player-heading { flex: 1; min-width: 0; justify-content: flex-start; }
  .player-area:not(.player-area--self) .player-name { font-size: .6rem; }
  .player-area:not(.player-area--self) .score-number { flex: 0 0 auto; gap: 0; }
  .playground .player-area:not(.player-area--self) .score-number strong { font-size: .8rem; white-space: nowrap; }
  .player-area:not(.player-area--self) .score-info { width: 24px; height: 28px; font-size: .9rem; }
  .player-area:not(.player-area--self) .player-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .player-area:not(.player-area--self) .objective-progress { flex: 0 0 100%; margin: 0; text-align: center; }
  .player-area:not(.player-area--self) .objective-progress:is([data-objective-type="most_points"], [data-objective-type="lowest_points"]) { display: none; }
  .player-area:not(.player-area--self) .player-statuses { flex-basis: 100%; }
  .playground .player-area > .table-column { border-radius: 0 0 13px 13px; }
  .column-watermark { display: none; }
  .playground .player-drop-zone { inset: 3px; font-size: .75rem; padding: 5px; }
  #sandbox .playing-card { width: min(112px, calc((100vw - 40px) / var(--opponent-count) / .75)); height: 156px; padding: 4px; }
  .playground .hand-panel { left: 0; height: 160px; bottom: env(safe-area-inset-bottom); }
  .playground .hand { bottom: 18px; --fan-step: min(68px, calc((100vw - 140px) / var(--fan-gaps))); }
  .playground .hand-heading { bottom: 0; }
  .playground .hand-heading .hint { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .playground .game-results { width: calc(100vw - 24px); left: 50%; bottom: 12px; max-height: calc(100dvh - var(--objective-height) - var(--toolbar-height) - 32px); }
  :is(.playground .playing-card, .hand-card-ghost, .scene-card-ghost) { padding: 4px; }
  :is(.playground .playing-card, .hand-card-ghost, .scene-card-ghost) .card-heading { padding: 3px; margin-bottom: 4px; }
  :is(.playground .playing-card, .hand-card-ghost, .scene-card-ghost) .card-title { font-size: .72rem; }
  :is(.playground .playing-card, .hand-card-ghost, .scene-card-ghost) .card-effect { padding: 4px; font-size: .64rem; }
  :is(.playground .playing-card, .hand-card-ghost, .scene-card-ghost) .card-effect--medium { font-size: .58rem; }
  :is(.playground .playing-card, .hand-card-ghost, .scene-card-ghost) .card-effect--long { font-size: .52rem; }
}