/* ===== Real LoL fonts =====
   Drop the .ttf files in /public/fonts/ — instructions in README of repo.
   The display: swap fallback uses Cinzel/Source Sans so the page never blocks. */
@font-face {
  font-family: "BeaufortLoL";
  src: url("/fonts/BeaufortforLOL-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "BeaufortLoL";
  src: url("/fonts/BeaufortforLOL-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "BeaufortLoL";
  src: url("/fonts/BeaufortforLOL-Heavy.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Spiegel";
  src: url("/fonts/Spiegel-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Spiegel";
  src: url("/fonts/Spiegel-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* ===== Tokens ===== */
:root {
  /* Color */
  --bg-deep: #010A13;
  --bg-panel: #0A1428;
  --bg-panel-2: #091828;
  --gold: #C89B3C;
  --gold-bright: #F0E6D2;
  --gold-muted: #785A28;
  --gold-faint: rgba(200,155,60,0.18);
  --gold-text: #C8AA6E;
  --cyan: #0BC4E3;
  --text-1: #F0E6D2;
  --text-2: #A09B8C;
  --text-3: #5B5A56;
  --divider: #1E2328;
  --divider-strong: #2A2F36;
  --red: #C8362A;
  --green: #1AC8A0;
  --orange: #E8A33D;

  /* 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 spacing scale.
     Rem-based so it tracks root font-size. Slot numbering matches the
     original (--sp-3 == 16px) so existing rules don't shift. */
  --sp-1:  0.25rem;  /*  4px */
  --sp-2:  0.5rem;   /*  8px */
  --sp-2h: 0.75rem;  /* 12px (half-step) */
  --sp-3:  1rem;     /* 16px */
  --sp-4:  1.5rem;   /* 24px */
  --sp-5:  2rem;     /* 32px */
  --sp-6:  3rem;     /* 48px */
  --sp-7:  4rem;     /* 64px */

  /* Radius — League client is essentially flat */
  --r-0: 0;
  --r-1: 2px;

  /* Layout sizing — fluid via clamp() so panels scale between breakpoints
     instead of forcing a hard pixel width. Floor / ceiling preserve the
     original 1280–1920 design feel. */
  --topbar-h: clamp(80px, calc(6vh + 1rem), 110px);
  --leftnav-w: clamp(192px, 16vw, 240px);
  --rightpanel-w: clamp(264px, 21vw, 320px);

  /* Page-gutter token used by hero / page sections so all gutters scale together. */
  --page-gutter-x: clamp(24px, 4vw, 64px);
  --page-gutter-y: clamp(32px, 4vw, 60px);

  /* Glow */
  --glow-gold: 0 0 12px rgba(200,155,60,0.35);
  --glow-gold-soft: 0 0 8px rgba(200,155,60,0.25);
}

* { box-sizing: border-box; }
html {
  /* Root font-size scales mildly with viewport so all rem-based spacing /
     typography breathes between 1024 and 1920 wide without distorting design. */
  font-size: clamp(14px, calc(0.5vw + 10px), 17px);
}
html, body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text-2);
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  /* faint noise overlay */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.6  0 0 0 0 0.24  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  z-index: 9999;
  mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ===== App layout ===== */
.app {
  width: 100%;
  /* No more min-width: 1280px — fluid widths handle small screens. */
  height: 100vh;
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  background: var(--bg-deep);
  position: relative;
  overflow: hidden;
  /* Crossfade in over the same 500ms the loader uses to fade out. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease-out;
}
.app.app-ready {
  opacity: 1;
  pointer-events: auto;
}
.app.skip-load {
  opacity: 1;
  pointer-events: auto;
  transition: none;
}
.app-body {
  display: grid;
  /* fixed L / fluid center / fixed R; min: 0 so center can shrink without overflow. */
  grid-template-columns: var(--leftnav-w) minmax(0, 1fr) var(--rightpanel-w);
  height: calc(100vh - var(--topbar-h));
  min-height: 0;
}

/* ===== Type ===== */
.cinzel { font-family: "BeaufortLoL", "Cinzel", serif; }
.mono { font-family: "JetBrains Mono", monospace; }
.label-sm {
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.muted { color: var(--text-3); }

/* ===== Brackets (hextech corners) ===== */
.brackets { position: relative; }
.brackets::before, .brackets::after,
.brackets > .br-tr, .brackets > .br-bl {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 0 solid var(--gold);
  pointer-events: none;
}
.brackets::before { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; }
.brackets::after  { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.brackets > .br-tr { top: -1px; right: -1px; border-top-width: 1.5px; border-right-width: 1.5px; }
.brackets > .br-bl { bottom: -1px; left: -1px; border-bottom-width: 1.5px; border-left-width: 1.5px; }

/* ===== Top bar ===== */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  height: var(--topbar-h);
  background: linear-gradient(180deg, #0A1428 0%, #050C18 100%);
  border-bottom: 1px solid var(--gold-muted);
  position: relative;
  z-index: 5;
  box-shadow: 0 1px 0 rgba(0,0,0,0.5);
  /* Clip any child that tries to extend past the gold underline. */
  overflow: hidden;
}
.tb-left  { display: flex; align-items: center; gap: var(--sp-2); padding-left: var(--sp-3); height: 100%; }

.cur-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
/* BE PNG has internal padding, so it reads smaller at the same box size as the
   RP SVG. Scale up modestly so artwork matches RP visually without breaking
   the topbar's vertical bounds. */
.cur-icon-be {
  /* Larger box because the BE PNG has transparent padding — the actual
     blue-diamond artwork only fills ~60% of its bounding box. */
  width: 44px;
  height: 44px;
}
/* Pull the BE row up so the visible diamond overlaps the RP row,
   closing the gap created by the PNG's transparent border. */
.currency-be { margin-top: -6px; }

.tb-mid   { display: flex; align-items: center; justify-content: center; gap: var(--sp-1); height: 100%; }
.tb-right { display: flex; align-items: center; gap: var(--sp-2); padding-right: var(--sp-2); height: 100%; }

.tb-divider {
  width: 1px;
  height: 24px;
  background: var(--divider-strong);
}

/* PLAY button — three independent pieces laid out as a flex row:
     [ league logo ] — gap — [ blue PNG button ( PLAY text centered ) ]
   The wrap is the flex container; the icon and the button are siblings, so
   the gap between them is real space (not faked with padding). PLAY centers
   inside the button via justify-content, no padding tricks needed. */
.play-btn-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* No flex `gap` — flex gap can't go negative, so spacing is controlled
     by the icon's margin-right below (which CAN be negative for overlap). */
  height: 3.5rem;       /* ~56px at base, scales with root */
  margin: 0 var(--sp-1);
}
.play-btn-icon {
  /* Flex sibling. >>> THIS IS THE GAP / OVERLAP KNOB <<<
       margin-right:  0.5rem  → small visible gap
       margin-right:  0       → logo touches the button edge
       margin-right: -0.5rem  → logo slightly overlaps the button
       margin-right: -1.25rem → deep overlap, logo "sits into" the button (LOBBY look)
     Tweak this single value to slide the logo left/right relative to the
     blue button. Negative values overlap; positive values create a gap. */
  position: relative;
  flex: none;
  margin-right: -1.1rem;
  width: 3rem;          /* ~48px — dominates the height like the LOBBY ref */
  height: 3rem;
  object-fit: contain;
  z-index: 2;           /* logo sits on top of the button */
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.play-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;   /* PLAY truly centered in the blue body */
  flex: none;
  /* Width chosen so the blue button alone (logo lives outside) holds the
     PLAY text comfortably. Tweak this number if you want a wider/narrower
     blue panel — text stays centered. */
  width: 7.5rem;             /* ~120px */
  height: 100%;
  padding: 0;                /* no asymmetric padding — flex centering does it */
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;       /* offsets letter-spacing's trailing gap */
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,0.7);
  transition: filter 0.15s, text-shadow 0.15s;
}
.play-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--play-frame, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}
.play-btn:hover {
  filter: brightness(1.1);
  text-shadow: 0 0 8px rgba(240,230,210,0.7);
}
.play-text {
  position: relative;
  z-index: 2;
}

.tab {
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0 var(--sp-2);
  height: 100%;
  display: flex; align-items: center;
  color: var(--text-3); cursor: pointer; position: relative;
  transition: color 0.15s;
}
.tab:hover:not(.disabled) { color: var(--text-2); }
.tab.active { color: var(--gold-bright); }
.tab.disabled { color: var(--text-3); opacity: 0.55; cursor: default; }

.tab-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px;
  padding: 0 8px;
  margin-left: 4px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--divider-strong);
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-2);
  cursor: pointer;
}
.tab-pill .pill-icon {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red);
  color: #fff;
  font-size: 9px; font-weight: 800;
  font-family: "BeaufortLoL", "Cinzel", serif;
}
.tab-pill:hover { color: var(--gold-bright); border-color: var(--gold-muted); }

