/* Palette notes:
   - ocean/grass sampled directly from the Reload map texture (#103a8c, #267215/#318218)
   - rarity colors are the standard Fortnite set used by fortnite-api and tracker sites
   - UI chrome follows Fortnite's flat dark-navy menus with bright yellow CTAs
   - no gradient blends anywhere: flat fills, hard offset shadows, clip-path angles */
:root {
  --ocean: #103a8c;
  --ocean-deep: #0d2f73;
  --ink: #101423;
  --panel: #191e2e;
  --panel-2: #232a3f;
  --line: #3a4258;
  --text: #ffffff;
  --muted: #a8b0c4;
  --yellow: #fff200;
  --gold: #fbd444;
  --gold-deep: #b8860b;
  --mythic: #fbd444;
  --legendary: #ea8d23;
  --epic: #c359ff;
  --rare: #41bfff;
  --uncommon: #87e339;
  --common: #b1b1b1;
  --storm: #b04df9;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: var(--ink);
  color: var(--text);
  overflow: hidden;
}

.lobby-title, .play-btn span, .poi-label, .panel-head h2,
.victory-title, .victory-hash, .rarity-pill, .lobby-eyebrow,
.spot-name, .chest-btn span, .aisle-name {
  font-family: Anton, Inter, sans-serif;
  letter-spacing: 0.04em;
}

.ico { width: 1.05em; height: 1.05em; vertical-align: -0.18em; }

