/* ============================ TOKENS AND RESET ============================
   Everything else depends on these: the palette, --tile, --pad-r, the fonts,
   and the handful of element resets. Nothing here draws anything.

   ORDER MATTERS. This is file 1 of 10 and the cascade is the order
   pages/app.html links them in:
     base.css · layout.css · board.css · screens.css · home.css · editor.css · helper.css · panels.css · drill.css · class.css
   Later files override earlier ones on purpose. Moving a rule between files
   without keeping that order is how a Chinese override or a `won` state
   quietly stops applying. */

:root{
  /* THE PAD. Every square on the board -- ground, rock, a building's card --
     shares ONE footprint: the tile box with this corner radius. Nothing drawn
     for a square may poke past it, or the grid stops reading as one surface.
     A percentage, so it holds from 34px to 76px. The ground jitters a hair
     either side of it; a rock takes the ground's radius UNCHANGED, lumpiness
     being the face's job and never the silhouette's; a building's card IS it.
     The one exception is the `want` pulse: a building the mission needs scales
     up a little to ask for attention. A brief change of SIZE is fine; a
     different shape is not. */
  --pad-r:18.5%;
  --paper:#f4f5f7; --card:#fff; --ink:#14161a; --ink2:#5c626e; --ink3:#8b909b;
  --line:#e4e7ec; --well:#eef0f4;
  --terracotta:#e0663a; --terra-deep:#b64a24; --terra-tint:#fbe7de;
  --cyan:#24b8d1; --cyan-deep:#0e7f95; --cyan-tint:#dbf3f8;
  --regolith:#f0dccb; --regolith-shade:#e3cdb8; --regolith-lit:#fff7e8;
  --basalt:#6f7480; --go:#1f9d57; --go-deep:#177842;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --serif:'Fraunces','Songti SC','Noto Serif SC',Georgia,serif;   /* headlines only, as on the public site */
  --tile:76px;
}
*{box-sizing:border-box}
/* the logo's lettering (pages/partials/logo.html, and its copies in pages/app.html): Fraunces at its softest */
.logoword{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 144}
html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#stage{position:fixed;inset:0;display:flex;background:var(--paper);transition:background .4s}

/* ---------- BOLTZ's idle motion ----------
   The keyframes his portrait (render.js portraitHTML) moves with, here because
   every page loads base.css: the game, the landing page and the plain pages.
   Each page chooses which parts move; the motion itself lives only here. */
@keyframes breathebot{0%,100%{transform:scaleY(1) scaleX(1)}
  50%{transform:scaleY(.965) scaleX(1.02)}}
@keyframes jig{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
@keyframes nod{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes blink{0%,100%{opacity:1}55%{opacity:.25}}
@keyframes eyelife{
  0%,26%{transform:none}
  29%{transform:scaleY(.08)}
  32%,44%{transform:none}
  48%,58%{transform:translateX(2.2px)}
  64%,74%{transform:translateX(-2.2px)}
  80%{transform:none}
  83%{transform:scaleY(.08)}
  86%,100%{transform:none}}
@keyframes hglow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 4px #24b8d1)}}
@keyframes hubbob{0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-7px) rotate(-1.2deg)}}
@keyframes hperk{0%{transform:none}40%{transform:translateY(-6px) scale(1.04,.97)}100%{transform:none}}
@keyframes hubhop{0%{transform:translateY(0) scale(1,1) rotate(0deg)}
  22%{transform:translateY(4px) scale(1.09,.9) rotate(0deg)}
  52%{transform:translateY(-30px) scale(.94,1.09) rotate(7deg)}
  78%{transform:translateY(2px) scale(1.06,.94) rotate(-3deg)}
  100%{transform:translateY(0) scale(1,1) rotate(0deg)}}
@keyframes dbump{0%,100%{translate:0}35%{translate:5px}70%{translate:-2px}}

/* the lock (render.js LOCK): drawn in the text colour, sized by where it sits */
.lk{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* scrollbars, one look on every page: a thin warm thumb, no track. The standard
   properties serve Chrome and Firefox; the ::-webkit ones serve Safari */
*{scrollbar-width:thin;scrollbar-color:rgba(120,80,55,.3) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{border:2.5px solid transparent;border-radius:99px;background:rgba(120,80,55,.3) padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(120,80,55,.5)}