:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff;background:#08090b;--accent:#d93a2e}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#08090b}body{display:grid;place-items:center}
#app{position:relative;width:min(100dvw,calc(100dvh*16/9));height:min(100dvh,calc(100dvw*9/16));max-width:100vw;max-height:100vh;background:#111;overflow:hidden;box-shadow:0 0 60px #000}
canvas{width:100%;height:100%;display:block;background:#111}.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:3%;background:rgba(5,6,8,.62);z-index:20}.overlay.show{display:flex}
.panel{width:min(980px,94%);max-height:92%;overflow:auto;background:rgba(14,16,20,.84);border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 80px rgba(0,0,0,.55);backdrop-filter:blur(7px);padding:28px;border-radius:18px;text-align:center}.menu-panel h1{font-size:clamp(44px,7vw,92px);line-height:.9;margin:12px 0 4px;letter-spacing:.04em}.eyebrow{font-size:12px;letter-spacing:.25em;opacity:.7}.subtitle{letter-spacing:.2em;opacity:.75}
button{appearance:none;border:1px solid rgba(255,255,255,.25);background:rgba(28,30,36,.82);color:#fff;padding:14px 16px;border-radius:12px;font-weight:800;cursor:pointer;touch-action:manipulation;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}button:hover{background:rgba(48,50,58,.95)}button:focus-visible{outline:2px solid #fff;outline-offset:3px}button.primary{background:var(--accent);border-color:#ef766b}
.difficulty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.difficulty-grid button{min-height:112px;display:flex;flex-direction:column;gap:8px;justify-content:center}.difficulty-grid span{font-size:12px;font-weight:500;opacity:.75}.difficulty-grid button.selected,.level-card.selected{background:var(--accent);border-color:#f07d72;box-shadow:0 0 0 1px rgba(255,255,255,.72) inset,0 7px 24px rgba(185,36,27,.2)}.difficulty-grid button:not(.selected):hover,.level-card:not(.selected):not(:disabled):hover{background:rgba(48,50,58,.95);transform:translateY(-1px)}
.menu-actions,.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.hint{font-size:12px;opacity:.66;margin-top:18px;line-height:1.5}.profile-row{display:grid;grid-template-columns:auto minmax(180px,300px);gap:6px 12px;align-items:center;justify-content:center;margin:0 auto 14px;text-align:left}.profile-row label{font-weight:900;font-size:12px;letter-spacing:.12em}.profile-row input{width:100%;border-radius:9px;border:1px solid rgba(255,255,255,.28);background:rgba(6,8,11,.72);color:#fff;font-weight:800;padding:10px 12px;text-transform:uppercase;outline:none}.profile-row input:focus{border-color:#fff}.profile-row span{grid-column:2;font-size:10px;opacity:.58}
.modal-panel h2,.pause-panel h2{font-size:34px;margin-top:0}.score-columns{display:grid;grid-template-columns:1fr 1fr;gap:22px;text-align:left}.demo-badge{display:inline-block;font-weight:900;font-size:12px;letter-spacing:.12em;background:#8b2d25;padding:6px 8px;border-radius:6px}.demo-list{opacity:.65}
#panic{position:absolute;inset:0;background:#fff;z-index:99;display:none}#panic.show{display:block}
#mobileControls{position:absolute;z-index:10;left:1.2%;right:1.2%;bottom:1.3%;display:grid;grid-template-columns:repeat(7,1fr);gap:.6%;pointer-events:none}#mobileControls button{pointer-events:auto;padding:10px 4px;background:rgba(8,10,14,.82);font-size:clamp(8px,1vw,13px);border-radius:8px;min-height:44px}#mobileControls button[data-action="fish"]{background:rgba(170,47,37,.90)}
.shortcut-toggle{position:absolute;right:1.5%;top:13.5%;z-index:12;padding:8px 11px;font-size:10px;letter-spacing:.08em;background:rgba(8,10,14,.76);display:none}.shortcut-toggle kbd{margin-left:5px}.gameplay-overlay{background:rgba(5,6,8,.32);backdrop-filter:blur(1.5px)}.shortcuts-panel{width:min(1120px,96%);background:rgba(12,14,17,.88);text-align:left;border-color:rgba(255,255,255,.35)}.shortcuts-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.shortcuts-head h2{margin:6px 0 22px;font-size:clamp(24px,3vw,42px)}.icon-btn{font-size:30px;line-height:1;padding:6px 11px;background:transparent}.shortcut-grid{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid rgba(255,255,255,.17);border-bottom:1px solid rgba(255,255,255,.17)}.shortcut-card{padding:18px 14px;min-height:190px;border-right:1px solid rgba(255,255,255,.14)}.shortcut-card:last-child{border-right:0}.shortcut-card h3{font-size:12px;letter-spacing:.07em;margin:0 0 16px}.shortcut-card p{font-size:11px;line-height:1.45;opacity:.72;margin:14px 0 0}.keyrow{display:flex;align-items:center;gap:7px;margin:8px 0}.keyrow span{font-size:10px;opacity:.72}kbd{display:inline-flex;min-width:34px;height:34px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.62);border-bottom-width:3px;border-radius:6px;background:rgba(255,255,255,.06);font:800 13px system-ui;color:#fff;padding:0 8px}.wide{min-width:74px}.shortcut-footer{display:flex;gap:26px;align-items:center;justify-content:center;padding-top:18px;font-size:11px;opacity:.8}.shortcut-footer kbd,.shortcut-toggle kbd{height:24px;min-width:25px;font-size:10px;padding:0 5px}
.results-panel{width:min(760px,94%)}.results-summary{display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:center;text-align:left;margin:14px auto 24px}.rating-badge{width:132px;height:132px;border:3px solid rgba(255,255,255,.8);border-radius:16px;display:grid;place-items:center;font-size:72px;font-weight:1000;background:rgba(217,58,46,.17)}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.result-stat{padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.035)}.result-stat small{display:block;opacity:.56;font-size:10px;letter-spacing:.08em}.result-stat strong{font-size:18px}.unlock-banner{padding:10px;margin:12px 0;background:rgba(217,58,46,.15);border:1px solid rgba(239,118,107,.35);border-radius:8px;font-weight:900;text-align:center}
.level-heading{font-size:14px;letter-spacing:.18em;margin:8px 0 10px;opacity:.82}.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 12px}.level-card{min-height:92px;padding:10px;display:flex;flex-direction:column;justify-content:center;gap:5px;text-align:left}.level-card strong{font-size:12px}.level-card span{font-size:10px;font-weight:500;opacity:.7;line-height:1.35}.level-card em{font-size:9px;font-style:normal;letter-spacing:.12em;opacity:.62}.level-card:disabled{cursor:not-allowed;opacity:.38;filter:saturate(.45)}.start-btn{width:min(440px,90%);margin:0 0 14px;font-size:16px}
@media (pointer:fine){#mobileControls{opacity:.64}}@media (max-width:1050px){.shortcut-grid{grid-template-columns:repeat(3,1fr)}.shortcut-card:nth-child(3){border-right:0}.shortcut-card{min-height:135px}.shortcut-card:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.14)}}@media (max-width:900px){.level-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:780px){.panel{padding:18px}.difficulty-grid{grid-template-columns:1fr}.difficulty-grid button{min-height:76px}.menu-panel h1{font-size:44px}.hint{display:none}.score-columns{grid-template-columns:1fr}.modal-panel h2{font-size:26px}.level-grid{grid-template-columns:repeat(4,1fr);gap:4px}.level-card{padding:6px;min-height:58px}.level-card strong{font-size:9px}.level-card span{display:none}.level-card em{font-size:7px}.level-heading{margin:4px 0 6px}.start-btn{padding:9px;margin-bottom:8px}.profile-row{grid-template-columns:1fr}.profile-row span{grid-column:1}.shortcut-grid{grid-template-columns:repeat(2,1fr)}.shortcut-card:nth-child(n){border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);min-height:120px;padding:11px}.shortcut-card:nth-child(even){border-right:0}.shortcut-footer{gap:10px;flex-wrap:wrap}.results-summary{grid-template-columns:90px 1fr}.rating-badge{width:86px;height:86px;font-size:48px}}

/* Build 0.6 — responsive/input hardening */
.difficulty-grid button.primary:not(.selected){background:rgba(28,30,36,.82);border-color:rgba(255,255,255,.25);box-shadow:none}
#rotateNotice{display:none;position:absolute;inset:0;z-index:120;background:#08090b;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:8px;padding:24px}
#rotateNotice strong{font-size:clamp(26px,7vw,48px)}#rotateNotice span{opacity:.7}
#mobileControls button.active{transform:translateY(1px);background:rgba(217,58,46,.95);box-shadow:0 0 0 2px rgba(255,255,255,.5) inset}
@media (orientation:portrait) and (max-width:900px){#rotateNotice{display:flex}}
@media (max-height:620px){.shortcut-toggle{top:12%;padding:6px 8px}.panel{max-height:96%;padding:14px}.menu-panel h1{font-size:38px}.difficulty-grid{margin:10px 0}.difficulty-grid button{min-height:62px}.profile-row{margin-bottom:7px}.level-card{min-height:52px}#mobileControls{bottom:max(.7%,env(safe-area-inset-bottom));left:max(.8%,env(safe-area-inset-left));right:max(.8%,env(safe-area-inset-right))}#mobileControls button{min-height:38px;padding:7px 3px}}
@media (pointer:coarse){#mobileControls{opacity:1}#mobileControls button{min-height:48px;font-size:clamp(9px,1.4vw,14px)}}

/* Build 0.8.7.1 — Audio shortcut patch */
.audio-toggle{position:absolute;left:1.5%;top:13.5%;z-index:12;padding:8px 11px;font-size:10px;letter-spacing:.08em;background:rgba(8,10,14,.76)}
@media (max-height:620px){.audio-toggle{top:12%;padding:6px 8px}}

/* Build 0.8.8.6.2 — Expert Label Copy Fix */
#mobileControls button.rookie-hint{display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
#mobileControls .control-label{display:inline-block}
#mobileControls .control-key{display:inline-flex;align-items:center;justify-content:center;min-width:25px;padding:2px 6px;border:1px solid rgba(255,255,255,.68);border-bottom-width:2px;border-radius:4px;background:rgba(255,255,255,.08);font:900 clamp(7px,.7vw,10px)/1 system-ui;letter-spacing:.03em;color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.45)}
#mobileControls button[data-action="fish"] .control-key{min-width:42px}
@media (max-width:900px){#mobileControls button.rookie-hint{gap:4px;flex-direction:column}#mobileControls .control-key{padding:2px 4px}}

/* 0.8.9.1 – Results & Progression Polish */
.results-panel{width:min(820px,96%);border-color:rgba(225,107,66,.38);box-shadow:0 22px 80px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,255,255,.025)}
.result-venue{position:relative;margin:4px 0 14px;padding:12px 16px;border:1px solid rgba(255,255,255,.11);border-left:4px solid #df6545;background:linear-gradient(90deg,rgba(223,101,69,.14),rgba(255,255,255,.025));text-align:left}
.result-venue span{display:block;font-size:10px;letter-spacing:.16em;opacity:.62;font-weight:800}.result-venue strong{display:block;margin-top:3px;font-size:23px;letter-spacing:.05em}.result-venue em{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:1000;font-size:11px;letter-spacing:.08em;padding:7px 9px;border:1px solid rgba(255,193,112,.48);background:rgba(224,112,56,.19);border-radius:5px}
.rating-stack{text-align:center}.rating-stack>span{display:block;margin-top:8px;font-size:10px;letter-spacing:.12em;font-weight:900;opacity:.72}.rating-badge{box-shadow:inset 0 0 28px rgba(223,101,69,.14),0 0 24px rgba(0,0,0,.22)}
.result-stat{position:relative}.result-stat i{display:block;margin-top:2px;font-style:normal;font-size:9px;letter-spacing:.07em;opacity:.48}.score-stat strong{font-size:21px}
.tour-progress{margin:12px 0 10px;padding:12px 14px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.18);border-radius:8px}.tour-progress-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:10px;letter-spacing:.1em;opacity:.74}.tour-progress-head strong{font-size:12px;opacity:1}.tour-track{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.tour-node{height:25px;border:1px solid rgba(255,255,255,.13);border-radius:4px;display:grid;place-items:center;font-size:10px;font-weight:900;background:rgba(255,255,255,.025);opacity:.42}.tour-node.done{opacity:1;background:rgba(223,101,69,.16);border-color:rgba(223,101,69,.52)}.tour-node.current{box-shadow:0 0 0 2px rgba(255,194,117,.3) inset,0 0 14px rgba(223,101,69,.16)}
.next-venue{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;text-align:left;padding:10px 14px;margin:10px 0 2px;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025)}.next-venue small{grid-row:1/3;font-size:9px;letter-spacing:.1em;opacity:.55}.next-venue strong{font-size:13px}.next-venue span{font-size:10px;opacity:.58}.next-venue.final{background:rgba(223,101,69,.08)}
.level-card.completed{box-shadow:inset 0 -2px 0 rgba(223,101,69,.34)}
@media (max-width:780px){.result-venue strong{font-size:18px}.result-venue em{position:static;display:inline-block;transform:none;margin-top:7px}.tour-track{gap:3px}.tour-node{height:21px}.next-venue{grid-template-columns:1fr}.next-venue small{grid-row:auto}.results-panel{max-height:94vh;overflow:auto}}


/* ============================================================
   Build 0.9.2.0 — ROCKolymp: FRONT OF STAGE Visual Identity
   Presentation-only layer; gameplay balancing remains 0.9.1.3.
   ============================================================ */
:root{--rock-red:#d71920;--rock-black:#111;--rock-char:#222;--rock-white:#f2f0e9;--rock-gray:#777;--panel:rgba(10,11,13,.91);--line:rgba(242,240,233,.18);font-family:Arial,Helvetica,sans-serif;color:var(--rock-white);background:#050506;--accent:var(--rock-red)}
.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}
#app{background:#08090b;box-shadow:0 0 80px #000;border:1px solid rgba(255,255,255,.08)}
.overlay{background:linear-gradient(90deg,rgba(4,4,5,.93) 0%,rgba(4,4,5,.76) 43%,rgba(4,4,5,.30) 100%);padding:2.2%}
#menu{background-image:linear-gradient(90deg,rgba(3,3,4,.96) 0%,rgba(3,3,4,.87) 43%,rgba(3,3,4,.28) 78%,rgba(3,3,4,.18) 100%),url('assets/backgrounds/menu.webp');background-size:cover;background-position:center}
#endScreen{background-image:linear-gradient(90deg,rgba(3,3,4,.86),rgba(3,3,4,.52)),url('assets/backgrounds/results.webp');background-size:cover;background-position:center}
#tutorial,#highscores,#pause,#shortcuts{background-image:linear-gradient(rgba(3,3,4,.88),rgba(3,3,4,.86)),url('assets/backgrounds/tour.webp');background-size:cover;background-position:center}
.panel{border-radius:0;border:1px solid var(--line);background:var(--panel);box-shadow:0 24px 90px rgba(0,0,0,.72);backdrop-filter:blur(4px);position:relative}
.panel:before{content:"";position:absolute;left:0;top:0;width:5px;height:100%;background:var(--rock-red);pointer-events:none}
.menu-panel{width:min(1130px,96%);margin-right:auto;text-align:left;padding:20px 24px 18px;max-height:96%;overflow:auto;background:linear-gradient(90deg,rgba(8,9,11,.96),rgba(8,9,11,.84))}
.brand-header{display:grid;grid-template-columns:minmax(320px,650px) 1fr;align-items:end;gap:16px;margin-bottom:6px}.brand-lockup{display:block;width:min(610px,100%);height:auto;max-height:182px;object-fit:contain;object-position:left center}.subtitle{margin:0 0 12px;text-align:right;font-size:10px;font-weight:900;letter-spacing:.18em;color:rgba(242,240,233,.54)}
.level-heading{margin:10px 0 8px;padding-top:9px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.21em;color:var(--rock-white)}
button{border-radius:0;border:1px solid rgba(242,240,233,.18);background:rgba(18,19,22,.90);color:var(--rock-white);text-transform:uppercase;letter-spacing:.045em;box-shadow:none}button:hover{background:rgba(40,41,45,.96);border-color:rgba(242,240,233,.42)}button.primary{background:linear-gradient(100deg,#9d1117,var(--rock-red));border-color:#f24950;box-shadow:inset 0 -3px 0 rgba(0,0,0,.28)}button.primary:hover{background:#ef252d}
.difficulty-grid{gap:7px;margin:8px 0}.difficulty-grid button{min-height:64px;padding:10px 12px;text-align:left;border-left:4px solid rgba(255,255,255,.12)}.difficulty-grid button strong{font-size:13px}.difficulty-grid span{font-size:10px}.difficulty-grid button.selected{background:linear-gradient(90deg,rgba(215,25,32,.92),rgba(112,14,18,.78));border-color:rgba(255,255,255,.6);border-left-color:#fff;box-shadow:none}
.level-grid{grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:7px}.level-card{position:relative;min-height:105px;padding:0;overflow:hidden;background-image:linear-gradient(0deg,rgba(4,4,5,.96) 0%,rgba(4,4,5,.42) 62%,rgba(4,4,5,.15) 100%),var(--venue);background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.17);display:flex;align-items:flex-end;justify-content:flex-start}.level-card:before{content:"";position:absolute;inset:0;border-bottom:3px solid transparent;pointer-events:none}.level-card.selected:before{border-color:var(--rock-red)}.level-card.selected{background-image:linear-gradient(0deg,rgba(84,7,10,.90),rgba(5,5,6,.18)),var(--venue);border-color:rgba(255,255,255,.62);box-shadow:0 0 0 1px var(--rock-red) inset}.level-no{position:absolute;top:5px;left:7px;font-size:28px;line-height:1;font-weight:1000;text-shadow:0 2px 6px #000}.level-copy{position:relative;width:100%;padding:28px 7px 7px;display:block}.level-copy strong{display:block;font-size:10px}.level-copy b{display:block;margin-top:2px;font-size:7px;letter-spacing:.08em;color:rgba(255,255,255,.70)}.level-copy em{display:block;margin-top:5px;font-size:7px;color:rgba(255,255,255,.62)}.level-card.completed{box-shadow:inset 0 -3px 0 rgba(242,240,233,.55)}.level-card:disabled{filter:grayscale(.9) brightness(.52);opacity:.62}
.level-preview{display:grid;grid-template-columns:210px 1fr;min-height:92px;border:1px solid var(--line);background:rgba(0,0,0,.34);margin-bottom:9px}.venue-preview-art{background-image:linear-gradient(rgba(0,0,0,.06),rgba(0,0,0,.2)),var(--venue);background-size:cover;background-position:center}.venue-preview-copy{padding:9px 13px}.venue-preview-copy>span{font-size:8px;font-weight:900;letter-spacing:.16em;color:#d2d2d2}.venue-preview-copy strong{display:block;font-size:20px;margin:1px 0 3px}.venue-preview-copy p{margin:0 0 5px;font-size:11px;line-height:1.35;color:rgba(242,240,233,.78)}.venue-preview-copy small{font-size:8px;letter-spacing:.06em;color:rgba(242,240,233,.50)}
.start-btn{margin:0 0 9px;width:min(420px,100%);font-size:15px}.profile-row{justify-content:start;margin:0 0 8px}.menu-actions{justify-content:flex-start}.hint{text-align:left;margin:9px 0 0;border-top:1px solid var(--line);padding-top:8px}
.pause-logo{width:min(420px,82%);display:block;margin:0 auto 4px}.pause-panel{width:min(610px,90%)}
.modal-panel h2,.pause-panel h2{font-weight:1000;letter-spacing:.035em;text-transform:uppercase}.results-panel{width:min(930px,95%);text-align:left;background:rgba(8,9,11,.93)}.results-panel>h2{font-size:clamp(34px,5vw,62px);margin:0 0 4px;border-bottom:5px solid var(--rock-red);padding-bottom:5px}.result-venue{border-radius:0;border-left:5px solid var(--rock-red);background:linear-gradient(90deg,rgba(215,25,32,.18),rgba(255,255,255,.025))}.rating-badge{border-radius:50%;border-color:var(--rock-red);background:rgba(215,25,32,.14);color:var(--rock-white)}.result-stat{border-radius:0;background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.12)}.tour-progress,.next-venue{border-radius:0}.unlock-banner{border-radius:0;background:rgba(215,25,32,.16);border-color:rgba(215,25,32,.6)}
.shortcut-card{background:rgba(0,0,0,.20)}kbd{border-radius:2px;background:#0b0c0e}.demo-badge{border-radius:0;background:var(--rock-red)}
.audio-toggle,.shortcut-toggle{border-radius:0;border-left:3px solid var(--rock-red)}
#mobileControls button{border-radius:0}#mobileControls button[data-action="fish"]{background:rgba(145,17,22,.94)}
@media(max-width:980px){.brand-header{grid-template-columns:1fr}.subtitle{text-align:left}.level-grid{grid-template-columns:repeat(4,1fr)}.level-card{min-height:74px}.level-preview{grid-template-columns:155px 1fr}}
@media(max-width:780px){.menu-panel{padding:12px}.brand-lockup{max-height:112px}.difficulty-grid{grid-template-columns:repeat(3,1fr)}.difficulty-grid button{min-height:55px}.difficulty-grid span{display:none}.level-grid{grid-template-columns:repeat(4,1fr)}.level-card{min-height:56px}.level-no{font-size:20px}.level-copy b,.level-copy em{display:none}.level-preview{grid-template-columns:115px 1fr;min-height:68px}.venue-preview-copy p{display:none}.venue-preview-copy strong{font-size:15px}.profile-row{display:none}.menu-actions{display:none}.hint{display:none}}

/* Build 0.9.2.1 — Visual Tutorial & Progressive Onboarding */
#onboarding{background-image:linear-gradient(90deg,rgba(3,3,4,.94),rgba(3,3,4,.76)),url('assets/backgrounds/tour.webp');background-size:cover;background-position:center}
.onboarding-panel{width:min(1040px,95%);padding:22px 24px;text-align:left}.onboarding-head{border-bottom:1px solid var(--line);margin-bottom:14px;padding-bottom:10px}.onboarding-head .eyebrow,.tutorial-kicker{font-size:9px;letter-spacing:.19em;font-weight:1000;color:var(--rock-red)}.onboarding-head h2{font-size:clamp(27px,4vw,48px);margin:2px 0 4px}.onboarding-head p{margin:0;color:rgba(242,240,233,.68)}
.onboarding-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px;margin:12px 0 16px}.tutorial-body{margin:8px 0 10px}
.tutorial-card{--tone:#f2f0e9;position:relative;display:grid;grid-template-columns:150px 1fr;min-height:285px;border:1px solid rgba(255,255,255,.14);border-left:5px solid var(--tone);background:linear-gradient(120deg,rgba(255,255,255,.035),rgba(0,0,0,.18));overflow:hidden;text-align:left}.onboarding-cards .tutorial-card{grid-template-columns:112px 1fr;min-height:245px}.tutorial-card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tone);opacity:.8}
.tutorial-icon{display:grid;place-items:center;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 68%);border-right:1px solid rgba(255,255,255,.08);color:var(--tone)}.tutorial-icon img{width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 5px 15px rgba(0,0,0,.6))}.onboarding-cards .tutorial-icon img{width:64px;height:64px}
.tutorial-copy{padding:18px 20px}.tutorial-copy h3{margin:2px 0 10px;font-size:clamp(25px,3.5vw,42px);line-height:.95}.tutorial-action{display:flex;align-items:center;gap:10px;margin:0 0 12px}.tutorial-action kbd{min-width:58px;text-align:center;padding:8px 10px;border:1px solid var(--tone);font-size:12px;color:#fff}.tutorial-action strong{font-size:12px;letter-spacing:.12em;color:var(--tone)}.tutorial-copy p{font-size:12px;line-height:1.5;color:rgba(242,240,233,.78)}.tutorial-flow{display:flex;flex-wrap:wrap;gap:6px 10px;margin:13px 0}.tutorial-flow span{font-size:9px;text-transform:uppercase;font-weight:900;padding:6px 8px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25)}.tutorial-flow b{color:var(--tone);margin-right:8px}.tutorial-copy blockquote{margin:14px 0 0;padding:8px 10px;border-left:3px solid var(--tone);font-size:12px;font-weight:1000;letter-spacing:.08em;background:rgba(0,0,0,.24)}
.tone-white{--tone:#f2f0e9}.tone-green{--tone:#57d36b}.tone-yellow{--tone:#f1ca39}.tone-blue{--tone:#3d8fff}.tone-red{--tone:#ef3138}.tone-orange{--tone:#ff941f}.tone-purple{--tone:#bd6cff}.tone-cyan{--tone:#2ed5e8}.tone-pink{--tone:#f02ca8}
.tutorial-progress{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin:8px 0 12px}.tutorial-progress button{height:42px;padding:5px;opacity:1;background:rgba(255,255,255,.035);border-color:rgba(242,240,233,.22)}.tutorial-progress button:not(.active) img{filter:brightness(0) invert(1);opacity:.62}.tutorial-progress button:not(.active):hover{background:rgba(255,255,255,.075);border-color:rgba(242,240,233,.42)}.tutorial-progress button:not(.active):hover img{opacity:.84}.tutorial-progress button.active{opacity:1;border-color:var(--rock-red);background:rgba(215,25,32,.24);box-shadow:inset 0 -3px 0 var(--rock-red)}.tutorial-progress button.active img{filter:brightness(0);opacity:1}.tutorial-progress img{height:24px;width:24px;transition:opacity .15s,filter .15s}#tutorial .modal-panel{width:min(920px,95%);max-height:94vh;overflow:auto}#tutorial .modal-actions,#onboarding .modal-actions{justify-content:flex-end}
@media(max-width:780px){.tutorial-card,.onboarding-cards .tutorial-card{grid-template-columns:82px 1fr;min-height:205px}.tutorial-icon img,.onboarding-cards .tutorial-icon img{width:48px;height:48px}.tutorial-copy{padding:12px}.tutorial-copy h3{font-size:22px}.tutorial-copy p{font-size:10px}.tutorial-flow{display:none}.tutorial-progress{gap:2px}.tutorial-progress button{height:34px;padding:3px}.tutorial-progress img{width:19px;height:19px}.onboarding-panel{padding:13px}.onboarding-cards{grid-template-columns:1fr}}

/* Build 0.9.2.7 — Tutorial navigation contrast polish */


/* V6.1.4 — critical iOS iframe fix.
   Never size the game from dvw/dvh/visualViewport inside an iframe.
   Safari can expose top-level viewport metrics there, which made gameplay overflow
   after LEVEL STARTEN. The iframe is already a 16:9 box; fill that box exactly. */
html,body{width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
body{display:block;position:relative;overscroll-behavior:none;touch-action:none}
#app{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  transform:none;
  margin:0;
  overflow:hidden;
  box-shadow:none;
}
canvas{width:100%;height:100%;display:block}
#rotateNotice{display:none!important}
#mobileControls{
  left:max(8px,env(safe-area-inset-left));
  right:max(8px,env(safe-area-inset-right));
  bottom:max(7px,env(safe-area-inset-bottom));
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
}
#mobileControls button{
  min-width:0;
  min-height:42px;
  padding:6px 2px;
  font-size:clamp(8px,1vw,13px);
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
@media(max-height:500px){
  #mobileControls{left:6px;right:6px;bottom:5px;gap:4px}
  #mobileControls button{min-height:36px;padding:4px 1px;font-size:10px}
  .audio-toggle,.shortcut-toggle{top:11%;padding:5px 7px}
}

/* V6.1.5 — iOS iframe scroll-lock fix.
   Safari may scroll the iframe document when the user taps LEVEL STARTEN.
   Lock the document itself to the iframe viewport so canvas row 0 / HUD can never
   be shifted above the visible frame. */
html,body{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden!important;
  overscroll-behavior:none;
  touch-action:none;
}
#app{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
}

/* V6.1.7 — iOS text-selection/callout suppression inside the game.
   Prevent Safari's Copy / Look Up popover from appearing after long presses
   on HUD labels, shortcut hints or touch controls. Keep the player-name input
   editable/selectable. */
#app,
#app *{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
#app input,
#app textarea,
#app [contenteditable="true"]{
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  user-select:text;
}

/* V6.1.8 — unified mobile game UX.
   Every gameplay-related screen must fit a phone in landscape without page scrolling. */
#rotateNotice{z-index:500}
@media (orientation:portrait) and (max-width:900px){
  #rotateNotice{display:flex!important}
}

.level-intro-panel{width:min(900px,94%);text-align:left;background:rgba(8,9,11,.95)}
.level-intro-card{display:grid;grid-template-columns:minmax(220px,38%) 1fr;gap:20px;align-items:stretch;margin:12px 0 16px}
.level-intro-art{min-height:220px;background-image:linear-gradient(0deg,rgba(4,4,5,.35),rgba(4,4,5,.05)),var(--venue);background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.18)}
.level-intro-copy{display:flex;flex-direction:column;justify-content:center}.level-intro-copy>span{font-size:11px;letter-spacing:.16em;color:var(--rock-red);font-weight:900}.level-intro-copy h2{font-size:clamp(34px,5vw,62px);margin:5px 0}.level-intro-copy p{color:rgba(242,240,233,.76)}.level-intro-copy small{opacity:.7}

@media (pointer:coarse) and (orientation:landscape){
  /* Compact start: branding is already present on /fos; direct /game stays identifiable via title/metadata. */
  #menu .menu-panel{width:min(900px,94%);max-height:100%;padding:10px 16px;overflow:hidden;margin:auto;text-align:left}
  #menu .brand-header{display:none}
  #menu .difficulty-grid{margin:4px 0 8px;gap:8px}
  #menu .difficulty-grid button{min-height:46px;padding:6px 8px}
  #menu .difficulty-grid span{display:none}
  #menu .level-heading,#menu .level-grid,#menu .level-preview{display:none}
  #menu .start-btn{width:100%;margin:5px 0 8px;min-height:48px}
  #menu .profile-row{display:grid!important;grid-template-columns:110px minmax(180px,1fr);margin:0 0 8px;max-width:560px}
  #menu .profile-row span{display:none}
  #menu .menu-actions{display:flex!important;justify-content:flex-start;margin:0}
  #menu .hint{display:none}

  /* Level intro is deliberately a separate short beat before gameplay. */
  #levelIntro .level-intro-panel{width:min(900px,96%);max-height:100%;padding:12px 16px;overflow:hidden}
  #levelIntro .level-intro-card{grid-template-columns:34% 1fr;gap:14px;margin:7px 0 9px}
  #levelIntro .level-intro-art{min-height:150px}
  #levelIntro .level-intro-copy h2{font-size:32px;margin:3px 0}
  #levelIntro .level-intro-copy p{font-size:11px;line-height:1.35;margin:4px 0}
  #levelIntro .modal-actions{justify-content:flex-end}
  #levelIntro button{min-height:42px;padding:7px 16px}

  /* Tutorial: one focused card per page; controls and progress always remain visible. */
  #tutorial .modal-panel{width:min(900px,96%);height:96%;max-height:96%;padding:10px 14px;overflow:hidden;display:flex;flex-direction:column}
  #tutorial .modal-panel>h2{font-size:24px;margin:0 0 3px}
  #tutorial .tutorial-body{flex:1;min-height:0;margin:2px 0}
  #tutorial .tutorial-card{height:100%;min-height:0;grid-template-columns:90px 1fr}
  #tutorial .tutorial-icon img{width:52px;height:52px}
  #tutorial .tutorial-copy{padding:9px 12px;overflow:hidden}
  #tutorial .tutorial-copy h3{font-size:22px;margin:1px 0 5px}
  #tutorial .tutorial-action{margin-bottom:5px}
  #tutorial .tutorial-action kbd{padding:5px 7px}
  #tutorial .tutorial-copy p{font-size:10px;line-height:1.3;margin:4px 0}
  #tutorial .tutorial-flow{margin:5px 0;gap:3px 5px}
  #tutorial .tutorial-flow span{font-size:7px;padding:3px 5px}
  #tutorial .tutorial-copy blockquote{font-size:9px;margin:5px 0 0;padding:4px 7px}
  #tutorial .tutorial-progress{margin:4px 0;gap:3px}
  #tutorial .tutorial-progress button{height:28px;padding:2px}
  #tutorial .tutorial-progress img{width:17px;height:17px}
  #tutorial .modal-actions{flex-wrap:nowrap}
  #tutorial .modal-actions button{min-height:34px;padding:5px 11px}

  /* New-task onboarding must fit too. */
  #onboarding .onboarding-panel{width:min(900px,96%);height:96%;max-height:96%;padding:9px 12px;overflow:hidden;display:flex;flex-direction:column}
  #onboarding .onboarding-head{margin-bottom:5px;padding-bottom:5px}
  #onboarding .onboarding-head h2{font-size:23px;margin:1px 0}
  #onboarding .onboarding-head p{font-size:10px}
  #onboarding .onboarding-cards{flex:1;min-height:0;grid-template-columns:repeat(2,1fr);gap:7px;margin:4px 0;overflow:hidden}
  #onboarding .tutorial-card{min-height:0;height:100%;grid-template-columns:68px 1fr}
  #onboarding .tutorial-icon img{width:42px;height:42px}
  #onboarding .tutorial-copy{padding:7px}
  #onboarding .tutorial-copy h3{font-size:17px;margin:1px 0 4px}
  #onboarding .tutorial-copy p{font-size:8px;line-height:1.25;margin:3px 0}
  #onboarding .tutorial-flow{display:none}
  #onboarding .tutorial-copy blockquote{font-size:8px;margin:4px 0 0;padding:3px 5px}
  #onboarding .modal-actions button{min-height:36px;padding:5px 12px}

  /* Results/Game Over: summary and actions visible together, no scrolling. */
  #endScreen .results-panel{width:min(1040px,97%);height:97%;max-height:97%;padding:9px 14px;overflow:hidden;display:flex;flex-direction:column}
  #endScreen .results-panel>h2{font-size:26px;margin:0 0 4px;border-bottom-width:3px;padding-bottom:2px}
  #endStats{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.7fr;gap:6px 10px;align-content:start}
  #endStats .result-venue{grid-column:1/-1;padding:6px 10px;min-height:0}
  #endStats .result-venue span{font-size:8px}#endStats .result-venue strong{font-size:19px}#endStats .result-venue em{padding:4px 7px;font-size:8px}
  #endStats .results-summary{grid-column:1/-1;display:grid;grid-template-columns:74px 1fr;gap:8px;margin:0}
  #endStats .rating-badge{width:66px;height:66px;font-size:36px}
  #endStats .rating-stack span{font-size:8px}
  #endStats .result-grid{grid-template-columns:repeat(5,1fr);gap:4px}
  #endStats .result-stat{min-height:0;padding:5px 7px}
  #endStats .result-stat small{font-size:7px}#endStats .result-stat strong{font-size:15px}#endStats .result-stat i{font-size:7px}
  #endStats .tour-progress{grid-column:1;padding:5px 7px;margin:0}
  #endStats .tour-progress-head{margin-bottom:3px;font-size:7px}.tour-progress-head strong{font-size:9px}.tour-node{height:16px;font-size:7px}
  #endStats .next-venue,#endStats .unlock-banner{grid-column:2;padding:6px 8px;margin:0;font-size:8px}
  #endScreen .modal-actions{flex-wrap:nowrap;margin-top:5px}
  #endScreen .modal-actions button{min-height:36px;padding:5px 10px;font-size:10px}
}

@media (pointer:coarse) and (orientation:landscape) and (max-height:390px){
  #menu .difficulty-grid button{min-height:40px}#menu .start-btn{min-height:42px}
  #tutorial .tutorial-copy p{font-size:9px}#tutorial .tutorial-progress button{height:24px}
  #endStats .result-grid{grid-template-columns:repeat(5,1fr)}
}


/* V6.1.9 — all game screens stay inside the iframe; no internal page scrolling. */
html,body,#app{overflow:hidden!important;overscroll-behavior:none}
@media (pointer:fine){
  .overlay{overflow:hidden}
  .panel{max-height:96%;}
}
#endScreen.tour-finale .results-panel{border-color:rgba(217,58,46,.7);box-shadow:0 18px 90px rgba(217,58,46,.12)}
#endScreen.tour-finale #endTitle{color:#fff}
#endScreen.tour-finale .next-venue.final{border-color:rgba(239,118,107,.55);background:rgba(217,58,46,.12)}

/* V6.1.10 — compact one-line branding on desktop and phone landscape. */
#menu .brand-header{
  display:grid;
  grid-template-columns:minmax(150px,26%) 1fr minmax(150px,26%);
  align-items:center;
  gap:18px;
  margin:0 0 8px;
  min-height:76px;
}
#menu .brand-rockolymp{grid-column:1;display:flex;align-items:center;justify-content:flex-start;min-width:0}
#menu .brand-rockolymp img{display:block;width:100%;max-width:290px;height:auto;max-height:72px;object-fit:contain;object-position:left center}
#menu .brand-fos{grid-column:2;display:flex;align-items:center;justify-content:center;min-width:0}
#menu .brand-fos img{display:block;width:min(100%,560px);height:auto;max-height:92px;object-fit:contain;object-position:center center}
#menu .build-meta{margin:7px 0 0;text-align:center;font-size:8px;font-weight:900;letter-spacing:.18em;color:rgba(242,240,233,.38)}

@media (pointer:coarse) and (orientation:landscape){
  #menu .brand-header{display:grid;grid-template-columns:minmax(105px,24%) 1fr minmax(105px,24%);gap:10px;min-height:48px;margin:0 0 4px}
  #menu .brand-rockolymp img{max-width:190px;max-height:44px}
  #menu .brand-fos img{width:min(100%,390px);max-height:56px}
  #menu .build-meta{font-size:6px;line-height:1.1;margin:3px 0 0;letter-spacing:.14em}
}

@media (max-width:780px) and (orientation:landscape){
  #menu .brand-header{grid-template-columns:minmax(90px,23%) 1fr minmax(90px,23%);gap:7px;min-height:42px}
  #menu .brand-rockolymp img{max-height:38px}
  #menu .brand-fos img{max-height:48px}
}


/* V6.1.14 — Mobile Pause: touch equivalent to ESC during an active level. */
.mobile-pause-toggle{display:none;position:absolute;z-index:24;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:44px;height:44px;padding:0;border-radius:8px;background:rgba(8,10,14,.88);font:900 22px/1 Arial,Helvetica,sans-serif;letter-spacing:-2px;color:#fff;align-items:center;justify-content:center;touch-action:manipulation;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
@media (pointer:coarse) and (orientation:landscape){.mobile-pause-toggle.game-active{display:flex}.shortcut-toggle{right:60px}}
@media (pointer:coarse) and (orientation:portrait){.mobile-pause-toggle.game-active{display:none}}
.pause-panel #restartBtn{margin-top:8px}

/* V6.1.15 — compact pause branding, especially for iPhone landscape. */
.pause-brand-row{display:grid;grid-template-columns:minmax(90px,32%) 1fr;align-items:center;gap:18px;width:min(760px,92%);margin:0 auto 14px}
.pause-brand-row img{display:block;width:100%;height:auto;object-fit:contain}
.pause-brand-rock{max-height:64px;object-position:left center}
.pause-brand-fos{max-height:82px;object-position:right center}
@media (pointer:coarse) and (orientation:landscape){
  .pause-panel{width:min(860px,88%);max-height:92%;padding:14px 20px 16px;overflow:hidden}
  .pause-brand-row{grid-template-columns:minmax(105px,28%) 1fr;gap:14px;width:94%;margin:0 auto 8px}
  .pause-brand-rock{max-height:38px}
  .pause-brand-fos{max-height:48px}
  .pause-panel h2{font-size:clamp(24px,5.2vh,38px);margin:4px 0 12px}
  .pause-panel button{min-height:44px}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:430px){
  .pause-brand-row{margin-bottom:4px}.pause-brand-rock{max-height:30px}.pause-brand-fos{max-height:38px}
  .pause-panel h2{font-size:24px;margin:2px 0 8px}.pause-panel button{min-height:38px;padding:8px 10px}
}

/* V6.1.16 — player-facing PWA update prompt. */
.pwa-update-notice{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:10050;display:flex;align-items:center;gap:10px;padding:8px 10px;background:#c8101a;border:1px solid #f0444d;color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.55),0 0 0 2px rgba(200,16,26,.22);font-size:10px;font-weight:900;letter-spacing:.12em;white-space:nowrap}
.pwa-update-notice[hidden]{display:none!important}
.pwa-update-notice button{min-height:32px;padding:7px 11px;font-size:9px;font-weight:900;letter-spacing:.08em;background:#151515;border-color:rgba(255,255,255,.55);color:#fff}
@media (max-height:500px){.pwa-update-notice{bottom:6px;padding:5px 7px;font-size:8px}.pwa-update-notice button{min-height:28px;padding:5px 8px;font-size:8px}}

/* V6.1.21 — consistent level-aware control states.
   Grau = noch nicht relevant, Rot = in diesem Level relevant, Gelb = gedrückt. */
#mobileControls button[data-action]{
  background:rgba(42,44,49,.88)!important;
  border-color:rgba(255,255,255,.18)!important;
  color:rgba(255,255,255,.48)!important;
  box-shadow:none!important;
}
#mobileControls button[data-action].control-relevant{
  background:rgba(145,17,22,.94)!important;
  border-color:rgba(230,70,70,.72)!important;
  color:#fff!important;
}
#mobileControls button[data-action].active{
  background:#d6ad2d!important;
  border-color:#ffe27a!important;
  color:#17130a!important;
  box-shadow:0 0 0 2px rgba(255,235,145,.45) inset!important;
  transform:translateY(1px);
}
#mobileControls button[data-action].active .control-key{color:#17130a;border-color:rgba(23,19,10,.55);background:rgba(255,255,255,.22)}
#mobileControls button[data-action].control-locked{cursor:default}