/* =============================================
   SHADOWLORE — Game UI Styles (Mobile-First)
   ============================================= */

.hidden { display: none !important; }

/* ---- Start Screen ---- */
#start-screen {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 2rem 1.25rem;
}
.start-bg {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1534447677768-be436bb09401?w=1600&q=80') center/cover no-repeat;
  filter: brightness(0.3) saturate(0.5);
  transform: scale(1.04);
}
.start-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(5,5,10,0.6) 0%, rgba(5,5,10,0.92) 70%, var(--bg) 100%);
}
.start-content {
  position: relative;
  z-index: 2;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
#particles-canvas {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.start-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  animation: fadeUp 0.8s 0.2s both;
}
.start-title {
  font-family: var(--font-deco);
  font-size: clamp(3rem, 15vw, 6rem);
  color: var(--text-bright);
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-shadow: 0 0 60px rgba(201,168,76,0.3), 0 4px 40px rgba(0,0,0,0.9);
  margin-bottom: 0.5rem;
  animation: fadeUp 0.8s 0.4s both;
}
.start-sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-dim);
  margin-bottom: 2rem;
  animation: fadeUp 0.8s 0.6s both;
}
.start-divider {
  width: 60px; height: 1px;
  background: linear-gradient(to right, transparent, var(--accent-dim), transparent);
  margin: 0 auto 2rem;
  animation: fadeIn 1s 0.8s both;
}
.start-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  align-items: stretch;
  animation: fadeUp 0.8s 0.8s both;
}
.start-buttons .btn-primary,
.start-buttons .btn-secondary {
  width: 100%;
}
.start-note {
  font-size: 0.78rem;
  font-family: var(--font-heading);
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-top: 1.75rem;
  animation: fadeIn 1s 1.2s both;
  line-height: 1.6;
}

/* =============================================
   GAME SCREEN
   ============================================= */
#game-screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Game Nav */
.game-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 52px;
  background: rgba(5,5,10,0.98);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 0.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.game-nav-logo {
  font-family: var(--font-deco);
  font-size: 0.88rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  flex: 1;
  text-decoration: none;
}

/* Game nav buttons — touch-friendly min 44px */
.game-nav-btn {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 0 0.875rem;
  height: var(--touch-min);
  border-radius: var(--radius);
  transition: border-color 0.2s, color 0.2s;
  cursor: pointer;
  background: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.game-nav-btn:hover {
  border-color: var(--accent-dim);
  color: var(--text);
}

/* Stats bar */
.stats-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 1rem;
  height: 48px;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stats-bar::-webkit-scrollbar { display: none; }
.stat-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.stat-icon { font-size: 0.85rem; }
.stat-label {
  font-family: var(--font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.stat-val {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--accent);
  min-width: 2rem;
  text-align: right;
}

/* Game Layout */
.game-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Scene header */
.scene-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.chapter-label {
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.15rem;
}
.scene-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

/* Story panel */
#story-panel {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem 1.125rem;
  background: var(--bg);
  position: relative;
}

/* Scene background hint */
#game-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 1s;
  opacity: 0.04;
}
#game-bg[data-scene="gate"]     { background: url('https://images.unsplash.com/photo-1534447677768-be436bb09401?w=800&q=60') center/cover; }
#game-bg[data-scene="city"]     { background: url('https://images.unsplash.com/photo-1462275646964-a0e3386b89ae?w=800&q=60') center/cover; }
#game-bg[data-scene="tavern"]   { background: url('https://images.unsplash.com/photo-1519500099198-fd81846b8d9c?w=800&q=60') center/cover; }
#game-bg[data-scene="market"]   { background: url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?w=800&q=60') center/cover; }
#game-bg[data-scene="castle"]   { background: url('https://images.unsplash.com/photo-1574375927938-d5a98e8ffe85?w=800&q=60') center/cover; }
#game-bg[data-scene="throne"]   { background: url('https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?w=800&q=60') center/cover; }
#game-bg[data-scene="darkness"] { background: #000; }
#game-bg[data-scene="dawn"]     { background: url('https://images.unsplash.com/photo-1470770903676-69b98201ea1c?w=800&q=60') center/cover; }

