#play-orientation{box-sizing:border-box;width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));margin:auto;padding:0;overflow:auto;border:1px solid #7b8a91;border-radius:18px;background:linear-gradient(150deg,#223340,#111b24 62%);color:#fff6e5;box-shadow:0 16px 60px #0009;font:18px/1.35 system-ui,sans-serif;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
#play-orientation::backdrop{background:#071019db}
.play-mode-card{padding:28px 24px 20px;text-align:center}
.play-mode-brand{color:#ffc333;font:24px Trail,Arial,sans-serif;letter-spacing:.04em}
.play-mode-phone{display:block;width:130px;height:102px;margin:12px auto 4px;fill:none;stroke:#ffd16b;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
#play-orientation h1{margin:12px 0;font:clamp(26px,7vw,36px)/1.05 Trail,Arial,sans-serif}
#play-orientation p{margin:12px 0;color:#ecf0ee;font-size:16px}
#play-orientation .play-mode-lock{font-size:13px;color:#becbd3;line-height:1.55;margin:14px 0 22px}
#play-orientation button{display:block;box-sizing:border-box;width:100%;min-height:48px;margin:10px 0 0;padding:12px;border:1px solid #677986;border-radius:9px;background:#233947;color:#fff6e5;font:22px/1 Trail,Arial,sans-serif;cursor:pointer;touch-action:manipulation}
#play-orientation [data-fullscreen]{background:#ffc333;border-color:#ffdf82;color:#17222b}
#play-orientation [data-back]{background:transparent;border-color:transparent;color:#bdcbd3;font-size:18px}
#play-orientation button[hidden]{display:none}
#play-orientation button:focus-visible{outline:3px solid #80dcff;outline-offset:3px}
#play-orientation button:disabled{opacity:.65;cursor:wait}
#play-orientation .play-mode-note{font-size:12px;color:#a7b9c5;margin-bottom:0}
@media(max-height:600px){.play-mode-card{padding:18px}.play-mode-phone{width:90px;height:68px;margin:4px auto}#play-orientation .play-mode-lock{margin:10px 0}#play-orientation h1{margin:8px 0}}