/* Touch controls (web/touch.mjs, D-0092). Sizes scale with --s: 1 on a 915×412 landscape phone. */
#touch {
  --s:1;
  --g:calc(16px * var(--s));
  --drift:calc(104px * var(--s));
  --brake:calc(70px * var(--s));
  --skill:calc(68px * var(--s));
  --arc:calc(100px * var(--s));
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  font-family:WoW,Georgia,serif;
}
#touch,#touch * {
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
#touch [data-role] {
  pointer-events:auto;
}
body.touch-race {
  overscroll-behavior:none;
}
body.touch-race #race-menu {
  top:max(8px, env(safe-area-inset-top));
  bottom:auto;
  right:auto;
  left:50%;
  transform:translateX(-50%);
  opacity:.8;
}
body.touch-race #race-menu kbd {
  display:none;
}

/* Buttons: WoW's dark glass with a gold rim. */
.touch-btn {
  position:absolute;
  margin:0;
  padding:0;
  border:2px solid rgba(255,209,0,.55);
  background:rgba(12,10,6,.42);
  box-shadow:0 0 0 2px rgba(0,0,0,.55), inset 0 0 calc(18px * var(--s)) rgba(0,0,0,.6);
  color:#ffd100;
  text-shadow:1px 1px 2px #000;
  font:inherit;
  text-transform:uppercase;
  letter-spacing:.06em;
  display:flex;
  align-items:center;
  justify-content:center;
}
.touch-btn.down {
  background:rgba(255,209,0,.28);
  border-color:#ffd100;
  transform:scale(.94);
}
.touch-drift,.touch-brake {
  border-radius:50%;
}
.touch-drift {
  width:var(--drift);
  height:var(--drift);
  bottom:var(--g);
  font-size:calc(17px * var(--s));
}
.touch-drift.gas {
  border-color:rgba(120,230,90,.8);
  color:#9cf07c;
}
.touch-brake {
  width:var(--brake);
  height:var(--brake);
  font-size:calc(13px * var(--s));
  border-color:rgba(255,90,60,.6);
  color:#ff9a7c;
}

/* The three abilities arc around the right thumb's corner, slot 1 lowest. */
.touch-skill {
  width:var(--skill);
  height:var(--skill);
  border-radius:calc(8px * var(--s));
  overflow:hidden;
  --cx:calc(var(--g) + var(--drift) / 2);
}
.touch-skill[data-slot="0"] { right:calc(var(--cx) + var(--arc) - var(--skill) / 2); bottom:calc(var(--cx) - var(--skill) / 2); }
.touch-skill[data-slot="1"] { right:calc(var(--cx) + var(--arc) * .7071 - var(--skill) / 2); bottom:calc(var(--cx) + var(--arc) * .7071 - var(--skill) / 2); }
.touch-skill[data-slot="2"] { right:calc(var(--cx) - var(--skill) / 2); bottom:calc(var(--cx) + var(--arc) - var(--skill) / 2); }
.skill-icon,.skill-shade {
  position:absolute;
  inset:0;
}
.skill-icon {
  background:#222 center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:calc(28px * var(--s));
}
.touch-skill.cooling .skill-shade {
  /* WoW's cooldown clock: the light returns clockwise from twelve o'clock. */
  background:conic-gradient(transparent 0 var(--done), rgba(0,0,0,.72) var(--done) 360deg);
}
.skill-time {
  position:relative;
  font-size:calc(24px * var(--s));
  color:#ffd100;
  text-shadow:2px 2px 2px #000;
}
.touch-skill.down .skill-icon {
  filter:brightness(1.4);
}

/* Tilt: drift and brake for the left thumb. */
#touch[data-steer="tilt"] .touch-drift { left:var(--g); }
#touch[data-steer="tilt"] .touch-brake { left:calc(var(--g) + (var(--drift) - var(--brake)) / 2); bottom:calc(var(--g) + var(--drift) + 14px * var(--s)); }
#touch[data-steer="tilt"] .touch-stick { display:none; }

