.overlay.start-screen{position:fixed;inset:0;z-index:40;border-radius:0;overflow:auto;padding:24px;background:radial-gradient(ellipse at 50% 40%,#25152980,#160e1eeb 78%),url('./assets/room-v1.webp') center/cover;backdrop-filter:blur(4px)}
.start-screen .dialog{display:flex;flex-direction:column;align-items:center;width:min(100%,540px);max-height:calc(100svh - 48px);overflow:auto;padding:25px 35px 30px;border:1px solid #ca9c6766;background:radial-gradient(ellipse at top,#563b414d,transparent 65%),#241b28e8;box-shadow:inset 0 1px #ffe0ad1a,0 25px 90px #0009;border-radius:28px}
.start-screen .dialog>.eyebrow{display:none}.start-screen #dialog-body{display:contents}
.start-art{order:1;width:180px;height:180px;flex-shrink:0;filter:drop-shadow(0 8px 13px #0c081752)}.start-art svg{display:block;width:100%;height:100%}
.start-screen .dialog h2{order:2;margin:0;font-size:58px;line-height:.94;letter-spacing:3px;font-weight:900;color:#f7d798;text-shadow:0 3px 0 #6f452d,0 6px 18px #110d1a88}.start-screen .dialog h2 span{display:block;font-size:38px;letter-spacing:15px;padding-left:15px;line-height:1.2;color:#ffe9bd}
.start-screen .start-tagline{order:3;font-size:14px;margin:20px 0 22px;color:#e2c6b1}
.start-screen #dialog-actions{order:4;width:100%}.start-screen #dialog-actions button{display:flex;align-items:center;justify-content:center;gap:14px;width:min(100%,310px);min-height:66px;margin:0 auto;padding:13px 25px;border:1px solid #ffe4a6;border-radius:16px;background:linear-gradient(#f5d992,#d8a95e);color:#39242c;font-size:24px;letter-spacing:1px;font-weight:900;box-shadow:inset 0 2px #fff0c7,0 5px 0 #8e5835,0 9px 28px #eabd6b25;transition:filter .15s}
.start-screen #dialog-actions button:before{content:"";border-left:14px solid currentColor;border-top:9px solid transparent;border-bottom:9px solid transparent}.start-screen #dialog-actions button:hover{filter:brightness(1.1)}.start-screen #dialog-actions button:active{box-shadow:inset 0 2px 4px #59342155,0 2px 0 #8e5835}
.start-screen .start-best{order:5;font-size:10px;letter-spacing:1.8px;color:#bda69d;margin:26px 0 0}.start-best strong{color:#f4d490;font-size:16px;letter-spacing:.4px;margin-left:7px}
.start-screen .start-hint{order:6;margin:13px 0 0;color:#a78f85;font-size:11px;letter-spacing:1px}
.scoring-guide{display:flex;justify-content:center;gap:8px;margin:12px auto 8px;max-width:400px}.scoring-guide span{flex:1;padding:7px 5px;background:#1a14227a;border:1px solid #c2925a44;border-radius:9px;color:#cbb6a6;font-size:10px}.scoring-guide b{display:block;color:#f5d48d;font-size:19px;margin-top:3px}.graphic-tutorial .scoring-note{font-size:11px;color:#a9dfc3;margin-bottom:9px}
.first-tutorial .tutorial-preference{display:none}
@media(max-width:600px){.overlay.start-screen{padding:14px}.start-screen .dialog{padding:22px 22px 25px;max-height:calc(100svh - 28px)}.start-art{width:150px;height:150px}.start-screen .dialog h2{font-size:45px;letter-spacing:2px}.start-screen .dialog h2 span{font-size:30px;letter-spacing:12px;padding-left:12px}.start-screen .start-tagline{font-size:12px;margin:17px 0 23px}.start-screen #dialog-actions button{min-height:64px;font-size:23px}.start-screen .start-best{font-size:9px}.scoring-guide{gap:6px;margin-top:9px}.scoring-guide b{font-size:17px}.graphic-tutorial .scoring-note{font-size:10px}}
@media(max-height:620px){.start-screen .dialog{padding-top:12px;padding-bottom:18px}.start-art{width:105px;height:105px}.start-screen .dialog h2{font-size:38px}.start-screen .dialog h2 span{font-size:25px}.start-screen .start-tagline{margin:13px 0 17px}.start-screen .start-best{margin-top:19px}}

.graphic-tutorial .guide-reopen-note{font-size:10px;color:#b5a091;margin:9px 0 0}
body:has(.overlay.start-screen:not([hidden])),body:has(.overlay.graphic-tutorial:not([hidden])){overflow:hidden}

/* Illustrated branding replaces the provisional SVG icon and text wordmark. */
.start-logo{display:block;order:1;width:100%;max-width:450px;height:auto;max-height:340px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 7px 10px #120c1b44)}
.start-screen .dialog #dialog-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.start-screen .start-tagline{margin-top:12px}
@media(max-width:600px){.start-screen .dialog{padding:20px 14px 25px}.start-logo{max-height:290px}.start-screen .start-tagline{margin-top:14px}}
@media(max-height:620px){.start-logo{max-height:210px;width:auto;max-width:100%}.start-screen .start-tagline{margin-top:8px}}

/* Use the same illustrated identity on the cabinet without crowding the board. */
.brand{min-width:0}.brand h1{width:190px;height:112px;line-height:1;letter-spacing:0;margin:-8px 0 -5px}
.header-logo{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #2b171844)}
@media(max-width:760px){.topbar{grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;align-items:center}.brand{grid-column:1;grid-row:1/3;align-self:center}.brand h1{width:160px;max-width:100%;height:102px;margin:-6px 0}.scores{grid-column:2;grid-row:1;justify-self:end;padding:7px 10px;gap:14px}.scores>div{flex-direction:column;align-items:flex-start;gap:3px}.scores strong{font-size:18px}.top-controls{grid-column:2;grid-row:2;flex-direction:row;justify-self:end;gap:8px}}
@media(max-width:350px){.brand h1{width:137px;height:92px}.scores{gap:10px;padding:6px 8px}.scores strong{font-size:16px}.topbar{gap:6px 8px}}

/* Silent, non-interactive gameplay behind the title card. */
.overlay.start-screen{isolation:isolate;background:#211724;backdrop-filter:none}
.attract-demo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:radial-gradient(ellipse,#64442e66,#211623cc),url('./assets/walnut-v1.webp') center/cover}
.demo-board{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(140vw,118svh);aspect-ratio:1;border:8px solid #69412b;border-radius:26px;background:#241a29;box-shadow:0 0 0 4px #b58a5666,0 18px 65px #100a1677;will-change:transform}
.demo-grid,.demo-blocks{position:absolute;inset:8px}.demo-grid{display:grid;grid-template:repeat(8,1fr)/repeat(8,1fr)}
.demo-grid>i{margin:2px;border:1px solid #8f6f8b35;border-radius:9px;background:linear-gradient(140deg,#3b2d3e,#251c2d);box-shadow:inset 0 2px 6px #110c1899}
.demo-tile{position:absolute;left:0;top:0;width:12.5%;height:12.5%;transform:translate(calc(var(--x)*100%),calc(var(--y)*100%));transition:transform .6s cubic-bezier(.3,.7,.3,1);will-change:transform}
.demo-tile:after{content:"";position:absolute;inset:3px;border:2px solid #ffffff44;border-radius:10px;background:linear-gradient(140deg,#ffffff44,transparent 70%),var(--tile-color);box-shadow:inset 2px 3px 1px #ffffff77,inset -2px -5px 1px #0003,0 5px 8px #100b1644}
.demo-blocks.instant .demo-tile{transition:none}
.start-screen:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,#1c122133 25%,#180e218c 75%,#110a19cc)}
.start-screen .dialog{position:relative;z-index:2;background:radial-gradient(ellipse at top,#563b4133,transparent 65%),#241b28a8;backdrop-filter:blur(5px);box-shadow:inset 0 1px #ffe0ad1a,0 25px 90px #0009}
@media(max-width:600px){.demo-board{border-width:5px;border-radius:18px}.demo-tile:after{inset:2px;border-width:1px;border-radius:7px}.demo-grid>i{margin:1px;border-radius:6px}}
@media(prefers-reduced-motion:reduce){.demo-tile{transition:none}.demo-board{will-change:auto}}
.start-screen .start-tagline,.start-screen .start-best,.start-screen .start-hint{text-shadow:0 1px 4px #100b16,0 0 8px #100b16}