@import url("https://fonts.googleapis.com/css2?family=Anton&family=Barlow:wght@500;600;700&display=swap");

/* Battle-royale lobby: bright blue sky, storm wall, yellow PLAY buttons, rarity colours. */
:root[data-theme="fortnite"] {
  --hub-bg: #0a1b4d;
  --hub-bg-elevated: #10287a;
  --hub-fg: #ffffff;
  --hub-fg-muted: #a9c3ff;
  --hub-accent: #ffe600;
  --hub-accent-fg: #14142b;
  --hub-danger: #ff3d5a;
  --hub-border: #2b57c9;
  --hub-font: "Barlow", "Segoe UI", system-ui, sans-serif;
  --hub-radius: 3px;
  --fn-display: "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --fn-ink: #0b1d55;
  --fn-common: #b1b1b1;
  --fn-uncommon: #69bb1e;
  --fn-rare: #49c2ff;
  --fn-epic: #c359ff;
  --fn-legendary: #ff9b3d;
  --fn-mythic: #ffd84a;
  color-scheme: dark;
}

html[data-theme="fortnite"] body {
  margin: 0;
  font-family: var(--hub-font);
  font-weight: 500;
  background-color: var(--hub-bg);
  color: var(--hub-fg);
  background-image: linear-gradient(170deg, #1c5fd6 0%, #0f3a9e 45%, #0a1b4d 100%);
  background-attachment: fixed;
}

/* Hub pages (not apps): full lobby sky with the storm closing in at the bottom. */
html[data-theme="fortnite"] body:not(.hub-chrome-hosted) {
  background-image:
    url("assets/storm.svg"),
    radial-gradient(ellipse 70% 55% at 50% 18%, #5bb5ff 0%, rgba(91, 181, 255, 0) 70%),
    linear-gradient(180deg, #2a7af0 0%, #1550c4 45%, #0d2f86 100%);
  background-size: 100% 220px, auto, auto;
  background-position: bottom center, center, center;
  background-repeat: no-repeat;
}

html[data-theme="fortnite"] h1,
html[data-theme="fortnite"] h2,
html[data-theme="fortnite"] h3,
html[data-theme="fortnite"] .hub-brand,
html[data-theme="fortnite"] .hub-btn,
html[data-theme="fortnite"] .hub-sidebar-title {
  font-family: var(--fn-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

html[data-theme="fortnite"] h1,
html[data-theme="fortnite"] h2 {
  text-shadow: 0 3px 0 var(--fn-ink);
}

html[data-theme="fortnite"] .hub-topbar {
  background: linear-gradient(180deg, rgba(8, 20, 66, 0.95), rgba(12, 34, 104, 0.92));
  border-bottom: 3px solid var(--fn-ink);
}

html[data-theme="fortnite"] .hub-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.45rem;
  color: #fff;
  text-shadow:
    0 3px 0 var(--fn-ink),
    2px 0 0 var(--fn-ink),
    -2px 0 0 var(--fn-ink),
    0 -2px 0 var(--fn-ink);
}

html[data-theme="fortnite"] .hub-brand::before {
  content: "";
  width: 1.6rem;
  height: 1.85rem;
  background: url("assets/llama.svg") center / contain no-repeat;
}

html[data-theme="fortnite"] .hub-user {
  font-weight: 700;
  color: #fff;
}

/* Item-shop cards: dark blue tile with a clipped corner. */
html[data-theme="fortnite"] .hub-card {
  background: linear-gradient(160deg, rgba(20, 58, 160, 0.94), rgba(10, 30, 92, 0.94));
  border: 3px solid var(--fn-ink);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

/* Yellow PLAY button. */
html[data-theme="fortnite"] .hub-btn {
  background: linear-gradient(180deg, #fff35c, #ffe600 55%, #f5c800);
  color: var(--hub-accent-fg);
  border: 3px solid var(--fn-ink);
  border-radius: 0;
  font-size: 1.05rem;
  padding: 0.4rem 1.1rem;
  transform: skewX(-8deg);
  box-shadow: 0 4px 0 var(--fn-ink);
  transition: transform 0.08s ease, filter 0.08s ease;
}

html[data-theme="fortnite"] .hub-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: skewX(-8deg) translateY(-2px);
}

html[data-theme="fortnite"] .hub-btn:active:not(:disabled) {
  transform: skewX(-8deg) translateY(2px);
  box-shadow: 0 1px 0 var(--fn-ink);
}

html[data-theme="fortnite"] .hub-btn.secondary {
  background: linear-gradient(180deg, #3d7bff, #2052d4);
  color: #fff;
  border-color: var(--fn-ink);
}

html[data-theme="fortnite"] .hub-btn.danger {
  background: linear-gradient(180deg, #ff6b80, #e0233f);
  color: #fff;
}

html[data-theme="fortnite"] .hub-nav-toggle,
html[data-theme="fortnite"] .hub-cover-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 0;
  font-weight: 700;
}

html[data-theme="fortnite"] input:not([type]),
html[data-theme="fortnite"] input[type="text"],
html[data-theme="fortnite"] input[type="password"],
html[data-theme="fortnite"] select {
  background: rgba(5, 14, 46, 0.85);
  border: 2px solid #3d6ce0;
  border-radius: 0;
  font-weight: 600;
}

html[data-theme="fortnite"] input:not([type]):focus,
html[data-theme="fortnite"] input[type="text"]:focus,
html[data-theme="fortnite"] input[type="password"]:focus,
html[data-theme="fortnite"] select:focus {
  outline: none;
  border-color: var(--hub-accent);
  box-shadow: 0 0 0 2px rgba(255, 230, 0, 0.35);
}

/* Sidebar: locker list. Each slot gets a rarity colour in turn. */
html[data-theme="fortnite"] .hub-sidebar {
  background: rgba(8, 22, 70, 0.94);
  border-right: 3px solid var(--fn-ink);
}

html[data-theme="fortnite"] .hub-sidebar-title {
  color: #fff;
  font-size: 1.05rem;
}

html[data-theme="fortnite"] .hub-menu {
  gap: 0.4rem;
}

html[data-theme="fortnite"] .hub-menu a {
  --rarity: var(--fn-common);
  color: #fff;
  font-weight: 700;
  border-radius: 0;
  border-left: 5px solid var(--rarity);
  background: linear-gradient(90deg, color-mix(in srgb, var(--rarity) 28%, transparent), transparent 85%);
}

html[data-theme="fortnite"] .hub-menu a:nth-child(5n + 2) { --rarity: var(--fn-uncommon); }
html[data-theme="fortnite"] .hub-menu a:nth-child(5n + 3) { --rarity: var(--fn-rare); }
html[data-theme="fortnite"] .hub-menu a:nth-child(5n + 4) { --rarity: var(--fn-epic); }
html[data-theme="fortnite"] .hub-menu a:nth-child(5n + 5) { --rarity: var(--fn-legendary); }

html[data-theme="fortnite"] .hub-menu a:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--rarity) 50%, transparent), transparent 95%);
}

html[data-theme="fortnite"] .hub-menu a[aria-current="page"] {
  color: var(--hub-accent-fg);
  background: linear-gradient(90deg, var(--fn-mythic), #ffb800);
  border-left-color: #fff;
}

html[data-theme="fortnite"] .hub-menu a:focus-visible {
  box-shadow: 0 0 0 2px var(--fn-ink), 0 0 0 4px var(--hub-accent);
}

/* V-Bucks style badge. */
html[data-theme="fortnite"] .hub-nav-badge {
  background: radial-gradient(circle at 35% 30%, #9fe3ff, #2a8cff 70%);
  color: #fff;
  border: 2px solid var(--fn-ink);
  text-shadow: 0 1px 0 var(--fn-ink);
}

html[data-theme="fortnite"] .hub-nav-dot {
  background: var(--hub-accent);
  box-shadow: 0 0 0 2px var(--fn-ink);
}

html[data-theme="fortnite"] .hub-table th {
  font-family: var(--fn-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hub-accent);
}

html[data-theme="fortnite"] .hub-table th,
html[data-theme="fortnite"] .hub-table td {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="fortnite"] a {
  color: #7fd4ff;
}

/* Quest-complete toast. */
html[data-theme="fortnite"] .hub-toast {
  background: linear-gradient(90deg, #1a3fa8, #10287a);
  border: 3px solid var(--fn-ink);
  border-left: 8px solid var(--hub-accent);
  border-radius: 0;
  font-weight: 700;
}

html[data-theme="fortnite"] .hub-toast::before {
  content: "Quest update";
  display: block;
  font-family: var(--fn-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hub-accent);
  font-size: 0.85rem;
}

/* Login: legendary-rarity card with the llama waiting next to it. */
html[data-theme="fortnite"] .hub-login {
  position: relative;
  margin-top: 7rem;
  overflow: visible;
  background: linear-gradient(160deg, rgba(255, 155, 61, 0.35), rgba(20, 58, 160, 0.95) 40%);
  border-color: var(--fn-legendary);
}

html[data-theme="fortnite"] .hub-login h1 {
  font-size: 2.6rem;
  line-height: 1;
  margin: 0.2rem 0 0.6rem;
  color: var(--fn-mythic);
  text-shadow:
    0 4px 0 #8a4a00,
    3px 0 0 var(--fn-ink),
    -3px 0 0 var(--fn-ink),
    0 -3px 0 var(--fn-ink),
    0 7px 0 var(--fn-ink);
}

html[data-theme="fortnite"] .hub-login .hub-btn {
  width: 100%;
  font-size: 1.4rem;
}

html[data-theme="fortnite"] .hub-login {
  clip-path: none;
}

/* Loot llama standing on top of the login card. */
html[data-theme="fortnite"] .hub-login::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: -94px;
  width: 80px;
  height: 94px;
  background: url("assets/llama.svg") center bottom / contain no-repeat;
  pointer-events: none;
}