[hidden]{display:none!important}#splash{position:fixed;inset:0;z-index:100;background:#050f20;display:grid;place-content:center;text-align:center;transition:.45s}#splash.hide{opacity:0;visibility:hidden}#splash img{width:130px;margin:auto;filter:drop-shadow(0 0 34px #3de5ff66)}#splash h1{color:var(--cyan)}.brand{border:0;background:transparent;text-align:left;width:100%;cursor:pointer}.brand img{width:48px;height:48px;object-fit:contain}.original-hero{position:relative}.hero-jafro{position:absolute;right:4%;bottom:-12%;width:min(31%,270px);max-height:360px;object-fit:contain;filter:drop-shadow(0 16px 20px #0008)}.home-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}.feature{border:1px solid #235278;background:linear-gradient(145deg,#0b2b4b,#101b39);color:white;border-radius:18px;padding:22px;text-align:left;cursor:pointer;min-height:105px}.feature:hover{border-color:var(--cyan);transform:translateY(-3px)}.feature b,.feature span{display:block}.feature b{font-size:19px;margin-bottom:8px}.feature span{color:var(--muted)}.section-intro{font-size:20px;color:var(--muted)}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.category-grid .category{min-height:185px;background:linear-gradient(145deg,#0b304f,#141d43)}.category-grid .category:nth-child(2n){background:linear-gradient(145deg,#332264,#142447)}.category-grid .category:nth-child(3n){background:linear-gradient(145deg,#65224f,#252249)}.back{border:0;background:transparent;color:var(--cyan);font-weight:800;font-size:15px;cursor:pointer;margin-bottom:18px}.muted{color:var(--muted);line-height:1.6}.wide{width:100%;margin-top:18px}.solution-card{margin-top:20px;background:#0a1b31;border:1px solid #28577c;border-left:4px solid var(--cyan);border-radius:15px;padding:18px;line-height:1.6}.solution-card strong{color:var(--green)}.solution-card.hint{border-left-color:#f6c94c}.learning-tip{display:flex;gap:14px;padding:18px;background:#2a2352;border:1px solid #644cc0;border-radius:16px;margin-top:24px}.learning-tip span{color:#d9d1ff}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:25px}.form-grid.three{grid-template-columns:1fr 120px 1fr}label{display:block;color:var(--muted);font-weight:700;margin-top:16px}label input,label select,.answer-row input{display:block;width:100%;background:var(--input);border:1px solid #28567e;color:white;border-radius:13px;padding:15px;margin-top:9px;font-size:18px;outline:none}.problem-text{font-size:clamp(22px,3vw,32px);line-height:1.5;padding:24px 0}.badge{padding:8px 13px;background:#37286d;border:1px solid #785ae6;border-radius:999px;color:#d9d1ff;font-weight:800}.answer-row{display:flex;align-items:end;gap:12px}.answer-row input{margin:0}.answer-row>span{color:var(--cyan);font-weight:800;padding:15px}.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.feedback{margin-top:18px;padding:16px;border-radius:13px;border-left:4px solid}.feedback.good{background:#123c37;color:#8cffb1;border-color:var(--green)}.feedback.bad{background:#471e37;color:#ff9bcf;border-color:#ff659e}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.choice-grid button,.levels button,.avatar-choices button{border:1px solid #2b5578;background:#0d2a47;color:#dceeff;padding:16px;border-radius:13px;font-weight:800;cursor:pointer}.choice-grid button.active,.levels button.active,.avatar-choices button.active{border-color:var(--cyan);background:#174666;box-shadow:0 0 0 2px #3de5ff22}.levels{display:flex}.center{text-align:center}.big-icon{font-size:70px}.challenge-top{display:flex;justify-content:space-between;align-items:center}.challenge-top strong{font-size:28px;color:#f6c94c}.challenge-top strong.urgent{color:#ff6e6e;animation:pulse .6s infinite alternate}@keyframes pulse{to{transform:scale(1.08)}}.wallet{font-size:22px;padding:12px 18px;background:#312849;border:1px solid #6a54ba;border-radius:14px}.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}.shop-card{background:#0d2947;border:1px solid #23547c;border-radius:17px;padding:12px;text-align:center}.shop-card img{width:100%;aspect-ratio:3/4;object-fit:contain;border-radius:12px;background:#07182c}.shop-card h3{min-height:48px}.shop-card button{width:100%;border:0;border-radius:10px;padding:11px;font-weight:800}.shop-card .buy{background:var(--cyan);color:#052037;cursor:pointer}.shop-card .owned{background:#173e38;color:#8cffb1}.owned-card{border-color:var(--cyan)}.progress-copy{margin-top:28px;padding:8px 4px}.progress-copy p{color:var(--muted);line-height:1.7}.profile-head{display:flex;align-items:center;gap:22px;margin:22px 0}.avatar-big{width:100px;height:100px;display:grid;place-items:center;border-radius:50%;font-size:50px;background:#173b60;border:3px solid var(--cyan)}.avatar-choices{display:flex;gap:10px;margin:12px 0 22px}.avatar-choices button{font-size:25px;padding:10px}.overlay{position:fixed;inset:0;background:#020814dd;z-index:50;display:grid;place-items:center;padding:20px}.modal{position:relative;background:#09213c;border:1px solid #2b5d84;border-radius:24px;padding:30px;width:min(760px,95vw);max-height:92vh;overflow:auto;box-shadow:0 30px 90px #000}.modal-close{position:absolute;right:15px;top:12px;border:0;background:transparent;color:white;font-size:30px;cursor:pointer}.story-modal img{display:block;width:100%;max-height:410px;object-fit:contain;border-radius:16px;background:#061529}.story-modal>p:not(.eyebrow){font-size:19px;line-height:1.6}.story-footer{display:flex;justify-content:space-between;align-items:center;gap:10px}.story-footer span{color:var(--cyan);letter-spacing:4px}.reaction{position:fixed;right:20px;bottom:10px;z-index:60;pointer-events:none}.reaction img{width:min(330px,40vw);max-height:430px;object-fit:contain}.reaction.play{animation:react 2.8s ease both}@keyframes react{0%{opacity:0;transform:translate(50px,15px) scale(.8) rotate(-4deg)}15%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateX(35px)}}
@media(max-width:1050px){.shop-grid{grid-template-columns:repeat(3,1fr)}.category-grid{grid-template-columns:repeat(2,1fr)}.hero-jafro{opacity:.5}.home-actions{grid-template-columns:1fr 1fr}.home-actions .feature:last-child{grid-column:1/-1}}
@media(max-width:900px){.sidebar nav{overflow-x:auto;justify-content:flex-start}.sidebar .nav{min-width:74px}.category-grid{grid-template-columns:repeat(2,1fr)}.shop-grid{grid-template-columns:repeat(2,1fr)}.hero-jafro{display:none}.form-grid.three{grid-template-columns:1fr 90px 1fr}}
@media(max-width:560px){.home-actions,.category-grid{grid-template-columns:1fr}.home-actions .feature:last-child{grid-column:auto}.form-grid,.form-grid.three{grid-template-columns:1fr}.answer-row{display:grid}.choice-grid{grid-template-columns:1fr 1fr}.shop-grid{grid-template-columns:1fr 1fr;gap:10px}.story-footer{flex-wrap:wrap}.story-footer span{order:-1;width:100%;text-align:center}.reaction img{width:58vw}}
.shop-card.exclusive-card{border:2px solid #f6c94c;background:linear-gradient(145deg,#3b3018,#171f39);box-shadow:0 0 25px #f6c94c22}.shop-card .locked{background:#352f2b;color:#f6c94c;border:1px solid #8b7737}.shop-card.exclusive-card h3{color:#ffe386}
.more-button{margin-top:auto;width:100%;display:flex;align-items:center;gap:13px;padding:13px 16px;border:1px solid #28577c;border-radius:14px;background:#0a2340;color:#dceeff;font:inherit;font-weight:800;cursor:pointer}.more-button:hover{border-color:var(--cyan);background:#103253}.score{margin-top:10px}.about-modal{width:min(760px,95vw);text-align:center;background:radial-gradient(circle at top,#12385d,#09213c 55%)}.about-icon{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 0 24px #3de5ff55)}.about-modal h2{font-size:clamp(32px,6vw,48px);margin:5px 0 10px}.version-badge{display:inline-block;padding:7px 14px;border:1px solid #3de5ff88;border-radius:999px;background:#0b304f;color:var(--cyan);font-weight:800}.about-developer{font-size:18px;color:#c6d7e8}.about-developer strong{color:#fff}.about-message{margin-top:22px;padding:24px;text-align:center;background:#06182caa;border:1px solid #28577c;border-left:4px solid var(--cyan);border-radius:16px}.about-message p{margin:0 auto 38px;color:#d7e5f1;line-height:1.75;max-width:680px}.about-message p:last-child{margin-bottom:0}.about-tagline{margin:22px 0 8px;color:var(--cyan);font-size:18px;font-weight:800}.about-copyright{margin:0;color:#8eabc6;font-size:13px}
.hero-card-stack{position:absolute;right:7%;bottom:7%;width:min(20%,190px);aspect-ratio:.82;transform:rotate(7deg);z-index:2;filter:drop-shadow(0 15px 18px #0009)}.hero-card-stack::before,.hero-card-stack::after{content:"";position:absolute;inset:0;border:6px solid #ffc928;border-radius:18px;background:#142d52}.hero-card-stack::before{transform:translate(-22px,6px) rotate(-8deg);z-index:-2}.hero-card-stack::after{transform:translate(-11px,3px) rotate(-4deg);z-index:-1}.hero-poster{display:block;width:100%;height:100%;object-fit:contain;border:6px solid #ffc928;border-radius:18px;background:#142d52}
@media(max-width:1050px){.hero-card-stack{right:5%;bottom:9%;width:min(21%,175px)}}
@media(max-width:900px){.hero-card-stack{display:none}}
@media(max-width:900px){.sidebar nav{width:auto;flex:1}.more-button{margin:0 0 0 6px;min-width:62px;width:62px;justify-content:center;flex-direction:column;gap:3px;padding:8px 6px;border:0;border-left:1px solid #234966;border-radius:0;background:transparent;font-size:18px}.more-button span{font-size:11px}.about-modal{padding:26px 20px}.about-message{padding:16px}}

/* The mobile menu keeps every section reachable without a clipped bottom bar. */
.menu-toggle,.nav-close{display:none}
@media(max-width:900px){
  .menu-toggle{display:inline-flex;align-items:center;gap:8px;flex:none;border:1px solid #2b5d84;border-radius:12px;background:#143554;color:white;padding:10px 12px;font-size:14px;font-weight:700;cursor:pointer}
  .nav-backdrop{position:fixed;inset:0;background:#020814b8;z-index:9}
  body.menu-open{overflow:hidden}
  .sidebar{inset:0 auto 0 0;width:min(300px,86vw);height:100dvh;padding:24px 18px;flex-direction:column;border:0;border-right:1px solid #123453;z-index:10;overflow-y:auto;transform:translateX(-100%);transition:transform .2s ease}
  .sidebar.open{transform:translateX(0)}
  .sidebar .brand{display:flex;width:calc(100% - 36px);margin:0 0 28px}
  .sidebar nav{display:grid;flex:none;width:100%;overflow:visible;gap:7px}
  .sidebar .nav{display:flex;min-width:0;text-align:left;gap:14px;padding:12px 14px}
  .sidebar .nav span{font-size:16px}
  .sidebar .score{display:flex;margin-top:10px}
  .more-button{margin:16px 0 0;width:100%;min-width:0;flex-direction:row;justify-content:flex-start;gap:13px;padding:13px 16px;border:1px solid #28577c;border-radius:14px;background:#0a2340;font-size:16px}
  .more-button span{font-size:16px}
  .nav-close{display:block;position:absolute;top:24px;right:14px;border:0;background:transparent;color:white;font-size:28px;line-height:1;cursor:pointer;padding:6px}
  main{padding-bottom:50px}
  header{gap:14px;justify-content:flex-start}
  header>div{min-width:0;flex:1}
  #installBtn{flex:none}
  .hero-card-stack{display:block;position:relative;right:auto;bottom:auto;width:min(190px,48vw);margin:38px auto 8px}
  .original-hero{display:flex;flex-direction:column;align-items:stretch}
}
@media(max-width:560px){header{flex-wrap:wrap}#installBtn{margin-left:auto}}