/* Responsive layer (loaded last on every page). Breakpoints: 360 / 390 / 768 / 1024 / 1440. Portrait-phone first; landscape playable. */
:root{--sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--kb:0px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;overflow-x:hidden}
/* ≥44px touch targets (WCAG 2.5.5); inline text links inside <p> are exempt */
.btn,.chip,.nav a.tab,.nav .logo,.hud .home,.card .x,button,select,[role=button]{min-height:44px;min-width:44px;box-sizing:border-box}
.btn,.chip,.nav a.tab,.nav .logo,.hud .home{display:inline-flex;align-items:center;justify-content:center;gap:.3em}
.card .x{display:flex;align-items:center;justify-content:center;top:2px;right:2px;width:44px;height:44px}
/* no iOS focus-zoom: every text field ≥16px (zoom itself stays enabled for accessibility) */
input,textarea,select,.wishform textarea{font-size:16px}
input[type=range]{min-height:44px}
/* touch: no double-tap zoom delay on controls, no long-press callout on the scene/candles */
a,button,.btn,.chip,input,select,textarea,label{touch-action:manipulation}
#scene,.hot,.spot,.candles,.cake-zone{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* safe areas (notch / home indicator): fixed chrome moves inside */
.sound-btn{top:calc(10px + var(--sat));right:calc(10px + var(--sar))}
.sound-panel{top:calc(62px + var(--sat));right:calc(10px + var(--sar));max-height:calc(100dvh - 80px - var(--sat) - var(--sab));overflow:auto}
.hud{top:calc(10px + var(--sat))}
.toast{bottom:calc(16px + var(--sab) + var(--kb))}
.nav,.wrap{padding-left:max(12px,var(--sal));padding-right:max(12px,var(--sar))}
.mwrap,.rc-overlay,.rv-stage{padding-bottom:calc(var(--sab) + var(--kb))}
/* the game HUD leaves room for the sound button instead of sliding under it */
@media (max-width:1240px){.hud{left:calc(10px + var(--sal));transform:none;width:auto;right:calc(64px + var(--sar))}}
/* modal cards never exceed the dynamic viewport; scroll inside */
.mwrap .card{max-height:calc(100dvh - 24px - var(--sat) - var(--sab) - var(--kb));overflow-y:auto;overscroll-behavior:contain;max-width:calc(100vw - 20px)}
/* phones */
@media (max-width:420px){
  .nav{gap:6px;flex-wrap:wrap}.nav .logo{font-size:20px;width:100%;justify-content:flex-start}
  .nav a.tab{padding:6px 10px;flex:1 1 auto}
  .btn{padding:8px 14px}
  .mwrap .card{padding-left:14px;padding-right:14px}
  .rotate-tip{display:none!important}
}
@media (min-width:421px) and (max-width:767px){.nav{flex-wrap:wrap}}
/* landscape phone: compact HUD so the room gets the height */
@media (orientation:landscape) and (max-height:500px){
  .hud{padding-top:4px;padding-bottom:4px;gap:4px 8px}.hud .txt{font-size:13px;line-height:1.3}
  .slot{width:34px;height:34px}.sound-btn{top:calc(6px + var(--sat))}
  .mwrap .card{max-height:calc(100dvh - 12px - var(--kb))}
}
/* tablet / desktop */
@media (min-width:768px){.wrap{max-width:min(960px,100%);margin-left:auto;margin-right:auto}}
@media (min-width:1440px){.wrap{max-width:1180px}}
/* hover only where a mouse exists (no sticky hover on touch) */
@media (hover:none){.btn:hover,.chip:hover,.nav a.tab:hover:not(.on){transform:none}}
/* keyboard open (set by js/core/viewport.js) */
body.kb-open .rotate-tip,body.kb-open .sound-hint{display:none}
h1{font-size:clamp(24px,5.5vw,44px);overflow-wrap:anywhere;max-width:100%}
.hero{overflow-x:clip;overflow-y:visible}
/* BUG-042/043 release gate: every touch target ≥44×44 on every page and every pointer type */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{min-height:44px;box-sizing:border-box}
.btn,a.btn,button,[role=button]:not(svg *),summary,.chip,.like,.tab{min-height:44px;min-width:44px;box-sizing:border-box}
label:has(> input[type=checkbox]),label:has(> input[type=radio]){min-height:44px;display:inline-flex;align-items:center;gap:6px}
input[type=checkbox],input[type=radio]{width:22px;height:22px}
.card .x,#mx{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}.card .btn,.card a.btn,#final .btn,#final a.btn{min-height:44px}
.card .x,#mx{z-index:5}
/* G4: form labels are tap targets too (they focus their field) */
.form label,.card label,section label{min-height:44px;display:flex;align-items:flex-end;box-sizing:border-box}
#mk,.btn{min-height:44px}
/* T9 v2: instant press feedback (transform only → compositor) */

