/* Game screen layout — grid, console, action area, hero stats, scrollbars, mobile */

/* Lock the game page to the viewport — no page-level scroll */
html:has(.game-screen), html:has(.game-screen) body { height: 100%; overflow: hidden; }
body:has(.game-screen) .app-nav { display: none; }
body:has(.game-screen)::after { opacity: 0.4; }
.game-screen { -webkit-tap-highlight-color: transparent; }
.game-screen { position: relative; height: calc(100dvh - 2rem); display: flex; flex-direction: column; overflow: hidden; background: var(--theme-bg, #0d0d0d); }

/* ── Game top bar — floating over content ── */
.game-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  z-index: 10;
  pointer-events: none;
  padding-bottom: 2rem;
}
.game-topbar-home, .game-topbar-menu { pointer-events: auto; }
.game-topbar-home { display: flex; align-items: center; color: var(--theme-accent); transition: color 0.3s; }
@media (hover: hover) {
  .game-topbar-home:hover { color: var(--theme-text); }
}
.game-topbar-icon { height: 1.8rem; width: auto; }
.game-topbar-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
}
.game-topbar-menu span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--theme-accent);
  transition: background 0.3s;
}
@media (hover: hover) {
  .game-topbar-menu:hover span { background: var(--theme-text); }
}

/* On a desktop the mark keeps to the window's top-left corner, in the margin
   beside the centred game (the owner's choice over the story's own corner,
   where it sat on the prose). Below 1000px that margin is too narrow for it,
   so the game gives it a gutter of its own. */
@media (min-width: 769px) and (max-width: 999.98px) {
  body:has(.game-screen) > .container { padding-left: 3.5rem; }
}

/* The hero's health and momentum on a phone (games/_topbar_stats). A desktop
   has the sidebar beside the story. */
.topbar-stats { display: none; }

/* ── Sidebar game info ── */
.sidebar-game-info {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
}
.sidebar-game-title {
  font-family: 'Cinzel', 'Palatino Linotype', serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--theme-accent);
  margin-bottom: 0.2rem;
}
.sidebar-game-meta {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 0.68rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sidebar-details-link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
@media (hover: hover) {
  .sidebar-details-link:hover { color: var(--theme-accent); }
}

.dev-cheat-toggle, .game-switch { margin-top: 0.3rem; }
.dev-cheat-btn {
  font-family: 'Courier New', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border: 1px solid #555;
  border-radius: 3px;
  background: transparent;
  color: #888;
  cursor: pointer;
  transition: all 0.15s;
}
@media (hover: hover) {
  .dev-cheat-btn:hover { border-color: #e8c840; color: #e8c840; }
}
.dev-cheat-btn.active { border-color: #e8c840; color: #e8c840; background: rgba(232, 200, 64, 0.1); }

/* The picture switches are the player's, so they wear the game's palette
   like the contrast buttons, not the debug toggle's Courier and yellow
   (1.5:1 on the light themes). On is the accent; off is muted. */
.game-switch-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: 1px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
@media (hover: hover) {
  .game-switch-btn:hover { color: var(--theme-text); border-color: var(--text-muted); }
}
.game-switch-btn.active { color: var(--theme-accent); border-color: color-mix(in srgb, var(--theme-accent) 60%, transparent); }
@media (hover: hover) {
  .game-switch-btn.active:hover { border-color: var(--theme-accent); }
}

/* Grid fills whatever height remains after the banner */
.game-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 320px; gap: 1rem; }
@media (max-width: 768px) { .game-layout { grid-template-columns: 1fr; } }

/* Console panel is a bounded flex column — only turn-log scrolls */
.console-panel { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; border: 1px solid var(--border-color); background: color-mix(in srgb, var(--theme-bg) 60%, transparent); }
.console-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5rem;
  background: linear-gradient(to bottom, var(--theme-bg) 40%, transparent 100%);
  z-index: 5;
  pointer-events: none;
}
.console-separator { opacity: 0.4; }
.turn-log { flex: 1; min-height: 0; overflow-y: auto; padding: 2.5rem 1rem 1rem; display: flex; flex-direction: column; gap: 1rem; }

/* Action area — stage prompt feel */
.action-area { flex-shrink: 0; border-top: 1px solid var(--border-color); padding: 0.65rem 0.75rem; }
.action-form { display: flex; align-items: center; gap: 0.5rem; }
.action-prompt { font-family: 'Cinzel', serif; font-size: 0.7rem; color: var(--theme-accent); opacity: 0.6; flex-shrink: 0; user-select: none; }
.action-input { flex: 1; background: transparent; color: var(--theme-text); border: none; border-bottom: 1px solid var(--line-dim); padding: 0.4rem 0.25rem; font-family: var(--theme-font); font-size: 1rem; }
.action-input:disabled { opacity: 0.4; }

/* A turn is in flight, so everything that would start another stands down —
   send, Rest, Travel, the map, saves. The flag lives on .game-screen and the
   clicks are swallowed by game_controller#blockWhilePending; this is the look. */
.game-screen[data-turn-pending] [data-turn-action] { opacity: 0.4; pointer-events: none; cursor: default; }

.right-panel { position: relative; display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; overflow-y: auto; font-family: 'Lora', Georgia, serif; }
.right-panel-spacer { height: 3rem; flex-shrink: 0; }
.right-panel::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3rem;
  flex-shrink: 0;
  background: linear-gradient(to top, var(--theme-bg) 20%, transparent 100%);
  pointer-events: none;
  margin-top: -3rem;
}
/* ── Hero stats — primary visual weight ── */
.hero-stat-bar {
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--panel-bg) 80%, var(--theme-accent) 5%);
  padding: 0.85rem 1.1rem;
  font-size: 0.85rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}
.stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.2rem 0; }
.stat-row--spaced { margin-top: 0.6rem; }
.stat-label-group { display: inline-flex; align-items: center; }
.stat-label { font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.18em; color: var(--theme-accent); text-transform: uppercase; opacity: 0.8; }
.stat-value { color: var(--text-bright); font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.health-bar-outer { height: 4px; background: var(--border-color); margin-top: 0.5rem; border-radius: 2px; }
.health-bar-inner { height: 4px; background: var(--theme-accent); transition: width 0.3s; border-radius: 2px; }
.momentum-track { display: flex; gap: 3px; margin-top: 0.35rem; }
.momentum-pip { flex: 1; height: 6px; border-radius: 2px; opacity: 0.12; transition: opacity 0.3s, box-shadow 0.3s; }
.momentum-pip.active { opacity: 1; box-shadow: 0 0 6px currentColor; }
.momentum-value { font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; }

/* Hero attributes — five abbreviated stats on one line, four of them a signed
   d6 modifier. Spaced for five in the 320px column: at the spacing four had,
   VIT ran some 19px past the panel's edge in every language. Wrapping is only
   the safety net for a label longer still. */
.attribute-track { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem; margin-top: 0.35rem; }
.attribute { display: inline-flex; align-items: baseline; gap: 0.2rem; }
.attribute-name { font-family: 'Cinzel', serif; font-size: 0.58rem; letter-spacing: 0.1em; color: var(--text-dim); }
.attribute-value { font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--text-mid); }
.attribute-value.positive { color: var(--theme-accent); }
.attribute-value.negative { color: var(--color-failure-text); }
.attribute-value.zero { opacity: 0.55; }

/* Level and experience, a size down from the rows above: progress is worth
   seeing every turn, but it changes nothing about the next roll. */
.hero-level-row { margin-top: 0.5rem; }
.hero-level-xp { font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--text-mid); white-space: nowrap; }
.xp-bar-outer { height: 3px; background: var(--border-color); margin-top: 0.3rem; border-radius: 2px; }
.xp-bar-inner { height: 3px; background: var(--theme-accent); opacity: 0.7; transition: width 0.3s; border-radius: 2px; }

/* Hide scrollbars but keep scrolling */
.turn-log, .right-panel { scrollbar-width: none; }
.turn-log::-webkit-scrollbar, .right-panel::-webkit-scrollbar { display: none; }

/* Desktop: hamburger hidden, sidebar always visible */
.game-topbar-menu { display: none; }
.mobile-panel-close { display: none; }

@media (max-width: 768px) {
  /* Pin game-screen to viewport — prevents keyboard-induced scroll on iOS */
  body:has(.game-screen) > .container { padding: 0; }
  body:has(.game-screen) .site-footer { display: none; }
  .game-screen { position: fixed; inset: 0; height: 100%; }

  /* viewport-fit=cover lets the page run under a phone's notch, rounded
     corners and home bar, and body's top padding does not reach a fixed
     screen. The screen, its floating bar and the bottom of the story each
     step inside them. The Android app pads the cutout itself, so these are
     0 there; they matter for a browser, and an iPhone home-screen install. */
  .game-screen { padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  .game-topbar {
    padding-top: calc(0.5rem + env(safe-area-inset-top));
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right));
  }
  /* Whatever ends the story's column: the input, the ending, the demo wall. */
  #action-area { padding-bottom: env(safe-area-inset-bottom); }

  /* Show hamburger on mobile */
  .game-topbar-menu { display: flex; position: relative; }

  /* Beside the logo, over the story's top fade; taps pass through to the story
     as they do everywhere else on the bar. A backing like the demo's, so it
     reads over prose scrolling under it. */
  .topbar-stats {
    display: flex; align-items: center; gap: 0.75rem;
    margin-left: 0.6rem; margin-right: auto;
    padding: 0.25rem 0.5rem; border-radius: 4px;
    background: color-mix(in srgb, var(--theme-bg) 70%, transparent);
    backdrop-filter: blur(2px);
    font-family: 'Lora', Georgia, serif; line-height: 1; white-space: nowrap;
  }
  .topbar-stats[hidden] { display: none; }
  .topbar-stat { display: flex; flex-direction: column; gap: 3px; }
  .topbar-stat-line { display: flex; align-items: baseline; gap: 0.3rem; }
  .topbar-stat-icon { color: var(--theme-accent); font-size: 0.7rem; }
  .topbar-stat-value { color: var(--text-bright); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
  .topbar-health-bar { display: block; height: 3px; background: var(--line-dim); border-radius: 1px; }
  .topbar-health-fill { display: block; height: 100%; background: var(--theme-accent); border-radius: 1px; }
  .topbar-momentum-track { display: flex; gap: 2px; width: 1.6rem; }
  .topbar-momentum-track .momentum-pip { flex: 1; height: 3px; opacity: 0.25; }
  .topbar-momentum-track .momentum-pip.active { opacity: 1; }
  /* A stat point waits on the hero card. Anchored to the three lines rather
     than the button's box, so a bigger touch target does not move it. */
  .game-topbar:has(.topbar-stats.has-points) .game-topbar-menu::after {
    content: ""; position: absolute; top: calc(50% - 10px); right: calc(50% - 15px);
    width: 8px; height: 8px; border-radius: 50%; pointer-events: none;
    background: var(--theme-accent); box-shadow: 0 0 0 2px var(--theme-bg);
  }

  /* Right panel hidden, becomes a full-screen overlay when toggled */
  .right-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--theme-bg);
    flex-direction: column;
    gap: 0.75rem;
    padding: calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right))
             calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
    overflow-y: auto;
  }
  .right-panel.mobile-open { display: flex; }
  /* The fade at the panel's foot is sticky at bottom: 0, which a scroll
     container measures inside its padding: on the overlay it stopped 1rem
     (plus the home bar) above the screen's edge, and the words under it
     showed through unfaded. It reaches the edge instead. */
  .right-panel::after { bottom: calc(-1rem - env(safe-area-inset-bottom)); }

  /* Close bar at top of overlay */
  .mobile-panel-close {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.25rem;
    flex-shrink: 0;
  }
  .mobile-panel-close-label {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    text-transform: uppercase;
  }
  .mobile-panel-close-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
  }
}