/* TAKKAR! on-screen touch controls, built by src/input/input.js inside #touch.
   Two shapes, same hit areas (setTouchOptions({shape})): data-shape="round" is the
   classic mobile-football disc (thumbs read circles instantly), data-shape="cut" is a
   regular octagon with angled clip-path cuts. The TAKKAR! look (brand book, In match)
   stays in everything else: Raat Ink glass, Chalk rims, Barlow Condensed labels, key
   chips with the kick cut, Marigold only for live states (press glow, power ring,
   stick direction, the CURL latch: you and now), and the Rani ball on the shoot
   button. The bottom corners belong to the thumbs.
   While the HUD tells a story (line-ups, goal, replay, half-time panel) the controls
   go backstage: a 0.18 ghost with no captions, still live so a tap skips.
   Every rule is scoped to .hf-touch. Per touch only transform and opacity change;
   the power ring repaints one small SVG while a button charges. */

.hf-touch {
  /* --ts-base comes from the media queries below; JS multiplies it by the size option
     (S/M/L) and writes the result to --ts inline, so the joystick maths matches. */
  --ts-base: 1;
  --ts: var(--ts-base);
  --to: 0.85;                         /* resting opacity (setTouchOptions) */
  --lift: 0px;                        /* tablets hold the controls a little higher */
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --glass: color-mix(in srgb, var(--ink) 50%, transparent);
  --glass-hi: color-mix(in srgb, var(--ink) 64%, transparent);
  --rim: color-mix(in srgb, var(--paper) 58%, transparent);
  --hair: color-mix(in srgb, var(--paper) 13%, transparent);
  --glow: color-mix(in srgb, var(--accent) 60%, transparent);
  --ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --fade: 0.18s;                      /* backstage fade and the resting-opacity changes */
  --ghost: 0.18;                      /* backstage opacity */
  /* A regular octagon (cut shape): 29.29% corner cuts on a square. */
  --oct: polygon(29.29% 0, 70.71% 0, 100% 29.29%, 100% 70.71%, 70.71% 100%, 29.29% 100%, 0 70.71%, 0 29.29%);

  position: fixed;
  inset: 0;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  font-family: var(--font-ui);
  color: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.hf-touch.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}

.hf-touch *,
.hf-touch *::before,
.hf-touch *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------ joystick */

/* Left 45% of the screen below the top strip: the thumb spawns the stick anywhere here. */
.hf-touch .hf-touch__zone {
  position: absolute;
  left: 0;
  top: calc(var(--st) + 64px);
  bottom: 0;
  width: 45%;
  pointer-events: auto;
  touch-action: none;
}

/* Where the idle joystick rests: inside the safe area, bottom-left. JS reads its position. */
.hf-touch .hf-touch__anchor {
  position: absolute;
  left: calc(var(--sl) + 122px * var(--ts));
  bottom: calc(var(--sb) + var(--lift) + 112px * var(--ts));
  width: 0;
  height: 0;
  pointer-events: none;
}

.hf-touch .hf-touch__stick {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(148px * var(--ts));
  height: calc(148px * var(--ts));
  margin: calc(-74px * var(--ts)) 0 0 calc(-74px * var(--ts));
  pointer-events: none;
  will-change: transform;
  opacity: max(var(--to), 0.92);
  transition: opacity 0.12s ease;
}

/* At rest the stick is a quiet hint of where to put the thumb. */
.hf-touch .hf-touch__stick.is-idle {
  opacity: calc(var(--to) * 0.5);
  transition: transform 0.28s var(--ease), opacity var(--fade) var(--ease);
}

/* The base: ink glass with a paper rim and a hairline at the knob's full travel. */
.hf-touch .hf-touch__base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--rim);
  background:
    radial-gradient(closest-side, transparent calc(100% - 15px * var(--ts)), var(--hair) calc(100% - 15px * var(--ts)),
      var(--hair) calc(100% - 14px * var(--ts)), transparent calc(100% - 14px * var(--ts))),
    var(--glass);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
  transition: border-color 0.15s ease;
}

