/* ==========================================================================
   Prislack.fun — sistema de design
   Um arquivo, dois temas. Sem dependências, sem rede.
   Tudo é quadrado: raio máximo de 3px, bordas visíveis, zero gradiente.
   ========================================================================== */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme: light;

  --bg:        #F4F4F2;
  --surface:   #FFFFFF;
  --surface-2: #EDEDEA;
  --surface-3: #E4E4E0;
  --line:      #DCDCD7;
  --line-2:    #C9C9C3;

  --text:      #14151A;
  --text-2:    #4A4D57;
  --muted:     #63666F;

  --accent:      #5A4CD0;
  --accent-ink:  #4A3DBE;
  --accent-soft: #EFEDFB;
  --accent-line: #C7C0F0;
  --on-accent:   #FFFFFF;

  --good: #0B7A2E;  --good-soft: #E4F3E8;
  --warn: #8A5A00;  --warn-soft: #FAF0DC;
  --crit: #B3322D;  --crit-soft: #FAE9E8;

  --r: 3px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --shadow: none;
  --header-h: 56px;
  --sidebar-w: 224px;
}

:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:        #0D0F1A;
  --surface:   #141724;
  --surface-2: #1B1F30;
  --surface-3: #232840;
  --line:      #2A2F44;
  --line-2:    #39405C;

  --text:      #EDEFF7;
  --text-2:    #9AA2BD;
  --muted:     #8992AE;

  --accent:      #8D82E8;
  --accent-ink:  #B7AFF2;
  --accent-soft: #1E2038;
  --accent-line: #3A3768;
  --on-accent:   #101020;

  --good: #3BD16B;  --good-soft: #12251A;
  --warn: #F2B01E;  --warn-soft: #2A2113;
  --crit: #E8736E;  --crit-soft: #2C1817;
}

/* ── reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ height:100%; }
body{
  margin:0; min-height:100%;
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.has-sidebar{ padding-left:var(--sidebar-w); }
h1,h2,h3,h4,h5,p,figure,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
/* .btn e afins declaram display, o que anula o [hidden] do navegador. */
[hidden]{ display:none !important; }
img,svg,iframe{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--accent-ink); text-decoration:none; }
a:hover{ text-decoration:underline; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--surface); color:var(--text);
  padding:10px 16px; border:1px solid var(--line);
}
.skip:focus{ left:0; }

/* ── tipografia ─────────────────────────────────────────────────────────── */
.mono{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}
.h1{ font-size:30px; font-weight:640; letter-spacing:-.022em; line-height:1.14; }
.h2{ font-size:20px; font-weight:620; letter-spacing:-.014em; line-height:1.24; }
.h3{ font-size:15.5px; font-weight:620; letter-spacing:-.006em; }
.lead{ font-size:16px; line-height:1.6; color:var(--text-2); text-wrap:pretty; }
.small{ font-size:13px; color:var(--text-2); }
.tiny{ font-size:12px; color:var(--muted); }
.num{ font-variant-numeric:tabular-nums; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:760px; }
.page{ padding:34px 0 88px; }
.stack{ display:flex; flex-direction:column; gap:18px; }
.stack-sm{ display:flex; flex-direction:column; gap:10px; }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.grid{ display:grid; gap:14px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.spacer{ flex:1; }

.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-bottom:18px; margin-bottom:22px;
  border-bottom:1px solid var(--line);
}

/* ── superfícies ────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.card-pad{ padding:18px; }
.card-head{
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.rows > *{ border-top:1px solid var(--line); }
.rows > *:first-child{ border-top:0; }
.rule{ height:1px; background:var(--line); border:0; }

.empty{
  padding:44px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.empty .h3{ color:var(--text); }
.empty p{ font-size:13px; color:var(--muted); max-width:40ch; }

/* ── botões ─────────────────────────────────────────────────────────────── */
.btn{
  --bg-b:transparent; --fg-b:var(--text); --bd-b:var(--line);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 14px; border-radius:var(--r); cursor:pointer;
  font-size:13.5px; font-weight:550; white-space:nowrap;
  background:var(--bg-b); color:var(--fg-b); border:1px solid var(--bd-b);
  transition:background .13s linear, color .13s linear, border-color .13s linear;
}
.btn:hover{ text-decoration:none; }
.btn svg{ width:15px; height:15px; flex:none; }
.btn-primary{ --bg-b:var(--accent); --fg-b:var(--on-accent); --bd-b:var(--accent); font-weight:600; }
.btn-primary:hover{ --bg-b:var(--accent-ink); --bd-b:var(--accent-ink); }
.btn-outline{ --bg-b:var(--surface); }
.btn-outline:hover{ --bg-b:var(--surface-2); --bd-b:var(--line-2); }
.btn-ghost{ --bd-b:transparent; --fg-b:var(--text-2); }
.btn-ghost:hover{ --bg-b:var(--surface-2); --fg-b:var(--text); }
.btn-danger{ --fg-b:var(--crit); --bd-b:var(--line); --bg-b:var(--surface); }
.btn-danger:hover{ --bg-b:var(--crit-soft); --bd-b:var(--crit); }
.btn-sm{ padding:5px 10px; font-size:12.5px; }
.btn-lg{ padding:11px 22px; font-size:15px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.icon-btn{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--text-2); cursor:pointer;
  transition:background .13s linear, color .13s linear, border-color .13s linear;
}
.icon-btn:hover{ background:var(--surface-2); color:var(--text); border-color:var(--line-2); }
.icon-btn svg{ width:16px; height:16px; }

