/* Structural layout shared by every variant. Colours, borders, fonts and
   flourishes come from the active skin through the custom properties below. */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  --bg: #223; --ink: #fff; --ink-soft: #aab; --panel: #334; --panel-2: #445; --line: #000;
  --accent: #fd4; --accent-ink: #223; --good: #5d7; --bad: #e56; --gold: #fd4;
  --radius: 12px; --bw: 2px; --gap: 8px;
  --font: system-ui, sans-serif;
  --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 20px; --fs-xl: 30px;
  --stage-h: clamp(250px, 38dvh, 440px);
  --tap: 44px;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-md); line-height: 1.25;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: manipulation;
}
body { position: fixed; inset: 0; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.num { font-variant-numeric: tabular-nums; }
.spr { display: inline-block; flex: none; vertical-align: middle; }

/* ---------- frame ---------- */
.app {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto var(--stage-h) minmax(0, 1fr) auto;
  grid-template-areas: "hud" "stage" "panel" "tabs";
  padding: 0 var(--sar) 0 var(--sal);
  max-width: 100vw; overflow: hidden;
}

/* ---------- HUD ---------- */
.hud {
  grid-area: hud; display: flex; align-items: center; gap: var(--gap);
  padding: calc(var(--sat) + 6px) 10px 8px; min-width: 0;   /* the HUD itself extends under the status bar */
}
.hud-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.hud-coin { flex: none; width: 40px; height: 40px; display: grid; place-items: center; }
.hud-nums { min-width: 0; }
.hud-amount { display: block; font-size: var(--fs-xl); line-height: 1; white-space: nowrap; }
.hud-rate { display: block; font-size: var(--fs-sm); color: var(--ink-soft); white-space: nowrap; margin-top: 3px; }
.hud-chips { display: flex; gap: 6px; flex: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; min-height: 30px; white-space: nowrap; font-size: var(--fs-sm); }
.icon-btn { flex: none; width: var(--tap); height: var(--tap); display: grid; place-items: center; }

/* ---------- stage ---------- */
.stage { grid-area: stage; position: relative; overflow: hidden; touch-action: none; cursor: pointer; min-width: 0; }
.stage > canvas { position: absolute; left: 0; top: 0; display: block; }
.stage-overlay { position: absolute; inset: 0; pointer-events: none; }
.stage-overlay > * { position: absolute; }
.stage-overlay .live { pointer-events: auto; }

/* ---------- panel + pages ---------- */
.panel { grid-area: panel; position: relative; min-height: 0; min-width: 0; overflow: hidden; }
.page {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  padding: 10px 10px 16px; display: none;
}
.page.active { display: block; }
.page > * + * { margin-top: var(--gap); }
.section { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; font-size: var(--fs-sm); }
.section h2 { margin: 0; font-size: var(--fs-md); }
.note { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }

/* ---------- tabs ---------- */
.tabs { grid-area: tabs; display: flex; padding: 0 4px var(--sab); min-width: 0; }
.tab { position: relative; flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--fs-xs); }
.tab .spr { width: 28px; height: 28px; }
.tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tab-badge { position: absolute; top: 6px; left: calc(50% + 10px); width: 10px; height: 10px; background: var(--bad); display: none; }
.tab.has-badge .tab-badge { display: block; }

/* ---------- rows ---------- */
.row { display: flex; align-items: center; gap: 10px; padding: 8px; min-height: 64px; min-width: 0; }
.row-icon { position: relative; flex: none; width: 48px; height: 48px; display: grid; place-items: center; }
.row-icon .spr { width: 48px; height: 48px; }
.row-count { position: absolute; right: -6px; bottom: -6px; min-width: 22px; padding: 1px 5px; text-align: center; font-size: var(--fs-xs); }
.row-count:empty { display: none; }
.row-main { flex: 1 1 auto; min-width: 0; }
.row-title { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 2px; }
.row-main .bar { margin-top: 5px; }
.row.locked { opacity: .55; }
.row.done .btn { visibility: hidden; }