.iconbtn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--r-0);
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.iconbtn:hover {
  color: var(--gold);
  border-color: var(--gold-muted);
  background: rgba(255,255,255,0.04);
  box-shadow: var(--glow-gold-soft);
}
.tb-mid .iconbtn { color: var(--gold-text); }
.tb-mid .iconbtn:hover { color: var(--gold-bright); }

.currency-stack {
  position: relative;            /* anchors the shared .plus button between rows */
  display: flex; flex-direction: column;
  justify-content: center;       /* center the two rows inside the topbar */
  gap: 0;                        /* overlap is handled by .currency-be margin-top */
  /* Asymmetric top/bottom padding nudges the centered content down a few
     pixels (the BE row's negative margin biases visual mass upward, so the
     extra top padding rebalances it). Bottom kept tight so nothing slips
     past the gold underline. */
  padding: 10px var(--sp-2) 2px var(--sp-3);
  height: 100%;
  border-left: 1px solid var(--divider-strong);
}
.currency {
  position: relative;                      /* anchor for the absolute .plus */
  display: grid;
  grid-template-columns: 44px auto;        /* icon | number — plus is layered on top */
  align-items: center;
  gap: var(--sp-2);
  /* Stable right edge so the plus button sits in the same horizontal slot
     no matter how long the RP number gets. min-width is sized to comfortably
     fit typical 4–5 digit amounts; padding-right reserves visual space for
     the plus so it never crowds the text. */
  min-width: 124px;
  padding-right: 28px;
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  font-size: 13px; font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1;
}
.currency .cur-icon { justify-self: center; }
.currency .num { color: #fff; text-align: left; }
.currency-stack > .plus {
  /* Centered vertically between the RP and BE rows since one click adds to
     both. Right-aligned to match the previous horizontal slot. */
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold);
  color: #0A1428;
  font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  user-select: none;
}
.currency-stack > .plus:hover { filter: brightness(1.15); }
.currency-stack > .plus:active { transform: translateY(-50%) scale(0.92); }
.currency .cur-pop {
  position: absolute;
  right: 30px;
  top: 50%;
  pointer-events: none;
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-bright);
  text-shadow: 0 0 6px rgba(240, 230, 210, 0.55);
  white-space: nowrap;
  animation: curPop 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes curPop {
  0%   { opacity: 0; transform: translate(0, -50%) scale(0.85); }
  18%  { opacity: 1; transform: translate(0, -70%) scale(1); }
  100% { opacity: 0; transform: translate(0, -180%) scale(1); }
}

