:root{
  --page:#020309;
  --gold:#f2cb66;
  --violet:#b05cff;
}
*{box-sizing:border-box}
html,body{
  width:100%;
  min-height:100%;
  margin:0;
  background:var(--page);
}
body{
  overflow:hidden;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
button{font:inherit}
.app{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 48%,rgba(91,40,147,.18),transparent 48%),
    #020309;
}
.stage{
  position:relative;
  width:min(100vw,calc(100vh * 1.5));
  aspect-ratio:3/2;
  overflow:hidden;
  isolation:isolate;
  background:#020309;
  box-shadow:0 0 80px rgba(0,0,0,.9);
}
.home-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  display:block;
  user-select:none;
  pointer-events:none;
}
.stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 57%,rgba(189,85,255,.08),transparent 18%),
    linear-gradient(to bottom,rgba(255,255,255,.01),rgba(0,0,0,.04));
  mix-blend-mode:screen;
  animation:ambient 5.5s ease-in-out infinite;
}

/*
  As áreas clicáveis não desenham bordas.
  Isso elimina o contorno retangular desalinhado que aparecia
  principalmente na Arena e na Biblioteca.
*/
.hotspot{
  position:absolute;
  z-index:3;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  outline:0;
  margin:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  border-radius:18px;
  -webkit-tap-highlight-color:transparent;
}
.hotspot::after{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(242,203,102,.16),rgba(176,92,255,.06) 50%,transparent 74%);
  box-shadow:0 0 20px rgba(242,203,102,.16);
  transition:opacity .16s ease;
}
.hotspot:hover::after,
.hotspot:focus-visible::after{
  opacity:1;
}
.hotspot:focus-visible{
  outline:2px solid rgba(242,203,102,.65);
  outline-offset:-5px;
}
.hotspot:active::after{
  opacity:.65;
}

/* Hotspots revisados */
.hs-arena{left:26.15%;top:29.8%;width:12.35%;height:12.7%}
.hs-library{left:24.45%;top:49.75%;width:13.85%;height:12.45%}
.hs-champions{left:63.25%;top:28.55%;width:15.15%;height:16.0%}
.hs-market{left:63.15%;top:49.25%;width:15.25%;height:15.1%}
.hs-diamond{left:72.05%;top:66.0%;width:25.65%;height:15.8%}
.hs-crystal{left:44.15%;top:77.3%;width:11.55%;height:19.3%;border-radius:28px}
.hs-mission{left:1.55%;top:11.05%;width:20.05%;height:35.9%}
.hs-offer{left:1.15%;top:76.15%;width:16.85%;height:14.0%}

.hs-nav-plaza{left:10.05%;top:90.65%;width:8.55%;height:8.15%}
.hs-nav-arena{left:19.55%;top:90.65%;width:10.35%;height:8.15%}
.hs-nav-library{left:30.75%;top:90.65%;width:12.25%;height:8.15%}
.hs-nav-market{left:56.65%;top:90.65%;width:10.55%;height:8.15%}
.hs-nav-ranking{left:68.05%;top:90.65%;width:10.65%;height:8.15%}
.hs-nav-profile{left:79.55%;top:90.65%;width:10.65%;height:8.15%}

