:root {
  --ink: #f3ead8;
  --ink-dim: #cfc3a8;
  --gold: #d8b25c;
  --panel-bg: rgba(20, 15, 10, 0.82);
  --panel-border: #6b4226;
  --btn-bg: #6b4226;
  --btn-bg-hover: #8a572f;
  font-family: 'Georgia', 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #0d0906;
  color: var(--ink);
  overflow: hidden;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: #2a1c10;
  border-bottom: 1px solid var(--panel-border);
  color: var(--ink);
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  transform: translateY(-100%);
  transition: transform 250ms ease;
  pointer-events: none;
}
.update-banner--visible {
  transform: translateY(0);
  pointer-events: auto;
}
.update-banner .btn {
  padding: 0.3rem 0.9rem;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.screen--visible {
  opacity: 1;
  pointer-events: auto;
}

.screen--fading {
  opacity: 0;
}

.screen--hidden {
  display: none;
}

/* ---------- Logo screen ---------- */
#screen-logo {
  background: #0d0906;
  cursor: pointer;
}
.logo-mark {
  width: min(40vw, 320px);
  height: min(40vw, 320px);
  object-fit: contain;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.6));
  opacity: 0;
  transition: opacity 1200ms ease;
}
.logo-mark--visible { opacity: 1; }
.logo-caption {
  margin-top: 1.2rem;
  color: var(--ink-dim);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.logo-caption--visible { opacity: 1; }

/* ---------- Title screen ---------- */
#screen-title {
  background:
    linear-gradient(180deg, rgba(10,7,4,0.6) 0%, rgba(10,7,4,0.8) 100%),
    url('../assets/images/title-background.png');
  background-size: cover;
  background-position: center;
  justify-content: flex-start;
  padding-top: 4vh;
}
.title-banner {
  display: block;
  width: auto;
  height: auto;
  max-width: min(90vw, 640px);
  max-height: 32vh;
  margin-bottom: 0.8rem;
  mix-blend-mode: screen;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.7));
}
.title-subtitle {
  color: var(--ink-dim);
  margin-bottom: 1.6rem;
  font-style: italic;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.title-footer {
  margin-top: auto;
  padding-top: 1.2rem;
  padding-bottom: 2.2vh;
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-dim);
  line-height: 1.7;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.title-footer a {
  color: var(--gold);
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.title-footer a:hover {
  text-decoration: underline;
}
.version-tag {
  margin-top: 0.3rem;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  opacity: 0.55;
}
.title-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: inherit;
  font-size: 1.1rem;
  padding: 0.75rem 2.2rem;
  border-radius: 6px;
  border: 2px solid var(--gold);
  background: var(--btn-bg);
  color: var(--ink);
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 150ms ease, transform 100ms ease;
}
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--small {
  font-size: 0.85rem;
  padding: 0.45rem 1.1rem;
}
.btn--ghost {
  background: transparent;
}

/* ---------- How to play ---------- */
#screen-howto {
  background: #150e08;
  padding: 4vh 4vw;
}
.howto-panel {
  max-width: 720px;
  max-height: 78vh;
  overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 2rem 2.4rem;
  line-height: 1.6;
}
.howto-panel h2 { color: var(--gold); margin-top: 1.4rem; }
.howto-panel h2:first-child { margin-top: 0; }
.howto-panel p, .howto-panel li { color: var(--ink-dim); }
.howto-back {
  margin-top: 1.6rem;
}

/* ---------- Variant select ---------- */
#screen-variant {
  background: #150e08;
  overflow-y: auto;
  justify-content: flex-start;
  padding: 4vh 4vw;
}
.variant-title {
  color: var(--gold);
  font-size: 1.8rem;
  margin-bottom: 2rem;
  flex-shrink: 0;
}
.variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  width: 100%;
  max-width: 560px;
  flex-shrink: 0;
}
.variant-card {
  background: var(--panel-bg);
  border: 2px solid var(--panel-border);
  border-radius: 10px;
  padding: 1.2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, transform 100ms ease;
}
.variant-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.variant-card--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.variant-card--disabled:hover { border-color: var(--panel-border); transform: none; }
.variant-preview {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  margin-bottom: 0.8rem;
  border: 1px solid var(--panel-border);
}
.variant-preview span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  user-select: none;
}
.variant-preview-piece--white {
  color: #fdf6e3;
  text-shadow: -1px 0 1px #000, 1px 0 1px #000, 0 -1px 1px #000, 0 1px 1px #000;
}
.variant-preview-piece--black {
  color: #16100c;
  text-shadow: -1px 0 1px #fff, 1px 0 1px #fff, 0 -1px 1px #fff, 0 1px 1px #fff;
}
.variant-name { color: var(--ink); font-size: 1.05rem; margin-bottom: 0.3rem; }
.variant-desc { color: var(--ink-dim); font-size: 0.8rem; }
.variant-back { margin-top: 2rem; flex-shrink: 0; }

/* ---------- Game screen ---------- */
#screen-game {
  background: #0d0906;
  justify-content: flex-start;
}
#gameCanvasContainer {
  position: absolute;
  inset: 0;
}
#gameCanvasContainer canvas {
  /* Claims touch gestures (pinch, pan) exclusively for the 3D scene's own pinch-zoom handling
     (js/render3d/scene.js) instead of letting the browser interpret them as page gestures. */
  touch-action: none;
}
.game-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 1.4rem;
  pointer-events: none;
}
.game-hud > * { pointer-events: auto; }
.hud-left, .hud-right {
  display: flex;
  gap: 0.6rem;
}
.turn-indicator {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.5rem 1.1rem;
  font-size: 1rem;
  color: var(--gold);
}
.roll-cta {
  position: absolute;
  bottom: 4vh;
  left: 50%;
  translate: -50% 0;
}
.turn-message {
  position: absolute;
  top: 4.2rem;
  left: 50%;
  translate: -50% 0;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.5rem 1.2rem;
  color: var(--ink-dim);
  font-size: 0.95rem;
  opacity: 0;
  transition: opacity 250ms ease;
}
.turn-message--visible { opacity: 1; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}
.modal-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}
.modal-box {
  background: var(--panel-bg);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 2rem 2.6rem;
  text-align: center;
  min-width: 280px;
}
.modal-box h3 { color: var(--gold); margin-top: 0; }
.modal-box .stat-line { color: var(--ink-dim); margin: 0.4rem 0; font-size: 1.05rem; }
.modal-box .btn { margin-top: 1.2rem; }

.gameover-title {
  font-size: 2.2rem;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.gameover-buttons {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
}

@media (max-width: 640px) {
  .title-banner { font-size: 2.2rem; }
  .howto-panel { padding: 1.2rem 1.4rem; }
}

/* Short viewports (phone landscape) leave almost no vertical clearance around the 3D board —
   stacking the turn message above the Roll Dice button still lands on the far row of pieces,
   so pair them side by side in the width landscape has to spare instead, both tucked just
   under the HUD. */
@media (max-height: 500px) {
  .game-hud { padding: 0.6rem 1rem; }
  .turn-message {
    top: 3.4rem;
    left: auto;
    right: 50%;
    margin-right: 0.4rem;
    translate: 0;
  }
  .roll-cta {
    top: 3.4rem;
    bottom: auto;
    left: 50%;
    margin-left: 0.4rem;
    translate: 0;
  }
}