/* ── formulários ────────────────────────────────────────────────────────── */
.field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.field > label{ font-size:12.5px; font-weight:550; color:var(--text-2); }
.input{
  width:100%; padding:9px 11px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r);
  font-size:14px;
  transition:border-color .13s linear, box-shadow .13s linear;
}
.input::placeholder{ color:var(--muted); opacity:.75; }
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
textarea.input{ resize:vertical; min-height:78px; line-height:1.5; }
select.input{
  appearance:none; cursor:pointer; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2363666F' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 4.75 6 7.75 9 4.75'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:12px;
}
:root[data-theme="dark"] select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238992AE' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 4.75 6 7.75 9 4.75'/%3E%3C/svg%3E");
}
.hint{ font-size:12px; color:var(--muted); }
.check{ display:flex; align-items:flex-start; gap:9px; cursor:pointer; }
.check input[type=checkbox]{ width:16px; height:16px; margin:2px 0 0; flex:none; accent-color:var(--accent); cursor:pointer; }

.pw-wrap{ position:relative; }
.pw-wrap .input{ padding-right:62px; }
.pw-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  padding:4px 8px; border:0; background:transparent; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--muted); border-radius:var(--r);
}
.pw-toggle:hover{ color:var(--text); background:var(--surface-2); }

/* ── etiquetas ──────────────────────────────────────────────────────────── */
.tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 7px; border-radius:var(--r);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--text-2); background:var(--surface-2);
}
.tag svg{ width:11px; height:11px; }
.tag-accent{ color:var(--accent-ink); background:var(--accent-soft); border-color:var(--accent-line); }
.tag-good{ color:var(--good); background:var(--good-soft); border-color:currentColor; }
.tag-warn{ color:var(--warn); background:var(--warn-soft); border-color:currentColor; }
.tag-crit{ color:var(--crit); background:var(--crit-soft); border-color:currentColor; }

.mark{
  display:grid; place-items:center; flex:none;
  width:34px; height:34px; border-radius:var(--r);
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-line);
}
.avatar{
  display:grid; place-items:center; flex:none;
  width:30px; height:30px; border-radius:var(--r);
  font-size:11.5px; font-weight:650;
  color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-line);
}

/* ── navegação lateral do app ───────────────────────────────────────────── */
.appbar{
  position:fixed; inset:0 auto 0 0; z-index:30; width:var(--sidebar-w);
  background:var(--surface); border-right:1px solid var(--line);
}
.appbar-in{
  height:100%; width:100%; padding:18px 14px 14px;
  display:flex; flex-direction:column; align-items:stretch; gap:12px;
}
.brand{ display:flex; align-items:center; gap:9px; color:var(--text); font-weight:640; letter-spacing:-.01em; }
.brand:hover{ text-decoration:none; }
.brand-glyph{
  width:26px; height:26px; border-radius:var(--r); display:grid; place-items:center;
  font-family:var(--mono); font-size:13px; font-weight:700;
  background:var(--accent); color:var(--on-accent);
}
.appnav{ display:flex; flex-direction:column; align-items:stretch; gap:4px; margin-top:8px; flex:1; }
.appnav a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r);
  font-size:13.5px; font-weight:550; color:var(--text-2);
  border:1px solid transparent;
}
.appnav a svg{ flex:none; }
.appnav a:hover{ background:var(--surface-2); color:var(--text); text-decoration:none; }
.appnav a[aria-current="page"]{
  color:var(--text); background:var(--surface-2); border-color:var(--line);
}
.mobile-nav-settings{ display:none !important; }
.appbar-end{ display:flex; align-items:center; gap:7px; padding-top:12px; border-top:1px solid var(--line); }