.fullscreen{
  position:fixed;
  z-index:10;
  right:max(12px,env(safe-area-inset-right));
  bottom:max(12px,env(safe-area-inset-bottom));
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(225,181,72,.62);
  border-radius:50%;
  background:rgba(5,7,14,.84);
  color:#f6d77d;
  font-size:22px;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 28px rgba(0,0,0,.42);
}
.fullscreen:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
.toast{
  position:fixed;
  z-index:20;
  left:50%;
  bottom:max(20px,env(safe-area-inset-bottom));
  max-width:min(88vw,560px);
  transform:translate(-50%,18px);
  opacity:0;
  pointer-events:none;
  padding:12px 18px;
  border:1px solid rgba(233,186,70,.75);
  border-radius:12px;
  background:rgba(6,8,16,.95);
  color:#fff2c0;
  text-align:center;
  box-shadow:0 12px 38px rgba(0,0,0,.65),0 0 24px rgba(151,58,255,.2);
  transition:opacity .22s ease,transform .22s ease;
}
.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}
@keyframes ambient{50%{opacity:.72}}
@media(max-aspect-ratio:3/2){
  .stage{width:100vw;height:auto}
}
@media(min-aspect-ratio:3/2){
  .stage{height:100vh;width:auto}
}
@media(max-width:700px){
  .fullscreen{width:38px;height:38px;font-size:19px}
  .toast{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .stage::after{animation:none}
  .hotspot::after,.toast{transition:none}
}

/* ===== Interface funcional v3.0 ===== */
.screen-backdrop{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:rgba(1,2,8,.72);backdrop-filter:blur(8px);opacity:0;transition:opacity .18s ease}.screen-backdrop[hidden]{display:none}.screen-backdrop.open{opacity:1}.game-window{position:relative;width:min(900px,96vw);max-height:min(820px,92vh);overflow:auto;border:1px solid rgba(242,203,102,.62);border-radius:22px;padding:clamp(22px,4vw,42px);background:linear-gradient(145deg,rgba(20,16,39,.98),rgba(5,9,21,.98));box-shadow:0 28px 90px rgba(0,0,0,.75),0 0 48px rgba(176,92,255,.18);color:#fff}.game-window::before{content:"";position:absolute;inset:7px;border:1px solid rgba(242,203,102,.14);border-radius:16px;pointer-events:none}.close-screen{position:absolute;z-index:2;right:16px;top:13px;width:42px;height:42px;border:1px solid rgba(242,203,102,.42);border-radius:50%;background:#11152a;color:#f9dd91;font-size:27px;cursor:pointer}.window-header{text-align:center;margin-bottom:28px}.window-header h1,.quiz-head h1,.result-screen h1,.state-screen h1{font-family:Georgia,serif;color:#ffe4a0;font-size:clamp(30px,5vw,48px);margin:5px 0 8px}.window-header p,.state-screen p,.result-screen p{color:#c7cbe0}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:#b99bff;font-weight:800}.loading,.state-screen,.result-screen{min-height:320px;display:grid;place-content:center;text-align:center;gap:16px}.spinner{width:28px;height:28px;margin:auto;border:3px solid rgba(255,255,255,.18);border-top-color:#f2cb66;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.setup-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.setup-form label,.setup-form fieldset{display:grid;gap:8px;margin:0;color:#ece7ff;font-weight:700}.setup-form select{border:1px solid #59477d;background:#0b1020;color:white;border-radius:10px;padding:12px}.setup-form fieldset{grid-column:1/-1;border:1px solid #443764;border-radius:14px;padding:16px}.choice-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.choice-row label{cursor:pointer}.choice-row input{position:absolute;opacity:0}.choice-row span{display:block;text-align:center;padding:12px;border:1px solid #4c4168;border-radius:10px;background:#10152a}.choice-row input:checked+span{border-color:#f2cb66;background:rgba(176,92,255,.24);box-shadow:0 0 18px rgba(176,92,255,.2)}.primary-action,.secondary-action{border:0;border-radius:11px;padding:14px 20px;font-weight:900;cursor:pointer}.primary-action{grid-column:1/-1;background:linear-gradient(135deg,#e8ba49,#fff0ae);color:#241800;box-shadow:0 8px 24px rgba(232,186,73,.22)}.secondary-action{background:#252c44;color:#fff}.quiz-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.quiz-head h1{font-size:clamp(26px,4vw,40px)}.score{padding:10px 14px;border:1px solid #5d4b82;border-radius:99px;color:#ffe7a9}.progress{height:7px;margin:16px 0 24px;border-radius:99px;background:#202740;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,#a45cff,#f2cb66);transition:width .3s ease}.question-card h2{font-size:clamp(21px,3vw,31px);line-height:1.35;margin:24px 0}.question-meta{display:flex;gap:8px;flex-wrap:wrap}.question-meta span{padding:6px 10px;border-radius:99px;background:#242845;color:#cdd2e9;font-size:12px;text-transform:capitalize}.answers{display:grid;gap:12px}.answer{display:grid;grid-template-columns:42px 1fr;align-items:center;text-align:left;gap:12px;width:100%;padding:13px;border:1px solid #3d4665;border-radius:13px;background:#11172b;color:#fff;cursor:pointer;transition:.15s}.answer:hover:not(:disabled){transform:translateY(-1px);border-color:#a46be8}.answer b{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#29204a;color:#ffe3a0}.answer.correct{border-color:#48cc8a;background:#123627}.answer.wrong{border-color:#ee6675;background:#431d28}.feedback{margin-top:18px;padding:17px;border-radius:13px}.feedback.good{background:#123627;border:1px solid #48cc8a}.feedback.bad{background:#431d28;border:1px solid #ee6675}.feedback p{color:#e8e8f4}.feedback .primary-action{margin-top:8px;width:100%}.result-crystal{font-size:72px;color:#bf74ff;text-shadow:0 0 35px #8c3fda}.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.catalog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.catalog-card{display:grid;gap:7px;text-align:left;padding:20px;border:1px solid #443764;border-radius:14px;background:#10152a;color:#fff;cursor:pointer}.catalog-card:hover{border-color:#f2cb66}.catalog-card span,.catalog-card small{color:#adb5cf}.catalog-card strong{font-size:20px;color:#ffe4a0}@media(max-width:650px){.screen-backdrop{padding:8px}.game-window{padding:25px 18px;border-radius:15px}.setup-form{grid-template-columns:1fr}.setup-form fieldset,.primary-action{grid-column:auto}.choice-row{grid-template-columns:1fr 1fr}.quiz-head{align-items:flex-start;flex-direction:column}.catalog-grid{grid-template-columns:1fr}}
/* Biblioteca v3.1 */
.library-toolbar{display:flex;gap:10px;overflow:auto;padding:2px 2px 16px;margin-bottom:6px}.library-subject{flex:0 0 auto;display:grid;gap:4px;text-align:left;min-width:170px;padding:13px 15px;border:1px solid #443764;border-radius:12px;background:#10152a;color:#fff;cursor:pointer}.library-subject span{font-size:12px;color:#adb5cf}.library-subject.active,.library-subject:hover{border-color:#f2cb66;background:rgba(176,92,255,.16)}.library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.study-card{display:flex;flex-direction:column;align-items:flex-start;padding:20px;border:1px solid #3d4161;border-radius:15px;background:linear-gradient(145deg,#11162b,#0d1224)}.study-card h2{margin:14px 0 8px;color:#ffe4a0;font-size:22px}.study-card p{color:#c8cce0;line-height:1.55;flex:1}.study-card .primary-action{width:100%;margin-top:10px}.study-meta{display:flex;gap:7px;flex-wrap:wrap}.study-meta span{padding:5px 8px;border-radius:99px;background:#242845;color:#cdd2e9;font-size:11px}.lesson-view{max-width:780px;margin:auto}.lesson-view>header{padding:8px 0 20px;border-bottom:1px solid #343653}.lesson-view h1{font-family:Georgia,serif;color:#ffe4a0;font-size:clamp(32px,5vw,48px);margin:8px 0}.lesson-summary{font-size:18px;line-height:1.6;color:#c9cde0}.text-action{border:0;background:transparent;color:#c9adff;cursor:pointer;padding:0 0 18px;font-weight:800}.lesson-section{margin-top:24px;padding:22px;border:1px solid #343b5a;border-radius:15px;background:#10152a}.lesson-section h2{margin:0 0 14px;color:#ffe4a0}.lesson-text{color:#e5e6f1;line-height:1.75}.lesson-example{border-color:#59477d;background:rgba(60,37,92,.28)}.lesson-tip{margin-top:18px;padding:18px;border:1px solid rgba(242,203,102,.55);border-radius:14px;background:rgba(242,203,102,.09);color:#fff1c1}.lesson-tip strong{display:block;margin-bottom:7px;color:#f2cb66}.lesson-actions{display:grid;grid-template-columns:1.5fr 1fr;gap:10px;margin-top:22px}.lesson-actions .primary-action{grid-column:auto}@media(max-width:650px){.library-grid{grid-template-columns:1fr}.lesson-actions{grid-template-columns:1fr}.library-subject{min-width:150px}}

/* Cristal do Saber — mapa do site */
.site-map-grid .catalog-card{min-height:135px}.site-map-grid .catalog-card small{line-height:1.45}