/* ==================================================================
   ASTRAL TERRITORY — obelisk / element design system
   ------------------------------------------------------------------
   Monolithic, dark, mineral. The page is a stack of stone slabs with
   lit seams between them. Nothing is rounded; nothing floats on a
   drop shadow. Light comes from the element vein, never from above.

   Loaded by index.html, auth.html, verify.html and the item bank.
   Layer this AFTER bootstrap.min.css.
   ================================================================== */

:root {
  /* Accent — ice blue, matched to the hero artwork and the reference.
     EVERYTHING keys off these four lines. To go back to the original
     element purple, restore:
        --element: #6b5ce0;  --element-hi: #9b8dff;
        --element-low: #3a3170;  --element-rgb: 107, 92, 224; */
  --element:      #35b6e8;
  --element-hi:   #7fdcff;
  --element-low:  #17536f;
  --element-veil: rgba(53, 182, 232, 0.14);
  --element-rgb:  53, 182, 232;

  /* Stone */
  --void:    #0a0b10;   /* page floor */
  --slab:    #12141b;   /* strips, panels */
  --slab-2:  #171a23;   /* raised slab */
  --slab-3:  #1e2230;   /* hover */
  --seam:    #2b3040;   /* the hairline between slabs */

  /* Ink */
  --bone:  #e8eaf0;
  --ash:   #8a8f9c;
  --stone: #5c6270;

  /* Material categories, desaturated toward mineral */
  --ore:     #4c9a63;
  --sulfur:  #c2762c;
  --gem:     #35b6e8;

  --danger: #d9534f;

  /* Bootstrap bridge */
  --bs-primary: #35b6e8;
  --bs-primary-rgb: 53, 182, 232;
  --bs-body-bg: #0a0b10;
  --bs-body-color: #e8eaf0;
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */

body {
  background: var(--void);
  color: var(--bone);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 0.9375rem;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--element); color: #fff; }

/* Carved type: condensed, faceted, always tracked out when in caps. */
h1, h2, h3, h4, h5, h6, .display-face {
  font-family: "Chakra Petch", "IBM Plex Sans", sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.eyebrow {
  font-family: "Chakra Petch", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}

.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--element-hi);
  background: var(--element-veil);
  padding: 0.05em 0.35em;
  font-size: 0.875em;
}

a { color: var(--element-hi); text-decoration: none; }
a:hover { color: #b9aeff; }

/* ------------------------------------------------------------------
   Slabs and seams — the structural motif
   ------------------------------------------------------------------ */

/* A horizontal band of stone. Faceting is a shallow diagonal grain,
   not a pattern: it should read as material, not as decoration. */
.slab {
  background-color: var(--slab);
  background-image: repeating-linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.012) 0px,
    rgba(255, 255, 255, 0.012) 1px,
    transparent 1px,
    transparent 7px
  );
}

.slab-deep { background-color: var(--void); }
.slab-raised { background-color: var(--slab-2); }

/* The seam: a hairline with element light escaping from beneath it. */
.seam-b { border-bottom: 1px solid var(--seam); box-shadow: 0 1px 0 rgba(var(--element-rgb), 0.10); }
.seam-t { border-top: 1px solid var(--seam); }

/* ------------------------------------------------------------------
   Navbar / strips
   ------------------------------------------------------------------ */

.navbar { --bs-navbar-padding-y: 0.6rem; }

.navbar-brand {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.9375rem;
  color: var(--bone) !important;
}

/* The brand mark is a miniature obelisk, not a rounded square. */
.brand-mark {
  width: 14px;
  height: 26px;
  clip-path: polygon(50% 0%, 100% 18%, 82% 100%, 18% 100%, 0% 18%);
  background: linear-gradient(170deg, var(--element-hi), var(--element) 55%, var(--element-low));
  box-shadow: 0 0 14px rgba(var(--element-rgb), 0.55);
  flex-shrink: 0;
}

/* Strip of context beneath the navbar. */
.strip {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: "Chakra Petch", sans-serif;
  color: var(--stone);
}

.strip .current { color: var(--bone); }
.strip .divider { color: var(--seam); padding: 0 0.5rem; }

/* Toolbar strip — controls sit here. */
.strip-tools { padding-top: 0.6rem; padding-bottom: 0.6rem; }

