/* =========================================
   Page A — Player Area (Login/Register ONLY)
   Template: page-player.php
   CSS: assets/css/player-area.css
   ========================================= */

:root{
  --th-gold: #c9a24a;
  --th-gold-strong: rgba(244,207,116,0.45);
  --th-gold-soft: rgba(244,207,116,0.25);
  --th-gold-faint: rgba(244,207,116,0.18);
  --th-ink: #14100b;
  --th-text: #e5d8b0;
}

/* =========================
   Outer “main card” shell
   (this was coming from player.css)
   ========================= */

/* Body class is injected by WP when template is used */
.page-template-page-player .thar-player-area {
  max-width: 1100px;
  margin: 60px auto 80px;
  padding: 0 20px;
}

/* The main shell is your template <main class="thar-player-area"> */
.page-template-page-player main.thar-player-area {
  position: relative;
  background: var(--th-ink);
  border-radius: 16px;
  padding: 28px 30px 34px;
  border: 1px solid rgba(244,207,116,0.45);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.85),
    0 20px 38px rgba(0,0,0,0.65);
}

/* Inner dashed border */
.page-template-page-player main.thar-player-area::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  border: 1px dashed var(--th-gold-soft);
  pointer-events: none;
}

/* Keep content above pseudo border */
.page-template-page-player main.thar-player-area > * {
  position: relative;
  z-index: 1;
}

/* =========================
   Template heading area
   ========================= */

.page-template-page-player .thar-player-area__title {
  font-family: "Cinzel Decorative", serif;
  color: var(--th-gold);
  letter-spacing: 1px;
}

.page-template-page-player .thar-player-area__subtitle {
  color: var(--th-text);
  opacity: 0.9;
}

/* =========================
   Shortcode output styling
   The shortcode renders a nested .thar-player-area div,
   so target it safely inside the template panel.
   ========================= */

.page-template-page-player .thar-player-area__panel .thar-player-area {
  position: relative;
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 18px;
  border: 1px solid rgba(244,207,116,0.45);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    0 10px 22px rgba(0,0,0,0.45);
}

/* Dashed border inside the shortcode container */
.page-template-page-player .thar-player-area__panel .thar-player-area::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 10px;
  border: 1px dashed rgba(244,207,116,0.14);
  pointer-events: none;
  opacity: 0.9;
}

.page-template-page-player .thar-player-area__panel .thar-player-area > * {
  position: relative;
  z-index: 1;
}

/* Status row */
.page-template-page-player .thar-status {
  color: var(--th-text);
  opacity: 0.95;
  margin-bottom: 14px;
}

/* =========================
   Grid + inner cards
   ========================= */

.page-template-page-player .thar-grid {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.page-template-page-player .thar-card {
  position: relative;
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 9px;
  border: 1px solid var(--th-gold-faint);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    0 10px 22px rgba(0,0,0,0.45);
}

.page-template-page-player .thar-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 10px;
  border: 1px dashed rgba(244,207,116,0.14);
  pointer-events: none;
  opacity: 0.9;
}

.page-template-page-player .thar-card > * {
  position: relative;
  z-index: 1;
}

.page-template-page-player .thar-card h3 {
  font-family: "Cinzel Decorative", serif;
  color: var(--th-gold);
  letter-spacing: 1px;
  margin: 0 0 12px 0;
}

/* =========================
   Forms
   ========================= */

.page-template-page-player .thar-form label {
  display: block;
  margin: 12px 0;
  color: var(--th-text);
}

.page-template-page-player .thar-form input {
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid rgba(244,207,116,0.22);
  background: rgba(0,0,0,0.22);
  color: var(--th-text);
  outline: none;
}

.page-template-page-player .thar-form input::placeholder {
  color: rgba(231, 214, 170, 0.55);
}

.page-template-page-player .thar-form input:focus {
  border-color: rgba(244,207,116,0.45);
  box-shadow: 0 0 0 3px rgba(244,207,116,0.12);
}

/* Buttons */
.page-template-page-player .thar-form button,
.page-template-page-player .thar-btn,
.page-template-page-player .thar-logout {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(244,207,116,0.65);
  background: rgba(0,0,0,0.10);
  color: var(--th-gold);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}

.page-template-page-player .thar-form button:hover,
.page-template-page-player .thar-btn:hover,
.page-template-page-player .thar-logout:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  background: rgba(244,207,116,0.08);
}

/* Messages */
.page-template-page-player .thar-msg { margin-top: 10px; font-size: 0.95em; }
.page-template-page-player .thar-msg.ok { color: #9be59b; }
.page-template-page-player .thar-msg.bad { color: #ff9a9a; }

/* Responsive */
@media (max-width: 900px) {
  .page-template-page-player .thar-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Tighten vertical spacing (Page A polish)
   ========================================= */

/* Reduce space under title */
.page-template-page-player .thar-player-area__title {
  margin-bottom: 0.2rem; /* was visually ~1rem+ */
}

/* Reduce subtitle spacing */
.page-template-page-player .thar-player-area__subtitle {
  margin-bottom: 0.4rem;
}

/* Pull the panel closer to the header */
.page-template-page-player .thar-player-area__panel {
  margin-top: 0.35rem; /* default felt like ~2rem */
}

/* Reduce space above status line */
.page-template-page-player .thar-status {
  margin-bottom: 5px;
}

/* Reduce grid separation slightly */
.page-template-page-player .thar-grid {
  margin-top: 8px;
  gap: 7px; /* was 16px */
}

/* =========================================
   HARD TIGHTEN: Hero -> Panel spacing
   (targets the template wrappers directly)
   ========================================= */

.page-template-page-player main.thar-player-area {
  /* reduces top/bottom air inside the big card */
  padding-top: 18px !important;   /* was ~28px */
  padding-bottom: 22px !important;
}

/* Hero section (title/subtitle block) */
.page-template-page-player .thar-player-area__hero {
  padding-bottom: 6px !important; /* pull panel up */
  margin-bottom: 0 !important;
}

/* Kill default heading/paragraph margins inside the hero */
.page-template-page-player .thar-player-area__hero h1,
.page-template-page-player .thar-player-area__hero p {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* Panel section wrapper (the section that contains the shortcode) */
.page-template-page-player .thar-player-area__panel {
  padding-top: 0 !important;
  margin-top: 8px !important; /* reduce gap under subtitle */
}

/* If your theme adds margins to .thar-container, neutralize here */
.page-template-page-player .thar-player-area__panel .thar-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}