.tb-profile {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-3);
  margin-left: var(--sp-3);
  height: 100%;
  border-left: 1px solid var(--divider-strong);
}
.tb-profile .rp-profile-icons { margin-left: 0; }
/* Topbar variant of the avatar: smaller so avatar + level pill fit within
   var(--topbar-h) without sticking past the gold underline. */
.tb-profile .rp-avatar {
  width: 40px; height: 40px;
  font-size: 13px;
}
.tb-profile .rp-level {
  bottom: -4px;
  min-width: 22px;
  padding: 0 var(--sp-1);
  font-size: 9.5px;
  line-height: 1.3;
}

/* ===== Left nav ===== */
.leftnav {
  background: var(--bg-panel);
  border-right: 1px solid var(--divider);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.leftnav .crest-area {
  height: 96px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--divider);
  flex-direction: column;
  gap: var(--sp-1);
  position: relative;
}
.leftnav .crest-wordmark {
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-size: 9px; letter-spacing: 0.4em;
  color: var(--gold-muted);
}
.navlist {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: var(--sp-3) 0;
  min-height: 0;
}
.navitem {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-2);
  height: 48px; padding: 0 var(--sp-3);
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  border-left: 2px solid transparent;
}
.navitem .nico { width: 20px; height: 20px; color: currentColor; flex: none; }
.navitem:hover { color: var(--text-2); background: rgba(255,255,255,0.03); }
.navitem.active {
  color: var(--gold);
  border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(200,155,60,0.10) 0%, rgba(200,155,60,0.02) 60%, transparent 100%);
}
.navitem.active::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--gold-bright) 50%, transparent 100%);
  animation: shimmer 2.4s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
.leftnav .footer {
  border-top: 1px solid var(--divider);
  padding: var(--sp-2h) var(--sp-3) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.leftnav .footer .pn {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 10px;
  letter-spacing: 0.18em; color: var(--text-3); text-transform: uppercase;
  cursor: pointer;
}
.leftnav .footer .pn:hover { color: var(--text-2); }
.leftnav .footer .pn.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}
.leftnav .footer .pn.disabled:hover { color: var(--text-3); }
.leftnav .footer .ver {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: var(--text-3);
}

/* ===== Main content ===== */
.main {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 75% 45%, rgba(20, 60, 95, 0.55) 0%, rgba(1,10,19,0) 55%),
    radial-gradient(ellipse at 20% 80%, rgba(120, 90, 40, 0.18) 0%, rgba(1,10,19,0) 50%),
    var(--bg-deep);
}
.main-inner {
  position: absolute; inset: 0;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-muted) transparent;
}
.main-inner::-webkit-scrollbar { width: 8px; }
.main-inner::-webkit-scrollbar-thumb { background: var(--gold-muted); }
.main-inner::-webkit-scrollbar-track { background: transparent; }

.section-anim {
  animation: secIn 360ms ease-out both;
}
@keyframes secIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  height: 100%;
  /* Always fill the viewport (minus topbar) so the hero's vignette covers
     the entire visible area on tall screens — no more "rectangle" of bare
     .main background showing below the hero on large monitors. 560px floor
     keeps things readable on short viewports. */
  min-height: max(560px, calc(100vh - var(--topbar-h)));
  display: grid;
  /* Two columns + a third row for the bottom bar (no more absolute positioning). */
  grid-template-columns: minmax(20rem, 38%) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  padding: var(--page-gutter-y) var(--page-gutter-x);
}
.hero::before {
  /* left vignette over content for legibility */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg-deep) 0%, rgba(1,10,19,0.85) 30%, rgba(1,10,19,0.2) 55%, transparent 80%);
  pointer-events: none;
}
.hero-text { position: relative; z-index: 2; max-width: 400px; }
.hero-eyebrow {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 11px; letter-spacing: 0.32em;
  color: var(--gold); text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.hero-eyebrow::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--gold-muted), transparent);
}
.hero-title {
  font-family: "BeaufortLoL", "Cinzel", serif; font-weight: 700;
  font-size: 56px; letter-spacing: 0.04em;
  color: var(--gold-bright);
  margin: 18px 0 8px;
  text-shadow: 0 0 24px rgba(200,155,60,0.35);
  line-height: 1.05;
}
.hero-sub {
  font-family: "BeaufortLoL", "Cinzel", serif; font-weight: 500;
  font-size: 17px; letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-bio {
  font-size: 13.5px; line-height: 1.85;
  color: var(--text-2);
  max-width: 380px;
  margin-bottom: 26px;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tag {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: var(--sp-1) 11px;
  border: 1px solid var(--gold-muted);
  border-radius: var(--r-0);
  background: rgba(10,20,40,0.6);
  color: var(--gold);
  transition: border-color 0.15s, color 0.15s;
}
.tag:hover { border-color: var(--gold); color: var(--gold-bright); }

.champ-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--gold-muted);
  background: linear-gradient(90deg, rgba(10,20,40,0.85), rgba(10,20,40,0.4));
  margin-bottom: 28px;
  max-width: 380px;
}
.champ-portrait {
  width: 52px; height: 52px;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 30% 30%, #1a3a5c, #010A13);
  flex: none;
  overflow: hidden;
}
.champ-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.champ-info .champ-label {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 10px; letter-spacing: 0.22em;
  color: var(--gold-muted); text-transform: uppercase;
}
.champ-info .champ-name {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 16px; color: var(--gold-bright);
  letter-spacing: 0.12em;
}
.champ-info .champ-sub {
  font-size: 11.5px; color: var(--text-2); letter-spacing: 0.04em;
}

