/* A single stage, readable instruments, restrained stadium lighting. */
:root{--surface:#102e3d;--edge:#5e87924d;--accent:#d6f7a5}
body{background:radial-gradient(ellipse at 90% 0,#15474088,transparent 55%),#07151e}
button{touch-action:manipulation}
.topbar{background:#081923;border-bottom-color:#b2d8d51a}
.shell{max-width:1080px}
.hero{min-height:250px;padding:30px 34px;border-radius:24px;border-bottom-width:1px;background:radial-gradient(ellipse at 80% 25%,#327b6266,transparent 55%),linear-gradient(120deg,#153d4d,#0a272d);box-shadow:0 16px 40px #0004,inset 0 1px #dcfff329}
.hero h1{font-size:clamp(3.2rem,6.5vw,5rem);max-width:62%;line-height:.98;letter-spacing:-.025em}
.hero-bottom{max-width:58%;margin-top:16px}.hero-bottom p{font-size:1rem;line-height:1.5;margin:0}
.hero .eyebrow{font-size:.75rem}.hero-badge{font-size:2.2rem}.hero-scene{right:26px;bottom:-13px;transform:scale(.85);transform-origin:right bottom}
.selection-heading{margin:30px 0 18px}.selection-heading h2{font-size:1.8rem}.selection-heading .text-button{font-size:.875rem}
.game-grid{gap:18px}.game-tile{display:grid;grid-template-rows:64px minmax(2.2em,auto) 1fr;gap:14px;min-height:226px;padding:22px;border-radius:20px;border:1px solid #64909a42;border-bottom:1px solid #284451;background:radial-gradient(ellipse at 10% 0,#37688140,transparent 75%),linear-gradient(150deg,#183442,#0d2532);box-shadow:0 5px 0 #030e17,0 12px 20px #0003,inset 0 1px #c5e8ea15}
.game-tile:nth-child(even){background:radial-gradient(ellipse at 10% 0,#357c6240,transparent 75%),linear-gradient(150deg,#183b3d,#0b292f)}
.game-tile:after{content:'SPELEN';width:auto;height:auto;right:18px;bottom:16px;padding:0;border:0;border-radius:0;background:none;font-size:.625rem;letter-spacing:.14em;color:#89afba}
.game-tile h3{font-size:1.8rem;letter-spacing:.01em;line-height:1.08}.game-tile p{font-size:.875rem;line-height:1.5;padding:0 0 18px;color:#bad0d8}
.tile-index{font-size:.75rem;color:#9bb8c4}.tile-icon{transition:transform .3s}.home-note{font-size:.75rem;line-height:1.6}
/* Explicit rows avoid implicit tracks when a player panel is hidden. */
body.playing #game{grid-template-areas:'nav' 'title' 'turn' 'direction' 'arena' 'dock';grid-template-rows:auto auto auto auto minmax(0,1fr) auto;gap:7px;padding: max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 40%,#19473577,transparent 66%),#071720}
body.playing .game-nav{grid-area:nav;max-width:720px;justify-self:center;min-height:40px}
body.playing .game-nav .text-button{font-size:.875rem;min-height:38px;padding:8px 11px;background:#17313e;border:1px solid #54758155;box-shadow:0 2px 0 #0005}
body.playing .game-heading{grid-area:title;margin:1px 0 2px;max-width:680px;justify-self:center}
body.playing .game-heading h1{font-size:clamp(1.8rem,6.8vw,2.8rem);line-height:1.08;letter-spacing:.025em}
body.playing .turnbar{grid-area:turn;width:min(100%,680px);border-radius:12px;padding:7px 12px;background:#142f3c;gap:10px}
body.playing .turn-info span{font-size:.75rem;letter-spacing:.05em}body.playing .turn-info b{font-size:1rem}
body.playing .round{font-size:.75rem}body.playing .direction-badge{grid-area:direction;border:0;background:transparent;font-size:.8rem;line-height:1.4;letter-spacing:.025em;padding:1px 10px 4px;color:#dcf4be}
body.playing .arena{grid-area:arena;max-width:680px;border-radius:24px;border:1px solid #86bba12b;background:radial-gradient(ellipse at 50% 20%,#27544744,#0a283155);box-shadow:inset 0 2px 12px #0003,0 1px #b3d7c711}
body.playing .arena:before{opacity:.01}body.playing .arena:after{z-index:0;opacity:.5}body.playing #play-stage,body.playing .result-stage{z-index:1}
body.playing .stage,body.playing .result-stage{padding:22px 20px;width:min(100%,640px)}
body.playing .stage-intro,body.playing .game-note{font-size:1rem;line-height:1.45;text-wrap:balance;max-width:450px;margin-top:0;margin-bottom:18px;color:#e4eeef}
body.playing .stage-foot{font-size:.75rem;line-height:1.5;margin-top:20px;color:#9cbac1;letter-spacing:.025em;text-wrap:balance}
body.playing .dock{grid-area:dock;max-width:680px;justify-self:center;padding:8px 0 0;border:0}
body.playing .controls{gap:10px}body.playing .control,.primary{min-height:54px;padding:12px 10px;font-size:1.15rem;line-height:1.2;border-radius:14px;letter-spacing:.025em;background:linear-gradient(160deg,#e1ffb8,#b9e47e);border:1px solid #edffd3;box-shadow:0 4px 0 #587d39,0 8px 18px #0004,inset 0 1px white}
body.playing .control.secondary{background:linear-gradient(#254a5b,#183745);box-shadow:0 4px 0 #020f1a,inset 0 1px #abcbd133;border-color:#51717d}
body.playing .control:disabled{opacity:.55;filter:saturate(.35);box-shadow:0 2px 0 #233526}
body.playing .dock-meta{font-size:.75rem;margin-top:12px;min-height:22px;line-height:1.35}.dock-meta .skip{font-size:.75rem}
.stake-row{padding:12px 16px;min-height:50px;gap:12px;border-radius:13px;background:linear-gradient(#1c4546,#123337);border:1px solid #9dc3ae3b;box-shadow:inset 0 1px #dfffea13,0 3px 0 #031a20;font-variant-numeric:tabular-nums}
.stake-row>span{font-size:.8rem}.stake-row>b{font-size:1.2rem;color:#e2ffb4}
.thirty-score{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin-bottom:12px}.thirty-score>div{min-width:0;padding:10px 4px;border-radius:13px;text-align:center;background:linear-gradient(#1c4141,#102e32);border:1px solid #82bca841;box-shadow:inset 0 1px #dcffec20,0 3px 0 #031920}
.thirty-score span{font-size:.75rem;line-height:1.4;display:block;letter-spacing:0}.thirty-score b{font-size:2.3rem;line-height:1.1;display:block;margin-top:4px}.selection-summary{font-size:.9rem;line-height:1.5;margin-bottom:10px;min-height:24px}
.thirty-note{min-height:46px}.kept-row{gap:15px;padding:14px 16px 10px;max-width:100%;margin-bottom:6px}.locked-die small{font-size:.65rem}
/* Filters on the cube flatten preserve-3d. Shadows belong on its parent. */
.dice-scene{perspective:900px;--size:66px;--half:33px}
.dice-cube{filter:none!important;transform-style:preserve-3d;transform:rotateX(-17deg) rotateY(-24deg)}
.cube-face{border-radius:14%;border:1px solid #fff7db;background:linear-gradient(140deg,#fffefa,#f5ecd4 70%,#ddceb0);padding:16%;gap:6%;box-shadow:inset 0 0 0 1px #fff9,inset 3px 3px 5px #fff,inset -3px -3px 6px #79633d3b;backface-visibility:hidden}
.cube-face.face-2,.cube-face.face-3{background:linear-gradient(125deg,#e4d6b9,#b9a17e);box-shadow:inset 2px 2px 4px #fff8,inset -2px -2px 5px #6c553955}
.cube-face.face-4{background:linear-gradient(145deg,#fff,#fff7e3);box-shadow:inset 0 0 0 1px white,inset -2px -2px 5px #cbb68c55}
.cube-face .pip{border:0;background:radial-gradient(circle at 62% 75%,#344f58,#06141d 72%);box-shadow:inset 2px 2px 2px #000c,0 1px 1px #fff;border-radius:50%}
.dice-scene:after{left:-12%;right:-20%;bottom:-25px;height:16px;background:#0008;filter:blur(6px);transform:rotate(-12deg)}
.six-dice{width:min(100%,360px);grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px;padding:24px 6px 16px;min-height:0}
.thirty-die,.dice-placeholder{position:relative;width:100%;height:104px;min-width:0;border-radius:18px;display:grid;place-items:center}
.thirty-die{border:1px solid #7fa08b30;background:radial-gradient(ellipse at 50% 70%,#598a6a16,transparent 80%);transition:background .2s,border-color .2s,translate .2s}
.thirty-die.selected{transform:none;translate:0 -5px;border-color:#d8ff9b;background:linear-gradient(140deg,#b8f37625,#69a03c12);box-shadow:inset 0 0 0 1px #d6fda94d,0 4px 12px #0004}
.thirty-die.selected:after{content:'✓';position:absolute;right:5px;top:4px;background:#d5f8a5;color:#24482f;border-radius:50%;width:18px;height:18px;font:800 12px/18px Arial}
.thirty-die.blocked{opacity:.3}.dice-placeholder{border:1px solid transparent}
.is-rolling{animation:dice-table-hop 1.1s cubic-bezier(.18,.7,.28,1) both}.is-rolling .dice-cube{animation:cube-roll 1.1s cubic-bezier(.18,.7,.25,1) both}
.is-rolling:after{animation:dice-shadow 1.1s ease-out both}.dice-placeholder:nth-child(2n) .is-rolling{animation-delay:0s}
@keyframes dice-table-hop{0%{transform:translate(-8px,0) scale(.95)}25%{transform:translate(5px,-29px) scale(1.08)}54%{transform:translate(2px,2px) scale(1,.96)}72%{transform:translate(0,-9px)}88%{transform:translateY(1px)}100%{transform:none}}
@keyframes dice-shadow{25%{opacity:.3;scale:1.25;translate:0 29px}54%{opacity:1;scale:.9}100%{opacity:1;scale:1}}
body.playing .dice-duel{margin:25px auto 35px;max-width:450px;gap:18px}.dice-duel>div{border-radius:18px;border:1px solid #88b4a52b;background:linear-gradient(#2c594c22,#092b2733);padding:12px 6px 4px}.dice-duel>div>span{font-weight:700;color:#ddecdf}
/* Playing surfaces: aligned stacks, restrained card motion, clear active card. */
.card-pair{gap:24px;min-height:252px}.card-pair .playing-card{width:135px;height:188px;flex-shrink:0;margin:25px 0;transform-origin:center}
.playing-card,.table-card{border-radius:12px;background:linear-gradient(125deg,#fffdf4,#fffefa 50%,#e2e6da);box-shadow:1px 2px #d7deca,2px 4px #77948a,5px 12px 18px #0006;border:1px solid #f4f6e8;border-bottom:3px solid #c7d3bc}
.club-card-back{right:18px;top:36px;width:135px;height:188px;transform:rotate(7deg) translateX(8px)}
.previous-card{align-self:center;transform:rotate(-6deg);opacity:.8}.previous-card:before{font-size:.7rem;letter-spacing:.12em;margin-bottom:10px}
.playing-card #card-rank{font-size:4.7rem;line-height:1}.playing-card #card-suit{font-size:2.8rem;line-height:1.1}.card-hand{gap:12px;padding:22px 6px}
.card-in{animation:card-reveal .4s cubic-bezier(.2,.75,.3,1) both}
@keyframes card-reveal{from{opacity:.5;transform:rotateY(-90deg) translateY(-8px)}to{opacity:1;transform:none}}
.wheel-wrap{margin-block:16px 14px!important}.wheel-wrap #wheel{transition:transform 3.6s cubic-bezier(.12,.68,.1,1)}
.wheel-wrap .pointer{filter:drop-shadow(0 3px 1px #0008)}
.bomb-grid{gap:11px;padding:7px 6px 12px}.bomb-cell{border-radius:12px;font-size:1.15rem;min-height:47px;transition:transform .35s,background .35s,box-shadow .35s}.bomb-cell.safe{transform:translateY(3px);box-shadow:0 1px 0 #032f22}.bomb-cell.selected{outline:2px solid #f5ffca;outline-offset:3px}.bomb-config{gap:10px}.bomb-config label{font-size:.8rem;padding:9px;flex-direction:column;gap:6px}.bomb-config select{width:100%;font-size:1rem;min-height:38px}
.traffic-light{width:120px;padding:17px;gap:16px;border-radius:27px;transform:perspective(900px) rotateY(-12deg);margin:18px auto 28px}.traffic-light i{position:relative;background:radial-gradient(circle at 35% 22%,#586a72,#132b37 55%,#06131c);box-shadow:inset 0 5px 9px #000a,0 2px 1px #92aab3}
.traffic-light i:after{content:'';position:absolute;inset:4px;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 3px,#0517211f 3px 4px);box-shadow:inset 0 2px 3px #ffffff30}
.traffic-light.green{box-shadow:8px 7px 0 #04101b,16px 19px 22px #0009,0 0 65px #a3ee692b}.signal-status{font-size:1.65rem;line-height:1.2}
#stage-passbomb .bomb-object{height:265px;width:260px;margin-block:12px 4px}#stage-passbomb .bomb-sculpture{width:210px;height:210px}
#stage-passbomb .running .bomb-sculpture{animation:bomb-sway 2.2s ease-in-out infinite}#stage-passbomb .handoff .bomb-sculpture{animation:bomb-handoff .6s ease-out both}
@keyframes bomb-sway{50%{transform:translateY(-5px) rotate(3deg)}}@keyframes bomb-handoff{50%{transform:translateY(-13px) rotate(-8deg)}100%{transform:none}}
.bomb-progress{gap:12px}.bomb-progress i{width:20px;height:20px}.bomb-passes{font-size:.875rem}.bomb-shell{background:radial-gradient(ellipse at 30% 18%,#bccdd1 0,#607885 12%,#253f50 35%,#030c14 76%)}
.vault-doors{gap:14px;padding:20px 7px 22px}.vault-door{min-height:184px;transition:transform .8s cubic-bezier(.22,.8,.25,1),background .5s;transform:rotateY(-7deg)}.vault-door.opening{transform:perspective(600px) rotateY(-42deg)}.vault-door>b{transition:rotate .65s}.vault-door.opening>b{rotate:120deg}.vault-door>span{font-size:.75rem}
.lift-shaft{height:215px;width:230px;max-width:78%;padding:14px;border-radius:16px}.lift-cabin{transform:none;position:relative}.lift-display{min-width:175px}.lift-display b{font-variant-numeric:tabular-nums}.lift-shaft.moving .lift-cabin{animation:lift-rattle .22s linear infinite alternate}@keyframes lift-rattle{to{translate:0 1px}}
.caps-table{height:220px;padding-block:16px 30px}.caps-board{height:176px;transform:perspective(850px) rotateX(17deg);border-radius:12px}.caps-zone{font-size:11px;padding-top:13px;line-height:1.5}.caps-zone.gold{font-size:9px}.caps-edge{font-size:10px}.power-label{font-size:.875rem}.caps-meter{height:25px;border-radius:8px}
.tower-scene{height:295px;border-radius:20px;background:linear-gradient(#163b48,#102d33);border-color:#7da49b50}.arcade-score{justify-content:center}.arcade-score span{font-size:.8rem}.arcade-status{font-size:1.2rem;line-height:1.3;margin-block:18px 5px}
.caps-zone.green,.caps-zone.gold{font-size:20px;line-height:1.2;padding-top:18px}.caps-legend{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:.8rem;margin:0 0 5px;line-height:1.5}.caps-legend span:first-child{color:#a1e8b8}.caps-legend span:last-child{color:#f5d084}
.croc-body{margin-top:48px;margin-bottom:38px}.croc-tooth{font-size:1rem;transition:transform .22s,opacity .22s}.croc-eyes i{box-shadow:inset 4px 4px 5px #e3f5b077,3px 4px 5px #00281955}
.race-banner{border-radius:13px}.race-label{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.race-lane{border-radius:14px}.track{border-radius:5px;height:60px!important;overflow:visible}.horse{width:76px;height:63px;font-size:0!important;bottom:0;display:block;transition:left .7s cubic-bezier(.16,.5,.45,1);filter:drop-shadow(2px 5px 2px #00171088)}
.horse{scale:1;text-shadow:none}.horse-image{width:100%;height:100%;object-fit:contain;display:block}.horse>.club-mark{display:none}.horse.gallop{animation:horse-stride .32s ease-in-out infinite}
@keyframes horse-stride{0%,100%{transform:translateY(0) rotate(1deg)}45%{transform:translateY(-5px) rotate(-3deg)}75%{transform:translateY(-1px) rotate(2deg)}}
body.playing .result-stage{padding:25px 22px;text-align:center}.result-who{font-size:1rem;letter-spacing:.06em}.result-number{font-variant-numeric:tabular-nums}body.playing .result-number{font-size:6.3rem;line-height:1.05;text-shadow:0 3px 0 #73934f,0 6px 0 #354f30,0 13px 24px #0005}
body.playing .result-stage.pop .result-number{animation:score-arrive .55s cubic-bezier(.18,.8,.3,1) both}body.playing .result-stage h3{font-size:1.6rem}#result-detail{font-size:1rem;line-height:1.5;text-wrap:balance}.result-direction{letter-spacing:.08em}.result-direction[data-direction='take'],.result-direction[data-direction='all']{color:#ffd6b0;border-color:#e1a87655}.result-direction[data-direction='give']{color:#d8ffac}
@keyframes score-arrive{from{opacity:0;translate:0 14px;scale:.84}65%{scale:1.04}to{opacity:1;translate:0;scale:1}}
.score-list li{gap:14px}.score-list li span{min-width:0;overflow-wrap:anywhere}.score-list li b{white-space:nowrap}
body.animating .direction-badge{opacity:.65}body.animating .arena{border-color:#b9d69455}
.pitch-message{z-index:5;max-width:90%;text-align:center;text-wrap:balance;border-radius:10px;text-shadow:0 2px 5px #0008}
.reaction-pad{min-width:0;overflow-wrap:anywhere}.reaction-pad b{font-size:1.3rem;line-height:1.2}.reaction-pad small{font-size:.8rem}.reaction-pad.held{border-color:#d9f6b5}.reaction-message{text-wrap:balance;line-height:1.2}
.risk-score b{font-variant-numeric:tabular-nums;font-size:5.4rem}.risk-score small,.risk-score>span{font-size:.8rem;letter-spacing:.12em}
dialog{border-radius:24px;padding:26px;max-width:min(440px,calc(100vw - 24px))}dialog p{font-size:1rem;line-height:1.6}dialog::backdrop{background:#010c15bd;backdrop-filter:blur(8px)}.player-list li{gap:10px}.player-list li b{min-width:0;overflow-wrap:anywhere}.player-list li button{flex-shrink:0}
@media(max-width:600px){
 .hero{min-height:235px;padding:25px 22px;margin-top:18px}.hero h1{font-size:3.3rem;max-width:75%}.hero h1 span{display:block}.hero .eyebrow{font-size:.65rem}.hero-bottom{max-width:65%;margin-top:16px}.hero-bottom p{font-size:.875rem}.hero-badge{display:none}.hero-scene{right:-20px;bottom:-9px;transform:scale(.5)}
 .game-grid{gap:16px 13px}.game-tile{padding:17px 14px;min-height:213px;grid-template-rows:52px minmax(2.2em,auto) 1fr;gap:14px;border-radius:17px}.game-tile h3{font-size:1.55rem}.game-tile p{font-size:.875rem;line-height:1.35}.game-tile:after{right:13px;bottom:10px;font-size:.6rem}.selection-heading h2{font-size:1.6rem}.selection-heading .text-button{font-size:.8rem}
 .tile-icon,.game-tile:nth-child(even) .tile-icon{width:51px;height:50px;font-size:1.9rem}.tile-index{font-size:.7rem}.home-note{font-size:.7rem}footer{flex-wrap:wrap;line-height:1.6}
 body.playing .stage,body.playing .result-stage{padding:20px 15px}.six-dice{max-width:325px}.dice-scene{--size:60px;--half:30px}.thirty-die,.dice-placeholder{height:95px}.thirty-score b{font-size:2rem}.thirty-score span{font-size:.7rem}
 body.playing .arena{border-radius:20px}.card-pair{gap:22px}.card-pair .playing-card,.club-card-back{width:123px;height:174px}.card-pair{min-height:238px}.playing-card #card-rank{font-size:4.2rem}
}
@media(max-width:360px){.hero{padding-inline:17px}.hero h1{font-size:2.85rem}.hero-scene{right:-31px;transform:scale(.43)}.hero-bottom p{font-size:.8rem}.game-tile{padding:15px 12px;min-height:209px}.game-tile h3{font-size:1.4rem}.game-tile p{font-size:.8rem}.six-dice{gap:15px 8px}.dice-scene{--size:54px;--half:27px}.thirty-die,.dice-placeholder{height:85px}}
@media(max-height:740px){body.playing #game{gap:4px}body.playing .game-heading h1{font-size:1.8rem}body.playing .turnbar{padding:5px 10px}body.playing .stage{padding-block:15px}body.playing .stage-intro,body.playing .game-note{margin-bottom:12px}.six-dice{padding-block:18px 12px;gap:12px}.thirty-die,.dice-placeholder{height:86px}body.playing .stage-foot{margin-top:13px}.traffic-light{width:102px;gap:12px}body.playing .control{min-height:49px}body.playing .dock-meta{margin-top:9px}}
@media(max-height:650px){body.playing #game{grid-template-areas:'nav' 'title' 'direction' 'arena' 'dock';grid-template-rows:auto auto auto minmax(0,1fr) auto}body.playing .turnbar{display:none}body.playing .game-nav{min-height:33px}body.playing .game-nav .text-button{min-height:32px;padding:5px 10px}body.playing .direction-badge{font-size:.75rem}body.playing .game-heading h1{font-size:1.6rem}body.playing .control{min-height:46px}}
@media(orientation:landscape) and (max-height:500px){body.playing #game{grid-template-columns:minmax(0,1fr) 235px;grid-template-areas:'nav nav' 'arena title' 'arena direction' 'arena dock';grid-template-rows:auto auto auto minmax(0,1fr);column-gap:16px}body.playing .turnbar{display:none}body.playing .dock{align-self:end}body.playing .controls{grid-auto-flow:row;grid-auto-columns:auto}body.playing .arena{height:100%}body.playing .dock-meta{flex-wrap:wrap}body.playing .game-heading h1{font-size:1.6rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}