/* Stick: the left half steers; drift sits in the right corner, inside the abilities' arc. */
#touch[data-steer="stick"] .touch-drift { right:var(--g); }
#touch[data-steer="stick"] .touch-brake { display:none; }
.touch-stick {
  position:absolute;
  left:0;
  top:22%;
  bottom:0;
  width:50%;
  --r:calc(56px * var(--s));
}
.stick-base,.stick-knob {
  position:fixed;
  border-radius:50%;
  transform:translate(-50%,-50%);
  display:none;
}
.stick-base {
  left:var(--ox);
  top:var(--oy);
  width:calc(var(--r) * 2 + var(--skill));
  height:calc(var(--r) * 2 + var(--skill));
  border:2px solid rgba(255,209,0,.35);
  background:rgba(0,0,0,.18);
}
.stick-knob {
  left:calc(var(--ox) + var(--dx));
  top:var(--oy);
  width:var(--skill);
  height:var(--skill);
  background:rgba(255,209,0,.3);
  border:2px solid #ffd100;
}
.touch-stick.live .stick-base,.touch-stick.live .stick-knob {
  display:block;
}
.touch-stick.braking .stick-knob {
  background:rgba(255,90,60,.45);
  border-color:#ff9a7c;
}
.stick-hint {
  position:absolute;
  left:calc(var(--g) + 40px * var(--s));
  bottom:calc(var(--g) + 50px * var(--s));
  color:rgba(255,209,0,.6);
  font-size:calc(15px * var(--s));
  text-shadow:1px 1px 2px #000;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.touch-stick.live .stick-hint {
  display:none;
}

.touch-tip {
  position:absolute;
  left:50%;
  bottom:calc(var(--g) + 100px * var(--s));
  transform:translateX(-50%);
  margin:0;
  color:#fff;
  font-size:calc(14px * var(--s));
  text-shadow:1px 1px 2px #000;
  white-space:nowrap;
}
.touch-tip b {
  color:#9cf07c;
}

/* The wheel: what tilt is doing, bottom centre under the casting bar. A tap centres it. */
#touch .touch-wheel {
  position:absolute;
  left:50%;
  bottom:calc(6px * var(--s));
  width:calc(92px * var(--s));
  height:calc(92px * var(--s));
  transform:translateX(-50%);
  opacity:.92;
}
#touch[data-steer="stick"] .touch-wheel {
  display:none;
}
.touch-wheel svg {
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 1px 2px #000);
}
.w-track { fill:none; stroke:rgba(0,0,0,.55); stroke-width:6; }
.w-fill { fill:none; stroke:#ffd100; stroke-width:6; stroke-dasharray:0 2; }
.touch-wheel.full .w-fill { stroke:#ff4a2a; }
.w-tick { stroke:#fff; stroke-width:1.5; opacity:.7; }
.w-needle path { fill:#fff; stroke:#000; stroke-width:.8; }
.w-spoke { stroke:#5a3818; stroke-width:4.5; stroke-linecap:round; }
.w-peg { stroke:#9a6a35; stroke-width:5; stroke-linecap:round; }
.w-knob { fill:#9a6a35; stroke:#e0b84a; stroke-width:1.4; }
.w-gem { fill:#c41e1e; stroke:#ffd100; stroke-width:1.4; }
.w-rim { fill:none; stroke:#4a2c12; stroke-width:7; }
.w-trim { fill:none; stroke:#d9ab3a; stroke-width:1.6; }
.w-rivet { fill:#ffe07a; }
.w-hub { stroke:#6b4a10; stroke-width:1.2; }
.wheel-note {
  position:absolute;
  left:50%;
  top:-1.2em;
  transform:translateX(-50%);
  color:#fff;
  font-size:calc(12px * var(--s));
  text-shadow:1px 1px 2px #000;
  white-space:nowrap;
}
.tilt-wheel {
  position:relative;
  width:120px;
  height:120px;
  margin:14px auto 0;
  cursor:pointer;
}

/* A portrait phone races nothing: it is asked to turn. A key or pad hides the buttons. */
.touch-turn {
  display:none;
}
#touch.touch-portrait > :not(.touch-turn),#touch.touch-idle > :not(.touch-turn) {
  display:none;
}
#touch.touch-portrait .touch-turn {
  display:flex;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.72);
  pointer-events:auto;
}
.touch-turn p {
  max-width:70%;
  text-align:center;
  font-size:20px;
  color:#ffd100;
  text-shadow:1px 1px 2px #000;
}

/* Settings on the Controls screen. */
.touch-settings fieldset {
  border:1px solid rgba(255,209,0,.25);
  margin:10px 0;
  padding:8px 10px;
}
.touch-settings legend {
  color:var(--muted, #c1b9a3);
  padding:0 4px;
}
.touch-choice {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:16px;
  color:#fff;
}
.touch-check {
  display:flex;
  gap:8px;
  align-items:center;
  color:#fff;
}