:root{
  --orange:#ff7a18; --orange2:#ff9d3c; --navy:#12203a; --navy2:#1b2f52;
  --leaf:#2f7d32; --gold:#ffcf40; --ink:#0d1526; --paper:#f5efe0;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Be Vietnam Pro',system-ui,sans-serif;
  color:#eaf0fb; background:var(--ink); min-height:100vh; position:relative;
  overflow-x:hidden;
}
.scroll-bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,122,24,.18), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(47,125,50,.18), transparent 45%),
    linear-gradient(160deg,#0d1526,#12203a 60%,#0d1526);
}
.scroll-bg::before{
  content:""; position:absolute; inset:0; opacity:.05;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:26px 26px;
}

/* top bar */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px; padding:18px 22px;
  background:linear-gradient(90deg,rgba(255,122,24,.15),rgba(27,47,82,.6));
  border-bottom:2px solid rgba(255,207,64,.4);
  backdrop-filter:blur(6px); position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:14px}
.swirl{font-size:38px; animation:spin 8s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.topbar h1{font-size:22px; font-weight:800; color:var(--gold); letter-spacing:.5px}
.sub{font-size:12.5px; color:#c6d2e8; opacity:.9}
.ninja-badge{display:flex; align-items:center; gap:10px;
  background:rgba(13,21,38,.6); padding:8px 14px; border-radius:14px;
  border:1px solid rgba(255,207,64,.35)}
.rank-headband{font-size:26px}
.hello{font-size:14px}
.hello b{color:var(--orange2)}
.rank{font-size:12px; color:var(--gold)}

/* progress */
.progress-wrap{max-width:1100px; margin:20px auto 6px; padding:0 20px}
.progress-info{display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; color:#d7e0f2}
.progress-bar{height:16px; background:rgba(255,255,255,.08); border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,207,64,.3)}
.progress-fill{height:100%; width:0; border-radius:10px;
  background:linear-gradient(90deg,var(--orange),var(--gold)); transition:width .6s ease}

/* arcs */
.arc-container{max-width:1100px; margin:10px auto 40px; padding:0 20px;
  display:flex; flex-direction:column; gap:26px}
.arc{
  background:linear-gradient(160deg,rgba(27,47,82,.75),rgba(13,21,38,.85));
  border:1px solid rgba(255,255,255,.08); border-left:6px solid var(--orange);
  border-radius:18px; padding:20px; position:relative; overflow:hidden;
}
.arc.locked{opacity:.55; filter:grayscale(.4)}
.arc-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:6px}
.arc-num{
  min-width:52px; height:52px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; font-size:22px; font-weight:800; color:#1a1300;
  background:linear-gradient(145deg,var(--gold),var(--orange)); box-shadow:0 4px 14px rgba(255,122,24,.4)
}
.arc-title h2{font-size:18px; color:#fff}
.arc-rank{display:inline-block; font-size:11px; font-weight:700; margin-top:4px;
  padding:2px 10px; border-radius:20px; background:rgba(255,207,64,.18); color:var(--gold)}
.arc-story{font-size:13.5px; line-height:1.6; color:#cdd8ee; margin:10px 0 16px; font-style:italic;
  border-left:3px solid rgba(255,207,64,.4); padding-left:12px}

.missions{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.mission{
  background:rgba(13,21,38,.7); border:1px solid rgba(255,255,255,.09);
  border-radius:12px; padding:13px; cursor:pointer; transition:.18s; position:relative;
}
.mission:hover{transform:translateY(-3px); border-color:var(--gold); box-shadow:0 6px 18px rgba(0,0,0,.35)}
.mission.done{border-color:var(--leaf); background:rgba(47,125,50,.18)}
.mission.hsg{border-left:4px solid var(--orange)}
.m-skill{font-size:11px; color:var(--orange2); font-weight:700; text-transform:uppercase; letter-spacing:.4px}
.m-name{font-size:14px; font-weight:600; margin:4px 0 6px; color:#fff}
.m-sgk{font-size:11px; color:#9fb0cf}
.m-check{position:absolute; top:10px; right:10px; font-size:16px}
.hsg-tag{display:inline-block; font-size:10px; background:var(--orange); color:#fff;
  padding:1px 7px; border-radius:8px; margin-left:4px; vertical-align:middle}

.boss{
  margin-top:14px; padding:13px 16px; border-radius:12px;
  background:linear-gradient(90deg,rgba(217,83,79,.25),rgba(255,122,24,.15));
  border:1px dashed rgba(255,207,64,.5); display:flex; align-items:center; gap:12px; flex-wrap:wrap
}
.boss .b-icon{font-size:26px}
.boss b{color:var(--gold)}
.boss p{font-size:12.5px; color:#e6ddc9}
.boss-btn{margin-left:auto; background:linear-gradient(145deg,var(--orange),#d9534f); color:#fff;
  border:none; padding:8px 16px; border-radius:20px; font-weight:700; cursor:pointer; font-size:13px}
.boss-btn:hover{filter:brightness(1.1)}

/* sensei button */
.sensei-btn{
  position:fixed; right:22px; bottom:22px; z-index:30;
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(145deg,var(--orange),var(--orange2)); color:#fff;
  border:none; padding:13px 20px; border-radius:40px; font-weight:700; font-size:15px;
  cursor:pointer; box-shadow:0 6px 20px rgba(255,122,24,.5); font-family:inherit;
  animation:bob 2.5s ease-in-out infinite;
}
.sensei-btn span:first-child{font-size:22px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* modal */
.modal-overlay{position:fixed; inset:0; background:rgba(5,9,18,.78); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(4px)}
.modal-overlay.hidden{display:none}
.modal{background:linear-gradient(160deg,#1b2f52,#12203a); width:100%; max-width:460px;
  border-radius:18px; border:1px solid rgba(255,207,64,.35); overflow:hidden; position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.mission-modal{max-width:440px; padding:24px}
.modal-head{display:flex; align-items:center; gap:12px; padding:16px;
  background:rgba(255,122,24,.14); border-bottom:1px solid rgba(255,207,64,.3)}
.sensei-avatar{font-size:30px; background:rgba(255,207,64,.2); width:48px; height:48px;
  border-radius:50%; display:flex; align-items:center; justify-content:center}
.modal-head b{color:var(--gold); font-size:15px}
.modal-sub{font-size:11.5px; color:#bccbe6}
.close-x{margin-left:auto; background:none; border:none; color:#cdd8ee; font-size:18px; cursor:pointer}
.mission-modal .close-x{position:absolute; top:14px; right:16px; margin:0}

.chat-box{height:340px; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px}
.msg{padding:10px 13px; border-radius:12px; font-size:13.5px; line-height:1.55; max-width:88%; white-space:pre-wrap}
.msg.sensei{background:rgba(255,255,255,.08); align-self:flex-start; border-bottom-left-radius:3px}
.msg.me{background:linear-gradient(145deg,var(--orange),var(--orange2)); color:#fff;
  align-self:flex-end; border-bottom-right-radius:3px}
.msg.loading{opacity:.7; font-style:italic}
.chat-input{display:flex; gap:8px; padding:14px; border-top:1px solid rgba(255,255,255,.1)}
.chat-input input{flex:1; background:rgba(13,21,38,.8); border:1px solid rgba(255,207,64,.3);
  border-radius:20px; padding:10px 15px; color:#fff; font-family:inherit; font-size:14px; outline:none}
.chat-input button, #sendBtn{background:var(--gold); color:#1a1300; border:none; border-radius:20px;
  padding:10px 18px; font-weight:700; cursor:pointer; font-family:inherit}

/* mission detail */
.md-skill{font-size:12px; color:var(--orange2); font-weight:700; text-transform:uppercase}
.md-name{font-size:20px; font-weight:800; color:#fff; margin:6px 0 12px}
.md-row{font-size:13.5px; color:#dbe4f5; margin:8px 0; line-height:1.6}
.md-row b{color:var(--gold)}
.md-actions{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap}
.btn-done{background:linear-gradient(145deg,var(--leaf),#43a047); color:#fff; border:none;
  padding:10px 18px; border-radius:22px; font-weight:700; cursor:pointer; font-family:inherit}
.btn-ask{background:rgba(255,207,64,.2); color:var(--gold); border:1px solid var(--gold);
  padding:10px 18px; border-radius:22px; font-weight:700; cursor:pointer; font-family:inherit}

.foot{text-align:center; padding:26px 20px 90px; color:#9fb0cf; font-size:12.5px}

/* ===== AUTH pages ===== */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.auth-card{width:100%; max-width:440px; background:linear-gradient(160deg,rgba(27,47,82,.9),rgba(13,21,38,.95));
  border:1px solid rgba(255,207,64,.35); border-radius:22px; padding:34px 28px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.auth-logo{font-size:52px; animation:spin 8s linear infinite; display:inline-block}
.auth-title{color:var(--gold); font-size:22px; font-weight:800; margin:6px 0}
.auth-sub{color:#c6d2e8; font-size:13px; margin-bottom:20px}
.auth-input{width:100%; background:rgba(13,21,38,.85); border:1px solid rgba(255,207,64,.3);
  border-radius:12px; padding:13px 15px; color:#fff; font-family:inherit; font-size:14.5px; margin-bottom:12px; outline:none}
.auth-input:focus{border-color:var(--gold)}
.auth-btn{width:100%; background:linear-gradient(145deg,var(--orange),var(--orange2)); color:#fff; border:none;
  border-radius:22px; padding:13px; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; margin-top:6px}
.auth-btn:hover{filter:brightness(1.08)}
.auth-switch{font-size:13px; color:#c6d2e8; margin-top:14px}
.auth-switch a{color:var(--orange2); font-weight:700; text-decoration:none}
.auth-err{color:#ff8b8b; font-size:13px; margin-top:10px; min-height:18px}
.hidden{display:none}

.test-head{text-align:left; margin-bottom:14px}
.test-head b{color:var(--gold); font-size:16px}
.test-desc{font-size:12.5px; color:#c6d2e8; margin-top:4px}
.test-q{background:rgba(13,21,38,.6); border:1px solid rgba(255,255,255,.08); border-radius:12px;
  padding:14px; margin-bottom:12px; text-align:left}
.tq-head{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.tq-num{background:var(--orange); color:#fff; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700}
.tq-topic{font-size:11px; color:var(--gold); text-transform:uppercase; font-weight:700; letter-spacing:.4px}
.tq-text{font-size:14.5px; color:#fff; margin-bottom:10px; font-weight:600}
.tq-opts{display:flex; flex-direction:column; gap:7px}
.tq-opt{display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.05);
  padding:9px 12px; border-radius:9px; cursor:pointer; font-size:14px; color:#e6edfa; transition:.15s}
.tq-opt:hover{background:rgba(255,207,64,.12)}
.tq-opt input{accent-color:var(--orange)}
.result-badge{text-align:center; padding:10px}
.rb-emoji{font-size:52px}
.rb-score{font-size:30px; font-weight:800; color:var(--gold); margin:8px 0}
.rb-rank{font-size:15px; color:#fff; margin-bottom:10px}
.rb-rank b{color:var(--orange2)}
.rb-msg{font-size:13.5px; color:#c6d2e8; line-height:1.6; margin-bottom:18px}

/* ===== Akatsuki bosses ===== */
.akatsuki-section{max-width:1100px; margin:30px auto; padding:0 20px}
.aka-title{text-align:center; margin-bottom:8px}
.aka-title h2{font-size:24px; color:#e0301e; font-weight:800; letter-spacing:.5px;
  text-shadow:0 0 18px rgba(224,48,30,.5)}
.aka-cloud{display:inline-block; animation:bob 3s ease-in-out infinite}
.aka-sub{text-align:center; color:#c6d2e8; font-size:13px; margin-bottom:20px}
.aka-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.aka-card{background:linear-gradient(160deg,#2a0d16,#1a0a10); border:1px solid rgba(224,48,30,.4);
  border-radius:16px; padding:18px; position:relative; overflow:hidden}
.aka-card::before{content:"☁️"; position:absolute; top:-10px; right:-6px; font-size:60px; opacity:.06}
.aka-card-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.aka-avatar{font-size:34px; background:rgba(224,48,30,.15); width:54px; height:54px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; border:1px solid rgba(224,48,30,.4)}
.aka-name{font-size:16px; font-weight:800; color:#ff6a4d}
.aka-level{font-size:11px; color:var(--gold); font-weight:700}
.aka-intro{font-size:12.5px; color:#e0c8c8; font-style:italic; line-height:1.55; margin-bottom:12px}
.aka-btn{background:linear-gradient(145deg,#e0301e,#a01810); color:#fff; border:none;
  padding:9px 16px; border-radius:20px; font-weight:700; cursor:pointer; font-family:inherit; font-size:13px}
.aka-btn:hover{filter:brightness(1.1)}
.aka-problem{margin-top:12px; font-size:13px; color:#f0dede; white-space:pre-wrap; line-height:1.6;
  background:rgba(0,0,0,.3); border-radius:10px; padding:12px; display:none}
.aka-problem.show{display:block}
.aka-tools{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; display:none}
.aka-tools.show{display:flex}
.aka-mini{background:rgba(255,207,64,.15); color:var(--gold); border:1px solid rgba(255,207,64,.4);
  padding:7px 13px; border-radius:16px; font-weight:700; cursor:pointer; font-family:inherit; font-size:12.5px}
.aka-answer{margin-top:10px; font-size:12.5px; color:#bfe6c2; white-space:pre-wrap; line-height:1.6;
  background:rgba(47,125,50,.12); border:1px solid rgba(47,125,50,.35); border-radius:10px; padding:12px; display:none}
.aka-answer.show{display:block}

.logout-link{font-size:12px; color:#c6d2e8; text-decoration:none; margin-left:10px; opacity:.85}
.logout-link:hover{color:var(--orange2)}

/* ===== GATE (đăng nhập với ông gác cổng) ===== */
.gate-body{overflow-x:hidden}
.lantern{position:fixed; top:0; font-size:44px; animation:sway 4s ease-in-out infinite; z-index:1; opacity:.9}
.lantern-l{left:6%} .lantern-r{right:6%; animation-delay:1s}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.gate-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; gap:30px;
  flex-wrap:wrap; padding:30px 20px}
.gate-guard{display:flex; flex-direction:column; align-items:center; max-width:280px; position:relative}
.guard-img{width:230px; height:auto; filter:drop-shadow(0 10px 24px rgba(0,0,0,.5)); animation:floaty 4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.guard-name{margin-top:8px; font-size:12.5px; color:var(--gold); font-weight:700; text-align:center}
.speech{background:#fff; color:#1a2130; border-radius:16px; padding:14px 16px; font-size:13.5px;
  line-height:1.55; max-width:250px; margin-bottom:14px; position:relative; box-shadow:0 8px 24px rgba(0,0,0,.35)}
.speech b{color:#e0301e}
.speech::after{content:""; position:absolute; bottom:-12px; left:50%; transform:translateX(-50%);
  border:12px solid transparent; border-top-color:#fff; border-bottom:0}

.gate-card{width:100%; max-width:430px; background:linear-gradient(160deg,rgba(27,47,82,.95),rgba(13,21,38,.97));
  border:2px solid rgba(255,207,64,.45); border-radius:22px; padding:30px 26px; text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.6); position:relative}
.gate-card::before{content:"忍"; position:absolute; top:14px; right:18px; font-size:30px; color:rgba(255,207,64,.18); font-weight:800}
.gate-logo{font-size:46px; animation:spin 8s linear infinite; display:inline-block}
.gate-title{color:var(--gold); font-size:21px; font-weight:800; letter-spacing:1px; margin:4px 0}
.gate-sub{color:#c6d2e8; font-size:12.5px; margin-bottom:18px}
.gate-label{display:block; text-align:left; font-size:13px; color:#e6edfa; font-weight:600; margin:10px 0 5px}
.lbl-hint{color:#9fb0cf; font-weight:400; font-size:11.5px}
.gate-input{width:100%; background:rgba(13,21,38,.85); border:1px solid rgba(255,207,64,.3);
  border-radius:12px; padding:12px 15px; color:#fff; font-family:inherit; font-size:14.5px; outline:none}
.gate-input:focus{border-color:var(--gold)}
.gate-btn{width:100%; background:linear-gradient(145deg,var(--orange),var(--orange2)); color:#fff; border:none;
  border-radius:22px; padding:13px; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; margin-top:16px}
.gate-btn:hover{filter:brightness(1.08)}
.gate-switch{font-size:13px; color:#c6d2e8; margin-top:14px}
.gate-switch a{color:var(--orange2); font-weight:700; text-decoration:none}
.gate-err{color:#ff8b8b; font-size:13px; margin-top:10px; min-height:18px; font-weight:600}
.field-hint{font-size:12px; margin-top:5px; text-align:left; min-height:16px}
.field-hint.good{color:#7ee081} .field-hint.bad{color:#ff8b8b}

/* boss độ khó */
.aka-card{position:relative}
.aka-diff{position:absolute; top:0; right:0; font-size:10.5px; font-weight:800; color:#fff;
  padding:4px 12px; border-bottom-left-radius:12px; letter-spacing:.3px}
.aka-stars{font-size:12px; letter-spacing:1px; margin:2px 0}

/* Nhóm Huyền thoại Làng Lá — tông xanh lá */
.legends-section .aka-title h2{color:#3fae4a; text-shadow:0 0 18px rgba(63,174,74,.5)}
.legends-section .aka-card{background:linear-gradient(160deg,#0e2418,#0a1a12)}
.legends-section .aka-card::before{content:"🍃"}
.legends-section .aka-avatar{background:rgba(63,174,74,.15); border-color:rgba(63,174,74,.4)}
.legends-section .aka-name{color:#6bd47a}

@media(max-width:560px){
  .topbar h1{font-size:18px}
  .sensei-btn-txt{display:none}
  .chat-box{height:300px}
  .auth-card{padding:26px 18px}
  .guard-img{width:170px}
  .gate-card{padding:24px 18px}
}