/* AH banner emblem — the site logo, reused across screens */
.brand-emblem { display: block; width: 56px; height: 56px; }
.boot-brand { width: 88px; height: 88px; }
.load-brand { width: 58px; height: 58px; margin-bottom: .5rem; }
.lobby-brand { position: absolute; top: 1rem; left: 1.1rem; z-index: 3; width: 74px; height: 74px; }
.hud-brand {
  position: absolute; top: .8rem; left: .9rem; z-index: 20; display: block;
  transition: transform .12s ease;
}
.hud-brand .brand-emblem { width: 54px; height: 54px; }
.hud-brand:hover { transform: translateY(-2px) scale(1.04); }
.hud-brand:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ============ BOOT: CONNECTING ============ */
.boot {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; align-content: center; gap: 1.2rem;
  background: var(--ink);
  transition: opacity .45s ease;
}
.boot.leaving { opacity: 0; pointer-events: none; }
.boot-spinner {
  width: 54px; height: 54px; border-radius: 50%;
  border: 5px solid rgba(255,255,255,.18);
  border-top-color: #ffffff;
  animation: boot-spin .9s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
.boot-text {
  margin: 0; color: #ffffff; font-weight: 800; letter-spacing: .3em; font-size: .95rem;
}
.dots i { font-style: normal; animation: dot-blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot-blink { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }

/* ============ LOADING SCREEN ============ */
.loadscreen {
  position: fixed; inset: 0; z-index: 70;
  background: var(--ocean);
  overflow: hidden;
  transition: opacity .45s ease;
  cursor: pointer;
}
.loadscreen.leaving { opacity: 0; pointer-events: none; }
.load-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  animation: load-pan 24s ease-in-out infinite alternate;
}
@keyframes load-pan {
  from { transform: scale(1.25) translate(2%, -2%); }
  to { transform: scale(1.25) translate(-2%, 2%); }
}
.load-left {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(560px, 92vw);
  background: rgba(10, 14, 25, .74);
  padding: clamp(1.4rem, 4vh, 3rem) clamp(1.4rem, 4vw, 3rem);
  display: flex; flex-direction: column;
}
.load-eyebrow { margin: 0; color: #ffffff; opacity: .85; font-weight: 700; font-size: .95rem; }
.load-title {
  margin: .1rem 0 0;
  font-family: Anton, Inter, sans-serif;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  color: #ffffff; letter-spacing: .02em;
}
.load-rules { list-style: none; margin: auto 0; padding: 0; display: grid; gap: clamp(1.2rem, 4vh, 2.4rem); }
.load-rules li { display: flex; gap: 1.1rem; align-items: flex-start; }
.rule-dot {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: .2rem; border-radius: 50%;
  background: #ffffff;
  border: 4px solid rgba(0,0,0,.55);
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}
.load-rules h3 { margin: 0; color: #ffffff; font-size: 1.15rem; font-weight: 800; }
.load-rules p { margin: .3rem 0 0; color: #dfe5f2; font-size: .92rem; line-height: 1.45; }
.load-status {
  margin: auto 0 0; color: #ffffff; font-weight: 800; letter-spacing: .22em; font-size: .95rem;
}
.load-tip {
  position: absolute; right: 0; bottom: 0;
  width: min(640px, 100vw);
  background: #3c4a9c;
  color: #ffffff; font-weight: 700; font-size: .92rem;
  padding: .85rem 1.4rem;
}

/* ============ LOBBY ============ */
.lobby {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  overflow: hidden;
  transition: opacity .5s ease, transform .5s ease;
}
.lobby.leaving { opacity: 0; transform: scale(1.06); pointer-events: none; }
/* island vista backdrop when the map loaded; flat ocean blue + slashes otherwise */
.lobby-sky { position: absolute; inset: 0; background: var(--ocean); }
.lobby-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  animation: load-pan 30s ease-in-out infinite alternate;
}
.lobby-veil { position: absolute; inset: 0; background: rgba(10, 14, 25, .45); }
.slash { position: absolute; top: -20%; bottom: -20%; background: var(--ocean-deep); transform: rotate(24deg); }
.slash-1 { left: -6%; width: 34%; }
.slash-2 { right: -14%; width: 22%; }
.lobby-bg:not([hidden]) ~ .slash { display: none; }

.lobby-content { position: relative; text-align: center; padding: 1rem; }
.title-line { display: inline-block; animation: fn-slam .5s cubic-bezier(.2, 1.5, .4, 1) backwards; }
.lobby-title .title-line:last-child { animation-delay: .12s; }
@keyframes fn-slam {
  from { transform: scale(2.2); opacity: 0; }
  70% { transform: scale(.94); opacity: 1; }
  to { transform: scale(1); }
}
.lobby-eyebrow { color: var(--yellow); font-size: clamp(.95rem, 2vw, 1.2rem); margin: 0 0 .4rem; letter-spacing: .1em; }
.lobby-title {
  font-size: clamp(3.4rem, 12vw, 8rem);
  line-height: .92; margin: 0;
  transform: skewX(-6deg);
  color: #ffffff;
  text-shadow: 5px 5px 0 var(--ink);
}
.lobby-sub { color: #ffffff; font-weight: 700; margin: 1rem 0 2rem; font-size: clamp(.75rem, 2vw, 1rem); letter-spacing: .12em; }

.play-btn {
  cursor: pointer; border: none;
  background: var(--yellow);
  color: #1c1500;
  padding: 1rem 3.4rem;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.play-btn span { font-size: clamp(1.6rem, 4vw, 2.4rem); transform: skewX(-6deg); display: inline-block; }
.play-btn:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--ink); }
.play-btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink); }
.play-btn:focus-visible, .lobby-classic:focus-visible, .slot:focus-visible,
.panel-close:focus-visible, .panel-btn:focus-visible, .chest-btn:focus-visible,
.spot:focus-visible, .victory-close:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 3px;
}

