/* Profile levels / XP — EXPERIMENTAL feature styling.
 *
 * Three things live here:
 *   1. .l1-landing      — the bare, navbar-less level-1 new-player landing.
 *   2. .ob-level-bar    — the level bar that replaces the navbar during the
 *                         onboarding lesson and fills one notch per step.
 *   3. .cwl-levelup-*   — the level-up toast shown when the lesson completes.
 *
 * Nothing here renders unless props.experimentalLevels is true (the elements
 * themselves aren't emitted server-side otherwise), so production is unaffected.
 */

/* ── 1. Level-1 bare landing ──────────────────────────────────────────────── */
.l1-landing {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(40, 28, 12, 0.0) 40%, rgba(0, 0, 0, 0.45) 100%);
}

.l1-landing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  max-width: 560px;
  animation: l1FadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes l1FadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.l1-logo {
  margin: 0;
}

.l1-logo-img {
  width: min(420px, 80vw);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}

.l1-tagline {
  margin: 0;
  color: #e9dcc2;
  font-size: clamp(15px, 2.6vw, 19px);
  line-height: 1.4;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.l1-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 16px 46px;
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #2a1a06;
  background: linear-gradient(180deg, #ffd970 0%, #f0a832 60%, #d98a1e 100%);
  border: 2px solid #8a5512;
  border-radius: 14px;
  cursor: pointer;
  box-shadow:
    0 6px 0 #8a5512,
    0 10px 22px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  animation: l1PlayPulse 2.4s ease-in-out infinite;
}

.l1-play-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.l1-play-btn:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #8a5512,
    0 4px 10px rgba(0, 0, 0, 0.45);
}

.l1-play-btn .fa-play {
  font-size: 0.85em;
}

@keyframes l1PlayPulse {
  0%,
  100% {
    box-shadow:
      0 6px 0 #8a5512,
      0 10px 22px rgba(0, 0, 0, 0.45),
      0 0 0 0 rgba(255, 210, 90, 0.5);
  }
  50% {
    box-shadow:
      0 6px 0 #8a5512,
      0 10px 22px rgba(0, 0, 0, 0.45),
      0 0 0 14px rgba(255, 210, 90, 0);
  }
}

/* ── 2. Onboarding level bar (replaces the navbar) ────────────────────────── */
/* Reuses the navbar's chrome: themed background, blend mode, drop shadow, and
 * the iron side brackets (.navbar-bracket, styled in style.css). The level
 * badge + progress sit inside .ob-level-inner where the nav buttons would be.
 * Sticky (not fixed) so it occupies the navbar's slot in the flow. */
.ob-level-bar {
  display: none;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1200;
  overflow: visible; /* let the iron brackets extend past the edges */
  background: var(--navbar-bg);
  background-blend-mode: var(--navbar-blend-mode);
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.6);
  font-family: "Cinzel", serif;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Subtle top highlight line, matching .navbar::before. */
.ob-level-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  pointer-events: none;
  z-index: 1;
}

/* Inner flex row (mirrors .navbar-inner): badge + action buttons + progress.
 * Kept deliberately short (tight vertical margin/padding) so the bar is a few
 * px shorter than the navbar — gameplay screens (e.g. campaign) have a tight
 * vertical budget, and this gives the board + hand room to fit without
 * scrollbars. */
.ob-level-inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 6px;
  padding: 0 18px;
  border-radius: 6px;
}

/* The level bar replaces the navbar — collapse the navbar (and its reserved
 * sticky space) whenever the bar is acting as the nav, so they never stack.
 * Only ever set for experimental players (the bar/attrs don't exist otherwise). */
body[data-level-bar-on="true"] .navbar,
body[data-level-nav="true"] .navbar {
  display: none !important;
}

/* Shown either while the onboarding lesson wants the bar (set by main.js once
 * the first card has been played) OR persistently as the level-2+ navigation
 * (data-level-nav set server-side in layout.jsx). */
body[data-level-bar-on="true"] .ob-level-bar,
body[data-level-nav="true"] .ob-level-bar {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Left / right nav groups — mirror the navbar's left/right layout (Home on the
 * left, Cards/Achievements/Profile + coins on the right). The progress track
 * sits in the middle (flex:1). */
.ob-level-left,
.ob-level-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Per-level reveal of the nav buttons. data-level is bumped live by main.js on
 * level-up, so the buttons appear without a page reload.
 *  - L2 buttons (Home, Campaign) hidden at level 1.
 *  - L3 buttons (Cards, Achievements, Profile) hidden until level 3. */
.ob-level-bar[data-level="1"] .ob-level-btn-l2,
.ob-level-bar[data-level="1"] .ob-level-btn-l3,
.ob-level-bar[data-level="2"] .ob-level-btn-l3,
.ob-level-bar[data-level="1"] .ob-level-btn-l4,
.ob-level-bar[data-level="2"] .ob-level-btn-l4,
.ob-level-bar[data-level="3"] .ob-level-btn-l4 {
  display: none;
}

