/* ==========================================================================
   Riftstake — reset, typography, app shell, shared keyframes
   ========================================================================== */

*, *::before, *::after{ box-sizing:border-box; }

html, body{ margin:0; padding:0; }

body{
  min-height:100vh;
  background:var(--obsidian);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  margin:0;
  line-height:1.15;
  text-wrap:balance;
}
p{ margin:0; }
button{ font-family:inherit; color:inherit; }
a{ color:var(--ember); text-underline-offset:3px; }

.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

::selection{ background:var(--ember-deep); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
  border-radius:4px;
}

/* Scrollbars — quiet, in-palette. */
*{ scrollbar-width:thin; scrollbar-color:var(--felt-3) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--felt-3); border-radius:var(--r-pill); border:3px solid var(--obsidian); }
*::-webkit-scrollbar-thumb:hover{ background:var(--felt-4); }

/* ── Ambience ──────────────────────────────────────────────────────────────
   Two fixed, non-interactive layers behind everything: a slow-drifting
   colour wash and a fine film grain. Both are pure CSS so there are no
   image assets to ship.
   ------------------------------------------------------------------------ */

.aurora{
  position:fixed; inset:-20vh -20vw; z-index:-2; pointer-events:none;
  background:
    radial-gradient(42vw 38vh at 18% 4%,  rgba(255,152,105,.24), transparent 66%),
    radial-gradient(46vw 40vh at 86% 12%, rgba(203,168,248,.20), transparent 68%),
    radial-gradient(52vw 44vh at 50% 96%, rgba(116,211,238,.16), transparent 70%),
    radial-gradient(120% 120% at 50% -12%, #654e42 0%, var(--obsidian) 64%);
  animation:aurora-drift 26s var(--e-in-out) infinite alternate;
}
@keyframes aurora-drift{
  from{ transform:translate3d(-1.5%, -1%, 0) scale(1.02); }
  to  { transform:translate3d( 1.5%,  1%, 0) scale(1.06); }
}

.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.025;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Shell ─────────────────────────────────────────────────────────────── */

.app{
  max-width:1220px;
  margin:0 auto;
  padding:var(--s-5) var(--s-5) var(--s-8);
}

/* ── Masthead ──────────────────────────────────────────────────────────── */

.masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); flex-wrap:wrap;
  padding-bottom:var(--s-4);
  margin-bottom:var(--s-4);
  border-bottom:1px solid var(--line-soft);
}

.brand{ display:flex; align-items:center; gap:var(--s-3); }
.brand__sigil{
  width:40px; height:40px; flex:none; color:var(--ember);
  filter:drop-shadow(0 0 12px rgba(255,141,92,.45));
  animation:sigil-pulse 5s var(--e-in-out) infinite;
}
@keyframes sigil-pulse{
  0%,100%{ opacity:.92; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.04); }
}
.brand__text{ display:flex; flex-direction:column; gap:1px; }
.brand__name{
  font-family:var(--font-display); font-weight:900; font-size:1.75rem;
  letter-spacing:.005em; line-height:1;
  background:linear-gradient(150deg, var(--brass-soft) 0%, var(--brass) 38%, var(--ember) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand__tag{
  font-size:.66rem; color:var(--ink-faint);
  letter-spacing:.16em; text-transform:uppercase;
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */

.tabs{
  position:relative;
  display:flex; gap:var(--s-1);
  margin-bottom:var(--s-6);
  border-bottom:1px solid var(--line-soft);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }

.tab{
  display:flex; align-items:center; gap:var(--s-2);
  background:none; border:none; cursor:pointer;
  color:var(--ink-faint);
  padding:var(--s-3) var(--s-4) calc(var(--s-3) + 2px);
  font-size:.9rem; font-weight:700; letter-spacing:.01em;
  white-space:nowrap;
  transition:color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.tab svg{
  width:17px; height:17px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.tab:hover{ color:var(--ink-dim); }
.tab.is-active{ color:var(--ember); }
.tab:active{ transform:translateY(1px); }

.tabs__ink{
  position:absolute; bottom:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg, var(--brass), var(--ember));
  border-radius:2px 2px 0 0;
  box-shadow:0 0 12px rgba(255,141,92,.6);
  transition:transform var(--t-med) var(--e-out), width var(--t-med) var(--e-out);
}

/* ── Views ─────────────────────────────────────────────────────────────── */

.view{ display:none; }
.view.is-active{ display:block; animation:view-in .34s var(--e-out) both; }
@keyframes view-in{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

.panel-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-4); flex-wrap:wrap;
  margin-bottom:var(--s-4);
}
.panel-head h2{ font-size:1.45rem; }
.panel-head p{
  margin-top:var(--s-1);
  color:var(--ink-faint); font-size:.85rem; max-width:52ch;
}

.empty-note{
  color:var(--ink-faint); font-size:.88rem;
  padding:var(--s-7) 0; text-align:center;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); flex-wrap:wrap;
  margin-top:var(--s-7); padding-top:var(--s-4);
  border-top:1px solid var(--line-soft);
  color:var(--ink-faint); font-size:.75rem;
}
.foot__stats{ color:var(--ink-faint); font-size:.72rem; letter-spacing:.02em; }

/* ── FX canvas ─────────────────────────────────────────────────────────── */

#fx{ position:fixed; inset:0; pointer-events:none; z-index:var(--z-fx); }

/* ── Shared keyframes ──────────────────────────────────────────────────── */

@keyframes spin      { to{ transform:rotate(360deg); } }
@keyframes pop-in    { from{ opacity:0; transform:scale(.86); } to{ opacity:1; transform:scale(1); } }
@keyframes rise-in   { from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes shake     { 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);}
                       30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);} }
@keyframes flash     { from{ opacity:.85; } to{ opacity:0; } }
@keyframes float-y   { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* ── Reduced motion ────────────────────────────────────────────────────────
   Kill decorative movement, keep opacity transitions so state changes stay
   legible. Duration is also shortened in JS (see util.wait).
   ------------------------------------------------------------------------ */
/* The system preference is the default; Settings can override it either
   way. `.rs-motion-full` opts back into animation on a machine that asks
   for less, `.rs-motion-reduced` opts out on one that does not. app.js
   stamps whichever class applies onto <html>. */

@media (prefers-reduced-motion: reduce){
  :root:not(.rs-motion-full) *,
  :root:not(.rs-motion-full) *::before,
  :root:not(.rs-motion-full) *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  :root:not(.rs-motion-full) .aurora{ animation:none; }
}

.rs-motion-reduced *,
.rs-motion-reduced *::before,
.rs-motion-reduced *::after{
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.01ms !important;
  scroll-behavior:auto !important;
}
.rs-motion-reduced .aurora{ animation:none; }

/* ── Boot splash ─────────────────────────────────────────────────────────
   Held on screen until app.js knows whether the stored session is still
   good, so a returning player never sees the sign-in form flash past.
   ------------------------------------------------------------------------ */

.boot{
  position:fixed; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-4);
  color:var(--ink-faint); font-size:.82rem; letter-spacing:.08em;
}
.boot[hidden]{ display:none; }
.boot__sigil{
  width:52px; height:52px; color:var(--ember);
  filter:drop-shadow(0 0 16px rgba(255,141,92,.45));
  animation:sigil-pulse 2.4s var(--e-in-out) infinite;
}

/* ── Sign-in gate ──────────────────────────────────────────────────────── */

.gate{
  min-height:100vh;
  display:grid; place-items:center;
  padding:var(--s-5);
}
.gate[hidden]{ display:none; }

.gate__card{
  width:100%; max-width:430px;
  display:flex; flex-direction:column; gap:var(--s-4);
  padding:var(--s-6);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:linear-gradient(170deg, var(--felt-1), var(--felt-0));
  box-shadow:var(--sh-3);
  animation:rise-in .4s var(--e-out) both;
}
.gate__brand{ display:flex; align-items:center; gap:var(--s-3); }
.gate__lede{ color:var(--ink-faint); font-size:.82rem; line-height:1.5; }

.gate__switch{
  display:flex; gap:var(--s-1);
  padding:3px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-pill);
  background:var(--felt-0);
}
.gate__tab{
  flex:1;
  border:none; cursor:pointer;
  padding:8px 10px;
  border-radius:var(--r-pill);
  background:transparent; color:var(--ink-faint);
  font-family:inherit; font-size:.8rem; font-weight:700;
  transition:background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.gate__tab.is-on{ background:linear-gradient(180deg, var(--felt-3), var(--felt-2)); color:var(--ink); }

.gate__form{ display:flex; flex-direction:column; gap:var(--s-3); }
.gate__hint{ color:var(--ink-faint); font-size:.72rem; line-height:1.45; }
.gate__error{
  padding:9px 12px;
  border:1px solid color-mix(in srgb, var(--bad) 40%, transparent);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--bad) 12%, transparent);
  color:var(--bad); font-size:.76rem; line-height:1.4;
}
.gate__error[hidden]{ display:none; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width:760px){
  .app{ padding:var(--s-4) var(--s-4) var(--s-7); }
  :root{ --card-w:148px; }
  .brand__name{ font-size:1.4rem; }
  .panel-head{ align-items:flex-start; }
}
@media (max-width:480px){
  :root{ --card-w:132px; }
  .brand__tag{ display:none; }
  .gate__card{ padding:var(--s-5); }
}