/* Storybook theme shared by the plaza and every game. Fredoka font is loaded by each page. */
:root { --ink: #5a3e2b; --cream: #fbf3e4; --peach: #f0c9a4; --coral: #d68c6f; --honey: #e5b16f; --teal: #75999a; --sage: #8fa66b; --bark: #a77250; --rose: #e9a68a; --shadow: 0 5px 0 rgba(90,62,43,.28); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--peach); font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; border: none; color: inherit; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
.pill { background: var(--cream); border: 3px solid var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 19px; font-weight: 600; box-shadow: var(--shadow); color: var(--ink); }
.pill.honey, .pill.big { background: var(--honey); }
.pill.coral, .home { background: var(--coral) !important; color: var(--cream) !important; }
.pill.teal { background: var(--teal); color: var(--cream); }
.pill:active, .round:active, .btn:active, .go:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(90,62,43,.28); }
.card { background: var(--cream); border: 4px solid var(--ink); border-radius: 30px; padding: 22px 26px; text-align: center; box-shadow: 0 8px 0 rgba(90,62,43,.3), 0 20px 40px rgba(90,62,43,.18); max-width: 580px; width: 100%; max-height: 100%; overflow: auto; position: relative; }
.card::before { content: ''; position: absolute; inset: 7px; border: 2px dashed rgba(167,114,80,.35); border-radius: 22px; pointer-events: none; }
h1, h2 { font-weight: 700; margin: 0; color: var(--ink); letter-spacing: .5px; }
h1 { font-size: 46px; } h1 span { color: var(--coral); }
.sub { font-size: 19px; color: #8a6a52; margin: 6px 0 12px; }
.btn, .go { background: var(--coral); color: var(--cream); border: 4px solid var(--ink); font-size: 28px; font-weight: 700; padding: 10px 34px; border-radius: 999px; box-shadow: var(--shadow); }
.btn.teal { background: var(--teal); } .btn.honey { background: var(--honey); color: var(--ink); }
.link { background: none; color: #8a6a52; font-size: 17px; margin-top: 12px; text-decoration: underline; display: block; margin-left: auto; margin-right: auto; }
.round { position: absolute; border-radius: 50%; font-size: 30px; background: var(--cream); border: 3px solid var(--ink); width: 66px; height: 66px; box-shadow: var(--shadow); }
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(240,201,164,.35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
#toasts { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: var(--cream); color: var(--ink); border: 3px solid var(--ink); padding: 6px 16px; border-radius: 999px; font-size: 19px; font-weight: 600; animation: pop .3s ease-out; white-space: nowrap; box-shadow: var(--shadow); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#hint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(251,243,228,.95); border: 3px solid var(--ink); padding: 6px 16px; border-radius: 999px; font-size: 17px; pointer-events: none; max-width: 70vw; text-align: center; }
#hint:empty { display: none; }
#stick { position: absolute; left: 24px; bottom: 24px; width: 150px; height: 150px; border-radius: 50%; background: rgba(251,243,228,.35); border: 4px solid rgba(90,62,43,.6); display: none; touch-action: none; }
#knob { position: absolute; left: 45px; top: 45px; width: 52px; height: 52px; border-radius: 50%; background: var(--cream); border: 3px solid var(--ink); box-shadow: var(--shadow); }
body.touch #stick { display: block; }
#fade { position: fixed; inset: 0; background: var(--peach); opacity: 0; pointer-events: none; transition: opacity .25s; }
#fade.on { opacity: 1; }