/* TagPet · Coleção Star Wars
   Cores, cenário e efeitos dos 4 temas da coleção. A cena animada (luta, naves,
   hiperespaço) é montada por tagpet-galaxia.js; a página do pet não muda. */

/* ===== cores de cada tema ===== */
html[data-tema="sw-estacao"]{
  color-scheme:dark;
  --gx-saber:255,59,72;--gx-paper-rgb:5,10,28;
  --tp-primary:#13235c;--tp-primary-2:#2b55d6;--tp-on-primary:#fff;
  --tp-accent:#ff8a2a;--tp-on-accent:#1a0c00;--tp-accent-soft:rgba(255,138,42,.16);--tp-accent-ink:#ffb070;
  --tp-heading:#f2f6ff;--tp-text:#e3e9fb;--tp-body-text:#b4c0de;--tp-muted:#a3aed0;
  --tp-paper:#050a1c;--tp-glow:#0b1640;--tp-glow-2:#050a1c;--tp-card:rgba(10,18,44,.8);--tp-line:rgba(120,160,255,.24);--tp-chip:rgba(10,18,44,.6);
  --tp-reward-a:#1d1608;--tp-reward-b:#33240b;--tp-reward-line:#8a6420;--tp-reward-ink:#ffdf9a;--tp-reward-amount:#ffc23f;
  --tp-shadow-rgb:0,0,0;--tp-logo:#fff;--tp-nav-text:#ffb070;
}
html[data-tema="sw-deserto"],html[data-tema="sw-deserto-passeio"]{
  --gx-saber:70,170,255;--gx-paper-rgb:251,236,214;
  --tp-primary:#1b3f9a;--tp-primary-2:#3d7bf0;--tp-on-primary:#fff;
  --tp-accent:#ff8a2a;--tp-on-accent:#fff;--tp-accent-soft:#ffe2c4;--tp-accent-ink:#a9480b;
  --tp-heading:#1b3474;--tp-text:#2b2014;--tp-body-text:#56432d;--tp-muted:#6e5a40;
  --tp-paper:#fbecd6;--tp-glow:#ffe6c4;--tp-glow-2:#fbecd6;--tp-card:rgba(255,255,255,.88);--tp-line:rgba(170,110,50,.25);--tp-chip:rgba(255,255,255,.8);
  --tp-shadow-rgb:120,70,20;--tp-logo:#1b3474;--tp-nav-text:#ffd2a6;
}
html[data-tema="sw-hangar"],html[data-tema="sw-hangar-passeio"]{
  color-scheme:dark;
  --gx-saber:255,154,60;--gx-paper-rgb:10,18,38;
  --tp-primary:#14244f;--tp-primary-2:#2a4a9a;--tp-on-primary:#fff;
  --tp-accent:#ff9a3c;--tp-on-accent:#1a0c00;--tp-accent-soft:rgba(255,154,60,.16);--tp-accent-ink:#ffb877;
  --tp-heading:#fff3e6;--tp-text:#e9edf7;--tp-body-text:#b8c2da;--tp-muted:#a2acc6;
  --tp-paper:#0a1226;--tp-glow:#14244f;--tp-glow-2:#0a1226;--tp-card:rgba(12,22,46,.82);--tp-line:rgba(255,150,60,.26);--tp-chip:rgba(12,22,46,.6);
  --tp-reward-a:#22160a;--tp-reward-b:#3a240c;--tp-reward-line:#8a5a20;--tp-reward-ink:#ffd9a6;--tp-reward-amount:#ffb24a;
  --tp-shadow-rgb:0,0,0;--tp-logo:#fff;--tp-nav-text:#ffb877;
}
html[data-tema="sw-batalha"]{
  color-scheme:dark;
  --gx-saber:255,210,63;--gx-paper-rgb:3,4,12;
  --tp-primary:#141d4f;--tp-primary-2:#2a3a8f;--tp-on-primary:#fff;
  --tp-accent:#ffd23f;--tp-on-accent:#1a1400;--tp-accent-soft:rgba(255,210,63,.14);--tp-accent-ink:#ffe07a;
  --tp-heading:#ffd23f;--tp-text:#eef1ff;--tp-body-text:#bcc3e3;--tp-muted:#a0a8cf;
  --tp-paper:#03040c;--tp-glow:#0c1030;--tp-glow-2:#03040c;--tp-card:rgba(14,16,34,.82);--tp-line:rgba(255,210,63,.24);--tp-chip:rgba(14,16,34,.6);
  --tp-reward-a:#1b1710;--tp-reward-b:#2c2312;--tp-reward-line:#7a6020;--tp-reward-ink:#ffe39a;--tp-reward-amount:#ffd23f;
  --tp-shadow-rgb:0,0,0;--tp-logo:#fff;--tp-nav-text:#ffe07a;
}
html[data-galaxia]{
  --tp-display:"Orbitron","Fredoka",system-ui,sans-serif;
  --gx-ph:clamp(240px,30vw,340px);
}

