/* Scribble Snacks theme. Tokens mirror docs/BRAND.md and @ss/sdk PALETTE. */
@font-face { font-family: "Sniglet"; src: url("./fonts/Sniglet-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("./fonts/Fredoka-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("./fonts/Fredoka-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gaegu"; src: url("./fonts/Gaegu-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
:root {
  --ink: #5A3A2E; --vanilla: #FFF5E8; --cream: #FFF3DF; --strawberry: #FFB6CE; --coral: #EE7466; --coral-dark: #D85A4C;
  --lavender: #E6DAF5; --apricot: #FFDDA9; --matcha: #D5E6C3; --olive: #7C8A4B; --butter: #FFD66B; --blush: #FF8FB0;
  --line: 2.5px; --radius: 14px; --radius-pill: 99px; --shadow: 0 3px 0 var(--ink);
  --font-display: "Sniglet", "Fredoka", system-ui, sans-serif; --font-ui: "Fredoka", system-ui, sans-serif; --font-note: "Gaegu", "Fredoka", cursive;
  --fs-xs: 10px; --fs-s: 12px; --fs-m: 14px; --fs-l: 18px; --fs-xl: 24px;
}
html, body { margin: 0; padding: 0; height: 100%; background: var(--vanilla); overflow: hidden; touch-action: none; font-family: var(--font-ui); color: var(--ink); }
body { background: radial-gradient(circle at 20% 15%, #FFE3EC 0 8%, transparent 9%), radial-gradient(circle at 85% 80%, var(--lavender) 0 7%, transparent 8%), var(--vanilla); }
#app { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; }
#game-container { width: 100%; height: 100%; max-width: 480px; }
#hq3d { display: none; position: absolute; inset: 0; margin: 0 auto; max-width: 560px; overflow: hidden; font-family: var(--font-ui); color: var(--ink); user-select: none; -webkit-user-select: none; }
@media (min-width: 600px) { #hq3d { border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); box-shadow: 0 0 0 10px var(--strawberry); } }
#hq3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hq3d .ic { width: 22px; height: 22px; vertical-align: middle; pointer-events: none; }
#hq3d .ic.xs { width: 15px; height: 15px; margin: -2px 0 0; }
#hq3d .ic.sm { width: 16px; height: 16px; }
#hq3d .ic.big { width: 34px; height: 34px; flex: none; }
#hq3d .hud-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top) + 8px) 10px 4px; pointer-events: none; }
#hq3d .hud-logo { height: 46px; filter: drop-shadow(0 2px 0 rgba(90,58,46,.15)); }
#hq3d .hud-right { display: flex; gap: 6px; align-items: center; pointer-events: auto; }
#hq3d .hud-coins { display: flex; align-items: center; gap: 4px; background: var(--cream); border: var(--line) solid var(--ink); border-radius: var(--radius-pill); padding: 2px 12px 2px 3px; font-family: var(--font-display); font-size: var(--fs-l); box-shadow: var(--shadow); }
#hq3d .hud-coins .ic { width: 28px; height: 28px; }
#hq3d .icon-btn { width: 40px; height: 40px; padding: 4px; border: var(--line) solid var(--ink); border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; }
#hq3d .icon-btn .ic { width: 26px; height: 26px; }
#hq3d .icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
#hq3d .hud-place { position: absolute; top: calc(env(safe-area-inset-top) + 98px); left: 50%; transform: translateX(-50%) rotate(-2deg); font-family: var(--font-note); font-size: var(--fs-l); color: var(--olive); pointer-events: none; }
#hq3d .hud-pantry { position: absolute; top: calc(env(safe-area-inset-top) + 62px); left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; pointer-events: none; }
#hq3d .chip { display: flex; align-items: center; gap: 2px; font-family: var(--font-display); font-size: var(--fs-m); border: 2px solid var(--ink); border-radius: var(--radius-pill); padding: 1px 8px 1px 2px; box-shadow: 0 2px 0 var(--ink); }
#hq3d .hud-toast { position: absolute; top: 132px; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--coral); -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 2px 0 var(--strawberry); opacity: 0; transition: opacity .3s, transform .3s; transform: translateY(6px); pointer-events: none; }
#hq3d .hud-toast[style*="opacity: 1"] { transform: none; }
#hq3d .hud-hint { position: absolute; bottom: 262px; left: 0; right: 0; text-align: center; font-family: var(--font-note); font-size: var(--fs-m); opacity: .8; pointer-events: none; }
#hq3d .hud-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 8px calc(env(safe-area-inset-bottom) + 8px); background: var(--vanilla); background-image: radial-gradient(var(--strawberry) 1.2px, transparent 1.4px); background-size: 16px 16px; border-top: 3px solid var(--ink); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 -4px 0 var(--strawberry); }
#hq3d .hud-orders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#hq3d .order { background: var(--cream); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 5px; display: flex; flex-direction: column; gap: 3px; min-height: 92px; box-shadow: var(--shadow); }
#hq3d .order .who { display: flex; align-items: center; gap: 3px; font-family: var(--font-display); font-size: var(--fs-s); white-space: nowrap; overflow: hidden; }
#hq3d .order .wants { flex: 1; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
#hq3d .want { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: var(--fs-s); }
#hq3d .want .ic { width: 26px; height: 26px; }
#hq3d .hud-row { display: flex; gap: 6px; }
#hq3d .hud-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--font-display); font-size: var(--fs-s); line-height: 1.15; color: var(--ink); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 6px; background: #fff; box-shadow: var(--shadow); transition: transform .08s, box-shadow .08s; text-align: left; }
#hq3d .hud-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
#hq3d .hud-btn small { display: block; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-xs); opacity: .85; }
#hq3d .hud-btn.coral { background: var(--coral); color: #fff; padding: 4px; text-align: center; font-size: var(--fs-s); }
#hq3d .hud-btn.matcha { background: var(--matcha); }
#hq3d .hud-btn.lav { background: var(--lavender); }
#hq3d .hud-btn.apricot { background: var(--apricot); }
#hq3d .hud-btn.off { opacity: .45; box-shadow: none; transform: translateY(2px); }
#hq3d .tag3d { position: absolute; left: 0; top: 0; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius-pill); padding: 1px 9px; font-family: var(--font-display); font-size: var(--fs-s); pointer-events: none; white-space: nowrap; box-shadow: 0 2px 0 var(--ink); }
#hq3d .tag3d.full { background: var(--coral); color: #fff; animation: ll-wiggle .8s ease-in-out infinite; }
@keyframes ll-wiggle { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
/* Splash / loading screen */
#splash { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--strawberry); background-image: radial-gradient(#fff6 2px, transparent 2.5px); background-size: 22px 22px; pointer-events: none; transition: opacity .5s; }
#splash img { width: min(78vw, 360px); animation: ll-bob 1.6s ease-in-out infinite; }
#splash .load { font-family: var(--font-note); font-size: 22px; color: var(--ink); }
#splash .bar { width: 160px; height: 14px; border: 2.5px solid var(--ink); border-radius: 99px; background: var(--cream); overflow: hidden; }
#splash .bar i { display: block; height: 100%; width: 40%; background: var(--coral); border-radius: 99px; animation: ll-load 1s ease-in-out infinite alternate; }
#splash.gone { opacity: 0; }
@keyframes ll-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes ll-load { from { margin-left: 0; } to { margin-left: 60%; } }