.seg{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.seg button{
  padding:6px 10px; border:0; cursor:pointer; background:var(--surface);
  color:var(--muted); font-size:12px; font-weight:600; font-family:var(--mono); letter-spacing:.04em;
}
.seg button + button{ border-left:1px solid var(--line); }
.seg button:hover{ color:var(--text); background:var(--surface-2); }
.seg button[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent-ink); }

.usermenu{ position:relative; }
.usermenu > button{
  display:flex; align-items:center; gap:8px; padding:4px 8px 4px 4px;
  background:transparent; border:1px solid transparent; border-radius:var(--r); cursor:pointer;
}
.usermenu > button:hover{ background:var(--surface-2); border-color:var(--line); }
.menu{
  position:absolute; left:calc(100% + 9px); bottom:0; min-width:220px; z-index:40;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:5px; display:none;
}
.menu[data-open="1"]{ display:block; }
.menu-head{ padding:8px 9px; border-bottom:1px solid var(--line); margin-bottom:5px; }
.menu a, .menu button{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:7px 9px; border:0; border-radius:var(--r); background:transparent;
  color:var(--text-2); font-size:13.5px; text-align:left; cursor:pointer;
}
.menu a:hover, .menu button:hover{ background:var(--surface-2); color:var(--text); text-decoration:none; }
.menu svg{ width:15px; height:15px; flex:none; }

/* ── faixa de aviso do site ─────────────────────────────────────────────── */
.sitealert{ border-bottom:1px solid; }
.sitealert-in{
  display:flex; align-items:center; gap:9px;
  padding:9px 24px; font-size:13.5px; font-weight:550; line-height:1.45;
}
.sitealert svg{ width:16px; height:16px; flex:none; }
.sitealert-red{
  background:var(--crit-soft); color:var(--crit); border-bottom-color:var(--crit);
}
.sitealert-green{
  background:var(--good-soft); color:var(--good); border-bottom-color:var(--good);
}
@media (max-width:680px){ .sitealert-in{ padding:9px 16px; } }

/* ── anúncios da capa ───────────────────────────────────────────────────── */
.ann{ display:flex; flex-direction:column; }
.ann-item{ padding:16px 0; border-top:1px solid var(--line); display:flex; gap:14px; align-items:flex-start; }
.ann-item:first-child{ border-top:0; padding-top:0; }
.ann-date{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  white-space:nowrap; padding-top:2px; min-width:78px;
}
.ann-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.ann-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ann-title{ font-size:15px; font-weight:620; letter-spacing:-.008em; }
.ann-body{ font-size:13.5px; line-height:1.55; color:var(--text-2); text-wrap:pretty; }
@media (max-width:680px){
  .ann-item{ flex-direction:column; gap:6px; }
  .ann-date{ padding-top:0; }
}

