@font-face{font-family:ArcadeSystem;src:local('Arial')}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px;--bg:#f7f5ef;--surface:#fffefa;--surface2:#efede5;--ink:#282638;--muted:#716e7d;--line:#e1ded8;--accent:#7657d5;--accent-ink:#fff;--soft:#ebe4fa;--shadow:0 12px 40px #3228460a;--radius:22px;--board:#f0ede5;--tile:#ddd8cc;--font:Arial,Helvetica,sans-serif;color-scheme:light}html[data-theme=dark]{--bg:#1d1d25;--surface:#272730;--surface2:#30303c;--ink:#f4f0e7;--muted:#bab5c7;--line:#41404c;--accent:#b99aef;--accent-ink:#241d35;--soft:#393047;--shadow:0 12px 40px #0002;--board:#1d1e29;--tile:#373946;color-scheme:dark}html[data-style=retro]{--radius:3px;--font:'Courier New',monospace;--accent:#6532d6;--soft:#e7dffc;--shadow:5px 5px 0 #282638;--bg:#f0edff;--surface:#fffcf0;--surface2:#e5e0f6;--line:#494158;--board:#e8e3f6;--tile:#ccc3e1}html[data-style=retro][data-theme=dark]{--bg:#111226;--surface:#1d1d38;--surface2:#292544;--ink:#f6f3ff;--muted:#c0b8db;--line:#595177;--accent:#d4a3ff;--accent-ink:#1e1430;--soft:#35224e;--shadow:5px 5px 0 #8e64dc;--board:#111327;--tile:#343051}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font);transition:background .2s,color .2s}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer}button{color:inherit}button:disabled{cursor:default;opacity:.48}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{border:0;background:none}input,select{min-height:44px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;max-width:100%}button{min-height:44px}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.12;letter-spacing:-.045em}h2{font-size:32px;margin-bottom:14px}h3{font-size:21px}p{margin-bottom:15px}.header{max-width:1376px;margin:auto;padding:26px 42px;display:flex;align-items:center;gap:40px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;white-space:nowrap;font-size:23px;letter-spacing:-.055em;font-weight:700}.brand b{font-weight:400}.brand small{display:block;font:9px/1.2 var(--font);letter-spacing:.18em;margin-top:3px}.brand-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:var(--accent);color:var(--accent-ink);font-size:32px}.header nav{display:flex;gap:28px;font-size:13px;font-weight:bold;margin-left:auto}.nav-link{padding:10px 0}.nav-link:hover{color:var(--accent)}.preferences{display:flex;align-items:center;gap:8px}.preferences select{background:transparent;border:none;font-size:13px;width:105px}.outline{border:1px solid var(--line);background:var(--surface);padding:9px 17px;border-radius:12px;font-weight:600;font-size:13px}.outline:hover{border-color:var(--accent)}.icon-button{border:1px solid var(--line);border-radius:50%;width:44px;font-size:24px}main{max-width:1280px;margin:auto;padding:0 36px}.hero{min-height:510px;display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;padding:55px 0 45px}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:bold;line-height:1.5}.status-dot{display:inline-block;width:7px;height:7px;background:#6b9f71;border-radius:50%;margin-right:8px}.hero h1{font-size:clamp(40px,4.4vw,62px);font-weight:700;line-height:1.08;margin:23px 0}.hero h1 em{font-style:normal;color:var(--accent)}.hero-description{font-size:16px;color:var(--muted);line-height:1.75}.hero-actions{display:flex;align-items:center;gap:22px;margin-top:26px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;border-radius:12px;padding:13px 20px;font-weight:600;font-size:13px;min-height:48px}.primary{background:var(--accent);color:var(--accent-ink)}.primary:hover{filter:brightness(1.08)}.text-button{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:10px;padding:8px 0}.hero-notes{display:flex;gap:20px;margin-top:26px;font-size:10px;color:var(--muted)}.hero-notes span+span:before{content:'·';margin-right:20px}.hero-art{height:400px;position:relative;isolation:isolate}.orbit{position:absolute;border:1px dashed var(--line);border-radius:50%;z-index:-1}.orbit-one{width:370px;height:370px;left:10%;top:15px}.orbit-two{width:270px;height:270px;left:20%;top:65px}.hero-cabinet{width:235px;position:absolute;left:29%;top:25px;transform:rotate(7deg);border:9px solid var(--surface);border-radius:23px;background:var(--soft);box-shadow:0 22px 35px #38285820;overflow:hidden}.cabinet-label,.cabinet-foot{display:flex;justify-content:space-between;padding:14px 12px;font-size:9px;font-weight:700;letter-spacing:.07em}.hero-cabinet canvas{width:100%;height:210px;display:block}.cabinet-foot{background:var(--surface);font-size:8px;padding-bottom:7px}.mini-card{position:absolute;border:7px solid var(--surface);border-radius:16px;background:var(--surface);box-shadow:0 12px 30px #3828581b;overflow:hidden}.mini-card canvas{display:block;width:100%;height:auto}.mini-card>span{font-size:7px;font-weight:700;padding:7px 3px 0;display:block;letter-spacing:.07em}.mini-card b{float:right}.mini-snake{width:170px;left:0;top:110px;transform:rotate(-12deg)}.mini-pong{width:180px;right:-2px;bottom:0;transform:rotate(-9deg)}.art-star{position:absolute;color:var(--accent);font-size:35px}.star-one{left:6%;top:35px}.star-two{right:0;top:75px}.floating-note{position:absolute;bottom:0;left:14%;font-size:13px;line-height:1.3;transform:rotate(-8deg);color:var(--muted)}.floating-note span{font-size:32px;position:absolute;left:-32px;top:-18px}.collection{padding-top:38px;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.section-head .eyebrow{color:var(--muted);margin-bottom:9px}.count{font-size:12px;letter-spacing:0;background:var(--surface2);padding:5px 9px;border-radius:20px;vertical-align:middle;margin-left:12px}.search{display:flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:0 12px;width:230px}.search span{font-size:25px;color:var(--muted)}.search input{border:0;background:transparent;min-width:0;width:100%;font-size:12px;outline-offset:0}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.filters button{border:1px solid var(--line);background:var(--surface);border-radius:25px;padding:10px 16px;font-size:12px;font-weight:600;white-space:nowrap}.filters button.selected{background:var(--ink);border-color:var(--ink);color:var(--bg)}.filter-description{font-size:12px;color:var(--muted);margin:15px 0 23px}.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.game-card{display:block;text-align:left;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .18s,border-color .18s;min-width:0;width:100%}.game-card:hover{transform:translateY(-5px);border-color:var(--accent)}.card-art{position:relative;aspect-ratio:1.55;overflow:hidden}.card-art canvas{display:block;width:100%;height:100%}.card-badge{position:absolute;left:12px;top:12px;font-size:9px;border-radius:20px;background:#fff9;color:#30253f;padding:4px 9px;backdrop-filter:blur(5px)}.card-body{padding:19px 18px 16px}.card-title{font-size:18px;font-weight:700;letter-spacing:-.035em;display:flex;align-items:center;justify-content:space-between}.card-title span{font-size:17px;font-weight:400}.card-description{font-size:11px;color:var(--muted);margin:6px 0 17px;min-height:34px;line-height:1.5}.card-meta{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;font-size:9px;font-weight:600;color:var(--muted)}.together-banner{display:flex;gap:28px;align-items:center;margin:65px 0;padding:35px;background:var(--soft);border-radius:var(--radius)}.together-banner h2{font-size:27px;margin-bottom:9px}.together-banner p:last-child{font-size:12px;color:var(--muted);margin:0}.together-banner .eyebrow{margin-bottom:10px}.together-banner .button{margin-left:auto;white-space:nowrap}.pair-art{font-size:42px;color:var(--accent);white-space:nowrap;letter-spacing:-10px}.pair-art span{font-size:22px;vertical-align:top;letter-spacing:0}.rank-section{padding:0 0 30px}.ranking-controls{display:flex;gap:15px;margin:20px 0}.ranking-controls label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:600}.ranking-controls select{min-width:160px}.rank-row{display:grid;grid-template-columns:60px 1fr 150px;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);font-size:13px}.rank-row span:last-child{text-align:right;font-variant-numeric:tabular-nums}.rank-row:first-child{color:var(--accent);font-weight:700}.rank-empty{padding:35px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius);margin-bottom:15px}.rank-empty b{display:block;font-size:19px;margin-bottom:6px}.muted{color:var(--muted)}.small{font-size:12px}footer{max-width:1280px;margin:40px auto 0;padding:28px 36px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:10px;color:var(--muted)}.footer-brand{font-size:17px;color:var(--ink)}dialog{border:1px solid var(--line);border-radius:var(--radius);padding:32px;background:var(--surface);color:var(--ink);width:min(470px,calc(100% - 28px));max-height:90dvh;overflow-y:auto;box-shadow:0 25px 90px #0004}dialog::backdrop{background:#15122270;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:14px;top:12px;width:44px;background:var(--surface);border-radius:50%;font-size:25px;z-index:2}#dialog-art{height:155px;margin:-32px -32px 25px}#dialog-art canvas{height:100%;width:100%}dialog h2{font-size:32px}dialog>p{color:var(--muted);font-size:13px}.mode-options{display:grid;gap:10px;margin:25px 0 20px}.mode-options button{display:grid;grid-template-columns:1fr auto;text-align:left;padding:17px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}.mode-options button:hover{border-color:var(--accent)}.mode-options b{font-size:15px}.mode-options span{grid-column:1;font-size:12px;color:var(--muted)}.mode-options i{grid-column:2;grid-row:1/3;align-self:center;font-size:23px;font-style:normal}.account-form{display:grid;gap:12px}.account-form label{display:grid;gap:5px;font-size:12px}.account-form .primary{padding:12px;border-radius:10px}.error{color:#c34f54;font-size:12px;min-height:20px}.account-tabs{display:flex;gap:12px;margin:22px 0}.account-tabs button{border-bottom:2px solid transparent;font-weight:600}.account-tabs button.selected{border-color:var(--accent);color:var(--accent)}#play{padding-top:25px}.play-heading{display:flex;justify-content:space-between;align-items:center;margin:20px 0}.play-heading h1{font-size:37px;margin:0}.play-heading p{margin-bottom:7px}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:25px}.game-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;align-self:start}.game-hud{padding:16px 22px;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;border-bottom:1px solid var(--line);font-size:12px;font-weight:bold;min-height:51px;font-variant-numeric:tabular-nums}#canvas-wrap{padding:15px;display:flex;justify-content:center;background:var(--surface2)}#board{display:block;width:100%;max-height:min(65dvh,650px);aspect-ratio:760/660;object-fit:contain;background:var(--board);border-radius:10px;touch-action:none;outline-offset:-4px}.game-sidebar{display:grid;gap:16px;align-content:start}.info-card{border:1px solid var(--line);padding:22px;border-radius:var(--radius);background:var(--surface)}.info-card p{font-size:12px;color:var(--muted)}.info-card .eyebrow{font-size:9px}.controls-help{display:flex;gap:6px;flex-wrap:wrap;font-size:10px;color:var(--muted)}kbd{font:11px var(--font);border:1px solid var(--line);padding:4px 7px;border-radius:4px;background:var(--bg);box-shadow:0 2px 0 var(--line)}.tiny-note{font-size:13px;color:var(--muted);background:var(--soft);border:0}.player-row{display:flex;align-items:center;gap:10px;margin-bottom:15px;font-size:12px}.avatar{width:34px;height:34px;border-radius:11px;background:var(--soft);display:grid;place-items:center;color:var(--accent);font-weight:700}#copy-invite{width:100%;margin-top:7px}#invite-link{font-size:10px;width:100%;margin-top:8px}.lobby{text-align:center;padding:70px 25px;min-height:350px}.lobby .lobby-icon{font-size:65px;color:var(--accent)}.lobby h2{font-size:27px}.lobby p{color:var(--muted);font-size:13px}.lobby .primary{padding:13px 25px;border-radius:12px;margin-top:12px}.touch-controls{display:flex;justify-content:center;gap:9px;padding:14px;flex-wrap:wrap}.touch-controls button{min-width:52px;min-height:50px;border:1px solid var(--line);background:var(--surface2);border-radius:12px;font-size:21px;touch-action:none;user-select:none}.touch-controls button.primary{background:var(--accent);color:var(--accent-ink);margin-left:12px}.touch-controls button.pressed{transform:translateY(2px);filter:brightness(.8)}#game-inputs{padding:0 18px}#game-inputs:empty{padding:0}.input-row{display:flex;gap:9px;margin:15px 0;align-items:center}.input-row input{min-width:0;flex:1}.input-row button{padding:10px 16px;border-radius:10px}.code-colors{display:flex;gap:8px;justify-content:center;margin-top:15px}.code-colors select{width:65px}#game-result:not(:empty){padding:22px;background:var(--soft);text-align:center}#game-result h3{margin-bottom:9px}#game-result p{font-size:13px}#game-result button{margin:4px;padding:10px 20px;border-radius:10px}#social-board{padding:30px;min-height:350px;text-align:center}#social-board h2{font-size:27px;line-height:1.3}.social-prompt{padding:24px;border-radius:15px;background:var(--soft);margin:22px 0}.social-history{font-size:12px;color:var(--muted);padding:9px;border-bottom:1px solid var(--line)}.code-clues{display:flex;justify-content:center;gap:15px;margin:30px 0}.code-clues span{background:var(--soft);padding:17px;border-radius:10px;min-width:65px}.code-clues strong{font-size:28px;display:block}.scale-bar{height:12px;border-radius:20px;background:linear-gradient(90deg,#80b9cf,#b5a1e5,#dc9c7e);position:relative;margin:25px 0}.scale-pointer{position:absolute;top:-7px;width:5px;height:26px;background:var(--ink);border:1px solid var(--surface)}.scale-labels{display:flex;justify-content:space-between;font-size:10px;gap:20px}.guesses{font-size:12px;min-height:22px;margin-top:10px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:calc(100% - 30px);padding:14px 22px;background:var(--ink);color:var(--bg);border-radius:12px;z-index:10;font-size:13px;box-shadow:0 6px 25px #0003}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
/* The second visual style changes geometry, texture, typography and artwork. */
[data-style=retro] h1,[data-style=retro] h2,[data-style=retro] h3,[data-style=retro] .card-title{letter-spacing:-.07em;font-weight:900}[data-style=retro] .header{border-bottom:3px solid var(--line)}[data-style=retro] .brand-icon{border-radius:0;box-shadow:3px 3px 0 var(--ink)}[data-style=retro] .game-card{border:2px solid var(--line)}[data-style=retro] .card-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,#00000009 3px 4px)}[data-style=retro] .button,[data-style=retro] .outline,[data-style=retro] .filters button,[data-style=retro] input,[data-style=retro] select,[data-style=retro] .icon-button,[data-style=retro] .mode-options button{border-radius:2px}[data-style=retro] .button.primary{box-shadow:4px 4px 0 var(--ink)}[data-style=retro] .hero-cabinet,[data-style=retro] .mini-card{border-radius:4px;box-shadow:6px 6px 0 var(--ink)}[data-style=retro] .hero-cabinet{transform:rotate(3deg)}[data-style=retro] .hero{background-image:radial-gradient(var(--line) .7px,transparent .7px);background-size:20px 20px}[data-style=retro] .hero-copy{background:var(--bg);padding:15px 0}[data-style=retro] canvas{image-rendering:pixelated}[data-style=retro] .game-card:hover{transform:translate(-2px,-2px)}
@media(min-width:1500px){.hero{min-height:550px}.hero-art{transform:scale(1.05)}}
@media(max-width:1050px){.header{gap:20px;padding:22px 28px}.header nav{gap:18px}.hero-art{transform:scale(.88);transform-origin:center}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.together-banner{gap:20px;padding:26px}.pair-art{display:none}.play-layout{grid-template-columns:minmax(0,1fr) 230px}}
@media(max-width:760px){.header{padding:16px 20px;gap:12px;flex-wrap:wrap}.brand{font-size:21px}.brand small{font-size:8px}.header nav{order:3;width:100%;margin:0;justify-content:center;border-top:1px solid var(--line);padding-top:7px;gap:40px}.preferences{margin-left:auto}.preferences select{width:90px;font-size:12px}.preferences #account-button{font-size:0;padding:8px 11px}.preferences #account-button:before{content:none}.icon-button{width:42px}main{padding:0 22px}.hero{grid-template-columns:1fr;gap:0;padding:35px 0 25px;min-height:0}.hero-copy{text-align:center}.hero h1{font-size:45px}.hero-description{font-size:14px}.hero-actions{justify-content:center}.hero-notes{justify-content:center;gap:12px;font-size:9px}.hero-notes span+span:before{margin-right:12px}.hero-art{height:310px;max-width:450px;width:100%;margin:10px auto 0;transform:scale(.88)}.hero-cabinet{top:0;width:210px;left:30%}.hero-cabinet canvas{height:180px}.mini-snake{top:85px;width:150px}.mini-pong{width:155px;bottom:-5px}.floating-note{bottom:0}.orbit-one{height:290px;width:290px}.orbit-two{height:210px;width:210px}.star-two{top:30px}.collection{padding-top:30px}.section-head{align-items:start}.section-head h2{font-size:27px}.search{width:170px;margin-top:15px}.filters{gap:7px}.filters button{padding:8px 13px;font-size:11px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card-body{padding:15px 13px}.card-title{font-size:17px}.card-meta{font-size:9px}.together-banner{flex-direction:column;align-items:flex-start;margin:40px 0}.together-banner .button{margin-left:0}.together-banner h2{font-size:26px}.rank-section .section-head{display:block}.rank-section .section-head>.muted{font-size:11px}.ranking-controls{gap:9px;flex-wrap:wrap}.ranking-controls label{flex:1;min-width:100px}.ranking-controls select{min-width:0;width:100%;font-size:12px}.play-layout{grid-template-columns:1fr}.game-sidebar{grid-template-columns:1fr 1fr;gap:12px}.info-card{padding:17px}.info-card h3{font-size:18px}.tiny-note{display:none}.play-heading h1{font-size:30px}#board{max-height:62dvh}.game-hud{padding:12px 15px;font-size:11px}#canvas-wrap{padding:8px}.touch-controls{gap:7px;padding:12px}.touch-controls button{min-width:48px}.game-sidebar .info-card p{font-size:11px}footer{padding:24px 22px;flex-wrap:wrap;gap:12px}footer>span:last-child{display:none}#social-board{padding:22px}#social-board h2{font-size:24px}}
@media(max-width:400px){.header{padding:14px}.brand{gap:8px;font-size:18px}.brand-icon{width:34px;height:34px;font-size:26px}.brand small{font-size:6px}.preferences{gap:2px}.preferences select{width:80px;padding:5px}.icon-button{width:37px}.preferences #account-button{padding:7px}main{padding:0 15px}.hero h1{font-size:37px}.hero-actions{gap:15px}.button{padding:12px 15px;font-size:12px}.hero-art{transform:scale(.8);margin-top:0;height:290px}.mini-snake{left:-10px}.mini-pong{right:-12px}.hero-cabinet{left:26%}.section-head{display:block}.search{width:100%;margin:15px 0}.game-grid{gap:12px}.card-body{padding:13px 11px}.card-title{font-size:15px}.card-description{font-size:10px;min-height:45px;margin-bottom:10px}.card-meta{font-size:8px;gap:4px}.card-badge{font-size:8px;left:8px;top:8px;padding:3px 7px}.touch-controls button{min-width:43px}.touch-controls button.primary{margin-left:3px}.game-sidebar{grid-template-columns:1fr}.rank-row{grid-template-columns:30px 1fr 90px;padding:13px 10px}.code-clues{gap:8px}.code-clues span{padding:12px}}
@media(max-height:600px) and (orientation:landscape){.header{padding:10px 20px}.header nav{order:initial;width:auto;border:0;padding:0;margin-left:auto}.play-layout{grid-template-columns:minmax(0,1fr) 220px}#board{max-height:70dvh}.game-sidebar{grid-template-columns:1fr}.play-heading{margin:10px 0}.play-heading h1{font-size:25px}.touch-controls{padding:7px}.info-card{padding:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.game-card:hover{transform:none!important}}
@media(max-width:760px){body.playing .header nav{display:none}body.playing .play-heading{margin:12px 0}body.playing #play{padding-top:12px}body.playing #board{max-height:60dvh}body.playing .game-hud{font-size:10px}body.playing .play-heading h1{font-size:27px}body.playing .play-heading .eyebrow{font-size:8px}}
.orbit-one{max-width:85%}.preferences select{font-family:Arial,Helvetica,sans-serif}
/* The original Watzl Hosting artwork is preserved, with theme-specific color grading. */
.brand{gap:14px;letter-spacing:-.04em}.watzl-logo{display:block;width:102px;flex:0 0 102px;isolation:isolate}.watzl-logo img{display:block;width:100%;height:auto;object-fit:contain}.watzl-logo .logo-dark{display:none}.arcade-word{font-size:28px;font-weight:700;letter-spacing:-.05em}.brand .arcade-word small{font-size:7px;letter-spacing:.15em;line-height:1.5;margin-top:6px;font-weight:500}.header{padding-top:16px;padding-bottom:16px}.footer-brand .watzl-logo{width:68px;flex-basis:68px}.footer-brand .arcade-word{font-size:21px}.footer-brand small{display:none}[data-theme=dark] .watzl-logo .logo-light{display:none}[data-theme=dark] .watzl-logo .logo-dark{display:block}[data-style=retro] .arcade-word{font-family:'Courier New',monospace;text-transform:uppercase;font-size:25px;letter-spacing:-.07em}[data-style=retro] .brand small{font-family:Arial,sans-serif;letter-spacing:.08em}
@media(max-width:1050px){.header{gap:18px}.header nav{gap:18px}.watzl-logo{width:86px;flex-basis:86px}.arcade-word{font-size:25px}.header .brand{gap:9px}.header .brand small{font-size:6px}}
@media(max-width:760px){.header{padding:12px 16px;gap:9px}.watzl-logo{width:72px;flex-basis:72px}.arcade-word,[data-style=retro] .arcade-word{font-size:21px}.header .brand small{font-size:5px;letter-spacing:.06em}.preferences select{width:86px;padding:5px}.preferences .icon-button{width:38px}.preferences #account-button{padding:7px 9px}.preferences{gap:4px}}
@media(max-width:365px){.header{padding:10px 12px}.watzl-logo{width:60px;flex-basis:60px}.arcade-word,[data-style=retro] .arcade-word{font-size:18px}.header .brand{gap:7px}.header .brand small{font-size:4.5px}.preferences select{width:75px;font-size:11px}.preferences .icon-button{width:34px;font-size:21px}.preferences #account-button{padding:5px 7px}.preferences{gap:1px}.footer-brand .watzl-logo{width:55px;flex-basis:55px}}
.play-tools{display:flex;gap:8px}.play-tools .outline{font-size:12px}.game-panel{box-shadow:0 20px 60px #24203308}.game-hud{font-size:11px;letter-spacing:.04em}.game-hud span:first-child{color:var(--accent)}[data-game-color=green] .game-panel,[data-game-color=mint] .game-panel{--accent:#72a58f}[data-game-color=pink] .game-panel{--accent:#bd80a2}[data-game-color=orange] .game-panel{--accent:#c28b60}[data-game-color=blue] .game-panel{--accent:#799fc5}
@media(max-width:400px){.play-tools{gap:5px}.play-tools .outline{padding:7px 10px;font-size:10px}.play-heading h1{font-size:25px!important}}
.social-illustration{height:145px;margin:-30px -30px 28px;overflow:hidden;border-bottom:1px solid var(--line)}.social-illustration canvas{width:100%;height:100%;object-fit:cover}.social-prompt{font-size:32px!important;line-height:1.4!important;letter-spacing:-.04em!important;padding:35px!important;background:var(--surface)!important;border:1px solid var(--line);box-shadow:0 10px 30px #2f204108}body[data-game=brain] #social-board{background:linear-gradient(145deg,var(--soft),var(--surface))}body[data-game=brain] .social-history{padding:13px;border-radius:10px;margin:7px 0;background:var(--surface);border:1px solid var(--line)}body[data-game=scale] #social-board{background:linear-gradient(145deg,var(--surface),var(--soft))}body[data-game=scale] .scale-bar{height:35px;margin:40px 0;border:6px solid var(--surface);box-shadow:0 3px 12px #0001;outline:1px solid var(--line)}body[data-game=scale] .scale-pointer{height:44px;width:4px;top:-11px;border:0;border-radius:5px;background:var(--ink)}body[data-game=scale] .scale-labels{font-weight:600;font-size:12px}body[data-game=doors] #social-board{background:radial-gradient(ellipse at top,var(--soft),var(--surface) 80%)}.symbol-card{display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line);min-height:120px;border-radius:40px 40px 12px 12px!important;box-shadow:0 8px 20px #00000008;letter-spacing:.12em;font-size:11px;gap:12px;background:var(--surface)!important}.symbol-card strong{color:var(--accent);font-size:37px!important;letter-spacing:0}.code-clues{gap:18px}.code-clues .symbol-card{min-width:100px}body[data-game=doors] #social-board h2{font-size:30px}[data-style=retro] .symbol-card,[data-style=retro] .social-prompt,[data-style=retro] .social-history{border-radius:2px!important;box-shadow:4px 4px 0 var(--line)}[data-style=retro] .social-illustration{image-rendering:pixelated}[data-style=retro] .scale-bar{border-radius:0!important;background:linear-gradient(90deg,#68c6ce 0 20%,#7bafdf 20% 40%,#ac91e8 40% 60%,#d78cbd 60% 80%,#e5b274 80%)}
@media(max-width:760px){.social-illustration{margin:-22px -22px 23px;height:125px}.social-prompt{font-size:26px!important;padding:24px!important}.code-clues{gap:8px}.code-clues .symbol-card{min-width:70px;min-height:110px}.symbol-card{font-size:9px}.symbol-card strong{font-size:30px!important}}
.play-heading{flex-wrap:wrap;gap:12px}body.game-expanded{overflow:hidden}body.game-expanded #play{position:fixed;inset:0;z-index:15;max-width:none;width:100%;height:100dvh;background:var(--bg);padding:12px 20px;display:flex;flex-direction:column;overflow:auto}body.game-expanded #back-home{align-self:flex-start;font-size:11px;min-height:30px;padding:3px 0}body.game-expanded .play-heading{margin:5px 0 12px;flex-shrink:0}body.game-expanded .play-heading h1{font-size:25px}body.game-expanded .play-heading .eyebrow{display:none}body.game-expanded .play-layout{display:flex;flex:1;min-height:0;justify-content:center}body.game-expanded .game-panel{width:min(1200px,100%);height:100%;display:flex;flex-direction:column}body.game-expanded .game-sidebar{display:none}body.game-expanded #canvas-wrap{flex:1;min-height:0;padding:5px}body.game-expanded #board{max-height:none!important;height:100%;width:100%;border-radius:5px}body.game-expanded #game-hud{padding:10px 18px;min-height:40px;flex-shrink:0}body.game-expanded #game-inputs{flex-shrink:0}body.game-expanded #touch-controls{padding:8px;flex-shrink:0}body.game-expanded #game-result:not(:empty){position:absolute;bottom:90px;left:50%;transform:translateX(-50%);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 50px #0003;width:min(500px,90%);z-index:2}body.game-expanded #social-board{overflow:auto;flex:1}
@media(max-width:760px){.play-tools{margin-left:auto}.play-tools .outline{padding:8px 11px;font-size:10px}body.game-expanded #play{padding:8px 10px}body.game-expanded .play-heading h1{font-size:21px!important}body.game-expanded #back-home{font-size:10px}body.game-expanded .play-tools .outline{padding:7px 9px;font-size:9px}body.game-expanded .play-heading{margin-bottom:7px}}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;padding:30px 0}.review-grid section{border:1px solid var(--line);background:var(--surface);padding:12px;border-radius:15px}.review-grid h3{font-size:15px;margin:5px 0 12px}.review-grid canvas{width:100%;height:auto;display:block;border-radius:7px}
@media(max-width:760px){body[data-game=blockfall]:not(.game-expanded) #board{max-height:clamp(230px,calc(100dvh - 430px),62dvh)}}
/* Small moments of play; the game previews stop rendering off screen. */
.play-die{position:relative;display:inline-block;width:21px;height:21px;flex:0 0 21px;border:1.5px solid currentColor;border-radius:5px;rotate:12deg;transition:rotate .25s,translate .25s}
.play-die i{position:absolute;width:3px;height:3px;border-radius:50%;background:currentColor;left:4px;top:4px}.play-die i:nth-child(2){left:12px}.play-die i:nth-child(3){left:8px;top:8px}.play-die i:nth-child(4){top:12px}.play-die i:nth-child(5){left:12px;top:12px}
#surprise:hover .play-die{rotate:-15deg;translate:0 -2px}#surprise.rolling{opacity:1}.rolling .play-die{animation:dice-roll .48s cubic-bezier(.3,.6,.3,1)}
.pair-art{display:flex;align-items:center;gap:14px;min-width:150px}.arcade-buddy{position:relative;display:block;width:44px;height:54px;background:var(--accent);border-radius:16px 16px 12px 12px;box-shadow:inset 0 -6px 0 #00000015;rotate:-9deg}.arcade-buddy:before,.arcade-buddy:after{content:'';position:absolute;top:17px;width:5px;height:8px;background:var(--accent-ink);border-radius:4px;left:11px}.arcade-buddy:after{left:27px}.arcade-buddy i{position:absolute;top:32px;left:17px;width:11px;height:6px;border-bottom:2px solid var(--accent-ink);border-radius:50%}.pair-art .buddy-two{rotate:9deg;background:#b16a83}.pair-art .buddy-heart{font-size:27px;color:var(--accent);display:block;margin:0}.buddy-two:before,.buddy-two:after{background:#fff1e9}.buddy-two i{border-color:#fff1e9}
[data-style=retro] .arcade-buddy{border-radius:2px;box-shadow:4px 4px 0 var(--ink)}[data-style=retro] .play-die{border-radius:1px}[data-style=retro] .play-die i{border-radius:0}
@keyframes arcade-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes star-turn{0%,100%{rotate:0deg;scale:1}50%{rotate:32deg;scale:1.12}}
@keyframes dice-roll{0%{rotate:12deg;translate:0 0}45%{rotate:210deg;translate:0 -12px}80%{rotate:340deg;translate:0 2px}100%{rotate:372deg;translate:0 0}}
@keyframes card-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes buddy-bob{0%,70%,100%{translate:0 0}80%{translate:0 -7px}90%{translate:0 0}95%{translate:0 -3px}}
@keyframes heart-beat{0%,75%,100%{scale:1}82%{scale:1.18}90%{scale:1}95%{scale:1.1}}
@media(prefers-reduced-motion:no-preference){.hero-cabinet{animation:arcade-float 7s ease-in-out infinite}.mini-snake{animation:arcade-float 6s ease-in-out -2s infinite}.mini-pong{animation:arcade-float 8s ease-in-out -4s infinite}.art-star{animation:star-turn 9s ease-in-out infinite}.star-two{animation-delay:-4s}.card-arriving{animation:card-arrive .45s ease-out backwards;animation-delay:var(--arrival-delay,0ms)}.arcade-buddy{animation:buddy-bob 5s ease-in-out infinite}.buddy-two{animation-delay:.3s}.buddy-heart{animation:heart-beat 5s ease-in-out infinite}.card-art canvas{transition:transform .35s cubic-bezier(.2,.7,.3,1)}.card-title span{transition:transform .25s}.game-card:hover .card-art canvas{transform:scale(1.045)}.game-card:hover .card-title span{transform:translate(2px,-2px)}.button.primary span{transition:transform .2s}.button.primary:hover span{transform:translate(3px,-3px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.game-panel{position:relative}.play-feedback{position:absolute;top:66px;left:50%;z-index:3;pointer-events:none;opacity:0;background:var(--accent);color:var(--accent-ink);border-radius:20px;padding:7px 14px;font-size:11px;font-weight:800;letter-spacing:.08em;white-space:nowrap;box-shadow:0 5px 18px #0002;transform:translate(-50%,5px)}.feedback-pop{animation:score-pop 1s ease-out}[data-style=retro] .play-feedback{border-radius:1px;box-shadow:3px 3px 0 var(--ink)}@keyframes score-pop{0%{opacity:0;transform:translate(-50%,12px) scale(.8)}18%,65%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-12px) scale(.96)}}
/* The one logo grade per appearance. The source is a silver 3D raster: sepia(1) turns its grey into a tint while
   keeping every tonal step, so the bevels, reflections and depth stay as drawn. Nothing reshapes, pixelates or
   flattens it, in Retro either. */
.watzl-logo img{opacity:1}
.watzl-logo .logo-light{filter:sepia(1) saturate(3.6) hue-rotate(218deg)}
[data-theme=dark] .watzl-logo .logo-dark{filter:sepia(1) saturate(2.8) hue-rotate(230deg)}
[data-style=retro] .watzl-logo .logo-light{filter:sepia(1) saturate(4.8) hue-rotate(145deg)}
[data-style=retro][data-theme=dark] .watzl-logo .logo-dark{filter:sepia(1) saturate(4) hue-rotate(265deg)}
.ranking-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:16px;max-width:760px;margin:24px auto}.ranking-controls label{position:relative;min-width:0;gap:8px;text-align:center}.ranking-controls label:after{content:'';position:absolute;right:18px;bottom:20px;width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);pointer-events:none}.ranking-controls select{appearance:none;-webkit-appearance:none;display:block;min-width:0;width:100%;height:48px;min-height:48px;padding:0 38px;text-align:center;text-align-last:center;line-height:normal;font-size:13px}.ranking-controls select option{text-align:center}
@media(max-width:600px){.ranking-controls{grid-template-columns:1fr;gap:14px;max-width:360px}.ranking-controls select{font-size:14px}}
.motion-toggle{font-size:10px;color:var(--muted);min-height:36px;padding:8px 0;text-decoration:underline;text-underline-offset:3px;margin-top:6px}.motion-toggle:hover{color:var(--accent)}.motion-paused #home *,.motion-paused #home *:before,.motion-paused #home *:after{animation:none!important}.motion-paused .card-arriving{opacity:1}
/* In-game controls: tactile, readable, and sized for fingers in all four themes. */
.code-pegs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:440px;margin:18px auto 8px}.code-peg{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:11px;min-height:90px}.code-peg:before{content:'';width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff9,var(--peg) 45%,var(--peg));box-shadow:0 4px 0 #0002,inset 0 -3px 3px #0002}.code-peg:active:before{transform:translateY(3px);box-shadow:0 1px 0 #0002}.control-hint{font-size:11px;text-align:center;color:var(--muted);margin:8px 0 14px}body[data-game=code] #game-inputs{text-align:center;padding-bottom:18px}.drawing-tools,.brush-widths,.fleet-views{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0}.ink-swatch{width:44px;height:44px;padding:8px;border:2px solid transparent;border-radius:50%;background:var(--surface2)}.ink-swatch:before{content:'';display:block;width:24px;height:24px;border-radius:50%;background:var(--ink-color)}.ink-swatch[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}.brush-widths [aria-pressed=true],.fleet-views [aria-pressed=true]{background:var(--soft);border-color:var(--accent);color:var(--ink)}body[data-game=draw] #game-inputs{text-align:center;padding-bottom:16px}.touch-controls button[data-key=fire]{min-width:76px;font-size:14px;font-weight:700;padding:0 14px;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 65%,black)}.touch-controls button{box-shadow:0 3px 0 var(--line);transition:transform .08s,box-shadow .08s}.touch-controls button.pressed{transform:translateY(3px);box-shadow:none}.round-progress{display:flex;justify-content:center;gap:8px;margin:0 0 24px}.round-progress span{width:26px;height:5px;border-radius:4px;background:var(--line)}.round-progress .complete{background:var(--accent)}.round-progress .current{background:var(--accent);box-shadow:0 0 0 4px var(--soft)}.round-arrival .social-prompt,.round-arrival .code-clues,.round-arrival .scale-pointer{animation:round-arrive .45s cubic-bezier(.2,.8,.2,1)}.word-pair{display:flex;align-items:center;justify-content:center;gap:18px}.word-pair span{flex:1;overflow-wrap:anywhere}.word-pair b{color:var(--accent);font-size:20px}.word-match{border-color:var(--accent)!important;background:var(--soft)!important}.symbol-glyph{font:normal 32px/1 Arial;color:var(--accent)}.code-clues .symbol-card>span{padding:0;background:none;min-width:0;font-size:10px}.scale-guess{background:var(--accent)!important;transition:left .08s linear}.scale-pointer{transform:translateX(-50%)}.scale-pointer:before{content:'';position:absolute;left:50%;top:-6px;width:12px;height:12px;background:inherit;border:2px solid var(--surface);border-radius:50%;transform:translateX(-50%)}[data-style=retro] .code-peg,[data-style=retro] .fleet-views button,[data-style=retro] .brush-widths button{border-radius:2px;box-shadow:3px 3px 0 var(--line)}[data-style=retro] .code-peg:before{border-radius:3px;background:var(--peg);box-shadow:inset 3px 3px 0 #fff5,inset -3px -3px 0 #0002}.game-panel{isolation:isolate}body[data-game=draw] #board{cursor:crosshair}body[data-game=fleet] #board,body[data-game=mines] #board{cursor:crosshair}body[data-game=memory] #board,body[data-game=four] #board,body[data-game=bubbles] #board{cursor:pointer}
@keyframes round-arrive{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:600px){.code-pegs{gap:6px}.code-peg{font-size:10px}.code-clues{gap:8px}.code-clues .symbol-card{min-width:0;flex:1;padding:14px 6px}.touch-controls{gap:6px}.touch-controls button{min-width:44px}.touch-controls button[data-key=fire]{min-width:66px;margin-left:2px}.drawing-tools{gap:5px}.ink-swatch{width:44px}.game-hud{justify-content:center}#game-inputs>.outline{margin:8px 3px}.social-illustration{margin-bottom:22px}.round-progress{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.round-arrival *{animation:none!important}.scale-guess,.touch-controls button{transition:none}}
/* Quiet framing lets the miniature game itself carry the animation. */
@keyframes arcade-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes star-turn{0%,100%{rotate:0deg;scale:1}50%{rotate:12deg;scale:1.04}}
[data-style=retro] .touch-controls button{border-radius:2px;box-shadow:3px 3px 0 var(--line)}
[data-style=retro] .touch-controls button.pressed{box-shadow:none}
/* A real directional pad, with a separate action button for simultaneous presses. */
body:is([data-game=blockfall],[data-game=snake],[data-game=maze],[data-game=bombs],[data-game=merge]) .touch-controls{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px);gap:7px;justify-content:center}
body:is([data-game=blockfall],[data-game=bombs]) .touch-controls{grid-template-columns:repeat(3,46px) 68px}
.touch-controls [data-key=up]{grid-area:1/2}.touch-controls [data-key=left]{grid-area:2/1}.touch-controls [data-key=down]{grid-area:2/2}.touch-controls [data-key=right]{grid-area:2/3}
body:is([data-game=blockfall],[data-game=snake],[data-game=maze],[data-game=bombs],[data-game=merge]) .touch-controls button{min-width:0;min-height:44px;width:46px;height:46px}
body:is([data-game=blockfall],[data-game=bombs]) .touch-controls button[data-key=fire]{grid-area:1/4/3/5;align-self:center;width:64px;height:64px;min-width:0;margin-left:4px;padding:0 4px;border-radius:50%}
[data-style=retro] body:is([data-game=blockfall],[data-game=bombs]) .touch-controls button[data-key=fire]{border-radius:4px}
body:is([data-game=blockfall],[data-game=mines]) #game-inputs{text-align:center;padding-top:10px}
/* Modern edition: precise type, studio framing, and three distinct social game tables. */
@font-face{font-family:'Space Grotesk';src:url('/space-grotesk.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
html:not([data-style=retro]){--font:'Space Grotesk',Arial,sans-serif}
html:not([data-style=retro]) .game-panel{box-shadow:0 24px 65px #19233b12,0 1px 2px #19233b0a}
html:not([data-style=retro]) #canvas-wrap{background:linear-gradient(145deg,var(--surface2),var(--surface));padding:18px}
html:not([data-style=retro]) #board{border-radius:14px;box-shadow:inset 0 0 0 1px #ffffff30}
html:not([data-style=retro]) .game-hud{letter-spacing:.02em;background:linear-gradient(110deg,var(--surface),var(--surface2));font-size:12px}
html:not([data-style=retro]) .touch-controls button{background:linear-gradient(160deg,var(--surface),var(--surface2));box-shadow:0 3px 0 var(--line),0 5px 10px #1722370a;border-color:var(--line);transition:transform .1s,box-shadow .1s}
html:not([data-style=retro]) .touch-controls button.primary{background:var(--accent)}
html:not([data-style=retro]) .touch-controls button.pressed{box-shadow:0 1px 0 var(--line);transform:translateY(2px)}
html:not([data-style=retro]) body[data-game=brain] #social-board{background:radial-gradient(ellipse at 0 0,#caa0be26,transparent 65%),radial-gradient(ellipse at 100% 100%,#a792dc28,transparent 65%),var(--surface2)}
html:not([data-style=retro]) body[data-game=brain] .social-prompt{border-radius:24px!important;box-shadow:0 10px 0 #a387c118,0 22px 40px #442a5710;position:relative}
html:not([data-style=retro]) body[data-game=brain] .word-pair{border-radius:18px;padding:18px 22px;box-shadow:0 5px 16px #30264608}
html:not([data-style=retro]) body[data-game=brain] .word-match{border-color:#70ab9b;background:linear-gradient(110deg,#89bc9a24,var(--surface))}
html:not([data-style=retro]) body[data-game=scale] #social-board{background:radial-gradient(ellipse at 50% 0,#9bb5d322,transparent 70%),var(--surface)}
html:not([data-style=retro]) body[data-game=scale] .scale-bar{height:62px;border-radius:16px;border:5px solid var(--surface2);box-shadow:inset 0 3px 7px #30214830,0 1px 0 #ffffff40;background:linear-gradient(90deg,#5a9fb7,#8b9cc7,#b39ac1,#d4a49c,#e4b278)}
html:not([data-style=retro]) body[data-game=scale] .scale-bar:after{content:'';position:absolute;inset:0;border-radius:10px;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#ffffff60 calc(10% - 1px),#ffffff60 10%);mask-image:linear-gradient(transparent 60%,#000 60%)}
html:not([data-style=retro]) body[data-game=scale] .scale-pointer{height:78px;top:-13px;width:4px;border-radius:3px;box-shadow:0 2px 8px #13243540}
html:not([data-style=retro]) body[data-game=scale] .scale-pointer:before{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:var(--ink);left:-5px;top:-7px;border:2px solid var(--surface)}
html:not([data-style=retro]) body[data-game=doors] #social-board{background:radial-gradient(ellipse at 50% 0,#beac8733,transparent 75%),var(--surface2)}
html:not([data-style=retro]) body[data-game=doors] .symbol-card{border:1px solid #a9926e70;background:linear-gradient(145deg,var(--surface),var(--surface2));border-radius:38px 38px 14px 14px;box-shadow:0 6px 0 #a9926e25,0 15px 25px #30202815;min-width:90px;padding:22px 14px;position:relative}
html:not([data-style=retro]) body[data-game=doors] .symbol-card:after{content:'';position:absolute;inset:5px;border:1px solid #a9926e35;border-radius:33px 33px 10px 10px;pointer-events:none}
html:not([data-style=retro]) body[data-game=doors] .symbol-glyph{color:#a27f4e;text-shadow:0 1px 0 #fff8;font-size:40px}
html[data-style=retro] .symbol-card{border:2px solid var(--line);box-shadow:4px 4px 0 var(--line);border-radius:0}
html[data-style=retro] .social-prompt{border:2px solid var(--line);box-shadow:5px 5px 0 var(--line);border-radius:0!important}
@media(max-width:760px){html:not([data-style=retro]) #canvas-wrap{padding:8px}html:not([data-style=retro]) .game-hud{font-size:11px}html:not([data-style=retro]) body[data-game=doors] .symbol-card{min-width:68px;padding:17px 10px}}
/* Calm is the default modern edition; decorative movement stays understated. */
html:not([data-style=retro]) .hero-cabinet,html:not([data-style=retro]) .mini-card{animation-duration:12s}
html:not([data-style=retro]) .art-star,html:not([data-style=retro]) .pair-art{animation:none}
@media(max-width:760px){body[data-game=blockfall]:not(.game-expanded) #board{max-height:clamp(230px,calc(100dvh - 510px),55dvh)}}
/* Layout follows the control type, so new games inherit usable landscape focus mode. */
@media(orientation:landscape) and (max-height:600px){
 body.game-expanded #back-home{display:none}
 body.game-expanded .game-panel.has-movement-controls{display:grid;grid-template-columns:minmax(0,1fr) min(300px,48vw);grid-template-rows:auto minmax(0,1fr) auto}
 body.game-expanded .has-movement-controls #game-hud{grid-column:1/-1}
 body.game-expanded .has-movement-controls #canvas-wrap{grid-column:1;grid-row:2/4;padding:5px;min-width:0}
 body.game-expanded .has-movement-controls #touch-controls{grid-column:2;grid-row:3;align-self:end;max-width:100%;width:100%;min-width:0}
 body.game-expanded .has-movement-controls #game-inputs{grid-column:2;grid-row:2;align-self:end;text-align:center;min-width:0;padding:4px 8px;overflow:auto;max-height:100%}
 body.game-expanded[data-game=boxing] #touch-controls{grid-template-columns:repeat(3,minmax(64px,1fr))}
}
/* Keep preferences separate at every width; use our own artwork on all platforms. */
.header .preferences{display:flex;align-items:center;gap:10px}
.header #theme-toggle{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center}
.ui-icon{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;flex-shrink:0}
#theme-toggle .ui-icon{width:21px;height:21px}
#account-button>.ui-icon{display:none}
.symbol-glyph .ui-icon{width:40px;height:40px}.lobby-icon .ui-icon{width:64px;height:64px}
.art-star .ui-icon{width:1em;height:1em}
@media(max-width:760px){.header .preferences{gap:10px}.preferences #account-button:before{content:none}.preferences #account-button>.ui-icon{display:block;width:21px;height:21px}.header #account-button{min-width:44px;padding:10px}.header .brand{margin-right:auto}}
@media(max-width:400px){.header .preferences{gap:8px}.header nav{gap:28px}}
@media(max-width:365px){.header .brand{width:100%;justify-content:center}.header .preferences{margin:0 auto}}
/* Three social games, three physical tables. */
html:not([data-style=retro]) body[data-game=brain] #social-board{background:repeating-linear-gradient(0deg,transparent 0,transparent 31px,#8c7f9912 32px),var(--surface2)}
html:not([data-style=retro]) body[data-game=brain] .social-prompt{border-radius:4px!important;border:1px solid var(--line);outline:1px solid var(--line);outline-offset:-8px;padding:35px 24px;background:var(--surface);font-size:34px;box-shadow:2px 5px 0 var(--line),0 14px 24px #382a3912}
html:not([data-style=retro]) body[data-game=brain] .word-pair{border-radius:4px;border-bottom:2px solid var(--line);background:var(--surface)}
html:not([data-style=retro]) body[data-game=scale] #social-board{border:8px solid var(--surface2);outline:1px solid #a3946a80;outline-offset:-13px;border-radius:12px;background:var(--surface)}
html:not([data-style=retro]) body[data-game=scale] .scale-labels{font-size:13px;letter-spacing:.04em;font-weight:600}
html:not([data-style=retro]) body[data-game=scale] .scale-bar{border-color:#a3946a70;border-radius:4px;box-shadow:inset 0 3px 7px #30214830,0 4px 0 var(--surface2)}
html:not([data-style=retro]) body[data-game=doors] #social-board{background:repeating-linear-gradient(90deg,transparent 0,transparent 44px,#9d845d12 45px),var(--surface2)}
html:not([data-style=retro]) body[data-game=doors] .symbol-card{background:var(--surface);border-radius:40px 40px 5px 5px;box-shadow:0 6px 0 #a9926e40,0 15px 25px #30202815}
html:not([data-style=retro]) body[data-game=doors] .symbol-card strong{font-weight:500;border-top:1px solid #a9926e50;margin-top:15px;padding-top:10px;font-size:32px}

/* Expansion controls: stable targets, visible labels, no hover-only actions. */
.exp-notice{flex-basis:100%;margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.5;text-align:center}
.exp-shot-controls{display:flex;align-items:end;justify-content:center;gap:16px;flex-wrap:wrap;width:100%}
.exp-slider{display:grid;grid-template-columns:1fr auto;gap:8px;min-width:150px;flex:1;max-width:260px;font-size:13px;font-weight:600}
.exp-slider input{grid-column:1 / -1;width:100%;min-height:44px;accent-color:var(--accent);padding:0;cursor:pointer}
.exp-slider output{grid-row:1;grid-column:2;font-variant-numeric:tabular-nums}
.exp-shot-controls button,.exp-mirrors button{min-height:44px}
.exp-mirrors{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:0 12px 16px}
.exp-word-slots{display:flex;justify-content:center;gap:5px;margin:20px 0;flex-wrap:wrap}
.exp-word-slots span{display:grid;place-items:center;width:30px;height:42px;border:1px solid var(--line);border-radius:5px;background:var(--surface);font-weight:700}
body[data-game=pinball] .touch-controls{display:flex;justify-content:center;gap:20px}
body[data-game=pinball] .touch-controls button{min-width:88px;min-height:64px}
@media(max-width:600px){.exp-shot-controls{gap:8px}.exp-slider{min-width:110px;max-width:none}.exp-shot-controls>button{width:100%}.exp-notice{font-size:13px}.exp-word-slots span{width:22px;height:34px}.exp-mirrors button{flex:1 0 40%;font-size:13px}}
body:is([data-game=parcels],[data-game=asteroids],[data-game=lander],[data-game=centipede],[data-game=kart],[data-game=snow],[data-game=waves],[data-game=island]) .touch-controls{display:grid;grid-template-columns:repeat(3,48px) minmax(76px,100px);grid-template-rows:repeat(2,48px);gap:8px;justify-content:center}
body:is([data-game=hopper],[data-game=marble]) .touch-controls{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:8px;justify-content:center}
body:is([data-game=parcels],[data-game=asteroids],[data-game=lander],[data-game=centipede],[data-game=kart],[data-game=snow],[data-game=waves],[data-game=island]) .touch-controls [data-key=fire]{grid-column:4;grid-row:1 / 3;align-self:center;min-height:64px;margin-left:6px}
body:is([data-game=golf],[data-game=pool],[data-game=lightlink],[data-game=missiles]) #board{cursor:crosshair}
.exp-notice{padding:0 12px}body[data-game=words] .social-prompt{font-size:clamp(22px,3vw,34px)}
.partner-wait{position:absolute;top:96px;left:50%;z-index:3;transform:translateX(-50%);display:grid;gap:4px;width:min(360px,86%);padding:14px 18px;text-align:center;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 40px #0003;pointer-events:none}.partner-wait span,.partner-wait small{font-size:13px;color:var(--muted)}.partner-away #board{opacity:.6}
[data-style=retro] .partner-wait{border-radius:1px;box-shadow:3px 3px 0 var(--ink)}
.match-length{max-width:460px;margin:22px auto 6px}.match-length .eyebrow{color:var(--muted)}.length-options{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:10px 0 8px}.length-options button{min-height:44px;min-width:72px}.length-options [aria-pressed=true]{background:var(--soft);border-color:var(--accent);color:var(--ink)}.length-options button:disabled{opacity:1}.length-options button:disabled:not([aria-pressed=true]){opacity:.5}
.lobby .length-note{margin:2px 0 8px}.lobby .length-rank{display:inline-block;padding:4px 11px;border:1px solid var(--line);border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.05em}.lobby .length-rank.custom{border-color:var(--accent);color:var(--ink)}[data-style=retro] .length-rank{border-radius:2px}
/* Easy series. Bloom Cascade: a directional pad with Swap beside it. Clockwork Boxing: three large zones
   (dodge, guard, dodge) over a full-width punch, so either thumb finds them without looking. */
body[data-game=bloom] .touch-controls{display:grid;grid-template-columns:repeat(3,48px) 76px;grid-template-rows:repeat(2,48px);gap:8px;justify-content:center}
body[data-game=bloom] .touch-controls button{min-width:0;width:48px;height:48px;min-height:44px}
body[data-game=bloom] .touch-controls button[data-key=fire]{grid-area:1/4/3/5;width:72px;height:72px;align-self:center;margin-left:4px;border-radius:50%}
[data-style=retro] body[data-game=bloom] .touch-controls button[data-key=fire]{border-radius:4px}
body[data-game=bloom] #game-inputs{text-align:center;padding-top:10px}
body[data-game=boxing] .touch-controls{display:grid;grid-template-columns:repeat(3,minmax(88px,1fr));grid-template-areas:'left guard right' 'punch punch punch';gap:8px;max-width:420px;margin:0 auto}
body[data-game=boxing] .touch-controls button{min-height:56px;font-size:15px;font-weight:700;margin:0;width:auto}
body[data-game=boxing] .touch-controls [data-key=left]{grid-area:left}body[data-game=boxing] .touch-controls [data-key=down]{grid-area:guard}body[data-game=boxing] .touch-controls [data-key=right]{grid-area:right}
body[data-game=boxing] .touch-controls [data-key=fire]{grid-area:punch;min-height:60px;font-size:17px;letter-spacing:.04em;margin-left:0}
/* Narrow phones: the lobby keeps its 44 px controls but drops the decorative empty space around them. */
@media(max-width:480px){.lobby{padding:28px 16px 24px;min-height:0}.lobby .lobby-icon .ui-icon{width:44px;height:44px}.lobby h2{font-size:23px;margin-bottom:8px}.match-length{margin:14px auto 4px}.length-options{gap:6px}.length-options button{min-width:60px;padding:9px 12px}.lobby .primary{margin-top:8px}}

/* Player profiles: one calm system, re-cut by Retro with square corners and offset shadows. */
html{--danger:#b23b45;--danger-soft:#f9e6e6;--success:#2f7a58;--success-soft:#e3f2ea}
html[data-theme=dark]{--danger:#ff9ba3;--danger-soft:#3d2429;--success:#8fd1ae;--success-soft:#20352b}
html[data-style=retro]{--danger:#b0203a;--danger-soft:#fde3e8;--success:#20744f;--success-soft:#dcf3e6}
html[data-style=retro][data-theme=dark]{--danger:#ff8fab;--danger-soft:#3b1a2e;--success:#8be3b5;--success-soft:#173328}
#account-button{display:inline-flex;align-items:center;gap:8px;max-width:230px}
#account-button>.ui-icon{display:block;width:18px;height:18px}
#account-button.signed-in{border-color:var(--accent)}
.account-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14ch}
.account-avatar{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:14px;background:var(--accent);color:var(--accent-ink);font:700 18px/1 var(--font);letter-spacing:0;text-transform:uppercase}
.account-avatar.guest{background:var(--surface);color:var(--muted);border:1px dashed var(--line)}
.account-avatar .ui-icon{width:22px;height:22px}
#account-button .account-avatar{width:26px;height:26px;border-radius:8px;font-size:12px}
#account-dialog{width:min(520px,calc(100% - 24px))}
#account-dialog>.eyebrow{padding-right:52px;margin-bottom:8px}
#account-dialog h2{font-size:30px;margin-bottom:20px;outline:none}
#account-content{display:grid;gap:18px}
#account-content p{margin:0}
.account-intro{font-size:14px;color:var(--muted);line-height:1.6}
.account-status{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--soft)}
/* Only the text column: the avatar is also a span and must keep its own size, centring and contrast. */
.account-status>div{min-width:0}
.account-status>div>b{display:block;font-size:15px;overflow-wrap:anywhere}
.account-status>div>span{display:block;font-size:12px;color:var(--muted);line-height:1.45}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--surface2)}
.segmented button{min-height:44px;border-radius:10px;font-weight:600;font-size:13px;color:var(--muted)}
.segmented button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px #0000001c}
.account-perks{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13px}
.account-perks li{display:flex;gap:10px;align-items:flex-start}
.account-perks .ui-icon{color:var(--success);margin-top:2px}
.account-form{display:grid;gap:16px}
.field{display:grid;gap:6px}
.field>label:not(.check-row){font-size:13px;font-weight:600}
.field-control{position:relative}
.field-control input{width:100%;min-height:48px;font-size:16px;padding:11px 14px;border-radius:12px}
.has-reveal .field-control input{padding-right:54px}
.reveal{position:absolute;top:2px;right:2px;width:44px;height:44px;display:grid;place-items:center;border-radius:10px;color:var(--muted)}
.reveal:hover,.reveal[aria-pressed=true]{color:var(--ink)}
.reveal .ui-icon{width:20px;height:20px}
.field-hint{font-size:12px;line-height:1.45;color:var(--muted)}
.field-hint.field-error{color:var(--danger);font-weight:600}
.field input[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.form-status:empty{display:none}
.form-status{padding:11px 14px;border-radius:12px;background:var(--danger-soft);color:var(--danger);font-size:13px;font-weight:600}
.account-form button[type=submit],.account-wide{min-height:48px;border-radius:12px;font-weight:700;font-size:14px;padding:12px 18px}
.account-form button[type=submit]:disabled{opacity:.7;cursor:progress}
.danger{background:var(--danger);color:#fff}
html[data-theme=dark] .danger{color:#2a1216}
.danger:hover{filter:brightness(1.08)}
.fineprint{font-size:12px;color:var(--muted);line-height:1.5}
.text-link{min-height:44px;padding:0 2px;justify-self:start;color:var(--accent);font-weight:600;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.guest-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.guest-choice .outline{min-height:44px}
.account-banner{padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.5;background:var(--soft)}
.account-banner.success{background:var(--success-soft);color:var(--success);font-weight:600}
.account-banner.important{font-weight:700}
.account-banner.warning{background:var(--danger-soft);color:var(--danger);font-weight:600}
.account-section{display:grid;gap:8px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.account-section h3{font-size:16px;margin:0;letter-spacing:-.02em}
.account-section>p{font-size:13px;color:var(--muted)}
.account-more>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;list-style:none;cursor:pointer;font-weight:600;font-size:13px;color:var(--accent);border-radius:6px}
.account-more>summary::-webkit-details-marker{display:none}
.account-more>summary:after{content:'';flex:0 0 auto;width:7px;height:7px;margin-right:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.account-more[open]>summary:after{transform:translateY(2px) rotate(-135deg)}
.account-more>summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.account-more>.account-form{padding-top:6px}
.account-more>.fineprint{padding:4px 0 6px}
.account-actions{display:flex;flex-wrap:wrap;gap:10px}
.account-actions button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:12px;font-weight:600;font-size:13px}
.danger-zone{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.danger-zone .account-more>summary{color:var(--danger)}
.danger-list{margin:0;padding-left:20px;font-size:13px;display:grid;gap:4px}
.recovery-codes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.recovery-codes li{padding:12px 8px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);font:700 15px/1.2 'Courier New',monospace;letter-spacing:.05em;text-align:center;user-select:all;-webkit-user-select:all;font-variant-numeric:tabular-nums}
.check-row{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:6px 0;font-size:13px;line-height:1.5;cursor:pointer}
.check-row input{flex:0 0 auto;width:22px;height:22px;min-height:0;margin:0;accent-color:var(--accent);cursor:pointer}
@media(max-width:480px){#account-dialog{padding:24px 18px}#account-dialog h2{font-size:26px}.recovery-codes{grid-template-columns:1fr}.account-actions button{flex:1 1 auto}.guest-choice .outline{width:100%}.account-section{padding:14px}}
[data-style=retro] :is(.account-status,.segmented,.segmented button,.field-control input,.reveal,.form-status,.account-banner,.account-section,.recovery-codes li,.account-actions button,.account-form button[type=submit],.account-wide,.account-avatar,.guest-choice .outline){border-radius:2px}
[data-style=retro] .account-section{border-width:2px;box-shadow:4px 4px 0 var(--line)}
[data-style=retro] .segmented button[aria-pressed=true]{box-shadow:2px 2px 0 var(--ink)}
[data-style=retro] :is(.account-form button[type=submit],.account-wide){box-shadow:4px 4px 0 var(--ink)}
[data-style=retro] .recovery-codes li{border-width:2px}
[data-style=retro] .account-avatar{box-shadow:2px 2px 0 var(--ink)}
@media(prefers-reduced-motion:reduce){.account-more>summary:after{transition:none}}
/* Email address status (own profile only), link checks and the resend countdown. */
.email-state{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:2px 0 0}
.email-state>b{min-width:0;font-size:15px;overflow-wrap:anywhere}
.email-badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.2;background:var(--surface2);color:var(--ink)}
.email-badge .ui-icon{width:14px;height:14px;flex:0 0 auto}
.email-badge.ok{background:var(--success-soft);color:var(--success)}
.email-badge.wait,.email-badge.pending{background:var(--soft);color:var(--ink);border:1px dashed var(--line)}
.email-section .account-actions .ui-icon{width:16px;height:16px}
.email-section .account-actions button:disabled{opacity:.7;cursor:default}
.account-loading{display:flex;align-items:center;gap:12px;min-height:48px;font-size:14px;color:var(--muted)}
.account-loading:before{content:'';flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:account-spin .9s linear infinite}
@keyframes account-spin{to{transform:rotate(360deg)}}
#account-content .account-status>div>b{overflow-wrap:anywhere}
[data-style=retro] .email-badge{border-radius:2px;border:2px solid currentColor;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
[data-style=retro] .email-badge.wait,[data-style=retro] .email-badge.pending{border-style:dashed}
[data-style=retro] .account-loading:before{border-radius:0;animation-timing-function:steps(8)}
@media(prefers-reduced-motion:reduce){.account-loading:before{animation:none;border-top-color:var(--line);background:var(--accent);transform:scale(.4)}}
@media(max-width:480px){.email-state>b{flex-basis:100%}}
/* A compact guest card and phone rhythm: the first field shows in the first screen, while inputs stay 16 px/48 px
   and every control keeps a 44 px target. */
.account-status.compact{padding:10px 14px;gap:12px}
.account-status.compact .account-avatar{width:36px;height:36px;border-radius:12px}
.account-status.compact>div>b{font-size:14px}
.account-more>.account-perks{padding:4px 0 6px}
@media(max-width:480px){#account-dialog>.eyebrow{margin-bottom:4px}#account-dialog h2{margin-bottom:12px}#account-content{gap:14px}.account-form{gap:14px}.field{gap:4px}.field-hint{line-height:1.35}.guest-choice{padding-top:12px}}

/* Saved runs: Continue playing, the in-game status, and explicit choices. */
.continue-section{padding:38px 0 44px;border-top:1px solid var(--line)}
.continue-section .section-head{align-items:flex-end}
.continue-section .section-head .eyebrow{color:var(--muted);margin-bottom:9px}
.continue-note{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;max-width:440px;margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.continue-note .ui-icon{color:var(--accent)}
.continue-note .text-link{min-height:44px}
.save-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px;margin-top:22px}
.save-card{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.save-art{border-radius:14px;overflow:hidden;aspect-ratio:1.55}
.save-art canvas{display:block;width:100%;height:100%}
.save-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.save-head h3{font-size:17px;margin:0;letter-spacing:-.03em}
.save-badge{padding:3px 9px;border-radius:20px;background:var(--soft);color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.save-progress{margin:6px 0 2px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.save-meta{margin:0 0 12px;font-size:12px;color:var(--muted)}
.save-actions{display:flex;flex-wrap:wrap;gap:8px}
.save-actions button{min-height:44px;padding:10px 16px;border-radius:12px;font-size:13px}
.browser-saves{margin-top:20px;padding:20px 22px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--bg)}
.browser-saves h3{font-size:16px;margin:0 0 4px}
.browser-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.browser-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.browser-list b{display:block;font-size:14px}.browser-list span{font-size:12px;color:var(--muted)}
.browser-list .outline{min-height:44px}
.save-chip{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:20px;background:#fff9;color:#30253f;font-size:9px;font-weight:700;backdrop-filter:blur(5px)}
.save-chip .ui-icon{width:12px;height:12px}
.save-status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:2px 0 12px;font-size:12px;line-height:1.45;color:var(--muted)}
.save-status .ui-icon{color:var(--accent)}
.save-status[data-state=kept] .ui-icon{color:var(--muted)}
.save-status small{flex-basis:100%;font-size:11px}
.save-status .text-link{min-height:44px}
.save-note{display:flex;gap:8px;align-items:flex-start;margin:-6px 0 12px;font-size:12px;line-height:1.5;color:var(--muted)}
.save-note .ui-icon{color:var(--accent);margin-top:2px}
.mode-options .continue-run{border-color:var(--accent);background:var(--soft)}
#choice-dialog{width:min(460px,calc(100% - 24px))}
#choice-dialog>.eyebrow{padding-right:52px}
#choice-dialog h2{font-size:26px;margin-bottom:12px}
#choice-body p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:10px}
.choice-actions{display:grid;gap:10px;margin-top:20px}
.choice-actions button{min-height:48px;padding:12px 16px;border-radius:12px;font-weight:600;font-size:14px}
.choice-actions .outline{font-size:14px}
.transfer-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.transfer-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);cursor:pointer;min-height:44px}
.transfer-item input{flex:0 0 auto;width:22px;height:22px;min-height:0;margin:2px 0 0;accent-color:var(--accent);cursor:pointer}
.transfer-item b{display:block;font-size:14px}
.transfer-item span span{display:block;font-size:12px;color:var(--muted);line-height:1.45}
.transfer-item .transfer-warning{color:var(--danger);font-weight:600;margin-top:4px}
.account-inline{justify-self:start;min-height:44px;padding:10px 16px;border-radius:12px}
@media(max-width:760px){.continue-section .section-head{display:block}.continue-note{margin-top:10px}.save-grid{grid-template-columns:1fr}.save-card{grid-template-columns:104px minmax(0,1fr)}}
@media(max-width:400px){.save-card{grid-template-columns:1fr}.save-art{aspect-ratio:2.4}.save-actions button{flex:1 1 auto}.browser-list .outline{width:100%}}
[data-style=retro] :is(.save-card,.save-art,.save-actions button,.browser-saves,.browser-list li,.save-badge,.save-chip,.choice-actions button,.transfer-item,.account-inline){border-radius:2px}
[data-style=retro] .save-card{border-width:2px;box-shadow:4px 4px 0 var(--line)}
[data-style=retro] .browser-saves{border-width:2px}
[data-style=retro] .choice-actions .primary{box-shadow:4px 4px 0 var(--ink)}
[data-style=retro] .mode-options .continue-run{box-shadow:3px 3px 0 var(--accent)}

/* ================================================================ Website redesign (P1–P4)
   Calm: a quiet studio shelf: one soft light, 1 px rims, eased movement of at most 3 px.
   Retro: an early-90s interface: Silkscreen pixel type for labels, 2 px ink lines, offset shadows, stepped motion.
   Body copy and forms stay in a readable face in both. Later rules here deliberately override earlier ones. */
@font-face{font-family:Silkscreen;src:url('/fonts/Silkscreen-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Silkscreen;src:url('/fonts/Silkscreen-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
html[data-style=retro]{--font:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,'Liberation Mono',monospace;--pixel:Silkscreen,ui-monospace,monospace}
html{--success:#2f7d5a;--success-soft:#dff1e6;--rim:#ffffffb3}html[data-theme=dark]{--success:#8fd3ad;--success-soft:#1f3a2e;--rim:#ffffff1f}
/* Silkscreen is drawn on an 8 px grid, so it is set only at 16, 24, 32, 40 and 48 px, where every pixel is whole. */
[data-style=retro] :is(h1,h2,h3,.eyebrow,.card-title,.arcade-word,.button,.chip,.control-label,.game-hud,.count,.group-count,.card-badge,.save-chip,.cabinet-label,.cabinet-foot,.ticket-score,.ticket-who,.style-switch button,.surprise-name,.play-heading h1,.lobby h2,.rank-row span:first-child,.play-tools .outline,.plate-avatar,.account-avatar,.avatar){font-family:var(--pixel);letter-spacing:0;font-weight:400}
[data-style=retro] :is(h1,.hero h1){font-size:48px;line-height:1.15}
@media(max-width:1050px){[data-style=retro] :is(h1,.hero h1){font-size:40px}}
@media(max-width:760px){[data-style=retro] :is(h1,.hero h1){font-size:32px}}
[data-style=retro] :is(h2,.lobby h2){font-size:32px;line-height:1.2}[data-style=retro] .play-heading h1{font-size:32px;line-height:1.2}[data-style=retro] :is(h3,.group-head h3){font-size:24px;line-height:1.2}
[data-style=retro] :is(.eyebrow,.card-title,.button,.chip,.control-label,.game-hud,.count,.group-count,.card-badge,.save-chip,.ticket-who,.style-switch button,.play-tools .outline){font-size:16px;line-height:1.25}
/* The hero cabinet's labels are artwork inside a small frame: 8 px is Silkscreen's native size. */
[data-style=retro] :is(.cabinet-label,.cabinet-foot){font-size:8px;line-height:1.5}
[data-style=retro] .surprise-name{font-size:24px}[data-style=retro] .ticket-score{font-size:40px}
@media(max-width:760px){[data-style=retro] :is(h2,.lobby h2){font-size:24px}[data-style=retro] .play-heading h1{font-size:24px}[data-style=retro] .ticket-score{font-size:32px}
 /* The phone HUD keeps whole-pixel Silkscreen and wraps instead of shrinking below it. */
 [data-style=retro] body.playing .game-hud{font-size:16px;line-height:1.3;gap:4px 12px}}
/* Forms, account dialogs and long text keep the readable face. */
[data-style=retro] #account-dialog :is(h2,.eyebrow,.button,button){font-family:var(--font)}[data-style=retro] #account-dialog h2{font-size:28px;letter-spacing:-.02em;font-weight:700}
/* Readable sizes: no running text or metadata under 11 px; phone form fields at 16 px so iOS never zooms. */
.eyebrow,.info-card .eyebrow{font-size:11px}.hero-notes{font-size:12px}.card-description{font-size:12px}.card-meta{font-size:11px}.card-badge,.save-chip{font-size:11px}.controls-help{font-size:12px}.motion-toggle{font-size:12px}footer{font-size:12px}.filter-description{font-size:13px}.scale-labels{font-size:12px}.code-clues .symbol-card>span{font-size:11px}.search input{font-size:16px}
@media(max-width:760px){.header .brand small{display:none}.card-meta,.card-badge,.save-chip{font-size:11px}.ranking-controls select{font-size:16px}.hero-notes{font-size:12px}.game-sidebar .info-card p{font-size:12px}}
@media(max-width:400px){.card-description{font-size:12px}.card-meta,.card-badge{font-size:11px}}

/* Header: a two-part Calm/Retro switch with swatches, kept apart from light/dark. */
.style-switch{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}
.style-switch button{display:inline-flex;align-items:center;gap:7px;min-height:44px;min-width:44px;padding:0 12px;border-radius:11px;font-size:13px;font-weight:600;color:var(--muted)}
.style-switch button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #00000018}
.swatch{display:block;width:14px;height:14px;flex:0 0 14px}
.swatch-calm{border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#b9a5ef 55%,#7657d5);box-shadow:0 0 0 1px #00000020}
.swatch-retro{border-radius:0;background:conic-gradient(#6532d6 0 25%,#f2c14e 0 50%,#6532d6 0 75%,#f2c14e 0) 0 0/14px 14px;box-shadow:0 0 0 1px var(--ink)}
.pref-divider{display:block;width:1px;height:26px;background:var(--line)}
[data-style=retro] .style-switch{border-radius:2px;border-width:2px}[data-style=retro] .style-switch button{border-radius:1px}[data-style=retro] .style-switch button[aria-pressed=true]{box-shadow:2px 2px 0 var(--ink)}
@media(max-width:760px){.switch-label{display:none}.style-switch button{padding:0;justify-content:center}.pref-divider{height:22px}}

/* Hero. Calm: no orbits, stars or floating frames; the cabinet's own game is the one ambient animation.
   Retro: pixel sparkles and a stepped bob, at whole pixels. */
.orbit{display:none}
html:not([data-style=retro]) .art-star{display:none}
html:not([data-style=retro]) :is(.hero-cabinet,.mini-card,.art-star){animation:none}
html:not([data-style=retro]) .pair-art,html:not([data-style=retro]) .pair-art *{animation:none}
@media(prefers-reduced-motion:no-preference){[data-style=retro] .hero-cabinet{animation:pixel-bob 2s steps(2,end) infinite}[data-style=retro] :is(.mini-snake,.mini-pong){animation:none}[data-style=retro] .art-star{animation:pixel-twinkle 1.6s steps(2,end) infinite}[data-style=retro] :is(.arcade-buddy,.buddy-heart){animation-timing-function:steps(3,end)}}
@keyframes pixel-bob{0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes pixel-twinkle{0%,100%{opacity:1}50%{opacity:.35}}
.cabinet-screen{position:relative;overflow:hidden;background:var(--board)}
.cabinet-label span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}
@media(prefers-reduced-motion:no-preference){html:not([data-style=retro]) .channel-change canvas{animation:screen-crossfade .24s ease-out}[data-style=retro] .channel-change canvas{animation:channel-wipe .32s steps(4,end)}}
@keyframes screen-crossfade{from{opacity:.2}to{opacity:1}}
@keyframes channel-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.surprise-result{display:grid;gap:4px;max-width:440px;margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.surprise-result .eyebrow{margin:0;color:var(--muted)}
.surprise-name{font-size:21px;font-weight:700;letter-spacing:-.03em;margin:0 0 6px}
.surprise-actions{display:flex;flex-wrap:wrap;gap:8px}
.surprise-actions button{min-height:44px;padding:10px 16px;border-radius:12px;font-weight:600}
[data-style=retro] .surprise-result{border-radius:2px;border-width:2px;box-shadow:4px 4px 0 var(--ink)}[data-style=retro] .surprise-actions button{border-radius:2px}
@media(max-width:760px){.surprise-result{margin:18px auto 0;text-align:left}}

/* Shelf controls: sticky; on phones one compact, scrolling chip row with a faded edge (never page overflow). */
.shelf-controls{position:sticky;top:0;z-index:6;display:grid;gap:8px;margin:18px -12px 0;padding:10px 12px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.control-row{display:flex;align-items:center;gap:12px;min-width:0}
.control-label{flex:0 0 118px;font-size:12px;font-weight:700;color:var(--muted)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;min-width:0;padding:2px}
.chip{flex:0 0 auto;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:22px;background:var(--surface);font-size:13px;font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
[data-style=retro] .chip{border-radius:2px;border-width:2px}[data-style=retro] .chip[aria-pressed=true]{background:var(--accent);border-color:var(--ink);color:var(--accent-ink);box-shadow:2px 2px 0 var(--ink)}
[data-style=retro] .shelf-controls{background:var(--bg);border-bottom:2px solid var(--line)}
.filter-description{margin:12px 0 22px}
.collection-note{font-size:12px;color:var(--muted);margin:6px 0 0}
@media(max-width:760px){
 .shelf-controls{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:14px -22px 0;padding:8px 22px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent)}
 .shelf-controls::-webkit-scrollbar{display:none}
 .control-row{flex:0 0 auto}.control-row+.control-row{padding-left:10px;border-left:1px solid var(--line)}
 .control-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .chip-row{flex-wrap:nowrap}.chip{padding:0 14px}
}
@media(max-width:400px){.shelf-controls{margin:12px -15px 0;padding:8px 15px}}

/* Grouped shelf: a heading per kind of fun or era, only when it has games. */
.game-shelf{display:grid;gap:40px}
.group-head{display:grid;gap:2px;margin-bottom:16px}
.group-head h3{display:flex;align-items:center;gap:10px;margin:0;font-size:22px}
.group-count{font-size:12px;font-weight:700;letter-spacing:0;background:var(--surface2);color:var(--ink);padding:3px 9px;border-radius:20px}
.group-blurb{margin:0;font-size:13px;color:var(--muted)}
[data-style=retro] .group-count{border-radius:1px;border:2px solid var(--line);font-size:16px;padding:0 6px}

/* Cards. Calm: the art sits 8 px inside a 1 px light rim; one light, lift 3 px, press to 0.985. */
.card-frame{position:absolute;inset:0}.card-frame canvas{display:block;width:100%;height:100%}
.game-card{position:relative;transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s}
.game-card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
html:not([data-style=retro]) .game-card{padding:8px;border-radius:24px;box-shadow:inset 0 1px 0 var(--rim),0 1px 2px #1c17280d,0 10px 26px #1c172810}
html:not([data-style=retro]) .card-art{border-radius:17px;box-shadow:0 0 0 1px var(--rim)}
html:not([data-style=retro]) .card-body{padding:14px 10px 6px}
@media(hover:hover) and (pointer:fine){html:not([data-style=retro]) .game-card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 var(--rim),0 2px 4px #1c17280f,0 18px 36px #1c17281f;border-color:var(--accent)}}
html:not([data-style=retro]) .game-card:active{transform:translateY(-1px) scale(.985);transition-duration:.08s}
html:not([data-style=retro]) .game-card:hover .card-art canvas{transform:none}
/* Retro: a cartridge. Two notched top corners (drawn, so focus rings and shadows are never clipped), a ridged top
   and a printed label strip in the pixel font. Hover lifts while the shadow grows; pressing collapses it. */
[data-style=retro] .game-card{border:2px solid var(--line);border-radius:2px;background:var(--surface2);box-shadow:4px 4px 0 var(--ink);overflow:visible;transition:transform .12s steps(2,end),box-shadow .12s steps(2,end)}
[data-style=retro] .game-card:before,[data-style=retro] .game-card:after{content:'';position:absolute;top:-2px;width:12px;height:12px;background:var(--bg);z-index:3;pointer-events:none}
[data-style=retro] .game-card:before{left:-2px;border-right:2px solid var(--line);border-bottom:2px solid var(--line)}
[data-style=retro] .game-card:after{right:-2px;border-left:2px solid var(--line);border-bottom:2px solid var(--line)}
[data-style=retro] .card-art{margin:14px 12px 0;border:2px solid var(--line);overflow:hidden}
[data-style=retro] .card-art:before{content:'';position:absolute;left:0;right:0;top:0;height:5px;z-index:2;background:repeating-linear-gradient(90deg,var(--line) 0 2px,transparent 2px 6px)}
[data-style=retro] .card-body{margin:10px 12px 12px;padding:0 10px 10px;background:var(--surface);border:2px solid var(--line)}
[data-style=retro] .card-title{margin:0 -10px 8px;padding:6px 10px;background:var(--accent);color:var(--accent-ink);font-size:16px}
[data-style=retro] .card-title span{color:var(--accent-ink)}
[data-style=retro] .card-meta{border-top:2px dotted var(--line)}
@media(hover:hover) and (pointer:fine){[data-style=retro] .game-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);border-color:var(--line)}}
[data-style=retro] .game-card:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.card-badge{background:#fffffff0;color:#2b2140;font-weight:600}
[data-style=retro] .card-badge,[data-style=retro] .save-chip{border-radius:1px;background:var(--surface);color:var(--ink);border:2px solid var(--line);backdrop-filter:none}
.retro-only{display:none}[data-style=retro] .retro-only{display:inline-block}[data-style=retro] .calm-only{display:none}
/* Shared press feel for buttons: Calm presses in, Retro drops onto its shadow. */
html:not([data-style=retro]) :is(.button,.outline,.primary,.chip):active{transform:scale(.985)}
[data-style=retro] :is(.button.primary,.surprise-actions .primary):active{transform:translate(3px,3px);box-shadow:none}

/* Lobby: the invite in the panel, and player plates driven by the server's seats and ready flags. */
.lobby{padding:48px 22px}
.lobby-line{max-width:460px;margin:0 auto 6px}
.player-plates{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:540px;margin:20px auto 14px;padding:0}
.player-plate{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);text-align:left;transition:border-color .2s,background .2s}
.player-plate>div{min-width:0}.player-plate b{display:block;font-size:14px;overflow-wrap:anywhere}
.plate-status{display:block;font-size:12px;color:var(--muted)}
.player-plate.waiting{border-style:dashed;background:transparent}
.player-plate.ready{border-color:var(--success);background:var(--success-soft)}.player-plate.ready .plate-status{color:var(--success);font-weight:700}
.player-plate.joined .plate-status{color:var(--ink);font-weight:600}
.plate-avatar{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:14px;background:var(--soft);color:var(--accent);font-weight:700}
.plate-avatar .ui-icon{width:22px;height:22px}
.invite-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 auto 4px}
.invite-fallback{display:block;width:min(440px,100%);margin:8px auto;font-size:16px}
[data-style=retro] .player-plate{border-radius:2px;border-width:2px;box-shadow:3px 3px 0 var(--line)}[data-style=retro] .player-plate.ready{box-shadow:3px 3px 0 var(--success)}
@media(max-width:480px){.player-plates{grid-template-columns:1fr}.lobby{padding:36px 16px}}

/* Results: a printed ticket in Calm (perforations and punched sides), a pixel high-score table in Retro. */
#game-result:not(:empty){text-align:center}
.score-ticket{position:relative;max-width:560px;margin:0 auto;padding:22px 24px 18px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 30px #1c172814}
.score-ticket>.eyebrow{margin:0 0 2px;color:var(--muted)}.score-ticket h3{margin:0 0 4px}
.ticket-verdict{font-weight:700;margin:0}
.ticket-columns{display:grid;gap:14px;margin:14px 0;padding:14px 0;border-top:2px dashed var(--line);border-bottom:2px dashed var(--line)}
.ticket-columns.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ticket-column{min-width:0}.ticket-who{margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ticket-name{margin:0;font-size:14px;overflow-wrap:anywhere}
.ticket-score{margin:2px 0 6px;font-size:34px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.ticket-column.winner .ticket-score{color:var(--accent)}
.ticket-stats{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:13px}.ticket-stats dt{color:var(--muted)}.ticket-stats dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.ticket-rank{margin:0 0 10px}
.rematch-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0}
.rematch-list li{padding:6px 12px;border-radius:20px;background:var(--surface2);font-size:12px}.rematch-list li.asked{background:var(--soft);color:var(--ink);font-weight:700}
.ticket-actions{display:flex;flex-wrap:wrap;gap:8px}.ticket-actions button{min-height:44px;margin:0!important}
html:not([data-style=retro]) .score-ticket:before,html:not([data-style=retro]) .score-ticket:after{content:'';position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background:var(--soft);border:1px solid var(--line);translate:0 -50%}
html:not([data-style=retro]) .score-ticket:before{left:-11px;clip-path:inset(0 0 0 50%)}html:not([data-style=retro]) .score-ticket:after{right:-11px;clip-path:inset(0 50% 0 0)}
[data-style=retro] .score-ticket{border-radius:2px;border-width:2px;box-shadow:5px 5px 0 var(--ink)}
[data-style=retro] .ticket-columns{border-style:dotted;gap:0}
[data-style=retro] .ticket-columns.two .ticket-column+.ticket-column{border-left:2px dotted var(--line);padding-left:14px}
[data-style=retro] .ticket-column.winner .ticket-who:before{content:'> ';color:var(--accent)}
[data-style=retro] .rematch-list li{border-radius:1px;border:2px solid var(--line);background:var(--surface)}
@media(max-width:420px){.ticket-columns.two{grid-template-columns:1fr}[data-style=retro] .ticket-columns.two .ticket-column+.ticket-column{border-left:0;padding-left:0;border-top:2px dotted var(--line);padding-top:10px}.score-ticket{padding:18px 16px 14px}}

/* A checkpoint that lands while you watch: a drawn check (Calm), two blinks (Retro), static with reduced motion. */
.save-check{display:inline-grid;place-items:center;width:18px;height:18px;opacity:0;color:var(--success);transition:opacity .2s}
.save-check .ui-icon{color:var(--success)}
.save-landed .save-check{opacity:1}
@media(prefers-reduced-motion:no-preference){html:not([data-style=retro]) .save-landed .save-check path{stroke-dasharray:26;stroke-dashoffset:26;animation:check-draw .3s ease-out forwards}[data-style=retro] .save-landed .save-check{animation:save-blink .5s steps(1,end) 2}}
@keyframes check-draw{to{stroke-dashoffset:0}}
@keyframes save-blink{50%{opacity:0}}
[data-style=retro] .save-check .ui-icon{shape-rendering:crispEdges}

/* Retro avatars are square pixel monograms. */
[data-style=retro] :is(.account-avatar,.avatar,.plate-avatar){border-radius:0;box-shadow:2px 2px 0 var(--ink)}
.rank-note{display:block;font-size:11px;color:var(--muted)}
.motion-paused .channel-change canvas,.motion-paused .save-landed .save-check,.motion-paused .save-landed .save-check path{animation:none;stroke-dashoffset:0}

/* Phone header. One row holds the original logo, the word and all three preference controls at 44 px; Games and
   Rankings are a second row of 44 px links. Nothing is shrunk below 44 px and the logo keeps its own proportions.
   tests/test_header_fit.mjs reads the custom properties below and checks the row against real font metrics. */
@media(max-width:760px){
 .header{--pad:10px;--gap:6px;--logo:64px;--brand-gap:6px;--word:20px;--word-retro:16px;--pref-gap:6px;--switch-pad:2px;flex-wrap:wrap;column-gap:var(--gap);row-gap:0;padding:4px var(--pad) 0}
 .header .brand{gap:var(--brand-gap);margin-right:auto;min-width:0}
 .header .watzl-logo{width:var(--logo);flex:0 0 var(--logo)}
 .header .arcade-word{font-size:var(--word)}[data-style=retro] .header .arcade-word{font-size:var(--word-retro)}
 .header .preferences{gap:var(--pref-gap);margin-left:0}
 .header .pref-divider{display:none}
 .header .style-switch{padding:var(--switch-pad)}
 .header #account-button{width:44px;min-width:44px;height:44px;padding:0;gap:0;justify-content:center}.header #account-button .account-label{display:none}
 .header nav{order:3;width:100%;flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 0 0;padding:0;border-top:1px solid var(--line)}
 .header .nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0 18px}
 body.playing .header{padding-bottom:4px}
}
/* Very narrow screens (and 200% zoom): the brand takes its own row and the controls wrap instead of overflowing. */
@media(max-width:365px){.header .preferences{flex-wrap:wrap;justify-content:center;margin:0 auto}.header .nav-link{padding:0 10px}}
/* Short landscape phones have the width for one row: the links sit beside the brand again. */
@media(max-width:760px) and (orientation:landscape) and (max-height:600px){.header{padding-bottom:4px}.header nav{order:0;width:auto;margin:0 0 0 auto;border-top:0}.header .brand{margin-right:0}}
/* Retro's pixel word stays on Silkscreen's whole-pixel sizes on wider screens too. */
@media(min-width:761px){[data-style=retro] .arcade-word{font-size:24px}}

/* Card tags: the era and the saves marker. Calm sets them on the art's top corners as before; Retro prints them on
   the cartridge above the art, so nothing covers the preview. Browsing by era leaves the era out (the group heading
   names it); it stays in every card's accessible name. */
.card-tags{position:absolute;z-index:2;left:20px;right:20px;top:20px;display:flex;align-items:flex-start;gap:6px;pointer-events:none}
.card-tags:empty{display:none}
.card-tags>:is(.card-badge,.save-chip){position:static}.card-tags>.save-chip{margin-left:auto}
@media(max-width:400px){.card-tags{left:16px;right:16px;top:16px}}
[data-style=retro] .card-tags,[data-style=retro] .card-tags:empty{position:static;display:flex;align-items:center;height:16px;margin:4px 14px 0}
[data-style=retro] .card-tags+.card-art{margin-top:2px}
[data-style=retro] .card-tags>:is(.card-badge,.save-chip){min-width:0;padding:0;border:0;background:none;box-shadow:none;font:700 11px/16px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
[data-style=retro] .card-tags>.card-badge{overflow:hidden;text-overflow:ellipsis}
[data-style=retro] .card-tags>.save-chip{flex:0 0 auto;gap:4px}[data-style=retro] .card-tags>.save-chip .ui-icon{width:14px;height:14px}
@media(max-width:760px){[data-style=retro] .card-tags>.save-chip{font-size:0}}
/* Aiming controls sit beside Missile Guard and Mini Golf on short landscape screens. */
@media(orientation:landscape) and (max-height:600px){
 body.game-expanded:is([data-game=missiles],[data-game=golf]) .game-panel{display:grid;grid-template-columns:minmax(0,1fr) min(260px,32vw);grid-template-rows:auto minmax(0,1fr)}
 body.game-expanded:is([data-game=missiles],[data-game=golf]) #game-hud{grid-column:1/-1}
 body.game-expanded:is([data-game=missiles],[data-game=golf]) #canvas-wrap{grid-column:1;grid-row:2;min-width:0;padding:5px}
 body.game-expanded:is([data-game=missiles],[data-game=golf]) #game-inputs{grid-column:2;grid-row:2;min-width:0;padding:6px 10px;overflow:auto}
 body.game-expanded:is([data-game=missiles],[data-game=golf]) .exp-notice{font-size:11px;margin:0 0 6px;line-height:1.3}
 body.game-expanded:is([data-game=missiles],[data-game=golf]) .exp-shot-controls{display:grid;gap:6px}
 body.game-expanded:is([data-game=missiles],[data-game=golf]) .exp-slider{width:100%;min-width:0;max-width:none}
 body.game-expanded:is([data-game=missiles],[data-game=golf]) #touch-controls{display:none}
}

/* A tall results ticket must remain reachable on short landscape Focus screens. */
@media (orientation:landscape) and (max-height:600px){
 body.game-expanded #game-result:not(:empty){position:fixed;top:70px;bottom:auto;max-height:calc(100dvh - 82px);overflow:auto;overscroll-behavior:contain}
 body.game-expanded #game-result .score-ticket{padding:12px 16px}
 body.game-expanded #game-result .ticket-columns{margin:8px 0;padding:8px 0}
}

/* Fortlight: isolated controls and responsive arena rules. */
body[data-game=fort] .touch-controls{display:grid;grid-template-columns:repeat(2,minmax(96px,150px));gap:14px;justify-content:center}
body[data-game=fort] .touch-controls button{grid-area:auto;min-height:64px;min-width:0;margin:0}
body[data-game=fort] #board{cursor:crosshair}
@media(max-width:760px){body[data-game=fort]:not(.game-expanded) #board{max-height:clamp(320px,calc(100dvh - 330px),70dvh)}}
@media(orientation:landscape) and (max-height:600px){body.game-expanded[data-game=fort] .game-panel{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:auto minmax(0,1fr) auto}body.game-expanded[data-game=fort] .touch-controls{grid-template-columns:1fr;max-width:180px;margin:0 auto}}

.block-material{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600}.block-material[hidden]{display:none}.block-material select{width:auto;max-width:100%;min-height:44px}#dialog-material{margin:1rem 0}

.guest-name-options{margin:.8rem 0 1.2rem}.guest-name-options summary{cursor:pointer;padding:.65rem 0;font-weight:600}.guest-name-options .account-form{margin-top:.5rem}

/* Reserve a real arrow gutter for every single-choice dropdown, including long labels. */
select:not([multiple]):not([size]){appearance:none;-webkit-appearance:none;padding-inline:14px 42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23716e7d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
html[data-theme=dark] select:not([multiple]):not([size]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23bab5c7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ranking-controls label:after{content:none}.ranking-controls select:not([multiple]):not([size]){padding-inline:42px}
.block-material{gap:10px;min-width:0;flex-wrap:wrap}.block-material select{min-width:158px;flex-shrink:0}
.play-tools{gap:10px;flex-wrap:wrap}.ticket-actions{gap:12px;flex-wrap:wrap}
@media(max-width:480px){.play-tools{width:100%;justify-content:flex-start;gap:10px}.block-material{flex-basis:100%}.block-material select{flex:1;min-width:0}.ranking-controls label{width:100%}}
@media(forced-colors:active){select:not([multiple]):not([size]){appearance:auto;-webkit-appearance:auto;background-image:none;padding-inline:12px}}

.guest-score-form{display:grid;gap:12px;margin:20px 0;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}.guest-score-form label{display:grid;gap:8px;font-size:13px;font-weight:600}.guest-score-form input{width:100%;min-width:0}.guest-score-form p{margin:0}.guest-score-form p:empty{display:none}.guest-score-form button{padding:12px 18px;border-radius:10px;min-height:48px}

/* Easy group B (Gem Burrow, Droplet Duel, Catch & Clatter): touch pads and narrow board height only. Append-only block;
   it never styles the game panel or focus layout, so it composes with the panel's has-movement-controls landscape rules. */
body:is([data-game=burrow],[data-game=droplet]) .touch-controls{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,56px);gap:8px;justify-content:center}
body[data-game=droplet] .touch-controls{grid-template-columns:repeat(3,56px) 80px}
body:is([data-game=burrow],[data-game=droplet]) .touch-controls button{min-width:0;min-height:44px;width:56px;height:56px;padding:0}
body:is([data-game=burrow],[data-game=droplet]) .touch-controls .ui-icon{width:24px;height:24px}
body[data-game=droplet] .touch-controls button[data-key=fire]{grid-area:1/4/3/5;align-self:center;width:76px;height:76px;margin-left:4px;border-radius:50%;font-size:15px}
[data-style=retro] body[data-game=droplet] .touch-controls button[data-key=fire]{border-radius:4px}
body[data-game=clatter] .touch-controls{display:grid;grid-template-columns:96px 104px 96px;gap:12px;justify-content:center}
body[data-game=clatter] .touch-controls button{min-height:60px;margin:0}
body[data-game=clatter] .touch-controls [data-key=left]{grid-area:1/1}body[data-game=clatter] .touch-controls [data-key=fire]{grid-area:1/2;min-width:0}body[data-game=clatter] .touch-controls [data-key=right]{grid-area:1/3}
body:is([data-game=burrow],[data-game=droplet],[data-game=clatter]) #board{cursor:pointer}
@media(max-width:760px){body:is([data-game=burrow],[data-game=droplet],[data-game=clatter]):not(.game-expanded) #board{max-height:clamp(280px,calc(100dvh - 350px),66dvh)}}
/* Landscape focus on a phone: the board sits beside its touch pad (as the arcade games above do), so it gets the full
   height instead of sharing it with the pad. Columns fit each pad: Burrow 184 px, Droplet with its drop key, Clatter 320 px. */
@media(orientation:landscape) and (max-height:600px){body.game-expanded:is([data-game=burrow],[data-game=droplet],[data-game=clatter]) .game-panel{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:40px minmax(0,1fr) auto}body.game-expanded[data-game=droplet] .game-panel{grid-template-columns:minmax(0,1fr) 280px}body.game-expanded[data-game=clatter] .game-panel{grid-template-columns:minmax(0,1fr) 330px}}
/* Parcel Paths: gates are tapped on the board, so no pad; Send / Undo / Reset are 44 px or taller and wrap rather than hide.
   The lobby's Versus / Co-op choice matches the match-length buttons. Append-only; the panel layout rules are untouched. */
body[data-game=paths] .touch-controls{display:none}
body[data-game=paths] #board{cursor:pointer}
.paths-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 0 6px}.paths-controls button{min-height:48px;min-width:96px;margin:0}.paths-controls .primary{min-width:180px}
.variant-options{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:10px 0 8px}.variant-options button{min-height:44px;min-width:96px}.variant-options [aria-pressed=true]{background:var(--soft);border-color:var(--accent);color:var(--ink)}.variant-options button:disabled{opacity:1}.variant-options button:disabled:not([aria-pressed=true]){opacity:.5}
@media(max-width:760px){body[data-game=paths]:not(.game-expanded) #board{max-height:clamp(320px,calc(100dvh - 300px),70dvh)}}
@media(max-width:400px){.paths-controls button{min-width:0;flex:1 1 30%}.paths-controls .primary{flex-basis:100%}}
@media(orientation:landscape) and (max-height:600px){body.game-expanded[data-game=paths] .game-panel{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:40px minmax(0,1fr) auto}body.game-expanded[data-game=paths] .paths-controls{flex-direction:column;align-items:stretch}
 /* Short landscape focus: every pixel of height is board scale, so the heading is compact (its tools stay reachable). */
 body.game-expanded[data-game=paths] #play{padding-top:6px;padding-bottom:6px}body.game-expanded[data-game=paths] .play-heading{margin:0 0 4px}body.game-expanded[data-game=paths] .play-heading h1{font-size:18px!important}}

.paths-queues{display:flex;flex-direction:column;gap:8px;margin:8px auto 4px;max-width:520px}
.paths-queue{display:flex;flex-direction:column;gap:3px;text-align:left}.paths-queue-place{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
@media(orientation:landscape) and (max-height:600px){body.game-expanded[data-game=paths] #game-inputs{max-height:100%;overflow-y:auto;overscroll-behavior:contain;align-self:stretch}
 body.game-expanded[data-game=paths] .paths-queues{margin:6px 0 2px;gap:6px}body.game-expanded[data-game=paths] .parcel-queue{padding:6px 8px;font-size:12px;gap:4px 8px}body.game-expanded[data-game=paths] .parcel-queue ol{gap:4px 8px}}
/* The keyboard cursor's last stop is the Send button. */
.paths-controls [data-cursor=true]{outline:3px solid var(--ink);outline-offset:3px}
@media(max-width:380px){body:is([data-game=burrow],[data-game=droplet]) .touch-controls{grid-template-columns:repeat(3,50px);grid-template-rows:repeat(2,50px)}body[data-game=droplet] .touch-controls{grid-template-columns:repeat(3,50px) 70px}body:is([data-game=burrow],[data-game=droplet]) .touch-controls button{width:50px;height:50px}body[data-game=droplet] .touch-controls button[data-key=fire]{width:68px;height:68px}body[data-game=clatter] .touch-controls{grid-template-columns:repeat(3,minmax(84px,1fr))}}

/* Canyon Courier: steering under the outer thumbs, throttle above brake in the middle; every target at least 44 px. */
body[data-game=canyon] .touch-controls{display:grid;grid-template-columns:76px 92px 76px;grid-template-rows:52px 52px;gap:8px;justify-content:center}
body[data-game=canyon] .touch-controls [data-key=left]{grid-area:1/1/3/2}
body[data-game=canyon] .touch-controls [data-key=up]{grid-area:1/2}
body[data-game=canyon] .touch-controls [data-key=down]{grid-area:2/2}
body[data-game=canyon] .touch-controls [data-key=right]{grid-area:1/3/3/4}
body[data-game=canyon] .touch-controls button{min-width:0;min-height:44px;width:100%;height:100%;padding:0 6px;font-size:14px;font-weight:700}
body[data-game=canyon] .touch-controls :is([data-key=left],[data-key=right]){font-size:28px}
body[data-game=canyon] #board{cursor:ew-resize}
/* Orbit Breach: circling under the outer thumbs, lanes in the middle, a large hold-to-charge button. */
body[data-game=orbit] .touch-controls{display:grid;grid-template-columns:64px 76px 64px 104px;grid-template-rows:52px 52px;gap:8px;justify-content:center}
body[data-game=orbit] .touch-controls [data-key=left]{grid-area:1/1/3/2}
body[data-game=orbit] .touch-controls [data-key=up]{grid-area:1/2}
body[data-game=orbit] .touch-controls [data-key=down]{grid-area:2/2}
body[data-game=orbit] .touch-controls [data-key=right]{grid-area:1/3/3/4}
body[data-game=orbit] .touch-controls [data-key=fire]{grid-area:1/4/3/5;min-width:0;margin:0}
body[data-game=orbit] .touch-controls button{min-width:0;min-height:44px;width:100%;height:100%;padding:0 6px;font-size:14px;font-weight:700}
body[data-game=orbit] .touch-controls :is([data-key=left],[data-key=right]){font-size:28px}
body[data-game=orbit] #board{cursor:crosshair}
/* Reef Rescue: a direction pad with a large Action button (hold to winch, tap beside your partner to hand over). */
body[data-game=reef] .touch-controls{display:grid;grid-template-columns:repeat(3,56px) 104px;grid-template-rows:52px 52px;gap:8px;justify-content:center}
body[data-game=reef] .touch-controls [data-key=up]{grid-area:1/2}
body[data-game=reef] .touch-controls [data-key=left]{grid-area:2/1}
body[data-game=reef] .touch-controls [data-key=down]{grid-area:2/2}
body[data-game=reef] .touch-controls [data-key=right]{grid-area:2/3}
body[data-game=reef] .touch-controls [data-key=fire]{grid-area:1/4/3/5;min-width:0;margin:0}
body[data-game=reef] .touch-controls button{min-width:0;min-height:44px;width:100%;height:100%;padding:0 6px;font-size:14px;font-weight:700}
body[data-game=reef] .touch-controls :is([data-key=left],[data-key=right],[data-key=up],[data-key=down]){font-size:24px}
body[data-game=reef] #board{cursor:pointer}
/* Toy Tanks: a direction pad for driving and a large Fire button; aiming is on the board itself. */
body[data-game=tanks] .touch-controls{display:grid;grid-template-columns:repeat(3,56px) 104px;grid-template-rows:52px 52px;gap:8px;justify-content:center}
body[data-game=tanks] .touch-controls [data-key=up]{grid-area:1/2}
body[data-game=tanks] .touch-controls [data-key=left]{grid-area:2/1}
body[data-game=tanks] .touch-controls [data-key=down]{grid-area:2/2}
body[data-game=tanks] .touch-controls [data-key=right]{grid-area:2/3}
body[data-game=tanks] .touch-controls [data-key=fire]{grid-area:1/4/3/5;min-width:0;margin:0}
body[data-game=tanks] .touch-controls button{min-width:0;min-height:44px;width:100%;height:100%;padding:0 6px;font-size:14px;font-weight:700}
body[data-game=tanks] .touch-controls :is([data-key=left],[data-key=right],[data-key=up],[data-key=down]){font-size:24px}
body[data-game=tanks] #board{cursor:crosshair}
/* Circuit Escape: a direction pad and a large Fire button (hold to keep firing); a drag on the board also moves. */
body[data-game=circuit] .touch-controls{display:grid;grid-template-columns:repeat(3,56px) 104px;grid-template-rows:52px 52px;gap:8px;justify-content:center}
body[data-game=circuit] .touch-controls [data-key=up]{grid-area:1/2}
body[data-game=circuit] .touch-controls [data-key=left]{grid-area:2/1}
body[data-game=circuit] .touch-controls [data-key=down]{grid-area:2/2}
body[data-game=circuit] .touch-controls [data-key=right]{grid-area:2/3}
body[data-game=circuit] .touch-controls [data-key=fire]{grid-area:1/4/3/5;min-width:0;margin:0}
body[data-game=circuit] .touch-controls button{min-width:0;min-height:44px;width:100%;height:100%;padding:0 6px;font-size:14px;font-weight:700}
body[data-game=circuit] .touch-controls :is([data-key=left],[data-key=right],[data-key=up],[data-key=down]){font-size:24px}
body[data-game=circuit] #board{cursor:crosshair}
.tanks-assist{min-height:44px;margin:0 0 8px}
.tanks-assist[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
/* Easy group C in focus mode on short landscape screens: the board takes the whole height on the left; the HUD, the
   notice and a compact control pad (every target at least 44 px) stack in a 252 px column on the right. In one column
   the HUD and the 112 px pad left the board a 68 px strip on an 844x390 phone. */
@media(orientation:landscape) and (max-height:600px){
 body.game-expanded:is([data-game=canyon],[data-game=orbit],[data-game=reef],[data-game=tanks],[data-game=circuit],[data-game=platformer],[data-game=rangers],[data-game=delivery],[data-game=cloudkeepers],[data-game=slipstream]) .game-panel{display:grid;grid-template-columns:minmax(0,1fr) 252px;grid-template-rows:auto minmax(0,1fr) auto;column-gap:10px}
 body.game-expanded:is([data-game=canyon],[data-game=orbit],[data-game=reef],[data-game=tanks],[data-game=circuit],[data-game=platformer],[data-game=rangers],[data-game=delivery],[data-game=cloudkeepers],[data-game=slipstream]) #canvas-wrap{grid-column:1;grid-row:1/4;min-height:0}
 body.game-expanded:is([data-game=canyon],[data-game=orbit],[data-game=reef],[data-game=tanks],[data-game=circuit],[data-game=platformer],[data-game=rangers],[data-game=delivery],[data-game=cloudkeepers],[data-game=slipstream]) #game-hud{grid-column:2;grid-row:1;align-self:start;flex-wrap:wrap;gap:4px 10px;padding:8px 10px;min-height:0;font-size:11px}
 body.game-expanded:is([data-game=canyon],[data-game=orbit],[data-game=reef],[data-game=tanks],[data-game=circuit],[data-game=platformer],[data-game=rangers],[data-game=delivery],[data-game=cloudkeepers],[data-game=slipstream]) #game-inputs{grid-column:2;grid-row:2;align-self:end;padding:0 4px}
 body.game-expanded:is([data-game=canyon],[data-game=orbit],[data-game=reef],[data-game=tanks],[data-game=circuit],[data-game=platformer],[data-game=rangers],[data-game=delivery],[data-game=cloudkeepers],[data-game=slipstream]) .exp-notice{font-size:11px;line-height:1.35;margin:0 0 6px}
 body.game-expanded:is([data-game=canyon],[data-game=orbit],[data-game=reef],[data-game=tanks],[data-game=circuit],[data-game=platformer],[data-game=rangers],[data-game=delivery],[data-game=cloudkeepers],[data-game=slipstream]) #touch-controls{grid-column:2;grid-row:3;align-self:end;padding:6px}
 body.game-expanded[data-game=tanks] .touch-controls{grid-template-columns:repeat(3,46px) 72px;grid-template-rows:48px 48px;gap:6px}
 body.game-expanded[data-game=circuit] .touch-controls{grid-template-columns:repeat(3,46px) 72px;grid-template-rows:48px 48px;gap:6px}
 body.game-expanded[data-game=tanks] .tanks-assist{min-height:44px;margin:0 0 6px;font-size:12px;padding:0 10px}
 body.game-expanded[data-game=canyon] .touch-controls{grid-template-columns:64px 80px 64px;grid-template-rows:48px 48px;gap:6px}
 body.game-expanded[data-game=orbit] .touch-controls{grid-template-columns:48px 60px 48px 62px;grid-template-rows:48px 48px;gap:6px}
 body.game-expanded[data-game=reef] .touch-controls{grid-template-columns:repeat(3,46px) 72px;grid-template-rows:48px 48px;gap:6px}
}

body[data-game=platformer] .touch-controls{gap:12px}
body[data-game=platformer] .touch-controls button{min-width:64px;min-height:48px}

.cloud-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:10px 0}.cloud-actions button{min-height:48px;min-width:88px}

/* Give the shared answer room to breathe beside the word games' longer action labels. */
@media(max-width:540px){body:is([data-game="words"],[data-game="brain"]) .input-row{flex-direction:column;align-items:stretch}body:is([data-game="words"],[data-game="brain"]) .input-row input{width:100%;min-height:44px}body:is([data-game="words"],[data-game="brain"]) .input-row button{min-height:44px}}

body[data-game="brain"] .social-prompt,body[data-game="words"] .social-history{overflow-wrap:anywhere}