:root { color-scheme: dark; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; background: #11172e; color: #f7f1e5; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 50% 0%, #35457d 0, #182444 42%, #10152b 100%); }
button { font: inherit; }
.app-shell { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); isolation: isolate; }
.app-shell::before { content: ""; position: fixed; z-index: -2; inset: 0; background: linear-gradient(#09102742, #07102472), url("./assets/system-space-background.png") center / cover no-repeat; filter: saturate(.82); transition: opacity .5s ease, background-image .5s ease; }
.app-shell[data-backdrop="trial"]::before { background: linear-gradient(#10172a78, #0b1129b8), url("./assets/paper-flight-background.png") 72% center / cover no-repeat; }
.app-shell[data-backdrop="fruit"]::before { background: linear-gradient(#10172a70, #0b11299c), url("./assets/fruit-courtyard-background.png") center / cover no-repeat; }
.app-shell[data-backdrop="merge"]::before { background: linear-gradient(#0c132861, #070d20a8), url("./assets/merge-workshop-background.png") center / cover no-repeat; }
.app-shell[data-backdrop="runner"]::before { background: linear-gradient(#10172a50, #0b11298c), url("./assets/runner-street-background.png") center 70% / cover no-repeat; }
.app-shell[data-backdrop="ocean"]::before { background: linear-gradient(#09234545, #07172f80), url("./assets/ocean-runner-background.png") center 56% / cover no-repeat; }
.app-shell[data-backdrop="final"]::before { background: linear-gradient(#070d2038, #050a18a3), url("./assets/final-teaser-background.png") center / cover no-repeat; }
.sky-noise { position: fixed; z-index: -1; inset: 0; opacity: .42; pointer-events: none; background-image: radial-gradient(circle at 16% 20%, #fff9da 0 1px, transparent 1.5px), radial-gradient(circle at 73% 24%, #fff9da 0 1px, transparent 1.5px), radial-gradient(circle at 64% 74%, #fff9da 0 1px, transparent 1.5px), radial-gradient(circle at 20% 77%, #fff9da 0 1px, transparent 1.5px); background-size: 210px 180px, 300px 220px, 250px 260px, 360px 290px; animation: drift 14s linear infinite; }
.space-effects { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; opacity: 1; transition: opacity .45s ease; }
.app-shell[data-backdrop="trial"] .space-effects { opacity: .28; }
.app-shell[data-backdrop="fruit"] .space-effects { opacity: .18; }
.app-shell[data-backdrop="final"] .space-effects { opacity: .12; }
.space-effects i { position: absolute; width: 34vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #94d7dd3d, transparent 68%); filter: blur(14px); animation: orb-drift 12s ease-in-out infinite alternate; }
.space-effects i:nth-child(1) { left: -8vw; top: 12%; }
.space-effects i:nth-child(2) { right: -11vw; top: 34%; background: radial-gradient(circle, #e9bd7140, transparent 68%); animation-duration: 16s; animation-delay: -4s; }
.space-effects i:nth-child(3) { left: 37%; bottom: -18vw; width: 27vw; animation-duration: 19s; animation-delay: -8s; }
@keyframes drift { to { transform: translate3d(-22px, 14px, 0); } }
@keyframes orb-drift { from { transform: translate3d(-2vw, -1vh, 0) scale(.9); } to { transform: translate3d(5vw, 4vh, 0) scale(1.12); } }
.hud { position: fixed; top: max(18px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: center; z-index: 2; pointer-events: none; }
.brand { display: grid; gap: 2px; color: #becdf6; font-size: 11px; letter-spacing: .16em; }
.brand strong { font-family: "Space Grotesk", sans-serif; color: #fff5d5; font-size: 13px; letter-spacing: .12em; }
.fragment-counter { padding: 8px 12px; border: 1px solid #7387c0aa; border-radius: 999px; background: #10182fcc; backdrop-filter: blur(10px); color: #d9e2ff; font-size: 13px; }
.fragment-counter b { color: #ffd36e; font-family: "Space Grotesk", sans-serif; font-size: 17px; }
.audio-controls { position: fixed; z-index: 3; top: 118px; right: max(12px, env(safe-area-inset-right)); display: grid; gap: 7px; }
.audio-controls button { display: grid; place-items: center; width: 48px; min-height: 48px; border: 1px solid #7387c08c; border-radius: 16px; padding: 5px; cursor: pointer; color: #dbe5ff; background: #10182fd9; backdrop-filter: blur(10px); font-size: 18px; line-height: 1; transition: border-color .18s ease, background .18s ease, transform .12s ease; }
.audio-controls button span { display: block; margin-top: 3px; font-size: 8px; white-space: nowrap; }
.audio-controls button:active { transform: translateY(1px) scale(.97); }
.volume-control { display: grid; justify-items: center; gap: 4px; width: 48px; padding: 7px 4px; border: 1px solid #7387c08c; border-radius: 16px; color: #dbe5ff; background: #10182fd9; backdrop-filter: blur(10px); font-size: 8px; }
.volume-control input { width: 38px; height: 16px; margin: 0; accent-color: #ffd986; cursor: pointer; }
.audio-controls button:hover, .audio-controls button:focus-visible { border-color: #ffd986; background: #202d55e8; }
.audio-controls button[aria-pressed="false"] { color: #9ba7c8; text-decoration: line-through; }
.story-stage { width: min(980px, 100%); display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 680px); align-items: end; justify-content: center; gap: clamp(14px, 3vw, 32px); }
.story-stage.no-portrait { grid-template-columns: minmax(0, 680px); }
.world-hub { width: min(1040px, 100%); padding: clamp(18px, 3vw, 34px); border: 1px solid #8299d06e; border-radius: 28px; background: #0d1630e8; backdrop-filter: blur(16px); box-shadow: 0 26px 80px #02061194; }
.hub-heading { margin-bottom: 20px; text-align: center; } .hub-heading h1 { margin: 6px 0; } .hub-heading > p:last-child { color: #bcc8e9; }
.world-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.world-card { position: relative; min-height: 190px; overflow: hidden; display: flex; align-items: end; justify-content: space-between; border: 1px solid #8ca2dd78; border-radius: 22px; padding: 18px; cursor: pointer; color: #fff5d8; text-align: left; background-size: cover; background-position: center; isolation: isolate; transition: transform .18s ease, border-color .18s ease; }
.world-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #0a1126ed, #0a11266b); }
.world-card:hover, .world-card:focus-visible { transform: translateY(-3px); border-color: #ffd986; }
.world-card img, .world-guardian-placeholder { width: 120px; max-height: 145px; object-fit: contain; filter: drop-shadow(0 12px 18px #030716a8); }
.world-guardian-placeholder { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #ffd98680; border-radius: 50%; color: #ffe6a8; background: #30476dbd; font-size: 34px; }
.world-card span:last-child { display: grid; gap: 5px; } .world-card small { color: #b7c6ed; } .world-card strong { font-size: 23px; } .world-card em { color: #ffd986; font-style: normal; }
.wind-card { background-image: url("./assets/paper-flight-background.png"); } .fruit-card { background-image: url("./assets/fruit-courtyard-background.png"); }
.merge-card { background-image: url("./assets/merge-workshop-background.png"); background-position: center 42%; }
.runner-card { background-image: url("./assets/runner-street-background.png"); background-position: center 72%; }
.ocean-card { background-image: url("./assets/ocean-runner-background.png"); background-position: center 54%; }
.world-card.pending { opacity: .74; }
@media (max-width: 700px) { .world-grid { grid-template-columns: 1fr; } .world-card { min-height: 132px; } .world-card img, .world-guardian-placeholder { width: 86px; max-height: 104px; } .world-card strong { font-size: 19px; } }
.portrait-slot { min-width: 0; }
.system-portrait { position: relative; align-self: end; margin: 0; cursor: pointer; text-align: center; filter: drop-shadow(0 24px 35px #0508178c); animation: card-in .55s ease both; outline: none; }
.system-portrait:focus-visible { filter: drop-shadow(0 0 18px #ffd986) drop-shadow(0 24px 35px #0508178c); }
.system-portrait img, .robot-placeholder { animation: robot-float 3.1s ease-in-out infinite; }
.system-portrait.reacting img, .system-portrait.reacting .robot-placeholder { animation: robot-pop .42s ease, robot-float 3.1s ease-in-out .42s infinite; }
.guardian-portrait img { width: min(300px, 100%); max-height: 410px; margin: 0 auto; filter: drop-shadow(0 18px 28px #0811298c); }
.system-portrait img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.system-portrait img[hidden] { display: none; }
.game-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.assist-button { position: fixed; z-index: 4; top: 118px; right: 72px; border: 1px solid #ffd9868c; border-radius: 999px; padding: 10px 14px; cursor: pointer; color: #fff1bd; background: #5a421fe8; backdrop-filter: blur(10px); box-shadow: 0 8px 24px #05081770; transition: .18s ease; }
.assist-button:hover, .assist-button:focus-visible { background: #7a5928c9; box-shadow: 0 0 18px #ffd98638; }
.assist-overlay { position: fixed; z-index: 8; inset: 0; display: grid; place-items: center; padding: 20px; background: #070d20c7; backdrop-filter: blur(12px); }
.assist-card { width: min(560px, 100%); padding: 30px; border: 1px solid #91aae780; border-radius: 26px; background: linear-gradient(145deg, #172143f5, #0d1530f7); box-shadow: 0 28px 80px #020611b8, inset 0 1px #fff2; animation: card-in .3s ease both; }
.assist-card h2 { margin: 10px 0 0; font-size: clamp(23px, 4vw, 34px); }
.result-portrait { float: left; width: min(170px, 35vw); max-height: 220px; margin: -8px 18px 10px -5px; object-fit: contain; filter: drop-shadow(0 14px 20px #0508178c); }
.merge-board { width: min(620px, 100%); aspect-ratio: 1.45; margin: 0 auto; padding: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; border: 1px solid #f3ca7770; border-radius: 22px; background: url("./assets/merge-workshop-background.png") center/cover; box-shadow: inset 0 0 70px #050a1ec4; }
.merge-tile { position: relative; display: grid; place-items: center; min-width: 0; border: 1px solid #8fd7e887; border-radius: 18px; color: #fff3bd; background: #101b38d9; box-shadow: inset 0 1px #fff3, 0 8px 20px #03071675; cursor: pointer; font-size: clamp(22px, 6vw, 42px); transition: transform .16s ease, border-color .16s ease, filter .16s ease; }
.merge-tile:hover, .merge-tile:focus-visible { transform: translateY(-2px); border-color: #ffe293; filter: brightness(1.12); }
.merge-tile.selected { border-color: #fff0a2; box-shadow: 0 0 24px #ffd66aa8, inset 0 1px #fff6; transform: scale(.96); }
.merge-tile.tier-1 { color: #d8f4ff; background: #173354e8; }
.merge-tile.tier-2 { color: #fff1aa; background: #29466be8; }
.merge-tile.tier-3 { color: #ffe3a0; background: #57406ee8; }
.merge-tile.tier-4 { color: #fff7d0; background: #80574ee8; }
.merge-tile.merged { animation: merge-burst .32s ease both; }
.merge-tile.empty { opacity: .34; cursor: default; }
.merge-tile small { position: absolute; right: 8px; bottom: 5px; font-size: 10px; color: #b9d9ee; }
@keyframes merge-burst { 0% { transform: scale(.76); filter: brightness(1.8); } 65% { transform: scale(1.12); box-shadow: 0 0 34px #ffe18fa8; } 100% { transform: scale(1); } }
.runner-controls { display: flex; justify-content: center; gap: 10px; margin: 10px 0 0; }
.runner-controls .choice-button { min-width: 116px; min-height: 46px; padding: 10px 18px; }
.ocean-panel { width: min(650px, 100%); }
#oceanCanvas { display: block; width: min(430px, 100%); max-height: 68dvh; margin: 0 auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; border: 1px solid #9fd8e785; background: #176b85; touch-action: none; }
.ocean-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; width: min(430px, 100%); margin: 9px auto 0; }
.ocean-controls .choice-button { min-height: 44px; padding: 8px 5px; }
.ocean-controls #oceanSlideButton { grid-column: 2; }
@media (max-width: 620px) { .result-portrait { float: none; display: block; width: 132px; max-height: 145px; margin: -12px auto 8px; } .result-portrait.hidden { display: none; } }
.assist-robot { position: relative; width: 76px; height: 62px; margin: 0 auto 12px; border: 2px solid #b8c9dd; border-radius: 45%; background: linear-gradient(145deg, #f7f0dc, #8db5c5); box-shadow: 0 0 24px #8de0e54f; animation: robot-float 2.8s ease-in-out infinite; }
.assist-robot span { position: absolute; left: 33px; top: -15px; width: 8px; height: 18px; border-radius: 6px; background: #d7e6e4; }
.assist-robot i { position: absolute; top: 25px; width: 9px; height: 13px; border-radius: 50%; background: #193154; box-shadow: inset 0 -4px #75d6dc; }
.assist-robot i:nth-of-type(1) { left: 21px; } .assist-robot i:nth-of-type(2) { right: 21px; }
.fruit-panel canvas { touch-action: none; background: linear-gradient(#18274f, #4f6b73 58%, #bf845b); }
.system-portrait figcaption { display: inline-block; margin-top: 8px; padding: 5px 10px; border: 1px solid #93a9e680; border-radius: 999px; color: #cbd7fa; background: #111a34c9; font-size: 11px; letter-spacing: .14em; }
.system-portrait figcaption small { color: #ffd986; font: inherit; letter-spacing: .05em; }
.robot-reaction { position: absolute; z-index: 2; left: 52%; top: -14px; min-width: 96px; padding: 8px 10px; border: 1px solid #ffe4a380; border-radius: 14px 14px 14px 3px; color: #fff4d2; background: #172142e8; font-size: 12px; opacity: 0; transform: translateY(8px) scale(.92); transition: .2s ease; }
.system-portrait.reacting .robot-reaction { opacity: 1; transform: none; }
.robot-placeholder { position: relative; width: 210px; height: 260px; margin: 0 auto; }
.robot-head { position: absolute; z-index: 2; left: 30px; top: 42px; width: 150px; height: 104px; border: 3px solid #b8c9dd; border-radius: 48% 48% 43% 43%; background: linear-gradient(145deg, #f7f0dc, #b8d0d7); box-shadow: inset -14px -12px 22px #42617d38, 0 0 24px #9ed8df35; }
.robot-head i { position: absolute; top: 42px; width: 18px; height: 24px; border-radius: 50%; background: #172645; box-shadow: inset 0 -6px 0 #75d6dc, 0 0 9px #75d6dc; animation: robot-blink 4.8s infinite; }
.robot-head i:first-child { left: 38px; } .robot-head i:last-child { right: 38px; }
.robot-body { position: absolute; left: 52px; top: 132px; width: 108px; height: 98px; border: 3px solid #abc3d2; border-radius: 38% 38% 48% 48%; background: linear-gradient(145deg, #e9eedf, #8fb5c4); }
.robot-body b { position: absolute; left: 38px; top: 28px; width: 30px; height: 30px; border-radius: 50%; background: #ffd477; box-shadow: 0 0 22px #ffd477; animation: core-pulse 2.2s ease-in-out infinite; }
.robot-antenna { position: absolute; z-index: 1; left: 101px; top: 13px; width: 5px; height: 36px; border-radius: 8px; background: #9fbacb; transform-origin: bottom; animation: antenna-wave 2.8s ease-in-out infinite; }
.robot-antenna::after { content: ""; position: absolute; left: -7px; top: -11px; width: 19px; height: 19px; border-radius: 50%; background: #ffd477; box-shadow: 0 0 17px #ffd477; }
.robot-hand { position: absolute; top: 154px; width: 18px; height: 68px; border: 3px solid #aac4d0; border-radius: 999px; background: #d7e1d8; transform-origin: top; }
.robot-hand.left { left: 34px; transform: rotate(18deg); } .robot-hand.right { right: 32px; transform: rotate(-42deg); }
.guardian-placeholder { position: relative; width: 210px; height: 260px; margin: 0 auto; clip-path: polygon(50% 4%, 92% 31%, 78% 86%, 50% 98%, 22% 86%, 8% 31%); border: 3px solid #d7c49d; background: linear-gradient(150deg, #fff1cc, #87a9bf 72%); box-shadow: inset -18px -16px 25px #24395e55, 0 0 28px #ffd47745; animation: robot-float 3.5s ease-in-out infinite; }
.guardian-placeholder::before { content: ""; position: absolute; inset: 20% 22% 34%; border: 2px solid #294466; border-radius: 50% 50% 42% 42%; background: #dce9e2; }
.guardian-placeholder i { position: absolute; z-index: 1; top: 87px; width: 14px; height: 20px; border-radius: 50%; background: #1e3154; box-shadow: inset 0 -5px 0 #78d4d7; }
.guardian-placeholder i:nth-of-type(1) { left: 77px; } .guardian-placeholder i:nth-of-type(2) { right: 77px; }
.guardian-seal { position: absolute; z-index: 2; left: 86px; bottom: 48px; width: 38px; height: 38px; border-radius: 50%; background: #e2a855; box-shadow: 0 0 22px #ffd477; }
.guardian-portrait.reacting .guardian-placeholder { animation: robot-pop .42s ease, robot-float 3.5s ease-in-out .42s infinite; }
@keyframes robot-float { 50% { transform: translateY(-9px); } }
@keyframes robot-pop { 45% { transform: translateY(-13px) rotate(-3deg) scale(1.04); } }
@keyframes robot-blink { 0%, 44%, 48%, 100% { transform: scaleY(1); } 46% { transform: scaleY(.12); } }
@keyframes core-pulse { 50% { transform: scale(.84); opacity: .72; } }
@keyframes antenna-wave { 50% { transform: rotate(9deg); } }
.story-card, .result-card { width: min(680px, 100%); padding: clamp(28px, 6vw, 56px); border: 1px solid #a7b7ed73; border-radius: 28px; background: linear-gradient(135deg, #1a2448ed, #131936f4); box-shadow: 0 28px 90px #0508179c, inset 0 1px 0 #f7f4ff24; text-align: center; animation: card-in .55s ease both; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.chapter { margin: 0 0 14px; color: #a7b9fa; font-family: "Space Grotesk", sans-serif; font-size: 12px; letter-spacing: .17em; text-transform: uppercase; }
h1, h2 { margin: 0; color: #fff7e6; font-size: clamp(30px, 6vw, 52px); line-height: 1.18; letter-spacing: -.04em; }
h2 { font-size: clamp(26px, 5vw, 40px); }
.story-copy { max-width: 510px; margin: 22px auto 0; color: #d1dbf6; font-size: clamp(15px, 2.5vw, 17px); line-height: 1.9; }
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.choices.waiting { opacity: 0; transform: translateY(8px); pointer-events: none; }
.choices:not(.waiting) { transition: opacity .25s ease, transform .25s ease; }
.choice-button, .quiet-button { border: 1px solid #a9bbfb; border-radius: 14px; padding: 13px 19px; cursor: pointer; color: #10172e; background: linear-gradient(135deg, #fff0c4, #ffd577); font-weight: 700; box-shadow: 0 7px 22px #00000035; transition: transform .18s ease, box-shadow .18s ease; }
.choice-button:hover, .choice-button:focus-visible { transform: translateY(-2px); box-shadow: 0 11px 28px #00000052; }
.choice-button:active, .quiet-button:active, .audio-controls button:active { transform: translateY(1px) scale(.985); filter: brightness(1.12); }
.choice-button.secondary { border-color: #8097dc; color: #dfe8ff; background: #263460; }
.game-panel { width: min(1100px, 100%); padding: 16px; border: 1px solid #9ab5f66b; border-radius: 24px; background: #0f1630b8; box-shadow: 0 30px 90px #050817a8; }
.game-topline { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 6px 6px 15px; color: #e6ecff; }
.game-topline strong { display: block; margin-top: 3px; font-size: 18px; }
.label { color: #aabcf9; font-size: 12px; letter-spacing: .12em; }
.goal { color: #ffe0a0; font-weight: 700; }
.attempts { color: #cdd8fe; }
canvas { display: block; width: 100%; height: auto; border: 1px solid #778bc6; border-radius: 16px; touch-action: none; background: #415994; }
.game-tip { padding: 13px 4px 4px; color: #bdcaef; font-size: 14px; text-align: center; }
.quiet-button { display: block; margin: 8px auto 0; padding: 9px 14px; border-color: #657bb9; color: #dce6ff; background: #202d55; font-size: 13px; }
.hidden { display: none !important; }
@media (max-width: 620px) { .app-shell { padding-inline: 12px; padding-top: 118px; } .app-shell::before { background-position: center; } .app-shell[data-backdrop="trial"]::before { background-position: 75% center; } .hud { left: 14px; right: 14px; } .brand { font-size: 9px; } .brand strong { font-size: 11px; } .fragment-counter { padding: 6px 10px; font-size: 12px; } .audio-controls { top: 96px; right: 8px; gap: 5px; } .audio-controls button { width: 42px; min-height: 42px; border-radius: 13px; font-size: 15px; } .audio-controls button span { font-size: 7px; } .volume-control { width: 42px; border-radius: 13px; } .volume-control input { width: 34px; } .story-stage, .story-stage.no-portrait { grid-template-columns: 1fr; align-items: center; gap: 4px; } .system-portrait { align-self: center; } .system-portrait img { width: min(148px, 45vw); max-height: 150px; margin: 0 auto; } .guardian-portrait img { width: min(205px, 58vw); max-height: 205px; } .system-portrait figcaption { margin-top: -5px; } .story-card, .result-card { padding: 28px 23px; border-radius: 22px; } .story-copy { margin-top: 16px; line-height: 1.75; } .choices { margin-top: 23px; } .game-panel { padding: 9px; border-radius: 18px; } .game-topline { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 4px 48px 10px 3px; font-size: 13px; } .game-topline strong { font-size: 15px; } .attempts { grid-column: 1 / -1; } }
@media (max-width: 620px) { .robot-placeholder, .guardian-placeholder { width: 128px; height: 150px; transform: scale(.58); transform-origin: top center; margin-bottom: -62px; } .robot-reaction { left: 58%; top: -2px; } }
@media (max-width: 620px) { .assist-button { top: 96px; right: 58px; max-width: 102px; padding: 8px 10px; font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
.audio-controls button.needs-audio-unlock {
  border-color: #ffd875;
  background: #ffd875;
  color: #18213d;
  box-shadow: 0 0 18px #ffd87566;
  animation: audio-callout 1.6s ease-in-out infinite;
}
.rotate-overlay { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 22px; background: #071027ed; backdrop-filter: blur(14px); }
.mobile-quick-controls { display: none; }
@media (max-width: 700px) {
  .mobile-quick-controls { position: fixed; z-index: 12; right: 7px; top: 43%; display: grid; gap: 8px; }
  .mobile-quick-controls button { width: 52px; min-height: 54px; display: grid; place-items: center; gap: 2px; padding: 6px 3px; border: 1px solid #ffd8758c; border-radius: 15px; color: #fff2c5; background: #17213ee8; box-shadow: 0 8px 22px #02071391; backdrop-filter: blur(10px); }
  .mobile-quick-controls button span { font-size: 9px; line-height: 1.1; }
}
body.forced-landscape { overflow: hidden; }
body.forced-landscape .app-shell { position: fixed; left: 0; top: 0; width: 100vh; height: 100vw; min-height: 0; overflow: auto; transform: rotate(90deg) translateY(-100%); transform-origin: top left; }
body.forced-landscape .mobile-quick-controls { position: fixed; right: 8px; top: 42%; }
.mobile-quick-controls button[data-state="failed"] { border-color: #ff8f8f; color: #ffd5d5; }
.rotate-card { width: min(390px, 100%); padding: 28px 24px; border: 1px solid #ffd87580; border-radius: 25px; text-align: center; color: #f8f3e2; background: linear-gradient(145deg, #19264df7, #101936f7); box-shadow: 0 28px 80px #020611d1; }
.rotate-card strong { display: block; margin: 8px 0; font-size: 22px; }
.rotate-card p { margin: 0 0 18px; color: #c8d4f2; line-height: 1.65; }
.rotate-phone { width: 50px; height: 78px; margin: 0 auto 14px; display: grid; place-items: center; border: 3px solid #ffd875; border-radius: 10px; color: #ffd875; font-size: 28px; animation: rotate-phone 1.8s ease-in-out infinite; }
@keyframes rotate-phone { 50% { transform: rotate(90deg); } }
@media (max-height: 520px) and (orientation: landscape) {
  .app-shell { min-height: 100dvh; padding: 64px 10px 12px; }
  .hud { top: 8px; }
  .audio-controls { top: 8px; right: 8px; }
  .assist-button { top: 58px; right: 12px; }
  .game-panel { width: min(980px, 100%); padding: 7px; }
  .game-topline { padding: 2px 130px 5px 3px; }
  .game-tip { padding: 5px 3px 2px; font-size: 11px; }
  .game-actions { gap: 5px; }
  .game-actions .quiet-button { margin-top: 3px; padding: 6px 10px; }
  #oceanCanvas { width: auto; height: min(315px, 64dvh); }
  .ocean-controls { margin-top: 4px; }
  .merge-board { max-height: 315px; width: min(520px, 72vw); }
}
@keyframes audio-callout { 50% { box-shadow: 0 0 28px #ffd875aa; transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { .audio-controls button.needs-audio-unlock { animation: none; } }