/* ------------------------------------------------------------------
   Buttons — modelled on the ARK: Survival Ascended in-game UI:
   soft 6px radius, dark translucent fill, one thin luminous border,
   wide-tracked uppercase label. Quiet at rest, lit on hover.
   ------------------------------------------------------------------ */

.btn {
  border-radius: 6px;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  padding: 0.6rem 1.6rem;
  position: relative;
  will-change: transform;

  /* SLOW half of the cycle. A transition declared on the base rule is
     the one that runs on the way OUT, so leaving the button lets it
     drift back over ~450ms instead of snapping. */
  transition:
    background-color 450ms ease-out,
    border-color     450ms ease-out,
    color            450ms ease-out,
    box-shadow       450ms ease-out,
    transform        380ms cubic-bezier(0.22, 0.68, 0.24, 1);
}

/* FAST half. Declared on :hover, so it governs the way IN — the button
   lights up almost immediately, then falls back slowly on exit. */
.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  transition-duration: 90ms, 90ms, 90ms, 110ms, 130ms;
  transition-timing-function: ease-out;
}

/* Press: pushed into the panel. Must come after :hover to win the tie. */
.btn:not(:disabled):active {
  transform: translateY(2px) scale(0.985);
  transition-duration: 40ms;
  box-shadow:
    inset 0 3px 9px -2px rgba(0, 0, 0, 0.75),
    inset 0 0 16px -6px rgba(var(--element-rgb), 0.6);
  filter: brightness(0.92);
}

/* Primary: the fill carries element light. */
.btn-element {
  background: rgba(var(--element-rgb), 0.30);
  border: 1px solid rgba(var(--element-rgb), 0.85);
  color: #ece9ff;
  box-shadow: inset 0 0 18px -6px rgba(var(--element-rgb), 0.85);
}
.btn-element:hover,
.btn-element:focus-visible,
.btn-element:not(:disabled):active {
  background: rgba(var(--element-rgb), 0.48);
  border-color: var(--element-hi);
  color: #fff;
  box-shadow: inset 0 0 22px -4px rgba(var(--element-rgb), 0.9),
              0 0 16px -4px rgba(var(--element-rgb), 0.6);
}

/* Secondary: the default in-game button — barely there until hovered. */
.btn-hollow {
  background: rgba(22, 30, 48, 0.55);
  border: 1px solid rgba(155, 141, 255, 0.32);
  color: #c9cede;
}
.btn-hollow:hover,
.btn-hollow:focus-visible,
.btn-hollow:not(:disabled):active {
  background: rgba(var(--element-rgb), 0.20);
  border-color: rgba(var(--element-rgb), 0.8);
  color: #ece9ff;
  box-shadow: 0 0 14px -4px rgba(var(--element-rgb), 0.55);
}

.btn-vein {
  background: transparent;
  border: 1px solid rgba(var(--element-rgb), 0.7);
  color: var(--element-hi);
}
.btn-vein:hover,
.btn-vein:focus-visible,
.btn-vein:not(:disabled):active {
  background: rgba(var(--element-rgb), 0.28);
  color: #fff;
  box-shadow: 0 0 14px -4px rgba(var(--element-rgb), 0.55);
}

/* Kept as a no-op so existing markup doesn't break: ARK buttons aren't
   notched, the panels around them are. */
.btn-notch { }

.btn-quiet {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ash);
}
.btn-quiet:hover { color: var(--bone); border-color: var(--seam); }

.btn:disabled, .btn.disabled { opacity: 0.32; }

.btn:focus-visible {
  outline: 2px solid var(--element-hi);
  outline-offset: 2px;
  box-shadow: none;
}

/* ------------------------------------------------------------------
   Panels — a slab you can put content on
   ------------------------------------------------------------------ */

.panel {
  background: var(--slab);
  border: 1px solid var(--seam);
  border-radius: 0;
}

.panel-hd {
  border-bottom: 1px solid var(--seam);
  padding: 0.75rem 1.25rem;
  background: var(--slab-2);
}

.panel-bd { padding: 1.5rem; }

/* Note panel: the element vein runs down its left edge. */
.panel-note {
  background: var(--element-veil);
  border: 1px solid rgba(var(--element-rgb), 0.35);
  border-left: 2px solid var(--element);
  border-radius: 0;
  padding: 0.85rem 1rem;
}

