:root{--bg-color: #000000;--text-main: #ededed;--text-secondary: #888888;--panel-bg: rgba(18, 18, 18, .75);--panel-border: rgba(255, 255, 255, .12);--panel-hover: rgba(30, 30, 30, .85);--accent-color: #38bdf8;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}[data-theme=light]{--bg-color: #f7f6f2;--text-main: #191919;--text-secondary: #707072;--panel-bg: rgba(255, 255, 255, .75);--panel-border: rgba(0, 0, 0, .08);--panel-hover: rgba(255, 255, 255, .95);--accent-color: #2563eb}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--bg-color);font-family:var(--font-family);color:var(--text-main);transition:background-color .4s ease,color .4s ease;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:manipulation}canvas.webgl{position:fixed;top:0;left:0;width:100vw;height:100vh;outline:none;z-index:1;touch-action:none}.ui-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:2.2rem 2.8rem}.brand-header{display:flex;justify-content:space-between;align-items:center;pointer-events:auto}.brand-title{display:flex;flex-direction:column;gap:.2rem}.brand-title h1{font-size:1.05rem;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:.6rem}.brand-title h1 .badge{font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:999px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--accent-color)}.brand-title p{font-size:.8rem;color:var(--text-secondary)}.header-actions{display:flex;gap:.75rem;align-items:center}.character-switcher{display:inline-flex;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:999px;padding:3px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);pointer-events:auto}.switch-btn{background:transparent;border:none;outline:none;color:var(--text-secondary);font-size:.78rem;font-weight:500;padding:.4rem .85rem;border-radius:999px;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);display:inline-flex;align-items:center;gap:.4rem}.switch-btn:hover{color:var(--text-main)}.switch-btn.active{background:#ffffff1f;color:#fff;box-shadow:0 1px 4px #0006}[data-theme=light] .switch-btn.active{background:#00000014;color:#000;box-shadow:0 1px 3px #0000001a}.btn-pill{pointer-events:auto;cursor:pointer;background:var(--panel-bg);border:1px solid var(--panel-border);color:var(--text-main);padding:.45rem .95rem;border-radius:999px;font-size:.8rem;font-weight:500;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:inline-flex;align-items:center;gap:.4rem;transition:transform .2s cubic-bezier(.16,1,.3,1),background-color .2s ease,border-color .2s ease}.btn-pill:hover{transform:translateY(-2px);background:var(--panel-hover);border-color:#ffffff40}.btn-pill:active{transform:translateY(0)}.portal-footer{display:flex;justify-content:space-between;align-items:flex-end;pointer-events:auto}.guide-pill{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:.55rem 1.15rem;border-radius:999px;display:flex;align-items:center;gap:.75rem;font-size:.78rem;color:var(--text-secondary)}.guide-pill strong{color:var(--text-main);font-weight:500}.pulse-dot{width:6px;height:6px;border-radius:50%;background-color:#10b981;box-shadow:0 0 #10b981b3;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #10b981b3}70%{transform:scale(1);box-shadow:0 0 0 6px #10b98100}to{transform:scale(.95);box-shadow:0 0 #10b98100}}.stats-card{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:.55rem .95rem;border-radius:.75rem;font-size:.72rem;color:var(--text-secondary);display:flex;flex-direction:column;gap:.2rem;text-align:right;letter-spacing:.02em}.stats-card span.stat-val{color:var(--text-main);font-weight:500;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-color);z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;transition:opacity .5s cubic-bezier(.16,1,.3,1),visibility .5s}.loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-spinner{width:32px;height:32px;border:2px solid rgba(255,255,255,.1);border-top-color:var(--accent-color);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.quick-actions{display:flex;align-items:center;gap:.65rem}.mobile-guide{display:none}@media (max-width: 768px){.ui-overlay{padding:max(1.1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1.1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}.brand-header{flex-direction:column;align-items:center;gap:.75rem;text-align:center}.brand-title{align-items:center}.brand-title h1{font-size:.95rem}.brand-title p{font-size:.74rem}.header-actions{flex-direction:column;width:100%;max-width:380px;gap:.5rem}.character-switcher{width:100%;display:flex}.switch-btn{flex:1;justify-content:center;padding:.45rem .6rem;font-size:.75rem}.quick-actions{display:flex;width:100%;gap:.5rem}.quick-actions .btn-pill{flex:1;justify-content:center;padding:.45rem .6rem;font-size:.75rem}.portal-footer{flex-direction:column;align-items:center;gap:.5rem;width:100%}.desktop-guide{display:none}.mobile-guide{display:inline}.guide-pill{width:100%;max-width:380px;justify-content:center;text-align:center;font-size:.74rem;padding:.5rem .85rem}.stats-card{display:none}}