/* Agent Quest: sci-fi x medieval guild theme (shared by landing + web app) */
@font-face{font-family:"Cinzel Decorative";src:url(/shared/fonts/cinzel-decorative-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cinzel";src:url(/shared/fonts/cinzel-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cinzel";src:url(/shared/fonts/cinzel-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Orbitron";src:url(/shared/fonts/orbitron-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(/shared/fonts/rajdhani-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(/shared/fonts/rajdhani-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(/shared/fonts/rajdhani-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
 --void:#05060f;--deep:#0a0e27;--panel:rgba(18,24,62,.55);--panel2:rgba(28,22,70,.55);--line:rgba(120,200,255,.22);
 --cyan:#3ef0ff;--violet:#9b5cff;--mag:#ff4fd8;--gold:#ffcf5a;--ember:#ff8a3d;--green:#4dffa8;--red:#ff5470;
 --txt:#e8ecff;--muted:#a3acd6;--dim:#6f78a8;
 --f-brand:"Cinzel Decorative","Cinzel",Georgia,serif;--f-head:"Cinzel",Georgia,serif;--f-ui:"Orbitron","Rajdhani",system-ui,sans-serif;--f-body:"Rajdhani",system-ui,-apple-system,"Segoe UI",sans-serif;
 --r:16px;--glow:0 0 18px rgba(62,240,255,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--txt);font-family:var(--f-body);font-weight:500;font-size:17px;line-height:1.5;-webkit-text-size-adjust:100%;overflow-x:hidden}
a{color:var(--cyan)}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* cosmic backdrop: nebula + blueprint grid + star dust */
.cosmos{position:fixed;inset:0;z-index:-2;pointer-events:none;
 background:
  radial-gradient(1100px 600px at 80% -10%,rgba(155,92,255,.30),transparent 60%),
  radial-gradient(900px 500px at -10% 20%,rgba(62,240,255,.16),transparent 60%),
  radial-gradient(800px 600px at 50% 120%,rgba(255,79,216,.14),transparent 60%),
  linear-gradient(180deg,#070920,#05060f 60%)}
.cosmos::before{content:"";position:absolute;inset:0;opacity:.5;
 background-image:linear-gradient(rgba(62,240,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(62,240,255,.07) 1px,transparent 1px),
  linear-gradient(rgba(62,240,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(62,240,255,.035) 1px,transparent 1px);
 background-size:120px 120px,120px 120px,24px 24px,24px 24px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 80%)}
.cosmos::after{content:"";position:absolute;inset:-50%;opacity:.7;
 background-image:radial-gradient(1.2px 1.2px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 140px 80px,#bff9ff,transparent),
  radial-gradient(1.4px 1.4px at 260px 160px,#e6d4ff,transparent),radial-gradient(1px 1px at 90px 210px,#fff,transparent),radial-gradient(1.2px 1.2px at 330px 260px,#ffe9b0,transparent);
 background-size:380px 300px;animation:drift 120s linear infinite}
@keyframes drift{to{transform:translate3d(380px,300px,0)}}

/* holographic glass panel with neon edge + corner brackets */
.holo{position:relative;background:linear-gradient(160deg,rgba(40,52,120,.42),rgba(16,14,48,.55));border:1px solid var(--line);border-radius:var(--r);
 backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px -20px rgba(0,0,0,.7)}
.holo::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(135deg,rgba(62,240,255,.8),rgba(155,92,255,.15) 35%,rgba(255,79,216,.0) 60%,rgba(255,207,90,.6));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.brackets{background:
 linear-gradient(var(--cyan),var(--cyan)) top left/14px 2px no-repeat,linear-gradient(var(--cyan),var(--cyan)) top left/2px 14px no-repeat,
 linear-gradient(var(--cyan),var(--cyan)) top right/14px 2px no-repeat,linear-gradient(var(--cyan),var(--cyan)) top right/2px 14px no-repeat,
 linear-gradient(var(--gold),var(--gold)) bottom left/14px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) bottom left/2px 14px no-repeat,
 linear-gradient(var(--gold),var(--gold)) bottom right/14px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) bottom right/2px 14px no-repeat}

/* holographic parchment scroll (quest cards) */
.scroll{position:relative;border-radius:12px;padding:14px 14px 12px;
 background:linear-gradient(180deg,rgba(255,226,160,.13),rgba(255,207,90,.04) 40%,rgba(62,240,255,.06)),
  repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 4px),rgba(14,16,44,.72);
 border:1px solid rgba(255,207,90,.32);box-shadow:inset 0 0 24px rgba(255,207,90,.06),0 10px 30px -14px rgba(0,0,0,.8)}
.scroll::before,.scroll::after{content:"";position:absolute;left:8px;right:8px;height:6px;border-radius:6px;
 background:linear-gradient(90deg,transparent,rgba(255,207,90,.75),rgba(62,240,255,.75),transparent);filter:blur(.3px);box-shadow:0 0 10px rgba(255,207,90,.45)}
.scroll::before{top:-3px}.scroll::after{bottom:-3px}

/* glowing rune XP bar */
.rune-bar{position:relative;height:10px;border-radius:10px;background:rgba(10,12,34,.9);border:1px solid rgba(62,240,255,.3);overflow:hidden}
.rune-bar>i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--cyan) 70%,#e9feff);box-shadow:0 0 12px var(--cyan),0 0 4px #fff inset;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.rune-bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(5,6,15,.65) 14px 16px);pointer-events:none}
.rune-bar>i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}

/* guild rank crest badge */
.crest{--c:var(--cyan);position:relative;display:inline-grid;place-items:center;width:38px;height:44px;flex:none;font-family:var(--f-head);font-weight:900;font-size:15px;color:#fff;
 clip-path:polygon(50% 0,100% 14%,96% 62%,50% 100%,4% 62%,0 14%);background:linear-gradient(160deg,var(--c),#1a1440 75%);filter:drop-shadow(0 0 6px var(--c))}
.crest::before{content:"";position:absolute;inset:2px;clip-path:inherit;background:linear-gradient(170deg,#1b2160,#090b22);z-index:-0}
.crest>b{position:relative;z-index:1;text-shadow:0 0 8px var(--c)}
.crest.r1{--c:#8fa4d8}.crest.r3{--c:var(--cyan)}.crest.r5{--c:var(--violet)}.crest.r8{--c:var(--gold)}.crest.r11{--c:var(--mag)}

/* buttons */
.btn{--b:var(--cyan);display:inline-flex;align-items:center;gap:.5em;justify-content:center;border:0;cursor:pointer;text-decoration:none;
 font-family:var(--f-ui);font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:14px 22px;border-radius:12px;color:#05060f;
 background:linear-gradient(135deg,#bff9ff,var(--cyan) 40%,var(--violet));box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 8px 30px -8px var(--cyan);transition:transform .2s,box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 14px 40px -8px var(--cyan);filter:brightness(1.08)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:rgba(62,240,255,.06);color:var(--txt);box-shadow:0 0 0 1px rgba(62,240,255,.45) inset}
.btn.gold{background:linear-gradient(135deg,#fff3c8,var(--gold) 45%,var(--ember));box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 8px 30px -8px var(--gold)}
.btn.sm{padding:9px 13px;font-size:11px;border-radius:9px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

.kicker{font-family:var(--f-ui);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan)}
.display{font-family:var(--f-head);font-weight:900;letter-spacing:.02em;line-height:1.05}
.grad-txt{background:linear-gradient(100deg,#fff 10%,#bff9ff 35%,var(--violet) 65%,var(--mag));-webkit-background-clip:text;background-clip:text;color:transparent}
.gold-txt{background:linear-gradient(180deg,#fff7d6,var(--gold) 55%,#c7801f);-webkit-background-clip:text;background-clip:text;color:transparent}

.lang-toggle{display:inline-flex;border-radius:999px;padding:3px;background:rgba(10,12,34,.7);border:1px solid var(--line)}
.lang-toggle button{border:0;background:none;cursor:pointer;font-family:var(--f-ui);font-size:11px;letter-spacing:.12em;padding:7px 11px;border-radius:999px;color:var(--muted)}
.lang-toggle button[aria-pressed="true"]{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#05060f;box-shadow:0 0 14px rgba(62,240,255,.5)}

.agent-img{filter:drop-shadow(0 0 10px var(--ac,rgba(62,240,255,.6))) drop-shadow(0 10px 10px rgba(0,0,0,.5))}
.tag-example{display:inline-block;font-family:var(--f-ui);font-size:9.5px;letter-spacing:.14em;padding:3px 7px;border-radius:6px;color:#1a1200;background:var(--gold);vertical-align:middle}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}

/* Agent Quest Construct wordmark: small gold "CONSTRUCT" line under the name (Oct 11 2026) */
.wordmark{display:inline-flex;flex-direction:column;line-height:1.02}
.wm-sub{display:block;margin-top:3px;font-size:.52em;letter-spacing:.36em;line-height:1;text-transform:uppercase;background:linear-gradient(180deg,#fff3c4,#ffcf5a 60%,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}