/* Coin counter (right side) — hidden until the player earns their first coin
 * (toggled by cwlSetCoins, which also keeps the value in sync). */
.ob-level-coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 800;
  color: #ffe9a8;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #5e3c12;
  cursor: pointer;
}

.ob-level-coins i {
  color: #f0c040;
}

.ob-level-coins.ob-hidden {
  display: none;
}

/* Compact percentage label — hidden on desktop (the bar shows instead),
 * revealed on tight/portrait screens in place of the progress track. */
.ob-level-pct {
  display: none;
  flex: 0 0 auto;
  min-width: 40px;
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffe9a8;
}

/* Experimental level-bar screens have a tighter vertical budget. On tall
 * desktops the castle image-container is 360px (mobile.css), which pushes the
 * hand's card-help text below the fold — shrink the castle so the whole board
 * (incl. the help text) fits without scrolling. Scoped to the level-bar body
 * flags so normal play is untouched. */
@media (min-width: 1280px) and (min-height: 821px) {
  body[data-level-nav="true"] .image-container,
  body[data-level-bar-on="true"] .image-container,
  body[data-level-nav="true"] .texture-container,
  body[data-level-bar-on="true"] .texture-container {
    height: 260px;
  }
}

/* Landscape mobile (short height): mirror the navbar's negative-top so the bar
 * scrolls mostly off and frees vertical room for the board + hand. */
@media (orientation: landscape) and (max-height: 500px) {
  .ob-level-bar {
    top: -38px;
  }
  .ob-level-inner {
    margin: 1px 6px;
  }
  .ob-level-badge {
    width: 36px;
    height: 36px;
  }
}

/* Tight / mobile-portrait: drop the bar for a snug "NN%" and shrink controls. */
@media (max-width: 600px) {
  .ob-level-track {
    display: none;
  }
  .ob-level-pct {
    display: block;
  }
  .ob-level-inner {
    gap: 8px;
    padding: 4px 10px;
  }
  .ob-level-left,
  .ob-level-right {
    gap: 5px;
  }
  .ob-level-btn {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
  .ob-level-badge {
    width: 38px;
    height: 38px;
  }
  .ob-level-coins {
    padding: 3px 7px;
    font-size: 0.85rem;
  }
}

.ob-level-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #ffd970;
  font-size: 17px;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #5e3c12;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.ob-level-btn:hover {
  background: rgba(240, 168, 50, 0.25);
  color: #fff;
  transform: translateY(-1px);
}

.ob-level-btn:active {
  transform: translateY(1px);
}

.ob-level-badge {
  flex: 0 0 auto;
  cursor: pointer;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe79a, #f0a832 70%, #c9821c);
  border: 2px solid #8a5512;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ob-level-badge-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Cartoony, outlined glyphs (thick contrasting stroke under the fill). */
.ob-level-word {
  /* Fat, chunky sans for legibility at small size (Cinzel was too thin). */
  font-family: "Arial Black", "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: 23px; /* viewBox units */
  letter-spacing: 0.5px;
  /* Solid dark fill on the gold badge — no outline, for readability. */
  fill: #3a2306;
}

.ob-level-num {
  font-family: "Cinzel", "Trebuchet MS", sans-serif;
  font-weight: 900;
  font-size: 50px; /* viewBox units */
  fill: #3a2306;
  paint-order: stroke;
  stroke: #fff3cf;
  stroke-width: 6px;
  stroke-linejoin: round;
}

.ob-level-badge.level-bump {
  animation: levelBadgePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes levelBadgePop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.45) rotate(-8deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

.ob-level-track {
  flex: 1 1 auto;
  position: relative;
  height: 16px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #5e3c12;
  overflow: hidden;
}

.ob-level-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 9px;
  background: linear-gradient(90deg, #f0a832, #ffd970);
  box-shadow: 0 0 10px rgba(255, 210, 90, 0.6);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.ob-level-fill.fill-flash {
  animation: fillFlash 0.5s ease;
}

@keyframes fillFlash {
  50% {
    filter: brightness(1.5);
  }
}

/* ── 2b. Restricted home menu (level-2 gradual reveal) ────────────────────── */
/* Only the "Get Started" quick-start section (Quick Game / Academy / Campaign)
 * is shown; the rest of the menu unlocks at higher levels. */
body[data-level-nav="true"] .menu-section:not(.get-started-section),
body[data-level-nav="true"] .features,
body[data-level-nav="true"] .chat-mini,
body[data-level-nav="true"] .landing-footer {
  display: none !important;
}

/* Level 3+: surface the unlocked Explore buttons on the home menu. The Explore
   section is otherwise hidden by the rule above — lift the section back, then
   reveal only the buttons unlocked so far (Cards + Achievements at L3, plus
   World Map at L4). World Map/Tournaments/Events/Shop stay hidden until later. */
body[data-level-nav="true"][data-level="3"] .menu-section:has(> .explore-grid),
body[data-level-nav="true"][data-level="4"] .menu-section:has(> .explore-grid) {
  display: flex !important;
}

body[data-level-nav="true"] .explore-grid > a {
  display: none !important;
}

body[data-level-nav="true"][data-level="3"] .explore-grid > a[href="/cards/0"],
body[data-level-nav="true"][data-level="3"] .explore-grid > a[href="/achievements"],
body[data-level-nav="true"][data-level="4"] .explore-grid > a[href="/cards/0"],
body[data-level-nav="true"][data-level="4"] .explore-grid > a[href="/achievements"],
body[data-level-nav="true"][data-level="4"] .explore-grid > a[href="/map"] {
  display: inline-flex !important;
}

/* Level 3+: also surface Chat from the Community section (same lift-and-reveal
   pattern; other community buttons stay hidden until the full menu returns). */
body[data-level-nav="true"][data-level="3"] .menu-section:has(> .community-grid),
body[data-level-nav="true"][data-level="4"] .menu-section:has(> .community-grid) {
  display: flex !important;
}

body[data-level-nav="true"] .community-grid > a {
  display: none !important;
}

body[data-level-nav="true"][data-level="3"] .community-grid > a[href="/chat"],
body[data-level-nav="true"][data-level="4"] .community-grid > a[href="/chat"] {
  display: inline-flex !important;
}

/* Level 3+: bring back the live mini-chat widget on the home menu (hidden by
   the restricted-menu rule above for levels 2). It restores to its flex layout
   (see .chat-mini in chat.css). */
body[data-level-nav="true"][data-level="3"] .chat-mini,
body[data-level-nav="true"][data-level="4"] .chat-mini {
  display: flex !important;
}

/* ── 2c. Level-info modal (click the badge) ───────────────────────────────── */
.level-info-badge-num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 22px;
  color: #3a2306;
  background: radial-gradient(circle at 35% 30%, #ffe79a, #f0a832 70%, #c9821c);
  border: 2px solid #8a5512;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5);
}

.level-info-section {
  margin: 16px 0;
}

.level-info-section h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--papyrus-text, #c8a060);
}

.level-info-req {
  margin: 0;
  line-height: 1.45;
}

.level-info-hints {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.level-info-hints li {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.35;
}

.level-info-hints li i {
  color: #f0c040;
  font-size: 0.85em;
}

.level-info-register-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  box-sizing: border-box;
}

.level-info-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.level-info-progress-track {
  flex: 1 1 auto;
  height: 12px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid #5e3c12;
  overflow: hidden;
}

.level-info-progress-fill {
  height: 100%;
  border-radius: 7px;
  background: linear-gradient(90deg, #f0a832, #ffd970);
  transition: width 0.5s ease;
}

.level-info-progress-label {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.9rem;
}

.level-info-unlocks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.level-info-unlocks li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(200, 150, 12, 0.1);
  border: 1px solid rgba(200, 150, 12, 0.3);
  font-weight: 600;
}

.level-info-unlocks li i {
  color: #f0c040;
  width: 18px;
  text-align: center;
}

/* Quick-access links to unlocked features (Cards / Profile / Settings) and the
   coin-earning shortcuts (Daily Reward / Achievements / Campaign / Shop). */
.level-info-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.level-info-link {
  flex: 1 1 calc(50% - 5px);
  min-width: calc(50% - 5px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(200, 150, 12, 0.12);
  border: 1px solid rgba(200, 150, 12, 0.35);
  color: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.level-info-link:hover {
  background: rgba(200, 150, 12, 0.22);
}

.level-info-link:active {
  transform: translateY(1px);
}

.level-info-link i {
  color: #f0c040;
}

/* Bottom "skip onboarding → full game" escape hatch — a quiet text link. */
.level-info-skip {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
  text-align: center;
}

.level-info-skip-link {
  display: inline-block;
  background: none;
  border: none;
  padding: 4px 6px;
  font: inherit;
  font-size: 0.85rem;
  /* Quiet, theme-aware text: the modal body uses var(--text) (black on light,
     white on dark); dim it so the link reads as a low-key escape hatch. */
  color: var(--text);
  opacity: 0.55;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.level-info-skip-link:hover,
.level-info-skip-link:focus-visible {
  color: #f0c040;
  opacity: 1;
}

.level-info-maxed {
  text-align: center;
  line-height: 1.5;
}

.level-info-maxed i {
  color: #6fcf6f;
  margin-right: 6px;
}

/* ── 3. Level-up toast ────────────────────────────────────────────────────── */
.cwl-levelup-toast {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 1400;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border-radius: 14px;
  color: #2a1a06;
  font-weight: 700;
  font-size: 18px;
  background: linear-gradient(180deg, #ffe79a, #f0a832);
  border: 2px solid #8a5512;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cwl-levelup-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cwl-levelup-toast .lvl-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2a1a06;
  color: #ffd970;
  font-weight: 800;
}