/* Phase 1 — the LoL page frame. Component-level reconstruction follows in later phases. */
:root {
  --lol-void: #080b0d;
  --lol-obsidian: #101317;
  --lol-ink: #16191d;
  --lol-gold: #c9a55a;
  --lol-gold-soft: #8e7340;
  --lol-crimson: #a52d3a;
  --lol-paper: #e2d3b8;
  --lol-muted: #948978;
}

.game-site-lol {
  min-width: 320px;
  background: var(--lol-void);
  color: var(--lol-paper);
}

.game-site-lol::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: '';
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 5, 7, .88) 0%, rgba(3, 5, 7, .55) 42%, rgba(3, 5, 7, .22) 100%),
    linear-gradient(180deg, rgba(4, 6, 8, .62), rgba(4, 6, 8, .86) 83%, #06090b),
    image-set(
      url('/assets/lol/ui/abyss-architecture-v1.avif') type('image/avif'),
      url('/assets/lol/ui/abyss-architecture-v1.png') type('image/png')
    ) center top / cover no-repeat;
}

.game-site-lol .game-sidebar {
  z-index: 20;
  display: flex;
  width: 76px;
  padding: 1rem .55rem;
  overflow: visible;
  border-right-color: rgba(201, 165, 90, .32);
  background: linear-gradient(180deg, rgba(13, 16, 19, .98), rgba(5, 7, 9, .98));
  box-shadow: 8px 0 28px rgba(0, 0, 0, .2);
}

.game-site-lol .game-brand {
  justify-content: center;
  padding: .25rem 0 1rem;
  border-bottom-color: rgba(201, 165, 90, .23);
}

.game-site-lol .game-brand-mark {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(227, 197, 132, .65);
  border-radius: 2px;
  background: linear-gradient(145deg, #d0ad62, #7d5a27);
  color: #17110b;
  box-shadow: 0 0 16px rgba(201, 165, 90, .18);
}

.game-site-lol .game-brand > div,
.game-site-lol .game-brand .game-menu-close,
.game-site-lol .game-nav-item > span:last-child,
.game-site-lol .game-sidebar-note {
  display: none;
}

.game-site-lol .game-nav { gap: .65rem; padding-top: 1rem; }

.game-site-lol .game-nav-item {
  position: relative;
  justify-content: center;
  padding: .52rem;
  border-radius: 2px;
}

.game-site-lol .game-nav-item::after {
  position: absolute;
  left: calc(100% + .65rem);
  padding: .34rem .55rem;
  border: 1px solid rgba(201, 165, 90, .35);
  border-radius: 2px;
  background: #12161a;
  color: #e1d2b6;
  content: attr(aria-label);
  font-family: Georgia, 'Songti SC', serif;
  font-size: .76rem;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity .14s ease, transform .14s ease;
  white-space: nowrap;
}

.game-site-lol .game-nav-item:hover::after,
.game-site-lol .game-nav-item:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.game-site-lol .game-nav-icon {
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(201, 165, 90, .2);
  border-radius: 2px;
  background: rgba(201, 165, 90, .06);
}

.game-site-lol .game-nav-item:hover { background: rgba(201, 165, 90, .08); }
.game-site-lol .game-nav-item.active { border-color: rgba(180, 50, 61, .68); background: rgba(147, 35, 46, .2); }
.game-site-lol .game-nav-item.active .game-nav-icon { background: rgba(170, 43, 54, .28); }

.game-site-lol .game-main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  margin-left: 76px;
  padding: 0 clamp(1rem, 3.8vw, 4.5rem) 3.5rem;
  background: transparent;
}

.lol-view {
  --lol-bg: var(--lol-void);
  --lol-panel: var(--lol-obsidian);
  --lol-text: var(--lol-paper);
  --lol-muted: #948978;
  position: relative;
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 0 0 2.5rem;
  color: var(--lol-paper);
  font-family: Georgia, 'Songti SC', 'STSong', serif;
}

.lol-page-masthead {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 182px;
  padding: 3.2rem clamp(.25rem, 2vw, 2rem) 1.9rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(201, 165, 90, .35);
}

.lol-page-masthead::before,
.lol-page-masthead::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, rgba(201, 165, 90, .35) 21%, rgba(201, 165, 90, .84) 50%, rgba(201, 165, 90, .35) 79%, transparent);
}

.lol-page-masthead::after {
  right: 50%;
  left: auto;
  width: 10px;
  height: 10px;
  border: 1px solid var(--lol-gold);
  background: #17110f;
  box-shadow: 0 0 0 4px rgba(5, 7, 9, .82), 0 0 17px rgba(181, 42, 54, .6);
  transform: translate(50%, 50%) rotate(45deg);
}

.lol-page-masthead-copy {
  position: relative;
  z-index: 1;
  max-width: 660px;
  text-shadow: 0 2px 18px #020304;
}

