/* Arena Journey dashboard shell: header band (identity, stat columns, placement bar), tab bar. Tab bodies live in
   tabs/*.css. Each tab has its own backdrop art (dashboard.js), cross-faded by setBackdrop. */

.db {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 var(--j-gutter) 48px;
}

/* ---------- Header band ---------- */
/* A champion banner: a window of splash art behind the name, cut off on a hard diagonal with a gold slash (the Hall
   of Fame cut), then the gunmetal plate. The six season numbers stand embossed on one raised machined bar split by
   slanted grooves; the placements are six octagon medals in their finish metals. */

.db-band {
  --art-w: 480px;
  --slant: 56px;
  position: relative;
  isolation: isolate;
  display: grid;
  /* The medals' column never goes below the six medals, so when the row is short of room the side column (act
     selector, update time, profile button) wraps onto more lines instead of sliding under the medals. */
  grid-template-columns: calc(var(--art-w) - var(--slant) - 20px) minmax(max-content, 1fr) auto;
  grid-template-areas:
    "id stats stats"
    "id dist side";
  align-items: center;
  gap: 14px 26px;
  margin-top: 14px;
  padding: 18px 24px 18px 26px;
  overflow: hidden;
  background: var(--j-panel-feature);
  box-shadow: var(--j-panel-shadow), inset 0 0 0 1px rgba(var(--j-gold-rgb), 0.2);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

/* The art window and its shade (dark under the name, opening to the art at the cut). */
.db-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: var(--art-w);
  background:
    linear-gradient(90deg, rgba(var(--j-ink-rgb), 0.94) 0%, rgba(var(--j-ink-rgb), 0.78) 38%, rgba(var(--j-ink-rgb), 0.2) 78%, rgba(var(--j-ink-rgb), 0.35) 100%),
    linear-gradient(0deg, rgba(var(--j-ink-rgb), 0.6), rgba(var(--j-ink-rgb), 0) 55%),
    var(--band-art, none) 62% 22% / cover no-repeat,
    var(--j-coal-900);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  animation: j-fade 0.9s var(--j-ease) both;
}

/* The gold slash along the cut: a lit stroke with a soft glow. */
.db-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: calc(var(--art-w) + 4px);
  background: linear-gradient(180deg, var(--j-gold-100), var(--j-gold-300) 45%, var(--j-gold-600));
  clip-path: polygon(calc(100% - 4px) 0, 100% 0, calc(100% - var(--slant)) 100%, calc(100% - var(--slant) - 4px) 100%);
  filter: drop-shadow(0 0 6px rgba(var(--j-gold-rgb), 0.6));
}

.db-id {
  grid-area: id;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  animation: j-appear var(--j-dur-appear) var(--j-ease) backwards;
}

/* Octagon portrait in a gold rim, standing out of the art. */
.db-id__avatar {
  --oct: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  position: relative;
  width: 70px;
  height: 70px;
  flex: none;
  filter: drop-shadow(0 6px 10px rgba(var(--j-shadow-rgb), 0.9)) drop-shadow(0 0 12px rgba(var(--j-gold-rgb), 0.3));
}

.db-id__avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--oct);
  background: linear-gradient(160deg, var(--j-gold-100), var(--j-gold-300) 30%, var(--j-gold-600) 58%, var(--j-gold-200) 82%, var(--j-gold-500));
}

.db-id__avatar img {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  clip-path: var(--oct);
  object-fit: cover;
  animation: j-fade 0.6s var(--j-ease) both;
}

.db-id__avatar .j-level {
  bottom: -8px;
}

.db-id__rank {
  color: var(--j-gold-200);
}

.db-id__text {
  min-width: 0;
}

.db-id__text .j-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--j-gold-200);
  text-shadow: 0 1px 2px rgba(var(--j-shadow-rgb), 0.9);
}

.db-id__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  margin: 0;
  font-family: var(--j-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  color: var(--j-gold-25);
  text-shadow: 0 2px 4px rgba(var(--j-shadow-rgb), 0.9), 0 0 24px rgba(var(--j-gold-rgb), 0.2);
  white-space: nowrap;
}

.db-id__name small {
  font-size: 20px;
  font-weight: 400;
  color: #c4c7cc;
}

.db-id__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 9px;
  margin: 5px 0 0;
  font-family: var(--j-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d4d6da;
  text-shadow: 0 1px 2px rgba(var(--j-shadow-rgb), 0.9);
}

.db-summary {
  display: contents;
}

