/* Pawball 5.0 - layout (light park theme) */

#app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* tracks the real visible viewport - keyboard/browser chrome can never resize the shell unpredictably */
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: url("../images/wallpaper.png") center center / cover no-repeat;
}

/* the park wallpaper stays bright and visible - only the faintest
   warm haze at the very edges, never a dark overlay */
#app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 253, 245, .12) 0%, rgba(255, 253, 245, 0) 14%);
}

/* stacks hud/main/strip/nav above the haze; the modal overlay and the toast
   wrap are excluded - both must stay OUT of the flex flow. (This rule's
   #id specificity was overriding .toast-wrap's position:absolute, putting
   toasts into the column flow: every toast compressed .main and lifted the
   contacts rail and bottom nav ~70px until it auto-removed.) */
#app > *:not(.overlay):not(.toast-wrap):not(#day-dim):not(#day-banner) { position: relative; }

/* ---------- top bar (single desktop nav) ---------- */
.hud {
  flex: 0 0 auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
  padding: clamp(7px, 0.7vh, 11px) clamp(14px, 1.4vw, 26px);
  background: rgba(253, 248, 235, .84);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 2px 12px rgba(40, 60, 35, .14);
  z-index: 30;
}

/* the crest and wordmark are the home button - the club identity IS the way
   back to the dashboard, so no nav link is needed for it */
.hud-identity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 5px 12px 5px 6px;
  border-radius: var(--r-card);
  border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease, transform .09s ease;
}
.hud-identity:hover { background: rgba(58, 84, 54, .08); border-color: var(--line-soft); }
.hud-identity:active { transform: scale(.97); }
.hud-identity img { width: clamp(30px, 2.4vw, 38px); height: auto; }
.hud-club-name {
  position: relative;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(15px, 1.2vw, 20px);
  letter-spacing: .06em;
  color: var(--green-deep);
}
/* a gold rule draws itself under the wordmark on hover - the same underline
   language the old active tab used, now attached to the identity */
.hud-club-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.hud-identity:hover .hud-club-name::after { transform: scaleX(1); }

/* ---------- shared unread badge ----------
   One visual treatment (colour, type, border, sizing) used everywhere an
   unread count appears; only position changes per host via a modifier. */
.unread-badge {
  position: absolute;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border: 1.5px solid var(--cream);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.unread-badge.on-icon { top: -6px; right: -6px; }

.hud-continue {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.btn-continue {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 9px 22px;
  background: linear-gradient(180deg, var(--green-mid), var(--green-deep));
  color: #FBF7EA;
  border-radius: var(--r-card);
  font-weight: 800;
  letter-spacing: .05em;
  box-shadow: var(--shadow-card);
  transition: transform .08s ease, filter .12s ease, box-shadow .15s ease;
}
.btn-continue:hover { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(40, 60, 35, .26); }
.btn-continue:active { transform: scale(.94); }
/* match day: a static gold presence plus one shimmer sweep on entering the
   state - never a loop */
.btn-continue { position: relative; overflow: hidden; }
.btn-continue.matchday {
  background: linear-gradient(180deg, #C9A03C, #A87F1E);
  box-shadow: 0 0 0 2px var(--gold-bright), 0 0 20px rgba(217, 169, 60, .65), 0 3px 14px rgba(150, 110, 30, .45);
}
.btn-continue.matchday::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 244, 205, .75) 50%, transparent 75%);
  transform: translateX(-120%);
  animation: pbContinueSweep 1.2s ease-out .35s 1 forwards;
}
@keyframes pbContinueSweep { to { transform: translateX(120%); } }

/* ---------- main grid ---------- */
.main {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden; /* dashboard height is fixed - only inner panels scroll */
  display: grid;
  grid-template-columns: minmax(270px, 20%) minmax(0, 1fr) minmax(300px, 22%);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(8px, 0.9vw, 14px);
  padding: clamp(8px, 1vh, 14px) clamp(10px, 1.1vw, 20px);
}

.col {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 12px);
  overflow-y: auto;
}
.col-left, .col-right { gap: 8px; }
/* the left column's content is fixed and finite: no scroll, and therefore no
   scrollbar stealing width from the cards and breaking their right edges */
.col-left {
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
}
.messenger { grid-column: 2; grid-row: 1; }
.col-right {
  grid-column: 3;
  grid-row: 1 / 3;
  overflow-y: hidden;
}
.col-right .match-panel { flex: 0 0 auto; }
.col-right .tactics-panel { flex: 1 1 auto; min-height: 0; }

/* ---------- character strip ---------- */
.strip {
  --strip-edge-space: clamp(6px, .6vw, 10px);
  grid-column: 1 / 3;
  grid-row: 2;
  min-width: 0;
  overflow: visible;
  contain: layout; /* nothing inside the rail can push the shell around */
  padding: 0;
  /* cards float directly on the wallpaper - the old tinted band added only a
     smudge behind already-opaque cards */
  background: transparent;
}
.strip-row {
  display: flex;
  gap: clamp(5px, 0.4vw, 8px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px var(--strip-edge-space) 8px;
  scroll-padding-inline: var(--strip-edge-space);
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
}
.strip-row.is-contained { justify-content: space-between; }

/* narrow desktop / laptop tuning (desktop-only game) */
@media (max-width: 1440px) {
  .main { grid-template-columns: minmax(260px, 20%) minmax(0, 1fr) minmax(290px, 22%); }
}