/* Jogos de Palavras — identidade "Palavra puxa Palavra" (azulejo/cobalto, serifa).
   Tudo dentro de .jogos para não colidir com o resto do site. Paleta própria com
   modo claro/escuro seguindo a classe .dark do layout. */
.jogos{
  --bg:#EFE7D6; --surface:#FBF7ED; --surface-2:#F3ECDC;
  --ink:#1B2A3A; --muted:#5E6B78; --faint:#8A94A0;
  --accent:#14589E; --accent-ink:#0E3E70; --accent-soft:#DCE7F2;
  --line:#D9CFBB;
  --correct:#3F9B6D; --present:#D6A93B; --absent:#93A0AB;
  --tile-empty:#F3ECDC; --tile-border:#CFC4AC;
  --c-yellow:#E4C24E; --c-green:#7FB069; --c-blue:#5B8DD9; --c-purple:#9B7EC4;
  --shadow:0 1px 0 rgba(27,42,58,.04), 0 10px 30px -18px rgba(27,42,58,.35);
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;

  color:var(--ink);
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 3 C26 11 33 18 41 22 C33 26 26 33 22 41 C18 33 11 26 3 22 C11 18 18 11 22 3 Z' fill='none' stroke='%2314589E' stroke-width='1' opacity='0.10'/%3E%3C/svg%3E");
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  /* Sobe o py-10 do <main> do layout: sem isto ficava uma faixa vazia entre o
     cabeçalho e o topo da faixa dos jogos, que sangra até às margens. */
  margin-top:-2.5rem;
  padding:44px 18px 52px;
}
.jogos-inner{max-width:640px;margin:0 auto}
/* A faixa .jogos sai até às margens da viewport; 'clip' evita a barra horizontal
   sem quebrar o cabeçalho sticky nem o scroll vertical. Só carrega nesta página. */
body{overflow-x:clip}
.dark .jogos{
  --bg:#0E1A2B; --surface:#16283F; --surface-2:#1E3452;
  --ink:#EAF1FA; --muted:#9DB2CE; --faint:#5F769A;
  --accent:#5FA8F0; --accent-ink:#8FC6FF; --accent-soft:#22395C;
  --line:#2E466B;
  --correct:#49B87F; --present:#E6B84D; --absent:#47597A;
  --tile-empty:#16283F; --tile-border:#375480;
  --c-yellow:#E7C455; --c-green:#66C08A; --c-blue:#5B9BE8; --c-purple:#A98BDC;
  --shadow:0 1px 0 rgba(0,0,0,.25), 0 16px 36px -20px rgba(0,0,0,.8);
  background-color:#0E1A2B;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 3 C26 11 33 18 41 22 C33 26 26 33 22 41 C18 33 11 26 3 22 C11 18 18 11 22 3 Z' fill='none' stroke='%235FA8F0' stroke-width='1' opacity='0.16'/%3E%3C/svg%3E"),
    radial-gradient(130% 55% at 50% -6%, rgba(56,102,158,.55) 0%, rgba(14,26,43,0) 62%);
  background-repeat:repeat, no-repeat;
  background-size:44px 44px, 100% 460px;
  background-position:0 0, center top;
}
/* No escuro, os painéis ganham um contorno-realce subtil para não fundirem no fundo. */
.dark .jogos .panel,
.dark .jogos .card{box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04)}
.dark .jogos .conn-solved{color:#0b1830}

.jogos *{box-sizing:border-box}
/* O atributo hidden tem de ganhar às regras de display abaixo (ex.: .quiz-after,
   que é flex — sem isto a fonte da resposta aparecia antes de se responder). */
.jogos [hidden]{display:none !important}
.jogos button{font-family:inherit;cursor:pointer}
.jogos button:focus-visible,.jogos [tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Masthead */
.jogos .eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);font-weight:700;text-align:center}
.jogos .wordmark{font-family:var(--serif);font-weight:400;font-size:clamp(32px,9vw,50px);line-height:.98;margin:0 0 6px;letter-spacing:-.01em;text-align:center;text-wrap:balance;color:var(--ink)}
.jogos #jogos-home{cursor:pointer}
.jogos #jogos-home:hover em{opacity:.8}
.jogos .wordmark em{font-style:italic;color:var(--accent)}
.jogos .dek{color:var(--muted);font-size:14.5px;max-width:40ch;margin:0 auto;text-align:center}

