/* ════════════════════════════════════════════════════════════════
   touch-controls.css  —  SymposiON · Shared Virtual Gamepad
   Built by games/shared/touch-controls.js (window.SymTouch).
   Themeable per game via --symtc-accent / --symtc-glow on .symtc-root.
   ════════════════════════════════════════════════════════════════ */
.symtc-root {
  --symtc-accent: #C9A84C;
  --symtc-glow:   rgba(201,168,76,.4);
  --symtc-surface: rgba(13,10,6,.7);

  position: absolute;
  inset: 0;
  display: none;
  flex-direction: row;
  align-items: stretch;
  touch-action: none;            /* no pull-to-refresh / rubber-band */
  pointer-events: none;          /* zones/buttons opt back in */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.symtc-root.symtc-fixed { position: fixed; }
.symtc-root.symtc-visible { display: flex; }

/* ── Zones (left half / right half) ──
   Zones never blanket-block taps — only the joystick + buttons capture
   pointers, so a game's HUD (pause/mute, etc.) stays tappable behind us.
   Exception: a finger-anchored joystick needs the whole left half live. */
.symtc-zone {
  flex: 1;
  position: relative;
  pointer-events: none;
}
.symtc-zone-left  { background: radial-gradient(ellipse 70% 50% at 28% 64%, rgba(201,168,76,.035) 0%, transparent 70%); }
.symtc-zone-right { background: radial-gradient(ellipse 70% 50% at 72% 64%, rgba(201,168,76,.03) 0%, transparent 70%); }

.symtc-anchor-float .symtc-zone-left { pointer-events: auto; }   /* land anywhere */
.symtc-anchor-fixed .symtc-joy       { pointer-events: auto; }   /* circle only */

/* ════════════════════════════════════
   LEFT — analog joystick
   ════════════════════════════════════ */
.symtc-joy {
  position: absolute;
  touch-action: none;
}
/* fixed: a stationary pad bottom-left */
.symtc-anchor-fixed .symtc-joy {
  left: max(22px, env(safe-area-inset-left));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 128px; height: 128px;
}
.symtc-anchor-fixed .symtc-joy-base {
  position: absolute; inset: 0;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
/* float: zone-spanning; base is moved to the finger by JS */
.symtc-anchor-float .symtc-joy {
  inset: 0; width: 100%; height: 100%;
}
.symtc-anchor-float .symtc-joy-base {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 128px; height: 128px;
}

/* Outer ring */
.symtc-joy-base {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.09), var(--symtc-surface));
  border: 1.5px solid color-mix(in srgb, var(--symtc-accent) 30%, transparent);
  box-shadow: inset 0 0 24px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.4);
  opacity: .4;
  transition: opacity .12s, border-color .12s, box-shadow .12s;
}
.symtc-anchor-float .symtc-joy-base { opacity: .32; }
.symtc-joy-base.symtc-joy-base--active {
  opacity: 1;
  border-color: color-mix(in srgb, var(--symtc-accent) 65%, transparent);
  box-shadow: inset 0 0 18px rgba(0,0,0,.45), 0 0 26px var(--symtc-glow);
}

/* Inner thumb */
.symtc-joy-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
    color-mix(in srgb, var(--symtc-accent) 75%, #fff 5%),
    rgba(13,10,6,.92));
  border: 2px solid color-mix(in srgb, var(--symtc-accent) 60%, transparent);
  box-shadow: 0 3px 12px rgba(0,0,0,.6), 0 0 14px var(--symtc-glow);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform .04s linear;
}

/* ════════════════════════════════════
   RIGHT — action-button cluster
   Slots positioned inside a 196×176 box, bottom-right anchored:
       [ top ] [topleft]
   [ left ]        [ primary ]
   ════════════════════════════════════ */
.symtc-zone-right { display: flex; align-items: flex-end; justify-content: flex-end; }
.symtc-cluster {
  position: relative;
  pointer-events: none;          /* only the buttons inside are live */
  width: 196px; height: 176px;
  margin: 0 max(22px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) 0;
}

.symtc-btn {
  position: absolute;
  border: none;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: 'Cinzel', serif;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  pointer-events: auto;
  transition: transform .06s ease, box-shadow .08s ease, background .06s ease, border-color .12s;
}
.symtc-btn-ic  { font-size: 1.45rem; line-height: 1; }
.symtc-btn-lbl { font-size: .5rem; font-weight: 700; letter-spacing: .1em; line-height: 1; }

/* ── Slot geometry ── */
.symtc-slot-primary { width: 78px; height: 78px; right: 0;   bottom: 0; }
.symtc-slot-left    { width: 64px; height: 64px; left: 0;    bottom: 7px; }
.symtc-slot-top     { width: 64px; height: 64px; top: 0;     left: 50%; transform: translateX(-50%); }
.symtc-slot-topleft { width: 60px; height: 60px; left: 0;    top: 0; }
.symtc-slot-top.symtc-btn--pressed    { transform: translateX(-50%) scale(.91); }