.btn:active,button:active,.pressed:not(#scene *){transform:translateY(1px) scale(.98)}
#boot{will-change:opacity}
/* G4: decorative scene art never steals taps from a hotspot drawn under it; only targets (and their art) are hit-testable */
#scene *{pointer-events:none}
#scene :is(.hot,.spot,[data-hit],#b2,.cogiver),#scene :is(.hot,.spot,[data-hit],#b2,.cogiver) *{pointer-events:auto}
#scene .cogiver text{pointer-events:none}
/* the pendulum is only a target once the clock runs (C_FEATHER, step ≥5) — before that its pad would sit on the clock's */
body:not(.clock-running) #scene #pendulum,body:not(.clock-running) #scene #pendulum *{pointer-events:none}
#modal.pressed .card,.modal.pressed .card{transform:scale(.995)}.card.pressed{transform:scale(.995)}
/* designer layout bugs: the story modal never spans a desktop screen; the fixed sound button never sits on the hall nav tabs */
#modal .card,.mwrap .card{max-width:min(560px,calc(100vw - 32px));margin-left:auto;margin-right:auto}
.nav{padding-right:calc(64px + env(safe-area-inset-right))}
.tap-ripple{position:fixed;left:0;top:0;width:56px;height:56px;border-radius:50%;pointer-events:none;z-index:95;opacity:0;background:radial-gradient(circle,rgba(255,236,170,.75),rgba(255,236,170,0) 70%);will-change:transform,opacity}



/* 5% low: modal / overlay content is laid out and painted in isolation from the room */
#modal .card,.mwrap .card,.bag-panel{contain:layout paint style}
#stage{contain:layout paint}
.mwrap{contain:layout}
body.gift-mode .hud a.home,body.gift-mode a.home{display:none}
body.pack-scene #sceneAmbient{display:none!important}


/* §15 gift-mode display table */
body.gift-mode .hud .timer,body.gift-mode #timer{display:none!important}
body.gift-mode #again,body.gift-mode a[href*="hall.html"]{display:none!important}
body.gift-mode .ending-meta .em-extra{display:none}
body.gift-mode #restart{display:none} /* replaced by gift-more replay link */
body.gift-mode .bag-tabs,[data-t="gal"],[data-t="ach"]{display:none!important}
body.gift-mode .g-cell:not(.on),.bag-empty-slot{display:none!important}
body.gift-mode .hud .home-menu{display:inline-flex}
.hud .home-menu{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,250,240,.85);font-size:18px;cursor:pointer;color:var(--ink,#6b5546)}
.gift-more{margin-top:12px;text-align:center}
.gift-more summary{cursor:pointer;font-size:13px;opacity:.75;list-style:none}
.gift-more a,.gift-more button.link{background:none;border:0;color:var(--ink);text-decoration:underline;font:inherit;cursor:pointer;padding:6px;min-height:44px}
.gift-menu{position:fixed;z-index:90;top:calc(12px + var(--sat,0px));left:12px;background:#fffaf0;border:2px solid var(--ink,#6b5546);border-radius:14px;padding:8px;min-width:200px;box-shadow:0 8px 24px rgba(80,50,20,.18)}
.gift-menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:12px 14px;min-height:44px;font:inherit;cursor:pointer;border-radius:8px;color:var(--ink)}
.gift-menu button:hover,.gift-menu button:focus{background:#f3e6d0}
.pack-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:6px 0 4px}
.pack-pick .pk{cursor:pointer;border:2.5px solid var(--ink,#6b5546);border-radius:14px;padding:10px 6px;text-align:center;background:#fffaf0;font:inherit;color:var(--ink);min-height:72px;display:flex;flex-direction:column;align-items:center;gap:4px}
.pack-pick .pk b{font-size:22px;line-height:1}.pack-pick .pk span{font-size:12px}.pack-pick .pk i{font-size:10px;font-style:normal;opacity:.7}
.pack-pick .pk.on{transform:translateY(-3px);box-shadow:0 0 12px rgba(255,190,80,.55);background:#fff3dc}
.pack-pick .pk.soon{opacity:.72;cursor:pointer;background:#fff8e8;border-style:dashed;border-color:#c4a484;background-image:repeating-linear-gradient(-45deg,transparent,transparent 6px,rgba(196,164,132,.12) 6px,rgba(196,164,132,.12) 7px);position:relative}
.pack-pick .pk.soon:hover,.pack-pick .pk.soon:focus-visible{opacity:.88;box-shadow:0 0 0 2px rgba(201,127,118,.25)}
.pack-pick .pk.soon .soon-badge,.pack-pick .pk.soon i.soon-badge{display:inline-block;margin-top:2px;padding:2px 7px;border-radius:999px;background:#ffe8d2;color:#b86a3c;font-size:10px;font-style:normal;font-weight:600;letter-spacing:.02em;animation:soon-wiggle 3s ease-in-out infinite}
@keyframes soon-wiggle{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){.pack-pick .pk.soon .soon-badge,.pack-pick .pk.soon i.soon-badge{animation:none}}
.toast.soon-toast{display:flex;align-items:center;gap:8px;max-width:min(420px,92vw)}
.toast.soon-toast .soon-toast-fox{flex:none;width:28px;height:28px;border-radius:50%}
.soon-tease-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:130;max-width:92vw;padding:10px 16px;background:#fffaf0;border:2.4px solid #6b5546;border-radius:14px;font-size:14px;pointer-events:none;transition:opacity .35s,transform .4s}
.soon-tease-toast.show{opacity:1;transform:translate(-50%,0)}

.hero .fox-lite{display:block;margin:0 auto 8px;width:140px;height:140px;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hero .fox-lite{/* static src set by index-gift.js */}}