/* Layout: app de celular em tela cheia; cenário sombrio atrás de tudo, painéis e navegação em vidro escuro por cima. Visual único, escuro e sangrento, por escolha. */
:root{
  --ink:#F2E9EE; --ink2:#A596B4; --white:#FFFFFF; --soft:#120D18; --line:#3B2C48; --surf:#1D1526; --surf2:#2B2036;
  --accent:#E0243A; --accent-d:#8E0F20; --pink:#FF2E6D; --blue:#9B5CFF; --green:#2FBF71; --gold:#F5B400; --red:#FF2A44;
  --sky1:#1A0B1F; --sky2:#4A0E1E; --grass:#3A2E45; --grass2:#241B2D;
  --f-display:"Baloo 2","Trebuchet MS",system-ui,sans-serif; --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-horror:"Creepster","Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
[hidden]{display:none!important}
/* comportamento de app no celular: a página nunca rola nem dá zoom (só os painéis internos rolam), sem seleção de texto nem menu de toque longo */
html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;overscroll-behavior:none}
body{position:fixed;inset:0;overflow:hidden;margin:0;background:#050308;color:var(--ink);font-family:var(--f-body);font-size:15px;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
*{touch-action:manipulation}
svg,img{-webkit-user-drag:none}
input,textarea{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}
html.fitw input,html.fitw textarea{font-size:var(--fs-in,16px)!important}
*{box-sizing:border-box}
button{font-family:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* --vvh: altura visível com o teclado aberto (definida no script); fora isso, a tela toda */
.shell{height:var(--vvh,100%);display:flex;justify-content:center;padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px)}
.rot{display:none;position:fixed;inset:0;z-index:200;background:#050308;color:var(--ink);flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;font-weight:800}
.rot svg{width:56px;height:56px;color:var(--accent)}
.rot b{font-family:var(--f-display);font-size:22px}
.rot span{color:var(--ink2);font-size:14px}
@media (orientation:landscape) and (max-height:480px) and (min-width:560px){.rot{display:flex}}
.app{position:relative;width:100%;max-width:440px;height:100%;overflow:hidden;background:var(--sky1)}
@media (min-width:480px){.shell{padding-block:14px}.app{border-radius:34px;box-shadow:0 30px 80px rgba(0,0,0,.5)}}
.glass{background:rgba(20,12,26,.6);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 26px rgba(0,0,0,.5)}