/* ==========================================================================
   SadeVerse — 3D game shell UI
   ========================================================================== */

html, body{ height:100%; }
body.sv-no-scroll{ overflow:hidden; }

/* Elementos alternados via JS com `.hidden = true/false` (welcome, help, panel)
   também definem `display` explícito para quando visíveis; sem esta regra, a
   cascata do navegador aplicaria a regra de autor (display:flex) por cima da
   regra padrão do user-agent para [hidden] (display:none), deixando o
   elemento sempre visível mesmo com o atributo `hidden` presente. */
[hidden]{ display:none !important; }

.sv-game{ position:relative; width:100%; height:100vh; height:100dvh; background: var(--sv-bg); overflow:hidden; }
.sv-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* Loading */
.sv-loading{
  position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 30%, #10182c, var(--sv-bg));
  transition: opacity .5s ease, visibility .5s ease;
}
.sv-loading.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.sv-loading-inner{ text-align:center; }
.sv-loading-logo{ font-family: var(--sv-font-mono); font-size:1.4rem; letter-spacing:.05em; margin-bottom:22px; color:var(--sv-accent); }
.sv-loading-bar{ width:240px; height:6px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; margin:0 auto 14px; }
.sv-loading-bar span{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--sv-accent), var(--sv-accent-2)); transition: width .25s ease; }
.sv-loading-hint{ color: var(--sv-text-dim); font-size:.85rem; }

/* Modals (welcome / help) */
.sv-modal{
  position:absolute; inset:0; z-index:55; display:flex; align-items:center; justify-content:center;
  background: rgba(3,5,10,.72); backdrop-filter: blur(6px); padding:24px;
}
.sv-modal-box{
  max-width:520px; width:100%; background: var(--sv-panel); border:1px solid var(--sv-panel-border);
  border-radius: var(--sv-radius); padding:34px; box-shadow: var(--sv-shadow); text-align:left;
}
.sv-modal-welcome .sv-modal-box{ text-align:center; }
.sv-controls-hint{ display:grid; gap:8px; margin:18px 0; font-size:.9rem; color: var(--sv-text-dim); text-align:left; }
.sv-controls-hint kbd{
  display:inline-block; min-width:22px; text-align:center; padding:2px 6px; margin-right:2px;
  border-radius:6px; background: rgba(255,255,255,.08); border:1px solid var(--sv-panel-border);
  font-family: var(--sv-font-mono); font-size:.78rem;
}
.sv-modal-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px; }

/* HUD */
.sv-hud{ position:absolute; inset:0; z-index:30; pointer-events:none; }
.sv-hud-top{
  position:absolute; top:18px; left:18px; right:18px; display:flex; justify-content:space-between; align-items:center;
  pointer-events:auto;
}
.sv-hud-logo{
  font-size:.95rem; padding:8px 14px; border-radius:999px; background: rgba(5,7,13,.6);
  border:1px solid var(--sv-panel-border); backdrop-filter: blur(6px);
}
.sv-icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--sv-panel-border);
  background: rgba(5,7,13,.6); color:var(--sv-text); cursor:pointer; font-weight:700;
  font-size:1.05rem; line-height:1; backdrop-filter: blur(6px);
}
.sv-hud-top-actions{ display:flex; align-items:center; gap:10px; }
.sv-zoom-group{
  display:flex; align-items:center; gap:2px; padding:3px; border-radius:999px;
  background: rgba(5,7,13,.6); border:1px solid var(--sv-panel-border); backdrop-filter: blur(6px);
}
.sv-zoom-group .sv-icon-btn{ background:transparent; border:none; backdrop-filter:none; }

.sv-prompt{
  position:absolute; bottom:130px; left:50%; transform:translateX(-50%);
  background: rgba(5,7,13,.75); border:1px solid var(--sv-panel-border); border-radius:999px;
  padding:10px 18px; font-size:.9rem; backdrop-filter: blur(6px); pointer-events:none;
}
.sv-prompt kbd{
  display:inline-block; min-width:20px; text-align:center; padding:1px 6px; margin-right:4px;
  border-radius:5px; background: rgba(255,255,255,.1); font-family: var(--sv-font-mono); font-size:.75rem;
}

.sv-enter-btn{
  position:absolute; bottom:130px; left:50%; transform:translateX(-50%);
  pointer-events:auto; padding:12px 20px; border-radius:999px; border:none; cursor:pointer;
  font-weight:700; background: linear-gradient(135deg, var(--sv-accent), var(--sv-accent-2)); color:#04070d;
}

.sv-joystick{ position:absolute; bottom:28px; left:28px; pointer-events:auto; }
.sv-joystick-base{
  width:110px; height:110px; border-radius:50%; background: rgba(255,255,255,.06);
  border:1px solid var(--sv-panel-border); position:relative;
}
.sv-joystick-knob{
  position:absolute; width:46px; height:46px; border-radius:50%; top:50%; left:50%;
  transform: translate(-50%,-50%); background: linear-gradient(135deg, var(--sv-accent), var(--sv-accent-2));
}

/* Content panel */
.sv-panel{
  position:absolute; inset:0; z-index:50; display:flex; justify-content:flex-end;
  background: rgba(3,5,10,.55); backdrop-filter: blur(3px);
}
.sv-panel-box{
  width:min(560px, 100%); height:100%; background: var(--sv-panel); border-left:1px solid var(--sv-panel-border);
  padding:70px 30px 40px; overflow-y:auto; position:relative; box-shadow: var(--sv-shadow);
  animation: sv-panel-in .25s ease;
}
@keyframes sv-panel-in{ from{ transform: translateX(24px); opacity:0; } to{ transform:none; opacity:1; } }
.sv-panel-close{
  position:absolute; top:20px; right:22px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--sv-panel-border); background: rgba(255,255,255,.05); color:var(--sv-text);
  cursor:pointer; font-size:1rem;
}
.sv-panel-content h1{ font-size:1.9rem; }
.sv-panel-content .sv-back-link{ display:inline-block; margin-top:20px; color:var(--sv-accent); }

@media (max-width: 780px){
  .sv-panel-box{ width:100%; padding-top:64px; }
  .sv-modal-box{ padding:24px; }
}