/* Pineapple Jump — styles. The offline build (build.py) inlines this file and the font into dist/pineapple-jump.html. */
:root{color-scheme:dark;--ink:#09172f;--muted:#aebddc;--yellow:#ffda72;--green:#64efb9}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#183461,#050b1c 75%);color:#f3f7ff;font-family:system-ui,sans-serif;min-height:100vh;padding:24px}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}button{border:1px solid #435779;border-radius:10px;background:#142646;color:inherit;padding:13px 20px;font-weight:750}button:hover:not(:disabled){background:#263c64;transform:translateY(-1px)}.primary{background:var(--yellow);border-color:var(--yellow);color:#172239;box-shadow:0 4px 0 #aa792a}.primary:hover:not(:disabled){background:#ffe7a2}.cabinet{max-width:1160px;margin:auto;padding:20px;background:linear-gradient(135deg,#437bf0,#224cbb 60%,#152e79);border:2px solid #638bdf;border-radius:30px;box-shadow:0 16px 0 #0b1a49,0 30px 90px #0008,inset 0 0 0 6px #ffffff08}.brandbar{display:flex;justify-content:space-between;align-items:center;padding:0 12px 18px;gap:20px}.micro{font:700 11px ui-monospace,monospace;letter-spacing:2px;text-transform:uppercase}.lights{display:flex;gap:9px;align-items:center}.dot{width:8px;height:8px;border-radius:50%;background:#6df6b3;box-shadow:0 0 12px #6df6b3}.brand{text-align:right;font:bold 20px ui-monospace,monospace;letter-spacing:3px}.brand small{display:block;font-size:9px;margin-top:5px;letter-spacing:2px}.screen{position:relative;min-height:640px;border:10px solid #0b1639;border-radius:18px;background:#0b1730;overflow:hidden;box-shadow:0 0 0 2px #102660,inset 0 0 30px #0007}.view{min-height:620px;padding:42px 54px;position:relative}.hidden{display:none!important}.eyebrow{color:var(--yellow);font:700 11px ui-monospace,monospace;letter-spacing:2px;text-transform:uppercase}h1{font-size:clamp(48px,7vw,88px);line-height:.96;letter-spacing:-4px;margin:20px 0 24px;font-weight:900}h1 span{color:var(--yellow)}h2{font-size:32px;letter-spacing:-1px;margin:15px 0 10px}p{line-height:1.7;color:var(--muted)}.hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;min-height:530px;gap:20px}.hero p{max-width:390px}.hero-art{position:relative;text-align:center}.hero-art:before{content:'';position:absolute;inset:12% 1% 4%;background:#7ae7c71b;border:1px solid #88efcc33;border-radius:50%}.hero-art img{position:relative;width:100%;filter:drop-shadow(0 15px 20px #0005);animation:bob 3s ease-in-out infinite}.tag{display:inline-block;border:1px solid #487480;border-radius:30px;background:#173c46;padding:8px 14px;color:#99e0d1;font:12px ui-monospace,monospace}.hero-bg{background:radial-gradient(ellipse at 90% 40%,#244b59,transparent 60%),linear-gradient(145deg,#112344,#0a172d)}.hero-footer{display:flex;gap:24px;padding-top:23px;border-top:1px solid #ffffff18;color:#aebddc;font:11px ui-monospace,monospace}.steps{display:flex;gap:8px;margin-bottom:32px}.step{height:4px;flex:1;background:#243658}.step.active{background:var(--yellow)}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}.level{text-align:left;padding:16px}.level strong{font-size:24px;display:block}.level small{display:block;color:var(--muted);margin-top:7px}.selected{border-color:var(--yellow)!important;background:#34372e!important;box-shadow:inset 0 0 0 1px var(--yellow)}.upload{display:block;text-align:center;border:1px dashed #6f86ab;border-radius:12px;padding:19px;background:#13213a;cursor:pointer}.upload.over{border-color:var(--yellow);background:#303d4a}.upload input{max-width:100%;margin-top:12px;font-size:12px}.note{font-size:12px;color:var(--muted);margin-top:9px}.error{color:#ff9eaf}.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:25px}.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:30px 0}.cat{padding:10px 5px;position:relative}.cat img{width:100%;height:130px;object-fit:contain}.cat strong,.cat small{display:block}.cat small{font-size:11px;margin:8px 0;color:var(--muted)}.locked img{filter:brightness(.15) grayscale(1)!important}.ready{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.ready img{width:100%;max-height:310px;object-fit:contain}.summary{border:1px solid #354561;background:#12223b;border-radius:15px;padding:25px}.summary p{margin:8px 0}kbd{display:inline-block;padding:4px 8px;background:#243855;border:1px solid #61708b;border-bottom-width:3px;border-radius:5px;font:12px monospace;color:white}.gameview{padding:0;min-height:0}.game-top{display:flex;align-items:center;justify-content:space-between;padding:18px 25px;background:#101e37;gap:20px}.game-top h2{margin:5px 0 0;font-size:clamp(19px,3vw,30px);overflow-wrap:anywhere}.game-top .eyebrow{font-size:9px}.game-top button{padding:9px 13px}.arena{position:relative;aspect-ratio:960/480;background:#7cbacb;overflow:hidden}canvas{display:block;width:100%;height:100%}.feedback{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:#0b203bea;border:1px solid #658795;border-radius:10px;padding:10px 18px;text-align:center;font-weight:750;max-width:92%;width:max-content;pointer-events:none}.hud{display:grid;grid-template-columns:repeat(5,1fr);padding:20px 24px;gap:8px;background:#101e37}.stat{font:10px ui-monospace,monospace;color:#aebddc;text-transform:uppercase;letter-spacing:1px}.stat b{display:block;font:750 25px system-ui;color:#f3f7ff;margin-top:5px}.stat.good b{color:var(--green)}.stat.bad b{color:#ff8597}.progress{padding:0 24px 17px;background:#101e37}.progress p{font-size:11px;margin:0 0 8px}.track{height:4px;background:#2d3c55;border-radius:5px}.track i{display:block;height:100%;background:var(--yellow);width:0;border-radius:5px}.controls{display:flex;justify-content:space-between;align-items:center;padding:13px 24px;background:#0a172c;gap:15px}.touch{display:flex;gap:8px}.touch button{min-width:52px;min-height:48px;touch-action:none;user-select:none}.control-hint{font:11px ui-monospace,monospace;color:#aebddc}.overlay{position:absolute;inset:0;background:#040c21dd;backdrop-filter:blur(8px);z-index:5;display:flex;align-items:center;justify-content:center;padding:25px}.modal{max-width:430px;width:100%;border:1px solid #475f84;border-radius:20px;padding:30px;background:#11223e}.modal button{width:100%;margin-top:10px}.modal p{font-size:13px}.bottom{display:flex;justify-content:space-between;padding:17px 10px 0;color:#bbcffa;font:9px ui-monospace,monospace;letter-spacing:2px}.storage-warning{color:#ffda72;font-size:12px;padding:8px;text-align:center}@keyframes bob{50%{transform:translateY(-10px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}@media(max-width:700px){body{padding:8px}.cabinet{padding:10px;border-radius:18px}.brandbar{padding:5px 5px 15px}.brand{font-size:14px}.lights{font-size:8px;letter-spacing:1px}.screen{border-width:5px}.view{padding:25px 20px;min-height:570px}.hero{grid-template-columns:1fr;gap:0;min-height:0}.hero-art{position:absolute;right:-10px;top:30px;width:37%;opacity:.8}.hero h1{font-size:57px;max-width:70%}.hero p{max-width:85%}.hero .eyebrow{max-width:60%;line-height:1.8}.hero-footer{gap:14px;flex-wrap:wrap;margin-top:35px}.levels{gap:7px}.level{padding:12px}.level small{font-size:10px}.cats{grid-template-columns:repeat(3,1fr);gap:7px;margin:15px 0}.cat img{height:83px}.ready{grid-template-columns:1fr;gap:0}.ready>img{height:140px}.summary{padding:15px}h2{font-size:26px}.gameview{padding:0;min-height:0}.game-top{padding:15px}.hud{padding:15px 10px;gap:4px}.stat{font-size:8px;letter-spacing:0}.stat b{font-size:22px}.arena{aspect-ratio:960/650}.controls{padding:10px;flex-wrap:wrap}.control-hint{font-size:9px}.bottom{font-size:7px;letter-spacing:1px}.progress{padding:0 10px 15px}} 

/* SUMMIT / editorial visual identity */
:root{color-scheme:light;--ink:#192d29;--muted:#687069;--yellow:#ef653d;--green:#237759}
body{background:#e5e3da;color:var(--ink);padding:24px;font-family:Arial,Helvetica,sans-serif}
.cabinet{max-width:1160px;padding:0;background:#f4f1e8;border:1px solid #b9bdb2;border-radius:0;box-shadow:0 18px 50px #223c2912}
.brandbar{padding:20px 28px;border-bottom:1px solid #192d29;margin:0}.brand{font:900 22px Arial,sans-serif;letter-spacing:-1px;text-align:right}.brand small{font:10px ui-monospace,monospace;letter-spacing:1px;margin-top:5px}.lights{font-size:9px;letter-spacing:1px}.dot{background:#ed653f;box-shadow:none;border-radius:0;transform:rotate(45deg)}
.screen{border:0;border-radius:0;box-shadow:none;background:#f4f1e8;min-height:0}.view{padding:40px 48px}.eyebrow{color:#476157;letter-spacing:1.5px}h1{font-size:clamp(60px,8vw,106px);letter-spacing:-6px;line-height:.88}h1 span{color:#ec6038}h2{font-weight:850;letter-spacing:-1.5px}p{color:#626f67}
button{background:transparent;color:#192d29;border:1px solid #9da99d;border-radius:0;box-shadow:none;font-size:13px}button:hover:not(:disabled){background:#e4e6d9}.primary{background:#ed633c;border-color:#ed633c;color:#fffaf0;box-shadow:none}.primary:hover:not(:disabled){background:#d6502c}.selected{background:#e0e7d6!important;border-color:#244f3c!important;box-shadow:inset 0 -3px #244f3c}.hero-bg{background:#f4f1e8}.hero-art:before{background:#dce4cc;border:none;border-radius:50%;inset:12% -1% 7%}.hero-art:after{content:'FIG. 01 / THE CLIMBER';position:absolute;bottom:12%;left:0;font:9px monospace;writing-mode:vertical-rl;letter-spacing:2px}.hero-art img{max-height:480px;object-fit:contain}.tag{border:0;background:none;color:#45604a;font:10px monospace;letter-spacing:1px}.hero-footer{border-top:1px solid #a7b1a0;color:#45604a}.step{background:#d2d7c9}.step.active{background:#ed633c}.level small,.cat small,.note{color:#5c6d62}.upload{background:#e9eddf;border:1px dashed #85977d;border-radius:0}.upload.over{background:#d8e2c9;border-color:#2e543f}.error{color:#b83921}.summary{background:#e5eadb;border:0;border-radius:0}kbd{background:#f4f1e8;color:#203c2d;border-color:#9aa68f;border-radius:0}.game-top{background:#f4f1e8;padding:22px 28px;border-bottom:1px solid #192d29;align-items:center}.game-top h2{font-size:clamp(27px,4vw,43px);letter-spacing:-1.6px;margin-top:7px}.game-top .eyebrow{font-size:9px}.game-top button{border-color:#192d29;font:11px monospace;letter-spacing:1px;padding:12px 16px}.arena{background:#ecebdc}.hud{background:#f4f1e8;border-top:1px solid #192d29;padding:0;gap:0}.stat{padding:17px 24px;border-right:1px solid #bdc4b5;color:#5b6c60;font-size:9px;letter-spacing:1px}.stat:last-child{border:0}.stat b{font:700 34px Arial,sans-serif;letter-spacing:-1px;color:#192d29;margin-top:8px}.stat.good b{color:#287558}.stat.bad b{color:#d95732}.progress{background:#f4f1e8;padding:16px 24px}.progress p{color:#56694f;font-family:monospace}.track{background:#dce1d3;height:3px;border-radius:0}.track i{background:#e8643f;border-radius:0}.controls{background:#e8ecdf;padding:12px 24px;border-top:1px solid #bdc4b5}.touch button{background:#f4f1e8;border-color:#a5b39d;font-size:13px}.control-hint{color:#4d624b;font-size:10px}.feedback{background:#203e2e;color:#fffdf0;border:0;border-radius:0;box-shadow:4px 4px 0 #192d2925;font:700 13px Arial,sans-serif;padding:13px 20px;top:18px}.bottom{padding:16px 28px;color:#64725f;font-size:8px;background:#f4f1e8;border-top:1px solid #bdc4b5}.overlay{background:#19352de0}.modal{background:#f4f1e8;color:#192d29;border:0;border-radius:0}.storage-warning{color:#aa4225}.locked img{opacity:.35}.cat img{filter:drop-shadow(0 5px 6px #16362015)}
@media(max-width:700px){body{padding:8px}.cabinet{padding:0}.brandbar{padding:14px}.brand{font-size:18px}.brand small{font-size:7px}.lights{font-size:7px;max-width:100px}.view{padding:26px 20px}.hero h1{font-size:59px;letter-spacing:-3px}.hero-art{width:40%;right:0;top:75px}.hero-art:after{display:none}.hero-art .tag{font-size:7px}.gameview{padding:0}.game-top{padding:16px}.game-top h2{font-size:27px}.stat{padding:13px 8px;font-size:7px;letter-spacing:0}.stat b{font-size:26px}.progress{padding:13px 10px}.controls{padding:10px}.bottom{padding:14px;font-size:7px}.hero-footer{font-size:9px}.arena{aspect-ratio:960/600}}


@media(min-width:701px){body:has(#game:not(.hidden)) .cabinet{max-width:min(1160px,max(680px,calc((100svh - 440px)*2)))}body:has(#game:not(.hidden)) .brandbar{padding:12px 24px}.game-top{padding:14px 24px}.stat{padding:12px 20px}.stat b{font-size:28px}.progress{padding:10px 20px}.controls{padding:8px 20px}body:has(#game:not(.hidden)) .bottom{padding:10px 24px}}

/* v3 additions: motion feedback for HUD, feedback banner states */
.feedback{animation:drop .25s ease-out}.feedback.good{background:#237759}.feedback.bad{background:#b83921}
.stat b{transform-origin:left center}.pop{animation:pop .4s cubic-bezier(.2,1.6,.4,1)}.track i{transition:width .4s}.touch button{-webkit-user-select:none}
@keyframes pop{0%{transform:scale(1.45)}100%{transform:scale(1)}}@keyframes drop{0%{transform:translate(-50%,-14px);opacity:0}100%{transform:translate(-50%,0);opacity:1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Pineapple Jump: HUD digits in a rounded-square numeral face. "Play" © 2011 Jonas Hecksher (Playtype), SIL Open Font License 1.1 — embedded, no network. */
@font-face{font-family:'Play';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/play-700.woff2) format('woff2') format('woff2')}
.stat b{font:700 40px/1 'Play',Arial,sans-serif;letter-spacing:1px;color:#fffdf6;-webkit-text-stroke:1.4px #192d29;paint-order:stroke fill;text-shadow:-1px 1px 0 #192d29,-2px 2px 0 #192d29,-3px 3px 0 #192d29,-4px 4px 0 #192d29,-5px 5px 0 #192d29,-6px 6px 0 #192d29,-7px 7px 0 #192d29;padding:2px 0 8px 8px;margin-top:8px}.stat.good b{color:#d9f6e2}.stat.bad b{color:#ffdcd2}.sym{font-family:Arial,Helvetica,sans-serif}
.hero-footer #hiScore{margin-left:auto;color:#ec6038}
@media(min-width:701px){body:has(#game:not(.hidden)) .stat b{font-size:34px}}@media(max-width:700px){.stat b{font-size:28px;-webkit-text-stroke-width:1.1px;text-shadow:-1px 1px 0 #192d29,-2px 2px 0 #192d29,-3px 3px 0 #192d29,-4px 4px 0 #192d29,-5px 5px 0 #192d29}}

.learning-options{border-top:1px solid #a7b1a0;margin-top:20px;padding-top:16px}.learning-options select{font:inherit;padding:9px;background:#f4f1e8;color:#192d29;border:1px solid #81917b;margin:8px}.session-line{font:12px monospace;color:#42634d;margin-top:8px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}.qprogress{display:inline-flex;align-items:center;gap:9px}.qprogress .segs{display:inline-flex;gap:3px}.qprogress .segs i{display:block;width:26px;height:9px;border:1px solid #192d29;background:#f4f1e8}.qprogress .segs i.done{background:#192d29}.qprogress .segs i.now{background:#ed633c;border-color:#ed633c}.qprogress b{font:700 13px monospace;color:#192d29;letter-spacing:.5px}@media(max-width:700px){.qprogress .segs i{width:16px;height:8px}}.results-list{max-height:240px;overflow:auto;padding:0;list-style:none}.results-list li{padding:10px 0;border-bottom:1px solid #c2cbb8}.results-list small{display:block;color:#56694f}.result-stats{font-size:22px;font-weight:bold}.training{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:2;width:min(90%,510px);background:#f4f1e8;border:1px solid #284e39;padding:12px 16px;box-shadow:4px 4px #193d2920}.training p{font-size:13px;margin:5px 0}.training button{padding:7px 12px;font-size:11px}.modal.results-modal{max-width:560px;max-height:90%;overflow:auto}.lesson-note{font-size:12px}.training strong{font-size:14px}

/* v59: level page (one card per level, with a picture), volume sliders in the pause menu, the try-out field on the ready page */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}
.mode{text-align:left;padding:0;overflow:hidden;display:flex;flex-direction:column;align-items:stretch}
.mode img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#1d3a40;border-bottom:1px solid #9aa68f}
.mode strong{font-size:22px;display:block;padding:12px 14px 0}
.mode small{display:block;color:var(--muted);padding:6px 14px 14px;font-size:12px;line-height:1.4}
.vol{display:flex;align-items:center;gap:12px;margin-top:12px;font-weight:750;font-size:14px}
.vol input{flex:1;accent-color:#ed633c;min-width:0}
.vol output{width:46px;text-align:right;font:12px monospace}
@media(max-width:700px){.modes{grid-template-columns:repeat(2,1fr);gap:7px}.mode strong{font-size:17px}.mode small{font-size:11px}}
.topbtns{display:flex;gap:8px;flex-shrink:0}#mapBtn[aria-pressed="true"]{background:#ffda72;color:#192d29;border-color:#ffda72}
.mapcanvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;background:transparent}.mapcanvas.hidden{display:none}
.feedback.star{background:#3a2d0bea;border-color:#e0a62a;color:#ffe9a0}


/* v70: the menus in the Callilumi style — full-screen cave scene, Libre Baskerville headings, Inter controls, dark green panels, mint for the chosen state, orange only for "Spielen" */
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/libre-baskerville-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/inter-latin-600-normal.woff2) format('woff2')}
:root{--m-bg:#07140f;--m-panel:rgba(7,28,22,.82);--m-line:rgba(170,232,200,.32);--m-text:#f2efe6;--m-muted:#b9cfc3;--m-mint:#9ff0c8;--m-mint-ink:#0b3a2a;--m-orange:#FE4A02;--m-font:'Inter',system-ui,sans-serif;--m-serif:'Libre Baskerville',Georgia,serif}
body{background:var(--m-bg);padding:0}body.in-game{background:#e5e3da;padding:24px}
.cabinet{max-width:none;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}body.in-game .cabinet{max-width:1160px;background:#f4f1e8;border:1px solid #b9bdb2;box-shadow:0 18px 50px #223c2912}
@media(max-width:700px){body.in-game{padding:8px}}
.screen{background:transparent}body.in-game .screen{background:#f4f1e8}
.scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}body.in-game .scene{display:none}
.menu-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,20,15,.96) 0,rgba(5,20,15,.9) 30%,rgba(5,20,15,.35) 58%,rgba(5,20,15,0) 80%)}
.menu-shade.dim{background:rgba(5,20,15,.55)}
/* main menu */
#start.menu{position:relative;min-height:100svh;padding:0;display:flex;align-items:center;font-family:var(--m-font);color:var(--m-text)}
.menu-ui{position:relative;z-index:1;padding:8vh 6vw;max-width:560px}
.menu-title{font:400 clamp(52px,7.5vw,104px)/.98 var(--m-serif);letter-spacing:-1px;color:#f3efe3;margin:0;text-shadow:0 4px 24px rgba(0,0,0,.45)}
.menu-by{font:400 13px/1 ui-monospace,Menlo,monospace;letter-spacing:2px;color:var(--m-mint);margin:18px 0 0 6px}
.menu-nav{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:56px}
.menu-item{display:inline-flex;align-items:center;gap:14px;background:none!important;border:0!important;box-shadow:none!important;padding:10px 0!important;font:400 26px/1.2 var(--m-font);color:var(--m-text);text-decoration:none;transform:none!important;cursor:pointer;border-radius:0}
.menu-item .diamond{width:12px;height:12px;flex:none;background:var(--m-orange);transform:rotate(45deg);opacity:0;transition:opacity .15s}
.menu-item:hover,.menu-item:focus-visible,.menu-item.is-current{color:var(--m-mint)}.menu-item.is-current .diamond{opacity:1}   /* v72: one diamond — it moves with the pointer, with focus and with the arrow keys (game.js), never two at once */
.menu-item.is-current span{position:relative}.menu-item.is-current span::after{content:'';position:absolute;left:0;right:-24px;bottom:-8px;height:2px;background:linear-gradient(90deg,var(--m-mint),transparent)}
.menu-note{font-size:14px;color:var(--m-muted);margin:18px 0 0;max-width:440px;min-height:1.4em}
/* selection screen */
#setup.select{position:relative;min-height:100svh;padding:28px clamp(16px,4vw,56px) 40px;font-family:var(--m-font);color:var(--m-text)}
.select-ui{position:relative;z-index:1;max-width:1480px;margin:0 auto}
.select-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-bottom:22px}
.select-title{font:400 clamp(30px,3.6vw,46px)/1.1 var(--m-serif);color:#f3efe3;margin:0;text-align:center;text-shadow:0 3px 18px rgba(0,0,0,.45)}
.iconlink{background:none!important;border:0!important;box-shadow:none!important;padding:6px 0!important;font:600 17px var(--m-font);color:var(--m-text);display:inline-flex;align-items:center;gap:8px;transform:none!important;cursor:pointer;border-radius:0}
.iconlink:hover,.iconlink:focus-visible{color:var(--m-mint)}#practice{justify-self:end}
.qmark{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1.5px solid currentColor;border-radius:50%;font:600 14px var(--m-font)}
.tabs{display:none}
.panes{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:22px;align-items:stretch}
.pane{background:var(--m-panel);border:1px solid var(--m-line);border-radius:16px;padding:22px 24px 24px;backdrop-filter:blur(2px);display:flex;flex-direction:column;min-width:0}
.pane h3{font:400 clamp(26px,2.6vw,36px)/1.1 var(--m-serif);color:#f3efe3;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--m-line)}
.pane-label{font:400 16px var(--m-font);color:var(--m-muted);margin:4px 0 12px}
.worlds{display:flex;flex-direction:column;gap:12px}
.world{position:relative;display:block;padding:0!important;border:2px solid var(--m-line)!important;border-radius:14px;overflow:hidden;background:#0b1f19!important;box-shadow:none!important;transform:none!important;text-align:left;cursor:pointer}
.world img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover}
.world strong{position:absolute;left:14px;bottom:12px;font:400 clamp(20px,1.9vw,26px) var(--m-serif);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.9)}
.world .check,.level .check{display:none;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--m-mint);color:var(--m-mint-ink);font:600 15px var(--m-font)}
.world .check{position:absolute;right:12px;bottom:12px;width:30px;height:30px;font-size:17px}
.world.is-selected{border-color:var(--m-mint)!important;box-shadow:0 0 0 1px rgba(159,240,200,.35),0 0 24px rgba(159,240,200,.25)!important}.world.is-selected .check,.level.is-selected .check{display:inline-flex}
.world:hover:not(.is-selected){border-color:rgba(170,232,200,.6)!important}
.levels{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.level{display:flex!important;align-items:center;justify-content:center;gap:10px;min-height:72px;padding:10px 14px!important;border:1.5px solid var(--m-line)!important;border-radius:12px;background:rgba(10,36,28,.6)!important;color:var(--m-text);font:600 20px var(--m-font);box-shadow:none!important;transform:none!important;cursor:pointer}
.level strong{font:inherit;display:inline}.level.wide{grid-column:1/-1;min-height:56px;font-size:16px}
.level:hover:not(.is-selected){border-color:rgba(170,232,200,.6)!important}
.level.is-selected{background:var(--m-mint)!important;border-color:var(--m-mint)!important;color:var(--m-mint-ink)}.level.is-selected .check{background:var(--m-mint-ink);color:var(--m-mint)}
.upload{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid var(--m-line);border-radius:12px;background:rgba(10,36,28,.6);padding:14px;color:var(--m-text);font:600 17px var(--m-font);cursor:pointer;text-align:center}
.upload.over,.upload:hover{border-color:var(--m-mint);background:rgba(159,240,200,.12)}.upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.upload-main .sym{color:var(--m-mint);font-size:20px}
.upload-note{text-align:center;font:400 12px var(--m-font);letter-spacing:1px;color:var(--m-mint);margin-top:8px}
.import-status{font:400 13px/1.45 var(--m-font);color:var(--m-muted);min-height:1.4em;margin-top:10px}.import-status.error{color:#ff9d86}
.pane-sum{margin-top:auto;padding-top:16px;border-top:1px solid var(--m-line);font:600 20px var(--m-font);color:var(--m-text);text-align:center}
#paneWoerter .pane-sum{margin-top:18px}
.figure-stage{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:6px;margin:6px 0 4px}
.figure-stage img{width:100%;max-height:min(34vh,300px);object-fit:contain;filter:drop-shadow(0 18px 18px rgba(0,0,0,.45))}
.arrow{background:none!important;border:0!important;box-shadow:none!important;padding:8px!important;color:var(--m-mint);font-size:44px;line-height:1;transform:none!important;cursor:pointer}.arrow:hover{color:#fff}
.figure-name{text-align:center;font:600 20px var(--m-font);color:var(--m-text);margin:4px 0 14px}
.swatches{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.swatch{position:relative;width:52px;height:52px;border-radius:50%;padding:0!important;border:3px solid transparent!important;background:#f0b63d!important;filter:hue-rotate(var(--hue,0deg));box-shadow:0 0 0 2px rgba(0,0,0,.35) inset!important;transform:none!important;cursor:pointer}
.swatch.is-selected{border-color:#fff!important;box-shadow:0 0 0 3px var(--m-mint)!important}
.swatch.is-locked{filter:hue-rotate(var(--hue,0deg)) saturate(.55) brightness(.75)}
.swatch .lock{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;background:#0b1f19;border:1.5px solid rgba(255,255,255,.7);filter:hue-rotate(calc(var(--hue,0deg) * -1)) saturate(1.8) brightness(1.35)}
.swatch .lock::before{content:'';position:absolute;left:5px;top:3px;width:7px;height:6px;border:1.5px solid #fff;border-bottom:0;border-radius:4px 4px 0 0}.swatch .lock::after{content:'';position:absolute;left:4px;top:9px;width:9px;height:6px;background:#fff;border-radius:1px}
.unlock-hint{min-height:1.4em;text-align:center;font:400 13px/1.45 var(--m-font);color:var(--m-mint);margin:12px 0 0}
.unlock-note{text-align:center;font:400 13px/1.45 var(--m-font);color:var(--m-muted);margin:4px 0 0}
.startbox{margin-top:auto;padding-top:16px}.startbox .pane-sum{margin-top:0;padding-top:0;border:0;margin-bottom:14px}
.start{width:100%;padding:18px;font:600 24px var(--m-font);border-radius:12px;background:var(--m-orange)!important;border-color:var(--m-orange)!important;color:#fff!important;box-shadow:none!important;display:flex;align-items:center;justify-content:center;gap:12px}
.start:hover:not(:disabled){background:#e64200!important}.start:disabled{opacity:.45}
.start-reason{text-align:center;font:400 13px/1.45 var(--m-font);color:#ffb59f;min-height:1.4em;margin:10px 0 0}
.startbar{display:none}
.modal.settings{background:#0f2a22;color:var(--m-text);border:1px solid var(--m-line);border-radius:16px;font-family:var(--m-font)}
.modal.settings .eyebrow{color:var(--m-mint)}.modal.settings h2{font:400 30px var(--m-serif);color:#f3efe3}.modal.settings .vol{color:var(--m-text)}.modal.settings .vol output{color:var(--m-muted)}
.modal.settings button{background:rgba(10,36,28,.8);border:1.5px solid var(--m-line);color:var(--m-text);border-radius:12px;box-shadow:none}.modal.settings button:hover:not(:disabled){background:rgba(159,240,200,.14)}
.modal.settings button.primary{background:var(--m-mint);border-color:var(--m-mint);color:var(--m-mint-ink)}.modal.settings button.primary:hover:not(:disabled){background:#c3f7dd}
.modal.settings #resetInfo{font-size:13px;color:var(--m-mint)}
@media(prefers-reduced-motion:reduce){.menu-item .diamond{transition:none}}
@media(max-width:700px),(max-height:520px){
 .menu-ui{padding:14vh 24px 10vh}.menu-title{font-size:52px}.menu-nav{margin-top:40px}.menu-item{font-size:22px}
 #setup.select{padding:16px 14px 110px}.select-top{grid-template-columns:auto 1fr auto;gap:10px;margin-bottom:12px}.select-title{font-size:26px}.iconlink{font-size:15px}
 .tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;background:rgba(7,28,22,.82);border:1px solid var(--m-line);border-radius:12px;padding:5px;margin-bottom:12px}
 .tabs [role=tab]{background:none;border:0;box-shadow:none;border-radius:9px;padding:11px 6px;font:600 15px var(--m-font);color:var(--m-muted);transform:none}
 .tabs [role=tab][aria-selected=true]{background:var(--m-mint);color:var(--m-mint-ink)}
 .panes{display:block}.pane{display:none;padding:16px 16px 18px}.pane.is-on{display:flex}.pane h3{font-size:26px}
 .world img{aspect-ratio:16/7}.level{min-height:60px;font-size:18px}.figure-stage img{max-height:220px}.startbox{display:none}
 .startbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:5;padding:10px 14px 14px;background:rgba(7,28,22,.94);border-top:1px solid var(--m-line);backdrop-filter:blur(4px);font-family:var(--m-font);color:var(--m-text)}
 .startbar .pane-sum{margin:0 0 8px;padding:0;border:0;font-size:15px;text-align:center}.startbar .start{padding:14px;font-size:20px}.startbar .start-reason{margin-top:6px}
}

/* v71: the game view after Bro's draft — the picture fills the screen, a floating HUD on it: hearts (left), the quest with its dots (middle), map + pause (right); the old stat row, progress line and key hint are gone (the numbers wait in the pause panel), on touch devices the on-screen buttons float at the bottom */
body.in-game{background:var(--m-bg);padding:0}
body.in-game .cabinet{max-width:none!important;background:transparent;border:0;box-shadow:none}body.in-game .screen{background:transparent}
.gameview{position:fixed;inset:0;padding:0;min-height:0;font-family:var(--m-font);color:var(--m-text)}
.arena{position:absolute;inset:0;aspect-ratio:auto;background:#07140f;overflow:hidden}
.hud-top{position:absolute;left:0;right:0;top:0;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:14px;padding:18px 24px;pointer-events:none}
.hud-top>*{pointer-events:auto}
.hud-panel{background:var(--m-panel);border:1px solid var(--m-line);border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.28);backdrop-filter:blur(3px)}
.lives{grid-column:1;justify-self:start;display:flex;align-items:center;gap:10px;padding:0 18px;height:66px}
.lives .heart{width:28px;height:26px;display:block;overflow:visible}
.lives .heart path{fill:#ff5a5f;stroke:#ffc2c4;stroke-width:1;transition:fill .2s,stroke .2s}
.lives .heart.lost path{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.4)}
.lives .heart.pop{animation:heartpop .55s ease-out}
@keyframes heartpop{0%{transform:scale(1.6)}100%{transform:scale(1)}}
.quest{grid-column:2;justify-self:center;text-align:center;padding:11px 30px 13px;min-width:min(330px,60vw);max-width:min(680px,72vw)}
.quest-head{display:flex;align-items:center;justify-content:center;gap:12px}
.quest-icon{width:30px;height:30px;flex:none;color:var(--m-mint);display:inline-flex;align-items:center;justify-content:center}
.quest-icon svg,.quest-icon b{display:none;width:28px;height:28px}
.quest-icon.star .i-star,.quest-icon.summit .i-flag,.quest-icon.training .i-arrow,.quest-icon.adventure .i-arrow{display:block}
.quest-icon.question .i-q{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1.5px solid currentColor;border-radius:50%;font:600 15px var(--m-font)}
.quest h2{margin:0;font:400 clamp(22px,2.4vw,34px)/1.15 var(--m-serif);letter-spacing:0;color:#f3efe3;overflow-wrap:anywhere}
.quest-sub{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px;font:400 15px/1.3 var(--m-font);color:var(--m-muted);flex-wrap:wrap}
.qprogress{display:inline-flex;align-items:center}.qprogress .segs{display:inline-flex;gap:8px}
.qprogress .segs i{display:block;width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(185,207,195,.55);background:transparent}
.qprogress .segs i.done{background:var(--m-mint);border-color:var(--m-mint)}
.qprogress .segs i.now{background:transparent;border-color:var(--m-mint);box-shadow:0 0 0 2px rgba(159,240,200,.28)}
.qprogress b{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hud-btns{grid-column:3;justify-self:end;display:flex;gap:10px}
.hud-btn{width:66px;height:66px;padding:4px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--m-panel)!important;border:1px solid var(--m-line)!important;border-radius:14px;color:var(--m-text)!important;box-shadow:0 6px 18px rgba(0,0,0,.28)!important;transform:none!important;backdrop-filter:blur(3px)}
.hud-btn svg{width:26px;height:26px;display:block}
.hud-btn small{font:400 11px/1 var(--m-font);letter-spacing:.3px;color:var(--m-muted)}
.hud-btn:hover:not(:disabled){background:rgba(159,240,200,.16)!important}
#mapBtn[aria-pressed="true"]{background:var(--m-mint)!important;color:var(--m-mint-ink)!important;border-color:var(--m-mint)!important}#mapBtn[aria-pressed="true"] small{color:var(--m-mint-ink)}
body.touch-ui .hud-btn small{display:none}
.hud-btn:focus-visible,.touch button:focus-visible,.modal button:focus-visible{outline:2px solid var(--m-mint);outline-offset:3px}
.feedback{top:calc(var(--hud-h,96px) + 10px);z-index:3;background:rgba(7,28,22,.92);color:#f2efe6;border:1px solid var(--m-line);border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.28);font:600 15px var(--m-font);padding:12px 20px}
.feedback.good{background:rgba(23,92,66,.94);border-color:rgba(159,240,200,.5)}.feedback.bad{background:rgba(150,46,28,.94);border-color:rgba(255,160,130,.5)}.feedback.star{background:rgba(58,45,11,.94);border-color:#e0a62a;color:#ffe9a0}
.training{top:calc(var(--hud-h,96px) + 10px);z-index:3;background:rgba(7,28,22,.94);color:var(--m-text);border:1px solid var(--m-line);border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.28);font-family:var(--m-font)}
.training strong{font:400 18px var(--m-serif);color:#f3efe3}.training p{color:var(--m-muted);font-size:14px}.training button{background:rgba(10,36,28,.8)!important;border:1.5px solid var(--m-line)!important;color:var(--m-text)!important;border-radius:10px;box-shadow:none!important;transform:none!important}
.hud,.progress,.controls{display:none!important}
.touch{display:none;position:absolute;left:0;right:0;bottom:0;z-index:3;justify-content:space-between;align-items:flex-end;padding:0 16px calc(16px + env(safe-area-inset-bottom));pointer-events:none}
body.touch-ui .touch{display:flex}
.touch>div{display:flex;align-items:flex-end;gap:12px;pointer-events:auto}
.touch button{width:68px;height:68px;min-width:0;min-height:0;border-radius:50%;background:rgba(7,28,22,.72)!important;border:1.5px solid var(--m-line)!important;color:var(--m-text)!important;font:600 14px var(--m-font);box-shadow:none!important;transform:none!important;padding:0!important;touch-action:none;user-select:none;-webkit-user-select:none;backdrop-filter:blur(2px)}
.touch button[data-key=left],.touch button[data-key=right]{font-size:26px}
.touch button[data-key=jump]{width:86px;height:86px}
.touch button:active{background:rgba(159,240,200,.3)!important}
.overlay{position:fixed}
.pause-stats{font:400 13px/1.5 var(--m-font);color:#56694f}
body.touch-ui.in-game .storage-warning{bottom:112px}
body.in-game .storage-warning{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;background:rgba(7,28,22,.92);color:#ffb59f;border:1px solid var(--m-line);border-radius:10px;padding:8px 14px;max-width:92vw}
@media(max-width:700px){
 body.in-game{padding:0}
 .arena{aspect-ratio:auto}
 .hud-top{grid-template-columns:auto 1fr auto;grid-template-areas:'lives . btns' 'quest quest quest';gap:8px;padding:10px}.lives{grid-area:lives}.quest{grid-area:quest;justify-self:stretch}.hud-btns{grid-area:btns}
 .lives{padding:0 10px;gap:6px;height:48px}.lives .heart{width:19px;height:18px}
 .quest{padding:7px 12px 9px;min-width:0;max-width:none}.quest-head{gap:8px}.quest-icon{width:22px;height:22px}.quest-icon svg,.quest-icon b{width:22px;height:22px}.quest-icon.question .i-q{width:20px;height:20px;font-size:12px}
 .quest h2{font-size:19px}.quest-sub{font-size:12px;gap:8px;margin-top:3px}.qprogress .segs{gap:6px}.qprogress .segs i{width:9px;height:9px}
 .hud-btns{gap:6px}.hud-btn{width:48px;height:48px;border-radius:12px}.hud-btn svg{width:22px;height:22px}
 .feedback{font-size:13px;padding:9px 14px}.training{width:min(92%,420px);padding:10px 12px}
 .touch{padding:0 12px calc(12px + env(safe-area-inset-bottom))}.touch button{width:60px;height:60px}.touch button[data-key=jump]{width:76px;height:76px}
}
@media(max-height:520px){
 .hud-top{padding:8px 12px;gap:8px}.lives{height:48px;padding:0 10px;gap:6px}.lives .heart{width:19px;height:18px}
 .quest{padding:6px 16px 8px;min-width:0}.quest h2{font-size:20px}.quest-sub{font-size:12px;margin-top:2px}.quest-icon{width:22px;height:22px}.quest-icon svg,.quest-icon b{width:22px;height:22px}.quest-icon.question .i-q{width:20px;height:20px;font-size:12px}.qprogress .segs i{width:9px;height:9px}
 .hud-btn{width:48px;height:48px;border-radius:12px}.hud-btn svg{width:22px;height:22px}
 .feedback{font-size:13px;padding:8px 14px}.training{padding:8px 12px}.training p{margin:3px 0}
 .touch{padding:0 12px 10px}.touch button{width:56px;height:56px}.touch button[data-key=jump]{width:68px;height:68px}
}
/* v71: every panel over the game (pause, results, settings) in the dark Callilumi look; orange only on the button that continues playing */
.overlay{background:rgba(4,16,12,.72);backdrop-filter:blur(6px)}
.modal{background:#0f2a22;color:var(--m-text);border:1px solid var(--m-line);border-radius:16px;font-family:var(--m-font);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.modal .eyebrow{color:var(--m-mint)}.modal h2{font:400 30px/1.15 var(--m-serif);letter-spacing:0;color:#f3efe3}.modal p{color:var(--m-muted)}
.modal button{background:rgba(10,36,28,.8);border:1.5px solid var(--m-line);color:var(--m-text);border-radius:12px;box-shadow:none}.modal button:hover:not(:disabled){background:rgba(159,240,200,.14);transform:none}
.modal button.primary{background:var(--m-orange);border-color:var(--m-orange);color:#fff}.modal button.primary:hover:not(:disabled){background:#e64200}
.modal.settings button.primary{background:var(--m-mint);border-color:var(--m-mint);color:var(--m-mint-ink)}.modal.settings button.primary:hover:not(:disabled){background:#c3f7dd}
.modal .result-stats{color:#f3efe3}.results-list li{border-bottom:1px solid var(--m-line)}.results-list small{color:var(--m-muted)}.modal .pause-stats{color:var(--m-muted)}
.modal .vol{color:var(--m-text)}.modal .vol output{color:var(--m-muted)}.modal .vol input{accent-color:var(--m-mint)}.modal #resetInfo{color:var(--m-mint)}
/* v72: the title and the menu carry their own shadow (the dark band over the picture is gone); long questions get a smaller face */
.menu-title{text-shadow:0 2px 6px rgba(0,0,0,.7),0 8px 32px rgba(0,0,0,.6)}.menu-item,.menu-by{text-shadow:0 1px 4px rgba(0,0,0,.8),0 4px 16px rgba(0,0,0,.6)}
.quest h2.long{font-size:clamp(18px,1.9vw,26px)}.quest h2.xlong{font-size:clamp(15px,1.5vw,20px)}
@media(max-width:700px){.quest h2.long{font-size:16px}.quest h2.xlong{font-size:14px}}

/* v82: key box in the settings panel */
.modal.settings{max-height:100%;overflow:auto}
.keys{margin-top:22px;padding-top:16px;border-top:1px solid var(--m-line)}
.keys-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.keys-head .eyebrow{margin:0}
.modal.settings #keysReset{width:auto;margin:0;padding:6px 12px;font-size:12px;border-radius:9px}
.keyrow{display:flex;align-items:center;gap:8px;min-height:34px}.keyrow>span:first-child{width:88px;flex:none;font-size:14px;color:var(--m-text)}
.caps{display:flex;flex-wrap:wrap;gap:6px}
.modal.settings .keycap{width:auto;margin:0;padding:4px 10px;min-height:0;font:600 13px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.3px;border-radius:8px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.35)}
.modal.settings .keycap.add{color:var(--m-muted);border-style:dashed;box-shadow:none;padding:4px 9px}
.modal.settings .keycap.listen{border-color:var(--m-mint);border-style:dashed;color:var(--m-mint);animation:kblink 1s ease-in-out infinite}
.modal.settings .keycap.fixed{opacity:.55;cursor:default}
@keyframes kblink{50%{background:rgba(159,240,200,.14)}}
.keys-note{font-size:12px;color:var(--m-muted);margin:8px 0 0;line-height:1.5}.keys-note.warn{color:#ffb59f}
body.touch-ui .keys{display:none}
.hud-btn small{max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v82: phones with a camera notch — the picture runs under it (viewport-fit=cover), HUD and touch buttons keep to the safe area */
:root{--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
.hud-top,.touch{left:var(--sal);right:var(--sar)}
#game,#pausePanel,#resultsPanel{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* v83: no double-tap zoom anywhere, no browser gestures on the playfield (the double jump is two quick taps) */
html,body{touch-action:manipulation}
.arena{touch-action:manipulation}
/* v83: phone held sideways — the phone layout (tabs, start bar), squeezed so one pane fits without scrolling */
@media (max-height:520px) and (min-width:701px){
 .menu-ui{padding:5vh 6vw}.menu-title{font-size:42px}.menu-by{margin-top:8px}.menu-nav{margin-top:14px;gap:0}.menu-item{font-size:19px;padding:5px 0!important}
 #setup.select{padding:8px 14px 68px}.select-top{margin-bottom:6px}.select-title{font-size:21px}.iconlink{font-size:14px}
 .tabs{padding:3px;margin-bottom:8px}.tabs [role=tab]{padding:7px 6px;font-size:14px}
 .pane{padding:10px 14px 12px;max-height:calc(100svh - 196px);overflow:auto}.pane h3{display:none}.pane-label{margin:0 0 8px;font-size:14px}
 .worlds{flex-direction:row;gap:10px}.world{flex:1;min-width:0}.world img{aspect-ratio:16/7}.world strong{font-size:18px;left:10px;bottom:8px}.world .check{width:24px;height:24px;font-size:14px;right:8px;bottom:8px}
 .pane-label{margin:0 0 4px;font-size:13px}.levels{grid-template-columns:repeat(4,1fr);gap:7px;margin:0}.level{min-height:36px;font-size:15px;padding:4px 8px!important}.level.wide{grid-column:span 2;min-height:36px;font-size:14px}
 .upload{margin-top:6px;padding:5px;font-size:13px}.upload-note{display:none}#paneWoerter .pane-sum{margin-top:6px;padding-top:6px;font-size:14px}.pane-sum:empty,.import-status:empty{display:none}
 .figure-stage{grid-template-columns:36px 1fr 36px;margin:0}.figure-stage img{max-height:96px}.arrow{font-size:30px}.figure-name{font-size:15px;margin:0 0 4px}
 .swatches{gap:8px}.swatch{width:36px;height:36px}.swatch .lock{width:15px;height:15px}.unlock-hint{min-height:0;margin:3px 0 0;font-size:12px}.unlock-note{display:none}
 .startbar{padding:6px 14px 8px}.startbar .pane-sum{font-size:13px;margin-bottom:4px}.startbar .start{padding:9px;font-size:17px}.startbar .start-reason{margin-top:3px;font-size:12px}
}

/* v83: Bros neue Bedienelemente — gold-framed panels, round buttons with icon + label, glossy hearts, a star row on the star hunt */
:root{--m-gold:#e3cf97;--m-cream:#f4e9c8;--m-hud:rgba(9,20,16,.8)}
.hud-panel{background:var(--m-hud);border:2px solid var(--m-gold);border-radius:18px;box-shadow:0 0 0 1.5px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.35)}
.lives{height:60px;padding:0 18px;gap:12px}.lives .heart{width:30px;height:28px}.lives .heart path{fill:#ff4646;stroke:#ffb3b3}
.lives .heart .shine{fill:#fff;opacity:.6;transition:opacity .2s}.lives .heart.lost .shine{opacity:0}
.quest{padding:10px 26px 11px}.quest h2{color:var(--m-cream)}.quest-icon{color:var(--m-gold)}.quest-sub{color:var(--m-cream)}
.qprogress .segs i{border-color:rgba(227,207,151,.5)}.qprogress .segs i.done{background:var(--m-gold);border-color:var(--m-gold)}.qprogress .segs i.now{border-color:var(--m-gold);box-shadow:0 0 0 2px rgba(227,207,151,.3)}
.quest.hunt{padding:8px 22px 9px}.quest.hunt .quest-head{display:none}.quest.hunt .quest-sub{margin-top:0;gap:0}.quest.hunt #sessionLine{display:none}
.quest.hunt .qprogress .segs{gap:7px}.quest.hunt .qprogress .segs i{width:28px;height:28px;border:0;border-radius:0;box-shadow:none;background:rgba(227,207,151,.75);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M12 2.8l2.7 5.8 6.3.8-4.6 4.4 1.2 6.3L12 17.2 6.4 20.1l1.2-6.3L3 9.4l6.3-.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M12 2.8l2.7 5.8 6.3.8-4.6 4.4 1.2 6.3L12 17.2 6.4 20.1l1.2-6.3L3 9.4l6.3-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.quest.hunt .qprogress .segs i.done{background:#ffc83d;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3 6.4 7 .9-5.1 4.9 1.3 7L12 17.6 5.8 21l1.3-7L2 9.1l7-.9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3 6.4 7 .9-5.1 4.9 1.3 7L12 17.6 5.8 21l1.3-7L2 9.1l7-.9z'/%3E%3C/svg%3E")}
.quest.hunt .qprogress .segs i.now{background:var(--m-gold);box-shadow:none}
.quest.hunt .qprogress b{display:inline-block;margin-left:12px;padding-left:14px;border-left:1.5px solid rgba(227,207,151,.5);font:600 20px/28px var(--m-font);color:var(--m-cream)}
.hud-btn{width:56px;height:56px;border-radius:50%!important;background:var(--m-hud)!important;border:2px solid var(--m-gold)!important;color:var(--m-cream)!important;box-shadow:0 0 0 1.5px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.35)!important;gap:1px}
.hud-btn svg{width:24px;height:24px}.hud-btn small{color:var(--m-gold);font-size:10px}
.hud-btn:hover:not(:disabled){background:rgba(227,207,151,.22)!important}
#mapBtn[aria-pressed="true"]{background:var(--m-gold)!important;color:#1d1607!important;border-color:var(--m-gold)!important}#mapBtn[aria-pressed="true"] small{color:#1d1607}
.touch button{background:var(--m-hud)!important;border:2.5px solid var(--m-gold)!important;color:var(--m-cream)!important;box-shadow:0 0 0 1.5px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.35)!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font:700 11px/1.1 var(--m-font);letter-spacing:.2px}
.touch button svg{width:26px;height:26px;display:block;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.touch button svg.burst,.touch button svg.swoosh{fill:currentColor;stroke:none}
.touch button[data-key=left] svg,.touch button[data-key=right] svg{width:32px;height:32px;stroke-width:3}
.touch button[data-key=jump]{width:86px;height:86px;font-size:13px}.touch button[data-key=jump] svg{width:40px;height:40px;stroke-width:2.8}
.touch button:active{background:rgba(227,207,151,.35)!important}
@media(max-width:700px),(max-height:520px){.touch button svg{width:22px;height:22px}.touch button span{font-size:10px}.touch button[data-key=left] svg,.touch button[data-key=right] svg{width:28px;height:28px}.touch button[data-key=jump] svg{width:32px;height:32px}.touch button[data-key=jump]{font-size:11px}.hud-btn{width:48px;height:48px}.hud-btn svg{width:22px;height:22px}.lives{height:48px;padding:0 12px;gap:8px}.lives .heart{width:24px;height:22px}.quest.hunt .qprogress .segs i{width:22px;height:22px}.quest.hunt .qprogress b{font-size:17px;line-height:22px;margin-left:8px;padding-left:10px}}

/* v84: the panel says only what to do — the dots always carry their count; on the summit the headline stays and the row shows the stars */
.qprogress b{display:inline-block;margin-left:10px;padding-left:12px;border-left:1.5px solid rgba(227,207,151,.5);font:600 15px/18px var(--m-font);color:var(--m-cream)}
#sessionLine:empty{display:none}
.quest.summit .qprogress .segs{gap:6px}.quest.summit .qprogress .segs i{width:22px;height:22px;border:0;border-radius:0;box-shadow:none;background:rgba(227,207,151,.75);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M12 2.8l2.7 5.8 6.3.8-4.6 4.4 1.2 6.3L12 17.2 6.4 20.1l1.2-6.3L3 9.4l6.3-.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M12 2.8l2.7 5.8 6.3.8-4.6 4.4 1.2 6.3L12 17.2 6.4 20.1l1.2-6.3L3 9.4l6.3-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.quest.summit .qprogress .segs i.done{background:#ffc83d;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3 6.4 7 .9-5.1 4.9 1.3 7L12 17.6 5.8 21l1.3-7L2 9.1l7-.9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3 6.4 7 .9-5.1 4.9 1.3 7L12 17.6 5.8 21l1.3-7L2 9.1l7-.9z'/%3E%3C/svg%3E")}
.quest.summit .qprogress b,.quest.hunt .qprogress b{font-size:20px;line-height:28px}
@media(max-width:700px),(max-height:520px){.quest.summit .qprogress .segs i{width:18px;height:18px}.quest.summit .qprogress b,.quest.hunt .qprogress b{font-size:17px;line-height:22px}}

/* v84: Bros Fassung — alle Knöpfe und Tafeln dunkel mit Mint-Rand, abgerundete Quadrate; gedrückt füllt sich der Knopf türkis (Sprung: solange gehalten); gefundene Sterne gold */
.hud-panel{border:2px solid var(--m-mint);border-radius:16px;box-shadow:0 0 0 1.5px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.35)}
.quest-icon{color:var(--m-mint)}.qprogress b{border-left-color:rgba(159,240,200,.5);color:var(--m-cream)}
.qprogress .segs i{border-color:rgba(159,240,200,.55)}.qprogress .segs i.done{background:var(--m-mint);border-color:var(--m-mint)}.qprogress .segs i.now{border-color:var(--m-mint);box-shadow:0 0 0 2px rgba(159,240,200,.28)}
.quest.hunt .qprogress .segs i,.quest.summit .qprogress .segs i{background:rgba(159,240,200,.8)}.quest.hunt .qprogress .segs i.now{background:var(--m-mint)}
.quest.hunt .qprogress .segs i.done,.quest.summit .qprogress .segs i.done{background:#ffc83d}
.hud-btn{border-radius:14px!important;border:2px solid var(--m-mint)!important;color:var(--m-cream)!important;box-shadow:0 0 0 1.5px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.35)!important}
.hud-btn small{color:var(--m-mint)}.hud-btn:hover:not(:disabled){background:rgba(159,240,200,.16)!important}
.hud-btn.is-down,#mapBtn[aria-pressed="true"]{background:var(--m-mint)!important;color:var(--m-mint-ink)!important;border-color:var(--m-mint)!important}.hud-btn.is-down small,#mapBtn[aria-pressed="true"] small{color:var(--m-mint-ink)}
.touch button{border-radius:16px;border:2px solid var(--m-mint)!important;color:var(--m-cream)!important;box-shadow:0 0 0 1.5px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.35)!important;transition:background .08s,color .08s}
.touch button[data-key=jump]{border-radius:20px}
.touch button:active,.touch button.is-down{background:var(--m-mint)!important;color:var(--m-mint-ink)!important}
@media(max-width:700px),(max-height:520px){.touch button{border-radius:14px}.touch button[data-key=jump]{border-radius:18px}.hud-btn{border-radius:12px!important}}

/* v84: no words on the action buttons — the symbols say it; the jump arrow curves straight up */
.touch button svg{width:32px;height:32px}.touch button[data-key=jump] svg{width:66px;height:66px}
@media(max-width:700px),(max-height:520px){.touch button svg{width:28px;height:28px}.touch button[data-key=jump] svg{width:60px;height:60px}}