:root {
  --lime: #ccff00;
  --lime-soft: #b6e61a;
  --gold: #f5c542;
  --gold-deep: #b8841f;
  --rs-yellow: #ffff00;
  --rs-orange: #ff981f;
  --ink: #0b0906;
  --panel: #1f1810;
  --panel-2: #2a2016;
  --stone-hi: #6f6150;
  --stone-mid: #3c3226;
  --stone-lo: #0f0c08;
  --parch: #d8c7a0;
  --parch-ink: #2b1e0e;
  --text: #efe4cc;
  --muted: #b3a483;
  --pixel: 'Pixelify Sans', ui-monospace, monospace;
  --serif: 'Cinzel', Georgia, serif;
  --fell: 'IM Fell English', Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #0d1a17;
  color: var(--text);
  font-family: var(--fell);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Scene ---------- */
.scene { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.scene__bg {
  position: absolute; inset: -3%;
  background: #0d1a17 url('/assets/bg.webp') center 40% / cover no-repeat;
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.02);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .8s ease;
  will-change: transform;
}
@media (max-width: 899px) { .scene__bg { background-image: url('/assets/bg-1280.webp'); background-position: 32% 40%; } }
.scene__embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.7) 100%),
    linear-gradient(to bottom, rgba(5,10,12,.35) 0%, rgba(5,10,12,0) 25%, rgba(5,10,12,0) 55%, rgba(5,8,6,.85) 100%);
  transition: background-color .6s ease;
}
body.is-lobby .scene__bg { filter: blur(3px) brightness(.55) saturate(.9); }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 18px 0;
}
.world-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1 var(--pixel); color: var(--rs-yellow);
  text-shadow: 1px 1px 0 #000;
  padding: 8px 12px; border-radius: 3px;
  background: rgba(15,12,8,.72);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid);
}
.world-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: pulse 2s infinite; }
.world-pill__sep { color: var(--muted); }
@keyframes pulse { 50% { opacity: .45; } }

/* ---------- RuneScape buttons ---------- */
.rs-btn {
  --b1: #4b3f30; --b2: #2d241a;
  position: relative; cursor: pointer; border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 18px/1 var(--pixel); letter-spacing: .02em;
  color: var(--rs-yellow); text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,.4);
  padding: 14px 22px; border-radius: 2px; text-decoration: none;
  background:
    url('/assets/stone.webp') center / 192px,
    linear-gradient(var(--b1), var(--b2));
  background-blend-mode: multiply;
  box-shadow:
    inset 0 0 0 2px #000,
    inset 2px 2px 0 3px rgba(255,236,190,.16),
    inset -2px -2px 0 3px rgba(0,0,0,.45),
    0 4px 0 #000, 0 8px 18px rgba(0,0,0,.55);
  transition: transform .12s ease, color .12s ease, filter .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rs-btn:hover { color: #fff; filter: brightness(1.15); }
.rs-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 3px rgba(0,0,0,.4), 0 1px 0 #000, 0 3px 8px rgba(0,0,0,.5); }
.rs-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.rs-btn[disabled] { cursor: not-allowed; color: #9a8c6a; filter: grayscale(.4) brightness(.85); }
.rs-btn--small { font-size: 14px; padding: 9px 14px; }
.rs-btn--block { width: 100%; flex-direction: column; gap: 6px; padding: 18px 16px; }
.rs-btn__title { font-size: 22px; }
.rs-btn__hint { font: 400 15px/1.2 var(--fell); color: var(--parch); text-shadow: 1px 1px 0 #000; }

.rs-btn--enter {
  margin-top: 26px;
  font-size: clamp(22px, 3.4vw, 34px);
  padding: 22px clamp(38px, 6vw, 72px);
  --b1: #5b4b36; --b2: #2a2016;
  animation: enterGlow 2.6s ease-in-out infinite;
}
.rs-btn--enter:hover { color: var(--lime); }
@keyframes enterGlow {
  0%, 100% { box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 3px rgba(255,236,190,.16), inset -2px -2px 0 3px rgba(0,0,0,.45), 0 4px 0 #000, 0 8px 18px rgba(0,0,0,.55), 0 0 0 rgba(204,255,0,0); }
  50% { box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 3px rgba(255,236,190,.16), inset -2px -2px 0 3px rgba(0,0,0,.45), 0 4px 0 #000, 0 8px 18px rgba(0,0,0,.55), 0 0 38px rgba(204,255,0,.35); }
}
.rs-btn__torch {
  width: 10px; height: 22px; border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff6c0 0 18%, #ffb52e 40%, #ff5a0a 70%, transparent 72%);
  filter: blur(.4px); animation: flicker 1.1s infinite alternate;
  box-shadow: 0 0 16px 4px rgba(255,140,30,.45);
}
.rs-btn__torch--r { animation-delay: -.5s; }
@keyframes flicker {
  0% { transform: scale(1, 1) translateY(0); opacity: .95; }
  40% { transform: scale(.9, 1.12) translateY(-1px); opacity: 1; }
  100% { transform: scale(1.05, .92) translateY(1px); opacity: .85; }
}

/* ---------- Title screen ---------- */
.stage { position: relative; z-index: 10; height: 100%; display: grid; place-items: center; padding: 56px 16px min(24vh, 240px); }
body.is-lobby .stage { padding-bottom: 24px; }
.title {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  animation: rise 1s cubic-bezier(.2,.8,.2,1) both;
}
.title__logo { margin: 0; width: min(720px, 92vw, 74vh); filter: drop-shadow(0 10px 24px rgba(0,0,0,.7)); }
.title__logo img { width: 100%; height: auto; animation: logoFloat 6s ease-in-out infinite; }
@keyframes logoFloat { 50% { transform: translateY(-6px) rotate(-.4deg); } }
.title__tag {
  margin: 6px 0 0; font: 900 clamp(17px, 2.3vw, 26px)/1.2 var(--serif);
  background: linear-gradient(#fff3c4, var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 12px rgba(0,0,0,.8));
}
.title__sub { margin: 6px 0 0; font: italic 400 clamp(15px, 1.7vw, 19px)/1.3 var(--fell); color: var(--parch); text-shadow: 0 2px 6px #000, 0 0 2px #000; }
.title__mint { margin: 18px 0 0; font: 600 15px/1.3 var(--pixel); color: var(--parch); text-shadow: 1px 1px 0 #000, 0 0 10px #000; }
.title__mint b { color: var(--lime); font-weight: 700; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

body.is-lobby .title { display: none; }

/* ---------- Lineup ---------- */
.lineup {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  height: min(31vh, 310px);
  display: flex; justify-content: center; align-items: flex-end;
  gap: 0; padding: 0 8px 6px;
  pointer-events: none;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
body.is-lobby .lineup { transform: translateY(40%); opacity: .0; }
.hero {
  position: relative; pointer-events: auto; cursor: pointer; border: 0; background: none; padding: 0;
  height: var(--h, 78%); margin: 0 -1.2vw;
  animation: heroIn .9s cubic-bezier(.2,.8,.2,1) both, bob 4.2s ease-in-out infinite;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) * 3);
  transform-origin: 50% 100%;
}
.hero img {
  height: 100%; width: auto; max-width: none;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.7)) brightness(.92);
  transition: filter .2s ease, transform .2s ease;
}
.hero::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -4px; height: 14px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.65), transparent 70%);
  z-index: -1;
}
.hero:hover img, .hero:focus-visible img {
  transform: translateY(-10px) scale(1.04);
  filter: drop-shadow(0 0 2px var(--lime)) drop-shadow(0 0 14px rgba(204,255,0,.55)) drop-shadow(0 14px 12px rgba(0,0,0,.7)) brightness(1.05);
}
.hero:focus-visible { outline: none; }
.hero__tag {
  position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%) translateY(6px);
  white-space: nowrap; pointer-events: none; opacity: 0;
  font: 700 14px/1 var(--pixel); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000;
  transition: opacity .15s ease, transform .15s ease;
}
.hero__tag em { font-style: normal; color: #00ff00; }
.hero:hover .hero__tag, .hero:focus-visible .hero__tag { opacity: 1; transform: translateX(-50%) translateY(-6px); }
@keyframes bob { 50% { transform: translateY(-5px); } }
@keyframes heroIn { from { opacity: 0; transform: translateY(40px); } }

/* ---------- Panels ---------- */
.panel {
  position: relative;
  width: min(980px, 100%);
  color: var(--text);
  background:
    linear-gradient(rgba(20,15,10,.86), rgba(14,10,7,.92)),
    url('/assets/stone.webp') center / 256px;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 2px #000,
    inset 0 0 0 5px var(--stone-hi),
    inset 0 0 0 7px var(--stone-mid),
    inset 0 0 0 9px #000,
    inset 0 0 60px rgba(0,0,0,.6),
    0 24px 60px rgba(0,0,0,.7);
  padding: 22px 26px 24px;
  animation: panelIn .45s cubic-bezier(.2,.8,.2,1) both;
}
.panel::before, .panel::after {
  content: ''; position: absolute; width: 18px; height: 18px; top: -4px;
  background: radial-gradient(circle at 40% 35%, #f7dd8a, var(--gold-deep) 55%, #4a3208 75%);
  border-radius: 50%; box-shadow: 0 0 0 2px #000, 0 2px 4px rgba(0,0,0,.6);
}
.panel::before { left: -4px; }
.panel::after { right: -4px; }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.panel__head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; border-bottom: 2px solid #000; box-shadow: 0 2px 0 rgba(255,236,190,.08); margin-bottom: 16px; }
.panel__head h2 {
  flex: 1; margin: 0; font: 900 clamp(20px, 2.6vw, 28px)/1.1 var(--serif);
  background: linear-gradient(#fff3c4, var(--gold) 60%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000);
}
.panel__emblem { width: 40px; height: 40px; }
.panel__x {
  width: 34px; height: 34px; border: 0; cursor: pointer; border-radius: 2px;
  font: 700 16px/1 var(--pixel); color: var(--rs-orange); background: #120d08;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid);
}
.panel__x:hover { color: #fff; }
.panel__lede { margin: 0 0 18px; font-size: 18px; line-height: 1.45; color: var(--parch); text-align: center; }
.panel__stats { margin-top: 16px; text-align: center; font: 600 15px/1.4 var(--pixel); color: var(--muted); }
.panel__stats b { color: var(--lime); }

.lobby { width: 100%; display: grid; place-items: center; }
.welcome-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 620px; margin: 0 auto; }
#stepWelcome { max-width: 680px; margin: 0 auto; }
.panel:has(#stepWelcome:not([hidden])) { width: min(720px, 100%); }

/* ---------- Character creator ---------- */
.creator { display: grid; grid-template-columns: 216px 1fr 1fr; gap: 18px; align-items: stretch; }
.creator__roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start; padding: 2px 6px 2px 2px; max-height: min(480px, 60vh); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--stone-hi) #120d08; }
.slot {
  position: relative; aspect-ratio: 1; border: 0; cursor: pointer; padding: 4px; border-radius: 2px;
  background: radial-gradient(circle at 50% 70%, #3a2e1f, #16100a);
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px var(--stone-mid);
  display: grid; place-items: center; overflow: hidden;
}
.slot img { max-height: 100%; width: auto; filter: drop-shadow(0 3px 2px rgba(0,0,0,.8)); transition: transform .2s ease; }
.slot:hover img { transform: scale(1.08); }
.slot[aria-selected="true"] { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--lime), 0 0 14px rgba(204,255,0,.4); }
.creator__stage { position: relative; display: grid; place-items: end center; min-height: min(440px, 56vh); }
.creator__figure { position: relative; height: min(420px, 54vh); display: grid; place-items: end center; }
.creator__figure img {
  position: relative; z-index: 2; height: min(380px, 48vh); width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.75));
  animation: idle 3.6s ease-in-out infinite;
}
.creator__figure img.swap { animation: swapIn .35s cubic-bezier(.2,.8,.2,1) both, idle 3.6s ease-in-out .35s infinite; }
@keyframes idle { 50% { transform: translateY(-8px); } }
@keyframes swapIn { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.creator__pedestal {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 260px; height: 54px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #7b6a52, #3a2f22 55%, #120d08 72%);
  box-shadow: 0 0 0 2px #000, 0 10px 24px rgba(0,0,0,.7), 0 0 40px rgba(204,255,0,.12);
}
.creator__pedestal::after { content: ''; position: absolute; inset: 22% 18%; border-radius: 50%; box-shadow: 0 0 22px 6px rgba(204,255,0,.28); }
.arrow {
  position: absolute; top: 44%; z-index: 3; width: 42px; height: 42px; border: 0; cursor: pointer; border-radius: 2px;
  font: 700 18px/1 var(--pixel); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000;
  background: #20180f; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px var(--stone-hi), 0 3px 0 #000;
}
.arrow:hover { color: #fff; }
.arrow--l { left: 0; }
.arrow--r { right: 0; }

.creator__sheet {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 18px 16px; border-radius: 2px;
  background: linear-gradient(#e2d3ad, #cdb98c);
  color: var(--parch-ink);
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #8a7449, inset 0 0 30px rgba(90,60,20,.35);
}
.sheet__name { font: 900 26px/1.1 var(--serif); color: #3a2206; }
.sheet__meta { font: 700 15px/1 var(--pixel); color: #5b3c10; }
.sheet__origin { font: 600 14px/1.2 var(--pixel); color: #2f5d06; }
.sheet__kit { margin: 0 0 8px; font: 600 13px/1.4 var(--pixel); color: #5b3c10; }
.sheet__kit b { color: #3a2206; }
.sheet__quip { margin: 2px 0 4px; font: italic 17px/1.35 var(--fell); color: #3b2a14; }
.sheet__skills { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sheet__skills li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 2px;
  background: #3a2e1f; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #5a4a36;
  font: 600 14px/1 var(--pixel); color: var(--parch);
}
.sheet__skills li b { color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; font-weight: 700; }
.rs-btn--mint { margin-top: auto; font-size: 22px; padding: 16px; --b1: #405a12; --b2: #1c2a06; }
.rs-btn--mint:hover:not([disabled]) { color: var(--lime); }
.sheet__status { min-height: 20px; text-align: center; font: 600 14px/1.35 var(--pixel); color: #4a3412; }
.sheet__status a { color: #1d5a00; }

/* ---------- Chatbox ---------- */
.chatbox {
  position: fixed; left: 12px; bottom: 12px; z-index: 15;
  width: min(440px, calc(100vw - 24px));
  background: linear-gradient(rgba(216,199,160,.92), rgba(196,176,134,.92));
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #6d5a3c, 0 8px 22px rgba(0,0,0,.55);
  font: 600 14px/1.35 var(--pixel);
  pointer-events: auto;
}
body.is-title .chatbox { display: none; }
@media (max-width: 1560px), (max-height: 960px) { body.is-creating .chatbox { display: none !important; } }
.chatbox__tabs { display: flex; gap: 2px; padding: 5px 6px 0; }
.chatbox__tabs span { padding: 3px 9px; font-size: 12px; color: #d8c7a0; background: #3a2e1f; box-shadow: inset 0 0 0 1px #000; border-radius: 2px 2px 0 0; }
.chatbox__tabs .is-on { color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; }
.chatbox__log { list-style: none; margin: 0; padding: 6px 12px 10px; height: 104px; overflow-y: auto; color: #000; }
.chatbox__log li { animation: chatIn .25s ease both; }
.chatbox__log .sys { color: #000; }
.chatbox__log .game { color: #7a0000; }
.chatbox__log .good { color: #005f00; }
.chatbox__log .warn { color: #8a3a00; }
.chatbox__log a { color: #0000b8; }
@keyframes chatIn { from { opacity: 0; transform: translateX(-6px); } }

/* ---------- Wallet modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.panel--modal { width: min(440px, 100%); }
.wallets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wallets button {
  width: 100%; display: flex; align-items: center; gap: 12px; cursor: pointer; border: 0; text-align: left;
  padding: 12px 14px; border-radius: 2px;
  font: 700 17px/1 var(--pixel); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000;
  background: #2a2016; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px var(--stone-mid);
}
.wallets button:hover { color: #fff; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px var(--lime); }
.wallets img { width: 30px; height: 30px; border-radius: 6px; }
.wallets small { margin-left: auto; font: 400 13px/1 var(--pixel); color: var(--muted); text-shadow: none; }
.wallets__empty p, .wallet-account__addr { margin: 0 0 14px; text-align: center; font: 600 16px/1.4 var(--pixel); color: var(--parch); }
.wallets__links, .wallet-account__row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wallet-account__addr { word-break: break-all; color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .creator { grid-template-columns: 1fr 1fr; }
  .creator__roster { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); max-height: 142px; }
}
@media (max-width: 899px) {
  .hero:nth-child(1), .hero:nth-child(9) { display: none; }
  .lineup { height: min(26vh, 220px); }
  .hero { margin: 0 -2.5vw; }
}
@media (max-width: 720px) {
  body { overflow-y: auto; }
  body.is-lobby .stage { place-items: start center; padding-top: 70px; padding-bottom: 150px; height: auto; min-height: 100%; }
  .world-pill span:nth-child(n+3) { display: none; }
  .stage { padding-bottom: 26vh; }
  .panel { padding: 16px 16px 18px; }
  .welcome-btns { grid-template-columns: 1fr; }
  .creator { grid-template-columns: 1fr; gap: 12px; }
  .creator__roster { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); max-height: 128px; }
  .creator__stage { min-height: 300px; }
  .creator__figure { height: 290px; }
  .creator__figure img { height: 260px; }
  .creator__pedestal { width: 200px; height: 42px; }
  .hero:nth-child(-n+2), .hero:nth-child(n+7) { display: none; }
  .hero { margin: 0 -1vw; }
  .lineup { height: 24vh; }
  .chatbox { display: none; }
  body.is-lobby .chatbox { display: block; position: fixed; }
  .chatbox__log { height: 70px; }
  .chatbox__tabs { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}