/* player.css  -  /home1/maislive/tv.mais.live/assets/css/player.css  (gerado em 07/06/2026 06:15 (Brasilia, UTC-3)) */
:root{
  --accent:#e10600; --accent-2:#ff3b30; --text:#eef1f6; --muted:#9aa3b2;
  --bar-h:clamp(88px,15vh,210px);   /* faixa inferior (acompanha a altura) */
  --gap:1.4vmin;                    /* recuo padrao das bordas (consistente em qualquer orientacao) */
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#000;overflow:hidden;font-family:Arial,Helvetica,sans-serif}
.stage{position:fixed;inset:0;background:#000;overflow:hidden}
.pub-bg{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s ease;background:#0a0d14}
#video,.placeholder{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
#video{overflow:hidden;container-type:size;transition:width .55s cubic-bezier(.22,1,.36,1),height .55s cubic-bezier(.22,1,.36,1)}
/* O video sempre COBRE o seu container (16:9 ampliado e recortado), eliminando barras pretas */
#video iframe,#video video{position:absolute;top:50%;left:50%;right:auto;bottom:auto;width:max(100cqw,177.7778cqh);height:max(100cqh,56.25cqw);transform:translate(-50%,-50%);border:0}
#video iframe{pointer-events:none}
.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);background:linear-gradient(135deg,#0e1622,#0a0d14);text-align:center;padding:6vmin}
.placeholder b{color:#fff;font-size:clamp(18px,3.2vmax,40px)}

.topleft{position:absolute;top:var(--gap);left:var(--gap);z-index:8;display:flex;align-items:stretch;gap:.6vmin;max-width:calc(100% - 2*var(--gap));flex-wrap:wrap}
.clock{background:rgba(8,10,16,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:.6vmin 1vmin;display:flex;align-items:center;gap:.8vmin;color:var(--text)}
.clock .dot{width:.8vmin;height:.8vmin;min-width:7px;min-height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 10px var(--accent-2);animation:pulse 2s infinite}
.clock .time{font-size:clamp(15px,1.9vmax,30px);font-weight:700;line-height:1}
.clock .date{font-size:clamp(9px,1.05vmax,16px);color:var(--muted);text-transform:uppercase}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.logo-bug{position:absolute;z-index:5;width:clamp(110px,15vmin,260px);display:flex;align-items:center;justify-content:center;overflow:visible;transition:opacity .4s ease,transform .4s ease}
.logo-bug img{width:100%;height:auto;max-height:clamp(110px,17vmin,280px);object-fit:contain}
.logo-bug.top-right{top:var(--gap);right:var(--gap)}
.logo-bug.top-left{top:var(--gap);left:var(--gap)}
.logo-bug.bottom-left{bottom:calc(var(--bar-h) + var(--gap));left:var(--gap)}
/* Barra (banner) atras do logo, quando uma cor de fundo e escolhida */
.logo-bug.has-bar{width:clamp(240px,33vmin,500px);aspect-ratio:3/1;display:flex;align-items:center;justify-content:center;padding:1vmin 2.4vmin;border-radius:10px}
.logo-bug.has-bar img{width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain}

/* Publicidade (takeover) em camadas conforme demarcacao (Full HD 1920x1080):
   BG = fundo de tela cheia atras de tudo (camada 1);
   video = encolhe para a area principal (camada 2);
   lateral 375x650 topo (z2), canto 500x500 fica por cima (z3), barra 1500x212 (z1).
   As zonas sao TRANSPARENTES (sem fundo proprio); o PNG de cada uma mostra o BG atras. */
.pub{position:absolute;inset:0;z-index:6;pointer-events:none}
.pub-zona{position:absolute;display:none;align-items:center;justify-content:center;overflow:hidden;color:#fff;transition:transform .5s cubic-bezier(.22,1,.36,1);will-change:transform}
.pub-zona .pub-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.pub-zona .pub-txt{position:relative;z-index:2;padding:1vmin 1.4vmin;font-weight:700;line-height:1.25;text-align:center;white-space:pre-line;text-shadow:0 1px 4px rgba(0,0,0,.85)}
.pub-lateral{top:0;right:0;width:19.5313vw;height:60.1852vh;z-index:2;transform:translateX(116%)}
.pub-lateral .pub-txt{font-size:clamp(13px,1.7vmax,26px)}
.pub-barra{left:0;bottom:0;width:78.125vw;height:19.6296vh;z-index:1;transform:translateY(116%)}
.pub-barra .pub-txt{font-size:clamp(15px,2.3vmax,38px)}
.pub-canto{right:0;bottom:0;width:26.0417vw;height:46.2963vh;z-index:3;transform:translateX(116%)}
.pub-canto .pub-txt{width:100%;font-size:clamp(12px,1.5vmax,22px);background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);align-self:flex-end}
/* Estados de ENTRADA: coluna da direita (lateral + canto) entra pela direita, barra sobe de baixo, juntos (estilo da referencia) */
body.pub-on .pub-lateral{transform:translateX(0)}
body.pub-on .pub-barra{transform:translateY(0);transition-delay:.04s}
body.pub-on .pub-canto{transform:translateX(0);transition-delay:.04s}
/* Durante a publicidade: mostra o BG de tela cheia (fade), encolhe o video para a area principal,
   e esconde logo, faixa inferior, timeline e QR */
body.pub-on .pub-bg{opacity:1}
/* Area principal do video durante o anuncio. O video COBRE a area (16:9 ampliado e recortado),
   eliminando as barras pretas laterais quando a area nao e exatamente 16:9. */
body.pub-on #video{top:0;left:0;right:auto;bottom:auto;width:calc(100% - 19.5313vw);height:calc(100% - 19.6296vh)}
/* Saida/entrada suave da UI normal quando a publicidade entra/sai (controlado por .pub-ui-out) */
body.pub-ui-out .logo-bug{opacity:0!important;transform:translateY(-14px)!important;pointer-events:none}
body.pub-ui-out .lower{transform:translateY(100%);opacity:0;pointer-events:none}
body.pub-ui-out .timeline{opacity:0;pointer-events:none}
body.pub-ui-out .qr-ctrl{opacity:0;transform:translateY(16px);pointer-events:none}

.lower{position:absolute;left:0;right:0;bottom:0;z-index:7;height:var(--bar-h);display:flex;flex-direction:column;color:var(--text);transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.headline{flex:1;display:flex;align-items:stretch;margin:0;min-height:0}
.cat{background:linear-gradient(135deg,var(--accent),#a30400);display:flex;align-items:center;padding:0 2vmin 0 1.5vmin;font-weight:800;font-size:clamp(14px,2.1vmax,34px);letter-spacing:1px;text-transform:uppercase;white-space:nowrap;clip-path:polygon(0 0,100% 0,93% 100%,0 100%)}
.headtext{flex:1;background:rgba(8,11,18,.92);display:flex;align-items:center;padding:0 1.6vmin;font-weight:700;font-size:clamp(14px,2.1vmax,34px);line-height:1.05;border-bottom:2px solid rgba(255,255,255,.06);overflow:hidden}
.ticker{height:36%;min-height:30px;display:flex;background:rgba(5,7,12,.96);border-top:2px solid var(--accent)}
.ticker .label{background:var(--accent);color:#fff;display:flex;align-items:center;padding:0 1.3vmin;font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:clamp(10px,1.4vmax,22px);white-space:nowrap}
.ticker .viewport{flex:1;overflow:hidden;position:relative;display:flex;align-items:center}
.ticker-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:scroll 45s linear infinite}
.ticker-track .item{padding:0 2.4vmin;font-size:clamp(10px,1.45vmax,22px);position:relative}
.ticker-track .item::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--accent-2)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.hud{position:absolute;left:50%;top:8%;transform:translateX(-50%);z-index:9;background:rgba(8,10,16,.85);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:clamp(13px,1.8vmax,28px);font-weight:700;padding:.8vmin 1.8vmin;border-radius:.8vmin;opacity:0;transition:opacity .25s ease;pointer-events:none;max-width:80vw;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud.show{opacity:1}
#volbar{position:absolute;left:50%;bottom:calc(var(--bar-h) + 2vmin);transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:1.4vmin;background:rgba(8,10,16,.85);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:1vmin;padding:1vmin 1.8vmin;opacity:0;transition:opacity .2s ease;pointer-events:none;max-width:90vw}
#volbar.show{opacity:1}
#volbar .vb-ico{font-size:clamp(16px,2.2vmax,32px);line-height:1}
#volbar .vb-track{width:clamp(140px,28vmin,360px);height:10px;background:rgba(255,255,255,.18);border-radius:1vmin;overflow:hidden}
#volbar .vb-fill{height:100%;width:0;background:var(--accent);border-radius:1vmin;transition:width .15s ease}
#volbar .vb-num{font-size:clamp(12px,1.7vmax,26px);font-weight:800;color:#fff;min-width:3.6ch;text-align:right}

.menu-btn{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:8;background:rgba(8,10,16,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);border-left:none;color:#fff;font-size:clamp(12px,1.4vmax,20px);font-weight:700;padding:1.6vmin .7vmin;border-radius:0 2vmin 2vmin 0;cursor:pointer;opacity:.35;transition:opacity .2s ease;writing-mode:vertical-rl;text-orientation:mixed}
.menu-btn:hover{opacity:1}
.fs-btn{align-self:stretch;min-width:40px;padding:0 1vmin;display:flex;align-items:center;justify-content:center;background:rgba(8,10,16,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);color:#fff;font-size:clamp(15px,1.7vmax,24px);border-radius:8px;cursor:pointer;opacity:.5;transition:opacity .2s ease;line-height:1}
.fs-btn:hover{opacity:1}
body.fs .fs-btn{opacity:.25}
.mute-ind{align-self:stretch;display:none;align-items:center;justify-content:center;min-width:40px;padding:0 1vmin;background:rgba(122,31,31,.85);border:1px solid #b3413c;border-radius:8px;font-size:clamp(15px,1.8vmax,26px);line-height:1;color:#fff}
.mute-ind.on{display:flex}
.qr-ctrl{position:absolute;left:var(--gap);bottom:calc(var(--bar-h) + var(--gap));z-index:7;display:flex;align-items:center;gap:1vmin;background:rgba(8,11,18,.92);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.8vmin;backdrop-filter:blur(8px);max-width:calc(100% - 2*var(--gap));transition:transform .45s ease,opacity .4s ease}
.qr-ctrl canvas{display:block;width:clamp(84px,11vmin,150px);height:clamp(84px,11vmin,150px);background:#fff;border-radius:6px;padding:4px}
.qr-ctrl .qr-txt{color:var(--text);font-size:clamp(10px,1.2vmax,17px);font-weight:700;line-height:1.2}
.cursor{position:absolute;z-index:9999;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));transition:left .12s linear, top .12s linear;transform:translate(-2px,-2px)}

/* Barra de progresso (timeline) - clicar/arrastar para avancar o video */
.timeline{position:absolute;left:0;right:0;bottom:var(--bar-h);z-index:8;display:none;align-items:center;gap:1.2vmin;padding:.6vmin 1.6vmin;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent);transition:opacity .4s ease}
.timeline .tl-cur,.timeline .tl-tot{color:#fff;font-size:clamp(10px,1.25vmax,17px);font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.85);min-width:5ch;text-align:center;flex-shrink:0}
.tl-track{position:relative;flex:1;height:6px;background:rgba(255,255,255,.28);border-radius:6px;cursor:pointer;pointer-events:auto;transition:height .12s ease}
.tl-track:hover{height:11px}
.tl-fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--accent);border-radius:6px}
.tl-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none;opacity:0;transition:opacity .12s ease}
.tl-track:hover .tl-knob{opacity:1}
.tl-tip{position:absolute;bottom:200%;left:0;transform:translateX(-50%);background:rgba(8,10,16,.96);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:clamp(10px,1.2vmax,16px);font-weight:700;padding:.4vmin .8vmin;border-radius:6px;white-space:nowrap;opacity:0;transition:opacity .12s ease;pointer-events:none}

.menu{position:absolute;top:0;left:0;height:100%;width:min(86vw,460px);z-index:10;background:rgba(8,11,18,.97);backdrop-filter:blur(10px);border-right:1px solid rgba(255,255,255,.1);transform:translateX(-100%);transition:transform .28s ease;display:flex;flex-direction:column}
.menu.open{transform:none}
.menu-head{display:flex;align-items:center;justify-content:space-between;padding:1.4vmin 1.8vmin;font-size:clamp(15px,1.9vmax,26px);font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),#a30400)}
.menu-close{cursor:pointer;font-size:clamp(20px,2.6vmax,34px);line-height:1;padding:0 .6vmin}
.menu-shuffle{display:block;width:auto;margin:1.4vmin 1.8vmin 0;padding:1vmin 1.4vmin;border-radius:.8vmin;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font-size:clamp(12px,1.4vmax,18px);font-weight:700;cursor:pointer;text-align:center}
.menu-shuffle.on{background:#1f7a3d;border-color:#2a9d54}
.menu-list{flex:1;overflow-y:auto;padding:.8vmin;-webkit-overflow-scrolling:touch}
.menu-busca{display:flex;flex-wrap:wrap;gap:.7vmin;padding:1vmin 1.4vmin;border-bottom:1px solid rgba(255,255,255,.08)}
.menu-busca input{flex:1 1 100%;background:#070b12;border:1px solid rgba(255,255,255,.14);border-radius:.6vmin;padding:.9vmin 1vmin;color:#fff;font-size:clamp(13px,1.4vmax,18px)}
.menu-busca input:focus{outline:none;border-color:var(--accent)}
.menu-busca select{background:#070b12;border:1px solid rgba(255,255,255,.14);border-radius:.6vmin;padding:.7vmin .8vmin;color:#fff;font-size:clamp(12px,1.3vmax,17px)}
.menu-busca button{background:var(--accent);color:#fff;border:0;border-radius:.6vmin;padding:.7vmin 1.4vmin;font-weight:700;font-size:clamp(12px,1.3vmax,17px);cursor:pointer}
.menu-busca .ghost-btn{background:#1a2233;border:1px solid rgba(255,255,255,.14)}
.menu-voltar{color:#cfd6e2;cursor:pointer;padding:.9vmin 1.4vmin;font-size:clamp(12px,1.3vmax,17px);opacity:.85}
.menu-voltar:hover{opacity:1;color:#fff}
.menu-vazio{color:var(--muted);padding:2vmin;text-align:center}
.menu-item{display:flex;align-items:center;gap:1.1vmin;padding:1.2vmin 1.3vmin;border-radius:.6vmin;color:#cfd6e2;cursor:pointer;font-size:clamp(13px,1.45vmax,19px);border:1px solid transparent}
.menu-item:hover,.menu-item.sel{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.14)}
.menu-item .num{min-width:26px;height:26px;padding:0 .4vmin;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border-radius:.4vmin;font-size:clamp(11px,1.2vmax,15px);font-weight:700;flex-shrink:0}
.menu-item .thumb-yt{width:clamp(80px,10vmin,130px);aspect-ratio:16/9;object-fit:cover;border-radius:.4vmin;flex-shrink:0;background:#000}
.menu-item .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-item .txt b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-item .txt small{display:block;color:var(--muted);font-size:clamp(10px,1.1vmax,15px);margin-top:.15vmin}
.menu-item.atual .num{background:var(--accent);color:#fff}
.menu-item .add-btn{margin-left:auto;flex-shrink:0;background:var(--accent);color:#fff;border:0;border-radius:.4vmin;padding:.7vmin 1vmin;font-size:clamp(10px,1.1vmax,15px);font-weight:700;cursor:pointer}
.menu-item .add-btn:hover{filter:brightness(1.1)}
.menu-item .del-btn{margin-left:.6vmin;flex-shrink:0;background:#2a1416;color:#ff8a8a;border:1px solid #5a2a2a;border-radius:.4vmin;width:28px;height:28px;font-size:clamp(14px,1.5vmax,18px);font-weight:700;cursor:pointer;line-height:1}
.menu-item .del-btn:hover{background:#3a1a1c;color:#ffb3b3}
.menu-item .tag-now{margin-left:auto;background:var(--accent);color:#fff;font-size:clamp(9px,1vmax,13px);font-weight:700;padding:.2vmin .6vmin;border-radius:.3vmin;text-transform:uppercase;flex-shrink:0}

/* Retrato e telas estreitas: faixa um pouco maior e menu quase cheio */
@media (orientation:portrait){
  :root{ --bar-h:clamp(96px,13vh,200px); }
  .logo-bug{width:clamp(96px,22vmin,200px)}
  .menu{width:min(94vw,520px)}
}
/* Telas pequenas (abrir no celular): garante toque confortavel */
@media (max-width:560px){
  .menu{width:100vw;border-left:0}
  .menu-busca input,.menu-busca select,.menu-busca button{font-size:16px}
  .menu-item{font-size:15px}
}

/* Portao de acesso (regra 3) e aviso de tela duplicada (regra 2) */
.gate{position:fixed;inset:0;z-index:9999;background:#0a0d14;display:flex;align-items:center;justify-content:center;padding:24px}
.gate-card{width:min(460px,92vw);background:#121723;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:34px 28px;text-align:center;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.gate-logo{font-weight:800;font-size:1.5rem;color:#eef2f7;margin-bottom:14px}
.gate-logo span{color:#e10600}
.gate-sub{color:#aab2c2;font-size:1rem;line-height:1.5;margin:0 0 20px}
.gate-sub b{color:#eef2f7}
.gate-card input{width:100%;background:#070b12;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:14px;color:#eef2f7;font-size:1.1rem;text-align:center;font-family:inherit;outline:none}
.gate-card input:focus{border-color:#e10600}
.gate-card button{width:100%;margin-top:16px;background:#e10600;color:#fff;border:0;border-radius:10px;padding:14px;font-size:1.05rem;font-weight:700;cursor:pointer;font-family:inherit}
.gate-card button:disabled{opacity:.6;cursor:default}
.gate-erro{color:#ff8e8e;font-size:.95rem;margin-top:12px;min-height:1.2em}
.gate.dup .gate-card button{background:#2a3344}

/* Rodape do menu: info da tela + botao Sair */
.menu-rodape{border-top:1px solid rgba(255,255,255,.1);padding:1.2vmin 1.6vmin;display:flex;align-items:center;gap:1vmin;justify-content:space-between}
.menu-user{min-width:0}
.menu-user-nome{color:#fff;font-weight:700;font-size:clamp(13px,1.4vmax,18px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-user-id{color:var(--muted);font-size:clamp(11px,1.2vmax,15px);margin-top:.2vmin}
.menu-user-id b{color:#cfd6e2;font-weight:700}
.menu-sair{flex-shrink:0;background:#2a1416;color:#ff8a8a;border:1px solid #5a2a2a;border-radius:.6vmin;padding:.9vmin 1.6vmin;font-size:clamp(12px,1.3vmax,17px);font-weight:700;cursor:pointer}
.menu-sair:hover{background:#3a1a1c;color:#ffb3b3}

/* Caixa de confirmacao: dois botoes lado a lado */
.gate-acoes{display:flex;gap:12px;margin-top:8px}
.gate-acoes button{flex:1;width:auto;margin-top:0}
.gate-acoes .gate-btn-sec{background:#2a3344}

/* Tela Comercial desligada: esconde logos, barras (AO VIVO/GIRO) e publicidade */
body.sem-comercial .lower,
body.sem-comercial .logo-bug,
body.sem-comercial .pub{ display:none !important; }
/* Sem a barra inferior, a barra de progresso desce ate a base */
body.sem-comercial .timeline{ bottom:0; }

/* Modo limpo em tela vertical (retrato): num formato retrato o video 16:9 nao
   preenche bem a tela. Aqui ele aparece inteiro (largura cheia, sem recorte),
   centralizado na vertical, com o relogio no topo e a barra de progresso na base
   sobre o fundo escuro. Em paisagem o modo limpo continua cobrindo a tela toda. */
@media (orientation:portrait){
  body.sem-comercial #video iframe,
  body.sem-comercial #video video{
    width:100cqw;
    height:56.25cqw;
  }
  body.sem-comercial .timeline{ background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.4)); padding-top:1.2vmin; padding-bottom:1.2vmin; }
  body.sem-comercial .clock{ background:rgba(8,10,16,.78); }
}

/* Feedback de toque: ao pressionar, o controle "afunda" levemente (o clique e percebido).
   O menu-btn mantem o translateY do seu posicionamento vertical. */
.fs-btn,.menu-close,.menu-shuffle,.menu-busca button,.menu-busca .ghost-btn,
.menu-item,.menu-item .add-btn,.menu-item .del-btn,.menu-sair,
.gate-card button,.gate-acoes button{ transition:transform .09s ease, opacity .15s ease; }
.fs-btn:active,.menu-close:active,.menu-shuffle:active,.menu-busca button:active,
.menu-busca .ghost-btn:active,.menu-item:active,.menu-item .add-btn:active,
.menu-item .del-btn:active,.menu-sair:active,.gate-card button:active,
.gate-acoes button:active{ transform:scale(.94); }
.menu-btn:active{ transform:translateY(-50%) scale(.92); }
.tl-track:active{ height:11px; }

/* Overlay de identificacao das telas (botao "Identificar telas" do admin, so Multi-Telas) */
#idOverlay{ position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center;
  background:rgba(5,8,14,.80); opacity:0; visibility:hidden; transition:opacity .25s ease; pointer-events:none; }
#idOverlay.mostra{ opacity:1; visibility:visible; }
#idOverlay .id-card{ text-align:center; padding:5vh 7vw; border:2px solid var(--accent,#e10600); border-radius:24px;
  background:rgba(10,13,20,.92); box-shadow:0 0 0 6px rgba(225,6,0,.15), 0 18px 60px rgba(0,0,0,.6); }
#idOverlay .id-num{ font-weight:900; line-height:1; color:#fff; font-size:min(16vw,24vh); letter-spacing:-.02em; }
#idOverlay .id-sub{ margin-top:3vh; color:#cdd5e2; font-size:min(4vw,5vh); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }