:root {
  color-scheme: dark;
  --ink: #020c0b;
  --ink-soft: #0a2925;
  --jade: #67ead4;
  --jade-dark: #0d675d;
  --paper: #f7ecd0;
  --gold: #d9a94f;
  --gold-light: #ffe8a3;
  --cinnabar: #d05a3f;
  --line: #e0b55f66;
  font-family: "Songti SC", "Noto Serif SC", "STSong", serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  color: var(--paper);
  background:
    radial-gradient(circle at 50% -12%, #346f64 0, #112f2b 26%, transparent 52%),
    radial-gradient(circle at 8% 64%, #742d25 0, transparent 28%),
    radial-gradient(circle at 91% 46%, #1e5d53 0, transparent 32%),
    linear-gradient(142deg, #020a09, #102a25 46%, #1a0d0c 76%, #020807);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image:
    repeating-linear-gradient(92deg, transparent 0 7px, #fff 8px, transparent 9px 15px),
    radial-gradient(circle at 20% 30%, #e7c474 0 1px, transparent 2px);
  background-size: auto, 72px 72px;
  mix-blend-mode: soft-light;
}
button { color: inherit; font: inherit; }
button:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }

.cabinet-shell {
  width: min(100%, 1500px);
  min-height: 100vh;
  margin: auto;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: grid;
  align-content: center;
  gap: 12px;
}
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup p, .brand-lockup h1 { margin: 0; }
.brand-lockup p { color: #a7c7bd; font: 800 13px/1.2 system-ui, sans-serif; letter-spacing: .18em; }
.brand-lockup h1 { color: var(--gold-light); font-size: clamp(25px, 3vw, 38px); letter-spacing: .08em; text-shadow: 0 4px 18px #000; }
.brand-seal {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid var(--gold);
  border-radius: 14px 4px 14px 4px;
  background: linear-gradient(145deg, #23695c, #071713 65%, #501f19);
  box-shadow: inset 0 0 0 3px #0b2c25, inset 0 -12px 22px #771f1877, 0 8px 28px #0009;
  color: var(--gold-light);
  font-size: 18px;
  font-weight: 900;
}
.header-actions { display: flex; gap: 8px; }
.utility-button, .primary-button, .close-button {
  min-height: 46px;
  border: 1px solid #d7bd7766;
  background: linear-gradient(#173830ef, #081c18f2);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, filter 160ms ease;
}
.utility-button { min-width: 84px; padding: 0 15px; border-radius: 10px 3px 10px 3px; }
.utility-button:hover { transform: translateY(-1px); border-color: var(--gold); filter: brightness(1.14); }
.primary-button {
  min-width: 196px;
  padding: 0 25px;
  border-color: #ffe4a0;
  border-radius: 12px 4px 12px 4px;
  background: linear-gradient(180deg, #f0ca73, #9e632c);
  color: #281707;
  box-shadow: inset 0 1px #fff8, 0 9px 25px #0008;
  font-weight: 900;
}
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.12); }

.game-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(185px, 228px) minmax(430px, 620px) minmax(190px, 236px);
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.5vw, 22px);
  min-height: 680px;
}
.ledger-panel, .score-panel { align-self: center; display: grid; gap: 11px; }
.ledger-heading, .score-heading {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #9fc8bd;
  font: 800 13px system-ui, sans-serif;
  letter-spacing: .12em;
}
.ledger-heading strong { color: var(--paper); letter-spacing: 0; }
.score-heading { display: grid; justify-items: end; gap: 4px; }
.score-heading strong { color: var(--gold-light); font: 900 clamp(28px, 3vw, 40px)/1 ui-monospace, monospace; letter-spacing: .06em; text-shadow: 0 0 16px #dba84455; }
.attempt-card, .coin-card, .legend-card, .mission-card, .plunger-card {
  position: relative;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px 4px 16px 4px;
  background:
    linear-gradient(135deg, #ffffff0d 0 1px, transparent 1px 22px),
    linear-gradient(145deg, #16473edd, #071b17ef 62%, #321513dd);
  background-size: 22px 22px, auto;
  box-shadow: inset 0 0 0 3px #0b2620aa, inset 0 1px #f7d98b22, 0 12px 28px #0007;
}
.attempt-card small, .coin-card small, .legend-card > small, .mission-card small, .plunger-card small { color: #8fbbb0; font: 800 12px system-ui, sans-serif; letter-spacing: .14em; }
.attempt-card > strong { display: block; margin-top: 8px; color: #b9d7cf; font: 800 15px system-ui, sans-serif; }
.attempt-card > strong b { color: var(--gold-light); font-size: 25px; }
.attempt-pips { display: flex; gap: 8px; margin-top: 12px; }
.attempt-pips i { width: 25px; height: 25px; border: 2px solid #d3b66c; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fffdf0 0 12%, #9ce9de 28%, #208c80 66%, #062c28 100%); box-shadow: inset -3px -4px 8px #04191688, 0 0 13px #54ddc955; }
.attempt-pips i.is-spent { filter: grayscale(1) brightness(.35); box-shadow: none; }
.attempt-pips .debug-infinity { color: #8ff4e5; font: 900 38px/1 ui-monospace, monospace; text-shadow: 0 0 18px #55d8c588; }
.coin-card > strong { display: flex; align-items: center; gap: 8px; margin: 7px 0; color: #fff4c7; font: 900 31px ui-monospace, monospace; }
.coin-card > strong i { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--gold-light); border-radius: 50%; background: #9b662d; font: 900 17px serif; font-style: normal; }
.coin-card > span { color: #8fb8ae; font: 800 13px system-ui, sans-serif; }
.coin-card > span b { color: #e6ce88; }
.legend-card ul { margin: 11px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.legend-card li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding-bottom: 7px; border-bottom: 1px solid #c9a85c25; color: #d9e4dc; font: 800 13px system-ui, sans-serif; }
.legend-card li:last-child { border: 0; padding: 0; }
.legend-card li span { color: #8cb2a9; font-size: 12px; }
.legend-card li b { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--gold-light); font: 900 18px ui-monospace, monospace; }
.local-note, .high-score { margin: 0; color: #789d94; font: 700 11px/1.5 system-ui, sans-serif; text-align: center; }
.high-score b { color: var(--gold); font-family: ui-monospace, monospace; }

.machine-frame {
  position: relative;
  width: min(100%, 620px);
  max-height: calc(100vh - 92px);
  padding: 17px 17px 12px;
  border: 2px solid #f1cb7b;
  border-radius: 60px 60px 28px 28px / 42px 42px 22px 22px;
  background: linear-gradient(90deg, #6d281f 0, #301714 4%, #0a342d 10%, #124e43 50%, #0a342d 90%, #301714 96%, #6d281f 100%);
  box-shadow: inset 0 0 0 5px #030f0d, inset 0 0 0 8px #c18b4099, inset 24px 0 32px #b7472d24, inset -24px 0 32px #b7472d24, 0 25px 75px #000d, 0 0 45px #45cbb21f;
}
.machine-frame::before, .machine-frame::after {
  content: "";
  position: absolute;
  top: 66px;
  bottom: 58px;
  width: 9px;
  border: 1px solid #f1cd7d66;
  border-radius: 999px;
  background: linear-gradient(#6e2c22, #db9d51 24%, #226b5d 51%, #b44731 78%, #3c1713);
  box-shadow: inset 0 0 4px #fff5, 0 0 16px #000;
}
.machine-frame::before { left: 4px; }
.machine-frame::after { right: 4px; }
.machine-crown {
  height: 38px;
  display: grid;
  grid-template-columns: 30px 1fr auto 1fr 30px;
  place-items: center;
  gap: 8px;
  color: var(--gold-light);
  font-weight: 900;
  letter-spacing: .22em;
}
.machine-crown span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2e786a, #0b241f 58%, #561f19); letter-spacing: 0; box-shadow: 0 0 14px #6de6d344; }
.machine-crown i { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.machine-crown i:nth-of-type(2) { background: linear-gradient(90deg, var(--gold), transparent); }
.playfield-wrap { position: relative; overflow: hidden; border: 3px solid #e9c777; border-radius: 42px 42px 18px 18px / 28px 28px 16px 16px; background: #061512; box-shadow: inset 0 0 30px #000, inset 0 0 0 5px #1b574b99, 0 7px 22px #000b, 0 0 28px #d99c4230; }
#playfield { width: 100%; height: auto; max-height: calc(100vh - 190px); display: block; margin: auto; touch-action: none; }
.glass-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, #fff0 0 7%, #fff8 12%, #fff0 18% 58%, #8ff3e518 67%, #fff0 74%), radial-gradient(circle at 92% 8%, #ffe9a629, transparent 30%); mix-blend-mode: screen; opacity: .2; }
.status-ribbon {
  position: absolute;
  top: 3.3%;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  min-width: 52%;
  padding: 8px 13px;
  border: 1px solid #d9bd7770;
  border-radius: 10px 3px 10px 3px;
  background: #061713dc;
  color: #efe8cc;
  font: 800 14px system-ui, sans-serif;
  text-align: center;
  letter-spacing: .08em;
  box-shadow: 0 7px 18px #0008;
}
.status-ribbon.is-hot { color: #fff2b7; border-color: #ffd470; box-shadow: 0 0 20px #e2aa4155; }
.zone-label {
  position: absolute;
  top: 8.2%;
  right: 4.8%;
  z-index: 9;
  padding: 6px 10px 6px 22px;
  border-right: 2px solid var(--cinnabar);
  background: linear-gradient(90deg, transparent, #071815df 28%);
  color: #f5d991;
  font: 900 14px/1 system-ui, sans-serif;
  letter-spacing: .12em;
  text-shadow: 0 2px 5px #000;
  pointer-events: none;
}
.journey-rail {
  position: absolute;
  right: 2.2%;
  top: 17%;
  z-index: 9;
  display: grid;
  gap: 12px;
  padding: 9px 6px;
  border: 1px solid #dfbd6d55;
  border-radius: 999px;
  background: #04130fbb;
  pointer-events: none;
}
.journey-rail i {
  width: 8px;
  height: 8px;
  border: 1px solid #b5a26f;
  border-radius: 50%;
  background: #19362f;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.journey-rail i.is-active { background: #ffe18b; box-shadow: 0 0 12px #58e5d0; transform: scale(1.35); }
.reward-pop { position: absolute; z-index: 12; top: 45%; left: 50%; color: #fff1a9; font: 900 28px/1 system-ui, sans-serif; text-shadow: 0 3px 8px #000, 0 0 16px #ffd05c; opacity: 0; transform: translate(-50%, 12px) scale(.88); pointer-events: none; }
.reward-pop.is-visible { animation: reward-pop 900ms ease-out both; }
@keyframes reward-pop { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.8); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 72% { opacity: 1; transform: translate(-50%, -24px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -40px) scale(.94); } }
.control-rail { min-height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 7px 5px 0; color: #9fc5ba; font: 800 11px/1.35 system-ui, sans-serif; }
.control-rail span:last-child { text-align: right; }
.control-rail strong { color: var(--gold); font: 800 12px serif; letter-spacing: .12em; }
kbd { min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; margin-right: 3px; border: 1px solid #d4bd7b77; border-bottom-width: 3px; border-radius: 5px; background: #14352e; color: #e9e2c8; font: 800 12px system-ui, sans-serif; }

.mission-card strong { display: block; margin: 7px 0 5px; color: var(--gold-light); font-size: 20px; }
.mission-card p { margin: 0; color: #a8c3bc; font: 700 12px/1.55 system-ui, sans-serif; }
.mission-marks { display: flex; gap: 8px; margin-top: 12px; }
.mission-marks i { flex: 1; height: 6px; border: 1px solid #668b82; background: #061612; transform: skewX(-18deg); }
.mission-marks i.is-lit { border-color: #ffe08c; background: linear-gradient(90deg, #42cbbb, #e8ba5f); box-shadow: 0 0 12px #4de4cd77; }
.plunger-card { display: grid; gap: 10px; }
.plunger-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.plunger-copy strong { color: #d9c17c; font: 900 14px ui-monospace, monospace; }
.charge-track { height: 10px; overflow: hidden; border: 1px solid #8fa89f; background: #020b09; }
.charge-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #4acbbb, #f3cd68, #d7593d); box-shadow: 0 0 12px #eed072; transition: width 50ms linear; }
.plunger-button { min-height: 126px; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px solid #d9ba6d88; border-radius: 18px 5px 18px 5px; background: linear-gradient(160deg, #153a31, #061b16); cursor: ns-resize; touch-action: none; user-select: none; }
.plunger-button span { width: 26px; height: 54px; position: relative; display: block; border: 3px solid #c39b50; border-radius: 12px 12px 4px 4px; background: linear-gradient(90deg, #765121, #f2d28a 45%, #8b6029); box-shadow: 0 8px 0 -2px #8d6331, 0 12px 0 -3px #3a2a1c; transition: transform 80ms linear; }
.plunger-button.is-charging span { transform: translateY(12px); }
.plunger-button b { color: #f1e5bd; font: 900 14px system-ui, sans-serif; }
.plunger-button small { letter-spacing: 0; }
#new-ball-button { width: 100%; }
.touch-controls { display: none; }

.modal-backdrop { position: absolute; inset: 0; z-index: 100; display: none; place-items: center; padding: 4%; background: #020d0ada; backdrop-filter: blur(10px); }
.modal-backdrop.is-visible { display: grid; }
.start-panel, .help-panel, .result-panel { position: relative; width: min(92%, 720px); max-height: 92vh; overflow: auto; padding: 30px; border: 1px solid #d5b96f; border-radius: 26px 7px 26px 7px; background: linear-gradient(155deg, #173d34 0, #081e19 48%, #04110e 100%); box-shadow: inset 0 0 0 4px #0b2b24, 0 25px 85px #000e; text-align: center; }
.start-panel > p, .help-panel > p, .result-panel > p { margin: 0 0 5px; color: var(--gold); font: 900 13px system-ui, sans-serif; letter-spacing: .17em; }
.start-panel h2, .help-panel h2, .result-panel h2 { margin: 0; color: var(--gold-light); font-size: clamp(30px, 5vw, 52px); text-shadow: 0 4px 18px #000; }
.start-panel > span, .result-panel > span:not(.result-seal) { display: block; margin: 7px 0 20px; color: #b4d1c9; font: 800 14px system-ui, sans-serif; letter-spacing: .12em; }
.start-constellation { height: 74px; display: flex; justify-content: center; align-items: center; gap: 23px; }
.start-constellation i { width: 12px; height: 12px; border: 2px solid var(--gold-light); border-radius: 50%; background: #2d9e91; box-shadow: 0 0 20px #73e8d7; }
.start-constellation i:nth-child(2), .start-constellation i:nth-child(4) { transform: translateY(-23px); }
.start-constellation i:nth-child(3) { width: 24px; height: 24px; background: #c97a3e; box-shadow: 0 0 24px #f1bd69; }
.start-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 22px; text-align: left; }
.start-rules article { min-height: 128px; padding: 15px; border-top: 1px solid #caaa5b77; background: #071a16b8; }
.start-rules b, .start-rules strong, .start-rules span { display: block; }
.start-rules b { color: #5bd7c6; font: 900 20px system-ui, sans-serif; }
.start-rules strong { margin: 7px 0; color: #f0db9c; font-size: 17px; }
.start-rules span { color: #a9c3bc; font: 700 12px/1.55 system-ui, sans-serif; }
.help-panel { width: min(92%, 760px); }
.close-button { position: absolute; top: 15px; right: 15px; width: 46px; min-height: 46px; border-radius: 50%; font: 300 30px system-ui, sans-serif; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; text-align: left; }
.help-grid article { min-height: 112px; display: grid; grid-template-columns: 42px 1fr; gap: 11px; padding: 15px; border: 1px solid #6a9c9055; background: #061713b0; }
.help-grid article > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-light); font-weight: 900; }
.help-grid strong { color: #e9d690; }
.help-grid p { margin: 5px 0 0; color: #a7c1ba; font: 700 12px/1.55 system-ui, sans-serif; }
.help-note { color: #86aaa1 !important; font: 700 11px/1.5 system-ui, sans-serif !important; letter-spacing: 0 !important; }
.result-panel { width: min(90%, 520px); }
.result-seal { width: 82px; height: 82px; display: grid; place-items: center; margin: 0 auto 15px; border: 3px double var(--gold); border-radius: 50%; background: #113c34; color: var(--gold-light); font-size: 39px; font-weight: 900; box-shadow: 0 0 30px #d7ad5950; }
.result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }
.result-stats span { padding: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #9ebbb4; font: 700 12px system-ui, sans-serif; }
.result-stats b { display: block; margin-top: 3px; color: #fff0b9; font: 900 22px ui-monospace, monospace; }

@media (max-width: 1040px) {
  .game-layout { grid-template-columns: minmax(150px, 190px) minmax(390px, 560px) minmax(160px, 195px); }
  .control-rail strong { display: none; }
  .control-rail { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .cabinet-shell { padding: 7px; align-content: start; }
  .masthead { padding: 2px 5px; }
  .brand-lockup p, #sound-button { display: none; }
  .brand-seal { width: 45px; height: 45px; }
  .brand-lockup h1 { font-size: 24px; }
  .game-layout { display: block; min-height: 0; }
  .ledger-panel, .score-panel { display: none; }
  .machine-frame { width: min(100%, 570px); max-height: none; margin: auto; padding: 10px 10px 8px; }
  #playfield { max-height: calc(100vh - 176px); }
  .machine-crown { height: 29px; font-size: 12px; }
  .machine-crown span { width: 23px; height: 23px; }
  .control-rail { min-height: 38px; font-size: 10px; }
  .touch-controls { width: min(100%, 570px); display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 8px auto 0; }
  .touch-controls button { min-height: 60px; border: 1px solid #d0af6577; border-radius: 16px 4px 16px 4px; background: linear-gradient(#17463b, #071b16); color: #d9e8df; touch-action: none; user-select: none; }
  .touch-controls button:active, .touch-controls button.is-active { background: linear-gradient(#2e7465, #0b2e26); transform: translateY(2px); }
  .touch-controls span, .touch-controls b { display: block; }
  .touch-controls span { color: var(--gold); font-size: 11px; }
  .touch-controls b { font-size: 17px; }
  .touch-controls .mobile-plunger { grid-column: 1 / -1; min-height: 54px; background: linear-gradient(90deg, #143b33, #6f4a25 50%, #143b33); }
  .touch-controls .mobile-plunger.is-active { background: linear-gradient(90deg, #206356, #bb8140 50%, #206356); }
  .start-panel, .help-panel, .result-panel { padding: 22px 17px; }
  .start-rules { grid-template-columns: 1fr; }
  .start-rules article { min-height: 0; }
  .help-grid { grid-template-columns: 1fr; }
  .modal-backdrop { position: fixed; }
}

@media (max-height: 760px) and (min-width: 821px) {
  .cabinet-shell { align-content: start; }
  .masthead { display: none; }
  .machine-frame { max-height: 100vh; }
  #playfield { max-height: calc(100vh - 106px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; }
}