/* =====================================================================
   ARENA LAYER: shared Magic-Arena-style presentation for every screen.
   Loaded last. Tokens + backdrop + chrome + components + motion.
   ===================================================================== */
:root {
  --gold-hi: #fff0c2;
  --gold-1: #f6d98a;
  --gold-2: #e2b04a;
  --gold-3: #a8741c;
  --gold-4: #5c3c0a;
  --gold-line: rgba(232, 186, 90, .55);
  --gold-faint: rgba(232, 186, 90, .18);
  --ink-dim: #b7a8d6;
  --glass: rgba(14, 8, 28, .72);
  --glass-hi: rgba(28, 16, 54, .82);
  --violet-glow: rgba(168, 107, 255, .55);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.2, .9, .3, 1.35);
  --sh-deep: 0 24px 60px rgba(0, 0, 0, .6), 0 2px 0 rgba(255, 255, 255, .03) inset;
}

/* ---------- key-art backdrop (behind every page) ---------- */
#afBg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #0a0615; }
#afBg.none .afb { opacity: 0 !important; }
#afBg .afb { position: absolute; inset: -4%; background-size: cover; background-position: center 35%; opacity: 0; transition: opacity 1.1s ease;
  filter: saturate(1.05) brightness(.62) blur(1.5px); transform: scale(1.04); }
#afBg .afb.on { opacity: 1; }
#afBg .afb.drift { animation: afDrift 38s ease-in-out infinite alternate; }
@keyframes afDrift { 0% { transform: scale(1.04) translate(0, 0); } 100% { transform: scale(1.14) translate(-2.2%, -1.6%); } }
#afBg .afv { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 42%, rgba(10, 5, 22, .05) 0%, rgba(10, 5, 22, .55) 62%, rgba(6, 3, 14, .94) 100%),
    linear-gradient(180deg, rgba(8, 4, 18, .78) 0%, rgba(8, 4, 18, .15) 22%, rgba(8, 4, 18, .2) 70%, rgba(6, 3, 14, .92) 100%); }
#afBg .afdust { position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(1.5px 1.5px at 12% 30%, #ffe6a8, transparent), radial-gradient(1px 1px at 72% 18%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 72%, #d9c2ff, transparent), radial-gradient(1px 1px at 88% 64%, #ffe6a8, transparent),
    radial-gradient(1.2px 1.2px at 28% 86%, #fff, transparent), radial-gradient(1px 1px at 58% 44%, #ffe6a8, transparent);
  background-size: 620px 520px; animation: afDust 60s linear infinite; }
@keyframes afDust { to { background-position: 620px -520px; } }
.screen { z-index: 1; }

/* pages now sit on the backdrop instead of a flat gradient */
.page { background: radial-gradient(ellipse 120% 70% at 50% -10%, rgba(80, 40, 150, .22), transparent 60%); }
body.theme-midnight #afBg .afb { filter: saturate(.9) brightness(.42) blur(1.5px); }

/* ---------- page chrome ---------- */
.page .top { height: 84px; background: linear-gradient(180deg, rgba(8, 4, 18, .92), rgba(12, 6, 26, .72)); border-bottom: 0;
  box-shadow: 0 1px 0 var(--gold-line), 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); }
.page .top::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3)); box-shadow: 0 0 12px rgba(242, 193, 78, .7); }
.page h1, .page .top h1 {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-1) 38%, var(--gold-2) 62%, var(--gold-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 18px rgba(242, 193, 78, .25)); }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, #5a31a6 0%, #3a1c78 55%, #2a1258 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 -2px 0 rgba(0, 0, 0, .35) inset, 0 8px 22px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle 120px at var(--mx, 50%) var(--my, 50%), rgba(255, 240, 200, .28), transparent 70%); }
.btn:hover::after { opacity: 1; }
.btn::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-18deg); }
.btn:hover::before { animation: afSheen .8s var(--ease-out); }
@keyframes afSheen { to { left: 130%; } }
.btn.gold { background: linear-gradient(180deg, #ffe39a 0%, #f0bd4f 42%, #c98a22 78%, #9c6512 100%); color: #2b1600; border-color: #fff0c2; text-shadow: 0 1px 0 rgba(255, 240, 200, .6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -3px 0 rgba(90, 50, 0, .35) inset, 0 10px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(242, 193, 78, .35); }
.btn.gold:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -3px 0 rgba(90, 50, 0, .35) inset, 0 14px 30px rgba(0, 0, 0, .55), 0 0 34px rgba(242, 193, 78, .65); }
.btn.ghost { background: linear-gradient(180deg, rgba(40, 24, 72, .72), rgba(18, 10, 36, .78)); border-color: rgba(232, 186, 90, .32); color: #f1e6ff; }
.btn.ghost:hover { border-color: var(--gold-line); }
.btn:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 3px; }

/* ---------- tabs ---------- */
.tabs { background: linear-gradient(180deg, rgba(10, 6, 22, .85), rgba(20, 12, 40, .75)); border: 1px solid rgba(232, 186, 90, .22); border-radius: 12px; padding: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.tabs .tab, .tabs > button { position: relative; transition: color .2s, background .25s; }
.tabs .tab.on, .tabs > button.on { background: linear-gradient(180deg, rgba(120, 70, 210, .75), rgba(70, 34, 140, .8)) !important; color: #fff !important;
  box-shadow: 0 0 0 1px rgba(232, 186, 90, .45) inset, 0 4px 14px rgba(120, 60, 220, .45); }
.tabs .tab.on::after, .tabs > button.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 2px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-1), transparent); }

/* ---------- bottom navigation ---------- */
.navbar { background: linear-gradient(180deg, rgba(20, 11, 40, .92), rgba(8, 4, 18, .95)); border: 1px solid rgba(232, 186, 90, .3);
  box-shadow: 0 -1px 0 rgba(255, 230, 170, .12) inset, 0 24px 50px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .6); }
.navbar::before { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-1), transparent); }
.navbar button { color: #bfb0dd; }
.navbar button .ic { transition: transform .3s var(--ease-back), filter .3s; }
.navbar button:hover .ic { transform: translateY(-3px) scale(1.12); }
.navbar button.on { background: radial-gradient(ellipse 80% 90% at 50% 100%, rgba(242, 193, 78, .28), transparent 70%), linear-gradient(180deg, rgba(110, 60, 200, .5), rgba(50, 22, 110, .55)); color: var(--gold-hi);
  box-shadow: 0 0 0 1px rgba(232, 186, 90, .45) inset; }
.navbar button.on .ic { transform: translateY(-2px) scale(1.14); filter: drop-shadow(0 0 10px rgba(242, 193, 78, .8)); }
.navbar button.on::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 3px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--gold-1), transparent); box-shadow: 0 0 10px var(--gold-2); }

/* ---------- modals & sheets: ornate frame ---------- */
.modal { background: radial-gradient(ellipse at 50% 45%, rgba(20, 8, 44, .55), rgba(4, 2, 10, .88)); }
.modal .box { position: relative; border: 1px solid rgba(232, 186, 90, .4); background:
  radial-gradient(ellipse 90% 60% at 50% 0%, rgba(120, 70, 210, .22), transparent 70%), linear-gradient(180deg, rgba(30, 17, 58, .96), rgba(14, 8, 28, .97));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 0 6px rgba(14, 8, 28, .55), 0 0 0 7px rgba(232, 186, 90, .18), 0 40px 90px rgba(0, 0, 0, .75); }
.modal .box::before { content: ""; position: absolute; inset: 8px; pointer-events: none; border-radius: 14px; opacity: .9;
  background:
    linear-gradient(var(--gold-2), var(--gold-2)) left top / 22px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left top / 1.5px 22px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right top / 22px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right top / 1.5px 22px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 22px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 1.5px 22px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 22px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 1.5px 22px no-repeat; }
