/* Kids Check-in — tema escuro moderno | identidade: vermelho, amarelo, azul, roxo */
:root{
  --r:#FF4D5A;--y:#FFC93C;--b:#3D8BFF;--p:#9B5CF6;
  --ink:#F1ECFF;--dark:#1A1230;--mut:#9C93BC;
  --bg:#0E0A1C;--s1:#171128;--s2:#1F1836;--s3:#2A2147;
  --line:#2F2750;--line2:#443A70;--ok:#34D27B;
  --sh:0 8px 24px rgba(0,0,0,.35);--ease:cubic-bezier(.2,.8,.2,1);
  --rad:14px;
  color-scheme:dark
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 "Segoe UI",system-ui,-apple-system,"Trebuchet MS",sans-serif;color:var(--ink);background:var(--bg)}
/* brilhos de fundo: camada fixa na tela inteira (antes terminavam onde o conteúdo acabava) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 100% -5%,rgba(155,92,246,.22),transparent 70%),
    radial-gradient(800px 480px at -5% 5%,rgba(61,139,255,.16),transparent 70%),
    radial-gradient(900px 520px at 50% 110%,rgba(255,77,90,.10),transparent 70%)}
h1,h2,h3{font-family:"Segoe UI",system-ui,sans-serif;font-weight:800;margin:.2em 0;letter-spacing:-.02em}
h3{color:var(--mut);font-size:1rem;font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--p);color:#fff}
::placeholder{color:#7d739f;opacity:1}
label{display:block;font-weight:600;font-size:.88rem;color:var(--mut);margin:.6em 0}
label>input,label>select,label>textarea{margin-top:5px;font-weight:400;color:var(--ink)}

/* ---------- botões ---------- */
button{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:44px;line-height:1.2;font-weight:700;border:1.5px solid transparent;background:var(--b);color:#fff;border-radius:var(--rad);padding:.5em 1.2em;cursor:pointer;
  box-shadow:0 4px 14px rgba(61,139,255,.32);transition:transform .15s var(--ease),box-shadow .15s var(--ease),filter .15s,background .15s,border-color .15s}
