/* Financial Game Zone: liquid glass + claymorphism */
:root{
  --ink:#140E33; --ink2:#221650; --txt:#F6F2FF; --mut:#BDB4E6;
  --tangerine:#FF8A3D; --bubblegum:#FF6FA8; --sky:#5FB4FF; --mint:#4FDDB8; --butter:#FFD65E; --lilac:#A98BFF; --peach:#FF9E7A;
  --r:28px;
  --glass:rgba(255,255,255,.11); --glass-b:rgba(255,255,255,.30);
}
*{box-sizing:border-box;margin:0}
html{color-scheme:dark}
body{font-family:'Figtree',system-ui,sans-serif;color:var(--txt);min-height:100vh;background:var(--ink);overflow-x:hidden;line-height:1.5}
h1,h2,h3,.disp{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;letter-spacing:.005em;line-height:1.1}
a{color:var(--butter)}
/* aurora background */
.aurora{position:fixed;inset:0;z-index:-1;background:radial-gradient(120% 90% at 20% 0%,#2E1C6E 0%,var(--ink) 60%)}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:46vmax;height:46vmax;left:-12vmax;top:-10vmax;background:var(--bubblegum)}
.aurora i:nth-child(2){width:40vmax;height:40vmax;right:-10vmax;top:10vmax;background:var(--sky);animation-duration:28s}
.aurora i:nth-child(3){width:36vmax;height:36vmax;left:25vmax;bottom:-16vmax;background:var(--tangerine);animation-duration:25s}
.aurora i:nth-child(4){width:24vmax;height:24vmax;right:8vmax;bottom:6vmax;background:var(--mint);opacity:.35;animation-duration:30s}
@keyframes drift{to{transform:translate3d(6vmax,4vmax,0) scale(1.12)}}
/* liquid glass */
.glass{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.06) 45%,rgba(255,255,255,.12));
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--glass-b);border-radius:var(--r);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.12),inset 0 0 30px rgba(255,255,255,.05),0 24px 60px rgba(8,4,30,.45)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.35),transparent 55%)}
.glass>*{position:relative}
.pad{padding:26px}.pad-s{padding:16px}
/* clay buttons */
.clay{--c:var(--tangerine);--d:#00000030;appearance:none;border:0;cursor:pointer;font:600 1.05rem 'Fredoka',sans-serif;color:#2a1240;
  padding:14px 26px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff) 0%,var(--c) 55%);
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.20),inset 0 6px 8px rgba(255,255,255,.65),0 12px 22px rgba(10,4,40,.45);
  transition:transform .12s,box-shadow .12s,filter .12s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.clay:hover{transform:translateY(-2px);filter:brightness(1.05)}
.clay:active{transform:translateY(3px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),inset 0 5px 8px rgba(255,255,255,.5),0 4px 10px rgba(10,4,40,.4)}
.clay[disabled]{opacity:.5;pointer-events:none;filter:grayscale(.4)}
.clay.sm{padding:9px 18px;font-size:.92rem}.clay.lg{padding:18px 38px;font-size:1.25rem}.clay.block{display:flex;width:100%}
.tangerine{--c:var(--tangerine)}.bubblegum{--c:var(--bubblegum)}.sky{--c:var(--sky)}.mint{--c:var(--mint)}.butter{--c:var(--butter)}.lilac{--c:var(--lilac)}.peach{--c:var(--peach)}
.ghost{background:rgba(255,255,255,.12);color:var(--txt);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px rgba(10,4,40,.3)}
/* clay tile / chip */
.tile{border-radius:34px;padding:22px;color:#2a1240;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 62%,#fff),var(--c));
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.16),inset 0 8px 12px rgba(255,255,255,.6),0 18px 30px rgba(10,4,40,.45)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-weight:700;font-size:.9rem;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
/* inputs: pressed-in clay */
label{display:block;font-weight:700;font-size:.9rem;margin:14px 0 6px;color:var(--mut)}
input,select,textarea{width:100%;font:500 1rem 'Figtree',sans-serif;color:var(--txt);padding:14px 18px;border-radius:20px;border:1px solid rgba(255,255,255,.18);
  background:rgba(12,6,40,.42);box-shadow:inset 0 4px 10px rgba(0,0,0,.38),inset 0 -1px 0 rgba(255,255,255,.12);outline:none}
