/* ==========================================================================
   Steering (ui/steer.js; docs/progression.md "Steering (2026-10-24)")            owner: steering
   The card's switch, the Roll button and the touch stick. The art bible's tokens: paper, ink outlines, hard drops.
   ========================================================================== */

/* ---------- the card: "Steer your fighter" over each step's button (the whole row is the switch) ---------- */
.st-pick{
  all:unset;box-sizing:border-box;flex:none;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 8px 6px 14px;cursor:pointer;
  border-radius:14px;background:rgba(255,253,246,.72);border:2.5px solid rgba(42,26,46,.16);box-shadow:inset 0 2px 0 rgba(255,255,255,.8);
  transition:background-color var(--dur-hover) var(--out);
}
.st-pick-tx{flex:1;min-width:0;display:grid;gap:2px}
.st-pick-tx b{font:400 var(--t-name-s)/1.1 var(--f-display);color:var(--ink)}
.st-pick-tx small{font:var(--w-strong) var(--t-caption)/1.25 var(--f-ui);color:var(--ink-3);text-wrap:pretty}
.st-pick .sw-track{flex:none;width:56px;height:32px}
.st-pick .sw-knob{width:20px;height:20px}
.st-pick[aria-checked="true"] .sw-track{background:linear-gradient(180deg,#c6ec8c 0%,#7fbe48 60%,#4c8a2c 100%)}
.st-pick[aria-checked="true"] .sw-knob{transform:translateX(24px)}
.st-pick[aria-checked="true"] .st-pick-tx small{color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){ .st-pick:hover{background:rgba(255,253,246,.95)} }
.st-pick:active .sw-track{transform:translateY(1px)}
.st-pick:focus-visible,html.kbd-nav .st-pick:focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.bl .st-pick{margin-top:-4px}
@media (max-height:800px) and (min-width:721px) and (min-aspect-ratio:8001/10000){ .st-pick{min-height:42px;padding-block:4px} }
@media (max-width:720px){ .st-pick{min-height:44px;padding:4px 6px 4px 12px} }

/* ---------- the Roll button ----------
   With keys: a round paper sticker in the bottom middle with its key under it. On a touch screen: bigger, over the
   bottom right, above the favor bar and the chips, for the right thumb. The cooldown is a dark sweep that clears
   clockwise (the power chips' look); the icon dims under it; a pop when the roll is back; pressed, it sinks. */
.st-roll{
  all:unset;box-sizing:border-box;position:fixed;z-index:var(--z-nav);left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 34px);
  width:60px;height:60px;margin-left:-30px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:var(--line) solid var(--ink);background:var(--g-paper);box-shadow:var(--lip),var(--drop-s);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  transition:transform var(--dur-release) var(--pop),box-shadow var(--dur-release) var(--pop);
}
.st-roll .ic{position:relative;width:38px;height:38px;transition:opacity .12s var(--out)}
.st-roll .cd{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(transparent 0 var(--a,360deg),rgba(42,26,46,.5) var(--a,360deg) 360deg);
}
.st-roll.wait .ic{opacity:.55}
.st-roll kbd{position:absolute;left:50%;top:100%;transform:translate(-50%,7px);pointer-events:none}
.st-roll:active,.st-roll.press{transform:translateY(3px);box-shadow:var(--lip),0 1px 0 var(--ink);transition-duration:var(--dur-press);transition-timing-function:var(--out)}
.st-roll.ready{animation:chip-ready .3s var(--pop)}
.st-roll:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.st-roll.touch{
  left:auto;right:max(18px,env(safe-area-inset-right,0px));margin-left:0;bottom:calc(env(safe-area-inset-bottom,0px) + 140px);
  width:78px;height:78px;
}
.st-roll.touch .ic{width:46px;height:46px}
.st-roll.touch kbd{display:none}
@media (min-width:601px){ .st-roll.touch{bottom:calc(env(safe-area-inset-bottom,0px) + 112px)} }

/* ---------- the touch stick ----------
   The zone is the fight's lower left, over the upgrade chips (the stick's corner in a fight); the stick shows only
   while a thumb is down: a soft ring where it landed and a paper knob under the thumb. */
.st-zone{
  position:fixed;z-index:calc(var(--z-hud-over) + 1);left:0;width:56vw;top:36dvh;bottom:calc(env(safe-area-inset-bottom,0px) + 74px);
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
@media (min-width:601px){ .st-zone{width:44vw;bottom:calc(env(safe-area-inset-bottom,0px) + 96px)} }
.st-stick{
  position:fixed;left:0;top:0;width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:50%;pointer-events:none;
  border:3px solid rgba(42,26,46,.42);background:rgba(255,246,228,.22);box-shadow:inset 0 0 0 6px rgba(255,255,255,.14);
  opacity:0;transition:opacity .12s var(--out);
}
.st-knob{
  position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  border:3px solid var(--ink);background:var(--g-paper);box-shadow:var(--lip),0 3px 0 var(--ink);
}
.st-zone.down .st-stick{opacity:1;transition-duration:.06s}

/* ---------- a god's Call button (ui/hud.js) makes room: with keys it stands over the Roll button; on a touch screen it
   joins it on the right, above it, out of the stick's corner (and over the stick's zone, which reaches under its left
   end). While you steer it stays between calls as a chip: the next god's seal in a ring that fills with their favor
   (the god rings' look, their dark track), and its key; it grows into the button when the god is ready ---------- */
body.st-on .hud-call{bottom:calc(env(safe-area-inset-bottom,0px) + 128px)}
body.st-touch .hud-call{left:auto;right:max(16px,env(safe-area-inset-right,0px));transform:none;bottom:calc(env(safe-area-inset-bottom,0px) + 232px);z-index:calc(var(--z-hud-over) + 2)}
body.st-touch .hud-call:active{transform:scale(.97)}
body.st-touch .hud-call.in{animation:hc-breathe 1.6s ease-in-out infinite}
@media (min-width:601px){ body.st-touch .hud-call{bottom:calc(env(safe-area-inset-bottom,0px) + 204px)} }
.hud-call.charge{gap:7px;padding:4px 10px 4px 4px;animation:none;box-shadow:var(--lip),var(--drop-s)}
.hud-call.charge .hc-t{display:none}
.hud-call.charge .hc-ic{background:radial-gradient(circle,color-mix(in srgb,var(--gc) 30%,#fff) 0 56%,transparent 57%),conic-gradient(var(--gc) calc(var(--f,0) * 360deg),#4b3045 0)}
.hud-call.charge .hc-ic .ic{width:20px;height:20px}
.hud-call.charge kbd{opacity:.65}
@media (hover:none){ .hud-call.charge{padding:4px} }
.hud-call.nudge{animation:st-call-nudge .3s ease}
@keyframes st-call-nudge{25%{translate:-3px 0}75%{translate:3px 0}}

@media (prefers-reduced-motion:reduce){
  .st-roll,.st-pick{transition:none}
  .st-roll.ready,body.st-touch .hud-call.in,.hud-call.nudge{animation:none}
}
.shot :is(.st-roll,.st-zone){display:none}