*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --font-ui:"Trebuchet MS","Segoe UI",Verdana,system-ui,sans-serif;
  --font-display:"Arial Rounded MT Bold","Helvetica Rounded","Segoe UI Rounded","SF Pro Rounded","Trebuchet MS",Verdana,sans-serif;
  --ink:#2b2138; --gold:#e8b04b; --gold-d:#8a6d2f; --cream:#fff8e7;
}
html,body{width:100%;height:100%;background:#1c1428;overflow:hidden;font-family:var(--font-ui);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:none}
#game-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 700px at 50% 20%,#3b2a5e 0%,#1c1428 70%);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
/* container-type:size (NOT inline-size) — the menu has to compact on HEIGHT as
   much as on width, and inline-size silently disables every max-height
   container query. #frame gets its size from the viewport + --frame-ar, never
   from its contents, so size containment is safe here.
   --frame-ar is the aspect the canvas is rendered at, written by fitView() in
   js/config.js. It is NOT locked to 16:9 any more: the renderer maps the frame
   edge to edge (uniform scale, so nothing is ever squashed), and on a 4:3 or
   21:9 screen that means more of the tavern instead of black bars. The default
   is the 16:9 design until the first measurement lands. */
#frame{position:relative;width:min(100vw,177.78vh,177.78dvh);max-height:100vh;max-height:100dvh;aspect-ratio:var(--frame-ar,16/9);background:#16121f;border-radius:14px;overflow:hidden;overflow:clip;box-shadow:0 20px 80px rgba(0,0,0,.6);border:4px solid #2b2138;container-type:size;container-name:frame;flex:0 1 auto;min-width:0;min-height:0}
/* when the frame is allowed to be taller than 16:9 it may also become NARROWER
   than the 16/9-derived width, so cap the width by the real height too */
@supports (aspect-ratio:4/3){#frame{width:min(100vw,calc(100vh * var(--frame-ar-num,1.7778)),calc(100dvh * var(--frame-ar-num,1.7778)))}}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}
#vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(60,20,60,.22)}
.hidden{display:none!important}
/* HUD — floating clusters like the genre leaders (Cooking Fever / Papa's):
   no full-width bar, no wood, no brass. A soft top scrim for readability,
   white stat pills + circular action buttons with soft shadows. */
#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:5;background:linear-gradient(180deg,rgba(12,8,20,.55) 0%,rgba(12,8,20,.25) 60%,transparent 100%);border:none;padding:10px 12px 14px;gap:8px;overflow-x:auto;scrollbar-width:none;/* the page sets touch-action:none, which silently disabled this bar's own horizontal pan: when the pills and buttons did not fit a narrow frame, the overflow was unreachable by finger. Scrolling the HUD is the one gesture we re-enable. */touch-action:pan-x;-webkit-overflow-scrolling:touch}
#hud::-webkit-scrollbar{display:none}
.hud-left,.hud-right{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;flex-shrink:0}
.pill{background:rgba(255,255,255,.96);border:1px solid rgba(20,12,30,.10);border-radius:16px;padding:7px 12px;font-size:14px;font-family:var(--font-display);font-weight:800;letter-spacing:.2px;color:#2b2138;box-shadow:0 4px 14px rgba(0,0,0,.28);display:flex;gap:7px;align-items:center;backdrop-filter:blur(6px)}
.pill.cash{background:rgba(255,255,255,.96)}
.pill.cash b{color:#8a6d2f}
.pill.michelin{background:rgba(255,243,191,.96)}
.pill.deliv{pointer-events:auto;cursor:pointer;background:rgba(229,219,255,.96)}
.pill.deliv.hot{background:rgba(255,212,59,.97);animation:btnpulse 1s infinite}
.pill b{font-size:15px}
.ic{width:1.15em;height:1.15em;vertical-align:-0.22em}
.shop-item .emo .ic{width:30px;height:30px;vertical-align:middle}
.logo-ic{width:64px;height:64px}
.menu-features .ic{width:22px;height:22px;vertical-align:-4px;margin-right:4px}
.icon-btn .ic{width:17px;height:17px;vertical-align:-3px}
.big-btn .ic,.small-btn .ic{width:1.1em;height:1.1em;vertical-align:-0.2em}
.panel h2 .ic{width:1.1em;height:1.1em;vertical-align:-0.15em}
.ach::before{content:'☆ ';color:#97816a}
.ach.on::before{content:'★ ';color:#2f9e44}
.sum-ok{color:#2f9e44;font-weight:900}
.sum-no{color:#d33;font-weight:900}
#day-bar{width:90px;height:5px;background:rgba(43,33,56,.14);border-radius:99px;overflow:hidden;border:none;margin-left:6px}
#day-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg,#ffb300,#ff5d5d)}
.icon-btn{pointer-events:auto;cursor:pointer;border:1px solid rgba(20,12,30,.10);border-radius:50%;background:rgba(255,255,255,.96);width:clamp(30px,7.2cqh,40px);height:clamp(30px,7.2cqh,40px);display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:clamp(11px,3.3cqh,15px);font-weight:800;font-family:var(--font-display);color:#2b2138;box-shadow:0 4px 14px rgba(0,0,0,.28);backdrop-filter:blur(6px);flex:0 0 auto}
.icon-btn:hover{filter:brightness(1.06)}
.icon-btn:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(0,0,0,.25)}
/* The Manage button's low-stock alert. Two rules here fought and the alert
   LOST: .icon-btn.alert and .icon-btn.shop are both two-class selectors, and
   .shop comes later with the green gradient, so `background` from the alert
   never applied. The button kept animating (btnpulse) but stayed green — a
   pulsing green button that means nothing, on the one panel the player must
   open to restock. Hence the .shop.alert selector, which is more specific than
   .shop by a class, and a keyframe that actually moves the colour: "flashing
   red" has to change the colour, not just the size. */
@keyframes shopflash{0%,100%{background:#ff8787;border-color:#e03131;color:#fff;box-shadow:0 4px 14px rgba(224,49,49,.55);transform:scale(1)}50%{background:#e03131;border-color:#ff8787;color:#fff;box-shadow:0 4px 18px rgba(224,49,49,.85),0 0 0 8px rgba(224,49,49,0);transform:scale(1.06)}}
.icon-btn.alert,.icon-btn.shop.alert{animation:shopflash 1.1s infinite;background:#e03131;color:#fff}
@keyframes btnpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* text buttons stay pills (goals counter, Manage CTA) — icon-only stay circles */
#btn-goals{border-radius:16px;width:auto;height:clamp(30px,7.2cqh,40px);padding:0 clamp(8px,2.6cqh,14px);gap:6px}
.icon-btn.shop{border-radius:16px;width:auto;height:clamp(30px,7.2cqh,40px);padding:0 clamp(9px,3cqh,16px);gap:7px;background:linear-gradient(180deg,#3ddc84,#28a745);border:1px solid rgba(20,90,40,.35);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 4px 14px rgba(40,167,69,.45)}
.icon-btn.shop:hover{filter:brightness(1.08)}
#carry-bar{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;z-index:5}
.carry-item{background:rgba(255,255,255,.95);border:1px solid rgba(20,12,30,.12);border-radius:12px;padding:4px 8px;font-size:14px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.25)}
#tut-bar{position:absolute;left:50%;top:60px;transform:translateX(-50%);background:rgba(255,255,255,.97);border:1px solid rgba(20,12,30,.12);border-radius:999px;padding:7px 8px 7px 16px;font-size:14px;font-weight:800;font-family:var(--font-display);color:#2b2138;z-index:6;display:flex;gap:10px;align-items:center;box-shadow:0 6px 20px rgba(0,0,0,.35);max-width:94%;white-space:nowrap}
#tut-bar button{cursor:pointer;border:1px solid rgba(20,12,30,.15);border-radius:999px;background:#2b2138;color:#fff;font-weight:800;padding:4px 12px;font-size:13px;font-family:inherit}
#tut-bar button:active{transform:translateY(1px)}
#toast-wrap{position:absolute;top:64px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:7;pointer-events:none;align-items:center}
/* boot loader — visible on the very first paint, before any script has run */
#bootload{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 700px at 50% 25%,#3b2a5e 0%,#1c1428 70%);transition:opacity .4s ease}
#bootload.gone{opacity:0;pointer-events:none}
.boot-card{width:min(430px,86%);background:#f7e8c9;border:4px solid #2b2138;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.6);padding:20px 24px 18px;text-align:center}
.boot-logo .ic{width:54px;height:54px}
.boot-logo{animation:bootbob 1.6s ease-in-out infinite}
@keyframes bootbob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
.boot-card h1{font-size:25px;color:#2b2138;letter-spacing:.4px;margin-top:2px}
.boot-sub{font-size:12px;color:#8a6d2f;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:16px}
.boot-track{height:16px;background:#e5d3a8;border:3px solid #2b2138;border-radius:999px;overflow:hidden}
#boot-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg,#ffe45e,#e8a100);transition:width .25s ease}
.boot-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-weight:800;color:#6b5844}
.boot-row span:first-child{text-align:left;min-width:0}
#boot-pct{color:#e8a100;flex:0 0 auto}
.boot-tip{margin-top:12px;font-size:12px;color:#97816a;font-weight:700}
#streak{display:flex;gap:6px;justify-content:center;margin:8px 0;flex-wrap:wrap}
.streak-dot{width:clamp(22px,4.4cqw,34px);height:clamp(30px,6cqh,44px);border:3px solid #2b2138;border-radius:10px;background:#eee;font-size:clamp(8px,1.6cqh,10px);font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center}
.streak-dot.on{background:#ffe45e}
.streak-dot small{font-size:9px}
#fame-box{margin-top:6px;background:#fff4e0;border:3px solid #2b2138;border-radius:12px;padding:8px;font-size:12px}
#hist{display:flex;gap:clamp(2px,.6cqw,5px);align-items:flex-end;justify-content:center;margin:8px 0 4px;min-height:clamp(30px,9cqh,56px)}
.hbar{width:clamp(16px,4.4cqw,30px);background:linear-gradient(#69db7c,#2f9e44);border:2px solid #2b2138;border-radius:5px 5px 0 0;position:relative}
.hbar.neg{background:linear-gradient(#ffa8a8,#e03131)}  /* a day that lost money */
.hbar span{position:absolute;bottom:-16px;left:0;right:0;text-align:center;font-size:9px;font-weight:900;color:#6b5844}
#fame-line{font-size:11px;color:#6b5844;font-weight:700}
#ach-list{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:6px;max-height:86px;overflow-y:auto}
.ach{background:#fff;border:2px solid #2b2138;border-radius:10px;padding:4px 8px;font-weight:800;font-size:11px;opacity:.45}
.ach.on{opacity:1;background:#eaffdf;border-color:#2f9e44}
#welcome-rows{text-align:left;margin:8px 0}
.wrow{display:flex;justify-content:space-between;gap:8px;font-weight:800;font-size:clamp(11px,2.6cqh,15px);padding:clamp(3px,.9cqh,6px) 2px;border-bottom:2px dashed #e0cfa5}.wrow>span:last-child{text-align:right}
#event-badge{position:absolute;top:64px;right:8px;z-index:6;background:#2b2138;color:#ffe45e;font-weight:900;font-size:13px;padding:6px 12px;border-radius:999px;border:2px solid #ffe45e;pointer-events:none}
.toast{background:#2b2138;color:#ffe45e;font-weight:900;padding:8px 16px;border-radius:999px;border:2px solid #ffe45e;animation:pop 2.2s forwards;font-size:15px;white-space:nowrap}
@keyframes pop{0%{transform:scale(.6);opacity:0}12%{transform:scale(1.1);opacity:1}22%{transform:scale(1)}80%{opacity:1}100%{transform:translateY(-24px);opacity:0}}
/* overlays */
.overlay{position:absolute;inset:0;background:rgba(28,20,40,.72);display:flex;align-items:center;justify-content:center;z-index:20;padding:12px}
.panel{background:#fff8e7;border:4px solid #2b2138;border-radius:20px;padding:18px 20px;max-width:560px;width:100%;max-height:94%;overflow-y:auto;box-shadow:0 8px 0 #2b2138;text-align:center;display:flex;flex-direction:column}
/* Every panel's own action row — "Got it", "Start Day N", "Open restaurant",
   "Close", "Resume" — lives in a sticky footer. On a 4:3 or a phone-sized
   frame the panel content is taller than the panel, and a close button that
   has to be scrolled to is a close button QA (or a player) never finds. The
   footer pins to the bottom of the panel's own scroll box, so it is on screen
   at every frame size; margin-top:auto still parks it at the bottom when
   there is spare room. */
.panel-act{position:sticky;bottom:-18px;z-index:2;margin-top:auto;padding:10px 0 18px;background:linear-gradient(180deg,rgba(255,248,231,0) 0,#fff8e7 14px)}
.panel.wide{max-width:640px}
.panel h1{font-family:var(--font-display);font-size:42px;color:#e8392a;letter-spacing:1.5px;text-shadow:2px 2px 0 #2b2138}
.panel h1 span{color:#2f9e44}
.panel h2{font-family:var(--font-display);font-size:26px;margin-bottom:8px;color:#2b2138;letter-spacing:.5px}
.subtitle{color:#7a5c3d;font-weight:700;margin-bottom:10px}
.logo-emoji{font-size:40px}
.menu-features{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.menu-features div{background:#ffe45e;border:3px solid #2b2138;border-radius:12px;padding:6px 10px;font-weight:800;font-size:13px}
.big-btn{cursor:pointer;border:3px solid #2b2138;border-radius:14px;background:linear-gradient(#e05252,#b03226);color:#fff;font-size:20px;font-weight:900;font-family:var(--font-display);letter-spacing:.6px;text-shadow:0 2px 0 rgba(0,0,0,.35);padding:12px 26px;margin-top:12px;box-shadow:0 4px 0 #2b2138,inset 0 2px 0 rgba(255,255,255,.35);width:100%}
.big-btn:hover{filter:brightness(1.07)}
.big-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #2b2138}
.big-btn.ghost{background:#fff;color:#2b2138}
.big-btn.gold{background:#ffb300}
.small-btn{cursor:pointer;border:3px solid #2b2138;border-radius:12px;background:#eee;padding:8px 12px;font-weight:800;margin:8px 4px 0}
.small-btn.danger{background:#ffd7d7}
.menu-row{display:flex;justify-content:center}
.credit{font-size:11px;color:#97816a;margin-top:10px}
.credit a,.menu-legal a{color:#8d5a3b;font-weight:700}
.menu-legal{font-size:11px;color:#ffe8b3;opacity:.85;text-align:center;line-height:1.6;margin:2px 0 0}
.menu-legal a{color:#ffd43b}
.daily-note{font-size:13px;color:#2f9e44;font-weight:800;margin-top:8px;min-height:18px}
.how{text-align:left;font-size:14px;line-height:1.5;margin:8px 0 8px 18px}
.how .ic{width:18px;height:18px;vertical-align:-4px}
.how li{margin-bottom:6px}
.tabs{display:flex;gap:6px;justify-content:center;margin:8px 0}
.tab{cursor:pointer;border:3px solid #2b2138;border-radius:10px;padding:6px 14px;font-weight:900;font-family:var(--font-display);letter-spacing:.3px;background:linear-gradient(#f4f4f4,#dcdcdc);box-shadow:0 2px 0 #2b2138}
.tab.active{background:linear-gradient(#a4d96c,#6faf3f);color:#15310b}
.tab.alert{animation:btnpulse 1s infinite;border-color:#e03131;background:#ffe3e3}
#shop-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;padding:4px}
/* fades the cut edge ONLY while the list really has more below it, so a
   half-visible row reads as "scroll" rather than as a broken panel */
#shop-list.more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent 100%)}
.shop-item{display:flex;gap:10px;align-items:center;background:#fff;border:3px solid #2b2138;border-radius:14px;padding:8px;text-align:left}
.shop-item .emo{font-size:32px}
.shop-item .info{flex:1}
.shop-item .info b{font-size:15px}
.shop-item .info p{font-size:12px;color:#6b5844}
.mrow{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.mrow button{border:2px solid #2b2138;border-radius:8px;background:#fff;font-weight:800;font-size:11px;padding:4px 8px;cursor:pointer}
.mrow button:active{transform:translateY(1px)}
.shop-note{background:#e7f5ff;border:3px solid #339af0;border-radius:12px;padding:8px;font-size:13px;font-weight:800;color:#1864ab}
.shop-note.warn{background:#ffe3e3;border-color:#e03131;color:#a61e1e;display:flex;gap:8px;align-items:center;justify-content:space-between;text-align:left}
.shop-note.warn button{cursor:pointer;border:3px solid #2b2138;border-radius:10px;background:#ffb300;font-weight:900;padding:6px 10px;white-space:nowrap;flex-shrink:0}
.shop-item button{cursor:pointer;border:3px solid #2b2138;border-radius:10px;background:#ffb300;font-weight:900;padding:8px 10px;white-space:nowrap}
.shop-item button:disabled{background:#ccc;cursor:not-allowed}
.shop-item button.owned{background:#7CFF6b}
.shop-cash{background:#ffe45e;border:2px solid #2b2138;border-radius:99px;padding:2px 12px;font-size:16px}
.shop-footer{margin-top:8px}
#cook-slots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.cook-slot{border:3px solid #2b2138;border-radius:12px;padding:8px;background:#f3e6c8;font-size:13px;font-weight:800;min-height:74px}
.cook-slot.ready{background:#c9f7b2}
.cook-slot .bar{height:8px;background:#ddd;border-radius:99px;overflow:hidden;margin-top:6px;border:2px solid #2b2138}
.cook-slot .bar i{display:block;height:100%;background:#ff5d5d}
.cook-slot button{margin-top:6px;cursor:pointer;border:2px solid #2b2138;border-radius:8px;padding:4px 8px;font-weight:900;background:#fff}
#cook-queue{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.q-row{display:flex;justify-content:space-between;align-items:center;background:#fff;border:2px solid #2b2138;border-radius:10px;padding:6px 10px;font-weight:800;font-size:14px}
.q-row button{cursor:pointer;border:2px solid #2b2138;background:#7CFF6b;border-radius:8px;padding:4px 10px;font-weight:900}
.cook-ready{color:#2f9e44;font-weight:900}
.cook-empty{color:#97816a;font-size:11px}
#sum-rows{text-align:left;margin:8px 0}
.sum-row{display:flex;justify-content:space-between;gap:8px;font-weight:800;font-size:clamp(11px,2.6cqh,15px);padding:clamp(2px,.7cqh,4px) 2px;border-bottom:2px dashed #e0cfa5}
.sum-row.neg{color:#d33}
#sum-goals{text-align:left;background:#eaffdf;border:3px solid #2f9e44;border-radius:12px;padding:8px;margin:8px 0;font-size:13px}
.row-btns{display:flex;gap:8px}
.row-btns .big-btn{width:auto;flex:1;font-size:16px}
.row-btns .big-btn:disabled{opacity:.55;cursor:not-allowed}
/* Rewarded-ad control. The note beside it explains a disabled button in plain
   text — the guidelines forbid a popup for AdBlock, and forbid leaving the
   control clickable with no effect. */
.big-btn.gold{background:linear-gradient(#ffd66b,#e8a100);color:#2b2138;border-color:#7a5c14}
#ad-note{font-size:12px;color:#7a5c3d;font-weight:700;text-align:left;margin-top:6px;padding-left:4px}
   Il container resta dentro il pannello = sempre dentro la finestra di gioco. */
/* CrazyGames account: profilo sobrio, login mai CTA principale */
.cg-userbox{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-weight:900;font-size:14px;color:#e8cf9e}
.cg-avatar{width:30px;height:30px;border-radius:50%;border:2px solid #a8842f;background:#3d2b1f;object-fit:cover;flex:0 0 auto}
.cg-username{max-width:220px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){.panel h1{font-size:32px}.pill{font-size:12px;padding:4px 8px}#day-bar{width:56px}.big-btn{font-size:17px}}
/* ---- responsive: panels + HUD scale with the game frame (all screens) ---- */
.overlay{padding:clamp(6px,1.5cqw,12px)}
.panel{width:min(560px,94cqw);max-height:94cqh;max-height:94%;padding:clamp(10px,2.4cqw,20px) clamp(10px,2.6cqw,20px);overscroll-behavior:contain}
.panel.wide{width:min(640px,96cqw)}
.panel h1{font-size:clamp(26px,6cqw,42px)}
.panel h2{font-size:clamp(18px,3.6cqw,26px)}
.subtitle{font-size:clamp(11px,1.9cqw,14px)}
.big-btn{font-size:clamp(15px,2.6cqw,20px);padding:clamp(8px,1.6cqw,12px) clamp(14px,3cqw,26px)}
.small-btn{font-size:clamp(11px,1.7cqw,14px)}
.how{font-size:clamp(11px,1.8cqw,14px)}
#hud{padding:clamp(6px,1cqw,10px) clamp(6px,1.2cqw,12px);gap:clamp(4px,0.9cqw,8px)}
.hud-left,.hud-right{gap:clamp(4px,0.8cqw,8px)}
.pill{font-size:clamp(11px,1.8cqw,15px);padding:clamp(5px,0.8cqw,7px) clamp(9px,1.5cqw,12px);border-width:1px}
.pill b{font-size:1.05em}
/* font size now comes from the base rule (off the frame HEIGHT); re-setting it
   here off cqw fought it on small frames and won, leaving 11px text in a 30px
   button. Only the border is tiered. */
.icon-btn{border-width:1px}
#btn-goals.icon-btn,.icon-btn.shop{padding:0 clamp(10px,1.5cqw,14px)}
#day-bar{width:clamp(40px,11cqw,90px);height:5px}
#toast-wrap{top:clamp(44px,9cqw,64px);max-width:94cqw}
.toast{font-size:clamp(11px,1.9cqw,15px);white-space:normal;text-align:center;max-width:94cqw}
/* guidance line: same top column, softer than a reward toast */
.toast.hint-toast{background:rgba(20,14,28,.92);border-color:rgba(232,176,75,.55);color:#ffe8b3;font-weight:700;font-size:clamp(11px,1.7cqw,14px);letter-spacing:.2px}
/* while the tutorial pill is up, the toast column drops below it: both are
   centred, so without this the guidance line lands on top of Step 1/4 */
#tut-bar:not(.hidden) ~ #toast-wrap{top:clamp(98px,15cqw,116px)}
#carry-bar{left:clamp(6px,1.4cqw,12px);bottom:clamp(6px,1.6cqw,12px);max-width:60cqw;flex-wrap:wrap}
.carry-item{font-size:clamp(10px,1.6cqw,14px)}
#event-badge{top:clamp(44px,9cqw,64px);font-size:clamp(10px,1.6cqw,13px)}
.menu-features div{font-size:clamp(10px,1.6cqw,13px)}
#shop-list{max-height:46vh;max-height:26cqw}
#cook-slots{grid-template-columns:1fr 1fr}
.q-row{font-size:clamp(11px,1.8cqw,14px)}
/* narrow frame (small laptop window, split screen, portrait phone): stack + compact */
@container frame (max-width: 700px){
  #hud{flex-wrap:wrap;row-gap:4px}
  .hud-left,.hud-right{flex-wrap:wrap;row-gap:4px}
  #cook-slots{grid-template-columns:1fr}
  .row-btns{flex-wrap:wrap}
  .row-btns .big-btn{flex:1 1 140px}
  .tabs{flex-wrap:wrap}
  .tab{padding:5px 10px;font-size:12px}
  .menu-features{gap:5px}
  #hist{flex-wrap:wrap;min-height:0}
  .hbar{width:22px}
  .shop-item .emo{font-size:24px}
  .vol-row{flex-wrap:wrap}
}
@container frame (max-width: 460px){
  #hud-day #clock{display:none}
  .menu-features div{padding:4px 7px}
  .panel{border-width:3px;border-radius:14px}
  .how{margin-left:14px}
  .streak-dot{width:28px;height:38px}
}
/* short frame (low height laptop / CrazyGames header+footer): tighter panels */
@container frame (max-height: 520px){
  .panel{padding:10px 12px}
  .menu-features{margin:6px 0}
  #ach-list{max-height:52px}
  .logo-ic{width:40px;height:40px}
  .big-btn{margin-top:8px}
}
/* viewport fallbacks (browser senza container queries) + fullscreen edge cases */
@media (max-width:760px){
  #frame{border-width:2px;border-radius:8px}
  #cook-slots{grid-template-columns:1fr}
  .row-btns{flex-wrap:wrap}
  .tabs{flex-wrap:wrap}
}
@media (max-height:520px){
  #frame{border-width:2px;border-radius:8px}
  .panel{padding:10px 12px}
}
@media (orientation:portrait) and (max-width:600px){
  #frame{border-radius:8px}
  /* the safe-area inset STAYS here. This rule used to zero it, which put the
     frame under the status bar and behind the home indicator on an iPhone —
     the HUD's top row and the touch stick were both in the cut-out. */
}
/* ---- tavern theme: pause panel, dungeon wood & torchlight ---- */
/* overflow-x:hidden clips the corner glows; overflow-y MUST stay auto — it
   was `hidden`, which on a short frame made Resume, the volume sliders and
   the quit row permanently unreachable instead of merely scrolled. */
#pause .panel.tavern{position:relative;background:linear-gradient(180deg,#3a2b22 0%,#2a1c26 55%,#1c1424 100%);border:4px solid #a8842f;color:#ffe8b3;box-shadow:0 8px 0 #14101c,0 0 26px rgba(0,0,0,.55);overflow-x:hidden;overflow-y:auto}
#pause .panel.tavern .panel-act{background:linear-gradient(180deg,rgba(30,21,36,0) 0,#2a1c26 14px)}
#pause .panel.tavern::before,#pause .panel.tavern::after{content:'';position:absolute;top:-70px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(255,170,60,.16) 0%,rgba(255,150,40,0) 70%);pointer-events:none}
#pause .panel.tavern::before{left:-60px}
#pause .panel.tavern::after{right:-60px}
#pause .panel.tavern h2{color:#e3b64f;text-shadow:2px 2px 0 #2b2138}
#pause .panel.tavern .logo-wrap{display:inline-block;border:3px solid #a8842f;border-radius:50%;background:#3d2b1f;padding:6px}
#pause .panel.tavern .logo-wrap .logo-ic{width:44px;height:44px}
.pause-info{font-weight:900;color:#e3b64f;margin:2px 0 8px}
.pause-info .ic{width:1.05em;height:1.05em;vertical-align:-0.15em}
.pause-hint{background:#fff4e0;color:#5c3d1e;border:3px solid #8a6d2f;border-radius:12px;padding:8px 10px;font-size:13px;font-weight:700;margin:0 0 10px;text-align:left}
.vol-row{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.25);border:2px solid #8a6d2f;border-radius:12px;padding:6px 10px;margin-top:8px}
.vol-label{flex:0 0 auto;font-weight:900;color:#e8cf9e;font-size:14px;display:flex;gap:6px;align-items:center;min-width:92px}
.vol-row input[type=range]{flex:1;accent-color:#b08d3e;cursor:pointer}
.vol-row .small-btn{margin:0;flex:0 0 auto}
#pause .panel.tavern .row-btns{margin-top:4px}
/* ---- main menu backdrop: edge scrims only, the live scene stays visible ---- */
#menu{padding:clamp(4px,1cqw,10px)}
/* Lighter than it was: the backdrop now paints its own night (a cool wash,
   warm pools at each light source and a vignette — see drawMenuBG), and a
   .62 scrim on top of that crushed the room into brown murk. This only has to
   seat the UI at the top and bottom rows. */
#menu.menu-overlay{background:linear-gradient(180deg,rgba(14,9,24,.44) 0%,transparent 22%,transparent 62%,rgba(14,9,24,.5) 100%)}
/* ---- help 2.0: 4 steps + tips, glanceable ---- */
.help-tag{color:#7a5c3d;font-weight:700;font-size:clamp(11px,1.8cqw,14px);margin-bottom:8px}
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
.how-step{position:relative;background:#fff4e0;border:3px solid #2b2138;border-radius:14px;padding:20px 8px 8px;text-align:center;box-shadow:0 3px 0 #2b2138}
.how-step .ic{width:26px;height:26px}
.how-step b{font-size:clamp(12px,1.9cqw,14px)}
.how-step p{font-size:clamp(10px,1.6cqw,12px);color:#6b5844;margin-top:2px}
.how-num{position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:#ff5d5d;color:#fff;font-weight:900;font-size:14px;line-height:22px;border:2px solid #2b2138}
.how-tips{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0 8px;text-align:left}
.how-tips>div{display:flex;gap:8px;align-items:flex-start;background:#f3eedd;border:2px solid #2b2138;border-radius:10px;padding:6px 8px;font-size:clamp(10px,1.6cqw,12px)}
.how-tips .ic{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.how-controls{font-size:clamp(10px,1.6cqw,12px);color:#97816a;font-weight:700;margin-bottom:2px}
@container frame (max-width: 560px){
  .how-steps{grid-template-columns:1fr 1fr}
  .how-tips{grid-template-columns:1fr}
}
/* ---- (removed: old wood/brass HUD theme — replaced by floating pills above) ---- */
/* ---- main menu: a header bar across the top, controls down the sides, and a
       FREE centre so the live tavern reads through. The brand used to live in
       the left column, where a 3-line title ate 180px of a 500px frame and
       pushed the rail off-screen; as a header it gets a full-width line. ---- */
/* ==========================================================================
   MAIN MENU — a tavern wall, not a dashboard.
   The old screen was twelve bordered rectangles: .brand, four .tchip, five
   .rail-btn and two .mcard, ALL with the same 2px rgba(232,176,75,.7) border,
   the same 12-14px radius, the same dark fill and the same shadow. Uniform to
   the point of looking generated — and Goals and Achievements each appeared
   twice, once as a rail row and once as a card.
   Now there are four materials, four different sizes and one asymmetric
   placement, and the middle of the screen is left to the tavern itself:
     wood      the signboard (the one big warm surface, carved lettering)
     brass     the gauge strip, the nav plaques, the action plate (highlight
               band + rivets + dark seam = metal; a "framed" background-clip
               gives the plaques a wood rim, like plates screwed to a board)
     parchment the note on the right — the same stock as the detail panels, so
               opening one reads as turning a page, not opening another app
     iron      the one heavy object: OPEN THE TAVERN
   ========================================================================== */
.menu-screen{
  --wood:repeating-linear-gradient(92deg,rgba(0,0,0,.13) 0 2px,rgba(255,255,255,.05) 2px 4px,transparent 4px 11px),
         linear-gradient(176deg,#7a5330 0%,#5d3d22 46%,#422c19 100%);
  --brass:linear-gradient(180deg,#e3c78d 0%,#c8a459 22%,#a37f38 54%,#bb9850 78%,#d6b87c 100%);
  --brass-ink:#3a2708;
  --rivet:radial-gradient(circle 2.4px at 9px 9px,#fdf0c8 0 42%,#7d5a1c 62%,transparent 70%),
          radial-gradient(circle 2.4px at calc(100% - 9px) 9px,#fdf0c8 0 42%,#7d5a1c 62%,transparent 70%),
          radial-gradient(circle 2.4px at 9px calc(100% - 9px),#fdf0c8 0 42%,#7d5a1c 62%,transparent 70%),
          radial-gradient(circle 2.4px at calc(100% - 9px) calc(100% - 9px),#fdf0c8 0 42%,#7d5a1c 62%,transparent 70%);
  width:100%;height:100%;display:grid;
  /* four rows now: the gauge sits UNDER the signboard and reaches across the
     middle column, which is what stops this reading as three tidy columns */
  grid-template-columns:minmax(198px,25cqw) minmax(0,1fr) minmax(205px,27cqw);
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(5px,.9cqw,11px);padding:clamp(6px,1.2cqw,16px);overflow:hidden;
  /* aged brass, not polished gold. The first pass used a bright highlight
     band, which made the NAV read louder than the primary action — the wrong
     hierarchy: you should not be able to see the menu better than you can see
     the Play button. Everything metal here is a notch duller and darker. */
}
.menu-top{display:contents}

/* ---- WOOD: the signboard. The hero, and the only big warm surface ------- */
.brand{grid-area:1/1/2/2;min-width:0;position:relative;display:flex;gap:clamp(6px,1cqw,13px);align-items:center;
  background:var(--wood);border-radius:5px 13px 6px 11px;
  border:2px solid #2a1a0d;
  box-shadow:inset 0 2px 0 rgba(255,214,150,.28),inset 0 -3px 8px rgba(0,0,0,.55),0 5px 0 rgba(20,12,26,.85),0 12px 26px rgba(0,0,0,.5);
  padding:clamp(6px,1.1cqw,13px) clamp(9px,1.5cqw,18px)}
/* a brass rim, drawn as a border over the wood: the frame is metal, the board
   is not. Two layers, one element — no extra markup. */
.brand::before{content:'';position:absolute;inset:3px;border:1px solid rgba(226,186,112,.5);border-radius:3px 10px 4px 8px;pointer-events:none}
.brand-titles{min-width:0}
@keyframes torchflick{0%,100%{box-shadow:0 0 14px rgba(255,170,60,.55)}50%{box-shadow:0 0 26px rgba(255,190,80,.9)}}
@keyframes playglow{0%,100%{box-shadow:0 4px 0 #1a1206,0 0 10px rgba(255,196,96,.3)}50%{box-shadow:0 4px 0 #1a1206,0 0 26px rgba(255,206,120,.75)}}
.brand-logo{width:clamp(40px,6cqw,62px);height:clamp(40px,6cqw,62px);border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 32%,#e9c579 0%,#a67c34 48%,#6b4c18 100%);
  border:2px solid #33220c;box-shadow:inset 0 1px 0 rgba(255,245,214,.75),inset 0 -2px 5px rgba(0,0,0,.5),0 2px 5px rgba(0,0,0,.55),0 0 16px rgba(255,170,60,.45);
  animation:torchflick 2.6s ease-in-out infinite}
.brand-logo .logo-ic{width:68%;height:68%}
/* CARVED, not printed: a dark bite above the letter and a light one below */
.brand h1{font-family:var(--font-display);font-weight:900;font-size:clamp(19px,2.55cqw,30px);color:#f4d691;letter-spacing:1.2px;line-height:1.06;
  text-shadow:0 2px 0 rgba(0,0,0,.62),0 -1px 0 rgba(255,226,168,.3),0 3px 6px rgba(0,0,0,.4)}
.brand h1 span{color:#e08c46}
.brand .subtitle{color:#e5c79a;font-weight:700;font-size:clamp(9px,1.28cqw,12px);line-height:1.35;margin-top:3px;text-shadow:0 1px 2px rgba(0,0,0,.65)}
.brand-user{display:flex;align-items:center;gap:8px;margin-top:4px;min-height:0;max-width:100%}
.brand-user .cg-userbox{margin:0;background:rgba(28,16,6,.62);border:1px solid rgba(226,186,112,.42);border-radius:999px;padding:2px 10px 2px 2px;max-width:100%;overflow:hidden}
.login-link{background:none;border:none;color:#f0cd85;font-weight:800;font-size:12px;cursor:pointer;text-decoration:underline;padding:0}

/* ---- BRASS: the gauge. Four readings on ONE instrument ------------------ */
/* row 1 is as tall as the signboard, so the gauge has to say no to stretching:
   left to itself it grew to 179px of mostly empty brass. `end` also parks it
   flush against the note below, so the right column reads as one status unit. */
.gauge{grid-area:1/3/2/4;align-self:end;min-width:0;position:relative;display:grid;grid-template-columns:1fr 1fr;align-content:center;
  background:var(--brass);background-image:var(--rivet),var(--brass);background-size:auto,auto;background-position:center,center;
  border:2px solid #33220c;border-radius:9px 6px 10px 7px;color:var(--brass-ink);
  box-shadow:inset 0 1px 0 rgba(255,248,222,.8),inset 0 -2px 6px rgba(90,60,10,.45),0 4px 0 rgba(20,12,26,.8),0 9px 20px rgba(0,0,0,.45);
  padding:clamp(4px,.65cqh,8px) clamp(5px,.8cqw,10px)}
/* the engraved divisions between readings: an inset seam, not a border box */
/* the division is a single milled groove between the four quadrants: down the
   middle of each row, and across the middle of the plate */
.gauge-cell{display:flex;gap:6px;align-items:center;min-width:0;position:relative;padding:clamp(3px,.5cqh,6px) clamp(6px,.9cqw,11px)}
.gauge-cell:nth-child(even)::before,.gauge-cell:nth-child(n+3)::after{content:'';position:absolute;background:linear-gradient(180deg,transparent,rgba(60,40,8,.5) 22%,rgba(60,40,8,.5) 78%,transparent);box-shadow:1px 0 0 rgba(255,240,200,.4)}
.gauge-cell:nth-child(even)::before{left:0;top:8%;bottom:8%;width:1px;box-shadow:-1px 0 0 rgba(255,240,200,.4)}
.gauge-cell:nth-child(n+3)::after{left:5%;right:5%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(60,40,8,.5) 22%,rgba(60,40,8,.5) 78%,transparent);box-shadow:0 1px 0 rgba(255,240,200,.4)}
.gauge-cell .ic{width:clamp(16px,2cqw,22px);height:clamp(16px,2cqw,22px);flex:0 0 auto;opacity:.72}
.gauge-cell b{font-size:clamp(12px,1.75cqw,18px);line-height:1.05;font-weight:900;
  text-shadow:0 1px 0 rgba(255,244,208,.6)}
.gauge-cell small{display:block;color:rgba(58,39,8,.72);font-weight:800;font-size:clamp(8px,1.12cqw,11px);line-height:1.15;letter-spacing:.3px}
.gauge-cell>div{display:flex;flex-direction:column;min-width:0}
.gauge-cell.gold b{color:#6b3f04}
.tstars{color:#7a4a06;font-size:clamp(8px,1.2cqw,12px);letter-spacing:1px;line-height:1;opacity:.85}

/* ---- BRASS: the nav plaques, on a wood rim ------------------------------ */
/* `safe center`, not `center`: when the plaques are taller than the space the
   column was given, a centred flex container overflows at BOTH ends and the
   first one becomes impossible to scroll to — Achievements was simply
   unreachable on a 1440x810 frame. `safe` falls back to flex-start the moment
   centring would clip. */
.menu-rail{grid-column:1;grid-row:2;align-self:stretch;width:100%;display:flex;flex-direction:column;gap:clamp(4px,.7cqw,9px);justify-content:safe center;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}
.menu-rail::-webkit-scrollbar{display:none}
/* a brass face inset in a wooden surround: two background layers, the outer
   one clipped to the border box, is the board the plate is screwed to */
.rail-btn{position:relative;display:flex;align-items:center;gap:9px;color:#2f1f06;cursor:pointer;text-align:left;font-family:inherit;
  border:3px solid transparent;border-radius:8px 5px 9px 6px;padding:clamp(6px,.95cqw,11px) clamp(7px,1cqw,12px);
  background-image:linear-gradient(180deg,#e3c78d 0%,#c8a459 26%,#a37f38 58%,#bb9850 100%),var(--wood);
  background-clip:padding-box,border-box;background-origin:padding-box,border-box;
  box-shadow:inset 0 1px 0 rgba(255,248,222,.75),inset 0 -2px 5px rgba(90,60,10,.4),0 3px 0 rgba(20,12,26,.7),0 6px 14px rgba(0,0,0,.4);
  transition:transform .12s,filter .12s;flex:0 0 auto;
  /* a hard floor: on a 270px-tall frame the rail gets ~70px for three rows,
     and without this the grid squeezed the plaques to 20px — under the 24px
     touch target AND clipping the icon inside them */
  min-height:30px}
.rail-btn::before{content:'';position:absolute;inset:0;background-image:var(--rivet);pointer-events:none;opacity:.9}
.rail-btn:hover{filter:brightness(1.07)}
.rail-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,248,222,.6),inset 0 -2px 5px rgba(90,60,10,.4),0 1px 0 rgba(20,12,26,.7)}
.rail-btn .ic{width:clamp(21px,2.85cqw,31px);height:clamp(21px,2.85cqw,31px);flex:0 0 auto;opacity:.75}
.rail-btn span{flex:1;min-width:0}
.rail-btn b{display:block;font-size:clamp(12px,1.72cqw,17px);line-height:1.15;font-weight:900;text-shadow:0 1px 0 rgba(255,244,208,.55)}
.rail-btn small{color:rgba(58,39,8,.74);font-weight:800;font-size:clamp(9px,1.28cqw,12px);line-height:1.2;display:block}
.rail-btn i{font-style:normal;color:#6b4207;font-size:clamp(15px,2.3cqw,23px);font-weight:900;opacity:.8}

/* ---- IRON: the one heavy object ---------------------------------------- */
.menu-cta{grid-column:1;grid-row:3;align-self:end;width:100%;display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:0}
/* PAINTED WOOD, BRASS LETTERS. This is the one thing on the wall you are
   meant to hit, so it is the only saturated red in the menu and the only
   surface allowed to glow. An earlier brass-and-brass pass made it the
   quietest object on screen, which is exactly backwards. */
.cta-main{cursor:pointer;border:3px solid #14101c;border-radius:12px 7px 13px 8px;
  background-image:linear-gradient(180deg,#d4453f 0%,#b02f2a 42%,#8a1f1c 100%),var(--wood);
  background-clip:padding-box,border-box;background-origin:padding-box,border-box;
  color:#ffe2a2;font-family:var(--font-display);font-weight:900;letter-spacing:1.6px;line-height:1.15;
  font-size:clamp(15px,2.55cqw,29px);padding:clamp(9px,1.25cqw,17px) clamp(10px,2cqw,30px);
  text-shadow:0 2px 0 rgba(60,8,6,.85),0 0 18px rgba(255,200,110,.45);
  box-shadow:inset 0 2px 0 rgba(255,190,170,.32),inset 0 -3px 8px rgba(60,8,6,.55),0 5px 0 #14101c,0 0 26px rgba(226,60,50,.4);
  animation:playglow 2.4s ease-in-out infinite;position:relative}
.cta-main::before{content:'';position:absolute;inset:0;background-image:var(--rivet);pointer-events:none;filter:brightness(.85)}
.cta-main:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,214,140,.22),0 2px 0 #14101c}
.cta-sub{cursor:pointer;border:3px solid #33220c;border-radius:7px;background:var(--brass);color:#3a2708;font-weight:900;font-size:clamp(12px,1.78cqw,17px);padding:clamp(7px,1cqh,11px);font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,248,222,.8),inset 0 -2px 5px rgba(90,60,10,.4),0 3px 0 rgba(20,12,26,.75)}
.cta-sub:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,248,222,.6)}
.menu-legal{font-size:clamp(9px,1.15cqw,11px);color:#d8bb8a;opacity:.8;text-align:center;line-height:1.55;margin:1px 0 0;text-shadow:0 1px 2px rgba(0,0,0,.8)}

/* ---- PARCHMENT: one note, two sections, pinned -------------------------- */
.menu-note{grid-area:2/3/4/4;min-height:0;align-self:start;max-height:100%;position:relative;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;
  background:linear-gradient(174deg,#fdf3dc 0%,#f6e6c2 58%,#eeddb4 100%);
  border:1px solid #b99b62;border-radius:4px 9px 5px 8px;
  box-shadow:0 5px 0 rgba(20,12,26,.55),0 12px 26px rgba(0,0,0,.5),inset 0 0 34px rgba(160,120,60,.16);
  padding:clamp(10px,1.5cqw,17px) clamp(8px,1.2cqw,15px);display:flex;flex-direction:column;gap:clamp(7px,1cqw,12px)}
.menu-note::-webkit-scrollbar{display:none}
/* two brass tacks hold it to the wall */
.menu-note::before,.menu-note::after{content:'';position:absolute;top:-4px;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fff3cf 0 34%,#c39a45 60%,#6d4d15 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.55);pointer-events:none}
.menu-note::before{left:13%}
.menu-note::after{right:13%}
.note-sec{display:flex;flex-direction:column;gap:5px;min-height:0}
.note-rule{height:0;border-top:1px dashed rgba(122,92,42,.55);margin:1px 0;flex:0 0 auto}
.mcard-head{display:flex;align-items:center;gap:6px;font-size:clamp(11px,1.58cqw,15px);color:#4a3413;font-weight:900}
.mcard-head .ic{width:1.35em;height:1.35em;opacity:.75}
.mcard-head span{margin-left:auto;color:#8a5c14;font-weight:900;font-size:.88em}
.recent-ach{display:flex;flex-direction:column;gap:4px}
.rach{display:flex;align-items:center;gap:6px;font-size:clamp(10px,1.4cqw,13px);font-weight:700;color:#4a3413;opacity:.5}
.rach.on{opacity:1}
.rach span:first-child{color:#c8901c}
.rach b{margin-left:auto;color:#7a5a20}
.menu-goals{display:flex;flex-direction:column;gap:6px}
.mgoal{font-size:clamp(10px,1.4cqw,13px);color:#4a3413}
.mgoal-top{display:flex;align-items:center;gap:6px;font-weight:800}
.mgoal-top .ic{width:1.25em;height:1.25em;opacity:.7}
.mgoal-top b{margin-left:auto;font-size:.9em;color:#8a5c14}
.mgoal.done .mgoal-top b{color:#3f7d1f}
.mgoal-bar{height:7px;background:rgba(120,92,44,.22);border-radius:99px;overflow:hidden;margin-top:3px;border:1px solid rgba(122,92,42,.3)}
.mgoal-bar i{display:block;height:100%;background:linear-gradient(90deg,#7cb342,#4c8b2a);border-radius:99px}
.mgoal.done .mgoal-bar i{background:linear-gradient(90deg,#e8b53c,#c8901c)}
/* a small brass tab, not another full-width card button */
.note-tab{align-self:flex-start;cursor:pointer;font-family:inherit;font-weight:900;font-size:clamp(10px,1.36cqw,13px);
  color:#3a2708;border:2px solid #6b4a16;border-radius:999px;padding:clamp(4px,.7cqw,7px) clamp(9px,1.3cqw,15px);
  background:linear-gradient(180deg,#f7e3ae 0%,#dcb466 30%,#c1953f 100%);
  box-shadow:inset 0 1px 0 rgba(255,250,230,.8),0 2px 0 rgba(20,12,26,.6);transition:filter .12s,transform .12s}
.note-tab:hover{filter:brightness(1.06)}
.note-tab:active{transform:translateY(2px);box-shadow:none}
.mgoal.done .mgoal-bar i{background:linear-gradient(90deg,#ffd43b,#e8a100)}
.menu-ov .panel{max-height:92%}
/* cq units, not vh. vh is the BROWSER window: on a phone the frame is a short
   band inside a tall viewport, so 40vh claimed more height than the frame had
   and the achievements list ran off the bottom of the panel. */
.menu-ov #ach-list{display:flex;max-height:min(40vh,34cqh);overflow-y:auto}
/* rotate hint — portrait phones only, and it must never cover the game on a
   desktop window that is merely tall */
/* A HINT, not a lock. This was an opaque full-bleed panel that swallowed every
   tap: if the geometry heuristic ever misfired, the player was simply stuck
   with no dismissal. So it dims the tavern instead of hiding it, and takes no
   pointer input — someone who insists on playing upright can, on a 390x293
   band, rather than being locked out of their own save. */
#rotate{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;background:rgba(22,18,31,.88);color:#ffe8b3;font-family:var(--font-ui);pointer-events:none}
#rotate .ic{width:44px;height:44px;fill:none;stroke:#e8b04b;stroke-width:1.6}
#rotate b{font-family:var(--font-display);font-size:18px}
#rotate span{font-size:13px;color:#c9ab7a;max-width:22em}
/* statistics overlay owns the finance chart now (it used to be a menu card,
   where it was the first thing to be cut off on short frames) */
.stats-chart{background:#f3eedd;border:3px solid #2b2138;border-radius:14px;padding:8px 10px;margin-bottom:8px}
.stats-chart .mcard-head{color:#7a5c3d;margin-bottom:2px}
#stats-rows{margin:6px 0}
/* scrollable panels must accept wheel + touch scroll (page itself stays locked) */
.panel,#ach-list,#shop-list,.menu-rail,.menu-note{touch-action:pan-y}
.panel{scrollbar-width:thin}
.set-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
/* ---- touch controls: joystick left, single action button right ----
   SCALED BY THE FRAME, not in fixed px. They used to be 120/54/92px with an
   86px bottom pad, which is fine on a 907px frame and ruinous on a 390px one:
   the stick plus the padding ate a third of a 293px-tall play area. Every
   dimension is a clamp() off the container height, so the stick is always about
   a fifth of the frame and never more than a quarter of it. */
#touch-ui{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 clamp(8px,3cqw,18px) clamp(8px,7cqh,86px);z-index:8;pointer-events:none;touch-action:none}
#joy{pointer-events:auto;width:clamp(64px,26cqh,120px);height:clamp(64px,26cqh,120px);border-radius:50%;background:rgba(20,14,28,.5);border:max(2px,1cqh) solid rgba(232,176,75,.8);position:relative;touch-action:none}
#joy-knob{position:absolute;left:50%;top:50%;width:46%;height:46%;border-radius:50%;background:linear-gradient(#ffe98a,#e0a83e);border:max(2px,.8cqh) solid #2b2138;transform:translate(-50%,-50%);box-shadow:0 3px 0 #14101c}
#btn-act{pointer-events:auto;width:clamp(50px,21cqh,92px);height:clamp(50px,21cqh,92px);border-radius:50%;border:max(2px,1cqh) solid #2b2138;background:linear-gradient(#a4d96c,#6faf3f);color:#15310b;font-family:var(--font-display);font-weight:900;font-size:clamp(18px,8cqh,34px);box-shadow:0 5px 0 #14101c,inset 0 2px 0 rgba(255,255,255,.5);touch-action:none}
#btn-act:active{transform:translateY(3px);box-shadow:0 1px 0 #14101c}
#victory .panel.victory-panel{background:linear-gradient(180deg,#fff8e7,#ffe9b8);border-color:#a8842f}
#victory .logo-wrap{display:inline-block;border:3px solid #a8842f;border-radius:50%;background:#3d2b1f;padding:6px}
#victory .logo-wrap .logo-ic{width:44px;height:44px}
#victory-rows{text-align:left;margin:8px 0}

/* ---- menu responsive ladder -------------------------------------------------
   Driven by BOTH axes. CrazyGames serves 16:9 frames from 821x462 (small
   laptop) up to 1920x1080, and 907x510 is the single most common one. Every
   column scrolls rather than clips, so a tier can only make the menu tighter,
   never make a control disappear — the earlier layout silently lost two rail
   buttons and a card at 907x510. */

/* narrower than ~1080: the side columns narrow, the tagline goes */
@container frame (max-width: 1080px){
  .menu-screen{grid-template-columns:minmax(190px,26cqw) minmax(0,1fr) minmax(195px,28cqw)}
  .brand .subtitle{display:none}
  .brand-user{margin-top:0}
}
/* 1366x768 and down: trim the rail so six rows always fit the leftover height */
@container frame (max-height: 700px){
  .cta-main{font-size:clamp(16px,2.2cqw,24px);padding:8px 14px}
  .menu-rail{gap:5px}
  .rail-btn{padding:5px 9px}
  .rail-btn .ic{width:clamp(20px,2.6cqw,28px);height:clamp(20px,2.6cqw,28px)}
  .brand{padding:6px 12px}
  .brand-logo{width:clamp(36px,4.6cqw,50px);height:clamp(36px,4.6cqw,50px)}
  .gauge-cell{padding:1px 6px}
  .menu-note{padding:9px 11px}
}
/* 1216x684 / 1280x720: cards show two goals instead of three */
@container frame (max-height: 620px){
  .menu-goals>.mgoal:nth-child(n+3){display:none}
  .recent-ach>.rach:nth-child(n+3){display:none}
}
/* 907x510 and friends: the tightest non-phone frame CrazyGames serves */
@container frame (max-height: 545px){
  .brand h1{font-size:20px;white-space:nowrap}
  .brand-logo{width:32px;height:32px}
  .brand-titles .login-link{font-size:11px}
  .rail-btn{padding:4px 8px;border-radius:10px;gap:7px}
  .rail-btn b{font-size:12px}
  .rail-btn small{font-size:10px}
  .rail-btn i{font-size:15px}
  .cta-main{font-size:17px;letter-spacing:.5px}
  .gauge{padding:5px 5px}
  .gauge-cell{padding:1px 5px;gap:5px}
  .gauge-cell .ic{width:17px;height:17px}
  .gauge-cell small{font-size:8px}
  .gauge-cell b{font-size:13px}
  .menu-note{gap:6px;padding:8px 10px}
  .note-tab{font-size:11px;padding:5px 11px}
}
/* narrow: the right column costs more than it earns, so the parchment note
   goes — everything on it is one rail click away, which is the whole point of
   having merged Goals and Achievements into a single note in the first place */
@container frame (max-width: 880px){
  .menu-screen{grid-template-columns:minmax(190px,44cqw) minmax(0,1fr)}
  .brand{grid-area:1/1/2/3}
  .gauge{grid-area:2/1/3/2}
  .menu-rail{grid-area:3/1/4/2}
  .menu-cta{grid-area:3/2/4/3;align-self:end}
  .menu-note{display:none}
}
/* phone-sized frame: one column, rail becomes a 2x3 block under the CTA */
@container frame (max-width: 660px){
  .menu-screen{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr)}
  .brand{grid-area:1/1/2/2}
  .gauge{grid-area:2/1/3/2}
  .menu-cta{grid-area:3/1/4/2}
  .menu-rail{grid-area:4/1/5/2;display:grid;grid-template-columns:1fr 1fr;align-content:start;justify-content:stretch}
  .menu-note{display:none}
  .brand h1{font-size:22px;white-space:nowrap}
}
/* a frame shorter than ~860px cannot afford two lines per plaque: five 62px
   plaques need 345px, which at 720px left the rail 123px and hid four of five
   entries behind a scroll nobody would find. So the count moves inline beside
   the label — same information, one line, and all five fit. */
@container frame (max-height: 860px){
  .rail-btn span{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .rail-btn small{display:inline;font-size:clamp(8px,1.1cqw,11px)}
  .rail-btn .ic{width:clamp(17px,2.1cqw,22px);height:clamp(17px,2.1cqw,22px)}
  .rail-btn{padding:clamp(5px,.7cqw,8px) clamp(7px,1cqw,11px);gap:7px}
  .rail-btn b{font-size:clamp(11px,1.55cqw,15px)}
}
/* very short frames (a 360x800 phone yields a 270px-tall game frame): the
   vertical budget is the binding constraint, so shave the decorative padding
   off everything rather than letting the plaques collapse. */
@container frame (max-height: 340px){
  .brand{padding:4px 9px}
  .brand-logo{width:30px;height:30px}
  .gauge{padding:3px 3px}
  .gauge-cell{padding:1px 4px;gap:4px}
  .gauge-cell .ic{width:15px;height:15px}
  .gauge-cell b{font-size:12px}
  .gauge-cell small{display:none}
  .menu-legal{display:none}
  .cta-main{padding:7px 10px}
  .menu-rail{grid-auto-rows:minmax(30px,auto)}
  .rail-btn{padding:3px 7px;gap:5px}
  .rail-btn .ic{width:18px;height:18px}
  .rail-btn b{font-size:11px}
}
/* very short: drop the secondary text everywhere, keep every control reachable */
@container frame (max-height: 430px){
  /* keep the TITLE on a short frame. Hiding the whole titles block left a wide
     empty plank of wood across the top — worse than the crowding it saved. The
     subtitle and the avatar row are the parts that can go. */
.brand .subtitle,.brand-user{display:none}
  .menu-note{display:none}
  .rail-btn small{display:none}
}
/* viewport fallbacks for browsers without container queries */
@media (max-width:880px){
  .menu-screen{grid-template-columns:minmax(186px,44cqw) minmax(0,1fr)}
  .brand{grid-area:1/1/2/3}
  .gauge{grid-area:2/1/3/2}
  .menu-rail{grid-area:3/1/4/2}
  .menu-cta{grid-area:3/2/4/3;align-self:end}
  .menu-note{display:none}
}
@media (max-width:660px){
  .menu-screen{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr)}
  .brand{grid-area:1/1/2/2}
  .gauge{grid-area:2/1/3/2}
  .menu-cta{grid-area:3/1/4/2}
  .menu-rail{grid-area:4/1/5/2;display:grid;grid-template-columns:1fr 1fr;align-content:start}
  .menu-note{display:none}
}
@media (max-height:620px){
  .menu-goals>.mgoal:nth-child(n+3){display:none}
  .recent-ach>.rach:nth-child(n+3){display:none}
}
@media (max-height:860px){
  .rail-btn span{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .rail-btn small{display:inline;font-size:clamp(8px,1.1cqw,11px)}
  .rail-btn .ic{width:clamp(17px,2.1cqw,22px);height:clamp(17px,2.1cqw,22px)}
  .rail-btn{padding:clamp(5px,.7cqw,8px) clamp(7px,1cqw,11px);gap:7px}
  .rail-btn b{font-size:clamp(11px,1.55cqw,15px)}
}
@media (max-height:430px){
  /* keep the TITLE on a short frame. Hiding the whole titles block left a wide
     empty plank of wood across the top — worse than the crowding it saved. The
     subtitle and the avatar row are the parts that can go. */
.brand .subtitle,.brand-user{display:none}
  .menu-note{display:none}
  .rail-btn small{display:none}
}
@media (max-height:340px){
  .brand{padding:4px 9px}
  .brand-logo{width:30px;height:30px}
  .gauge{padding:4px 4px}
  .gauge-cell{padding:1px 4px;gap:4px}
  .gauge-cell .ic{width:15px;height:15px}
  .gauge-cell b{font-size:12px}
  .gauge-cell small{display:none}
  .menu-legal{display:none}
  .cta-main{padding:7px 10px}
  .menu-rail{grid-auto-rows:minmax(30px,auto)}
  .rail-btn{padding:3px 7px;gap:5px}
  .rail-btn .ic{width:18px;height:18px}
  .rail-btn b{font-size:11px}
}