/* ---------- rules ---------- */
.ramp{font-weight:700;white-space:pre}
.rules{list-style:none;padding:0;max-width:60ch}
.rules li{position:relative;padding-left:3ch}
.rules li::before{content:var(--k8,"@") var(--k8,"@");position:absolute;left:0;font-weight:700;color:var(--hot)}
.rules li + li{margin-top:var(--r)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

[hidden]{display:none !important}
/* new components */
.badge{padding:0 1ch;text-transform:uppercase;font-weight:700;background:var(--ink);color:var(--bg);white-space:nowrap}
.b-ok{background:var(--ok)}.b-warn{background:var(--warn)}
.b-hot{background:var(--hot);box-shadow:-2px 0 0 var(--violet),2px 0 0 var(--deep)}
.b-out{background:none;color:var(--ink);padding:0}
.b-out::before{content:"[";color:var(--muted)}.b-out::after{content:"]";color:var(--muted)}
.alert{--frame-color:var(--warn);max-width:50ch}
.alert .card::before{content:var(--h)}
.alert .bar-title{background:var(--warn);box-shadow:-2px 0 0 var(--violet),2px 0 0 var(--hot)}
/* info is violet: cyan is focus and nothing else */
.alert.info{--frame-color:var(--violet)}
.alert.info .bar-title{background:var(--violet)}
.body::before,.body::after{color:var(--frame-color,inherit)}
.field select{
  font:inherit;color:var(--ink);background:none;border:0;border-radius:0;outline:0;appearance:none;-webkit-appearance:none;
  padding:0;margin:0;flex:1;min-width:0;height:var(--r);cursor:pointer;
}
.field select option{background:var(--bg);color:var(--ink)}
.skel{color:var(--muted);font-weight:700;white-space:pre;overflow:hidden}
.skel .f{opacity:.5}   /* the frame is a hint of a card, not a card */

/* blocks */
.or{color:var(--muted);text-align:center;white-space:pre;overflow:hidden}
.card .group + .group,.card .group + .row{margin-top:var(--r)}
.card .row.full .btn{flex:1}
.card .row.full .btn .mid{display:flex;justify-content:space-between}
.kpi{max-width:50ch}
.kpis{display:grid;gap:var(--r)}
.spark{font-weight:700;color:var(--hot);white-space:pre}
.tablewrap{overflow-x:auto;max-width:100%}
.tbl{border-collapse:collapse;white-space:nowrap;min-width:100%}
.tbl th{text-align:left;background:var(--ink);color:var(--bg);text-transform:uppercase;padding:0 1ch;font-weight:700}
.tbl td{padding:12px 1ch}
.tbl tbody tr{cursor:pointer;outline:0}
.tbl tbody tr:nth-child(even){background:color-mix(in srgb,var(--ink) 7%,transparent)}
.tbl tbody tr[aria-selected="true"]{background:var(--hot);color:var(--bg)}
.tbl tbody tr[aria-selected="true"] .badge{background:var(--bg);color:var(--ink);box-shadow:none}
.tbl tbody tr:focus-visible{box-shadow:inset 1ch 0 0 var(--accent)}
/* At 390px four columns needed 42 characters in a 36 character box and the
   last one showed a single digit. Under 480px the duration rides in the status
   cell, on the row under the badge, and its own column steps out, so the table
   fits without scrolling. */
.tbl .dur{display:none}
@media (max-width:479px){
  .tbl .dur{display:block}
  .tbl th:nth-child(4),.tbl td:nth-child(4){display:none}
}
.price{font-weight:700}
.price small{font:inherit;font-weight:500;color:var(--muted)}
.feat{list-style:none;padding:0;margin:var(--r) 0 0}
.feat li{position:relative;padding-left:2ch;color:var(--muted)}
.feat li::before{content:"+";position:absolute;left:0;color:var(--ok);font-weight:700}
.popular{position:absolute;top:0;right:2ch;z-index:1}

/* charts */
.chart{font-size:12px;line-height:14px;font-weight:700;white-space:pre;overflow:hidden;cursor:crosshair;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.status{min-height:var(--r)}

/* invaders */
#inv{display:block;width:100%;touch-action:pan-y;cursor:crosshair;outline:0}
#inv:focus-visible{box-shadow:0 0 0 2px var(--accent)}


/* overlays */
#sand{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:55}
#rebuild{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--r)*3 + env(safe-area-inset-bottom,0px));z-index:72;background:var(--bg)}
#rebuild[hidden]{display:none}
.toast{z-index:70}
.hud{
  position:fixed;right:2ch;bottom:calc(4px + env(safe-area-inset-bottom,0px));z-index:45;pointer-events:none;
  font-size:11px;line-height:14px;font-weight:700;color:var(--muted);text-align:right;white-space:pre;
}
.hud{background:var(--bg);padding:0 1ch}
.hud b{color:var(--hot)}
.calm .hud,.calm .track{display:none}
.track{
  position:fixed;left:0;right:0;top:-90px;height:64px;z-index:46;pointer-events:none;
  -webkit-backdrop-filter:brightness(1.2) hue-rotate(18deg) saturate(1.5);
  backdrop-filter:brightness(1.2) hue-rotate(18deg) saturate(1.5);
  background:repeating-linear-gradient(to bottom,transparent 0 5px,color-mix(in srgb,var(--ink) 10%,transparent) 5px 6px);
}
.track.run{animation:roll 2.6s steps(32) 1}
@keyframes roll{from{top:-90px}to{top:110vh}}
/* the loader. index.html paints it before anything else (and drops it at once for a
   return visit or reduced motion), boot() in js/20 fills it. If the scripts never
   arrive, bootsafe hides it after 6s so the page is not held hostage. */
#boot{
  position:fixed;inset:0;z-index:200;margin:0;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--r) + env(safe-area-inset-top,0px)) 2ch calc(var(--r) + env(safe-area-inset-bottom,0px));
  background:radial-gradient(64% 46% at 62% 44%,color-mix(in srgb,var(--hot) 16%,transparent),transparent),var(--bg);
  color:var(--ink);font-weight:700;overflow:hidden;cursor:pointer;
  animation:bootsafe 0s 6s forwards;
}
#boot.out{animation:bootout .15s steps(3) both}
#boot .bin{width:min(80ch,100%);white-space:pre}
/* the same bitmap title as the section posters, fitted to the column. The height is
   a guess until boot() measures, rounded to whole rows so nothing jumps */
