/* UPDRAFT web — overlay UI (HUD + menus, owned by js/ui.js) and the touch controls (owned by
   js/input.js, section "Touch controls" at the end).
   Look: SPEC.md "UI" / Sources/UI/UIStyle.swift — translucent sky-white panels (white @ .85,
   14 pt radius, soft shadow, hairline rim), deep slate text, sky-blue accent #4AA3F0, crystal cyan
   #5CE1E6, rounded system font. Every size is in reference points × --s (the UIStyle.scale that
   ui.js keeps on #ui), via --u = 1 point. */

:root {
  --slate: #27364a;
  --slate-soft: rgba(39, 54, 74, .62);
  --slate-faint: rgba(39, 54, 74, .38);
  --accent: #4aa3f0;
  --accent-light: rgb(107, 186, 250);
  --accent-dark: rgb(51, 135, 219);
  --cyan: #5ce1e6;
  --danger: rgb(219, 77, 77);
  --amber: rgb(204, 133, 26);
  --warm: rgb(250, 158, 82);
  --pip-on: rgb(88, 210, 233);
  --ui-font: ui-rounded, "SF Pro Rounded", "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Stacking: touch controls above the HUD; an info modal above the controls; the portrait hint
   above everything. (#ui / #touch are position: fixed in index.html.) */
#ui { z-index: 1; }
#touch { z-index: 2; }
#ui.ui-modal { z-index: 3; }

.ui {
  --s: 1;
  --u: calc(var(--s) * 1px);
  --slot: calc(42 * var(--u));
  --hs: calc(40 * var(--u));
  --hb-bottom: calc(10 * var(--u) + env(safe-area-inset-bottom, 0px));
  --hb-top: calc(var(--hb-bottom) + var(--hs) * 1.25);
  font-family: var(--ui-font);
  color: var(--slate);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.25;
}
.ui *, .ui *::before, .ui *::after { box-sizing: border-box; }
.ui .off { display: none !important; }
.ui img.icon {
  display: block;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -webkit-user-drag: none;
  pointer-events: none;
}
.ui svg { display: block; overflow: visible; }

/* ───────────────────────────────────────────────────────────── HUD */

.hud { position: absolute; inset: 0; z-index: 0; pointer-events: none; }   /* own stacking context: menus always cover it */

.hud-cross { position: absolute; left: calc(50% - 10px); top: calc(50% - 10px); width: 20px; height: 20px; }
.hud-cross::before, .hud-cross::after { content: ""; position: absolute; background-repeat: no-repeat; background-position: center; }
.hud-cross::before {
  inset: 0;
  background-image: linear-gradient(rgba(13, 23, 38, .55), rgba(13, 23, 38, .55)), linear-gradient(rgba(13, 23, 38, .55), rgba(13, 23, 38, .55));
  background-size: 4px 20px, 20px 4px;
}
.hud-cross::after {
  inset: 1px;
  background-image: linear-gradient(rgba(255, 255, 255, .95), rgba(255, 255, 255, .95)), linear-gradient(rgba(255, 255, 255, .95), rgba(255, 255, 255, .95));
  background-size: 2px 18px, 18px 2px;
}

/* Glider stamina "wings" around the crosshair. */
.hud-stamina {
  position: absolute; left: 50%; top: 50%;
  width: calc(110 * var(--u)); height: calc(110 * var(--u));
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .6s linear;
}
.hud-stamina.on { opacity: 1; transition-duration: .15s; }
.hud-stamina svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-under { fill: none; stroke: rgba(10, 23, 41, .45); stroke-width: 7; stroke-linecap: round; }
.st-track { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 4.5; stroke-linecap: round; }
.st-fill { color: var(--cyan); filter: drop-shadow(0 0 calc(3 * var(--u))); }
.st-fill path { fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; }
.st-fill.empty { visibility: hidden; }
.st-fill.pulse { animation: st-pulse .63s ease-in-out infinite; }
@keyframes st-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.st-chev { display: none; }
.hud-stamina.updraft .st-chev { display: inline; }
.st-chev .chev {
  fill: none; stroke: var(--cyan); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; animation: st-chev .714s linear infinite;
}
.st-chev .c1 { animation-delay: -.238s; }
.st-chev .c2 { animation-delay: -.476s; }
@keyframes st-chev {
  0% { transform: translateY(0); opacity: 0; }
  50% { opacity: .9; }
  100% { transform: translateY(-22px); opacity: 0; }
}

.hud-click {
  position: absolute; left: 50%; top: calc(50% + 34 * var(--u));
  transform: translateX(-50%);
  display: none;
  padding: 0 calc(16 * var(--u));
  height: calc(30 * var(--u)); line-height: calc(30 * var(--u));
  border-radius: calc(15 * var(--u));
  background: rgba(20, 36, 59, .55);
  color: #fff; font-size: calc(14 * var(--u)); font-weight: 600;
  text-shadow: 0 1px 2px rgba(5, 13, 26, .5);
  white-space: nowrap;
}
.hud-click.on { display: block; animation: click-breathe 2.4s ease-in-out infinite; }
@keyframes click-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

/* Hotbar. */
.hud-hotbar {
  position: absolute; left: 0; right: 0; bottom: var(--hb-bottom);
  display: flex; justify-content: center;
}
.hb-strip {
  display: flex; gap: calc(var(--hs) * .1);
  padding: calc(var(--hs) * .125);
  border-radius: calc(var(--hs) * .275);
  background: rgba(26, 43, 69, .28);
  box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(8, 20, 41, .30), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.hb-slot {
  position: relative;
  width: var(--hs); height: var(--hs);
  border-radius: calc(var(--hs) * .175);
  background: rgba(26, 43, 69, .30);
  box-shadow: inset 0 0 0 max(1px, calc(1.2 * var(--u))) rgba(255, 255, 255, .55);
  display: flex; align-items: center; justify-content: center;
  transition: transform .08s ease-out;
  touch-action: none;
}
.hb-slot.sel {
  z-index: 1;
  transform: translateY(calc(var(--hs) * -.125)) scale(1.15);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 0 calc(12 * var(--u)) rgba(92, 225, 230, .85), inset 0 0 0 max(2px, calc(2.2 * var(--u))) var(--accent);
}
.hb-slot .icon { width: 72%; height: 72%; }
.ui .cnt {
  position: absolute; right: 8%; bottom: 3%;
  font-weight: 700; line-height: 1;
  color: #fff;
  text-shadow: calc(.8 * var(--u)) calc(.9 * var(--u)) calc(1.2 * var(--u)) rgba(10, 18, 31, .9), 0 0 2px rgba(10, 18, 31, .6);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.hb-slot .cnt { font-size: calc(var(--hs) * .29); }
.ui.ui-playing .hud-touch .hb-slot { pointer-events: auto; cursor: pointer; }

/* Selected item name (fades in, holds, fades out — 0.15 + 1.6 + 0.4 s). */
.hud-name {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--hb-top) + 10 * var(--u));
  display: flex; justify-content: center;
  opacity: 0;
}
.hud-name span {
  height: calc(28 * var(--u)); line-height: calc(28 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(20, 36, 59, .38);
  color: #fff; font-size: calc(16 * var(--u)); font-weight: 700;
  text-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(13, 31, 56, .75);
  white-space: nowrap;
}
.hud-name span:empty { display: none; }
.hud-name.show-a { animation: name-a 2.15s linear forwards; }
.hud-name.show-b { animation: name-b 2.15s linear forwards; }
@keyframes name-a { 0% { opacity: 0; } 7% { opacity: 1; } 81.4% { opacity: 1; } 100% { opacity: 0; } }
@keyframes name-b { 0% { opacity: 0; } 7% { opacity: 1; } 81.4% { opacity: 1; } 100% { opacity: 0; } }

/* Status pills + debug text, top-left. */
.hud-tl {
  position: absolute;
  left: calc(14 * var(--u) + env(safe-area-inset-left, 0px));
  top: calc(14 * var(--u) + env(safe-area-inset-top, 0px));
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--u));
}
.hud-status { display: flex; gap: calc(8 * var(--u)); }
.ui .pill {
  height: calc(32 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 calc(4 * var(--u)) calc(11 * var(--u)) rgba(15, 41, 77, .18), inset 0 0 0 1px rgba(255, 255, 255, .9);
  display: flex; align-items: center;
  padding: 0 calc(14 * var(--u));
  color: var(--slate);
  font-size: calc(13.5 * var(--u)); font-weight: 700;
  white-space: nowrap;
}
.ui .pill.st-adv { padding-left: calc(10 * var(--u)); }
.st-adv .icon { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.st-adv .count { margin-left: calc(6 * var(--u)); font-size: calc(15 * var(--u)); font-variant-numeric: tabular-nums; }
.st-adv .sep { width: 1px; height: calc(18 * var(--u)); margin: 0 calc(14 * var(--u)); background: rgba(39, 54, 74, .15); }
.ui .wing { display: inline-block; color: var(--accent); }
.st-adv .wing { width: calc(18 * var(--u)); height: calc(16 * var(--u)); }
.ui .wing svg { width: 100%; height: 100%; }
.st-adv .pips { display: flex; margin-left: calc(4 * var(--u)); }
.ui .pip {
  --p: calc(10 * var(--u));
  width: calc(var(--p) * .72); height: calc(var(--p) * .72);
  margin: calc(var(--p) * .14) calc((13 * var(--u) - var(--p) * .72) / 2);
  transform: rotate(45deg);
  border-radius: calc(var(--p) * .14);
  background: rgba(39, 54, 74, .16);
  box-shadow: inset 0 0 0 max(1px, calc(1.2 * var(--u))) rgba(39, 54, 74, .55);
}
.ui .pip.on {
  background: var(--pip-on);
  box-shadow: 0 0 calc(4 * var(--u)) rgba(88, 210, 233, .8), inset 0 0 0 max(.75px, calc(.8 * var(--u))) rgba(255, 255, 255, .55);
}
.ui .pill.st-fly {
  gap: calc(8 * var(--u));
  color: #fff;
  background: linear-gradient(var(--accent-light), var(--accent));
  box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(74, 163, 240, .6);
  padding-left: calc(12 * var(--u));
  padding-right: calc(16 * var(--u));
}
.st-fly .wing { width: calc(17 * var(--u)); height: calc(14 * var(--u)); color: #fff; }
.hud-debug {
  display: none;
  margin: 0;
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  border-radius: calc(9 * var(--u));
  background: rgba(13, 20, 33, .62);
  color: rgba(255, 255, 255, .94);
  font: 500 calc(12 * var(--u)) / 1.35 var(--ui-mono);
  white-space: pre;
  max-width: calc(100vw - 28px);
  overflow: hidden;
}
.hud-debug.on { display: block; }

/* Toasts (newest closest to the hotbar). */
.toasts {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--hb-top) + 50 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u));
  pointer-events: none;
  z-index: 5;
}
.toast {
  height: calc(34 * var(--u)); line-height: calc(34 * var(--u));
  max-width: calc(100% - 20 * var(--u));
  padding: 0 calc(18 * var(--u));
  border-radius: calc(17 * var(--u));
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 calc(5 * var(--u)) calc(13 * var(--u)) rgba(15, 41, 77, .25), inset 0 0 0 1px rgba(255, 255, 255, .9);
  color: var(--slate); font-size: calc(14.5 * var(--u)); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: toast-life 2.5s linear forwards;
}
@keyframes toast-life {
  0% { opacity: 0; transform: translateY(calc(8 * var(--u))); }
  6% { opacity: 1; }
  10% { transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

/* Touch HUD: the hotbar (tappable) and toasts sit between the D-pad and the right-hand controls. */
.ui.ui-hudtouch {
  --hs: clamp(26px, calc((100vw - var(--touch-left-w, 0px) - var(--touch-right-w, 0px) - 16px) / 10.4), 46px);
  --hb-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.ui.ui-hudtouch .hud-hotbar,
.ui.ui-hudtouch .hud-name,
.ui.ui-hudtouch .toasts { left: var(--touch-left-w, 0px); right: var(--touch-right-w, 0px); }
.ui.ui-hudtouch .toasts { bottom: calc(var(--hb-top) + 44 * var(--u)); }

/* ───────────────────────────────────────────────────────────── screens + panels */

.scr {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px))
           max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  pointer-events: auto;
}
.scr.on { display: flex; }
.scr.dim { background: linear-gradient(rgba(18, 33, 56, .30), rgba(18, 33, 56, .55)); }
.scr-loading.dim { background: linear-gradient(rgba(18, 33, 56, .165), rgba(18, 33, 56, .30)); }
.scr-settings.dim.from-title { background: linear-gradient(rgba(18, 33, 56, .21), rgba(18, 33, 56, .385)); }

.ui .panel {
  position: relative;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: calc(26 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(15, 41, 77, .22), inset 0 0 0 1px rgba(255, 255, 255, .9);
  color: var(--slate);
}
.ui h2 { margin: 0; font-size: calc(25 * var(--u)); font-weight: 700; line-height: calc(30 * var(--u)); letter-spacing: -.01em; }
.ui h3 { margin: 0 0 calc(8 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; }
.ui .sub { margin: calc(6 * var(--u)) 0 0; font-size: calc(13 * var(--u)); font-weight: 500; color: var(--slate-soft); }
.ui .center { text-align: center; }
.ui .hint { margin: calc(16 * var(--u)) 0 0; font-size: calc(12 * var(--u)); font-weight: 500; color: var(--slate-faint); }
.ui .hint:empty { display: none; }
.ui .cap {
  font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: calc(1.2 * var(--u));
  color: var(--slate-soft);
  height: calc(16 * var(--u)); line-height: calc(16 * var(--u));
  padding-left: calc(2 * var(--u));
}

/* Buttons (UIMenuButton: primary, secondary, compact). */
.ui .btn {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; justify-content: center;
  height: calc(44 * var(--u));
  padding: 0 calc(10 * var(--u));
  border: 0;
  border-radius: calc(14 * var(--u));
  font: 600 calc(15.5 * var(--u)) var(--ui-font);
  color: var(--slate);
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 calc(3 * var(--u)) calc(7 * var(--u)) rgba(13, 41, 82, .28), inset 0 0 0 1px rgba(255, 255, 255, .95);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .08s, box-shadow .08s, transform .05s;
  outline: none;
  touch-action: manipulation;
}
.ui .btn.primary, .ui .btn.compact:not(:disabled) {
  color: #fff;
  background: linear-gradient(rgb(92, 176, 247), var(--accent-dark));
  box-shadow: 0 calc(3 * var(--u)) calc(7 * var(--u)) rgba(13, 41, 82, .28), inset 0 0 0 1px rgba(255, 255, 255, .28);
  text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(13, 64, 128, .35);
}
.ui .btn:active:not(:disabled) {
  transform: translateY(calc(1 * var(--u)));
  background: rgba(224, 237, 250, .95);
  box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(13, 41, 82, .28), inset 0 0 0 1px rgba(255, 255, 255, .95);
}
.ui .btn.primary:active:not(:disabled), .ui .btn.compact:active:not(:disabled) {
  background: linear-gradient(var(--accent-dark), rgb(41, 115, 199));
}
@media (hover: hover) {
  .ui .btn:hover:not(:disabled):not(:active) {
    color: var(--accent-dark);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 calc(5 * var(--u)) calc(10 * var(--u)) rgba(13, 41, 82, .28), inset 0 0 0 max(1.5px, calc(1.75 * var(--u))) rgba(74, 163, 240, .85);
  }
  .ui .btn.primary:hover:not(:disabled):not(:active), .ui .btn.compact:hover:not(:disabled):not(:active) {
    color: #fff;
    background: linear-gradient(var(--accent-light), var(--accent));
    box-shadow: 0 calc(5 * var(--u)) calc(10 * var(--u)) rgba(13, 41, 82, .28), inset 0 0 0 1px rgba(255, 255, 255, .28);
  }
}
.ui .btn:disabled { cursor: default; color: rgba(39, 54, 74, .45); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(39, 54, 74, .12); }
.ui .btn.primary:disabled { opacity: .5; color: #fff; background: linear-gradient(rgb(92, 176, 247), var(--accent-dark)); }
.ui .btn.compact {
  height: calc(28 * var(--u)); min-width: calc(74 * var(--u));
  border-radius: calc(10 * var(--u));
  font-size: calc(12.5 * var(--u));
}
.ui .btn:focus-visible, .ui .card:focus-visible, .ui .row:focus-visible, .ui .icon-btn:focus-visible {
  outline: max(1.5px, calc(2 * var(--u))) solid rgba(74, 163, 240, .9);
  outline-offset: calc(3 * var(--u));
}
.ui-touch .btn:not(.compact) { min-height: 36px; }
.ui-touch .btn.compact { min-height: 28px; }
.ui-touch .recipe { height: max(calc(44 * var(--u)), 34px); }
.ui .icon-btn {
  -webkit-appearance: none; appearance: none;
  position: absolute; top: calc(14 * var(--u)); right: calc(14 * var(--u));
  width: calc(30 * var(--u)); height: calc(30 * var(--u));
  min-width: 30px; min-height: 30px;
  padding: calc(5 * var(--u));
  border: 0; border-radius: 50%;
  background: rgba(39, 54, 74, .06);
  color: var(--slate-soft);
  cursor: pointer;
  outline: none;
}
.ui .icon-btn svg { width: 100%; height: 100%; }
@media (hover: hover) { .ui .icon-btn:hover { background: rgba(74, 163, 240, .15); color: var(--accent-dark); } }

/* ── Title */
.scr-title.on { display: block; }
.title-main {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 7vh;
}
.wm-wrap {
  position: relative;
  font-size: min(calc(108 * var(--u)), 16.5vw);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.wm {
  position: relative;
  display: inline-block;
  margin-right: -.045em;
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", var(--ui-font);
  font-weight: 900;
  letter-spacing: .045em;
  color: #fff;
  background: linear-gradient(#fff 35%, #d6edff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(41, 128, 224, .85))
          drop-shadow(0 calc(3 * var(--u)) calc(1.5 * var(--u)) rgba(23, 77, 143, .55));
}
.wm-wind { position: absolute; left: -.75em; top: -.65em; height: 2.2em; width: 6.5em; }
.wm-glider {
  position: absolute; width: .95em; height: .62em;
  filter: drop-shadow(0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(41, 128, 224, .8));
}
.wm-glider > svg { width: 100%; height: 100%; }
.ui .g-wing { fill: #fff; }
.ui .g-spar { fill: none; stroke: var(--cyan); stroke-width: 5.5; stroke-linecap: round; }
.tagline {
  margin-top: calc(14 * var(--u));
  font-size: calc(20 * var(--u)); font-weight: 600; letter-spacing: calc(.6 * var(--u));
  color: #fff;
  text-shadow: 0 calc(1.5 * var(--u)) calc(6 * var(--u)) rgba(20, 77, 148, .75);
}
.title-buttons {
  margin-top: calc(44 * var(--u));
  width: calc(290 * var(--u));
  display: flex; flex-direction: column; gap: calc(11 * var(--u));
}
.title-foot {
  position: absolute;
  left: calc(18 * var(--u) + env(safe-area-inset-left, 0px));
  right: calc(18 * var(--u) + env(safe-area-inset-right, 0px));
  bottom: calc(14 * var(--u) + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: space-between; gap: 12px;
  font-size: calc(12.5 * var(--u)); font-weight: 600;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(13, 31, 56, .75);
  pointer-events: none;
}

/* ── New World panel */
.title-nw {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
           max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: linear-gradient(rgba(18, 33, 56, .225), rgba(18, 33, 56, .41));
}
.title-nw.on { display: flex; }
.nw-panel { width: min(calc(500 * var(--u)), 100%); }
.cap-row { display: flex; justify-content: space-between; align-items: center; margin-top: calc(20 * var(--u)); }
.cap-note { font-size: calc(11.5 * var(--u)); font-weight: 500; color: var(--slate-faint); }
.field {
  display: flex; align-items: center;
  height: calc(40 * var(--u));
  margin-top: calc(6 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(14 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(255, 255, 255, .95);
  box-shadow: inset 0 0 0 1px rgba(39, 54, 74, .18);
  cursor: text;
}
.field:focus-within { box-shadow: inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--accent); }
.field input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font: 500 calc(15.5 * var(--u)) var(--ui-font);
  color: var(--slate);
  -webkit-user-select: text; user-select: text;
  padding: 0;
}
.field input::placeholder { color: rgba(39, 54, 74, .4); opacity: 1; }
.ui-touch .field input { font-size: max(16px, calc(15.5 * var(--u))); }   /* no iOS focus zoom */
.field .dice { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-left: 8px; color: rgba(39, 54, 74, .35); flex: none; }
.field .dice svg { width: 100%; height: 100%; }
.nw-panel .cap { margin-top: calc(18 * var(--u)); }
.nw-panel .cap-row .cap { margin-top: 0; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(12 * var(--u)); margin-top: calc(6 * var(--u)); }
.ui .card {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
  min-width: 0;
  height: calc(80 * var(--u));
  padding: calc(12 * var(--u));
  border: 0;
  border-radius: calc(12 * var(--u));
  background: rgba(39, 54, 74, .05);
  box-shadow: inset 0 0 0 1px rgba(39, 54, 74, .12);
  font-family: var(--ui-font);
  color: var(--slate);
  text-align: left;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
}
@media (hover: hover) { .ui .card:hover:not(.sel) { background: rgba(74, 163, 240, .07); box-shadow: inset 0 0 0 1px rgba(74, 163, 240, .6); } }
.ui .card.sel { background: rgba(74, 163, 240, .13); box-shadow: inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--accent); }
.card-top { display: flex; align-items: center; gap: calc(9 * var(--u)); }
.card-top .icon { width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex: none; }
.card-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(16 * var(--u)); font-weight: 700; }
.card.sel .card-title { color: var(--accent-dark); }
.card .radio {
  width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 max(1px, calc(1.5 * var(--u))) rgba(39, 54, 74, .25);
}
.card .radio svg { width: 100%; height: 100%; visibility: hidden; }
.card.sel .radio { background: var(--accent); box-shadow: none; }
.card.sel .radio svg { visibility: visible; }
.card-detail { font-size: calc(12.5 * var(--u)); font-weight: 500; color: var(--slate-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.warn {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  height: calc(34 * var(--u));
  margin-top: calc(16 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: calc(9 * var(--u));
  background: rgba(255, 219, 140, .45);
  box-shadow: inset 0 0 0 1px rgba(204, 133, 26, .35);
  color: rgb(140, 84, 10);
  font-size: calc(13.5 * var(--u)); font-weight: 600;
}
.warn-icon { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: var(--amber); flex: none; }
.warn-icon svg { width: 100%; height: 100%; }
.row-buttons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(12 * var(--u)); margin-top: calc(18 * var(--u)); }

/* ── Loading */
.load-box { display: flex; flex-direction: column; align-items: center; width: min(calc(380 * var(--u)), calc(100% - 60px)); }
.glider-glyph {
  width: calc(64 * var(--u)); height: calc(41.6 * var(--u));
  filter: drop-shadow(0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(41, 128, 224, .8));
}
.glider-glyph svg { width: 100%; height: 100%; }
.load-msg {
  margin: calc(16 * var(--u)) 0 calc(12 * var(--u));
  font-size: calc(19 * var(--u)); font-weight: 600; color: #fff; text-align: center;
  text-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(13, 31, 56, .75);
}
.bar {
  position: relative; width: 100%; height: calc(12 * var(--u));
  border-radius: calc(6 * var(--u));
  background: rgba(255, 255, 255, .30);
  box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(8, 20, 41, .35), inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.bar-fill {
  position: relative; height: 100%;
  min-width: calc(12 * var(--u)); max-width: 100%;
  border-radius: calc(6 * var(--u));
  background: linear-gradient(to right, var(--accent), var(--cyan));
  box-shadow: 0 0 calc(10 * var(--u)) rgba(92, 225, 230, .8);
  transition: width .15s linear;
}
.bar-fill::after {
  content: ""; position: absolute;
  left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(2 * var(--u));
  height: calc(2.5 * var(--u)); border-radius: calc(1.25 * var(--u));
  background: rgba(255, 255, 255, .35);
}
.bar-fill.zero { visibility: hidden; }
.load-pct {
  margin-top: calc(10 * var(--u));
  font-size: calc(13.5 * var(--u)); font-weight: 700; color: rgba(255, 255, 255, .9);
  text-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(13, 31, 56, .75);
  font-variant-numeric: tabular-nums;
}

/* ── Pause */
.pause-panel { width: min(calc(342 * var(--u)), 100%); }
.col-buttons { display: flex; flex-direction: column; gap: calc(11 * var(--u)); margin-top: calc(22 * var(--u)); }

/* ── Settings */
.set-panel { width: min(calc(540 * var(--u)), 100%); }
.set-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: calc(8 * var(--u)); }
.set-head .note { font-size: calc(12 * var(--u)); font-weight: 500; color: var(--slate-faint); white-space: nowrap; }
.cap-line { display: flex; align-items: center; gap: calc(14 * var(--u)); height: calc(26 * var(--u)); padding-left: calc(2 * var(--u)); }
.cap-line span { font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: calc(1.2 * var(--u)); color: rgba(51, 135, 219, .85); }
.cap-line::after { content: ""; flex: 1; height: 1px; background: rgba(39, 54, 74, .08); }
.ui .row {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center;
  width: calc(100% + 16 * var(--u));
  height: calc(40 * var(--u));
  margin: 0 calc(-8 * var(--u));
  padding: 0 calc(10 * var(--u)) 0 calc(12 * var(--u));
  border: 0; border-radius: calc(10 * var(--u));
  background: transparent;
  font-family: var(--ui-font);
  color: var(--slate);
  text-align: left;
  outline: none;
  touch-action: none;
}
.ui .row.toggle { cursor: pointer; touch-action: manipulation; }
@media (hover: hover) { .ui .row:hover { background: rgba(74, 163, 240, .08); } }
.ui .row.pressed, .ui .row:focus-visible { background: rgba(74, 163, 240, .08); }
.row-label { width: 40%; flex: none; font-size: calc(14.5 * var(--u)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-default { margin-left: calc(8 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 500; color: var(--slate-faint); }
.track {
  position: relative; flex: 1;
  height: calc(6 * var(--u));
  margin: 0 calc(15 * var(--u)) 0 calc(9 * var(--u));
  border-radius: calc(3 * var(--u));
  background: rgba(39, 54, 74, .13);
  cursor: pointer;
}
.track-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  min-width: calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: linear-gradient(to right, var(--accent), var(--cyan));
}
.knob {
  position: absolute; top: 50%;
  width: calc(18 * var(--u)); height: calc(18 * var(--u));
  margin: calc(-9 * var(--u)) 0 0 calc(-9 * var(--u));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(13, 41, 82, .35), inset 0 0 0 calc(2.5 * var(--u)) var(--accent);
  transition: transform .08s;
}
.row.pressed .knob { transform: scale(1.12); }
.row-value { width: calc(78 * var(--u)); flex: none; text-align: right; font-size: calc(14 * var(--u)); font-weight: 600; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.row.toggle .row-label { flex: 1; width: auto; }
.tog-state { margin-right: calc(8 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; color: var(--slate-soft); }
.row.toggle.is-on .tog-state { color: var(--accent-dark); }
.switch {
  position: relative; flex: none;
  width: calc(44 * var(--u)); height: calc(24 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(39, 54, 74, .18);
  transition: background-color .15s;
}
.row.toggle.is-on .switch { background: linear-gradient(to right, var(--accent), var(--cyan)); }
.switch-knob {
  position: absolute; top: calc(2 * var(--u)); left: calc(2 * var(--u));
  width: calc(20 * var(--u)); height: calc(20 * var(--u));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(13, 41, 82, .3);
  transition: transform .15s;
}
.row.toggle.is-on .switch-knob { transform: translateX(calc(20 * var(--u))); }
.done-row { display: flex; justify-content: center; margin-top: calc(14 * var(--u)); }
.done-row .btn { width: calc(200 * var(--u)); }

/* ── Inventory */
.ui.ui-touch { --slot: max(calc(42 * var(--u)), 34px); }
.inv-panel { padding: calc(22 * var(--u)); }
.inv-adv { display: grid; grid-template-columns: auto 1px calc(400 * var(--u)); column-gap: calc(15 * var(--u)); }
.inv-panel h2 { font-size: calc(24 * var(--u)); margin-bottom: calc(12 * var(--u)); padding-right: calc(36 * var(--u)); }
.inv-panel .cap { margin-bottom: calc(6 * var(--u)); }
.grid9 {
  display: grid;
  grid-template-columns: repeat(9, var(--slot));
  grid-auto-rows: var(--slot);
  gap: calc(4 * var(--u));
  margin-bottom: calc(14 * var(--u));
}
.inv-adv .g-hot { margin-bottom: 0; }
.ui .slot {
  position: relative;
  width: var(--slot); height: var(--slot);
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(7 * var(--u));
  background: rgba(39, 54, 74, .09);
  box-shadow: inset 0 calc(2.5 * var(--u)) 0 rgba(39, 54, 74, .07);
  cursor: pointer;
  touch-action: none;
}
.ui .slot.hover { background: rgba(74, 163, 240, .20); box-shadow: inset 0 0 0 max(1px, calc(1.5 * var(--u))) rgba(74, 163, 240, .8); }
.ui .slot.sel { box-shadow: inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--accent); }
.ui .slot .icon { width: 72%; height: 72%; }
.ui .slot .cnt { font-size: max(9px, calc(var(--slot) * .29)); }
.glider-card {
  display: flex; justify-content: space-between; align-items: stretch;
  height: calc(96 * var(--u));
  margin-top: calc(18 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(74, 163, 240, .09);
  box-shadow: inset 0 0 0 1px rgba(74, 163, 240, .22);
}
.gc-left { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.gc-top { display: flex; align-items: center; gap: calc(8 * var(--u)); white-space: nowrap; }
.gc-top .wing { width: calc(22 * var(--u)); height: calc(19 * var(--u)); }
.gc-title { font-size: calc(16 * var(--u)); font-weight: 700; }
.gc-level { margin-left: calc(6 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; color: var(--accent-dark); }
.gc-pips { display: flex; margin-left: calc(-1 * var(--u)); }
.gc-pips .pip { --p: calc(16 * var(--u)); margin: calc(var(--p) * .14) calc((25 * var(--u) - var(--p) * .72) / 2); }
.gc-pips .pip:first-child { margin-left: calc(var(--p) * .14); }
.gc-note { font-size: calc(12 * var(--u)); font-weight: 500; color: var(--slate-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-right { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; flex: none; }
.gc-count { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }
.gc-count .icon { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.gc-cap { margin-top: calc(4 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 600; color: var(--slate-soft); }
.inv-hint { margin-top: calc(12 * var(--u)); text-align: center; font-size: calc(11.5 * var(--u)); font-weight: 500; color: var(--slate-faint); }
.inv-div { background: rgba(39, 54, 74, .08); }
.recipes { display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.recipe {
  display: flex; align-items: center; gap: calc(9 * var(--u));
  height: calc(44 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(7 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(39, 54, 74, .035);
}
.recipe.can { background: rgba(39, 54, 74, .06); box-shadow: inset 0 0 0 1px rgba(74, 163, 240, .25); }
.recipe.hover { background: rgba(74, 163, 240, .11); }
.recipe.can.hover { box-shadow: inset 0 0 0 1px rgba(74, 163, 240, .5); }
.rc-out { position: relative; width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: none; display: flex; align-items: center; justify-content: center; }
.rc-out .icon { width: 90%; height: 90%; }
.rc-out .cnt { font-size: max(9px, calc(9.9 * var(--u))); right: 0; bottom: 0; }
.recipe:not(.can) .rc-out { opacity: .5; }
.rc-mid { flex: 1; min-width: 0; }
.rc-name { font-size: calc(14.5 * var(--u)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recipe:not(.can) .rc-name { color: var(--slate-soft); }
.rc-note { font-size: calc(11 * var(--u)); font-weight: 500; color: var(--slate-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-note.wing { display: block; font-weight: 600; color: var(--accent-dark); }
.recipe:not(.can) .rc-note.wing { opacity: .6; }
.rc-ings { display: flex; align-items: center; gap: calc(10 * var(--u)); flex: none; }
.ing { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.ing .icon { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ing-n { font-size: calc(12.5 * var(--u)); font-weight: 700; color: rgba(39, 54, 74, .85); font-variant-numeric: tabular-nums; }
.recipe:not(.can) .ing-n { color: rgba(39, 54, 74, .6); }
.ing.missing .ing-n { color: var(--danger); }
.ing.missing .icon { opacity: .55; }
.inv-cre { width: calc(9 * var(--slot) + 8 * 4 * var(--u) + 44 * var(--u)); max-width: 100%; }
.inv-cre .sub { margin: calc(-6 * var(--u)) 0 calc(16 * var(--u)); }
.inv-cre .grid9 { margin-bottom: calc(16 * var(--u)); }
.inv-cre .inv-hint { margin-top: 0; }
.inv-cursor {
  position: fixed; left: 0; top: 0;
  width: var(--slot); height: var(--slot);
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(5, 13, 26, .35));
  will-change: transform;
}
.inv-cursor.on { display: flex; }
.inv-cursor .icon { width: 86%; height: 86%; }
.inv-cursor .cnt { font-size: max(9px, calc(var(--slot) * .29)); }
.inv-tip {
  position: fixed; left: 0; top: 0;
  display: none;
  max-width: calc(290 * var(--u));
  padding: calc(10 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgba(28, 38, 54, .94);
  box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(5, 13, 26, .35), inset 0 0 0 1px rgba(255, 255, 255, .10);
  pointer-events: none;
  z-index: 6;
  will-change: transform;
}
.inv-tip.on { display: block; }
.inv-tip > div + div { margin-top: calc(3 * var(--u)); }
.tl-title { font-size: calc(14 * var(--u)); font-weight: 700; color: #fff; }
.tl-body { font-size: calc(12.5 * var(--u)); font-weight: 500; color: rgba(255, 255, 255, .82); }
.tl-good { font-size: calc(12.5 * var(--u)); font-weight: 500; color: var(--cyan); }
.tl-bad { font-size: calc(12.5 * var(--u)); font-weight: 500; color: rgb(255, 140, 133); }
.tl-faint { font-size: calc(12.5 * var(--u)); font-weight: 500; color: rgba(255, 255, 255, .55); }

/* Narrow windows: stack the crafting column under the inventory column. */
@media (max-width: 700px) and (orientation: portrait), (max-width: 560px) {
  .inv-adv { grid-template-columns: auto; row-gap: calc(16 * var(--u)); }
  .inv-div { display: none; }
}

/* ── Info modal */
.info {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(18, 33, 56, .45);
  pointer-events: auto;
}
.info.on { display: flex; }
.info-panel { width: min(calc(420 * var(--u)), 100%); }
.info-panel p { margin: 0; font-size: calc(14 * var(--u)); font-weight: 500; line-height: 1.45; color: var(--slate-soft); white-space: pre-line; }
.ui-touch .info-panel h3 { font-size: max(17px, calc(20 * var(--u))); }
.ui-touch .info-panel p { font-size: max(14px, calc(14 * var(--u))); }
.info-panel .done-row .btn { width: calc(160 * var(--u)); }

/* Phones run at the 0.7 scale floor: keep small captions readable. */
.ui-touch .sub, .ui-touch .hint, .ui-touch .inv-hint, .ui-touch .gc-note, .ui-touch .rc-note,
.ui-touch .cap-note, .ui-touch .row-default, .ui-touch .set-head .note, .ui-touch .card-detail { font-size: max(10px, calc(12 * var(--u))); }
.ui-touch .title-foot { font-size: max(11px, calc(12.5 * var(--u))); }
.ui-touch .cap, .ui-touch .cap-line span { font-size: max(9.5px, calc(11.5 * var(--u))); }

@media (prefers-reduced-motion: reduce) {
  .hud-click.on, .st-fill.pulse { animation: none; }
  .bar-fill, .hb-slot, .switch-knob, .knob { transition: none; }
}

/* ───────────────────────────────────────────────────────────── Touch controls (js/input.js) */
/* Landscape layout: 8-way D-pad bottom-left; on the right a small top bar, B (red) and A (green)
   side by side, and a drag-to-look trackpad filling the rest of the right column. Sizes scale
   with min(vw, vh) (--tu ≈ 1 px on a 390 px tall phone) and respect the safe-area insets. The
   variables --touch-left-w / --touch-right-w / --touch-top-h tell the HUD where the controls are. */

body.touch {
  --tu: clamp(.75px, calc(min(100vw, 100vh) / 390), 1.45px);
  --tsl: max(10px, env(safe-area-inset-left, 0px));
  --tsr: max(10px, env(safe-area-inset-right, 0px));
  --tst: max(8px, env(safe-area-inset-top, 0px));
  --tsb: max(8px, env(safe-area-inset-bottom, 0px));
  --dpad: calc(150 * var(--tu));
  --rcol: calc(232 * var(--tu));
  --tb: calc(33 * var(--tu));
  --abtn: calc(70 * var(--tu));
  --touch-left-w: calc(var(--tsl) + var(--dpad) + 20 * var(--tu));
  --touch-right-w: calc(var(--tsr) + var(--rcol) + 12 * var(--tu));
  --touch-top-h: calc(var(--tst) + var(--tb) + 8 * var(--tu));
}
#touch .tc {
  position: absolute; inset: 0;
  display: none;
  pointer-events: none;
  color: #fff;
  font-family: var(--ui-font);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#touch .tc.tc-on { display: block; }
#touch .tc svg { display: block; width: 100%; height: 100%; }

.tc-top {
  position: absolute; top: var(--tst); right: var(--tsr);
  width: var(--rcol);
  display: flex; justify-content: space-between;
  pointer-events: none;
}
.tc-tb {
  width: var(--tb); height: var(--tb);
  padding: calc(var(--tb) * .2);
  border-radius: calc(10 * var(--tu));
  background: rgba(16, 30, 50, .34);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), 0 calc(2 * var(--tu)) calc(6 * var(--tu)) rgba(0, 0, 0, .18);
  pointer-events: auto;
  touch-action: none;
  transition: transform .06s, background-color .1s;
}
.tc-tb.down { transform: scale(.9); background: rgba(255, 255, 255, .3); }
.tc-tb.tc-sneak.on { background: rgba(74, 163, 240, .88); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 0 calc(8 * var(--tu)) rgba(74, 163, 240, .7); }
.tc-tb.tc-sneak span { display: none; }
.tc-fs .fs-out { display: none !important; }
.tc-fs.active .fs-in { display: none !important; }
.tc-fs.active .fs-out { display: block !important; }
.tc-hidden { visibility: hidden; pointer-events: none !important; }

.tc-dpad {
  position: absolute;
  left: calc(var(--tsl) + 10 * var(--tu));
  bottom: calc(var(--tsb) + 12 * var(--tu));
  width: var(--dpad); height: var(--dpad);
  border-radius: 50%;
  background: rgba(16, 30, 50, .30);
  box-shadow: inset 0 0 0 calc(1.5 * var(--tu)) rgba(255, 255, 255, .38), 0 calc(3 * var(--tu)) calc(10 * var(--tu)) rgba(0, 0, 0, .15);
  pointer-events: auto;
  touch-action: none;
}
.tc-dpad.sprint { box-shadow: inset 0 0 0 calc(2.5 * var(--tu)) rgba(92, 225, 230, .9), 0 0 calc(10 * var(--tu)) rgba(92, 225, 230, .5); }
.tc-arr {
  position: absolute; width: 34%; height: 34%;
  padding: 7%;
  border-radius: calc(12 * var(--tu));
  color: rgba(255, 255, 255, .82);
  pointer-events: none;
}
.tc-arr.tc-up { left: 33%; top: 3%; }
.tc-arr.tc-down { left: 33%; bottom: 3%; transform: rotate(180deg); }
.tc-arr.tc-left { left: 3%; top: 33%; transform: rotate(-90deg); }
.tc-arr.tc-right { right: 3%; top: 33%; transform: rotate(90deg); }
.tc-arr.on { background: rgba(255, 255, 255, .30); color: #fff; }
.tc-hub {
  position: absolute; left: 50%; top: 50%;
  width: 20%; height: 20%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  pointer-events: none;
}

.tc-btns {
  position: absolute;
  right: var(--tsr);
  top: calc(var(--tst) + var(--tb) + 12 * var(--tu));
  width: var(--rcol);
  height: calc(var(--abtn) + 22 * var(--tu));
  display: flex; justify-content: center; align-items: center;
  gap: calc(30 * var(--tu));
  pointer-events: none;
}
.tc-round {
  width: var(--abtn); height: var(--abtn);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 calc(5 * var(--tu)) 0 rgba(0, 0, 0, .30), inset 0 0 0 1px rgba(255, 255, 255, .35);
  pointer-events: auto;
  touch-action: none;
  opacity: .93;
  transition: transform .05s, box-shadow .05s, filter .05s;
}
.tc-round b { font-size: calc(26 * var(--tu)); font-weight: 800; line-height: 1; }
.tc-round small { margin-top: calc(2 * var(--tu)); font-size: calc(8.5 * var(--tu)); font-weight: 600; line-height: 1.15; text-align: center; opacity: .92; }
.tc-a { background: #3fbf6f; margin-bottom: calc(20 * var(--tu)); }
.tc-b { background: #e2574c; margin-top: calc(20 * var(--tu)); }
.tc-round.on { transform: translateY(calc(4 * var(--tu))); box-shadow: 0 calc(1 * var(--tu)) 0 rgba(0, 0, 0, .30); filter: brightness(1.15); }
.tc-b.mining { box-shadow: 0 0 0 calc(4 * var(--tu)) #ffd166, 0 calc(1 * var(--tu)) 0 rgba(0, 0, 0, .30); }

.tc-pad {
  position: absolute;
  right: var(--tsr);
  width: var(--rcol);
  top: calc(var(--tst) + var(--tb) + 12 * var(--tu) + var(--abtn) + 22 * var(--tu) + 8 * var(--tu));
  bottom: var(--tsb);
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(18 * var(--tu));
  border: calc(1.5 * var(--tu)) dashed rgba(255, 255, 255, .35);
  background: rgba(16, 30, 50, .10);
  color: rgba(255, 255, 255, .62);
  font-size: calc(12 * var(--tu)); font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  pointer-events: auto;
  touch-action: none;
}
.tc-pad.on { border-style: solid; background: rgba(16, 30, 50, .18); }
.tc-pad.on span { opacity: 0; }

/* Portrait on a touch device: ask for landscape (covers menus too). */
.tc-rotate {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 30px;
  background: linear-gradient(#8ec5f0, #4aa3f0);
  color: #fff;
  font-family: var(--ui-font);
  text-align: center;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.tc-rotate b { font-size: 22px; font-weight: 800; text-shadow: 0 1px 4px rgba(13, 31, 56, .45); }
.tc-rotate span { font-size: 15px; font-weight: 500; opacity: .9; }
.tc-rot-icon { width: 76px; height: 76px; animation: tc-turn 2.4s ease-in-out infinite; }
.tc-rot-icon svg { width: 100%; height: 100%; }
@keyframes tc-turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) {
  body.touch #touch { z-index: 4; }
  body.touch .tc-rotate { display: flex; }
}