/* Cosmic Arcade — design system (paleta cósmica: violeta + magenta + cyan + dourado) */
:root{
  --bg0:#090712; --bg1:#150C2C;
  --violet:#6E4CFF; --magenta:#D36CFF; --cyan:#5BE0FF; --gold:#F4D03F;
  --ink:#F4EFFF; --muted:rgba(244,239,255,.62);
  --card:rgba(255,255,255,.055); --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg0) 0%,var(--bg1) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* orbs de luz */
.orb{position:fixed;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
.orb.o1{width:42vmax;height:42vmax;left:-12vmax;top:-10vmax;background:rgba(110,76,255,.25)}
.orb.o2{width:36vmax;height:36vmax;right:-10vmax;top:22vh;background:rgba(211,108,255,.20)}
.orb.o3{width:30vmax;height:30vmax;left:8vmax;bottom:-12vmax;background:rgba(91,224,255,.16)}
/* estrelas (geradas por arcade.js) */
.star{position:fixed;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.7;pointer-events:none;z-index:0}
@media (prefers-reduced-motion:no-preference){
  .star{animation:twinkle 3.2s ease-in-out infinite}
  @keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.85}}
}
.wrap{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:18px 16px 40px}
h1.title{
  font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:500;
  font-size:clamp(1.7rem,6vw,2.4rem);margin:.4em 0 .1em;text-align:center;letter-spacing:.5px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.subtitle{text-align:center;color:var(--muted);margin:0 0 1.4em;font-size:.95rem}
/* cards do lobby */
.games{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.game-card{
  display:block;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:18px 14px;text-align:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .15s ease,box-shadow .15s ease;
}
.game-card:active{transform:scale(.97)}
.game-card .icon{font-size:2.2rem;display:block;margin-bottom:8px;filter:drop-shadow(0 0 10px rgba(211,108,255,.55))}
.game-card .name{display:block;font-weight:600;font-size:1.02rem}
.game-card .desc{display:block;color:var(--muted);font-size:.8rem;margin-top:4px;line-height:1.35}
.badge{display:inline-block;font-size:.66rem;border:1px solid var(--line);border-radius:99px;padding:2px 8px;color:var(--muted);margin-top:8px}
/* botões */
.btn{
  display:inline-block;border:none;cursor:pointer;text-decoration:none;text-align:center;
  font-size:1rem;font-weight:600;color:#fff;
  background:linear-gradient(90deg,var(--violet),var(--magenta));
  border-radius:14px;padding:13px 22px;min-height:44px;min-width:44px;
  box-shadow:0 0 18px rgba(211,108,255,.35);
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:active{transform:scale(.96)}
.btn.ghost{background:transparent;border:1px solid var(--line);box-shadow:none;color:var(--ink)}
.btn.small{padding:9px 14px;font-size:.85rem;border-radius:11px}
/* topo das páginas de jogo */
.gamebar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.gamebar .back{color:var(--muted);text-decoration:none;font-size:.9rem;padding:8px 10px;min-height:44px;display:flex;align-items:center}
.gamebar .gtitle{font-family:Georgia,serif;font-style:italic;font-size:1.15rem;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.score-pill{font-size:.85rem;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:6px 12px;white-space:nowrap}
/* canvas */
canvas.game{display:block;width:100%;border-radius:18px;border:1px solid var(--line);
  background:rgba(0,0,0,.25);touch-action:none}
/* overlays (menus de modo / fim de jogo) */
.overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:rgba(9,7,18,.82);border-radius:18px;z-index:5;padding:20px;text-align:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.overlay h2{font-family:Georgia,serif;font-style:italic;font-weight:500;margin:0;font-size:1.5rem}
.overlay p{color:var(--muted);margin:0;font-size:.92rem;line-height:1.45}
.overlay.hidden{display:none}
.stage{position:relative}
/* utilidades */
.row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.muted{color:var(--muted)}
.lang-toggle{position:absolute;top:14px;right:14px;z-index:2}
footer{margin-top:34px;text-align:center;color:var(--muted);font-size:.78rem;line-height:1.6}
footer a{color:var(--muted)}
/* celebração */
.cstar{position:fixed;pointer-events:none;font-size:1.1rem;z-index:50;animation:rise 1.6s ease-out forwards}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-38vh) scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.cstar{animation:none;opacity:0}}