/* =====================================================================
   ORBO v5.1: troca de controle na partida, câmera lenta de adaptação,
   estrelas sólidas, medalhas, Sala de Troféus e aviso de troféu.
   ===================================================================== */

/* ---------- HUD: controle ---------- */
.hud-right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.hud-ctrl { background: rgba(0,0,0,0.35); }
.hud-ctrl .ic { display: inline-flex; width: 22px; height: 22px; }
.hud-ctrl .i { width: 100%; height: 100%; }
.pause-ctrl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.pc-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 8px; border-radius: 14px; background: rgba(0,0,0,0.3); box-shadow: inset 0 0 0 1.5px var(--stroke); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; }
.pc-opt .i { width: 22px; height: 22px; }
.pc-opt.active { color: var(--accent); background: rgba(76,240,255,0.08); box-shadow: inset 0 0 0 2px var(--accent), 0 0 14px rgba(76,240,255,0.22); }

/* ---------- câmera lenta de adaptação ---------- */
.fx-vignette.adapt { opacity: 1; box-shadow: inset 0 0 150px rgba(120,190,255,0.3); background: radial-gradient(circle, transparent 58%, rgba(40,80,160,0.12)); transition: opacity 0.25s; }

/* ---------- estrelas ganhas: sólidas ---------- */
.stars-row .star.on svg, .lv-star.on svg { filter: drop-shadow(0 2px 0 rgba(120,70,0,0.55)); }