/* ===== cenário ===== */
html[data-galaxia] body.visitor-mode{background:var(--tp-paper)!important;padding-top:calc(var(--gx-ph) - 6px)}
#gx-fundo{position:fixed;inset:0;z-index:-3;pointer-events:none;background:var(--tp-paper) center top/cover no-repeat}
#gx-fundo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--gx-paper-rgb),.15) 0%,rgba(var(--gx-paper-rgb),.55) 32%,rgba(var(--gx-paper-rgb),.72) 100%)}
#gx-ceu{position:fixed;inset:0;z-index:-2;pointer-events:none;width:100%;height:100%}
#gx-palco{position:absolute;left:0;right:0;top:0;height:var(--gx-ph);z-index:2;overflow:hidden;
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
#gx-palco .gx-palco-bg{position:absolute;inset:0;background:transparent center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}
#gx-palco canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#gx-palco .gx-lut{position:absolute;left:0;top:0;transform-origin:50% 100%;will-change:transform;cursor:pointer;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.35));-webkit-user-drag:none}
#gx-palco.gx-naval canvas{pointer-events:auto}
#gx-fx{position:fixed;inset:0;z-index:80;pointer-events:none;width:100%;height:100%}
#gx-fx.gx-intro{pointer-events:auto;cursor:pointer}

/* ===== página por cima do cenário ===== */
html[data-galaxia] .visitor-mode #phone-screen .phone-menu,
html[data-galaxia] .visitor-mode #phone-screen .editable-card,
html[data-galaxia] .visitor-mode #phone-screen .phone-info div,
html[data-galaxia] .visitor-mode #phone-screen .phone-poster,
html[data-galaxia] .visitor-mode #phone-screen .share-text,
html[data-galaxia] .visitor-mode #phone-screen .share-buttons button,
html[data-galaxia] .visitor-mode #phone-screen .pet-specs{
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
html[data-galaxia] .visitor-mode #phone-screen .pet-intro,
html[data-galaxia] .visitor-mode #phone-screen .phone-section-heading,
html[data-galaxia] .visitor-mode #phone-screen .phone-end,
html[data-galaxia] .visitor-mode #phone-screen .identity h3{
  text-shadow:0 2px 12px rgba(var(--gx-paper-rgb),.9),0 0 22px rgba(var(--gx-saber),.25);
}
html[data-galaxia] .visitor-mode #phone-screen .phone-nav{
  background:rgba(var(--gx-paper-rgb),.82)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
html[data-galaxia] .visitor-mode #phone-screen .identity h3{letter-spacing:.04em;font-size:38px!important}
html[data-galaxia] .visitor-mode #phone-screen .phone-example{letter-spacing:.24em!important;border:1px solid var(--tp-accent)}
html[data-galaxia] .visitor-mode #phone-screen .phone-page h4{font-size:22px!important;letter-spacing:.02em}
html[data-galaxia] .visitor-mode #phone-screen .pet-intro strong{font-size:17px;letter-spacing:.03em}
html[data-galaxia] .visitor-mode #phone-screen .editable-card strong{font-size:15px!important}

/* foto: anel de energia girando */
html[data-galaxia] .visitor-mode #phone-screen .identity-top{position:relative}
html[data-galaxia] .visitor-mode #phone-screen .identity-top::before{
  content:"";position:absolute;left:50%;top:-12px;width:208px;height:208px;margin-left:-104px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(var(--gx-saber),.95) 0 18deg,transparent 18deg 90deg,rgba(var(--gx-saber),.95) 90deg 108deg,transparent 108deg 180deg,rgba(var(--gx-saber),.95) 180deg 198deg,transparent 198deg 270deg,rgba(var(--gx-saber),.95) 270deg 288deg,transparent 288deg);
  -webkit-mask:radial-gradient(circle,transparent 98px,#000 99px,#000 103px,transparent 104px);mask:radial-gradient(circle,transparent 98px,#000 99px,#000 103px,transparent 104px);
  filter:drop-shadow(0 0 6px rgba(var(--gx-saber),.9));animation:gx-gira 9s linear infinite!important;pointer-events:none;
}
html[data-galaxia] .visitor-mode #phone-screen .phone-portrait{
  border-color:rgba(var(--gx-paper-rgb),1)!important;
  box-shadow:0 0 0 3px var(--tp-accent),0 0 30px 4px rgba(var(--gx-saber),.5),0 18px 40px -14px #000!important;
}

/* botões de contato: lâmina de sabre acende na borda de baixo */
html[data-galaxia] .visitor-mode #phone-screen .phone-contact{border:1px solid rgba(var(--gx-saber),.45)!important;
  box-shadow:0 0 22px -6px rgba(var(--gx-saber),.75),var(--tp-shadow)!important}
html[data-galaxia] .visitor-mode #phone-screen .phone-contact::after{
  display:block!important;content:""!important;position:absolute!important;inset:auto auto 0 7%!important;
  width:86%!important;height:3px!important;border-radius:3px;background:#fff!important;opacity:1!important;
  -webkit-mask:none!important;mask:none!important;padding:0!important;transform-origin:left center;
  box-shadow:0 0 6px 1px rgb(var(--gx-saber)),0 0 16px 3px rgba(var(--gx-saber),.8)!important;
  animation:gx-acende .9s cubic-bezier(.2,.9,.3,1) .5s both!important;
}
html[data-galaxia] .visitor-mode #phone-screen .content-row:nth-of-type(2) .phone-contact::after{animation-delay:.75s!important}
html[data-galaxia] .visitor-mode #phone-screen .phone-menu:hover{
  border-color:rgba(var(--gx-saber),.7)!important;box-shadow:0 0 18px -4px rgba(var(--gx-saber),.7)!important}

@keyframes gx-gira{to{transform:rotate(360deg)}}
@keyframes gx-acende{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* cursor de sabre no computador (a imagem é montada pelo script na cor do tema) */
@media (pointer:fine){
  html[data-galaxia] body.visitor-mode,
  html[data-galaxia] body.visitor-mode *{cursor:var(--gx-cursor,auto)!important}
}