.ugg-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: var(--text-2);
  border-bottom: 1px dashed var(--gold-muted);
  padding-bottom: 2px;
  transition: color 0.2s;
}
.ugg-link:hover { color: var(--gold); }

.cta-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 14px var(--sp-4);
  font-family: "BeaufortLoL", "Cinzel", serif; font-weight: 600;
  font-size: 13px; letter-spacing: 0.28em;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--r-0);
  background: rgba(200,155,60,0.05);
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.cta-btn:hover {
  background: rgba(200,155,60,0.18);
  color: var(--gold-bright);
  box-shadow: var(--glow-gold);
}
.cta-btn::before, .cta-btn::after {
  content: ""; position: absolute;
  width: 6px; height: 6px; background: var(--gold);
}
.cta-btn::before { top: -3px; left: -3px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.cta-btn::after  { bottom: -3px; right: -3px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Hero photo */
.hero-photo-wrap {
  position: relative; z-index: 2;
  justify-self: end;
  /* Fluid photo: scales from ~340 → 460px wide while preserving the same
     aspect ratio (was 460×600 ≈ 0.767). */
  width: clamp(320px, 32vw, 460px);
  aspect-ratio: 460 / 600;
  height: auto;
  margin-right: clamp(0px, 1.5vw, 20px);
}
.hero-photo-frame {
  position: absolute; inset: 0;
  border: 1.5px solid var(--gold);
  background: var(--bg-deep);
  overflow: hidden;
  box-shadow:
    0 0 60px rgba(200,155,60,0.18),
    inset 0 0 120px rgba(0,0,0,0.6);
}
.hero-photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(0.95) contrast(1.05);
}
.hero-photo-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg-deep) 0%, rgba(1,10,19,0.55) 25%, transparent 55%);
  pointer-events: none;
}
.frame-corner {
  position: absolute; width: 28px; height: 28px;
  border: 0 solid var(--gold); pointer-events: none;
  z-index: 3;
}
.frame-corner.tl { top: -3px; left: -3px; border-top-width: 2px; border-left-width: 2px; }
.frame-corner.tr { top: -3px; right: -3px; border-top-width: 2px; border-right-width: 2px; }
.frame-corner.bl { bottom: -3px; left: -3px; border-bottom-width: 2px; border-left-width: 2px; }
.frame-corner.br { bottom: -3px; right: -3px; border-bottom-width: 2px; border-right-width: 2px; }
.frame-corner::after {
  content: ""; position: absolute;
  width: 6px; height: 6px; background: var(--gold);
}
.frame-corner.tl::after { top: 4px; left: 4px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.frame-corner.tr::after { top: 4px; right: 4px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.frame-corner.bl::after { bottom: 4px; left: 4px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.frame-corner.br::after { bottom: 4px; right: 4px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* particles */
.particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.particle {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 6px rgba(200,155,60,0.7);
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty {
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 0.7; }
  80%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-50px); }
}

/* Bottom bar in hero — flows in the grid (no absolute positioning),
   spans both columns so it tracks page gutters automatically. */
.hero-bottom {
  position: relative;
  grid-column: 1 / -1;
  align-self: end;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  z-index: 3;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--gold-muted);
}
.hero-bottom .meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--text-3); letter-spacing: 0.1em;
}
.hero-bottom-left {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}

/* ===== Generic section page ===== */
.page {
  padding: var(--page-gutter-y) var(--page-gutter-x) var(--sp-7);
  /* Cap content width with rem so it tracks the root scale. */
  max-width: 75rem;
  width: 100%;
}
.page-head {
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--divider);
  padding-bottom: var(--sp-3);
}
.page-head .eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.18em; color: var(--gold);
  margin-bottom: 6px;
}
.page-head .title {
  font-family: "BeaufortLoL", "Cinzel", serif; font-weight: 700;
  font-size: 36px; letter-spacing: 0.04em;
  color: var(--gold-bright);
  text-shadow: 0 0 16px rgba(200,155,60,0.25);
}
.page-head .sub {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 13.5px;
  max-width: 600px;
}

