/* TaskBar Fantasy website v2: the in-game "SoC F3" UI, rebuilt for the web.
   Tokens and parts follow ~/Developer/tbf-design/ui/design-system/SPEC.md.
   Chrome = the client's own 1.5x sprites shown 1:1 (static/ui, built by Music/site-builder/build_static.py).
   Pixel art (heroes, monsters, lanes) is only ever drawn at whole-number scales. */

@font-face { font-family: "Merriweather"; font-weight: 400; font-display: swap; src: url(../fonts/merriweather-regular.woff2) format("woff2"); }
@font-face { font-family: "Merriweather"; font-weight: 700; font-display: swap; src: url(../fonts/merriweather-bold.woff2) format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; src: url(../fonts/chakrapetch-semibold.woff2) format("woff2"); }
@font-face { font-family: "Press Start 2P"; font-weight: 400; font-display: swap; src: url(../fonts/pressstart2p.woff2) format("woff2"); }

:root {
  /* surfaces (SPEC §6) */
  --fill: #33373F; --rec: #272C37; --olive: #3B3220; --gold: #C1B47B; --goldHi: #D8CC98; --key: #46413E;
  --rib: #56586F; --ribHi: #6B6D86; --slab: #3E4152; --page: #DFD9C9; --page2: #EFE9D9;
  --tileE: #D2C6AC; --tileGold: #C8B180; --btn: #575A69; --prim: #627877; --cta: #D2BD89;
  --pill: #3D4051; --disc: #272D35; --check: #4B715C;
  /* inks (SPEC §2.4) */
  --cream: #F0EBD8; --body: #D9D3C0; --dim: #B9B3A2; --faint: #8F8D9C; --number: #E0683E; --danger: #EE8F80;
  --gain: #9FD87A; --parch: #4A4036; --parchDark: #3A3226; --parchMuted: #9C8F72;
  /* the desktop the game floats on */
  --desk: #1D2026; --desk2: #22252C; --taskbar: #1C1C1C;
  --ui: url(../ui/);
  --max: 1240px; --gut: 24px;
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--desk); color: var(--body);
  font: 400 17px/1.65 "Merriweather", Georgia, serif;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
}
img { display: block; max-width: 100%; }
a { color: var(--goldHi); text-decoration: none; }
a:hover { color: var(--cream); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--goldHi); outline-offset: 3px; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- type scale (game x1.5) */
.t-display { font-weight: 700; font-size: 36px; line-height: 1.15; color: var(--cream); }
.t-title { font-weight: 700; font-size: 21px; line-height: 1.3; color: var(--cream); }
.t-label { font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--cream); }
.t-small { font-weight: 700; font-size: 15px; line-height: 1.4; }
.t-dim { color: var(--dim); }
.t-num { font-family: "Chakra Petch", "Merriweather", sans-serif; font-weight: 600; }
h1, h2, h3 { font-weight: 700; color: var(--cream); }
p + p { margin-top: 14px; }

/* ---------------------------------------------------------------- nav: the strip's own slate band */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--rec);
  border-bottom: 1px solid var(--olive);
  box-shadow: inset 0 -3px 0 -2px var(--gold);
}
.nav .container { display: flex; align-items: center; gap: 20px; height: 68px; }
.nav-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-brand .nanuq { height: 34px; width: auto; }
.nav-brand .rule { width: 1px; height: 28px; background: var(--key); }
.nav-brand .mark { height: 20px; width: auto; }
.nav-tabs { display: flex; gap: 8px; margin-left: auto; }
.nav-tabs a { color: var(--cream); }

/* capsule tab (sub-tab 144x24 at 1x): idle slate, active gold field */
.cap-tab {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; min-width: 112px; padding: 0 22px;
  border: 20px solid transparent; border-width: 0 20px;
  border-image: url(../ui/capsule_off_144x24.png) 0 20 fill / 0 20px stretch;
  font-weight: 700; font-size: 17px; color: var(--cream); white-space: nowrap;
}
.cap-tab:hover { color: var(--goldHi); }
.cap-tab.on, .cap-tab[aria-selected="true"] {
  border-image-source: url(../ui/capsule_on_144x24.png); color: var(--parchDark);
}