.panel-warn {
  background: rgba(194, 118, 44, 0.10);
  border: 1px solid rgba(194, 118, 44, 0.42);
  border-left: 2px solid var(--sulfur);
  border-radius: 0;
  padding: 0.85rem 1rem;
}

.panel-danger {
  background: rgba(217, 83, 79, 0.10);
  border: 1px solid rgba(217, 83, 79, 0.42);
  border-left: 2px solid var(--danger);
  border-radius: 0;
  padding: 0.85rem 1rem;
}

/* ------------------------------------------------------------------
   Frames — the notched card from the reference. Two stacked clipped
   layers so the 1px border follows the cut corners instead of being
   sliced off by clip-path.
   ------------------------------------------------------------------ */

.frame {
  --cut: 15px;
  position: relative;
  padding: 1px;
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut)
  );
  background: rgba(var(--element-rgb), 0.55);
  transition: background-color 0.16s ease;
}

.frame {
  transition:
    background-color 450ms ease-out,
    transform 380ms cubic-bezier(0.22, 0.68, 0.24, 1);
  will-change: transform;
}

.frame:hover {
  background: rgba(var(--element-rgb), 0.95);
  transform: translateY(-2px);
  transition-duration: 110ms, 150ms;
}

a.frame:not(:disabled):active {
  transform: translateY(2px) scale(0.99);
  transition-duration: 40ms;
  filter: brightness(0.93);
}

/* Icon-only buttons share the button feel. */
.icon-btn {
  transition:
    color 450ms ease-out,
    border-color 450ms ease-out,
    box-shadow 450ms ease-out,
    transform 380ms cubic-bezier(0.22, 0.68, 0.24, 1);
  will-change: transform;
}
.icon-btn:hover {
  transform: translateY(-1px);
  transition-duration: 90ms;
  box-shadow: 0 0 14px -4px rgba(var(--element-rgb), 0.55);
}
.icon-btn:not(:disabled):active {
  transform: translateY(2px) scale(0.985);
  transition-duration: 40ms;
  filter: brightness(0.92);
}

.frame-inner {
  height: 100%;
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut)
  );
  background: linear-gradient(160deg, rgba(23, 28, 46, 0.92), rgba(12, 14, 24, 0.94));
  padding: 1.5rem 1.15rem;
  transition: background 0.16s ease;
}

.frame:hover .frame-inner {
  background: linear-gradient(160deg, rgba(34, 34, 62, 0.94), rgba(15, 16, 30, 0.96));
}

/* Corner brackets, as on the ARK pause panel. */
.bracketed { position: relative; }
.bracketed::before,
.bracketed::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--element-hi);
  opacity: 0.85;
  pointer-events: none;
}
.bracketed::before { top: -1px;    left: -1px;  border-right: 0; border-bottom: 0; }
.bracketed::after  { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

/* ------------------------------------------------------------------
   Stat bar — segmented readout strip
   ------------------------------------------------------------------ */

.statbar {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgba(var(--element-rgb), 0.4);
  border-radius: 4px;
  background: rgba(12, 15, 26, 0.72);
  backdrop-filter: blur(3px);
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.6rem;
  flex: 1 1 auto;
  border-right: 1px solid rgba(var(--element-rgb), 0.22);
}
.stat:last-child { border-right: 0; }

.stat .stat-icon { color: var(--element-hi); font-size: 1rem; opacity: 0.85; }
.stat .stat-label {
  font-family: "Chakra Petch", sans-serif;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.15rem;
}
.stat .stat-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.875rem;
  color: var(--element-hi);
}
.stat .stat-value.plain { color: var(--bone); }

/* ------------------------------------------------------------------
   Tabs — the active one is lit from below by the vein
   ------------------------------------------------------------------ */

.tabs { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }

.tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--stone);
  font-family: "Chakra Petch", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  transition: color 0.14s ease, border-color 0.14s ease;
}

.tab:hover { color: var(--bone); }

.tab.active {
  color: var(--element-hi);
  border-bottom-color: var(--element);
  box-shadow: 0 6px 14px -8px rgba(var(--element-rgb), 0.9);
}

.tab:focus-visible { outline: 2px solid var(--element-hi); outline-offset: -2px; }