/* The base pops in where the thumb lands. */
.hf-touch .hf-touch__stick.is-active .hf-touch__base {
  border-color: color-mix(in srgb, var(--paper) 85%, transparent);
  animation: hf-touch-pop 0.18s var(--ease);
}

@keyframes hf-touch-pop {
  from { transform: scale(0.82); }
  to { transform: scale(1); }
}

.hf-touch .hf-touch__chev {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-left: calc(5px * var(--ts)) solid transparent;
  border-right: calc(5px * var(--ts)) solid transparent;
  border-bottom: calc(6px * var(--ts)) solid color-mix(in srgb, var(--paper) 50%, transparent);
  transform-origin: 50% 50%;
}

.hf-touch .hf-touch__chev--n { transform: translate(-50%, -50%) rotate(0deg) translateY(calc(-62px * var(--ts))); }
.hf-touch .hf-touch__chev--e { transform: translate(-50%, -50%) rotate(90deg) translateY(calc(-62px * var(--ts))); }
.hf-touch .hf-touch__chev--s { transform: translate(-50%, -50%) rotate(180deg) translateY(calc(-62px * var(--ts))); }
.hf-touch .hf-touch__chev--w { transform: translate(-50%, -50%) rotate(270deg) translateY(calc(-62px * var(--ts))); }

/* Direction arc: a 64 degree accent wedge cut down to the rim. JS sets rotate() and opacity
   on the arc; its clip stays still (the cut shape clips it to an octagonal rim). */
.hf-touch .hf-touch__dirclip {
  position: absolute;
  inset: calc(-5px * var(--ts));
  pointer-events: none;
}

.hf-touch .hf-touch__dir {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -32deg, var(--accent) 0deg 64deg, transparent 64deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 6px * var(--ts)), #000 calc(100% - 6px * var(--ts)));
  mask: radial-gradient(closest-side, transparent calc(100% - 6px * var(--ts)), #000 calc(100% - 6px * var(--ts)));
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.hf-touch .hf-touch__stick.is-idle .hf-touch__dir {
  transition: opacity 0.2s ease;
}

.hf-touch .hf-touch__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(62px * var(--ts));
  height: calc(62px * var(--ts));
  margin: calc(-31px * var(--ts)) 0 0 calc(-31px * var(--ts));
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 0 0 calc(4px * var(--ts)) color-mix(in srgb, var(--ink) 8%, transparent);
  will-change: transform;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

/* The T! on the knob: the Ink drawing for light grounds (Ink T, Rani ball). Never a
   filtered copy of the chalk mark: an inverted Rani ball would turn green. */
.hf-touch .hf-touch__knob::after {
  content: '';
  position: absolute;
  inset: 25%;
  background: var(--logo-mark-ink) center / contain no-repeat;
  opacity: 0.9;
}

/* Recentering: the knob springs home on release. */
.hf-touch .hf-touch__stick.is-idle .hf-touch__knob {
  transition: transform 0.22s var(--ease), background-color 0.2s ease;
}

/* Holding SPRINT: the stick's rim and direction arc run hot in the accent. */
.hf-touch.is-sprint .hf-touch__stick.is-active .hf-touch__base {
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34), 0 0 0 1px var(--accent), 0 0 18px var(--glow);
}

