/* v0.77 — real scene bounds, readable status, and touch controls on the playfield. */
/* A hint in the existing pause layer, never a screen lock or a rotated canvas. */
.rotate-hint{position:relative;width:160px;height:164px;pointer-events:none}
.rotate-hint-orbit{position:absolute;inset:16px 14px;border:1px dashed #f6f0df26;border-radius:50%}
.rotate-phone{position:absolute;left:50%;top:52%;width:62px;height:102px;overflow:visible;stroke:#f6f0df;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform:translate(-50%,-50%);animation:hashcade-turn-phone 3s cubic-bezier(.4,0,.2,1) infinite}
.rotate-phone>rect:first-child{fill:#24212c}
.rotate-phone-screen{fill:#ffc83d0f;stroke:#f6f0df30;stroke-width:1}
.rotate-phone .rotate-phone-mark{stroke:var(--pink,#f58eae);stroke-width:4}
.rotate-hint-arrow{position:absolute;inset:0;width:160px;height:160px;stroke:var(--yellow,#ffc83d);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
body.arcade-open #arcade-overlay.is-orientation-prompt{background:#19151ef5;padding:20px;z-index:12}
body.arcade-open #arcade-overlay.is-orientation-prompt>div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:0 28px;width:min(540px,100%);max-width:540px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;text-align:left}
.is-orientation-prompt .rotate-hint{grid-column:1;grid-row:1/5;align-self:center}
body.arcade-open .is-orientation-prompt #arcade-overlay-kicker{grid-column:2;grid-row:1;margin:0 0 8px;color:var(--yellow,#ffc83d);font:700 11px/1.3 Inter,system-ui,sans-serif;letter-spacing:.14em}
body.arcade-open .is-orientation-prompt #arcade-overlay-title{grid-column:2;grid-row:2;margin:0;color:#f6f0df;font-size:clamp(24px,4vw,34px);font-weight:850;line-height:1.1}
body.arcade-open .is-orientation-prompt #arcade-overlay-copy{grid-column:2;grid-row:3;margin:12px 0 18px;max-width:29ch;font-size:14px;line-height:1.5;color:#ccc4d3}
@keyframes hashcade-turn-phone{0%,16%{transform:translate(-50%,-50%) rotate(-90deg);opacity:1}52%,82%{transform:translate(-50%,-50%) rotate(0);opacity:1}90%{transform:translate(-50%,-50%) rotate(0);opacity:0}91%,100%{transform:translate(-50%,-50%) rotate(-90deg);opacity:0}}
@media(max-height:360px){
 body.arcade-open #arcade-overlay.is-orientation-prompt{padding:12px 20px}
 body.arcade-open .is-orientation-prompt #arcade-overlay-copy{margin:8px 0 12px}
}
@media(max-width:430px){
 body.arcade-open #arcade-overlay.is-orientation-prompt>div{grid-template-columns:112px minmax(0,1fr);gap:0 14px}
 .is-orientation-prompt .rotate-hint{width:112px;height:132px}
 .is-orientation-prompt .rotate-phone{width:50px;height:83px}
 .is-orientation-prompt .rotate-hint-arrow{width:112px;height:112px;top:10px}
}
@media(prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:translate(-50%,-50%);opacity:1}}
#arcade-canvas{object-fit:fill}
.game-live-stats{position:absolute;top:8px;left:10px;right:10px;display:flex;gap:6px;z-index:2;pointer-events:none;justify-content:center}
.game-live-stats>span{display:flex;flex-direction:column;min-width:56px;padding:5px 10px;border:1px solid #d7e8ed33;border-radius:9px;background:#102331db;box-shadow:0 2px 8px #07121c33;color:#f5f2df;line-height:1.15}
.game-live-stats small{font-size:10px;color:#c0d7df;letter-spacing:.02em;white-space:nowrap}
.game-live-stats b{font:650 14px/1.3 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.arcade-viewport[data-layout=world] .game-live-stats{right:92px;justify-content:flex-start}
.game-live-notice{position:absolute;top:var(--notice-top,62px);left:50%;transform:translateX(-50%);max-width:calc(100% - 28px);background:#102331df;border:1px solid #d7e8ed30;border-radius:7px;padding:5px 10px;font:600 12px/1.4 Inter,system-ui;color:#f1dfb9;text-align:center;z-index:2;pointer-events:none}
.game-piece-preview{position:absolute;top:49px;left:50%;transform:translateX(-50%);width:min(320px,95%);height:44px;z-index:2}
.arcade-viewport[data-layout=board] .touch-dock{--touch-edge:6px}
.arcade-viewport[data-layout=board] .touch-button{opacity:.68}
.arcade-viewport[data-layout=board] .touch-button.is-held{opacity:1}
body.arcade-open #arcade-play .touch-dock.narrow-board .touch-movement,body.arcade-open #arcade-play .touch-dock.narrow-board .touch-actions{gap:4px}
body.arcade-open #arcade-play .touch-dock.narrow-board .touch-axis{display:grid;grid-template-columns:repeat(2,44px);width:92px}
body.arcade-open #arcade-play .touch-dock.narrow-board .touch-axis .touch-button{width:44px;height:44px;min-width:44px;min-height:44px}
body.arcade-open #arcade-play .touch-dock.narrow-board .touch-actions{grid-template-columns:repeat(2,44px);grid-template-rows:repeat(2,44px);width:92px}
body.arcade-open #arcade-play .touch-dock.narrow-board .touch-actions>.touch-button{width:44px;height:44px;min-width:44px;min-height:44px;padding:3px}
body.arcade-open #arcade-play .touch-dock.narrow-board .touch-button svg{width:20px;height:20px}
body.arcade-open #arcade-play .touch-dock.narrow-board .touch-button span{font-size:9px}
body.arcade-open #arcade-play .touch-dock.tiny-board .touch-axis{grid-template-columns:44px;width:44px}
body.arcade-open #arcade-play .touch-dock.tiny-board .touch-actions{display:flex;flex-direction:column-reverse;width:44px}
body.arcade-open #arcade-play .touch-dock.tiny-board .touch-movement{left:2px;bottom:3px}
body.arcade-open #arcade-play .touch-dock.tiny-board .touch-actions{right:2px;bottom:3px}
/* Saved runs are compact list cards, independent of artwork tile typography. */
body #saved-games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px;overflow:visible}
.saved-game{min-width:0}
.saved-game-button{display:flex;align-items:center;gap:12px;width:100%;min-height:94px;padding:12px;border:1px solid #bacac9;border-radius:12px;background:#fffdf6;text-align:left;color:#152f39;box-shadow:0 2px 0 #223f3610}
.saved-game-button:hover,.saved-game-button:focus-visible{border-color:#187d76;background:#f0f8f2}
.saved-game-button>img{width:76px;height:64px;object-fit:cover;border-radius:8px;flex:none}
.saved-game-copy{min-width:0;flex:1}
.saved-game-copy>strong{display:block;font:700 16px/1.3 Inter,system-ui;overflow-wrap:anywhere}
body .saved-game-meta{display:flex;flex-wrap:wrap;gap:3px 7px;margin:7px 0 0;padding:0;background:none;border:0;font:400 12px/1.4 Inter,system-ui;color:#50626a}
body .saved-game-meta b{font:650 13px/1.4 Inter,system-ui;color:#183743;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.saved-game-resume{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#e6efe9;font-size:22px;color:#17645f}
@media(max-width:700px){
 body .arcade-library{padding:0;min-width:0}
 body .lobby-hero{padding:22px 18px 24px;gap:20px}
 body .hero-copy h1{font-size:48px;line-height:.94;margin:12px 0}
 body .hero-copy>p{font-size:14px;line-height:1.5;margin:10px 0}
 body .hero-actions{gap:8px;flex-wrap:wrap}
 body .hero-actions .btn{font-size:13px;padding:10px 14px;min-height:44px}
 body .hero-sticker{font-size:10px;max-width:100%;white-space:normal}
 body .hero-feature{min-width:0;margin:0}
 body .featured-game{transform:none;margin:0;width:100%}
 body .featured-art{aspect-ratio:2.25;min-height:0;max-height:190px}
 body .featured-bottom{padding:12px;gap:8px}
 body .featured-bottom h2{font-size:20px;line-height:1.2}
 body .featured-bottom p{font-size:12px;line-height:1.4}
 body .featured-bottom button{min-width:44px;min-height:44px;font-size:12px;white-space:normal}
 body .collection-band{padding:24px 16px}
 body .collection-wrap,body .collections-main,body .collections-side{min-width:0}
 body .collections-layout{display:flex;flex-direction:column;gap:20px}
 body .collections-side{width:100%}
 body .library-title-row{gap:8px;align-items:center;margin-bottom:18px}
 body .library-title-row h2{font-size:25px;line-height:1.15}
 body .library-online{font-size:12px;padding:7px 9px;white-space:nowrap}
 body .library-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;padding:0;width:100%}
 body .library-filter{display:flex;justify-content:space-between;align-items:center;min-width:0;min-height:46px;font:600 13px/1.25 Inter,system-ui;padding:10px 12px;white-space:normal;gap:6px;border-radius:9px}
 body .library-filter span{font-size:12px;flex:none;margin:0}
 body .library-search{width:100%;margin:12px 0 0}
 body .library-search input{min-height:46px;font-size:16px;width:100%}
 body .shelf-heading{align-items:center;gap:8px;margin-bottom:12px}
 body .shelf-heading h2{font-size:19px;line-height:1.3}
 body .shelf-heading>span{font-size:12px;white-space:nowrap}
 body .shelf-more{font-size:12px;min-height:44px;padding:8px 0}
 body #saved-games-grid{grid-template-columns:minmax(0,1fr);gap:10px}
 body .shelf-grid{gap:12px}
 body .tile-wordmark{font-size:clamp(18px,5vw,28px);line-height:1.05;left:10px;bottom:13px;max-width:calc(100% - 20px);overflow-wrap:normal}
 body .tile-tag{display:none}
 body .tile-live{font-size:10px;padding:4px 6px;top:7px;right:7px;left:auto;max-width:calc(100% - 14px)}
 body #recent-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 body .recent-game{width:100%;min-width:0;min-height:48px;font-size:12px;white-space:normal;text-align:left;line-height:1.3}
 body .recent-game span{overflow-wrap:anywhere}
 body .recent-game img{width:34px;height:34px;flex:none}
 body .header{padding-inline:12px;gap:8px}
 body .header-points{min-width:0}
 body .header-points>b{font-size:16px;overflow-wrap:anywhere}
}
@media(max-width:400px){
 .game-live-stats{left:5px;right:5px;gap:4px}
 .game-live-stats>span{padding:5px 6px;min-width:46px}
 .game-live-stats b{font-size:13px}
 .arcade-viewport[data-layout=world] .game-live-stats{right:66px}
 body .saved-game-button{padding:10px;gap:10px}
 body .saved-game-button>img{width:62px;height:60px}
 body .saved-game-resume{width:30px;height:30px}
 body .library-online .online-dot{display:none}
}
body.arcade-open .arcade-stage canvas.game-piece-preview{inset:49px auto auto 50%;width:min(320px,95%);height:44px;max-height:44px;object-fit:contain;transform:translateX(-50%)}
@media(max-width:700px){
 body .collection-wrap{padding:0}
 body .collections-side{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0}
 body .collections-side .library-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px}
 body .collections-side .library-filter{width:100%;border-radius:9px;padding:10px 12px;min-height:46px}
 body .collections-side .library-filter>span{display:inline}
 body .library-title-row{flex-direction:row;flex-wrap:wrap}
 body #collection-title{font-size:25px}
 body .lobby-hero{padding:22px 16px;gap:18px}
 body .hero-copy h1{display:flex;gap:10px;font-size:42px;margin:12px 0}
 body .hero-copy h1 br{display:none}
 body .hero-copy>p br{display:none}
 body .hero-copy>p{max-width:30ch;margin:10px 0}
 body .hero-actions{margin-top:14px}
 body .hero-feature{padding:0}
 body .featured-game{display:grid;grid-template-columns:112px minmax(0,1fr);border-width:2px;border-radius:16px;box-shadow:4px 4px 0 var(--pink);padding:10px;gap:8px 12px}
 body .featured-top{grid-column:1/-1;padding:0;font-size:10px}
 body .featured-art{height:104px;aspect-ratio:auto;border-radius:10px;margin:0}
 body .featured-badge{display:none}
 body .featured-bottom{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0;gap:8px}
 body .featured-bottom h2{font-size:19px}
 body .featured-bottom p{display:none}
 body .featured-bottom button{min-height:44px;margin:0;padding:8px 12px}
 body .hero-feature:after{display:none}
 body .shelf-grid .tile-wordmark{font-size:clamp(18px,5vw,28px)}
}
.game-status-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 12px;margin:12px 0 20px;font-size:13px;line-height:1.5}
.game-status-details dt{color:var(--muted)}.game-status-details dd{margin:0;overflow-wrap:anywhere;font-weight:600}
body.arcade-open #arcade-play .touch-dock.short-scene .touch-actions{grid-template-columns:repeat(2,56px);grid-template-rows:repeat(2,56px);gap:8px;width:120px}
body.arcade-open #arcade-play .touch-dock.short-scene .touch-actions>.touch-button{width:52px;height:52px}
body.arcade-open #arcade-play .touch-dock.short-scene .touch-actions>.touch-button:first-child{width:56px;height:56px}