@charset "UTF-8";[hidden]{display:none!important}.spatial-app{position:fixed!important;inset:0!important;z-index:99999!important;box-sizing:border-box;width:100vw!important;height:100dvh!important;max-height:100dvh!important;min-height:100dvh!important;padding:clamp(8px,1.4vh,16px) clamp(12px,1.6vw,24px)!important;margin:0!important;overflow:hidden!important;color:#0f172a;background:#0f172a;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-moz-user-select:none;user-select:none;-webkit-user-select:none}.spatial-app *,.spatial-app *:before,.spatial-app *:after{box-sizing:border-box}.spatial-ambient-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}.ambient-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.65;animation:ambientFloat 14s infinite alternate ease-in-out}.blob-1{width:550px;height:550px;top:-120px;left:-100px;background:radial-gradient(circle,#38bdf8,#818cf8)}.blob-2{width:500px;height:500px;bottom:-100px;right:-80px;background:radial-gradient(circle,#34d399,#60a5fa);animation-delay:-5s}.blob-3{width:420px;height:420px;top:35%;right:25%;background:radial-gradient(circle,#f472b6,#fbbf24);opacity:.35;animation-delay:-9s}@keyframes ambientFloat{0%{transform:translate(0) scale(1)}50%{transform:translate(35px,25px) scale(1.08)}to{transform:translate(-25px,-30px) scale(.95)}}.spatial-container{position:relative;z-index:1;display:flex;flex-direction:column;width:min(1280px,100%);height:100%;max-height:100%;margin:0 auto;overflow:hidden}.spatial-nav-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:clamp(6px,1vh,10px) clamp(10px,1.4vw,16px);margin-bottom:clamp(6px,1vh,10px);border:1px solid rgba(255,255,255,.4);border-radius:20px;background:#ffffffd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 10px 30px #0000001f,inset 0 1px #fffc;flex-shrink:0}.nav-cluster{display:flex;align-items:center;gap:8px}.nav-cluster-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}.nav-phase-badge{color:#0f172a;font-size:clamp(12.5px,1.6vh,15px);font-weight:900;letter-spacing:-.01em}.nav-stats-pill{color:#0284c7;font-size:clamp(11px,1.3vh,12px);font-weight:800;letter-spacing:.02em;background:#e0f2fe;padding:2px 10px;border-radius:999px;border:1px solid #bae6fd}.nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:clamp(34px,4.5vh,40px);padding:0 clamp(10px,1.2vw,14px);border:1px solid transparent;border-radius:14px;font-size:clamp(11.5px,1.4vh,13px);font-weight:800;text-decoration:none;cursor:pointer;white-space:nowrap;transition:all .18s cubic-bezier(.4,0,.2,1)}.nav-icon{width:16px;height:16px;flex-shrink:0}.nav-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0000001f}.nav-btn:active{transform:translateY(0)}.nav-btn-back{color:#334155;background:#f1f5f9;border-color:#e2e8f0}.nav-btn-guide{color:#4338ca;background:#e0e7ff;border-color:#c7d2fe}.nav-btn-sound{color:#fff;background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px #2563eb40}.nav-btn-slow{color:#065f46;background:#d1fae5;border-color:#a7f3d0}.nav-btn-slow.is-active{color:#fff;background:linear-gradient(135deg,#059669,#047857);box-shadow:0 4px 12px #05966959}.nav-btn-restart{color:#9f1239;background:#ffe4e6;border-color:#fecdd3}.nav-btn-fullscreen{color:#fff;background:linear-gradient(135deg,#0f766e,#115e59);box-shadow:0 4px 12px #0f766e40}.spatial-progress-track{height:6px;border-radius:999px;background:#ffffff40;overflow:hidden;margin-bottom:clamp(6px,1vh,10px);flex-shrink:0;box-shadow:inset 0 1px 2px #0003}.spatial-progress-fill{position:relative;width:1%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#10b981,#38bdf8,#a855f7);transition:width .4s cubic-bezier(.34,1.56,.64,1)}.progress-glow{position:absolute;top:0;right:0;bottom:0;width:20px;background:#fff;filter:blur(3px);opacity:.8}.spatial-hero-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(24px,3.5vh,48px);border:1px solid rgba(255,255,255,.6);border-radius:32px;background:#fffffff0;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 24px 60px #00000040;text-align:center;overflow:hidden}.hero-badge{display:inline-block;padding:6px 16px;margin-bottom:12px;border-radius:999px;color:#4338ca;background:#e0e7ff;border:1px solid #c7d2fe;font-size:13px;font-weight:850;letter-spacing:.04em;text-transform:uppercase}.hero-icon-wrap{width:clamp(64px,8vh,88px);height:clamp(64px,8vh,88px);margin-bottom:10px}.hero-compass-icon{width:100%;height:100%;filter:drop-shadow(0 8px 16px rgba(2,132,199,.25))}.hero-title{margin:0 0 8px;color:#0f172a;font-size:clamp(2rem,4.5vh,3.4rem);font-weight:950;letter-spacing:-.04em;line-height:1.1}.hero-desc{max-width:580px;margin:0 auto 20px;color:#475569;font-size:clamp(14px,1.8vh,16.5px);line-height:1.55}.hero-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}.hero-tag{padding:6px 14px;border-radius:12px;color:#334155;background:#f1f5f9;border:1px solid #e2e8f0;font-size:12.5px;font-weight:800}.btn-play-primary{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:10px;padding:0 36px;border:0;border-radius:18px;color:#fff;background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 10px 28px #16a34a59;font-size:16px;font-weight:900;text-decoration:none;cursor:pointer;transition:all .18s ease}.btn-play-primary svg{width:20px;height:20px;fill:currentColor}.btn-play-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 36px #16a34a73}.btn-secondary-link{display:inline-flex;min-height:52px;align-items:center;justify-content:center;padding:0 26px;border:1px solid #cbd5e1;border-radius:18px;color:#334155;background:#fff;font-size:15px;font-weight:800;text-decoration:none;cursor:pointer}.spatial-main-card{flex:1 1 auto;min-height:0;height:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:clamp(14px,1.8vw,24px);align-items:stretch;padding:clamp(12px,1.6vh,20px);border:1px solid rgba(255,255,255,.7);border-radius:28px;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 50px #00000026,inset 0 1px #ffffffe6;overflow:hidden}.spatial-stage-column{display:flex;align-items:center;justify-content:center;height:100%;min-height:0}.stage-frame{width:100%;height:100%;max-height:100%;display:flex;align-items:center;justify-content:center;border:4px solid #1e293b;border-radius:24px;background:#fff;box-shadow:0 12px 30px #0f172a1f;overflow:hidden}.stage-svg-canvas{display:block;width:100%;height:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.spatial-control-column{display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:0;padding:2px 0}.control-header{text-align:left;flex-shrink:0;margin-bottom:clamp(4px,1vh,10px)}.scene-pill{display:inline-block;padding:3px 12px;margin-bottom:4px;border-radius:999px;color:#0369a1;background:#e0f2fe;border:1px solid #bae6fd;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.03em}.target-question{margin:2px 0 4px;color:#0f172a;font-size:clamp(1.4rem,2.6vh,2.1rem);font-weight:950;letter-spacing:-.03em;line-height:1.15}.target-hint{margin:0;color:#64748b;font-size:clamp(12px,1.4vh,14.5px);font-weight:600}.spatial-tactile-grid{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1.2vh,14px);align-content:center;margin:clamp(4px,.8vh,10px) 0}.spatial-option-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:clamp(64px,9vh,90px);padding:clamp(6px,1vh,10px) 12px;border:3px solid #cbd5e1;border-radius:20px;color:#0f172a;background:#fff;box-shadow:0 5px #cbd5e1,0 10px 20px #0f172a0f;font:inherit;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.spatial-option-visual{display:flex;align-items:center;justify-content:center;width:100%}.spatial-diagram-svg{width:clamp(38px,5.5vh,52px);height:clamp(38px,5.5vh,52px);display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.08));transition:transform .15s ease}.spatial-option-btn:hover .spatial-diagram-svg{transform:scale(1.1)}.spatial-option-text{font-size:clamp(12.5px,1.6vh,15px);font-weight:950;letter-spacing:.02em;line-height:1.1;text-align:center}.spatial-option-btn[data-concept=dentro]{border-color:#60a5fa;background:linear-gradient(180deg,#fff,#eff6ff);color:#1d4ed8;box-shadow:0 5px #3b82f6,0 10px 20px #3b82f626}.spatial-option-btn[data-concept=fora]{border-color:#fb923c;background:linear-gradient(180deg,#fff,#fff7ed);color:#c2410c;box-shadow:0 5px #f97316,0 10px 20px #f9731626}.spatial-option-btn[data-concept=em_cima]{border-color:#4ade80;background:linear-gradient(180deg,#fff,#f0fdf4);color:#15803d;box-shadow:0 5px #22c55e,0 10px 20px #22c55e26}.spatial-option-btn[data-concept=embaixo]{border-color:#c084fc;background:linear-gradient(180deg,#fff,#faf5ff);color:#7e22ce;box-shadow:0 5px #a855f7,0 10px 20px #a855f726}.spatial-option-btn[data-concept=direita]{border-color:#38bdf8;background:linear-gradient(180deg,#fff,#f0f9ff);color:#0369a1;box-shadow:0 5px #0284c7,0 10px 20px #0284c726}.spatial-option-btn[data-concept=esquerda]{border-color:#f472b6;background:linear-gradient(180deg,#fff,#fdf2f8);color:#be185d;box-shadow:0 5px #ec4899,0 10px 20px #ec489926}.spatial-option-btn[data-concept=ao_lado]{border-color:#2dd4bf;background:linear-gradient(180deg,#fff,#f0fdfa);color:#0f766e;box-shadow:0 5px #14b8a6,0 10px 20px #14b8a626}.spatial-option-btn[data-concept=entre]{border-color:#fbbf24;background:linear-gradient(180deg,#fff,#fffbeb);color:#b45309;box-shadow:0 5px #f59e0b,0 10px 20px #f59e0b26}.spatial-option-btn:hover:not(:disabled){transform:translateY(-2px)}.spatial-option-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px #0003,0 2px 4px #0000001a}.spatial-option-btn.is-correct{border-color:#16a34a!important;color:#14532d!important;background:#bbf7d0!important;box-shadow:0 5px #15803d,0 12px 28px #16a34a66!important;animation:correctCelebration .45s ease}.spatial-option-btn.is-wrong{border-color:#e11d48!important;color:#881337!important;background:#ffe4e6!important;box-shadow:0 5px #be123c!important;animation:wrongShake .35s ease}.spatial-option-btn:disabled{cursor:default}.feedback-banner{flex-shrink:0;min-height:clamp(34px,4.5vh,44px);display:flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0}.feedback-text{margin:0;color:#15803d;font-size:clamp(12.5px,1.6vh,15px);font-weight:900;text-align:center;line-height:1.25}.spatial-modal-backdrop{position:fixed;inset:0;z-index:100001;display:flex;align-items:center;justify-content:center;padding:20px;background:#0f172abf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.spatial-modal-card{max-width:880px;width:100%;max-height:90vh;overflow-y:auto;padding:clamp(20px,3vh,32px);border-radius:28px;background:#fff;box-shadow:0 25px 60px #0000004d}.spatial-modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.modal-badge{display:inline-block;color:#4338ca;background:#e0e7ff;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase;margin-bottom:4px}.modal-title-group h2{margin:0;color:#0f172a;font-size:clamp(18px,2.5vh,24px);font-weight:900}.modal-close-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:12px;color:#e11d48;background:#ffe4e6;cursor:pointer;transition:background .15s ease}.modal-close-btn svg{width:20px;height:20px}.modal-close-btn:hover{background:#fecdd3}.spatial-modal-subtitle{margin:0 0 18px;color:#64748b;font-size:14px}.spatial-modal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.guide-card{padding:14px;border-radius:18px;border:2.5px solid #e2e8f0;text-align:center;display:flex;flex-direction:column;align-items:center}.guide-card-icon{width:52px;height:52px;margin-bottom:6px}.guide-card-icon svg{width:100%;height:100%}.guide-card strong{display:block;font-size:14px;font-weight:900;margin-bottom:4px}.guide-card p{margin:0;color:#475569;font-size:12px;line-height:1.4}.guide-card.card-dentro{background:#eff6ff;border-color:#93c5fd}.guide-card.card-fora{background:#fff7ed;border-color:#fed7aa}.guide-card.card-em-cima{background:#f0fdf4;border-color:#86efac}.guide-card.card-embaixo{background:#faf5ff;border-color:#d8b4fe}.guide-card.card-direita{background:#f0fdfa;border-color:#7dd3fc}.guide-card.card-esquerda{background:#fdf2f8;border-color:#fbcfe8}.guide-card.card-ao-lado{background:#f0fdfa;border-color:#99f6e4}.guide-card.card-entre{background:#fffbeb;border-color:#fed7aa}.spatial-finish-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(24px,4vh,48px);border-radius:32px;background:#fffffff5;box-shadow:0 24px 60px #00000026;text-align:center;overflow:hidden}.finish-trophy-wrap{font-size:clamp(48px,7vh,72px);line-height:1;margin-bottom:8px;filter:drop-shadow(0 10px 20px rgba(234,179,8,.35))}.finish-title{margin:2px 0 6px;color:#15803d;font-size:clamp(1.8rem,4vh,3rem);font-weight:950;line-height:1.1}.finish-subtitle{margin:0 0 8px;color:#0f172a;font-size:clamp(1.2rem,2.4vh,1.8rem);font-weight:850}.finish-details{max-width:520px;margin:0 auto 20px;color:#64748b;font-size:clamp(13px,1.7vh,16px);line-height:1.5}.finish-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}@keyframes correctCelebration{0%{transform:scale(1)}50%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes wrongShake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@media(max-width:900px){.spatial-app{padding:6px 8px!important}.spatial-nav-bar{padding:6px 8px;gap:6px;margin-bottom:4px}.nav-cluster-center{display:none}.nav-btn{padding:0 8px;min-height:32px}.nav-btn-text{display:none}.spatial-main-card{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:8px;padding:8px 10px;border-radius:20px}.control-header{text-align:center;margin-bottom:2px}.target-question{font-size:17px}.stage-frame{border-radius:18px;max-height:220px;border-width:3px}.spatial-tactile-grid{grid-template-columns:repeat(2,1fr);gap:6px;margin:4px 0}.spatial-option-btn{min-height:52px;padding:4px 8px;border-radius:14px}.spatial-diagram-svg{width:30px;height:30px}.spatial-option-text{font-size:11px}.feedback-banner{min-height:30px;padding:4px 8px}.feedback-text{font-size:11.5px}}