/* Full tilt lights the knob Marigold; the Ink T! stays on it. */
.hf-touch .hf-touch__stick.is-max .hf-touch__knob {
  background: var(--accent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 22px var(--glow);
}

.hf-touch .hf-touch__stick.is-max .hf-touch__knob::after {
  opacity: 1;
}

/* ------------------------------------------------------------ action buttons */

/* Buttons sit on an arc around the bottom-right corner. --x/--y are the button
   centres measured from that corner and --d the diameter, all in unscaled px. */
.hf-touch .hf-touch__pad {
  position: absolute;
  right: var(--sr);
  bottom: calc(var(--sb) + var(--lift));
  width: calc(264px * var(--ts));
  height: calc(264px * var(--ts));
  pointer-events: none;
}

.hf-touch .hf-touch__btn {
  --d: 72;
  --u: calc(var(--d) * var(--ts) * 1px);   /* rendered diameter */
  position: absolute;
  right: calc((var(--x) - var(--d) / 2) * var(--ts) * 1px);
  bottom: calc((var(--y) - var(--d) / 2) * var(--ts) * 1px);
  width: var(--u);
  height: var(--u);
  border-radius: 50%;
  color: var(--paper);
  opacity: var(--to);
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  transition: transform 0.16s var(--ease), opacity var(--fade) var(--ease);
}

/* A forgiving hit area: thumbs land a little outside the drawn circle. */
.hf-touch .hf-touch__btn::before {
  content: '';
  position: absolute;
  inset: calc(-9px * var(--ts));
  border-radius: 50%;
}

/* The disc: ink glass, paper rim, a hairline inner ring for depth. */
.hf-touch .hf-touch__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--rim);
  background:
    radial-gradient(closest-side, transparent calc(100% - 6px), var(--hair) calc(100% - 6px),
      var(--hair) calc(100% - 5px), transparent calc(100% - 5px)),
    var(--glass);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34);
  transition: background-color 0.08s ease, border-color 0.08s ease;
}

/* Press glow: an accent halo just outside the rim (opacity only). */
.hf-touch .hf-touch__btn::after {
  content: '';
  position: absolute;
  inset: calc(-5px * var(--ts));
  border-radius: 50%;
  border: 2.5px solid var(--accent);
  box-shadow: 0 0 22px 2px var(--glow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.hf-touch .hf-touch__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.05);
  padding-top: calc(var(--u) * 0.04);
  pointer-events: none;
}

.hf-touch .hf-touch__ico {
  display: block;
  width: calc(var(--u) * 0.36);
  height: calc(var(--u) * 0.36);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  overflow: visible;
}

.hf-touch .hf-touch__lbl {
  display: block;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(11px, calc(var(--u) * 0.16), 14px);   /* follows the button, never below 11 px */
  line-height: 1;
  letter-spacing: 0.1em;
  padding-left: 0.1em;                /* optically centre the tracked word */
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--fade) var(--ease);
}

/* The key chip (A / B / C): a Chalk square with the kick cut, on the rim at ten-thirty. */
.hf-touch .hf-touch__key {
  position: absolute;
  --k: max(16px, calc(18px * var(--ts)));
  left: 14.6%;
  top: 14.6%;
  width: var(--k);
  height: var(--k);
  margin: calc(var(--k) / -2) 0 0 calc(var(--k) / -2);
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: max(11px, calc(12px * var(--ts)));
  line-height: 1;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
  pointer-events: none;
  transition: opacity var(--fade) var(--ease);
}

/* Pressed: the disc floods paper, the face goes ink, the halo lights. */
.hf-touch .hf-touch__btn.is-down {
  opacity: 1;
  transform: scale(0.92);
  transition: transform 0.06s ease-out, opacity 0.06s ease;
}

.hf-touch .hf-touch__btn.is-down .hf-touch__disc {
  background-color: color-mix(in srgb, var(--paper) 94%, transparent);
  border-color: var(--paper);
}

.hf-touch .hf-touch__btn.is-down .hf-touch__face { color: var(--ink); }
.hf-touch .hf-touch__btn.is-down .hf-touch__key { background: var(--accent); color: var(--on-accent); }
.hf-touch .hf-touch__btn.is-down::after { opacity: 1; transition-duration: 0.06s; }

/* Power ring: the track and the accent sweep sit just outside the rim. */
.hf-touch .hf-touch__ring {
  position: absolute;
  inset: calc(-12px * var(--ts));
  width: calc(100% + 24px * var(--ts));
  height: calc(100% + 24px * var(--ts));
  transform: rotate(-90deg);
  opacity: 0;
  pointer-events: none;
  overflow: visible;
  transition: opacity 0.16s ease;
}

.hf-touch .hf-touch__track,
.hf-touch .hf-touch__fill {
  fill: none;
  stroke-width: 4.5;
}

.hf-touch .hf-touch__track { stroke: color-mix(in srgb, var(--ink) 55%, transparent); }

