.screen-mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 14px}
.screen-mode{position:relative;min-height:84px;padding:12px 10px;border:1px solid rgba(217,189,129,.34);border-radius:14px;background:rgba(255,255,255,.045);color:#e9dcc3;box-shadow:none;overflow:hidden}
.screen-mode:hover{border-color:rgba(217,189,129,.7)}
.screen-mode[aria-pressed="true"]{border-color:#e2bd7c;background:linear-gradient(150deg,rgba(169,104,55,.25),rgba(91,48,49,.23));box-shadow:0 9px 26px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,237,199,.09)}
.screen-mode strong{display:block;font-size:.79rem;letter-spacing:.12em}
.screen-mode small{display:block;margin-top:6px;color:#bdb2a3;font-size:.62rem;line-height:1.35;font-weight:750}
.screen-mode-shape{display:block;margin:0 auto 7px;border:2px solid currentColor;border-radius:3px;opacity:.85}
.screen-mode[data-mode="portrait"] .screen-mode-shape{width:14px;height:24px}
.screen-mode[data-mode="landscape"] .screen-mode-shape{width:30px;height:17px;margin-top:4px;margin-bottom:10px}
.screen-mode-recommend{position:absolute;top:6px;right:7px;padding:3px 5px;border-radius:999px;background:rgba(217,189,129,.14);color:#e4c58e;font-size:.47rem;font-weight:900;letter-spacing:.08em}
#modeHud{position:fixed;z-index:3;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);display:none;padding:4px 8px;border:1px solid rgba(217,189,129,.22);border-radius:999px;background:rgba(7,7,10,.5);color:rgba(240,224,194,.72);font:850 .52rem/1 system-ui;letter-spacing:.12em;pointer-events:none}
#modeHud.show{display:block}
@media(max-width:520px){.screen-mode-picker{gap:7px;margin:12px 0}.screen-mode{min-height:76px;padding:10px 8px}.screen-mode strong{font-size:.7rem}.screen-mode small{font-size:.56rem}}