.lobby-classic {
  display: block; margin-top: 1.4rem; color: #ffffff; opacity: .9;
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.lobby-tip {
  position: absolute; bottom: 1.2rem; left: 0; right: 0;
  text-align: center; color: #ffffff; opacity: .8; font-size: .85rem; font-weight: 600;
  padding: 0 1rem;
}

/* ============ GAME SHELL ============ */
/* letterbox color = the map's own ocean, so the square map sits seamlessly */
.game { position: fixed; inset: 0; background: var(--ocean); }

.real-stage {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.map-box {
  position: relative;
  height: 100vh; width: 100vh;
  max-width: 100vw; max-height: 100vw;
  transform-origin: 0 0;
  will-change: transform;
}

/* ---- drop-in sequence states ---- */
.game.dropping .hud-top, .game.dropping .hud-right,
.game.dropping .hud-vitals, .game.dropping .hotbar,
.game.dropping .fan-note { opacity: 0; }
.hud-top, .hud-right, .hud-vitals, .hotbar, .fan-note { transition: opacity .5s ease; }

.game.dropping .spot { opacity: 0; pointer-events: none; }
.game.live .spot { animation: spot-pop .35s cubic-bezier(.2, 1.5, .4, 1) backwards; animation-delay: var(--d, 0s); }
@keyframes spot-pop {
  from { transform: translate(-50%, -50%) scale(2); opacity: 0; }
  70% { transform: translate(-50%, -50%) scale(.92); opacity: 1; }
  to { transform: translate(-50%, -50%) scale(1); }
}

.diver-umbrella { opacity: 0; }
#diver.gliding .diver-umbrella { opacity: 1; }
#landPulse, #landPulse2 {
  fill: none; stroke: var(--yellow); stroke-width: 10; opacity: 0;
}
#landPulse.landed { animation: land-ring 1s ease-out 2; }
#landPulse.landed + #landPulse2 { animation: land-ring 1s ease-out .25s 2; }
@keyframes land-ring {
  from { opacity: .9; transform: scale(.4); transform-origin: 53% 55%; transform-box: view-box; }
  to { opacity: 0; transform: scale(2.4); transform-origin: 53% 55%; transform-box: view-box; }
}
.map-box img {
  width: 100%; height: 100%; display: block;
  user-select: none; -webkit-user-drag: none;
}
.map-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.map-grid path { stroke: #ffffff; stroke-opacity: .14; stroke-width: 3; fill: none; }
.map-grid-text text {
  font-family: Inter, sans-serif; font-weight: 800; font-size: 72px;
  fill: #ffffff; fill-opacity: .5; text-anchor: middle;
}
.storm-line { fill: none; stroke: var(--storm); stroke-width: 14; opacity: .9; }
#stormCircle.storm-line { stroke-width: 10; }

/* POI hotspots on the real map */
.spot {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: .1rem;
  background: none; border: none; cursor: pointer; padding: .4rem;
  color: #fff;
}
.spot-ring {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--yellow);
  border: 4px solid var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
}
.spot-name {
  font-size: clamp(15px, 2.1vh, 24px);
  color: #ffffff;
  letter-spacing: .05em;
  text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
  white-space: nowrap;
}
.spot-tag {
  font-family: Inter, sans-serif; font-weight: 800;
  font-size: clamp(9px, 1.2vh, 13px); letter-spacing: .3em; color: var(--yellow);
  text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
  white-space: nowrap;
}
.spot:hover .spot-ring, .spot:focus-visible .spot-ring { background: #fff; box-shadow: 0 0 0 3px var(--yellow); }
.spot:hover .spot-name { color: var(--yellow); }
.spot.visited .spot-ring { background: var(--uncommon); }
.spot.visited .spot-name { color: var(--gold); }

/* offshore island exit marker */
.spot-exit { text-decoration: none; }
.spot-exit .spot-ring { background: var(--rare); }
.spot-exit:hover .spot-ring, .spot-exit:focus-visible .spot-ring { background: #fff; box-shadow: 0 0 0 3px var(--rare); }
.spot-exit .spot-tag { color: var(--rare); }
/* on square/narrow screens the offshore island sits under the minimap — keep the
   ring but drop its label so the two don't collide */
@media (max-aspect-ratio: 7 / 5) {
  .spot-exit .spot-name, .spot-exit .spot-tag { display: none; }
}

/* fallback map mode */
.map-wrap { position: absolute; inset: 0; }
#mapSvg { width: 100%; height: 100%; display: block; }

/* ============ HUD ============ */
.hud-top {
  position: absolute; top: .8rem; left: 50%; transform: translateX(-50%);
  z-index: 20; pointer-events: none;
}
.compass {
  width: min(420px, 60vw); overflow: hidden;
  border: 2px solid rgba(255,255,255,.35); border-radius: 3px;
  background: rgba(16, 20, 35, .72);
}
.compass-strip {
  display: flex; gap: 1.6rem; padding: .3rem 0; width: max-content;
  font-weight: 800; font-size: .8rem; letter-spacing: .15em; color: #ffffff;
  animation: compass 24s linear infinite;
}
@keyframes compass { to { transform: translateX(-50%); } }

.hud-right {
  position: absolute; top: .8rem; right: .8rem; z-index: 20;
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-end;
}
.minimap {
  position: relative;
  width: clamp(110px, 14vw, 180px); aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.4); border-radius: 3px; overflow: hidden;
  background: var(--ocean);
}
.minimap img, .minimap svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.mini-overlay { pointer-events: none; }
#miniStorm { fill: none; stroke: var(--storm); stroke-width: 3; opacity: .95; }

.hud-stats { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; }
.hud-stat {
  background: rgba(16, 20, 35, .78); border: 1px solid rgba(255,255,255,.22);
  padding: .25rem .6rem; border-radius: 3px; font-size: .75rem; font-weight: 700; color: #ffffff;
}
.hud-stat .ico { margin-right: .25rem; color: var(--yellow); }

.hud-vitals {
  position: absolute; left: .9rem; bottom: .9rem; z-index: 20;
  display: flex; flex-direction: column; gap: .35rem; width: min(300px, 42vw);
}
.bar {
  position: relative; height: 18px; border-radius: 3px; overflow: hidden;
  background: rgba(16,20,35,.78); border: 1px solid rgba(255,255,255,.25);
}
.bar-fill { position: absolute; inset: 0; }
.bar.shield .bar-fill { background: #35b6ff; }
.bar.health .bar-fill { background: #60d660; }
.bar span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; color: #06280f; letter-spacing: .06em;
}
.bar.shield span { color: #032c47; }

.hotbar {
  position: absolute; right: .9rem; bottom: .9rem; z-index: 20;
  display: flex; gap: .45rem;
}
.slot {
  width: clamp(52px, 7vw, 64px); aspect-ratio: 1;
  display: grid; place-items: center; align-content: center; gap: .2rem;
  background: rgba(16,20,35,.78); border: 2px solid rgba(255,255,255,.28); border-radius: 3px;
  text-decoration: none; color: #ffffff;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.slot .ico { width: 1.3rem; height: 1.3rem; }
.slot em { font-style: normal; font-size: .55rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.slot:hover { transform: translateY(-4px); border-color: var(--yellow); background: rgba(35,42,63,.92); }

/* fan-content note */
.fan-note {
  position: absolute; bottom: .15rem; left: 50%; transform: translateX(-50%);
  z-index: 20; margin: 0; padding: 0 1rem;
  max-width: 92vw; text-align: center;
  font-size: .58rem; font-weight: 600; color: rgba(255, 255, 255, .55);
  pointer-events: auto;
}
.fan-note a { color: rgba(255, 255, 255, .7); }

/* ============ FALLBACK MAP POIs ============ */
.poi { cursor: pointer; outline: none; }
.poi-hit {
  fill: #ffffff; fill-opacity: 0; stroke: #ffffff; stroke-opacity: 0;
  stroke-width: 4; stroke-dasharray: 14 10;
  transition: fill-opacity .15s ease, stroke-opacity .15s ease;
}
.poi:hover .poi-hit, .poi:focus-visible .poi-hit { fill-opacity: .12; stroke-opacity: .85; animation: spin-dash 12s linear infinite; }
@keyframes spin-dash { to { stroke-dashoffset: -240; } }

.poi.visited .poi-hit { stroke: var(--gold); stroke-opacity: .5; }
.poi.visited .poi-label { fill: var(--gold); }

.poi-label {
  font-family: Anton, Inter, sans-serif;
  font-size: 30px; fill: #ffffff; text-anchor: middle;
  paint-order: stroke; stroke: #101423; stroke-width: 7px; stroke-linejoin: round;
  letter-spacing: .05em;
}
.poi-tag {
  font-family: Inter, sans-serif; font-weight: 800;
  font-size: 15px; fill: var(--yellow); text-anchor: middle; letter-spacing: .28em;
  paint-order: stroke; stroke: #101423; stroke-width: 4px; stroke-linejoin: round;
}
.poi:hover .poi-label { fill: var(--yellow); }

.storm { pointer-events: none; }

/* ============ PANELS ============ */
.panel-backdrop {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(6, 9, 18, .7);
}
.panel {
  position: fixed; z-index: 40;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(860px, calc(100vw - 1.6rem));
  max-height: min(84vh, 900px);
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 2px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  box-shadow: 10px 10px 0 rgba(6, 9, 18, .55);
  animation: panel-in .28s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes panel-in {
  from { transform: translate(-50%, -46%) scale(.92); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.panel-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1.1rem 1.3rem .9rem;
  background: var(--panel-2);
  border-bottom: 3px solid var(--yellow);
}
.panel-head h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.2rem); transform: skewX(-4deg); text-shadow: 3px 3px 0 var(--ink); }
.panel-head p { margin: .2rem 0 0; color: var(--yellow); font-weight: 800; font-size: .72rem; letter-spacing: .3em; }
.panel-close {
  border: 2px solid rgba(255,255,255,.3); background: rgba(16,20,35,.6); color: var(--text);
  width: 38px; height: 38px; border-radius: 3px; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .12s ease, color .12s ease;
}
.panel-close .ico { width: 1.1rem; height: 1.1rem; }
.panel-close:hover { border-color: var(--yellow); color: var(--yellow); }

.panel-body { padding: 1.1rem 1.3rem 1.4rem; overflow-y: auto; display: grid; gap: 1rem; }

/* ---- Fortnite-style text animations, retriggered on every panel open ---- */
.panel.animate .panel-head h2 { animation: fn-slam .45s cubic-bezier(.2, 1.5, .4, 1) backwards; }
.panel.animate .panel-head p { animation: fn-wipe .55s ease-out .15s backwards; }
@keyframes fn-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.panel.animate .quest, .panel.animate .loot, .panel.animate .aisle,
.panel.animate .about-card, .panel.animate .chest-zone {
  animation: fn-rise .4s cubic-bezier(.2, 1.3, .4, 1) backwards;
}
.panel.animate > .panel-body > *:nth-child(2) { animation-delay: .08s; }
.panel.animate > .panel-body > *:nth-child(3) { animation-delay: .16s; }
.panel.animate > .panel-body > *:nth-child(4) { animation-delay: .24s; }
.panel.animate > .panel-body > *:nth-child(5) { animation-delay: .32s; }
@keyframes fn-rise {
  from { transform: translateY(18px) scale(.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* quests (experience/education) */
.quest {
  padding: 1rem 1.1rem;
  background: var(--panel-2);
  border: 2px solid; border-radius: 2px;
}
.quest.mythic { border-color: var(--mythic); }
.quest.legendary { border-color: var(--legendary); }
.quest.epic { border-color: var(--epic); }
.quest.rare { border-color: var(--rare); }
.quest.uncommon { border-color: var(--uncommon); }

.quest-top { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.quest h3 { margin: 0; font-size: 1.05rem; }
.quest-meta { color: var(--muted); margin: .25rem 0 .6rem; font-size: .85rem; }
.quest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.quest-list li { display: block; font-size: .92rem; line-height: 1.45; }
.quest-list .check { color: var(--uncommon); margin-right: .35rem; }
.xp { color: var(--gold); font-weight: 800; white-space: nowrap; margin-left: .3rem; }

.rarity-pill {
  font-size: .68rem; letter-spacing: .16em; padding: .28rem .6rem;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  color: #1c1500; background: var(--gold);
}
.quest.mythic .rarity-pill { background: var(--mythic); color: #3a2b00; }
.quest.legendary .rarity-pill, .loot.legendary .rarity-pill { background: var(--legendary); color: #2b1300; }
.quest.epic .rarity-pill, .loot.epic .rarity-pill { background: var(--epic); color: #2a0842; }
.quest.rare .rarity-pill, .loot.rare .rarity-pill { background: var(--rare); color: #04263f; }
.quest.uncommon .rarity-pill { background: var(--uncommon); color: #143001; }

.xp-bar {
  position: relative; height: 22px; border-radius: 2px; overflow: hidden; margin-top: .8rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
}
.xp-fill { position: absolute; inset: 0; background: var(--gold); }
.xp-bar span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .68rem; font-weight: 800; letter-spacing: .18em; color: #1c1500;
}

/* loot (projects) */
.loot-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: stretch; }
.loot {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1rem 1.1rem;
  background: var(--panel-2);
  border: 2px solid; border-radius: 2px;
  transition: transform .15s ease;
}
.loot:hover { transform: translateY(-4px); }
.loot.legendary { border-color: var(--legendary); box-shadow: 5px 5px 0 rgba(234, 141, 35, .3); }
.loot.epic { border-color: var(--epic); box-shadow: 5px 5px 0 rgba(195, 89, 255, .25); }
.loot.rare { border-color: var(--rare); box-shadow: 5px 5px 0 rgba(65, 191, 255, .25); }
.loot .rarity-pill { align-self: flex-start; }
.loot h3 { margin: .1rem 0 0; font-size: 1.02rem; }
.loot p { margin: 0; color: var(--muted); font-size: .88rem; }
.loot-stack { font-size: .74rem !important; font-weight: 700; letter-spacing: .04em; color: #dfe5f2 !important; }
.loot .panel-btn { margin-top: auto; }
.loot .panel-btn + .panel-btn { margin-top: .45rem; }

.panel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  text-align: center; text-decoration: none; cursor: pointer;
  font-weight: 800; font-size: .82rem; letter-spacing: .08em;
  color: var(--text); padding: .6rem .9rem; border-radius: 2px;
  background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.3);
  transition: border-color .12s ease, background .12s ease;
}
.panel-btn:hover { border-color: var(--yellow); background: rgba(255,255,255,.12); }
.panel-btn.gold { background: var(--yellow); color: #1c1500; border-color: var(--gold-deep); box-shadow: 3px 3px 0 rgba(6,9,18,.5); }
.panel-btn.gold:hover { background: #fff75e; }

/* inventory aisles (skills) */
.aisle { display: grid; gap: .5rem; }
.aisle-name { margin: 0; font-size: 1rem; letter-spacing: .08em; transform: skewX(-4deg); }
.legendary-t { color: var(--legendary); }
.epic-t { color: var(--epic); }
.rare-t { color: var(--rare); }
.uncommon-t { color: var(--uncommon); }

.inv-grid { display: flex; flex-wrap: wrap; gap: .55rem; }
.inv {
  padding: .5rem .85rem; border-radius: 2px; font-weight: 700; font-size: .88rem;
  border: 2px solid; background: var(--panel-2);
  transition: transform .12s ease;
}
.inv:hover { transform: translateY(-3px); }
.inv.legendary { border-color: var(--legendary); color: #ffc994; }
.inv.epic { border-color: var(--epic); color: #e5bcff; }
.inv.rare { border-color: var(--rare); color: #b9e4ff; }
.inv.uncommon { border-color: var(--uncommon); color: #d0f5ac; }
.inv.common { border-color: var(--common); color: #e3e3e3; }
.inv-note { color: var(--muted); font-size: .8rem; margin: .4rem 0 0; }

/* chest (contact) */
.chest-zone { display: grid; place-items: center; padding: .4rem 0 .5rem; }
.chest-btn {
  display: grid; place-items: center; gap: .2rem;
  background: none; border: none; cursor: pointer; color: var(--gold);
  font-size: 1rem; letter-spacing: .2em;
  animation: chest-bob 2.2s ease-in-out infinite;
  transition: transform .15s ease;
}
.chest-btn:hover:not(.open) { transform: scale(1.05); }
.chest-btn.open { animation: none; cursor: default; }
@keyframes chest-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* golden aura: stacked flat circles, no gradients */
.chest-aura { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.chest-aura i {
  position: absolute; border-radius: 50%;
  background: #fbd444;
  animation: aura-pulse 2.4s ease-in-out infinite;
}
.chest-aura i:nth-child(1) { width: 210px; height: 150px; opacity: .07; }
.chest-aura i:nth-child(2) { width: 160px; height: 115px; opacity: .1; animation-delay: .3s; }
.chest-aura i:nth-child(3) { width: 115px; height: 82px; opacity: .13; animation-delay: .6s; }
@keyframes aura-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.chest-btn.open .chest-aura { display: none; }

.chest-idle-sparks rect { animation: spark-rise 2.6s linear infinite; }
.chest-idle-sparks rect:nth-child(2) { animation-delay: .9s; }
.chest-idle-sparks rect:nth-child(3) { animation-delay: 1.7s; }
.chest-btn.open .chest-idle-sparks { display: none; }

/* hold-to-search prompt */
.chest-prompt {
  display: inline-flex; align-items: center; gap: .55rem;
  color: #ffffff; font-family: Inter, sans-serif;
  font-weight: 800; font-size: .82rem; letter-spacing: .18em;
}
.hold-ring { width: 34px; height: 34px; transform: rotate(-90deg); }
.ring-bg { fill: rgba(16,20,35,.65); stroke: rgba(255,255,255,.3); stroke-width: 4; }
.ring-fill {
  fill: none; stroke: var(--yellow); stroke-width: 4; stroke-linecap: butt;
  stroke-dasharray: 100.5; stroke-dashoffset: 100.5;
}
.key-badge {
  font-style: normal; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 4px;
  background: #ffffff; color: #101423; font-weight: 800; font-size: .85rem;
  box-shadow: 2px 2px 0 rgba(6,9,18,.6);
}
.chest-btn.open .chest-prompt { visibility: hidden; }

.chest-lid-g {
  transform-box: view-box;
  transform-origin: 30px 96px;
  transition: transform .5s cubic-bezier(.2, 1.4, .4, 1);
}
.chest-btn.open .chest-lid-g { transform: rotate(-98deg); }

.chest-beam {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 100px 96px;
  transform: scaleY(.2);
  transition: opacity .4s ease .15s, transform .45s cubic-bezier(.2, 1.3, .4, 1) .15s;
}
.chest-btn.open .chest-beam { opacity: 1; transform: scaleY(1); }

.chest-sparks rect { opacity: 0; }
.chest-btn.open .chest-sparks rect { animation: spark-rise 1.6s linear infinite; }
.chest-btn.open .chest-sparks rect:nth-child(2) { animation-delay: .3s; }
.chest-btn.open .chest-sparks rect:nth-child(3) { animation-delay: .6s; }
.chest-btn.open .chest-sparks rect:nth-child(4) { animation-delay: .9s; }
.chest-btn.open .chest-sparks rect:nth-child(5) { animation-delay: 1.2s; }
@keyframes spark-rise {
  0% { opacity: 0; transform: translateY(26px); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-52px); }
}

.chest-loot { display: grid; gap: .6rem; justify-items: stretch; width: min(420px, 100%); animation: loot-pop .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes loot-pop {
  from { transform: scale(.88); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.chest-loot .panel-btn { font-size: .92rem; }
.chest-note { text-align: center; color: var(--muted); font-size: .8rem; margin: .2rem 0 0; }

/* about */
.about-card { display: flex; gap: 1.1rem; align-items: flex-start; flex-wrap: wrap; }
.about-card .about-avatar {
  position: relative; overflow: hidden;
  flex: 0 0 112px; width: 112px; height: 112px; border-radius: 3px;
  display: grid; place-items: center;
  font-family: Anton, Inter, sans-serif; font-size: 2.2rem;
  background: var(--storm); color: #ffffff;
  border: 3px solid var(--yellow);
  box-shadow: 5px 5px 0 rgba(6,9,18,.5);
}
.about-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.about-card > div { flex: 1 1 260px; }
.about-card h3 { margin: 0; font-size: 1.3rem; }
.about-blurb { color: var(--muted); font-size: .92rem; line-height: 1.55; }

.stat-rows { display: grid; gap: .5rem; margin-top: .8rem; }
.stat-row { display: grid; grid-template-columns: 130px 1fr auto; gap: .6rem; align-items: center; }
.stat-row span { font-size: .68rem; font-weight: 800; letter-spacing: .14em; color: #dfe5f2; }
.stat-row em { font-size: .7rem; color: var(--muted); }
.stat-bar { height: 10px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.stat-bar i { display: block; height: 100%; background: #35b6ff; }

/* resume (Résumé Ridge) */
.resume-drop { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.resume-doc {
  position: relative; flex: 0 0 auto; width: 104px; height: 134px;
  background: #f4f6fc; border: 3px solid var(--gold); border-radius: 3px;
  box-shadow: 6px 6px 0 rgba(6, 9, 18, .5);
  overflow: hidden;
}
.resume-doc-fold {
  position: absolute; top: 0; right: 0; width: 26px; height: 26px;
  background: var(--panel); clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.resume-line { position: absolute; left: 14px; height: 7px; border-radius: 2px; background: #b9c2d6; }
.resume-line.l1 { top: 18px; width: 52px; height: 11px; background: #2b3350; }
.resume-line.l2 { top: 44px; width: 74px; }
.resume-line.l3 { top: 60px; width: 60px; }
.resume-line.l4 { top: 80px; width: 74px; }
.resume-line.l5 { top: 96px; width: 46px; }

.resume-copy { flex: 1 1 260px; display: flex; flex-direction: column; gap: .8rem; }
.resume-lead { margin: 0; color: var(--text); font-size: 1.02rem; line-height: 1.5; }
.resume-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.resume-note { margin: 0; color: var(--muted); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

/* ============ VICTORY ============ */
.victory {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(6, 9, 18, .8);
}
.victory-inner {
  text-align: center; padding: 2.4rem 2rem;
  animation: panel-in .4s cubic-bezier(.2, 1.4, .4, 1);
}
.victory-hash { margin: 0; font-size: clamp(2rem, 6vw, 3.4rem); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); }
.victory-title {
  margin: 0; font-size: clamp(3rem, 10vw, 6.4rem); line-height: 1;
  transform: skewX(-6deg);
  color: var(--gold);
  text-shadow: 6px 6px 0 var(--ink);
}
.victory-sub { color: #ffffff; font-weight: 700; margin: 1rem 0 1.6rem; }
.victory .panel-btn.gold { font-size: 1rem; padding: .8rem 1.4rem; }
.victory-close {
  display: block; margin: 1.2rem auto 0; background: none; border: none; cursor: pointer;
  color: #dfe5f2; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; font-size: .85rem;
}

.confetti {
  position: fixed; top: -20px; z-index: 55; width: 10px; height: 16px;
  animation: confetti-fall linear forwards; pointer-events: none;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 720px) {
  .hud-vitals { width: 40vw; }
  .bar { height: 14px; }
  .hotbar { gap: .3rem; }
  .compass { display: none; }
  .hud-stat:first-child { display: none; }
  .panel { max-height: 90vh; }
  .poi-label { font-size: 40px; }
  .poi-tag { font-size: 22px; }
  .stat-row { grid-template-columns: 100px 1fr auto; }
  .fan-note { display: none; }
  .lobby-brand { width: 56px; height: 56px; top: .8rem; left: .8rem; }
  .hud-brand .brand-emblem { width: 44px; height: 44px; }
}

@media (max-width: 720px) {
  .load-tip { font-size: .8rem; padding: .7rem 1rem; }
  .load-left { width: 100vw; background: rgba(10, 14, 25, .8); }
}

@media (prefers-reduced-motion: reduce) {
  .compass-strip, .chest-btn, .title-line, .boot-spinner, .dots i,
  .load-bg, .lobby-bg, .chest-aura i, .chest-idle-sparks rect,
  .game.live .spot, .chest-sparks rect { animation: none; }
  .chest-lid-g, .chest-beam { transition: none; }
}