.hf-touch .hf-touch__fill {
  stroke: var(--accent);
  stroke-linecap: butt;
  filter: drop-shadow(0 0 3px var(--glow));
}

.hf-touch .hf-touch__btn.is-charging .hf-touch__ring { opacity: 1; transition-duration: 0.08s; }
/* The ring takes over from the halo while charging. */
.hf-touch .hf-touch__btn.is-charging::after { opacity: 0; }
/* Past 85% a shot risks going over: the sweep turns paper-hot. */
.hf-touch .hf-touch__btn.is-risk .hf-touch__fill { stroke: var(--paper); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--paper) 80%, transparent)); }
.hf-touch .hf-touch__btn.is-full .hf-touch__ring { animation: hf-touch-full 0.42s ease-in-out infinite alternate; }

@keyframes hf-touch-full {
  from { opacity: 1; }
  to { opacity: 0.55; }
}

/* B SHOOT: the big one in the corner, with a solid rim and a larger face. */
.hf-touch .hf-touch__btn--b { --x: 90; --y: 94; --d: 94; }
.hf-touch .hf-touch__btn--b .hf-touch__disc { border-width: 2.5px; border-color: color-mix(in srgb, var(--paper) 90%, transparent); background-color: var(--glass-hi); }
.hf-touch .hf-touch__btn--b .hf-touch__lbl { font-size: clamp(10.5px, calc(var(--u) * 0.13), 13px); }
/* A PASS: left of B along the bottom. */
.hf-touch .hf-touch__btn--a { --x: 206; --y: 66; --d: 76; }
/* C THRU: above B. */
.hf-touch .hf-touch__btn--c { --x: 68; --y: 208; --d: 72; }
/* SPRINT: on the arc between A and C, one short slide from all three. */
.hf-touch .hf-touch__btn--sprint { --x: 188; --y: 182; --d: 64; }
.hf-touch .hf-touch__btn--sprint .hf-touch__ico { width: calc(var(--u) * 0.32); height: calc(var(--u) * 0.32); }
.hf-touch .hf-touch__btn--sprint .hf-touch__lbl { font-size: clamp(10px, calc(var(--u) * 0.15), 11px); letter-spacing: 0.08em; padding-left: 0.08em; }

/* A latched modifier (CURL at a free kick) stays lit in Marigold. */

/* The shoot button carries the ball: the Rani dot in its goal icon (brand book,
   In match). Keyed on the icon itself (the goal frame path input.js draws for SHOOT),
   so it follows the label through every context. */
.hf-touch .hf-touch__ico path[d^="M1.5 21V3h21v18"] ~ circle {
  fill: var(--rani-pink);
  stroke: var(--rani-pink);
}

.hf-touch .hf-touch__ico path[d^="M1.5 21V3h21v18"] ~ circle + path {
  fill: var(--ink);
}
.hf-touch .hf-touch__btn.is-latched { opacity: 1; }

.hf-touch .hf-touch__btn.is-latched .hf-touch__disc {
  border-color: var(--accent);
  background-color: var(--accent);
}

.hf-touch .hf-touch__btn.is-latched .hf-touch__face { color: var(--on-accent); }
.hf-touch .hf-touch__btn.is-latched::after { opacity: 0.7; }

/* A button with no job right now (C for a keeper with the ball): it dims, the layout stays. */
.hf-touch .hf-touch__btn.is-off {
  opacity: calc(var(--to) * 0.4);
}

.hf-touch .hf-touch__btn.is-off .hf-touch__key { background: color-mix(in srgb, var(--paper) 60%, transparent); }

/* Nothing to do (a stoppage): the cluster steps back but stays pressable to skip a replay. */
.hf-touch.is-quiet .hf-touch__btn:not(.is-down):not(.is-latched) { opacity: calc(var(--to) * 0.55); }
.hf-touch.is-quiet .hf-touch__btn.is-off { opacity: calc(var(--to) * 0.3); }
.hf-touch.is-quiet .hf-touch__stick.is-idle { opacity: calc(var(--to) * 0.3); }

/* ------------------------------------------------------------ backstage */