/* Experience cards */
.xp-card {
  position: relative;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-4);
  background: rgba(10,20,40,0.55);
  border: 1px solid var(--divider);
  margin-bottom: var(--sp-2);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.xp-card:hover {
  border-color: var(--gold-muted);
  box-shadow: var(--glow-gold-soft);
}
.xp-card .top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-bottom: 4px;
}
.xp-card .role {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 17px; color: var(--gold-bright);
  letter-spacing: 0.06em;
}
.xp-card .dates {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--text-3); white-space: nowrap;
  letter-spacing: 0.06em;
}
.xp-card .org {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 13px;
  letter-spacing: 0.16em; color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.xp-card ul { margin: 0; padding-left: 18px; }
.xp-card li {
  font-size: 13.5px; color: var(--text-2); line-height: 1.65;
  margin-bottom: 4px;
}
.xp-card li::marker { color: var(--gold-muted); }

/* Projects list — same row/bar treatment as .xp-card so each project reads as
   a horizontal entry instead of a tile. */
.proj-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.proj-card {
  position: relative;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(10,20,40,0.55);
  border: 1px solid var(--divider);
  display: flex; flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.proj-card:hover {
  border-color: var(--gold-muted);
  box-shadow: var(--glow-gold-soft);
}
/* Top row: project name (left) + links (right) — mirrors .xp-card .top. */
.proj-card .pname {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 17px; color: var(--gold-bright);
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-1);
}
.proj-card .pdesc {
  font-size: 13.5px; color: var(--text-2); line-height: 1.65;
}
.proj-card .ptags {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  margin: 0 0 var(--sp-2);
}
.proj-card .ptag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; color: var(--gold-text);
  padding: 2px var(--sp-2);
  border: 1px solid var(--divider);
  background: rgba(0,0,0,0.3);
}
.proj-card .plinks {
  display: flex; gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.proj-card .plink {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 11px;
  letter-spacing: 0.18em; color: var(--gold);
  text-transform: uppercase;
}
.proj-card .plink:hover { color: var(--gold-bright); }

.resume-page { display: flex; flex-direction: column; height: 100%; }
.resume-pdf-frame {
  flex: 1;
  min-height: 0;
  padding: var(--sp-2);
  display: flex;
}
.resume-pdf {
  width: 100%;
  height: 100%;
  min-height: 70vh;
  border: 0;
  background: #1a1a1a;
}
.resume-pdf-fallback {
  padding: var(--sp-3);
  font-size: 14px;
  color: var(--text-2);
}
.resume-pdf-fallback a { color: var(--gold-bright); }

/* Resume page — collapses to one column under ~960px to avoid cramped panels. */
.resume-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 60rem) {
  .resume-grid { grid-template-columns: minmax(0, 1fr); }
}
.resume-block {
  border: 1px solid var(--divider);
  background: rgba(10,20,40,0.5);
  padding: 22px 24px;
  position: relative;
}
.resume-block h3 {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 13px;
  letter-spacing: 0.22em; color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.edu-row { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.edu-badge {
  width: 46px; height: 46px;
  border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: "BeaufortLoL", "Cinzel", serif; font-weight: 700;
  font-size: 14px; color: var(--gold);
  background: rgba(0,0,0,0.4);
  flex: none;
}
.edu-info .school {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 16px;
  color: var(--gold-bright); letter-spacing: 0.04em;
}
.edu-info .deg {
  font-size: 13px; color: var(--text-2);
}
.edu-info .grad {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--text-3); letter-spacing: 0.08em;
}

.skill-cat {
  margin-bottom: 14px;
}
.skill-cat .lab {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 11px;
  letter-spacing: 0.18em; color: var(--gold-text);
  text-transform: uppercase; margin-bottom: 6px;
}
.skill-cat .pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* Contact */
.contact-msg {
  color: var(--text-2);
  margin-bottom: 22px;
  max-width: 520px;
  line-height: 1.7;
}
.contact-list { display: flex; flex-direction: column; gap: 10px; max-width: 700px; }
.contact-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(10,20,40,0.55);
  border: 1px solid var(--divider);
  border-radius: var(--r-0);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.contact-row:hover {
  border-color: var(--gold);
  background: rgba(200,155,60,0.08);
  transform: translateX(2px);
  box-shadow: var(--glow-gold-soft);
}
.contact-row .avatar {
  width: 36px; height: 36px;
  border: 1px solid var(--gold-muted);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.contact-row .name {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 15px;
  letter-spacing: 0.06em; color: var(--gold-bright);
}
.contact-row .handle {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: var(--text-2);
}
.contact-row .arrow { color: var(--gold); font-size: 16px; }

/* Patch notes */
.patch-list { display: flex; flex-direction: column; gap: 14px; }
.patch-entry {
  border: 1px solid var(--divider);
  background: rgba(10,20,40,0.5);
  padding: 18px 22px;
  position: relative;
}
.patch-entry .pmeta {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 8px;
}
.patch-entry .pver {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 13px;
  letter-spacing: 0.16em; color: var(--gold);
}
.patch-entry .pdate {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--text-3);
}
.patch-entry .ptag-pill {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 9.5px;
  letter-spacing: 0.18em; padding: 2px 8px;
  border: 1px solid var(--gold-muted);
  color: var(--gold);
  text-transform: uppercase;
}
.patch-entry .ptag-pill.new   { border-color: #1AC8A0; color: #1AC8A0; }
.patch-entry .ptag-pill.fix   { border-color: var(--cyan); color: var(--cyan); }
.patch-entry .ptag-pill.note  { border-color: var(--gold-muted); color: var(--gold-text); }
.patch-entry h4 {
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 16px;
  color: var(--gold-bright); margin: 4px 0;
  letter-spacing: 0.04em;
}
.patch-entry p {
  font-size: 13.5px; color: var(--text-2); line-height: 1.65;
  margin: 4px 0 0;
}

/* ===== Right panel ===== */
.rightpanel {
  background: var(--bg-panel);
  border-left: 1px solid var(--divider);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.rp-profile {
  padding: var(--sp-2) var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-3);
  border-bottom: 1px solid var(--divider);
  height: 76px;
}
.rp-avatar {
  width: 56px; height: 56px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1f3a5c, #010A13);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-bright);
  font-family: "BeaufortLoL", "Cinzel", serif; font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  flex: none;
  position: relative;
  box-shadow: var(--glow-gold-soft);
}
.rp-level {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  min-width: 28px;
  padding: 1px 6px;
  background: linear-gradient(180deg, #1E2328 0%, #0A1428 100%);
  border: 1px solid var(--gold);
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  font-weight: 700; font-size: 11px;
  color: var(--gold-bright);
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.rp-name {
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.02em; color: #fff;
}
.rp-status {
  font-size: 11px; color: var(--green);
  display: flex; align-items: center; gap: var(--sp-1);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.rp-profile-icons {
  margin-left: auto;
  display: flex; gap: 2px;
}
.rp-profile-icons .iconbtn { width: 26px; height: 26px; }

.rp-social-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--text-2);
  text-transform: uppercase;
}
.rp-social-head .icons {
  display: flex; gap: 2px;
}
.rp-social-head .iconbtn { width: 26px; height: 26px; }
.rp-toolbar {
  display: flex; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--divider);
  background: rgba(0,0,0,0.25);
  height: 44px;
  align-items: center;
}
.rp-toolbar .iconbtn { width: 28px; height: 28px; }
.rp-search {
  display: flex; align-items: center; gap: var(--sp-1);
  height: 28px;
  padding: 0 var(--sp-2);
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--divider-strong);
  flex: 1;
  max-width: 140px;
  color: var(--text-3);
  transition: border-color 0.15s;
}
.rp-search:focus-within { border-color: var(--gold-muted); }
.rp-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-2);
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  width: 100%;
  min-width: 0;
}
.rp-search input::placeholder { color: var(--text-3); }
.rp-section-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 10.5px;
  letter-spacing: 0.2em; color: var(--text-3);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.rp-section-head:hover { color: var(--text-2); }