/* The raised bar: a lit top face over a dark skirt, like a long keycap; slanted grooves between the numbers. */
.db-stats.j-stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 4px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.13), rgba(var(--j-plat-rgb), 0.03) 55%, rgba(var(--j-plat-rgb), 0) 100%),
    linear-gradient(180deg, rgba(var(--j-coal-600-rgb), 0.95), rgba(var(--j-coal-800-rgb), 0.98));
  box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.3), inset 0 0 0 1px rgba(var(--j-plat-rgb), 0.07), 0 4px 0 rgba(var(--j-coal-900-rgb), 1), 0 5px 0 rgba(var(--j-gold-rgb), 0.25), 0 10px 18px rgba(var(--j-shadow-rgb), 0.7);
  animation: j-appear var(--j-dur-appear) var(--j-ease) 0.1s backwards;
}

.db-stats > .j-stat {
  position: relative;
  min-width: 0;
  padding: 10px 16px 9px 22px;
  border: 0;
}

/* A slanted groove: a dark cut with a lit edge beside it. */
.db-stats > .j-stat + .j-stat::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  background: linear-gradient(90deg, rgba(var(--j-shadow-rgb), 0.85) 50%, rgba(var(--j-plat-rgb), 0.16) 50%);
  transform: skewX(-18deg);
}

.db-stats .j-stat__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--j-gold-25);
  text-shadow: 0 -1px 0 rgba(var(--j-shadow-rgb), 0.6), 0 1px 0 rgba(var(--j-plat-rgb), 0.12), 0 2px 6px rgba(var(--j-shadow-rgb), 0.8);
}

.db-stats .j-stat--gold .j-stat__value,
.db-stats .j-stat--prism .j-stat__value {
  color: var(--j-gold-150);
  text-shadow: 0 -1px 0 rgba(var(--j-shadow-rgb), 0.6), 0 2px 6px rgba(var(--j-shadow-rgb), 0.8), 0 0 16px rgba(var(--j-gold-rgb), 0.35);
}

.db-stats .j-stat__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #c4c7cc;
}

/* Placement medals: an octagon rim of the place's metal round a dark face holding the count; the place under it. */
.db-dist {
  grid-area: dist;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
}

.db-medal {
  --oct: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  --rim: var(--j-edge-5);
  --ink: var(--j-p5-hi);
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  animation: j-pop 0.5s var(--j-ease) backwards;
  animation-delay: var(--d);
  transition: transform var(--j-dur-fast) var(--j-ease-out);
}

.db-medal--1 { --rim: var(--j-edge-1); --ink: var(--j-p1); }
.db-medal--2 { --rim: var(--j-edge-2); --ink: var(--j-p2-light); }
.db-medal--3 { --rim: var(--j-edge-2); --ink: var(--j-p3); }
.db-medal--4 { --rim: var(--j-edge-4); --ink: var(--j-p4-light); }

.db-medal__face {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  clip-path: var(--oct);
  background: var(--rim);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(var(--j-shadow-rgb), 0.9);
}

.db-medal__face::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px;
  clip-path: var(--oct);
  background:
    radial-gradient(90% 70% at 35% 20%, rgba(var(--j-plat-rgb), 0.16), rgba(var(--j-plat-rgb), 0) 70%),
    linear-gradient(180deg, var(--j-coal-700), var(--j-coal-950));
}

.db-medal__face { isolation: isolate; }

.db-medal--1 .db-medal__face {
  filter: drop-shadow(0 0 8px rgba(var(--j-p1-rgb), 0.55));
}

.db-medal .j-ord {
  font-size: 12px;
}

.db-medal.is-empty {
  opacity: 0.4;
}

.db-medal:hover {
  transform: translateY(-3px);
}

.db-side {
  grid-area: side;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 16px;
  animation: j-appear var(--j-dur-appear) var(--j-ease) 0.2s backwards;
}

.db-side .j-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #c4c7cc;
}

/* ---------- Tab bar ---------- */
/* A recessed rail of icon tabs that share the width evenly. Every tab is a gunmetal keycap plate (::before) with a lit
   top edge and one cut corner, standing on the rail's gold floor line. Hover lifts the plate and washes it gold from a
   gold top edge (::after); the active tab is the brighter raised plate with the gold top edge at full strength, like a
   game client's selected tab. Each tab's description is its title tooltip. Motion is transform and opacity only. */

.j-tabs {
  position: relative;
  display: flex;
  gap: 3px;
  overflow-x: auto;
  margin: 14px 0 12px;
  padding: 4px 0 0;
  background:
    linear-gradient(rgba(var(--j-gold-rgb), 0.32), rgba(var(--j-gold-rgb), 0.32)) 0 100% / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(var(--j-shadow-rgb), 0.15), rgba(var(--j-shadow-rgb), 0.45));
}

.j-tab {
  --cut: 10px;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: 1 0 auto;
  padding: 12px 16px 12px;
  cursor: pointer;
  transition: transform var(--j-dur-fast) var(--j-ease-out);
}

.j-tab::before,
.j-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  pointer-events: none;
}

.j-tab::before {
  background:
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.08), rgba(var(--j-plat-rgb), 0.015) 65%, rgba(var(--j-plat-rgb), 0)),
    linear-gradient(180deg, rgba(var(--j-coal-800-rgb), 0.92), rgba(var(--j-coal-900-rgb), 0.92));
  box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.2), inset 1px 0 0 rgba(var(--j-plat-rgb), 0.07), inset -1px 0 0 rgba(var(--j-plat-rgb), 0.07);
}

.j-tab::after {
  background:
    linear-gradient(var(--j-gold-300), var(--j-gold-300)) 0 0 / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(var(--j-gold-rgb), 0.16), rgba(var(--j-gold-rgb), 0.03) 70%, rgba(var(--j-gold-rgb), 0.07));
  opacity: 0;
  transition: opacity var(--j-dur-fast) var(--j-ease-std);
}

.j-tab:hover {
  transform: translateY(-3px);
}

.j-tab:hover::after {
  opacity: 0.7;
}

.j-tab:active {
  transform: translateY(-1px);
}

.j-tab:focus-visible {
  outline-offset: -3px;
  box-shadow: none;
}

.j-tab__icon {
  width: 18px;
  height: 18px;
  color: var(--j-gold-500);
  transition: color var(--j-dur-fast) var(--j-ease-std);
}

.j-tab__name {
  font-family: var(--j-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--j-gold-100);
  white-space: nowrap;
  transition: color var(--j-dur-fast) var(--j-ease-std);
}

.j-tab:hover .j-tab__name {
  color: var(--j-gold-25);
}

.j-tab:hover .j-tab__icon {
  color: var(--j-gold-200);
}

.j-tab.is-active {
  --cut: 12px;
  transform: none;
}

.j-tab.is-active::before {
  background: linear-gradient(180deg, rgba(var(--j-white-rgb), 0.12), rgba(var(--j-white-rgb), 0.05) 70%, rgba(var(--j-gold-rgb), 0.08)), var(--j-coal-700);
  box-shadow: inset 1px 0 0 rgba(var(--j-white-rgb), 0.1), inset -1px 0 0 rgba(var(--j-white-rgb), 0.1);
}

.j-tab.is-active::after {
  opacity: 1;
}

.j-tab.is-active .j-tab__name {
  color: var(--j-gold-50);
}

.j-tab.is-active .j-tab__icon {
  color: var(--j-gold-300);
}

.db-tab {
  min-height: 60vh;
}

/* Placeholder for tabs another module will fill in. */
.db-forge {
  display: grid;
  place-items: center;
  gap: 14px;
  min-height: 52vh;
  text-align: center;
}

.db-forge .j-gem {
  --size: 96px;
}

.db-forge__title {
  margin: 0;
  font-family: var(--j-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--j-gold-50);
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1500px) {
  .db-band {
    --art-w: 460px;
  }
  .db-stats > .j-stat {
    padding: 9px 10px 8px 16px;
  }
  .db-stats .j-stat__value {
    font-size: 25px;
  }
  .j-tab {
    padding: 12px 10px 11px;
  }
}

@media (max-width: 1100px) {
  .db-band {
    --art-w: 100%;
    --slant: 0px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "id" "stats" "dist" "side";
    gap: 16px;
  }
  /* The art runs across the top of the band behind the name, fading out under the numbers. */
  .db-band::before {
    bottom: auto;
    height: 150px;
    clip-path: none;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
  }
  .db-band::after {
    display: none;
  }
  .db-side {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .db-id__meta {
    flex-wrap: wrap;
    white-space: normal;
  }
  .db-id__name {
    font-size: 21px;
    white-space: normal;
  }
  .db-band {
    padding: 16px 14px;
  }
  .db-stats.j-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .db-stats > .j-stat:nth-child(4)::before {
    display: none;
  }
  .db-stats > .j-stat:nth-child(n + 4) {
    border-top: 1px solid rgba(var(--j-shadow-rgb), 0.6);
    box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.08);
  }
  .db-stats .j-stat__value {
    font-size: 22px;
  }
  .db-dist {
    justify-content: space-between;
    gap: 6px;
  }
  .j-tab {
    column-gap: 7px;
    padding: 10px 12px;
  }
  .j-tab__icon {
    width: 16px;
    height: 16px;
  }
  .j-tab__name {
    font-size: 12.5px;
    letter-spacing: 0.1em;
  }
}

/* Placeholders while the season document loads. */
.db-stats:empty {
  height: 46px;
  background: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.18) 0 1px, transparent 1px) 0 0 / 16.66% 100% repeat-x;
}

.db-dist:empty {
  height: 10px;
  background: rgba(var(--j-white-rgb), 0.05);
}