/* ==================================================================
   ABYSS.IO — aquatic re-skin
   Loaded after style.css. The old board was sand and parchment; this
   layer replaces it with blue lacquered hull plates, hairline rim light
   and forged-metal bevels. No layout is moved: only surfaces, edges,
   type colour and the logo plaque.
   ================================================================== */

:root {
  --aq-void: #02101a;
  --aq-deep: #051c2b;
  --aq-1: #0a2c42;
  --aq-2: #0e3a55;
  --aq-3: #17587a;
  --aq-rim: #5ccbe8;
  --aq-rim-soft: rgba(112, 220, 244, 0.26);
  --aq-edge: rgba(88, 178, 208, 0.34);
  --aq-light: #e8fcff;
  --aq-text: #a6cfdf;
  --aq-dim: rgba(155, 205, 224, 0.72);
  --aq-crystal: #9be9ff;
  --aq-brass: #c7a86a;
  --aq-danger: #ff8291;

  /* Re-map the parchment tokens so every rule that still leans on them
     lands in the same water instead of carrying brown through. */
  --sand-hi: #1b5474;
  --sand-1: #164863;
  --sand-2: #123c55;
  --sand-3: #0e3047;
  --sand-4: #0a2537;
  --bark-1: #2a6b8a;
  --bark-2: #0e334a;
  --bark-3: #e4fbff;
  --ink-brown: #dff8ff;
  --coin: #8fe6ff;
  --coin-rim: #2f8fb5;
  --timer-red: #ff8b96;
  --bar-pink: #3fb6dc;
  --bar-pink-hi: #a9f0ff;
}

/* ---------------------------------------------------------------- water */

.overlay {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(20, 92, 126, 0.5), rgba(2, 14, 24, 0.88) 58%),
    linear-gradient(180deg, rgba(1, 14, 24, 0.86), rgba(0, 7, 13, 0.95));
}

.quest-overlay,
.auth-overlay {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(16, 76, 106, 0.42), rgba(1, 10, 17, 0.9) 62%),
    linear-gradient(180deg, rgba(1, 12, 20, 0.7), rgba(0, 6, 11, 0.94));
  backdrop-filter: blur(3px);
}

/* The menu is taller than a laptop viewport, so it has to start at the top:
   centring an overflowing flex child pushes its header out of reach. */
#menu.overlay { align-items: flex-start; }

/* ---------------------------------------------------------------- menu + modal shells */

.menu-shell,
.modal,
.auth-card {
  border: 1px solid var(--aq-rim-soft);
  background:
    repeating-linear-gradient(90deg, rgba(160, 235, 255, 0.018) 0 2px, rgba(0, 0, 0, 0) 2px 6px),
    radial-gradient(130% 62% at 50% -10%, rgba(96, 206, 238, 0.14), rgba(0, 0, 0, 0) 62%),
    linear-gradient(168deg, #0b3049, #071f30 58%, #04141f);
  box-shadow:
    inset 0 1px 0 rgba(190, 245, 255, 0.16),
    inset 0 0 0 1px rgba(2, 12, 20, 0.7),
    0 30px 78px rgba(0, 5, 11, 0.7);
}

.menu-shell { border-radius: 26px 20px 28px 18px; }

.modal { border-radius: 22px 16px 24px 15px; }

.auth-card { border-radius: 20px 15px 22px 14px; }

/* ---------------------------------------------------------------- logo plaque */

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: inherit;
  filter: none;
  font-size: 0;
  line-height: 0;
}

.brand img {
  display: block;
  height: clamp(148px, 25vh, 232px);
  width: auto;
  max-width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(170, 240, 255, 0.4);
  box-shadow:
    0 0 0 4px rgba(4, 20, 32, 0.96),
    0 0 0 5px rgba(92, 203, 232, 0.32),
    0 16px 40px rgba(0, 6, 14, 0.62);
}

.tagline {
  color: #9fe6f7;
  text-shadow: 0 1px 0 rgba(0, 14, 24, 0.8);
}

.blurb { color: rgba(170, 209, 224, 0.84); }

.evo-card {
  border: 1px solid rgba(96, 190, 220, 0.22);
  border-radius: 12px 8px 13px 9px;
  background: linear-gradient(165deg, rgba(12, 46, 66, 0.7), rgba(3, 17, 27, 0.82));
  box-shadow: inset 0 1px 0 rgba(170, 235, 255, 0.1);
}

/* Eleven forms stacked in a grid made the menu taller than the screen. They
   read better as a single roster you can drag through. */
.evo-preview {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 1fr);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: #2d7f9e rgba(2, 14, 24, 0.4);
  -webkit-mask-image: linear-gradient(90deg, #000 94%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg, #000 94%, rgba(0, 0, 0, 0) 100%);
}

