:root {
  --pad-ink: #1e1219;
  --pad-glass: rgba(24, 16, 34, 0.55);
  --pad-glass-2: rgba(24, 16, 34, 0.78);
  --pad-ring: rgba(255, 190, 214, 0.55);
  --pad-sakura: #f08aab;
  --pad-sakura-2: #ffc2d4;
  --pad-gold: #f2d28a;
  --pad-safe-l: env(safe-area-inset-left, 0px);
  --pad-safe-r: env(safe-area-inset-right, 0px);
  --pad-safe-b: env(safe-area-inset-bottom, 0px);
  --u: clamp(0.78px, 0.16vmin + 0.42px, 1.08px);
}

/* sem caixa de tela inteira: cada peça é fixa no seu lugar (uma camada transparente do tamanho da tela custava
   uma mistura de tela inteira por quadro na placa de vídeo do celular) */
.tc { display: none; }
.tc.on { display: contents; }

.tc-zone { position: fixed; z-index: 5; left: 0; bottom: 0; width: 52%; height: 68%; pointer-events: auto; touch-action: none; }
.tc-joy { position: fixed; z-index: 5; pointer-events: none; width: calc(150 * var(--u)); height: calc(150 * var(--u)); margin: calc(-75 * var(--u)) 0 0 calc(-75 * var(--u)); left: calc(var(--pad-safe-l) + 118 * var(--u)); top: calc(100% - var(--pad-safe-b) - 128 * var(--u)); transition: opacity .25s, transform .25s; opacity: .62; }
.tc-joy.live { opacity: 1; transition: opacity .1s; }
.tc-base { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 60%), var(--pad-glass); border: 1.5px solid var(--pad-ring); box-shadow: 0 10px 28px rgba(0, 0, 0, .35), inset 0 0 0 calc(10 * var(--u)) rgba(255, 255, 255, .03); }
.tc-base svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-knob { position: absolute; left: 50%; top: 50%; width: calc(64 * var(--u)); height: calc(64 * var(--u)); margin: calc(-32 * var(--u)) 0 0 calc(-32 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 36% 30%, #ffe0ea 0%, #f7a2bd 38%, #d65f86 100%); border: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 6px 16px rgba(160, 40, 80, .45), inset 0 -4px 8px rgba(120, 20, 60, .35); display: grid; place-items: center; will-change: transform; }
.tc-knob svg { width: 46%; height: 46%; opacity: .92; }

.tc-acts { position: fixed; z-index: 5; right: calc(var(--pad-safe-r) + 18 * var(--u)); bottom: calc(var(--pad-safe-b) + 18 * var(--u)); width: calc(250 * var(--u)); height: calc(250 * var(--u)); pointer-events: none; }
.tc-b { position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; display: grid; place-items: center; color: #fff; -webkit-user-select: none; user-select: none; transition: transform .12s cubic-bezier(.3, 1.6, .5, 1), box-shadow .12s, filter .12s; }
.tc-b svg { width: 46%; height: 46%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.tc-b.down { transform: scale(.88); filter: brightness(1.12); }
.tc-b .lbl { position: absolute; bottom: calc(-17 * var(--u)); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 calc(11 * var(--u)) / 1 'Zen Maru Gothic', system-ui, sans-serif; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }

.tc-a { right: calc(8 * var(--u)); bottom: calc(12 * var(--u)); width: calc(96 * var(--u)); height: calc(96 * var(--u)); background: radial-gradient(circle at 34% 28%, #ffd6e2 0%, #f37c9f 40%, #c7305a 100%); border: 2.5px solid rgba(255, 255, 255, .75); box-shadow: 0 10px 24px rgba(199, 48, 90, .5), inset 0 -6px 12px rgba(110, 10, 50, .35), 0 0 0 calc(6 * var(--u)) rgba(255, 170, 200, .16); }
.tc-a::after { content: ''; position: absolute; inset: calc(-9 * var(--u)); border-radius: 50%; border: 2px solid rgba(255, 194, 212, .0); transition: border-color .2s; }
.tc-a.hint::after { border-color: rgba(255, 194, 212, .75); animation: tcpulse 1.4s ease-in-out infinite; }
@keyframes tcpulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .45; } }

.tc-run { right: calc(124 * var(--u)); bottom: calc(6 * var(--u)); width: calc(62 * var(--u)); height: calc(62 * var(--u)); background: radial-gradient(circle at 34% 28%, #d9f0ff 0%, #79b4dc 45%, #2f6f9e 100%); border: 2px solid rgba(255, 255, 255, .65); box-shadow: 0 8px 18px rgba(30, 90, 140, .45), inset 0 -4px 10px rgba(10, 40, 80, .35); }
.tc-run.on { box-shadow: 0 0 0 calc(4 * var(--u)) rgba(150, 210, 255, .55), 0 8px 18px rgba(30, 90, 140, .45), inset 0 -4px 10px rgba(10, 40, 80, .35); }

.tc-s { width: calc(50 * var(--u)); height: calc(50 * var(--u)); background: var(--pad-glass-2); border: 1.5px solid rgba(255, 210, 225, .5); box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.tc-s svg { width: 52%; height: 52%; }
.tc-bag { right: calc(118 * var(--u)); bottom: calc(92 * var(--u)); }
.tc-map { right: calc(66 * var(--u)); bottom: calc(132 * var(--u)); }
.tc-menu { right: calc(6 * var(--u)); bottom: calc(146 * var(--u)); }

.tc-badge { position: absolute; top: calc(-3 * var(--u)); right: calc(-3 * var(--u)); min-width: calc(18 * var(--u)); height: calc(18 * var(--u)); padding: 0 4px; border-radius: 999px; background: var(--pad-gold); color: #3a2410; font: 900 calc(10 * var(--u)) / calc(18 * var(--u)) 'Zen Maru Gothic', sans-serif; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); display: none; }
.tc-badge.on { display: block; }

@media (orientation: portrait) {
  .tc-zone { height: 56%; width: 56%; }
  .tc-acts { width: calc(230 * var(--u)); height: calc(230 * var(--u)); }
}

.saved { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 18px); left: 50%; transform: translate(-50%, -8px); display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(18, 13, 26, .78); border: 1px solid rgba(255, 210, 225, .22); color: #f4ecf2; font: 700 12px/1 'Zen Maru Gothic', system-ui, sans-serif; letter-spacing: .05em; opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s; z-index: 6; }
.saved.on { opacity: 1; transform: translate(-50%, 0); }
.saved svg { width: 18px; height: 18px; animation: tcspin 1.4s linear infinite; }
.saved.done svg { animation: none; }
@keyframes tcspin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .tc-b, .tc-joy, .saved { transition: none; } .tc-a.hint::after, .saved svg { animation: none; } }