.lol-page-kicker {
  margin: 0 0 .55rem;
  color: var(--lol-gold);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .2em;
}

.lol-page-masthead h1 {
  margin: 0;
  color: #e6d0a4;
  font-size: clamp(2rem, 4.2vw, 3.7rem);
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1.06;
}

.lol-page-subtitle {
  max-width: 37rem;
  margin: .85rem 0 0;
  color: #9a9185;
  font-size: .87rem;
  line-height: 1.85;
  letter-spacing: .08em;
}

.lol-page-masthead-mark {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 1.15rem 2rem 0;
  color: var(--lol-gold);
  opacity: .8;
}

.lol-page-masthead-mark i {
  display: block;
  width: clamp(3rem, 7vw, 7rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lol-gold));
}

.lol-page-masthead-mark i:last-child { background: linear-gradient(90deg, var(--lol-gold), transparent); }
.lol-page-masthead-mark span { font-size: 1.45rem; text-shadow: 0 0 14px rgba(201, 165, 90, .55); }

.lol-view-switch {
  position: relative;
  width: min(100%, 740px);
  margin: 1.65rem auto 1.5rem;
  padding: .28rem;
  border: 1px solid rgba(201, 165, 90, .42);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(21, 24, 28, .94), rgba(6, 8, 10, .94));
  box-shadow: inset 0 0 0 3px rgba(3, 5, 7, .8), 0 10px 26px rgba(0, 0, 0, .32);
}

.lol-view-switch::before,
.lol-view-switch::after {
  position: absolute;
  top: 50%;
  width: 3.5rem;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, rgba(201, 165, 90, .44));
}

.lol-view-switch::before { right: calc(100% + .55rem); }
.lol-view-switch::after { left: calc(100% + .55rem); transform: scaleX(-1); }

.lol-view-switch button {
  min-height: 42px;
  border-radius: 1px;
  color: #9c9182;
  font-family: inherit;
  letter-spacing: .08em;
}

.lol-view-switch button:hover { background: rgba(201, 165, 90, .08); color: #e9dcc6; }

.lol-view-switch button.active {
  border-color: rgba(194, 56, 67, .82);
  background: linear-gradient(105deg, #4b1018, #952734 50%, #4b1018);
  color: #f4e5ca;
  box-shadow: inset 0 1px 0 rgba(255, 228, 179, .22), 0 0 16px rgba(174, 36, 49, .24);
}

/* The later stages rebuild these panels; phase one only gives them a shared frame. */
.lol-hub,
.lol-guide-switcher,
.lol-guide-panel {
  border-color: rgba(201, 165, 90, .38);
  background-color: rgba(8, 11, 14, .8);
  box-shadow: inset 0 0 0 2px rgba(3, 5, 7, .7), 0 18px 44px rgba(0, 0, 0, .27);
}

.lol-hub {
  border-radius: 2px;
  background-image: linear-gradient(145deg, rgba(18, 20, 24, .88), rgba(6, 8, 10, .88));
}

.lol-guide-switcher {
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(21, 24, 28, .92), rgba(6, 8, 10, .92));
}

.lol-guide-switcher button { border-radius: 1px; font-family: inherit; }
.lol-guide-switcher button.active { background: linear-gradient(105deg, #4b1018, #952734 50%, #4b1018); color: #f4e5ca; }

/* Phase 2 — champion index and the desktop workbench. */
.lol-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr);
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.7rem);
}

