:root {
  color-scheme: light;
  --paper: #f6f8f7;
  --ink: #263e32;
  --muted: #889386;
  --line: #dfe5da;
  --green: #60846a;
  --lime: #c2eb97;
  --tank: #f0f6f5;
  --radius: 20px;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
body.dialog-open { overflow: hidden; }
.mobile-tool-button { display: none; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, a, input { touch-action: manipulation; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
button, a, input { outline-offset: 5px; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 2px solid #79a560; }
button { transition: background .18s, color .18s, transform .18s, box-shadow .18s; }
button:active:not(:disabled) { transform: translateY(1px); }
h1, h2, p { margin: 0; }
button svg, a svg { pointer-events: none; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.app-shell { max-width: 1248px; padding: 0 38px; margin: 0 auto; }
.site-header { height: 90px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 20px; }
.brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); gap: 11px; }
.brand-mark { width: 43px; height: 43px; border-radius: 14px; background: var(--ink); display: grid; place-items: center; transform: rotate(-5deg); }
.brand-mark svg { width: 40px; height: 40px; }
.brand-type { font-size: 16px; letter-spacing: 1.6px; font-weight: 900; line-height: 1.12; display: flex; flex-direction: column; }
.brand-lab { font-size: 17px; letter-spacing: 4.9px; }
.brand-dot { font-size: 8px; vertical-align: top; letter-spacing: 0; position: relative; top: 1px; margin-left: -1px; }
.brand-divider { height: 27px; width: 1px; margin: 0 5px 0 10px; background: var(--line); }
.brand-caption { font-size: 10px; color: #8b9487; line-height: 1.9; letter-spacing: .7px; }
.brand-caption::first-line { font-size: 11px; color: #5c705d; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.experiment-id, .mono, .tiny-label, .eyebrow, .stage-heading, .page-footer, .modal-eyebrow { font-family: "Consolas", "SFMono-Regular", monospace; }
.experiment-id { font-size: 10px; color: var(--muted); letter-spacing: 1.3px; margin-right: 12px; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: transparent; display: inline-grid; place-items: center; }
.icon-button:hover { background: #e5ecdf; }
.icon-button .icon { width: 17px; height: 17px; }
.help-button { border: 1px solid var(--line); background: transparent; display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 30px; font-size: 11px; }
.help-button:hover { background: white; }
.help-button .icon { width: 15px; height: 15px; }
.intro { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 32px 0 29px; }
.eyebrow { font-size: 9px; letter-spacing: 1.55px; color: #798873; display: flex; align-items: center; gap: 6px; }
.eyebrow > span:first-child { width: 5px; height: 5px; border-radius: 50%; background: #8ca673; }
h1 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.3; font-weight: 750; letter-spacing: -1.6px; margin: 10px 0; }
h1 > span:first-child { color: #749061; }
.title-spark { display: inline-block; color: #95ad78; font-family: Georgia, serif; font-size: 30px; margin-left: 14px; transform: rotate(12deg); vertical-align: 3px; }
.intro-copy { font-size: 12px; line-height: 1.8; color: #87907f; letter-spacing: .4px; }
.concept-label { display: flex; gap: 13px; align-items: center; font-size: 10px; color: #8a9585; line-height: 1.9; padding-right: 4px; }
.concept-label strong { font-weight: 500; color: #52674f; font-size: 12px; }
.orbit-mark { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #cad7c0; color: #79956a; font-size: 33px; line-height: 1; display: grid; place-items: center; transform: rotate(-20deg); }
.workspace { display: grid; grid-template-columns: minmax(175px, 216px) minmax(350px, 1fr) minmax(205px, 240px); gap: 25px; align-items: start; }
.left-column, .right-column { display: flex; flex-direction: column; gap: 17px; min-width: 0; }
.score-card, .next-card, .physics-card, .evolution-card { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .55); }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-heading h2 { font-size: 12px; font-weight: 650; letter-spacing: .3px; display: flex; align-items: center; gap: 7px; }
.card-heading h2 .icon { width: 16px; height: 16px; }
.tiny-label { font-size: 9px; font-weight: normal; letter-spacing: 1px; color: #8c9987; white-space: nowrap; }
.score-card { background: #e8eedc; border-color: #e1e7d5; padding: 21px 20px 17px; position: relative; overflow: hidden; }
.score-card::after { content: "+"; position: absolute; top: 45px; right: 11px; font-family: monospace; font-size: 93px; font-weight: 200; line-height: 1; color: #dce6ce; pointer-events: none; }
.score-value { font-family: "Segoe UI", sans-serif; font-size: 54px; letter-spacing: -2.4px; font-weight: 650; line-height: 1.1; margin: 14px 0 7px; position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.score-value.bump { animation: score-bump .3s ease-out; }
.score-feedback { color: #8b977d; font-size: 10px; min-height: 17px; position: relative; z-index: 1; }
.best-score { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-top: 1px solid #d7e0ca; margin-top: 20px; padding-top: 14px; font-size: 10px; color: #7c8b70; }
.best-score > span { display: flex; gap: 6px; align-items: center; }
.best-score .icon { width: 14px; height: 14px; }
.best-score strong { color: #597147; font-family: Consolas, monospace; font-size: 13px; }
.next-card { padding: 19px 20px 14px; }
.next-fruit-display { position: relative; display: grid; place-items: center; height: 116px; }
#next-canvas { width: 142px; height: 115px; z-index: 1; position: relative; }
.next-orbit { position: absolute; width: 114px; height: 36px; border: 1px dashed #dde5d5; border-radius: 50%; bottom: 14px; transform: rotate(-12deg); }
.next-fruit-caption { display: flex; justify-content: center; gap: 9px; align-items: center; }
.next-fruit-caption strong { font-size: 11px; font-weight: 550; }
.next-fruit-caption > span { font-family: Consolas, monospace; color: #91a180; font-size: 9px; border: 1px solid #dfe6d8; border-radius: 4px; padding: 2px 4px; }
.next-queue { border-top: 1px solid #e9ece4; margin-top: 15px; padding-top: 10px; display: flex; justify-content: center; gap: 9px; align-items: center; }
.next-queue::before { content: "THEN"; font-size: 8px; letter-spacing: 1px; color: #a0a99a; font-family: Consolas, monospace; margin-right: 3px; }
.queue-fruit { width: 27px; height: 27px; border: 1px solid #e5eade; border-radius: 50%; background: #f1f4eb; display: block; }
.quick-guide { padding: 8px 5px 0; }
.quick-guide > .eyebrow { color: #9aa18e; font-size: 9px; margin: 0 0 19px; }
.guide-line { display: flex; gap: 13px; margin-bottom: 18px; align-items: flex-start; }
.step-number { color: #a4b195; font-size: 10px; font-family: Consolas, monospace; border: 1px solid #dfe5d6; border-radius: 50%; width: 25px; height: 25px; display: grid; place-items: center; flex-shrink: 0; }
.guide-line p { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.guide-line strong { font-weight: 550; font-size: 11px; letter-spacing: .5px; }
.guide-line p > span { font-size: 10px; color: #909986; line-height: 1.5; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 0; font-size: 11px; padding: 7px 0; color: #89987d; }
.text-button:hover { color: #354e32; }
.text-button .icon { width: 14px; height: 14px; }
.restart-button { width: 100%; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 2px; }
.game-column { min-width: 0; }
.game-stage { background: var(--tank); border-radius: 8px; position: relative; overflow: hidden; box-shadow: 0 12px 30px -22px #62847740; border: 1px solid #bbd0c8; isolation: isolate; }
.stage-heading { height: 46px; padding: 0 22px; border-bottom: 1px solid #cbded5; display: flex; justify-content: space-between; align-items: center; color: #51776a; font-size: 9px; letter-spacing: 0; }
.stage-heading > div { display: flex; align-items: center; gap: 8px; }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: #4b9672; }
.stage-icon-button { width: 29px; height: 29px; border-radius: 50%; background: #ffffff90; border: 1px solid #b9d1c5; display: grid; place-items: center; color: #416957; }
.stage-icon-button:hover { background: #daeade; }
.stage-icon-button .icon { width: 14px; height: 14px; }
.canvas-wrap { position: relative; line-height: 0; }
#game-canvas { width: 100%; height: auto; display: block; touch-action: none; cursor: crosshair; outline-offset: -4px; user-select: none; -webkit-user-select: none; }
.canvas-hint { position: absolute; top: 40%; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #769488; font-size: 11px; letter-spacing: 0; pointer-events: none; line-height: 1.5; transition: opacity .4s; }
.hint-cross { width: 29px; height: 29px; border: 1px solid #c2d7cb; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 200; color: #699681; }
.canvas-hint small { font-size: 9px; color: #79988b; letter-spacing: 0; }
.stage-bottom { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 7px; border-top: 1px solid #cbded5; padding: 8px 20px; font-size: 9px; color: #567b67; line-height: 1.7; }
.material-status { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.material-status > span:first-child { width: 4px; height: 4px; background: #5b9478; border-radius: 50%; }
.stage-shortcut { display: flex; gap: 5px; align-items: center; color: #87a580; }
kbd { font-family: Consolas, monospace; font-weight: 400; font-size: 9px; padding: 1px 4px; border: 1px solid #8fad8130; border-radius: 3px; line-height: 1.3; }
.fruit-counter { color: #557765; white-space: nowrap; }
.under-stage { display: flex; justify-content: space-between; align-items: center; padding: 14px 5px 0; color: #8f9c86; font-size: 9px; gap: 10px; }
.under-stage > span:first-child { display: flex; align-items: center; gap: 6px; }
.under-stage .icon { width: 12px; height: 12px; }
.under-stage .mono { font-size: 9px; letter-spacing: 1.6px; }
.physics-card { padding: 20px 18px 15px; }
.live-tag { padding: 2px 6px; font-size: 9px; border-radius: 4px; color: #83a572; background: #edf3e4; }
.preset-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: #edf0e8; border: 1px solid #e5e9df; padding: 3px; border-radius: 8px; margin: 18px 0 22px; }
.preset-switch button { border: 0; border-radius: 5px; font-size: 10px; background: transparent; color: #929d87; padding: 7px 0; }
.preset-switch button[aria-pressed="true"] { background: #fff; color: #466738; box-shadow: 0 1px 5px #384b2810; font-weight: 600; }
.preset-switch button:hover { color: #435c37; }
.parameter + .parameter { margin-top: 20px; }
.parameter label { display: flex; justify-content: space-between; font-size: 10px; align-items: center; font-weight: 500; color: #657a5b; }
.parameter output { font-family: Consolas, monospace; color: #6c845d; font-size: 10px; }
input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; height: 5px; background: linear-gradient(to right, #8ca974 0 var(--fill, 50%), #e5ebdf var(--fill, 50%) 100%); border-radius: 5px; margin: 15px 0 8px; cursor: pointer; display: block; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #7e9c65; box-shadow: 0 1px 3px #33482a22; }
input[type="range"]::-moz-range-thumb { width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 3px solid #7e9c65; box-shadow: 0 1px 3px #33482a22; }
.range-ends { display: flex; justify-content: space-between; font-size: 8px; color: #a0aa96; }
.parameter-note { font-size: 9px; color: #a2ac9a; margin-top: 20px; padding-top: 13px; border-top: 1px solid #e9ede4; text-align: center; }
.liquid-card { padding: 19px 18px 15px; background: #e9efdF; border: 1px solid #dfe7d3; border-radius: var(--radius); }
.liquid-card h2 { color: #536e45; }
.tool-cost { font-size: 10px; font-weight: 400; color: #75816b; }
#liquify-value { font: 12px Consolas, monospace; color: #466b56; }
.liquify-control { position: relative; min-width: 0; padding: 0 6px 14px; }
#liquify-slider, .sound-dialog input[type="range"] { height: 44px; margin: 2px 0; background-size: 100% 6px; background-repeat: no-repeat; background-position: center; border-radius: 0; touch-action: none; -webkit-touch-callout: none; }
#liquify-slider::-webkit-slider-thumb, .sound-dialog input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }
#liquify-slider::-moz-range-thumb, .sound-dialog input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; }
#liquify-slider:disabled { opacity: .5; cursor: not-allowed; }
.liquify-status { position: absolute; bottom: 0; right: 6px; font: 10px Consolas, "Microsoft YaHei", sans-serif; color: #6c8271; }
.shake-button { border: 0; border-top: 1px solid #dce5ce; padding: 12px 0 0; display: flex; align-items: center; gap: 7px; width: 100%; background: transparent; font-size: 10px; color: #819570; }
.shake-button:not(:disabled):hover { color: #486534; }
.shake-button .icon { width: 15px; height: 15px; }
.shake-cost { margin-left: auto; font: 11px Consolas, monospace; color: #648068; }
.evolution-card { padding: 18px 17px 14px; }
.evolution-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px 6px; margin: 17px 0 12px; }
.evolution-fruit { width: 100%; aspect-ratio: 1; border-radius: 50%; background: #f0f3e9; border: 1px solid #e8ede0; position: relative; }
.evolution-fruit canvas { width: 100%; height: 100%; display: block; }
.evolution-fruit.locked { opacity: .36; filter: saturate(.35); }
.evolution-fruit.latest { border-color: #9ebd7d; background: #eaf2dc; box-shadow: 0 0 0 2px #eaf2dc; }
.evolution-fruit:last-child { background: #e8efdf; }
.evolution-fruit::after { content: attr(data-level); position: absolute; bottom: -3px; right: -2px; font: 7px Consolas, monospace; color: #8fa17c; background: var(--paper); border-radius: 3px; padding: 0 2px; }
.evolution-card > p { font-size: 9px; color: #8e9c80; line-height: 1.9; }
.evolution-card > p span { display: block; color: #a9b39f; font-size: 8px; }
.page-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 25px 0 21px; margin-top: 20px; border-top: 1px solid var(--line); color: #a2ac97; font-size: 8px; letter-spacing: .8px; }
.page-footer > span:last-child { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 9px; letter-spacing: .4px; }
.footer-dot { margin-left: 10px; color: #a3b691; font-size: 6px; }
.combo-badge { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; color: #437057; background: #ffffffed; border: 1px solid #bcd7c3; padding: 10px 14px; border-radius: 8px; font: 10px Consolas, monospace; line-height: 1; white-space: nowrap; pointer-events: none; animation: badge-in .3s ease-out; }
.combo-badge .icon { width: 14px; height: 14px; }
.pause-overlay { position: absolute; inset: 0; background: #f0f6f2e8; backdrop-filter: blur(8px); display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.6; z-index: 4; padding: 24px; text-align: center; }
.pause-art { font-size: 50px; color: #70a079; font-weight: 200; margin-bottom: 16px; }
.pause-overlay h2 { color: #365e48; font-size: 22px; font-weight: 500; }
.pause-overlay p { font-size: 11px; color: #658573; margin: 12px 0 25px; }
.primary-button { border: 1px solid #a4c686; background: #c4e89f; color: #3e582c; padding: 12px 20px; min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.primary-button:hover { background: #b9df90; }
.primary-button .icon { width: 16px; height: 16px; }
.secondary-button { border: 1px solid var(--line); background: transparent; color: #73816a; padding: 12px 17px; border-radius: 10px; font-size: 12px; }
.secondary-button:hover { background: #e8eedf; }
.stage-toast { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); max-width: 90%; background: #e5efdbeb; color: #4a6540; font-size: 10px; line-height: 1.6; text-align: center; padding: 9px 15px; border-radius: 9px; pointer-events: none; z-index: 5; box-shadow: 0 4px 20px #0b211333; }
.game-stage.liquid-active { box-shadow: 0 0 0 2px #73b69a80; }
.game-stage.liquid-active .stage-heading { color: #2c7658; }
.game-stage.is-shaking { animation: container-shake .45s ease-in-out; }
.game-stage.in-danger { border-color: #ce635b; }
.game-stage.in-danger .live-dot { background: #ce635b; }
.modal { width: min(440px, calc(100vw - 32px)); padding: 33px; border: 1px solid #dfe7d4; border-radius: 24px; background: #f7f8f1; color: var(--ink); box-shadow: 0 35px 120px #0e251040; max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.modal::backdrop { background: #1f352e70; backdrop-filter: blur(6px); }
.modal-close { position: absolute; right: 17px; top: 17px; width: 28px; height: 28px; }
.modal-eyebrow { color: #8d9e7a; font-size: 9px; letter-spacing: 1.6px; display: block; padding-right: 20px; }
.modal h2 { font-size: 25px; font-weight: 650; letter-spacing: -.7px; margin: 14px 0 12px; }
.modal-intro { font-size: 12px; color: #8a9680; line-height: 1.9; }
.help-steps { margin-top: 27px; display: grid; gap: 21px; }
.help-steps > div { display: flex; gap: 15px; }
.help-steps > div > span { font-family: Consolas, monospace; font-size: 12px; color: #9baf86; padding-top: 2px; }
.help-steps p { font-size: 11px; color: #89957f; line-height: 1.8; }
.help-steps strong { display: block; font-weight: 600; color: #536c46; font-size: 12px; margin-bottom: 4px; }
.keyboard-guide { padding: 18px 0; margin-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; font-size: 10px; color: #8d9b80; }
.keyboard-guide kbd { margin-right: 4px; border-color: #cad6bf; }
.modal-primary { width: 100%; }
.modal-footnote { font-size: 9px; line-height: 1.6; color: #a4ad9a; text-align: center; margin-top: 15px; }
.result-modal { text-align: center; }
.result-modal .modal-eyebrow { padding: 0; }
.result-fruit { margin-top: 9px; height: 145px; display: grid; place-items: center; }
#result-canvas { width: 180px; height: 150px; }
.result-score { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 25px 0; }
.result-score > span { font-size: 11px; color: #8d9c80; }
.result-score strong { font-family: Consolas, monospace; font-size: 40px; font-weight: normal; color: #5b7847; }
.result-secondary { margin-top: 10px; }
.compact-modal { width: min(390px, calc(100vw - 32px)); }
.compact-modal h2 { font-size: 22px; }
.dialog-actions { display: flex; gap: 10px; margin-top: 25px; }
.dialog-actions > button { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.noscript-message { position: fixed; top: 0; left: 0; right: 0; padding: 20px; background: #f6d8aa; text-align: center; color: #664f31; z-index: 10; }
[hidden] { display: none !important; }

@keyframes score-bump { 50% { transform: scale(1.04); transform-origin: left; } }
@keyframes badge-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes container-shake { 20% { transform: rotate(-.55deg); } 40% { transform: rotate(.55deg); } 60% { transform: rotate(-.35deg); } 80% { transform: rotate(.25deg); } }

@media (min-width: 1440px) { .app-shell { max-width: 1320px; padding: 0 50px; } .workspace { grid-template-columns: 226px minmax(350px, 1fr) 252px; gap: 30px; } .intro { padding-top: 36px; padding-bottom: 33px; } }
@media (max-width: 1080px) { .app-shell { padding: 0 24px; } .workspace { grid-template-columns: 165px minmax(320px, 1fr) 207px; gap: 17px; } .score-card, .next-card { padding-left: 15px; padding-right: 15px; } .physics-card, .liquid-card { padding-left: 14px; padding-right: 14px; } .score-value { font-size: 47px; } .stage-shortcut { display: none; } .brand-caption { display: none; } .brand-divider { display: none; } .experiment-id { margin-right: 0; } .quick-guide { padding-left: 0; padding-right: 0; } .guide-line { gap: 9px; } .guide-line p > span { font-size: 9px; } .concept-label { font-size: 9px; } .title-spark { font-size: 25px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (min-width: 821px) {
  .app-shell { --board-width: clamp(345px, calc(86.6667dvh - 294.6667px), 510px); max-width: calc(var(--board-width) + 582px); padding: 0 38px; }
  .workspace { grid-template-columns: minmax(155px, 216px) minmax(330px, var(--board-width)) minmax(190px, 240px); gap: 25px; }
  .site-header { height: 76px; }
  .intro { padding: 23px 0 22px; }
  h1 { font-size: 34px; margin: 9px 0; }
  .title-spark { font-size: 26px; }
  .concept-label { gap: 10px; }
  .concept-label strong { font-size: 10px; }
  .orbit-mark { width: 36px; height: 36px; font-size: 27px; }
  .page-footer { margin-top: 16px; padding: 18px 0; }
}

@media (min-width: 821px) and (max-height: 900px) {
  .left-column, .right-column { gap: 14px; }
  .score-card { padding: 17px 18px 15px; }
  .score-value { font-size: 46px; margin-top: 11px; }
  .best-score { margin-top: 14px; padding-top: 11px; }
  .next-card { padding: 16px 18px 12px; }
  .next-fruit-display { height: 94px; }
  #next-canvas { width: 117px; height: 95px; }
  .next-orbit { width: 94px; height: 29px; bottom: 10px; }
  .next-queue { margin-top: 11px; padding-top: 8px; }
  .quick-guide { padding-top: 4px; }
  .quick-guide > .eyebrow { margin-bottom: 14px; }
  .guide-line { margin-bottom: 14px; }
  .physics-card { padding: 17px 16px 15px; }
  .preset-switch { margin: 14px 0 16px; }
  .preset-switch button { padding-top: 6px; padding-bottom: 6px; }
  .parameter + .parameter { margin-top: 13px; }
  input[type="range"] { margin-top: 12px; margin-bottom: 7px; }
  .parameter-note { display: none; }
  .liquid-card { padding: 16px 16px 13px; }
  .shake-button { padding-top: 10px; }
  .evolution-card { padding: 16px 15px 13px; }
  .evolution-track { margin: 13px 0 10px; }
}

.mobile-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.score-line { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 80px; container-type: inline-size; position: relative; z-index: 1; }
.score-line .score-value { min-width: 0; white-space: nowrap; letter-spacing: 0; font-size: clamp(10px, calc((100cqw - var(--score-gaps, 34px) - var(--star-digits, 1) * var(--star-character, 9px)) / (var(--score-digits, 4) * .59)), var(--score-maximum, 54px)); }
.star-count { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: #b28a24; font: 14px Consolas, monospace; }
.star-count > span { color: #dfaf38; font-size: 20px; }
.star-count strong { font-weight: 600; }
button.best-score { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: transparent; text-align: left; min-height: 32px; }
button.best-score:hover { color: #395e47; }
.sound-dialog, .records-dialog { border-radius: 8px; }
.sound-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; margin-bottom: 18px; font-size: 14px; }
.sound-toggle input { appearance: none; width: 44px; height: 26px; border-radius: 13px; margin: 0; background: #b8c6be; position: relative; cursor: pointer; }
.sound-toggle input::before { content: ""; position: absolute; width: 20px; height: 20px; top: 3px; left: 3px; border-radius: 50%; background: #fff; transition: transform .15s; }
.sound-toggle input:checked { background: #608b6c; }
.sound-toggle input:checked::before { transform: translateX(18px); }
.sound-dialog .parameter label, .sound-dialog .parameter output { font-size: 13px; }
.sound-dialog .parameter + .parameter { margin-top: 16px; }
.music-credit { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; font-size: 12px; color: #718574; }
.music-credit a { color: #497158; text-underline-offset: 3px; }
#music-error { font-size: 12px; color: #a8514d; margin-top: 12px; }
.record-stats { margin: 0; }
.record-stats > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.record-stats dt { font-size: 12px; color: #738576; }
.record-stats dd { font: 32px Consolas, monospace; color: #456b52; margin: 8px 0 0; overflow-wrap: anywhere; }
.record-stats dd > span:first-child { color: #c69924; }
.record-date, .record-storage { font-size: 11px; color: #738576; line-height: 1.7; margin-top: 16px; }
.record-storage { margin-top: 8px; }
.mobile-panel-heading h2 { margin: 0; font-size: 20px; letter-spacing: 0; }
.mobile-panel-heading .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
#mobile-panel-content > section { border: 0; background: transparent; border-radius: 0; padding: 0; }
#mobile-panel-content .card-heading { display: none; }
#mobile-panel-content .preset-switch { margin-top: 0; }
#mobile-panel-content .evolution-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 8px 0 24px; }
#mobile-panel-content .evolution-fruit { max-width: 88px; justify-self: center; }
#mobile-panel-content .evolution-fruit::after { font-size: 11px; }
#mobile-panel-content .evolution-card > p { font-size: 12px; }
#mobile-panel-content .evolution-card > p span { font-size: 11px; }

@media (min-width: 821px) and (max-height: 900px) {
  .score-line { --score-maximum: 46px; min-height: 69px; }
}

@media (max-width: 820px), (max-height: 540px) and (pointer: coarse) {
  html { min-width: 280px; }
  body { overscroll-behavior-y: none; }
  .app-shell { max-width: 520px; padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .app-shell * { letter-spacing: 0; }
  .site-header { height: 52px; gap: 12px; }
  .brand { gap: 8px; min-width: 0; }
  .brand-mark { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
  .brand-mark svg { width: 32px; height: 32px; }
  .brand-type { font-size: 12px; }
  .brand-lab { font-size: 13px; }
  .brand-dot { font-size: 7px; }
  .brand-divider, .brand-caption, .experiment-id, .intro, .quick-guide, .under-stage, .page-footer { display: none; }
  .header-actions { gap: 4px; }
  .header-actions .icon-button, .help-button { width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; }
  .header-actions .icon, .help-button .icon { width: 20px; height: 20px; }
  .help-button span { display: none; }
  .workspace { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .left-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; width: 100%; }
  .score-card, .next-card { min-width: 0; min-height: 58px; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .score-card .card-heading, .next-card .card-heading { gap: 0; }
  .score-card .card-heading h2, .next-card .card-heading h2 { font-size: 11px; color: #60725e; }
  .score-card .tiny-label, .next-card .tiny-label, .score-card::after, .score-feedback, .next-orbit, .next-queue { display: none; }
  .score-value { margin: 1px 0; line-height: 1; }
  .score-line { --score-maximum: 28px; --score-gaps: 25px; --star-character: 7px; gap: 5px; min-height: 30px; }
  .star-count { gap: 2px; font-size: 11px; }
  .star-count > span { font-size: 16px; }
  button.best-score { position: static; flex-direction: row; justify-content: flex-start; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; font-size: 10px; min-height: 24px; }
  .best-score > span { font-size: 9px; gap: 3px; }
  .best-score strong { font-size: 10px; overflow-wrap: anywhere; }
  .best-score .icon { width: 11px; height: 11px; }
  .next-card { display: grid; grid-template-columns: minmax(0, 1fr) 62px; grid-template-rows: 18px 40px; column-gap: 2px; }
  .next-card .card-heading { grid-column: 1; grid-row: 1; }
  .next-fruit-display { position: static; grid-column: 2; grid-row: 1 / 3; width: 62px; height: 58px; }
  #next-canvas { width: 62px; height: auto; }
  .next-fruit-caption { grid-column: 1; grid-row: 2; margin: 0; gap: 3px; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; }
  .next-fruit-caption strong { font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
  .next-fruit-caption > span { font-size: 9px; border: 0; padding: 0; }
  .game-column { width: 100%; width: min(100%, max(200px, calc((100svh - 316px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .866667))); align-self: center; }
  .game-stage { border-radius: 8px; box-shadow: none; }
  .stage-heading { height: 44px; padding: 0 8px 0 12px; font-size: 8px; }
  .stage-heading > div { gap: 5px; }
  .stage-controls { gap: 0 !important; }
  .stage-icon-button { width: 44px; height: 42px; border: 0; background: transparent; border-radius: 6px; }
  .stage-icon-button .icon { width: 18px; height: 18px; }
  #game-canvas { aspect-ratio: 13 / 15; -webkit-touch-callout: none; }
  .stage-bottom { min-height: 28px; padding: 5px 10px; font-size: 9px; line-height: 1.5; gap: 4px; }
  .stage-shortcut { display: none; }
  .canvas-hint { font-size: 10px; gap: 6px; }
  .canvas-hint small { display: none; }
  .hint-cross { width: 24px; height: 24px; font-size: 18px; }
  .combo-badge { max-width: 94%; padding: 8px; font-size: 9px; white-space: normal; line-height: 1.4; text-align: center; }
  .pause-overlay { padding: 12px; }
  .pause-art { font-size: 32px; margin-bottom: 8px; }
  .pause-overlay h2 { font-size: 18px; }
  .pause-overlay p { margin: 8px 0 16px; }
  .right-column { display: block; width: 100%; padding: 0; }
  .right-column .physics-card, .right-column .evolution-card { display: none; }
  .liquid-card { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 44px); gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .liquid-card .card-heading { grid-column: 1 / -1; grid-row: 1; min-height: 20px; }
  .liquid-card .card-heading h2 { font-size: 11px; }
  .liquify-control { grid-column: 1; grid-row: 2; }
  #shake-label { display: none; }
  .shake-button, .mobile-tool-button { position: relative; display: grid; place-items: center; width: 44px; height: 48px; padding: 0; margin: 0; border: 1px solid #cfdaca; border-radius: 8px; background: #e8eee2; color: #4b6846; }
  .shake-button { grid-column: 2; grid-row: 2; }
  .shake-button .icon, .mobile-tool-button .icon { width: 21px; height: 21px; }
  .shake-button { padding-bottom: 10px; }
  .shake-cost { position: absolute; bottom: 3px; left: 0; right: 0; font-size: 9px; text-align: center; margin: 0; }
  .shake-button[data-cooldown]:not([data-cooldown=""])::after { content: attr(data-cooldown); position: absolute; right: 3px; bottom: 1px; font: 10px Consolas, monospace; }
  #mobile-physics-button { grid-column: 3; grid-row: 2; }
  #mobile-evolution-button { grid-column: 4; grid-row: 2; }
  .mobile-tool-button:hover { background: #dce8d4; }
  .modal { padding: 24px; max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); border-radius: 8px; }
  .modal h2 { letter-spacing: 0; font-size: 21px; }
  .modal-close { width: 44px; height: 44px; top: 5px; right: 5px; }
  .modal-eyebrow { padding-right: 24px; line-height: 1.6; letter-spacing: 0; }
  .keyboard-guide { display: none; }
  .help-steps { margin-bottom: 24px; }
  .primary-button, .secondary-button, .text-button { min-height: 44px; }
  .mobile-panel-dialog { margin: auto auto 0; width: min(480px, 100%); max-width: 100%; padding: 18px 24px max(24px, env(safe-area-inset-bottom, 0px)); border-radius: 8px 8px 0 0; }
  .mobile-panel-heading h2 { font-size: 20px; }
  #mobile-panel-content .preset-switch button { min-height: 44px; font-size: 13px; }
  #mobile-panel-content .parameter + .parameter { margin-top: 18px; }
  #mobile-panel-content .parameter label, #mobile-panel-content .parameter output { font-size: 13px; }
  #mobile-panel-content input[type="range"] { height: 40px; margin: 4px 0; background-size: 100% 5px; background-repeat: no-repeat; background-position: center; border-radius: 0; touch-action: pan-y; }
  #mobile-panel-content input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
  #mobile-panel-content input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; }
  #mobile-panel-content .range-ends { font-size: 10px; }
  #mobile-panel-content .parameter-note { display: none; }
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 820px), (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
  .app-shell { max-width: 900px; }
  .site-header { height: 48px; }
  .workspace { display: grid; grid-template-columns: minmax(0, 1fr) 212px; gap: 12px; align-items: start; }
  .game-column { grid-column: 1; grid-row: 1 / 3; justify-self: center; align-self: start; width: min(100%, max(140px, calc((100svh - 114px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .866667))); }
  .stage-bottom { display: none; }
  .stage-heading > div:first-child { min-width: 0; }
  #simulation-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .left-column { grid-column: 2; grid-row: 1; gap: 6px; }
  .score-line { --score-maximum: 20px; }
  .next-card { grid-template-columns: minmax(0, 1fr) 44px; }
  .next-fruit-display, #next-canvas { width: 44px; }
  .right-column { grid-column: 2; grid-row: 2; }
  .liquid-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .liquify-control { grid-column: 1 / -1; }
  .shake-button, #mobile-physics-button, #mobile-evolution-button { grid-row: 3; width: 100%; }
  .shake-button { grid-column: 1; }
  #mobile-physics-button { grid-column: 2; }
  #mobile-evolution-button { grid-column: 3; }
}