:root {
  --wine: #6f1f26;
  --wine-dark: #32130f;
  --gold: #e8c77b;
  --cream: #fff7df;
  --wood: #6d3c25;
  --pet-sheet: url("assets/pet/spritesheet.webp");
  --normal-onion-image: none;
  --big-onion-image: none;
  --carrot-image: none;
  --potato-image: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--cream);
  background: radial-gradient(circle at 50% 15%, #6d3027, var(--wine-dark) 60%);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; }
.app {
  width: min(100%, 560px);
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}
.screen { display: none; width: 100%; }
.screen.active { display: block; }
.panel {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 7vw, 52px) clamp(20px, 7vw, 44px);
  text-align: center;
  border: 1px solid rgba(232, 199, 123, .5);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(83, 21, 23, .96), rgba(44, 16, 13, .98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4), inset 0 0 50px rgba(230, 178, 93, .05);
}
.panel::before, .panel::after {
  content: ""; position: absolute; width: 70px; height: 70px; border-color: var(--gold); opacity: .45;
}
.panel::before { top: 12px; left: 12px; border-top: 1px solid; border-left: 1px solid; border-radius: 12px 0 0; }
.panel::after { right: 12px; bottom: 12px; border-right: 1px solid; border-bottom: 1px solid; border-radius: 0 0 12px; }
.eyebrow { margin: 0 0 12px; color: var(--gold); font: 600 10px/1.4 system-ui, sans-serif; letter-spacing: .22em; }
h1, h2 { margin: 0; font-weight: 600; letter-spacing: .08em; }
h1 { font-size: clamp(38px, 12vw, 64px); }
h2 { font-size: clamp(30px, 9vw, 46px); }
.subtitle { margin: 10px 0 30px; color: var(--gold); font-size: 16px; letter-spacing: .12em; }
.intro-copy { line-height: 1.9; font-size: 14px; }
.controls-note { margin-top: 20px; color: #e7d8c1; font: 13px/1.7 system-ui, sans-serif; }
.primary-button {
  position: relative; z-index: 1; min-width: 190px; min-height: 52px; margin-top: 22px; padding: 12px 24px;
  border: 1px solid #f1d58d; border-radius: 999px; color: #3b1b12; background: linear-gradient(#f7dfa3, #d7ae59);
  box-shadow: 0 7px 0 #875d2d, 0 12px 24px rgba(0, 0, 0, .3); font-weight: 700; cursor: pointer;
}
.primary-button:active { transform: translateY(4px); box-shadow: 0 3px 0 #875d2d; }

#game-screen.active { display: grid; grid-template-rows: auto minmax(280px, 1fr) auto; height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)) - 24px); max-height: 800px; }
.hud {
  position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; gap: 6px;
  padding: 9px 42px 9px 12px; border: 1px solid rgba(232,199,123,.45); border-radius: 14px 14px 0 0; background: #431719;
  font-family: system-ui, sans-serif; text-align: center;
}
.hud div:first-child { text-align: left; }
.hud div:nth-child(3) { text-align: right; }
.hud span { display: block; color: var(--gold); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.hud strong { font-size: 20px; }
.hud strong b { font: inherit; }
.game-title { color: #fff4d0; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.mute-button { position: absolute; right: 8px; width: 30px; height: 30px; border: 1px solid #ab8856; border-radius: 50%; color: var(--cream); background: #32130f; cursor: pointer; }
.mute-button[aria-pressed="true"] { opacity: .55; text-decoration: line-through; }
.stage {
  position: relative; min-height: 0; overflow: hidden; isolation: isolate; border-inline: 1px solid rgba(232,199,123,.35);
  background-color: #29120f; touch-action: none; user-select: none;
}
.backdrop { position: absolute; inset: 0; z-index: -5; background-image: var(--stage-background, linear-gradient(#2b1110 0%, #55241f 70%, #3b1b16 100%)); background-position: center; background-size: cover; }
.spotlight { position: absolute; z-index: -4; top: -12%; left: 17%; width: 66%; height: 100%; opacity: .75; background: linear-gradient(100deg, transparent 3%, rgba(255,230,165,.16) 48%, transparent 97%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
.curtain { position: absolute; z-index: 7; top: 0; bottom: 18%; width: 14%; background: repeating-linear-gradient(90deg, #52131a 0 16%, #8d2530 34%, #4a1017 65%, #721b26 100%); box-shadow: 0 0 18px rgba(0,0,0,.4); pointer-events: none; }
.curtain::after { content: ""; position: absolute; top: 38%; width: 120%; height: 16px; border-radius: 50%; background: #bd9142; }
.curtain-left { left: 0; border-radius: 0 0 80% 0; }
.curtain-right { right: 0; border-radius: 0 0 0 80%; }
.curtain-left::after { left: 25%; transform: rotate(-10deg); }
.curtain-right::after { right: 25%; transform: rotate(10deg); }
.stage-floor { position: absolute; z-index: -2; left: 0; right: 0; bottom: 0; height: 23%; background: repeating-linear-gradient(92deg, #704126 0 8%, #865136 8.5% 16%, #5a321f 16.5% 24%); border-top: 4px solid #a76b42; }
.stage-floor::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 14px, rgba(31,13,8,.26) 15px 16px); }
.audience { position: absolute; z-index: 8; bottom: -9px; left: 0; right: 0; height: 34px; opacity: .82; background: radial-gradient(circle at 5% 35%,#150908 0 12px,transparent 13px),radial-gradient(circle at 19% 65%,#150908 0 15px,transparent 16px),radial-gradient(circle at 37% 38%,#150908 0 13px,transparent 14px),radial-gradient(circle at 55% 62%,#150908 0 16px,transparent 17px),radial-gradient(circle at 73% 35%,#150908 0 13px,transparent 14px),radial-gradient(circle at 91% 60%,#150908 0 16px,transparent 17px); }
.pet { position: absolute; z-index: 5; left: 50%; bottom: 10%; width: clamp(66px, 19vw, 92px); aspect-ratio: 192 / 208; transform: translateX(-50%); transform-origin: 50% 100%; will-change: left, transform; }
.pet-sprite { width: 100%; height: 100%; background-image: var(--pet-sheet); background-repeat: no-repeat; background-size: 800% 900%; }
.state-idle .pet-sprite { animation: idle .84s steps(1) infinite; }
.state-running-right .pet-sprite { animation: runRight .64s steps(1) infinite; }
.state-running-left .pet-sprite { animation: runLeft .64s steps(1) infinite; }
.state-waving .pet-sprite { animation: waving .64s steps(1) infinite; }
.state-failed .pet-sprite { animation: failed 1.2s steps(1) infinite; }
.pet.bowing { animation: bow .7s ease-in-out; }
.pet.bowing .pet-sprite { animation: none; background-position: 0 0; }
@keyframes idle { 0%{background-position:0 0}16.6%{background-position:14.2857% 0}33.2%{background-position:28.5714% 0}49.8%{background-position:42.8571% 0}66.4%{background-position:57.1429% 0}83%,100%{background-position:71.4286% 0} }
@keyframes runRight { 0%{background-position:0 12.5%}12.5%{background-position:14.2857% 12.5%}25%{background-position:28.5714% 12.5%}37.5%{background-position:42.8571% 12.5%}50%{background-position:57.1429% 12.5%}62.5%{background-position:71.4286% 12.5%}75%{background-position:85.7143% 12.5%}87.5%,100%{background-position:100% 12.5%} }
@keyframes runLeft { 0%{background-position:0 25%}12.5%{background-position:14.2857% 25%}25%{background-position:28.5714% 25%}37.5%{background-position:42.8571% 25%}50%{background-position:57.1429% 25%}62.5%{background-position:71.4286% 25%}75%{background-position:85.7143% 25%}87.5%,100%{background-position:100% 25%} }
@keyframes waving { 0%,24%{background-position:0 37.5%}25%,49%{background-position:14.2857% 37.5%}50%,74%{background-position:28.5714% 37.5%}75%,100%{background-position:42.8571% 37.5%} }
@keyframes failed { 0%{background-position:0 62.5%}12.5%{background-position:14.2857% 62.5%}25%{background-position:28.5714% 62.5%}37.5%{background-position:42.8571% 62.5%}50%{background-position:57.1429% 62.5%}62.5%{background-position:71.4286% 62.5%}75%{background-position:85.7143% 62.5%}87.5%,100%{background-position:100% 62.5%} }
@keyframes bow { 0%,100%{transform:translateX(-50%) rotate(0) scale(1)} 45%,65%{transform:translateX(-50%) translateY(7%) rotate(14deg) scaleY(.92)} }
.onion { position: absolute; z-index: 3; width: 38px; height: 38px; transform: translate(-50%, -50%); will-change: top; background-image: var(--normal-onion-image); background-size: contain; background-position: center; background-repeat: no-repeat; }
.onion::before { content:"🧅"; display:grid; place-items:center; width:100%; height:100%; font-size:32px; filter:drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.onion.big { width: 56px; height: 56px; background-image: var(--big-onion-image); }
.onion.big::before { font-size:48px; }
.onion.vegetable::before { font-size:35px; }
.onion.vegetable.carrot::before { content:"🥕"; }
.onion.vegetable.potato::before { content:"🥔"; }
.onion.has-image::before { display:none; }
.event-message { position: absolute; z-index: 10; top: 15%; left: 50%; width: min(82%, 360px); padding: 11px 14px; border: 1px solid #f2d892; border-radius: 10px; color: #35160f; background: rgba(255,245,211,.96); box-shadow: 0 7px 25px rgba(0,0,0,.35); font: 700 15px/1.4 system-ui,sans-serif; text-align:center; transform:translate(-50%,-12px); opacity:0; pointer-events:none; transition:.2s ease; }
.event-message.show { transform:translate(-50%,0); opacity:1; }
.event-message.success { background:#fff0b7; }
.combo-display { position:absolute; z-index:6; top:10px; left:50%; min-width:150px; padding:6px 12px; border:1px solid rgba(232,199,123,.42); border-radius:999px; color:#fff5d8; background:rgba(48,18,14,.7); font-family:system-ui,sans-serif; text-align:center; transform:translateX(-50%); pointer-events:none; transition:.18s ease; }
.combo-display b { display:block; font-size:14px; letter-spacing:.08em; }
.combo-display span { display:block; color:#e8c77b; font-size:9px; }
.combo-display.combo-hot { color:#35160f; background:#f5d681; transform:translateX(-50%) scale(1.08); }
.combo-display.combo-hot span { color:#6b431c; }
.combo-display.combo-broken { animation:comboBroken .35s ease; }
@keyframes comboBroken { 45% { transform:translateX(-50%) scale(.86); opacity:.4; } }
.closing-curtain { position:absolute; z-index:20; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,#651923 0 7%,#9b2d38 13%,#4c1018 20%); transform:translateY(-102%); transition:transform 1s cubic-bezier(.7,0,.3,1); }
.closing-curtain.closed { transform:translateY(0); }
.touch-controls { display:grid; grid-template-columns:1fr 1.08fr 1fr; gap:8px; padding:10px 0 0; background:transparent; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.touch-controls * { -webkit-user-select:none !important; user-select:none !important; -webkit-touch-callout:none; }
.control-button { min-height:62px; border:1px solid #b68e52; border-radius:14px; color:var(--cream); background:linear-gradient(#5b2022,#361516); box-shadow:inset 0 1px rgba(255,255,255,.14); font:700 13px/1 system-ui,sans-serif; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-appearance:none; appearance:none; }
.control-button span { display:inline-block; margin:0 5px; color:var(--gold); font-size:16px; }
.control-button.active, .control-button:active { transform:translateY(2px); background:#7a2b2e; }
.bow-button { border-color:#d8b468; background:linear-gradient(#82602f,#503417); }
.result-rank { width:fit-content; margin:18px auto 0; padding:7px 18px; border:1px solid var(--gold); border-radius:999px; color:#3b1b12; background:linear-gradient(#f7dfa3,#d7ae59); font-weight:700; letter-spacing:.1em; box-shadow:0 5px 18px rgba(0,0,0,.25); }
.final-score { margin:16px auto 20px; }
.final-score span { display:block; color:var(--gold); font:10px/1.4 system-ui,sans-serif; letter-spacing:.2em; }
.final-score strong { display:block; font:700 clamp(52px,18vw,84px)/1 system-ui,sans-serif; }
.result-list { max-width:330px; margin:0 auto; font-family:system-ui,sans-serif; }
.result-list div { display:flex; justify-content:space-between; padding:11px 5px; border-bottom:1px solid rgba(232,199,123,.2); }
.result-list dt,.result-list dd { margin:0; }
.result-message { min-height:2em; margin:22px 0 4px; color:#f3d68e; font-weight:700; }
@media (max-height: 650px) {
  #game-screen.active { grid-template-rows:auto minmax(230px,1fr) auto; }
  .touch-controls { padding-top:6px; }
  .control-button { min-height:52px; }
  .pet { width:64px; }
  .event-message { top:9%; }
}
@media (min-width: 720px) and (min-height: 720px) { .app { padding-block:24px; } }
@media (prefers-reduced-motion: reduce) { .closing-curtain,.event-message { transition-duration:.01ms; } }