/* Controls belong to the active cabinet and are removed with its screen. */
.arcade-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:960px; margin:0 auto; padding:12px 16px max(14px,env(safe-area-inset-bottom)); background:#10161d; border-top:1px solid #34444b; }
.arcade-control-hint { flex:0 0 100%; margin:0 0 4px; text-align:center; font:13px/1.45 monospace; color:#d8e4df; }
.arcade-controls button { min-width:80px; min-height:46px; padding:10px 14px; border:1px solid #6a858b; border-radius:7px; color:#f0f4e6; background:#1d303a; font:700 13px/1.2 monospace; cursor:pointer; touch-action:none; user-select:none; }
.arcade-controls button:active { background:#385647; color:#caffae; transform:translateY(1px); }
.arcade-controls button:focus-visible { outline:3px solid #ffe680; outline-offset:2px; }
@media (max-width:760px) { body.playing:has(#mount + .arcade-controls) #mount { height:auto; aspect-ratio:16/9; min-height:200px; max-height:none; } .arcade-controls { gap:7px; padding:10px; } .arcade-controls button { flex:1 0 auto; min-width:64px; } }
@media (max-height:500px) and (orientation:landscape) { body.playing:has(#mount + .arcade-controls) #mount { height:calc(100dvh - 150px); } .arcade-controls { padding:6px; gap:5px; } .arcade-control-hint { display:none; } .arcade-controls button { min-height:40px; padding:8px; } }

/* The coin app has one action surface below its pixel chart. */
body.playing:has(#mount .coin-session) #mount { box-sizing:border-box; width:min(100%,960px); height:auto; aspect-ratio:auto; max-height:none; min-height:0; margin:0 auto; }
body.playing:has(#mount .coin-session) .stage-wrap { height:auto; min-height:0; padding-bottom:24px; }
.tape-books { box-sizing:border-box; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:960px; margin:0 auto; padding:12px 16px; background:#101c24; border-top:1px solid #45606b; font:14px/1.45 system-ui,sans-serif; }
.tape-books dt { margin:0 0 3px; color:#c5d5db; font-size:13px; }
.tape-books dd { margin:0; color:#b7ffd0; font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.tape-controls { align-items:start; gap:12px; padding-top:12px; }
.tape-controls .arcade-control-hint { display:none; }
.tape-controls button { font-family:system-ui,sans-serif; font-size:14px; }
.tape-amount-row { flex:1 0 100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; align-items:center; }
.tape-amount-row[hidden] { display:none; }
.tape-amount-row label { grid-column:1 / -1; color:#c5d5db; font:13px/1.4 system-ui,sans-serif; }
.tape-currency { display:flex; align-items:center; gap:8px; border:1px solid #6a858b; border-radius:7px; padding:0 12px; color:#c5d5db; font:18px/1.3 system-ui,sans-serif; background:#09131c; }
.tape-currency:focus-within { outline:2px solid #b7ffd0; outline-offset:2px; }
.tape-currency input { box-sizing:border-box; width:100%; min-width:0; min-height:46px; padding:8px 0; border:0; outline:none; color:#f0f4e6; background:transparent; font:18px/1.3 system-ui,sans-serif; }
.tape-controls .tape-use-all { min-width:0; min-height:46px; padding:8px; background:none; border:0; color:#b7ffd0; text-decoration:underline; text-underline-offset:3px; }
.tape-primary { display:flex; flex:1 0 100%; gap:10px; }
.tape-primary button { flex:1; min-height:48px; }
.tape-primary button:first-child { color:#092818; background:#a5efb8; border-color:#c0ffcf; font-weight:750; }
.tape-controls button:disabled { cursor:default; opacity:.45; }
.tape-status { flex:1 0 100%; margin:0; color:#b7ffd0; font:14px/1.45 system-ui,sans-serif; }
.tape-status[hidden] { display:none; }
.tape-funding { flex:1 0 100%; color:#c5d5db; font:14px/1.45 system-ui,sans-serif; }
.tape-funding summary { cursor:pointer; box-sizing:border-box; min-height:44px; padding:12px 0; }
.tape-funding p { max-width:680px; margin:8px 0 12px; }
.tape-funding button { margin:0 6px 6px 0; }
@media (max-width:520px) { .tape-books { padding:12px; } .tape-primary { gap:7px; } }
/* Each device borrows this same view. The world layout is never its container. */
.coin-session { box-sizing:border-box; width:100%; max-width:960px; min-width:0; margin:0 auto; color:#edf5ed; background:#101c24; }
.coin-chart-mount { box-sizing:border-box; width:100%; height:auto; min-height:0; aspect-ratio:480/208; overflow:hidden; }
.coin-chart-mount canvas { display:block; width:100%; height:100%; }
.coin-session .tape-books, .coin-session .tape-controls { width:100%; max-width:none; }
.tape-funding-review { padding:12px; border:1px solid #89b5a0; border-radius:6px; background:#142c2a; }
.tape-funding-review[hidden] { display:none; }
.coin-session .tape-funding button { min-height:44px; }
@media (max-height:500px) and (min-width:760px) {
  #mount .coin-session, #desk .coin-session { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; align-items:start; }
  .coin-session .coin-chart-mount { grid-column:1; grid-row:1; }
  .coin-session .tape-books { grid-column:1; grid-row:2; padding:10px; }
  .coin-session .tape-controls { grid-column:2; grid-row:1 / span 2; gap:8px; padding:8px; min-width:0; }
  .coin-session .tape-controls button { min-height:44px; }
  .coin-session .tape-primary button { min-height:48px; }
}
/* A laptop browser has room for a chart beside its actions, even when its
   physical screen is short. Phones keep one column. */
.finance-market { container-type:inline-size; }
@container (min-width:540px) {
  #desk .coin-session { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; align-items:start; }
  #desk .coin-chart-mount { grid-column:1; grid-row:1; }
  #desk .tape-books { grid-column:1; grid-row:2; padding:10px; }
  #desk .tape-controls { grid-column:2; grid-row:1 / span 2; padding:10px; gap:8px; min-width:0; }
}

/* World dimensions are independent of control visibility. Controls overlay corners. */
body.playing:has(.rpg-stage) .foot{display:none}
body.playing .stage-wrap.rpg-stage{position:fixed;inset:var(--rpg-top,70px) 0 0;box-sizing:border-box;width:100%;height:auto;min-height:0;max-height:none;margin:0;padding:0;display:block;overflow:hidden}
body.playing #mount.rpg-mount{position:absolute;inset:48px 0 0;box-sizing:border-box;width:100%;height:calc(100% - 48px);min-height:0;max-height:none;max-width:none;margin:0;aspect-ratio:auto}
.rpg-view-bar{position:absolute;z-index:3;inset:0 0 auto;height:48px;box-sizing:border-box;display:flex;gap:8px;align-items:center;justify-content:space-between;padding:2px 12px;background:#101c23ee}
.rpg-balances{flex:1;min-width:0;font:13px/1.25 system-ui,sans-serif;color:#e2ece7;overflow-wrap:anywhere}
.rpg-panel-toggle,.rpg-shortcuts-toggle{flex:none;min-height:44px;padding:7px 10px;border:1px solid #78929a;border-radius:5px;color:#e9f5ed;background:#172b34;font:13px system-ui,sans-serif;cursor:pointer}
.rpg-panel-toggle:focus-visible,.rpg-shortcuts-toggle:focus-visible{outline:2px solid #ffe680;outline-offset:2px}
.rpg-stage>.rpg-panel{position:absolute;inset:48px 0 0;z-index:2;box-sizing:border-box;width:auto;min-width:0;min-height:0;max-width:none;max-height:none;margin:0;padding:0;border:0;background:none;color:#f4ece0;font:15px/1.4 system-ui,sans-serif;display:block;pointer-events:none}
.rpg-stage>.rpg-panel[hidden]{display:none}
.rpg-panel button{box-sizing:border-box;min-height:44px;padding:8px 10px;border:1px solid #76838b;border-radius:8px;background:#20323bed;color:#fff;font:inherit;cursor:pointer;touch-action:manipulation;pointer-events:auto}
.rpg-panel button:hover,.rpg-panel button:focus-visible{background:#355362;outline:2px solid #ffe680;outline-offset:1px}
.rpg-dialogue{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}
.rpg-panel[data-mode="explore"] .rpg-dialogue{position:absolute;top:8px;left:12px;max-width:min(340px,calc(100% - 24px));max-height:104px;overflow:hidden;padding:8px 10px;box-sizing:border-box;border-radius:8px;background:#10202bd9;font-size:13px}
.rpg-heading{flex:none;color:#e8d7a2;font-weight:700}.rpg-narrative{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;overflow-wrap:anywhere}.rpg-narrative p{margin:0 0 8px}.rpg-route{color:#b0d9ce}
.rpg-choices{display:grid;grid-template-columns:minmax(0,1fr);flex:none;gap:6px}.rpg-choices button{width:100%;text-align:left}
.rpg-controls{position:absolute;inset:auto 12px max(12px,env(safe-area-inset-bottom));display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0;padding:0;border:0}
.rpg-pad{flex:none;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px}.rpg-pad button{padding:4px;touch-action:none}.rpg-pad [data-move="arrowup"]{grid-column:2}.rpg-pad [data-move="arrowleft"],.rpg-pad [data-move="arrowdown"],.rpg-pad [data-move="arrowright"]{grid-row:2}
.rpg-action{flex:none;width:clamp(130px,20vw,220px);max-width:calc(100% - 156px);min-width:0;min-height:56px!important}
.rpg-stage .rpg-community-links{display:none;position:absolute;right:12px;top:8px;width:min(300px,calc(100% - 24px));padding:8px;background:#10202bf5;border:1px solid #78929a;border-radius:8px;gap:6px;pointer-events:auto}
.rpg-stage.rpg-shortcuts .rpg-community-links{display:grid}.rpg-community-links button{font-size:14px;text-align:left}.rpg-guide{display:none}
.rpg-stage>.rpg-panel[data-mode="conversation"]{inset:auto 12px max(12px,env(safe-area-inset-bottom)) auto;width:min(420px,calc(100% - 24px));max-height:calc(100% - 66px);padding:14px;border:1px solid #7e9699;border-radius:12px;background:#101d24f5;display:flex;flex-direction:column;pointer-events:auto;overflow:hidden}
.rpg-panel[data-mode="conversation"] .rpg-dialogue{flex:1;min-height:0}.rpg-panel[data-mode="conversation"] .rpg-controls,.rpg-panel[data-mode="conversation"] .rpg-community-links,.rpg-panel[data-mode="conversation"] .rpg-guide{display:none}
@media(max-width:600px){.rpg-view-bar{gap:5px;padding-inline:8px}.rpg-balances{font-size:11px}.rpg-panel-toggle,.rpg-shortcuts-toggle{font-size:12px;padding-inline:7px}.rpg-controls{left:8px;right:8px;gap:8px}.rpg-action{font-size:13px}.rpg-panel[data-mode="explore"] .rpg-dialogue{font-size:12px;left:8px;max-width:calc(100% - 16px)}}
@media(max-height:500px){.rpg-stage>.rpg-panel[data-mode="conversation"]{padding:10px;font-size:13px}.rpg-dialogue{gap:5px}.rpg-narrative p{margin-bottom:5px}.rpg-choices{gap:4px}.rpg-choices button{padding:5px 8px}.rpg-panel[data-mode="explore"] .rpg-dialogue{max-width:260px;max-height:62px;font-size:12px}}