/* ============ CREATIVE NERDS OS / Frutiger Aero / XP / Aqua ============ */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --win-blue:#2b6fd4; --win-blue-d:#1a4fa0; --nerd-yellow:#ffd21f;
  --aqua:#5ad7f7; --lime:#9bdb2d; --orange:#ff9d2e; --chrome:#dfe9f5;
  --glass:rgba(255,255,255,.55);
}
html,body{ height:100%; overflow:hidden; font-family:"Segoe UI",Tahoma,Verdana,sans-serif; user-select:none; }
body{ background:#7ec6f2; cursor:default; }

/* ================= SKY ================= */
#sky{ position:fixed; inset:0; overflow:hidden;
  background:linear-gradient(180deg,#3f8fdd 0%,#6ab7ef 34%,#a5dcf8 62%,#d8f3fd 84%,#eefaff 100%); }
#sun{ position:absolute; top:-140px; right:-120px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,230,.95) 0%,rgba(255,244,180,.5) 30%,rgba(255,240,170,0) 70%);
  animation:sunPulse 9s ease-in-out infinite; pointer-events:none; }
@keyframes sunPulse{ 0%,100%{transform:scale(1);opacity:.9} 50%{transform:scale(1.08);opacity:1} }
.flare{ position:absolute; border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(160,220,255,0) 70%);
  animation:flare 14s ease-in-out infinite; }
@keyframes flare{ 0%,100%{opacity:0} 45%{opacity:0} 55%{opacity:.8} 65%{opacity:0} }
.cloud{ position:absolute; pointer-events:none; filter:drop-shadow(0 18px 22px rgba(30,90,160,.18)); animation:drift linear infinite; }
.cloud .puff{ position:absolute; border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#ffffff 0%,#f4fbff 55%,#d9eefb 100%); }
@keyframes drift{ from{transform:translateX(-30vw)} to{transform:translateX(130vw)} }
.particle{ position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.95),rgba(255,255,255,.15) 70%);
  animation:floatUp linear infinite; }
@keyframes floatUp{ from{transform:translateY(105vh) translateX(0)} to{transform:translateY(-10vh) translateX(60px)} }
#grass{ position:absolute; left:0; right:0; bottom:0; height:15vh; pointer-events:none;
  background:linear-gradient(180deg,rgba(155,219,45,0) 0%,rgba(155,219,45,.35) 45%,rgba(110,190,60,.55) 100%); }

/* ================= BOOT ================= */
#boot{ position:fixed; inset:0; z-index:9000; background:#04122e; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:30px; transition:opacity .45s ease; }
#boot.done{ opacity:0; pointer-events:none; }
#boot img{ width:130px; animation:bootBob 2s ease-in-out infinite; filter:drop-shadow(0 12px 30px rgba(90,170,255,.45)); }
@keyframes bootBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
#boot .bootTitle{ color:#fff; font-size:30px; font-weight:600; letter-spacing:.5px; }
#boot .bootTitle span{ color:var(--nerd-yellow); }
#boot small{ color:#7fa8d8; font-size:13px; }
#bootbar{ width:230px; height:16px; border:2px solid #4c76b5; border-radius:8px; overflow:hidden; padding:2px; }
#bootbar div{ display:flex; gap:4px; height:100%; width:64px; animation:bootScroll 1.4s linear infinite; }
#bootbar i{ flex:0 0 12px; border-radius:2px; background:linear-gradient(180deg,#8fd0ff,#2e7ce0); }
@keyframes bootScroll{ from{transform:translateX(-70px)} to{transform:translateX(230px)} }

/* ================= DESKTOP ================= */
#desktop{ position:fixed; inset:48px 0 52px 0; z-index:10; }
#world{ position:absolute; inset:0; transition:transform .25s cubic-bezier(.2,.8,.3,1); }

/* hero */
#hero{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); text-align:center; z-index:5; pointer-events:none; }
#hero > *{ pointer-events:auto; }
#mascotWrap{ position:relative; display:inline-block; animation:heroFloat 5s ease-in-out infinite; }
@keyframes heroFloat{ 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-20px) rotate(1.5deg)} }
#mascot{ width:min(240px,30vw); transition:transform .18s ease; transform-origin:50% 85%;
  filter:drop-shadow(0 30px 34px rgba(20,70,140,.35)); }
#mascotWrap:hover #mascot{ animation:party .6s ease; }
@keyframes party{ 0%{transform:scale(1) rotate(0)} 30%{transform:scale(1.12,.9) rotate(-6deg)} 60%{transform:scale(.95,1.1) rotate(5deg)} 100%{transform:scale(1) rotate(0)} }
#mascot.blink{ animation:blink .18s ease; }
@keyframes blink{ 50%{transform:scaleY(.86)} }
#wave{ position:absolute; right:-16px; bottom:26%; font-size:52px; transform-origin:80% 90%; opacity:0;
  filter:drop-shadow(0 6px 8px rgba(20,70,140,.3)); }
#wave.go{ animation:waveAnim 1.6s ease; }
@keyframes waveAnim{ 0%{opacity:0;transform:rotate(0)} 15%{opacity:1} 30%{transform:rotate(24deg)} 45%{transform:rotate(-8deg)} 60%{transform:rotate(24deg)} 75%{transform:rotate(-8deg)} 100%{opacity:0;transform:rotate(0)} }
#shadowDisc{ width:150px; height:26px; margin:-6px auto 8px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(20,60,120,.30),rgba(20,60,120,0) 70%);
  animation:shadowPulse 5s ease-in-out infinite; }
