/* Touch controls (INPUT). Landscape-first, thumb-sized glass controls with brand-orange accents.
   Positions and sizes are computed in input/touch.js (they depend on settings, mode caps and the viewport);
   this file owns the look. Every control box is its visual plus --pad on each side (room for glow/ripple);
   --d is the visual diameter (or short side). Only transform/opacity animate, so presses never cause layout,
   and there is no backdrop-filter: the 3D scene behind changes every frame. */

#touch.tc {
  --tc-brand: var(--brand, #ff6a00);
  --tc-hot: var(--brand-hot, #ff8a1f);
  --tc-deep: var(--brand-deep, #c24a00);
  --tc-ease: var(--ease, cubic-bezier(.2, .8, .2, 1));
  --tc-spring: cubic-bezier(.3, 1.6, .45, 1);
  --tc-font: var(--font, 'Changa', system-ui, sans-serif);
  --tc-op: .85;
  --pad: 12px;
  position: fixed;
  inset: 0;
  z-index: var(--z-touch, 15);
  pointer-events: none;
  direction: ltr; /* physical layout; leftHanded (not RTL) decides mirroring */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  font-family: var(--tc-font);
  color: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity .28s var(--tc-ease), visibility 0s linear 0s;
}
#touch.tc.tc-off {
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s var(--tc-ease), visibility 0s linear .18s;
}
#touch.tc.tc-off * { pointer-events: none !important; }
#touch.tc *,
#touch.tc *::before,
#touch.tc *::after { box-sizing: border-box; }
#touch.tc i { font-style: normal; }

/* ---------------------------------------------------------------- input zones (invisible, catch thumbs) */
.tc-zone {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------------------------------------------------------------- generic control */
.tc-ctl {
  position: absolute;
  pointer-events: none;
  opacity: var(--tc-op);
  transition: opacity .2s linear;
  --d: 80px;
  --ac: var(--tc-brand);
  --ac-soft: rgba(255, 106, 0, .34);
  --ac-glow: rgba(255, 106, 0, .6);
  --ring: rgba(255, 255, 255, .26);
  contain: layout style;
}
.tc-ctl.tc-hidden { display: none; }
.tc-ctl.on { opacity: 1; transition-duration: .05s; }

.tc-face,
.tc-glow,
.tc-rip,
.tc-halo {
  position: absolute;
  inset: var(--pad);
  border-radius: 50%;
}

.tc-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--d) * .015);
  overflow: hidden;
  background:
    radial-gradient(130% 88% at 50% -12%, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .08) 42%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(96% 70% at 50% 118%, var(--ac-soft) 0%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, rgba(30, 30, 42, .7) 0%, rgba(8, 8, 14, .76) 100%);
  border: 1.5px solid var(--ring);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .36),
    inset 0 calc(var(--d) * -.09) calc(var(--d) * .2) rgba(0, 0, 0, .38),
    0 calc(var(--d) * .06) calc(var(--d) * .2) rgba(0, 0, 0, .5);
  transform: scale(1);
  transition: transform .26s var(--tc-spring);
}
/* Pressed fill lives on a pseudo-element: the press is an opacity change, not a gradient repaint. */
.tc-face::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(110% 75% at 50% -5%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(100% 100% at 50% 62%, var(--ac) 0%, var(--ac-soft) 78%);
  opacity: 0;
  transition: opacity .16s linear;
}
.tc-ctl.on .tc-face { transform: scale(.9); transition: transform .06s ease-out; }
.tc-ctl.on .tc-face::before { opacity: .82; transition-duration: .03s; }

.tc-glow {
  box-shadow: 0 0 0 2.5px var(--ac), 0 0 calc(var(--d) * .3) calc(var(--d) * .05) var(--ac-glow);
  opacity: 0;
  transform: scale(.96);
  transition: opacity .22s linear, transform .22s var(--tc-ease);
}
.tc-ctl.on .tc-glow { opacity: 1; transform: scale(.92); transition-duration: .04s; }

