/* Gaming Hub — estilos partilhados pelo hub e por todos os jogos (/assets/base.css).
   Direção: "caixa de brinquedos à luz do dia" — fundo limpo, cores vivas em blocos sólidos,
   peças com aresta que afunda. Sem gradientes decorativos. */

@font-face {
  font-family: "Unbounded";
  src: url("/assets/fonts/unbounded-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* base */
  --paper: #f7f8fc;
  --white: #ffffff;
  --ink: #17153b;
  --ink-2: #4a4870;
  --line: #e2e4f3;
  --line-strong: #cfd2ea;
  --table: #eceeff;           /* "mesa" onde assentam os tabuleiros 3D */

  /* cores de brinquedo (face / aresta) */
  --blue: #3355ff;   --blue-edge: #1f36b8;
  --pink: #ff4f9a;   --pink-edge: #c42a6f;
  --yellow: #ffc93c; --yellow-edge: #d99a00;
  --mint: #19c39c;   --mint-edge: #0e8c6f;
  --violet: #7b5cff; --violet-edge: #5236d6;
  --orange: #ff9f1c; --orange-edge: #cf7400;

  /* nomes usados pelos jogos */
  --bg: var(--paper);
  --text: var(--ink);
  --muted: #6b6a8e;
  --surface: var(--white);
  --surface-solid: var(--white);
  --surface-2: #f0f1fa;
  --surface-edge: #d6d9ee;
  --accent: var(--blue);
  --accent-hi: #5a78ff;
  --amber: var(--orange);
  --rose: var(--pink);
  --coral: var(--pink);
  --sun: var(--yellow);
  --pool: var(--mint);
  --toy: var(--violet);
  --p1: #7b5cff;
  --p2: #ff9f1c;
  --danger: #e5245e;

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 0 rgba(23, 21, 59, 0.04), 0 12px 30px -18px rgba(23, 21, 59, 0.25);
  --display: "Unbounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-underline-offset: 3px; font-weight: 600; }
a:hover { color: var(--blue-edge); }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); }
h1 { margin: 0; font-size: clamp(28px, 4.2vw, 44px); }
h2 { margin: 0 0 14px; font-size: 18px; }
.muted { color: var(--muted); }
.error { color: var(--danger); }
.hidden { display: none !important; }

