:root{
    --bg:#07111b;
    --bg2:#0a1724;
    --panel:#0d1d2d;
    --panel2:#12263a;
    --text:#f1f6fb;
    --muted:#9fb2c3;
    --gold:#e2b759;
    --gold2:#f0cd7c;
    --blue:#5ab0d6;
    --green:#5fc49d;
    --line:rgba(255,255,255,.1);
    --shadow:0 30px 90px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:
        radial-gradient(circle at 20% 0%,rgba(34,92,126,.14),transparent 35%),
        var(--bg);
    color:var(--text);
    font-family:Tahoma,Arial,sans-serif;
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
.noise{
    position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.flare{position:fixed;border-radius:50%;filter:blur(120px);opacity:.12;pointer-events:none;z-index:-1}
.f-one{width:500px;height:500px;background:#278cb7;top:-240px;right:-200px}
.f-two{width:520px;height:520px;background:#d09b33;bottom:-260px;left:-220px}

.topbar{
    height:84px;padding:0 max(22px,calc((100vw - 1420px)/2));
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:20;
    border-bottom:1px solid var(--line);
    background:rgba(7,17,27,.82);backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:12px}
.brand-shield{
    width:48px;height:52px;display:grid;place-items:center;
    color:#122131;font-size:23px;font-weight:bold;
    background:linear-gradient(145deg,var(--gold2),var(--gold));
    clip-path:polygon(50% 0,92% 14%,85% 76%,50% 100%,15% 76%,8% 14%);
    filter:drop-shadow(0 12px 20px rgba(226,183,89,.22));
}
.brand strong{display:block;font-size:18px}
.brand small{font-size:10px;color:var(--muted)}
nav{display:flex;align-items:center;gap:22px;color:var(--muted);font-size:13px}
nav a:hover{color:var(--gold)}
nav button{
    width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
    background:var(--panel);color:var(--text);
}
main{width:min(1420px,calc(100% - 32px));margin:auto}

.hero{
    min-height:700px;display:grid;grid-template-columns:1fr 1fr;
    align-items:center;gap:60px;padding:40px 0 55px;
}
.eyebrow{color:var(--gold);font-size:12px;font-weight:bold;letter-spacing:.06em}
.hero h1{font-size:clamp(44px,6vw,80px);line-height:1.25;margin:18px 0}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p{font-size:17px;line-height:2;color:var(--muted);max-width:720px}
.hero-actions{display:flex;gap:12px;margin-top:30px}
.primary,.ghost{
    padding:14px 22px;border-radius:14px;border:0;font-weight:bold;
}
.primary{background:linear-gradient(145deg,var(--gold2),var(--gold));color:#142131}
.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.mini-stats{display:flex;gap:24px;margin-top:35px}
.mini-stat b{display:block;font-size:24px;color:var(--gold)}
.mini-stat span{font-size:11px;color:var(--muted)}

.hero-stage{
    height:560px;position:relative;border-radius:40px;overflow:hidden;
    background:
        linear-gradient(to top,rgba(5,14,23,.95),transparent 60%),
        radial-gradient(circle at 55% 30%,rgba(236,198,103,.19),transparent 22%),
        linear-gradient(145deg,#0c2030,#111d2b);
    border:1px solid var(--line);box-shadow:var(--shadow);
}
.moon{
    position:absolute;top:60px;left:80px;width:130px;height:130px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#fff3c7,#dfbd68 70%,#a87a2f);
    box-shadow:0 0 80px rgba(227,190,101,.26);
}
.fortress{position:absolute;bottom:0;left:0;right:0;height:180px;opacity:.8}
.wall{position:absolute;bottom:0;left:0;right:0;height:95px;background:#08111a;border-top:6px solid #14283a}
.tower{position:absolute;bottom:60px;width:90px;height:130px;background:#08111a}
.tower:before{content:"";position:absolute;top:-18px;left:0;width:100%;height:20px;background:repeating-linear-gradient(90deg,#08111a 0 18px,transparent 18px 30px)}
.t1{left:20px}.t2{right:25px}

.main-warrior{position:absolute;bottom:40px;right:42%;width:190px;height:390px}
.head{position:absolute;top:18px;right:62px;width:64px;height:76px;border-radius:48% 48% 42% 42%;background:#121b22;z-index:4}
.head:before{content:"";position:absolute;top:-12px;left:-8px;width:80px;height:30px;border-radius:50% 50% 0 0;background:#1d2c37}
.body{position:absolute;top:80px;right:40px;width:110px;height:210px;border-radius:48px 48px 18px 18px;background:linear-gradient(145deg,#162938,#0a151f);z-index:3}
.cape{position:absolute;top:92px;right:75px;width:130px;height:245px;clip-path:polygon(40% 0,100% 12%,76% 100%,0 88%);background:linear-gradient(160deg,#254f53,#0e262d);z-index:2}
.shield{position:absolute;top:145px;right:-2px;width:95px;height:125px;background:linear-gradient(145deg,#d6ab4f,#805e23);clip-path:polygon(50% 0,95% 18%,84% 76%,50% 100%,16% 76%,5% 18%);z-index:5;box-shadow:0 18px 30px rgba(0,0,0,.35)}
.shield:after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:#1d2a35;font-size:32px}
.sword{position:absolute;top:70px;left:-8px;width:10px;height:260px;background:linear-gradient(90deg,#6c7880,#e9f2f7,#6f7c85);transform:rotate(-12deg);z-index:6}
.sword:before{content:"";position:absolute;top:-28px;left:-8px;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:32px solid #d9e2e8}
.sword:after{content:"";position:absolute;bottom:-20px;left:-18px;width:46px;height:10px;border-radius:10px;background:var(--gold)}
.hero-caption{
    position:absolute;bottom:22px;right:22px;left:22px;
    display:flex;justify-content:space-between;align-items:end;gap:20px;
    padding:15px 18px;border:1px solid var(--line);border-radius:16px;
    background:rgba(6,15,24,.68);backdrop-filter:blur(10px);
}
.hero-caption span{font-size:11px;color:var(--muted)}
.hero-caption strong{color:var(--gold);font-size:14px}

.ticker{
    margin:0 calc((100vw - min(1420px,calc(100vw - 32px)))/-2);
    overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:#091522;
}
.ticker-track{
    width:max-content;display:flex;gap:28px;align-items:center;padding:13px 0;
    animation:marquee 26s linear infinite;color:#b7c7d5;font-size:13px;
}
.ticker-track i{color:var(--gold)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(45%)}}

.heroes-section{padding:100px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px}
.section-head h2{font-size:42px;margin:10px 0 0}
.section-head p{color:var(--muted)}
.categories{
    display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:30px 0 22px;
}
.category-card{
    border:1px solid var(--line);background:linear-gradient(145deg,var(--panel2),var(--panel));
    border-radius:20px;padding:18px;text-align:right;color:var(--text);transition:.2s;
}
.category-card:hover,.category-card.active{transform:translateY(-3px);border-color:var(--gold)}
.category-card i{font-style:normal;font-size:25px;color:var(--gold)}
.category-card b{display:block;margin:12px 0 5px}
.category-card small{color:var(--muted)}

.search-panel{
    display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;
    padding:10px 12px 10px 10px;border:1px solid var(--line);border-radius:17px;background:var(--panel);
}
.search-panel span{font-size:24px;color:var(--blue)}
.search-panel input{border:0;outline:0;background:transparent;color:var(--text);padding:9px}
.search-panel button{border:0;background:rgba(226,183,89,.1);color:var(--gold);padding:8px 14px;border-radius:10px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 24px}
.tag{border:1px solid var(--line);background:transparent;color:var(--muted);padding:7px 12px;border-radius:999px;font-size:11px}
.tag.active,.tag:hover{color:var(--gold);border-color:var(--gold)}

.heroes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hero-card{
    position:relative;overflow:hidden;min-height:430px;border-radius:26px;border:1px solid var(--line);
    background:linear-gradient(160deg,var(--panel2),var(--panel));cursor:pointer;transition:.25s;
}
.hero-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-art{height:230px;position:relative;overflow:hidden;background:linear-gradient(145deg,#13293c,#0b1723)}
.card-art:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 35%)}
.card-art .sun{position:absolute;top:25px;left:30px;width:70px;height:70px;border-radius:50%;background:color-mix(in srgb,var(--accent) 80%,#fff 20%);opacity:.65;box-shadow:0 0 40px color-mix(in srgb,var(--accent) 50%,transparent)}
.card-art .silhouette{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:180px;height:215px}
.silhouette .h{position:absolute;top:18px;left:58px;width:64px;height:70px;border-radius:46% 46% 40% 40%;background:#0b1117}
.silhouette .h:before{content:"";position:absolute;top:-12px;left:-5px;width:74px;height:28px;border-radius:50% 50% 0 0;background:#141f28}
.silhouette .b{position:absolute;top:76px;left:35px;width:110px;height:145px;border-radius:45px 45px 12px 12px;background:#0a1118}
.silhouette .cloak{position:absolute;top:82px;left:18px;width:145px;height:150px;clip-path:polygon(28% 0,100% 14%,85% 100%,0 90%);background:#0d1b23}
.silhouette .blade{position:absolute;top:40px;right:3px;width:8px;height:175px;background:#b8c6cf;transform:rotate(8deg)}
.silhouette .blade:after{content:"";position:absolute;bottom:-10px;left:-13px;width:34px;height:8px;background:var(--accent)}
.card-badge{position:absolute;top:16px;right:16px;padding:7px 10px;border-radius:999px;background:rgba(7,15,23,.66);border:1px solid var(--line);font-size:10px;color:#dbe8ef}
.card-content{padding:20px}
.card-content h3{margin:0;font-size:21px}
.card-title{color:var(--accent);font-size:12px;margin-top:7px;display:block}
.card-content p{font-size:12px;color:var(--muted);line-height:1.8;margin:13px 0}
.card-hook{padding-top:13px;border-top:1px solid var(--line);font-size:11px;color:#d8e2ea}
.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.score{padding:8px;border-radius:10px;background:rgba(255,255,255,.035);text-align:center}
.score b{display:block;color:var(--accent)}
.score span{font-size:9px;color:var(--muted)}

.timeline-section{padding:40px 0 100px}
.timeline-showcase{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:30px;position:relative}
.timeline-showcase:before{content:"";position:absolute;top:26px;right:7%;left:7%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.timeline-showcase article{position:relative;padding:62px 17px 20px;border:1px solid var(--line);border-radius:19px;background:var(--panel)}
.timeline-showcase .year{position:absolute;top:12px;right:16px;padding:7px 10px;border-radius:999px;background:var(--gold);color:#142131;font-weight:bold;font-size:11px}
.timeline-showcase h3{margin:0 0 10px}
.timeline-showcase p{color:var(--muted);font-size:12px;line-height:1.7}

.quiz-section{
    margin-bottom:100px;padding:40px;border:1px solid var(--line);border-radius:32px;
    background:linear-gradient(145deg,#11283b,#0b1926);
    display:grid;grid-template-columns:.7fr 1.3fr;gap:35px;align-items:center;
}
.quiz-copy h2{font-size:38px;margin:12px 0}
.quiz-copy p{color:var(--muted);line-height:1.8}
.quiz-card{min-height:300px;border:1px solid var(--line);border-radius:24px;background:rgba(5,13,21,.55);padding:24px;display:grid;place-items:center}
.quiz-idle{text-align:center;display:grid;gap:10px}
.quiz-idle span{font-size:70px;color:var(--gold)}
.quiz-idle small{color:var(--muted)}
.quiz-question{width:100%}
.quiz-progress{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}
.quiz-question h3{font-size:23px;line-height:1.6}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quiz-option{padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--text);text-align:right}
.quiz-option.correct{border-color:#5fc49d;background:rgba(95,196,157,.13)}
.quiz-option.wrong{border-color:#d96c65;background:rgba(217,108,101,.13)}
.quiz-result{text-align:center}.quiz-result b{display:block;font-size:54px;color:var(--gold)}

footer{
    width:min(1420px,calc(100% - 32px));margin:auto;padding:25px 0;
    border-top:1px solid var(--line);display:flex;justify-content:space-between;
    color:var(--muted);font-size:12px;
}

.modal{
    position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.76);
    display:grid;place-items:center;padding:20px;
}
.modal-box{
    width:min(980px,100%);max-height:92vh;overflow:auto;
    background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:28px;position:relative;
}
.modal-box>button{
    position:absolute;left:18px;top:16px;width:40px;height:40px;border-radius:50%;
    border:1px solid var(--line);background:var(--panel2);color:var(--text);z-index:3;
}
.hidden{display:none!important}
.detail-hero{display:grid;grid-template-columns:330px 1fr;gap:30px}
.detail-art{min-height:430px;border-radius:24px;position:relative;overflow:hidden;background:linear-gradient(145deg,#142a3c,#08141f)}
.detail-art .card-art{height:100%}
.detail-copy .eyebrow{display:block;margin-bottom:8px}
.detail-copy h2{font-size:38px;margin:0}
.detail-copy .title{color:var(--gold);display:block;margin-top:9px}
.detail-copy .intro{font-size:16px;color:var(--muted);line-height:1.9}
.story-box{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel2);line-height:2}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}
.hero-tags span{padding:7px 11px;border-radius:999px;background:rgba(226,183,89,.1);color:var(--gold);font-size:10px}
.detail-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.detail-scores article{padding:14px;border:1px solid var(--line);border-radius:14px}
.detail-scores b{font-size:24px;color:var(--gold);display:block}
.detail-scores span{font-size:10px;color:var(--muted)}
.moments{display:grid;gap:10px;margin-top:18px}
.moment{padding:14px;border-right:3px solid var(--gold);background:rgba(255,255,255,.03);border-radius:10px}
.moment small{color:var(--gold)}.moment h4{margin:5px 0}.moment p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.disclaimer{margin-top:18px;color:var(--muted);font-size:10px;line-height:1.7}

@media(max-width:1100px){
    .heroes-grid{grid-template-columns:repeat(3,1fr)}
    .categories{grid-template-columns:repeat(3,1fr)}
    .timeline-showcase{grid-template-columns:repeat(2,1fr)}
    .timeline-showcase:before{display:none}
}
@media(max-width:850px){
    .hero{grid-template-columns:1fr}
    .hero-stage{height:500px}
    .heroes-grid{grid-template-columns:repeat(2,1fr)}
    .quiz-section{grid-template-columns:1fr}
    .detail-hero{grid-template-columns:1fr}
    .detail-art{min-height:330px}
}
@media(max-width:600px){
    main{width:min(100% - 18px,1420px)}
    .topbar{padding:0 12px}
    nav a{display:none}
    .hero{min-height:auto;padding-top:55px}
    .hero h1{font-size:42px}
    .hero-stage{height:430px}
    .main-warrior{right:32%;transform:scale(.85);transform-origin:bottom}
    .hero-caption{display:grid}
    .categories{grid-template-columns:1fr 1fr}
    .heroes-grid{grid-template-columns:1fr}
    .timeline-showcase{grid-template-columns:1fr}
    .quiz-options{grid-template-columns:1fr}
    .quiz-section{padding:22px}
    .section-head{display:block}
}


/* ==========================================================
   Bright Cartoon Edition V2
   ========================================================== */
:root{
    --bg:#fff8e8;
    --bg2:#fffdf6;
    --panel:#ffffff;
    --panel2:#fffaf0;
    --text:#17392f;
    --muted:#697d76;
    --gold:#f4b41a;
    --gold2:#ffd85a;
    --blue:#169bd5;
    --green:#138f68;
    --line:rgba(22,83,66,.13);
    --shadow:0 24px 60px rgba(74,88,69,.15);
}
body{
    background:
        radial-gradient(circle at 10% 0%,rgba(255,205,80,.20),transparent 28%),
        radial-gradient(circle at 90% 8%,rgba(48,187,230,.18),transparent 32%),
        linear-gradient(180deg,#fffdf7,#fff7df 72%,#fffdf8);
    color:var(--text);
}
.noise{opacity:.018}
.flare{opacity:.16}
.f-one{background:#51c9ef}
.f-two{background:#ffd05a}
.topbar{
    background:rgba(255,255,255,.91);
    border-color:rgba(22,83,66,.10);
    box-shadow:0 8px 30px rgba(59,82,69,.08);
}
.brand small,nav{color:var(--muted)}
nav button{background:#fff;color:var(--text)}
.hero-stage{
    background:
        linear-gradient(to top,rgba(23,88,69,.22),transparent 54%),
        linear-gradient(145deg,#7ddcff,#fff0a0);
    border-color:rgba(19,143,104,.18);
}
.hero-stage:before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 74% 20%,rgba(255,255,255,.85) 0 4%,transparent 4.5%),
      linear-gradient(180deg,transparent 70%,rgba(246,188,48,.18));
    pointer-events:none;
}
.fortress{opacity:.25}
.moon{
    background:linear-gradient(145deg,#fff7b0,#ffc52c);
    box-shadow:0 0 70px rgba(255,190,31,.34);
}
.hero-caption{
    background:rgba(255,255,255,.82);
    color:var(--text);
}
.hero-caption span{color:var(--muted)}
.ticker{background:#147d61;border-color:transparent}
.ticker-track{color:#fff}
.ticker-track i{color:#ffd65c}
.categories{gap:14px}
.category-card{
    background:#fff;
    box-shadow:0 12px 30px rgba(60,80,69,.08);
}
.category-card:hover,.category-card.active{
    background:linear-gradient(145deg,#fff8d3,#fff);
}
.search-panel{
    background:#fff;
    box-shadow:0 10px 28px rgba(64,84,72,.09);
}
.tag{background:#fff;color:#527068}
.heroes-grid{gap:20px}
.hero-card{
    background:#fff;
    border-color:rgba(23,94,73,.13);
    box-shadow:0 15px 34px rgba(52,76,64,.11);
}
.hero-card:hover{
    transform:translateY(-8px) rotate(-.25deg);
    box-shadow:0 28px 55px rgba(52,76,64,.17);
}
.card-art{
    height:270px;
    background:#f6d15e;
}
.card-art:before{
    background:linear-gradient(180deg,transparent 50%,rgba(6,44,32,.45));
    z-index:2;
}
.card-art img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}
.hero-card:hover .card-art img{transform:scale(1.055)}
.card-art .sun,.card-art .silhouette{display:none}
.card-badge{
    background:rgba(255,255,255,.88);
    color:#1a5b48;
    border-color:rgba(20,100,76,.16);
    font-weight:bold;
}
.card-content h3{color:#17392f}
.card-content p,.section-head p{color:var(--muted)}
.card-hook{color:#285c4d}
.score{background:#fff8df}
.score span{color:#697d76}
.timeline-showcase article{
    background:#fff;
    box-shadow:0 12px 30px rgba(60,80,69,.08);
}
.quiz-section{
    background:linear-gradient(135deg,#dff8ff,#fff4c3);
    border-color:rgba(23,110,84,.13);
}
.quiz-card{background:rgba(255,255,255,.78)}
.quiz-option{background:#fff;color:var(--text)}
.modal{background:rgba(25,54,44,.60);backdrop-filter:blur(7px)}
.modal-box{background:#fff;color:var(--text)}
.modal-box>button{background:#fff;color:var(--text)}
.detail-art{background:#ffe690}
.detail-art .card-art{height:100%}
.story-box,.moment{background:#fffaf0}
.detail-scores article{background:#fff}
footer{color:var(--muted)}
@media(max-width:600px){
    .card-art{height:300px}
}

.bright-stage{background:linear-gradient(145deg,#7edfff,#ffe78b)}
.landing-cartoon{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.bright-stage .hero-caption{z-index:4}