.arcade-feature { margin: 0 7% 80px; padding-top: 36px; border-top: 1px solid var(--line); }
.arcade-feature h2 { font-size: clamp(32px,5vw,56px); }
.arcade-feature button:not(.button) { background:#15181c; color:#fff; border:1px solid #929b9f; padding:12px 16px; min-height:44px; font:inherit; cursor:pointer; }
.arcade-feature button:focus-visible { outline:3px solid #a9baff; outline-offset:3px; }
.score-table { width: 100%; border-collapse: collapse; font-family: ui-monospace,monospace; font-size: clamp(16px,2vw,23px); background: #080b13; color: #ecf1ff; }
.score-table caption { text-align: left; padding: 24px 16px; color: #a9baff; }
.score-table th,.score-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid #303848; }
.score-table tbody tr:nth-child(1) { color: #ffe29a; font-weight: bold; }
.score-table tbody tr:nth-child(2) { color: #cbd9ee; }
.score-table tbody tr:nth-child(3) { color: #e6b18f; }
.venue-wall { padding: clamp(20px,4vw,44px); background: repeating-linear-gradient(3deg,#252723 0 9px,#292b27 10px 12px); border: 8px solid #3c3c36; }
.wall-notes { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); gap: 28px; padding: 28px 0; }
.wall-note { position: relative; background: #e4dcc2; color: #222; padding: 28px 22px; margin: 0; transform: rotate(var(--tilt)); font: 900 22px/1.4 'Arial Black','Impact',sans-serif; font-style:normal; letter-spacing:.04em; text-transform:uppercase; text-shadow:.5px .5px 0 currentColor; overflow-wrap: anywhere; white-space: pre-wrap; box-shadow: 3px 6px 0 #0006; }
.wall-note::before { content: ''; position: absolute; top: -8px; left: 30%; width: 70px; height: 22px; background: #d2c398aa; transform: rotate(-4deg); }
.marker-red { color:#8a2028; } .marker-blue { color:#173b80; } .marker-green { color:#245031; }
.wall-form { display: grid; gap: 14px; max-width: 650px; }
.wall-form textarea,.wall-form select { width:100%; box-sizing:border-box; padding:14px; background:#15181c; color:#fff; border:1px solid #929b9f; font:inherit; }
.wall-form button { min-height:44px; justify-self:start; }
.wall-form :focus-visible { outline:3px solid #a9baff; outline-offset:3px; }
.score-entry { max-width: min(420px,85vw); background:#10151f; color:#fff; border:2px solid #a9baff; padding:28px; font:16px/1.6 ui-monospace,monospace; }
.score-entry::backdrop { background:#000b; }
.score-entry label,.score-entry input { display:block; }
.score-entry [hidden] { display:none; }
.score-entry input { width:100%; box-sizing:border-box; background:#000; color:#fff; padding:12px; font:32px ui-monospace,monospace; letter-spacing:.4em; text-transform:uppercase; margin:16px 0; }
.score-entry button { min-height:44px; margin:8px; padding:10px; cursor:pointer; }
@media (max-width:600px) { .score-table th,.score-table td { padding:12px 8px; } .arcade-feature { margin-bottom:48px; } }
@media (prefers-reduced-motion:reduce) { .wall-note { transform:none; } }

/* Games lead the document and the phone layout; side zones share their row. */
.arcade-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:'games games' 'wall scores'; gap:24px; margin:0 5% 72px; align-items:start; }
.arcade-layout > * { min-width:0; }
.arcade-layout .arcade-collection { grid-area:games; margin:0 0 24px; width:100%; max-width:100%; min-width:0; }
.arcade-layout .gallery-card, .arcade-layout .gallery-card > div, .arcade-layout .collection-preview { min-width:0; max-width:100%; }
.arcade-layout .gallery-card img { width:100%; max-width:100%; min-width:0; height:auto; box-sizing:border-box; }
.arcade-layout [aria-labelledby="wall-heading"] { grid-area:wall; }
.arcade-layout [aria-labelledby="scores-heading"] { grid-area:scores; }
.arcade-layout .arcade-feature { margin:0; padding-top:20px; overflow-wrap:anywhere; }
.arcade-layout .arcade-feature h2 { font-size:clamp(22px,2.6vw,32px); margin:14px 0; line-height:1.15; }
.arcade-layout .arcade-feature p { font-size:14px; line-height:1.6; }
.arcade-layout .eyebrow { font-size:10px; letter-spacing:.09em; }
.arcade-layout .score-table { table-layout:fixed; font-size:14px; }
#score-game { display:block; width:100%; min-width:0; min-height:44px; margin:10px 0; padding:8px 4px; background:#15181c; color:#fff; border:1px solid #929b9f; font-size:12px; }
.arcade-layout .score-table th,.arcade-layout .score-table td { padding:12px 6px; }
.arcade-layout .score-table caption { padding:16px 8px; font-size:13px; }
.arcade-layout .score-table th:first-child { width:22%; }
.arcade-layout .score-table th:nth-child(2) { width:30%; }
.arcade-layout .venue-wall { padding:14px; border-width:4px; }
.arcade-layout .wall-notes { display:block; max-height:380px; overflow-y:auto; padding:10px 4px; }
.arcade-layout .wall-note { font-size:16px; padding:22px 12px; margin-bottom:22px; }
.arcade-layout .button { font-size:13px; padding:12px 8px; min-height:44px; box-sizing:border-box; max-width:100%; }
.arcade-layout button { max-width:100%; white-space:normal; }
.wall-editor { box-sizing:border-box; width:min(580px,calc(100% - 32px)); max-height:85dvh; overflow-y:auto; background:#171b1a; color:#fff; border:2px solid #929b9f; padding:24px; }
.wall-editor::backdrop { background:#000b; }
.wall-editor h2 { font-size:28px; }
.wall-editor button:not(.button),.wall-open { min-height:44px; background:#15181c; color:#fff; border:1px solid #929b9f; padding:12px; font:inherit; cursor:pointer; }
.wall-editor :focus-visible { outline:3px solid #a9baff; outline-offset:3px; }
@media (min-width:1150px) {
  .arcade-layout { grid-template-columns:minmax(0,1fr) minmax(0,2.3fr) minmax(0,1fr); grid-template-areas:'wall games scores'; gap:28px; margin-left:4%; margin-right:4%; }
  .arcade-layout .arcade-collection { grid-template-columns:minmax(0,1fr); gap:48px; margin:0; }
}
@media (max-width:600px) {
  .arcade-layout { width:calc(100% - 32px); max-width:calc(100% - 32px); margin-left:16px; margin-right:16px; gap:12px; }
  .arcade-layout .arcade-collection { grid-template-columns:minmax(0,1fr); gap:28px; }
  .arcade-layout .gallery-card { overflow-wrap:anywhere; padding-top:16px; }
  .arcade-layout .gallery-card h2 { font-size:clamp(24px,7vw,30px); line-height:1.2; margin:16px 0 12px; }
  .arcade-layout .gallery-card p { font-size:14px; line-height:1.6; }
  .arcade-layout .collection-preview img { aspect-ratio:16 / 10; margin-bottom:16px; }
  .arcade-layout .arcade-feature h2 { font-size:22px; }
  .arcade-layout .arcade-feature p { font-size:12px; }
  .arcade-layout .score-table { font-size:12px; }
  .arcade-layout .score-table th,.arcade-layout .score-table td { padding:10px 3px; }
  .arcade-layout .venue-wall { padding:8px; }
  .arcade-layout .wall-note { font-size:14px; }
  .arcade-layout .wall-notes { max-height:260px; }
  .arcade-layout .arcade-feature button { font-size:12px; padding:10px 6px; }
}

/* Reserve a separate lane for the existing switch decoration. */
.arcade-layout .button { padding:12px 10px 12px 56px; isolation:isolate; }
.arcade-layout .button::before { left:12px; width:18px; z-index:0; }
.arcade-layout .button::after { left:30px; width:10px; z-index:0; }
.arcade-layout .arcade-heading { grid-area:heading; margin:0; padding:0 0 20px; min-width:0; }
.arcade-layout { grid-template-areas:'heading heading' 'games games' 'wall scores'; }
#score-game[hidden] { display:none; }
.score-games { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; margin:16px 0; padding:4px; border:1px solid #64738d; background:#090d15; }
.arcade-layout .score-games button { min-width:0; min-height:52px; padding:10px 6px; font-size:12px; font-weight:700; line-height:1.4; border:1px solid transparent; }
.arcade-layout .score-games button[aria-checked="true"] { background:#afc1ff; color:#071020; border-color:#e2eaff; box-shadow:inset 0 -3px #567bea; }
.score-games button:hover { border-color:#afc1ff; }
.arcade-layout .wall-notes { position:relative; display:block; height:80px; max-height:none; overflow:hidden; padding:0; }
.arcade-layout .wall-note { position:absolute; box-sizing:border-box; padding:18px 10px; margin:0; min-height:64px; max-height:none; overflow:hidden; border:1px solid #433f2d44; font-size:14px; border-radius:1px 2px calc(1px + var(--age,0)*10px) 1px; }
.wall-note::after { content:''; position:absolute; right:0; bottom:0; width:calc(3px + var(--age,0)*17px); height:calc(3px + var(--age,0)*17px); background:linear-gradient(135deg,#0000 48%,#897c5266 49%,#f0e2b6 70%); pointer-events:none; }
.arcade-layout .venue-wall { max-height:480px; overflow-y:auto; overflow-x:hidden; }
@media(min-width:1150px) {
  .arcade-layout { grid-template-areas:'heading heading heading' 'wall games scores'; row-gap:30px; }
  .arcade-layout .arcade-heading h1 { font-size:clamp(36px,3.7vw,56px); }
}
@media(max-width:600px) {
  .score-games { grid-template-columns:minmax(0,1fr); }
  .arcade-layout .venue-wall { max-height:320px; }
}
@media(max-width:600px) { .arcade-layout .wall-note { transform:none; padding:18px 8px; } }
.wall-note::before { width:50%; max-width:70px; }
.arcade-layout .venue-wall { box-sizing:border-box; max-height:none; }
.arcade-layout .wall-note { min-height:0; padding:12px 8px; overflow:visible; }
.arcade-layout .wall-note:focus-visible { outline:3px solid #afc1ff; outline-offset:2px; }