.tc-rip {
  border: 3px solid var(--ac);
  opacity: 0;
  transform: scale(.85);
}
.tc-ctl.ra .tc-rip { animation: tc-rip-a .5s cubic-bezier(.12, .7, .3, 1) both; }
.tc-ctl.rb .tc-rip { animation: tc-rip-b .5s cubic-bezier(.12, .7, .3, 1) both; }
@keyframes tc-rip-a { 0% { opacity: .9; transform: scale(.86); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes tc-rip-b { 0% { opacity: .9; transform: scale(.86); } 100% { opacity: 0; transform: scale(1.45); } }

.tc-ico {
  position: relative;
  display: block;
  flex: none;
  width: calc(var(--d) * .4);
  height: calc(var(--d) * .4);
  line-height: 0;
  color: var(--ic, #fff);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}
.tc-ico svg { display: block; width: 100%; height: 100%; }
.tc-lbl {
  position: relative;
  font-size: max(10px, calc(var(--d) * .12));
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
  white-space: nowrap;
}
.tc[data-lang='en'] .tc-lbl { font-size: max(9px, calc(var(--d) * .1)); letter-spacing: .09em; }
.tc-lbl:empty { display: none; }

/* ---------------------------------------------------------------- DRIFT (main button) */
.tc-drift {
  --ac: #ff7a12;
  --ac-soft: rgba(255, 106, 0, .42);
  --ac-glow: rgba(255, 110, 0, .72);
  --ring: rgba(255, 150, 64, .95);
}
.tc-drift .tc-face { border-width: 2.5px; }
/* Inner bezel ring: reads as a physical arcade button. */
.tc-drift .tc-face::after {
  content: '';
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px solid rgba(255, 170, 100, .32);
  box-shadow: inset 0 0 calc(var(--d) * .12) rgba(255, 106, 0, .18);
  pointer-events: none;
}
.tc-drift .tc-ico { width: calc(var(--d) * .44); height: calc(var(--d) * .44); color: #fff; }
/* Mini-turbo charge tiers (blue / orange / purple) tint the ring while drifting. */
.tc-drift[data-level='1'] { --ac: #3aa8ff; --ac-soft: rgba(58, 168, 255, .45); --ac-glow: rgba(58, 168, 255, .8); --ring: #6cc0ff; }
.tc-drift[data-level='2'] { --ac: #ff8a1f; --ac-soft: rgba(255, 138, 31, .5); --ac-glow: rgba(255, 138, 31, .9); --ring: #ffb066; }
.tc-drift[data-level='3'] { --ac: #b35cff; --ac-soft: rgba(179, 92, 255, .5); --ac-glow: rgba(179, 92, 255, .9); --ring: #d29bff; }
.tc-drift[data-level='1'] .tc-glow,
.tc-drift[data-level='2'] .tc-glow,
.tc-drift[data-level='3'] .tc-glow { opacity: 1; }

/* ---------------------------------------------------------------- ACTION (item / mode action) */
.tc-action {
  --ac: #ffc21f;
  --ac-soft: rgba(255, 194, 31, .34);
  --ac-glow: rgba(255, 190, 40, .72);
  --ring: rgba(255, 214, 120, .6);
}
.tc-action .tc-ico { width: calc(var(--d) * .48); height: calc(var(--d) * .48); }
.tc-action.has-lbl .tc-ico { width: calc(var(--d) * .42); height: calc(var(--d) * .42); }
/* Item colours: the held item reads at a glance. */
.tc-action[data-icon='boost'], .tc-action[data-icon='boost3'] { --ic: #ffb13a; }
.tc-action[data-icon='rocket'] { --ic: #ff5a4a; }
.tc-action[data-icon='homing'] { --ic: #ff4fa3; }
.tc-action[data-icon='oil'] { --ic: #c9f05a; }
.tc-action[data-icon='shield'] { --ic: #4fe3ff; }
.tc-action[data-icon='bomb'] { --ic: #ff7a3a; }
.tc-action.empty {
  --ac: rgba(255, 255, 255, .7);
  --ac-soft: rgba(255, 255, 255, .08);
  --ac-glow: rgba(255, 255, 255, .25);
  opacity: calc(var(--tc-op) * .8);
}
.tc-action.empty .tc-face {
  border: 2px dashed rgba(255, 255, 255, .3);
  background: radial-gradient(90% 90% at 50% 50%, rgba(255, 255, 255, .05) 0%, rgba(0, 0, 0, 0) 70%), rgba(8, 8, 14, .42);
  box-shadow: inset 0 0 calc(var(--d) * .18) rgba(0, 0, 0, .5);
}
.tc-action.empty .tc-lbl { opacity: .5; }
.tc-q {
  display: block;
  font-size: calc(var(--d) * .36);
  font-weight: 800;
  line-height: calc(var(--d) * .4);
  text-align: center;
  color: rgba(255, 255, 255, .34);
  font-family: var(--tc-font);
}
.tc-halo {
  box-shadow: 0 0 0 2px var(--ac), 0 0 calc(var(--d) * .32) var(--ac-glow);
  opacity: 0;
}
.tc-action.ready .tc-halo { animation: tc-halo 1.2s ease-out infinite; }
.tc-action.ready .tc-face { border-color: var(--ac); border-width: 2px; }
.tc-action.ready .tc-glow { opacity: .55; }
.tc-action.ready.on .tc-glow { opacity: 1; }
@keyframes tc-halo { 0% { opacity: .9; transform: scale(.97); } 100% { opacity: 0; transform: scale(1.34); } }
.tc-action.pa .tc-ico { animation: tc-pop-a .42s var(--tc-spring) both; }
.tc-action.pb .tc-ico { animation: tc-pop-b .42s var(--tc-spring) both; }
@keyframes tc-pop-a { 0% { transform: scale(.3) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tc-pop-b { 0% { transform: scale(.3) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* Cooldown (--cd = fraction remaining): dark wedge over the face plus a progress ring that fills as it recovers. */
.tc-cd {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(rgba(0, 0, 0, .62) calc(var(--cd, 0) * 360deg), rgba(0, 0, 0, 0) 0);
  opacity: 0;
  pointer-events: none;
}
.tc-cd::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: conic-gradient(from calc(var(--cd, 0) * 360deg), var(--ac) 0 calc((1 - var(--cd, 0)) * 360deg), rgba(255, 255, 255, .14) 0);
  -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 calc(100% - 3.5px));
}
.tc-action.cooling .tc-cd { opacity: 1; }
.tc-action.cooling .tc-ico,
.tc-action.cooling .tc-lbl { opacity: .55; }

/* ---------------------------------------------------------------- BRAKE / GAS */
.tc-brake { --ac: #ff3d5a; --ac-soft: rgba(255, 61, 90, .3); --ac-glow: rgba(255, 61, 90, .7); --ring: rgba(255, 140, 155, .5); }
.tc-gas { --ac: #35d07f; --ac-soft: rgba(53, 208, 127, .3); --ac-glow: rgba(53, 208, 127, .72); --ring: rgba(130, 240, 180, .7); }
.tc-brake .tc-ico { width: calc(var(--d) * .42); height: calc(var(--d) * .42); }

/* Pedals (autoAccel off): rounded plates with a ribbed tread and a slight forward lean. */
.tc-pedal .tc-face,
.tc-pedal .tc-glow,
.tc-pedal .tc-rip,
.tc-pedal .tc-halo { border-radius: calc(var(--d) * .22); }
.tc-pedal .tc-face {
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .075) 0 3px, rgba(0, 0, 0, 0) 3px 11px),
    radial-gradient(120% 70% at 50% -8%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 60% at 50% 115%, var(--ac-soft) 0%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(180deg, rgba(30, 30, 42, .7), rgba(8, 8, 14, .76));
  transform: perspective(420px) rotateX(8deg);
}
.tc-pedal.on .tc-face { transform: perspective(420px) rotateX(20deg) scale(.93); }
.tc-pedal .tc-ico { width: calc(var(--d) * .5); height: calc(var(--d) * .5); }
.tc-gas .tc-face { border-width: 2px; }

/* ---------------------------------------------------------------- HORN / PAUSE (small, neutral) */
.tc-horn,
.tc-pause { --ac: #ffffff; --ac-soft: rgba(255, 255, 255, .16); --ac-glow: rgba(255, 255, 255, .42); --ring: rgba(255, 255, 255, .3); }
.tc-horn .tc-ico,
.tc-pause .tc-ico { width: calc(var(--d) * .5); height: calc(var(--d) * .5); }
.tc-horn .tc-face,
.tc-pause .tc-face {
  background:
    radial-gradient(130% 88% at 50% -12%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(30, 30, 42, .68), rgba(8, 8, 14, .74));
}
.tc-horn.on .tc-face::before,
.tc-pause.on .tc-face::before { opacity: .4; }
.tc-horn.on .tc-ico { color: #0b0b0f; filter: none; animation: tc-honk .32s ease-out; }
@keyframes tc-honk { 0%, 100% { transform: none; } 30% { transform: scale(1.2) rotate(-9deg); } 62% { transform: scale(1.08) rotate(6deg); } }
.tc-pause { pointer-events: auto; touch-action: none; }
.tc-pause .tc-ico svg { transform: scale(.82); }

/* ---------------------------------------------------------------- floating joystick */
.tc-stick {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: var(--tc-op);
  will-change: transform;
  --tr: 60px; /* travel each side */
  --kd: 70px; /* knob diameter */
  --th: 52px; /* track height */
}
.tc-stick.idle {
  opacity: calc(var(--tc-op) * .55);
  transition: transform .32s var(--tc-ease), opacity .3s linear;
}
.tc-stick.act { opacity: 1; }
.tc-stick.tc-hidden { display: none; }
.tc-track {
  position: absolute;
  left: calc(var(--tr) * -1 - var(--kd) / 2);
  top: calc(var(--th) / -2);
  width: calc(var(--tr) * 2 + var(--kd));
  height: var(--th);
  border-radius: calc(var(--th) / 2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .02) 46%, rgba(0, 0, 0, .14) 100%),
    linear-gradient(90deg, rgba(255, 106, 0, .16) 0%, rgba(255, 106, 0, 0) 26%, rgba(255, 106, 0, 0) 74%, rgba(255, 106, 0, .16) 100%),
    rgba(10, 10, 18, .52);
  border: 1.5px solid rgba(255, 255, 255, .24);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .45);
}
.tc-notch {
  position: absolute;
  left: 50%;
  top: 24%;
  bottom: 24%;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .3);
}
.tc-chev {
  position: absolute;
  top: 50%;
  width: calc(var(--th) * .46);
  height: calc(var(--th) * .46);
  margin-top: calc(var(--th) * -.23);
  line-height: 0;
  color: #fff;
  opacity: .5;
  transition: opacity .12s linear, transform .16s var(--tc-spring), color .12s linear;
}
.tc-chev svg { display: block; width: 100%; height: 100%; }
.tc-chev.l { left: calc(var(--th) * .18); }
.tc-chev.r { right: calc(var(--th) * .18); }
.tc-stick.sl .tc-chev.l,
.tc-stick.sr .tc-chev.r { opacity: 1; color: var(--tc-hot); transform: scale(1.22); }
.tc-stick.full.sl .tc-chev.l { transform: scale(1.3) translateX(-2px); }
.tc-stick.full.sr .tc-chev.r { transform: scale(1.3) translateX(2px); }
.tc-dir { /* steering-side glow, opacity driven by deflection */
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  opacity: 0;
  pointer-events: none;
}
.tc-dir.l {
  left: 0;
  border-radius: calc(var(--th) / 2) 0 0 calc(var(--th) / 2);
  background:
    radial-gradient(70% 120% at 0% 50%, rgba(255, 200, 140, .75) 0%, rgba(255, 138, 31, .55) 30%, rgba(255, 106, 0, 0) 100%);
}
.tc-dir.r {
  right: 0;
  border-radius: 0 calc(var(--th) / 2) calc(var(--th) / 2) 0;
  background:
    radial-gradient(70% 120% at 100% 50%, rgba(255, 200, 140, .75) 0%, rgba(255, 138, 31, .55) 30%, rgba(255, 106, 0, 0) 100%);
}
.tc-stick.full .tc-track { border-color: rgba(255, 170, 90, .8); }
.tc-knob {
  position: absolute;
  left: calc(var(--kd) / -2);
  top: calc(var(--kd) / -2);
  width: var(--kd);
  height: var(--kd);
  border-radius: 50%;
  background:
    radial-gradient(105% 80% at 50% -2%, rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, .1) 46%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(90% 70% at 50% 112%, rgba(255, 106, 0, .55) 0%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, #2e2e3c, #101017);
  border: 2.5px solid rgba(255, 150, 64, .95);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -8px 16px rgba(0, 0, 0, .45), 0 8px 20px rgba(0, 0, 0, .55);
  will-change: transform;
}
/* Concave thumb dish with side grip ticks and an orange centre pip. */
.tc-knob-dish {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .34) 0 2px, rgba(0, 0, 0, 0) 2px calc(100% - 2px), rgba(255, 255, 255, .34) calc(100% - 2px)) 50% 50% / 100% 34% no-repeat,
    radial-gradient(circle at 50% 50%, #ff8a1f 0 3.5px, rgba(255, 138, 31, .35) 4px, rgba(0, 0, 0, 0) 7px),
    radial-gradient(circle at 50% 28%, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .18) 62%, rgba(255, 255, 255, .07) 100%);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .16);
}
.tc-knob-ring { /* active glow */
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--tc-brand), 0 0 26px 6px rgba(255, 106, 0, .62);
  opacity: 0;
  transition: opacity .15s linear;
}
.tc-stick.act .tc-knob-ring { opacity: 1; }
.tc-stick.full .tc-knob-ring { box-shadow: 0 0 0 3px #ffd08a, 0 0 32px 9px rgba(255, 130, 20, .8); }
.tc-stick.idle .tc-knob { transition: transform .24s var(--tc-spring); }
.tc-stick.hint .tc-knob { animation: tc-hint 2.4s ease-in-out infinite; }
@keyframes tc-hint {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(calc(var(--tr) * -.6), 0, 0) rotate(-10deg); }
  75% { transform: translate3d(calc(var(--tr) * .6), 0, 0) rotate(10deg); }
}

/* ---------------------------------------------------------------- ◀ ▶ steering pads */
.tc-pad { --ac: var(--tc-brand); --ac-soft: rgba(255, 106, 0, .32); --ac-glow: rgba(255, 106, 0, .66); --ring: rgba(255, 255, 255, .28); }
.tc-pad .tc-face,
.tc-pad .tc-glow,
.tc-pad .tc-rip { border-radius: calc(var(--d) * .3); }
.tc-pad .tc-face { border-width: 2px; }
.tc-pad .tc-ico { width: calc(var(--d) * .5); height: calc(var(--d) * .5); }
.tc-pad .tc-ico svg { stroke-width: 3; }
.tc-pad-l .tc-face { background-position: 0 0; }
.tc-pad.on .tc-ico { transform: scale(1.08); }

/* ---------------------------------------------------------------- tilt widget */
.tc-tilt { --ac: var(--tc-brand); --ac-soft: rgba(255, 106, 0, .28); --ac-glow: rgba(255, 106, 0, .6); --ring: rgba(255, 255, 255, .26); }
.tc-tilt .tc-face { overflow: visible; }
.tc-gauge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tc-gauge .g-bg { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 5; stroke-linecap: round; }
.tc-gauge .g-l,
.tc-gauge .g-r { fill: none; stroke: var(--tc-hot); stroke-width: 5; stroke-linecap: round; opacity: .28; transition: opacity .15s linear; }
.tc-tilt.sl .g-l,
.tc-tilt.sr .g-r { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 120, 20, .9)); }
.tc-gauge .g-tick { stroke: rgba(255, 255, 255, .5); stroke-width: 2; stroke-linecap: round; }
.tc-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  will-change: transform;
}
.tc-needle i {
  position: absolute;
  left: -5px;
  top: calc(var(--d) * -.47);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--tc-brand), 0 0 10px 2px rgba(255, 120, 20, .85);
}
.tc-tilt.intro .tc-needle i,
.tc-tilt.need .tc-needle i { opacity: .35; }
.tc-phone {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 62%;
  height: 34%;
  margin-left: -31%;
  margin-top: -17%;
  line-height: 0;
  will-change: transform;
  transition: transform .08s linear;
}
.tc-phone svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); }
.tc-tilt.intro .tc-phone { animation: tc-rock 1.9s ease-in-out infinite; }
@keyframes tc-rock { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
.tc-tilt.need .tc-phone { opacity: .6; }
.tc-tilt.need .tc-glow { animation: tc-breathe 1.6s ease-in-out infinite; }
@keyframes tc-breathe { 0%, 100% { opacity: .1; transform: scale(.96); } 50% { opacity: 1; transform: scale(.98); } }

.tc-recenter { --ac: var(--tc-brand); --ac-soft: rgba(255, 106, 0, .28); --ring: rgba(255, 255, 255, .28); }
.tc-recenter .tc-face,
.tc-recenter .tc-glow,
.tc-recenter .tc-rip { border-radius: 999px; }
.tc-recenter .tc-face { flex-direction: row; gap: calc(var(--d) * .16); padding: 0 calc(var(--d) * .3); }
.tc-recenter .tc-ico { width: calc(var(--d) * .48); height: calc(var(--d) * .48); }
.tc-recenter .tc-lbl { font-size: max(10px, calc(var(--d) * .32)); }
.tc[data-lang='en'] .tc-recenter .tc-lbl { font-size: max(9px, calc(var(--d) * .28)); }
.tc-recenter.on .tc-ico { animation: tc-spin .45s var(--tc-ease); }
@keyframes tc-spin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }

/* ---------------------------------------------------------------- hint pill */
.tc-msg {
  position: absolute;
  max-width: 44vw;
  pointer-events: none;
  padding: 5px 14px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(26, 26, 36, .86), rgba(10, 10, 16, .8));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 3px 0 0 var(--tc-brand), 0 6px 16px rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s linear, transform .3s var(--tc-ease);
}
.tc.tc-lefty .tc-msg { box-shadow: inset -3px 0 0 var(--tc-brand), 0 6px 16px rgba(0, 0, 0, .4); }
.tc-msg.show { opacity: 1; transform: none; }
.tc-msg.warn { border-color: rgba(255, 150, 60, .75); color: #ffd9b3; }

/* Visually hidden switch used for iOS haptic ticks. */
.tc-hap { position: absolute; left: -200px; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .tc-stick.hint .tc-knob,
  .tc-tilt.intro .tc-phone,
  .tc-action.ready .tc-halo,
  .tc-tilt.need .tc-glow { animation: none; opacity: .8; }
}