/* CYBER GUARD ACADEMY v1.2 — トップ画面 */
:root{color-scheme:dark;--ink:#f3f8ff;--muted:#b7c8e0;--bg:#070d1c;--glow:#62f2ff;--gold:#ffd66b;--pink:#ff8fd0}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body.home{margin:0;min-height:100vh;color:var(--ink);font:16px/1.6 "Hiragino Maru Gothic ProN","BIZ UDPGothic","Meiryo",system-ui,sans-serif;background:radial-gradient(ellipse at 15% 0,#2a2363 0,transparent 45%),radial-gradient(ellipse at 90% 30%,#103d5c 0,transparent 45%),var(--bg);overflow-x:hidden}
a{color:inherit}h1,h2,h3,p{margin:0}:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
.sky{position:fixed;inset:0;pointer-events:none;z-index:0}
.sky i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 8px #9ff;opacity:.7;animation:twinkle 3.2s ease-in-out infinite}
.sky i:nth-child(1){left:6%;top:12%}.sky i:nth-child(2){left:22%;top:64%;animation-delay:.6s}.sky i:nth-child(3){left:38%;top:30%;animation-delay:1.1s}.sky i:nth-child(4){left:52%;top:82%;animation-delay:.3s}.sky i:nth-child(5){left:67%;top:18%;animation-delay:1.6s}.sky i:nth-child(6){left:81%;top:55%;animation-delay:.9s}.sky i:nth-child(7){left:93%;top:9%;animation-delay:2s}.sky i:nth-child(8){left:12%;top:90%;animation-delay:1.3s}.sky i:nth-child(9){left:45%;top:48%;animation-delay:2.4s}.sky i:nth-child(10){left:74%;top:92%;animation-delay:.2s}.sky i:nth-child(11){left:31%;top:6%;animation-delay:1.8s}.sky i:nth-child(12){left:88%;top:73%;animation-delay:2.7s}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.3)}}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.8rem;padding:.6rem max(1rem,calc((100% - 1320px)/2));background:linear-gradient(180deg,#070d1cee,#070d1ca8);backdrop-filter:blur(8px);border-bottom:1px solid #ffffff14}
.logo-mini{display:flex;align-items:center;gap:.5rem;font-weight:900;letter-spacing:.12em;text-decoration:none;font-size:.9rem;margin-right:auto}.logo-mini img{width:30px;height:30px}
.topbar nav{display:flex;gap:.45rem;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:.3rem;min-height:40px;padding:.35rem .9rem;border-radius:999px;border:1px solid #ffffff2b;background:#ffffff12;color:var(--ink);font-weight:800;font-size:.9rem;font-family:inherit;text-decoration:none;cursor:pointer;transition:transform .15s,background .15s}
.pill:hover{background:#ffffff24;transform:translateY(-2px)}.pill.ghost{background:transparent;color:var(--muted)}
.hero{position:relative;z-index:1;max-width:1320px;margin:1rem auto 0;min-height:min(78vh,640px);border-radius:28px;overflow:hidden;display:grid;align-items:end;box-shadow:0 30px 80px #000a,0 0 0 1px #ffffff1c inset}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.1) translateX(-1.5%)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,#070d1cf2 0,#070d1c99 32%,transparent 62%),linear-gradient(90deg,#070d1ccc 0,transparent 55%)}
.hero-copy{position:relative;padding:clamp(1.2rem,4vw,3rem) clamp(1.2rem,4vw,3rem) 3.6rem;max-width:640px}
.kicker{font-weight:900;letter-spacing:.22em;font-size:.78rem;color:var(--glow);text-shadow:0 0 12px #3ff}
.hero h1{display:grid;line-height:.95;margin:.4rem 0 .7rem;font-family:"Arial Black","Segoe UI Black",system-ui,sans-serif;font-weight:900}
.hero h1 .t1{font-size:clamp(2.3rem,7vw,5rem);background:linear-gradient(180deg,#fff 0,#9df6ff 55%,#3fb8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #0b2d6b) drop-shadow(0 0 18px #36d3ff99)}
.hero h1 .t2{font-size:clamp(1.6rem,4.6vw,3.3rem);background:linear-gradient(180deg,#fff7c9,#ffc44d 60%,#ff8b3d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #6b2b0b) drop-shadow(0 0 16px #ffb34088);letter-spacing:.18em}
.lead{font-size:clamp(1rem,2.2vw,1.3rem);font-weight:800;text-shadow:0 2px 6px #000}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:1.2rem}
.go{position:relative;display:inline-flex;align-items:center;gap:.6rem;min-height:60px;padding:.7rem 1.8rem;border-radius:999px;border:0;cursor:pointer;text-decoration:none;font-weight:900;font-size:clamp(1.05rem,2.4vw,1.35rem);font-family:inherit;color:#1c1300;background:linear-gradient(180deg,#fff3a6,#ffc93e 55%,#ff9d1c);box-shadow:0 6px 0 #a35a00,0 12px 30px #ffaa3a77;transition:transform .12s;animation:beat 2.2s ease-in-out infinite}
.go:hover{transform:translateY(-3px)}.go:active{transform:translateY(4px)}
.go span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1c1300;color:#ffd75a;font-size:.9rem}
.go.small{min-height:52px;padding:.5rem 1.6rem;animation:none}
@keyframes beat{0%,100%{box-shadow:0 6px 0 #a35a00,0 0 0 0 #ffd25a88}50%{box-shadow:0 6px 0 #a35a00,0 0 0 14px #ffd25a00}}
.sub{font-weight:800;color:#dff4ff;text-decoration:none;border-bottom:2px dashed #ffffff55}
.navi{position:absolute;right:clamp(.5rem,3vw,2.5rem);bottom:clamp(2.6rem,4vw,3.4rem);display:flex;align-items:flex-end;gap:.4rem;max-width:min(380px,46%)}
.navi img{width:clamp(90px,13vw,150px);filter:drop-shadow(0 10px 18px #000a);animation:float 3.4s ease-in-out infinite;order:2}
.bubble{background:#fff;color:#14203a;font-weight:800;font-size:.92rem;line-height:1.5;padding:.7rem .9rem;border-radius:18px 18px 4px 18px;box-shadow:0 8px 24px #0008;margin-bottom:3.4rem;transition:opacity .3s}
.bubble.fade{opacity:0}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.rankbar{position:relative;z-index:2;max-width:1220px;margin:-2.2rem auto 0;display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;padding:1rem 1.4rem;border-radius:22px;background:linear-gradient(120deg,#16244a,#1d1640);border:2px solid #ffffff22;box-shadow:0 18px 40px #0009}
.rank{display:flex;align-items:center;gap:.7rem}
.medal{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;font-size:2rem;background:#2b2a5a;border:3px solid var(--gold);box-shadow:0 0 18px #ffd66b66}
.rank small,.stars small{display:block;color:var(--muted);font-size:.78rem;font-weight:700}.rank b{font-size:1.15rem}
.star-count{display:flex;align-items:baseline;gap:.35rem}.star-count span{color:var(--gold);font-size:1.6rem;text-shadow:0 0 12px #ffcf4d}.star-count b{font-size:1.9rem;line-height:1}
.track{height:14px;border-radius:99px;background:#0b1430;border:1px solid #ffffff22;overflow:hidden;margin:.3rem 0}
.track i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#5ef0ff,#7dffb4,#ffe066);box-shadow:0 0 14px #7fffd0;transition:width 1.2s cubic-bezier(.2,.9,.2,1)}
.mini-legend{display:grid;gap:.2rem;font-size:.8rem;color:var(--muted);font-weight:700}.mini-legend i{font-style:normal}.mini-legend .a{color:#ffd35a}.mini-legend .c{color:#6ff1ff}
/* 超激レア ショーケース */
.mythic{position:relative;z-index:1;max-width:1320px;margin:2.2rem auto 0;padding:1.4rem clamp(1rem,3vw,2rem) 1rem;border-radius:26px;overflow:hidden;
  background:radial-gradient(ellipse at 20% 0,#5a1840aa,transparent 60%),radial-gradient(ellipse at 90% 100%,#0e4b5caa,transparent 60%),linear-gradient(120deg,#1a0e2e,#0d1a33);border:2px solid #ffd66b66;box-shadow:0 0 40px #ffb34033 inset,0 18px 40px #0009}
.mythic::before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0 20deg,#ffd66b14 20deg 30deg,transparent 30deg 60deg,#62f2ff10 60deg 70deg,transparent 70deg);animation:spin 30s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.mythic-head{position:relative;display:grid;gap:.3rem;max-width:720px}
.mythic-head .kicker{color:var(--gold);text-shadow:0 0 12px #ffb340}
.mythic-head h2{font-size:clamp(1.4rem,3.6vw,2.2rem);font-weight:900;background:linear-gradient(90deg,#fff3b0,#ffd35a,#ff8a5c,#ff5a9e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #3a0a1a)}
.mythic-head p:last-child{color:var(--muted);font-size:.9rem;font-weight:700}
.mythic-row{position:relative;display:flex;gap:.8rem;overflow-x:auto;padding:1rem .2rem .6rem;scroll-snap-type:x mandatory}
.mcard{flex:0 0 clamp(150px,18vw,190px);scroll-snap-align:start;position:relative;border-radius:18px;padding:.6rem .6rem .7rem;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 30%,#0b0f22),#0b0f22 70%);border:2px solid color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--c) 35%,transparent);transition:transform .2s;animation:rise .6s both}
.mcard:hover{transform:translateY(-6px) scale(1.03)}
.mcard img{display:block;width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 8px 10px #000a);transition:transform .3s}
.mcard:hover img{transform:scale(1.08) rotate(-2deg)}
.mcard .badge{position:absolute;left:.5rem;top:.5rem;font-size:.66rem;font-weight:900;padding:.1rem .45rem;border-radius:6px;color:#1a0c00;background:linear-gradient(90deg,#ff4d6d,#ffd35a,#62f2ff,#c79bff);background-size:200% 100%;animation:shine 2.4s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.mcard b{display:block;font-size:.88rem;line-height:1.3;margin-top:.2rem}
.mcard small{display:block;color:var(--muted);font-size:.72rem;line-height:1.4;margin-top:.2rem}
.mcard .big{position:absolute;right:.5rem;top:.5rem;font-size:.62rem;font-weight:900;padding:.1rem .4rem;border-radius:6px;background:#ff3b4e;color:#fff}
main#map{position:relative;z-index:1;max-width:1320px;margin:2rem auto 0;padding:0 clamp(.75rem,2vw,1.5rem)}
.worlds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1.1rem}
@media (min-width:1180px){.worlds{grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem}.w-body h2{font-size:1.12rem}.stage b{font-size:.88rem}}
.world{--c:#62f2ff;position:relative;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:#0e1730;border:2px solid color-mix(in srgb,var(--c) 45%,transparent);box-shadow:0 14px 34px #0009;transition:transform .2s,box-shadow .2s;animation:rise .6s both}
.world:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 22px 44px #000b,0 0 26px color-mix(in srgb,var(--c) 45%,transparent)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.world:nth-child(2){animation-delay:.08s}.world:nth-child(3){animation-delay:.16s}.world:nth-child(4){animation-delay:.24s}.world:nth-child(5){animation-delay:.32s}
.w-art{position:relative;height:150px;background:var(--art) center/cover}
.w-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0e1730 0,#0e173000 70%)}
.w-emblem{position:absolute;left:12px;bottom:-26px;z-index:2;width:74px;height:74px;filter:drop-shadow(0 6px 10px #000c);transition:transform .3s}
.world:hover .w-emblem{transform:rotate(-12deg) scale(1.08)}
.w-num{position:absolute;right:12px;top:10px;z-index:2;font-weight:900;font-size:.75rem;line-height:1;letter-spacing:.15em;padding:.35rem .6rem;border-radius:99px;background:#000a;color:var(--c);border:1px solid var(--c)}
.w-done{position:absolute;right:10px;bottom:10px;z-index:2;font-weight:900;font-size:.8rem;padding:.25rem .6rem;border-radius:99px;background:var(--gold);color:#2a1a00;transform:rotate(4deg)}
.w-body{padding:2.1rem 1rem 1rem;display:grid;gap:.5rem;flex:1}
.w-body h2{font-size:1.25rem;line-height:1.25}.w-body p{color:var(--muted);font-size:.86rem;line-height:1.5}
.w-meter{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:800;color:var(--c)}
.w-meter .track{flex:1;height:8px;margin:0}.w-meter .track i{background:var(--c);box-shadow:none}
.stages{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.45rem;position:relative}
.stages::before{content:"";position:absolute;left:22px;top:16px;bottom:16px;width:4px;border-radius:4px;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--c) 60%,transparent) 0 8px,transparent 8px 14px)}
.stage{position:relative;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:.55rem;padding:.4rem .6rem .4rem .2rem;border-radius:16px;text-decoration:none;background:#ffffff08;border:1px solid #ffffff14;transition:background .15s,transform .15s}
.stage:hover{background:#ffffff16;transform:translateX(4px)}
.node{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-weight:900;font-size:.9rem;background:#141f3d;border:3px solid color-mix(in srgb,var(--c) 70%,#fff0);color:#fff}
.stage.half .node{background:color-mix(in srgb,var(--c) 30%,#141f3d)}
.stage.full .node{background:linear-gradient(180deg,#fff2a0,#ffc23c);border-color:#fff;color:#3a2500;box-shadow:0 0 14px #ffcf4d}
.stage.next .node{animation:ping 1.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 80%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.stage b{display:block;font-size:.95rem;line-height:1.3}.stage small{color:var(--muted);font-size:.74rem}
.stage .tag{font-size:.68rem;font-weight:900;padding:.1rem .45rem;border-radius:99px;background:var(--pink);color:#3a0026;margin-left:.3rem;vertical-align:middle}
.st{display:flex;gap:2px;font-size:1.1rem;line-height:1}.st i{font-style:normal;color:#ffffff2e}
.st i.a.on{color:#ffd35a;text-shadow:0 0 8px #ffcf4d}.st i.c.on{color:#6ff1ff;text-shadow:0 0 8px #6ff1ff}
.foot{position:relative;z-index:1;max-width:1320px;margin:2.5rem auto 1.5rem;padding:0 1.5rem;color:var(--muted);font-size:.85rem;display:grid;gap:.6rem}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.guide{position:fixed;inset:0;z-index:50;display:flex;overflow:auto;padding:1rem;background:#030712cc;backdrop-filter:blur(4px)}
.guide[hidden]{display:none}
.guide-box{position:relative;margin:auto;width:min(560px,100%);padding:1.6rem 1.4rem 1.4rem;border-radius:26px;background:linear-gradient(160deg,#1b2b55,#151a3c);border:3px solid #ffffff2a;box-shadow:0 30px 80px #000c;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.guide-navi{position:absolute;right:-10px;top:-56px;width:120px;filter:drop-shadow(0 10px 14px #000a);animation:float 3.4s ease-in-out infinite}
.guide h2{font-size:1.35rem;margin:.3rem 0 .9rem;padding-right:90px}
.steps{list-style:none;padding:0;margin:0 0 .9rem;display:grid;gap:.55rem}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:center;padding:.6rem .8rem;border-radius:16px;background:#ffffff0d}
.steps b{display:grid;place-items:center;min-width:76px;padding:.3rem .5rem;border-radius:12px;background:var(--gold);color:#2b1a00}
.note{font-size:.85rem;color:var(--muted);margin-bottom:1rem}
@media (max-width:860px){.hero{margin:.6rem .6rem 0;min-height:560px;border-radius:22px}.navi{position:relative;right:auto;bottom:auto;max-width:none;margin:0 1rem 3.4rem;justify-content:flex-end}.bubble{margin-bottom:2rem}.hero-copy{padding-bottom:1rem}.rankbar{grid-template-columns:auto 1fr;margin:-2.4rem .8rem 0}.mini-legend{grid-column:1/-1;grid-auto-flow:column;justify-content:start;gap:1rem}.mythic{margin:1.6rem .6rem 0}}
@media (max-width:520px){.topbar nav .pill{padding:.3rem .6rem;font-size:.8rem}.logo-mini{font-size:.72rem;letter-spacing:.06em}.go{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

.stage.locked{opacity:.54;cursor:not-allowed;filter:grayscale(.65);border-style:dashed}.stage.locked .node{font-size:1.18rem}.stage.locked .st{opacity:.4}