button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.12);box-shadow:0 6px 20px rgba(61,139,255,.45)}
button:active:not(:disabled){transform:translateY(1px);filter:brightness(.95)}
button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
button.ghost{background:var(--s2);color:var(--ink);border-color:var(--line2);box-shadow:none}
button.ghost:hover:not(:disabled){background:var(--s3);border-color:var(--p);box-shadow:none}
button.go{background:var(--p);box-shadow:0 4px 14px rgba(155,92,246,.4)}
button.go:hover:not(:disabled){box-shadow:0 6px 20px rgba(155,92,246,.55)}
button.room{background:var(--c);color:var(--i);box-shadow:0 4px 14px rgba(0,0,0,.35)}
button.x{background:rgba(255,77,90,.1);color:var(--r);border-color:rgba(255,77,90,.55);box-shadow:none;padding:.5em 1em}
button.x:hover:not(:disabled){background:var(--r);color:#fff;box-shadow:0 4px 14px rgba(255,77,90,.4)}

/* ---------- campos (pesquisa, selects, textos: tudo no mesmo padrão) ---------- */
input,select,textarea{border:1.5px solid var(--line2);border-radius:var(--rad);padding:.65em .9em;background:var(--s2);color:var(--ink);min-width:0;width:100%;
  transition:border-color .15s,box-shadow .15s,background .15s}
input[type=search],input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],input:not([type]){min-height:44px}
select{appearance:none;-webkit-appearance:none;min-height:44px;padding-right:2.4em;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239C93BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9em center}
select option{background:var(--s1);color:var(--ink)}
textarea{resize:vertical;min-height:90px}
input:hover,select:hover,textarea:hover{border-color:#5d4f95;background:#241c3e}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--p);background:var(--s2);box-shadow:0 0 0 4px rgba(155,92,246,.25)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;accent-color:var(--p)}
input[type=search]::-webkit-search-cancel-button{filter:invert(.7)}
input[type=color]{padding:3px;cursor:pointer;min-height:44px}
input[type=file]{padding:.5em .7em}
input[type=file]::file-selector-button{margin-right:.8em;border:0;border-radius:9px;background:var(--p);color:#fff;font-weight:700;padding:.4em .9em;cursor:pointer}
input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 40px var(--s2) inset}
button:focus-visible,a:focus-visible{outline:3px solid var(--y);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- avisos ---------- */
#conn{position:sticky;top:0;z-index:70;background:var(--r);color:#fff;text-align:center;padding:.55em;font-weight:700}
#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:var(--s3);color:var(--ink);border:1.5px solid var(--line2);
  padding:.75em 1.3em;border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.5);transition:opacity .25s,transform .25s var(--ease);z-index:99;max-width:90vw}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.bad{background:var(--r);border-color:var(--r);color:#fff}
.empty{color:var(--mut);text-align:center;padding:1.6em}
.tag{display:inline-block;background:rgba(255,201,60,.14);color:var(--y);border:1px solid rgba(255,201,60,.35);border-radius:99px;padding:.1em .75em;font-size:.8rem;font-weight:700}

/* ---------- topo ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;padding:10px 22px;
  background:rgba(14,10,28,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(0,0,0,.35);
  border-bottom:4px solid;border-image:linear-gradient(90deg,var(--r) 25%,var(--y) 0 50%,var(--b) 0 75%,var(--p) 0) 1}
.brand{display:flex;align-items:center;gap:10px;font:800 1.15rem "Segoe UI",system-ui,sans-serif;letter-spacing:-.01em}
.brand img{height:46px;max-width:130px;object-fit:contain}
.svc{display:flex;gap:10px;align-items:center;flex:1;justify-content:center;flex-wrap:wrap}.svc select{width:auto}
.live{font-weight:700;color:var(--b);background:rgba(61,139,255,.15);border:1px solid rgba(61,139,255,.4);border-radius:99px;padding:.25em .95em}
.who{display:flex;gap:10px;align-items:center;font-size:.92rem;color:var(--mut)}

nav{display:flex;gap:8px;padding:16px 22px 0;flex-wrap:wrap;max-width:1200px;margin:0 auto}
nav button{background:var(--s2);color:var(--mut);border-color:var(--line);box-shadow:none}
nav button:hover:not(:disabled){color:var(--ink);background:var(--s3);box-shadow:none}
nav button.on{background:var(--p);color:#fff;border-color:var(--p);box-shadow:0 4px 16px rgba(155,92,246,.45)}
nav a{margin-left:auto;align-self:center;color:var(--y);font-weight:700;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s}
nav a:hover{border-color:var(--y)}
main#view{padding:16px 22px 48px;max-width:1200px;margin:0 auto}
main#view.in{animation:rise .3s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- barras, cartões, listas ---------- */
.bar{display:flex;gap:12px;margin:8px auto 22px;max-width:860px;flex-wrap:wrap;align-items:stretch;justify-content:center}
.bar input{flex:1 1 380px;min-width:200px;min-height:64px;font-size:1.2rem;padding:.7em 1.1em .7em 3.2em;border-radius:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239C93BC' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:1.1em center;background-size:22px}
.bar>button{min-height:64px;padding:.5em 1.8em;border-radius:18px;font-size:1.05rem;white-space:nowrap}
main#view:has(.bar input)>#res{max-width:900px;margin-inline:auto}
main#view>.warn{text-align:center;margin:0 0 16px}
.card{background:linear-gradient(180deg,var(--s2),var(--s1));border:1.5px solid var(--line);border-radius:20px;padding:16px;margin-bottom:14px;box-shadow:var(--sh);
  transition:box-shadow .2s,transform .2s var(--ease),border-color .2s}
.card:hover{border-color:var(--line2);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.card header{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.kid{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 0;border-top:1.5px dashed var(--line2)}
.kid .rooms{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.kid .rooms button{min-width:112px}
.kid>.in{border-left:8px solid var(--c);padding-left:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.alg{margin:.2em 0;color:var(--r);font-weight:700}.warn{color:var(--r);font-weight:700}
.room-sec{margin-bottom:20px;padding:16px;background:rgba(255,255,255,.03);border:1.5px solid var(--line);border-top:5px solid var(--c);border-radius:22px}
.room-sec h2{background:var(--c);color:var(--i);display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:.25em .5em .25em 1.1em;margin:0!important;border-radius:99px;font-size:1.15rem;margin:0;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.room-sec em{font-style:normal;display:inline-grid;place-items:center;min-width:2em;height:2em;padding:0 .5em;border-radius:99px;background:rgba(0,0,0,.28);color:#fff;font-size:.95rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:12px;align-items:stretch}
.grid>.empty{grid-column:1/-1;text-align:left;padding:.4em 0;margin:0}
.room-sec .kc{border-top:1.5px solid var(--line);padding:14px 16px}
.bar.end{order:9;max-width:none;margin:28px 0 0;justify-content:center}
.bar.end>button{min-height:44px;border-radius:var(--rad);font-size:1rem;padding:.5em 1.4em}
.bar.end>button.x{background:var(--s2);color:var(--mut);border-color:var(--line2)}
.bar.end>button.x:hover:not(:disabled){background:var(--s3);color:var(--ink);border-color:var(--p);box-shadow:none}
main#view:has(>.bar.end){display:flex;flex-direction:column}
.kc{margin:0;display:flex;flex-direction:column;gap:6px;border-top:6px solid var(--c)}
.acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.kc .acts{margin-top:auto;padding-top:8px}.kc .acts button{flex:1 1 0;white-space:nowrap}
.chip{display:inline-flex;gap:6px;align-items:center;background:var(--c);color:var(--i);padding:.2em .3em .2em .9em;border-radius:99px;margin:6px 6px 0 0;font-weight:700}
.chip button.x{min-height:0;padding:.05em .5em;box-shadow:none;background:rgba(0,0,0,.25);color:inherit;border-color:transparent}
.chip button.x:hover:not(:disabled){background:var(--r);color:#fff}
.opt{display:flex;gap:10px;align-items:center;padding:.6em .8em;border:1.5px solid var(--line2);background:var(--s2);border-radius:var(--rad);margin:8px 0;cursor:pointer;
  transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--p);background:var(--s3)}.opt input{width:18px}
.sec{max-width:900px;margin:0 auto 20px;display:flex;flex-wrap:wrap;align-items:center;column-gap:10px}
.sec>h2{flex:0 0 100%;margin:0 0 16px;font-size:1.3rem}
.sec>.rm,.sec>#newrooms,.sec>.kid,.sec>.r3,.sec>.acts,.sec>#tr{flex:0 0 100%;max-width:100%}
.sec>#newrooms:empty{display:none}
.sec>#tr{margin:12px 0 0;color:var(--mut)}.sec>#tr:empty{display:none}
.sec>.ghost{margin-top:4px}
.sec>p{margin:4px 0 0 auto}
.sec>.kid{padding:12px 0}.sec>.kid .acts{margin:0;flex-wrap:nowrap}.sec>.kid .acts button{min-width:112px}
.sec>.r3{grid-template-columns:1.4fr 1fr auto auto;align-items:center;margin:14px 0 0;padding-top:16px;border-top:1.5px dashed var(--line2)}
.sec>.acts{margin:0}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;margin-bottom:10px;align-items:start}
.r4{display:grid;grid-template-columns:1.4fr 1fr 1.4fr 1.2fr auto;gap:10px;margin-bottom:10px;align-items:start}
.r3 .opt,.r4 .opt{margin:0;min-height:44px;white-space:nowrap}
.r3>*,.r4>*{min-height:44px}.r3 .relbox>*,.r4 .relbox>*{min-height:44px}
.relbox{display:grid;gap:6px}
.r3 button.x,.r4 button.x{padding:.5em .9em}
@media(max-width:800px){.r3,.r4{grid-template-columns:1fr 1fr}main#view,nav{padding-left:12px;padding-right:12px}.top{padding:8px 12px}.svc{order:3;flex-basis:100%}}

/* ---------- janelas ---------- */
#modal:not(:empty){position:fixed;inset:0;background:rgba(6,3,16,.75);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px;z-index:80;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.dlg{background:var(--s1);border:1.5px solid var(--line2);border-radius:24px;padding:22px;width:min(520px,100%);box-shadow:0 24px 70px rgba(0,0,0,.6)}.dlg.wide{width:min(900px,100%)}
.login{max-width:380px;margin:8vh auto;padding:28px;display:grid;gap:12px;text-align:center;background:linear-gradient(180deg,var(--s2),var(--s1));border:1.5px solid var(--line2);border-radius:26px;
  box-shadow:0 20px 60px rgba(155,92,246,.25);animation:rise .4s var(--ease)}.login .brand{justify-content:center}
.rm{display:grid;grid-template-columns:1fr 80px minmax(140px,180px) auto;gap:10px;margin-bottom:10px;align-items:stretch}.rm input[type=color]{height:100%;min-height:44px}
.res{padding:12px;border-radius:14px;margin:10px 0;animation:rise .25s var(--ease)}.res h1,.res h2{margin:.1em 0}
.res.ok{background:rgba(52,210,123,.12);border:1.5px solid var(--ok);color:#b9f5d2}
.res.bad{background:rgba(255,77,90,.12);border:1.5px solid var(--r);color:#ffc9ce}
.dlg.cam video{width:100%;max-height:45vh;border-radius:14px;background:#000}

/* ---------- telão: altura fixa, listas com rolagem interna ---------- */
.tv{height:100vh;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:18px;padding:22px;
  background:radial-gradient(900px 500px at 100% 0,rgba(155,92,246,.28),transparent 60%),radial-gradient(700px 400px at 0 100%,rgba(61,139,255,.2),transparent 60%),#0A0716;color:#fff;overflow:hidden}
.tv header{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px}
.tv .brand{font-size:2rem}.tv .brand img{height:68px}
.when{text-align:right}.when b{display:block;font-size:1.45rem}
.clock{display:inline-flex;gap:10px;align-items:center;margin-top:4px;font-size:1.05rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:.2em .9em .2em .3em;border-radius:99px}
.clock em{font-style:normal;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;background:var(--y);color:var(--dark);padding:.15em .7em;border-radius:99px;font-weight:700}
#hero{min-height:0}
.big{height:100%;min-height:0;overflow:hidden;border-radius:34px;background:var(--c);color:var(--i);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:4px solid rgba(255,255,255,.85);box-shadow:0 0 70px -10px var(--c);padding:20px;animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.big h1{font-size:clamp(2.5rem,min(9vw,16vh),9rem);margin:.1em 0;line-height:1.05}.big h2{font-size:clamp(1.6rem,min(4vw,7vh),4rem)}.big small{font-size:clamp(1.1rem,3vh,2rem)}
.big.idle{--c:var(--p);--i:#fff}
.big{position:relative;isolation:isolate}
.big>*{position:relative;z-index:1}
.big::before,.big::after{content:"";position:absolute;z-index:0;inset:-25%;pointer-events:none;filter:blur(55px);will-change:transform}
.big::before{background:radial-gradient(circle at 25% 30%,rgba(255,255,255,.5) 0 16%,transparent 17%),radial-gradient(circle at 78% 72%,rgba(0,0,0,.25) 0 15%,transparent 16%);animation:drift1 16s ease-in-out infinite alternate}
.big::after{background:radial-gradient(circle at 72% 24%,rgba(255,255,255,.38) 0 13%,transparent 14%),radial-gradient(circle at 20% 78%,rgba(0,0,0,.2) 0 14%,transparent 15%);animation:drift2 22s ease-in-out infinite alternate}
.big.idle::before{background:radial-gradient(circle at 25% 30%,rgba(61,139,255,.75) 0 16%,transparent 17%),radial-gradient(circle at 78% 72%,rgba(255,77,90,.6) 0 15%,transparent 16%)}
.big.idle::after{background:radial-gradient(circle at 72% 24%,rgba(255,201,60,.55) 0 13%,transparent 14%),radial-gradient(circle at 20% 78%,rgba(255,255,255,.3) 0 14%,transparent 15%)}
@keyframes drift1{from{transform:translate(-6%,-4%) rotate(0) scale(1)}to{transform:translate(8%,6%) rotate(25deg) scale(1.12)}}
@keyframes drift2{from{transform:translate(7%,5%) rotate(0) scale(1.1)}to{transform:translate(-8%,-6%) rotate(-30deg) scale(.95)}}
.bar2{display:block;width:80%;height:14px;background:rgba(0,0,0,.25);border-radius:9px;overflow:hidden;margin-top:14px}.bar2 u{display:block;height:100%;background:currentColor;width:100%;transition:width .2s linear}
.tv aside{min-height:0;display:flex;flex-direction:column;gap:8px}.tv aside h2{font-size:1.25rem;margin:.1em 0}
.scroll{overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#6a55b0 transparent}#tq{flex:1 1 60%}#td{flex:0 1 30%}
.qc{background:var(--c);color:var(--i);border-radius:18px;padding:10px 16px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:1.4rem;font-weight:700}
.qc.old{background:transparent;color:#b9aee0;border:2px dashed #5d4f95;font-size:1.05rem}
.ctl{position:fixed;right:8px;bottom:6px;display:flex;gap:6px;opacity:.3;transition:opacity .2s}.ctl:hover,.ctl:focus-within{opacity:.95}
.ctl button{min-height:0;font-size:.68rem;padding:.25em .7em;border-radius:9px;border-width:1px;box-shadow:none;background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
.unlock{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font-size:.8rem;padding:.3em 1em;border-radius:99px;animation:fade .4s}
.mini{grid-column:2;grid-row:3;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:12px;color:#fff;animation:rise .25s var(--ease)}
.mini #ytbox,.mini iframe{display:block;width:min(100%,60vh);height:auto;aspect-ratio:16/9;margin-inline:auto;border:0;border-radius:14px;background:#000}.mini label{display:flex;gap:10px;align-items:center;font-size:.8rem;margin:8px 0 0;color:#fff}
.mini input{padding:0;border:0;box-shadow:none;background:none;min-height:0}.mini small{display:block;font-size:.72rem;opacity:.85}.mini a{color:var(--y)}
@media(max-width:900px){.tv{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) minmax(0,.7fr)}}
/* vídeo integrado na coluna da direita (aparece só quando a música está ativa) */
.tv:has(.mini:not([hidden])){grid-template-rows:auto minmax(0,1fr) auto}
.tv:has(.mini:not([hidden])) #hero{grid-column:1;grid-row:2/4}
.tv:has(.mini:not([hidden])) aside{grid-column:2;grid-row:2}
@media(max-width:900px){
  .tv:has(.mini:not([hidden])){grid-template-rows:auto minmax(0,1fr) minmax(0,.7fr) auto}
  .tv:has(.mini:not([hidden])) #hero{grid-column:1;grid-row:2}
  .tv:has(.mini:not([hidden])) aside{grid-column:1;grid-row:3}
  .mini{grid-column:1;grid-row:4}
}

/* ---------- etiquetas térmicas (impressão: fundo branco, inalterado) ---------- */
#print{display:none}
@media print{
  body>*:not(#print){display:none!important}#print{display:block}
  body{background:#fff!important}
  body::before,.big::before,.big::after{display:none!important}
  @page{size:62mm 40mm;margin:0}
  .lb{width:62mm;height:40mm;padding:2.5mm 3mm;overflow:hidden;page-break-after:always;color:#000;background:#fff;font-family:Arial,sans-serif;text-align:center}
  .lb h1{font-size:15pt;margin:0}.lb p{margin:0;font-size:10pt}.lb small{font-size:7pt;display:block}.lb .al{font-weight:bold;border:1px solid #000;font-size:9pt}
  .lb.qr{display:flex;align-items:center;gap:2mm;text-align:left}.lb.qr svg{width:28mm;height:28mm;flex:none}.lb.qr h1{font-size:11pt}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- telão: personagem da sala (aparece junto do nome, com animação de entrada) ---------- */
.big>.mascote{position:absolute;right:2.5%;bottom:0;z-index:0;height:46%;width:auto;max-width:34%;object-fit:contain;object-position:bottom right;
  opacity:.92;pointer-events:none;user-select:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));
  transform-origin:bottom center;animation:mascoteIn .8s var(--ease) .15s both}
@keyframes mascoteIn{
  0%{opacity:0;transform:translateY(45%) scale(.7) rotate(8deg)}
  60%{opacity:.92;transform:translateY(-4%) scale(1.05) rotate(-3deg)}
  100%{opacity:.92;transform:none}
}
.big.idle>.mascote{display:none}
@media(max-width:800px){.rm{grid-template-columns:1fr 70px auto}.rm select{grid-column:1/-1;order:3}}