/* =====================================================================
   KINGDOMFALL — "Last Crown" premium theme
   Loaded last: retunes the palette to the logo (burnished gold, royal
   crimson, obsidian), adds the key-art backdrops, gilded buttons with
   a sweeping shine, ornamental panel corners, and motion polish across
   the loading screen, front end, in-game menus and chapter screens.
   ===================================================================== */
:root {
  --gold: #d4aa5a; --gold-hi: #ffe2a0; --gold-dim: #8a6a2a; --gold-deep: #5a3f14;
  --crimson: #b8161e; --crimson-hi: #e8323a; --crimson-deep: #5a0a10;
  --line: rgba(212, 170, 90, .42);
  --parchment: #f3e8d0;
}
::selection { background: rgba(212,170,90,.35); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.35); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold-dim), var(--gold-deep)); border: 2px solid #0a0708; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold), var(--gold-dim)); }

/* ---------------------------------------------------------------- gilded buttons (every .btn in the game) */
.btn { position: relative; overflow: hidden; border: 1px solid var(--gold-dim) !important; border-radius: 3px;
  background: linear-gradient(180deg, rgba(58,44,30,.95) 0%, rgba(26,18,14,.96) 48%, rgba(14,10,10,.98) 100%) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,230,180,.16), inset 0 -1px 0 rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.5) !important;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease !important; }
.btn::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(212,170,90,.18); border-radius: 2px; pointer-events: none; }
.btn::after { content: ''; position: absolute; top: -40%; bottom: -40%; width: 38%; left: -60%; transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,236,190,.28), transparent); transition: left .6s ease; }
.btn:hover:not(:disabled)::after, .btn.sel::after { left: 130%; }
.btn:hover:not(:disabled), .btn.sel { border-color: var(--gold) !important; color: #fff6e4 !important; transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,230,180,.22), 0 0 22px rgba(212,170,90,.32), 0 10px 24px rgba(0,0,0,.55) !important; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { border-color: var(--gold) !important; color: var(--gold-hi) !important;
  background: linear-gradient(180deg, rgba(120,84,30,.95) 0%, rgba(74,48,18,.96) 50%, rgba(40,26,12,.98) 100%) !important; }
.btn.primary::before { border-color: rgba(255,226,160,.3); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,230,180,.3), 0 0 30px rgba(255,190,90,.45), 0 10px 24px rgba(0,0,0,.55) !important; }

/* ---------------------------------------------------------------- ornamental frames */
.frame { border-color: var(--gold-dim) !important; border-radius: 3px;
  background: linear-gradient(180deg, rgba(28,22,20,.9), rgba(10,8,9,.94)) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,230,180,.08), inset 0 0 40px rgba(0,0,0,.6), 0 18px 50px rgba(0,0,0,.6) !important; }
.frame::before, .frame::after { width: 18px; height: 18px; border-width: 2px; border-color: var(--gold); opacity: 1; filter: drop-shadow(0 0 4px rgba(255,200,110,.5)); }
.fe-panel.frame h2 { position: relative; padding-bottom: 12px; }
.fe-panel.frame h2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(212,170,90,.1)); }

/* ---------------------------------------------------------------- brand */
.fe-brand .logoimg { width: min(560px, 42vw); height: auto; filter: drop-shadow(0 12px 32px rgba(0,0,0,.85)) drop-shadow(0 0 28px rgba(255,170,70,.18)); animation: logoIn 1.4s cubic-bezier(.2,.9,.3,1) both; }
.fe-brand.small .logoimg { width: min(400px, 30vw); }
@keyframes logoIn { from { opacity: 0; transform: translateY(-14px) scale(.96); filter: drop-shadow(0 12px 32px rgba(0,0,0,.85)) blur(6px); } to { opacity: 1; transform: none; } }
.fe-brand .crestsvg, .fe-brand .logo, .fe-brand .sub { display: none; }

