/* Kolonna — standalone build. Fonts come from fonts/fonts.css (Google Fonts or local copies, see scripts/fetch-fonts.sh). */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:14px;line-height:1.4}
/* Layout: one portrait screen on a felt game table. Shop: your column as rows, shop + buttons under the thumb.
   Battle: enemy column above the clash line, yours below, fronts meet in the middle. */
:root{
  --felt:#163634; --felt-2:#1e4643; --felt-3:#285652; --shade:rgba(0,0,0,.22); --line:rgba(239,230,210,.2);
  --bone:#efe6d2; --ink:#1a2422; --muted:#a4bab4;
  --brass:#dcaa48; --you:#5b97e6; --foe:#dc5e4c; --heal:#86cf7e;
  /* race tints: chip fill on tokens, text on felt */
  --r-u:#ddd2ee; --r-e:#f6dabb; --r-b:#d5e6c6;
  --t-u:#c6aaf0; --t-e:#f3ab6c; --t-b:#a5d890;
  --display:'Unbounded','Arial Black',system-ui,sans-serif;
  --body:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{height:100%;box-sizing:border-box}
body{height:100%;margin:0;overflow:hidden;color:var(--bone);font-family:var(--body);
  background:radial-gradient(120% 80% at 50% 45%,var(--felt-2),var(--felt) 72%) var(--felt);
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#app{height:100%;max-width:460px;margin:0 auto;padding-inline:16px;display:flex;flex-direction:column;position:relative}
.view{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding-block:10px 12px}

/* HUD */
.hud{display:flex;align-items:center;gap:14px}
.stat{display:flex;align-items:center;gap:5px;font-family:var(--display);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.stat .g{font-style:normal;font-size:14px}
.stat.lives .g{color:var(--foe)} .stat.wins .g{color:var(--brass)}
.stat.gold{margin-left:auto;background:var(--shade);padding:6px 10px 6px 8px;border-radius:99px}
.coin{width:14px;height:14px;border-radius:50%;background:var(--brass);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.kick{font-family:var(--display);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Race labels & run-wide bonuses */
.race{font-family:var(--display);font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-left:7px;vertical-align:1px}
.r-u.race,.chip.r-u{color:var(--t-u)} .r-e.race,.chip.r-e{color:var(--t-e)} .r-b.race,.chip.r-b{color:var(--t-b)}
.chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--shade);font-variant-numeric:tabular-nums}

/* Token */
.tok{--ring:var(--you);position:relative;width:var(--u);height:var(--u);flex:none;border-radius:50%;background:var(--bone);
  display:grid;place-items:center;box-shadow:0 0 0 3px var(--ring),0 4px 0 3px rgba(0,0,0,.3)}
.tok.r-u{background:var(--r-u)} .tok.r-e{background:var(--r-e)} .tok.r-b{background:var(--r-b)}
.tok.foe{--ring:var(--foe)}
.tok.shield{box-shadow:0 0 0 3px var(--ring),0 0 0 6px var(--heal),0 4px 0 6px rgba(0,0,0,.3)}
.tok.reborn{outline:2px dashed var(--t-u);outline-offset:6px}
.tok .em{font-size:calc(var(--u)*.54);line-height:1}
.tok .a,.tok .h{position:absolute;bottom:-7px;min-width:21px;height:21px;padding:0 4px;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:11px;font-variant-numeric:tabular-nums}
.tok .a{left:-7px;background:var(--brass);color:var(--ink);border-radius:6px}
.tok .h{right:-7px;background:var(--foe);color:var(--bone);border-radius:11px}
.tok .it{position:absolute;top:-6px;right:-8px;width:22px;height:22px;display:grid;place-items:center;font-size:13px;border-radius:7px;background:var(--felt-3);box-shadow:0 0 0 1.5px var(--brass)}
.tok .lvb{position:absolute;top:-6px;left:-8px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
  background:var(--ink);color:var(--brass);font-family:var(--display);font-weight:900;font-size:10px;box-shadow:0 0 0 1.5px var(--brass)}
.pips{position:absolute;top:-8px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:2px 4px;border-radius:99px;background:var(--ink)}
.pips i{width:6px;height:6px;border-radius:50%;background:var(--line)} .pips i.on{background:var(--brass)}

/* Shop view: board */
#shopView{--u:clamp(40px,calc((100dvh - 370px) / 5.6),54px)}
.lane{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:20px}
.board{flex:1;min-height:0;display:flex;flex-direction:column;gap:7px;overflow-y:auto;padding:4px 2px}
.slot{display:grid;grid-template-columns:14px var(--u) 1fr;align-items:center;gap:14px;width:100%;text-align:left;
  padding:6px 12px 8px 10px;border-radius:16px;background:var(--shade);border:1.5px dashed transparent;min-height:calc(var(--u) + 14px)}
.slot .num{font-family:var(--display);font-size:11px;font-weight:700;color:var(--muted)}
.slot:first-child .num{color:var(--brass)}
.slot .ph{width:var(--u);height:var(--u);border-radius:50%;border:2px dashed var(--line)}
.slot .txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.slot .nm{font-weight:600;font-size:14px}
.slot .lv{font-family:var(--display);font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--brass);margin-left:7px;vertical-align:1px}
.slot .ab{font-size:12px;line-height:1.3;color:var(--muted)}
.slot.target{border-color:var(--brass);background:rgba(220,170,72,.09)}
.slot.sel{border-style:solid;border-color:var(--bone)}
.slot.sel .tok{transform:scale(1.06)}

/* Detail strip */
.detail{display:flex;align-items:center;gap:12px;min-height:62px;padding:9px 12px;border-radius:14px;background:var(--shade)}
.detail .dt{flex:1;min-width:0;font-size:13px;line-height:1.38;color:var(--muted)}
.detail .dt b{color:var(--bone);font-weight:600}
.detail .btn{padding:11px 13px;flex:none}

/* Market */
.market{display:flex;flex-direction:column;gap:10px;padding:10px 12px 12px;border-radius:18px;background:var(--felt-3);box-shadow:inset 0 1px 0 var(--line)}
.market{--u:46px}
.wares{display:flex;align-items:flex-end;gap:8px}
.wares .sep{width:1px;align-self:stretch;background:var(--line);margin-inline:2px}
.ware{display:flex;flex-direction:column;align-items:center;gap:11px;padding-top:8px;flex:1;min-width:0;transition:opacity .15s}
.ware .tok{transition:transform .15s}
.ware.sel .tok{transform:translateY(-6px);box-shadow:0 0 0 3px var(--bone),0 8px 0 3px rgba(0,0,0,.3)}
.ware.item .tok{border-radius:14px;--ring:var(--brass)}
.ware.poor{opacity:.45}
.price{display:flex;align-items:center;gap:4px;font-family:var(--display);font-size:11px;font-weight:700;color:var(--brass)}
.price .coin{width:10px;height:10px}
.ware.empty{visibility:hidden}

/* Buttons */
.actions{display:grid;grid-template-columns:1fr 1.5fr;gap:10px}
.btn{display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;font-family:var(--display);font-weight:700;font-size:13px;
  padding:15px 14px;border-radius:14px;background:var(--felt-3);color:var(--bone);box-shadow:0 3px 0 rgba(0,0,0,.3)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.btn.go{background:var(--brass);color:var(--ink)}
.btn.ghost{background:var(--shade);box-shadow:none}
.btn:disabled{opacity:.4;pointer-events:none}
.btn .coin{width:11px;height:11px}

/* Battle view */
#battleView{--u:clamp(30px,calc((100dvh - 215px) / 12.6),58px)}
.bhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.foe-name{font-weight:600;font-size:13px;color:var(--foe);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arena{flex:1;min-height:0;display:grid;grid-template-rows:1fr auto 1fr;overflow:hidden}
.col{display:flex;align-items:center;gap:calc(var(--u) * .3);min-height:0}
.col.e{flex-direction:column-reverse;justify-content:flex-start;padding-bottom:10px}
.col.p{flex-direction:column;justify-content:flex-start;padding-top:12px}
.bu{position:relative}
.bu .lab{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;color:var(--muted)}
.col.p .bu .lab{left:calc(100% + 18px)} .col.e .bu .lab{right:calc(100% + 18px);text-align:right}
.bu.front .lab{color:var(--bone);font-weight:600}
.clash{position:relative;height:58px;display:grid;place-items:center}
.clash::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed var(--line)}
#log{position:relative;max-width:100%;padding:6px 12px;border-radius:99px;background:var(--felt);font-size:12.5px;font-weight:500;text-align:center;line-height:1.3}
#log .p{color:var(--you)} #log .e{color:var(--foe)}
#log.big{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:.02em;padding:8px 18px}
#log .win{color:var(--heal)} #log .loss{color:var(--foe)} #log .draw{color:var(--bone)}
#log small{display:block;font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:0;color:var(--muted)}
.float{position:absolute;left:50%;top:-4px;z-index:3;pointer-events:none;font-family:var(--display);font-weight:900;font-size:16px;
  color:var(--foe);text-shadow:0 2px 0 var(--ink),0 0 6px var(--ink);white-space:nowrap}
.float.buff,.float.blk{color:var(--heal);font-size:13px}
.float.und{color:var(--t-u);font-size:12px}
.bfoot{display:grid;grid-template-columns:1fr 1.5fr;gap:10px}
.bfoot #nextBtn{grid-column:1 / -1}

/* Toast & modal */
#toast{position:absolute;left:16px;right:16px;top:58px;z-index:20;display:flex;justify-content:center;pointer-events:none}
#toast span{padding:9px 14px;border-radius:12px;background:var(--bone);color:var(--ink);font-size:13px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.35)}
#modal{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(8,20,19,.62);backdrop-filter:blur(3px)}
.card{width:100%;max-width:340px;padding:24px 22px 20px;border-radius:22px;background:var(--bone);color:var(--ink);display:flex;flex-direction:column;gap:12px}
.card .kick{color:#6b7c77}
.card h2{margin:0;font-family:var(--display);font-weight:900;font-size:26px;line-height:1.1;text-wrap:balance}
.card p{margin:0;font-size:14px;line-height:1.45}
.card .runs{display:flex;gap:4px;flex-wrap:wrap}
.card .runs i{width:16px;height:16px;border-radius:5px;background:#d9cfb9}
.card .runs i.w{background:var(--heal)} .card .runs i.l{background:var(--foe)} .card .runs i.d{background:#9aa}
.card .btn{margin-top:6px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Standalone: keep clear of notches and home indicator */
#app{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
#toast{top:calc(58px + env(safe-area-inset-top,0px))}
.menu-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--shade);color:var(--muted);font-size:17px;line-height:1}
.card .btn.ghost-ink{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px #c9bea6;margin-top:0}