.modal.on .box { animation: afPop .5s var(--ease-back) both; }
@keyframes afPop { from { opacity: 0; transform: translateY(18px) scale(.94); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.modal h2 { background: linear-gradient(180deg, var(--gold-hi), var(--gold-2) 70%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }

/* ---------- reusable components (screens opt in) ---------- */
.af-panel { position: relative; border-radius: 16px; border: 1px solid rgba(232, 186, 90, .26);
  background: linear-gradient(180deg, rgba(30, 17, 58, .86), rgba(14, 8, 28, .9)); box-shadow: var(--sh-deep); backdrop-filter: blur(6px); }
.af-frame { position: relative; }
.af-frame::before { content: ""; position: absolute; inset: 6px; pointer-events: none; border-radius: inherit; z-index: 2;
  background:
    linear-gradient(var(--gold-2), var(--gold-2)) left top / 16px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left top / 1.5px 16px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right top / 16px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right top / 1.5px 16px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 16px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 1.5px 16px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 16px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 1.5px 16px no-repeat; }
.af-title { font-family: var(--font-title); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-1); display: flex; align-items: center; gap: 12px; }
.af-title::before, .af-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line)); }
.af-title::after { background: linear-gradient(90deg, var(--gold-line), transparent); }
.af-eyebrow { font: 700 12px/1 var(--font-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-2); }
/* art-backed tile: set --art to a url() */
.af-tile { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid rgba(232, 186, 90, .35); cursor: pointer; isolation: isolate;
  background: var(--art) center / cover no-repeat, #1a1030; box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  transition: transform .35s var(--ease-back), box-shadow .3s, border-color .3s; }
.af-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 4, 18, .05) 0%, rgba(8, 4, 18, .35) 45%, rgba(8, 4, 18, .92) 100%); }
.af-tile::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; background: radial-gradient(circle 160px at var(--mx, 50%) var(--my, 30%), rgba(255, 230, 170, .22), transparent 70%); }
.af-tile:hover { transform: translateY(-6px) scale(1.02); border-color: var(--gold-1); box-shadow: 0 22px 44px rgba(0, 0, 0, .6), 0 0 26px rgba(242, 193, 78, .35); }
.af-tile:hover::after { opacity: 1; }

/* inputs */
.page input:not([type=checkbox]):not([type=radio]), .modal input:not([type=checkbox]):not([type=radio]), .page select, .modal select, .page textarea, .modal textarea {
  background: linear-gradient(180deg, rgba(8, 4, 18, .85), rgba(22, 12, 44, .85)) !important; border: 1px solid rgba(232, 186, 90, .28) !important; color: var(--ink) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35) inset; transition: border-color .2s, box-shadow .2s; }
.page input:focus, .modal input:focus, .page select:focus, .modal select:focus { outline: none; border-color: var(--gold-1) !important; box-shadow: 0 0 0 3px rgba(242, 193, 78, .18), 0 2px 8px rgba(0, 0, 0, .35) inset; }

/* chips */
.chip { transition: transform .2s var(--ease-back), background .2s, box-shadow .2s; }
.chip:hover { transform: translateY(-1px); }
.chip.on { box-shadow: 0 0 0 1px rgba(255, 240, 200, .5) inset, 0 4px 14px rgba(0, 0, 0, .35), 0 0 14px color-mix(in srgb, var(--c, #a86bff) 60%, transparent); }

/* currency pills */
.pill { background: linear-gradient(180deg, rgba(10, 6, 22, .9), rgba(26, 14, 50, .85)) !important; border: 1px solid rgba(232, 186, 90, .35) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 240, 200, .08) inset; }

/* scrollbars */
.page ::-webkit-scrollbar { width: 8px; height: 8px; }
.page ::-webkit-scrollbar-track { background: rgba(0, 0, 0, .25); border-radius: 8px; }
.page ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold-2), var(--gold-3)); border-radius: 8px; }

/* ---------- motion ---------- */
.screen.af-in { animation: afScreenIn .55s var(--ease-out) both; }
@keyframes afScreenIn { from { opacity: 0; transform: scale(1.015); filter: blur(6px) brightness(1.3); } to { opacity: 1; transform: none; filter: none; } }
.af-st { animation: afRise .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 38ms + 60ms); }
@keyframes afRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.navbar button.af-st { animation-name: afRiseNav; }
@keyframes afRiseNav { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.af-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; z-index: 2000; }
@keyframes afPulseGold { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 193, 78, 0), 0 10px 26px rgba(0, 0, 0, .55); } 50% { box-shadow: 0 0 0 6px rgba(242, 193, 78, .18), 0 0 34px rgba(242, 193, 78, .55); } }
.af-pulse { animation: afPulseGold 2.2s ease-in-out infinite; }

body.fx-low .screen.af-in, body.fx-low .af-st, body.fx-low .modal.on .box { animation: none !important; }
body.fx-low #afBg .afb.drift, body.fx-low #afBg .afdust { animation: none; }
body.fx-low .btn:hover::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .screen.af-in, .af-st, .modal.on .box, #afBg .afb.drift, #afBg .afdust, .af-pulse { animation: none !important; }
}