/* styles.css — resilient UI for Login, Browser, Lobby, and Game */

:root{
  --bg:#0f1117;
  --card:#1f2430;
  --muted:#a7b0be;
  --text:#eaeef3;
  --accent:#2d7cff;
  --accent-weak:#2d7cff22;
  --ok:#00d084;
  --danger:#ff7676;
  --border:#273044;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.hidden{ display:none !important; }

/* Cards & layout primitives */
.card{
  background:var(--card);
  color:var(--text);
  padding:16px;
  border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,0.22);
}
.wide{ max-width:1040px; margin:18px auto; }

.topbar{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.topbar .spacer{ flex:1; }

.panel{ margin-top:16px; }

.inline{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

/* Controls */
input, textarea, select, button{
  background:#121826; color:var(--text);
  border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; outline:none; font-size:14px;
}
textarea{ min-height:80px; resize:vertical; }
input:focus, textarea:focus, select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-weak);
}
button{
  background:var(--accent);
  border:1px solid transparent;
  cursor:pointer;
}
button:disabled{ opacity:0.6; cursor:not-allowed; }
button.ghost{
  background:#121826; border:1px solid var(--border);
}

/* Lists */
.list{ list-style:none; padding:0; margin:0; }
.list > li{ margin-bottom:8px; }
li.game-item{
  padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;
}
li.game-item:hover{ border-color:var(--accent); }

/* Map */
.map-container{
  position:relative;
  width:100%; max-width:720px;
  border-radius:10px; overflow:hidden;
  background:#0b0f18; border:1px solid var(--border);
}
#map-img{ width:100%; height:auto; display:block; }
#map-overlay{ position:absolute; left:0; top:0; }
#actor-marker{
  position:absolute;
  width:12px; height:12px;
  background:var(--ok);         /* green dot */
  border-radius:50%;
  box-shadow:0 0 0 2px var(--bg) inset;
  transform:translate(-50%, -50%); /* center on tile pixel */
  pointer-events:none;
  display:none;                  /* toggled by JS */
}

/* Story */
.story{
  max-height:260px;              /* responsive rules may increase this later */
  overflow:auto;
  background:#141822; padding:10px;
  border-radius:8px; border:1px solid var(--border);
}
.story-entry{ margin-bottom:10px; }
.dice-log{ color:#88c0d0; font-size:0.9em; white-space:pre-wrap; margin-left:6px; }

/* Inline badges */
.badge{
  background:#283046; color:var(--muted);
  padding:6px 10px; border-radius:999px; font-size:12px;
}
.hint{ color:var(--muted); font-size:12px; }
.muted{ color:var(--muted); }
.error{ color:var(--danger); }
.world-img{ max-width:220px; max-height:140px; border-radius:8px; border:1px solid var(--border); }

/* Danger button (used in Browser list) */
.danger {
  background:#d9534f; color:#fff; border:none;
  padding:6px 10px; border-radius:4px; cursor:pointer;
}
.danger:hover { background:#c9302c; }

/* Story intro (green) */
.story-intro {
  color:#25a05a;        /* green */
  font-weight:600;
  margin:6px 0;
}

/* Turn separator (red) */
.turn-separator {
  color:#c62828;        /* red */
  font-weight:bold;
  text-align:center;
  margin:8px 0;
}

/* Objectives styling */
.goal-icon { margin-right:6px; }
.goal-major { font-weight:600; }
.goal-minor { opacity:0.95; }
.goal-completed { color:#8a8f98; text-decoration:line-through; }
.goal-failed { color:#8a8f98; text-decoration:line-through; }
.goal-paused { color:#c79a3b; }

/* ===== Responsive layout for game view ===== */

/* Container grid */
#game-layout.responsive-grid{
  display:grid;
  grid-template-columns:1fr;     /* mobile: single column */
  gap:12px;                      /* space between cards */
  margin-top:12px;
}

/* Panels in grid (add subtle card-esque treatment) */
#game-layout .panel{
  border:1px solid #2a2f3a;
  border-radius:8px;
  padding:12px;
  background:#11161c;           /* dark card bg (cohesive w/ theme) */
  box-shadow:0 1px 2px rgba(0,0,0,0.25);
}

/* Panel headings */
#game-layout .panel h3{
  margin-top:0;
  margin-bottom:8px;
  border-bottom:1px solid #212733;
  padding-bottom:6px;
}

/* Story area breathing room + scroll */
#story-panel{ /* full width on mobile by default */ }
#story-log{
  max-height:38vh;
  overflow:auto;
  padding-right:6px;             /* avoid text touching right edge when scrollbar shows */
}

/* ≥ 768px: two columns; story spans both */
@media (min-width:768px){
  #game-layout.responsive-grid{
    grid-template-columns:repeat(2, minmax(280px, 1fr));
    gap:14px;
  }
  #story-panel{ grid-column:1 / -1; }
  #story-log{ max-height:42vh; }
}

/* ≥ 1200px: three columns; story spans all below */
@media (min-width:1200px){
  #game-layout.responsive-grid{
    grid-template-columns:repeat(3, minmax(280px, 1fr));
    gap:16px;
  }
  #character-summary { grid-column:1 / 2; }
  #objectives-panel  { grid-column:2 / 3; }
  #inventory-panel   { grid-column:3 / 4; }
  #story-panel       { grid-column:1 / -1; }
  #story-log{ max-height:48vh; }
}

/* Subtle separators for lists */
#objectives-list.list > li{
  padding:6px 4px;
  border-bottom:1px dashed #263142;
}
#objectives-list.list > li:last-child{ border-bottom:none; }

#inventory-list.list > li{
  padding:6px 4px;
  border-bottom:1px dashed #263142;
}
#inventory-list.list > li:last-child{ border-bottom:none; }