/* Tideholm — stage layout: the two side rails and the grid that frames them.
   Loaded by index.html (the default layout) and by the leftover stage.html.
   classic.html omits it, which is exactly what makes it the classic layout. */

.stage-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 220px;
  gap: 16px;
  max-width: 1280px;
  margin: 12px auto;
  padding: 0 14px;
  align-items: start;
}

/* The center column owns its width; undo the narrow centered sheet. */
.stage-grid main { padding: 0; }
.stage-grid main section { max-width: none; margin: 0; }

/* ---------------- carved-wood rails ---------------- */

.stage-rail { position: sticky; top: 10px; }

.stage-panel {
  background: linear-gradient(180deg, #33220f, #221507 70%, #190f05);
  border: 2px solid #0b0602;
  outline: 1px solid #6b4e2a;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(214, 171, 94, .22);
  padding: 10px;
  color: #e8d9b0;
  margin-bottom: 14px;
}
.stage-panel h3 {
  text-align: center;
  font-size: 13px;
  letter-spacing: 1.1px;
  font-weight: normal;
  color: #e8c886;
  padding: 3px 0 7px;
  margin: -2px -2px 8px;
  border-bottom: 1px solid rgba(201, 162, 75, .35);
  text-shadow: 0 1px 2px #000;
}

.stage-hero { display: flex; gap: 10px; align-items: center; padding: 2px 2px 8px; }
.stage-face {
  width: 50px; height: 50px; flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8fa3b5, #45596b 60%, #22303d);
  border: 2px solid #c9a24b;
  box-shadow: inset 0 -8px 12px rgba(0, 0, 0, .5), 0 3px 8px rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center;
  font-size: 25px;
}
.stage-who b { display: block; color: #e8c886; font-size: 14px; }
.stage-who span { font-size: 11px; color: #a68d5c; }

.stage-stat {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #1c1207, #140c04);
  border: 1px solid #000;
  outline: 1px solid rgba(107, 78, 42, .6);
  border-radius: 6px;
  padding: 5px 9px;
  margin: 6px 0;
  font-size: 13px;
  color: #ead9ae;
  text-shadow: 0 1px 1px #000;
}

.stage-kv { font-size: 12.5px; line-height: 1.8; color: #e2d2a6; }
.stage-kv b { color: #e8c886; font-weight: normal; }

#stage-map {
  display: block;
  width: 100%;
  border-radius: 6px;
  border: 2px solid #0b0602;
  outline: 1px solid #6b4e2a;
  cursor: pointer;
}

.stage-banner {
  width: 60px; height: 110px; margin: 2px auto 0;
  background: linear-gradient(180deg, #2c4f8a, #16294d 80%);
  border: 2px solid #c9a24b; border-top-width: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  display: flex; align-items: flex-start; justify-content: center;
  font-size: 24px; padding-top: 14px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .5);
}

/* Below tablet width the rails bow out; the game is the priority. */
@media (max-width: 1020px) {
  .stage-grid { display: block; }
  .stage-rail { display: none; }
}