/* Shared Retro Hideout game frame: the Bud Redhead layout. Applied to a play page by game-frame.js. */
body.rh-frame{background:#111814;color:#f3efdc;font:16px system-ui;margin:0}
body.rh-frame a{color:#d2ec98}
body.rh-frame .rh-hidden{display:none!important}
body.rh-frame main.rh-main{height:calc(100dvh - var(--rh-header-h,0px));min-height:0;max-width:none;width:100%;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;background:transparent}
body.rh-frame button.rh-btn,body.rh-frame .rh-bar button{font:inherit;background:#263428;color:#f1f0dd;border:1px solid #55604f;border-radius:8px;padding:10px 14px;cursor:pointer}
body.rh-frame button:focus-visible,body.rh-frame a:focus-visible{outline:3px solid #ffe483}
.rh-bar{flex:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 14px;background:#0d1411;border-bottom:1px solid #ffffff1c;box-sizing:border-box}
.rh-bar .rh-back{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid #55604f;border-radius:8px;background:#182722;text-decoration:none;color:#f1f0dd}
.rh-bar h1{margin:0;font-size:15px;letter-spacing:2px;text-transform:uppercase;text-align:center;flex:1}
.rh-bar .rh-actions{display:flex;gap:8px;margin:0}
body.rh-frame .rh-stage{position:relative!important;flex:none!important;margin:auto!important;aspect-ratio:4/3!important;width:min(100vw,calc((100dvh - var(--rh-header-h,0px) - 56px - 28px - 48px - 26px)*4/3))!important;max-width:none!important;height:auto!important;background:#071b25!important;padding:0!important;border:0!important;border-radius:0!important;box-sizing:border-box!important;overflow:hidden}
body.rh-frame .rh-stage canvas,body.rh-frame .rh-stage iframe{width:100%;height:100%;display:block;border:0;touch-action:none;outline:none}
body.rh-frame #status{flex:none;margin:0;min-height:28px;padding:4px 12px;font-size:13px;color:#c8d0dc;text-align:center;background:transparent}
.rh-controls{display:none;gap:8px;width:100%;padding:0 8px;box-sizing:border-box}
.rh-controls button{flex:1;min-height:48px;touch-action:none}
.rh-controls p{margin:0;flex:1;text-align:center;font-size:13px;color:#c8d0dc;padding:8px}
.rh-guide{flex:none;width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;min-height:48px;padding:8px 12px;background:#0d1411;font-size:12px;line-height:1.4;box-sizing:border-box}
.rh-guide .label{font-size:10px;letter-spacing:1px;color:#b8c6b2}
.rh-guide span.entry{white-space:nowrap}
.rh-guide kbd{margin-right:3px;padding:2px 5px;font:600 11px/1.4 system-ui;background:#263128;border:1px solid #55604f;border-radius:3px}
.rh-note{margin:0;padding:0 12px 8px;font-size:11px;color:#b8c6b2;text-align:center}
@media(pointer:coarse),(max-width:800px){
 .rh-controls{display:flex}.rh-guide{display:none}
 body.rh-frame .rh-stage{width:min(100vw,calc((100dvh - var(--rh-header-h,0px) - 56px - 28px - 60px - 30px)*4/3))!important}
 .rh-bar{flex-wrap:wrap;row-gap:4px}.rh-bar h1{font-size:12px;letter-spacing:1px;order:3;flex:1 0 100%}.rh-bar .rh-actions{flex-wrap:wrap;justify-content:flex-end}.rh-bar{padding:6px 8px}.rh-bar .rh-back{padding:0 8px;min-height:40px}.rh-bar .rh-actions{gap:6px}.rh-bar .rh-actions button{padding:6px 8px;font-size:13px;min-height:40px}
}
body.rh-frame:fullscreen main.rh-main{height:100vh}
/* A game page's own "header" rules (for example hiding every header while playing) must never hide the shared site header. */
body.rh-frame header.rh-site-header{display:block!important}

/* Stage wrapper used when the runtime hides its own container (menus draw outside it). */
body.rh-frame #rh-stage-wrap .rh-fill,body.rh-frame #rh-stage-wrap>.rh-adopted{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;aspect-ratio:auto!important}
body.rh-frame #rh-stage-wrap>.rh-adopted *{max-width:none}
.rh-pill{position:absolute;left:12px;bottom:12px;z-index:5;padding:4px 10px;border-radius:14px;background:#0d1411d9;border:1px solid #c5e679;color:#d2ec98;font:700 12px/1.4 system-ui;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.rh-pill[hidden]{display:none}
/* Level result: keep the runtime's full-stage dim layer, but make the choices match the frame instead of plain lime web buttons. */
body.rh-frame #modal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#050a08c7!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
body.rh-frame #modal h2{margin:0 0 10px;font:700 clamp(22px,4vw,34px)/1.2 system-ui;letter-spacing:.06em;text-transform:uppercase;color:#f8f1dc;text-shadow:0 2px 0 #000,0 0 18px #c5e679}
body.rh-frame #modal button{display:block;width:min(260px,70%);margin:0;padding:12px 16px;background:#0d1411;color:#f8f1dc;border:2px solid #c5e679;border-radius:8px;font:600 16px system-ui;cursor:pointer}
body.rh-frame #modal button:hover,body.rh-frame #modal button:focus-visible{background:#c5e679;color:#192719;outline:none}

.rh-hint{left:50%;bottom:64px;transform:translateX(-50%);text-transform:none;letter-spacing:0;font-size:13px;white-space:nowrap}
body.rh-frame #rh-stage-wrap .sammy-menu-frame{width:100%!important;height:100%!important}
body.rh-frame #rh-stage-wrap>#game-ui{display:block}
body.rh-frame #rh-stage-wrap>#game-ui[hidden]{display:none!important}

@media(pointer:coarse),(max-width:800px){body.rh-frame .rh-controls{display:flex!important;flex-wrap:wrap}body.rh-frame .rh-controls button{flex:1 1 56px;min-width:0;padding:8px 4px}}
@media(pointer:fine) and (min-width:801px){body.rh-frame .rh-controls{display:none!important}}
/* A runtime's own overlay touch strip becomes the normal in-flow strip under the stage. */
body.rh-frame .rh-controls{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;transform:none!important;width:100%!important;box-sizing:border-box!important;margin:0!important}