.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: var(--tap); min-width: 88px; padding: 6px 12px; text-align: center; white-space: nowrap; flex: none; }
.btn .spr { width: 16px; height: 16px; margin-right: 3px; }
.btn-label { font-size: var(--fs-sm); }
.btn-cost { font-size: var(--fs-sm); display: inline-flex; align-items: center; }
.btn.wide { width: 100%; min-height: 52px; font-size: var(--fs-md); }
.btn.off { cursor: default; }

.bar { height: 8px; overflow: hidden; background: var(--line); }
.bar > i { display: block; height: 100%; width: 0; background: var(--good); transform-origin: left; }

.seg { display: inline-flex; flex: none; }
.seg button { min-width: 48px; min-height: var(--tap); padding: 0 8px; font-size: var(--fs-sm); }

.card { padding: 12px; }
.card h3 { margin: 0 0 6px; font-size: var(--fs-lg); }
.card p { margin: 0 0 8px; font-size: var(--fs-sm); }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: var(--fs-sm); margin: 0 0 10px; }
.stats dt { color: var(--ink-soft); } .stats dd { margin: 0; text-align: right; }

/* ---------- modal + toast ---------- */
.modal-layer {
  position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  padding: calc(var(--sat) + 12px) 16px calc(var(--sab) + 12px); background: rgba(10, 12, 30, .6);
}
.modal-layer.open { display: flex; }
.modal { width: min(380px, 100%); max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; text-align: center; }
.modal-title { margin: 0 0 8px; font-size: var(--fs-lg); }
.modal-body { font-size: var(--fs-md); }
.modal-body > * + * { margin-top: 10px; }
.modal-body p { margin: 0; }
.modal-big { font-size: var(--fs-xl); display: flex; align-items: center; justify-content: center; gap: 8px; }
.modal-big .spr { width: 36px; height: 36px; }
.modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.modal textarea { width: 100%; height: 84px; font: 12px ui-monospace, monospace; resize: none; -webkit-user-select: text; user-select: text; padding: 6px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; min-height: var(--tap); }

.toasts { position: fixed; left: 0; right: 0; top: calc(var(--sat) + 70px); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; padding: 0 12px; }
.toast { max-width: 100%; padding: 8px 14px; font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; animation: toast-in .25s ease-out; }
.toast .spr { width: 24px; height: 24px; }
.toast.live { pointer-events: auto; }
.toast.out { opacity: 0; transition: opacity .3s; }
@keyframes toast-in { from { transform: translateY(-12px); opacity: 0; } }

/* ---------- desktop / landscape: stage left, shop right ---------- */
@media (min-width: 820px) and (min-height: 500px) {
  .app {
    left: 50%; right: auto; width: min(1180px, 100vw); transform: translateX(-50%);
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "hud tabs" "stage panel";
    column-gap: 12px; padding: 12px 16px 16px;
  }
  .hud { padding-top: 6px; }
  .tabs { padding: 0; }
  .stage { --stage-h: auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- stage overlay widgets (positioned by the loop, painted by the skin) ---------- */
.pill { padding: 4px 10px; font-size: var(--fs-sm); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; }
.pill .spr { width: 18px; height: 18px; }
.at-tl { left: 8px; top: 8px; } .at-tr { right: 8px; top: 8px; }
.at-tc { left: 50%; top: 8px; transform: translateX(-50%); }
.at-bl { left: 8px; bottom: 8px; } .at-br { right: 8px; bottom: 8px; }
.at-bc { left: 50%; bottom: 8px; transform: translateX(-50%); }
.meter { position: relative; width: min(240px, 60%); height: 22px; overflow: hidden; }
.meter > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }
.meter > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-xs); white-space: nowrap; }
.banner { left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: var(--fs-xl); text-align: center; white-space: nowrap; pointer-events: none; animation: banner-in .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes banner-in { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }
.stage-btn { min-height: var(--tap); min-width: var(--tap); padding: 6px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; white-space: nowrap; max-width: calc(100% - 16px); font-size: var(--fs-md); }
.stage-btn small { font-size: var(--fs-xs); opacity: .8; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }