:root { color-scheme: dark; font-family: "Noto Sans Khmer", "Khmer OS System", system-ui, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #030511; touch-action: none; }
body { display: grid; place-items: center; }
.rotate-notice { display: none; }
button { font: inherit; }
#app { position: relative; width: min(86vw, calc(86vh * 16 / 9)); height: min(86vh, calc(86vw * 9 / 16)); margin: auto; overflow: hidden; border-radius: 16px; background: #6d547c url("assets/images/khmer-temple-twilight-16x9-v2.png") center/cover no-repeat; box-shadow: 0 0 0 2px #9a6f85, 0 18px 50px #000b, 0 0 34px #d7849b33; }
#app::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#39234812, transparent 30%, transparent 72%, #24121d3d); }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
.screen { position: absolute; inset: 0; z-index: 3; display: none; }
.screen.active { display: flex; }
#menu { flex-direction: column; align-items: center; justify-content: space-between; padding: 6vh 5% 4vh; }
#menu::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #6d547c url("assets/images/khmer-temple-twilight-16x9-v2.png") center/cover no-repeat; filter: brightness(.93) saturate(1.04); }
#menu::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#26142b14 5%, transparent 40%, transparent 66%, #1d0e18a8 91%); }
.menu-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.energy-slash { position: absolute; left: 18%; top: 51%; width: 60%; height: 5px; border-radius: 999px; background: linear-gradient(90deg, transparent, #55efff 18%, #fff 48%, #ff4bd8 76%, transparent); box-shadow: 0 0 7px #fff, 0 0 16px #42e8ff, 0 0 30px #ff45d7; transform: rotate(-7deg) skewX(-24deg); animation: slashPulse 2.4s ease-in-out infinite; }
.energy-slash::after { content: ""; position: absolute; inset: -14px 8% -14px; background: radial-gradient(ellipse, #76eaff44, transparent 68%); }
.fruit-float { position: absolute; width: clamp(58px, 10vw, 105px); aspect-ratio: .76; background-repeat: no-repeat; background-size: 400% 100%; filter: drop-shadow(0 8px 7px #140b19aa) drop-shadow(0 0 9px #ffd59688); animation: fruitDrift 4s ease-in-out infinite; }
.fruit-mango { left: 29%; top: 39%; background-image: url("assets/images/fruit-sheet-mango.png"); background-position: 33.333% 0; transform: rotate(-18deg); }
.fruit-mangosteen { left: 47%; top: 53%; background-image: url("assets/images/fruit-sheet-mangosteen.png"); background-position: 33.333% 0; animation-delay: -1.7s; }
.spark { position: absolute; width: 5px; aspect-ratio: 1; border-radius: 50%; background: #ffe7a0; box-shadow: 0 0 8px #ffd36a, 0 0 15px #ff9f43; animation: sparkRise 4.5s linear infinite; }
.s1{left:18%;top:72%;animation-delay:-.4s}.s2{left:36%;top:64%;animation-delay:-2.1s}.s3{left:53%;top:76%;animation-delay:-3.4s}.s4{left:68%;top:58%;animation-delay:-1.2s}.s5{left:82%;top:71%;animation-delay:-2.8s}.s6{left:58%;top:37%;animation-delay:-4s}
.brand { text-align: center; filter: drop-shadow(0 5px 2px #281108aa); animation: menuFloat 3.8s ease-in-out infinite; }
.brand-kicker { display: inline-block; padding: .35em 1.4em; color: #ffe39a; font-size: clamp(14px, 3.5vw, 24px); font-weight: 800; letter-spacing: .08em; background: #5c241ecc; border: 2px solid #e8ad45; border-radius: 999px; }
h1 { margin: .18em 0 0; color: #fff6d2; font-family: "Lilita One", "Noto Sans Khmer", "Khmer OS System", "Arial Black", sans-serif; font-size: clamp(42px, 11vw, 82px); font-weight: 400; line-height: .98; letter-spacing: .08em; -webkit-text-stroke: 1px #4a180e; text-shadow: 3px 4px 0 #5a1d12, 0 7px 0 #2a0c08, 0 0 18px #ffbd5066; }
h1 em { display: block; color: #ffb62e; font-style: normal; font-size: .9em; letter-spacing: .12em; }
html[lang="km"] h1 { font-family: "Noto Sans Khmer", "Khmer OS System", sans-serif; font-weight: 900; font-size: clamp(36px, 9vw, 68px); line-height: 1.18; letter-spacing: .04em; -webkit-text-stroke: 0; }
html[lang="km"] h1 em { font-size: .92em; font-weight: 900; letter-spacing: .06em; }
.menu-actions { width: min(36%, 420px); display: grid; gap: 1.4vh; margin: auto 0 9vh auto; }
.menu-actions .game-btn { animation: buttonFloat 3.2s ease-in-out infinite; }
.menu-actions .mode-btn { animation-delay: -.7s; }
.game-btn { position: relative; width: 100%; min-height: clamp(52px, 8.5vh, 74px); padding: .45em 1.4em; border: 3px solid #f3d27a; border-radius: 999px; color: #fffdf4; cursor: pointer; background: linear-gradient(#d4653c 0%, #9a2a1c 48%, #5c1210 100%); box-shadow: 0 0 0 3px #6b2d1c, 0 5px 0 #2a0c08, 0 10px 18px #0007, inset 0 2px 0 #ffd4a055, inset 0 -8px 12px #0004; }
.game-btn span { display: block; font-family: "Noto Sans Khmer", "Khmer OS System", sans-serif; font-size: clamp(16px, 2.6vw, 26px); font-weight: 800; line-height: 1.15; letter-spacing: .02em; text-shadow: 0 2px 0 #5a0909, 0 0 10px #ffcf7366; }
html[lang="en"] .game-btn span, html[lang="en"] .btn-copy strong { font-family: "Lilita One", sans-serif; font-weight: 400; letter-spacing: .08em; }
.play-btn { display: flex; align-items: center; justify-content: center; gap: .7em; min-height: clamp(68px, 11.5vh, 92px); border-color: #ffe08a; background: linear-gradient(#ffc45a 0%, #ee8a28 45%, #c43a12 100%); }
.play-icon { width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fffdf6; filter: drop-shadow(0 2px #7a1a0c); }
.btn-copy { display: flex; flex-direction: column; align-items: flex-start; gap: .08em; }
.btn-copy strong { font-size: clamp(22px, 3.3vw, 34px); font-weight: 900; line-height: 1; }
.btn-copy small { font-size: clamp(11px, 1.6vw, 15px); font-weight: 800; opacity: .88; letter-spacing: .04em; }
.mode-btn { min-height: clamp(46px, 7vh, 60px); background: linear-gradient(#8f4634 0%, #5c1e16 55%, #32110e 100%); }
.mode-btn .btn-copy strong { font-size: clamp(16px, 2.4vw, 24px); font-weight: 800; }
.game-btn:active { transform: translateY(4px); box-shadow: 0 0 0 3px #6b2d1c, 0 2px 0 #2a0c08, 0 4px 10px #0006, inset 0 2px 0 #ffd4a055; }
.corner-actions { position: absolute; top: max(2vh, env(safe-area-inset-top)); left: 3%; right: 3%; display: flex; justify-content: space-between; }
.round-btn { width: clamp(48px, 12vw, 72px); aspect-ratio: 1; border: 3px solid #f2be62; border-radius: 50%; color: #fff5ce; background: radial-gradient(circle at 35% 25%, #a75335, #4a1712 72%); box-shadow: inset 0 0 0 3px #6b2d1c, 0 4px 6px #0008; font-size: clamp(14px, 3.5vw, 20px); font-weight: 900; }
.menu-tools { left:auto; width:auto; gap:9px; justify-content:flex-end; }
.menu-tools .round-btn { width:clamp(40px,8vw,54px); border-width:2px; font-size:clamp(18px,3vw,25px); }
.help-btn { position:static; translate:none; }
.best { position: absolute; right: 7%; bottom: 2vh; color: #fff1c4; margin: 0; padding: .5em 1em; font-weight: 800; text-shadow: 0 2px #321; background: #1d291fc4; border-radius: 99px; }
@keyframes menuFloat { 50% { transform: translateY(-7px); filter: drop-shadow(0 9px 5px #28110899) brightness(1.06); } }
@keyframes buttonFloat { 50% { transform: translateY(-4px); filter: brightness(1.06); } }
@keyframes fruitDrift { 50% { translate: 0 -12px; rotate: 9deg; } }
@keyframes slashPulse { 50% { opacity: .72; transform: rotate(-7deg) skewX(-24deg) scaleX(1.06); } }
@keyframes sparkRise { 0% { opacity: 0; transform: translateY(18px) scale(.5); } 20%,75% { opacity: .8; } 100% { opacity: 0; transform: translate(12px,-90px) scale(1.3); } }
.hud { pointer-events: none; justify-content: space-between; align-items: flex-start; padding: max(2vh, env(safe-area-inset-top)) 4%; }
.life-status { display:flex; flex-direction:column; align-items:center; gap:5px; }
.heart-progress { display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; background:#211425a8; box-shadow:0 2px 8px #0007; }
.heart-progress i { width:clamp(12px,2vw,18px); height:5px; border-radius:99px; background:#6b536c; transition:.2s; }
.heart-progress i.on { background:#ffcc51; box-shadow:0 0 7px #ffb13c; }
.heart-progress span { margin-left:3px; color:#fff1c4; font-size:clamp(10px,1.7vw,13px); font-weight:900; }
.heart-progress.hidden { display:none; }
.hud-score { display: grid; color: #fff3c8; text-shadow: 0 2px 2px #321; font-size: clamp(12px, 3vw, 19px); font-weight: 800; }
.hud-score strong { font: 900 clamp(34px, 10vw, 64px)/.9 "Noto Sans Khmer", "Khmer OS System", Georgia, serif; color: white; }
.hud-status { min-width: 70px; min-height: 1.7em; padding: .12em; text-align: center; color: #fff7d7; background: transparent; border: 0; border-radius: 0; font: 900 clamp(20px, 6vw, 38px)/1 "Noto Sans Khmer", "Khmer OS System", Georgia, serif; }
.hud-status.timer { padding: .28em .55em; background: #331812d9; border: 3px solid #e8b752; border-radius: 999px; }
.hud-status .heart { display: inline-block; margin: 0 .06em; color: #ff405b; -webkit-text-stroke: 1px #8e1025; text-shadow: 0 2px 0 #5f0b1a, 0 0 9px #ff6688aa; transition: transform .18s ease, opacity .18s ease; }
.hud-status .heart.lost { opacity: 0; transform: scale(.2); }
.pause { pointer-events: auto; width: clamp(45px, 11vw, 66px); }
.combo { position: absolute; top: 18%; left: 0; right: 0; text-align: center; color: #ffdd51; font: 900 clamp(34px, 11vw, 72px)/1 "Noto Sans Khmer", "Khmer OS System", Georgia, serif; text-shadow: 0 4px #a32616, 0 0 16px white; opacity: 0; transform: scale(.6); transition: .15s; }
.combo.show { opacity: 1; transform: scale(1); }
.hint { position: absolute; left: 10%; right: 10%; bottom: 13%; text-align: center; color: white; font-size: clamp(18px, 4.5vw, 30px); font-weight: 900; text-shadow: 0 3px 2px #421; }
.modal-screen { align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #2a160c66 0%, #07150ce8 72%); backdrop-filter: blur(8px); }
.tutorial-panel { width:min(88%,620px); padding:4% 5% 3%; }.tutorial-panel h2{margin-bottom:.35em}.tutorial-steps{position:relative;z-index:1;display:grid;gap:10px;margin:10px 0 16px;text-align:left}.tutorial-steps div{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid #d6a84c77;border-radius:14px;background:#160e0bbb;color:#fff5da}.tutorial-steps b{flex:0 0 38px;text-align:center;font-size:28px}.tutorial-steps span{font-size:clamp(13px,2.2vw,18px);font-weight:800;line-height:1.45}.tutorial-panel .game-btn{position:relative;z-index:1;width:min(70%,300px);min-height:48px;margin:auto}
.settings-panel { width:min(82%,470px); padding:4% 5% 3%; }.settings-panel h2{margin-bottom:.45em}.settings-options{position:relative;z-index:1;display:grid;gap:11px;margin:10px 0 18px}.settings-options>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 14px;border:1px solid #d6a84c77;border-radius:14px;background:#160e0bbb;color:#ffe7a1;font-weight:900}.setting-toggle{min-width:92px;padding:9px 14px;border:2px solid #f1c868;border-radius:999px;color:#fff;background:linear-gradient(#a64d32,#571a16);font-weight:900;cursor:pointer}.settings-panel .game-btn{position:relative;z-index:1;width:min(70%,260px);min-height:48px;margin:auto}
.panel { position: relative; width: 88%; padding: 7% 7% 5.5%; text-align: center; overflow: hidden; background:
    radial-gradient(ellipse at 50% 0%, #6a3824cc, transparent 46%),
    linear-gradient(180deg, #5a2f22f0 0%, #2c1a14f5 42%, #17110df7 100%);
  border: 2px solid #f3d27a; border-radius: 28px;
  box-shadow: 0 0 0 3px #6d3a1e, 0 0 0 6px #e3ae4f, 0 0 0 8px #3d2214, inset 0 1px 0 #ffd98a66, inset 0 -30px 40px #0005, 0 22px 50px #000c; }
.panel::before { content: ""; position: absolute; inset: 9px; border: 1px solid #e8c36a55; border-radius: 20px; pointer-events: none; }
.panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #fff6 0%, transparent 18%, transparent 82%, #0003 100%); mix-blend-mode: soft-light; }
.kbach { position: absolute; z-index: 1; width: clamp(34px, 7vw, 52px); height: clamp(34px, 7vw, 52px); pointer-events: none; opacity: .92; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23f0d078' stroke-width='3.1' stroke-linecap='round' d='M8 92C10 48 28 16 78 8'/%3E%3Cpath fill='none' stroke='%23c4892e' stroke-width='1.6' stroke-linecap='round' d='M20 92C22 58 36 30 70 20'/%3E%3Cpath fill='%23f3d27a' d='M8 92c-4-10 8-16 14-10-2 8-10 12-14 10zM78 8c10-4 16 8 10 14-8-2-12-10-10-14z'/%3E%3Cpath fill='%23e8c36a' d='M34 26c9-11 24-2 17 11-11 4-22-4-17-11z'/%3E%3Ccircle cx='44' cy='44' r='3' fill='%23fff1c0'/%3E%3C/svg%3E") center/contain no-repeat; }
.kbach-tl { top: 8px; left: 8px; }
.kbach-tr { top: 8px; right: 8px; transform: scaleX(-1); }
.kbach-bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.kbach-br { bottom: 8px; right: 8px; transform: scale(-1); }
.panel h2 { position: relative; z-index: 1; margin: 0 0 .35em; color: #ffe3a0; font-size: clamp(40px, 11vw, 72px); text-shadow: 0 3px #631e16, 0 0 18px #ffb62e55; }
.panel-actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1vh; margin-top: 1.2vh; }
.panel-actions .game-btn { margin: 0; }
#pause .panel-actions { width: min(92%, 430px); margin: 1.5vh auto 0; display: flex; flex-direction: row; align-items: stretch; gap: 12px; }
#pause .panel-actions .game-btn { width: auto; flex: 1 1 42%; min-height: clamp(46px, 7vh, 60px); padding: .35em .8em; border-width: 2px; }
#pause .panel-actions #resumeBtn { flex-grow: 1.22; }
#pause .panel-actions .game-btn span { font-size: clamp(14px, 2.2vw, 21px); white-space: nowrap; }
.home-btn { background: linear-gradient(#8a4030 0%, #5a1c16 52%, #32100e 100%); box-shadow: 0 0 0 3px #4a2418, 0 5px 0 #1a0a08, 0 10px 18px #0007, inset 0 2px 0 #ffd4a033, inset 0 -8px 12px #0004; }
.modal-screen.active .panel { animation: panelIn .48s cubic-bezier(.2,.85,.25,1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
.result-label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .55em; color: #ffd56a; font-size: clamp(15px, 3.2vw, 22px); font-weight: 900; letter-spacing: .16em; text-shadow: 0 2px #3a160c; }
.result-label::before, .result-label::after { content: ""; width: clamp(28px, 7vw, 52px); height: 2px; background: linear-gradient(90deg, transparent, #e8c36a, #fff1c0, #e8c36a, transparent); box-shadow: 0 0 8px #e8c36a88; }
.score-block { position: relative; z-index: 1; margin: .15em 0 .35em; }
.score-block::before { content: ""; position: absolute; left: 50%; top: 48%; width: 58%; aspect-ratio: 2.8; translate: -50% -50%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, #ffd66a38, transparent 68%); animation: scoreAura 2.2s ease-in-out infinite; }
.results-panel h2 { margin: 0; color: #fffdf6; font-family: "Noto Sans Khmer", "Khmer OS System", Georgia, "Palatino Linotype", serif; font-size: clamp(58px, 14vw, 108px); line-height: .9; letter-spacing: -.03em; text-shadow: 0 4px 0 #4a1c12, 0 8px 18px #0008, 0 0 28px #ffd56a77; }
.score-block::after { content: ""; display: block; width: 42%; height: 6px; margin: .15em auto 0; background: radial-gradient(ellipse, #f3d27a 0%, transparent 72%); opacity: .85; }
.new-best { display: inline-block; margin-top: .35em; padding: .22em .9em; border-radius: 999px; color: #4a2208; background: linear-gradient(#fff1c0, #e0a62a); box-shadow: 0 2px 0 #8a4e12, 0 0 16px #ffd56a88; font-size: clamp(11px, 2.3vw, 15px); font-weight: 900; letter-spacing: .08em; animation: bestPulse 1.15s ease-in-out infinite; }
.new-best[hidden] { display: none; }
@keyframes bestPulse { 50% { transform: scale(1.06); filter: brightness(1.12); } }
.result-stats { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2% 2% 1%; }
.result-stat { display: flex; flex-direction: column; gap: .12em; padding: .55em .7em .5em; color: #fff6d8; background: linear-gradient(#2a1a14cc, #140e0bde); border: 1px solid #e3ae4f77; border-radius: 14px; box-shadow: inset 0 1px 0 #ffd98a22, 0 4px 10px #0005; }
.result-stat span { color: #e8c36a; font-size: clamp(11px, 2.1vw, 14px); font-weight: 800; letter-spacing: .04em; }
.result-stat b { font: 900 clamp(20px, 4.4vw, 30px)/1.1 "Noto Sans Khmer", "Khmer OS System", Georgia, serif; color: #fffdf4; text-shadow: 0 2px #321; }
.modal-screen.active .result-stat { animation: statReveal .42s .18s ease-out both; }
.modal-screen.active .result-stat:nth-child(2) { animation-delay: .28s; }
.results-panel .panel-actions { width: min(92%, 430px); margin: 1.6vh auto 0; display: grid; grid-template-columns: .82fr 1.18fr; gap: 12px; }
.results-panel .panel-actions .game-btn { width: 100%; min-height: clamp(46px, 7vh, 60px); padding: .35em .8em; border-width: 2px; }
.results-panel .panel-actions .game-btn span { font-size: clamp(14px, 2.2vw, 21px); white-space: nowrap; letter-spacing: .03em; }
.modal-screen.active #retryBtn { animation: retryInvite 1.8s .65s ease-in-out 2; }
.result-sparks { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.result-sparks i { position: absolute; width: 5px; aspect-ratio: 1; border-radius: 50%; background: #ffe08a; box-shadow: 0 0 8px #ffca45; opacity: 0; animation: resultSpark 2.8s ease-in-out infinite; }
.result-sparks i:nth-child(1){left:9%;top:65%;animation-delay:-.2s}.result-sparks i:nth-child(2){left:18%;top:28%;animation-delay:-1.3s}.result-sparks i:nth-child(3){left:38%;top:84%;animation-delay:-2.1s}.result-sparks i:nth-child(4){left:64%;top:18%;animation-delay:-.8s}.result-sparks i:nth-child(5){left:82%;top:70%;animation-delay:-1.8s}.result-sparks i:nth-child(6){left:91%;top:37%;animation-delay:-2.5s}
@keyframes scoreAura { 50% { opacity: .55; transform: scale(1.12); } }
@keyframes statReveal { from { opacity: 0; transform: translateY(8px) scale(.94); } }
@keyframes retryInvite { 50% { filter: brightness(1.15); box-shadow: 0 0 0 3px #6b2d1c, 0 5px 0 #2a0c08, 0 0 22px #ffb44399, inset 0 2px 0 #ffd4a055; } }
@keyframes resultSpark { 0%,100% { opacity: 0; transform: translateY(12px) scale(.5); } 35%,65% { opacity: .8; } 80% { opacity: 0; transform: translate(5px,-24px) scale(1.2); } }
.is-new-best .results-panel { box-shadow: 0 0 0 3px #6d3a1e, 0 0 0 6px #f3d27a, 0 0 0 8px #3d2214, inset 0 1px 0 #ffd98a66, 0 0 40px #e8c36a66, 0 22px 50px #000c; }
.is-new-best .results-panel h2 { text-shadow: 0 4px 0 #4a1c12, 0 0 36px #ffe08acc; }
@media (min-aspect-ratio: 4/3) {
  body { background: #07120c; }
  .brand { position: absolute; left: 6%; top: 20%; width: 38%; }
  .brand-kicker { font-size: clamp(13px, 2vw, 22px); }
  h1 { font-size: clamp(38px, 5.6vw, 72px); }
  html[lang="km"] h1 { font-size: clamp(32px, 4.8vw, 58px); }
  .play-btn .btn-copy strong { font-size: clamp(20px, 2.6vw, 32px); }
  .game-btn span { font-size: clamp(16px, 2.1vw, 24px); }
  .hud-score strong { font-size: clamp(32px, 5vw, 58px); }
  .panel { width: min(52%, 640px); padding: 3.2% 4.5% 2.6%; }
  .panel h2 { font-size: clamp(36px, 5.4vw, 64px); }
  .panel-actions .game-btn { width: 72%; }
  #pause .panel-actions { width: min(94%, 410px); }
  #pause .panel-actions .game-btn { width: auto; }
  .results-panel { width: min(48%, 590px); padding: 2.7% 4% 2.4%; }
  .results-panel .panel-actions { width: min(94%, 410px); }
  .results-panel .panel-actions .game-btn { width: 100%; }
  .results-panel h2 { font-size: clamp(56px, 8.4vw, 96px); }
  .result-stats { margin: 1.4% 1% .4%; gap: 12px; }
}
@media (pointer: coarse) {
  .modal-screen { backdrop-filter: none; }
  .menu-fx, .energy-slash, .fruit-float, .spark, .brand, .menu-actions .game-btn { animation: none; }
  .fruit-float, .spark { filter: none; }
}
@media (orientation: portrait) and (pointer: coarse) {
  #app { visibility: hidden; }
  .rotate-notice { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px; text-align: center; color: #fff5d7; background: radial-gradient(circle at 50% 38%, #6b314f, #1c1027 58%, #080711); }
  .rotate-notice strong { font-size: clamp(24px, 7vw, 38px); text-shadow: 0 3px #511627, 0 0 16px #ffba7188; }
  .rotate-notice small { max-width: 300px; color: #efd9c7; font-size: clamp(14px, 4vw, 18px); line-height: 1.6; }
  .phone-turn { width: 68px; height: 112px; padding: 7px; border: 4px solid #ffd36e; border-radius: 14px; box-shadow: 0 0 20px #ffb45c77; animation: turnPhone 2s ease-in-out infinite; }
  .phone-turn span { display: block; width: 100%; height: 100%; border-radius: 7px; background: linear-gradient(145deg, #ff8b61, #6844a5); }
  @keyframes turnPhone { 0%,20% { transform: rotate(0); } 65%,100% { transform: rotate(90deg); } }
}
@media (orientation: landscape) and (max-width: 950px) {
  html, body { width: 100%; height: 100%; min-height: 100dvh; background: #6d547c; }
  body { display: block; }
  #app { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; border-radius: 0; box-shadow: none; }
  #menu { padding-top: max(4vh, env(safe-area-inset-top)); padding-right: max(4%, env(safe-area-inset-right)); padding-bottom: max(3vh, env(safe-area-inset-bottom)); padding-left: max(4%, env(safe-area-inset-left)); }
  .hud { padding-top: max(2vh, env(safe-area-inset-top)); padding-right: max(4%, env(safe-area-inset-right)); padding-left: max(4%, env(safe-area-inset-left)); }
  .corner-actions { left: max(3%, env(safe-area-inset-left)); right: max(3%, env(safe-area-inset-right)); }
}