.rp-friends { padding: 0 var(--sp-1) var(--sp-2); display: flex; flex-direction: column; gap: 4px; }
.rp-friend {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--r-0);
  transition: background 0.15s, border-color 0.15s;
}
.rp-friend:hover {
  background: rgba(255,255,255,0.03);
  border-color: var(--gold-muted);
}
.rp-friend .av {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a3a5c, #0a1428);
  border: 1px solid var(--gold-muted);
  display: flex; align-items: center; justify-content: center;
  font-family: "BeaufortLoL", "Cinzel", serif; font-size: 16px; color: var(--gold);
  position: relative;
}
.rp-friend .av .sd {
  position: absolute; bottom: -1px; right: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--bg-panel);
}
.rp-friend .meta .nm {
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  font-size: 16px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--gold-bright);
}

.rp-social-head .iconbtn.active { color: var(--gold-bright); background: rgba(200,155,60,0.12); }
.rp-search-inline {
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0 var(--sp-2);
  margin-right: var(--sp-2);
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--divider-strong);
  outline: none;
  color: var(--text-2);
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.rp-search-inline:focus { border-color: var(--gold-muted); }
.rp-search-inline::placeholder { color: var(--text-3); }
.rp-friends-empty {
  padding: var(--sp-2) var(--sp-3);
  font-size: 12px;
  color: var(--text-3);
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  letter-spacing: 0.04em;
}

.rp-foot {
  margin-top: auto;
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: var(--text-3);
  letter-spacing: 0.04em;
}
.rp-foot .ind {
  display: flex; align-items: center; gap: var(--sp-1);
}
.rp-foot .ind .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 4px var(--green); }

/* ===== Sign-in screen (Stage 1) ===== */
.signin {
  position: fixed; inset: 0; z-index: 9990;
  display: grid;
  grid-template-columns: 375px 1fr;
  background: #F5F3F0;
  color: #1a1a1a;
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  animation: signinIn 400ms ease-out both;
}
@keyframes signinIn { from { opacity: 0; } to { opacity: 1; } }
.signin.exit .signin-left { animation: leftOut 400ms ease-in forwards; }
.signin.exit { animation: signinOut 400ms ease-in 200ms forwards; }
@keyframes leftOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes signinOut { to { opacity: 0; } }