#boot .bt{
  font-size:6px;line-height:5px;overflow:hidden;
  height:calc(var(--r)*3);height:round(up,min(calc(min(80ch,100vw - 4ch)/94*18.2),131px),var(--r));
}
#boot .bt .tr{display:block}
#boot .c0{color:var(--t0)}#boot .c1{color:var(--t1)}#boot .c2{color:var(--t2)}#boot .c3{color:var(--t3)}
#boot .bs{display:flex;height:var(--r);overflow:hidden;margin:var(--r) 0}
#boot .bs b{flex:1;overflow:hidden;font-weight:700}
#boot .log{height:calc(var(--r)*6);overflow:hidden}
#boot .log .ok{color:var(--ok)}#boot .log .warn{color:var(--warn)}#boot .log .hot{color:var(--hot)}
#boot .pb{margin-top:var(--r)}
#boot .skip{margin-top:var(--r);color:var(--muted)}
#boot .strk{position:absolute;left:0;right:0;height:2px;background:var(--hot);opacity:.5;pointer-events:none}
@keyframes bootout{to{clip-path:inset(0 0 100% 0)}}
@keyframes bootsafe{to{visibility:hidden}}
#posterImg{display:block;width:100%;height:auto}
.dest{-webkit-touch-callout:none}

.grid3{display:grid;gap:var(--r);grid-template-columns:1fr}
@media (min-width:860px){.grid3{grid-template-columns:repeat(3,24ch);gap:var(--r) 2ch}.grid3 .lift{max-width:24ch}}
.hint{color:var(--muted)}
kbd{font:inherit;font-weight:700;color:var(--ink)}
kbd::before{content:"["}kbd::after{content:"]"}