/* ===== Ninja Kanji Game — stylesheet ===== */

:root{
  --purple:#7c3aed;
  --purple-lt:#9b6cf2;
  --purple-deep:#4c1d95;
  --night-1:#3a1d72;
  --night-2:#241248;
  --night-3:#160a30;
  --gold:#ffd700;
  --gold-deep:#f5a623;
  --gold-soft:#ffe27a;
  --ink:#2c1a4d;
  --ink-soft:#6b5a8e;
  --panel:#ffffff;
  --panel-tint:#f7f3ff;
  --good:#22b573;
  --good-deep:#149a5d;
  --bad:#ef5a7a;
  --shadow:rgba(28,12,60,.35);
  /* night background stops (overridable by theme tweak) */
  --bg-1:#4a2596;
  --bg-2:#3a1d72;
  --bg-3:#241248;
  --bg-4:#160a30;
  --opt-fs:26px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:radial-gradient(120% 120% at 50% 0%, #ece9f4 0%, #ddd9ea 100%);
  font-family:"Zen Maru Gothic", system-ui, sans-serif;
  min-height:100vh;
}

.stage{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.kana-mode-label{justify-content:center;font-size:22px;padding:6px 0 2px;}
.trace__loading{
  display:flex;align-items:center;justify-content:center;
  height:200px;font-family:"Mochiy Pop One";font-size:16px;
  color:var(--purple-lt);opacity:0.7;
  animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:0.4}50%{opacity:1}}

.tweaks-gear{
  position:fixed;bottom:12px;right:12px;z-index:9000;
  width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(0,0,0,.45);color:#fff;font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.tweaks-gear:hover{background:rgba(0,0,0,.7);}
.device-scale{transform-origin:center center;}

/* ---------- Game shell ---------- */
.game{
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    radial-gradient(140% 90% at 50% -8%, var(--bg-1) 0%, var(--bg-2) 34%, var(--bg-3) 66%, var(--bg-4) 100%);
  font-family:"Zen Maru Gothic", system-ui, sans-serif;
  color:#fff;
  user-select:none;
}

/* ================= HEADER ================= */
.hdr{
  position:relative;
  z-index:30;
  padding:54px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hdr__top{
  display:flex;
  align-items:center;
}
.hdr__left{display:flex;align-items:center;gap:9px;flex:1;}
.hdr__center{display:flex;justify-content:center;flex:1;}
.hdr__right{display:flex;align-items:center;gap:9px;flex:1;justify-content:flex-end;}

/* level badge */
.lvl{
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border:1.5px solid rgba(255,255,255,.22);
  border-radius:999px;
  backdrop-filter:blur(6px);
}
.lvl__ring{
  position:relative;
  width:42px;height:42px;flex:none;
  border-radius:50%;
  background:conic-gradient(var(--gold) var(--lvlpct,60%), rgba(255,255,255,.18) 0);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px rgba(255,215,0,.25);
}
.lvl__ring::after{
  content:"";position:absolute;inset:4px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #6d39c9, #3c1c7d);
}
.lvl__num{
  position:relative;z-index:1;
  font-family:"Mochiy Pop One";font-size:19px;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.lvl__meta{display:flex;flex-direction:column;line-height:1.05;}
.lvl__cap{font-size:9.5px;letter-spacing:.12em;color:var(--gold-soft);font-weight:700;}
.lvl__rank{font-size:14px;font-weight:700;color:#fff;}

/* small stat chips */
.chip{
  display:flex;align-items:center;gap:5px;
  padding:7px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:999px;
  font-weight:800;font-size:15px;color:#fff;
  font-family:"Mochiy Pop One";
  backdrop-filter:blur(6px);
}
.chip .ic{font-size:15px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));}
.chip__star{color:var(--gold);}
.spacer{flex:1;}

/* treasure button */
.treasure{
  position:relative;
  width:54px;height:54px;flex:none;
  border:none;cursor:pointer;
  border-radius:18px;
  background:linear-gradient(180deg,#ffe27a,#f5a623);
  box-shadow:0 5px 0 #c9831a, 0 9px 16px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  transition:transform .12s, box-shadow .12s;
  animation:bobTreasure 2.6s ease-in-out infinite;
}
.treasure:active{transform:translateY(4px);box-shadow:0 1px 0 #c9831a, 0 4px 8px rgba(0,0,0,.4);}
.treasure__badge{
  position:absolute;top:-6px;right:-6px;
  min-width:21px;height:21px;padding:0 5px;
  background:var(--bad);border:2px solid #fff;border-radius:999px;
  font-family:"Mochiy Pop One";font-size:11px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.35);
}

/* xp bar */
.xp{display:flex;align-items:center;gap:10px;}
.xp__track{
  position:relative;flex:1;height:15px;border-radius:999px;
  background:rgba(0,0,0,.32);
  border:1.5px solid rgba(255,255,255,.18);
  overflow:hidden;
}
.xp__fill{
  position:absolute;inset:0;right:auto;height:100%;
  width:var(--xp,40%);
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 60%,var(--gold-soft));
  box-shadow:0 0 10px rgba(255,215,0,.6);
  transition:width .55s cubic-bezier(.3,1.3,.5,1);
}
.xp__fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);
  animation:sheen 2.4s ease-in-out infinite;
}
.xp__cap{
  font-size:10px;font-weight:800;color:var(--gold-soft);
  white-space:nowrap;letter-spacing:.04em;
}
.xp__rank{
  font-size:12.5px;font-weight:800;color:#fff;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ================= SCENE (upper) ================= */
.scene{
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
}

.moon{
  position:absolute;top:8px;right:26px;
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fff7da, #ffe9a8 55%, #ffd86b);
  box-shadow:0 0 34px 10px rgba(255,228,140,.45), inset -8px -6px 0 rgba(212,165,60,.25);
}
.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle 3s ease-in-out infinite;}
.firefly{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:var(--gold-soft);
  box-shadow:0 0 8px 2px rgba(255,226,122,.8);
  animation:float 6s ease-in-out infinite;
}

/* dojo silhouette */
.dojo{position:absolute;left:0;right:0;bottom:0;height:120px;}
.dojo__roof{
  position:absolute;bottom:64px;left:50%;transform:translateX(-50%);
  width:118%;height:0;
  border-left:24px solid transparent;border-right:24px solid transparent;
  border-bottom:46px solid #1d1038;
  filter:drop-shadow(0 -3px 0 rgba(124,58,237,.35));
}
.dojo__wall{
  position:absolute;bottom:0;left:-4%;width:108%;height:70px;
  background:linear-gradient(180deg,#241241,#190b30);
  border-top:3px solid rgba(124,58,237,.4);
}
.lantern{
  position:absolute;bottom:74px;width:26px;height:34px;border-radius:13px/16px;
  background:radial-gradient(circle at 40% 35%, #ffdf8a, #ff9d3a 70%, #e8651f);
  box-shadow:0 0 18px 4px rgba(255,150,60,.5);
  animation:swing 3.4s ease-in-out infinite;
}
.lantern::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:2px;height:8px;background:rgba(255,255,255,.4);}
.lantern::after{content:"";position:absolute;top:7px;left:4px;right:4px;height:2px;background:rgba(120,40,0,.35);box-shadow:0 8px 0 rgba(120,40,0,.35),0 16px 0 rgba(120,40,0,.35);}
.bamboo{position:absolute;bottom:60px;width:8px;border-radius:4px;background:linear-gradient(90deg,#2e7d52,#1c5236);opacity:.55;}

/* hanging scroll with kanji */
.scroll{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:150px;
  display:flex;flex-direction:column;align-items:center;
  z-index:4;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.4));
  animation:swayScroll 5s ease-in-out infinite;
}
.scroll__cord{width:2px;height:14px;background:rgba(255,255,255,.35);}
.scroll__rod{
  width:160px;height:13px;border-radius:7px;
  background:linear-gradient(180deg,#6b4a2a,#3f2a16);
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.scroll__rod--bot{background:linear-gradient(180deg,#5a3e23,#2e1d10);}
.scroll__paper{
  width:130px;min-height:138px;
  margin:-1px 0;
  background:linear-gradient(180deg,#fdf6e3,#f3e7c6);
  border-left:3px solid #c9462f;border-right:3px solid #c9462f;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.scroll__paper::before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:22px;height:22px;border-radius:50%;
  border:2px solid #c9462f;opacity:.55;
}
.scroll__kanji{
  font-family:"Yuji Syuku", serif;
  font-size:88px;color:#221a12;line-height:1;
  margin-top:6px;
  animation:kanjiPop .5s cubic-bezier(.2,1.5,.4,1);
}

/* ================= NINJA MASCOT ================= */
.ninja{position:absolute;bottom:14px;left:24px;width:128px;height:158px;z-index:6;animation:bob 2.6s ease-in-out infinite;}
.ninja.celebrate{animation:celebrate .8s cubic-bezier(.3,1.4,.5,1);}
.ninja.wrong{animation:wobble .6s ease;}

.ninja__shadow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:84px;height:16px;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(3px);}

.ninja__body{
  position:absolute;bottom:14px;left:26px;width:76px;height:70px;
  border-radius:38px 38px 22px 22px;
  background:linear-gradient(160deg,var(--suit,#4caf50),var(--suit-dk,#2e7d32));
  box-shadow:inset -6px -8px 0 rgba(0,0,0,.18);
}
.ninja__belt{position:absolute;bottom:34px;left:22px;width:84px;height:11px;border-radius:6px;background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));box-shadow:0 1px 3px rgba(0,0,0,.3);}
.ninja__knot{position:absolute;bottom:30px;left:58px;width:16px;height:16px;border-radius:5px;background:var(--gold-deep);transform:rotate(45deg);}
.ninja__arm{position:absolute;width:24px;height:30px;border-radius:14px;background:linear-gradient(160deg,var(--suit,#4caf50),var(--suit-dk,#2e7d32));bottom:34px;}
.ninja__arm--l{left:16px;transform:rotate(12deg);}
.ninja__arm--r{right:16px;transform:rotate(-12deg);transform-origin:bottom;}
.ninja.celebrate .ninja__arm--r{animation:armUp .8s ease;}

.ninja__head{
  position:absolute;top:6px;left:18px;width:92px;height:88px;
  border-radius:48% 48% 44% 44%;
  background:linear-gradient(165deg,var(--suit,#4caf50),var(--suit-dk,#2e7d32));
  box-shadow:inset -7px -9px 0 rgba(0,0,0,.16), 0 5px 12px rgba(0,0,0,.32);
}
.ninja__band{
  position:absolute;top:38px;left:6px;width:80px;height:26px;
  background:linear-gradient(180deg,#ffe9c9,#ffd6a0);
  border-radius:14px;
}
.ninja__eye{
  position:absolute;top:44px;width:15px;height:17px;border-radius:50%;
  background:#fff;overflow:hidden;
  animation:blink 4.2s infinite;
}
.ninja__eye::after{content:"";position:absolute;top:4px;left:3px;width:8px;height:9px;border-radius:50%;background:#241a3a;}
.ninja__eye::before{content:"";position:absolute;top:5px;left:8px;width:3px;height:3px;border-radius:50%;background:#fff;z-index:2;}
.ninja__eye--l{left:30px;}
.ninja__eye--r{left:52px;}
.ninja__brow{position:absolute;top:36px;width:16px;height:5px;border-radius:3px;background:#241a3a;}
.ninja__brow--l{left:29px;transform:rotate(9deg);}
.ninja__brow--r{left:51px;transform:rotate(-9deg);}

.ninja__headband{
  position:absolute;top:30px;left:8px;width:80px;height:13px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));
  border-radius:4px;z-index:3;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.ninja__tail{position:absolute;left:-2px;width:30px;height:9px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft));border-radius:3px;transform-origin:right center;}
.ninja__tail--1{top:30px;animation:flutter 1.8s ease-in-out infinite;}
.ninja__tail--2{top:40px;width:24px;animation:flutter 1.8s ease-in-out infinite .25s;}

/* speech bubble */
.bubble{
  position:absolute;bottom:122px;left:128px;z-index:7;
  background:#fff;color:var(--ink);
  padding:8px 13px;border-radius:14px;
  font-family:"Mochiy Pop One";font-size:13px;
  box-shadow:0 6px 14px rgba(0,0,0,.3);
  animation:popIn .35s cubic-bezier(.2,1.5,.4,1);
  white-space:nowrap;
}
.bubble::after{content:"";position:absolute;bottom:-7px;left:14px;border:7px solid transparent;border-top-color:#fff;}
.bubble.good{color:var(--good-deep);}
.bubble.bad{color:var(--bad);}

/* ================= QUIZ PANEL (lower) ================= */
.quiz{
  position:relative;z-index:20;
  background:linear-gradient(180deg,#ffffff,var(--panel-tint));
  border-radius:30px 30px 0 0;
  margin-top:-14px;
  padding:18px 16px 22px;
  box-shadow:0 -10px 30px rgba(20,8,50,.32);
  flex:none;
}
.quiz__grip{width:44px;height:5px;border-radius:3px;background:#e3dcf2;margin:0 auto 12px;}
.modetabs{display:flex;gap:7px;background:#efe8fb;border-radius:15px;padding:5px;margin-bottom:13px;}
.mtab{
  flex:1;border:none;cursor:pointer;border-radius:11px;padding:11px 6px;
  font-family:"Mochiy Pop One";font-size:15px;color:var(--ink-soft);
  background:transparent;transition:background .15s,color .15s;
}
.mtab.on{background:#fff;color:var(--purple-deep);box-shadow:0 2px 7px rgba(60,28,125,.13);}
.trace.compact .wd__padwrap{width:208px;height:208px;}
.trace.compact .wd__pad{width:208px;height:208px;}

/* かきモード — パネルを大きく、シーンを圧縮 */
.quiz--write{padding-top:14px;}
.quiz--write .wd__padwrap{width:100%;max-width:280px;height:280px;}
.quiz--write .wd__pad{width:100%;height:280px;}
.game.write-mode .scene{max-height:200px;}
.trace.compact .wd__fb{margin:9px 0 6px;min-height:18px;}
.trace.compact .wd__dots{margin-bottom:11px;}
.quiz__q{
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--ink);font-weight:800;font-size:17px;margin-bottom:4px;
}
.quiz__q .mini{
  font-family:"Yuji Syuku",serif;font-size:24px;
  background:#f0eafc;border:2px solid #e2d6fb;border-radius:10px;
  padding:0 9px;line-height:1.5;
}
.quiz__hint{text-align:center;color:var(--ink-soft);font-size:12px;margin-bottom:14px;font-weight:600;}

.opts{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.opt{
  position:relative;cursor:pointer;border:none;
  font-family:"Zen Maru Gothic";font-weight:900;
  font-size:var(--opt-fs);color:var(--ink);
  background:#fff;
  border:2.5px solid #e6ddf7;
  border-radius:18px;
  padding:16px 8px 18px;
  box-shadow:0 4px 0 #d9cdf0;
  transition:transform .1s, box-shadow .1s, background .15s, border-color .15s;
}
.opt:hover{border-color:var(--purple-lt);}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 #d9cdf0;}
.opt__key{
  position:absolute;top:8px;left:10px;
  font-family:"Mochiy Pop One";font-size:11px;color:#b9a8e0;
}
.opt.correct{
  background:linear-gradient(180deg,#e8fbf1,#d2f6e3);
  border-color:var(--good);color:var(--good-deep);
  box-shadow:0 4px 0 var(--good-deep);
}
.opt.wrong{
  background:linear-gradient(180deg,#fdeef1,#fbdde4);
  border-color:var(--bad);color:#c93a59;
  box-shadow:0 4px 0 #d24a68;
  animation:wobble .45s ease;
}
.opt.dim{opacity:.45;}
.opt__mark{
  position:absolute;top:7px;right:9px;font-size:18px;
  animation:popIn .3s cubic-bezier(.2,1.6,.4,1);
}
.opt__stem{color:inherit;}
.opt__okuri{color:var(--gold);opacity:0.85;}

.quiz__foot{margin-top:14px;display:flex;align-items:center;gap:10px;min-height:52px;}
.next{
  flex:1;border:none;cursor:pointer;
  font-family:"Mochiy Pop One";font-size:18px;color:#fff;
  background:linear-gradient(180deg,var(--purple-lt),var(--purple));
  border-radius:16px;padding:16px;
  box-shadow:0 5px 0 var(--purple-deep);
  transition:transform .1s, box-shadow .1s;
  animation:popIn .3s ease;
}
.next:active{transform:translateY(4px);box-shadow:0 1px 0 var(--purple-deep);}
.btn-ghost{
  border:none;cursor:pointer;flex:none;
  font-family:"Zen Maru Gothic";font-weight:800;font-size:14px;color:var(--purple);
  background:#f1ebfd;border-radius:14px;padding:15px 16px;
}
.foot-tip{flex:1;text-align:center;color:var(--ink-soft);font-size:13px;font-weight:700;}

/* gain float */
.gain{
  position:absolute;left:50%;top:96px;transform:translateX(-50%);
  font-family:"Mochiy Pop One";font-size:22px;color:var(--gold-deep);
  text-shadow:0 2px 0 #fff;
  animation:gainFloat 1s ease forwards;pointer-events:none;z-index:40;
}

/* ================= LEVEL-UP BANNER ================= */
.levelup{
  position:absolute;inset:0;z-index:60;
  background:radial-gradient(circle at 50% 40%, rgba(76,29,149,.6), rgba(10,4,30,.86));
  backdrop-filter:blur(2px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.levelup__burst{
  font-family:"Mochiy Pop One";font-size:13px;letter-spacing:.3em;color:var(--gold-soft);
  animation:popIn .4s ease;
}
.levelup__big{
  font-family:"Mochiy Pop One";font-size:46px;color:#fff;
  text-shadow:0 0 22px rgba(255,215,0,.7), 0 4px 0 var(--purple-deep);
  animation:popIn .5s cubic-bezier(.2,1.6,.4,1);
}
.levelup__rank{
  margin-top:10px;padding:8px 20px;border-radius:999px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));
  color:#5a3a08;font-family:"Mochiy Pop One";font-size:18px;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.levelup__tap{margin-top:24px;color:rgba(255,255,255,.7);font-size:13px;font-weight:700;animation:pulse 1.4s infinite;}
.ray{position:absolute;left:50%;top:40%;width:3px;height:200px;background:linear-gradient(rgba(255,215,0,.5),transparent);transform-origin:top center;animation:spinRays 8s linear infinite;}

/* confetti */
.confetti{position:absolute;width:9px;height:14px;border-radius:2px;top:-20px;animation:confFall 2.4s linear forwards;z-index:50;}

/* ================= TREASURE MODAL ================= */
.modal-bg{
  position:absolute;inset:0;z-index:70;
  background:rgba(12,5,30,.6);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:22px;
}
.modal{
  width:100%;background:linear-gradient(180deg,#fff,var(--panel-tint));
  border-radius:26px;padding:20px 18px 22px;color:var(--ink);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  animation:popIn .35s cubic-bezier(.2,1.4,.4,1);
  position:relative;
}
.modal__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:none;cursor:pointer;border-radius:50%;background:#efe8fb;color:var(--ink-soft);font-size:18px;font-weight:800;}
.modal__title{display:flex;align-items:center;gap:8px;font-family:"Mochiy Pop One";font-size:20px;color:var(--purple-deep);margin-bottom:3px;}
.modal__sub{font-size:13px;color:var(--ink-soft);font-weight:700;margin-bottom:16px;}

.chest{
  width:118px;height:96px;margin:6px auto 16px;position:relative;
  animation:bob 2.4s ease-in-out infinite;
}
.chest__lid{position:absolute;top:6px;left:9px;width:100px;height:40px;border-radius:24px 24px 0 0;background:linear-gradient(180deg,#9a5a22,#6e3c14);border-bottom:4px solid #4d2a0d;}
.chest__box{position:absolute;bottom:6px;left:9px;width:100px;height:50px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#7a4419,#5a300f);}
.chest__band{position:absolute;bottom:6px;left:52px;width:14px;height:84px;background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));}
.chest__lock{position:absolute;top:42px;left:50px;width:18px;height:18px;border-radius:5px;background:var(--gold);border:2px solid #b9810f;z-index:2;}
.chest__glow{position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle, rgba(255,215,0,.4),transparent 70%);animation:pulse 2s infinite;}

.mission{
  background:#fff;border:2px solid #efe6fc;border-radius:16px;
  padding:14px;margin-bottom:11px;display:flex;align-items:center;gap:12px;
}
.mission__ic{width:46px;height:46px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px;background:#f3edfd;}
.mission__body{flex:1;min-width:0;}
.mission__name{font-weight:800;font-size:14.5px;color:var(--ink);margin-bottom:6px;}
.mission__bar{height:10px;border-radius:5px;background:#eee6fa;overflow:hidden;}
.mission__bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--purple-lt),var(--purple));}
.mission__bar.gold i{background:linear-gradient(90deg,var(--gold-deep),var(--gold));}
.mission__pct{font-family:"Mochiy Pop One";font-size:12px;color:var(--ink-soft);margin-top:5px;}
.mission__reward{flex:none;text-align:center;font-family:"Mochiy Pop One";font-size:13px;color:var(--gold-deep);}
.mission.done{background:linear-gradient(180deg,#eafaf1,#d8f5e6);border-color:#bfe9d3;}
.modal__claim{
  width:100%;margin-top:6px;border:none;cursor:pointer;
  font-family:"Mochiy Pop One";font-size:17px;color:#fff;
  background:linear-gradient(180deg,var(--gold-deep),#e58e12);
  border-radius:16px;padding:15px;box-shadow:0 5px 0 #b9810f;
}

/* ================= KEYFRAMES ================= */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes bobTreasure{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes flutter{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(8deg)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes float{0%,100%{transform:translate(0,0);opacity:.5}50%{transform:translate(14px,-18px);opacity:1}}
@keyframes swing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes swayScroll{0%,100%{transform:translateX(-50%) rotate(-1deg)}50%{transform:translateX(-50%) rotate(1deg)}}
@keyframes sheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(260%)}}
@keyframes kanjiPop{0%{transform:scale(.55) rotate(-8deg)}60%{transform:scale(1.08)}100%{transform:scale(1) rotate(0)}}
@keyframes celebrate{0%{transform:translateY(0)}30%{transform:translateY(-26px) rotate(-6deg) scale(1.04)}55%{transform:translateY(0) rotate(3deg)}75%{transform:translateY(-10px)}100%{transform:translateY(0)}}
@keyframes wobble{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px) rotate(-4deg)}75%{transform:translateX(7px) rotate(4deg)}}
@keyframes armUp{0%,100%{transform:rotate(-12deg)}40%,70%{transform:rotate(-150deg)}}
@keyframes popIn{0%{transform:scale(.6)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes gainFloat{0%{transform:translate(-50%,0);opacity:0}20%{opacity:1}100%{transform:translate(-50%,-46px);opacity:0}}
@keyframes spinRays{to{transform:rotate(360deg)}}
@keyframes confFall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(620px) rotate(540deg);opacity:0}}
@keyframes pulseTip{0%,100%{opacity:.6}50%{opacity:1}}

/* ================= GRADE PILL + REVIEW BUTTON ================= */
.gpill{
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  padding:7px 12px 7px 13px;cursor:pointer;border:none;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border:1.5px solid rgba(255,255,255,.22);
  border-radius:999px;color:#fff;
  font-family:"Mochiy Pop One";font-size:14px;
  backdrop-filter:blur(6px);
}
.gpill small{font-size:9px;color:var(--gold-soft);font-weight:700;}
.gpill .sw{font-size:11px;opacity:.7;}
.icbtn{
  position:relative;width:46px;height:46px;flex:none;border:none;cursor:pointer;
  border-radius:15px;font-size:21px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border:1.5px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s;
}
.icbtn:active{transform:scale(.92);}
.icbtn__badge{
  position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 4px;
  background:var(--bad);border:2px solid #1b0f3a;border-radius:999px;
  font-family:"Mochiy Pop One";font-size:10px;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.rank-line{display:flex;align-items:center;gap:8px;}
.rank-line b{font-size:13px;color:#fff;font-weight:800;}
.rank-line .strk{font-size:11px;color:var(--gold-soft);font-weight:800;}

/* quiz "write" button */
.opt.dim{opacity:.45;}
.btn-write{
  border:none;cursor:pointer;flex:none;white-space:nowrap;
  font-family:"Mochiy Pop One";font-size:15px;color:#fff;
  background:linear-gradient(180deg,#3fcf8e,#16a563);
  border-radius:16px;padding:15px 16px;
  box-shadow:0 5px 0 #0d7a47;
  transition:transform .1s, box-shadow .1s;
}
.btn-write.wide{flex:1;}
.btn-write:active{transform:translateY(4px);box-shadow:0 1px 0 #0d7a47;}

/* ================= WRITE DOJO (stroke order + tracing) ================= */
.wd{
  width:100%;max-width:340px;
  background:linear-gradient(180deg,#fff,var(--panel-tint));
  border-radius:26px;padding:16px 16px 18px;color:var(--ink);
  box-shadow:0 20px 50px rgba(0,0,0,.5);position:relative;
  animation:popIn .35s cubic-bezier(.2,1.4,.4,1);
}
.wd__head{display:flex;flex-direction:column;align-items:center;margin-bottom:10px;}
.wd__title{font-family:"Mochiy Pop One";font-size:18px;color:var(--purple-deep);}
.wd__yomi{font-family:"Zen Maru Gothic";font-weight:800;font-size:13px;color:var(--ink-soft);}
.wd__padwrap{position:relative;width:264px;height:264px;margin:0 auto;}
.wd__pad{
  width:264px;height:264px;display:block;
  background:
    repeating-linear-gradient(0deg,transparent 0 33%, #f4eefb 33% calc(33% + 1px)),
    #fff;
  border-radius:18px;border:2px solid #ece3fb;
  touch-action:none;cursor:crosshair;
  box-shadow:inset 0 2px 8px rgba(60,28,125,.05);
}
.wd__frame{fill:none;stroke:#f0e9fc;stroke-width:1.5;}
.wd__grid{stroke:#e7ddf7;stroke-width:.7;stroke-dasharray:3 4;}
.wd__ink{fill:none;stroke:var(--purple);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.wd__tmpl{fill:none;stroke:#ded2f2;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;}
.wd__tmpl.cur{stroke:#bfa4ee;stroke-dasharray:2.5 4;}
.wd__user{fill:none;stroke:var(--gold-deep);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.95;}
.wd__startdot{fill:var(--gold);stroke:#fff;stroke-width:1.2;animation:pulse 1.1s infinite;}
.wd__startnum{fill:#5a3a08;font-family:"Mochiy Pop One";font-size:6px;text-anchor:middle;}
.wd__clear{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"Mochiy Pop One";font-size:30px;color:var(--good-deep);
  background:rgba(255,255,255,.55);border-radius:18px;
  animation:popIn .4s cubic-bezier(.2,1.6,.4,1);pointer-events:none;
}
.wd__fb{
  text-align:center;font-weight:800;font-size:14px;margin:11px 0 8px;
  color:var(--ink-soft);min-height:20px;
}
.wd__fb[data-ok="true"]{color:var(--good-deep);}
.wd__fb[data-ok="false"]{color:var(--bad);}
.wd__dots{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:13px;}
.wd__dot{width:9px;height:9px;border-radius:50%;background:#e3dcf2;transition:background .2s;}
.wd__dot.on{background:var(--purple);}
.wd__dot.now{background:var(--gold);box-shadow:0 0 0 3px rgba(255,215,0,.3);}
.wd__foot{display:flex;gap:9px;align-items:center;justify-content:center;}
.wd__foot .next{flex:none;padding:14px 22px;}

/* ================= REVIEW (修行) MODAL ================= */
.rv__title{display:flex;align-items:center;gap:8px;font-family:"Mochiy Pop One";font-size:19px;color:var(--purple-deep);margin-bottom:2px;}
.rv__sub{font-size:12.5px;color:var(--ink-soft);font-weight:700;margin-bottom:14px;}
.rv__empty{text-align:center;color:var(--ink-soft);font-weight:700;font-size:14px;padding:24px 0;}
.rv__empty .big{font-size:40px;display:block;margin-bottom:8px;}
.rv__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px;max-height:230px;overflow:auto;}
.rv__card{
  border:2px solid #efe6fc;border-radius:14px;background:#fff;
  padding:8px 4px 7px;text-align:center;cursor:pointer;
  transition:transform .1s,border-color .15s;
}
.rv__card:active{transform:scale(.94);}
.rv__card:hover{border-color:var(--purple-lt);}
.rv__k{font-family:"Yuji Syuku",serif;font-size:28px;color:var(--ink);line-height:1.1;}
.rv__y{font-size:10px;color:var(--ink-soft);font-weight:700;margin-top:2px;}
.rv__go{
  width:100%;border:none;cursor:pointer;
  font-family:"Mochiy Pop One";font-size:17px;color:#fff;
  background:linear-gradient(180deg,var(--purple-lt),var(--purple));
  border-radius:16px;padding:15px;box-shadow:0 5px 0 var(--purple-deep);
}

/* review-mode banner on main screen */
.rvbanner{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:5px 14px;margin:2px 16px 6px;border-radius:999px;
  background:linear-gradient(180deg,#ff8aa6,#ef5a7a);
  color:#fff;font-family:"Mochiy Pop One";font-size:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.rvbanner button{border:none;background:rgba(255,255,255,.3);color:#fff;border-radius:999px;width:20px;height:20px;cursor:pointer;font-size:11px;}

@keyframes wd-draw{to{stroke-dashoffset:0;}}

/* ================= WEAPONS ================= */
.wpn{position:relative;width:100%;height:100%;}
/* shuriken (4-point ninja star) */
.wpn.w-shuriken::before, .wpn.w-flame::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,#eaf0f7,#8b95a5);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
.wpn.w-shuriken::after, .wpn.w-flame::after{
  content:"";position:absolute;left:41%;top:41%;width:18%;height:18%;
  border-radius:50%;background:#3a2a5e;
}
.wpn.w-flame::before{
  background:linear-gradient(135deg,#ffe08a,#ff7a1a);
  filter:drop-shadow(0 0 4px rgba(255,140,30,.85));
}
.wpn.w-flame::after{background:#7a2600;}
/* katana */
.wpn.w-katana .blade{position:absolute;left:6%;top:48%;width:72%;height:10%;border-radius:3px;
  background:linear-gradient(90deg,#f3f7fc,#aab4c2);transform:rotate(-34deg);transform-origin:left center;}
.wpn.w-katana .guard{position:absolute;left:58%;top:42%;width:7%;height:26%;border-radius:2px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));transform:rotate(-34deg);}
.wpn.w-katana .grip{position:absolute;left:60%;top:50%;width:30%;height:9%;border-radius:3px;
  background:#3a2a1a;transform:rotate(-34deg);transform-origin:left center;}
/* kunai */
.wpn.w-kunai .blade{position:absolute;left:37%;top:30%;width:26%;height:56%;
  background:linear-gradient(135deg,#f3f7fc,#8b95a5);clip-path:polygon(50% 100%,0 28%,50% 0,100% 28%);}
.wpn.w-kunai .grip{position:absolute;left:45%;top:12%;width:10%;height:24%;border-radius:2px;background:#3a2a1a;}
.wpn.w-kunai .ring{position:absolute;left:39%;top:2%;width:22%;height:19%;border:2.5px solid #6b5a3a;border-radius:50%;}
.wpn.w-kibo::before{content:'';position:absolute;left:46%;top:5%;width:8%;height:88%;border-radius:4px;background:linear-gradient(180deg,#a0714a,#6b4726);}

.wpn-slot{width:34px;height:34px;position:relative;flex:none;}
.wpn-slot.locked{filter:grayscale(1) brightness(.7) opacity(.5);}
.wpn-reveal{width:96px;height:96px;position:relative;margin:6px auto 4px;animation:bob 2.2s ease-in-out infinite;}
.levelup--top{z-index:90;}

/* mission claim / owned */
.mission__claim{
  flex:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:"Mochiy Pop One";font-size:11px;color:#5a3a08;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));
  border-radius:13px;padding:7px 9px;box-shadow:0 4px 0 #b9810f;
  animation:pulse 1.3s infinite;
}
.mission__claim:active{transform:translateY(3px);box-shadow:0 1px 0 #b9810f;}
.mission__got{flex:none;text-align:center;font-family:"Mochiy Pop One";font-size:11px;color:var(--good-deep);line-height:1.2;}
.mission.claimed{opacity:0.6;}
.mission__xp{flex:none;width:44px;text-align:center;font-family:"Mochiy Pop One";font-size:13px;color:var(--gold);font-weight:700;}
.mission__xp.locked{opacity:0.35;}

/* armory */
.arm__head{display:flex;align-items:center;justify-content:space-between;margin:16px 2px 9px;}
.arm__title{font-family:"Mochiy Pop One";font-size:14px;color:var(--purple-deep);}
.arm__power{font-family:"Mochiy Pop One";font-size:12px;color:#fff;background:linear-gradient(180deg,var(--purple-lt),var(--purple));padding:4px 11px;border-radius:999px;}
.arm__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;}
.arm__cell{
  position:relative;border:2px solid #efe6fc;border-radius:14px;background:#fff;cursor:pointer;
  padding:9px 3px 7px;display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .1s,border-color .15s;
}
.arm__cell.has:active{transform:scale(.93);}
.arm__cell.lock{cursor:default;background:#f4f0fb;}
.arm__cell.eq{border-color:var(--gold-deep);background:linear-gradient(180deg,#fff,#fff6df);box-shadow:0 0 0 2px rgba(255,215,0,.3);}
.arm__ic{width:38px;height:38px;position:relative;}
.arm__cell.lock .arm__ic{filter:grayscale(1) brightness(.55) opacity(.45);}
.arm__name{font-size:9px;font-weight:800;color:var(--ink-soft);text-align:center;line-height:1.1;}
.arm__eqtag{position:absolute;top:-7px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:"Mochiy Pop One";font-size:8px;color:#5a3a08;background:var(--gold);padding:1px 6px;border-radius:999px;}
.arm__lockic{position:absolute;top:6px;right:6px;font-size:11px;}

/* ninja equipped weapon */
.ninja__weapon{position:absolute;right:-4px;bottom:30px;width:42px;height:42px;z-index:8;
  transform:rotate(20deg);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
.ninja.celebrate .ninja__weapon{animation:flutter .6s ease;}
.wpn.w-shuriken, .ninja__weapon .wpn.w-flame{animation:none;}
.ninja__weapon .wpn.w-shuriken::before, .ninja__weapon .wpn.w-flame::before{animation:spinRays 3s linear infinite;}

/* ================= BATTLE SYSTEM ================= */

/* challenge gauge strip — inside quiz panel */
.gauge-strip{
  display:flex;align-items:center;gap:8px;
  padding:4px 12px 8px;min-height:36px;
}
.gauge-strip--ready{justify-content:center;flex-wrap:wrap;gap:6px;}
.gauge-hint{font-size:11px;font-family:"Mochiy Pop One";color:var(--gold);white-space:nowrap;}
.gauge-bar{
  flex:1;height:10px;border-radius:5px;
  background:rgba(100,80,160,0.25);overflow:hidden;
  border:1.5px solid rgba(180,160,220,0.3);
}
.gauge-fill{
  height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--purple-lt),var(--gold));
  transition:width .4s ease;
}
.gauge-enemy-preview{font-size:18px;line-height:1;}
.gauge-enemy-label{font-size:13px;font-family:"Mochiy Pop One";color:#fff;white-space:nowrap;}
.challenge-btn{
  background:linear-gradient(135deg,#ff6b35,#ff3d71);
  color:#fff;font-family:"Mochiy Pop One";font-size:15px;
  border:none;border-radius:20px;padding:7px 18px;
  box-shadow:0 4px 0 #c4220e, 0 0 16px rgba(255,80,50,.5);
  cursor:pointer;animation:pulseBtn 1.2s ease-in-out infinite;
  white-space:nowrap;
}
.challenge-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #c4220e;}
.boss-now-btn{
  background:linear-gradient(135deg,#7c3aed,#9b1d9b);
  color:#fff;font-family:"Mochiy Pop One";font-size:13px;
  border:none;border-radius:16px;padding:5px 12px;
  box-shadow:0 3px 0 #4a1580;cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.boss-now-btn--text{
  font-size:15px;padding:8px 20px;border-radius:20px;
  box-shadow:0 4px 0 #4a1580;
}
.boss-now-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #4a1580;}
.ugauge__boss-remain{
  font-size:12px;font-weight:900;font-family:"Mochiy Pop One";
  color:#e040fb;white-space:nowrap;flex-shrink:0;
}
@keyframes pulseBtn{0%,100%{box-shadow:0 4px 0 #c4220e,0 0 16px rgba(255,80,50,.4)}50%{box-shadow:0 4px 0 #c4220e,0 0 28px rgba(255,80,50,.8)}}

/* battle scene — fills the .scene area */
.battle-scene{
  display:flex;flex-direction:column;align-items:center;
  justify-content:space-evenly;padding:6px 16px 4px;
  height:100%;
}
.battle__enemy-area{
  display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;
}
.battle__role{font-size:11px;font-family:"Mochiy Pop One";letter-spacing:.5px;}
.battle__sprite{
  font-size:56px;line-height:1.1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
  animation:enemyFloat 2.5s ease-in-out infinite;
}
@keyframes enemyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.battle__ename{font-size:12px;color:rgba(255,255,255,0.85);font-family:"Zen Maru Gothic";font-weight:700;}
.battle__hprow{display:flex;align-items:center;gap:6px;width:100%;margin-top:2px;}
.battle__hp-icon{font-size:14px;line-height:1;}
.battle__hptrack{flex:1;height:11px;border-radius:6px;background:rgba(0,0,0,.3);overflow:hidden;}
.battle__hpfill{height:100%;border-radius:6px;transition:width .4s ease;background:linear-gradient(90deg,#ef5a7a,#ff8a80);}
.battle__hpfill.low{background:linear-gradient(90deg,#ff1744,#ff5252);animation:hpLow .6s ease-in-out infinite;}
@keyframes hpLow{0%,100%{opacity:1}50%{opacity:.5}}
.battle__hpfill--enemy{background:linear-gradient(90deg,#43a047,#76c442);}
.battle__hpnum{font-size:11px;font-family:"Mochiy Pop One";color:#fff;white-space:nowrap;min-width:28px;text-align:right;}
.battle__vs{font-size:16px;opacity:0.7;letter-spacing:3px;}
.battle__player-area{
  display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;
}
.battle__ninja-wrap{
  width:110px;height:110px;position:relative;
  transform:scaleX(-1);
}
.battle__ninja-wrap .ninja{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
}
/* shudder on hit */
.battle-scene.hit-enemy .battle__enemy-area{animation:shudder .35s ease;}
.battle-scene.hit-player .battle__player-area{animation:shudder .35s ease;}
@keyframes shudder{
  0%{transform:translateX(0)}20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}100%{transform:translateX(0)}
}

/* battle start splash */
.battle-start-splash{
  position:absolute;inset:0;z-index:70;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.75);
  animation:fadeIn .2s ease;
}
.battle-start-text{
  font-family:"Mochiy Pop One";font-size:32px;color:#fff;
  text-shadow:0 0 20px var(--gold), 0 0 40px #ff6b35;
  animation:battleStartPop .4s cubic-bezier(.2,1.6,.4,1) both,
            battleStartFade 1.4s ease forwards;
}
@keyframes battleStartPop{
  0%{transform:scale(0.3);opacity:0}
  60%{transform:scale(1.15)}
  100%{transform:scale(1);opacity:1}
}
@keyframes battleStartFade{
  0%,70%{opacity:1}
  100%{opacity:0}
}

/* battle result overlay */
.battle-result{
  position:absolute;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;
  background:rgba(0,0,0,.7);
  animation:fadeIn .35s ease;
}
.battle-result__title{
  font-family:"Mochiy Pop One";font-size:38px;
  text-shadow:0 0 20px currentColor;
  animation:popIn .5s cubic-bezier(.2,1.4,.4,1);
}
.battle-result__title.victory{color:var(--gold);}
.battle-result__title.defeat{color:#ef5a7a;}
.battle-result__title.draw{color:#7ec8e3;}
.battle-result__xp{font-family:"Mochiy Pop One";font-size:20px;color:#fff;}
.battle-result__sub{font-size:14px;color:rgba(255,255,255,.75);text-align:center;}
.battle-result__sub--serif{font-size:18px;color:#fff;font-family:"Mochiy Pop One";}
.battle-result__btn{
  font-family:"Mochiy Pop One";font-size:16px;color:#fff;
  background:var(--purple);border:none;border-radius:20px;
  padding:10px 28px;box-shadow:0 4px 0 var(--purple-deep);
  cursor:pointer;animation:popIn .5s .2s both cubic-bezier(.2,1.4,.4,1);
}
.battle-result__btn--ghost{
  background:transparent;border:2px solid rgba(255,255,255,.4);
  box-shadow:none;color:rgba(255,255,255,.7);font-size:13px;
}

/* 全クリア進捗バー */
.progress-strip{
  display:flex;align-items:center;gap:6px;
  padding:4px 12px 2px;
}
.progress-strip__label{font-size:10px;color:var(--ink-soft);white-space:nowrap;flex-shrink:0;}
.progress-strip__bar{
  flex:1;height:6px;border-radius:999px;
  background:rgba(0,0,0,.08);overflow:hidden;
}
.progress-strip__fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,#22b573,#4cde9f);
  transition:width .4s ease;
}
.progress-strip__count{font-size:11px;font-weight:700;color:var(--ink-soft);white-space:nowrap;flex-shrink:0;}
.progress-strip__exit{border:none;background:rgba(0,0,0,.08);color:var(--ink-soft);border-radius:999px;width:18px;height:18px;font-size:10px;cursor:pointer;flex-shrink:0;padding:0;line-height:18px;}

/* battle quiz panel */
.quiz--battle .modetabs{display:none;}
.battle-quit-btn{
  display:block;width:100%;background:transparent;border:1.5px solid rgba(255,255,255,.25);
  border-radius:8px;color:rgba(255,255,255,.6);font-size:13px;padding:5px;
  cursor:pointer;margin-bottom:6px;
}
.battle-quit-btn:active{background:rgba(255,255,255,.08);}

/* ---- Badge Modal ---- */
.badge-modal{ max-height:80vh; overflow-y:auto; }
.badge-modal__count{ text-align:center; font-size:13px; color:var(--purple-lt); margin:-6px 0 12px; }
.badge-group{ margin-bottom:14px; }
.badge-group__label{
  font-size:11px; font-weight:700; letter-spacing:.06em;
  color:var(--purple-lt); opacity:.7; text-transform:uppercase;
  margin-bottom:6px; padding-left:2px;
}
.badge-group__row{ display:flex; flex-wrap:wrap; gap:8px; }
.badge-cell{
  display:flex; flex-direction:column; align-items:center;
  width:58px; gap:2px; position:relative;
  background:rgba(255,255,255,.05); border-radius:10px;
  padding:8px 4px 6px; border:1.5px solid transparent;
}
.badge-cell.got{ border-color:var(--gold); background:rgba(255,215,0,.08); }
.badge-cell.locked{ opacity:.4; }
.badge-cell__emoji{ font-size:24px; line-height:1; }
.badge-cell__name{ font-size:9px; text-align:center; color:var(--ink); line-height:1.2; word-break:keep-all; }
.badge-cell__desc{ font-size:8px; text-align:center; color:var(--ink-soft); line-height:1.2; margin-top:2px; word-break:keep-all; }
.badge-cell__check{
  position:absolute; top:3px; right:4px;
  font-size:9px; color:var(--gold); font-weight:700;
}

/* Badge toast notification */
.badge-toast{
  position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  background:rgba(20,10,40,.92); border:2px solid var(--gold);
  border-radius:14px; padding:10px 16px;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
  animation:toastIn .4s cubic-bezier(.2,1.4,.4,1) both, toastOut .3s 2.7s ease-in forwards;
  z-index:120; width:max-content; max-width:260px;
}
.badge-toast__emoji{ font-size:28px; flex-shrink:0; }
.badge-toast__title{ font-size:10px; color:var(--gold); font-weight:700; }
.badge-toast__name{ font-size:14px; color:#fff; font-family:"Mochiy Pop One"; }
@keyframes toastIn{ from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes toastOut{ to{opacity:0;transform:translateX(-50%) translateY(-10px)} }

@media (prefers-reduced-motion: reduce){
  .ninja,.lantern,.firefly,.star,.scroll,.chest,.treasure,.mission__claim,.wpn-reveal{animation:none !important;}
  .ninja__weapon .wpn::before{animation:none !important;}
}

/* ===== PlayerSelect ===== */
.ps-bg {
  position: fixed; inset: 0;
  background: linear-gradient(160deg, #1a0a2e 0%, #2d1b5e 50%, #0d1b3e 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.ps-box {
  width: min(90vw, 360px);
  display: flex; flex-direction: column; gap: 16px;
}
.ps-title {
  text-align: center;
  font-size: 24px; font-weight: 900;
  color: #fff; letter-spacing: .05em;
  margin-bottom: 8px;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.ps-card {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 20px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background .15s, transform .12s;
  user-select: none;
}
.ps-card:active { transform: scale(.97); background: rgba(255,255,255,.18); }
.ps-card__ninja {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.ps-card__info { flex: 1; min-width: 0; }
.ps-card__name-row { display: flex; align-items: center; gap: 6px; }
.ps-card__name { color: #fff; font-size: 18px; font-weight: 700; }
.ps-card__edit-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 14px; padding: 2px; opacity: .7;
}
.ps-card__sub { color: rgba(255,255,255,.6); font-size: 13px; margin-top: 2px; }
.ps-card__arrow { color: rgba(255,255,255,.5); font-size: 18px; flex-shrink: 0; }
.ps-card__name-edit { display: flex; }
.ps-card__name-input {
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 8px;
  color: #fff; font-size: 16px; font-weight: 700;
  padding: 3px 8px; width: 100%;
  outline: none;
}

/* ===== KakitoriPanel ===== */
.kakitori { display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 16px; }
.kakitori__label { font-size:12px; color:var(--ink-soft); text-align:center; }
.kakitori__sentence {
  font-size:22px; font-weight:700; color:var(--ink);
  display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center;
  line-height:1.6;
}
.kakitori__sentence--sm { font-size:16px; }
.kakitori__blank {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; border-radius:10px;
  background:var(--accent,#7c3aed); color:#fff;
  border:none; font-size:24px; font-weight:900; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  transition:transform .1s;
}
.kakitori__blank:active { transform:scale(.93); }
.kakitori__blank--active {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; border-radius:8px;
  background:rgba(124,58,237,.15); color:var(--accent,#7c3aed);
  font-size:18px; font-weight:900; border:2px solid var(--accent,#7c3aed);
  cursor:default;
}
.kakitori__hint { font-size:12px; color:var(--ink-soft); }
.kakitori__skip {
  border:none; background:rgba(0,0,0,.07); color:var(--ink-soft);
  border-radius:20px; padding:6px 16px; font-size:13px; cursor:pointer;
  margin-top:4px;
}
.kakitori__result { font-size:20px; font-weight:700; color:#22b573; }

/* ===== Grade Clear Screen ===== */
.grade-clear {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 28px 20px 20px;
  text-align: center; overflow: hidden;
}
.grade-clear__title {
  font-size: 28px; font-weight: 900;
  color: var(--ink);
  font-family: "Mochiy Pop One";
}
.grade-clear__sub {
  font-size: 14px; color: var(--ink-soft); line-height: 1.6;
}
.grade-clear__replay {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #7c3aed, #9b6cf2);
  color: #fff; border: none; border-radius: 16px;
  font-size: 18px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 0 #4c1d95;
  font-family: "Mochiy Pop One";
}
.grade-clear__replay:active { transform: translateY(3px); box-shadow: 0 1px 0 #4c1d95; }
.grade-clear__next {
  background: none; border: none; color: var(--ink-soft);
  font-size: 14px; cursor: pointer; text-decoration: underline;
}

/* ===== お宝ミッション ===== */
.otakara-trigger {
  width: 100%; margin-top: 6px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff; border: none; border-radius: 14px;
  font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 3px 0 #b45309;
  font-family: "Mochiy Pop One";
  animation: otakara-pulse 2s ease-in-out infinite;
}
.otakara-trigger:active { transform: translateY(2px); box-shadow: 0 1px 0 #b45309; }
@keyframes otakara-pulse {
  0%, 100% { box-shadow: 0 3px 0 #b45309, 0 0 0 0 rgba(249,115,22,.4); }
  50%       { box-shadow: 0 3px 0 #b45309, 0 0 0 8px rgba(249,115,22,0); }
}

.otakara-overlay {
  position: absolute; inset: 0; z-index: 120;
  background: linear-gradient(180deg, #1a0a3d 0%, #2d1060 100%);
  display: flex; flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.otakara-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.otakara-header__left { display: flex; align-items: center; gap: 10px; }
.otakara-header__title { font-size: 16px; font-weight: 800; color: #ffd700; font-family: "Mochiy Pop One"; }
.otakara-header__prog {
  background: rgba(255,215,0,.2); color: #ffd700;
  border-radius: 20px; padding: 2px 10px; font-size: 13px; font-weight: 700;
}
.otakara-header__exit {
  background: rgba(255,255,255,.15); border: none; color: #fff;
  border-radius: 20px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}

.otakara-timer-wrap {
  position: relative; height: 28px;
  background: rgba(0,0,0,.3);
  overflow: hidden;
  flex-shrink: 0;
}
.otakara-timer__bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  transition: width .9s linear, background .3s;
  border-radius: 0 4px 4px 0;
}
.otakara-timer__num {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px; font-weight: 900;
  transition: color .3s;
}

/* WritePanel inside otakara gets white text treatment */
.otakara-overlay .quiz__q,
.otakara-overlay .quiz__hint { color: #e0d0ff; }

/* ===== お宝ミッション 結果画面 ===== */
.otakara-result {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 20px; gap: 16px; text-align: center;
}
.otakara-result__icon { font-size: 56px; line-height: 1; }
.otakara-result__title {
  font-size: 26px; font-weight: 900; color: #ffd700;
  font-family: "Mochiy Pop One";
}
.otakara-result__chars {
  display: flex; gap: 16px; justify-content: center;
  background: rgba(255,255,255,.08); border-radius: 16px;
  padding: 12px 24px;
}
.otakara-result__row {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.otakara-result__char { font-size: 28px; font-weight: 900; color: #fff; }
.otakara-result__mark { font-size: 20px; }
.otakara-result__btn {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff; border: none; border-radius: 16px;
  font-size: 18px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 0 #b45309;
  font-family: "Mochiy Pop One";
}
.otakara-result__btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b45309; }

/* ===== 修行バナー ===== */
.review-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(124,58,237,.15), rgba(124,58,237,.05));
  border-left: 3px solid var(--purple);
  border-radius: 0 8px 8px 0;
  margin-bottom: 4px;
}
.review-banner__label {
  font-size: 13px; font-weight: 700; color: var(--purple-lt);
  font-family: "Mochiy Pop One";
}
.review-banner__exit {
  background: rgba(239,90,122,.15); border: 1px solid rgba(239,90,122,.4);
  color: #ef5a7a; border-radius: 20px;
  padding: 4px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.review-banner__exit:active { opacity: .7; }

/* ===== 修行完了トースト ===== */
.review-complete-toast {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #22b573, #149a5d);
  color: #fff; font-size: 22px; font-weight: 900;
  font-family: "Mochiy Pop One";
  padding: 16px 32px; border-radius: 24px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  z-index: 200; pointer-events: none;
  animation: review-toast-in .35s ease-out, review-toast-out .4s ease-in 2.1s forwards;
}
@keyframes review-toast-in {
  from { opacity:0; transform: translate(-50%, -60%) scale(.8); }
  to   { opacity:1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes review-toast-out {
  to { opacity:0; transform: translate(-50%, -40%) scale(.9); }
}

.gauge-fill--boss {
  background: linear-gradient(90deg, #e040fb, #ff4081);
}

/* ===== 統合ゲージ ===== */
.ugauge {
  padding: 6px 12px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.ugauge--ready {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 6px 12px; flex-wrap: wrap;
}
.ugauge--review { background: rgba(239,90,122,.06); border-radius: 10px; }
.ugauge__review-label {
  font-size: 11px; font-family: "Mochiy Pop One"; color: #ef5a7a;
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
}
.ugauge__exit {
  border: none; background: rgba(239,90,122,.15); color: #ef5a7a;
  border-radius: 20px; padding: 2px 10px; font-size: 11px;
  font-weight: 700; cursor: pointer;
}
.ugauge__row {
  display: flex; align-items: center; gap: 6px;
}
.ugauge__tag {
  font-size: 10px; font-weight: 900; font-family: "Mochiy Pop One";
  width: 28px; text-align: center; flex-shrink: 0;
  border-radius: 6px; padding: 1px 3px;
}
.ugauge__tag--read  { background: rgba(100,180,255,.25); color: #5bc0de; }
.ugauge__tag--write { background: rgba(100,220,140,.25); color: #22b573; }
.ugauge__bar {
  flex: 1; height: 9px; border-radius: 5px;
  background: rgba(100,80,160,.2); overflow: hidden;
}
.ugauge__fill { height: 100%; border-radius: 5px; transition: width .4s ease; }
.ugauge__fill--read  { background: linear-gradient(90deg, #5bc0de, #2196f3); }
.ugauge__fill--write { background: linear-gradient(90deg, #22b573, #8bc34a); }
.ugauge__num {
  font-size: 10px; font-weight: 700; color: var(--ink-soft);
  white-space: nowrap; width: 46px; text-align: right; flex-shrink: 0;
}
.ugauge__enemy-row {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.ugauge__boss-row {
  display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap;
}
.ugauge__enemy-bar {
  flex: 1; height: 7px; border-radius: 4px;
  background: rgba(255,180,50,.2); overflow: hidden;
}
.ugauge__enemy-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), #ff9800);
  transition: width .4s ease;
}
.ugauge__enemy-fill--boss {
  background: linear-gradient(90deg, #e040fb, #ff4081);
}
.ugauge__enemy-hint {
  font-size: 10px; font-family: "Mochiy Pop One"; color: var(--gold);
  white-space: nowrap; flex-shrink: 0;
}
.ugauge__enemy-label {
  font-size: 13px; font-family: "Mochiy Pop One"; color: #fff; white-space: nowrap;
}

/* Website layout: the original ninja artwork, with a responsive game surface. */
.scroll{animation:web-sway 5s ease-in-out infinite}.ninja{animation:web-bob 2.6s ease-in-out infinite}.ninja.celebrate{animation:web-celebrate .8s ease}.ninja.wrong{animation:web-wobble .6s ease}
@keyframes web-sway{0%,100%{rotate:-1deg}50%{rotate:1deg}}
@keyframes web-bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes web-celebrate{0%,100%{translate:0 0;rotate:0deg}45%{translate:0 -16px;rotate:-5deg}}
@keyframes web-wobble{0%,100%{translate:0 0}25%{translate:-6px 0}75%{translate:6px 0}}
:root{--purple:#7356cf;--purple-deep:#49318d;--purple-lt:#ae90f5;--gold:#ffda7a;--ink:#302044;--panel-tint:#faf7f2;--ink-soft:#7e718f;color-scheme:light}
body{background:#171426;color:#fff;font-family:'Zen Maru Gothic','Yu Gothic',Meiryo,system-ui,sans-serif;background-image:radial-gradient(ellipse at 12% 0,#37305a 0,transparent 50%),radial-gradient(ellipse at 95% 100%,#252338 0,transparent 45%);}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e5ad3d;outline-offset:4px}button{touch-action:manipulation}a{color:#6548ab}small{font-size:12px}.eyebrow{font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.16em;color:#b6a6d9}.brand-mark{display:inline-grid;place-items:center;width:44px;height:44px;background:#f5d491;color:#39294b;border-radius:14px 4px 14px 4px;font-family:serif;font-size:29px;box-shadow:inset 0 0 0 4px #e6c384}.site-brand{display:flex;align-items:center;gap:14px;font-weight:800;letter-spacing:.17em;font-size:13px}.site-brand small{display:block;letter-spacing:.03em;font-size:10px;font-weight:500;color:#b7abc6;margin-top:4px}
.welcome{position:relative;max-width:1160px;margin:auto;min-height:100svh;padding:34px 48px 20px;overflow:hidden}.welcome__layout{display:grid;grid-template-columns:1.15fr 1fr;gap:76px;align-items:center;margin:52px 0 38px}.welcome__hero> .eyebrow{color:#e0c799;font-size:12px;letter-spacing:.07em}.welcome h1{font-family:'Yu Mincho','Hiragino Mincho ProN',serif;font-size:72px;letter-spacing:.12em;line-height:1.2;margin:20px 0 18px;color:#fff8e9;text-shadow:0 4px 0 #0d092540}.welcome h1 span{display:block;font-family:inherit;font-size:23px;letter-spacing:.21em;color:#e2c991;margin:14px 0}.welcome__intro{color:#cdc4d9;line-height:1.9;font-size:14px}.welcome__art{height:230px;position:relative;margin:4px -5px 20px;overflow:hidden;border-bottom:1px solid #64537a55}.welcome__art .scene{height:230px;width:100%}.welcome__art .moon{width:86px;height:86px;right:65px;top:10px;box-shadow:0 0 55px #efd18430}.welcome__art .scroll{left:68%;top:44px;transform:scale(.75)}.welcome__art .ninja{left:25%;bottom:20px;transform:scale(1.12)}.welcome__art .dojo{opacity:.7}.art-caption{position:absolute;bottom:6px;right:5px;color:#beadd2;font-size:10px;letter-spacing:.06em}.welcome__tags{display:flex;gap:8px;flex-wrap:wrap}.welcome__tags span{font-size:11px;padding:7px 12px;border:1px solid #6a5d7d;border-radius:999px;color:#dfd4eb}.welcome__stars{position:absolute;right:13%;top:9%;color:#c5a067;font-size:26px;pointer-events:none}.welcome__stars span{position:absolute;right:260px;top:130px;font-size:17px}.welcome__stars i{position:absolute;right:-80px;top:520px;font-size:13px}.player-panel{padding:35px 30px 24px;background:linear-gradient(145deg,#302a43,#272237);border:1px solid #65577480;border-radius:25px;box-shadow:0 20px 70px #08061240}.player-panel>.eyebrow{color:#c4addf;font-size:10px}.player-panel h2{font-size:28px;letter-spacing:.06em;margin:12px 0}.player-panel__sub{color:#b4a8c6;font-size:12px;margin-bottom:28px}.player-slot{margin-top:20px}.player-card{display:flex;align-items:center;gap:15px;width:100%;padding:20px 17px;text-align:left;border:1px solid #f1e7fe;background:#fffaf1;color:var(--ink);border-radius:15px;box-shadow:0 5px 0 #baa4c344;transition:transform .15s,background .15s}.player-card:hover{transform:translateY(-3px);background:#fff}.player-avatar{display:grid;place-items:center;font-size:33px;width:57px;height:61px;background:#dfebd4;border-radius:13px;flex-shrink:0}.avatar-2{background:#e5dcf2}.player-card b{font-size:18px}.player-card small{display:block;color:#7d6e8d;margin-top:5px}.player-arrow{margin-left:auto;font-size:23px;color:#72599a}.rename{display:block;margin:7px 0 0 auto;padding:4px 1px;border:0;background:none;color:#c8b9d7;font-size:11px;min-height:30px}.save-note{display:flex;gap:10px;align-items:center;border-top:1px solid #5a4d6e;margin-top:18px;padding-top:15px;font-size:12px;color:#d8ccea}.save-note>span{color:#cdb17c;font-size:24px}.save-note small{font-size:10px;color:#b8abc8}.help-button{border:0;border-radius:10px;padding:12px 0;background:transparent;color:inherit;font-size:12px;width:100%;text-align:center}.player-panel .help-button{color:#e1cee9}.site-footer{text-align:center;color:#9585a7;font-size:11px;padding:8px;letter-spacing:.08em}
.play-page{max-width:1080px;margin:0 auto;padding:24px 36px 16px}.play-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.brand-home{display:flex;align-items:center;gap:12px;border:none;background:none;color:#f9ecda;text-align:left;font-family:serif;font-size:23px;letter-spacing:.12em;padding:0}.brand-home small{display:block;font-family:system-ui,sans-serif;font-size:10px;color:#bfadc9;letter-spacing:.08em;margin-top:2px}.play-tools{display:flex;align-items:center;gap:12px}.player-name{font-size:12px;color:#cabcda;margin-right:4px}.play-tools button{width:40px;height:40px;border-radius:12px;border:1px solid #645974;background:#302a42;color:#eedebf;font-size:22px}.web-game{height:auto;min-height:600px;border:1px solid #655578;border-radius:25px;background:linear-gradient(140deg,#393052,#201b32);overflow:visible;box-shadow:0 20px 65px #05030f40}.web-game .hdr{padding:20px 26px 17px;border-bottom:1px solid #66527470}.hdr__top{gap:14px}.hdr__left,.hdr__center,.hdr__right{flex:1}.hdr__center{flex:.8}.gpill{min-height:45px;white-space:nowrap}.gpill:disabled{opacity:.65}.xp{margin-top:1px}.game-board{display:grid;grid-template-columns:1fr 1fr;gap:0}.scene-side{display:flex;flex-direction:column;min-width:0;padding:24px 24px 20px}.scene-kicker{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.04em;color:#cfbedb}.scene-kicker span:last-child{font-size:10px;color:#a998c0}.scene-side>.scene{min-height:290px;flex:1;overflow:hidden}.scene-side .scroll{top:36px}.scene-side .moon{top:20px;right:20px}.scene-side .ninja{bottom:32px}.web-game.write-mode .scene{max-height:none}.dojo-message{text-align:center;font-size:11px;color:#c6b1d1;margin:14px 0 22px}.journey{background:#1b172d80;border:1px solid #5b4b6f;border-radius:14px;padding:15px 17px}.journey__heading{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:#d8c9e4}.journey__heading>b{font-size:23px;color:#efd394}.journey__heading small{font-size:12px;color:#9688a7}.journey__track{height:6px;background:#443751;border-radius:20px;margin:10px 0}.journey__track i{display:block;height:100%;background:linear-gradient(90deg,#bd91e0,#f3d080);border-radius:20px;transition:width .4s}.journey>span{font-size:10px;color:#a99aba}.web-game .quiz{border-radius:20px;margin:18px 18px 18px 0;padding:25px 23px 20px;box-shadow:0 6px 20px #09051625;background:#fffaf3;color:var(--ink);min-width:0;display:flex;flex-direction:column;min-height:480px}.lesson-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.lesson-heading .eyebrow{color:#9880af;font-size:9px}.lesson-count{font-size:11px;color:#9989ac}.modetabs{background:#f0e9f5;margin-bottom:25px;border-radius:12px}.mtab{font-family:inherit;font-weight:800;font-size:15px;padding:10px 2px}.mtab small{margin-left:8px;font-family:inherit;font-size:9px;opacity:.55}.quiz__q{font-family:inherit;flex-wrap:wrap;font-size:16px}.quiz__hint{font-size:11px;margin:9px 0 19px;color:#9b8b9e}.quiz__q .mini{font-family:'Yu Mincho',serif;font-size:30px;padding:0 11px;background:#f0e8f6}.opts{gap:12px}.opt{font-family:inherit;font-size:24px;min-height:69px;background:#fff;border-radius:13px;border-color:#e3d7ec;box-shadow:0 4px 0 #e8dcef}.opt__key{font-family:inherit;font-size:10px}.opt:hover:not(:disabled){background:#f5effb}.quiz__foot{margin:22px 0 8px;min-height:42px}.foot-tip{font-size:11px;color:#9789a6}.next{font-family:inherit;font-size:14px;font-weight:800;background:#7553b9;border-radius:11px;min-height:44px;box-shadow:0 4px 0 #4c347f}.challenge-card{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding:16px 0 0;border-top:1px dashed #decfe6;color:#a188a5;font-size:11px}.challenge-card b{color:#795699}.challenge-card.ready{color:#755520}.challenge-card.ready b{color:inherit}.challenge-card button{border:0;background:#f4cc72;color:#44314c;border-radius:8px;padding:10px 12px;font-size:11px;font-weight:800;white-space:nowrap}.play-footer{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#b1a3c2;margin-top:12px;padding:0 5px}.play-footer button{background:none;border:0;color:#bcacd0;font-size:11px;padding:10px}.game-toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);z-index:2000;background:#fff6d9;color:#624c62;box-shadow:0 8px 35px #0005;border:1px solid #e6c984;border-radius:14px;padding:16px 25px;max-width:90vw;font-size:14px;text-align:center;pointer-events:none}.web-game .wd__padwrap,.web-game .trace.compact .wd__padwrap{width:248px;height:248px;max-width:100%}.web-game .wd__pad,.web-game .trace.compact .wd__pad{width:100%;height:100%;touch-action:none}.wd__foot{flex-wrap:wrap;gap:8px}.wd__foot button{font-family:inherit;font-size:12px;min-height:40px}.wd__fb{font-family:inherit}.kana-title{text-align:center;font-size:20px;margin:0 0 12px}.trace-error{text-align:center;padding:40px 0}.trace-error button{margin:10px}.text-button{border:0;background:none;color:#7c6595;text-decoration:underline;font-size:12px;min-height:40px}.battle-question{font-size:21px;text-align:center;margin:0 0 20px;color:#6d408c}.battle-writing{text-align:center}.battle-prompt{font-size:14px;line-height:1.6}.answer-feedback{padding:45px 0;font-size:17px;color:#4f8253}.result-card{text-align:center;display:flex;flex-direction:column;gap:14px;padding:20px 5px}.result-card h2{font-size:23px;margin:0;color:#724698}.result-card p{font-size:13px;line-height:1.8;margin:0}.result-icon{font-size:60px}.reward-label{color:#a47429}.result-card .next{margin:5px auto;padding:10px 20px}.battle-scene{height:320px}.review-banner{font-size:12px}.review-banner button{border:0;background:none;color:#7c599c;font-size:11px;text-decoration:underline}
.modal-bg{position:fixed;inset:0;z-index:1000;background:#100d20ba;backdrop-filter:blur(5px);padding:24px;overflow:auto;display:flex;align-items:center;justify-content:center}.modal{position:relative;max-height:calc(100svh - 48px);overflow:auto;width:min(520px,100%);border-radius:21px;background:#fffaf3;color:var(--ink);padding:28px;box-shadow:0 30px 90px #0006}.modal__title{font-family:inherit;font-size:24px;margin:0 25px 24px 0;text-align:left}.modal__x{min-width:36px;min-height:36px;font-family:inherit}.modal p{font-size:14px;line-height:1.8}.modal__claim{font-family:inherit;border-radius:12px;font-size:15px}.modal small{color:#8b7795}.help-copy p{margin:20px 0;line-height:1.9}.help-copy b{color:#75538c}.help-copy a{font-size:12px}.field{display:block;font-size:14px}.field input{width:100%;padding:13px;margin:12px 0;border:1px solid #bca6cd;border-radius:10px}.grade-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grade-choice{display:flex;flex-direction:column;align-items:center;gap:8px;border:2px solid #e6dcef;background:#fff;border-radius:15px;padding:22px 8px;color:#735886}.grade-choice>span{font-family:serif;font-size:36px}.grade-choice.active{border-color:#9776c8;background:#f3ebfd}.grade-choice small{font-size:10px}.review-letters{display:flex;flex-wrap:wrap;gap:9px}.review-letters span{display:grid;place-items:center;width:45px;height:45px;background:#efe6f5;border-radius:10px;font-size:25px}.empty-state{text-align:center;padding:30px 0}.badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.badges-grid .badge-cell{padding:13px 5px;display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center}.badge-cell b{font-size:11px}.badge-cell small{font-size:9px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 0;border-bottom:1px solid #e7dcea;font-size:14px}.setting-row input{width:22px;height:22px;accent-color:#805eb3}.setting-row select{max-width:145px;padding:8px;border-radius:7px;border:1px solid #d5c3e0;background:white;color:#654b7b}.settings-content .settings-hint{font-size:11px;color:#917d9e;line-height:1.9}.settings-action{width:100%;text-align:left;padding:15px;margin:4px 0;background:#f2eaf7;border:1px solid #e6dcee;border-radius:10px;color:#725086;font-size:13px}.settings-action.danger{background:none;color:#b05968;border:0;font-size:11px}.settings-content hr{border:0;border-top:1px solid #e7dcea;margin:20px 0}.boot-error{max-width:500px;margin:20vh auto;padding:24px}.boot-error button{padding:15px}.arm__cell small{margin-top:5px}.arm__cell{min-height:130px}.arm__cell,.badge-cell{font-family:inherit}
@media(min-width:760px){.scene-side .scroll{transform:translateX(-50%) scale(1.13)}.scene-side .ninja{left:24%;transform:scale(1.08)}.scene-side .battle__ninja-wrap .ninja{left:50%;transform:translateX(-50%) scale(.65)}}
@media(max-width:759px){.welcome{padding:22px 22px 16px}.site-brand{font-size:11px}.welcome__layout{grid-template-columns:1fr;gap:20px;max-width:440px;margin:30px auto 20px}.welcome__hero{text-align:center}.welcome h1{font-size:54px;margin:12px 0}.welcome h1 span{font-size:18px;margin:8px 0}.welcome__intro{font-size:12px}.welcome__hero>.eyebrow{font-size:10px}.welcome__art{height:170px;margin:-7px 0 8px}.welcome__art .scene{height:170px}.welcome__art .scroll{top:6px;transform:scale(.58)}.welcome__art .ninja{left:23%;bottom:4px;transform:scale(.8)}.welcome__art .moon{width:56px;height:56px;right:35px;top:6px}.art-caption{display:none}.welcome__tags{justify-content:center}.welcome__tags span{font-size:9px;padding:5px 9px}.player-panel{padding:21px}.player-panel>.eyebrow{font-size:9px}.player-panel h2{font-size:24px;margin:8px 0}.player-panel__sub{margin-bottom:16px;font-size:11px}.player-card{padding:14px 15px}.player-avatar{width:49px;height:52px;font-size:29px}.player-card b{font-size:17px}.player-slot{margin-top:13px}.save-note{margin-top:10px;padding-top:10px}.site-footer{font-size:9px}.play-page{padding:12px 10px 10px;max-width:490px}.play-top{margin:0 4px 12px}.brand-home{font-size:17px;gap:8px}.brand-mark{width:34px;height:36px;font-size:23px}.brand-home small{font-size:8px}.play-tools{gap:6px}.player-name{display:none}.play-tools button{width:36px;height:36px;font-size:20px}.web-game{border-radius:19px;min-height:0}.web-game .hdr{padding:12px 13px 13px}.hdr__top{gap:6px}.hdr__left{gap:6px}.hdr__right{gap:7px}.lvl__ring{width:34px;height:34px}.lvl__num{font-size:16px}.chip{padding:5px 9px;font-size:13px}.gpill{padding:6px 11px;min-height:40px;font-size:14px}.gpill small{font-size:8px}.xp__rank{font-size:11px}.xp__cap{font-size:9px}.icbtn,.treasure{width:35px;height:36px;font-size:18px;min-width:0;padding:0}.game-board{display:flex;flex-direction:column}.scene-side{padding:10px 15px 0}.scene-kicker{font-size:9px}.scene-kicker span:last-child{font-size:9px}.scene-side>.scene{height:154px;min-height:154px;flex:none}.scene-side .scroll{top:4px;transform:translateX(-50%) scale(.7);transform-origin:top center;left:65%}.scene-side .ninja{left:19%;bottom:3px;transform:scale(.77);transform-origin:bottom center}.scene-side .moon{width:45px;height:45px;top:10px;right:14px}.scene-side .dojo{height:80px;opacity:.7}.dojo-message{display:none}.journey{margin:2px 0 13px;padding:9px 13px}.journey__heading{font-size:10px}.journey__heading>b{font-size:17px}.journey__heading small{font-size:10px}.journey__track{height:4px;margin:6px 0}.journey>span{font-size:9px}.web-game .quiz{margin:0 7px 7px;padding:18px 16px 16px;border-radius:17px;min-height:0}.lesson-heading{margin-bottom:13px}.modetabs{margin-bottom:17px}.mtab{padding:9px 3px;font-size:14px}.quiz__q{font-size:15px}.quiz__hint{font-size:10px;margin:7px 0 14px}.opt{min-height:61px;font-size:23px}.opts{gap:11px}.quiz__foot{margin:15px 0 10px;min-height:37px}.challenge-card{padding-top:13px;margin-top:8px;font-size:10px}.play-footer{font-size:9px;margin-top:3px}.web-game.write-mode .scene-side>.scene{height:120px;min-height:120px}.web-game.write-mode .scene-side .scroll{transform:translateX(-50%) scale(.56)}.web-game.write-mode .scene-side .ninja{transform:scale(.6)}.web-game.write-mode .journey{display:none}.web-game .wd__padwrap,.web-game .trace.compact .wd__padwrap{width:240px;height:240px}.modal-bg{padding:14px}.modal{padding:22px;max-height:calc(100svh - 28px)}.modal__title{font-size:21px}.game-toast{font-size:12px;bottom:16px;padding:13px 16px;width:max-content}.scene-side>.battle-scene{height:210px;min-height:210px}.scene-side .battle__ninja-wrap .ninja{left:50%;transform:translateX(-50%) scale(.65)}.battle-question{font-size:19px}.battle-writing .battle-prompt{font-size:13px}.result-card{padding:10px 0}.result-icon{font-size:45px}.result-card h2{font-size:20px}}
@media(max-width:360px){.play-page{padding:8px 4px}.web-game .hdr{padding:10px}.hdr__top{gap:3px}.hdr__right{gap:4px}.gpill{padding:5px 8px}.chip{padding:4px 7px}.web-game .quiz{padding:16px 13px}.opt{font-size:21px}.welcome{padding:18px}.player-panel{padding:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.wd__ink{animation-duration:inherit!important}.confetti{display:none}}
/* Growth: earned learning, a visible route, and boss-only promotion. */
.rank-goal{display:flex;align-items:center;gap:12px;width:calc(100% - 48px);margin:16px 24px 0;padding:12px 15px;background:#ead5a012;border:1px solid #bda16a55;border-radius:12px;color:#f2ddb2;text-align:left;line-height:1.6}
.rank-goal__icon{font-size:24px}.rank-goal>span:nth-child(2){flex:1}.rank-goal small{display:block;color:#c9b4d5;font-size:10px}.rank-goal b{display:block;font-size:13px}.rank-goal:disabled{opacity:.65}
.learning-feedback{display:flex;align-items:center;gap:10px;padding:12px;margin:0 0 15px;border-radius:11px;background:#e8f2df;color:#456b36;font-size:12px;line-height:1.6}.learning-feedback b{flex-shrink:0;font-size:15px}.learning-feedback.retry{color:#806630;background:#faf0d7}
.stage-select>p{margin:0 0 20px}.stage-route{list-style:none;padding:0;margin:0}.stage-route>li{position:relative;padding-bottom:10px}.stage-route>li:not(:last-child)::after{content:'';position:absolute;width:2px;height:10px;bottom:0;left:31px;background:#d7c9e0}
.stage-choice{display:flex;align-items:center;gap:12px;width:100%;min-height:78px;padding:12px;border:1px solid #e2d7e8;background:#fff;border-radius:13px;text-align:left;color:var(--ink)}.stage-choice.selected{border:2px solid #9170bf;padding:11px;background:#f4eefa}.stage-choice:disabled{background:#f1edf2;color:#807289}
.stage-dot{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:12px;font-size:17px;font-weight:800}.stage-choice__name{flex:1;min-width:0}.stage-choice__name b{font-size:15px}.stage-choice__name small{display:block;font-size:10px;margin-top:4px}.stage-choice__progress{font-size:10px;white-space:nowrap;color:#8b7497}.stage-route .complete .stage-choice__progress{color:#638248}.stage-route .current .stage-choice__name small{color:#79569b;font-weight:800}
.promotion-card{text-align:center}.promotion-card__ninja{height:195px;position:relative;overflow:hidden}.promotion-card__ninja .ninja{left:50%;bottom:20px;transform:translateX(-50%)}.promotion-card h3{font-size:30px;margin:12px 0;color:#8053b4}.promotion-card p{font-size:13px;color:#8f719f}.growth-rules{border-radius:12px;background:#f0e9f6;padding:14px;margin-top:15px}.growth-rules>b{font-size:13px}.growth-rules p{font-size:12px;line-height:1.8;margin:8px 0 0}
.xp__rank,.xp__cap{white-space:nowrap}.xp__track{min-width:20px}
@media(max-width:759px){.rank-goal{width:calc(100% - 24px);margin:10px 12px 0;padding:9px 11px;gap:9px}.rank-goal b{font-size:11px}.rank-goal small{font-size:9px}.rank-goal__icon{font-size:20px}.stage-choice{gap:9px;flex-wrap:wrap}.stage-choice__name b{font-size:13px}.stage-choice__progress{font-size:9px}.stage-dot{width:32px;height:36px}.stage-route>li:not(:last-child)::after{left:28px}.xp{gap:8px}.xp__cap{font-size:8px}.xp__rank{font-size:10px}.learning-feedback{font-size:11px;margin-bottom:10px}.learning-feedback b{font-size:13px}.promotion-card h3{font-size:26px}}
@media(max-width:360px){.stage-choice__progress{margin-left:41px;width:100%}}
/* A gentle RPG home: one clear daily quest, a world to explore, and a growing village. */
.welcome__world{height:245px;border:1px solid #88709870;border-radius:20px;box-shadow:0 12px 30px #09071e55;margin-top:22px}.welcome__world>img{width:100%;height:100%;object-fit:cover;object-position:50% 68%}.welcome__world .art-caption{display:block;inset:auto 0 0;padding:14px 10px;background:linear-gradient(transparent,#211733d9);color:#fff1d1;text-align:center}
.adventure-home{color:var(--ink);overflow:hidden;border-radius:0 0 24px 24px;background:#fbf5e8}.adventure-hero{position:relative;height:325px;overflow:hidden}.adventure-hero>img{width:100%;height:100%;object-fit:cover;object-position:50% 48%}.adventure-hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,#161829b0,transparent 80%),linear-gradient(0deg,#201a3860,transparent 55%)}.adventure-hero__copy{position:absolute;left:34px;top:31px;max-width:75%;color:#fff}.adventure-hero__copy .eyebrow{color:#ffe1a0;font-size:11px}.adventure-hero__copy h1{font-size:29px;margin:12px 0;color:#fff9e9;line-height:1.6;text-shadow:0 2px 7px #12102d}.adventure-hero__copy p{font-size:13px;line-height:1.7}.map-button{position:absolute;right:25px;bottom:22px;padding:12px 18px;background:#fff3dc;color:#58425d;border:1px solid #ffe1a0;border-radius:12px;box-shadow:0 4px 0 #39234855;font-weight:800;font-size:13px}
.adventure-body{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;padding:27px}.daily-quest{padding:23px;border:1px solid #e6d8bb;background:#fffdf5;border-radius:18px;box-shadow:0 5px 12px #8c69470b}.quest-label{display:inline-block;background:#ede5f4;color:#806397;font-size:11px;padding:6px 10px;border-radius:20px;font-weight:800}.daily-quest h2{font-size:20px;color:#604878;line-height:1.6;margin:14px 0 8px}.daily-quest>p{font-size:12px;line-height:1.8;color:#8c7891;margin-bottom:18px}.daily-steps{list-style:none;margin:0 0 20px;padding:0}.daily-steps li{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px dashed #e5dcc7}.daily-steps li>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eee5d4;color:#8b765d;font-size:12px;flex-shrink:0}.daily-steps b{font-size:12px;flex:1;line-height:1.8}.daily-steps small{font-size:10px;white-space:nowrap;color:#8e7a92}.daily-steps .done>span{background:#dbebc9;color:#597d3f}.daily-steps .done b{color:#69844c}.adventure-primary{display:block;width:100%;padding:15px;border:0;background:linear-gradient(135deg,#8061b7,#68469e);box-shadow:0 4px 0 #4e307a;color:white;border-radius:12px;font-weight:800;font-size:16px;text-align:center}.adventure-primary small{display:block;font-size:10px;margin-top:5px;color:#e5d6fa;font-weight:400}.daily-note{display:block;line-height:1.8;font-size:10px;color:#9c8b91;margin-top:16px}.adventure-side{display:flex;flex-direction:column;gap:18px}.review-invite{padding:25px;background:linear-gradient(135deg,#eee5f8,#e9e0ef);border:1px solid #dacde5;border-radius:18px;flex:1}.review-invite>span{font-size:11px;color:#9070a5}.review-invite h3{font-size:17px;margin:15px 0 10px;color:#60487a}.review-invite p{font-size:12px;line-height:1.9;color:#8d779c}.review-invite button{border:0;background:#fff9ef;border-radius:10px;color:#72528f;font-size:12px;font-weight:800;padding:12px;margin-top:10px;width:100%;min-height:44px}.adventure-collection{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid #dfd0b5;background:#f7e9ca;padding:19px;border-radius:16px;color:#826946}.adventure-collection>span:first-child{font-size:28px}.adventure-collection>span:nth-child(2){flex:1}.adventure-collection b{font-size:12px}.adventure-collection small{display:block;font-size:10px;margin-top:4px;color:#9a835f}
.village-collection{border-top:1px solid #e5d9c2;padding:20px 27px 26px}.village-collection>header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}.village-collection h2{font-size:16px;color:#785b80;margin:0}.village-collection header>span{color:#9d8577;font-size:10px;white-space:nowrap}.souvenir-shelf{display:grid;grid-template-columns:repeat(8,1fr);gap:9px}.souvenir-slot{display:flex;align-items:center;flex-direction:column;text-align:center;min-width:0;padding:8px 3px 12px;background:#efe8db;border:1px dashed #dccfba;border-radius:12px}.souvenir-slot .souvenir-icon{width:66px;max-width:100%;opacity:.16;filter:grayscale(1)}.souvenir-slot b{font-size:9px;color:#a08d89;line-height:1.8}.souvenir-slot small{font-size:8px;margin-top:4px;color:#ae9a95}.souvenir-slot.found{background:#fff9e9;border-style:solid;box-shadow:0 3px 0 #dfcb9a66}.souvenir-slot.found .souvenir-icon{opacity:1;filter:none}.souvenir-slot.found b{color:#795969}.village-collection>p{font-size:11px;color:#a08b82;text-align:right;margin:18px 0 0}.village-collection>p b{color:#ae832c}.daily-finished{padding:12px 0 0}.daily-finished>b{font-size:14px;color:#698342}.daily-finished p{font-size:11px;color:#95818e;line-height:1.8}.chest-button{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;padding:18px;background:linear-gradient(120deg,#ffe4a0,#f6d48a);border:1px solid #e6b958;border-radius:14px;box-shadow:0 4px 0 #c69a4940;color:#735332}.chest-button b{font-size:15px}.chest-button small{display:block;color:#9d7938;font-size:10px;margin-top:5px}.treasure-chest{position:relative;width:56px;height:42px;border:3px solid #805734;background:#c98a43;border-radius:14px 14px 6px 6px;box-shadow:inset 6px 0 #f0c65d,inset -6px 0 #f0c65d}.treasure-chest::before{content:'';position:absolute;left:0;right:0;top:16px;height:4px;background:#754d31}.treasure-chest i{position:absolute;left:21px;top:15px;background:#ffe190;border:2px solid #a97433;border-radius:3px;width:12px;height:15px}.daily-trail{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 24px;width:100%;background:#241d38;border:0;color:#c7b5db;font-size:11px;text-align:left}.daily-trail b{font-size:10px;font-weight:500}.daily-trail.ready{background:#645139;color:#ffe4a5}.map-illustration{margin:-2px 0 22px;border-radius:14px;overflow:hidden;height:200px}.map-illustration img{width:100%;height:100%;object-fit:cover}
.review-hub h3,.weapon-shelf h3,.badge-shelf h3{font-size:16px;color:#79548f}.review-mission{padding:18px;background:#f2e9f8;border:1px solid #e0cbea;border-radius:15px;margin:20px 0}.review-mission .eyebrow{color:#9b78ab;font-size:10px}.review-mission h3{font-size:17px;line-height:1.7}.review-mission>small{display:block;font-size:10px;line-height:1.8;margin-top:10px}.review-mission .modal__claim{margin-top:12px}.mission-weapon{display:flex;align-items:center;gap:20px;padding:10px 0;color:#826397}.mission-weapon .wpn{flex-shrink:0;width:48px;height:48px}.mission-weapon>span{font-size:13px;font-weight:800}.mission-weapon small{display:block;font-size:10px;font-weight:400;margin-top:5px}.weak-letters{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.weak-letters>span{display:flex;align-items:center;gap:7px;background:#fff2d9;border:1px solid #efd7b2;padding:8px 11px;border-radius:10px}.weak-letters b{font-size:23px;color:#8a653f}.weak-letters small{font-size:10px}.resume-review{border:1px solid #d7c4a1;background:#fff0cb;padding:17px;border-radius:13px}.resume-review>b{font-size:13px}.resume-review p{font-size:12px}.modal__claim:disabled,.settings-action:disabled{opacity:.45;box-shadow:none;cursor:default}.weapon-shelf>p{margin-bottom:25px}.weapon-shelf .arm__grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:28px}.weapon-shelf .arm__cell{display:flex;flex-direction:column;gap:8px;border-radius:14px;padding:14px 10px;opacity:1;background:#f3edf5;min-width:0}.weapon-shelf .arm__cell b{font-size:12px;line-height:1.6}.weapon-shelf .arm__cell small{font-size:9px;line-height:1.8;white-space:normal;color:#9b839d}.weapon-shelf .arm__cell.lock .wpn{opacity:.35;filter:grayscale(.5)}.weapon-shelf .arm__cell.lock b{color:#947e9c}.weapon-shelf .arm__cell.has{background:#fff5d9}.weapon-shelf .arm__cell.eq{box-shadow:0 0 0 2px #a084c7;background:#f1e6fc}.weapon-bonus{font-size:10px;color:#866a44}.weapon-source{font-size:9px;color:#9b779e}.badge-shelf section{margin-top:24px}.badge-shelf details{margin-top:25px}.badge-shelf summary{font-size:12px;color:#9d88a7;padding:12px;cursor:pointer}.badge-shelf .badge-cell{border-radius:12px}.badge-shelf .badge-cell small{line-height:1.7}.badge-shelf .badge-cell.locked{opacity:.55}.news-badges{background:#f3ebf6;padding:15px;border-radius:12px;margin:18px 0}.news-badges h3{font-size:13px;color:#88649f;margin:0 0 12px}.news-badges p{font-size:12px;margin:8px 0}.news-badges small{display:block;font-size:10px;margin:3px 0 0 23px}.new-weapon{display:flex;align-items:center;gap:25px;padding:20px 10px}.new-weapon>.wpn{width:56px;height:56px;flex-shrink:0}.new-weapon h3{font-size:19px;color:#825e9d;margin:0}.new-weapon p{font-size:12px;line-height:1.8}.news-level{color:#aa7a36;text-align:center}.souvenir-reveal{text-align:center}.souvenir-reveal>.souvenir-icon{width:160px;max-width:100%;filter:drop-shadow(0 9px 12px #c3924530)}.souvenir-reveal h3{font-size:26px;color:#a1763d;margin:8px 0}.souvenir-reveal p{color:#917b95;font-size:13px}.souvenir-reveal>b{color:#b7892f;font-size:13px}.game-toast{white-space:pre-line}.review-done-copy{text-align:center;color:#779a55}
@media(max-width:759px){.welcome__world{height:185px;margin:18px 0}.adventure-home{border-radius:0 0 18px 18px}.adventure-hero{height:225px}.adventure-hero__copy{top:18px;left:19px;max-width:90%}.adventure-hero__copy .eyebrow{font-size:9px}.adventure-hero__copy h1{font-size:22px;margin:8px 0}.adventure-hero__copy p{font-size:10px}.map-button{font-size:10px;right:14px;bottom:15px;padding:10px 13px}.adventure-body{grid-template-columns:1fr;gap:14px;padding:14px}.daily-quest{padding:17px}.daily-quest h2{font-size:18px}.daily-quest>p{font-size:11px}.daily-steps li{gap:8px}.daily-steps b{font-size:11px}.daily-steps small{font-size:9px}.adventure-side{gap:12px}.review-invite{padding:18px}.review-invite h3{font-size:16px;margin:12px 0 6px}.review-invite p{font-size:11px}.review-invite p br{display:none}.review-invite button{font-size:11px}.adventure-collection{padding:16px}.village-collection{padding:18px 14px}.village-collection h2{font-size:13px}.village-collection header>span{font-size:9px}.souvenir-shelf{grid-template-columns:repeat(4,1fr);gap:7px}.souvenir-slot b{font-size:8px}.souvenir-slot small{font-size:8px}.daily-trail{padding:11px 13px;font-size:10px;gap:8px}.daily-trail b{font-size:9px}.map-illustration{height:170px}.review-mission{padding:14px}.new-weapon{gap:17px}.new-weapon h3{font-size:17px}.chest-button{gap:14px;padding:16px 12px}.chest-button b{font-size:13px}.badge-shelf .badges-grid{grid-template-columns:repeat(2,1fr)}.weapon-shelf .arm__cell b{font-size:11px}.wpn.w-katana{height:52px}}
@media(max-width:360px){.hdr__right{gap:4px}.hdr__left{gap:4px}.icbtn,.treasure{width:29px;min-width:29px;height:33px}.gpill{font-size:12px;padding:5px 7px}.chip{font-size:11px;padding:5px 6px}.daily-trail{flex-wrap:wrap}.daily-steps li{flex-wrap:wrap}.daily-steps small{margin-left:36px}.adventure-hero__copy h1{font-size:20px}.village-collection>header{flex-wrap:wrap;gap:8px}}
.dojo-treasures{position:absolute;inset:0;pointer-events:none;z-index:3}.dojo-treasures>span{position:absolute;width:36px;height:45px;filter:drop-shadow(0 0 8px #ffd57b55)}.dojo-treasures .souvenir-icon{width:100%;height:100%}.wpn.w-shuriken::before,.wpn.w-flame::before{background:linear-gradient(135deg,#f5ecdd,var(--wpn-col,#aab7c9))}.wpn.w-katana .blade{background:linear-gradient(90deg,#fff9e9,var(--wpn-col,#aab4c2))}.wpn.w-kunai .blade{background:linear-gradient(135deg,#fff9e9,var(--wpn-col,#8b95a5))}.wpn.w-katana .grip,.wpn.w-kunai .grip{background:var(--wpn-col,#4b385b)}.wpn.wpn--memory.w-shuriken::before{clip-path:polygon(50% 0,61% 29%,85% 15%,71% 39%,100% 50%,71% 61%,85% 85%,61% 71%,50% 100%,39% 71%,15% 85%,29% 61%,0 50%,29% 39%,15% 15%,39% 29%)}.wpn.wpn--memory.w-shuriken::after{background:#ffe9a6;box-shadow:0 0 0 2px #8b6c34}.wpn.wpn--memory.w-katana .guard{background:linear-gradient(#fff0a1,#d9ae45);box-shadow:0 0 8px #eac66f77}.weapon-shelf .arm__cell.lock .arm__ic{filter:none;opacity:.6}
@media(max-width:759px){.dojo-treasures>span{width:25px;height:31px}.web-game.write-mode .dojo-treasures>span{width:21px;height:26px}}
.badge-shelf .badge-cell{width:100%;min-width:0;background:#f2ebf5;gap:8px;border-color:#e6d9ed}
.badge-shelf .badge-cell.locked{opacity:1}
.badge-shelf .badge-cell.locked .badge-cell__emoji{filter:grayscale(.55);opacity:.6}
.badge-shelf .badge-cell b{font-size:12px;line-height:1.65;color:#745484}
.badge-shelf .badge-cell small{font-size:10px;color:#786682}
.badge-shelf .badge-cell.got{background:#fff3cf;border-color:#d8b968}
.weapon-shelf .arm__cell small{color:#786682}

/* Weapon combat: a readable side-view arena, with finite attack animations. */
.battle-invite{border:1px solid #d5af59;border-radius:17px;padding:18px;background:linear-gradient(135deg,#fce9b1,#f7d999);color:#64472d;text-align:left;display:grid;grid-template-columns:36px 1fr;gap:5px 9px;box-shadow:0 4px 0 #b78c3d22}
.battle-invite>span{grid-row:span 2;font-size:26px}.battle-invite>b{font-size:14px}.battle-invite>small{font-size:11px;color:#8c6943}
.combat-mode .game-board{grid-template-columns:1.05fr 1fr}.combat-mode .scene-side{padding:22px 20px}.combat-mode .journey{display:none}
.combat-arena{position:relative;isolation:isolate;overflow:hidden;margin-top:13px;min-height:335px;width:100%;border:1px solid #847bac66;border-radius:18px;background:radial-gradient(ellipse at 72% 5%,#69728c,#263049 60%,#171d30);box-shadow:inset 0 0 50px #13172e66}
.arena-moon{position:absolute;right:18%;top:95px;width:65px;height:65px;border-radius:50%;background:#f8eacc;box-shadow:0 0 55px #ffe7b366;opacity:.8}
.arena-floor{position:absolute;inset:60% -25% -25%;border-radius:50% 50% 0 0;background:repeating-linear-gradient(170deg,transparent 0 30px,#c1ad9e15 31px 33px),linear-gradient(#71818b,#343d52);transform:perspective(400px) rotateX(20deg);border-top:3px solid #c5bbaa44}
.combat-hp{position:absolute;top:19px;width:43%;z-index:8;font-size:10px;color:#fff3dd}.combat-hp>span{display:block;white-space:nowrap}.player-health{left:5%}.enemy-health{right:5%;text-align:right}.combat-hp>div{height:12px;border:2px solid #e9d9c155;border-radius:99px;background:#141626;overflow:hidden;margin:7px 0 4px}.combat-hp i{height:100%;display:block;border-radius:99px;transition:width .55s .2s ease;background:linear-gradient(90deg,#74bdb9,#c0f2ba)}.enemy-health i{background:linear-gradient(90deg,#df7c60,#ffcc7d)}.combat-hp small{font-size:11px;color:#f4e5cd;font-variant-numeric:tabular-nums}
.fighter{position:absolute;left:7%;bottom:35px;width:128px;height:158px;z-index:5;transform-origin:bottom center}
.combat-arena .fighter .ninja{left:0;bottom:0;transform:none;animation:none}.combat-arena .fighter .ninja__weapon{width:49px;height:49px;right:-10px}
.rival{position:absolute;right:5%;bottom:41px;width:133px;height:146px;z-index:4;transform-origin:50% 85%;animation:rival-idle 3s ease-in-out infinite}.rival>svg,.rival>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 4px #13152b55)}
.equipped-ribbon{position:absolute;bottom:0;left:0;right:0;z-index:8;display:flex;gap:9px;align-items:center;justify-content:center;padding:6px 8px;background:#1b2034df;color:#e5dbc4;font-size:11px;min-height:31px}.equipped-ribbon>.wpn{width:26px;height:26px}
.combat-effects{position:absolute;inset:0;pointer-events:none;z-index:7}.weapon-flight{position:absolute;left:27%;top:57%;width:47px;height:47px;color:var(--strike-color);filter:drop-shadow(0 0 9px var(--strike-color));animation:weapon-throw .7s ease-in both}.weapon-flight span{font-size:55px}
.flight-slash,.flight-staff{animation:weapon-slash .65s ease-out both;width:100px;height:100px;left:61%;top:42%}.flight-slash:after{content:'';position:absolute;inset:-5px;border:8px solid transparent;border-right-color:#fff4cc;border-radius:50%;transform:rotate(-30deg);filter:drop-shadow(0 0 12px var(--strike-color))}
.flight-kunai{animation:weapon-kunai .7s ease-in both}.echo-one{animation-delay:.14s}.echo-two{animation-delay:.28s}
.strike-burst{position:absolute;left:66%;top:37%;color:#fff0b6;text-shadow:0 0 25px var(--strike-color);font-size:90px;animation:strike-burst .7s .3s both}
.damage-pop{position:absolute;right:10%;top:25%;font-weight:900;font-size:43px;color:#ffe3a3;text-shadow:0 3px 0 #5b3e4e,0 0 20px #ffba55;line-height:1.1;animation:damage-pop 1.8s .2s both;z-index:10}.damage-pop small{display:block;text-align:center;font-size:12px;letter-spacing:.05em}.player-damage{right:auto;left:13%;color:#ffbcc1;animation-delay:.1s}
.enemy-projectile{position:absolute;right:20%;top:51%;font-size:40px;color:#e8b5dc;animation:enemy-shot .65s both}
.is-attacking .fighter{animation:fighter-lunge .6s ease}.is-attacking .rival{animation:rival-hit .7s .2s both}.is-hurt .fighter{animation:fighter-hurt .6s .18s both}.is-won .rival{animation:rival-defeat .9s .35s both}.is-special{box-shadow:inset 0 0 65px #ffdb7755,0 0 25px #edc97144}.is-special .strike-burst{font-size:125px;left:59%;top:28%}
.finish-banner{position:absolute;inset:97px 10% auto;z-index:11;text-align:center;color:#fff0b5;font-weight:900;font-size:48px;letter-spacing:.15em;text-shadow:0 4px 0 #9a5b37,0 0 25px #ffcd5a;background:linear-gradient(90deg,transparent,#302039dc,transparent);padding:17px 0;animation:finish-arrive .5s .95s both;pointer-events:none}.finish-banner small{display:block;font-size:12px;letter-spacing:.04em;margin-top:7px;color:#fff8ed}
.combat-controls{padding:14px;background:#f0e6f7;border:1px solid #ddc9e9;border-radius:14px;margin:2px 0 16px}
.combat-status{min-height:48px;display:flex;flex-direction:column;gap:5px;font-size:11px;color:#82638b}.combat-status>b{color:#67437f;font-size:13px}.combat-status strong{font-size:17px;color:#bb683e}.special-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:8px 0}.charge-meter{display:flex;gap:3px;align-items:center;font-size:18px;color:#cfbfdc}.charge-meter span{font-size:9px;margin-right:5px;color:#7d668d}.charge-meter i{font-style:normal}.charge-meter i.charged{color:#dbac33;text-shadow:0 0 7px #f9d45777}
.special-button{padding:11px 12px;min-height:43px;border:1px solid #dcae5a;border-radius:11px;color:#754712;background:#ffdf85;font-size:11px;font-weight:800;box-shadow:0 3px 0 #b98543}.special-button:disabled{background:#e2d5e9;color:#9583a2;border-color:#d5c6df;box-shadow:none;cursor:default}.special-button.armed{background:#a35395;border-color:#b95896;color:#fff6d0;box-shadow:0 3px 0 #6e3265}.combat-controls>small{font-size:10px;line-height:1.6;color:#897293;display:block}
.battle-summary{font-size:12px!important;color:#98788f}.weapon-skill{font-size:10px;color:#92527f;line-height:1.5}.loot-button{background:linear-gradient(135deg,#efbf57,#ffe5a1);color:#704a27;box-shadow:0 4px 0 #b48945}
@keyframes rival-idle{50%{transform:translateY(-4px)}}
@keyframes weapon-throw{0%{opacity:0;transform:translate(-15px,18px) rotate(0)}15%{opacity:1}80%{opacity:1}100%{opacity:0;left:75%;transform:translateY(-17px) rotate(650deg) scale(.6)}}
@keyframes weapon-kunai{0%{opacity:0;transform:rotate(-80deg) translateX(-15px)}15%,80%{opacity:1}100%{opacity:0;left:77%;transform:rotate(-80deg) scale(.65)}}
@keyframes weapon-slash{0%{opacity:0;transform:rotate(-90deg) scale(.6)}20%{opacity:1}75%{opacity:1;transform:rotate(55deg) scale(1.3)}100%{opacity:0;transform:rotate(90deg) scale(.9)}}
@keyframes strike-burst{0%{opacity:0;transform:scale(.2) rotate(-30deg)}35%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(1.7) rotate(20deg)}}
@keyframes damage-pop{0%{opacity:0;transform:translateY(15px) scale(.5)}15%,65%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-28px)}}
@keyframes fighter-lunge{25%{transform:translateX(-8px) rotate(-6deg)}55%{transform:translateX(30px) rotate(6deg)}}
@keyframes fighter-hurt{20%,60%{transform:translateX(-10px) rotate(-7deg)}40%,80%{transform:translateX(2px)}}
@keyframes rival-hit{25%,65%{transform:translateX(12px) rotate(8deg)}45%,85%{transform:translateX(-3px)}}
@keyframes rival-defeat{20%{transform:translateX(13px) rotate(10deg)}50%{opacity:1}100%{opacity:0;transform:translate(25px,18px) rotate(40deg) scale(.4)}}
@keyframes enemy-shot{0%{opacity:0}20%{opacity:1}100%{opacity:0;right:75%;transform:rotate(-160deg)}}
@keyframes finish-arrive{from{opacity:0;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}
@media(max-width:759px){.combat-mode .game-board{display:flex}.combat-mode .scene-side{padding:10px 14px 0}.combat-arena{height:245px;min-height:245px;margin-top:9px;border-radius:13px}.combat-arena .fighter{left:7%;bottom:30px;transform:scale(.69);transform-origin:bottom left}.combat-arena .fighter .ninja{left:0;bottom:0;transform:none}.rival{width:105px;height:117px;right:6%;bottom:31px}.arena-moon{top:78px;width:45px;height:45px}.combat-hp{top:12px;font-size:9px}.combat-hp>div{height:10px;margin:5px 0 3px}.combat-hp small{font-size:9px}.equipped-ribbon{font-size:9px;min-height:25px;padding:3px 6px}.equipped-ribbon>.wpn{width:23px;height:23px}.damage-pop{font-size:31px}.finish-banner{top:79px;font-size:36px;padding:12px 0}.finish-banner small{font-size:10px}.combat-mode .quiz{margin-top:12px}.combat-controls{padding:11px;margin-bottom:12px}.combat-status{min-height:42px}.combat-status>b{font-size:11px}.combat-status>span{font-size:10px}.special-row{gap:5px}.special-button{font-size:10px;padding:9px}.charge-meter{gap:1px;font-size:15px}.charge-meter span{font-size:8px}.combat-controls>small{font-size:9px}.combat-mode .battle-question{font-size:16px;margin:8px 0}.combat-mode .opts{gap:8px}.combat-mode .opt{min-height:49px;font-size:20px}.combat-mode .quiz__foot{margin:10px 0}.combat-mode .lesson-heading{margin-bottom:10px}.weapon-flight{width:34px;height:34px}.flight-slash,.flight-staff{width:75px;height:75px}.is-attacking .fighter{animation:mobile-lunge .6s ease}.is-hurt .fighter{animation:mobile-hurt .6s .18s both}}
@keyframes mobile-lunge{25%{transform:scale(.69) translateX(-8px) rotate(-6deg)}55%{transform:scale(.69) translateX(30px) rotate(6deg)}}
@keyframes mobile-hurt{20%,60%{transform:scale(.69) translateX(-10px) rotate(-7deg)}40%,80%{transform:scale(.69) translateX(2px)}}
@media(prefers-reduced-motion:reduce){.combat-arena *{animation:none!important;transition:none!important}.combat-arena .combat-effects{display:none}.combat-arena.is-won .rival{opacity:.25}.combat-arena .finish-banner{opacity:1}}
.combat-mode .rank-goal{display:none}
.combat-mode .hdr .xp{display:none}
.combat-mode .scene-side{position:sticky;top:10px;align-self:start}
.combat-mode .quiz{padding:22px}
@media(max-width:759px){.combat-mode .scene-side{top:0;align-self:stretch;z-index:20;background:#302940;border-radius:0 0 15px 15px;padding:5px 10px 8px;box-shadow:0 8px 15px #17112644}.combat-mode .scene-kicker{display:none}.combat-mode .combat-arena{height:180px;min-height:180px;margin:0}.combat-mode .fighter{bottom:25px;transform:scale(.56)}.combat-mode .rival{width:89px;height:99px;bottom:24px}.combat-mode .arena-moon{top:59px;width:34px;height:34px}.combat-mode .combat-hp{top:9px}.combat-mode .finish-banner{top:56px;font-size:31px}.combat-mode .quiz{padding:15px}.combat-mode .is-attacking .fighter{animation:compact-lunge .6s ease}.combat-mode .is-hurt .fighter{animation:compact-hurt .6s .18s both}}
@keyframes compact-lunge{25%{transform:scale(.56) translateX(-8px) rotate(-6deg)}55%{transform:scale(.56) translateX(30px) rotate(6deg)}}
@keyframes compact-hurt{20%,60%{transform:scale(.56) translateX(-10px) rotate(-7deg)}40%,80%{transform:scale(.56) translateX(2px)}}
@media(max-width:759px){.combat-mode .scene-side{z-index:40}.combat-mode .quiz button{scroll-margin-top:205px;scroll-margin-bottom:20px}}
.combat-finished .special-row{display:none}
.combat-finished .combat-status{min-height:0}