/* ==========================================================================
   Tokens and base                                             owner: P0-1
   Stylesheets load in this order (index.html): base, hud, hint, kit, shot, frontend, lives, draft.
   Each owner keeps its own @media rules at the end of its own file.
   The tokens are the art bible's (section 14): KayKit-friendly, chunky rounded type, thick ink outlines,
   sticker panels with hard offset shadows, buttons filled with the palette's three-stop gradients.
   ========================================================================== */
:root{
  /* ink and paper */
  --ink:#2a1a2e; --ink-2:#5a3f52; --ink-3:#8b6f7c;
  --paper:#fff6e4; --paper-2:#f3ddb4; --paper-3:#e7c58c;
  --sand:#ecd09c; --marble:#fbf6ec; --marble-2:#e6dccb;
  /* team and foe */
  --player:#2f6fe0; --player-hi:#7cadff; --player-lo:#1c47a6;
  --enemy:#c8202c; --enemy-hi:#f4706f; --enemy-lo:#7a1531;
  /* metals, earth and leaves */
  --gold:#eac254; --gold-hi:#f7ed9a; --gold-lo:#db8720;
  --bronze:#d9a548; --bronze-hi:#f0cf86; --bronze-lo:#a86f2a;
  --terracotta:#c8643c; --terracotta-hi:#ee9364; --terracotta-lo:#8c3424;
  --laurel:#6fae3c; --laurel-hi:#b4e07a; --laurel-lo:#3f7a26;
  --imperial:#6b2a6b; --imperial-hi:#a052a0;
  /* rarity (data.js RARITY and TIER_COLOR read these) */
  --r0:#8f6a52; --r1:#b3c0c6; --r2:#3f8ff0; --r3:#f2c94c;
  /* type */
  --f-display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --f-ui:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* shape */
  --line:4px; --line-s:3px;
  --r-panel:18px; --r-btn:14px;
  --drop:0 6px 0 var(--ink);
  --drop-s:0 4px 0 var(--ink);
  --lip:inset 0 3px 0 rgba(255,255,255,.55);
  /* gradients (palette cells: top, mid, bottom) */
  --g-gold:linear-gradient(180deg,#f7ed9a 0%,#eac254 50%,#db8720 100%);
  --g-bronze:linear-gradient(180deg,#f3d896 0%,#d9a548 55%,#b07a2e 100%);
  --g-paper:linear-gradient(180deg,#fffaf0 0%,#fff6e4 55%,#f3e3c2 100%);
  --g-blue:linear-gradient(180deg,#9cc2ff 0%,#4f8bf0 45%,#2556c4 100%);
  --g-red:linear-gradient(180deg,#ff9b8f 0%,#e2414a 45%,#a3182a 100%);
  --g-laurel:linear-gradient(180deg,#c6ec8c 0%,#7fbe48 50%,#4c8a2c 100%);
  --g-terracotta:linear-gradient(180deg,#f2a477 0%,#d2683f 50%,#9c3c26 100%);
  --g-imperial:linear-gradient(180deg,#c578bf 0%,#8a3a86 50%,#5a2058 100%);
  /* motion */
  --pop:cubic-bezier(.2,1.5,.4,1);
  --out:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (max-width:600px){
  :root{ --line:3px; --line-s:2.5px; --drop:0 4px 0 var(--ink); --drop-s:0 3px 0 var(--ink); }
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--sand);color:var(--ink);
  font:var(--w-body) var(--t-lead)/1.4 var(--f-ui);overflow:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;cursor:grab}
#scene:active{cursor:grabbing}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.15em;overflow:visible}

/* ---- P0-1 additions (stone, bronze and gold-leaf tokens, team colours, motion tokens) go below ---- */