@keyframes shadowPulse{ 0%,100%{transform:scaleX(1);opacity:.9} 50%{transform:scaleX(.72);opacity:.55} }
#hero h1{ font-size:clamp(38px,6.5vw,76px); font-weight:800; letter-spacing:1px; color:#fff; line-height:1;
  text-shadow:0 2px 0 rgba(255,255,255,.6),0 6px 18px rgba(20,80,160,.55),0 1px 2px rgba(30,90,170,.8);
  background:linear-gradient(180deg,#ffffff 20%,#d9f1ff 50%,#8fd0ff 55%,#eaf8ff 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 14px rgba(15,70,150,.5)); }
#hero h1 em{ font-style:normal;
  background:linear-gradient(180deg,#fff2b0 15%,#ffd21f 50%,#f5a800 55%,#ffe98a 100%);
  -webkit-background-clip:text; background-clip:text; }
#hero h2{ margin:8px auto 0; max-width:520px; color:#fff; font-size:clamp(15px,2.2vw,22px); font-weight:700;
  text-shadow:0 1px 3px rgba(20,80,160,.65); }
#hero p{ margin:10px auto 22px; max-width:560px; color:#ffffff; font-size:clamp(13px,1.6vw,17px);
  text-shadow:0 1px 3px rgba(20,80,160,.65); font-weight:500; }
#heroBtns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* glossy aero buttons */
.aeroBtn{ position:relative; display:inline-block; border:none; cursor:pointer; padding:13px 30px; border-radius:26px;
  font-family:inherit; font-size:15px; font-weight:700; color:#fff; letter-spacing:.3px; text-decoration:none;
  text-shadow:0 1px 2px rgba(0,40,90,.55);
  background:linear-gradient(180deg,#6cb6f5 0%,#2b78dd 46%,#1859bd 52%,#3f8ce8 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.5) inset,0 -8px 14px rgba(10,50,120,.35) inset,0 10px 20px rgba(15,70,150,.4),0 0 0 1px rgba(20,70,150,.5);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s,filter .16s; overflow:hidden; }
.aeroBtn::after{ content:""; position:absolute; left:6%; right:6%; top:2px; height:46%;
  border-radius:22px 22px 40px 40px; background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.05)); pointer-events:none; }
.aeroBtn:hover{ transform:translateY(-3px) scale(1.05); filter:brightness(1.12);
  box-shadow:0 2px 0 rgba(255,255,255,.6) inset,0 -8px 14px rgba(10,50,120,.3) inset,0 16px 30px rgba(15,70,150,.5),0 0 24px rgba(120,200,255,.7),0 0 0 1px rgba(20,70,150,.5); }
.aeroBtn:active{ transform:translateY(1px) scale(.97); }
.aeroBtn.yellow{ color:#5c3a00; text-shadow:0 1px 1px rgba(255,255,255,.6);
  background:linear-gradient(180deg,#ffe97a 0%,#ffcf17 46%,#f2ab00 52%,#ffdf55 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.7) inset,0 -8px 14px rgba(160,90,0,.3) inset,0 10px 20px rgba(140,90,0,.35),0 0 0 1px rgba(170,110,0,.5); }
.aeroBtn.green{ background:linear-gradient(180deg,#c7ef6d 0%,#8ecb23 46%,#6ba60d 52%,#a7dd3f 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.6) inset,0 -8px 14px rgba(40,90,0,.35) inset,0 10px 20px rgba(50,100,10,.35),0 0 0 1px rgba(70,120,20,.5); }

/* desktop icons */
.dIcon{ position:absolute; width:92px; text-align:center; cursor:pointer; z-index:6;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1); animation:iconIdle 6s ease-in-out infinite; }
@keyframes iconIdle{ 0%,100%{margin-top:0} 50%{margin-top:-8px} }
.dIcon .art{ width:68px; height:68px; margin:0 auto 6px; border-radius:20px; display:flex; align-items:center;
  justify-content:center; font-size:36px; position:relative;
  box-shadow:0 2px 0 rgba(255,255,255,.55) inset,0 -10px 16px rgba(0,30,80,.28) inset,0 12px 20px rgba(15,60,130,.35),0 0 0 1px rgba(255,255,255,.35);
  transition:box-shadow .22s,filter .22s; }
.dIcon .art::after{ content:""; position:absolute; left:8%; right:8%; top:4%; height:44%;
  border-radius:14px 14px 30px 30px; background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.06)); }
.dIcon span{ display:block; font-size:12px; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(10,60,130,.9),0 0 6px rgba(10,60,130,.6); }
.dIcon:hover{ transform:scale(1.18) rotate(-4deg); animation-play-state:paused; }
.dIcon:hover .art{ filter:brightness(1.15); box-shadow:0 2px 0 rgba(255,255,255,.65) inset,0 -10px 16px rgba(0,30,80,.22) inset,0 18px 30px rgba(15,60,130,.45),0 0 26px rgba(140,220,255,.85),0 0 0 1px rgba(255,255,255,.5); }
.dIcon:active{ transform:scale(.94); }

/* floating deco stickers */
.deco{ position:absolute; pointer-events:none; z-index:3; opacity:.9; filter:drop-shadow(0 10px 14px rgba(20,70,140,.3));
  animation:decoFloat ease-in-out infinite; font-size:34px; }
@keyframes decoFloat{ 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-16px) rotate(6deg)} }

