/* Play page (/play) — RS stone theme on top of client.ejs shell */

body.play-page {
    background:
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(153,69,255,.12) 0%, transparent 55%),
        linear-gradient(180deg, #12100a 0%, #0c0a06 40%, #0a0804 100%);
}

.play-shell {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 1.25rem 2.5rem;
    text-align: center;
}

.play-canvas-wrap {
    display: inline-block;
    margin: 0.75rem auto 0;
    padding: 5px;
    border: 3px solid var(--border, #1f180f);
    border-radius: 6px;
    background: linear-gradient(180deg, #4a4030 0%, #2a2318 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.45);
}

.play-shell .sc-dock {
    max-width: 765px;
    margin: 1rem auto 2rem;
    text-align: left;
}

.play-shell .sc-dock-header {
    margin-bottom: 0.85rem;
    padding: 1rem 1.15rem;
    border: 3px solid var(--border, #1f180f);
    border-radius: 6px;
    background: linear-gradient(180deg, #4a4030 0%, #3d3424 8%, #2e281c 92%, #1f1a12 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.3);
}

.play-shell .sc-dock-kicker {
    color: var(--live, #00ff80);
    letter-spacing: .12em;
}

.play-shell .sc-dock-header-title {
    color: var(--text, #ffff00);
    text-shadow: 1px 1px 0 #000;
    font-weight: 700;
    letter-spacing: .04em;
}

.play-shell .sc-dock-header-sub {
    color: var(--text-dim, #c8b878);
}

.play-shell .sc-dock-alert {
    border: 1px solid var(--stone-light, #5c4f38);
    border-radius: 4px;
    background: rgba(0,0,0,.25);
    color: var(--text-dim, #c8b878);
}

.play-shell .sc-dock-alert strong {
    color: var(--accent, #14f195);
}

.play-shell .sc-dock-section {
    border: 2px solid var(--border, #1f180f);
    border-radius: 5px;
    background: linear-gradient(165deg, var(--panel-2, #3a3224) 0%, var(--panel, #2a2318) 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.35);
}

.play-shell .sc-dock-section[open] {
    border-color: var(--border-gold, #8b7355);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(139,115,85,.2);
}

.play-shell .sc-dock-summary-title {
    color: var(--accent, #14f195);
}

.play-shell .sc-dock-summary-hint {
    color: var(--text-dim, #c8b878);
}

.play-shell .sc-control-chip {
    border-radius: 4px;
    border: 1px solid var(--border, #1f180f);
    background: linear-gradient(180deg, var(--stone-light, #5c4f38) 0%, var(--stone, #3d3424) 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.35);
    color: var(--text-body, #e8dcc0);
}

.play-shell .sc-control-chip select,
.play-shell select {
    background: var(--stone-dark, #2a2318);
    border: 1px solid var(--border, #1f180f);
    color: var(--live, #00ff80);
    border-radius: 3px;
}

.play-shell .sc-control-links .green {
    padding: .48rem .85rem;
    border-radius: 4px;
    border: 1px solid var(--border, #1f180f);
    background: linear-gradient(180deg, var(--stone-light, #5c4f38) 0%, var(--stone, #3d3424) 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.35);
    color: var(--text-dim, #c8b878) !important;
    font-size: .82rem;
}

.play-shell .sc-control-links .green:hover {
    color: var(--text, #ffff00) !important;
    border-color: var(--border-gold, #8b7355);
    background: linear-gradient(180deg, #6b5a40 0%, #4a4030 100%);
}

.play-shell .sc-control-row-label {
    color: var(--text-dim, #c8b878);
}

.play-shell #audio-bar label {
    color: var(--text-dim, #c8b878);
}

.play-shell #game-popout-placeholder {
    background: var(--panel, #2a2318);
    border: 2px dashed var(--stone-light, #5c4f38);
    border-radius: 5px;
    color: var(--text-dim, #c8b878);
}

.play-shell #game-popout-placeholder a {
    color: var(--accent, #14f195);
}

.play-shell .green.blink {
    color: var(--live, #00ff80);
}

.play-shell #sc-reboot-banner {
    border: 2px solid rgba(245,200,66,.45);
    border-radius: 4px;
    background: rgba(0,0,0,.85);
    color: var(--gold, #f5c842);
}

.play-shell #sc-reboot-countdown {
    color: var(--gold, #f5c842);
}

/* Plugin panels inherit stone panels via solanascape-dock.js classes — nudge inputs */
.play-shell #plugin-panel input,
.play-shell #plugin-panel textarea,
.play-shell #plugin-panel select {
    background: var(--stone-dark, #2a2318);
    border: 1px solid var(--border, #1f180f);
    color: var(--text-body, #e8dcc0);
    border-radius: 3px;
}

.play-shell #plugin-panel button {
    border-radius: 4px;
    border: 1px solid var(--border, #1f180f);
    background: linear-gradient(180deg, #2a6b4a 0%, #1a4a32 100%);
    color: var(--live, #00ff80);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.35);
}

body.play-page .site-footer {
    max-width: 820px;
    margin: 0 auto 2rem;
    padding: 0 1.25rem;
}

/*
 * A fixed 200%/300% game size must never scale the Settings modal's own
 * recovery actions outside the viewport. This only changes presentation while
 * the native modal is open; the saved game size remains authoritative.
 */
html.native-settings-open:not(.sc-mobile) #game canvas {
    width: min(765px, calc(100vw - 16px), calc((100vh - 16px) * 1.52087)) !important;
    max-width: calc(100vw - 16px) !important;
    height: auto !important;
    max-height: calc(100vh - 16px) !important;
    object-fit: contain;
}

@media (max-width: 800px) {
    .play-shell { padding: 0 .85rem 2rem; }
    .play-canvas-wrap { max-width: 100%; }
}

/* In-game mobile landscape — full-screen canvas, no site chrome overlap */
html.sc-mobile.sc-ingame.sc-landscape body.play-page .site-chrome,
html.sc-mobile.sc-ingame.sc-landscape body.play-page .site-footer,
html.sc-mobile.sc-login.sc-landscape body.play-page .site-chrome,
html.sc-mobile.sc-login.sc-landscape body.play-page .site-footer {
    display: none !important;
}

html.sc-mobile.sc-login.sc-landscape body.play-page .play-shell {
    max-width: none;
    margin: 0;
    padding: 0;
}

html.sc-mobile.sc-ingame.sc-landscape body.play-page .play-shell {
    max-width: none;
    margin: 0;
    padding: 0;
}

html.sc-mobile.sc-ingame.sc-landscape body.play-page .play-canvas-wrap {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    max-width: none;
}

html.sc-mobile.sc-ingame.sc-landscape body.play-page #sc-reboot-banner {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 8px;
    right: 8px;
    z-index: 90;
    margin: 4px 0 0;
    font-size: 11px;
}

/*
 * The cache-native SETTINGS interface occupies the 512x334 game viewport.
 * While it is open on mobile, scale and crop the main framebuffer to that
 * viewport instead of shrinking it with the full 765x503 desktop frame.
 */
html.sc-mobile.sc-ingame.native-settings-open body {
    overflow: hidden;
}

html.sc-mobile.sc-ingame.native-settings-open #qa-offline-banner,
html.sc-mobile.sc-ingame.native-settings-open body.play-page .site-chrome,
html.sc-mobile.sc-ingame.native-settings-open body.play-page .site-footer,
html.sc-mobile.sc-ingame.native-settings-open #sc-reboot-banner,
html.sc-mobile.sc-ingame.native-settings-open #sc-mobile-bar {
    display: none !important;
}

html.sc-mobile.sc-ingame.native-settings-open #game-frame-host {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
    background: var(--sc-bg);
}

html.sc-mobile.sc-ingame.native-settings-open #game-frame,
html.sc-mobile.sc-ingame.native-settings-open #game {
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: hidden;
}

html.sc-mobile.sc-ingame.native-settings-open #game-frame {
    height: 100%;
}

html.sc-mobile.sc-ingame.native-settings-open #game {
    display: flex;
    height: 65.234vw;
    max-height: 100%;
    align-items: flex-start;
    justify-content: flex-start;
}

html.sc-mobile.sc-ingame.native-settings-open #game canvas {
    width: 149.414vw !important;
    max-width: none !important;
    height: 98.242vw !important;
    max-height: none !important;
    margin: 0 !important;
}

html.sc-mobile.sc-ingame.sc-landscape.native-settings-open {
    --sc-native-settings-h: calc(100dvh - env(safe-area-inset-top, 0px));
}

html.sc-mobile.sc-ingame.sc-landscape.native-settings-open #game-frame-host {
    align-items: flex-start;
}

html.sc-mobile.sc-ingame.sc-landscape.native-settings-open #game {
    height: 100%;
}

html.sc-mobile.sc-ingame.sc-landscape.native-settings-open #game canvas {
    width: calc(var(--sc-native-settings-h) * 2.29042) !important;
    max-width: none !important;
    height: calc(var(--sc-native-settings-h) * 1.50599) !important;
    max-height: none !important;
    margin: 0 0 0 max(0px, calc((100vw - var(--sc-native-settings-h) * 1.53293) / 2)) !important;
}