:root { --cream: #F6E7CF; --gold: #E9B45A; --wood: #6B4029; --ink: #2B1D24; --serif: "Fraunces", Georgia, serif; --sans: "Karla", system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: #1B1318; color: var(--cream); font-family: var(--sans); font-weight: 500; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
button { font: inherit; color: inherit; cursor: pointer; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }

.top { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); pointer-events: none; }
.top > * { pointer-events: auto; }
.back { justify-self: start; color: rgba(246,231,207,.6); text-decoration: none; font-size: 15px; letter-spacing: .02em; }
.back b { color: var(--gold); font-weight: 700; }
.title { margin: 0; text-align: center; font-family: var(--serif); font-weight: 600; line-height: 1; }
.title span { display: block; font-size: 40px; font-style: italic; color: var(--cream); letter-spacing: -.01em; }
.title em { display: block; margin-top: 4px; font-size: 15px; font-style: normal; font-family: var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ib { justify-self: end; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(233,180,90,.45); background: rgba(0,0,0,.25); color: var(--cream); }
.ib svg { width: 20px; height: 20px; }
.mute .offi { display: none; } .mute.off .on { display: none; } .mute.off .offi { display: block; }

.tools { position: fixed; z-index: 5; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 10px; }
.tools button { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 70px; padding: 10px 4px 8px; border-radius: 16px; border: 1.5px solid rgba(233,180,90,.4); background: linear-gradient(180deg, rgba(107,64,41,.55), rgba(60,34,22,.7)); color: var(--cream); font-size: 13px; letter-spacing: .04em; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.tools button svg { width: 24px; height: 24px; color: var(--gold); }
.tools button:disabled { opacity: .38; cursor: default; }
.tools button:not(:disabled):active { transform: translateY(2px); }
.toast { position: fixed; z-index: 6; left: 50%; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 92px); transform: translateX(-50%); margin: 0; padding: 9px 18px; border-radius: 12px; background: rgba(246,231,207,.95); color: var(--ink); font-size: 15px; font-weight: 700; width: max-content; max-width: 92vw; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.35); }

.card { position: fixed; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90vw, 360px); padding: 26px 24px 22px; text-align: center; border-radius: 22px; color: var(--ink);
  background: linear-gradient(180deg, #FBF1DF, #F1DDBC); border: 2px solid var(--gold); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 0 6px rgba(233,180,90,.14); animation: rise .4s cubic-bezier(.3,1.4,.5,1); }
@keyframes rise { from { transform: translate(-50%, -42%); opacity: 0; } }
.card h2 { margin: 0 0 8px; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 34px; line-height: 1.05; }
.card p { margin: 0 0 14px; font-size: 16px; line-height: 1.4; color: #5A4038; }
.card .total { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.card .total b { color: var(--ink); }
.stars { display: flex; justify-content: center; gap: 10px; margin: 6px 0 12px; }
.stars i { width: 50px; height: 50px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: #DCC7A6; }
.stars i.on { background: linear-gradient(180deg, #FFD978, #D99A2B); animation: pop .5s cubic-bezier(.3,1.7,.5,1) both; animation-delay: var(--d); }
@keyframes pop { from { transform: scale(0) rotate(-40deg); } }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px; border-radius: 14px; border: 0; background: var(--ink); color: var(--cream); font-family: var(--serif); font-style: italic; font-size: 22px; font-weight: 700; }
.btn svg { width: 20px; height: 20px; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(43,29,36,.35); font-size: 18px; }
.row { display: flex; gap: 10px; margin-bottom: 10px; }
.btn:focus-visible, .tools button:focus-visible, .ib:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.ogmark { display: none; }
body.og .ogmark { display: block; position: fixed; z-index: 8; left: 0; right: 0; top: 34px; text-align: center; }
body.og .ogmark h1 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 110px; line-height: 1; color: var(--cream); text-shadow: 0 6px 30px rgba(0,0,0,.5); }
body.og .ogmark p { margin: 6px 0 0; font-size: 26px; color: var(--gold); letter-spacing: .04em; }
body.demo .top, body.demo .tools, body.demo .card, body.demo .toast { display: none !important; }
@media (max-width: 420px) { .tools button { width: 62px; } .title span { font-size: 34px; } .back { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .card, .stars i.on { animation: none; } }