: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); }
/* Brand-kit hero (textless): the backdrop of the lobby and character creator. */
.scene__hero {
  position: absolute; inset: -3%;
  background: #101b22 url('/assets/brand/hero.webp') 50% 30% / cover no-repeat;
  opacity: 0; filter: blur(2px) brightness(.5) saturate(.95);
  transition: opacity .8s ease;
}
body.is-lobby .scene__hero { opacity: 1; }

/* ---------- 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; } }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.topbar__tg { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.topbar__tg svg { flex: none; }

/* ---------- 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 { position: relative; }
.title__logo::before { content: ""; position: absolute; inset: 18% 8% 22%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(173,255,26,.28), rgba(173,255,26,0)); filter: blur(18px); animation: logoGlow 5s ease-in-out infinite; }
.title__logo img { width: 100%; height: auto; animation: logoFloat 6s ease-in-out infinite; }
/* a gold glint that runs across the lettering, masked to the wordmark's own shape */
.title__shine { position: absolute; inset: 0; pointer-events: none; animation: logoFloat 6s ease-in-out infinite;
  display: none; overflow: hidden; }
.title__shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22%; mix-blend-mode: screen;
  background: linear-gradient(100deg, rgba(255,240,190,0) 0%, rgba(255,240,190,.55) 45%, rgba(255,255,255,.8) 50%, rgba(255,240,190,.55) 55%, rgba(255,240,190,0) 100%);
  transform: translateX(-120%) skewX(-12deg); animation: logoShine 7s ease-in-out 1.2s infinite; }
@keyframes logoFloat { 50% { transform: translateY(-6px) rotate(-.4deg); } }
@keyframes logoShine { 0% { transform: translateX(-120%) skewX(-12deg); } 28%, 100% { transform: translateX(560%) skewX(-12deg); } }
@keyframes logoGlow { 50% { opacity: .55; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .title__shine, .title__logo::before { display: none; } }
.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); }
.panel__contract { margin-top: 8px; text-align: center; font: 400 13px/1.4 var(--pixel); color: var(--muted); }
.panel__contract a { color: var(--parch); }
.panel__contract a:hover { 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; }
.rs-btn--play { grid-column: 1 / -1; text-decoration: none; --b1: #405a12; --b2: #1c2a06; }
.rs-btn--play:hover .rs-btn__title { color: var(--lime); }
#stepWelcome { max-width: 680px; margin: 0 auto; }
.panel:has(#stepWelcome:not([hidden])) { width: min(720px, 100%); }

/* ---------- Character creator (near full-screen) ---------- */
body.is-creating .stage { padding: 58px 12px 12px; place-items: stretch center; }
.panel:has(#stepCreate:not([hidden])) { width: min(1480px, 100%); max-width: 100%; min-width: 0; height: calc(100vh - 72px); display: flex; flex-direction: column; padding: 18px 22px 20px; }
.panel:has(#stepCreate:not([hidden])) .panel__head { margin-bottom: 12px; padding-bottom: 10px; }
.creator { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(360px, 1.2fr) minmax(300px, .85fr); gap: 18px; align-items: stretch; }
.creator > * { min-width: 0; }
.creator__pick { display: flex; flex-direction: column; min-height: 0; }
.creator__pickhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.creator__pickhead h3 { margin: 0; font: 900 18px/1 var(--serif); letter-spacing: .04em; color: var(--gold); text-shadow: 1px 1px 0 #000; text-transform: uppercase; }
.creator__count { font: 600 13px/1 var(--pixel); color: var(--muted); }
.creator__roster { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; align-content: start; padding: 4px 8px 4px 2px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--stone-hi) #120d08; }
.slot {
  position: relative; display: grid; grid-template-rows: 150px auto; gap: 6px; padding: 8px 6px 9px; cursor: pointer; border: 0; border-radius: 3px;
  background: radial-gradient(ellipse at 50% 85%, rgba(204,255,0,.08), transparent 60%), #1a130c;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid);
  transition: transform .15s ease, box-shadow .15s ease;
}
.slot:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-hi), 0 6px 14px rgba(0,0,0,.45); }
.slot:active { transform: translateY(0); }
.slot img { width: 100%; height: 150px; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 4px 3px rgba(0,0,0,.8)); transition: transform .2s ease; }
.slot:hover img { transform: scale(1.05); }
.slot__name { font: 700 13px/1.15 var(--pixel); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; text-align: center; min-height: 2.3em; display: grid; place-items: center; }
.slot__left { position: absolute; top: 6px; right: 6px; font: 600 11px/1 var(--pixel); color: var(--parch); background: rgba(0,0,0,.6); padding: 3px 5px; border-radius: 2px; }
.slot[aria-selected="true"] { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--lime), 0 0 16px rgba(204,255,0,.35); }
.slot.is-soldout img { filter: grayscale(1) brightness(.55); }
.slot.is-soldout::after { content: 'Sold out'; position: absolute; left: 8px; right: 8px; top: 64px; padding: 6px 0; text-align: center; font: 700 14px/1 var(--pixel); color: #fff; background: rgba(120,20,10,.85); transform: rotate(-8deg); box-shadow: 0 0 0 2px #000; }
.creator__stage { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.card { position: relative; width: 100%; max-width: min(100%, calc(100vh - 330px)); aspect-ratio: 1; margin: 0 auto; border-radius: 3px; overflow: hidden; background: #0d1a17; box-shadow: inset 0 0 0 2px #000, 0 0 0 3px var(--stone-hi), 0 0 0 5px #000, 0 12px 30px rgba(0,0,0,.6); }
.card__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.card__char { inset: auto 0 7% 0; height: 78%; object-position: 50% 100%; transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1); animation: idle 3.6s ease-in-out infinite; transform-origin: 50% 100%; filter: drop-shadow(0 10px 12px rgba(0,0,0,.55)); }
.card__char.swap { animation: swapIn .35s cubic-bezier(.2,.8,.2,1) both, idle 3.6s ease-in-out .35s infinite; }
.card__look { position: absolute; left: 10px; bottom: 10px; font: 700 13px/1 var(--pixel); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; background: rgba(0,0,0,.55); padding: 5px 8px; border-radius: 2px; }
.card .arrow { top: 50%; transform: translateY(-50%); }
.card .arrow--l { left: 8px; } .card .arrow--r { right: 8px; }
.looks { display: grid; gap: 8px; }
.looks__row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; }
.looks__label { font: 700 13px/1 var(--pixel); color: var(--gold); text-shadow: 1px 1px 0 #000; }
.looks__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { cursor: pointer; border: 0; border-radius: 2px; padding: 7px 10px; font: 600 13px/1 var(--pixel); color: var(--parch); background: #20180f; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); transition: color .15s ease, box-shadow .15s ease, transform .1s ease; }
.chip:hover { color: #fff; }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { color: var(--lime); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--lime); }
.chip__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1px #000; }
.looks__chips--scenes .chip { padding: 0; width: 46px; height: 46px; overflow: hidden; }
.looks__chips--scenes .chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.looks__foot { display: flex; align-items: center; gap: 12px; }
.looks__note { margin: 0; font: italic 15px/1.35 var(--fell); color: var(--parch); }
.mintcard { display: grid; gap: 6px; margin: 2px 0 6px; padding: 10px 12px; border-radius: 2px; background: #3a2e1f; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #5a4a36; }
.mintcard__row { display: flex; justify-content: space-between; gap: 10px; font: 600 14px/1.2 var(--pixel); color: var(--parch); }
.mintcard__row b { color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; font-weight: 700; }
.arrow {
  position: absolute; 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; }

.creator__sheet {
  display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto;
  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; }

/* ---------- Your Legends (connected wallet) ---------- */
.mylegends { margin: 14px auto 4px; max-width: 680px; }
.mylegends__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; font: 900 16px/1 var(--serif); letter-spacing: .05em; text-transform: uppercase; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.mylegends__head small { font: 600 12px/1 var(--pixel); color: var(--muted); text-transform: none; letter-spacing: 0; }
.mylegends__row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.legend-card { flex: none; width: 124px; display: grid; gap: 6px; text-decoration: none; padding: 6px; border-radius: 3px; background: #1a130c; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); transition: transform .15s ease, box-shadow .15s ease; }
.legend-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--lime), 0 0 14px rgba(204,255,0,.3); }
.legend-card__art { position: relative; aspect-ratio: 1; border-radius: 2px; overflow: hidden; background: #0d1a17; }
.legend-card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.legend-card__art img.lc-char { inset: auto 0 7% 0; height: 78%; object-position: 50% 100%; }
.legend-card__name { font: 700 12px/1.15 var(--pixel); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; text-align: center; }
.legend-card__play { font: 700 12px/1 var(--pixel); color: var(--lime); text-align: center; }
.legend-card__play::after { content: ""; display: inline-block; margin-left: 5px; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; vertical-align: 0; }
.mylegends--title { max-width: min(720px, 92vw); margin-top: 16px; padding: 10px 12px 4px; 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); }

/* ---------- Footer ---------- */
.sitefoot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 7px 16px max(7px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(8,6,4,.92), rgba(8,6,4,.72));
  box-shadow: inset 0 1px 0 var(--stone-mid), 0 -1px 0 #000;
  font: 600 13px/1 var(--pixel); color: var(--parch);
}
body:not(.is-title) .sitefoot { display: none; }
body.is-title .lineup { bottom: 40px; }
.sitefoot__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); text-decoration: none; font: 900 14px/1 var(--serif); letter-spacing: .06em; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.sitefoot__brand img { width: 26px; height: 26px; }
.ca { display: inline-flex; align-items: center; gap: 8px; }
.ca__label { color: var(--muted); }
.ca__addr { font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--rs-yellow); background: rgba(0,0,0,.45); padding: 5px 8px; border-radius: 3px; box-shadow: inset 0 0 0 1px #000; }
.ca__copy { cursor: pointer; font: 600 12px/1 var(--pixel); color: var(--parch); background: var(--panel-2); border: 0; padding: 6px 9px; border-radius: 3px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); transition: color .15s ease, transform .1s ease; }
.ca__copy:hover { color: #fff; }
.ca__copy:active { transform: translateY(1px); }
.ca__ex { display: inline-grid; place-items: center; width: 26px; height: 26px; color: var(--parch); background: var(--panel-2); border-radius: 3px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); transition: color .15s ease, transform .15s ease; }
.ca__ex:hover { color: var(--lime); transform: translateY(-1px); }
.ca--title { margin-top: 12px; padding: 7px 10px; 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); font: 600 12px/1 var(--pixel); flex-wrap: wrap; justify-content: center; }
.ca--title .ca__label { color: var(--gold); }
.title__chart { margin-top: 8px; text-decoration: none; }
.ca__copy.is-copied { color: var(--lime); }
.sitefoot__icons { display: inline-flex; gap: 8px; }
.iconlink { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; color: var(--parch); background: var(--panel-2); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--stone-mid); transition: color .15s ease, transform .15s ease; }
.iconlink:hover { color: var(--lime); transform: translateY(-2px); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .panel:has(#stepCreate:not([hidden])) { height: auto; min-height: calc(100vh - 72px); }
  body.is-creating { overflow-y: auto; }
  body.is-creating .stage { height: auto; min-height: 100%; }
  .creator { grid-template-columns: 1fr 1fr; }
  .creator__pick { grid-column: 1 / -1; }
  .creator__roster { grid-auto-flow: column; grid-auto-columns: 132px; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
  .card { max-width: 100%; }
}
@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; }
  .sitefoot { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .sitefoot__brand span, .sitefoot .ca__label { display: none; }
  .sitefoot .ca[aria-label="Legends contract"], .sitefoot .ca__ex { display: none; }
  .sitefoot .ca__addr { white-space: nowrap; }
  .ca--title .ca__addr { white-space: nowrap; }
  .topbar__tg span { display: none; }
  .topbar__actions { gap: 8px; }
  .stage { padding-bottom: 26vh; }
  .panel { padding: 16px 16px 18px; }
  .welcome-btns { grid-template-columns: 1fr; }
  .creator { grid-template-columns: 1fr; gap: 14px; }
  .creator__roster { grid-auto-columns: 124px; }
  .slot { grid-template-rows: 132px auto; } .slot img { height: 132px; }
  .looks__row { grid-template-columns: 1fr; gap: 4px; }
  .looks__foot { flex-direction: column; align-items: flex-start; }
  .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; }
}