@font-face{font-family:Lilita;src:url('assets/fonts/lilita-one.ttf') format('truetype');font-display:swap}
@font-face{font-family:Nunito;src:url('assets/fonts/nunito-bold.ttf') format('truetype');font-weight:600 900;font-display:swap}
:root{color-scheme:dark;--cream:#fff1ca;--gold:#ffcd42;--green:#96d830;--wood-art:none;font-family:Nunito,system-ui,sans-serif}
*{box-sizing:border-box}html,body{height:100%;width:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:#172611;color:var(--cream);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f9dc68;outline-offset:4px}button{touch-action:manipulation}#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#stage{position:relative;overflow:hidden;flex:none;isolation:isolate;box-shadow:0 0 100px #090f09}#phaser-root,#accessible-menu{position:absolute;inset:0}#phaser-root canvas{display:block;width:100%!important;height:100%!important;touch-action:none}#accessible-menu{pointer-events:none}.hotspot{position:absolute;border:0;background:transparent;color:transparent;pointer-events:auto;border-radius:12px;padding:0;touch-action:none}.hotspot:hover{background:#ffdf4810}.hotspot:focus-visible{outline:3px solid #ffdf62;outline-offset:-2px;background:#ffdf481a}.hotspot:active{background:#ffffff13}.screenreader{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:radial-gradient(ellipse at center,#3a5524,#152310 75%);z-index:50}#loader img{width:min(400px,75vw);height:auto;filter:drop-shadow(0 12px 12px #0008)}#loader p{margin:0;font-weight:800}#loader small{opacity:.55}.loading-track{width:min(250px,65vw);height:10px;border:2px solid #82602f;border-radius:8px;background:#241409;overflow:hidden}#loading-progress{width:0;height:100%;background:linear-gradient(#d9ff79,#79be26);transition:width .2s}#modal-layer{position:absolute;inset:0;background:#061509a8;backdrop-filter:blur(7px);z-index:20;display:grid;place-items:center;padding:20px}#modal-layer[hidden]{display:none}#modal{width:min(590px,100%);max-height:calc(100dvh - 50px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#b57c36 #402512;padding:24px 30px 30px;border:3px solid #c58d40;outline:none;border-radius:20px;background-image:linear-gradient(#2b170fe0,#21100af2),var(--wood-art);background-color:#352113;box-shadow:0 0 0 6px #27160c,0 24px 70px #0008,inset 0 0 0 2px #704c24,inset 0 1px 1px #fff6}#modal h1{font:400 clamp(28px,5vw,38px)/1 Lilita, sans-serif;color:#ffe8ad;margin:8px 0 20px;text-shadow:0 3px #301306}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font-size:11px;letter-spacing:2.5px;color:#c8a978;margin:0}.close-button{border:1px solid #c49451;border-radius:8px;background:#61401e;color:#ffe8b5;width:36px;height:36px;font-size:26px;line-height:1}.lede{font-size:15px;line-height:1.6;color:#dfcaa3;margin:0 0 20px}.notice{font-size:13px;line-height:1.5;border-left:3px solid #d5ac47;padding:10px 14px;background:#130c0870;color:#d9c79f;margin:18px 0 0}.tag{display:inline-block;color:#d9eda1;font-size:11px;letter-spacing:1px;text-transform:uppercase}.wood-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;min-height:44px;border:2px solid #c18d42;border-radius:10px;background-image:linear-gradient(#60360f55,#3a1f0b77),var(--wood-art);background-color:#996027;color:#fff0bc;box-shadow:inset 0 1px #fff3,0 3px #1e1108;font-weight:900;text-shadow:0 2px #2b170e}.wood-button.primary{background:linear-gradient(#c6ea57,#7da92a);color:#263a0b;text-shadow:0 1px #f6ffd480;border-color:#bfd957}.wood-button:hover{filter:brightness(1.12)}.wood-button:active{transform:translateY(2px);box-shadow:none}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.field{display:grid;gap:7px;margin:16px 0;font-size:13px;color:#ddc69a}.field input,.field select,select.filter{width:100%;min-height:44px;padding:10px 12px;color:#fff4d3;background:#1c100b;border:1px solid #926638;border-radius:9px;user-select:text;-webkit-user-select:text}.field input:invalid{border-color:#c79151}.setting{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:20px 0;font-size:15px}.setting small{display:block;font-size:12px;color:#c3aa83;margin-top:4px}.setting input[type=range]{width:160px;accent-color:#a5d644}.setting input[type=checkbox]{width:23px;height:23px;accent-color:#a5d644}.setting select{min-height:40px;background:#1e140b;color:var(--cream);border:1px solid #956932;border-radius:8px;padding:7px}.worlds{display:grid;gap:12px}.world-card{text-align:left;width:100%;display:grid;grid-template-columns:90px 1fr;gap:16px;align-items:center;border:2px solid #76512b;background:#1f130caa;border-radius:12px;padding:10px;color:#e7d3af;min-height:110px}.world-card.selected{border-color:#b5db48;background:#3b492024}.world-card img{width:90px;height:85px;border-radius:8px;object-fit:cover;object-position:65% 35%}.world-card strong{display:block;font:400 24px Lilita;color:#fff0bf;margin:0 0 4px}.world-card small{font-size:12px;line-height:1.4}.world-card .world-number{width:90px;height:85px;display:grid;place-items:center;background-image:linear-gradient(#5a371ba0,#351b0baa),var(--wood-art);border-radius:8px;font:400 25px Lilita;color:#dcc093}.world-card .tag{margin-top:6px}.profile-header{display:flex;align-items:center;gap:18px;margin:10px 0 20px}.profile-avatar{width:88px;height:88px;border-radius:50%;border:3px solid #d0a34c;box-shadow:0 3px 12px #0006}.profile-header p{margin:3px 0;color:#dac08b;font-size:13px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.stat{background:#190e0860;border:1px solid #79522c;border-radius:10px;padding:13px 8px;text-align:center}.stat strong{display:block;color:#ffdb77;font:400 27px Lilita}.stat small{display:block;font-size:11px;color:#bba37a}.filters{display:flex;gap:8px;flex-wrap:wrap}.filter-button{border:1px solid #886331;border-radius:8px;background:#211409;color:#e6cda0;padding:9px 12px;font-size:12px}.filter-button.selected{color:#243109;background:#bad64c;border-color:#e2ed8e}.empty{text-align:center;padding:30px 15px 24px;border:1px dashed #916b36;border-radius:12px;margin:18px 0}.empty img{height:55px;width:55px;object-fit:contain;margin-bottom:8px}.empty h2{font:400 23px Lilita;color:#e5cc9e;margin:0 0 8px}.empty p{font-size:13px;line-height:1.6;color:#bfa885;margin:0}.preview-frame{height:240px;border:2px solid #9d7235;border-radius:12px;overflow:hidden;position:relative;background:#1a2613}.preview-frame img{width:100%;height:100%;object-fit:cover;object-position:10% 65%}.preview-frame span{position:absolute;bottom:10px;left:12px;font-size:12px;background:#182410db;border:1px solid #81965b;border-radius:6px;padding:6px 10px}.art-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.art-gallery img{width:100%;height:175px;object-fit:contain;background:#122111;border-radius:8px}.art-gallery figcaption{font-size:11px;color:#c5ad85;text-align:center;margin-top:5px}.art-gallery figure{margin:0}.key-map{display:grid;grid-template-columns:1fr 1fr;gap:10px}.key-map div{border-bottom:1px solid #694523;padding:10px 0;font-size:13px}.key-map b{display:block;color:#ffe2a1;font-size:15px}#toast{position:absolute;z-index:60;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:90%;padding:12px 20px;background:#233515ee;border:1px solid #b8d56b;border-radius:12px;box-shadow:0 8px 25px #0006;text-align:center;font-size:14px;pointer-events:none}.spaced{line-height:1.8;font-size:14px;color:#cfb892}.muted{color:#bba380;font-size:12px}.revision{margin-top:24px;padding-top:12px;border-top:1px solid #704c2a;color:#967c5c;font-size:10px;letter-spacing:1px}.error-box{padding:25px;text-align:center;max-width:500px}.error-box p{line-height:1.6}button,input,select,a{-webkit-tap-highlight-color:transparent}
@media(max-width:600px){#modal-layer{padding:14px}#modal{padding:17px 18px 22px;border-radius:15px}.setting{gap:12px}.setting input[type=range]{width:120px}.preview-frame{height:190px}.stats{gap:6px}.stat{padding:11px 4px}.art-gallery img{height:150px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Gameplay overlays remain outside the scrolling Phaser camera. */
#game-ui{position:absolute;inset:0;pointer-events:none;touch-action:none}.game-hud{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.game-control{position:absolute;pointer-events:auto;touch-action:none;-webkit-touch-callout:none;min-height:0;padding:0;font-family:Lilita;font-size:clamp(12px,2.4vw,25px)}.game-control.art-control{border:0;background-color:transparent;background-repeat:no-repeat;background-size:100% 100%;border-radius:50%}.game-control.pressed{filter:brightness(1.2);transform:scale(.95)}.game-notice{position:absolute;top:16%;left:50%;transform:translateX(-50%);width:max-content;max-width:78%;text-align:center;padding:10px 20px;border:1px solid #b79a50;border-radius:10px;background:#1b3019dc;color:#fff1c8;font-size:clamp(11px,1.6vw,22px);opacity:0;transition:opacity .2s}.game-notice.visible{opacity:1}.game-panel{position:absolute;inset:0;pointer-events:auto;display:grid;place-items:center;padding:20px;background:#0a170ab8;backdrop-filter:blur(5px);touch-action:pan-y}.game-panel-box{width:min(470px,90%);max-height:90%;overflow:auto;background-image:linear-gradient(#2b170fd9,#21100aeb),var(--wood-art);border:3px solid #c58d40;border-radius:20px;padding:24px;box-shadow:0 12px 60px #0008;text-align:center}.game-panel-box h1{font-family:Lilita;font-weight:400;font-size:clamp(25px,4vw,40px);margin:0 0 22px;color:#ffdb79}.game-panel-box>.wood-button{width:100%;display:flex;margin-top:12px}.game-panel-box .stats{grid-template-columns:1fr 1fr}.game-panel-box p{font-size:13px;line-height:1.5;color:#d6bd91}

.stage-list{display:grid;gap:12px;margin:20px 0}.stage-card{text-align:left;display:grid;gap:7px;padding:16px 20px;white-space:normal;line-height:1.4}.stage-card strong{font-family:Lilita;font-size:21px}.stage-card small{font-family:Nunito;font-size:13px;font-weight:700}.stage-card.selected{outline:2px solid #efc15e;outline-offset:2px}.stage-record{color:#f8d87f}
.game-notice{margin:0}@media(min-aspect-ratio:1/1){.game-notice{top:22%}}
/* Phase 4: the same timber panels and original reference icons. */
.account-form{display:grid;gap:8px}.ranking-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #b48d4b44}.ranking-row span{flex:1;min-width:0;overflow-wrap:anywhere}.rank-avatar{width:46px;height:46px;object-fit:contain}.room-list{display:grid;gap:8px;margin-top:18px}.room-code{letter-spacing:.18em;color:#ffdb83;text-align:center}.cloud-history{font-size:14px}.net-status{position:absolute;left:50%;top:23%;transform:translateX(-50%);color:#fff1c2;background:#35200ee8;border:1px solid #ab8247;padding:5px 12px;border-radius:8px;font:700 12px Nunito;max-width:85%;text-align:center;pointer-events:none}.sync-status{color:#ffe1a1;font-size:14px;overflow-wrap:anywhere}
@media(max-width:480px){.ranking-row{gap:7px;font-size:12px}.rank-avatar{width:34px;height:34px}.actions{flex-wrap:wrap}.room-code{font-size:23px}}

.notice:empty{display:none}.room-code{user-select:text;-webkit-user-select:text}
/* Phase 5 panels reuse the original raster wood/vegetation, fonts and warm palette. */
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.shop-card,.coupon-card{padding:16px 12px;background:rgba(32,22,10,.38);border:1px solid #a3773c80;border-radius:12px;text-align:center}.shop-card h2{font-size:20px;margin:8px 0}.item-art{display:block;width:100px;height:100px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 4px 5px #100b0655)}.shop-price{font-size:12px;min-height:34px}.shop-card .wood-button{width:100%;min-height:44px}.coupon-card{margin:12px 0;overflow-wrap:anywhere}.qr-box{display:flex;justify-content:center;margin:18px}.qr-box canvas{width:min(232px,80%);height:auto;image-rendering:pixelated;border-radius:6px}.share-link{box-sizing:border-box;width:100%;font-size:12px}.stat-line{border-bottom:1px solid #a3773c40;padding-bottom:8px}.actions a.wood-button{text-decoration:none}.game-panel-box{max-height:85dvh;overflow:auto}.shop-card img{pointer-events:none}
@media(max-width:420px){.shop-grid{gap:8px}.shop-card{padding:12px 8px}.shop-card h2{font-size:17px}.item-art{width:84px;height:84px}}

/* PWA controls keep the established wood panel and palette. */
.pwa-options{display:grid;gap:10px;margin:18px 0}.pwa-options h2{margin-bottom:0}.pwa-options .notice{margin:0}#phaser-root,#accessible-menu{touch-action:none;overscroll-behavior:none;-webkit-touch-callout:none}input,select,textarea{font-size:16px;user-select:text;-webkit-user-select:text}
/* Caption space stays outside the film mask at desktop and portrait sizes. */
@font-face{font-family:Cinzel;src:url('assets/fonts/cinzel-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Cormorant;src:url('assets/fonts/cormorant-bold.woff2') format('woff2');font-weight:700;font-display:swap}
/* Cinematic footer: carved plaque kept inside the band below the film frame. */
.cinematic-ui{position:absolute;inset:0;z-index:12;pointer-events:none;color:#fff4dc;font-family:Nunito,sans-serif;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;container-type:size;top:var(--frame-bottom,76%);padding:0}
.cinematic-plaque{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6cqh;padding:1cqw 4cqw 0;border-top:.22cqw solid #d8a54a;
 background:radial-gradient(ellipse 60% 120% at 50% 0%,#7a3c1a66,transparent 70%),linear-gradient(#3d1b0e,#2a1108 60%,#1f0c06);
 box-shadow:inset 0 .25cqw 0 #6b3a14,inset 0 -.3cqw 0 #00000055,0 -.4cqw 1.2cqw #0008}
.cinematic-plaque::before,.cinematic-plaque::after{content:'';position:absolute;top:50%;width:13cqw;aspect-ratio:2.4;transform:translateY(-50%);background:url('assets/ui/foliage.png') center/contain no-repeat;filter:sepia(1) saturate(1.6) hue-rotate(-12deg) brightness(.62);opacity:.55;pointer-events:none}
.cinematic-plaque::before{left:1cqw;transform:translateY(-50%) scaleX(-1)}.cinematic-plaque::after{right:1cqw}
.cinematic-emblem{position:absolute;left:50%;top:0;width:9cqw;aspect-ratio:200/90;transform:translate(-50%,-62%);background:url('assets/ui/cacao-emblem.svg') center/contain no-repeat;filter:drop-shadow(0 .2cqw .3cqw #000a)}
.cinematic-eyebrow{position:relative;font:700 clamp(15px,2.75cqw,52px)/1.08 Cinzel,Georgia,serif;letter-spacing:.02em;margin:0;text-align:center;background:linear-gradient(#fff3c4,#f2c766 45%,#c88a2e 70%,#f6d887);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .15cqw 0 #3a1806) drop-shadow(0 .25cqw .35cqw #000a)}
.cinematic-subtitle{display:flex;align-items:center;justify-content:center;gap:1.4cqw;margin:0;max-width:92%;text-align:center;font:700 clamp(12px,1.65cqw,30px)/1.25 Cormorant,Georgia,serif;color:#fff1d6;text-wrap:balance}
.cinematic-subtitle::before,.cinematic-subtitle::after{content:'';flex:none;width:9cqw;height:.7cqw;background:linear-gradient(90deg,transparent,#d9a64e 60%,#f0c96f) center/100% 1px no-repeat,radial-gradient(circle,#f3cf78 40%,transparent 45%) right center/.7cqw .7cqw no-repeat}
.cinematic-subtitle::after{transform:scaleX(-1)}
.cinematic-controls{display:flex;flex-wrap:nowrap;justify-content:center;gap:1.5cqw;margin-top:.8cqh;pointer-events:auto}
.cinematic-controls .wood-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:1cqw;min-height:clamp(34px,3.4cqw,64px);padding:0 2.4cqw;border-radius:999px;font:700 clamp(13px,1.6cqw,28px)/1.1 Cormorant,Georgia,serif;letter-spacing:.01em;white-space:nowrap;text-shadow:none;transition:filter .15s,transform .15s}
.cinematic-controls .cinematic-play{min-width:24cqw;border:.18cqw solid #ffe39a;background:linear-gradient(#ffe9a3,#f2c460 45%,#d39a37 55%,#f5cf74);color:#3a1d06;box-shadow:0 0 0 .15cqw #8a5517,0 0 1.4cqw #ffcf5c88,inset 0 .15cqw .1cqw #fffbe2}
.cinematic-controls .cinematic-play::before{content:'';width:clamp(18px,1.9cqw,36px);aspect-ratio:1;background:url('assets/ui/cacao-pod.svg') center/contain no-repeat;flex:none}
.cinematic-controls .cinematic-play::after{content:'›';font:700 1.5em/1 Nunito,sans-serif;margin-left:.6cqw}
.cinematic-controls .cinematic-skip{min-width:18cqw;border:.15cqw solid #d9a54c;background:linear-gradient(#4a2412,#2c1209);color:#ffe9c2;box-shadow:inset 0 0 0 .12cqw #6e3c16,0 .2cqw .5cqw #0008}
.cinematic-controls .cinematic-skip::after{content:'»';font:700 1.35em/1 Nunito,sans-serif;color:#f3c867;margin-left:.6cqw}
.cinematic-controls .wood-button:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.cinematic-controls .wood-button:focus-visible{outline:3px solid #fff3b0;outline-offset:3px}
/* Portrait: the plaque fills the lower area below the 16:9 film. */
.cinematic-ui.portrait{justify-content:flex-start}
.cinematic-ui.portrait .cinematic-plaque{justify-content:flex-start;gap:1.6cqh;padding:9cqw 6cqw 4cqw;border-top-width:.5cqw}
.cinematic-ui.portrait .cinematic-plaque::before,.cinematic-ui.portrait .cinematic-plaque::after{top:auto;bottom:2cqw;width:30cqw;transform:none}.cinematic-ui.portrait .cinematic-plaque::before{transform:scaleX(-1)}
.cinematic-ui.portrait .cinematic-emblem{width:22cqw;transform:translate(-50%,-55%)}
.cinematic-ui.portrait .cinematic-eyebrow{font-size:clamp(18px,6.3cqw,56px)}
.cinematic-ui.portrait .cinematic-subtitle{font-size:clamp(14px,4.6cqw,36px);gap:3cqw}.cinematic-ui.portrait .cinematic-subtitle::before,.cinematic-ui.portrait .cinematic-subtitle::after{width:12cqw;height:1.6cqw;background-size:100% 1px,1.6cqw 1.6cqw}
.cinematic-ui.portrait .cinematic-controls{flex-direction:column;width:88%;gap:3.2cqw;margin-top:3cqw}
.cinematic-ui.portrait .cinematic-controls .wood-button{min-height:clamp(46px,12cqw,110px);font-size:clamp(17px,5.6cqw,44px);gap:3cqw}
.cinematic-ui.portrait .cinematic-play::before{width:clamp(24px,7cqw,60px)}
/* Short landscape phones: titles left, actions right, still below the film. */
@media(max-height:500px) and (orientation:landscape){
 .cinematic-plaque{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:3cqw;row-gap:0;align-content:center;justify-items:start;padding:0 3cqw 0 4cqw}
 .cinematic-eyebrow{grid-column:1;grid-row:1;align-self:end;text-align:left;font-size:clamp(14px,2.7cqw,26px)}
 .cinematic-subtitle{grid-column:1;grid-row:2;align-self:start;justify-content:flex-start;max-width:none;text-align:left;font-size:clamp(12px,1.9cqw,20px)}
 .cinematic-subtitle::before,.cinematic-subtitle::after{display:none}
 .cinematic-controls{grid-column:2;grid-row:1/3;align-self:center;margin:0;gap:14px}
 .cinematic-controls .wood-button{min-height:40px;min-width:0;padding:0 20px;font-size:15px}
 .cinematic-emblem{left:auto;right:auto;width:8cqw;transform:translate(0,-62%);left:46%}
 .cinematic-plaque::before,.cinematic-plaque::after{display:none}
}
.stage-scene-preview{width:100%;height:80px;object-fit:cover;border-radius:7px;margin-bottom:7px;pointer-events:none}

/* Bound result/pause panels to the actual letterboxed game area on phones. */
.game-panel-box{box-sizing:border-box;max-height:min(85dvh,calc(100% - 20px));overscroll-behavior:contain}
/* Competition extends the original wooden UI without replacing the approved art. */
.competition-panel{margin:16px 0;text-align:left}.competition-panel h2{font-family:Lilita,serif;text-align:center;font-size:clamp(22px,4vw,30px);margin:10px 0}.podium-list{list-style:none;padding:0;margin:12px 0}.podium-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 8px;border-bottom:1px solid #99733d66}.podium-row.winner{background:#e5b65722;border-radius:10px}.podium-row.self{box-shadow:inset 3px 0 #cc9e52}.podium-place{font-size:22px;color:#ffedc5}.podium-identity{display:flex;align-items:center;gap:8px;min-width:0}.podium-identity strong{overflow-wrap:anywhere}.podium-result{display:grid;gap:4px;text-align:right}.podium-result small{font-size:12px}.season-prizes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.season-qualification{display:block;font-size:11px;line-height:1.6;margin-top:5px}.public-room-details{padding:14px 0;border-top:1px solid #8c673a55}.public-room-details summary{cursor:pointer;font-weight:800;min-height:40px}.private-race-form .wood-button{margin-top:10px}.quick-race-title{text-align:center}.rematch-status{text-align:center;line-height:1.65}.game-panel-box .rank-avatar{width:42px;height:42px}.game-panel-box .competition-panel{max-width:100%}.game-panel-box .wood-button:disabled{opacity:.55;cursor:wait}.race-countdown{position:absolute;top:28%;left:10%;width:80%;font-family:Lilita,serif;font-size:clamp(28px,7vw,72px);text-align:center;color:#fff2c7;text-shadow:0 3px 10px #361e09;pointer-events:none}.race-countdown[hidden]{display:none}@media(max-width:440px){.podium-row{grid-template-columns:26px minmax(0,1fr) auto;gap:6px;padding:10px 3px;font-size:12px}.podium-place{font-size:18px}.podium-identity{gap:5px}.game-panel-box .rank-avatar{width:30px;height:30px}.season-prizes .stat{padding:8px 3px}.season-prizes strong{font-size:22px}.season-panel .notice{font-size:12px}.ranking-row .season-qualification{font-size:10px}}

/* Loader: approved key art with live progress, cover-fit for desktop, landscape and portrait. */
#loader{--r:1672/941;--rw:1.7768;background:#173012;overflow:hidden;gap:0;display:flex}
#loader::before{content:'';position:absolute;inset:-30px;background:url('assets/art/loading-desktop.webp') center/cover no-repeat;filter:blur(18px) brightness(.7);transform:scale(1.05)}
.loader-art{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);aspect-ratio:var(--r);width:min(max(100vw,calc(100dvh*var(--rw))),calc(100dvh*var(--rw)*1.12));background:url('assets/art/loading-desktop.webp') center/100% 100% no-repeat;container-type:inline-size;
 --tx:35.17%;--ty:73.32%;--tw:33.01%;--th:4.57%;--px:65.9%;--py:75.6%;--ly:83.4%;--dy:89.9%}
.loader-track{position:absolute;left:var(--tx);top:var(--ty);width:var(--tw);height:var(--th);border-radius:999px;overflow:hidden;width:var(--tw);border:0;background:none}
#loading-progress{position:relative;width:0;height:100%;min-width:3%;border-radius:999px;background:linear-gradient(#b8ff5a,#7fd51c 45%,#4ea20d);box-shadow:inset 0 3px 2px #e8ff9a99,inset 0 -3px 3px #2b6a0388;transition:width .45s cubic-bezier(.2,.8,.2,1);overflow:hidden}
#loading-progress::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,#ffffff00 0 14px,#ffffff38 14px 26px);background-size:52px 100%;animation:loader-stripes 1s linear infinite}
@keyframes loader-stripes{to{background-position:52px 0}}
#loading-percent{position:absolute;left:var(--px);top:var(--py);transform:translate(-50%,-50%);font:800 clamp(11px,1.65cqw,28px)/1 Nunito,sans-serif;color:#fff6e4;text-shadow:0 2px 2px #2b1205}
#loader #loading-label{position:absolute;left:50%;top:var(--ly);transform:translate(-50%,-50%);margin:0;white-space:nowrap;font:800 clamp(14px,2.05cqw,34px)/1.1 Nunito,sans-serif;color:#fff8e8;text-shadow:0 2px 4px #0009}
.loader-dots{position:absolute;left:50%;top:var(--dy);transform:translate(-50%,-50%);display:flex;align-items:center;gap:clamp(8px,1.3cqw,22px)}
.loader-dots .paw{width:clamp(22px,3cqw,50px);aspect-ratio:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe066'/%3E%3Cstop offset='1' stop-color='%23f0a010'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' stroke='%237a4a08' stroke-width='2'%3E%3Cellipse cx='14' cy='26' rx='7' ry='9'/%3E%3Cellipse cx='26' cy='14' rx='7' ry='9'/%3E%3Cellipse cx='38' cy='14' rx='7' ry='9'/%3E%3Cellipse cx='50' cy='26' rx='7' ry='9'/%3E%3Cpath d='M32 30c-10 0-19 11-19 20 0 7 6 9 11 8 4-1 5-3 8-3s4 2 8 3c5 1 11-1 11-8 0-9-9-20-19-20z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 2px 2px #0007);animation:loader-paw 1.2s ease-in-out infinite}
.loader-dots i{width:clamp(5px,.75cqw,13px);aspect-ratio:1;border-radius:50%;background:#f3c23a;box-shadow:0 1px 2px #0006;animation:loader-dot 1.2s ease-in-out infinite}
.loader-dots i:nth-of-type(2){animation-delay:.15s}.loader-dots i:nth-of-type(3){animation-delay:.3s}.loader-dots i:nth-of-type(4){animation-delay:.45s}
@keyframes loader-dot{0%,100%{background:#7a4a24;transform:scale(.85)}35%{background:#ffd23f;transform:scale(1.15)}}
@keyframes loader-paw{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-18%) rotate(6deg)}}
@media (max-aspect-ratio:1/1){
 #loader{--r:941/1672;--rw:.5628}
 #loader::before,.loader-art{background-image:url('assets/art/loading-mobile.webp')}
 .loader-art{--tx:25.5%;--ty:62.2%;--tw:57.4%;--th:3.23%;--px:77.6%;--py:63.8%;--ly:68.75%;--dy:72.9%}
 #loading-percent{font-size:clamp(11px,2.9cqw,28px)}#loader #loading-label{font-size:clamp(14px,4.1cqw,34px)}
 .loader-dots{gap:clamp(8px,2.2cqw,22px)}.loader-dots .paw{width:clamp(22px,5.6cqw,50px)}.loader-dots i{width:clamp(5px,1.35cqw,13px)}
}
#loader .error-box{position:relative;z-index:2;background:#2b160bf0;border:3px solid #c58d40;border-radius:16px;box-shadow:0 20px 50px #0009}
#loader{transition:opacity .35s ease}#loader.done{opacity:0;pointer-events:none}

/* Letterbox fill: blurred scenery instead of flat bars on wide phones and monitors. */
#app{background:#172611}
#app::before{content:'';position:absolute;inset:-40px;background:url('assets/art/menu-desktop-background.webp') center/cover no-repeat;filter:blur(22px) brightness(.55) saturate(1.1);pointer-events:none}
@media (max-aspect-ratio:1/1){#app::before{background-image:url('assets/art/menu-mobile-background.webp')}}
/* Touch controls: carved wood discs with gold rims and clear icons. */
.game-control.touch-btn{border:0;padding:0;border-radius:50%;display:grid;place-items:center;color:#fff3d0;background:radial-gradient(circle at 50% 35%,#8a5526,#5a3214 62%,#3a1e0b);box-shadow:0 0 0 .35vmin #e2b35a,0 0 0 .7vmin #4a2a10,0 .8vmin 1.4vmin #0008,inset 0 .5vmin .6vmin #ffd99055;opacity:.93;transition:transform .08s,filter .08s}
.game-control.touch-btn::before{content:'';width:46%;height:46%;background:center/contain no-repeat;filter:drop-shadow(0 .3vmin .2vmin #0009)}
.game-control.touch-btn[data-touch=left]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M30 8 12 24l18 16' fill='none' stroke='%23fff3d0' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.game-control.touch-btn[data-touch=right]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M18 8l18 16-18 16' fill='none' stroke='%23fff3d0' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.game-control.touch-btn[data-touch=jump]{background:radial-gradient(circle at 50% 32%,#ffe28a,#f0b43a 55%,#b87418);box-shadow:0 0 0 .4vmin #fff0b8,0 0 0 .8vmin #6a3d0c,0 .9vmin 1.6vmin #0008,inset 0 -.6vmin .8vmin #8a520f88}
.game-control.touch-btn[data-touch=jump]::before{width:50%;height:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 6 8 24h10v16h12V24h10z' fill='%235a3008'/%3E%3C/svg%3E");filter:drop-shadow(0 .2vmin 0 #fff5)}
.game-control.touch-btn[data-touch=slide]::before{width:42%;height:42%;margin-top:-18%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M6 34h30l6-6M10 26l10 6M18 20l8 8' fill='none' stroke='%23fff3d0' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.game-control.touch-btn[data-touch=attack]::before{width:44%;height:44%;margin-top:-18%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23fff3d0'%3E%3Cellipse cx='14' cy='26' rx='7' ry='9'/%3E%3Cellipse cx='26' cy='14' rx='7' ry='9'/%3E%3Cellipse cx='38' cy='14' rx='7' ry='9'/%3E%3Cellipse cx='50' cy='26' rx='7' ry='9'/%3E%3Cpath d='M32 30c-10 0-19 11-19 20 0 7 6 9 11 8 4-1 5-3 8-3s4 2 8 3c5 1 11-1 11-8 0-9-9-20-19-20z'/%3E%3C/g%3E%3C/svg%3E")}
.touch-btn .touch-label{position:absolute;bottom:16%;left:50%;transform:translateX(-50%);font:400 clamp(9px,1.5vmin,15px)/1 Lilita,sans-serif;white-space:nowrap;color:#ffe9b8;text-shadow:0 1px 2px #000a;letter-spacing:.02em}
.game-control.touch-btn.pressed{transform:scale(.92);filter:brightness(1.18)}

/* Full-bleed on phones: the stage uses the whole screen (notch included); HUD/menu keep safe margins in JS. */
:root{--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
html,body,#app{touch-action:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#app{padding:0!important;width:100vw;height:100vh;height:100dvh}
#modal-layer,#modal,.game-panel-box{touch-action:pan-y}
button,a,select,input,label,summary{touch-action:manipulation}
input,select,textarea{font-size:16px!important}
.cinematic-plaque{padding-left:max(4cqw,calc(var(--safe-l) + 12px));padding-right:max(4cqw,calc(var(--safe-r) + 12px));padding-bottom:var(--safe-b)}
#toast{bottom:max(25px,calc(var(--safe-b) + 12px))}