/* Placar (pontuação partilhada por todos os jogos), a seguir ao jogo */
.jogos .placar{margin:24px auto 0;max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.jogos .placar-rank{text-align:center;margin-bottom:14px}
.jogos .placar-rank>b{display:block;font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink);line-height:1.1}
.jogos .placar-rank .rankbar{max-width:260px;margin:8px auto 0}
.jogos .placar-rank .placar-line{margin-top:5px}
.jogos .placar-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.jogos .pstat{text-align:center;background:var(--surface-2);border-radius:11px;padding:8px 4px}
.jogos .pstat b{display:block;font-family:var(--serif);font-size:24px;line-height:1.1;color:var(--accent);font-variant-numeric:tabular-nums}
.jogos .pstat span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:2px}
.jogos .placar-line{text-align:center;font-size:12.5px;color:var(--muted);margin:8px 0 0}
.jogos .placar-badge{text-align:center;font-size:13px;font-weight:700;color:var(--present);margin:6px 0 0}
.jogos .placar-nota{text-align:center;font-size:12px;color:var(--faint);margin:8px 0 0;line-height:1.45}
.jogos .placar-nota a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* QUIZ */
.jogos .quiz-loading{text-align:center;color:var(--muted);font-size:14px;margin:14px 0}
.jogos .quiz-count{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--faint);margin:0 0 4px;text-align:center}
.jogos .quiz-en{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.25;margin:0 0 14px;text-align:center;color:var(--ink);text-wrap:balance}
.jogos .quiz-foto{display:block;margin:0 auto 16px;width:170px;height:225px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.jogos .quiz-excerto{font-family:var(--serif);font-size:15.5px;line-height:1.6;white-space:pre-line;color:var(--ink);
  border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 10px 10px 0;padding:12px 14px;margin:0 0 16px}
.jogos .quiz-opts{display:grid;gap:8px}
.jogos .quiz-opt{text-align:left;white-space:pre-line;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
  padding:11px 14px;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4}
.jogos .quiz-opt:hover:not(:disabled){border-color:var(--accent);color:var(--accent-ink)}
.jogos .quiz-opt:disabled{cursor:default}
.jogos .quiz-opt.certa{background:var(--correct);border-color:var(--correct);color:#fff}
.jogos .quiz-opt.errada{background:#c0503f;border-color:#c0503f;color:#fff}
.jogos .quiz-opt.apagada{opacity:.5}
.jogos .quiz-after{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px}
.jogos .quiz-src{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.jogos .quiz-result{text-align:center}
.jogos .quiz-result h3{font-family:var(--serif);font-size:22px;margin:0;font-weight:600;color:var(--ink)}
.jogos .quiz-score{font-family:var(--serif);font-size:44px;font-weight:700;color:var(--accent);margin:6px 0 0;line-height:1}
.jogos .quiz-squares{font-size:22px;letter-spacing:.12em;margin:6px 0 0}
.jogos .quiz-fb{font-size:14px;font-weight:700;color:var(--present);margin:10px 0 0}

/* Nav pills */
.jogos .tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:20px 0 6px}
.jogos .tab{background:transparent;border:1px solid transparent;color:var(--muted);padding:8px 15px;border-radius:999px;font-size:14px;font-weight:600}
.jogos .tab:hover{color:var(--ink)}
.jogos .tab[aria-current="true"]{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--shadow)}

/* Home cards */
.jogos .cards{display:grid;gap:14px;margin-top:18px}
.jogos .card{display:flex;align-items:center;gap:16px;text-align:left;width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:18px;box-shadow:var(--shadow);transition:transform .15s ease,border-color .15s ease}
.jogos .card:hover{transform:translateY(-2px);border-color:var(--accent)}
.jogos .glyph{flex:0 0 auto;width:56px;height:56px;border-radius:13px;display:grid;place-items:center;font-size:28px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--line)}
.jogos .card-body h3{font-family:var(--serif);font-size:22px;margin:0 0 2px;font-weight:600;color:var(--ink)}
.jogos .card-body .orig{font-size:12px;color:var(--faint);font-weight:600}
.jogos .card-body p{margin:5px 0 0;font-size:13.5px;color:var(--muted);line-height:1.45}

.jogos .panel{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 16px;box-shadow:var(--shadow)}
.jogos .help-btn{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-weight:800;font-size:15px;line-height:1;display:grid;place-items:center}
.jogos .help-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Popup de regras */
.jogos-modal-bg{position:fixed;inset:0;background:rgba(10,16,26,.55);display:grid;place-items:center;z-index:70;padding:20px}
.jogos-modal{position:relative;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;max-width:420px;width:100%;padding:24px 22px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6);font-family:var(--sans)}
.jogos-modal h3{font-family:var(--serif);font-size:24px;margin:0 0 10px}
.jogos-modal-body{font-size:14.5px;line-height:1.55;color:var(--ink)}
.jogos-modal-body p{margin:0 0 10px}
.jogos-modal-body ul{margin:0 0 10px;padding-left:20px}
.jogos-modal-body li{margin:3px 0}
.jogos-modal-body b{color:var(--accent-ink)}
.jogos-modal-body .help-h{font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px;border-top:1px solid var(--line);padding-top:12px}
.jogos-modal-body .help-ex{display:flex;gap:5px;margin:8px 0 4px}
.jogos-modal-body .help-ex .t{width:34px;height:34px;display:grid;place-items:center;font-weight:800;font-size:16px;text-transform:uppercase;border:2px solid var(--tile-border);border-radius:6px;background:var(--tile-empty);color:var(--ink)}
.jogos-modal-body .help-ex .t.correct{background:var(--correct);border-color:var(--correct);color:#fff}
.jogos-modal-body .help-ex .t.present{background:var(--present);border-color:var(--present);color:#fff}
.jogos-modal-body .help-ex .t.absent{background:var(--absent);border-color:var(--absent);color:#fff}
.jogos-modal-x{position:absolute;top:12px;right:14px;width:30px;height:30px;border:none;background:transparent;color:var(--muted);font-size:24px;line-height:1;border-radius:8px}
.jogos-modal-x:hover{color:var(--ink);background:var(--surface-2)}
.jogos .game-head{text-align:center;margin-bottom:16px}
.jogos .game-head h2{font-family:var(--serif);font-size:26px;margin:0;font-weight:600;color:var(--ink)}
.jogos .game-head .sub{font-size:13px;color:var(--muted);margin-top:3px}

.jogos .msg{min-height:22px;text-align:center;font-size:14px;font-weight:600;color:var(--accent);margin:10px 0 4px}
.jogos .btn{background:var(--accent);color:#fff;border:none;border-radius:11px;padding:11px 18px;font-size:14px;font-weight:700;box-shadow:var(--shadow)}
.jogos .btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none}
.jogos .btn.small{padding:8px 13px;font-size:13px}
.jogos .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

.jogos-toast{position:fixed;left:50%;top:80px;transform:translateX(-50%);background:#1B2A3A;color:#EFE7D6;padding:9px 16px;border-radius:10px;
  font-size:14px;font-weight:700;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.jogos-toast.show{opacity:1}

/* TERMO */
.jogos .termo-lens{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.jogos .lenlabel{font-size:12px;color:var(--muted);font-weight:600;margin-right:2px}
.jogos .lenbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-weight:700;font-size:14px}
.jogos .lenbtn:hover{border-color:var(--accent);color:var(--ink)}
.jogos .lenbtn[aria-current="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.jogos .termo-grid{display:flex;flex-direction:column;gap:6px;align-items:center;margin:6px auto 4px}
.jogos .termo-row{display:grid;gap:6px;justify-content:center}
.jogos .tile{aspect-ratio:1;min-width:0;display:grid;place-items:center;font-size:clamp(17px,5.5vw,25px);font-weight:800;text-transform:uppercase;
  background:var(--tile-empty);border:2px solid var(--tile-border);border-radius:8px;color:var(--ink)}
.jogos .tile.filled{border-color:var(--muted);animation:jgpop .12s ease}
@keyframes jgpop{50%{transform:scale(1.08)}}
.jogos .tile.reveal{animation:jgflip .5s ease forwards}
@keyframes jgflip{0%{transform:rotateX(0)}49%,50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.jogos .tile.correct{background:var(--correct);border-color:var(--correct);color:#fff}
.jogos .tile.present{background:var(--present);border-color:var(--present);color:#fff}
.jogos .tile.absent{background:var(--absent);border-color:var(--absent);color:#fff}
.jogos .row-shake{animation:jgshake .4s}
@keyframes jgshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.jogos .kb{display:grid;gap:6px;max-width:500px;margin:16px auto 0}
.jogos .kb-row{display:flex;gap:5px;justify-content:center}
.jogos .key{flex:1;min-width:26px;height:50px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);color:var(--ink);
  font-weight:700;font-size:14px;text-transform:uppercase}
.jogos .key.wide{flex:1.6;font-size:12px}
.jogos .key:hover{border-color:var(--accent)}
.jogos .key.correct{background:var(--correct);border-color:var(--correct);color:#fff}
.jogos .key.present{background:var(--present);border-color:var(--present);color:#fff}
.jogos .key.absent{background:var(--absent);border-color:var(--absent);color:#fff}

/* LIGAÇÕES */
.jogos .conn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}
.jogos .conn-tile{aspect-ratio:5/3.4;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);
  font-weight:700;font-size:clamp(11px,3.3vw,15px);text-transform:uppercase;padding:2px;line-height:1.05}
.jogos .conn-tile.sel{background:var(--ink);color:var(--surface);border-color:var(--ink);transform:scale(.96)}
.jogos .conn-tile.pop{animation:jgpop2 .2s ease}
@keyframes jgpop2{50%{transform:scale(1.1)}}
.jogos .conn-solved{grid-column:1 / -1;border-radius:10px;padding:10px 12px;text-align:center;color:#20303f}
.jogos .conn-solved .cat{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.jogos .conn-solved .words{font-size:13px;font-weight:600;margin-top:2px}
.jogos .solved-yellow{background:var(--c-yellow)} .jogos .solved-green{background:var(--c-green)}
.jogos .solved-blue{background:var(--c-blue)} .jogos .solved-purple{background:var(--c-purple)}
.jogos .lives{display:flex;gap:7px;justify-content:center;align-items:center;margin:16px 0 4px;color:var(--muted);font-size:13px}
.jogos .dot{width:12px;height:12px;border-radius:50%;background:var(--accent)}
.jogos .dot.used{background:var(--line)}

/* SOLETRA */
.jogos .bee-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.jogos .bee-score{display:flex;align-items:center;gap:12px;width:100%;max-width:420px;margin:0 auto}
.jogos .rankbar{flex:1;height:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;position:relative;overflow:hidden}
.jogos .rankbar>i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:99px;width:0;transition:width .4s}
.jogos .rankname{font-weight:700;font-size:13px;min-width:96px;color:var(--ink)}
.jogos .beeinput{font-family:var(--serif);font-weight:700;font-size:26px;text-transform:uppercase;letter-spacing:.06em;min-height:34px;color:var(--ink);text-align:center}
.jogos .beeinput .center{color:var(--accent)}
.jogos .beeinput .ph{color:var(--faint);font-style:italic;font-weight:400;letter-spacing:0;font-size:17px}
.jogos .hive{position:relative;width:260px;height:240px}
.jogos .cell{position:absolute;width:84px;height:96px}
.jogos .cell button{width:100%;height:100%;border:none;background:transparent;padding:0}
.jogos .cell .hex{width:84px;height:96px;display:grid;place-items:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--surface-2);color:var(--ink);font-weight:800;font-size:30px;text-transform:uppercase;transition:transform .08s}
.jogos .cell.center .hex{background:var(--accent);color:#fff}
.jogos .cell button:active .hex{transform:scale(.9)}
.jogos .found{width:100%;max-width:420px;margin:0 auto}
.jogos .found h4{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 6px;font-weight:700}
.jogos .found .chips{display:flex;flex-wrap:wrap;gap:6px}
.jogos .chip{background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:13px;font-weight:600;text-transform:capitalize;color:var(--ink)}
.jogos .chip.pangram{background:var(--present);color:#fff;border-color:var(--present)}
.jogos .bee-controls{display:flex;gap:9px}
.jogos .icon-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:18px;display:grid;place-items:center}
.jogos .icon-btn:hover{border-color:var(--accent);color:var(--accent)}

/* CAIXA DE LETRAS */
.jogos .cx-input{font-family:var(--serif);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.05em;min-height:32px;text-align:center;color:var(--ink)}
.jogos .cx-input .ph{color:var(--faint);font-style:italic;font-weight:400;letter-spacing:0;font-size:16px}
.jogos .cx-board{display:flex;justify-content:center;margin:6px 0}
.jogos .cx-board svg{width:min(320px,86vw);height:auto}
.jogos .cx-status{text-align:center;font-size:13px;color:var(--muted);font-weight:600;margin-top:2px}
.jogos .cx-words{text-align:center;font-size:14px;color:var(--accent);font-weight:700;min-height:20px;margin-top:6px;text-transform:capitalize}

/* MINI CRUZADAS */
.jogos .mini-clue{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:15px;margin-bottom:12px;min-height:20px;color:var(--ink)}
.jogos .mini-clue .cn{font-weight:800;color:var(--accent);margin-right:4px}
.jogos .mini-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;max-width:320px;margin:0 auto;aspect-ratio:1}
.jogos .mc{position:relative;background:var(--surface-2);border:1px solid var(--tile-border);border-radius:4px;display:grid;place-items:center;
  font-size:clamp(18px,6vw,24px);font-weight:700;text-transform:uppercase;color:var(--ink);aspect-ratio:1;padding:0}
.jogos .mc.blk{background:var(--ink);border-color:var(--ink)}
.jogos .mc.active{background:var(--accent-soft)}
.jogos .mc.sel{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-soft)}
.jogos .mc.ok{color:var(--correct)} .jogos .mc.bad{color:#c0503f}
.jogos .mc .mn{position:absolute;top:1px;left:3px;font-size:9px;font-weight:700;color:var(--muted)}
.jogos .mc .ml{line-height:1}

/* WAFFLE */
.jogos .wswaps{text-align:center;font-size:13px;color:var(--muted);font-weight:600;margin:2px 0 12px}
.jogos .wswaps b{color:var(--accent)}
.jogos .waffle-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:330px;margin:0 auto}
.jogos .wtile{aspect-ratio:1;display:grid;place-items:center;font-size:clamp(18px,6vw,26px);font-weight:800;text-transform:uppercase;
  border-radius:8px;border:2px solid var(--tile-border);background:var(--surface-2);color:var(--ink)}
.jogos .wtile.hole{visibility:hidden}
.jogos .wtile.correct{background:var(--correct);border-color:var(--correct);color:#fff}
.jogos .wtile.present{background:var(--present);border-color:var(--present);color:#fff}
.jogos .wtile.locked{cursor:default}
.jogos .wtile.sel{outline:3px solid var(--accent);outline-offset:-3px}

/* SQUAREDLE */
.jogos .sq-prog{text-align:center;font-size:14px;color:var(--muted);margin-bottom:8px}
.jogos .sq-prog b{color:var(--accent);font-size:16px}
.jogos .sq-grid{display:grid;gap:6px;max-width:296px;margin:8px auto}
.jogos .sq-cell{aspect-ratio:1;display:grid;place-items:center;font-size:clamp(18px,6vw,26px);font-weight:800;text-transform:uppercase;
  border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink)}
.jogos .sq-cell.sel{background:var(--accent);border-color:var(--accent);color:#fff}

/* STRANDS */
.jogos .st-prog{text-align:center;font-size:14px;color:var(--muted);margin-bottom:8px}
.jogos .st-prog b{color:var(--accent);font-size:16px}
.jogos .st-span{color:var(--present);font-weight:700}
.jogos .st-grid{display:grid;gap:5px;max-width:300px;margin:8px auto}
.jogos .st-cell{aspect-ratio:1;display:grid;place-items:center;font-size:clamp(16px,5.2vw,23px);font-weight:800;text-transform:uppercase;
  border-radius:50%;border:1px solid transparent;background:var(--surface-2);color:var(--ink)}
.jogos .st-cell.sel{background:var(--accent);color:#fff}
.jogos .st-cell.theme{background:var(--c-blue);color:#0b1830}
.jogos .st-cell.span{background:var(--present);color:#0b1830}

@media (prefers-reduced-motion:reduce){.jogos *{animation:none!important;transition:none!important}}
@media (max-width:420px){.jogos .key{height:46px}}