.lol-index-section,
.lol-detail-stage {
  display: grid;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.lol-section-caption {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .65rem .25rem;
  color: #b9aa91;
  font-size: .82rem;
  letter-spacing: .08em;
}

.lol-section-caption b {
  color: #bd3d49;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 1.1rem;
  font-weight: 700;
}

.lol-section-caption::after {
  height: 1px;
  flex: 1;
  margin-left: .2rem;
  content: '';
  background: linear-gradient(90deg, rgba(201, 165, 90, .38), transparent);
}

.lol-index-section .lol-hub {
  height: 100%;
  box-sizing: border-box;
  padding: 1rem;
  overflow: visible;
  border: 1px solid rgba(201, 165, 90, .55);
  background:
    radial-gradient(circle at 100% 0, rgba(125, 27, 38, .14), transparent 31%),
    linear-gradient(145deg, rgba(19, 21, 25, .94), rgba(6, 8, 10, .94));
  box-shadow:
    inset 0 0 0 3px rgba(3, 5, 7, .78),
    inset 0 0 55px rgba(0, 0, 0, .38),
    0 16px 38px rgba(0, 0, 0, .34);
}

.lol-index-section .lol-hub::before {
  position: absolute;
  z-index: 0;
  inset: 7px;
  content: '';
  pointer-events: none;
  border: 1px solid rgba(201, 165, 90, .12);
}

.lol-index-section .lol-hub > * { position: relative; z-index: 1; }

.lol-hub-header {
  align-items: flex-end;
  gap: .75rem;
  margin-bottom: .8rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(201, 165, 90, .26);
}

.lol-hub-eyebrow {
  margin-bottom: .18rem;
  color: #aa8d54;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: .6rem;
  letter-spacing: .17em;
  text-shadow: none;
}

.lol-hub-title h2 {
  color: #e5d5b9;
  font-family: Georgia, 'Songti SC', serif;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: .04em;
}

.lol-hub-title p {
  margin-top: .2rem;
  color: #8c8275;
  font-family: system-ui, sans-serif;
  font-size: .72rem;
}

.lol-hub-source {
  gap: .36rem;
  padding: .32rem .55rem;
  border-color: rgba(201, 165, 90, .3);
  border-radius: 1px;
  background: rgba(4, 6, 8, .52);
  color: #a99c88;
  font-family: system-ui, sans-serif;
  font-size: .66rem;
}

.lol-hub-source:hover { border-color: var(--lol-gold); background: rgba(201, 165, 90, .08); color: #e4d1aa; }
.lol-hub-source-ico, .lol-hub-source-arrow { color: var(--lol-gold); }

.lol-index-section .lol-hub > .lol-hub-toolbar {
  position: relative;
  z-index: 2;
  gap: .5rem;
  margin-bottom: .8rem;
}

.lol-hub-search {
  min-width: 0;
  padding: .32rem .62rem;
  border-color: rgba(201, 165, 90, .32);
  border-radius: 2px;
  background: rgba(4, 6, 8, .7);
}

.lol-hub-search:focus-within {
  border-color: var(--lol-gold);
  background: rgba(8, 11, 14, .96);
  box-shadow: 0 0 0 2px rgba(201, 165, 90, .11);
}

.lol-hub-search-ico { color: #b59a65; font-size: 1rem; }
.lol-hub-search input { color: #e3d4bb; font-family: system-ui, sans-serif; font-size: .75rem; }
.lol-hub-search input::placeholder { color: #726b62; }
.lol-hub-actions { gap: .35rem; }

.lol-hub-drop-btn {
  gap: .32rem;
  padding: .38rem .55rem;
  border-color: rgba(201, 165, 90, .3);
  border-radius: 2px;
  background: rgba(4, 6, 8, .7);
  color: #b4a895;
  font-family: system-ui, sans-serif;
  font-size: .7rem;
}

.lol-hub-drop-btn:hover { border-color: rgba(201, 165, 90, .76); color: #e5d4b8; }
.lol-hub-drop-btn.open { border-color: #a63843; background: rgba(135, 29, 40, .2); color: #ecd5b5; box-shadow: 0 0 0 2px rgba(166, 56, 67, .14); }
.lol-hub-drop-ico { color: #c7a359; }
.lol-hub-drop-value { padding: .07rem .3rem; border-radius: 1px; background: rgba(147, 35, 46, .21); color: #d8af9e; font-size: .64rem; }

.lol-hub-drop-panel {
  z-index: 10;
  min-width: 160px;
  border-color: rgba(201, 165, 90, .42);
  border-radius: 2px;
  background: linear-gradient(155deg, #1b1c20, #090b0e);
}

.lol-hub-drop-title { color: #9c8d77; font-family: system-ui, sans-serif; }
.lol-hub-drop-option { border-radius: 1px; color: #b1a797; font-family: system-ui, sans-serif; font-size: .76rem; }
.lol-hub-drop-option:hover { color: #e6d6b9; background: rgba(201, 165, 90, .08); }
.lol-hub-drop-option.active { color: #e5bd8c; background: rgba(150, 34, 45, .17); }
.lol-hub-drop-option.active::after { color: #d07968; }
.lol-hub-count { background: rgba(201, 165, 90, .12); color: #cbb27e; }

.lol-hub-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .52rem;
}

.lol-hero-card {
  min-height: 92px;
  border-color: rgba(201, 165, 90, .33);
  border-radius: 2px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--hub-tone, #b48a4d) 12%, transparent), transparent 52%),
    linear-gradient(145deg, rgba(24, 25, 28, .96), rgba(8, 10, 13, .98));
  box-shadow: inset 0 0 0 2px rgba(3, 5, 7, .66), 0 5px 12px rgba(0, 0, 0, .16);
}

.lol-hero-card::before {
  position: absolute;
  inset: 4px;
  content: '';
  pointer-events: none;
  border: 1px solid rgba(201, 165, 90, .1);
}

.lol-hero-card:hover {
  border-color: color-mix(in srgb, var(--hub-tone, var(--lol-gold)) 65%, #d2b37a);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px rgba(3, 5, 7, .66), 0 11px 20px rgba(0, 0, 0, .33), 0 0 15px color-mix(in srgb, var(--hub-tone) 15%, transparent);
}

.lol-hero-card-btn {
  grid-template-columns: 43px minmax(0, 1fr) auto;
  gap: .18rem .42rem;
  min-height: 92px;
  padding: .58rem .5rem;
}

.lol-hero-card-avatar { width: 43px; height: 43px; }
.lol-hero-card-avatar img {
  border: 1px solid color-mix(in srgb, var(--hub-tone, var(--lol-gold)) 70%, #d9c28d);
  box-shadow: 0 0 0 2px #0a0c0f, 0 0 12px color-mix(in srgb, var(--hub-tone) 21%, transparent);
}

.lol-hero-card-info strong {
  overflow: hidden;
  color: #e5dac7;
  font-family: Georgia, 'Songti SC', serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lol-hero-card-info em {
  width: fit-content;
  max-width: 100%;
  margin-top: .15rem;
  padding: .08rem .25rem;
  border-color: color-mix(in srgb, var(--hub-tone) 35%, transparent);
  border-radius: 1px;
  background: color-mix(in srgb, var(--hub-tone) 9%, transparent);
  color: color-mix(in srgb, var(--hub-tone) 66%, #e8d7b9);
  font-size: .52rem;
}

.lol-hero-card-wr { margin-top: .14rem; color: #76b98e; font-family: system-ui, sans-serif; font-size: .58rem; }
.lol-hero-card-arrow { align-self: end; color: #c8a761; font-size: .78rem; }

.lol-hub-empty { margin: 1rem 0 .2rem; color: #c69d75; font-family: system-ui, sans-serif; font-size: .78rem; text-align: center; }
.lol-hub-tip { margin-top: .65rem; color: #766e64; font-family: system-ui, sans-serif; font-size: .64rem; }

.lol-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  margin: 1rem auto .1rem;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

.lol-pagination button {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border: 1px solid rgba(201, 165, 90, .28);
  border-radius: 1px;
  background: rgba(4, 6, 8, .7);
  color: #928574;
  font: inherit;
  font-size: .67rem;
  cursor: pointer;
}

.lol-pagination button:hover:not(:disabled) { border-color: var(--lol-gold); background: rgba(201, 165, 90, .1); color: #eddbba; }
.lol-pagination button.active { border-color: #ad3c47; background: linear-gradient(145deg, #7d202b, #421017); color: #f4ddba; box-shadow: inset 0 1px rgba(255, 231, 191, .18); }
.lol-pagination button:disabled { opacity: .32; cursor: not-allowed; }
.lol-pagination-gap { color: #756a5e; }

.lol-detail-stage { position: sticky; top: 1.15rem; }

.lol-detail-panel {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(201, 165, 90, .52);
  border-radius: 2px;
  background:
    radial-gradient(circle at 100% 0, rgba(146, 29, 42, .18), transparent 29%),
    linear-gradient(145deg, rgba(19, 21, 25, .96), rgba(6, 8, 10, .98));
  box-shadow: inset 0 0 0 3px rgba(3, 5, 7, .78), inset 0 0 58px rgba(0, 0, 0, .4), 0 16px 38px rgba(0, 0, 0, .3);
}

.lol-detail-panel::before {
  position: absolute;
  z-index: 0;
  inset: 7px;
  content: '';
  pointer-events: none;
  border: 1px solid rgba(201, 165, 90, .11);
}

.lol-detail-content { position: relative; z-index: 1; display: flex; height: 100%; min-height: 0; box-sizing: border-box; flex-direction: column; padding: 1rem; }
.lol-detail-content[hidden] { display: none; }

.lol-detail-header {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: .78rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(201, 165, 90, .25);
}

.lol-detail-portrait {
  width: 74px;
  height: 74px;
  border: 1px solid var(--hub-tone, var(--lol-gold));
  border-radius: 2px;
  background: #0a0c0f;
  box-shadow: 0 0 0 3px #090b0e, 0 0 19px color-mix(in srgb, var(--hub-tone) 23%, transparent);
  object-fit: cover;
}

.lol-detail-headcopy { min-width: 0; }
.lol-detail-kicker { display: inline-block; padding: .14rem .4rem; border: 1px solid rgba(175, 55, 66, .43); border-radius: 1px; background: rgba(139, 28, 40, .17); color: #d7a491; font-family: system-ui, sans-serif; font-size: .64rem; }
.lol-detail-headcopy h2 { margin: .3rem 0 0; color: #e9ddc7; font-family: Georgia, 'Songti SC', serif; font-size: 1.68rem; font-weight: 600; letter-spacing: .05em; line-height: 1; }
.lol-detail-headcopy p { margin: .38rem 0 0; overflow: hidden; color: #928779; font-family: system-ui, sans-serif; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }

.lol-detail-stats {
  display: flex;
  grid-column: 1 / -1;
  gap: .4rem;
  margin: 0;
}

.lol-detail-stats div { flex: 1; padding: .44rem .56rem; border: 1px solid rgba(201, 165, 90, .18); background: rgba(4, 6, 8, .52); }
.lol-detail-stats dt { color: #82796e; font-family: system-ui, sans-serif; font-size: .64rem; }
.lol-detail-stats dd { margin: .15rem 0 0; color: #e1c57f; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .86rem; font-weight: 700; }

.lol-detail-augs { display: flex; min-height: 0; flex: 1; flex-direction: column; margin-top: .8rem; }
.lol-detail-augs-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.lol-detail-augs-title h3 { margin: 0; color: #c8a65e; font-family: Georgia, 'Songti SC', serif; font-size: .98rem; font-weight: 600; letter-spacing: .09em; }
.lol-detail-augs-title span { padding: .12rem .36rem; border: 1px solid rgba(177, 56, 67, .44); border-radius: 1px; background: rgba(151, 28, 40, .15); color: #cc927e; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .6rem; }

.lol-detail-page-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin-bottom: .55rem; }
.lol-detail-page-tabs button { display: flex; align-items: baseline; justify-content: center; gap: .34rem; min-height: 34px; padding: .34rem .5rem; border: 1px solid rgba(201, 165, 90, .24); border-radius: 1px; background: rgba(4, 6, 8, .58); color: #a99b84; font-family: Georgia, 'Songti SC', serif; font-size: .7rem; cursor: pointer; }
.lol-detail-page-tabs button small { color: #8f6e3e; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .54rem; }
.lol-detail-page-tabs button:hover { border-color: rgba(201, 165, 90, .55); color: #dfc99f; }
.lol-detail-page-tabs button.active { border-color: rgba(174, 54, 65, .76); background: linear-gradient(105deg, rgba(86, 18, 28, .8), rgba(129, 30, 42, .54)); color: #f0d5ad; box-shadow: inset 0 1px rgba(255, 235, 203, .12); }
.lol-detail-page-tabs button.active small { color: #e2a87c; }
.lol-detail-aug-page { min-height: 0; flex: 1; overflow-y: auto; padding-right: .18rem; scrollbar-width: thin; scrollbar-color: #71502d #090b0e; }
.lol-detail-aug-page::-webkit-scrollbar { width: 5px; }
.lol-detail-aug-page::-webkit-scrollbar-thumb { background: #71502d; }
.lol-detail-aug-page::-webkit-scrollbar-track { background: #090b0e; }
.lol-detail-aug-page[hidden] { display: none; }
.lol-detail-aug-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .52rem; }
.lol-detail-aug-column { min-width: 0; padding: .5rem; border: 1px solid rgba(201, 165, 90, .25); background: rgba(7, 9, 12, .68); }
.lol-detail-aug-column:nth-child(4) { border-color: rgba(177, 53, 65, .58); background: linear-gradient(145deg, rgba(88, 17, 26, .18), rgba(7, 9, 12, .75)); }
.lol-detail-aug-column h4 { margin: 0 0 .48rem; color: #bda77c; font-family: Georgia, 'Songti SC', serif; font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-align: center; }
.lol-detail-aug-list { display: flex; flex-direction: column; gap: .34rem; }
.lol-detail-aug-item { min-width: 0; padding: .36rem; border-bottom: 1px solid rgba(201, 165, 90, .11); }
.lol-detail-aug-item:last-child { border-bottom: 0; }
.lol-detail-aug-name { display: flex; flex-wrap: wrap; gap: .12rem; }
.lol-detail-aug-name em { padding: .1rem .19rem; border: 1px solid color-mix(in srgb, var(--hub-tone) 30%, transparent); border-radius: 1px; background: color-mix(in srgb, var(--hub-tone) 8%, transparent); color: #cfc1aa; font-family: system-ui, sans-serif; font-size: .58rem; font-style: normal; line-height: 1.25; }
.lol-detail-aug-item strong { display: block; margin-top: .24rem; color: #d5b36d; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .73rem; }
.lol-detail-aug-item p {
  display: block;
  margin: .2rem 0 0;
  color: #787269;
  font-family: system-ui, sans-serif;
  font-size: .58rem;
  line-height: 1.42;
}
.lol-detail-no-data { margin: .75rem 0 .2rem; color: #7d756a; font-family: system-ui, sans-serif; font-size: .7rem; text-align: center; }
.lol-detail-no-data-full { padding: 1.3rem 0; border: 1px dashed rgba(201, 165, 90, .19); }
.lol-detail-pager { display: flex; align-items: center; justify-content: space-between; gap: .45rem; margin-top: .62rem; padding-top: .55rem; border-top: 1px solid rgba(201, 165, 90, .15); }
.lol-detail-pager button { padding: .3rem .46rem; border: 1px solid rgba(201, 165, 90, .25); border-radius: 1px; background: rgba(4, 6, 8, .48); color: #b8a481; font-family: system-ui, sans-serif; font-size: .62rem; cursor: pointer; }
.lol-detail-pager button:hover:not(:disabled) { border-color: rgba(201, 165, 90, .65); color: #ebd7b2; background: rgba(201, 165, 90, .08); }
.lol-detail-pager button:disabled { opacity: .35; cursor: default; }
.lol-detail-pager span { color: #887b69; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .58rem; }
.lol-detail-foot { flex: 0 0 auto; margin-top: .8rem; padding-top: .58rem; border-top: 1px solid rgba(201, 165, 90, .17); color: #6f6961; font-family: system-ui, sans-serif; font-size: .64rem; text-align: center; }

.lol-hero-card.is-selected { border-color: var(--hub-tone, var(--lol-gold)); box-shadow: inset 0 0 0 2px rgba(3, 5, 7, .66), inset 3px 0 var(--hub-tone, var(--lol-gold)), 0 0 15px color-mix(in srgb, var(--hub-tone) 16%, transparent); }
.lol-hero-card.is-selected .lol-hero-card-arrow { opacity: 1; transform: translate(1px, -1px); }

/* Formula panel follows the two-column workbench as a full-width second row. */
.lol-detail-stage { position: static; }
.lol-formula-section { min-width: 0; margin-top: 1.2rem; }

.lol-formula-frame {
  position: relative;
  overflow: hidden;
  padding: .55rem;
  border: 1px solid rgba(201, 165, 90, .48);
  border-radius: 2px;
  background:
    radial-gradient(circle at 0 0, rgba(142, 30, 42, .14), transparent 30%),
    linear-gradient(145deg, rgba(19, 21, 25, .95), rgba(6, 8, 10, .98));
  box-shadow: inset 0 0 0 3px rgba(3, 5, 7, .78), inset 0 0 42px rgba(0, 0, 0, .35), 0 14px 34px rgba(0, 0, 0, .25);
}

.lol-formula-frame::before {
  position: absolute;
  z-index: 0;
  inset: 6px;
  content: '';
  pointer-events: none;
  border: 1px solid rgba(201, 165, 90, .1);
}

.lol-formula-frame > * { position: relative; z-index: 1; }

.lol-formula-frame .lol-guide-switcher {
  width: 100%;
  margin: 0 0 .65rem;
  padding: .2rem;
  border-color: rgba(201, 165, 90, .28);
  box-shadow: inset 0 0 0 2px rgba(3, 5, 7, .7);
}

.lol-formula-frame .lol-guide-switcher button {
  min-height: 40px;
  gap: .18rem;
  padding: .25rem .15rem;
  font-family: Georgia, 'Songti SC', serif;
}

.lol-formula-frame .lol-guide-switcher span { color: #bb9557; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .56rem; }
.lol-formula-frame .lol-guide-switcher strong { font-size: .74rem; font-weight: 600; line-height: 1.1; }
.lol-formula-frame .lol-guide-switcher button.active { border-color: rgba(177, 52, 64, .8); background: linear-gradient(105deg, #4b1018, #8c2330 50%, #4b1018); }
.lol-formula-frame .lol-guide-switcher button.active span { color: #e6bb78; }

.lol-formula-frame .lol-guide-panel {
  max-height: none;
  overflow: visible;
  padding: .1rem;
  scrollbar-color: #6d4b29 #0b0d10;
  scrollbar-width: thin;
}

.lol-formula-frame .lol-guide-panel::-webkit-scrollbar { width: 6px; }
.lol-formula-frame .lol-guide-panel::-webkit-scrollbar-thumb { background: #6d4b29; }
.lol-formula-frame .lol-guide-panel::-webkit-scrollbar-track { background: #0b0d10; }

.lol-formula-frame .lol-hero {
  margin: 0 0 .55rem;
  padding: .75rem .6rem .62rem;
  border: 1px solid rgba(201, 165, 90, .31);
  border-radius: 2px;
  background: linear-gradient(120deg, rgba(91, 23, 33, .19), rgba(8, 10, 13, .5));
  box-shadow: inset 0 0 0 2px rgba(3, 5, 7, .58);
}

.lol-formula-frame .lol-hero::before,
.lol-formula-frame .lol-hero::after { display: none; }
.lol-formula-frame .lol-hero h1 { color: #e4d1ad; font-family: Georgia, 'Songti SC', serif; font-size: 1.25rem; font-weight: 600; letter-spacing: .04em; }
.lol-formula-frame .lol-hero p { margin-top: .28rem; color: #b99860; font-family: system-ui, sans-serif; font-size: .72rem; line-height: 1.5; }
.lol-formula-frame .lol-source { margin-top: .4rem; padding: .14rem .32rem; border-color: rgba(201, 165, 90, .25); border-radius: 1px; color: #a99676; font-family: system-ui, sans-serif; font-size: .64rem; }

.lol-formula-frame .lol-mage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-bottom: .4rem; }
.lol-formula-frame .lol-build,
.lol-formula-frame .lol-rules,
.lol-formula-frame .lol-adc-card {
  margin-bottom: .45rem;
  padding: .68rem;
  border: 1px solid rgba(201, 165, 90, .27);
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(22, 23, 27, .92), rgba(8, 10, 13, .91));
  box-shadow: inset 0 0 0 2px rgba(3, 5, 7, .56);
}

.lol-formula-frame .lol-build::before,
.lol-formula-frame .lol-rules::before,
.lol-formula-frame .lol-adc-card::before { display: none; }
.lol-formula-frame .lol-mage-guide .lol-build { padding: .5rem; }
.lol-formula-frame .lol-build-heading { display: block; margin-bottom: .42rem; }
.lol-formula-frame .lol-build-heading h2,
.lol-formula-frame .lol-rules h2,
.lol-formula-frame .lol-adc-heading h2 { color: #d9c7a8; font-family: Georgia, 'Songti SC', serif; font-size: .94rem; font-weight: 600; }
.lol-formula-frame .lol-build-heading span,
.lol-formula-frame .lol-adc-heading > span { display: block; margin-top: .12rem; color: #b03d48; font-family: system-ui, sans-serif; font-size: .62rem; }
.lol-formula-frame .lol-row { grid-template-columns: 1fr; gap: .3rem; padding: .42rem 0; }
.lol-formula-frame .lol-row-label { padding-top: 0; color: #968871; font-family: system-ui, sans-serif; font-size: .66rem; }
.lol-formula-frame .lol-picks { gap: .35rem; }
.lol-formula-frame .lol-pick { width: 42px; }
.lol-formula-frame .lol-pick img { width: 39px; height: 39px; border-width: 1px; border-radius: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.lol-formula-frame .lol-pick figcaption { margin-top: .16rem; color: #968b7c; font-family: system-ui, sans-serif; font-size: .54rem; line-height: 1.2; }
.lol-formula-frame .lol-join { margin: 0 -.1rem .5rem; color: #b99559; font-size: .82rem; }

.lol-formula-frame .lol-rules { margin-bottom: 0; }
.lol-formula-frame .lol-rules h2 { margin: 0 0 .35rem; }
.lol-formula-frame .lol-rules ul { margin: 0; padding: 0; }
.lol-formula-frame .lol-rules li { margin: .26rem 0; padding-left: .72rem; color: #988e80; font-family: system-ui, sans-serif; font-size: .65rem; line-height: 1.48; }
.lol-formula-frame .lol-rules li::before { color: #b88e52; font-size: .56rem; }
.lol-formula-frame .lol-special { margin-top: .45rem; padding-top: .45rem; border-top-color: rgba(201, 165, 90, .16); }
.lol-formula-frame .lol-special h3 { color: #c6a664; font-size: .73rem; }

.lol-formula-frame .lol-formula-steps,
.lol-formula-frame .lol-branch-grid,
.lol-formula-frame .lol-later-grid,
.lol-formula-frame .lol-assassin-grid { gap: .38rem; }
.lol-formula-frame .lol-formula-step,
.lol-formula-frame .lol-branch-card,
.lol-formula-frame .lol-later-group,
.lol-formula-frame .lol-assassin-card { padding: .56rem; border-color: rgba(201, 165, 90, .25); border-radius: 2px; background: rgba(7, 9, 12, .63); }
.lol-formula-frame .lol-step-topline { gap: .35rem; }
.lol-formula-frame .lol-step-number { width: 1.55rem; height: 1.55rem; border-radius: 1px; font-size: .72rem; }
.lol-formula-frame .lol-step-topline h3,
.lol-formula-frame .lol-branch-card h3,
.lol-formula-frame .lol-later-group h3 { color: #ddc9a6; font-family: Georgia, 'Songti SC', serif; font-size: .78rem; }
.lol-formula-frame .lol-step-topline strong,
.lol-formula-frame .lol-formula-step > p,
.lol-formula-frame .lol-branch-card > p,
.lol-formula-frame .lol-later-group > p { color: #968a79; font-family: system-ui, sans-serif; font-size: .64rem; line-height: 1.48; }
.lol-formula-frame .lol-formula-step > p,
.lol-formula-frame .lol-branch-card > p,
.lol-formula-frame .lol-later-group > p { margin: .35rem 0; }
.lol-formula-frame .lol-adc-picks .lol-pick { width: 42px; }
.lol-formula-frame .lol-adc-picks .lol-pick img { width: 39px; height: 39px; border-radius: 2px; }
.lol-formula-frame .lol-adc-picks .lol-pick small { display: none; }
.lol-formula-frame .lol-assassin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lol-formula-frame .lol-assassin-card > header { gap: .35rem; }
.lol-formula-frame .lol-assassin-card > header > img { width: 36px; height: 36px; border-width: 1px; border-radius: 2px; }
.lol-formula-frame .lol-assassin-card h3 { font-size: .76rem; }
.lol-formula-frame .lol-assassin-card header p { font-size: .6rem; }
.lol-formula-frame .lol-assassin-line { grid-template-columns: 32px minmax(0, 1fr); gap: .32rem; }
.lol-formula-frame .lol-assassin-line > span { padding-top: .18rem; font-size: .62rem; }
.lol-formula-frame .lol-assassin-picks .lol-pick { width: 38px; }
.lol-formula-frame .lol-assassin-picks .lol-pick img { width: 35px; height: 35px; }

@media (max-width: 1180px) {
  .lol-workbench { grid-template-columns: minmax(0, 1fr) minmax(370px, .88fr); gap: 1rem; }
  .lol-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lol-detail-aug-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lol-formula-frame .lol-mage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .game-site-lol .game-sidebar {
    width: min(80vw, 260px);
    padding: 1.1rem .8rem;
    transform: translateX(-100%);
  }
  .game-site-lol .game-sidebar.open { transform: translateX(0); }
  .game-site-lol .game-brand { justify-content: flex-start; padding: .5rem .45rem 1.2rem; }
  .game-site-lol .game-brand > div,
  .game-site-lol .game-brand .game-menu-close,
  .game-site-lol .game-nav-item > span:last-child,
  .game-site-lol .game-sidebar-note { display: block; }
  .game-site-lol .game-brand .game-menu-close { display: grid; }
  .game-site-lol .game-nav { gap: .45rem; padding-top: 1rem; }
  .game-site-lol .game-nav-item { justify-content: flex-start; padding: .7rem; border-radius: 8px; }
  .game-site-lol .game-nav-item::after { display: none; }
  .game-site-lol .game-nav-icon { width: 2rem; height: 2rem; border: 0; border-radius: 6px; }
  .game-site-lol .game-menu-toggle {
    position: fixed;
    top: .7rem;
    left: .7rem;
    z-index: 18;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border: 1px solid rgba(201, 165, 90, .46);
    border-radius: 2px;
    background: #16191d;
    color: #e9dcc6;
  }
  .game-site-lol .game-menu-backdrop.open { position: fixed; z-index: 19; inset: 0; display: block; background: rgba(0, 0, 0, .62); }
  .game-site-lol .game-main { margin-left: 0; padding: 0 .85rem 2.2rem; }
  .lol-page-masthead { min-height: 162px; padding: 2.5rem .35rem 1.65rem; }
  .lol-page-masthead-mark { display: none; }
  .lol-page-masthead h1 { max-width: 18rem; font-size: clamp(1.75rem, 9vw, 2.6rem); }
  .lol-page-subtitle { max-width: 27rem; font-size: .78rem; line-height: 1.7; }
  .lol-view-switch { width: 100%; margin: 1.1rem auto 1rem; }
  .lol-view-switch::before, .lol-view-switch::after { display: none; }
  .lol-workbench { display: block; }
  .lol-index-section { display: block; }
  .lol-section-caption { margin-left: 0; font-size: .75rem; }
  .lol-index-section .lol-hub { padding: .75rem; }
  .lol-hub-header { align-items: center; gap: .55rem; flex-wrap: wrap; }
  .lol-hub-title { flex: 1 1 auto; min-width: 0; }
  .lol-hub-source { align-self: center; }
  .lol-hub-toolbar { align-items: stretch; }
  .lol-hub-search { width: 100%; }
  .lol-hub-actions { align-self: flex-end; }
  .lol-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .48rem; }
  .lol-hero-card, .lol-hero-card-btn { min-height: 84px; }
  .lol-hero-card-btn { grid-template-columns: 40px minmax(0, 1fr); padding: .5rem; }
  .lol-hero-card-avatar { width: 40px; height: 40px; }
  .lol-hero-card-arrow { display: none; }
  .lol-detail-stage { position: static; display: block; margin-top: 1.1rem; }
  .lol-detail-panel { overflow: visible; }
  .lol-detail-content { padding: .8rem; }
  .lol-detail-aug-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lol-detail-aug-item p { font-size: .64rem; }
  .lol-formula-frame .lol-guide-panel { max-height: none; overflow: visible; }
  .lol-formula-frame .lol-mage-grid { grid-template-columns: 1fr; }
  .lol-formula-frame .lol-mage-guide .lol-build { padding: .65rem; }
  .lol-formula-frame .lol-pick { width: 42px; }
  .lol-formula-frame .lol-pick img { width: 39px; height: 39px; }
}