:root {
  color-scheme: dark;
  --background: #1c090c;
  --cream: #fff4df;
  --muted: #c69b94;
  --orange: #ff653c;
  --yellow: #ffce67;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--background); touch-action: pan-x pan-y; }
body {
  /* Allow normal scrolling, but not pinch or double-tap browser zoom. */
  touch-action: pan-x pan-y;
  margin: 0;
  color: var(--cream);
  background: radial-gradient(ellipse at 50% 46%, #662019 0, #361014 38%, var(--background) 73%);
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; touch-action: manipulation; }
.game {
  min-height: 100svh;
  min-height: 100dvh;
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  padding: max(25px, env(safe-area-inset-top)) 32px max(22px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark { font-size: 14px; font-weight: 900; letter-spacing: -.2px; white-space: nowrap; }
.mode { color: var(--muted); font-size: 12px; letter-spacing: 1.7px; }
.play-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 0 28px; }
.headline { text-align: center; }
.eyebrow { color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: 3.6px; margin: 0 0 14px; }
h1 { margin: 0; font-size: clamp(44px, 6.8vw, 64px); line-height: .99; letter-spacing: -2.8px; font-weight: 900; }
.dial { width: min(76vw, 320px); height: min(76vw, 320px); position: relative; display: grid; place-items: center; margin: 22px 0 20px; isolation: isolate; }
.orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.orbit-outer { inset: 0; border: 1px solid #ff956122; }
.orbit-inner { inset: 15px; border: 1px dashed #ff986128; }
.dial-face { position: absolute; inset: 30px; border-radius: 50%; border: 1px solid #fa996838; background: radial-gradient(circle at 42% 30%, #9a3b28 0, #6b261f 43%, #451517 83%); box-shadow: inset 0 3px 0 #ffba7912, 0 15px 60px #09000140; transition: transform 90ms ease-out, filter 90ms ease-out; }
.potato { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: clamp(120px, 31vw, 160px); line-height: 1.2; transform: rotate(-18deg); filter: drop-shadow(0 18px 12px #16040570); user-select: none; transition: transform 110ms ease-out; }
/* A bundled rendering of the original Apple emoji keeps the same artwork on
   Linux, Android and Apple devices. Existing font-size rules still size it.
   The 320px canvas contains a 256px glyph: retain its original 1.25em scale. */
.potato.has-potato-art, .setup-potato.has-potato-art { position: relative; display: inline-grid; place-items: center; width: 1em; height: 1.2em; flex-shrink: 0; }
.setup-potato.has-potato-art { height: 1em; }
.potato-art { position: absolute; display: block; width: 1.25em; height: 1.25em; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.dial-label { position: absolute; bottom: 42px; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #f9be96; }
.spark { position: absolute; width: 5px; height: 5px; background: var(--yellow); border-radius: 50%; opacity: .65; }
.spark-one { top: 15%; left: 16%; }
.spark-two { top: 33%; right: 2%; width: 3px; height: 3px; }
.spark-three { bottom: 19%; left: 2%; width: 3px; height: 3px; }
.spark-four { bottom: 8%; right: 22%; }
.controls { width: min(100%, 355px); text-align: center; }
.instruction { margin: 0 0 19px; color: #e8bfb4; font-size: 16px; min-height: 20px; }
.start-button { width: 100%; min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 13px; background: var(--yellow); border: 1px solid #ffe29c; border-radius: 23px; color: #32170b; font-size: 24px; font-weight: 900; letter-spacing: 1px; cursor: pointer; box-shadow: 0 6px 0 #b0782f, 0 14px 34px #0b030657; transition: transform .12s, box-shadow .12s, background .15s; }
.start-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #b0782f, 0 6px 20px #0b030645; }
.start-button:focus-visible { outline: 3px solid white; outline-offset: 8px; }
.start-button:disabled { cursor: wait; opacity: .7; }
.button-icon { width: 26px; height: 26px; }
.audio-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 24px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.audio-note svg { width: 17px; min-width: 17px; height: 17px; }
.error { font-size: 15px; line-height: 1.4; color: var(--yellow); }
.boom-word { display: none; font-size: clamp(75px, 23vw, 109px); font-weight: 1000; letter-spacing: -5px; font-style: italic; transform: rotate(-9deg); color: var(--yellow); text-shadow: 0 7px 0 #5c2014; }
.blast-overlay { position: fixed; inset: 0; background: #ffbd5e; pointer-events: none; opacity: 0; }
.noscript { position: fixed; inset: auto 20px 20px; padding: 15px; background: #592720; }
body[data-state="running"] .eyebrow { color: var(--yellow); }
body[data-state="running"] h1 { color: var(--yellow); }
body[data-state="running"] .start-button { background: #3e1719; border-color: #8d4941; color: #ffdbc9; box-shadow: 0 5px 0 #140609; font-size: 20px; }
body[data-state="running"] .orbit-outer { border-color: #ff885a60; }
body[data-state="running"] .dial.is-ticking .potato { transform: rotate(-12deg) scale(1.055); }
body[data-state="running"] .dial.is-ticking .dial-face { transform: scale(1.035); filter: brightness(1.2); }
body[data-state="boom"] .potato, body[data-state="boom"] .dial-label { display: none; }
body[data-state="boom"] .boom-word { display: block; }
body[data-state="boom"] .dial-face { background: radial-gradient(circle, #ae421e, #73291c 60%, #451517); box-shadow: 0 0 80px #ff6c2729; }
body[data-state="boom"] h1 { color: var(--yellow); }
body[data-state="boom"] .eyebrow { color: var(--orange); }
body.exploding .blast-overlay { animation: flash .5s ease-out both; }
body.exploding .dial { animation: impact .55s ease-out; }
body.exploding .boom-word { animation: pop .5s cubic-bezier(.18,.84,.32,1.12) both; }
@keyframes flash { 0% { opacity: .7; } 100% { opacity: 0; } }
@keyframes impact { 0% { transform: translate(0,0); } 16% { transform: translate(-8px,5px); } 32% { transform: translate(7px,-5px); } 48% { transform: translate(-5px,2px); } 64% { transform: translate(3px,-2px); } 100% { transform: translate(0,0); } }
@keyframes pop { from { transform: rotate(-9deg) scale(.55); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }
@media (min-width: 700px) and (min-height: 850px) { .dial { width: 360px; height: 360px; margin-block: 32px; } .potato { font-size: 180px; } h1 { font-size: 72px; } }
@media (max-width: 370px) { .game { padding-inline: 22px; } .mode { letter-spacing: .5px; } h1 { font-size: 44px; } }
@media (max-height: 760px) { .play-area { padding-block: 20px; } .dial { width: 235px; height: 235px; margin-block: 14px; } .potato { font-size: 120px; } .dial-face { inset: 22px; } .dial-label { bottom: 31px; letter-spacing: 0; } h1 { font-size: 44px; } .eyebrow { margin-bottom: 10px; } .start-button { min-height: 66px; } .instruction { margin-bottom: 15px; } .audio-note { margin-top: 19px; } }
@media (max-height: 550px) and (min-width: 600px) { .play-area { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; padding-block: 10px; } .headline { grid-column: 1; } .dial { grid-column: 1; width: 215px; height: 215px; margin: 0 auto; } .controls { grid-column: 2; grid-row: 1 / 3; } h1 { font-size: 38px; } .eyebrow { margin-bottom: 8px; } .potato { font-size: 100px; } .dial-label { bottom: 27px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .blast-overlay { display: none; } }