:root {
  color-scheme: dark;
  --forest: #0d1310; --stone: #17201a; --moss: #243028;
  --brass: #c7ad70; --parchment: #e9e5d8; --secondary: #b2baaf;
  --muted: #8e9b91; --line: rgba(233,229,216,.12); --ember: #d99881;
  font: 14px 'Trebuchet MS', Arial, sans-serif;
  color: var(--parchment); background: var(--forest);
  -webkit-font-smoothing: antialiased;
}
/* Keep global geometry rules away from CheerpJ's generated display. */
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; }
button, input { font: inherit; }
button { min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--secondary); cursor: pointer; }
button:hover { background: var(--moss); color: var(--parchment); }
button:disabled { opacity: .45; cursor: default; }
button[aria-pressed=true] { background: var(--moss); color: var(--brass); }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
a { color: var(--secondary); text-underline-offset: 4px; }
a:hover { color: var(--brass); }
[hidden] { display: none !important; }
.world-bar { flex-shrink: 0; min-height: 64px; margin: 0 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); gap: 12px; }
.identity, nav { display: flex; align-items: center; gap: 12px; }
.identity img { width: 36px; height: 36px; object-fit: contain; }
h1 { font: 600 17px Georgia, serif; letter-spacing: .12em; color: var(--brass); margin: 0; }
#world-label { font-size: 12px; color: var(--secondary); border-left: 1px solid var(--line); padding-left: 16px; }
nav { gap: 4px; }
.launcher-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; padding: 12px 16px; }
.game-session { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 503px; overflow: auto; }
.client-host { position: relative; flex-shrink: 0; inline-size: 765px; block-size: 503px; background: #05070b; }
.client-host[data-mobile-layout] { inline-size: 960px; block-size: 540px; }
.veridia-gpu-smoke-canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; z-index: 0; }
.client-host [data-veridia-cheerpj-display] { position: relative; z-index: 1; }
.veridia-runelite-canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; z-index: 2; }
.launch-panel { position: absolute; inset: 12px 16px; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--forest); text-align: center; padding: 20px; }
.eyebrow { font-size: 11px; letter-spacing: .14em; color: var(--brass); }
#launch-status { font: 24px Georgia, serif; line-height: 1.4; max-width: 400px; }
#retry-launch:disabled { display: none; }
body[data-launch-state$=error] #launch-status { color: var(--ember); }
.client-footer { flex-shrink: 0; min-height: 32px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 16px; font-size: 10px; color: var(--muted); }
.cheerpj-credit { margin: 4px 0; }
.cheerpj-credit a { color: var(--muted); }
dialog { box-sizing: border-box; background: var(--stone); color: var(--parchment); border: 1px solid var(--line); border-radius: 12px; width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 24px; overflow: auto; }
dialog::backdrop { background: rgba(0,0,0,.65); }
dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
dialog h2 { font: 24px Georgia, serif; margin: 8px 0; }
dialog .eyebrow { margin: 0; }
.supporting, .diagnostics { font-size: 12px; color: var(--secondary); line-height: 1.6; }
summary { cursor: pointer; padding: 12px 0; }
dl>div { padding: 16px 0; border-bottom: 1px solid var(--line); }
dt { font-weight: 600; margin-bottom: 8px; }
dd { margin: 0; color: var(--secondary); line-height: 1.5; }
.support-link { display: inline-block; padding: 16px 0 0; }
.focus-view .world-bar { display: none; }
#restore-controls { position: fixed; top: 8px; right: 8px; z-index: 5; background: var(--stone); border: 1px solid var(--line); }
.rotate-hint { display: none; }
.mobile-client { overflow: hidden; }
.mobile-client .game-session { min-height: 0; overflow: hidden; flex-direction: column; align-items: stretch; }
.mobile-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.mobile-stage .client-host { position: absolute; transform-origin: top left; }
.mobile-input-surface { position: absolute; inset: 0; z-index: 3; touch-action: none; outline: none; }
.mobile-controls { position: absolute; top: max(4px, env(safe-area-inset-top)); right: max(4px, env(safe-area-inset-right)); z-index: 4; display: flex; }
.mobile-controls button { background: var(--stone); border: 1px solid var(--line); opacity: .85; }
.mobile-controls>img { display: none; }
.keyboard-panel { position: absolute; bottom: env(safe-area-inset-bottom); left: env(safe-area-inset-left); right: env(safe-area-inset-right); z-index: 5; padding: 4px; background: var(--stone); display: flex; gap: 4px; }
.keyboard-panel input { flex: 1; min-width: 100px; font-size: 16px; background: var(--forest); color: var(--parchment); border: 1px solid var(--line); border-radius: 4px; padding: 8px; }
@media(max-width:600px) {
  .world-bar { min-height: 56px; margin: 0 12px; }
  .identity { gap: 8px; } h1 { font-size: 14px; } #world-label { padding-left: 8px; }
  nav button:not([data-dialog=client-help]) { display: none; }
  .launcher-shell { padding: 8px 12px; }
  .mobile-client .rotate-hint { display: block; background: var(--stone); border-radius: 6px; padding: 12px; margin-top: 8px; color: var(--secondary); font-size: 12px; }
  .rotate-hint p { margin: 4px 0 0; line-height: 1.5; }
  .client-footer { flex-wrap: wrap; gap: 0; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}
@media(orientation:landscape) and (max-height:540px) {
  .mobile-client .world-bar { display: none; }
  .mobile-client .launcher-shell { padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left)); }
  .mobile-client .game-session { flex-direction: row; }
  .mobile-stage { align-self: stretch; }
  .mobile-controls button { font-size: 12px; padding: 4px 8px; }
  .mobile-client .rotate-hint { display: none; }
  .client-footer { min-height: 20px; font-size: 9px; padding-bottom: env(safe-area-inset-bottom); }
}
.mobile-client .world-bar, .mobile-client .client-footer { display: none; }
.mobile-client .launcher-shell { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.mobile-client .rotate-hint { display: none; }
.mobile-client .game-session { min-width: 0; }