/* ---------------------------------------------------------------- buttons (capsules, sprite swap) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 49px; padding: 0 30px; min-width: 150px;
  border: 0 solid transparent; border-width: 0 24px;
  border-image: url(../ui/capsule_slate_124x30.png) 0 24 fill / 0 24px stretch;
  font-weight: 700; font-size: 18px; color: var(--cream); white-space: nowrap;
}
.btn:hover { border-image-source: url(../ui/capsule_slate_124x30_hover.png); color: var(--cream); }
.btn:active { transform: scale(.94); }
.btn-prim { border-image-source: url(../ui/capsule_prim_132x30.png); }
.btn-prim:hover { border-image-source: url(../ui/capsule_prim_132x30_hover.png); }
.btn-cta { height: 43px; border-width: 0 21px; border-image: url(../ui/capsule_cta_66x26.png) 0 21 fill / 0 21px stretch; color: var(--parchDark); }
.btn-cta:hover { border-image-source: url(../ui/capsule_cta_66x26_hover.png); color: var(--parchDark); }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---------------------------------------------------------------- windows (panel_frame 9-slice) */
.win {
  position: relative;
  border: 14px solid transparent;
  border-image: url(../ui/panel_frame.png) 60 fill / 60px stretch;
  padding: 58px 18px 18px;
  color: var(--body);
}
.win.no-ribbon { padding-top: 22px; }
/* header ribbon 310x38 at 1x: pointed ends + filigree, centre stretches */
.ribbon {
  position: absolute; left: -8px; right: -8px; top: -6px; height: 57px;
  display: flex; align-items: center; justify-content: center;
  border: 0 solid transparent; border-width: 0 118px;
  border-image: url(../ui/header_hero.png) 0 118 fill / 0 118px stretch;
  padding-bottom: 2px;
}
.ribbon h2, .ribbon h3, .ribbon span { font-weight: 700; font-size: 21px; color: var(--cream); white-space: nowrap; line-height: 1; }
.ribbon .close {
  position: absolute; right: -104px; top: 9px; width: 40px; height: 39px;
  background: url(../ui/disc26_close.png) no-repeat; display: none;
}

/* recessed box (desc_box / chance_slab, 9-slice 3) */
.plate {
  border: 5px solid transparent;
  border-image: url(../ui/desc_box.png) 5 fill / 5px stretch;
  padding: 14px 18px;
}
/* cream page (stash_page) */
.page {
  border: 9px solid transparent;
  border-image: url(../ui/stash_page.png) 9 fill / 9px stretch;
  padding: 14px; color: var(--parch);
}
.page h3, .page .t-label { color: var(--parch); }
/* tooltip card */
.tip {
  border: 14px solid transparent;
  border-image: url(../ui/tip_card_240x180.png) 18 fill / 18px stretch;
  padding: 6px 8px;
}

/* cells (36 at 1x; art 32 at a whole multiple inside) */
.cell {
  position: relative; display: inline-grid; place-items: center;
  width: 72px; height: 72px;
  border: 12px solid transparent;
  border-image: url(../ui/cell_empty.png) 12 fill / 12px stretch;
}
.cell.filled { border-image-source: url(../ui/cell_filled.png); }
.cell img { width: 64px; height: 64px; margin: -12px; image-rendering: pixelated; }

/* diamond tabs (28 at 1x) */
.dtabs { display: flex; gap: 6px; align-items: center; }
.dtab {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: url(../ui/tab_diamond_idle.png) center / 42px 42px no-repeat;
  font-weight: 700; font-size: 16px; color: var(--cream);
}
.dtab:hover { background-image: url(../ui/tab_diamond_idle_hover.png); }
.dtab[aria-selected="true"] { background-image: url(../ui/tab_diamond_on.png); color: var(--parchDark); }