input:focus,select:focus{border-color:var(--butter);box-shadow:inset 0 4px 10px rgba(0,0,0,.38),0 0 0 3px rgba(255,214,94,.35)}
input::placeholder{color:#8f86bd}
input[type=checkbox],input[type=radio]{width:20px;height:20px;padding:0;accent-color:var(--tangerine);box-shadow:none}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1 1 180px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--mut);margin-top:14px;line-height:1.4}
.check input{flex:0 0 20px;margin-top:2px}
.seg{display:flex;gap:6px;padding:6px;border-radius:999px;background:rgba(12,6,40,.4);box-shadow:inset 0 3px 8px rgba(0,0,0,.35)}
.seg button{flex:1;border:0;border-radius:999px;padding:10px 6px;font:600 .95rem 'Fredoka',system-ui,sans-serif;color:var(--mut);background:none;cursor:pointer}
.seg button.on{color:#2a1240;background:linear-gradient(180deg,#ffe9b0,var(--butter));box-shadow:inset 0 -4px 0 rgba(0,0,0,.15),inset 0 3px 5px rgba(255,255,255,.7)}
.err{color:#ffb4c6;font-weight:600;font-size:.92rem;margin-top:10px;min-height:1.2em}
.ok{color:var(--mint)}
.mut{color:var(--mut)}.small{font-size:.85rem}.center{text-align:center}.hide{display:none!important}
/* layout */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.nav{position:sticky;top:12px;z-index:20;margin:12px auto 0;max-width:1180px;padding:0 20px}
.nav .glass{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:999px;flex-wrap:wrap}
.brand{font:600 1.3rem 'Fredoka',system-ui,sans-serif;color:var(--txt);text-decoration:none;display:flex;gap:10px;align-items:center;margin-right:auto}
.brand b{display:grid;place-items:center;width:38px;height:38px;border-radius:14px;background:linear-gradient(160deg,#ffd0a0,var(--tangerine));box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),inset 0 3px 5px rgba(255,255,255,.7);font-size:1.2rem}
.nav a.lnk{color:var(--txt);text-decoration:none;font-weight:700;padding:8px 14px;border-radius:999px}
.nav a.lnk:hover,.nav a.lnk.on{background:rgba(255,255,255,.16)}
.av{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6);background:var(--lilac)}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.split{display:grid;gap:34px;grid-template-columns:1.1fr .9fr;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
h1.big{font-size:clamp(2.4rem,5.2vw,4.2rem)}
h2.sec{font-size:clamp(1.6rem,3.5vw,2.3rem);margin:44px 0 18px}
/* game cards */
.game{display:flex;flex-direction:column;gap:10px;min-height:230px}
.game .em{font-size:3rem;filter:drop-shadow(0 6px 4px rgba(0,0,0,.25))}
.game h3{font-size:1.45rem}.game p{font-size:.95rem;flex:1;opacity:.85}
/* floating clay shapes on hero */
.floaters{position:relative;height:340px}
.floaters .tile{position:absolute;display:grid;place-items:center;font-size:3.4rem;animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-14px) rotate(var(--rot,0deg))}}
/* leaderboard */
.lb{display:flex;flex-direction:column;gap:10px}
.lb .it{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:22px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.lb .it:nth-child(1){background:linear-gradient(90deg,rgba(255,214,94,.45),rgba(255,255,255,.1))}
.lb .n{margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .pos{width:30px;font-family:'Fredoka',system-ui,sans-serif;color:var(--butter)}
/* timer bar */
.timer{height:16px;border-radius:99px;background:rgba(12,6,40,.5);box-shadow:inset 0 3px 6px rgba(0,0,0,.4);overflow:hidden}
.timer i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--mint),var(--butter),var(--bubblegum));transform-origin:left;box-shadow:inset 0 3px 3px rgba(255,255,255,.5)}
/* quiz answer blocks */
.opts{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.opts{grid-template-columns:1fr}}
.opt{--c:var(--bubblegum);min-height:84px;border-radius:26px;border:0;cursor:pointer;color:#2a1240;text-align:left;font:600 1.1rem 'Fredoka',system-ui,sans-serif;padding:16px 20px;display:flex;gap:12px;align-items:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 60%,#fff),var(--c));box-shadow:inset 0 -8px 0 rgba(0,0,0,.18),inset 0 6px 9px rgba(255,255,255,.6),0 10px 18px rgba(10,4,40,.4);transition:transform .1s,opacity .2s}
.opt:active{transform:translateY(3px)}
.opt:nth-child(2){--c:var(--sky)}.opt:nth-child(3){--c:var(--butter)}.opt:nth-child(4){--c:var(--mint)}
.opt.dim{opacity:.35}.opt.right{outline:5px solid #fff;transform:scale(1.02)}.opt.picked{outline:4px dashed rgba(255,255,255,.9)}
.opt .cnt{margin-left:auto;font-size:1.5rem}
.qtext{font-size:clamp(1.5rem,3.4vw,2.6rem)}
.bigcode{font:700 clamp(3rem,9vw,6.5rem) 'Fredoka',system-ui,sans-serif;letter-spacing:.14em;padding:10px 34px;border-radius:36px;display:inline-block;color:#2a1240;
  background:linear-gradient(160deg,#fff3c9,var(--butter));box-shadow:inset 0 -10px 0 rgba(0,0,0,.16),inset 0 8px 12px rgba(255,255,255,.8),0 20px 40px rgba(10,4,40,.5)}
.qr{background:#fff;border-radius:26px;padding:12px;width:230px;height:230px;box-shadow:0 14px 30px rgba(0,0,0,.4),inset 0 0 0 5px rgba(169,139,255,.35)}
.qr img{width:100%;height:100%;display:block}
.pl{display:flex;gap:10px;flex-wrap:wrap}
.pl .chip button{background:none;border:0;color:var(--mut);cursor:pointer;font-size:1rem}
/* market */
.asset{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.12)}
.asset input[type=range]{grid-column:1/-1;padding:0;height:26px;background:none;box-shadow:none;border:0;accent-color:var(--tangerine)}
.pos-n{color:var(--mint)}.neg-n{color:#ff8fa8}
.meter{height:18px;border-radius:99px;background:rgba(12,6,40,.5);box-shadow:inset 0 3px 6px rgba(0,0,0,.4);overflow:hidden;display:flex}
.meter i{display:block;background:linear-gradient(180deg,var(--sky),#3a86e8)}
.headline{font:600 clamp(1.3rem,3vw,2rem) 'Fredoka',system-ui,sans-serif;padding:16px 22px;border-radius:26px;background:rgba(255,214,94,.16);border:1px solid rgba(255,214,94,.5)}
.retbar{display:grid;grid-template-columns:150px 1fr 70px;gap:10px;align-items:center;margin:8px 0;font-weight:700}
.retbar div.b{height:22px;border-radius:99px;background:rgba(12,6,40,.4);position:relative;overflow:hidden}
.retbar div.b i{position:absolute;top:0;bottom:0;border-radius:99px}
/* table */
.tbl{width:100%;border-collapse:separate;border-spacing:0 8px}
.tbl th{text-align:left;font-size:.8rem;color:var(--mut);padding:0 12px}
.tbl td{padding:12px;background:rgba(255,255,255,.1);font-weight:600}
.tbl td:first-child{border-radius:18px 0 0 18px}.tbl td:last-child{border-radius:0 18px 18px 0}
.xscroll{overflow-x:auto}
/* calculators */
.calcs{display:grid;grid-template-columns:280px 1fr;gap:22px}
@media(max-width:860px){.calcs{grid-template-columns:1fr}.ctabs{flex-direction:row!important;overflow-x:auto}}
.ctabs{display:flex;flex-direction:column;gap:8px}
.ctabs button{text-align:left;border:0;cursor:pointer;color:var(--txt);font:600 1rem 'Fredoka',system-ui,sans-serif;padding:12px 18px;border-radius:20px;background:rgba(255,255,255,.08);white-space:nowrap}
.ctabs button.on{background:linear-gradient(180deg,#ffe9b0,var(--butter));color:#2a1240;box-shadow:inset 0 -5px 0 rgba(0,0,0,.15),inset 0 4px 6px rgba(255,255,255,.7)}
.fld{display:grid;grid-template-columns:1fr 130px;gap:6px 14px;align-items:center;margin-top:14px}
.fld label{margin:0}.fld input[type=range]{grid-column:1/-1;padding:0;height:24px;background:none;box-shadow:none;border:0;accent-color:var(--tangerine)}
.res{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:22px}
.res .tile{padding:16px 18px}.res .tile small{display:block;font-weight:700;opacity:.75}.res .tile b{font:600 1.5rem 'Fredoka',system-ui,sans-serif}
svg text{font-family:'Figtree'}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:99;padding:14px 24px;border-radius:999px}
.foot{margin:60px auto 30px;text-align:center;color:var(--mut);font-size:.8rem;max-width:760px;padding:0 20px}
.pulse{animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.06)}}
.pop{animation:pop .5s cubic-bezier(.2,1.4,.4,1)}@keyframes pop{from{transform:scale(.6);opacity:0}}
:focus-visible{outline:3px solid var(--butter);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:600px){.pad{padding:18px}.retbar{grid-template-columns:110px 1fr 60px}.nav .glass{border-radius:28px}}