/* =============================================================================
 * PIE CLICKER 2 -- base.css
 * Design tokens, reset, app shell layout, top bar, sidebar frames, responsive.
 * Component-level styling lives in components.css; motion in animations.css.
 * ========================================================================== */

:root {
  /* --- surfaces --- */
  --bg:        #15120e;
  --bg-deep:   #0e0c09;
  --panel:     #201b15;
  --panel-2:   #29221a;
  --panel-3:   #322a20;
  --line:      rgba(255, 224, 178, 0.10);
  --line-soft: rgba(255, 224, 178, 0.05);

  /* --- type --- */
  --text:      #f4ece0;
  --text-dim:  #c3b3a1;
  --muted:     #9b8b7a;
  --faint:     #6d6155;

  /* --- accents --- */
  --gold:      #f0b23f;
  --gold-soft: #ffd685;
  --gold-deep: #b87a1c;
  --crust:     #dfa662;
  --crust-dk:  #a56c30;
  --filling:   #c0392b;
  --filling-2: #8e2418;
  --good:      #7cc46f;
  --hot:       #ff7f45;
  --cold:      #67aee0;
  --reality:   #a98bff;
  --reality-2: #6f4ee0;

  /* --- metrics --- */
  --left-w:    322px;
  --right-w:   386px;
  --topbar-h:  64px;
  --radius:    14px;
  --radius-sm: 9px;
  --shadow-1:  0 1px 2px rgba(0,0,0,.35);
  --shadow-2:  0 6px 18px -6px rgba(0,0,0,.6);
  --shadow-3:  0 18px 44px -14px rgba(0,0,0,.75);

  /* --- motion (settings can zero these out) --- */
  --t-fast:  .12s;
  --t-med:   .24s;
  --t-slow:  .42s;
  --ease:    cubic-bezier(.22,.75,.3,1);

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", "Cascadia Mono", ui-monospace, Menlo, Consolas, monospace;

  --ui-scale: 1;
}

/* High-contrast accessibility variant */
body.high-contrast {
  --bg: #000000;
  --bg-deep: #000000;
  --panel: #14110d;
  --panel-2: #1e1a14;
  --panel-3: #2b241a;
  --text: #ffffff;
  --text-dim: #efe6d8;
  --muted: #cbbcab;
  --line: rgba(255, 231, 189, 0.30);
  --line-soft: rgba(255, 231, 189, 0.18);
  --gold: #ffc84d;
}

body.large-ui { --ui-scale: 1.12; }

/* Reduced-motion: both the OS preference and the in-game setting. */
body.reduced-motion, body.reduced-animations {
  --t-fast: 0s; --t-med: 0s; --t-slow: 0s;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-med: 0s; --t-slow: 0s; }
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

/* The whole app is a game UI, not a document -- disable text selection so
   drags/double-clicks don't highlight numbers instead of interacting with
   them. Inputs/textareas are exempted in case any are added later. */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font);
  font-size: calc(14px * var(--ui-scale));
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button {
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer;
}
/* Author `display` declarations out-specify the UA's `[hidden]{display:none}`,
   so several components (the modal layer, the cutscene, store cards, the
   ascend button) stayed on screen while marked hidden. This wins over all of
   them and must stay above the component rules. */
[hidden] { display: none !important; }

button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
h1,h2,h3,h4 { margin: 0; font-weight: 650; }
::selection { background: var(--gold-deep); color: #fff; }

/* scrollbars */
.scroll, .sidebar-body { scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent; }
.scroll::-webkit-scrollbar, .sidebar-body::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll::-webkit-scrollbar-thumb, .sidebar-body::-webkit-scrollbar-thumb {
  background: var(--panel-3); border-radius: 9px; border: 2px solid transparent; background-clip: content-box;
}
.scroll::-webkit-scrollbar-thumb:hover, .sidebar-body::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); background-clip: content-box; }
.scroll::-webkit-scrollbar-track, .sidebar-body::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------- app shell -- */
#app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background:
    radial-gradient(1200px 700px at 50% -12%, rgba(240,178,63,.10), transparent 62%),
    radial-gradient(900px 600px at 12% 108%, rgba(192,57,43,.07), transparent 60%),
    var(--bg);
}