.signin-left {
  background: #F5F3F0;
  padding: 24px 32px 22px;
  display: flex; flex-direction: column;
  position: relative;
  border-right: 1px solid #E0DDD8;
}
/* Layout adjustments for pixel-fit loading/signin */
.signin { display: block; min-height: 100vh; background: #fff; }
.signin-left { width: 360px; flex: none; }
.signin-right { flex: 1; }
.signin-brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 56px;
}
.signin-brand-wm .line1 {
  font-family: "BeaufortLoL", "Cinzel", serif; font-weight: 700;
  font-size: 18px; letter-spacing: 0.18em; color: #E33A2B; /* riot red */
}
.signin-brand-wm .line2 {
  font-family: "BeaufortLoL", "Cinzel", serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.24em; color: #E33A2B; /* riot red */
}
.si-tabs {
  display: flex; gap: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid #E0DDD8;
  width: fit-content;
}
.si-tab {
  padding: 10px 18px;
  font-family: "Spiegel", "Source Sans 3", sans-serif; font-weight: 600;
  font-size: 13px; color: #888;
  cursor: pointer; position: relative;
  display: flex; align-items: center; gap: 6px;
}
.si-tab.active {
  color: #1a1a1a;
  background: #fff;
  border-radius: 8px 8px 0 0;
}
.si-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: #C89B3C;
}
.si-field {
  margin-bottom: 14px;
  border: 1px solid #C8C4BE;
  background: #fff;
  padding: 6px 12px 8px;
  border-radius: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.si-field.focus { border-color: #C89B3C; box-shadow: 0 0 0 3px rgba(200,155,60,0.15); }
.si-field label {
  font-family: "Spiegel", "Source Sans 3", sans-serif; font-size: 10px;
  letter-spacing: 0.14em; color: #666; font-weight: 600;
  text-transform: uppercase;
}
.si-input {
  font-size: 14px; color: #1a1a1a;
  min-height: 22px;
  display: flex; align-items: center;
  letter-spacing: 0.04em;
}
.si-input .eye { margin-left: auto; color: #999; }
.caret {
  display: inline-block; width: 1.5px; height: 16px;
  background: #1a1a1a; margin-left: 2px; opacity: 0;
}
.caret.on { animation: blink 1s steps(2) infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.si-providers {
  display: flex; gap: 8px;
  margin: 16px 0 18px;
}
.si-prov {
  width: 44px; height: 44px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}

.si-stay {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #444;
  margin-bottom: 22px;
}
.si-check {
  width: 16px; height: 16px;
  border: 1px solid #C8C4BE;
  background: #fff;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, border-color 0.3s;
}
.si-check.on { background: #C89B3C; border-color: #C89B3C; }

.si-arrow {
  width: 52px; height: 52px;
  background: #1a1a1a; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.3s, box-shadow 0.3s;
}
.si-arrow.pulse {
  transform: scale(1.08);
  box-shadow: 0 0 22px rgba(200,155,60,0.55);
}
.si-arrow.flash { background: #C89B3C; }

.signin-foot { margin-top: auto; }
.signin-foot .sf-row {
  display: flex; justify-content: space-between;
  margin-bottom: 10px;
  font-size: 11px; color: #666; font-weight: 600;
  letter-spacing: 0.08em;
}
.signin-foot .sf-row .ver { color: #999; font-weight: 400; }
.signin-foot .sf-fine {
  font-size: 9.5px; color: #999; line-height: 1.5;
  letter-spacing: 0.04em;
}
.signin-foot .lk { color: #666; text-decoration: underline; }

.signin-right {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1a0a2e 0%, #0d1b3e 25%, #0a2040 50%, #1a0f0a 75%, #0d0d1a 100%);
}
.splash-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.splash-art-img { width: 100%; height: 100%; object-fit: fill; display: block; transform: none; }
.splash-overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}
.overlay-user-field,
.overlay-pass {
  position: absolute;
  box-sizing: border-box;
  border: none;
  border-radius: 3px;
  background: #EFEFEF;
  color: #191919;
  font-family: "Source Code Pro", "JetBrains Mono", monospace;
  font-size: clamp(12px, 0.95vw, 14px);
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 0 12px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  caret-color: #191919;
  z-index: 1;
}
.overlay-user-field::placeholder,
.overlay-pass::placeholder {
  color: rgba(25, 25, 25, 0.45);
  opacity: 1;
}
.overlay-user-field:focus,
.overlay-pass:focus {
  border-color: rgba(37, 37, 37, 0.16);
  box-shadow: 0 0 0 2px rgba(200, 155, 60, 0.08);
}
.overlay-user-field {
  left: 3.6%;
  top: 28.1%;
  width: 18.3%;
  height: 4.1%;
}
.overlay-pass {
  left: 3.4%;
  top: 35.1%;
  width: 17.0%;
  height: 4.7%;
}
.overlay-remember {
  position: absolute;
  left: 3.5%;
  top: 49.4%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #232323;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.overlay-remember.on {
  opacity: 1;
  transform: translateY(0);
}
.overlay-box {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(37, 37, 37, 0.12);
  background: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
}
.overlay-check {
  position: absolute;
  left: 2px;
  top: -1px;
  font-size: 15px;
  line-height: 1;
  color: #2e2e2e;
}
.overlay-captcha-blocker {
  position: absolute;
  left: 3.5%;
  top: 95%;
  width: 20%;
  min-height: 5%;
  background: #ffffff;
  border-radius: 2px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: #808080;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  box-sizing: border-box;
}
.signin-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(245,243,240,0.12) 0%, transparent 8%);
}
.si-profile-btn {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px;
  background: #1a1a1a; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.si-watermark {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: "BeaufortLoL", "Cinzel", serif; font-weight: 700;
  font-size: 140px; line-height: 1;
  color: #fff;
  letter-spacing: 0.12em;
  pointer-events: none;
}
.si-watermark > div:first-child { color: #fff; opacity: 0.03; }
.si-watermark > div:last-child  { color: #E33A2B; opacity: 0.07; font-size: 110px; }

.skip-btn {
  position: absolute; right: 20px; bottom: 18px;
  background: transparent; border: none; cursor: pointer;
  font-family: "Spiegel", "Source Sans 3", sans-serif;
  font-size: 11px; letter-spacing: 0.14em; color: #5B5A56;
  z-index: 10;
}
.skip-btn:hover { color: #A09B8C; }

/* ===== Loading screen (Stage 2) ===== */
.loadscr {
  text-align: center;
  position: fixed; inset: 0; z-index: 9985;
  background: radial-gradient(ellipse at 50% 50%, #1a1200 0%, #010A13 70%);
  display: flex; align-items: center; justify-content: center;
  animation: lsIn 600ms ease-out both;
}
@keyframes lsIn { from { opacity: 0; } to { opacity: 1; } }
.loadscr.exit { animation: lsOut 500ms ease-in forwards; }
@keyframes lsOut { to { opacity: 0; } }
.ls-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(200,155,60,0.10) 0%, transparent 55%);
}
.ls-particles { position: absolute; inset: 0; pointer-events: none; }
.ls-stack {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  position: relative; z-index: 2;
}
.ls-crest {
  animation: crestIn 800ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
             pulse 2s ease-in-out 800ms infinite;
}
.ls-crest.out { transform: scale(1.1); transition: transform 300ms ease-out, filter 300ms; filter: drop-shadow(0 0 18px rgba(240,230,210,0.7)); }
@keyframes crestIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(200,155,60,0.4)); }
  50%      { filter: drop-shadow(0 0 14px rgba(200,155,60,0.7)); }
}
.ls-wm {
  font-family: "BeaufortLoL", "Cinzel", serif; font-weight: 700;
  font-size: 18px; letter-spacing: 0.3em; color: #C89B3C;
  margin-top: 6px;
  animation: fadeInDelay 400ms ease-out 600ms both;
}
@keyframes fadeInDelay { from { opacity: 0; } to { opacity: 1; } }
.ls-bar {
  width: 320px; height: 3px;
  background: #1E2328;
  margin-top: 18px;
  position: relative;
}
.ls-fill {
  height: 100%;
  /* Bright leading edge so the bar's tip reads as the white dot the user
     was tracking — no separate dot needed. */
  background: linear-gradient(90deg, #785A28 0%, #C89B3C 55%, #F0E6D2 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(240, 230, 210, 0.55);
}
/* Shimmer travels a constant pixel distance regardless of fill width so its
   speed no longer scales with progress. Clipped by .ls-fill's overflow so it
   only shows within the filled portion. */
.ls-shimmer {
  position: absolute;
  top: 0; left: 0;
  width: 80px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: shimmerSlide 2.6s linear infinite;
  pointer-events: none;
}
@keyframes shimmerSlide {
  0%   { transform: translateX(-80px); }
  100% { transform: translateX(320px); }
}
.ls-status {
  font-size: 11px; letter-spacing: 0.18em; color: #A09B8C;
  text-transform: uppercase;
  margin-top: 10px;
  transition: opacity 0.3s;
}



/* No delay so this also fires fast when journal-mode toggles the leftnav
   out of display:none — CSS animations restart on display:none → revealed,
   and the original 0.5s delay made the bar lag behind the main content. */
.app .leftnav  { animation: slideL 220ms ease-out both; }
.app .main     { animation: fadeIn 600ms ease-out 0.7s both; }
.app .rightpanel { animation: slideR 400ms ease-out 0.9s both; }
.app .topbar     { animation: fadeIn 500ms ease-out 0.4s both; }
.app.skip-load .leftnav,
.app.skip-load .main,
.app.skip-load .rightpanel,
.app.skip-load .topbar { animation: none; }

@keyframes slideL { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideR { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ornate intensity */
.ornate-low .brackets::before, .ornate-low .brackets::after,
.ornate-low .brackets > .br-tr, .ornate-low .brackets > .br-bl { display: none; }
.ornate-low .frame-corner { display: none; }

.ornate-high .xp-card,
.ornate-high .resume-block,
.ornate-high .patch-entry {
  box-shadow: inset 0 0 0 1px rgba(200,155,60,0.08), 0 0 28px rgba(200,155,60,0.05);
}

/* ===== Journal mode =====
   Toggled by adding `.journal-mode` to `.app`. The left nav is hidden via
   display:none so it stops consuming a grid track but stays in the React
   tree. The right social panel is intentionally untouched. */
.app.journal-mode .app-body {
  grid-template-columns: minmax(0, 1fr) var(--rightpanel-w);
  transition: grid-template-columns 280ms ease;
}
.app.journal-mode .leftnav { display: none; }

/* ===== Journal entries ===== */
.journal-page { max-width: 80rem; }
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (max-width: 720px) {
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .journal-grid { grid-template-columns: 1fr; }
}
.journal-card {
  display: flex;
  flex-direction: column;
  background: rgba(10,20,40,0.55);
  border: 1px solid var(--divider);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.journal-card:hover {
  border-color: var(--gold-muted);
  box-shadow: var(--glow-gold-soft);
  transform: translateY(-1px);
}
.journal-card .jc-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-deep);
  overflow: hidden;
  border-bottom: 1px solid var(--divider);
}
.journal-card .jc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.journal-card:hover .jc-img img { transform: scale(1.03); }
.journal-card .jc-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
}
.journal-card .jc-title {
  font-family: "BeaufortLoL", "Cinzel", serif;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
}
.journal-card .jc-date {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.journal-card .jc-desc {
  margin: var(--sp-1) 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.journal-card { cursor: pointer; }
.journal-card:focus-visible {
  outline: 1px solid var(--gold-muted);
  outline-offset: 2px;
}

/* Journal lightbox — click a card to open the full photo. */
.journal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 8, 18, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5, 24px);
  animation: jl-fade 0.18s ease-out;
}
@keyframes jl-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.journal-lightbox .jl-figure {
  margin: 0;
  max-width: min(90vw, 1100px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.journal-lightbox .jl-img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--gold-muted);
  box-shadow: var(--glow-gold-soft, 0 0 24px rgba(200, 155, 60, 0.35));
  background: var(--bg-deep);
}
.journal-lightbox .jl-caption {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  text-align: center;
  max-width: 70ch;
}
.journal-lightbox .jl-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold-muted);
  background: rgba(10, 20, 40, 0.6);
  color: var(--gold-bright);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.journal-lightbox .jl-close:hover {
  background: rgba(200, 155, 60, 0.15);
  color: #fff;
}

/* ===== Responsive breakpoints =====
   Three columns (left nav / main / right panel) only fit comfortably above
   ~1100px. Below that we drop the right panel; below ~768 we also drop the
   left nav so main content keeps full width. The `--*-w` clamps already
   handle proportional shrinking between these breakpoints. */
@media (max-width: 1100px) {
  .app-body {
    grid-template-columns: var(--leftnav-w) minmax(0, 1fr);
  }
  .rightpanel { display: none; }
  /* Journal mode at this size: nav already hidden; right panel collapses
     too, so main expands edge-to-edge. */
  .app.journal-mode .app-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 768px) {
  .app-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .leftnav { display: none; }
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-photo-wrap {
    justify-self: center;
    margin-right: 0;
  }
}

/* Large screens: tighten the upper bound of fluid scaling so paddings don't
   keep growing past the design's intended max. */
@media (min-width: 1600px) {
  :root {
    --page-gutter-x: 64px;
    --page-gutter-y: 60px;
  }
}