/* ── abas ───────────────────────────────────────────────────────────────── */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:22px; flex-wrap:wrap; }
.tabs a{
  padding:9px 13px; font-size:13.5px; font-weight:550; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs a:hover{ color:var(--text); text-decoration:none; }
.tabs a[aria-current="page"]{ color:var(--text); border-bottom-color:var(--accent); }

/* ── tabelas ────────────────────────────────────────────────────────────── */
.table-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.data th{
  padding:10px 14px; text-align:left; white-space:nowrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:var(--surface-2); border-bottom:1px solid var(--line);
}
table.data td{ padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.data tr:last-child td{ border-bottom:0; }
table.data .right{ text-align:right; }

/* ── estatísticas ───────────────────────────────────────────────────────── */
.stat{ padding:16px 18px; display:flex; flex-direction:column; gap:5px; }
.stat-value{ font-size:28px; font-weight:640; letter-spacing:-.02em; line-height:1.1; }

/* ── grade de jogos ─────────────────────────────────────────────────────── */
.tiles{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(184px, 1fr)); }
.tile{
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  color:var(--text); overflow:hidden;
  transition:border-color .13s linear, background .13s linear;
}
.tile:hover{ border-color:var(--accent); text-decoration:none; }
.tile-face{
  aspect-ratio:1 / 1; display:grid; place-items:center;
  background:var(--surface-2); border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.tile-img{ width:100%; height:100%; object-fit:cover; display:block; }
/* O botão só aparece quando o ponteiro entra no quadrado. */
.tile-play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.45); opacity:0; transition:opacity .13s linear;
}
.tile:hover .tile-play, .tile:focus-visible .tile-play{ opacity:1; }
.tile-play span{
  display:grid; place-items:center; width:44px; height:44px; border-radius:999px;
  background:var(--accent); color:var(--on-accent);
}
.tile-play svg{ width:20px; height:20px; margin-left:2px; }
.tile-glyph{
  font-family:var(--mono); font-size:34px; font-weight:700; letter-spacing:.02em;
  color:var(--accent-ink);
}
.tile:hover .tile-face{ background:var(--accent-soft); }
.tile-body{ padding:11px 12px; display:flex; flex-direction:column; gap:3px; }
.tile-title{ font-size:13.5px; font-weight:620; }
.tile-desc{
  font-size:12px; color:var(--muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tile-badge{
  position:absolute; top:8px; right:8px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 6px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
}

/* ── lista de links ─────────────────────────────────────────────────────── */
.linkrow{ padding:15px 18px; display:flex; gap:14px; align-items:flex-start; }
.linkrow-thumb{
  width:64px; height:64px; flex:none; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface-2);
  display:grid; place-items:center; overflow:hidden;
}
.linkrow-thumb img{ width:100%; height:100%; object-fit:cover; }
.linkrow-thumb .mono{ font-size:17px; color:var(--muted); }
@media (max-width:680px){ .linkrow-thumb{ width:52px; height:52px; } }
.linkrow:hover{ background:var(--surface-2); }
.linkrow-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.linkrow-title{ font-size:14.5px; font-weight:620; color:var(--text); }
.linkrow-url{ font-family:var(--mono); font-size:11.5px; color:var(--muted); word-break:break-all; }
.linkrow-desc{ font-size:13px; color:var(--text-2); line-height:1.5; text-wrap:pretty; }

/* ── avisos ─────────────────────────────────────────────────────────────── */
.banner{
  display:flex; gap:9px; align-items:flex-start;
  padding:10px 12px; border-radius:var(--r); font-size:13px; line-height:1.5;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-2);
}
.banner svg{ width:15px; height:15px; flex:none; margin-top:2px; }
.banner-error{ color:var(--crit); background:var(--crit-soft); border-color:var(--crit); }
.banner-ok{ color:var(--good); background:var(--good-soft); border-color:var(--good); }
.banner-info{ color:var(--accent-ink); background:var(--accent-soft); border-color:var(--accent-line); }

#toast-host{ position:fixed; left:0; right:0; bottom:20px; z-index:80; display:grid; place-items:center; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:10px; pointer-events:auto;
  padding:9px 10px 9px 13px; border-radius:var(--r);
  background:var(--text); color:var(--bg); font-size:13.5px;
  border:1px solid var(--text);
  /* Igual à notificação do Windows 8.1: entra deslizando de baixo. */
  animation:win-toast-in .3s cubic-bezier(.1,.9,.2,1) both;
}
@keyframes win-toast-in{
  from{ opacity:0; transform:translate3d(0,22px,0); }
  to  { opacity:1; transform:none; }
}
.toast .btn{ --fg-b:var(--bg); --bd-b:transparent; padding:3px 8px; font-size:12.5px; }
.toast .btn:hover{ --bg-b:rgba(127,127,127,.35); }

/* ── modal ──────────────────────────────────────────────────────────────── */
/* As curvas são as do WinJS (Windows 8.1): entrada com desaceleração forte,
   saída com aceleração. É o que dá o "peso" do Metro — nada de elástico. */
:root{
  --win-in:  cubic-bezier(.1,.9,.2,1);
  --win-out: cubic-bezier(.7,0,1,.5);
}

dialog.sheet{
  width:min(460px, calc(100vw - 28px)); padding:0;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--surface); color:var(--text);

  /* Fechado: acima da posição final e transparente. O allow-discrete é o que
     deixa o navegador animar também o fechamento de um <dialog>. */
  opacity:0;
  transform:translate3d(0,-34px,0);
  transition:
    opacity   .18s var(--win-out),
    transform .18s var(--win-out),
    overlay   .18s var(--win-out) allow-discrete,
    display   .18s var(--win-out) allow-discrete;
}
dialog.sheet[open]{
  opacity:1;
  transform:translate3d(0,0,0);
  transition:
    opacity   .3s var(--win-in),
    transform .3s var(--win-in),
    overlay   .3s var(--win-in) allow-discrete,
    display   .3s var(--win-in) allow-discrete;
}
@starting-style{
  dialog.sheet[open]{ opacity:0; transform:translate3d(0,-34px,0); }
}

