@font-face{font-family:Fredoka;src:url("Fredoka-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
:root{--blue:#3e8fd8;--deep:#3850b9;--gold:#fab040;--pink:#fa99b1;--cyan:#77d4f7;--purple:#cf85e9;--wine:#611355;--cream:#fcd1b6;--rose:#db507b;--ink:#261b36;--white:#fffafc}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Fredoka,Arial,sans-serif;color:var(--ink);background:#182b5d;line-height:1.65}
.background{position:fixed;inset:0;background:linear-gradient(rgba(20,31,75,.62),rgba(33,19,67,.72)),url("images/background.png") center/cover no-repeat;filter:blur(3px);transform:scale(1.03);z-index:-2}
.background:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 15%,rgba(119,212,247,.18),transparent 45%)}
.topbar{position:fixed;z-index:20;top:0;left:0;right:0;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(27,27,74,.82);backdrop-filter:blur(14px);border-bottom:2px solid rgba(119,212,247,.28);box-shadow:0 8px 30px rgba(0,0,0,.2)}
.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-size:23px}.brand img{width:42px;height:42px;object-fit:contain}
.language{display:flex;align-items:center;gap:9px;color:#fff}.language label{font-size:13px;opacity:.8}.language select{font:inherit;color:var(--ink);background:var(--white);border:2px solid var(--cyan);border-radius:12px;padding:8px 10px;cursor:pointer;outline:none}
.page{width:min(1000px,calc(100% - 38px));margin:auto;padding:70px 0 80px}
.hero{text-align:center;color:white;padding:0 20px 5px}.hero-icon{width:550px;height:550px;object-fit:contain;display:block;margin:-100px auto -100px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.3))}
.eyebrow{letter-spacing:4px;font-size:14px;color:var(--cyan);margin:0;line-height:1}.hero h1{font-size:clamp(46px,8vw,82px);line-height:1;margin:2px 0 0;text-shadow:0 7px 0 rgba(56,80,185,.55),0 12px 30px rgba(0,0,0,.25)}
.hero-subtitle{max-width:720px;margin:20px auto;font-size:19px;color:#fff}.hero-note{display:inline-block;padding:8px 15px;border-radius:99px;background:rgba(250,176,64,.9);color:#42223a;font-size:14px}
.guide-card{position:relative;background:rgba(255,250,252,.96);border:3px solid rgba(119,212,247,.72);border-radius:25px;padding:36px 42px;margin:26px 0;box-shadow:0 18px 45px rgba(13,18,58,.3);overflow:hidden}.guide-card:before{content:"";position:absolute;left:0;top:0;width:8px;height:100%;background:linear-gradient(var(--blue),var(--purple),var(--pink))}
.section-number{position:absolute;right:26px;top:18px;color:var(--blue);font-size:14px;letter-spacing:2px;opacity:.7}.guide-card h2{font-size:34px;color:var(--deep);margin:0 55px 15px 0;line-height:1.2}.guide-card h3{font-size:22px;color:var(--wine);margin:28px 0 7px}.guide-card p{margin:9px 0 16px}
.info-grid,.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:25px}.info-grid>div,.mini-grid>div{background:linear-gradient(135deg,#edf9ff,#fff1f5);border:2px solid #d5e9f7;border-radius:16px;padding:17px}.info-grid h3{margin:0;color:var(--rose);font-size:20px}
.probability-box{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.probability-box>*{padding:16px;border-radius:15px;text-align:center;background:var(--cyan);color:#19336b}.probability-box span{background:var(--pink)}.probability-box b{background:var(--gold);color:#4a2a2e}
.example{border-left:6px solid var(--gold);background:#fff5df;border-radius:12px;padding:14px 17px;margin:20px 0}
table{width:100%;border-collapse:separate;border-spacing:0;margin:18px 0;border:2px solid #d5e1f1;border-radius:14px;overflow:hidden}th,td{text-align:left;padding:11px 13px;border-bottom:1px solid #dce5ef}th{background:var(--deep);color:white}tr:last-child td{border-bottom:0}tbody tr:nth-child(even){background:#f5f8ff}
.clean{padding-left:24px}.clean li{margin:8px 0}.small-note{font-size:13px;opacity:.7}.level-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.level-item{background:#f4f8ff;border:2px solid #d4e5f7;border-radius:14px;padding:15px}.level-item strong{color:var(--deep)}.level-item em{font-style:normal;color:var(--rose)}
.ability-group{margin:22px 0;padding:18px;border-radius:17px;background:#f7f4ff;border:2px solid #ddd4f5}.ability-group h3{margin:0 0 12px;color:var(--wine)}.ability-row{display:flex;flex-direction:column;gap:6px;padding:6px 0;border-bottom:1px solid #e5def1;font-size:14px}.ability-row:last-child{border-bottom:0}
.world{margin:25px 0;border:2px solid #d9e5f2;border-radius:18px;overflow:hidden}.world h3{background:linear-gradient(90deg,var(--deep),var(--blue));color:white;margin:0;padding:15px 18px}.world-level{padding:12px 18px;border-bottom:1px solid #e3e8ef}.world-level:last-child{border:0}.world-level strong{color:var(--rose)}
.legal{border-color:rgba(250,176,64,.8)}.legal:before{background:linear-gradient(var(--gold),var(--rose))}
@media(max-width:700px){.topbar{height:auto;min-height:64px;padding:9px 12px}.brand span{display:none}.language label{display:none}.language select{max-width:180px;font-size:13px}.page{width:min(100% - 18px,1000px);padding-top:64px}.hero{padding:0 10px 5px}.hero-icon{width:225px;height:225px;margin:-45px auto -75px}.eyebrow{font-size:12px;letter-spacing:3px;margin:0;line-height:1}.hero h1{font-size:clamp(42px,12vw,65px);margin:3px 0 0}.guide-card{padding:28px 23px;margin:17px 0;border-radius:19px}.guide-card h2{font-size:27px}.info-grid,.mini-grid,.level-list,.probability-box{grid-template-columns:1fr}.ability-row{font-size:13px}.brand img{width:38px;height:38px}table{font-size:13px;display:block;overflow-x:auto;white-space:nowrap}}