.evo-preview::-webkit-scrollbar { height: 7px; }
.evo-preview::-webkit-scrollbar-thumb { background: #2d7f9e; border-radius: 4px; }
.evo-preview::-webkit-scrollbar-track { background: rgba(2, 14, 24, 0.4); border-radius: 4px; }

.evo-preview .evo-card { scroll-snap-align: start; }
.evo-preview { scroll-snap-type: x proximity; }

.evo-card:hover { border-color: rgba(120, 220, 246, 0.42); }

.name-card,
.account-card,
.controls-card,
.best-card {
  border: 1px solid rgba(96, 190, 220, 0.2);
  border-radius: 12px 8px 12px 9px;
  background: linear-gradient(170deg, rgba(9, 38, 55, 0.68), rgba(2, 14, 24, 0.76));
  box-shadow: inset 0 1px 0 rgba(170, 235, 255, 0.08);
}

.account-card.has-user {
  border-color: rgba(92, 203, 232, 0.4);
  box-shadow: inset 0 1px 0 rgba(170, 235, 255, 0.1), 0 12px 30px rgba(0, 8, 16, 0.42);
}

.account-mode {
  color: #032334;
  background: linear-gradient(180deg, #a4ecff, #4cbede 62%, #2d93b5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.account-mode.online { background: linear-gradient(180deg, #b8fff0, #4fd7b9 62%, #228e79); }

.account-avatar {
  color: #03202d;
  border-radius: 10px 7px 10px 7px;
  background: linear-gradient(145deg, #9fe9ff, #3aa6cc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.account-crystals {
  color: #d6f7ff;
  background: rgba(8, 34, 50, 0.9);
  border: 1px solid rgba(96, 196, 226, 0.36);
}

.account-crystals::before {
  content: "";
  display: inline-block;
  vertical-align: -1px;
  width: 9px;
  height: 11px;
  margin-right: 5px;
  background: linear-gradient(160deg, #e9feff 0 30%, #7fe0ff 31% 64%, #2b93bc 65%);
  clip-path: polygon(50% 0, 100% 32%, 78% 100%, 22% 100%, 0 32%);
}

.profile-grid > div {
  border: 1px solid rgba(96, 190, 220, 0.16);
  background: rgba(2, 14, 24, 0.72);
}

.menu-foot { color: rgba(140, 190, 208, 0.44); }

/* ---------------------------------------------------------------- buttons */

.btn {
  border: 1px solid #2f7f9f;
  border-radius: 11px 8px 12px 8px;
  padding: 14px 32px;
  color: #e2f9ff;
  text-shadow: 0 1px 0 rgba(0, 14, 24, 0.8);
  background:
    linear-gradient(180deg, rgba(190, 245, 255, 0.12), rgba(190, 245, 255, 0) 46%),
    linear-gradient(180deg, #1a5a78, #103e57 58%, #0b2f45);
  box-shadow:
    inset 0 1px 0 rgba(190, 245, 255, 0.3),
    inset 0 -2px 0 rgba(0, 10, 18, 0.45),
    0 4px 0 #051e2d,
    0 9px 18px rgba(0, 0, 0, 0.44);
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(200, 248, 255, 0.36),
    inset 0 -2px 0 rgba(0, 10, 18, 0.45),
    0 6px 0 #051e2d,
    0 12px 22px rgba(0, 0, 0, 0.46);
}

.btn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 5px rgba(0, 8, 14, 0.55),
    0 1px 0 #051e2d,
    0 4px 9px rgba(0, 0, 0, 0.36);
}

.btn.primary {
  border-color: #8ee4f7;
  color: #03212e;
  text-shadow: 0 1px 0 rgba(220, 255, 255, 0.4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #a5edff, #57c7e4 52%, #2188ad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 0 rgba(8, 74, 98, 0.35),
    0 4px 0 #0b4a66,
    0 10px 20px rgba(0, 0, 0, 0.42);
}

.btn.primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -2px 0 rgba(8, 74, 98, 0.35),
    0 6px 0 #0b4a66,
    0 13px 24px rgba(0, 0, 0, 0.46);
}

.btn.primary:active {
  box-shadow:
    inset 0 2px 6px rgba(4, 44, 60, 0.5),
    0 1px 0 #0b4a66,
    0 4px 9px rgba(0, 0, 0, 0.36);
}

.btn.ghost {
  border-color: rgba(90, 178, 206, 0.4);
  color: #cbeefb;
  background: linear-gradient(180deg, #0d344b, #082438 62%, #061b2a);
  box-shadow:
    inset 0 1px 0 rgba(180, 240, 255, 0.14),
    0 4px 0 #041521,
    0 8px 15px rgba(0, 0, 0, 0.4);
}

.btn.ghost:hover {
  border-color: rgba(120, 216, 242, 0.6);
  background: linear-gradient(180deg, #134257, #0b2e42 62%, #07202f);
}

.btn[disabled] {
  filter: saturate(0.3) brightness(0.86);
  box-shadow: inset 0 1px 0 rgba(180, 240, 255, 0.1), 0 3px 0 #041521;
}

/* ---------------------------------------------------------------- inputs */

.name-input,
.field-input {
  border: 1px solid rgba(88, 178, 208, 0.34);
  background: rgba(1, 11, 19, 0.78);
  color: var(--aq-light);
  box-shadow: inset 0 2px 6px rgba(0, 4, 8, 0.55);
}

.name-input::placeholder,
.field-input::placeholder { color: rgba(150, 198, 216, 0.45); }

.name-input:focus,
.field-input:focus {
  border-color: rgba(110, 222, 246, 0.7);
  background: rgba(2, 17, 28, 0.9);
  box-shadow: inset 0 2px 6px rgba(0, 4, 8, 0.5), 0 0 0 3px rgba(92, 203, 232, 0.14);
}

.modal-title {
  background: linear-gradient(96deg, #d6fbff, #7fe0f7 52%, #4fb9db);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.modal-eyebrow { color: rgba(150, 226, 245, 0.8); }
.modal-sub { color: rgba(165, 206, 222, 0.82); }

.death-stats { border-color: rgba(96, 190, 220, 0.2); }
.death-stat { background: rgba(2, 14, 24, 0.6); border-color: rgba(96, 190, 220, 0.14); }

.auth-tab-thumb {
  background: linear-gradient(180deg, #a9efff, #4fc1e0 62%, #2a93b8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 14px rgba(20, 140, 176, 0.32);
}

.auth-tab.active { color: #03202d; }

.auth-eyebrow { color: rgba(150, 226, 245, 0.8); }

.auth-notice {
  color: rgba(190, 224, 236, 0.86);
  background: rgba(140, 206, 232, 0.07);
  border: 1px solid rgba(140, 206, 232, 0.22);
}

.auth-link { color: #8de3f7; }

/* ---------------------------------------------------------------- HUD chips + dials */

.quest-chip {
  border: 1px solid rgba(96, 198, 226, 0.44);
  border-radius: 10px 7px 10px 7px;
  background:
    linear-gradient(180deg, rgba(190, 245, 255, 0.12), rgba(190, 245, 255, 0) 48%),
    linear-gradient(180deg, #12455f, #0b2c41 60%, #082234);
  box-shadow:
    inset 0 1px 0 rgba(190, 245, 255, 0.26),
    0 3px 0 #041926,
    0 8px 18px rgba(0, 0, 0, 0.45);
  color: #d9f7ff;
  text-shadow: 0 1px 0 rgba(0, 12, 20, 0.8);
}

.quest-chip:hover {
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(200, 248, 255, 0.32),
    0 4px 0 #041926,
    0 10px 20px rgba(0, 0, 0, 0.48);
}

.quest-chip:active {
  transform: translateX(-50%) translateY(2px);
  box-shadow: inset 0 2px 5px rgba(0, 6, 12, 0.6), 0 1px 0 #041926, 0 4px 10px rgba(0, 0, 0, 0.4);
}

.quest-chip-icon {
  border: 1px solid rgba(96, 198, 226, 0.4);
  border-radius: 6px;
  background: linear-gradient(180deg, #17516d, #0c3349);
  color: #b9efff;
}

.quest-chip-label { text-shadow: 0 1px 0 rgba(0, 12, 20, 0.8); }

.quest-chip-crystal {
  border: 1px solid rgba(96, 198, 226, 0.38);
  background: linear-gradient(180deg, #062334, #041a28);
  color: #cdf4ff;
  box-shadow: inset 0 1px 0 rgba(190, 245, 255, 0.12);
}

.quest-chip-crystal::before {
  background: linear-gradient(160deg, #e9feff 0 30%, #7fe0ff 31% 64%, #2b93bc 65%);
  clip-path: polygon(50% 0, 100% 32%, 78% 100%, 22% 100%, 0 32%);
  border-radius: 1px;
  box-shadow: none;
}

.quest-chip-badge {
  border: 1px solid #03202d;
  background: linear-gradient(180deg, #ff9a8c, #d8452a 62%, #ab2f1c);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.quest-chip:has(.quest-chip-badge:not([hidden])) {
  border-color: rgba(255, 154, 140, 0.7);
}

#zoneChip {
  border: 1px solid rgba(96, 198, 226, 0.34);
  border-radius: 9px 6px 9px 6px;
  background: linear-gradient(180deg, rgba(12, 48, 68, 0.94), rgba(5, 24, 37, 0.94));
  box-shadow: inset 0 1px 0 rgba(180, 240, 255, 0.14), 0 3px 0 rgba(3, 15, 23, 0.7), 0 6px 14px rgba(0, 0, 0, 0.4);
  color: #cdeffb;
}

#zoneChip b { color: #e2fbff; text-shadow: 0 1px 0 rgba(0, 12, 20, 0.8); }

#abilityBtn {
  border: 2px solid rgba(96, 198, 226, 0.5);
  background:
    radial-gradient(circle at 36% 26%, rgba(190, 245, 255, 0.18), rgba(0, 0, 0, 0) 48%),
    radial-gradient(circle at 50% 55%, #155571, #0b3147 70%, #061e2c);
  box-shadow:
    inset 0 2px 0 rgba(190, 245, 255, 0.2),
    0 5px 0 rgba(3, 15, 23, 0.75),
    0 12px 22px rgba(0, 0, 0, 0.5);
  color: #bdf1ff;
}

#abilityBtn .ability-svg { color: #bdf1ff; }

#shotBtn {
  border: 2px solid rgba(96, 198, 226, 0.55);
  background:
    radial-gradient(circle at 36% 26%, rgba(190, 245, 255, 0.2), rgba(0, 0, 0, 0) 48%),
    radial-gradient(circle at 50% 55%, #1a627f, #0c354b 70%, #061e2c);
  box-shadow:
    inset 0 2px 0 rgba(190, 245, 255, 0.24),
    0 5px 0 rgba(3, 15, 23, 0.75),
    0 10px 20px rgba(0, 0, 0, 0.5);
  color: #c8f3ff;
}

#shotBtn .ability-svg { color: #c8f3ff; }

.shot-key {
  border: 1px solid rgba(96, 198, 226, 0.4);
  background: linear-gradient(180deg, #12455f, #092537);
  color: #bdeeff;
}

/* ---------------------------------------------------------------- mission board */

.quest-frame {
  border: 1px solid rgba(104, 210, 238, 0.32);
  border-radius: 20px 14px 22px 13px;
  background:
    repeating-linear-gradient(90deg, rgba(150, 230, 250, 0.022) 0 2px, rgba(0, 0, 0, 0) 2px 6px),
    linear-gradient(180deg, #0c324b, #082338 52%, #061a28);
  box-shadow:
    inset 0 1px 0 rgba(190, 245, 255, 0.16),
    inset 0 0 0 2px rgba(3, 14, 22, 0.6),
    0 24px 60px rgba(0, 5, 10, 0.66);
  color: var(--aq-light);
}

.quest-frame::before {
  background:
    radial-gradient(130% 60% at 50% -12%, rgba(120, 220, 246, 0.16), rgba(120, 220, 246, 0) 62%),
    radial-gradient(100% 44% at 50% 110%, rgba(0, 6, 10, 0.55), rgba(0, 6, 10, 0) 58%);
}

.quest-frame::after {
  z-index: 3;
  border-radius: 12px;
  background-image:
    radial-gradient(circle, #04141e 0 2.6px, rgba(168, 226, 242, 0.7) 2.6px 4.2px, rgba(0, 0, 0, 0) 4.2px),
    radial-gradient(circle, #04141e 0 2.6px, rgba(168, 226, 242, 0.7) 2.6px 4.2px, rgba(0, 0, 0, 0) 4.2px),
    radial-gradient(circle, #04141e 0 2.6px, rgba(168, 226, 242, 0.7) 2.6px 4.2px, rgba(0, 0, 0, 0) 4.2px),
    radial-gradient(circle, #04141e 0 2.6px, rgba(168, 226, 242, 0.7) 2.6px 4.2px, rgba(0, 0, 0, 0) 4.2px);
  background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px);
}

.quest-tab {
  border: 1px solid #2b7695;
  border-bottom: 0;
  background: linear-gradient(180deg, #0e3b56, #0a2c42);
  box-shadow: inset 0 1px 0 rgba(170, 240, 255, 0.16);
  color: #9ecfdf;
  text-shadow: 0 1px 0 rgba(0, 14, 24, 0.85);
}

.quest-tab::before { border-color: rgba(120, 210, 235, 0.24); }

.quest-tab:hover { color: #cceffb; }

.quest-tab.active {
  background: linear-gradient(180deg, #1a6082, #11425e 62%, #0c3148);
  box-shadow: inset 0 2px 0 rgba(190, 248, 255, 0.34), 0 -6px 16px rgba(0, 0, 0, 0.3);
  color: #f0feff;
  text-shadow: 0 1px 0 rgba(0, 14, 24, 0.85);
}

.quest-tab.active::after {
  background: linear-gradient(90deg, rgba(127, 230, 255, 0), #7fe6ff, rgba(127, 230, 255, 0));
}

.quest-close {
  border: 1px solid #2b7695;
  background: linear-gradient(180deg, #14506c, #0b2f45);
  color: #dff9ff;
  box-shadow: inset 0 1px 0 rgba(190, 245, 255, 0.28), 0 3px 0 #051c2a;
}

.quest-close:hover {
  border-color: #4aa9c9;
  background: linear-gradient(180deg, #1b6a8c, #0e3a53);
  color: #f2feff;
}

.quest-body {
  border: 1px solid rgba(90, 190, 220, 0.24);
  border-radius: 11px 8px 12px 8px;
  background: linear-gradient(180deg, rgba(3, 20, 31, 0.76), rgba(3, 15, 25, 0.84));
  box-shadow: inset 0 3px 12px rgba(0, 6, 12, 0.6);
  scrollbar-color: #2d7f9e rgba(2, 14, 24, 0.4);
}

.quest-body::-webkit-scrollbar-thumb { background: #2d7f9e; }

.quest-heading {
  margin: 3px 0 5px;
  padding: 4px 16px 5px;
  border: 1px solid rgba(120, 220, 245, 0.28);
  border-left: 3px solid #59cbe8;
  border-radius: 6px 2px 6px 2px;
  background: linear-gradient(180deg, rgba(31, 96, 127, 0.55), rgba(10, 40, 58, 0.6));
  box-shadow: inset 0 1px 0 rgba(190, 245, 255, 0.2), 0 4px 12px rgba(0, 6, 12, 0.35);
  color: #eafcff;
  text-shadow: 0 1px 0 rgba(0, 16, 26, 0.8);
}

.quest-heading::before,
.quest-heading::after { display: none; }

.quest-sub {
  border-bottom: 1px solid rgba(120, 220, 245, 0.16);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  color: var(--aq-dim);
}

.quest-card {
  border: 1px solid rgba(96, 198, 226, 0.3);
  border-radius: 12px 8px 12px 8px;
  background:
    repeating-linear-gradient(0deg, rgba(140, 225, 250, 0.02) 0 2px, rgba(0, 0, 0, 0) 2px 7px),
    linear-gradient(168deg, #104059, #0a2c42 55%, #082334);
  box-shadow:
    inset 0 0 0 1px rgba(2, 12, 20, 0.6),
    inset 0 1px 0 rgba(180, 240, 255, 0.14),
    0 5px 0 rgba(3, 15, 23, 0.8),
    0 12px 24px rgba(0, 0, 0, 0.42);
}

.quest-card::before,
.quest-card::after {
  background: repeating-linear-gradient(90deg, rgba(140, 225, 250, 0.22) 0 6px, rgba(0, 0, 0, 0) 6px 12px);
  opacity: 0.45;
}

.quest-card:hover {
  border-color: rgba(120, 220, 246, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(2, 12, 20, 0.6),
    inset 0 1px 0 rgba(190, 245, 255, 0.2),
    0 8px 0 rgba(3, 15, 23, 0.8),
    0 16px 26px rgba(0, 0, 0, 0.44);
}

.quest-card.ready {
  border-color: #6fd9f2;
  box-shadow:
    inset 0 1px 0 rgba(190, 248, 255, 0.3),
    0 0 0 1px rgba(111, 217, 242, 0.4),
    0 5px 0 rgba(3, 15, 23, 0.8),
    0 12px 30px rgba(0, 0, 0, 0.45);
}

.quest-card.claimed:hover {
  box-shadow:
    inset 0 1px 0 rgba(180, 240, 255, 0.12),
    0 5px 0 rgba(3, 15, 23, 0.8),
    0 12px 24px rgba(0, 0, 0, 0.42);
}

.quest-card-tag {
  border: 1px solid rgba(90, 190, 220, 0.45);
  background: linear-gradient(180deg, #15516f, #0c344b);
  color: #c9f0ff;
}

.quest-card.ready .quest-card-tag {
  background: linear-gradient(180deg, #b6f4ff, #49c2e2 62%, #2290b3);
  border-color: #7fdcf4;
  color: #03202d;
}

.quest-card-icon {
  border: 1px solid rgba(90, 190, 220, 0.38);
  border-radius: 8px 5px 8px 6px;
  background: radial-gradient(circle at 50% 26%, #14556f, #0a2c40 72%);
  box-shadow: inset 0 3px 10px rgba(0, 8, 14, 0.65);
}

.quest-card-icon::after {
  background:
    linear-gradient(rgba(140, 230, 250, 0.7), rgba(140, 230, 250, 0.7)) left top / 11px 2px no-repeat,
    linear-gradient(rgba(140, 230, 250, 0.7), rgba(140, 230, 250, 0.7)) left top / 2px 11px no-repeat,
    linear-gradient(rgba(140, 230, 250, 0.7), rgba(140, 230, 250, 0.7)) right top / 11px 2px no-repeat,
    linear-gradient(rgba(140, 230, 250, 0.7), rgba(140, 230, 250, 0.7)) right top / 2px 11px no-repeat,
    linear-gradient(rgba(140, 230, 250, 0.7), rgba(140, 230, 250, 0.7)) left bottom / 11px 2px no-repeat,
    linear-gradient(rgba(140, 230, 250, 0.7), rgba(140, 230, 250, 0.7)) left bottom / 2px 11px no-repeat,
    linear-gradient(rgba(140, 230, 250, 0.7), rgba(140, 230, 250, 0.7)) right bottom / 11px 2px no-repeat,
    linear-gradient(rgba(140, 230, 250, 0.7), rgba(140, 230, 250, 0.7)) right bottom / 2px 11px no-repeat;
}

.quest-card.ready .quest-card-icon {
  box-shadow: inset 0 3px 10px rgba(0, 8, 14, 0.6), 0 0 14px rgba(111, 217, 242, 0.5);
}

.quest-card-glyph { color: #9fdcf0; }

.quest-card-text {
  color: #e8fcff;
  text-shadow: 0 1px 0 rgba(0, 14, 24, 0.7);
}

.quest-card-reward {
  border: 1px solid rgba(90, 190, 220, 0.38);
  border-radius: 7px 5px 7px 5px;
  background: linear-gradient(180deg, rgba(6, 28, 42, 0.9), rgba(4, 20, 32, 0.92));
}

.quest-card-reward span { color: rgba(150, 205, 225, 0.8); }

.quest-card-reward b {
  color: #bff3ff;
  text-shadow: 0 1px 0 rgba(0, 16, 26, 0.8);
}

.quest-card-reward .quest-xp {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #8ff7d8;
}

.quest-card-reward b::before {
  width: 15px;
  height: 17px;
  border-radius: 1px;
  background:
    url("../assets/ui/coin.png") center/contain no-repeat,
    linear-gradient(160deg, #e9feff 0 30%, #7fe0ff 31% 64%, #2b93bc 65%);
  clip-path: polygon(50% 0, 100% 32%, 78% 100%, 22% 100%, 0 32%);
  box-shadow: none;
}

.quest-card-bar {
  border: 1px solid #1a4f6a;
  background: linear-gradient(180deg, #041a28, #03121c);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}

.quest-card-bar i {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 52%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0 6px, rgba(255, 255, 255, 0) 6px 13px),
    linear-gradient(180deg, #a9f0ff, #3fb6dc 70%, #1d7fa6);
}

.quest-card.ready .quest-card-bar i {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 52%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0 6px, rgba(255, 255, 255, 0) 6px 13px),
    linear-gradient(180deg, #d6fbff, #6fdcf5 62%, #2a9fc6);
}

.quest-card-bar em { color: #eafdff; text-shadow: 0 1px 2px rgba(0, 10, 16, 0.9); }

.quest-card-where { color: rgba(150, 205, 225, 0.82); }
.quest-card-where b { color: #e2fbff; }
.quest-card-where::after { display: none; }

.quest-card .quest-card-claim {
  border: 1px solid rgba(90, 190, 220, 0.45);
  border-radius: 9px 6px 9px 6px;
  background: linear-gradient(180deg, #12455f, #0a2c42);
  color: #d9f7ff;
  box-shadow: inset 0 1px 0 rgba(190, 245, 255, 0.2), 0 3px 0 #051c2a;
}

.quest-card.ready .quest-card-claim {
  border-color: #7fdcf4;
  background: linear-gradient(180deg, #b6f4ff, #4cc3e4 55%, #1c7fa4);
  color: #03202d;
  text-shadow: 0 1px 0 rgba(220, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 0 #08283a, 0 8px 14px rgba(0, 0, 0, 0.4);
}

.quest-card.claimed .quest-card-claim {
  background: linear-gradient(180deg, #0d3448, #092537);
  border-color: rgba(90, 190, 220, 0.3);
  color: rgba(170, 220, 236, 0.55);
  box-shadow: inset 0 1px 0 rgba(180, 240, 255, 0.1), 0 3px 0 #041521;
}

/* ---------------------------------------------------------------- daily chests */

.chest-strip {
  padding-left: 16px;
  border: 1px solid rgba(96, 198, 226, 0.3);
  border-radius: 13px 9px 14px 9px;
  background: linear-gradient(180deg, rgba(12, 48, 68, 0.9), rgba(6, 26, 40, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(180, 240, 255, 0.14),
    inset 0 0 0 1px rgba(92, 203, 232, 0.08),
    0 4px 0 rgba(3, 15, 23, 0.7),
    0 10px 20px rgba(0, 0, 0, 0.4);
}

.chest-strip::before { display: none; }

.chest-title {
  color: #e8fcff;
  text-shadow: 0 1px 0 rgba(0, 16, 26, 0.8);
}

.chest-timer { color: rgba(150, 205, 225, 0.75); }

.chest-timer b {
  color: #ffb3a8;
  text-shadow: 0 1px 0 rgba(40, 6, 2, 0.6);
}

.chest-count {
  text-shadow:
    -2px -2px 0 #04141e, 2px -2px 0 #04141e,
    -2px 2px 0 #04141e, 2px 2px 0 #04141e,
    0 4px 10px rgba(0, 0, 0, 0.55);
}

.chest-cell {
  border: 1px solid rgba(90, 190, 220, 0.34);
  border-radius: 9px 6px 9px 6px;
  background: linear-gradient(180deg, rgba(9, 38, 55, 0.9), rgba(5, 22, 34, 0.94));
  box-shadow: inset 0 1px 0 rgba(180, 240, 255, 0.12), 0 3px 0 rgba(3, 15, 23, 0.65);
  color: #cdeffb;
}

.chest-cell .chest-pay { color: #e6fbff; }
.chest-cell .chest-need { color: rgba(150, 205, 225, 0.72); }
.chest-glyph { color: rgba(130, 210, 235, 0.8); }

.chest-cell::before {
  background: linear-gradient(180deg, rgba(120, 220, 246, 0.1), rgba(120, 220, 246, 0.4));
}

.chest-cell.ready {
  border-color: #7fdcf4;
  background: linear-gradient(180deg, #144f6a, #0b3147);
  box-shadow: 0 0 0 1px rgba(127, 220, 244, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 0 rgba(3, 15, 23, 0.7);
}

.chest-cell.opened::after { color: #8ff0cf; }

/* ---------------------------------------------------------------- map + lists */

#questMap {
  border: 1px solid rgba(90, 190, 220, 0.34);
  border-radius: 11px 8px 11px 8px;
  background: linear-gradient(180deg, #07222f, #041520);
  box-shadow: inset 0 0 0 2px rgba(3, 14, 22, 0.55), inset 0 4px 16px rgba(0, 4, 8, 0.55);
}

.zone-list li {
  border: 1px solid rgba(90, 190, 220, 0.28);
  border-radius: 9px 6px 9px 6px;
  background: linear-gradient(180deg, rgba(9, 38, 55, 0.82), rgba(5, 22, 34, 0.86));
  color: #d3f2fc;
}

.zone-list li i { border: 1px solid rgba(150, 230, 250, 0.45); }

.zone-list li b {
  border: 1px solid rgba(90, 190, 220, 0.4);
  background: linear-gradient(180deg, #0d3a4f, #0a2c3e);
  color: #a8e3f5;
}

.zone-list li.visited b {
  background: linear-gradient(180deg, #b6f4ff, #4cc3e4);
  color: #03202d;
}

.zone-list li.visited { box-shadow: inset 0 1px 0 rgba(180, 240, 255, 0.14), inset 3px 0 0 #59cbe8; }

.zone-list li.tally {
  background: linear-gradient(180deg, rgba(9, 38, 55, 0.7), rgba(5, 22, 34, 0.8));
}

.zone-list li.tally b { color: #cdf4ff; }

.opt-row {
  border: 1px solid rgba(90, 190, 220, 0.28);
  border-radius: 9px 6px 9px 6px;
  background: linear-gradient(180deg, rgba(9, 38, 55, 0.8), rgba(5, 22, 34, 0.86));
}

.opt-label { color: #cdeffb; }
.opt-value { color: rgba(170, 214, 230, 0.88); }

.opt-row.danger .opt-btn {
  border-color: #7a3a44;
  background: linear-gradient(180deg, #5e2733, #3f1a23 62%, #301119);
  color: #ffd3d7;
  box-shadow: inset 0 1px 0 rgba(255, 190, 195, 0.2), 0 4px 0 #2a0d13, 0 8px 14px rgba(0, 0, 0, 0.4);
}

.opt-row.danger .opt-btn:hover { border-color: #a8525f; }

.opt-stat {
  border: 1px solid rgba(90, 190, 220, 0.24);
  border-radius: 8px 6px 8px 6px;
  background: linear-gradient(180deg, rgba(9, 38, 55, 0.7), rgba(5, 22, 34, 0.78));
  color: rgba(170, 214, 230, 0.86);
}

.opt-stat b { color: #e2fbff; text-shadow: 0 1px 0 rgba(0, 14, 24, 0.7); }

/* ---------------------------------------------------------------- foot + go */

.quest-foot { border-top: 1px solid rgba(104, 210, 238, 0.22); }
.quest-foot-note { color: rgba(150, 205, 225, 0.8); }

.quest-go {
  border: 2px solid #8ee4f7;
  background: radial-gradient(circle at 38% 28%, #c9f7ff, #4fc1e0 50%, #12688c 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    0 5px 0 #063049,
    0 10px 18px rgba(0, 0, 0, 0.5);
  color: #03202d;
}

.quest-go svg { filter: drop-shadow(0 1px 0 rgba(220, 255, 255, 0.4)); }

.quest-go:active {
  box-shadow: inset 0 2px 6px rgba(4, 60, 82, 0.45), 0 1px 0 #063049, 0 5px 10px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------- shop */

.shop-purse {
  border: 1px solid rgba(96, 198, 226, 0.45);
  border-radius: 999px;
  background: linear-gradient(180deg, #12455f, #092537);
  box-shadow: inset 0 1px 0 rgba(190, 245, 255, 0.18), 0 3px 0 #041521;
  color: #d6f7ff;
}

.shop-card .shop-card-desc { color: rgba(160, 212, 230, 0.86); }
.shop-card-note { color: rgba(150, 200, 220, 0.66); }

.shop-card-warn {
  border: 1px solid rgba(255, 130, 145, 0.45);
  background: rgba(255, 130, 145, 0.1);
  color: #ffb9c2;
}

.shop-card.equipped {
  border-color: #6fd9f2;
  box-shadow:
    inset 0 0 0 1px rgba(3, 14, 22, 0.6),
    0 0 0 1px rgba(111, 217, 242, 0.4),
    0 5px 0 rgba(3, 15, 23, 0.8),
    0 12px 28px rgba(0, 0, 0, 0.45);
}

.shop-card.owned .quest-card-tag {
  background: linear-gradient(180deg, #bff6e8, #59c6a8 62%, #2c8f76);
  border-color: #7fdcbf;
  color: #03251c;
}

.shop-card.poor { filter: saturate(0.7) brightness(0.94); opacity: 0.9; }
.shop-card.poor .shop-card-note { color: rgba(255, 150, 160, 0.9); }

.shop-card .shop-card-buy {
  border: 1px solid rgba(96, 198, 226, 0.45);
  border-radius: 9px 6px 9px 6px;
  background: linear-gradient(180deg, #12455f, #0a2c42);
  color: #dcf8ff;
  box-shadow: inset 0 1px 0 rgba(190, 245, 255, 0.2), 0 3px 0 #051c2a;
}

.shop-card .shop-card-buy:hover {
  filter: brightness(1.12);
  border-color: rgba(130, 225, 250, 0.68);
}

.shop-card .shop-card-buy:active {
  box-shadow: inset 0 2px 5px rgba(0, 6, 12, 0.55), 0 1px 0 #051c2a;
}

.shop-card .shop-card-buy[disabled] { filter: grayscale(0.4) brightness(0.9); }

.shop-card.equipped .shop-card-buy {
  border-color: #7fdcf4;
  background: linear-gradient(180deg, #b6f4ff, #4cc3e4 55%, #1c7fa4);
  color: #03202d;
}

.shop-empty {
  border: 1px dashed rgba(96, 198, 226, 0.42);
  background: rgba(6, 28, 42, 0.4);
}

.shop-empty-glyph {
  border: 1px solid rgba(96, 198, 226, 0.4);
  border-radius: 10px 7px 10px 7px;
  background: linear-gradient(180deg, #12455f, #0a2c42);
  color: #bdeeff;
}

.shop-empty-title { color: #e2fbff; }
.shop-empty-text { color: rgba(160, 212, 230, 0.8); }

/* ---------------------------------------------------------------- HUD state glows */

/* The dock buttons run on the tide now: cold rim, brine halo, no forge gold. */
#abilityBtn.ready {
  border-color: rgba(126, 240, 216, 0.72);
  box-shadow:
    0 5px 0 rgba(3, 15, 23, 0.75),
    0 12px 22px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(79, 227, 255, 0.26),
    inset 0 2px 0 rgba(190, 245, 255, 0.28);
  animation: aqAbilityGlow 2.4s ease-in-out infinite;
}

@keyframes aqAbilityGlow {
  0%, 100% {
    box-shadow:
      0 5px 0 rgba(3, 15, 23, 0.75),
      0 12px 22px rgba(0, 0, 0, 0.5),
      0 0 14px rgba(79, 227, 255, 0.18),
      inset 0 2px 0 rgba(190, 245, 255, 0.26);
  }
  50% {
    box-shadow:
      0 5px 0 rgba(3, 15, 23, 0.75),
      0 12px 22px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(126, 240, 216, 0.42),
      inset 0 2px 0 rgba(190, 245, 255, 0.4);
  }
}

#shotBtn.ready {
  animation: aqShotReady 2.2s ease-in-out infinite;
}

@keyframes aqShotReady {
  0%, 100% {
    box-shadow:
      inset 0 2px 0 rgba(190, 245, 255, 0.26),
      0 5px 0 rgba(3, 15, 23, 0.75),
      0 0 12px rgba(79, 227, 255, 0.22);
  }
  50% {
    box-shadow:
      inset 0 2px 0 rgba(190, 245, 255, 0.4),
      0 5px 0 rgba(3, 15, 23, 0.75),
      0 0 26px rgba(126, 240, 216, 0.46);
  }
}

.bar.xp i {
  background: linear-gradient(90deg, #3fd6ff, #5ef0d6 55%, #a9ffe9);
  box-shadow: 0 0 12px rgba(94, 240, 214, 0.4);
}

.pip.next {
  background: rgba(126, 240, 216, 0.5);
  animation: aqPipPulse 1.6s infinite;
}

@keyframes aqPipPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(126, 240, 216, 0.55); }
}

.quest-chip:has(.quest-chip-badge:not([hidden])) {
  border-color: rgba(255, 154, 140, 0.7);
  animation: aqChipReady 1.6s ease-in-out infinite;
}

@keyframes aqChipReady {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(190, 245, 255, 0.18),
      0 3px 0 rgba(3, 15, 23, 0.7),
      0 0 0 rgba(255, 154, 140, 0);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(190, 245, 255, 0.22),
      0 3px 0 rgba(3, 15, 23, 0.7),
      0 0 16px rgba(255, 138, 122, 0.55);
  }
}

/* ---------------------------------------------------------------- gate clock */

#gateChip {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(96, 198, 226, 0.3);
  background: linear-gradient(180deg, rgba(8, 34, 50, 0.9), rgba(3, 16, 27, 0.92));
  box-shadow: inset 0 1px 0 rgba(180, 240, 255, 0.12), 0 6px 16px rgba(0, 0, 0, 0.42);
  color: #9fd6e8;
  opacity: 0;
  transition: opacity 0.35s ease, border-color 0.35s ease;
  pointer-events: none;
}

#gateChip.show { opacity: 1; }

#gateChip span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: rgba(150, 205, 225, 0.78);
}

#gateChip b {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #e2fbff;
  font-variant-numeric: tabular-nums;
}

#gateChip.open {
  border-color: rgba(112, 240, 210, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(190, 255, 240, 0.16),
    0 6px 16px rgba(0, 0, 0, 0.42),
    0 0 18px rgba(88, 226, 198, 0.3);
}

#gateChip.open span { color: #8ff7d8; }

/* ---------------------------------------------------------------- level */

.account-level {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #032334;
  background: linear-gradient(180deg, #b8fff0, #4fd7b9 62%, #228e79);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}

.levelup-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(28, 116, 140, 0.4), rgba(1, 8, 14, 0.9) 62%),
    rgba(1, 8, 14, 0.72);
  backdrop-filter: blur(4px);
}

.levelup-card {
  width: min(420px, 92vw);
  padding: 26px 28px 24px;
  text-align: center;
  border-radius: 22px 16px 24px 15px;
  border: 1px solid rgba(112, 240, 220, 0.42);
  background:
    repeating-linear-gradient(90deg, rgba(160, 235, 255, 0.018) 0 2px, rgba(0, 0, 0, 0) 2px 6px),
    radial-gradient(130% 62% at 50% -10%, rgba(96, 238, 220, 0.18), rgba(0, 0, 0, 0) 62%),
    linear-gradient(168deg, #0b3049, #071f30 58%, #04141f);
  box-shadow:
    inset 0 1px 0 rgba(190, 255, 246, 0.18),
    inset 0 0 0 1px rgba(2, 12, 20, 0.7),
    0 0 40px rgba(74, 224, 198, 0.18),
    0 30px 78px rgba(0, 5, 11, 0.72);
  animation: levelupIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes levelupIn {
  from { transform: translateY(14px) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.levelup-kicker {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: #7fe9d4;
}

.levelup-title {
  margin: 10px 0 6px;
  font-size: clamp(20px, 3.4vw, 26px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #eafffb;
  text-shadow: 0 2px 0 rgba(0, 14, 24, 0.7);
}

.levelup-text {
  margin: 0 0 16px;
  font-size: 14px;
  color: rgba(170, 209, 224, 0.88);
}

.levelup-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0 auto 20px;
  padding: 12px 18px;
  width: fit-content;
  border-radius: 14px 10px 15px 9px;
  border: 1px solid rgba(155, 233, 255, 0.36);
  background: rgba(4, 24, 36, 0.86);
  box-shadow: inset 0 1px 0 rgba(190, 245, 255, 0.14), 0 0 22px rgba(88, 210, 240, 0.16);
}

.levelup-reward b {
  font-size: 30px;
  font-weight: 800;
  color: #bff4ff;
  text-shadow: 0 0 18px rgba(88, 210, 240, 0.55);
}

.levelup-reward span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: rgba(150, 205, 225, 0.72);
}

.levelup-ok { min-width: 160px; }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 620px) {
  .brand img { height: clamp(120px, 22vh, 168px); border-radius: 14px; }
  .quest-frame { border-radius: 16px 12px 18px 11px; }
}

/* Narrow screens have no free space at the top: the status panel and the
   minimap already meet in the middle, so the clock joins the zone chip. */
@media (max-width: 760px) {
  #gateChip { top: auto; bottom: 162px; left: 10px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .quest-chip { transition: none; }
  .levelup-card { animation: none; }
  #abilityBtn.ready,
  #shotBtn.ready,
  .pip.next,
  .quest-chip:has(.quest-chip-badge:not([hidden])) { animation: none; }
}