/* level shield / count pill */
.shield {
  display: inline-grid; place-items: center; min-width: 33px; height: 24px; padding: 0 6px;
  border: 4px solid transparent; border-image: url(../ui/level_shield.png) 4 fill / 4px stretch;
  font-weight: 700; font-size: 13px; color: var(--cream); line-height: 1;
}

/* Adventure Log: ribbon header + alternating row plates */
.log { border-radius: 0; }
.log-head {
  height: 30px; display: flex; align-items: center; justify-content: center;
  border: 0 solid transparent; border-width: 0 90px;
  border-image: url(../ui/log_header_ribbon.png) 0 90 fill / 0 90px stretch;
  font-weight: 700; font-size: 15px; color: var(--cream);
}
.log-row {
  display: flex; gap: 12px; align-items: baseline; padding: 9px 16px;
  background: url(../ui/log_row_even.png) center / 100% 100%;
  color: #E6E0CE; font-size: 16px; line-height: 1.5;
}
.log-row:nth-child(odd) { background-image: url(../ui/log_row_odd.png); }
.log-row .when { font-family: "Chakra Petch", sans-serif; font-weight: 600; color: var(--faint); font-size: 14px; flex-shrink: 0; }
.log-row b { color: #E2C26B; font-weight: 700; }

/* ---------------------------------------------------------------- sections */
.sec { padding: 72px 0; }
.sec-tight { padding: 48px 0; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.sec-head .t-display { max-width: 760px; }
.eyebrow { font-weight: 700; font-size: 15px; color: var(--gold); margin-bottom: 10px; }
.lede { font-size: 19px; color: var(--body); max-width: 680px; }

/* ---------------------------------------------------------------- lane strip (canvas, pixel art) */
.lane { position: relative; width: 100%; overflow: hidden; }
.lane canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.taskbar {
  height: 44px; background: var(--taskbar); border-top: 1px solid #2c2c2c;
  display: flex; align-items: center; gap: 6px; padding: 0 14px; color: #bdbdbd; font: 600 13px/1 "Chakra Petch", sans-serif;
}
.taskbar .tb-app { width: 34px; height: 34px; border-radius: 4px; display: grid; place-items: center; }
.taskbar .tb-app i { width: 16px; height: 16px; border-radius: 3px; background: #3a3a3a; display: block; }
.taskbar .tb-app.on { background: #2b2b2b; box-shadow: inset 0 -2px 0 var(--goldHi); }
.taskbar .tb-app img { width: 32px; height: 32px; image-rendering: pixelated; }
.taskbar .tb-tray { margin-left: auto; display: flex; gap: 14px; align-items: center; color: #9a9a9a; }

/* ---------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--olive); box-shadow: inset 0 2px 0 -1px var(--gold); background: var(--rec); padding: 34px 0 40px; }
.foot .container { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.foot img { height: 56px; width: auto; }
.foot .fine { color: var(--faint); font-size: 14px; }
.foot nav { margin-left: auto; display: flex; gap: 18px; font-weight: 700; font-size: 15px; }

/* ---------------------------------------------------------------- utilities */
.grid { display: grid; gap: 24px; }
.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hide { display: none !important; }

@media (max-width: 900px) {
  :root { --gut: 16px; }
  body { font-size: 16px; }
  .t-display { font-size: 28px; }
  .lede { font-size: 17px; }
  .sec { padding: 52px 0; }
  .nav .container { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .nav-brand .mark { display: none; }
  .nav-brand .rule { display: none; }
  .nav-tabs { margin-left: 0; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .cap-tab { min-width: 0; font-size: 15px; padding: 0 4px; }
  .nav-tabs { gap: 6px; }
  .win { padding: 54px 10px 12px; border-width: 10px; border-image-width: 44px; }
  .ribbon { border-width: 0 90px; border-image-width: 0 90px; }
  .ribbon h2, .ribbon h3, .ribbon span { font-size: 18px; }
  .btn { height: 44px; min-width: 0; padding: 0 18px; font-size: 16px; }
  .foot nav { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}