/* SDC after-hours: enamel, smoked glass, brushed metal and stadium light. */
:root{--paper:#071320;--ink:#f1f7f7;--muted:#9eb5c6;--line:#284153;--lime:#c2f66a;--blue:#248bd7;--green:#20b57e}
body{background:radial-gradient(ellipse at 80% 5%,#103e4366,transparent 40%),radial-gradient(ellipse at 0 40%,#14355566,transparent 50%),#071320;color:#edf5f6}
.topbar{background:#081624;border-color:#d1f1ff13;height:76px}.brand-number{color:#d6e5ef;border-color:#ffffff24}.logo{background:white;border-radius:8px;box-shadow:0 3px 0 #023352}
.roster-button{color:#eef7f5;background:linear-gradient(#223c4c,#102637);border-color:#486572;box-shadow:0 3px 0 #030d19}.roster-button span{background:#58c99520;color:#93eabb}.sound{color:#abc2ce}
.shell{max-width:1080px}.hero{isolation:isolate;min-height:315px;margin-top:28px;padding:38px 40px;border:1px solid #45718266;border-bottom:5px solid #0b624e;border-radius:25px;background:radial-gradient(ellipse at 75% 20%,#2b826844,transparent 54%),linear-gradient(125deg,#103955,#0b233b 47%,#073127);box-shadow:0 10px 0 #020d16,0 26px 60px #0005,inset 0 1px 0 #9bd5d633}
.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(115deg,transparent 0 70px,#c4fce803 71px 73px);pointer-events:none}
.hero:after{width:340px;height:340px;top:-130px;right:-85px;border-width:1px;border-color:#8cdbc825;box-shadow:0 0 0 35px #8cdbc805,0 0 0 70px #8cdbc803;z-index:-1}
.hero .eyebrow{color:#9bd8c9;font-size:.7rem;letter-spacing:.2em}.hero h1{font-size:clamp(3.5rem,7vw,5.7rem);max-width:65%;text-shadow:0 3px 0 #183b46,0 8px 20px #0006;line-height:.95}
.hero h1 span{color:#c2f66a;text-shadow:0 3px 0 #5a853b,0 10px 25px #0005}.hero-bottom{max-width:62%;gap:20px;margin-top:14px}.hero-bottom p{font-size:.9rem;line-height:1.65;color:#bed4df}.hero-badge{font-size:2.4rem;color:#f1fff0;border-left:1px solid #94bfc433;padding:0 0 0 24px}.hero-badge span{font-size:.6rem;margin-top:8px;letter-spacing:.17em}
.hero-scene{position:absolute;right:25px;bottom:0;width:335px;height:300px;perspective:850px;pointer-events:none;z-index:-1}
.scene-orbit{position:absolute;inset:8px 3px 15px;border:1px solid #8be0c629;border-radius:50%;transform:rotateX(60deg) rotateZ(-25deg);box-shadow:0 0 40px #1ed49310,inset 0 0 30px #36dba00a}
.scene-plinth{position:absolute;bottom:15px;left:20px;right:0;height:80px;border-radius:50%;background:radial-gradient(ellipse,#245958,#0b2834 65%);border:1px solid #6bc1ae40;transform:rotateX(40deg);box-shadow:0 12px 0 #051a25,0 20px 22px #0007,inset 0 2px 3px #a9ecd847}
.hero-pint{position:absolute;left:108px;top:37px;width:118px;height:201px;transform:rotate(-9deg);filter:drop-shadow(12px 19px 9px #0006);animation:pint-rise 5s ease-in-out infinite}
.pint-glass{position:absolute;top:20px;bottom:0;width:118px;overflow:hidden;border-radius:14px 14px 31px 31px;background:linear-gradient(90deg,#fff5 0 4%,#fff1 7% 12%,transparent 18% 75%,#fff4 85%,#a98d4b80 100%),linear-gradient(#f9ca64,#d59729 50%,#bf730c);border:3px solid #f0e0a89c;border-bottom:9px solid #e0d6b4;box-shadow:inset 5px 0 7px #fff6,inset -10px 0 18px #6335018a,inset 0 -5px 5px #ffffff99}
.pint-glass>.club-mark{position:absolute;top:52px;left:10px;width:92px;height:42px;border-radius:50%;transform:rotate(4deg);box-shadow:0 2px 5px #764c2f50}
.pint-foam{position:absolute;z-index:2;left:-3px;right:-3px;top:7px;height:41px;border-radius:45% 40% 32% 30%;background:radial-gradient(circle at 15% 32%,#fff 0 10px,transparent 11px),radial-gradient(circle at 45% 15%,#fff 0 19px,transparent 20px),linear-gradient(#fffdec,#dfdac5);box-shadow:0 5px 4px #89592b25,inset 0 3px 6px white}
.pint-foam:after{content:'';position:absolute;right:16px;top:25px;width:13px;height:36px;border-radius:0 0 10px 10px;background:linear-gradient(#eee8d6,#fff7df);box-shadow:1px 3px 4px #a1723344}
.pint-glass>i{position:absolute;bottom:10px;width:5px;height:5px;border:1px solid #fff9;border-radius:50%;left:24%;animation:beer-bubble 3s linear infinite}.pint-glass>i:nth-child(2){left:72%;animation-delay:1s;width:3px;height:3px}.pint-glass>i:nth-child(3){left:53%;animation-delay:1.9s;width:4px;height:4px}
.hero-chip{position:absolute;bottom:39px;left:24px;width:91px;height:91px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:7px dashed #b9e4d2;border-radius:50%;background:radial-gradient(circle at 30% 20%,#1c7a69,#04332b);box-shadow:0 4px 0 #103827,0 8px 0 #061e16,0 11px 15px #0009;transform:rotateX(25deg) rotate(-18deg)}
.hero-chip .club-mark{width:64px;height:27px;box-shadow:none;border-radius:4px}.hero-chip b{font:800 .8rem var(--display);color:#c8edc2}
.hero-dice{position:absolute;bottom:44px;right:8px;transform:rotate(-12deg)}.hero-dice .dice-scene{--size:67px;--half:33.5px}.hero-dice .cube-face{padding:11px}
@keyframes pint-rise{50%{transform:translateY(-7px) rotate(-7deg)}}
@keyframes beer-bubble{to{transform:translateY(-165px);opacity:0}}
.selection-heading{margin-top:35px;margin-bottom:18px}.selection-heading h2{font-size:1.8rem;letter-spacing:.01em}.selection-heading .text-button{font-size:.8rem;color:#a7c6d5;border-bottom:1px solid #507182}
.game-grid{gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.game-tile{--tile-glow:#2988bf;position:relative;isolation:isolate;overflow:hidden;border:1px solid #3d5b6b70;border-bottom:4px solid #020e18;background:radial-gradient(ellipse at 90% 0,#26779920,transparent 75%),linear-gradient(140deg,#192e41,#0d202f);padding:23px;border-radius:19px;min-height:204px;box-shadow:0 5px 0 #020a12,0 10px 22px #0003,inset 0 1px 0 #bcdfe41a;transition:transform .2s ease,box-shadow .2s,border-color .2s}
.game-tile:nth-child(even){--tile-glow:#16a776;background:radial-gradient(ellipse at 90% 0,#20926923,transparent 75%),linear-gradient(140deg,#18383c,#0c242c);border-bottom-color:#020f13}
.game-tile:before{content:'';position:absolute;width:100px;height:100px;right:-30px;top:-40px;border:1px solid #90c8df1a;border-radius:50%;box-shadow:0 0 0 23px #90c8df04;z-index:-1}
.game-tile:after{content:'↗';position:absolute;right:21px;bottom:20px;width:26px;height:26px;border:1px solid #62869744;border-radius:50%;display:grid;place-items:center;color:#a8c4d0;font-size:.85rem;background:#1d3a4b66}
.tile-top{align-items:center}.tile-index{font:700 .65rem var(--body);letter-spacing:.18em;color:#7899ad}
.tile-icon,.game-tile:nth-child(even) .tile-icon{position:relative;display:grid;place-items:center;width:63px;height:60px;border-radius:15px;color:#eff8fa;background:linear-gradient(140deg,#5da8c970,#174665 53%,#09293e);border:1px solid #91c7dc70;box-shadow:4px 5px 0 #061a29,6px 10px 12px #0006,inset 1px 2px 2px #d7f4ff40,inset -3px -3px 6px #010c2044;transform:perspective(400px) rotateX(12deg) rotateY(-14deg) rotateZ(-5deg);text-shadow:1px 2px 0 #021622,3px 5px 4px #0007;font-size:2.3rem}
.game-tile:nth-child(even) .tile-icon{background:linear-gradient(140deg,#69caae70,#1d6952 53%,#0a372c);border-color:#8adab180;box-shadow:4px 5px 0 #03231e,6px 10px 12px #0006,inset 1px 2px 2px #dcffee40}
.game-tile h3{color:#eef8f5;font-size:1.85rem;margin:24px 0 6px}.game-tile p{color:#9eb9c8;font-size:.8rem;max-width:83%;min-height:35px}
.game-tile:active{transform:translateY(3px);box-shadow:0 1px 0 #020a12}
@media(hover:hover){.game-tile:hover{transform:translateY(-5px);border-color:#7ccaae;box-shadow:0 7px 0 #020a12,0 15px 35px #0006}.game-tile:hover .tile-icon{transform:perspective(400px) rotateX(4deg) rotateY(-5deg) rotateZ(0)}}
.home-note,footer{color:#829fae}footer{border-top:1px solid #35506455;margin-top:25px}
/* Every arena has controlled lighting. Object transforms remain owned by gameplay. */
body.playing #game{background:radial-gradient(ellipse at 50% 28%,#1f605246,transparent 58%),radial-gradient(ellipse at 5% 85%,#0c52894a,transparent 50%),linear-gradient(160deg,#081827,#07131e);padding-top:max(8px,env(safe-area-inset-top))}
body.playing .game-heading h1{letter-spacing:.03em;text-shadow:0 2px 0 #315664,0 5px 13px #0007;font-size:clamp(1.8rem,6.6vw,3rem)}
body.playing .game-nav .text-button{border:1px solid #47647866;background:linear-gradient(#263d4d,#122a3a);box-shadow:0 3px 0 #010a12,inset 0 1px 0 #d3eeff18;border-radius:9px}
.nav-club{box-shadow:0 3px 0 #163d48,0 7px 16px #0004;border-radius:6px}
body.playing .turnbar{background:linear-gradient(120deg,#1b3547b0,#102634b0);border-color:#4d72854a;box-shadow:inset 0 1px 0 #9fe0dd0d,0 3px 8px #0002;border-radius:11px}
body.playing .avatar{background:linear-gradient(135deg,#2495c3,#116245);border:1px solid #7fbea8;color:#ecfff4;box-shadow:0 2px 0 #09241b}
.direction-badge{background:#bce89d09;border-color:#b4e58c30;color:#d3edb2;letter-spacing:.07em}
body.playing .arena{border-radius:22px;border:1px solid #587f8b22;background:radial-gradient(ellipse at 50% 70%,#27777915,transparent 68%);box-shadow:inset 0 -25px 50px #0002}
body.playing .arena:before{opacity:.018}
body.playing .arena:after{content:'';position:absolute;left:9%;right:9%;bottom:5%;height:18%;background:radial-gradient(ellipse,#67c6a61c,transparent 67%);transform:perspective(400px) rotateX(35deg);pointer-events:none}
body[data-game="higher"] .arena,body[data-game="lucky"] .arena,body[data-game="thirty"] .arena,body[data-game="dice"] .arena{background:radial-gradient(ellipse at 50% 35%,#164f42aa,#08292170 68%,#031a2299);border-color:#608e7040;box-shadow:inset 0 0 50px #0005}
body.playing .stage{animation:arena-reveal .3s ease-out}
@keyframes arena-reveal{from{opacity:.3}to{opacity:1}}
body.playing .game-note,body.playing .stage-intro{color:#cee1e6;line-height:1.45}.stage-foot{opacity:.8}
body.playing .dock{padding:10px 3px 1px;border-top-color:#628b9a25}
body.playing .control,.primary{border-radius:12px;border:1px solid #ddff9c;background:linear-gradient(165deg,#d6ff91,#b1e761 60%,#91c84f);color:#143027;box-shadow:0 5px 0 #4d7834,0 8px 14px #0005,inset 0 2px 0 #efffc5;font-weight:900;letter-spacing:.035em;transition:translate .12s,box-shadow .12s;touch-action:manipulation}
body.playing .control.secondary{background:linear-gradient(150deg,#315166,#1a3447);border-color:#648497;color:#e0edf2;box-shadow:0 5px 0 #061826,0 7px 12px #0004,inset 0 1px 0 #a6c6db33}
body.playing .control:active:not(:disabled){translate:0 3px;box-shadow:0 2px 0 #426b2c}
body.playing .control.secondary:active:not(:disabled){box-shadow:0 2px 0 #061826}
body.playing .control:disabled{opacity:.45;box-shadow:0 2px 0 #112d28}
body.playing .dock-meta{margin-top:10px}.stake-row,.thirty-score>div{border:1px solid #7dbab64a;background:linear-gradient(#173f42,#0a292f);box-shadow:inset 0 2px 3px #001723,0 3px 0 #04141c}
.thirty-score b,.risk-score b{font-variant-numeric:tabular-nums;color:#d9ff9c;text-shadow:0 2px 0 #4b7747,0 0 25px #aeeb4b20}
/* Weighted game objects and physically grounded surfaces. */
.wheel-wrap{border:9px solid #14364c;border-radius:50%;background:#16334a;box-shadow:0 0 0 2px #7197a5,0 0 0 5px #173a49,0 9px 0 6px #020d16,0 22px 28px #0008,inset 0 0 0 2px #caf5ee;isolation:isolate}
.wheel-wrap:before{content:'';position:absolute;inset:-8px;border-radius:50%;background:repeating-conic-gradient(#e8ffbd 0 2deg,transparent 2deg 22.5deg);mask:radial-gradient(circle,transparent 68%,#000 69%);pointer-events:none;z-index:2;filter:drop-shadow(0 0 3px #bfe8a7)}
.wheel-wrap #wheel{display:block;width:100%;height:auto;border-radius:50%}.wheel-wrap .pointer{filter:drop-shadow(0 3px 2px #0008);z-index:4}
.club-hub{box-shadow:0 4px 0 #172d3a,0 9px 13px #0009,inset 0 2px 3px #fff;border-width:4px!important}
.playing-card,.table-card{background:linear-gradient(125deg,#fffdf3 0,#fff 45%,#e1e7dc);border:1px solid #e6ecdc;border-bottom:4px solid #bccebc;box-shadow:1px 1px 0 #fff,2px 3px 0 #bccfc4,3px 5px 0 #71968b,5px 12px 18px #0006;border-radius:13px}
.playing-card:before,.table-card:after{content:'';position:absolute;inset:6px;border:1px solid #18394b0b;border-radius:8px;pointer-events:none}
.club-card-back{box-shadow:3px 3px 0 #a8c2b4,6px 7px 0 #174c43,8px 15px 22px #0006}
.dice-cube{filter:drop-shadow(6px 9px 5px #0005)}.cube-face{border-color:#fff7dc;box-shadow:inset 0 0 0 2px #fff8,inset 3px 4px 6px #fff,inset -3px -4px 8px #79624155}
.cube-face .pip{background:radial-gradient(circle at 70% 75%,#426466,#041c27 70%);box-shadow:inset 2px 3px 3px #000,0 1px 1px white}.die .dice-scene:after{filter:blur(9px);opacity:.8}
.kept-row{background:linear-gradient(#02181dcc,#0a3031cc);border:1px solid #739a8055;box-shadow:inset 0 4px 8px #0005}
.bomb-cell{background:linear-gradient(145deg,#315365,#163547);border:1px solid #6c939f;box-shadow:3px 4px 0 #021b28,0 6px 9px #0005,inset 0 2px 1px #afd5d733;border-radius:11px;color:#daedf2;text-shadow:0 2px 1px #0005}
.bomb-cell.safe{background:linear-gradient(145deg,#6fae69,#247448)}.bomb-cell.bomb{background:radial-gradient(circle,#ffb070,#a73533);box-shadow:0 0 20px #eb663555}
.bomb-config select{background:#0a2737;color:#e5f4f6;border-color:#527886}
.vault-doors{perspective:1000px}.vault-door{border:3px solid #9cbbc2;background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px),linear-gradient(135deg,#718e99,#385869 35%,#1a374b);box-shadow:6px 6px 0 #0b2231,9px 10px 0 #03131e,0 17px 20px #0008,inset 0 0 0 5px #c7e7ec20}
.vault-door:before,.vault-door:after{content:'';position:absolute;left:-6px;width:10px;height:27px;border-radius:3px;border:1px solid #95aeb6;background:linear-gradient(90deg,#1d3d4c,#c5d8d8,#22404d);box-shadow:2px 2px 4px #00151f}.vault-door:before{top:20px}.vault-door:after{bottom:28px}
.vault-door>b{border:2px solid #dae8e9;background:conic-gradient(#91a9ad,#e4efeb,#5b7986,#d5e8e8,#91a9ad);box-shadow:3px 5px 0 #102b38,5px 8px 9px #0007,inset 0 0 0 4px #46616e}
.lift-shaft{border:5px ridge #7595a0;box-shadow:8px 8px 0 #061824,12px 15px 23px #0008,inset 0 0 15px #0008}.lift-cabin{background:repeating-linear-gradient(0deg,transparent 0 2px,#ffffff04 2px 3px),linear-gradient(90deg,#284654,#b1c8cc 46%,#021c29 49% 51%,#a1b8be 54%,#314b58);box-shadow:inset 0 8px 10px #00142180,inset 0 -4px 10px #0006}
.lift-display{border:3px ridge #516971;background:radial-gradient(ellipse,#133b36,#010e1b);box-shadow:0 4px 0 #000c,inset 0 4px 12px #0009}
.traffic-light{background:linear-gradient(110deg,#647986,#1b3445 25%,#0b1b2c 70%,#344d5c);border:3px solid #6b899b;box-shadow:9px 7px 0 #04101b,16px 19px 22px #0009,inset 2px 2px 5px #d6edfc44}
.traffic-light i{border:4px solid #041421;box-shadow:inset 4px 5px 10px #000b,0 2px 0 #88a9b9}.traffic-light.green .green-light{box-shadow:0 0 25px #8bff8888,inset 0 4px 10px #fff8}
.pitch{border:4px solid #759877;border-bottom:10px solid #143b30;box-shadow:0 8px 0 #051d25,0 17px 22px #0008,inset 0 0 45px #052c2a90;background:repeating-linear-gradient(0deg,#267a50 0 45px,#216f47 46px 90px);border-radius:17px;overflow:hidden}
.goal{box-shadow:4px 6px 0 #062c2799,8px 12px 8px #001c2577}.net{background-color:#00191018}.ball{filter:drop-shadow(3px 6px 3px #001a24aa)}.keeper{filter:drop-shadow(4px 6px 3px #001c22aa)}
.reaction-pad{background:radial-gradient(ellipse at 40% 0,#417f8a,#143b4f 70%);border:2px solid #79abbc;box-shadow:0 9px 0 #051725,0 15px 20px #0007,inset 0 2px 4px #d9f6f533;border-radius:22px}
.reaction-pad.held{box-shadow:0 3px 0 #061e2b,inset 0 5px 10px #001625;translate:0 5px}
.croc-body{box-shadow:inset 6px 8px 12px #d5ef8877,inset -9px -12px 20px #001d16,9px 11px 0 #0a2922,16px 20px 25px #0008;background:radial-gradient(ellipse at 25% 16%,#88bd54,#3e8542 35%,#143f2b 85%)}
.croc-tooth{box-shadow:3px 5px 0 #79785e,5px 8px 6px #130d1255,inset 2px 3px 3px #fff}.croc-jaw{box-shadow:inset 0 9px 20px #160e1d}
.tower-scene{background:radial-gradient(ellipse at 50% 0,#285c5b,#0a2232 80%);border:2px solid #65858166;box-shadow:inset 0 0 35px #00121bcc,0 6px 0 #020e18,0 13px 19px #0005}
.grolsch-crate{box-shadow:inset 0 3px 0 #b1d68277,inset -3px -2px 0 #002811aa,3px 4px 0 #001e13,5px 7px 8px #0006}
.caps-board{box-shadow:0 4px 0 #8e6b3e,0 10px 0 #362717,0 20px 25px #0009,inset 0 2px 8px #fff4;border:5px ridge #bda16d}
.grolsch-cap{box-shadow:inset 0 0 0 2px #e2e4cb,inset 0 3px 6px #e8ffad70,1px 3px 0 #aab993,2px 6px 0 #626e54,4px 10px 9px #0008}
.race-lane{border-color:#5f977866;box-shadow:0 5px 0 #001317,0 9px 12px #0005}.race-banner{background:linear-gradient(130deg,#d3ff9a,#94d463);border:1px solid #e2ffc2;box-shadow:0 4px 0 #3d7434,inset 0 2px 0 #efffd188}.track{box-shadow:0 4px 0 #0b311d,0 7px 3px #00151899}
/* Results sit above the table; numbers remain the most prominent element. */
body.playing .result-number{color:#e4ffb1;text-shadow:0 2px 0 #82a958,0 4px 0 #3e6634,0 8px 15px #0008}
body.playing .result-stage h3{color:#eef6ef}.result-direction{border:1px solid #dfb57944;background:linear-gradient(135deg,#70533060,#302d2d);box-shadow:0 4px 0 #03141a}
.give-result .result-direction{background:linear-gradient(135deg,#2e784050,#133d33);border-color:#b2ed7b55}.beer-row .beer-icon{filter:drop-shadow(2px 3px 0 #456e34)}
dialog{background:linear-gradient(145deg,#183344,#0b2030);border:1px solid #507787;color:#eaf4f5;box-shadow:0 25px 90px #000b}dialog p{color:#adc8d4}dialog .close{background:#335064;color:#e6f2f6}dialog input{background:#061925;color:#fff;border-color:#557787}.player-list li{color:#e4eff4;background:#213e4e}.quick-start{color:#bed4dc}
@media(max-width:600px){.shell{width:calc(100% - 28px)}.topbar{height:66px;padding:0 15px}.logo{width:89px;height:39px}.logo img{width:94px;height:94px;margin-top:-26px}.brand{gap:10px}.brand-number{font-size:1.45rem;padding-left:10px}.roster-button{font-size:.75rem;padding:7px 8px}.sound{font-size:.7rem}
.hero{min-height:270px;padding:25px 21px;margin-top:20px;border-radius:20px}.hero h1{font-size:3.1rem;max-width:72%}.hero .eyebrow{font-size:.58rem;letter-spacing:.12em}.hero-bottom{max-width:64%;display:block;margin-top:18px}.hero-bottom p{font-size:.72rem;margin:0}.hero-badge{display:flex;width:130px;gap:8px;align-items:center;border:0;padding:0;margin-top:13px;font-size:1.5rem}.hero-badge span{font-size:.55rem;margin:0}
.hero-scene{right:-26px;bottom:-15px;width:260px;height:265px;transform:scale(.78);transform-origin:right bottom}.hero-pint{left:122px;top:36px}.hero-chip{left:62px;bottom:12px}.hero-dice{right:-2px;bottom:26px}.scene-plinth{left:53px;bottom:0}.scene-orbit{left:50px}
.selection-heading{margin-top:29px}.selection-heading h2{font-size:1.55rem}.selection-heading .text-button{font-size:.7rem}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 13px}.game-tile{padding:17px 15px 16px;min-height:189px;border-radius:16px}.tile-icon,.game-tile:nth-child(even) .tile-icon{width:53px;height:51px;font-size:1.95rem;border-radius:12px}.game-tile h3{font-size:1.48rem;line-height:1.1;margin-top:23px}.game-tile p{font-size:.73rem;max-width:88%;line-height:1.4}.game-tile:after{width:21px;height:21px;right:12px;bottom:12px}.tile-index{font-size:.6rem}
body.playing .arena{border-radius:17px}.club-card-back{right:6px}.wheel-wrap{border-width:7px}}
@media(max-width:350px){.hero h1{font-size:2.7rem}.hero-scene{right:-42px;transform:scale(.68)}.game-tile h3{font-size:1.32rem}.game-tile{padding:15px 12px}.tile-icon,.game-tile:nth-child(even) .tile-icon{width:46px;height:46px}}
@media(max-height:650px){body.playing .game-heading h1{font-size:1.55rem}body.playing .dock-meta{margin-top:7px}body.playing .game-nav .text-button{padding:4px 9px}body.playing .control{min-height:45px;padding:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Shared alignment: equal columns, stable baselines and room for 3D edges. */
.topbar{padding-inline:max(20px,calc((100vw - 1080px)/2))}
.brand,.top-actions,.tile-icon,.tile-index{flex-shrink:0}
.game-tile{display:grid;grid-template-rows:60px minmax(2.2em,auto) 1fr;align-content:start;gap:14px}
.tile-top{align-self:start;min-width:0}
.game-tile h3{margin:0;align-self:end;overflow-wrap:anywhere}
.game-tile p{margin:0;min-height:2.8em;max-width:none;padding-right:22px}
.selection-heading{align-items:baseline;flex-wrap:wrap}
.home-note{flex-wrap:wrap}
body.playing .game-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
body.playing .game-nav #back{justify-self:start}
body.playing .game-nav #rules-open{justify-self:end}
body.playing .game-nav .text-button{max-width:100%;text-align:center;font-size:clamp(.7rem,2.6vw,.9rem)}
body.playing .nav-club{justify-self:center}
body.playing .game-heading>div{min-width:0}
body.playing .game-heading h1{overflow-wrap:anywhere}
body.playing .controls{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch}
body.playing .controls:empty{display:none}
body.playing .control{min-width:0;height:100%;overflow-wrap:anywhere;text-wrap:balance}
body.playing .direction-badge{max-width:100%;text-align:center;text-wrap:balance}
body.playing .dock-meta>span{min-width:0}
body.playing .dice-duel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(8px,3vw,28px);align-items:end}
body.playing .dice-duel>div{width:100%;display:grid;grid-template-rows:minmax(2.8em,auto) 145px;align-items:end}
body.playing .dice-duel>div>span{margin:0;text-align:center;align-self:center}
body.playing .dice-duel .die{max-width:100%;justify-self:center}
body.playing .dice-duel .versus{align-self:end;margin-bottom:62px}
body.playing .card-pair{width:max-content;max-width:100%;margin-inline:auto;padding-inline:16px}
.bank-hand{flex-basis:100%;padding-bottom:0}
.bomb-config label{min-width:0;flex-wrap:wrap;justify-content:center;text-align:center}
.bomb-config select{flex:1;min-width:0;max-width:100%;text-align:center}
.vault-door{min-height:185px;padding:15px 4px 49px;gap:12px}
.croc-body{margin-bottom:36px}
@media(max-width:600px){
 .topbar{padding-inline:14px}.top-actions{gap:5px}.brand{gap:7px}
 .game-tile{grid-template-rows:51px minmax(2.2em,auto) 1fr;gap:16px}
 .hero{min-height:320px}.hero h1{max-width:100%}.hero h1 span{display:block}
 .hero-bottom{max-width:58%}.hero-scene{bottom:-12px;transform:scale(.64)}
 .hero-bottom p{overflow-wrap:normal}.hero-badge{max-width:100%}
}
@media(max-width:380px){
 .six-dice{grid-template-columns:repeat(3,76px);gap:20px 12px;padding-inline:0}
 .thirty-die,.dice-placeholder{width:76px}
 .game-tile{grid-template-rows:46px minmax(2.2em,auto) 1fr}
 .tile-icon,.game-tile:nth-child(even) .tile-icon{width:46px;height:46px}
 .hero-scene{right:-33px;transform:scale(.56)}
 .sound{font-size:.65rem}.brand-number{font-size:1.2rem;padding-left:7px}
}