/* The HUD is telling the story (line-ups fly-over, goal band, replay, half-time panel): the
   stick and buttons fade to a ghost and lose their captions and key chips so the graphic
   reads. Hit areas stay live: a tap on any button still skips. main calls setBackstage();
   the :has() branch catches the same HUD states by itself (and is dropped where :has()
   is unsupported, leaving the class). */
.hf-touch:is(.is-backstage, :root:has(.hf-hud:is(.has-lineups, .has-goal, .is-replay, .has-stats)) *) .hf-touch__btn,
.hf-touch:is(.is-backstage, :root:has(.hf-hud:is(.has-lineups, .has-goal, .is-replay, .has-stats)) *) .hf-touch__stick {
  opacity: var(--ghost);
}

/* A tap still shows it landed. */
.hf-touch:is(.is-backstage, :root:has(.hf-hud:is(.has-lineups, .has-goal, .is-replay, .has-stats)) *) .hf-touch__btn.is-down { opacity: 0.45; }

.hf-touch:is(.is-backstage, :root:has(.hf-hud:is(.has-lineups, .has-goal, .is-replay, .has-stats)) *) .hf-touch__lbl,
.hf-touch:is(.is-backstage, :root:has(.hf-hud:is(.has-lineups, .has-goal, .is-replay, .has-stats)) *) .hf-touch__key {
  opacity: 0;
}

.hf-touch:is(.is-backstage, :root:has(.hf-hud:is(.has-lineups, .has-goal, .is-replay, .has-stats)) *) .hf-touch__pause { opacity: 0.35; }

/* ------------------------------------------------------------ pause */

/* A 48 px hit area around a small cut chip, centred on the top edge between the scorebug and radar. */
.hf-touch .hf-touch__pause {
  position: absolute;
  left: 50%;
  top: calc(var(--st) + 4px);
  width: 48px;
  height: 48px;
  margin-left: -24px;
  display: grid;
  place-items: center;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  opacity: max(0.6, calc(var(--to) * 0.85));
  transition: transform 0.16s var(--ease), opacity var(--fade) var(--ease);
}

.hf-touch .hf-touch__pause-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 32px;
  /* The rim is the chip's own paper layer showing 1.5 px around an ink inner cut,
     so the angled corner gets its edge too (an inset shadow would be clipped off). */
  background: color-mix(in srgb, var(--paper) 50%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 10px) 100%, 0 100%);
}

.hf-touch .hf-touch__pause-chip::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 9.4px) 100%, 0 100%);
  transition: background-color 0.08s ease;
}

.hf-touch .hf-touch__pause i {
  position: relative;
  display: block;
  width: 4px;
  height: 13px;
  background: var(--paper);
}

.hf-touch .hf-touch__pause.is-down {
  opacity: 1;
  transform: scale(0.9);
  transition-duration: 0.06s;
}

.hf-touch .hf-touch__pause.is-down .hf-touch__pause-chip { background: var(--paper); }
.hf-touch .hf-touch__pause.is-down .hf-touch__pause-chip::before { background: var(--paper); }
.hf-touch .hf-touch__pause.is-down i { background: var(--ink); }

/* ------------------------------------------------------------ cut shape */

/* data-shape="cut": every disc becomes a regular octagon, the brand's square corners with
   angled clip-path cuts. A clip-path eats borders and shadows, so each rim is its own
   octagonal ring: one polygon with the inner octagon punched out (evenodd), --rw thick,
   inset by --rw along every edge (the 0.4142 is tan 22.5deg). Hit areas stay round. */
