/* Bubbleman World v2 page. Site chrome comes from style.css; this file styles the game stage only. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bmw-hero{padding-block:clamp(28px,5vw,64px) clamp(14px,2.5vw,28px)}
.bmw-hero h1{font-size:clamp(2.4rem,6vw,4.4rem)}
.bmw{--ink:#1d1830;--card:#2e2552;--rim:#6fe3d6;--gold:#ffd66b;--cream:#fff8e7;max-width:1120px;margin:0 auto 64px;color:var(--lav,#f7e5fc)}
.bmw [hidden]{display:none!important}
.bmw button,.bmw select{font:inherit;cursor:pointer;color:inherit}
.bmw :is(button,a,canvas,input,select):focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* toolbar above the stage */
.bmw-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.bmw-nav{display:flex;gap:16px;align-items:center;font-size:.85rem}
.bmw-nav a{color:var(--teal,#6fe3d6);text-decoration:none;padding:10px 0}
.bmw-nav span{border-left:1px solid #fff3;padding-left:16px;color:var(--lav-dim,#cdbbe0)}
.bmw-tools{display:flex;gap:8px}
.bmw-chip{min-height:44px;border:1px solid #ffffff38;background:#ffffff0a;border-radius:999px;padding:8px 18px;font-size:.85rem}
.bmw-chip:hover{background:#ffffff18}

/* the stage: canvas plus DOM overlays */
.bmw-stage{scroll-margin-top:70px;position:relative;background:var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 0 0 2px #2a1f3d,0 0 0 5px #6fe3d633,0 24px 60px #0009;display:flex;flex-direction:column;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.bmw-view{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 150px);min-height:260px}
.bmw-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:var(--ink)}
.bmw-view canvas:focus-visible{outline-offset:-4px}
.bmw-screen,.bmw-sheet{position:absolute;inset:0;z-index:3}
.bmw-screen{pointer-events:none}.bmw-screen>*{pointer-events:auto}

/* shared buttons */
.bmw-panel button,.bmw-mapbar button,.bmw-results button,.bmw-slot button{min-height:48px;border-radius:14px;border:2px solid #2a1f3d;background:#3d3268;padding:10px 18px;font-weight:700;box-shadow:0 3px 0 #2a1f3d;transition:transform .08s,background .15s}
.bmw-panel button:hover,.bmw-mapbar button:hover,.bmw-results button:hover,.bmw-slot button:hover{background:#4a3e7c}
.bmw-panel button:active,.bmw-mapbar button:active,.bmw-results button:active,.bmw-slot button:active{transform:translateY(2px);box-shadow:0 1px 0 #2a1f3d}
.bmw .bmw-primary{background:var(--gold);color:#2a1f3d}.bmw .bmw-primary:hover{background:#ffe08f}
.bmw .bmw-primary:disabled{background:#5a5078;color:#b8aed4;cursor:default}
.bmw .bmw-danger{background:#ff7a8a;color:#2a1f3d}
.bmw-link{background:none!important;border:0!important;box-shadow:none!important;color:var(--teal,#6fe3d6);text-decoration:underline;text-underline-offset:3px;justify-self:start}
.bmw-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bmw-menu{display:grid;gap:10px}
.bmw-menu.bmw-row{display:flex}

/* title: the whole canvas is the start button; the canvas draws the prompt */
.bmw-start{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;color:transparent;font-size:0;cursor:pointer}
.bmw-start:focus-visible{outline:4px solid var(--gold);outline-offset:-8px;border-radius:18px}

/* dialogs and panels over the canvas */
.bmw-panel-wrap{display:grid;place-items:safe center;padding:14px;overflow:auto}
.bmw-sheet{background:#1d183099}
.bmw-screen.bmw-panel-wrap[data-for="slots"]{background:#1d183066}
.bmw-screen[data-for="pause"]{background:#1d183055}
.bmw-panel{width:min(420px,100%);display:grid;gap:12px;padding:22px 24px;background:var(--card);border:3px solid #2a1f3d;border-radius:20px;box-shadow:inset 0 0 0 2px #6fe3d655,0 8px 0 #2a1f3d,0 20px 50px #0008;max-height:100%;overflow:auto}
.bmw-panel.bmw-wide{width:min(600px,100%)}
.bmw-panel h2{margin:0;font:800 1.6rem/1.1 'Bricolage Grotesque',system-ui,sans-serif;color:var(--cream)}
.bmw-over{margin:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rim)}
.bmw-pause-keeps{margin:0;display:flex;align-items:center;gap:6px;color:var(--lav-dim,#cdbbe0);font-size:.9rem}
.bmw-pause-keeps img{width:30px;height:30px;image-rendering:pixelated}

/* save slots */
.bmw-slots{width:min(760px,100%)}
.bmw-slot-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bmw-slot{display:grid;gap:8px;align-content:space-between;padding:14px;border-radius:16px;background:#241c44;border:2px solid #4a3e7c}
.bmw-slot h3{margin:0;font:800 1.05rem 'Bricolage Grotesque',system-ui,sans-serif;color:var(--gold)}
.bmw-slot p{margin:0;font-size:.85rem;line-height:1.5}
.bmw-slot p span{color:var(--lav-dim,#cdbbe0)}
.bmw-slot img{display:inline-block;width:20px;height:20px;vertical-align:-4px;image-rendering:pixelated}
.bmw-slot button{padding:8px 14px;min-height:44px}
.bmw-confirm{font-size:.85rem;font-weight:700;color:#ffc4cc;flex-basis:100%}

/* map bar */
.bmw-mapbar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:12px}
.bmw-mapbar>*{max-width:100%}
.bmw-maphint{margin:0 0 8px;padding:6px 14px;border-radius:999px;background:#1d1830d9;color:var(--cream);font-weight:700;font-size:.95rem;text-align:center}
.bmw-mapbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* results: canvas draws the card, DOM gives the buttons */
.bmw-results{display:flex;align-items:flex-end;justify-content:center;padding:12px}

/* HUD */
.bmw-hud{position:absolute;inset:0 0 auto 0;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;padding:10px 12px;pointer-events:none;font:800 1rem 'Bricolage Grotesque',system-ui,sans-serif;color:var(--cream);text-shadow:0 2px 0 #2a1f3d,0 0 4px #2a1f3d}
.bmw-hud img{image-rendering:pixelated;display:block}
.bmw-hud-left,.bmw-hud-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bmw-hud-right{justify-content:flex-end}
.bmw-hud-left>*,.bmw-hud-mid>span,.bmw-loadout:not(:empty){background:#1d1830b8;border-radius:12px;padding:4px 8px;display:flex;align-items:center;gap:4px}
.bmw-hearts img{width:26px;height:26px}
.bmw-count img{width:22px;height:22px}
.bmw-keeps img{width:24px;height:24px}
.bmw-hud-mid>span{font-size:.85rem;font-weight:700;font-family:Figtree,system-ui,sans-serif;white-space:nowrap;max-width:36vw;overflow:hidden;text-overflow:ellipsis}
.bmw-hud-mid b{color:var(--gold);margin-right:4px}.bmw-hud-mid em{color:var(--rim);font-style:normal;margin-left:6px}
.bmw-pw{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:conic-gradient(#6fe3d6 calc(var(--f,1)*360deg),#ffffff22 0)}
.bmw-pw img{width:26px;height:26px;border-radius:50%;background:#1d1830}
.bmw-pw b{position:absolute;right:-4px;bottom:-6px;font-size:.7rem;background:#2a1f3d;border-radius:6px;padding:0 3px}
.bmw-pw.spent img{opacity:.4}
.bmw-hud-btn{pointer-events:auto;min-width:44px;min-height:44px;border-radius:12px;border:2px solid #2a1f3d;background:#1d1830cc;font-size:.9rem;letter-spacing:-.1em}
.bmw-boss{grid-column:1/-1;justify-self:center;display:grid;gap:4px;justify-items:center;background:#1d1830d0;border-radius:12px;padding:6px 12px;width:min(360px,70%)}
.bmw-boss strong{font-size:.85rem}
.bmw-hint{grid-column:1/-1;justify-self:center;background:#1d1830d0;border-radius:12px;padding:6px 12px;font-size:.9rem;font-weight:700;max-width:min(420px,80%);text-align:center}
.bmw-bossbar{display:block;width:100%;height:12px;border-radius:6px;background:#ffffff22;border:2px solid #2a1f3d;overflow:hidden}
.bmw-bossbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff8f6b,#ffd66b);transition:width .3s}

/* touch controls: a slide pad left, Pipe / Wand / Jump right */
.bmw-touch{display:none;justify-content:space-between;align-items:flex-end;gap:12px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:#241c44;touch-action:none}
.bmw-stage.has-touch:is([data-screen="play"],[data-screen="intro"]) .bmw-touch{display:flex}
.bmw-pad{position:relative;width:170px;height:84px;border-radius:42px;background:#1d1830cc;border:3px solid #6fe3d677;display:grid;place-items:center;touch-action:none;--kx:0px}
.bmw-pad small{font-size:.7rem;color:#cdbbe0;pointer-events:none;margin-top:44px}
.bmw-pad-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,#bff7ea 13% 45%,#6fe3d6 70%);box-shadow:0 3px 0 #2a1f3d;transform:translateX(var(--kx));transition:transform .06s}
.bmw-pad.d .bmw-pad-knob{transform:translate(var(--kx),14px)}
.bmw-tbtns{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:10px;align-items:end}
.bmw-tbtns button{position:relative;display:grid;place-items:center;align-content:center;width:64px;height:64px;border-radius:50%;border:3px solid #2a1f3d;background:#3d3268cc;font-size:1.4rem;line-height:1;box-shadow:0 4px 0 #2a1f3d;touch-action:none}
.bmw-tbtns button small{font-size:.6rem;font-weight:700;margin-top:2px}
.bmw-tbtns button::before{content:'';position:absolute;inset:-8px}
.bmw-tbtns button.on{transform:translateY(3px);box-shadow:0 1px 0 #2a1f3d;background:#6fe3d6;color:#2a1f3d}
.bmw-t-pipe{grid-column:1;grid-row:1}.bmw-t-wand{grid-column:1;grid-row:2}
.bmw .bmw-t-jump{grid-column:2;grid-row:1/3;width:92px;height:92px;background:#ffd66bdd;color:#2a1f3d;font-size:1.8rem}

/* phones while playing, and the full-screen fallback: the stage takes the whole viewport */
@media (max-width:900px),(max-height:520px){
  body.bmw-playing .bmw-stage{position:fixed;inset:0;z-index:1000;border-radius:0;height:100vh;height:100dvh}
  body.bmw-playing{overflow:hidden}
  body.bmw-playing>header,body.bmw-playing>.skip{display:none}
}
html.bmw-lock body>header{display:none}
.bmw-stage.bmw-fill,.bmw-stage:fullscreen{position:fixed;inset:0;z-index:1000;border-radius:0;height:100vh;height:100dvh;width:100vw}
.bmw-stage:-webkit-full-screen{width:100vw;height:100vh}
html.bmw-lock,html.bmw-lock body{overflow:hidden}
.bmw-stage.bmw-fill .bmw-view,.bmw-stage:fullscreen .bmw-view{flex:1;aspect-ratio:auto;max-height:none}
@media (max-width:900px),(max-height:520px){body.bmw-playing .bmw-view{flex:1;aspect-ratio:auto;max-height:none;min-height:0}}
/* portrait: controls sit under the picture */
@media (orientation:portrait){
  body.bmw-playing .bmw-stage .bmw-view,.bmw-stage.bmw-fill .bmw-view{flex:0 1 auto;height:min(100vw,calc(100dvh - 190px))}
  body.bmw-playing .bmw-stage.has-touch,.bmw-stage.bmw-fill.has-touch{justify-content:flex-start}
  body.bmw-playing .bmw-touch{flex:1;align-items:center}
}
/* landscape phones and full screen: controls float over the picture's bottom corners */
@media (orientation:landscape){
  body.bmw-playing .bmw-touch,.bmw-stage.bmw-fill .bmw-touch,.bmw-stage:fullscreen .bmw-touch{position:absolute;inset:auto 0 0 0;z-index:4;background:none;padding:10px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));pointer-events:none}
  .bmw-touch>*{pointer-events:auto}
  body.bmw-playing .bmw-pad,.bmw-stage.bmw-fill .bmw-pad{opacity:.85}
}
/* a small screen that isn't playing yet: a taller picture so the menus fit */
@media (max-width:600px){.bmw-view{aspect-ratio:4/5;max-height:calc(100vh - 120px)}.bmw-slot-list{grid-template-columns:1fr}.bmw-hud-mid{display:none}.bmw-hud{grid-template-columns:1fr auto}}
@media (max-height:520px) and (orientation:landscape){.bmw-view{aspect-ratio:auto;height:calc(100vh - 70px)}.bmw-slot-list{grid-template-columns:repeat(3,1fr)}.bmw-slot p{font-size:.78rem}.bmw-panel{padding:14px 16px;gap:8px}.bmw-hud{padding:6px 10px}.bmw-hearts img{width:22px;height:22px}}

/* settings */
.bmw-range,.bmw-check{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.95rem;min-height:44px}
.bmw-range input{flex:1;min-width:140px;accent-color:var(--rim);height:32px}
.bmw-range output{min-width:3.2em;text-align:right;color:var(--gold);font-weight:700}
.bmw-check input{width:22px;height:22px;accent-color:var(--rim)}
.bmw-check small{flex-basis:100%;color:var(--lav-dim,#cdbbe0);font-size:.8rem;margin-top:-6px}
.bmw-check select{min-height:44px;border-radius:12px;background:#241c44;border:2px solid #4a3e7c;padding:6px 10px}
.bmw-keys{width:100%;border-collapse:collapse;font-size:.9rem}
.bmw-keys th,.bmw-keys td{padding:6px 4px;border-bottom:1px solid #ffffff18;text-align:left}
.bmw-keys thead th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rim)}
.bmw-keys kbd{display:inline-block;min-width:1.8em;padding:1px 6px;margin:1px;border-radius:6px;background:#1d1830;border:1px solid #6a5a9e;font:600 .8rem Figtree,system-ui,sans-serif;text-align:center}
.bmw-keys button{min-height:40px!important;padding:6px 12px!important;font-size:.8rem}
.bmw-note{margin:0;font-size:.82rem;color:var(--lav-dim,#cdbbe0);line-height:1.5}

/* below the stage: the stage list (screen-reader map) and how to play */
.bmw-below{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(20px,4vw,48px);margin-top:36px}
.bmw-below h2{font-size:1.4rem;margin:0 0 8px}.bmw-below h2 small{font:500 .85rem Figtree,sans-serif;color:var(--teal,#6fe3d6);margin-left:10px}
.bmw-below p{font-size:.92rem;color:var(--lav-dim,#cdbbe0);line-height:1.6;margin:0 0 12px}
.bmw-below b{color:var(--lav,#f7e5fc)}
.bmw-stage-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px}
.bmw-stage-list button{width:100%;min-height:52px;display:grid;grid-template-columns:3.2em 1fr auto;gap:12px;align-items:center;text-align:left;padding:8px 14px;border-radius:14px;border:1px solid #ffffff24;background:#ffffff08}
.bmw-stage-list button:hover:not(:disabled){background:#ffffff14;border-color:var(--teal,#6fe3d6)}
.bmw-stage-list button:disabled{opacity:.5;cursor:default}
.bmw-sl-id{font:800 1rem 'Bricolage Grotesque',system-ui,sans-serif;color:var(--gold)}
.bmw-sl-name{display:grid;font-weight:600}.bmw-sl-name small{font-weight:400;font-size:.78rem;color:var(--lav-dim,#cdbbe0)}
.bmw-sl-rec{font-size:.78rem;color:var(--teal,#6fe3d6);text-align:right}
@media (max-width:760px){.bmw-below{grid-template-columns:1fr}.bmw-stage-list button{grid-template-columns:2.8em 1fr}.bmw-sl-rec{grid-column:2;text-align:left}}
@media (prefers-reduced-motion:reduce){.bmw *{transition:none!important}}
.bmw-bars{display:block;width:14px;height:16px;margin:auto;border-inline:5px solid currentColor}
@media (max-width:600px){.bmw-stage[data-screen="map"] .bmw-view{aspect-ratio:20/21}.bmw-mapbtns{flex-wrap:nowrap;gap:6px}.bmw-mapbtns button{padding:8px 12px;font-size:.9rem}.bmw-maphint{font-size:.85rem}}
@media (max-height:520px) and (orientation:landscape){.bmw-slot{padding:10px}.bmw-slot h3{font-size:.95rem}.bmw-panel h2{font-size:1.25rem}}