/* Box-inspired skin over the unchanged, functional base stylesheet.
   Original CSS, no copied box artwork, no external fonts, no motion. */
:root {
  --paper:#fff9e5; --ink:#36234f; --muted:#665975; --line:#aaa0bb;
  --surface:#e8f6f5; --orange:#d44478; --red:#a62549; --gold:#f5e56b;
  --blue:#079fc5; --pink:#f4b6ca; --mint:#bcebc7;
  --frame:3px solid var(--ink); --display:'Arial Black','Arial Bold',Arial,sans-serif;
}
body {
  min-height:100vh; background-color:var(--blue);
  background-image:linear-gradient(118deg,transparent 15%,#55e7d34d 30%,#ffffff45 39%,transparent 47%,#abea924d 66%,transparent 78%),linear-gradient(155deg,#1678bd 0%,#08b8d2 40%,#51d7c3 72%,#008fc5 100%);
  background-attachment:fixed;
}
body::before {content:'';position:fixed;inset:12px;border:2px solid #fff5c78c;outline:2px solid #36234f80;outline-offset:4px;pointer-events:none}
:focus-visible {outline-color:#a82160}
button {border:2px solid var(--ink);border-radius:5px;background:var(--paper);font-weight:700;box-shadow:2px 2px 0 var(--ink)}
button:hover:not(:disabled) {background:#ece3f6}
button:active:not(:disabled) {box-shadow:none;transform:translate(1px,1px)}
button:disabled {box-shadow:none}
.primary {background:var(--gold);color:var(--ink);border:var(--frame);box-shadow:3px 3px 0 var(--ink);font-weight:800}
.primary:hover:not(:disabled) {background:#fff2a0}
.text-button {background:transparent;box-shadow:none;border-color:transparent}
.masthead,main {width:min(1120px,calc(100% - 72px))}
.masthead {min-height:150px;padding:24px 0 15px;border:0}
.brand {display:inline-flex;flex-direction:column;align-items:center;transform:rotate(-2deg);flex-shrink:0}
.brand .brand-word {
  display:block;padding:0 14px 2px;border:var(--frame);outline:2px solid var(--paper);outline-offset:3px;
  background:var(--paper);color:#e6e77d;font:900 54px/.98 var(--display);letter-spacing:-3px;
  -webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:2px 2px 0 var(--ink);box-shadow:5px 5px 0 var(--ink);
}
.brand-word > span {font-size:1.2em;margin-left:2px}
.brand small {background:var(--ink);color:var(--paper);padding:5px 12px;margin-top:10px;font-size:9px;letter-spacing:2px;line-height:1.2}
.top-actions {gap:12px}
main {padding:22px 0 30px}
h1,h2,h3 {font-family:var(--display);font-weight:900}
h1 {font-size:clamp(34px,4.5vw,56px);letter-spacing:-2px}
h1 em {font-family:inherit;font-style:normal;color:var(--gold);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:2px 2px 0 var(--ink)}
h2 {font-size:25px;letter-spacing:-.8px}
.eyebrow {font-weight:800}
.setup {gap:28px;padding:10px 0 20px;align-items:start}
.setup-intro,#setup-form,.round-section,.history-section,.game-heading {border:var(--frame);border-radius:8px;box-shadow:5px 5px 0 var(--ink);padding:28px;background:var(--paper);min-width:0}
.setup-intro {position:relative;background:linear-gradient(135deg,#a7eaf2,#6cdece 60%,#d2efac);overflow:hidden}
.setup-intro > .eyebrow {display:inline-block;border:2px solid var(--ink);padding:4px 9px;background:var(--paper);transform:rotate(-2deg)}
.setup-intro > p:not(.eyebrow) {color:var(--ink);font-size:16px;line-height:1.6}
.box-fan {position:relative;width:126px;height:80px;margin:28px 0 10px 12px}
.box-fan i {position:absolute;left:35px;top:3px;width:48px;height:72px;border:var(--frame);border-radius:6px;background:var(--pink);transform:rotate(-29deg);transform-origin:50% 100%;box-shadow:inset 0 0 0 3px var(--paper)}
.box-fan i:nth-child(2) {background:var(--gold);transform:rotate(-8deg)}
.box-fan i:nth-child(3) {background:#a8d8ef;transform:rotate(14deg)}
.box-fan i:nth-child(4) {background:var(--mint);transform:rotate(35deg)}
.rule-note {max-width:none;padding:16px;border:2px solid var(--ink);background:var(--paper);margin-top:22px}
.rule-note p {margin:8px 0 0}
.name-row {grid-template-columns:29px 1fr auto;gap:9px;margin-bottom:12px}
.seat {color:var(--ink);font-family:Arial,sans-serif;font-weight:800}
.name-row button {background:#efe4f1}
input[type=text],input[type=number] {background:#fffdf6;border:2px solid #857292;border-radius:4px}
input[aria-invalid=true] {border-color:var(--red);background:#fff0f0}
input[type=checkbox] {width:20px;height:20px}
.target-label {font-weight:700}
.target-label input {width:105px}
.target-label .muted {font-weight:400}
.game-heading {padding:21px 25px;margin-bottom:28px}
.game-heading h1 {font-size:36px;letter-spacing:-1.5px}
.game-meta {color:var(--ink)}
.section-line {margin-bottom:16px}
#game > section[aria-labelledby=leader-title] > .section-line {padding:12px 16px;border:2px solid var(--ink);background:var(--paper);border-radius:5px}
.leaderboard {gap:16px;margin-bottom:30px}
.score-card {--card:#fff1aa;position:relative;border:var(--frame);border-radius:9px;padding:22px;background:var(--card);box-shadow:4px 4px 0 var(--ink)}
.score-card::before {content:'';position:absolute;inset:6px;border:1px solid #36234f66;border-radius:4px;pointer-events:none}
.score-card:nth-child(4n+2) {--card:#bfe9f4}
.score-card:nth-child(4n+3) {--card:#f5c3d2}
.score-card:nth-child(4n+4) {--card:#cee8b3}
.score-card.is-winner {--card:#f5e56b;border-color:var(--ink)}
.score-top {align-items:flex-start}
.score-name {font-size:17px;font-weight:800;min-width:0}
.rank {font:800 9px Arial,sans-serif;padding:3px 5px;border:1px solid var(--ink);border-radius:3px}
.score-total {font:900 62px/1.1 var(--display);margin:14px 0;letter-spacing:-3px;font-variant-numeric:tabular-nums}
.score-card progress {height:7px;border:0}
.score-card progress::-webkit-progress-bar {background:#36234f24;border-radius:2px}
.score-card progress::-webkit-progress-value {background:var(--ink);border-radius:2px}
.score-card small {color:#554467}
.winner {border:var(--frame);border-radius:6px;font-weight:800;box-shadow:4px 4px 0 var(--ink)}
.winner.tie {background:#e7e1f2}
.round-section,.history-section {margin:28px 0}
.round-inputs {gap:8px}
.entry-row {border-bottom-color:#cfc3cf}
.entry-row label {font-weight:800}
.round-score {font-size:24px!important;font-weight:800!important;border-color:var(--ink)!important}
.entry-row button:nth-of-type(1) {background:#fae1e7;color:#8b2345}
.entry-row .open-calc {background:#d9eff5}
th,td {border-bottom-color:#cfc3cf}
th {font-weight:800}
thead {background:#e5dbed}
tfoot th,tfoot td {font-weight:800;background:#faf0c6}
.empty {padding:22px 0 0}
.storage-status {color:#4c3f5d;background:#fff9e5eb;border:2px solid var(--ink);border-radius:5px;padding:12px 16px}
#announcement {padding:12px 16px;background:var(--paper);border:2px solid var(--ink);border-radius:5px}
.help {border:2px solid var(--ink);border-radius:5px;padding:12px 16px;background:var(--paper)}
footer {border:0;padding:20px 2px;font-weight:700;color:#2f2348}
dialog {width:min(620px,calc(100% - 28px));border:var(--frame);border-radius:10px;box-shadow:7px 7px 0 #241538}
dialog::backdrop {background:#251b40c9}
.calc-heading {gap:16px}
.calc-heading button {box-shadow:none}
.card-grid {gap:9px}
.card-grid button {min-height:70px;font:900 30px var(--display);background:#bfe9f4;border:2px solid var(--ink);border-radius:6px;box-shadow:inset 0 0 0 3px var(--paper),2px 2px 0 var(--ink)}
.card-grid button:nth-child(4n+2) {background:#cee8b3}
.card-grid button:nth-child(4n+3) {background:#fff1aa}
.card-grid button:nth-child(4n+4) {background:#f5c3d2}
.card-grid button[aria-pressed=true] {background:var(--ink);color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold),2px 2px 0 var(--ink)}
.card-grid button:hover:not(:disabled):not([aria-pressed=true]) {background:#fffdf6}
.calc-options {gap:12px}
.calc-result {border-top:2px solid var(--ink)}
.calc-result output {font:900 60px var(--display);letter-spacing:-3px}
#apply-calc {width:100%}
@media(max-width:700px) {
  body::before {inset:7px;outline-offset:2px}
  .masthead,main {width:calc(100% - 36px)}
  .masthead {min-height:122px;gap:20px;padding:20px 4px 10px}
  .brand .brand-word {font-size:40px;padding:0 10px 2px}
  .brand small {font-size:8px;letter-spacing:1.1px;padding:5px 9px}
  .top-actions {gap:8px}
  main {padding-top:15px}
  .setup {gap:22px;padding-top:0}
  .setup-intro,#setup-form,.round-section,.history-section {padding:20px;box-shadow:3px 3px 0 var(--ink)}
  .setup h1 {font-size:42px;letter-spacing:-2px}
  .setup #setup-form {border-top:var(--frame)}
  .box-fan {height:61px;margin:18px 0 12px 8px;transform:scale(.8);transform-origin:left top}
  .rule-note {margin-top:13px;padding:12px}
  .game-heading {padding:17px;gap:14px}
  .game-heading h1 {font-size:28px;letter-spacing:-1px}
  .game-meta {max-width:93px;font-size:11px;flex-shrink:0}
  .leaderboard {gap:11px}
  .score-card {padding:16px 13px;box-shadow:3px 3px 0 var(--ink)}
  .score-total {font-size:43px;letter-spacing:-2px}
  .score-name {display:block;font-size:14px}
  .score-top {display:block}
  .rank {display:inline-block;font-size:8px;margin-top:6px}
  .entry-row {grid-template-columns:minmax(0,1fr) 83px;gap:9px}
  .entry-row button {font-size:11px}
  .entry-row button:last-child {text-align:center}
  .section-line > .muted {max-width:115px}
  .section-line h2 {font-size:23px}
  .form-actions {gap:10px}
  .round-section .section-line .text-button {max-width:126px;font-size:11px;padding:6px 0}
  footer {padding-left:4px;padding-right:4px}
  .calc-heading h2 {font-size:22px}
  .card-grid {gap:8px}
  .card-grid button {min-height:58px;font-size:27px}
}
@media(max-width:359px) {
  .masthead {gap:16px}
  .top-actions {width:100%}
  .top-actions button {flex:1}
  .setup-intro,#setup-form,.round-section,.history-section {padding:15px}
  .setup h1 {font-size:37px}
  .game-heading {flex-direction:column;gap:10px}
  .game-meta {max-width:none;text-align:left}
  .round-section .section-line {flex-direction:column}
  .round-section .section-line .text-button {max-width:none;text-align:left}
  .section-line h2 {font-size:21px}
}
/* Roles remain readable on the same box-inspired paper surface. */
.live-panel {margin:0 0 28px;padding:22px 25px;background:var(--paper);border:var(--frame);border-radius:8px;box-shadow:4px 4px 0 var(--ink);min-width:0}
.live-panel .section-line {margin-bottom:12px}
.live-panel h2 {font-size:24px}
#live-status {font-size:14px;margin-bottom:12px}
.live-role {flex-shrink:0;border:2px solid var(--ink);border-radius:4px;padding:5px 9px;background:var(--mint);font-size:11px;font-weight:800}
.live-panel[data-role=host] .live-role {background:var(--gold)}
.live-panel[data-role=viewer] .live-role {background:#bfe9f4}
.live-tools {display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.live-tools button,.live-tools a {font-size:12px}
#watch-share {border-top:1px solid var(--line);margin-top:16px;padding-top:8px}
#watch-share label {display:block;font-size:12px;font-weight:700;margin:6px 0 9px}
.watch-controls {display:flex;gap:10px;align-items:stretch}
.watch-controls input {min-width:0;flex:1;width:100%;border:2px solid #857292;border-radius:4px;background:#fffdf6;padding:11px;font:13px Arial,sans-serif;color:var(--ink)}
.watch-controls button {flex-shrink:0}
#watch-share .muted {margin:12px 0 0}
@media(max-width:700px) {.live-panel{padding:18px;box-shadow:3px 3px 0 var(--ink)}.live-panel .eyebrow{font-size:9px;letter-spacing:1px}.live-panel h2{font-size:22px}.watch-controls{flex-direction:column}.watch-controls input{flex:none;min-height:46px}.live-tools button{max-width:100%;white-space:normal;text-align:left}}