.hf-touch[data-shape="cut"] .hf-touch__disc::before,
.hf-touch[data-shape="cut"] .hf-touch__disc::after,
.hf-touch[data-shape="cut"] .hf-touch__btn::after,
.hf-touch[data-shape="cut"] .hf-touch__base::before,
.hf-touch[data-shape="cut"] .hf-touch__base::after,
.hf-touch[data-shape="cut"] .hf-touch__dirclip {
  clip-path: polygon(evenodd,
    29.29% 0, 70.71% 0, 100% 29.29%, 100% 70.71%, 70.71% 100%, 29.29% 100%, 0 70.71%, 0 29.29%, 29.29% 0,
    calc(29.29% + var(--rw) * 0.4142) var(--rw),
    var(--rw) calc(29.29% + var(--rw) * 0.4142),
    var(--rw) calc(70.71% - var(--rw) * 0.4142),
    calc(29.29% + var(--rw) * 0.4142) calc(100% - var(--rw)),
    calc(70.71% - var(--rw) * 0.4142) calc(100% - var(--rw)),
    calc(100% - var(--rw)) calc(70.71% - var(--rw) * 0.4142),
    calc(100% - var(--rw)) calc(29.29% + var(--rw) * 0.4142),
    calc(70.71% - var(--rw) * 0.4142) var(--rw),
    calc(29.29% + var(--rw) * 0.4142) var(--rw));
}

.hf-touch[data-shape="cut"] .hf-touch__disc,
.hf-touch[data-shape="cut"] .hf-touch__base {
  border: 0;
  border-radius: 0;
  background: var(--glass);
  box-shadow: none;
  clip-path: var(--oct);
}

/* The paper rim. */
.hf-touch[data-shape="cut"] .hf-touch__disc::before,
.hf-touch[data-shape="cut"] .hf-touch__base::before {
  --rw: 2px;
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rim);
  transition: background-color 0.08s ease;
}

/* A hairline inner ring for depth (on the stick it marks the knob's full travel). */
.hf-touch[data-shape="cut"] .hf-touch__disc::after,
.hf-touch[data-shape="cut"] .hf-touch__base::after {
  --rw: 1px;
  content: '';
  position: absolute;
  inset: 5px;
  background: var(--hair);
}

.hf-touch[data-shape="cut"] .hf-touch__base::before { --rw: 1.5px; }
.hf-touch[data-shape="cut"] .hf-touch__base::after { inset: calc(14px * var(--ts)); }
.hf-touch[data-shape="cut"] .hf-touch__stick.is-active .hf-touch__base::before { background: color-mix(in srgb, var(--paper) 85%, transparent); }
.hf-touch[data-shape="cut"].is-sprint .hf-touch__stick.is-active .hf-touch__base { box-shadow: none; }
.hf-touch[data-shape="cut"].is-sprint .hf-touch__stick.is-active .hf-touch__base::before { --rw: 2.5px; background: var(--accent); }

.hf-touch[data-shape="cut"] .hf-touch__knob {
  border-radius: 0;
  box-shadow: none;
  clip-path: var(--oct);
}

.hf-touch[data-shape="cut"] .hf-touch__stick.is-max .hf-touch__knob { box-shadow: none; }

/* The direction arc runs along an octagonal rim; the conic wedge is oversized so its
   corners never show through the clip while it turns. */
.hf-touch[data-shape="cut"] .hf-touch__dirclip { --rw: calc(6px * var(--ts)); }

.hf-touch[data-shape="cut"] .hf-touch__dir {
  inset: -8%;
  border-radius: 0;
  -webkit-mask: none;
  mask: none;
}

/* B: the heavier rim and darker glass. */
.hf-touch[data-shape="cut"] .hf-touch__btn--b .hf-touch__disc { background-color: var(--glass-hi); }
.hf-touch[data-shape="cut"] .hf-touch__btn--b .hf-touch__disc::before { --rw: 2.5px; background: color-mix(in srgb, var(--paper) 90%, transparent); }

/* Pressed: the octagon floods paper; the halo is an accent ring just outside it. */
.hf-touch[data-shape="cut"] .hf-touch__btn.is-down .hf-touch__disc { background-color: color-mix(in srgb, var(--paper) 94%, transparent); }
.hf-touch[data-shape="cut"] .hf-touch__btn.is-down .hf-touch__disc::before { background: var(--paper); }

.hf-touch[data-shape="cut"] .hf-touch__btn::after {
  --rw: 3px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--accent);
}

