@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box} :root{color-scheme:dark;--navy:#102838;--gold:#cba45f;--cream:#f5f2ec}body{margin:0;background:radial-gradient(ellipse at 50% 30%,#193745,#06121d 75%);color:var(--cream);font-family:'Trebuchet MS',Arial,sans-serif;min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:4px}button:disabled{cursor:default}.game-shell{width:min(100%,650px,calc((100svh - 70px)*2/3));min-width:300px;margin:0 auto}.toolbar{height:34px;display:flex;justify-content:space-between;align-items:center;padding:0 10px;font-size:11px;letter-spacing:1px}.toolbar a{color:#dec38c;text-decoration:none}.toolbar span{display:flex;gap:8px;align-items:center}.toolbar button{color:#e7c887;background:transparent;border:1px solid #cba45f50;border-radius:5px;padding:3px 8px;min-width:28px}.board{position:relative;aspect-ratio:2/3;width:100%;isolation:isolate;container-type:inline-size;background:#102838 url('assets/game/board.png') center/100% 100%;overflow:hidden;border-radius:2.5%;box-shadow:0 20px 65px #0008}#field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.header{position:absolute;top:1.7%;left:4%;right:4%;display:grid;grid-template-columns:19% 1fr 19%;gap:2%;align-items:center}.panel{border:2px solid #cba45fb0;clip-path:polygon(8% 0,92% 0,100% 15%,100% 85%,92% 100%,8% 100%,0 85%,0 15%);padding:5% 7%;text-align:center;background:#102838b0;box-shadow:inset 0 0 0 2px #53707960}.score small{display:block;font-size:1.8cqw;font-weight:bold}.score strong{display:block;color:#e7c887;font-size:5.1cqw;line-height:1.05;font-weight:900}.wordmark{text-align:center;transform:rotate(-2deg)}h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:5.1cqw;letter-spacing:-.09cqw;margin:0;line-height:1;color:#f7edd8;text-shadow:1px 2px #bca274,3px 4px #0008;white-space:nowrap}h1 span{font-size:.7em}.wordmark p{font-family:Impact,'Arial Narrow',sans-serif;color:#0a1d2b;font-size:2.85cqw;background:#e3b958;clip-path:polygon(0 10%,97% 0,91% 50%,100% 80%,5% 100%,10% 55%);padding:2% 0;margin:3% -1% 0;white-space:nowrap}.clock strong{display:block;font-size:3.35cqw;font-weight:900;letter-spacing:.1em}.clock span{display:block;color:#e7c887;font-size:2.7cqw;white-space:nowrap}.sticker{position:absolute;background:#d9b363;color:#10212b;font-family:Impact,'Arial Narrow',sans-serif;font-size:1.7cqw;line-height:1.12;margin:0;padding:2% 2.4%;pointer-events:none;clip-path:polygon(3% 0,100% 5%,95% 92%,0 100%)}.sticker-left{top:11%;left:1%;transform:rotate(-9deg)}.sticker-right{right:1%;top:10%;transform:rotate(10deg)}.rocket-buttons{position:absolute;top:60%;left:3%;right:3%;height:14%;display:grid;grid-template-columns:repeat(7,1fr)}.rocket-hit{position:relative;border:0;background:none;min-width:0;border-radius:12px}.rocket-hit:hover,.rocket-hit:focus-visible{background:linear-gradient(0deg,#e7c88735,transparent)}.rocket-hit.ready{box-shadow:inset 0 -4px 0 var(--accent)}.rocket-hit .number{position:absolute;bottom:-2%;left:28%;width:44%;color:#102838;background:#e9ce95;border:2px solid #152d36;box-shadow:0 2px 0 #0006;font-family:Impact,sans-serif;font-size:2.6cqw}.rocket-hit .upgrade{position:absolute;bottom:16%;left:5%;right:5%;text-align:center;color:#fff6df;font-size:1.65cqw;text-shadow:0 1px 3px #000;font-weight:bold;background:#071d2a99;border-radius:3px}.dice-tray{position:absolute;top:78%;left:21%;right:21%;height:11%;display:flex;justify-content:space-between;perspective:800px}.die-button{--size:14cqw;position:relative;width:var(--size);height:var(--size);padding:0;background:transparent;border:0;color:#132c39;perspective:700px;transition:opacity .2s,filter .2s}.cube{position:absolute;inset:0;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-16deg) rotateY(18deg);transition:transform .7s cubic-bezier(.16,.66,.22,1)}.face{position:absolute;inset:0;border-radius:15%;backface-visibility:hidden;background:radial-gradient(ellipse at 22% 18%,#fff8e9 0,#f0e4cb 65%,#cfbd99 100%);border:1px solid #d6c49f;box-shadow:inset 0 0 0 4px #fff5dc88,inset -5px -6px 10px #6b542b33;display:flex;align-items:center;justify-content:center}.face svg{width:70%;height:70%;filter:drop-shadow(1px 2px 0 #fff7)}.face.front{transform:translateZ(calc(var(--size)/2))}.face.back{transform:rotateY(180deg) translateZ(calc(var(--size)/2))}.face.right{transform:rotateY(90deg) translateZ(calc(var(--size)/2))}.face.left{transform:rotateY(-90deg) translateZ(calc(var(--size)/2))}.face.top{transform:rotateX(90deg) translateZ(calc(var(--size)/2))}.face.bottom{transform:rotateX(-90deg) translateZ(calc(var(--size)/2))}.die-button.selected{filter:drop-shadow(0 0 6px #ffc854);transform:translateY(-5%)}.die-button.used{opacity:.19;filter:grayscale(1)}.die-label{position:absolute;top:116%;left:-30%;right:-30%;color:#f5e6c6;text-align:center;font-size:1.75cqw;font-weight:bold;white-space:nowrap}.die-button.rolling .cube{animation:tumble .75s ease-in-out}.hint{position:absolute;top:91.5%;left:12%;right:12%;text-align:center;font-size:1.85cqw;margin:0;color:#f5ebd8;line-height:1.2}.roll{position:absolute;top:94%;left:27%;width:46%;height:4.5%;background:linear-gradient(120deg,#f3d795,#c99a40,#f0d288);border:2px solid #ffe5ae;box-shadow:inset 0 0 0 3px #b88a45,0 3px 0 #05121c;color:#0c2432;font-family:Impact,'Arial Narrow',sans-serif;font-size:3.3cqw;font-weight:bold;letter-spacing:.09em;clip-path:polygon(4% 0,96% 0,100% 30%,97% 100%,3% 100%,0 30%)}.roll:disabled{filter:saturate(.5);opacity:.6}.footer-left,.footer-right{position:absolute;bottom:2.4%;margin:0;color:#102838;font-family:Impact,'Arial Narrow',sans-serif;font-size:1.8cqw;line-height:1.12;transform:rotate(-9deg);pointer-events:none}.footer-left{left:2.7%}.footer-right{right:2.7%;transform:rotate(8deg)}.overlay{position:absolute;inset:0;background:#051827b8;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:5;padding:8%;}.overlay[hidden]{display:none}.dialog{width:100%;background:#f0e5ca;color:#102838;border:3px solid #d7af61;padding:8%;box-shadow:9px 10px 0 #0007;transform:rotate(-1deg);font-size:2.55cqw;line-height:1.45;max-height:94%;overflow:auto}.eyebrow{font-size:1.85cqw;font-weight:900;letter-spacing:.08em}.dialog h2{font-family:Impact,'Arial Narrow',sans-serif;font-size:6.5cqw;font-weight:900;margin:4% 0;line-height:1.05}.dialog p{margin:4% 0}.dialog b{color:#866125}.dialog .rule-note{font-size:2.1cqw;opacity:.85;border-top:1px solid #c4b38d;padding-top:5%}.gold-button{display:block;width:100%;border:2px solid #0a1d2b;padding:5%;background:#d7ad5d;color:#102838;font-family:Impact,sans-serif;font-size:3.5cqw;letter-spacing:.05em;margin-top:7%;box-shadow:3px 3px 0 #102838}.best{text-align:center;font-size:2.1cqw}.below{font-size:10px;color:#a7b5bc;text-align:center;margin:8px 0;line-height:1.5}.keyboard{display:block}.board.shake{animation:shake .25s}.board.flash::after{content:'';position:absolute;inset:0;pointer-events:none;background:#e7644935;animation:fade .3s forwards}@keyframes tumble{0%,100%{translate:0 0}30%{translate:0 -25%}55%{translate:0 7%}75%{translate:0 -8%}}@keyframes shake{25%{translate:-3px 2px}75%{translate:3px -2px}}@keyframes fade{to{opacity:0}}@media(max-width:600px){.game-shell{width:100%;max-width:560px;min-width:0}.toolbar{height:36px}.below{padding:0 8px}.keyboard{display:none}.dialog{font-size:3cqw}.dialog .rule-note{font-size:2.5cqw}.hint{font-size:2.1cqw}.die-label{font-size:2cqw}}@media(prefers-reduced-motion:reduce){.cube{transition-duration:.12s}.die-button.rolling .cube,.board.shake{animation:none}}

/* Stable tap targets: only the decorative cube moves in 3D. */
.dice-tray{top:76.8%;left:19%;right:19%;height:14%;z-index:2}
.die-button{width:18cqw;height:20cqw;flex:0 0 18cqw;isolation:isolate;user-select:none;-webkit-user-select:none}
.die-button *{pointer-events:none}
.die-button .cube{inset:auto;top:2cqw;left:2cqw;width:var(--size);height:var(--size)}
.die-button.selected,.die-button.queued{transform:none;filter:drop-shadow(0 0 7px #ffc854)}
.die-label{top:17.4cqw;left:-10%;right:-10%;line-height:1.25}
.hint{pointer-events:none}
.frost-status{position:absolute;top:10%;left:20%;right:20%;margin:0;padding:1% 0;border:1px solid #8be3ee88;border-radius:5px;background:#0b2d3bea;color:#b0f1ff;text-align:center;font-size:clamp(9px,2cqw,13px);font-weight:bold;pointer-events:none}

.project-invitation{margin-top:8%;padding-top:6%;border-top:1px solid #a68548}.project-invitation[hidden]{display:none}.project-invitation h3{font-size:1.3em;line-height:1.2;margin:0}.project-invitation a{display:block;color:#102838;font-weight:bold;text-underline-offset:4px;padding:12px 0}.sticker-right{font-size:1.5cqw}

/* Readable game UI: the artwork keeps its coordinate system; text does not shrink with it. */
body{font-family:Karla,sans-serif;font-size:18px;line-height:1.55}
button,.wordmark p,.sticker,.rocket-hit .number,.roll,.footer-left,.footer-right,.dialog h2,.gold-button{font-family:Karla,sans-serif}
.game-shell{width:min(100%,650px);min-width:0}
.toolbar{height:auto;min-height:54px;gap:10px;flex-wrap:wrap;font-size:16px;letter-spacing:0;padding:8px 12px}
.toolbar span{gap:6px}.toolbar button{font-size:16px;min-height:40px;min-width:40px;padding:5px 8px}
.header{grid-template-columns:22% minmax(0,1fr) 22%;align-items:center}
.wordmark{transform:none}.wordmark h1{margin:0;line-height:1;text-shadow:none}.game-logo{display:block;height:clamp(40px,10cqw,64px);width:auto;max-width:100%;object-fit:contain;margin:auto}
.wordmark p{font-size:16px;line-height:1.25;font-weight:800;clip-path:none;border-radius:3px;margin:5px 0 0;padding:3px 2px;white-space:normal}
.score small{font-size:14px;line-height:1.3}.score strong{font-size:32px;line-height:1.1}.clock strong{font-size:22px;letter-spacing:0;line-height:1.2}.clock span{font-size:16px;line-height:1.3}
.sticker{font-size:14px;line-height:1.2;font-weight:800;max-width:27%;padding:8px;transform:none;clip-path:none;border-radius:3px}.sticker-left,.sticker-right{top:14%}.sticker-right{font-size:14px}
.rocket-hit .number{font-size:16px;line-height:1.3;font-weight:800;left:20%;width:60%}.rocket-hit .upgrade{font-size:14px;line-height:1.2;overflow-wrap:anywhere}
.die-label{font-size:14px;line-height:1.25;white-space:normal;left:-8%;right:-8%}
.hint{font-size:14px;line-height:1.3;left:3%;right:3%;top:91.5%}
.roll{font-size:16px;line-height:1.2;letter-spacing:.06em;min-height:32px;top:94%;height:5%;left:24%;width:52%}
.frost-status{font-size:14px;line-height:1.3;top:12%;left:28%;right:28%}
.game-footer{display:flex;justify-content:space-between;gap:20px;padding:18px 14px 12px;border-bottom:1px solid #cba45f55;background:#06121c}
.game-footer .footer-left,.game-footer .footer-right{position:static;transform:none;font-size:16px;line-height:1.5;font-weight:800;color:#e5c582;margin:0;width:auto;letter-spacing:.025em}
.game-footer .footer-right{text-align:right}
.overlay{padding:5%}.dialog{font-size:18px;line-height:1.55;padding:6%;transform:none;max-height:95%;background:#faf9f5;overscroll-behavior:contain}
.dialog h2{font-size:32px;line-height:1.18;letter-spacing:-.02em}.dialog p{font-size:18px;line-height:1.55}.dialog .rule-note,.eyebrow,.best,.below{font-size:14px;line-height:1.55}.gold-button{font-size:16px;line-height:1.5;min-height:48px;padding:14px;font-weight:800}.project-invitation h3{font-size:22px;line-height:1.2}.project-invitation a{font-size:16px;line-height:1.5}
.below{padding:0 14px 12px}.below .keyboard{margin-top:6px}
@media(max-width:600px){.game-shell{max-width:560px}.dialog h2{font-size:28px}.dialog .rule-note{font-size:14px}.hint,.die-label{font-size:14px}.game-footer{gap:12px}.game-footer .footer-left,.game-footer .footer-right{font-size:14px}.sticker{max-width:27%;font-size:14px;padding:5px;top:17%}.sticker-right{font-size:14px;overflow-wrap:anywhere}.frost-status{top:16%}.hint{top:91%;line-height:1.15}.roll{top:94%;height:5.5%;min-height:26px}}

/* Give status instructions their own line, clear of dice labels and the roll button. */
.game-shell{width:min(100%,650px,calc((100svh - 240px)*2/3));min-width:320px}
.game-shell>.hint{position:static;min-height:48px;margin:0;padding:12px 14px;background:#06121c;font-size:14px;line-height:1.5;text-align:center}
.game-footer{padding-top:8px}
@media(max-width:600px){.game-shell{width:100%;min-width:0}.sticker{max-width:33%}.sticker-right{overflow-wrap:normal}}
@media(max-width:380px){.clock strong{font-size:18px}.clock span{font-size:14px}}

/* Brief foreground fly-bys: no hit area and no obstruction of the controls. */
.slogan-rocket{position:absolute;left:0;top:23%;width:210px;max-width:54%;height:42px;z-index:3;pointer-events:none;will-change:transform;filter:drop-shadow(0 2px 2px #0008)}
.slogan-rocket[hidden]{display:none}.slogan-hull{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.slogan-rocket.from-right .slogan-hull{transform:scaleX(-1)}
.slogan-copy{position:absolute;inset:0 18px 0 32px;display:flex;align-items:center;justify-content:center;color:#102838;font:800 14px/1 Karla,sans-serif;white-space:nowrap;letter-spacing:-.02em}
.slogan-rocket.from-right .slogan-copy{left:18px;right:32px}
@media(max-width:600px){.slogan-rocket{width:174px;height:36px}.slogan-copy{left:24px;right:13px}.slogan-rocket.from-right .slogan-copy{left:13px;right:24px}}