/* ============================================================
   Wizard City: shared design system
   Loaded on every page. Owns the theme, the wand cursors,
   the chrome (header/nav/footer), glass panels, buttons, forms.
   ============================================================ */
@font-face{ font-family:'Shermlock'; src:url('shermlock.ttf') format('truetype'); font-weight:normal; font-style:normal; font-display:swap; }

:root{
  --void:#05020a; --void2:#0a0518; --raven:#1e1b4b; --raven2:#312e81;
  --storm:#8b5cf6; --storm2:#a78bfa; --myth:#fbbf24; --myth2:#fcd34d;
  --fire:#ef4444; --ice:#38bdf8; --life:#22c55e; --balance:#d97706; --fuch:#d946ef;
  --ink:#c7d2fe; --ink2:#a5b4fc; --paper:#e2e8f0; --dim:#7c83b8;
  --edge:rgba(139,92,246,.32); --edge2:rgba(139,92,246,.5);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh; background-color:var(--void); color:var(--paper);
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  cursor:url('cursor.cur'),auto;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 80px 70px, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 150px 160px, rgba(251,191,36,.28), transparent),
    radial-gradient(1px 1px at 90px 240px, rgba(255,255,255,.55), transparent),
    radial-gradient(2px 2px at 230px 80px, rgba(139,92,246,.4), transparent);
  background-repeat:repeat; background-size:300px 300px;
}
a,button,select,input,textarea,label,.clk,summary{ cursor:url('CursorPickCard.cur'),pointer !important; }
::selection{ background:rgba(251,191,36,.3); color:#fff; }

/* fonts */
.font-magic{ font-family:'Shermlock','Berkshire Swash',cursive; }
.font-mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }

/* ambient layers injected by wizard.js sit at z 0; content above */
#wc-stars,#wc-spark{ position:fixed; inset:0; pointer-events:none; }
#wc-stars{ z-index:0; } #wc-spark{ z-index:80; }
.wc-orbs{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.wc-orb{ position:absolute; border-radius:50%; filter:blur(95px); opacity:.30; animation:wc-float 13s infinite ease-in-out alternate; }
.wc-orb.storm{ background:var(--storm); width:360px; height:360px; top:8%; left:4%; }
.wc-orb.myth{ background:var(--myth); width:240px; height:240px; top:60%; left:13%; animation-delay:-2s; }
.wc-orb.fire{ background:var(--fire); width:300px; height:300px; top:12%; right:8%; animation-delay:-4s; }
.wc-orb.ice{ background:var(--ice); width:220px; height:220px; top:66%; right:16%; animation-delay:-6s; }
.wc-orb.life{ background:var(--life); width:280px; height:280px; bottom:-6%; left:44%; animation-delay:-8s; }
@keyframes wc-float{ 0%{ transform:translate(0,0) scale(1);} 100%{ transform:translate(42px,-42px) scale(1.12);} }

/* layout helpers */
.wc-wrap{ max-width:80rem; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem; }
.rel{ position:relative; z-index:10; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--storm2); }
.title{ font-family:'Shermlock',cursive; color:#fff; text-shadow:3px 3px 0 #000; line-height:.95; }
.title-gold{ font-family:'Shermlock',cursive; color:var(--myth); text-shadow:2px 2px 0 #000; }

/* header */
.wc-header{ position:sticky; top:0; z-index:50; background:rgba(5,2,10,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--edge); box-shadow:0 4px 22px rgba(0,0,0,.6); }
.wc-header .wc-wrap{ height:4rem; display:flex; align-items:center; justify-content:space-between; }
.wc-brand{ font-family:'Shermlock',cursive; font-size:1.9rem; letter-spacing:.08em; color:var(--myth); text-decoration:none; text-shadow:2px 2px 0 #451a03; }
.wc-nav{ display:flex; align-items:center; gap:1.6rem; font-weight:600; font-size:.86rem; color:var(--ink); }
.wc-nav a{ position:relative; color:var(--ink); text-decoration:none; transition:color .2s; padding:.2rem 0; }
.wc-nav a::after{ content:''; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--myth); transition:width .25s; }
.wc-nav a:hover{ color:var(--myth); } .wc-nav a:hover::after{ width:100%; }
.wc-nav a.active{ color:var(--myth); } .wc-nav a.active::after{ width:100%; }
.wc-nav a.warn:hover{ color:var(--fire); text-shadow:0 0 10px rgba(239,68,68,.6); }
.wc-nav a.warn:hover::after{ background:var(--fire); }
@media(max-width:860px){ .wc-nav{ display:none; } }

/* footer */
.wc-foot{ margin-top:auto; border-top:1px solid var(--edge); background:rgba(5,2,10,.9); backdrop-filter:blur(10px); position:relative; z-index:10; }
.wc-foot .wc-wrap{ padding-top:1.5rem; padding-bottom:1.5rem; display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:space-between; font-size:.85rem; color:var(--ink2); }
.wc-foot a{ color:var(--ink2); text-decoration:none; transition:color .2s; } .wc-foot a:hover{ color:var(--myth); }
.wc-foot-r{ display:flex; align-items:center; gap:1.4rem; }
.wc-mark{ font-family:'Shermlock',cursive; font-size:1.2rem; letter-spacing:.18em; color:rgba(251,191,36,.8); }

/* glass / panels */
.glass{ background:linear-gradient(145deg, rgba(30,27,75,.58), rgba(10,5,20,.88)); border:1px solid var(--edge); backdrop-filter:blur(16px); box-shadow:0 0 40px rgba(0,0,0,.8), inset 0 0 22px rgba(139,92,246,.08); }
.panel{ background:rgba(5,2,10,.55); border:1px solid rgba(139,92,246,.2); border-radius:1rem; box-shadow:inset 0 0 22px rgba(0,0,0,.55); }
.rounded-xl2{ border-radius:1.25rem; } .rounded-2xl2{ border-radius:2rem; }

/* buttons */
.spellbtn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none;
  background:linear-gradient(180deg,#312e81 0%,#1e1b4b 100%); border:3px solid var(--myth); border-radius:.8rem; color:var(--myth);
  font-family:'Shermlock',cursive; font-size:1.4rem; letter-spacing:.04em; text-shadow:2px 2px 0 #000; padding:.6rem 1.6rem;
  box-shadow:0 4px 12px rgba(0,0,0,.6), inset 0 0 15px rgba(0,0,0,.6); transition:all .25s; }
.spellbtn:hover{ transform:translateY(-3px) scale(1.02); color:var(--myth2); border-color:var(--myth2);
  background:linear-gradient(180deg,#3730a3 0%,#23215e 100%); box-shadow:0 10px 26px rgba(251,191,36,.35), inset 0 0 20px rgba(0,0,0,.85); }
.spellbtn.storm{ border-color:var(--storm); color:#c4b5fd; } .spellbtn.storm:hover{ border-color:var(--storm2); color:#ddd6fe; box-shadow:0 10px 26px rgba(139,92,246,.4), inset 0 0 20px rgba(0,0,0,.85); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; text-decoration:none;
  font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  border:1px solid var(--edge2); background:rgba(5,2,10,.6); color:var(--ink2); border-radius:.55rem; padding:.6rem 1rem; transition:all .2s; }
.btn:hover{ border-color:var(--myth); color:var(--myth); background:rgba(139,92,246,.16); box-shadow:0 0 14px rgba(251,191,36,.22); }
.btn.active{ border-color:var(--myth); color:var(--myth); background:linear-gradient(180deg,#3730a3,#1e1b4b); box-shadow:inset 0 0 14px rgba(0,0,0,.8); }
.btn.ghost{ border-color:rgba(139,92,246,.3); background:rgba(5,2,10,.4); }
.btn.gold{ border-color:var(--myth); color:var(--myth); }

/* forms */
.field{ width:100%; background:rgba(5,2,10,.8); border:1px solid var(--edge2); color:#fff; border-radius:.7rem; padding:.8rem 1rem; outline:none;
  font-family:'JetBrains Mono',monospace; transition:border .2s, box-shadow .2s; }
.field:focus{ border-color:var(--myth); box-shadow:0 0 14px rgba(251,191,36,.25); }
.field::placeholder{ color:rgba(139,92,246,.55); font-family:Inter,sans-serif; }
select.field{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--storm2) 50%),linear-gradient(135deg,var(--storm2) 50%,transparent 50%); background-position:calc(100% - 18px) center,calc(100% - 12px) center; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
input[type=range]{ accent-color:var(--myth); } input[type=color]{ background:transparent; border:1px solid var(--edge2); border-radius:.5rem; }
.lbl{ display:block; font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--myth); font-weight:700; margin-bottom:.45rem; }

/* misc chrome */
.tag{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.55rem; letter-spacing:.06em; text-transform:uppercase; color:var(--storm2); border:1px solid var(--edge2); border-radius:.25rem; padding:.12rem .35rem; }
.kbd{ font-family:'JetBrains Mono',monospace; font-size:.75rem; border:1px solid var(--edge2); border-radius:.4rem; padding:.3rem .55rem; color:var(--ink2); background:rgba(5,2,10,.5); }
hr.rule{ border:0; height:1px; background:linear-gradient(90deg,var(--edge2),transparent); margin:1.4rem 0; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:rgba(30,27,75,.5); }
::-webkit-scrollbar-thumb{ background:rgba(139,92,246,.5); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(251,191,36,.8); }

/* realm / portal cards (Commons + Spellbook) */
.realm-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.realm{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; min-height:190px; padding:1.5rem; text-decoration:none; border-radius:1.1rem;
  background:linear-gradient(180deg, rgba(49,46,129,.5), rgba(15,12,40,.92)); border:2px solid rgba(251,191,36,.5);
  box-shadow:0 8px 22px rgba(0,0,0,.7), inset 0 0 22px rgba(0,0,0,.6); transition:transform .3s, box-shadow .3s, border-color .3s; }
.realm:hover{ transform:translateY(-6px) scale(1.015); border-color:var(--myth2); box-shadow:0 18px 40px rgba(251,191,36,.22), inset 0 0 30px rgba(0,0,0,.7); z-index:5; }
.realm .glyph{ position:absolute; top:-14px; right:-4px; font-family:'Shermlock',cursive; font-size:6.5rem; line-height:1; color:rgba(251,191,36,.12); transition:color .3s, transform .4s; pointer-events:none; }
.realm:hover .glyph{ color:rgba(251,191,36,.26); transform:rotate(8deg) scale(1.08); }
.realm .tag{ margin-bottom:.1rem; }
.realm .name{ font-family:'Shermlock',cursive; font-size:1.9rem; line-height:1; color:var(--myth); text-shadow:2px 2px 0 #000; margin-top:.35rem; }
.realm .d{ color:var(--ink); font-weight:300; font-size:.82rem; line-height:1.5; margin-top:.5rem; }
.realm .go{ font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink2); margin-top:.75rem; }
.realm.storm-edge{ border-color:rgba(139,92,246,.6); } .realm.storm-edge .name{ color:#fff; } .realm.storm-edge:hover{ border-color:var(--storm2); box-shadow:0 18px 40px rgba(139,92,246,.28), inset 0 0 30px rgba(0,0,0,.7); }

/* small spell tiles (tool listings) */
.spell-tile{ display:flex; flex-direction:column; gap:.4rem; padding:1.4rem; text-decoration:none; border-radius:1rem; height:100%;
  background:linear-gradient(180deg,#312e81 0%,#1e1b4b 100%); border:2px solid rgba(251,191,36,.55); box-shadow:0 8px 20px rgba(0,0,0,.7), inset 0 0 14px rgba(0,0,0,.55); transition:all .28s; }
.spell-tile:hover{ transform:translateY(-5px) scale(1.02); border-color:var(--myth2); box-shadow:0 14px 30px rgba(251,191,36,.3), inset 0 0 22px rgba(0,0,0,.8); }
.spell-tile .st-name{ font-family:'Shermlock',cursive; font-size:1.55rem; color:var(--myth); text-shadow:1px 1px 0 #000; }
.spell-tile:hover .st-name{ color:var(--myth2); }
.spell-tile .st-d{ color:var(--ink); font-weight:300; font-size:.84rem; line-height:1.5; }

/* ornate portrait frame */
.ambrose-frame{ border:6px solid var(--balance); border-radius:1rem; padding:.5rem; background:radial-gradient(circle at center,#4c1d95,#05020a);
  box-shadow:0 0 0 4px #451a03, 0 0 28px rgba(251,191,36,.4), inset 0 0 25px rgba(0,0,0,.9); }

/* animation utilities (used by accents) */
@keyframes wc-pulse{ 0%,100%{ opacity:.5;} 50%{ opacity:1;} }
@keyframes wc-flicker{ 0%,19%,21%,55%,57%,100%{ opacity:1;} 20%,56%{ opacity:.35;} }
.flicker{ animation:wc-flicker 4s infinite steps(1); }
.pulse{ animation:wc-pulse 2.4s infinite ease-in-out; }
.glow-myth{ text-shadow:0 0 18px rgba(251,191,36,.55); }
.glow-storm{ text-shadow:0 0 18px rgba(139,92,246,.6); }