/* ── Topbar ── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, calc((100vw - 1200px) / 2));
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 17px/1 var(--display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
}
.brand::before {
  content: ""; width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: url("/assets/icons/icon-192.png") center / cover;
}
.brand:hover { color: var(--ink); }
.brand, .nav-link { white-space: nowrap; }
@media (max-width: 420px) { .brand { font-size: 0; gap: 0; } }
.userbar { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 15px; }
.userbar strong { color: var(--ink); font-weight: 700; }
.avatar {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  font: 700 14px/1 var(--display); color: var(--ink);
  background: var(--yellow); box-shadow: 0 3px 0 var(--yellow-edge);
}
.nav-link { color: var(--ink-2); font-weight: 700; text-decoration: none; padding: 7px 12px; border-radius: 10px; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
@media (max-width: 520px) { .userbar > strong { display: none; } }

/* ── Layout ── */
main { max-width: 1200px; margin: 0 auto; padding: 28px 16px 72px; }
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── Botões: peças de brinquedo com aresta que afunda ── */
.btn {
  --face: var(--white);
  --edge: var(--line-strong);
  --ink-on: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border: 2px solid var(--edge); border-radius: 14px;
  background: var(--face); color: var(--ink-on);
  font: 700 15px/1.1 var(--font); letter-spacing: 0.01em;
  box-shadow: 0 4px 0 var(--edge);
  cursor: pointer; text-decoration: none;
  transform: translateY(0);
  transition: transform .08s, box-shadow .08s, background .15s;
}
.btn:hover { color: var(--ink-on); transform: translateY(-1px); box-shadow: 0 5px 0 var(--edge); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.btn.primary { --face: var(--blue); --edge: var(--blue-edge); --ink-on: #fff; }
.btn.sun { --face: var(--yellow); --edge: var(--yellow-edge); --ink-on: var(--ink); }
.btn.pink { --face: var(--pink); --edge: var(--pink-edge); --ink-on: #fff; }
.btn.ghost { --face: var(--white); --edge: var(--line-strong); }
.btn.small { padding: 7px 12px; font-size: 14px; border-radius: 11px; box-shadow: 0 3px 0 var(--edge); }
.btn.small:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
input {
  padding: 11px 13px; border-radius: var(--radius-sm); border: 2px solid var(--line-strong);
  background: var(--white); color: var(--ink); font: inherit; min-width: 0;
}
input:focus { outline: none; border-color: var(--blue); }
.install-btn { margin-left: auto; }

/* ── Página de jogo ── */
.game-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.game-head p { margin: 0; max-width: 60ch; color: var(--muted); }
.back { align-self: flex-start; font-size: 15px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.back:hover { color: var(--blue); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.side { display: grid; gap: 16px; }
@media (max-width: 900px) { .game-layout { grid-template-columns: 1fr; } }

/* Palco 3D: uma mesa clara onde os tabuleiros assentam */
.stage-wrap {
  position: relative;
  border-radius: calc(var(--radius) + 6px);
  background: var(--table);
  border: 2px solid #dfe2fb;
  box-shadow: inset 0 -6px 0 #dfe2fb;
  overflow: hidden;
}
.iso-stage { position: relative; width: 100%; touch-action: manipulation; }
.iso-stage canvas { display: block; width: 100%; }
.iso-fallback { padding: 40px 20px; text-align: center; color: var(--muted); }
.stage-overlay {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px;
  background: rgba(236, 238, 255, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--ink);
  font-size: 18px; z-index: 2;
}
.stage-overlay p { margin: 6px 0; }
.stage-overlay .muted { color: var(--ink-2); }
.stage-overlay .big { font: 700 clamp(22px, 4vw, 30px)/1.2 var(--display); }

/* Estatísticas */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.stat {
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.stat b { display: block; font: 700 24px/1.25 var(--display); color: var(--ink); letter-spacing: -0.02em; }
.help { font-size: 15px; color: var(--ink-2); }
.help ul { margin: 0; padding-left: 18px; }
.help li + li { margin-top: 4px; }
.help kbd {
  display: inline-block; min-width: 24px; padding: 1px 6px; border-radius: 7px; text-align: center;
  font: 700 12px/1.7 var(--font); color: var(--ink);
  background: var(--white); border: 2px solid var(--line-strong); box-shadow: 0 2px 0 var(--line-strong);
}

/* ── Lobby multiplayer (mp.js) ── */
.status { min-height: 1.5em; margin: 0 0 12px; font-weight: 700; }
.lobby .row + .row { margin-top: 12px; }
.lobby .row.stack { display: grid; grid-template-columns: 1fr; }
.lobby .join { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: 100%; }
.code {
  font: 700 22px/1 var(--display); letter-spacing: 4px; color: var(--ink);
  padding: 8px 12px; border-radius: 10px; background: var(--yellow); display: inline-block; margin-top: 6px;
}
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 14px; }
.versus .vs { font: 700 12px/1 var(--display); color: var(--muted); }
.player {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 2px solid transparent; min-width: 0;
  transition: border-color .2s, background .2s;
}
.player .dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.player.p0 .dot { background: var(--p1); }
.player.p1 .dot { background: var(--p2); }
.player .name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player .you { font-size: 12px; color: var(--muted); font-weight: 600; }
.player.active.p0 { border-color: var(--p1); background: #efeaff; }
.player.active.p1 { border-color: var(--p2); background: #fff2df; }
.rating-change { margin: -4px 0 12px; font-size: 15px; color: var(--muted); }
.rating-change b { color: var(--ink); font-family: var(--display); }
.rating-change.up b { color: var(--mint-edge); }
.rating-change.down b { color: var(--pink-edge); }
.rank-link { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 700; }
.rank-link.after-btn { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  body { font-size: 16px; }
  main { padding: 16px 16px 56px; }
  .topbar { padding-block: 8px; }
  .game-head { gap: 4px; margin-bottom: 14px; }
  .game-head h1 { font-size: 28px; }
  .game-head p { font-size: 15px; }
  .back { font-size: 14px; }
  /* palco de ponta a ponta: tabuleiros maiores */
  .game-layout { gap: 16px; }
  .game-layout > .stage-wrap { margin-inline: -16px; border-radius: 0; border-inline: 0; }
  .panel { padding: 16px; border-radius: 18px; }
  .stat b { font-size: 21px; }
}
/* Em ecrãs táteis, as instruções de teclado não interessam */
@media (pointer: coarse) {
  .help li:has(kbd) { display: none; }
}
/* Toques sem o realce azul do browser; os botões já afundam ao toque */
a, button { -webkit-tap-highlight-color: transparent; }

/* ── Cartões de jogo animados (cards.js) ── */
.toy-card {
  --rx: 0deg; --ry: 0deg; --lift: 0px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition: transform .18s ease-out, box-shadow .18s ease-out;
  will-change: transform;
}
.toy-card:not(.in) { opacity: 0; transform: perspective(900px) translateY(28px) scale(.94); }
.toy-card.in { animation: card-in .6s cubic-bezier(.2, 1.4, .4, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes card-in {
  0% { opacity: 0; transform: perspective(900px) translateY(28px) scale(.94); }
  100% { opacity: 1; transform: perspective(900px) translateY(0) scale(1); }
}
@media (hover: hover) and (pointer: fine) {
  .toy-card:hover { --lift: -4px; }
  .toy-card:hover img, .toy-card:hover .icon { animation: icon-hop .9s cubic-bezier(.3, .7, .4, 1) infinite; }
}
/* Toque/clique: o cartão afunda como uma peça */
.toy-card:active { --lift: 4px; transition-duration: .06s; }
.toy-card:active img, .toy-card:active .icon { transform: translateY(2px) scale(.96); }
@keyframes icon-hop {
  0%, 100% { transform: translateY(0) rotate(0) scale(1, 1); }
  30% { transform: translateY(-9px) rotate(-6deg) scale(.96, 1.05); }
  55% { transform: translateY(0) rotate(0) scale(1.06, .94); }
  70% { transform: translateY(-3px) rotate(2deg) scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .toy-card, .toy-card:not(.in) { opacity: 1; transform: none; }
}

/* Lobby: modo contra o CPU */
.lobby-or { text-align: center; margin: 12px 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.lobby-label { margin: 0 0 8px; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.lobby-cpu { display: grid; gap: 10px; }
.small-note { margin: 0 0 10px; font-size: 14px; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.segmented .seg {
  border: 0; border-radius: 10px; padding: 8px 6px; background: transparent; color: var(--ink-2);
  font: 700 14px/1.1 var(--font); cursor: pointer;
}
.segmented .seg[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 0 var(--line-strong); }

/* ── Página de jogo: um ecrã, sem scroll (body.game-page) ── */
html:has(body.game-page) { height: 100%; overflow: hidden; }
body.game-page {
  height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none;
  display: flex; flex-direction: column;
}
.game-page .topbar { position: relative; flex: none; padding-block: 6px; }
.game-page main {
  flex: 1; min-height: 0; width: 100%; max-width: 1480px;
  display: flex; flex-direction: column;
  padding: clamp(6px, 1.4vh, 16px) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.game-page .game-head {
  flex: none; flex-direction: row; align-items: baseline; flex-wrap: nowrap; gap: 12px; min-width: 0;
  margin: 0 0 clamp(6px, 1.2vh, 12px);
}
.game-page .game-head h1 { font-size: clamp(18px, 1.6vw + 1vh, 30px); white-space: nowrap; }
.game-page .game-head p { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-page .back { font-size: 14px; white-space: nowrap; }
.game-page .game-layout {
  flex: 1; min-height: 0; position: relative;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 26vw, 340px);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "stage side";
  gap: clamp(8px, 1.2vw, 18px); align-items: stretch;
}
.game-page .game-layout > .stage-wrap {
  grid-area: stage; min-height: 0; margin: 0; border-radius: var(--radius); border: 2px solid #dfe2fb;
}
.game-page .stage-wrap > .iso-fit { position: absolute; inset: 0; }
.game-page .stage-wrap > .iso-fit canvas { position: absolute; inset: 0; }
.game-page .side {
  grid-area: side; min-height: 0; align-content: start; gap: 10px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.game-page .panel { padding: clamp(10px, 1.6vh, 16px); border-radius: 16px; }
.game-page .stats { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.game-page .stat { padding: 6px 9px; font-size: 12px; }
.game-page .stat b { font-size: clamp(16px, 1.2vw + 1vh, 22px); }
.game-page .status { margin-bottom: 8px; font-size: 15px; }
.game-page .lobby .row + .row { margin-top: 8px; }
.game-page .lobby .btn { padding: 9px 12px; font-size: 14px; }
.game-page .lobby-or { margin: 6px 0 4px; }
.game-page .lobby-label { margin-bottom: 6px; font-size: 13px; }
.game-page .lobby-cpu { gap: 8px; }
.game-page .versus { margin-bottom: 8px; }
.game-page .rank-link { margin-top: 8px; font-size: 14px; }
.game-page .small-note { font-size: 13px; margin-bottom: 8px; }

/* "Como jogar" num balão (gamepage.js) */
.help-btn { gap: 6px; }
.help-btn span:first-child { font: 800 15px/1 var(--display); }
.help-pop {
  position: fixed; z-index: 60; top: 58px; right: max(12px, env(safe-area-inset-right));
  width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 76px); overflow-y: auto;
  box-shadow: 0 18px 50px -12px rgba(23, 21, 59, 0.45);
}
.help-pop h2 { padding-right: 36px; }
.help-close {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 10px;
  border: 2px solid var(--line-strong); background: #fff; color: var(--ink); font: 700 14px/1 var(--font); cursor: pointer;
}

/* Telemóvel de pé: palco em cima, painel compacto em baixo */
@media (orientation: portrait) and (max-width: 900px) {
  .game-page .game-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "stage" "side";
  }
  .game-page .side { max-height: 48dvh; }
  .game-page .game-head p:not([id]) { display: none; }
  .game-page .lobby .row.stack { grid-template-columns: 1fr 1fr; }
  .game-page .lobby-or { display: none; }
  .game-page .lobby-idle { display: grid; gap: 8px; }
  .help-btn-txt { display: none; }
}
/* Ecrãs baixos (telemóvel deitado): sem título, topbar mínima, painel à direita */
@media (max-height: 540px) and (orientation: landscape) {
  .game-page .topbar { padding-block: 3px; }
  .game-page .brand::before { width: 28px; height: 28px; }
  .game-page .avatar, .game-page .btn.small { padding-block: 5px; }
  .game-page .game-head { display: none; }
  .game-page .game-layout { grid-template-columns: minmax(0, 1fr) clamp(230px, 34vw, 310px); gap: 8px; }
  .game-page .lobby .row.stack { grid-template-columns: 1fr 1fr; }
  .game-page .lobby-or, .game-page .lobby-label { display: none; }
  .game-page .rank-link { display: none; }
  .game-page .panel { padding: 10px; }
  .help-pop { top: 44px; max-height: calc(100dvh - 56px); }
}

/* Páginas de escolha de modo (sem palco) */
.game-page.chooser main { justify-content: flex-start; }
@media (max-height: 540px) and (orientation: landscape) {
  .game-page.chooser .game-head { display: flex; }
  .game-page.chooser .game-head p { display: none; }
}
.game-page .topbar { padding-inline: max(12px, calc((100vw - 1480px) / 2 + 12px)); }
.game-page .help-btn { margin-left: auto; }

/* Botões de som na topbar dos jogos */
.sfx-group { display: flex; gap: 6px; margin-left: auto; }
.game-page .sfx-group + .help-btn { margin-left: 0; }
.sfx-btn { min-width: 38px; padding-inline: 8px; font-size: 16px; }
@media (max-width: 420px) { .sfx-btn { min-width: 34px; padding-inline: 6px; } }
@media (max-width: 480px) {
  .nav-txt { display: none; }
  .sfx-group { gap: 4px; }
  .topbar { gap: 8px; }
}

/* ── Som: balão de volume (⚙) e painel reutilizável (sfx.js soundSettings) ── */
.sound-pop {
  position: fixed; z-index: 60; top: 58px; right: max(12px, env(safe-area-inset-right));
  width: min(360px, calc(100vw - 24px)); padding: 16px; border-radius: 18px;
  background: #fff; border: 2px solid var(--line); box-shadow: 0 18px 50px -12px rgba(23, 21, 59, 0.45);
  display: grid; gap: 10px;
}
.sound-pop > strong { font: 700 16px/1.2 var(--display); }
.sound-settings { display: grid; gap: 10px; }
.ss-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 76px auto; align-items: center; gap: 10px; }
.ss-name { font-weight: 700; font-size: 14px; }
.ss-val { font: 700 13px/1 var(--font); color: var(--muted); text-align: right; }
.ss-row input[type="range"] { width: 100%; accent-color: var(--blue); padding: 0; border: 0; min-width: 0; }
.ss-row input[type="range"]:disabled { opacity: .4; }
.ss-mute { padding: 5px 9px; font-size: 12.5px; }
@media (max-height: 460px) { .sound-pop { top: 44px; } }