/* --------------------------------------------------------------- top bar -- */
#topbar {
  flex: 0 0 auto;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(41,34,26,.92), rgba(32,27,21,.82));
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  position: relative; z-index: 40;
  backdrop-filter: blur(8px);
}

.brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.brand-mark { font-size: 24px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.brand-text { font-weight: 800; letter-spacing: .07em; font-size: 15px; }
.brand-accent { color: var(--gold); }
.brand-two {
  color: var(--bg); background: var(--gold);
  border-radius: 5px; padding: 0 5px; margin-left: 5px; font-size: 12px;
}

.topbar-main { display: flex; align-items: baseline; gap: 14px; flex: 1 1 auto; min-width: 0; }
.currency { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.currency-value {
  font-family: var(--font-num);
  font-size: calc(26px * var(--ui-scale));
  font-weight: 700; letter-spacing: -.01em;
  color: var(--gold-soft);
  text-shadow: 0 0 18px rgba(240,178,63,.28);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.currency-label { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .04em; }

.reality-limit {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  color: #ffb4a0;
  background: rgba(192,57,43,.16);
  border: 1px solid rgba(255,120,90,.35);
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.rl-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff6a4d; }

.topbar-stats { display: flex; align-items: stretch; gap: 8px; flex: 0 0 auto; }
.tb-stat {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 5px 12px; min-width: 96px;
  background: rgba(255,236,205,.035);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.tb-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.tb-value { font-family: var(--font-num); font-size: 14px; font-weight: 650; color: var(--text); white-space: nowrap; }
.tb-unit { color: var(--muted); font-size: 11px; }
.tb-temp .tb-value { color: var(--gold); }
.tb-temp.is-cold .tb-value { color: var(--cold); }
.tb-temp.is-hot .tb-value { color: var(--hot); }
.tb-temp.is-overheat .tb-value { color: #ff5c5c; }
.tb-temp.is-optimal .tb-value { color: var(--good); }
.tb-shards .tb-value { color: var(--reality); }
.shard-glyph { font-size: 11px; }

/* --------------------------------------------------------------- layout -- */
#main {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: var(--lw, var(--left-w)) minmax(0, 1fr) var(--rw, var(--right-w));
  position: relative;
  transition: grid-template-columns var(--t-slow) var(--ease);
}
#app.left-open  { --lw: var(--left-w); }
#app:not(.left-open)  { --lw: 0px; }
#app.right-open { --rw: var(--right-w); }
#app:not(.right-open) { --rw: 0px; }

.sidebar {
  position: relative;
  min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel), var(--bg));
  border-right: 1px solid var(--line);
  transition: opacity var(--t-med) var(--ease), transform var(--t-slow) var(--ease);
}
#right-sidebar { border-right: 0; border-left: 1px solid var(--line); }
#app:not(.left-open)  #left-sidebar  { opacity: 0; transform: translateX(-24px); pointer-events: none; border-right-color: transparent; }
#app:not(.right-open) #right-sidebar { opacity: 0; transform: translateX(24px);  pointer-events: none; border-left-color: transparent; }

/* Fixed inner width so the content never reflows during the slide. */
#left-sidebar  > * { min-width: var(--left-w); }
#right-sidebar > * { min-width: var(--right-w); }

.sidebar-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 12px;
}

/* ---------------------------------------------------------------- tabs --- */
.tabs {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: stretch; gap: 2px;
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.16);
}
.tab {
  position: relative;
  padding: 9px 12px 11px;
  font-size: 12.5px; font-weight: 650; letter-spacing: .02em;
  color: var(--muted);
  border-radius: 8px 8px 0 0;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.tab:hover { color: var(--text-dim); background: rgba(255,236,205,.04); }
.tab.active { color: var(--gold-soft); }
.tab-badge {
  font-family: var(--font-num); font-size: 10px; font-weight: 700;
  background: var(--panel-3); color: var(--text-dim);
  padding: 1px 6px; border-radius: 999px;
}
.tab.active .tab-badge { background: var(--gold-deep); color: #fff; }
.tab-underline {
  position: absolute; bottom: -1px; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
  border-radius: 2px 2px 0 0;
  transition: transform var(--t-med) var(--ease), width var(--t-med) var(--ease);
  width: 0; transform: translateX(0);
  box-shadow: 0 0 12px rgba(240,178,63,.5);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: panelIn var(--t-med) var(--ease); }

/* ------------------------------------------------------- sidebar toggles -- */
.sidebar-toggle {
  position: absolute; top: 50%; z-index: 30;
  width: 20px; height: 74px;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.sidebar-toggle:hover { background: var(--panel-3); color: var(--gold); width: 24px; }
/* The toggles sit on the inner edge of each sidebar. They are absolutely
   positioned (so they are outside grid flow) and track the same width
   variables the grid animates, which keeps them glued to the edge. */
.sidebar-toggle.left  { left: var(--lw);  border-radius: 0 10px 10px 0; border-left: 0; }
.sidebar-toggle.right { right: var(--rw); border-radius: 10px 0 0 10px; border-right: 0; }
.sidebar-toggle { transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                              width var(--t-fast) var(--ease),
                              left var(--t-slow) var(--ease), right var(--t-slow) var(--ease); }
.chev { font-size: 17px; line-height: 1; transition: transform var(--t-med) var(--ease); }
#app:not(.left-open)  #left-toggle  .chev { transform: rotate(180deg); }
#app:not(.right-open) #right-toggle .chev { transform: rotate(180deg); }
/* -------------------------------------------------------- centre column -- */
#pie-area {
  grid-column: 2;
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 34px 18px;
  /* Vertical scrolling exists only for genuine content overflow on short
     viewports. Crumbs and floating numbers must never contribute to it -- see
     the clip on .pie-stage in components.css. `contain` stops a stray wheel
     event over the play area from scrolling the page behind it. */
  overflow: hidden auto;
  overscroll-behavior: contain;
  position: relative;
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1500px) {
  :root { --left-w: 292px; --right-w: 352px; }
}
@media (max-width: 1320px) {
  :root { --left-w: 268px; --right-w: 322px; --topbar-h: 60px; }
  .tb-stat { min-width: 82px; padding: 4px 9px; }
  .currency-value { font-size: calc(22px * var(--ui-scale)); }
}
@media (max-width: 1120px) {
  .topbar-stats .tb-universe { display: none; }
  #pie-area { padding: 10px 16px 14px; }
}

/* Below this the sidebars float over the pie instead of squeezing it. */
@media (max-width: 940px) {
  #main { grid-template-columns: 0 minmax(0,1fr) 0; }
  .sidebar {
    position: absolute; top: 0; bottom: 0; z-index: 35;
    width: min(88vw, 360px);
    box-shadow: var(--shadow-3);
  }
  #left-sidebar  { left: 0; }
  #right-sidebar { right: 0; }
  #left-sidebar  > *, #right-sidebar > * { min-width: 0; }
  #app:not(.left-open)  #left-sidebar  { transform: translateX(-100%); }
  #app:not(.right-open) #right-sidebar { transform: translateX(100%); }
  #app.left-open  #left-sidebar,
  #app.right-open #right-sidebar { transform: none; opacity: 1; }
  .sidebar-toggle { position: fixed; top: calc(var(--topbar-h) + 12px); transform: none; }
  .sidebar-toggle.left  { left: 0 !important; }
  .sidebar-toggle.right { right: 0 !important; }
  .topbar-stats .tb-stat:not(.tb-temp):not(.tb-shards) { display: none; }
}

@media (max-width: 620px) {
  #topbar { gap: 10px; padding: 0 10px; }
  .brand-text { display: none; }
  .topbar-stats { display: none; }
  .currency-value { font-size: calc(20px * var(--ui-scale)); }
}

/* Short viewports: keep the pie visible by trimming vertical padding. */
@media (max-height: 780px) {
  #pie-area { padding-top: 8px; }
}