/* ---------- medalhas (nível pelo tamanho do prêmio) ---------- */
.medal, .m-bronze { --m1: #ffe2b8; --m2: #d08a4e; --m3: #6b3a18; }
.m-silver { --m1: #ffffff; --m2: #b9c3d3; --m3: #5b6474; }
.m-gold { --m1: #fff3b0; --m2: #f1b92e; --m3: #8a5a08; }
.m-platinum { --m1: #effcff; --m2: #9fd8e8; --m3: #3d6f7f; }
.m-diamond { --m1: #f6ecff; --m2: #b89cff; --m3: #5a3aa8; }
.medal { --p: 1; position: relative; width: 58px; height: 58px; flex: none; display: inline-block; }
.md-rim { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 200deg, var(--m1), var(--m2) 25%, var(--m3) 45%, var(--m2) 60%, var(--m1) 75%, var(--m2) 90%, var(--m1)); box-shadow: 0 3px 0 rgba(0,0,0,0.45), 0 0 16px color-mix(in srgb, var(--m2) 40%, transparent); }
.md-rim::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: repeating-conic-gradient(rgba(0,0,0,0.2) 0 3deg, transparent 3deg 10deg); -webkit-mask: radial-gradient(circle, transparent 80%, #000 81%); mask: radial-gradient(circle, transparent 80%, #000 81%); }
.md-face { position: absolute; inset: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--m3); background: radial-gradient(circle at 35% 30%, var(--m1), var(--m2) 62%, var(--m3) 135%); box-shadow: inset 0 2px 3px rgba(255,255,255,0.55), inset 0 -3px 5px rgba(0,0,0,0.35); }
.md-face .i { width: 52%; height: 52%; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)); }
.medal.off .md-rim { background: conic-gradient(var(--m2) calc(var(--p) * 360deg), rgba(255,255,255,0.09) 0); box-shadow: 0 3px 0 rgba(0,0,0,0.45); -webkit-mask: radial-gradient(circle, transparent 82%, #000 83%); mask: radial-gradient(circle, transparent 82%, #000 83%); }
.medal.off .md-rim::after { display: none; }
.medal.off .md-face { inset: 6px; color: rgba(200,210,240,0.34); background: radial-gradient(circle at 35% 30%, rgba(40,50,86,0.95), rgba(10,14,32,0.98)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.06); }
.medal.off .md-face .i { filter: none; }
.medal.hid .md-face { color: rgba(200,210,240,0.2); }
.medal.mini { width: 18px; height: 18px; }
.medal.mini .md-face { inset: 3px; }
.medal.mini .md-rim { box-shadow: none; }
.medal.mini .md-rim::after { display: none; }
.medal.big { width: 118px; height: 118px; }
.medal.big .md-face { inset: 14px; }
.medal.big .md-rim::after { inset: 4px; }
.md-shine { position: absolute; inset: 8px; border-radius: 50%; overflow: hidden; pointer-events: none; }
.md-shine::before { content: ''; position: absolute; top: -20%; bottom: -20%; width: 42%; left: -70%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.8), transparent); transform: skewX(-18deg); animation: md-shine 1.1s 0.35s ease-out 2 both; }
@keyframes md-shine { to { left: 140%; } }

/* ---------- Sala de Troféus ---------- */
.tr-hero { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 22px; margin-bottom: 14px; background: radial-gradient(120% 140% at 0% 0%, rgba(255,207,74,0.16), transparent 55%), linear-gradient(180deg, rgba(26,34,70,0.95), rgba(10,14,32,0.95)); box-shadow: 0 4px 0 rgba(0,0,0,0.45), inset 0 0 0 1.5px rgba(255,207,74,0.28); }
.tr-ring { --p: 0; flex: none; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--p) * 360deg), rgba(255,255,255,0.08) 0); box-shadow: 0 0 24px rgba(255,207,74,0.2); }
.tr-ring-in { width: 78px; height: 78px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: radial-gradient(circle at 35% 30%, #1d2750, #070b1a); }
.tr-ring-in b { font-family: var(--display); font-size: 24px; color: var(--gold); }
.tr-ring-in small { margin-top: 3px; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.tr-hero-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tr-count { font-family: var(--display); font-size: 17px; font-weight: 600; }
.tr-tiers { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.tr-tier { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.tr-gems { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.tr-bar { display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.tr-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #fff3b0); }
.tr-near, .tr-recent { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tr-near::-webkit-scrollbar, .tr-recent::-webkit-scrollbar { display: none; }
.tr-near-card { flex: none; width: 232px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; text-align: left; scroll-snap-align: start; background: linear-gradient(180deg, rgba(22,30,62,0.92), rgba(10,14,32,0.92)); box-shadow: 0 3px 0 rgba(0,0,0,0.4), inset 0 0 0 1.5px var(--stroke); }
.tr-near-card .medal { width: 46px; height: 46px; }
.tr-near-card .md-face { inset: 6px; }
.tr-near-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.tr-near-info b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-near-info small { font-size: 11px; color: var(--muted); }
.tr-recent .tr-item { flex: none; width: 76px; scroll-snap-align: start; }
.tr-filters { display: flex; gap: 6px; margin: 4px 0 12px; }
.tr-shelf { margin-bottom: 14px; padding: 12px 10px 8px; border-radius: 20px; background: linear-gradient(180deg, rgba(20,28,58,0.7), rgba(8,12,28,0.7)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); }
.tr-shelf-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 10px; margin-bottom: 12px; }
.tr-shelf-head b { font-family: var(--display); font-size: 15px; font-weight: 600; }
.tr-shelf-head .num { font-size: 13px; color: var(--muted); }
.tr-shelf-head .tr-bar { grid-column: 1 / -1; }
.tr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
.tr-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 2px; border-radius: 14px; transition: transform 0.08s; }
.tr-item:active { transform: scale(0.95); }
.tr-name { min-height: 25px; font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-item.on .tr-name { color: var(--text); }
.tr-new { position: absolute; top: -2px; right: 0; padding: 1px 6px; border-radius: 99px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.6px; background: var(--gold); color: #3a2600; box-shadow: 0 2px 0 rgba(0,0,0,0.35); }
@media (min-width: 520px) { .tr-grid { grid-template-columns: repeat(6, 1fr); } }

/* ---------- detalhe do troféu ---------- */
.tr-sheet { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(3,5,14,0.62); animation: tr-fade 0.18s ease both; }
.tr-sheet-card { position: relative; width: min(100%, 460px); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 20px calc(24px + var(--sab, 0px)); border-radius: 26px 26px 0 0; text-align: center; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--m2) 24%, transparent), transparent 60%), linear-gradient(180deg, #151d42, #080c1e); box-shadow: 0 -8px 40px rgba(0,0,0,0.5), inset 0 1.5px 0 rgba(255,255,255,0.08); animation: tr-up 0.26s cubic-bezier(0.2,0.8,0.2,1) both; }
.tr-x { position: absolute; top: 10px; right: 10px; }
.tr-tier-label { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--m2); }
.tr-sheet-name { font-family: var(--display); font-size: 22px; font-weight: 700; }
.tr-sheet-desc { margin: 0; max-width: 320px; font-size: 14px; color: var(--muted); }
.tr-sheet-prog { width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 4px; }
.tr-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--green); }
.tr-date .i { width: 14px; height: 14px; }
.tr-sheet-reward { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
@keyframes tr-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes tr-fade { from { opacity: 0; } }

/* ---------- aviso de troféu ---------- */
#trophy-host { position: absolute; left: 12px; right: 12px; top: calc(64px + var(--sat, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.trophy-pop { pointer-events: auto; width: min(100%, 380px); display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 20px; text-align: left; background: radial-gradient(120% 160% at 0% 50%, color-mix(in srgb, var(--m2) 30%, transparent), transparent 60%), linear-gradient(180deg, rgba(28,36,74,0.98), rgba(10,14,32,0.98)); box-shadow: 0 6px 0 rgba(0,0,0,0.45), 0 18px 40px rgba(0,0,0,0.45), inset 0 0 0 1.5px color-mix(in srgb, var(--m2) 70%, transparent); animation: tp-in 0.42s cubic-bezier(0.2,0.9,0.25,1.2) both; }
.trophy-pop.out { animation: tp-out 0.3s ease both; }
.trophy-pop .medal { width: 52px; height: 52px; }
.trophy-pop .md-face { inset: 7px; }
.tp-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tp-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--m2); }
.tp-main b { font-family: var(--display); font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-reward { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.tp-reward .i { width: 13px; height: 13px; }
@keyframes tp-in { from { transform: translateY(-30px) scale(0.92); opacity: 0; } }
@keyframes tp-out { to { transform: translateY(-20px); opacity: 0; } }

/* ---------- menu: órbita em dois arcos (nomes sempre visíveis) ---------- */
.scene.orbit2 .orbit-btn { left: calc(50% + var(--x, 0px)); top: calc(50% + var(--y, 0px)); width: var(--ob); height: var(--ob); margin: calc(var(--ob) / -2) 0 0 calc(var(--ob) / -2); transform: none; }
.scene.orbit2 .orbit-line { width: calc(var(--Rx) * 2); height: calc(var(--Ry) * 2); }
.scene.orbit2 .ob-circle .ic { width: calc(var(--ob) * 0.42); height: calc(var(--ob) * 0.42); }
.scene.orbit2 .ob-label { z-index: 5; margin-top: 5px; padding: 2px 8px 3px; border-radius: 99px; color: #c9d3ee; text-shadow: none; background: rgba(6,10,26,0.74); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.scene.orbit2 .orbit-btn.glow .ob-label { color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255,207,74,0.45), 0 2px 8px rgba(0,0,0,0.35); }
.scene.orbit2 .orbit-btn .badge { z-index: 6; }
.scene.orbit-compact .ob-label { margin-top: 3px; padding: 1px 6px 2px; font-size: 8px; letter-spacing: 0.6px; }

/* ---------- navegadores sem color-mix(): fundos simples para continuar legível ---------- */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .shop-featured { background: linear-gradient(135deg, rgba(76,240,255,0.14), rgba(0,0,0,0.3)); }
  .shop-card { background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)); }
  .shop-ab, .gear-card { background: linear-gradient(180deg, rgba(22,30,62,0.95), rgba(10,14,32,0.95)); }
  .sg-pass-node.done { background: var(--wa, #4cf0ff); }
  .sg-dots em.trial.half { background: rgba(255,207,74,0.6); }
  .sg-layer.is-passed, .sg-opt:hover { background: rgba(255,255,255,0.06); }
  .tr-sheet-card, .trophy-pop { background: linear-gradient(180deg, #151d42, #080c1e); }
}