/* ===================================================
   LumoArcadia - Base para mini jogos separados
=================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #15110d;
  --panel: #231a13;
  --panel-2: #2d2118;
  --accent: #c8a062;
  --accent-2: #2f6f3e;
  --text: #f4ead9;
  --muted: #a99576;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: 'Rajdhani', sans-serif;
}
html { font-size: 16px; }
body {
  min-height: 100vh;
  background: linear-gradient(135deg, #120d09, #24180f 46%, #0f1710);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-display); cursor: pointer; }
.game-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}
.game-header {
  width: min(1320px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.back-link, .neon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(200,160,98,.52);
  color: var(--text);
  background: rgba(47,35,25,.72);
  border-radius: 6px;
  padding: .55rem .9rem;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .18s, color .18s, box-shadow .18s;
}
.back-link:hover, .neon-btn:hover { background: #c8a062; color: #17110c; }
.game-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 4vw, 1.55rem);
  letter-spacing: .14em;
  color: var(--accent);
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
  text-align: center;
}
.hud {
  width: min(1320px, 100%);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .75rem;
}
.hud-item {
  min-width: 96px;
  border: 1px solid rgba(200,160,98,.18);
  background: rgba(35,26,19,.82);
  border-radius: 8px;
  padding: .45rem .75rem;
  text-align: center;
}
.hud-label {
  display: block;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .56rem;
  letter-spacing: .16em;
}
.hud-value {
  display: block;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1rem;
}
.stage-wrap {
  position: relative;
  width: min(1360px, 98vw);
  aspect-ratio: 1474 / 830;
  max-height: 82vh;
  min-height: 520px;
  border: 1px solid rgba(200,160,98,.18);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(20,14,10,.92);
  box-shadow: 0 18px 34px rgba(0,0,0,.28);
}
.pool-stage {
  background: #17110c;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  /* O canvas interno e LOGIC_WxLOGIC_H (1474x830).
     O CSS estica visualmente. A conversao mouse>logico
     e feita em input.js com getBoundingClientRect(). */
  image-rendering: auto;
}
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(18,13,9,.90);
  text-align: center;
  font-family: var(--font-display);
  z-index: 5;
}
.screen.hidden { display: none; }
.screen-title {
  color: var(--accent);
  font-size: clamp(1.4rem, 6vw, 3rem);
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.screen-sub {
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .1em;
  line-height: 1.7;
  max-width: 580px;
}
.controls-hint {
  margin-top: .75rem;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .58rem;
  letter-spacing: .12em;
  text-align: center;
}
@media (max-width: 680px) {
  .game-header { align-items: flex-start; flex-direction: column; }
  .game-title { text-align: left; }
  .hud { justify-content: flex-start; }
  .hud-item { min-width: 86px; }
  .stage-wrap { width: 96vw; aspect-ratio: 1474 / 830; max-height: none; min-height: auto; }
}