:root {
  --gold: #ffd100;
  --gold-soft: #f4c35a;
  --gold-edge: #a8812f;
  --red-hi: #a31212;
  --red: #6e0606;
  --red-lo: #3a0202;
  --ink: #0a0604;
  --text: #f3eadb;
  --muted: #b9a88a;
  --ok: #7fe07f;
  --err: #ff6b5a;
  --title: "Cinzel", "Times New Roman", serif;
  --body: "Inter", system-ui, sans-serif;
  /* panel placement (overwritten by app.js to track the portal in the video) */
  --panel-x: 50vw;
  --panel-y: 58vh;
  --panel-w: 300px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

/* ───────── idle background ───────── */
.bg { position: fixed; inset: 0; overflow: hidden; }

.bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: 51% 58%;
  animation: breathe 28s ease-in-out infinite alternate;
}

@keyframes breathe {
  from { transform: scale(1.0); }
  to   { transform: scale(1.045); }
}

#embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 51% 55%, transparent 45%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.25), transparent 18%, transparent 78%, rgba(0,0,0,.6));
}

.fade-in-cover {
  position: fixed; inset: 0; background: #000; pointer-events: none; z-index: 50;
  animation: uncover 2.4s ease-out .2s forwards;
}
@keyframes uncover { to { opacity: 0; visibility: hidden; } }

/* ───────── logo ───────── */
.logo {
  position: fixed; top: 18px; left: 18px; z-index: 5;
  width: clamp(170px, 19vw, 330px);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.7));
  opacity: 0;
  animation: logoIn 2.2s ease-out 1.2s forwards, logoGlow 6s ease-in-out 3.4s infinite;
}
@keyframes logoIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 6px 18px rgba(0,0,0,.7)) drop-shadow(0 0 0 rgba(255,190,60,0)); }
  50%      { filter: drop-shadow(0 6px 18px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(255,190,60,.35)); }
}

