/* Base: reset, design tokens, page layout, canvas and backglass frame. */
/* Exo 2 (SIL Open Font License 1.1, see ../fonts/OFL.txt): variable font, local copy, no external requests. */
/* cyrillic-ext */
@font-face{font-family:"Exo 2";font-style:italic;font-weight:600 900;font-display:swap;
  src:url(../fonts/exo2-italic-cyrillic-ext.woff2) format("woff2");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face{font-family:"Exo 2";font-style:italic;font-weight:600 900;font-display:swap;
  src:url(../fonts/exo2-italic-cyrillic.woff2) format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* vietnamese */
@font-face{font-family:"Exo 2";font-style:italic;font-weight:600 900;font-display:swap;
  src:url(../fonts/exo2-italic-vietnamese.woff2) format("woff2");
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
/* latin-ext */
@font-face{font-family:"Exo 2";font-style:italic;font-weight:600 900;font-display:swap;
  src:url(../fonts/exo2-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face{font-family:"Exo 2";font-style:italic;font-weight:600 900;font-display:swap;
  src:url(../fonts/exo2-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* cyrillic-ext */
@font-face{font-family:"Exo 2";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/exo2-normal-cyrillic-ext.woff2) format("woff2");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face{font-family:"Exo 2";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/exo2-normal-cyrillic.woff2) format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* vietnamese */
@font-face{font-family:"Exo 2";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/exo2-normal-vietnamese.woff2) format("woff2");
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
/* latin-ext */
@font-face{font-family:"Exo 2";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/exo2-normal-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face{font-family:"Exo 2";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/exo2-normal-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font:14px system-ui,sans-serif}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: a mesa vertical ao centro; no desktop o backglass (arte + visor de pontos, com os botões embaixo) encosta à esquerda; no celular o visor e os botões ficam acima da mesa.
   Visual de gabinete de fliperama: vidro fumê, moldura cromada e neon. --neon muda por mesa. */
:root{
  --room:#050a16;
  --neon:#38e8ff;
  --neon-soft:color-mix(in srgb,var(--neon) 35%,transparent);
  --hot:#ffb347;
  --glass:rgba(7,16,34,.86);
  --text:#ffffff;
  --text-soft:#9fc6dc;
  --chrome:linear-gradient(180deg,#f4f7fb 0%,#8e9aac 42%,#eef2f7 52%,#5a6576 100%);
  --f-plate:"Exo 2","Segoe UI",system-ui,sans-serif;
  --f-text:"Exo 2","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%;}
body{background:var(--room);color:var(--text);font-family:var(--f-text);overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;}
#app{position:fixed;inset:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:radial-gradient(90% 75% at 50% 45%,rgba(6,12,26,.05) 0%,rgba(4,8,18,.32) 60%,rgba(2,4,10,.7) 100%);touch-action:none;}
canvas#cv{position:absolute;display:block;touch-action:none;border-radius:8px;
  box-shadow:0 0 0 3px #b4bfcc,0 0 0 5px #0a0f18,0 0 34px var(--neon-soft),0 30px 70px rgba(0,0,0,.7);transition:filter .35s;}
/* com painel aberto (escolha, pausa, fim) a mesa apaga e desfoca um pouco, para o cartão não brigar com a arte */
body:has(.ov:not([hidden])) canvas#cv{filter:brightness(.45) saturate(.8) blur(1.5px);}
/* no celular o visor ganha a largura do botão Som, que continua na pausa (Som, Música, Locutor) */
body:not(.wide) #btnMute{display:none;} body:not(.wide) #btns{gap:8px;}
#back,#btns{position:absolute;}
#back canvas{display:block;}
#dmd{border-radius:9px;background:#0d0805;}
#bgArt{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:9px 9px 0 0;margin-bottom:6px;}
#bgArt[hidden]{display:none;}
/* celular e tablet em pé: a mesa usa a largura toda (o respiro de 16 px roubava 5 % da mesa) */
@media (max-width:851px),(max-aspect-ratio:115/100){#app{padding-left:max(6px,env(safe-area-inset-left,0px));padding-right:max(6px,env(safe-area-inset-right,0px));}}
#back{border-radius:12px;border:3px solid transparent;
  background:linear-gradient(#05080f,#05080f) padding-box,var(--chrome) border-box;
  box-shadow:0 0 0 1px #000,0 0 26px var(--neon-soft),0 20px 50px rgba(0,0,0,.6);}
/* painel de vidro com moldura cromada */
.ovIn{border:3px solid transparent;border-radius:16px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--neon) 14%,#0a1222),rgba(7,16,34,.94) 45%,rgba(4,9,20,.97)) padding-box,var(--chrome) border-box;
  box-shadow:0 0 0 1px #000,0 0 24px var(--neon-soft),inset 0 0 28px color-mix(in srgb,var(--neon) 12%,transparent),0 20px 50px rgba(0,0,0,.6);}
.ovIn::before{content:"";position:absolute;inset:6px;border-radius:11px;border:1px solid color-mix(in srgb,var(--neon) 40%,transparent);
  box-shadow:inset 0 0 12px color-mix(in srgb,var(--neon) 15%,transparent);pointer-events:none;}
/* End of css/base.css */