/* V2 app shell (ui/shell.js adds html.sh-on once it has rebuilt the frame).
   Mobile: HUD / hall stage / bottom tab bar, panels as bottom sheets over the hall.
   Desktop >= 900px: HUD across the top, hall left, active panel docked right. */
:root {
  --sh-bg: #2b2320; --sh-panel: #3d3129; --sh-edge: #6b4a34; --sh-ink: #f2e9d8; --sh-dim: #c9b393; --sh-gold: #e8b84b;
  --sh-side-w: clamp(380px, 34vw, 520px);
  --sh-sat: env(safe-area-inset-top, 0px); --sh-sab: env(safe-area-inset-bottom, 0px);
  --sh-sal: env(safe-area-inset-left, 0px); --sh-sar: env(safe-area-inset-right, 0px);
}

html.sh-on, html.sh-on body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.sh-on body { padding: 0; display: block; min-height: 0; background: var(--sh-bg); }
html.sh-on #app {
  position: fixed; inset: 0; max-width: none; width: auto; height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "hud" "stage" "tabs";
  padding: 0 var(--sh-sar) 0 var(--sh-sal); overflow: hidden;
}

/* ---------- HUD ---------- */
.sh-hud { grid-area: hud; z-index: 20; padding: calc(6px + var(--sh-sat)) 8px 6px; background: #231c19;
  border-bottom: 2px solid var(--sh-edge); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sh-hudrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.sh-hud h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sh-hud #clockHud { flex: 1 1 auto; min-width: 0; margin: 0; }
.sh-gear { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: var(--sh-panel); border: 2px solid var(--sh-edge); border-radius: 8px; }
.sh-gear.sh-active { border-color: var(--sh-gold); }
/* gear: sits in the HUD's row 2 beside the speed button, same size */
.sh-gear.sh-gear-in { width: 44px; height: 44px; border-radius: 6px; }
/* stat chips: one compact line (label + value); RS2-style resource chips for stamina / medals */
.sh-hud .stats { order: 3; flex: 1 1 100%; min-width: 0; margin: 0; gap: 4px; flex-wrap: nowrap; }
.sh-hud .stat { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 3px 6px; min-height: 26px; border-radius: 4px; border-width: 2px; }
.sh-hud .stat .label { font-size: 10px; margin: 0; line-height: 1; white-space: nowrap; }
.sh-hud .stat .value { font-size: 13px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-hud .stat .sh-ico { width: 14px; height: 14px; flex: 0 0 auto; }
.sh-hud .sh-chip { flex: 0 1 auto; }
@media (max-width: 380px) { .sh-hud .stat { padding: 3px 4px; gap: 3px; } .sh-hud .stat .value { font-size: 12px; } }
/* phones < 480px: the chips sit in HUD row 2 (shell.js moves .stats there) as stacked label/value tiles, 44px tall.
   Labels stay 10px; #c9b393 on #3d3129 is 6.4:1, #f2e9d8 values 11:1. */
@media (max-width: 479px) {
  .sh-hud { padding: calc(3px + var(--sh-sat)) 6px 3px; gap: 0; }
  .sh-hud .hud-row2 .stats { order: 0; flex: 1 1 0; width: auto; min-width: 0; display: flex; gap: 3px; margin: 0; }
  .sh-hud .hud-row2 .stat { flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 3px; height: 44px; min-height: 44px;
    padding: 2px 2px; border-width: 2px; border-radius: 4px; background: #3d3129; border-color: #2a140c; box-shadow: inset 0 0 0 1px #6b4a34; }
  .sh-hud .hud-row2 .stat .label { font-size: 10px; color: #d9c7a6; }
  .sh-hud .hud-row2 .stat .value { font-size: 13px; max-width: 100%; }
  .sh-hud .hud-row2 .stat .sh-ico { width: 14px; height: 14px; }
  .sh-gear.sh-gear-in { width: 44px; }
}
@media (max-width: 370px) {
  .sh-hud .hud-row2 .stat .value { font-size: 12px; }
  .sh-hud .hud-row2 .stats { gap: 2px; }
}
.sh-legacy-stat, .sh-legacy, html.sh-on #tapBtn { display: none !important; }

/* ---------- stage ---------- */
.sh-stage { grid-area: stage; position: relative; min-height: 0; min-width: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #3a2e27 0%, #2b2320 70%); }
.sh-stagebox { position: absolute; inset: 0; padding: 8px; display: flex; align-items: flex-start; justify-content: center; }
.sh-stagebox .hall-wrap { flex: 0 0 auto; margin: 0; }
/* shell.js measure() fits the whole frame (wall + hall + street); hall-fx sizes itself from this width */
.sh-hallbox { flex: 0 0 auto; width: calc(var(--hall-css-w, 192px) + 6px); max-width: 100%; }
html.sh-on canvas#hall { width: var(--hall-css-w, 100%); height: var(--hall-css-h, auto); max-width: none; box-sizing: content-box; }
.sh-stagebars { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 5; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.sh-stagebars > * { pointer-events: auto; margin: 0 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.45); }
.sh-stagebars button { min-height: 44px; min-width: 64px; }
html.sh-on.sh-banner-toast #banner { display: none !important; } /* banners are forwarded to uiToast */
html.sh-on #banner { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px);
  z-index: 6; margin: 0; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.45); }

/* ---------- tab bar ---------- */
.sh-tabs { grid-area: tabs; z-index: 30; display: flex; background: #231c19; border-top: 2px solid var(--sh-edge);
  padding: 4px 4px calc(4px + var(--sh-sab)); gap: 4px; }
.sh-tab { flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--sh-panel); color: var(--sh-dim); border: 2px solid var(--sh-edge); border-radius: 8px; padding: 4px 2px;
  font-size: 11px; font-weight: bold; letter-spacing: 0.3px; }
.sh-tab.sh-active { background: #e8d9b8; color: var(--sh-bg); border-color: var(--sh-gold); transform: translateY(-2px); }
.sh-tab:active { transform: translateY(1px); }
.sh-ico { width: 20px; height: 20px; image-rendering: pixelated; display: block; }
/* NEW badge on a tab icon (meta news instead of a toast) */
.sh-tab, .sh-gear { position: relative; }
.sh-badge { position: absolute; top: -5px; right: -3px; z-index: 1; pointer-events: none;
  font: 9px/1 'Press Start 2P', ui-monospace, monospace; -webkit-font-smoothing: none; letter-spacing: 0;
  color: #fff; background: #b8321f; padding: 3px 3px 2px; border: 2px solid #2a140c; border-radius: 2px;
  box-shadow: 0 2px 0 rgba(20,10,6,0.6); }
.sh-badge.sh-badge-pop { animation: sh-badge-pop 420ms steps(5, end); }
@keyframes sh-badge-pop { 0% { transform: scale(0.2); } 50% { transform: scale(1.35) rotate(-6deg); } 100% { transform: none; } }
.sh-tab:focus-visible, .sh-gear:focus-visible, .sh-close:focus-visible, .sh-seg button:focus-visible { outline: 3px solid var(--sh-gold); outline-offset: 1px; }

/* ---------- sheets (mobile: bottom sheet over the hall) ---------- */
.sh-side { position: absolute; left: var(--sh-sal); right: var(--sh-sar); bottom: var(--sh-tabs-h, 64px); z-index: 25; pointer-events: none; }
.sh-sheet { pointer-events: auto; display: flex; flex-direction: column; max-height: min(58dvh, calc(100dvh - var(--sh-tabs-h, 64px) - var(--sh-hud-h, 90px) - 48px));
  background: var(--sh-bg); border: 2px solid var(--sh-edge); border-bottom: 0; border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.5); transition: transform 180ms ease-out; }
.sh-sheet[hidden] { display: none; }
.sh-sheet.sh-in { animation: sh-up 200ms ease-out; }
.sh-sheet.sh-drag { transition: none; }
@keyframes sh-up { from { transform: translateY(40%); opacity: 0.4; } to { transform: none; opacity: 1; } }
.sh-sheethead { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 10px 6px 4px 14px; touch-action: none; cursor: grab; }
.sh-grab { position: absolute; top: 5px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--sh-edge); }
.sh-title { flex: 1; margin: 0; font-size: 15px; letter-spacing: 0.4px; color: var(--sh-ink); outline: none; }
.sh-close { width: 44px; height: 44px; flex: 0 0 auto; background: transparent; color: var(--sh-dim); border: 0; border-radius: 8px; font-size: 18px; }
.sh-seg { flex: 0 0 auto; display: flex; gap: 4px; margin: 0 10px 6px; padding: 3px; background: #231c19; border: 2px solid var(--sh-edge); border-radius: 8px; }
.sh-seg button { flex: 1; min-height: 44px; background: transparent; color: var(--sh-dim); border: 0; border-radius: 6px; font-size: 13px; font-weight: bold; }
.sh-seg button[aria-selected="true"] { background: var(--sh-gold); color: var(--sh-bg); }
.sh-sheetbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 0 10px 14px; }
.sh-sheetbody > div:first-child > :first-child { margin-top: 0; }
.sh-subhidden { display: none !important; }
html.sh-on #app.sh-placing .sh-side { display: none; }

/* system sheet */
.sh-sys { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.sh-syslabel { font-size: 11px; color: var(--sh-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.sh-sys button { width: 100%; min-height: 44px; margin: 0; }
.sh-syshint { margin: 6px 0 0; font-size: 11px; color: #b3a794; }
html.sh-on #resetBtn { border-color: #b5533c; color: #f2c9bd; }

/* welcome-back popup: centred over everything */
html.sh-on #welcomeModal { position: fixed; z-index: 70; left: 50%; top: 40%; transform: translate(-50%, -50%);
  width: min(340px, calc(100vw - 32px)); margin: 0; background: var(--sh-panel); border: 2px solid var(--sh-gold);
  box-shadow: 0 0 0 100vmax rgba(20,14,10,0.6); }
html.sh-on #welcomeModal button { min-height: 44px; }

/* ---------- desktop: two columns, panel docked right ---------- */
@media (min-width: 900px) {
  html.sh-on #app { grid-template-columns: minmax(0, 1fr) var(--sh-side-w);
    grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "hud hud" "stage tabs" "stage side"; }
  .sh-hud { padding: 6px 12px; }
  .sh-hudrow { flex-wrap: nowrap; gap: 10px; }
  .sh-hud .stats { order: 0; flex: 0 1 auto; width: min(460px, 38vw); }
  .sh-hud h1 { position: static; width: auto; height: auto; clip: auto; font-size: 16px; color: var(--sh-gold); flex: 0 0 auto; }
  .sh-stagebox { align-items: center; padding: 12px; }
  /* N3: placing / selected bars dock in the side column above the panel (shell.js moves them), never over the hall */
  .sh-side > .sh-stagebars { position: static; flex: 0 0 auto; padding: 8px 10px 0; }
  .sh-side > .sh-stagebars:not(:has(> .show)) { display: none; }
  .sh-side > .sh-stagebars > * { box-shadow: none; border: 2px solid var(--sh-gold); }
  .sh-tabs { border-top: 0; border-left: 2px solid var(--sh-edge); border-bottom: 2px solid var(--sh-edge); padding: 6px; }
  .sh-tab { flex-direction: row; min-height: 44px; font-size: 12px; gap: 6px; }
  .sh-tab.sh-active { transform: none; }
  .sh-side { grid-area: side; position: static; pointer-events: auto; min-height: 0; display: flex; flex-direction: column;
    border-left: 2px solid var(--sh-edge); background: var(--sh-bg); }
  .sh-sheet { flex: 1 1 auto; min-height: 0; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .sh-sheethead { cursor: default; touch-action: auto; padding-top: 6px; }
  .sh-grab { display: none; }
  .sh-sheet:not([data-sheet="system"]) .sh-close { display: none; }
  html.sh-on #app.sh-placing .sh-side { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-sheet, .sh-sheet.sh-in, .sh-badge.sh-badge-pop { animation: none; transition: none; }
}