/* ---------------------------------------------------------------- key art backdrop (login / menu / loading) */
#fe .fe-screen::before { background: linear-gradient(90deg, rgba(6,4,6,.86) 0%, rgba(6,4,6,.42) 42%, rgba(6,4,6,.08) 64%), linear-gradient(0deg, rgba(6,4,6,.8), transparent 28%), linear-gradient(180deg, rgba(6,4,6,.5), transparent 22%) !important; }
#fe .fe-screen.login-screen::after, #fe .fe-screen.menu-screen::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../public/brand/keyart.jpg) center 40% / cover no-repeat; opacity: .92; animation: kenburns 70s ease-in-out infinite alternate; }
#fe .fe-screen { background: transparent; }
.loading2 .keyart { position: absolute; inset: 0; background: url(../public/brand/keyart.jpg) center 40% / cover no-repeat; animation: kenburns 60s ease-in-out infinite alternate; }
.loading2 .vista.overkey { background: transparent; }
.loading2 .vista.overkey .vsky { opacity: 0; } .loading2 .vista.overkey .vland { opacity: .0; } .loading2 .vista.overkey .vfog { opacity: .55; } .loading2 .vista.overkey .vglow { opacity: .5; }
.loading2 .llogo { width: min(720px, 56vw); height: auto; margin-bottom: 4vh; filter: drop-shadow(0 14px 36px rgba(0,0,0,.9)); animation: logoIn 1.6s cubic-bezier(.2,.9,.3,1) both; }
.loading2 .lbody { background: linear-gradient(0deg, rgba(6,4,6,.92) 0%, rgba(6,4,6,.55) 38%, transparent 70%); }
#loading.loading2 .lbar { height: 4px; background: rgba(0,0,0,.55); border: 1px solid rgba(212,170,90,.3); border-radius: 3px; box-shadow: inset 0 1px 3px #000; }
.loading2 .lbar i { background: linear-gradient(90deg, #8a6a2a, #ffe2a0 60%, #fff5d8); box-shadow: 0 0 14px rgba(255,200,110,.75); }
.loading2 .lore { border-left: 2px solid var(--gold); background: linear-gradient(90deg, rgba(10,8,9,.72), rgba(10,8,9,.2)); backdrop-filter: blur(3px); }
.loading2 .lname { text-shadow: 0 4px 40px rgba(0,0,0,.9), 0 0 24px rgba(255,190,90,.25); }
.loading2 .lpress { color: var(--gold-hi); text-shadow: 0 0 14px rgba(255,200,110,.6); }

/* ---------------------------------------------------------------- main menu */
.fe-menu .btn .k { color: var(--gold-hi); text-shadow: 0 1px 2px #000; }
.fe-menu .btn:hover .k, .fe-menu .btn.sel .k { color: #fff8e8; }
.fe-menu .btn.cont { border-color: var(--gold) !important; background: linear-gradient(90deg, rgba(120,70,20,.7), rgba(26,18,14,.9)) !important; }
.fe-menu .btn.cont::before { border-color: rgba(255,226,160,.25); }
.fe-news { border: 1px solid var(--gold-dim); border-left: 2px solid var(--gold); background: linear-gradient(90deg, rgba(10,8,9,.78), rgba(10,8,9,.35)); backdrop-filter: blur(4px); }
#fe-chip { border-radius: 30px; padding-right: 20px; background: linear-gradient(90deg, rgba(30,22,18,.9), rgba(10,8,9,.8)); border-color: var(--gold-dim); box-shadow: 0 6px 20px rgba(0,0,0,.5); }
#fe-chip .av { border-radius: 50%; border: 2px solid var(--gold); background: radial-gradient(circle at 40% 35%, #4a3418, #0c0906); }
.fe-foot { color: rgba(212,170,90,.55); }

/* ---------------------------------------------------------------- sign-in */
.tabs2 button.on { color: var(--gold-hi); text-shadow: 0 0 12px rgba(255,200,110,.5); }
.tabs2 button.on { border-bottom: 2px solid var(--gold); }
.lform input, .guest input, .acct input { border-radius: 3px; background: rgba(0,0,0,.55); border: 1px solid rgba(212,170,90,.32); box-shadow: inset 0 2px 8px rgba(0,0,0,.6); transition: border-color .2s, box-shadow .2s; }
.lform input:focus, .guest input:focus, .acct input:focus { border-color: var(--gold); box-shadow: inset 0 2px 8px rgba(0,0,0,.6), 0 0 0 3px rgba(212,170,90,.18), 0 0 16px rgba(212,170,90,.2); }
.link { color: var(--gold-hi); }

/* ---------------------------------------------------------------- hero select / load / map */
.hcard { border-radius: 3px; background: linear-gradient(90deg, rgba(26,18,14,.85), rgba(10,8,9,.6)); }
.hcard.on { box-shadow: 0 0 24px color-mix(in srgb, var(--hc) 30%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--hc) 40%, transparent); }
.hs-title .name { background: linear-gradient(180deg, #fff6df 10%, #e2bc72 55%, #8a6226); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 24px rgba(0,0,0,.9)); }
.hs-title .role { color: var(--gold); }
.rt i b { background: linear-gradient(90deg, #b8161e, #ffe2a0); box-shadow: 0 0 8px rgba(255,200,110,.5); }
.slotcard { border-radius: 3px; background: linear-gradient(180deg, rgba(28,22,20,.85), rgba(10,8,9,.9)); }
.slotcard:hover:not(:disabled) { box-shadow: 0 0 20px rgba(212,170,90,.25); }

/* ---------------------------------------------------------------- in-game menus */
#menu { background: radial-gradient(ellipse at 50% 20%, rgba(52,34,22,.78), rgba(6,4,6,.95)) !important; }
#menu::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url(../public/brand/keyart_blur.jpg) center / cover no-repeat; opacity: .14; }
#menu .tab { border-radius: 3px 3px 0 0; }
#menu .tab.on { background: linear-gradient(180deg, rgba(212,170,90,.12), transparent); border-bottom: 2px solid var(--gold); }
#menu .tab:hover { color: var(--gold-hi); }
.set { border-bottom: 1px solid rgba(212,170,90,.1); }
.set select, .set input[type=range] { border-radius: 3px; }
input[type=range] { accent-color: var(--gold); }

/* ---------------------------------------------------------------- chapter complete / death / callouts */
.stagedone { background: radial-gradient(ellipse at 50% 35%, rgba(70,44,18,.9), rgba(6,4,6,.97)) !important; }
.stagedone::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url(../public/brand/keyart_blur.jpg) center / cover no-repeat; opacity: .16; }
.sd-name { background: linear-gradient(180deg, #fff6df 10%, #e2bc72 55%, #8a6226); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 24px rgba(0,0,0,.9)); }
.sd-star.on { color: var(--gold-hi); text-shadow: 0 0 30px var(--gold), 0 0 70px rgba(255,160,70,.6); }
#callout { background: linear-gradient(180deg, #fff6df, #e2bc72 55%, #a87a2e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 24px rgba(255,190,90,.7)) drop-shadow(0 3px 0 #000); }
#areaTitle .t { background: linear-gradient(180deg, #fff6df, #e2bc72 60%, #a87a2e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 30px rgba(0,0,0,.95)); }
#areaTitle .s { color: var(--gold-hi); }
#death .t { background: linear-gradient(180deg, #ff9a90, #b8161e 55%, #5a0a10); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 30px rgba(184,22,30,.6)); }

/* ---------------------------------------------------------------- HUD accents */
:root { --rim: #d4aa5a; --rim-hi: #ffe2a0; --rim-dk: #6a4e20; }
.uframe .bar.hp .fill { background: linear-gradient(180deg, #ff6a5e, #b8161e 55%, #5a0a10); }
#xpbar .fill { background: linear-gradient(180deg, #e0b8ff, #8a4ad8 55%, #4a1a8a); }
#actionbar::before { background: linear-gradient(180deg, #4a3a2c 0%, #2a2018 12%, #1a1210 70%, #0e0a08 100%); border-color: var(--gold-dim); }
#prompt.frame { border-radius: 30px; padding: 9px 22px 9px 12px; }
.kbd { border-radius: 4px; background: linear-gradient(180deg, rgba(60,44,24,.9), rgba(14,10,8,.95)); border-color: var(--gold); }
#hint.frame { border-radius: 6px; }
.toast { border-left: 3px solid var(--gold); border-radius: 0 20px 20px 0; }

/* ---------------------------------------------------------------- dialogue */
#dialogue.frame { border-radius: 6px; }
#dialogue .who, #dialogue .name { color: var(--gold-hi); text-shadow: 0 0 12px rgba(255,200,110,.4); }
#dialogue .choice.sel, #dialogue .choice:hover { border-left: 2px solid var(--gold); background: linear-gradient(90deg, rgba(212,170,90,.14), transparent); }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) { .btn::after, .fe-brand .logoimg, .loading2 .llogo, .loading2 .keyart { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- in-game menus: gilded pass */
#menu .tabs { gap: 2px; padding: 4px; background: linear-gradient(180deg, rgba(30,22,18,.9), rgba(10,8,9,.9)); border: 1px solid var(--gold-dim); border-radius: 6px; width: max-content; margin: 0 auto 20px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
#menu .tab { border-radius: 4px; border-bottom: none; padding: 9px 20px; transition: all .15s; }
#menu .tab.on { background: linear-gradient(180deg, rgba(120,84,30,.9), rgba(60,40,16,.9)); color: #fff6e4; box-shadow: inset 0 1px 0 rgba(255,230,180,.25), 0 0 14px rgba(212,170,90,.3); }
.panel h3 { position: relative; padding-bottom: 8px; margin-bottom: 14px; letter-spacing: .26em; }
.panel h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(212,170,90,.05)); }
.cell { border-radius: 4px; border-color: rgba(212,170,90,.25); background: radial-gradient(circle at 50% 35%, rgba(60,48,38,.7), rgba(8,8,10,.95)); transition: transform .12s, box-shadow .15s, border-color .15s; }
.cell:hover { transform: translateY(-2px); }
.cell:hover, .cell.sel { border-color: var(--gold-hi); box-shadow: 0 0 16px rgba(212,170,90,.45), inset 0 0 10px rgba(212,170,90,.15); }
.cell::after { height: 3px; border-radius: 0 0 3px 3px; box-shadow: 0 0 8px var(--rc, transparent); }
.cell .eq { background: linear-gradient(180deg, #ffe2a0, #d4aa5a); color: #1a1206; padding: 0 5px; border-radius: 2px; font-size: 10px; }
.cat { border-radius: 14px; padding: 4px 12px; font-family: var(--display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.cat.on { color: var(--gold-hi); border-color: var(--gold); background: rgba(212,170,90,.12); }
.detail .nm { background: linear-gradient(180deg, #fff6df, #e2bc72 60%, #a87a2e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.detail .stats div, .statlist div, .set { border-bottom: 1px solid rgba(212,170,90,.12); }
.eqslot { border-radius: 4px; background: linear-gradient(90deg, rgba(30,22,18,.6), transparent); }
.eqslot .ic { border: 1px solid rgba(212,170,90,.25); border-radius: 4px; }
.snode { border-radius: 4px; }
.snode.owned { background: radial-gradient(circle, #7a5220, #1a1008); border-color: var(--gold-hi); }
.snode.avail { border-color: var(--gold); box-shadow: 0 0 12px rgba(212,170,90,.4); }
.qlist .q.on { border-left: 3px solid var(--gold); background: linear-gradient(90deg, rgba(212,170,90,.14), transparent); }
.shopRow:hover { background: rgba(212,170,90,.08); }
#menu .hint { color: rgba(212,170,90,.6); font-family: var(--display); font-size: 11px; letter-spacing: .2em; }