:root {
  --page-bg: #100e0c;
  --gold: #f5d27a;
  --text: #fff7e6;
  --muted: #cdbd9f;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  background:
    radial-gradient(circle at 28% 10%, rgba(245, 210, 122, 0.12), transparent 30%),
    radial-gradient(circle at 78% 22%, rgba(114, 70, 35, 0.28), transparent 32%),
    linear-gradient(145deg, #211d19 0%, #11100e 50%, #050505 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  overflow-x: hidden;
}
body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 14px 10px 28px;
}
.game-shell {
  width: min(100%, 1248px);
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.canvas-card {
  width: 100%;
  max-width: 1248px;
  overflow: visible;
  border-radius: 30px;
  padding: 10px;
  background: linear-gradient(145deg, rgba(255, 244, 210, 0.09), rgba(255, 255, 255, 0.015)), rgba(8, 7, 6, 0.45);
  border: 1px solid rgba(255, 226, 166, 0.16);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 24px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 900px) {
  body { padding: 6px 4px 18px; }
  .canvas-card { padding: 4px; border-radius: 16px; }
  canvas { border-radius: 14px; }
}


/* --- PANEL REFINEMENT --- */
button, .btn {
  font-size: 12px;
  padding: 8px 10px;
}

.panel-tight {
  line-height: 1.2;
}

.small-btn {
  font-size: 12px;
  padding: 6px 8px;
}

.panel-text {
  line-height: 1.25;
  letter-spacing: 0.2px;
}

/* prevent overflow text */