#story-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.9;
  color: var(--text);
  max-width: 680px;
  margin: 0 auto;
  transition: opacity 0.3s;
}
#story-text p { margin-bottom: 1.25rem; }
#story-text em { color: var(--text-bright); font-style: italic; }
#story-text strong { color: var(--accent); font-weight: 600; }

/* Choices panel — sticky at bottom */
#choices-panel {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 1rem 1.125rem 1.25rem;
  position: sticky;
  bottom: 0;
  z-index: 10;
}
#choices {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 680px;
  margin: 0 auto;
}

/* Choice buttons — large touch targets */
.choice-btn {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
  min-height: 60px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  width: 100%;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.choice-btn:hover {
  border-color: var(--accent-dim);
  background: rgba(201,168,76,0.05);
  transform: translateX(3px);
}
.choice-btn:active {
  transform: translateX(1px);
  background: rgba(201,168,76,0.08);
}
.choice-num {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  flex-shrink: 0;
  min-width: 1.2rem;
}
.choice-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.5;
}
.choice-btn--restart {
  border-color: var(--border2);
  background: transparent;
  margin-top: 0.5rem;
  min-height: 52px;
}
.choice-btn--restart:hover { border-color: var(--accent-dim); }

/* Endings */
.ending { max-width: 680px; margin: 0 auto; }
.ending-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 2px;
  margin-bottom: 0.75rem;
}
.ending--good .ending-badge    { background: rgba(201,168,76,0.15); color: var(--accent); border: 1px solid var(--accent-dim); }
.ending--bittersweet .ending-badge { background: rgba(123,79,160,0.15); color: #a070d0; border: 1px solid var(--purple-dim); }
.ending--dark .ending-badge    { background: rgba(120,30,30,0.15); color: #c06060; border: 1px solid rgba(120,30,30,0.4); }
.ending-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--text-bright);
  margin-bottom: 1rem;
}
.ending-actions { margin-top: 1rem; }

/* History Panel — full-screen on mobile */
.history-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 340px;
  background: var(--surface2);
  border-left: 1px solid var(--border);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.history-panel.open { transform: translateX(0); }
.history-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
}
.history-header h3 {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* History close — large touch target */
.history-close {
  width: var(--touch-min);
  height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--text-dim);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--radius);
  margin-right: -0.5rem;
  transition: color 0.2s;
}
.history-close:hover { color: var(--text); }
#history-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#history-list li {
  font-size: 0.95rem;
  color: var(--text-dim);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
}
.history-chapter {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}
.history-empty { font-style: italic; color: var(--text-dim); }

/* =============================================
   RESPONSIVE — Tablet (700px+)
   ============================================= */
@media (min-width: 700px) {
  #story-panel { padding: 2.5rem 2rem; }
  #choices-panel { padding: 1.25rem 2rem 1.75rem; }
  .game-nav { padding: 0 2rem; height: 56px; }
  .stats-bar { padding: 0 2rem; }
  .start-buttons { align-items: center; }
  .start-buttons .btn-primary,
  .start-buttons .btn-secondary { width: auto; min-width: 240px; }
  .history-panel { width: 340px; }
  .scene-header { padding: 0.875rem 2rem; }
}

/* =============================================
   RESPONSIVE — Desktop (1024px+)
   ============================================= */
@media (min-width: 1024px) {
  #game-screen { flex-direction: column; }
  .game-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    grid-template-rows: auto 1fr;
    min-height: calc(100vh - 56px);
  }
  .scene-header { grid-column: 1 / 3; }
  #story-panel {
    grid-column: 1;
    min-height: 0;
    height: calc(100vh - 56px - 48px - 56px);
    overflow-y: auto;
  }
  #choices-panel {
    grid-column: 2;
    grid-row: 2;
    border-top: none;
    border-left: 1px solid var(--border);
    position: sticky;
    top: calc(56px + 48px);
    height: calc(100vh - 56px - 48px);
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #game-bg { opacity: 0.06; }
  .choice-text { font-size: 1rem; }
}