.hf-touch[data-shape="cut"] .hf-touch__btn.is-latched .hf-touch__disc { background-color: var(--accent); }
.hf-touch[data-shape="cut"] .hf-touch__btn.is-latched .hf-touch__disc::before { background: var(--accent); }

/* The power ring follows the octagon (input.js draws it); mitred corners keep it crisp. */
.hf-touch[data-shape="cut"] .hf-touch__track,
.hf-touch[data-shape="cut"] .hf-touch__fill {
  stroke-linejoin: miter;
}

/* ------------------------------------------------------------ left-handed mirror */

.hf-touch.is-lefty .hf-touch__zone { left: auto; right: 0; }
.hf-touch.is-lefty .hf-touch__anchor { left: auto; right: calc(var(--sr) + 122px * var(--ts)); }
.hf-touch.is-lefty .hf-touch__pad { right: auto; left: var(--sl); }

.hf-touch.is-lefty .hf-touch__btn {
  right: auto;
  left: calc((var(--x) - var(--d) / 2) * var(--ts) * 1px);
}

.hf-touch.is-lefty .hf-touch__key {
  left: 85.4%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 32% 100%, 0 68%);
}

/* ------------------------------------------------------------ sizing */

/* Landscape phones: 390 px tall (iPhone 14/15) and 360 px tall (small Android). SPRINT
   keeps its bolt and drops the word, so every other caption can stay at 10 px. */
@media (max-height: 440px) {
  .hf-touch { --ts-base: 0.88; }
  .hf-touch .hf-touch__btn--sprint .hf-touch__lbl { display: none; }
  .hf-touch .hf-touch__btn--sprint .hf-touch__ico { width: calc(var(--u) * 0.4); height: calc(var(--u) * 0.4); }
  .hf-touch .hf-touch__btn--sprint .hf-touch__face { padding-top: 0; }
}

@media (max-height: 370px) {
  .hf-touch { --ts-base: 0.8; }
  .hf-touch .hf-touch__zone { top: calc(var(--st) + 56px); }
}

/* Portrait (only while the rotate card is up, or with the lock off). */
@media (max-width: 480px) {
  .hf-touch { --ts-base: 0.78; }
  .hf-touch .hf-touch__zone { width: 50%; }
  .hf-touch.is-lefty .hf-touch__zone { width: 50%; }
}

/* Portrait phones: the scorebug needs the full top row, so pause goes to the corner
   (the HUD drops its radar below it). */
@media (max-width: 520px) {
  .hf-touch .hf-touch__pause {
    left: auto;
    right: calc(var(--sr) + 4px);
    margin-left: 0;
  }
}

/* Tablets and touch laptops: a touch larger, and lifted off the bottom edge where the
   hands grip the device. */
@media (min-width: 1000px) and (min-height: 700px) {
  .hf-touch { --ts-base: 1.16; --lift: 32px; }
}

/* Reduced motion: every change is instant, the backstage fade included. */
@media (prefers-reduced-motion: reduce) {
  .hf-touch,
  .hf-touch .hf-touch__stick,
  .hf-touch .hf-touch__stick.is-idle,
  .hf-touch .hf-touch__stick.is-idle .hf-touch__knob,
  .hf-touch .hf-touch__stick.is-idle .hf-touch__dir,
  .hf-touch .hf-touch__knob,
  .hf-touch .hf-touch__dir,
  .hf-touch .hf-touch__base,
  .hf-touch .hf-touch__base::before,
  .hf-touch .hf-touch__btn,
  .hf-touch .hf-touch__btn::after,
  .hf-touch .hf-touch__disc,
  .hf-touch .hf-touch__disc::before,
  .hf-touch .hf-touch__lbl,
  .hf-touch .hf-touch__key,
  .hf-touch .hf-touch__ring,
  .hf-touch .hf-touch__pause,
  .hf-touch[data-shape="cut"] .hf-touch__disc::before,
  .hf-touch[data-shape="cut"] .hf-touch__base::before {
    transition: none;
  }

  .hf-touch .hf-touch__stick.is-active .hf-touch__base,
  .hf-touch .hf-touch__btn.is-full .hf-touch__ring {
    animation: none;
  }
}