/* Bamblewick — follows the PlayDapple design language: warm paper, forest green, terracotta accents,
   small-caps eyebrows, soft rounded panels, Georgia italics for notes. Depends only on ../../styles.css
   (and ../../mini-mode.css for the pop-out window). */
.ph-page{padding-top:28px;padding-bottom:60px;max-width:1100px}
.ph-page.frame-large{max-width:1360px}
.frame-large .ph-stage{grid-template-columns:minmax(0,1fr) 280px}.frame-large .ph-canvas-wrap{width:min(100%,960px)}
.ph-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0}
.ph-heading h1{font-size:clamp(38px,6vw,60px);letter-spacing:-2px;margin:12px 0}
.game-subtitle{font-size:14px;font-weight:700;letter-spacing:2px;color:#4e6047;margin:0 0 10px}
.bamblewick-row>div{min-width:0}.bamblewick-row h3{overflow-wrap:anywhere}
.ph-heading p:last-child{color:#4e6047;line-height:1.7}
.ph-badge{font-size:11px;border:1px solid #bdc9b3;border-radius:30px;padding:10px 14px;white-space:nowrap;color:#4e6047}

.ph-panel{border:1px solid #c9d3bc;border-radius:18px;overflow:hidden;background:#fbfaf3;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 15px 40px #263e2e08}
.ph-hud{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 16px;padding:16px 24px;background:#eff1e4;color:#4e6047;font-size:10px;letter-spacing:1.5px}
.ph-hud strong{display:block;font-size:17px;letter-spacing:0;margin-top:5px;color:#244d3d;white-space:nowrap}
.ph-hud #hud-time-wrap{min-width:48px}.ph-hud #hud-time-wrap.urgent strong{color:#b64e3f;animation:clock-pulse .8s ease-in-out infinite}
@keyframes clock-pulse{50%{transform:scale(1.08);text-shadow:0 0 10px #e8926d88}}
.ph-stage{display:grid;grid-template-columns:minmax(0,1fr) 260px}
.ph-scene{background:#dde8df;padding:18px;display:flex;justify-content:center;align-items:flex-start}
.ph-canvas-wrap{--ph-aspect:800 / 448;position:relative;width:min(100%,800px);aspect-ratio:var(--ph-aspect);border:6px solid #58705a;border-radius:14px;overflow:hidden;background:#cfe3df;box-shadow:0 8px 14px #1b382720}
.ph-canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-4px!important}
.ph-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#eef3df8c;padding:14px;overflow:auto}
.ph-overlay[hidden]{display:none}
.ph-overlay>div{background:#fbfaf3f5;text-align:center;width:min(100%,430px);max-height:100%;overflow:auto;border:1px solid #cad4bd;border-radius:15px;padding:22px;box-shadow:0 8px 35px #244d3d15}
.ph-overlay h2{font-size:28px;margin:10px 0;letter-spacing:-.8px}
.ph-overlay p{font-size:13px;line-height:1.6;color:#4e6047;margin-bottom:14px}
.ph-overlay .eyebrow{color:#4e6047}
.ph-overlay .fine{font-size:11px;color:#68725f;margin:12px 0 0}
.btn-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn-row.col{flex-direction:column;align-items:stretch}
.ph-overlay .button{gap:10px;padding:13px 20px;min-height:46px}
.ph-overlay .button.secondary{background:transparent;border-color:#b9c3ac;color:#244d3d}
.ph-overlay .button.secondary:hover{background:#e6e9da}
.bamblewick-hero{display:flex;justify-content:center;margin-bottom:2px}
.bamblewick-hero canvas{width:88px;height:88px;animation:ph-bob 2.4s ease-in-out infinite}
@keyframes ph-bob{50%{transform:translateY(-6px)}}
.tip-line{font-size:12px!important;line-height:1.6;color:#4e6047;background:#f1eadb;border-radius:9px;padding:10px 12px;text-align:left}
.tip-line strong{color:#244d3d}
.kbd-row{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:11px;color:#4e6047}
.kbd-row kbd{margin-right:3px}
.goals{list-style:none;margin:0 0 16px;padding:0;text-align:left;display:grid;gap:8px}
.goals li{display:flex;align-items:center;gap:10px;font-size:13px;color:#244d3d}
.goals svg{width:26px;height:26px;flex-shrink:0}
.goals.small{margin:12px 0 0;gap:7px}
.goals.small li{font-size:12px;color:#4e6047;gap:8px}
.goals.small i{width:14px;height:14px;border-radius:50%;border:2px solid #bdc9b3;flex-shrink:0;background:#fbfaf3}
.goals.small li.got i{background:#5f7f56;border-color:#5f7f56;box-shadow:inset 0 0 0 2px #fbfaf3}
.goals.small li.got span{color:#244d3d;font-weight:600}

/* stage map */
.ph-overlay.map{place-items:start center;padding:10px}
.ph-overlay.map>div{width:100%;max-width:none;background:#fbfaf3f7;padding:16px 18px}
.map-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:left;margin-bottom:8px}.map-head h2{margin:4px 0 2px;font-size:22px}.map-head p{margin:0;font-size:12px}.map-head .button{min-height:40px!important;padding:9px 14px!important;white-space:nowrap}
.map-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:left}
.map-world{border:1px solid #dcdfcf;border-radius:12px;background:#faf9f3;overflow:hidden}
.ph-canvas-wrap .map-thumb{display:block;width:100%;height:52px;object-fit:cover;object-position:center 70%;background:#dde8df}
.map-name{padding:6px 10px 0}.map-name small{display:block;font-size:9px;letter-spacing:1.4px;color:#68725f}.map-name strong{font-size:14px;letter-spacing:-.2px;color:#244d3d}
.map-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:6px 10px 10px}
.stage-pill{border:1px solid #b8c7ac;border-radius:8px;background:#eff1e4;color:#244d3d;padding:4px 0;min-height:42px;line-height:1.1}
.stage-pill b{display:block;font-size:14px}.stage-pill i{display:block;font-style:normal;font-size:7px;letter-spacing:1px;color:#c08a2c;margin-top:3px}
.stage-pill:hover:not(:disabled){background:#e3e8d5}
.stage-pill.done{background:#dce7cc;border-color:#8fa680}
.stage-pill.boss b{color:#c86a43}
.stage-pill:disabled{opacity:.42}

/* clear, victory */
.star-row{display:flex;justify-content:center;gap:6px;margin:6px 0 4px}
.star-row svg{width:46px;height:46px;animation:ph-star .5s calc(var(--i)*.35s + .15s) cubic-bezier(.2,.9,.3,1.4) both}
@keyframes ph-star{from{opacity:0;transform:scale(0) rotate(-40deg)}to{opacity:1;transform:none}}
.tier-note{font-family:Georgia,serif;font-style:italic;font-size:14px!important;color:#77602b!important}
.time-bonus{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:5px 0 12px;padding:9px 12px;border-radius:10px;background:linear-gradient(100deg,#f8e9b7,#fff8dc);border:1px solid #dfc46d;color:#77602b;font-size:9px;letter-spacing:1.1px;text-align:left}.time-bonus strong{color:#a55b2e;font-size:15px;letter-spacing:0;animation:bonus-pop .65s 1.25s cubic-bezier(.2,.9,.3,1.4) both}@keyframes bonus-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.stage-clock-note{display:inline-flex;align-items:center;gap:9px;border:1px solid #d9c992;border-radius:999px;padding:6px 12px;background:#fff9df;color:#77602b!important;font-size:9px!important;letter-spacing:1.3px;margin:-2px 0 10px!important}.stage-clock-note strong{font-size:15px;letter-spacing:0;color:#244d3d}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left;margin:4px 0 16px}
.stat-grid span{font-size:9px;letter-spacing:1.3px;color:#4e6047;background:#f1eadb;border-radius:9px;padding:9px 11px}
.stat-grid strong{display:block;font-size:17px;letter-spacing:0;color:#244d3d;margin-top:4px}
.celebrating.ph-overlay>div{border:2px solid #d7b669;background:#fffaf0f5;box-shadow:0 0 0 7px #f7dc963d,0 15px 50px #665b3025;animation:celebration-card .75s cubic-bezier(.18,.89,.32,1.28) both}
.celebrating .eyebrow{color:#77602b!important}
.celebrating.ph-overlay{background:radial-gradient(circle at 50% 45%,#fff9d8e8 0,#eef3dfdc 42%,#d5e4cec9 100%);animation:celebration-glow 2.4s ease-in-out infinite alternate}
.celebrating.ph-overlay>div{position:relative;overflow:hidden}
.celebration-sky{height:52px;position:relative;margin:-5px 0 5px;pointer-events:none}
.celebration-sky i{position:absolute;bottom:0;width:13px;height:22px;border-radius:6px 6px 9px 9px;background:#e99864;border:2px solid #9b6849;box-shadow:inset 0 0 0 3px #ffd890,0 0 14px #efc66c88;animation:lantern-rise 3.8s ease-in-out infinite}
.celebration-sky i:nth-child(1){left:8%;animation-delay:-.4s}.celebration-sky i:nth-child(2){left:27%;animation-delay:-1.8s}.celebration-sky i:nth-child(3){left:48%;animation-delay:-2.7s}.celebration-sky i:nth-child(4){left:69%;animation-delay:-1.1s}.celebration-sky i:nth-child(5){left:88%;animation-delay:-3.3s}
.celebration-sky b{position:absolute;color:#d6a43d;font-size:19px;animation:sparkle-soft 1.8s ease-in-out infinite}.celebration-sky b:nth-of-type(1){left:18%;top:4px}.celebration-sky b:nth-of-type(2){left:51%;top:0;animation-delay:-.7s}.celebration-sky b:nth-of-type(3){right:17%;top:9px;animation-delay:-1.2s}
.celebration-sky em{--h:42;position:absolute;left:var(--x);top:-12px;width:7px;height:12px;border-radius:2px;background:hsl(var(--h) 70% 58%);transform:rotate(var(--r));animation:confetti-fall 2.4s var(--d) cubic-bezier(.2,.65,.45,1) infinite}.celebration-sky em:nth-of-type(3n){--h:145;width:5px;height:9px}.celebration-sky em:nth-of-type(3n+1){--h:13;border-radius:50%}.celebration-sky em:nth-of-type(4n){animation-duration:3.1s}
.celebration-burst{position:absolute;inset:0;overflow:hidden;pointer-events:none}.celebration-burst span{position:absolute;left:50%;top:42%;width:420px;height:420px;margin:-210px;border-radius:50%;opacity:.3;background:repeating-conic-gradient(from 0deg,#edbd4d 0 5deg,transparent 5deg 18deg);animation:burst-turn 18s linear infinite}
.celebration-sky.grand{height:68px}.home-line{font-family:Georgia,serif;font-style:italic;color:#77602b!important;font-size:15px!important}
@keyframes celebration-card{from{opacity:0;transform:translateY(28px) scale(.88)}to{opacity:1;transform:none}}
@keyframes celebration-glow{to{background-color:#fff4b52b}}
@keyframes confetti-fall{0%{opacity:0;transform:translateY(-8px) rotate(var(--r))}12%{opacity:1}100%{opacity:0;transform:translateY(82px) rotate(calc(var(--r) + 320deg))}}
@keyframes burst-turn{to{transform:rotate(360deg)}}
@keyframes lantern-rise{0%,100%{transform:translateY(8px) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes sparkle-soft{0%,100%{opacity:.3;transform:scale(.75)}50%{opacity:1;transform:scale(1.2)}}
@media(prefers-reduced-motion:reduce){.celebration-sky i,.celebration-sky b,.celebration-sky em,.celebration-burst span,.celebrating.ph-overlay,.celebrating.ph-overlay>div,.ph-hud #hud-time-wrap.urgent strong,.time-bonus strong{animation:none}}
/* Results must fit inside the board—no hidden action row or card scrolling. */
.celebrating.ph-overlay{padding:8px}.celebrating.ph-overlay>div{padding:12px 16px;overflow:hidden}.celebrating .celebration-sky{height:34px;margin:-4px 0 1px}.celebrating .celebration-sky.grand{height:42px}.celebrating.ph-overlay h2{font-size:24px;margin:3px 0}.celebrating .star-row{margin:1px 0}.celebrating .star-row svg{width:36px;height:36px}.celebrating .tier-note{margin:2px 0 5px!important;line-height:1.3}.celebrating .time-bonus{margin:3px 0 7px;padding:6px 10px}.celebrating .stat-grid{gap:5px;margin:2px 0 8px}.celebrating .stat-grid span{padding:5px 9px}.celebrating .stat-grid strong{font-size:14px;margin-top:2px}.celebrating .btn-row{gap:6px;margin-top:2px}.celebrating .button{min-height:38px;padding:8px 12px;font-size:11px}
.lantern-list{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;text-align:left;font-size:12px;color:#4e6047}
.lantern-list li::before{content:"";display:inline-block;width:9px;height:12px;border-radius:5px;background:#f2a24d;box-shadow:0 0 8px #ffb46a;margin-right:8px;vertical-align:-1px}

/* side cards */
.ph-side{background:#f3f2e6;border-left:1px solid #dfe1d0;padding:18px;display:flex;flex-direction:column;gap:14px}
.side-card{background:#fbfaf3;border:1px solid #dcdfcf;border-radius:12px;padding:14px 16px}
.side-card .eyebrow{font-size:9px;color:#4e6047;letter-spacing:1.5px}
.side-card h3{font-size:19px;letter-spacing:-.4px;margin-top:6px}
.side-card p:not(.eyebrow){font-size:12px;line-height:1.6;color:#4e6047;margin-top:8px}
.bamblewick-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.bamblewick-row canvas{width:56px;height:56px;border-radius:14px;background:#e3ebe2;flex-shrink:0}
.bamblewick-row h3{margin:0}
.lantern-count{float:right;font-weight:400;letter-spacing:0;font-size:10px;color:#68725f}
.lanterns{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.lanterns li{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;color:#8a9081}
.lanterns i{display:block;width:14px;height:20px;border-radius:7px;background:#dcdfcf;border:1px solid #c4c9b4}
.lanterns li.lit i{background:#f2a24d;border-color:#c86a43;box-shadow:0 0 10px #ffb46a}
.lanterns li.lit{color:#c86a43;font-weight:700}

/* bottom bar */
.ph-bottom{padding:16px 24px 20px;border-top:1px solid #dfe1d0}
.ph-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ph-actions button{border:1px solid #b8c7ac;border-radius:7px;min-height:44px;background:#eff1e4;color:#244d3d;padding:10px 18px;font-size:13px}
.ph-actions button:hover:not(:disabled){background:#e3e8d5}
.ph-actions button[aria-pressed="true"]{background:#dce7cc;border-color:#8fa680}
.ph-actions span{margin-left:auto;font-size:12px;color:#4e6047}
#mobile-fullscreen{display:none}
.ph-touch{display:none;align-items:center;justify-content:space-between;gap:18px;max-width:520px;margin:16px auto 0}
.ph-touch .pad{display:grid;grid-template-columns:repeat(3,62px);gap:8px}
.ph-touch .acts{display:flex;gap:10px;align-items:flex-end}
.ph-touch button{min-width:0;border:1px solid #9eaf90;border-bottom:3px solid #9eaf90;border-radius:14px;background:#dce7cc;color:#244d3d;font-size:22px;touch-action:none;min-height:62px}
.ph-touch .run-button{width:78px;min-height:78px;font-size:15px;background:#f3d8b8;border-color:#cba984}
.ph-touch .jump-button{width:96px;min-height:96px;font-size:17px;font-weight:600;background:#f3d8b8;border-color:#cba984}
.ph-touch small{display:block;font-size:10px;margin-top:2px}
.ph-touch button.held{background:#b9ceaa;border-bottom-width:1px}
.ph-touch .run-button.held,.ph-touch .jump-button.held{background:#ecc28e}
.ph-touch button:focus-visible{outline:3px solid #9b5233;outline-offset:2px}
#status{font-size:13px;color:#244d3d;margin:14px 0 8px;min-height:20px}
#ph-help{font-size:12px;line-height:1.7;color:#4e6047}
.ph-save{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:#4e6047}
.ph-save label{display:flex;align-items:center;gap:8px;min-height:32px}
.ph-save input{width:18px;height:18px;accent-color:#254d3b}
.ph-save button{border:1px solid #c9d0bd;background:transparent;border-radius:6px;padding:8px 12px;font-size:11px;color:#6a745f}
.ph-save button:hover{background:#eef0e2}

/* notes and world list */
.ph-notes{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:40px}
.ph-notes h2{font-size:24px;margin:14px 0}
.ph-notes p:not(.eyebrow){font-size:14px;line-height:1.8;color:#4e6047}
.ph-notes .eyebrow{color:#4e6047}
.ph-worlds-section{margin-top:56px}
.world-grid{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.world-grid li{border:1px solid #e0e0d5;border-radius:12px;background:#faf9f3;overflow:hidden}
.world-grid li>canvas{display:block;width:100%;height:auto;aspect-ratio:240/134}
.world-grid li>div{padding:14px 16px 16px}
.world-grid small{display:block;font-size:9px;letter-spacing:1.4px;color:#84907b}
.world-grid strong{display:block;font-size:19px;letter-spacing:-.4px;margin-top:6px}
.world-grid p{font-size:12px;line-height:1.7;color:#4e6047;margin-top:8px;min-height:60px}
.boss-tag{display:flex;align-items:center;gap:8px;font-size:11px;color:#4e6047;margin-top:10px;border-top:1px solid #e8e8dc;padding-top:10px}
.boss-tag canvas{width:34px;height:34px}

/* pop-out window */
.mini-game .ph-side,.mini-game .ph-notes,.mini-game #ph-help,.mini-game .ph-actions span{display:none}
.mini-game .ph-stage{grid-template-columns:1fr}
.mini-game .ph-scene{padding:8px}
.mini-game .ph-canvas-wrap{border-width:4px;border-radius:10px}
.mini-game .ph-hud{padding:8px 12px;font-size:8px;gap:8px}.mini-game .ph-hud strong{font-size:13px;margin-top:2px}
.mini-game .ph-bottom{padding:8px 10px 10px}
.mini-game .ph-touch{display:flex}
.mini-game .ph-actions button{min-height:38px;padding:6px 10px;font-size:11px}
.mini-game .ph-panel{border-radius:12px}

/* narrower screens */
@media(max-width:980px){
.frame-large .ph-stage{grid-template-columns:1fr}.frame-large .ph-canvas-wrap{width:min(100%,960px)}
.ph-stage{grid-template-columns:1fr}
.ph-side{border-left:0;border-top:1px solid #dfe1d0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ph-side #lantern-card{grid-column:1/-1}
.map-grid{grid-template-columns:repeat(2,1fr)}
.world-grid{grid-template-columns:repeat(2,1fr)}
/* Phones and tablets: controls sit right under the board, the info cards go last. */
.ph-panel{display:flex;flex-direction:column}
.ph-stage,.ph-bottom{display:contents}
.ph-touch{display:flex}.ph-scene{order:1}.ph-touch{order:2;width:calc(100% - 32px);margin:14px 16px 0}
.ph-actions{order:3;margin:14px 16px 0}#status{order:4;margin:12px 16px 0}#ph-help{order:5;margin:0 16px}.ph-save{order:6;margin:12px 16px 16px}
.ph-side{order:7}
}
@media(pointer:coarse){.ph-touch{display:flex}#mobile-fullscreen{display:inline-flex}}
@media(max-width:700px){
.ph-heading{display:block}.ph-badge{display:inline-block;margin:0 0 10px}
.ph-hud{padding:12px;font-size:8px;letter-spacing:.7px;gap:8px 10px}.ph-hud strong{font-size:13px}
.ph-scene{padding:10px}
.ph-canvas-wrap{border-width:4px;border-radius:12px}
.ph-overlay{padding:8px}.ph-overlay>div{padding:14px}
.ph-overlay h2{font-size:22px;margin:4px 0}.ph-overlay p{font-size:12px;margin-bottom:8px}.ph-overlay .eyebrow{font-size:8px}
.bamblewick-hero canvas{width:56px;height:56px}
.kbd-row{display:none}
.ph-overlay .button{padding:11px 14px;font-size:12px}
.star-row svg{width:34px;height:34px}.stat-grid strong{font-size:14px}.stat-grid span{padding:7px 9px}
.goals{gap:5px;margin-bottom:10px}.goals li{font-size:12px}.goals svg{width:22px;height:22px}
.map-grid{grid-template-columns:repeat(2,1fr);gap:8px}.map-name strong{font-size:12px}.map-stages{padding:6px}.stage-pill{min-height:40px}
.ph-side{grid-template-columns:1fr;padding:12px}
.ph-touch{width:calc(100% - 24px);margin:12px 12px 0}.ph-actions{margin:12px 12px 0}#status{margin:10px 12px 0}#ph-help{margin:0 12px}.ph-save{margin:12px 12px 14px}
.ph-actions span{display:none}.ph-actions button{padding:10px 12px;font-size:12px;flex:1 1 auto}
.ph-notes{grid-template-columns:1fr;gap:26px}
.world-grid{grid-template-columns:1fr}
.ph-touch{gap:10px}.ph-touch .pad{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex:1 1 0;min-width:0;max-width:170px}.ph-touch button{min-height:52px}
.ph-touch .acts{flex:1 1 0;min-width:0;max-width:170px;gap:8px;justify-content:flex-end}
.ph-touch .run-button{flex:1 1 0;min-width:0;width:auto;max-width:74px;min-height:66px;font-size:14px}.ph-touch .jump-button{flex:1.25 1 0;min-width:0;width:auto;max-width:92px;min-height:80px;font-size:15px}
}
@media(max-width:360px){.ph-touch{gap:8px}.ph-touch .pad{flex:0 0 140px;gap:4px}.ph-touch .acts{gap:4px}.ph-touch button{font-size:18px;min-width:44px}.ph-touch .run-button{font-size:12px;min-height:60px;min-width:44px}.ph-touch .jump-button{font-size:13px;min-height:72px;min-width:44px}}
/* Mobile landscape game mode. The board and controls fit one viewport without page scrolling. */
#game-panel:fullscreen{width:100vw;height:100dvh;max-width:none;border:0;border-radius:0;margin:0;background:#dce7df;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
#game-panel:fullscreen .ph-hud{padding:5px max(10px,env(safe-area-inset-right)) 5px max(10px,env(safe-area-inset-left));font-size:7px;gap:5px 12px;min-height:40px;align-content:center}
#game-panel:fullscreen .ph-hud strong{font-size:12px;margin-top:1px}
#game-panel:fullscreen .ph-stage{display:grid!important;grid-template-columns:1fr;min-height:0;height:100%}
#game-panel:fullscreen .ph-scene{display:flex!important;padding:0;height:100%;min-height:0;align-items:center;background:#1f352b}
#game-panel:fullscreen .ph-canvas-wrap{height:100%;width:auto;max-width:100vw;max-height:calc(100dvh - 40px);aspect-ratio:800/448;border-width:0;border-radius:0;box-shadow:none}
#game-panel:fullscreen .ph-side{display:none}
#game-panel:fullscreen .ph-bottom{display:block!important;position:absolute;inset:0;pointer-events:none;padding:0}
#game-panel:fullscreen .ph-touch{display:flex!important;position:absolute;z-index:8;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));width:auto;max-width:none;margin:0;pointer-events:none}
#game-panel:fullscreen .ph-touch button{pointer-events:auto;background:#edf3e2dc;box-shadow:0 3px 10px #14251b55}
#game-panel:fullscreen .ph-touch .pad{max-width:190px}#game-panel:fullscreen .ph-touch .acts{max-width:190px}
#game-panel:fullscreen .ph-actions{position:absolute;z-index:9;right:max(8px,env(safe-area-inset-right));top:45px;margin:0;pointer-events:auto;background:#f7f5edcc;border-radius:8px;padding:4px}
#game-panel:fullscreen .ph-actions button{display:none;padding:6px 8px;min-height:32px;font-size:10px}#game-panel:fullscreen .ph-actions #mobile-fullscreen,#game-panel:fullscreen[data-state="playing"] .ph-actions #toggle,#game-panel:fullscreen[data-state="paused"] .ph-actions #toggle{display:inline-flex}
#game-panel:fullscreen .ph-actions span,#game-panel:fullscreen #status,#game-panel:fullscreen #ph-help,#game-panel:fullscreen .ph-save{display:none}
#game-panel:fullscreen .ph-overlay{padding:5px}#game-panel:fullscreen .ph-overlay>div{max-width:420px}
#game-panel:fullscreen:not([data-state="playing"]) .ph-touch{display:none!important}
@media(orientation:portrait) and (pointer:coarse){#game-panel:fullscreen::after{content:"Turn your phone sideways";position:absolute;z-index:20;inset:0;display:grid;place-items:center;background:#1f352bf2;color:#fff8de;font:600 20px/1.4 Georgia,serif;letter-spacing:.3px;text-align:center;padding:30px}}
@media(min-width:701px) and (max-width:1180px){
.ph-overlay>div{padding:16px}.ph-overlay h2{font-size:24px;margin:4px 0}.ph-overlay p{margin-bottom:8px}
.star-row svg{width:36px;height:36px}.stat-grid{grid-template-columns:repeat(4,1fr)}.stat-grid span{padding:6px 8px}.stat-grid strong{font-size:14px}
.goals{gap:5px;margin-bottom:10px}.ph-overlay .button{padding:10px 16px;min-height:40px}
}
@media(prefers-reduced-motion:reduce){.bamblewick-hero canvas{animation:none}.star-row svg{animation:none}}