/* ------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------ */

.form-label {
  font-family: "Chakra Petch", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 0.4rem;
}

.form-control, .input-group-text {
  background: var(--void);
  border: 1px solid var(--seam);
  border-radius: 0;
  color: var(--bone);
  font-size: 0.9375rem;
  padding: 0.55rem 0.8rem;
}

.form-control::placeholder { color: var(--stone); }

.form-control:focus {
  background: var(--void);
  border-color: var(--element);
  box-shadow: 0 0 0 1px var(--element), 0 0 18px -4px rgba(var(--element-rgb), 0.7);
  color: var(--bone);
}

.form-control.is-invalid {
  border-color: var(--danger);
  background-image: none;
  box-shadow: none;
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 1px var(--danger);
}

.input-group-text { color: var(--stone); }

.invalid-feedback { color: #e8807c; font-size: 0.75rem; }
.field-hint { font-size: 0.75rem; color: var(--stone); }

/* ------------------------------------------------------------------
   Item rows — each item is its own slab, queued ones grow a vein
   ------------------------------------------------------------------ */

.item-list { display: flex; flex-direction: column; gap: 1px; }

.item-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--slab);
  border: 0;
  border-left: 2px solid transparent;
  padding: 0.7rem 1rem;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.item-row:hover { background: var(--slab-3); }

.item-row.queued {
  border-left-color: var(--element);
  background: linear-gradient(90deg, var(--element-veil), transparent 45%), var(--slab-2);
}

.item-row.pending { opacity: 0.45; }

.item-name { font-size: 0.9375rem; color: var(--bone); }

.item-sub {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--stone);
  letter-spacing: -0.01em;
}

.item-amount {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  color: var(--bone);
  white-space: nowrap;
}

/* Category chip: a cut shard, angled like the obelisk. */
.item-icon {
  width: 32px;
  height: 32px;
  clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0b10;
  font-size: 12px;
  flex-shrink: 0;
}

.item-icon.resource  { background: var(--ore); }
.item-icon.blueprint { background: var(--gem); color: #fff; }
.item-icon.trophy    { background: var(--sulfur); }

.badge-quality {
  background: transparent;
  border: 1px solid var(--element);
  color: var(--element-hi);
  border-radius: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.1rem 0.35rem;
  vertical-align: middle;
}

/* ------------------------------------------------------------------
   Readouts — bottom stats strip
   ------------------------------------------------------------------ */

.readout {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: "Chakra Petch", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

.readout .value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.875rem;
  letter-spacing: 0;
  color: var(--bone);
  text-transform: none;
}

.readout .value.lit { color: var(--element-hi); }

/* Capacity bar: a thin seam that fills with element light. */
.capacity-track {
  width: 74px;
  height: 3px;
  background: var(--seam);
  overflow: hidden;
}
.capacity-fill {
  height: 100%;
  background: var(--element);
  box-shadow: 0 0 8px rgba(var(--element-rgb), 0.9);
  transition: width 0.3s ease;
}

/* ------------------------------------------------------------------
   States
   ------------------------------------------------------------------ */

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--ash);
}

.state-glyph {
  font-size: 1.5rem;
  color: var(--element);
  margin-bottom: 1rem;
  opacity: 0.75;
}

.state-title {
  font-family: "Chakra Petch", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 0.5rem;
}

.state-detail { font-size: 0.875rem; max-width: 30rem; }

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */

.site-footer {
  background: var(--void);
  border-top: 1px solid var(--seam);
  color: var(--stone);
  font-size: 0.75rem;
}

/* ------------------------------------------------------------------
   Scrollbar
   ------------------------------------------------------------------ */

* { scrollbar-width: thin; scrollbar-color: var(--seam) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--void); }
*::-webkit-scrollbar-thumb { background: var(--seam); border: 3px solid var(--void); }
*::-webkit-scrollbar-thumb:hover { background: var(--element-low); }

/* ------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Colour still changes on hover and press — only the movement goes,
     so the buttons stay legible as buttons without any travel. */
  .btn:hover, .btn:focus-visible, .btn:not(:disabled):active,
  .frame:hover, a.frame:not(:disabled):active,
  .icon-btn:hover, .icon-btn:not(:disabled):active {
    transform: none !important;
  }
}