/* ── Tones ── */
.symtc-tone-primary {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--symtc-accent) 88%, #fff 12%), var(--symtc-accent));
  color: #1C1108;
  box-shadow: 0 4px 18px var(--symtc-glow), 0 2px 5px rgba(0,0,0,.65),
              inset 0 1px 0 rgba(255,255,255,.15);
}
.symtc-tone-primary .symtc-btn-lbl { color: rgba(28,17,8,.78); font-weight: 900; }
.symtc-tone-primary.symtc-btn--pressed {
  background: linear-gradient(145deg, #fff, var(--symtc-accent));
  box-shadow: 0 2px 8px var(--symtc-glow), 0 0 22px var(--symtc-glow);
}

.symtc-tone-ghost {
  background: var(--symtc-surface);
  border: 2px solid color-mix(in srgb, var(--symtc-accent) 48%, transparent);
  color: var(--symtc-accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.symtc-tone-ghost .symtc-btn-lbl { color: color-mix(in srgb, var(--symtc-accent) 65%, #000); }
.symtc-tone-ghost.symtc-btn--pressed {
  background: color-mix(in srgb, var(--symtc-accent) 18%, transparent);
  border-color: var(--symtc-accent);
  box-shadow: 0 0 14px var(--symtc-glow);
}

.symtc-tone-special {
  background: rgba(122,34,20,.62);
  border: 2px solid rgba(122,34,20,.9);
  color: #C86050;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.symtc-tone-special .symtc-btn-lbl { color: rgba(200,96,80,.72); }
.symtc-tone-special.symtc-btn--pressed { background: rgba(122,34,20,.9); }

/* ── Active / ready glow (setButtonActive) ── */
.symtc-btn--active {
  border-color: var(--symtc-accent);
  color: color-mix(in srgb, var(--symtc-accent) 80%, #fff);
  animation: symtc-pulse .75s ease-in-out infinite alternate;
}
.symtc-tone-special.symtc-btn--active {
  background: color-mix(in srgb, var(--symtc-accent) 22%, transparent);
}
.symtc-tone-ghost.symtc-btn--active {
  box-shadow: 0 0 18px var(--symtc-glow);
}
.symtc-btn--active .symtc-btn-lbl { color: color-mix(in srgb, var(--symtc-accent) 85%, #fff); }
.symtc-btn--active.symtc-btn--pressed { animation: none; }
@keyframes symtc-pulse {
  from { box-shadow: 0 0 12px var(--symtc-glow), 0 0 24px var(--symtc-glow); }
  to   { box-shadow: 0 0 28px var(--symtc-accent), 0 0 56px var(--symtc-glow); }
}

/* ════════════════════════════════════
   Rotate-device hint (portrait)
   ════════════════════════════════════ */
.symtc-rotate-hint {
  display: none;
  position: absolute; inset: 0; z-index: 2;
  background: rgba(8,5,2,.92);
  flex-direction: column; align-items: center; justify-content: center;
  gap: .8rem; pointer-events: none;
}
@media (orientation: portrait) {
  .symtc-root.symtc-visible .symtc-rotate-hint { display: flex; }
  .symtc-root.symtc-visible .symtc-zone-left,
  .symtc-root.symtc-visible .symtc-joy,
  .symtc-root.symtc-visible .symtc-btn         { pointer-events: none; }
}
.symtc-rotate-ic  { font-size: 3rem; color: var(--symtc-accent); animation: symtc-spin 2s linear infinite; }
@keyframes symtc-spin { to { transform: rotate(360deg); } }
.symtc-rotate-txt {
  font-family: 'Cinzel', serif; font-size: .85rem; letter-spacing: .1em;
  color: #9A8A6A; text-align: center; padding: 0 2rem; line-height: 1.6;
}

/* ════════════════════════════════════
   Compact landscape phones
   ════════════════════════════════════ */
@media (max-height: 380px) and (orientation: landscape) {
  .symtc-cluster      { width: 168px; height: 150px; }
  .symtc-slot-primary { width: 66px; height: 66px; }
  .symtc-slot-left    { width: 54px; height: 54px; }
  .symtc-slot-top     { width: 54px; height: 54px; }
  .symtc-slot-topleft { width: 50px; height: 50px; }
  .symtc-btn-ic       { font-size: 1.2rem; }
  .symtc-anchor-fixed .symtc-joy { width: 108px; height: 108px; }
  .symtc-joy-knob     { width: 46px; height: 46px; }
}

/* Graceful fallback if color-mix is unsupported (older WebKit) */
@supports not (color: color-mix(in srgb, red, blue)) {
  .symtc-joy-base        { border-color: rgba(201,168,76,.30); }
  .symtc-joy-knob        { border-color: rgba(201,168,76,.6); background: radial-gradient(circle at 38% 32%, #E8C96A, rgba(13,10,6,.92)); }
  .symtc-tone-primary    { background: linear-gradient(145deg, #E8C96A, #C9A84C); }
  .symtc-tone-ghost      { border-color: rgba(201,168,76,.48); color: #C9A84C; }
}