/* ================= WINDOWS ================= */
.win{ position:absolute; min-width:300px; border-radius:12px; z-index:100; display:none;
  background:rgba(228,240,252,.86); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(60,110,190,.55),0 24px 48px rgba(10,50,120,.45),0 0 40px rgba(120,190,255,.25);
  transform-origin:50% 100%; }
.win.open{ display:block; animation:winOpen .42s cubic-bezier(.34,1.4,.44,1); }
.win.closing{ animation:winClose .28s ease forwards; }
.win.minimizing{ animation:winMin .32s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes winOpen{ 0%{transform:scale(.4) translateY(120px); opacity:0} 100%{transform:scale(1) translateY(0); opacity:1} }
@keyframes winClose{ to{transform:scale(.5) translateY(80px); opacity:0} }
@keyframes winMin{ to{transform:scale(.06) translateY(90vh); opacity:0} }
.tbar{ height:38px; display:flex; align-items:center; gap:9px; padding:0 8px 0 12px; cursor:grab; border-radius:12px 12px 0 0;
  background:linear-gradient(180deg,#8ec5f5 0%,#3d84e0 45%,#1f61c4 52%,#4b90e6 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset,0 -1px 0 rgba(10,50,120,.4) inset; }
.tbar:active{ cursor:grabbing; }
.tbar .tico{ font-size:17px; filter:drop-shadow(0 1px 1px rgba(0,30,80,.5)); }
.tbar h2{ flex:1; color:#fff; font-size:13.5px; font-weight:700; letter-spacing:.3px; text-shadow:0 1px 2px rgba(0,40,100,.6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wbtn{ width:26px; height:24px; border:none; border-radius:7px; cursor:pointer; font-size:12px; font-weight:900;
  color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); line-height:1; position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -5px 8px rgba(0,0,0,.22) inset,0 2px 4px rgba(0,30,80,.4);
  transition:filter .12s,transform .12s; }
.wbtn:hover{ filter:brightness(1.2); transform:scale(1.08); }
.wbtn:active{ transform:scale(.92); }
.wbtn.min{ background:linear-gradient(180deg,#9fd2f7,#2e77d8 55%,#5c9ceb); }
.wbtn.max{ background:linear-gradient(180deg,#9fd2f7,#2e77d8 55%,#5c9ceb); }
.wbtn.cls{ background:linear-gradient(180deg,#ff9d8a,#e33d1e 55%,#ff7752); }
.wbody{ padding:16px; font-size:13.5px; color:#17365e; max-height:min(62vh,560px); overflow:auto; border-radius:0 0 12px 12px; }
.wbody::-webkit-scrollbar{ width:12px; }
.wbody::-webkit-scrollbar-track{ background:rgba(180,210,240,.4); border-radius:6px; }
.wbody::-webkit-scrollbar-thumb{ border-radius:6px; border:2px solid rgba(255,255,255,.4);
  background:linear-gradient(180deg,#7db8ef,#3b7fd9); }

/* window heading typography (H2 window titles / H3 items rendered inside windows) */
.wbody h2{ font-size:14.5px; color:#123d78; margin:0 0 10px; letter-spacing:.2px; }
.wbody h3{ font-size:13px; color:#123d78; margin:0; }

/* ================= SHOP ================= */
#shopGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:14px; }
.prod{ perspective:700px; scroll-margin-top:64px; }
.prodCard{ display:block; width:100%; border:none; margin:0; font:inherit; appearance:none; text-decoration:none;
  border-radius:14px; padding:12px 10px 12px; text-align:center; cursor:pointer; position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(222,238,252,.85));
  box-shadow:0 1px 0 #fff inset,0 -8px 14px rgba(120,170,220,.25) inset,0 8px 18px rgba(30,80,150,.22),0 0 0 1px rgba(150,190,230,.6);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s; transform-style:preserve-3d; }
.prodCard:focus-visible{ outline:3px solid #1e6fd9; outline-offset:2px; }
.prod:hover .prodCard{ transform:rotateY(-10deg) rotateX(6deg) translateY(-6px) scale(1.04);
  box-shadow:0 1px 0 #fff inset,0 -8px 14px rgba(120,170,220,.2) inset,0 20px 34px rgba(30,80,150,.35),0 0 22px rgba(120,200,255,.5),0 0 0 1px rgba(150,190,230,.6); }
.prodArt{ height:92px; display:flex; align-items:center; justify-content:center; font-size:56px; margin-bottom:6px;
  filter:drop-shadow(0 10px 10px rgba(20,60,120,.3)); animation:prodBob 4s ease-in-out infinite; }
.prodArt img{ max-height:100%; max-width:100%; object-fit:contain; border-radius:8px; }
@keyframes prodBob{ 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-7px) rotate(2deg)} }
.prodCard h3{ font-size:13px; color:#123d78; }
.prodCard small{ display:block; color:#4a76ad; font-size:11px; margin:2px 0 8px; }
.price{ display:inline-block; font-weight:800; font-size:13px; color:#5c3a00; padding:4px 14px; border-radius:14px;
  background:linear-gradient(180deg,#ffe97a,#ffcb17 55%,#ffdf55);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 -4px 6px rgba(160,90,0,.28) inset,0 3px 7px rgba(140,90,0,.3); }
.tag{ position:absolute; top:-8px; right:-6px; font-size:10px; font-weight:800; color:#fff; padding:4px 10px; border-radius:12px;
  background:linear-gradient(180deg,#ff9d5c,#f2600d 55%,#ff8a3c); box-shadow:0 3px 8px rgba(180,60,0,.4),0 1px 0 rgba(255,255,255,.5) inset;
  transform:rotate(8deg); }
.shopBanner{ margin-bottom:14px; padding:12px 16px; border-radius:12px; display:flex; align-items:center; gap:12px;
  background:linear-gradient(90deg,rgba(255,224,90,.75),rgba(255,246,200,.8));
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 4px 10px rgba(150,100,0,.18),0 0 0 1px rgba(220,170,40,.5);
  font-weight:700; color:#6a4500; font-size:12.5px; }

.checkoutOverlay{ position:fixed; inset:0; z-index:9500; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(10,30,60,.55); }
.checkoutOverlay.open{ display:flex; }
.checkoutBox{ width:100%; max-width:320px; position:relative; text-align:center; border-radius:18px; padding:26px 22px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(222,238,252,.95));
  box-shadow:0 1px 0 #fff inset,0 24px 46px rgba(10,40,90,.45),0 0 0 1px rgba(150,190,230,.6); }
.checkoutBox img{ max-width:130px; max-height:130px; margin:0 auto 10px; display:block; object-fit:contain; }
.checkoutBox h3{ font-size:15px; color:#123d78; margin:0 0 6px; }
.checkoutClose{ position:absolute; top:10px; right:10px; border:none; cursor:pointer; font-weight:800; font-size:13px;
  width:28px; height:28px; border-radius:50%; color:#123d78; background:rgba(150,190,230,.4); }
.checkoutSizeRow{ display:flex; align-items:center; justify-content:center; margin:14px 0 4px; }
.checkoutBuyBtn{ margin-left:0; margin-top:12px; padding:9px 26px; font-size:12.5px; }

.lifeGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.lifeCard{ display:block; position:relative; border-radius:16px; overflow:hidden; text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(222,238,252,.85));
  box-shadow:0 1px 0 #fff inset,0 8px 18px rgba(30,80,150,.22),0 0 0 1px rgba(150,190,230,.6);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s; }
.lifeCard:hover{ transform:translateY(-6px) scale(1.03);
  box-shadow:0 1px 0 #fff inset,0 20px 34px rgba(30,80,150,.35),0 0 22px rgba(120,200,255,.5),0 0 0 1px rgba(150,190,230,.6); }
.lifeCard img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.lifeCap{ position:absolute; left:0; right:0; bottom:0; padding:20px 12px 10px; color:#fff; font-size:12.5px; font-weight:800;
  background:linear-gradient(0deg,rgba(10,40,90,.85),rgba(10,40,90,0)); text-shadow:0 1px 3px rgba(0,0,0,.4); }

/* ================= MSN / DISCORD ================= */
.msn{ display:flex; flex-direction:column; gap:0; margin:-16px; }
.msnHead{ padding:12px 16px; display:flex; gap:12px; align-items:center;
  background:linear-gradient(180deg,rgba(190,225,255,.9),rgba(150,200,245,.6)); }
.buddy{ width:46px; height:46px; border-radius:12px; background:linear-gradient(180deg,#fff,#cfe6fa); display:flex;
  align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(30,80,150,.3),0 1px 0 #fff inset; }
.buddy img{ width:36px; }
.msnHead h3{ color:#123d78; font-size:14px; }
.status{ display:flex; align-items:center; gap:5px; font-size:11px; color:#2c7a1e; font-weight:700; }
.status i{ width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#c9f7a0,#43c520 60%,#2c8f10);
  box-shadow:0 0 6px rgba(80,220,60,.8); animation:pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot{ 50%{transform:scale(1.25)} }
.chatLog{ padding:14px 16px; display:flex; flex-direction:column; gap:9px; background:rgba(255,255,255,.55); min-height:150px; }
.bub{ max-width:82%; padding:8px 13px; border-radius:14px; font-size:12.5px; line-height:1.45; opacity:0;
  animation:bubIn .4s cubic-bezier(.34,1.56,.64,1) forwards; box-shadow:0 3px 8px rgba(30,80,150,.18),0 1px 0 rgba(255,255,255,.7) inset; }
@keyframes bubIn{ from{opacity:0; transform:translateY(14px) scale(.8)} to{opacity:1; transform:none} }
.bub.them{ align-self:flex-start; background:linear-gradient(180deg,#ffffff,#ddeefb); color:#17365e; border-bottom-left-radius:4px; }
.bub.me{ align-self:flex-end; background:linear-gradient(180deg,#bfe3ff,#7fc0f2); color:#0d3364; border-bottom-right-radius:4px; }
.bub .who{ display:block; font-size:10px; font-weight:800; color:#3d78c0; margin-bottom:2px; }
.msnFoot{ padding:12px 16px 16px; background:linear-gradient(180deg,rgba(210,235,255,.5),rgba(170,210,248,.6)); border-radius:0 0 12px 12px; text-align:center; }
.typing{ font-size:11px; color:#4a76ad; font-style:italic; margin-bottom:8px; min-height:14px; }

/* ================= EVENTS ================= */
.evGrid{ display:grid; gap:13px; }
.evCard{ display:flex; gap:14px; padding:13px; border-radius:14px; align-items:center; position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(224,240,253,.85));
  box-shadow:0 1px 0 #fff inset,0 8px 16px rgba(30,80,150,.2),0 0 0 1px rgba(150,190,230,.6);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
.evCard:hover{ transform:translateY(-4px) scale(1.02); }
.evTag{ display:inline-block; font-size:10px; font-weight:800; color:#fff; letter-spacing:.4px; padding:4px 10px;
  border-radius:12px; background:linear-gradient(180deg,#ff9d5c,#f2600d 55%,#ff8a3c);
  box-shadow:0 2px 6px rgba(180,60,0,.35),0 1px 0 rgba(255,255,255,.5) inset; margin-bottom:6px; }
.calLeaf{ flex:0 0 62px; border-radius:11px; overflow:hidden; text-align:center;
  box-shadow:0 4px 10px rgba(30,80,150,.3),0 1px 0 rgba(255,255,255,.6) inset; }
.calLeaf .m{ font-size:10px; font-weight:800; color:#fff; padding:3px 0; letter-spacing:1px;
  background:linear-gradient(180deg,#ff7b5c,#e0330f 60%,#ff6e42); text-shadow:0 1px 1px rgba(0,0,0,.3); }
.calLeaf .d{ font-size:26px; font-weight:800; color:#123d78; background:linear-gradient(180deg,#fff,#dcedfb); padding:4px 0 6px; }
.evCard h3{ font-size:13.5px; color:#123d78; }
.evCard p{ font-size:11.5px; color:#4a76ad; margin:2px 0 6px; }
.cd{ display:inline-flex; gap:5px; font-size:11px; font-weight:800; color:#0d3364; }
.cd b{ background:linear-gradient(180deg,#eaf6ff,#bcdcf7); border-radius:6px; padding:3px 7px;
  box-shadow:0 1px 0 #fff inset,0 2px 5px rgba(30,80,150,.25); font-variant-numeric:tabular-nums; }
.tik{ margin-left:auto; flex:0 0 auto; border:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:11px; color:#fff;
  padding:9px 16px; border-radius:16px; text-shadow:0 1px 1px rgba(0,40,90,.5);
  background:linear-gradient(180deg,#79e05c,#33a41c 55%,#5cc93e);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -5px 8px rgba(20,80,0,.3) inset,0 4px 10px rgba(30,100,20,.35);
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),filter .15s; }
.tik:hover{ transform:scale(1.1) rotate(-2deg); filter:brightness(1.12); }
.confetti{ position:absolute; top:-10px; font-size:12px; animation:confFall linear infinite; pointer-events:none; }
@keyframes confFall{ from{transform:translateY(-20px) rotate(0)} to{transform:translateY(140px) rotate(340deg)} }

.pastGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin-top:20px; }
.pastCard{ border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(224,240,253,.85));
  box-shadow:0 1px 0 #fff inset,0 8px 16px rgba(30,80,150,.2),0 0 0 1px rgba(150,190,230,.6);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
.pastCard:hover{ transform:translateY(-4px) scale(1.02); }
.pastArt{ height:150px; overflow:hidden; }
.pastArt img{ width:100%; height:100%; object-fit:cover; display:block; }
.pastArt.noPhoto{ display:flex; align-items:center; justify-content:center; font-size:44px; }
.pastArt.noPhoto.c1{ background:linear-gradient(180deg,#dceeff,#aecdeb); }
.pastArt.noPhoto.c2{ background:linear-gradient(180deg,#ffe0c2,#f7b36b); }
.pastArt.noPhoto.c3{ background:linear-gradient(180deg,#d8f5e3,#a3e0bb); }
.pastArt.noPhoto.c4{ background:linear-gradient(180deg,#e7ddfb,#c2aaf0); }
.pastArt.noPhoto.c5{ background:linear-gradient(180deg,#dcebff,#a9c7ef); }
.pastArt.noPhoto.c6{ background:linear-gradient(180deg,#fff0d0,#ffcf7a); }
.pastArt.noPhoto.c7{ background:linear-gradient(180deg,#ffe3df,#ff9d8a); }
.pastArt.noPhoto.c8{ background:linear-gradient(180deg,#fff4c9,#ffdc6b); }
.pastBody{ padding:12px 14px 14px; }
.pastCard h3{ font-size:13.5px; color:#123d78; margin-bottom:2px; }
.pastMeta{ font-size:11px; color:#4a76ad; margin-bottom:6px; }
.pastCard p{ font-size:11.5px; color:#365e8c; margin:0; }

/* ================= GALLERY / MEMBERS / ABOUT ================= */
.galGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:11px; }
.galItem{ aspect-ratio:1; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:40px; cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -8px 12px rgba(0,30,80,.2) inset,0 6px 14px rgba(30,80,150,.25);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),filter .22s; }
.galItem:hover{ transform:scale(1.12) rotate(3deg); filter:brightness(1.12); }
.memRow{ display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:12px; margin-bottom:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(226,241,253,.8));
  box-shadow:0 1px 0 #fff inset,0 4px 10px rgba(30,80,150,.15),0 0 0 1px rgba(160,200,235,.5);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1); }
.memRow:hover{ transform:translateX(6px) scale(1.02); }
.ava{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:22px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 3px 7px rgba(30,80,150,.3); }
.memRow h3{ font-size:12.5px; color:#123d78; display:block; }
.memRow small{ font-size:10.5px; color:#4a76ad; }
.badge{ margin-left:auto; font-size:9.5px; font-weight:800; color:#fff; padding:4px 10px; border-radius:10px; text-shadow:0 1px 1px rgba(0,0,0,.25);
  background:linear-gradient(180deg,#7db8ef,#2e6fce); box-shadow:0 2px 5px rgba(30,80,150,.3),0 1px 0 rgba(255,255,255,.4) inset; }
.aboutHero{ text-align:center; padding:6px 4px 14px; }
.aboutHero img{ width:90px; animation:heroFloat 4s ease-in-out infinite; filter:drop-shadow(0 14px 16px rgba(20,70,140,.3)); }
.aboutHero h3{ color:#123d78; font-size:17px; margin-top:6px; }
.aboutHero p{ color:#3a6398; font-size:12.5px; margin-top:6px; line-height:1.55; }
.statRow{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.stat{ text-align:center; padding:11px 6px; border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(224,240,253,.85));
  box-shadow:0 1px 0 #fff inset,0 5px 12px rgba(30,80,150,.18),0 0 0 1px rgba(160,200,235,.5); }
.stat b{ display:block; font-size:19px; color:#1a5cc0; }
.stat small{ font-size:10px; color:#4a76ad; font-weight:700; letter-spacing:.4px; }

/* ================= TASKBAR ================= */
#taskbar{ position:fixed; left:0; right:0; bottom:0; height:52px; z-index:8000; display:flex; align-items:center; gap:8px; padding:0 12px 0 0;
  background:linear-gradient(180deg,rgba(120,180,240,.85) 0%,rgba(40,100,190,.9) 40%,rgba(18,70,150,.92) 100%);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -12px 24px rgba(10,50,120,.4); }
#startBtn{ height:52px; border:none; cursor:pointer; padding:0 26px 0 18px; display:flex; align-items:center; gap:9px;
  font-family:inherit; font-size:17px; font-weight:800; font-style:italic; color:#fff; text-shadow:0 1px 2px rgba(0,50,20,.5);
  border-radius:0 24px 24px 0; letter-spacing:.3px;
  background:linear-gradient(180deg,#8fdc59 0%,#3fa81e 45%,#278508 55%,#5cc32e 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -10px 14px rgba(10,70,0,.4) inset,4px 0 12px rgba(10,50,20,.4);
  transition:filter .15s,transform .1s; }
#startBtn img{ width:26px; filter:drop-shadow(0 1px 2px rgba(0,40,0,.4)); }
#startBtn:hover{ filter:brightness(1.12) saturate(1.1); }
#startBtn:active{ transform:scale(.97); }
#taskItems{ flex:1; display:flex; gap:7px; overflow-x:auto; padding:0 4px; }
.taskItem{ height:36px; border:none; cursor:pointer; display:flex; align-items:center; gap:7px; padding:0 14px; border-radius:10px;
  font-family:inherit; font-size:12px; font-weight:700; color:#fff; text-shadow:0 1px 1px rgba(0,30,80,.5); white-space:nowrap;
  background:linear-gradient(180deg,rgba(150,200,250,.7),rgba(50,110,200,.75));
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 3px 7px rgba(10,50,120,.35);
  animation:taskPop .3s cubic-bezier(.34,1.56,.64,1); transition:filter .15s,transform .15s; }
@keyframes taskPop{ from{transform:scale(.5); opacity:0} }
.taskItem:hover{ filter:brightness(1.15); transform:translateY(-2px); }
.taskItem.active{ box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -6px 10px rgba(10,40,100,.5) inset,0 0 12px rgba(140,210,255,.6); }
#tray{ display:flex; align-items:center; gap:10px; padding:6px 14px; border-radius:14px;
  background:linear-gradient(180deg,rgba(90,150,220,.5),rgba(30,80,160,.55));
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 2px 6px rgba(10,50,120,.3) inset; }
#sndToggle{ border:none; background:none; cursor:pointer; font-size:16px; filter:drop-shadow(0 1px 1px rgba(0,30,80,.5)); transition:transform .15s; }
#sndToggle:hover{ transform:scale(1.2); }
#clock{ color:#fff; font-size:12.5px; font-weight:700; text-shadow:0 1px 1px rgba(0,30,80,.6); font-variant-numeric:tabular-nums; }

/* ================= START MENU ================= */
#startMenu{ position:fixed; left:8px; bottom:60px; width:290px; z-index:8500; border-radius:14px; overflow:hidden; display:none;
  background:rgba(232,242,252,.92); backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(60,110,190,.55),0 20px 44px rgba(10,50,120,.5); }
#startMenu.open{ display:block; animation:menuUp .3s cubic-bezier(.34,1.4,.44,1); }
@keyframes menuUp{ from{transform:translateY(30px) scale(.9); opacity:0} }
#smHead{ display:flex; align-items:center; gap:11px; padding:14px 16px;
  background:linear-gradient(180deg,#8ec5f5,#2e6fce 60%,#4b90e6); }
#smHead img{ width:40px; filter:drop-shadow(0 3px 5px rgba(0,30,80,.4)); }
#smHead b{ color:#fff; font-size:14px; text-shadow:0 1px 2px rgba(0,40,100,.5); }
#smHead small{ display:block; color:#cfe6ff; font-size:10.5px; font-weight:600; }
.smItem{ display:flex; align-items:center; gap:12px; padding:10px 16px; cursor:pointer; font-size:13px; font-weight:700; color:#17365e; transition:background .12s,padding .15s; }
.smItem:hover{ background:linear-gradient(90deg,rgba(120,180,240,.45),rgba(120,180,240,.1)); padding-left:22px; }
.smItem i{ font-style:normal; font-size:19px; width:24px; text-align:center; filter:drop-shadow(0 2px 2px rgba(20,70,140,.3)); }

/* helper */
.linkish{ color:#1a5cc0; font-weight:700; text-decoration:underline; cursor:pointer; }
@media (max-width:640px){
  .dIcon{ display:none; } .deco{ display:none; }
  /* the homepage is otherwise a fixed-viewport "desktop" (everything position:fixed/
     absolute, nothing in normal flow) so overflow:hidden never had anything to reveal
     via scrolling. On narrow viewports the hero can be taller than the screen, so let
     it flow normally here and let the page scroll to reach whatever doesn't fit. */
  html,body{ height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; }
  #desktop{ position:relative; inset:auto; margin:48px 0 52px 0; min-height:calc(100vh - 48px - 52px); }
  #world{ position:relative; inset:auto; height:auto; min-height:100%; }
  #hero{ position:relative; left:auto; top:auto; transform:none; width:94vw; margin:32px auto; }
  .win{ left:3vw !important; top:8vh !important; width:94vw !important; min-width:0; }
}
@media (max-width:480px){
  .win.open{ position:fixed !important; left:0 !important; top:48px !important;
    width:100% !important; height:calc(100vh - 48px - 52px) !important; border-radius:0; transform:none !important; }
  .win .tbar{ cursor:default; border-radius:0; }
  .win .tbar:active{ cursor:default; }
  .wbody{ max-height:calc(100vh - 48px - 52px - 38px); }
}

/* ============================================================
   SITE NAV + SUBPAGES (SEO static content pages)
   ============================================================ */
html.subpage, html.subpage body{ height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; }
body.subpage #sky{ position:fixed; }

.siteNav{ position:fixed; top:0; left:0; right:0; height:48px; z-index:2000; display:flex; align-items:center; gap:16px;
  padding:0 16px; background:linear-gradient(180deg,rgba(120,180,240,.92) 0%,rgba(40,100,190,.94) 55%,rgba(18,70,150,.95) 100%);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 6px 18px rgba(10,50,120,.35); }
body.subpage .siteNav{ position:sticky; }
.navBrand{ flex:0 0 auto; color:#fff; font-weight:800; font-style:italic; font-size:15px; text-decoration:none;
  text-shadow:0 1px 2px rgba(0,40,90,.5); white-space:nowrap; }
.navLinks{ flex:1; display:flex; gap:4px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.navLinks::-webkit-scrollbar{ display:none; }
.navLinks a{ flex:0 0 auto; color:#eaf5ff; font-size:12.5px; font-weight:700; text-decoration:none; padding:7px 11px;
  border-radius:8px; white-space:nowrap; transition:background .15s; }
.navLinks a:hover{ background:rgba(255,255,255,.18); }
.navLinks a[aria-current="page"]{ background:rgba(255,255,255,.28); }

.pageMain{ max-width:900px; margin:0 auto; padding:44px 20px 80px; position:relative; z-index:5; }
.pageHero{ text-align:center; padding:10px 0 34px; }
.pageHero h1{ font-size:clamp(30px,5vw,48px); font-weight:800; color:#0d3364; line-height:1.1;
  text-shadow:0 2px 10px rgba(255,255,255,.55); }
.pageHero .lede{ max-width:620px; margin:14px auto 0; color:#2a5488; font-size:16px; line-height:1.6; }

.panel{ background:rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:16px; padding:26px 28px; margin-bottom:24px;
  box-shadow:0 1px 0 #fff inset,0 12px 28px rgba(30,80,150,.18),0 0 0 1px rgba(160,200,235,.5); }
.panel h2{ color:#123d78; font-size:22px; margin-bottom:12px; }
.panel h3{ color:#1a5cc0; font-size:16px; margin:18px 0 6px; }
.panel p{ color:#3a5f8f; line-height:1.65; margin-bottom:10px; font-size:14.5px; }
.panel ul, .panel ol{ color:#3a5f8f; line-height:1.65; font-size:14.5px; margin:0 0 10px 20px; }
.panel a{ color:#1a5cc0; font-weight:700; }
.panel a.aeroBtn{ color:#fff; text-shadow:0 1px 2px rgba(0,40,90,.55); }
.panel a.aeroBtn.yellow{ color:#5c3a00; text-shadow:0 1px 1px rgba(255,255,255,.6); }

.breadcrumbs{ font-size:12.5px; color:#3a5f8f; margin-bottom:18px; }
.breadcrumbs a{ color:#1a5cc0; text-decoration:underline; }
.breadcrumbs span[aria-current]{ font-weight:700; }

.siteFooter{ position:relative; z-index:5; text-align:center; padding:24px 20px 44px; color:#2a5488; font-size:12.5px; }
.siteFooter nav{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.siteFooter a{ color:#123d78; font-weight:700; text-decoration:underline; }

.todoNote{ display:block; background:rgba(255,157,46,.16); border:1px dashed #ff9d2e; color:#8a4c00; font-size:12.5px;
  font-weight:700; padding:10px 12px; border-radius:8px; margin:10px 0; }

.rateTable{ width:100%; border-collapse:collapse; font-size:13.5px; }
.rateTable th,.rateTable td{ text-align:left; padding:8px 10px; border-bottom:1px solid rgba(60,110,190,.2); color:#3a5f8f; }
.rateTable th{ color:#123d78; }

.scPlayer{ margin:0 0 16px; border-radius:8px; overflow:hidden; box-shadow:0 4px 10px rgba(30,80,150,.15); }
.scPlayer iframe{ display:block; }

.formRow{ margin-bottom:12px; display:flex; flex-direction:column; gap:6px; }
.formRow label{ font-size:13px; font-weight:700; color:#123d78; }
.formRow input, .formRow textarea{ font-family:inherit; font-size:14px; padding:10px 12px; border-radius:8px;
  border:1px solid rgba(60,110,190,.35); background:rgba(255,255,255,.9); color:#17365e; }

@media (max-width:640px){
  .pageMain{ padding:28px 14px 60px; }
  .panel{ padding:18px 18px; }
}


/* shop Buy buttons — match site aero-pill button aesthetic */
.buyBtn{ border:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:11px; color:#fff;
          padding:6px 14px; border-radius:14px; text-shadow:0 1px 1px rgba(0,40,90,.5); margin-left:6px;
          background:linear-gradient(180deg,#79e05c,#33a41c 55%,#5cc93e);
          box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -5px 8px rgba(20,80,0,.3) inset,0 3px 7px rgba(30,100,20,.35);
          transition:transform .15s cubic-bezier(.34,1.56,.64,1),filter .15s; }
.buyBtn:hover{ transform:scale(1.08); filter:brightness(1.12); }
.buyBtn:disabled{ opacity:.6; cursor:default; transform:none; }
.srOnly{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
         clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sizeSel{ font-family:inherit; font-weight:700; font-size:11px; color:#123d78; cursor:pointer;
          padding:5px 8px; border-radius:12px; border:none;
          background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(222,238,252,.9));
          box-shadow:0 1px 0 #fff inset,0 2px 5px rgba(30,80,150,.2),0 0 0 1px rgba(150,190,230,.6); }

/* ================= CONTEST ================= */
.cityGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; margin-top:4px; }
.cityCard{ padding:16px 16px 18px; border-radius:14px; text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(224,240,253,.85));
  box-shadow:0 1px 0 #fff inset,0 8px 16px rgba(30,80,150,.2),0 0 0 1px rgba(150,190,230,.6);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
.cityCard:hover{ transform:translateY(-4px) scale(1.02); }
.cityCard .art{ font-size:34px; margin-bottom:6px; }
.cityCard h3{ font-size:14.5px; color:#123d78; margin-bottom:3px; }
.cityCard p{ font-size:11.5px; color:#4a76ad; margin:0; }

.stepList{ counter-reset:step; list-style:none; margin:0 0 10px; padding:0; }
.stepList li{ counter-increment:step; position:relative; padding:2px 0 14px 38px; color:#3a5f8f; font-size:14.5px; line-height:1.6; }
.stepList li::before{ content:counter(step); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#6cb6f5 0%,#2b78dd 46%,#1859bd 52%,#3f8ce8 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 2px 5px rgba(15,70,150,.4); }
.stepList b{ color:#123d78; }

.formRow select{ font-family:inherit; font-size:14px; padding:10px 12px; border-radius:8px;
  border:1px solid rgba(60,110,190,.35); background:rgba(255,255,255,.9); color:#17365e; }
.formHint{ font-size:12px; color:#4a76ad; margin-top:-2px; }
.checkRow{ display:flex; align-items:flex-start; gap:9px; margin:16px 0; }
.checkRow input[type="checkbox"]{ width:18px; height:18px; margin-top:1px; flex:0 0 auto; accent-color:#1859bd; cursor:pointer; }
.checkRow label{ font-size:13px; color:#123d78; line-height:1.5; cursor:pointer; }
.formStatus{ font-size:12.5px; color:#1a6b2f; background:rgba(140,220,120,.18); border:1px dashed #4a9c2e;
  padding:9px 12px; border-radius:8px; margin-top:12px; display:none; }
.formStatus.err{ color:#8a2a00; background:rgba(255,120,60,.16); border-color:#e0330f; }

/* ================= SERVICES ================= */
#servicesGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:14px; }