dialog.sheet::backdrop{
  background:rgba(0,0,0,0);
  transition:background .18s var(--win-out), overlay .18s allow-discrete, display .18s allow-discrete;
}
dialog.sheet[open]::backdrop{
  background:rgba(0,0,0,.45);
  transition:background .3s var(--win-in), overlay .3s allow-discrete, display .3s allow-discrete;
}
@starting-style{
  dialog.sheet[open]::backdrop{ background:rgba(0,0,0,0); }
}

/* Navegador antigo, sem @starting-style: entra pelo keyframe, sem saída. */
@supports not (transition-behavior: allow-discrete){
  dialog.sheet{ opacity:1; transform:none; transition:none; }
  dialog.sheet[open]{ animation:win-dialog-in .3s var(--win-in) both; }
  dialog.sheet[open]::backdrop{ animation:win-backdrop-in .3s var(--win-in) both; }
}
@keyframes win-dialog-in{
  from{ opacity:0; transform:translate3d(0,-34px,0); }
  to  { opacity:1; transform:none; }
}
@keyframes win-backdrop-in{
  from{ background:rgba(0,0,0,0); }
  to  { background:rgba(0,0,0,.45); }
}

/* O conteúdo de dentro não anima: a janela chega inteira, de uma vez. */
.sheet-head{ padding:16px 18px; border-bottom:1px solid var(--line); }
.sheet-body{ padding:16px 18px; display:flex; flex-direction:column; gap:12px; max-height:64vh; overflow-y:auto; }
.sheet-foot{ padding:13px 18px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; }

/* ── rodapé ─────────────────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding:22px 0; margin-top:auto; }
.foot-in{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }

/* ── responsivo ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px){
  .wrap{ padding:0 16px; }
  .g2,.g3,.g4{ grid-template-columns:minmax(0,1fr); }
  .h1{ font-size:25px; }
  .page{ padding:24px 0 44px; }
  .page-head{ align-items:stretch; gap:14px; margin-bottom:18px; padding-bottom:15px; }
  .page-head>.row{ width:100%; }
  .page-head .searchbox{ max-width:none; flex:1 1 180px; }
  .card-pad{ padding:15px; }
  .card-head{ padding:12px 14px; }
  #stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #jumps{ grid-template-columns:minmax(0,1fr); }
  .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .tile-body{ padding:9px; }
  .tile-play{ opacity:1; background:linear-gradient(transparent 55%,rgba(0,0,0,.5)); place-items:end center; padding-bottom:9px; }
  .tile-play span{ width:34px; height:34px; }
  .linkrow{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px 12px; padding:12px; }
  .linkrow-thumb{ grid-column:1; grid-row:1; }
  .linkrow-main{ grid-column:2; grid-row:1; }
  .linkrow>.btn,.linkrow>.private-tools{ grid-column:1 / -1; width:100%; }
  .private-tools{ justify-content:flex-end; flex-wrap:wrap; }
  .private-tools .btn{ flex:1; justify-content:center; }
  .sheet-head{ padding:14px 16px; }
  .sheet-body{ padding:14px 16px; max-height:calc(100dvh - 150px); }
  .sheet-foot{ padding:11px 16px; flex-wrap:wrap; }
  .sheet-foot .btn:not(.btn-danger){ flex:1; justify-content:center; }
  #toast-host{ bottom:78px; padding:0 12px; }
}

@media (max-width:780px){
  body.has-sidebar{ padding-left:0; padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .appbar{
    inset:auto 0 0 0; width:100%; height:calc(64px + env(safe-area-inset-bottom));
    border-right:0; border-top:1px solid var(--line); overflow:hidden;
  }
  .appbar-in{ display:block; width:100%; height:100%; padding:0 0 env(safe-area-inset-bottom); }
  .brand,.appbar-end{ display:none; }
  .appnav{
    width:100%; height:64px; margin:0; display:flex; flex-direction:row; align-items:stretch;
    gap:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .appnav::-webkit-scrollbar{ display:none; }
  .appnav a{
    flex:1 0 66px; min-width:66px; min-height:63px; padding:7px 4px 5px;
    flex-direction:column; justify-content:center; gap:2px; border:0; border-radius:0;
    font-size:10.5px; line-height:1.15; text-align:center;
  }
  .appnav a span{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .appnav a[aria-current="page"]{ border-top:2px solid var(--accent); padding-top:5px; }
  .mobile-nav-settings{ display:flex !important; }
  .foot{ padding-bottom:18px; }
}

@media (max-width:380px){
  .wrap{ padding:0 12px; }
  #stats{ grid-template-columns:minmax(0,1fr); }
  .tiles{ gap:7px; }
  .tile-title{ font-size:12.5px; }
  .tile-desc{ font-size:11px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
@media print{
  .appbar,.foot,#toast-host{ display:none; }
}