/* ───────── $AETHUS card (top-right): a WoW frame like the login ───────── */
.creator {
  position: fixed; top: 18px; right: 18px; z-index: 6;
  width: 404px;
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 8px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120,70,20,.28), transparent 60%),
    linear-gradient(180deg, rgba(26,17,10,.94), rgba(10,6,3,.92));
  border: 2px solid var(--gold-edge);
  border-radius: 6px;
  box-shadow:
    0 0 0 1px #000,
    inset 0 0 0 1px #000,
    inset 0 0 0 3px rgba(201,162,74,.28),
    inset 0 1px 12px rgba(0,0,0,.8),
    0 8px 24px rgba(0,0,0,.7);
  opacity: 0; animation: panelFade 1.2s ease-out 2.4s forwards;
}
/* gold studs on the top corners, like the frame around the logo */
.creator::before, .creator::after {
  content: ""; position: absolute; top: -6px; width: 10px; height: 10px;
  background: linear-gradient(135deg, #ffe9a0, #b8862a 60%, #6b4a12);
  border: 1px solid #000; transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(255,200,90,.6);
}
.creator::before { left: -6px; }
.creator::after { right: -6px; }

.frame-title {
  margin: 0; text-align: center;
  font: 700 22px/1 var(--title); letter-spacing: .06em; color: var(--gold);
  text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 2px 10px rgba(0,0,0,.9);
}
.creator-gh {
  align-self: center;
  display: inline-flex; align-items: center; gap: 7px;
  margin: -2px 0 2px;
  font: 700 13px var(--title); color: var(--gold-soft); text-decoration: none;
  text-shadow: 1px 1px 0 #000;
}
.creator-gh svg { width: 16px; height: 16px; color: #fff; flex: none; }
.creator-gh b { color: #fff2a8; }
.creator-gh:hover span { text-decoration: underline; text-underline-offset: 3px; }
.creator-gh::before, .creator-gh::after { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,209,0,.55)); }
.creator-gh::after { transform: scaleX(-1); }

.field { display: flex; flex-direction: column; gap: 3px; }
.field-label {
  font: 700 12px var(--title); color: var(--gold); letter-spacing: .03em;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000;
}
.field-label b { color: #fff; font-size: 13px; margin-right: 2px; }
/* address box: the same look as the login's input */
.field-box {
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 4px 0 9px;
  background: linear-gradient(#0d0d0f, #1c1c20);
  border: 2px solid #6d6a63; border-radius: 4px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.9), 0 0 0 1px #000;
}
.field-box:hover { border-color: #c9a24a; }
.field-box a {
  flex: 1; min-width: 0;
  font: 500 11.5px/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: #f3eadb; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.field-box a:hover { color: #fff2a8; }
/* copy: a tiny version of the red WoW button */
.copy-btn {
  flex: none; height: 22px; padding: 0 10px;
  font: 700 11px var(--title); color: var(--gold);
  background: linear-gradient(to bottom, var(--red-hi) 0%, var(--red) 48%, var(--red-lo) 52%, #520404 100%);
  border: 1px solid var(--gold-edge); border-radius: 3px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,180,140,.3), 0 0 0 1px #000;
  text-shadow: 1px 1px 0 #000;
}
.copy-btn:hover { filter: brightness(1.25); color: #fff2a8; }

/* buy: the login's big red button, with a slow gold glow */
.wow-btn--buy { margin-top: 4px; height: 38px; font-size: 17px; animation: buyGlow 2.8s ease-in-out infinite; }
@keyframes buyGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,180,140,.35), inset 0 -2px 4px rgba(0,0,0,.5), 0 0 0 1px #000, 0 3px 10px rgba(0,0,0,.65), 0 0 0 rgba(255,200,80,0); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,180,140,.35), inset 0 -2px 4px rgba(0,0,0,.5), 0 0 0 1px #000, 0 3px 10px rgba(0,0,0,.65), 0 0 16px rgba(255,200,80,.55); }
}
.frame-note {
  margin: 0; text-align: center;
  font: 500 11px/1.3 var(--body); color: var(--muted);
  text-shadow: 1px 1px 0 #000;
}

/* ───────── panel in the portal ───────── */
.panel {
  position: fixed; z-index: 10;
  left: var(--panel-x); top: var(--panel-y);
  width: var(--panel-w);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  opacity: 0;
  animation: panelIn 1.4s ease-out 1.8s forwards;
}
/* soft shadow behind the fields so gold text reads over the bright sky in the portal */
.panel::before {
  content: ""; position: absolute; inset: -34px -48px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(10,4,0,.62) 0%, rgba(10,4,0,.42) 45%, transparent 72%);
  filter: blur(6px);
}
@keyframes panelIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }

.panel section { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }

.wow-label {
  font-family: var(--title); font-weight: 700;
  color: var(--gold);
  font-size: 17px; letter-spacing: .02em;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 2px 8px rgba(0,0,0,.9);
  margin-top: 4px;
}

.wow-input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font: 500 14px/1 var(--body);
  color: #fff;
  text-align: center;
  background: linear-gradient(#0d0d0f, #1c1c20);
  border: 2px solid #6d6a63;
  border-radius: 4px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.9), 0 0 0 1px #000, 0 2px 10px rgba(0,0,0,.6);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.wow-input::placeholder { color: #77736a; }
.wow-input:focus { border-color: #c9a24a; box-shadow: inset 0 2px 6px rgba(0,0,0,.9), 0 0 0 1px #000, 0 0 12px rgba(255,200,80,.35); }
.wow-input.invalid { border-color: #b23a2a; }
.wow-input.valid { border-color: #4f9a4f; }

/* WoW-style red button with gold rim */
.wow-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 140px; height: 32px;
  padding: 0 18px;
  font: 700 15px/1 var(--title);
  color: var(--gold);
  text-decoration: none;
  text-shadow: 1px 1px 0 #000, 0 0 4px rgba(0,0,0,.8);
  background: linear-gradient(to bottom, var(--red-hi) 0%, var(--red) 48%, var(--red-lo) 52%, #520404 100%);
  border: 2px solid var(--gold-edge);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255,180,140,.35),
    inset 0 -2px 4px rgba(0,0,0,.5),
    0 0 0 1px #000,
    0 3px 10px rgba(0,0,0,.65);
  cursor: pointer;
  user-select: none;
  transition: filter .12s, transform .06s;
}
.wow-btn:hover { filter: brightness(1.25); color: #fff2a8; }
.wow-btn:active { transform: translateY(1px); filter: brightness(.95); }
.wow-btn:focus-visible { outline: 2px solid #ffe9a0; outline-offset: 2px; }
.wow-btn[disabled] { filter: grayscale(.7) brightness(.7); cursor: wait; }
.wow-btn--wide { width: 100%; }
.wow-btn--big { height: 40px; font-size: 18px; }
/* secondary: dark stone instead of red */
.wow-btn--dark {
  margin-top: 6px;
  color: #f1e3c0;
  background: linear-gradient(to bottom, #3a342c 0%, #221d17 48%, #16120d 52%, #0e0b08 100%);
}
.wow-btn--dark:hover { color: #fff2a8; }
.wow-btn--small { min-width: 150px; height: 28px; font-size: 13px; padding: 0 12px; }

.fox {
  width: 18px; height: 18px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23e2761b' d='M29 3l-11 8 2-5z'/%3E%3Cpath fill='%23e4761b' d='M3 3l11 8-2-5zM25 22l-3 5 6 2 2-7zM2 22l2 7 6-2-3-5z'/%3E%3Cpath fill='%23e4761b' d='M10 14l-2 3 6 .3-.2-6.3zM22 14l-4-3.2-.1 6.5 6-.3zM10 27l4-2-3-2.5zM18 25l4 2-1-4.5z'/%3E%3Cpath fill='%23d7c1b3' d='M22 27l-4-2 .3 2.6v1.1zM10 27l3.7 1.7v-1.1l.3-2.6z'/%3E%3Cpath fill='%23233447' d='M13.8 20.6l-3.2-.9 2.2-1zM18.2 20.6l1-1.9 2.2 1z'/%3E%3Cpath fill='%23cd6116' d='M10 27l.6-5-3.7.1zM21.4 22l.6 5 3.1-4.9zM24 17l-6 .3.5 3.3 1-1.9 2.2 1zM10.6 19.7l2.2-1 1 1.9.5-3.3-6-.3z'/%3E%3Cpath fill='%23f6851b' d='M8 17l2.5 4.9-.1-2.2zM21.6 19.7l-.1 2.2L24 17zM14 17.3l-.5 3.3.6 3.4.1-4.5zM18 17.3l-.3 2.2.1 4.5.7-3.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 1px 0 #000);
}

.divider {
  width: 100%; display: flex; align-items: center; gap: 10px;
  margin: 6px 0 0;
  font: 500 12px var(--title); color: var(--muted); text-transform: uppercase; letter-spacing: .2em;
  text-shadow: 1px 1px 0 #000;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,209,0,.55), transparent);
}

.wallet-card {
  width: 100%;
  padding: 10px 12px;
  text-align: center;
  background: rgba(8,6,4,.72);
  border: 1px solid rgba(168,129,47,.7);
  border-radius: 6px;
  box-shadow: 0 0 0 1px #000, 0 4px 14px rgba(0,0,0,.6);
}
.wallet-addr { font: 600 16px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #fff; letter-spacing: .02em; }
.wallet-mode { margin-top: 4px; font: 500 12px var(--body); color: var(--muted); }
.wallet-mode .tag { color: var(--ok); }
.wallet-mode .tag.guest { color: var(--gold-soft); }

.link-btn {
  background: none; border: 0; cursor: pointer;
  font: 500 13px var(--title); color: var(--gold-soft);
  text-shadow: 1px 1px 0 #000; text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: #fff2a8; }

.status {
  min-height: 1.3em; margin: 10px 0 0; max-width: 100%;
  font: 500 13px/1.35 var(--body); text-align: center;
  color: var(--text);
  text-shadow: 1px 1px 0 #000, 0 0 6px #000;
}
.status.err { color: var(--err); }
.status.ok { color: var(--ok); }

/* ───────── corners ───────── */
.corner {
  position: fixed; bottom: 54px; z-index: 10;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; animation: panelFade 1.2s ease-out 2.2s forwards;
}
.corner--left { left: 18px; align-items: flex-start; }
.corner--right { right: 18px; align-items: flex-end; }
@keyframes panelFade { to { opacity: 1; } }

.remember {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 500 13px var(--title); color: var(--gold);
  text-shadow: 1px 1px 0 #000, 0 0 6px #000;
}
.remember input { position: absolute; opacity: 0; pointer-events: none; }
.remember .box {
  width: 15px; height: 15px; border: 1px solid #8f8a7d; border-radius: 2px;
  background: #111; box-shadow: inset 0 1px 3px #000;
  display: grid; place-items: center;
}
.remember input:checked + .box::after { content: "✓"; color: var(--gold); font: 700 12px/1 var(--body); }
.remember input:focus-visible + .box { outline: 2px solid #ffe9a0; outline-offset: 2px; }

.volume { width: 150px; accent-color: #c9a24a; cursor: pointer; }

.footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center; align-items: flex-end;
  padding: 0 12px 8px;
  font: 400 12px/1.25 var(--body); color: #e8dcc6;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}
.footer .version { position: absolute; left: 12px; bottom: 8px; }

/* ───────── small screens ───────── */
@media (max-width: 760px), (max-height: 520px) {
  /* phones: one scrolling column (logo, card, login, buttons, footer) instead of fixed layers, so
     nothing overlaps on short screens; the background video and the embers stay fixed behind */
  html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
  body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 16px 12px; }
  .logo { position: relative; top: auto; left: auto; width: min(62vw, 280px); animation: logoInMobile 2.2s ease-out 1.2s forwards; }
  @keyframes logoInMobile { from { opacity: 0; } to { opacity: 1; } }
  .creator { position: relative; top: auto; right: auto; width: min(100%, 340px); padding: 12px 12px 10px; gap: 7px; }
  .panel {
    position: relative; left: auto; top: auto; transform: none;
    width: min(100%, 340px);
    padding: 14px; border-radius: 8px;
    background: rgba(8,5,3,.55);
    backdrop-filter: blur(2px);
    animation: panelFade 1.2s ease-out 1.8s forwards;
  }
  .corner { position: relative; bottom: auto; left: auto; right: auto; width: min(100%, 340px); gap: 6px; }
  .corner--left { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .corner--right { flex-direction: row; justify-content: space-between; align-items: center; }
  .wow-btn--small { min-width: 0; font-size: 12px; }
  .volume { width: 120px; }
  .footer { position: relative; padding: 4px 0 0; justify-content: flex-start; width: min(100%, 340px); }
  .footer .version { position: static; }
  .footer .copyright { display: none; }
  .frame-note { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .bg video, .logo { animation: none; opacity: 1; }
}