:root{--pink:#ff6fa5;--orange:#ff9f43;--yellow:#ffd93d;--green:#4cd47a;--blue:#4aa8ff;--purple:#9b7bff;--ink:#3b2f4a;--bg:#fff8ec}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;font-size:19px;-webkit-tap-highlight-color:transparent}
body{background-image:radial-gradient(circle at 10% 20%,#ffe3ef 0 60px,transparent 61px),radial-gradient(circle at 90% 70%,#e2f3ff 0 90px,transparent 91px),radial-gradient(circle at 70% 10%,#fff1c2 0 50px,transparent 51px);background-attachment:fixed;min-height:100vh}
ruby rt{font-size:.5em;font-weight:700;color:#8a6f9e}
header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;background:linear-gradient(90deg,#4aa8ff,#9b7bff);color:#fff;position:sticky;top:0;z-index:5;box-shadow:0 3px 10px #0002;flex-wrap:wrap}
.logo{color:#fff;text-decoration:none;font-weight:900;font-size:1.35rem;display:flex;align-items:center;gap:4px;white-space:nowrap}
.logo b{background:var(--yellow);color:#e0457b;border-radius:10px;padding:0 8px;margin-left:6px;transform:rotate(-4deg);display:inline-block}
.logo rt{color:#fff}
.drop{font-size:1.5rem;animation:bob 2s infinite ease-in-out}
@keyframes bob{50%{transform:translateY(-4px)}}
#hud{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:700}
.chip{background:#fff3;border-radius:999px;padding:4px 12px;white-space:nowrap}
main{max-width:980px;margin:0 auto;padding:18px 14px 80px}
h1,h2,h3{margin:.4em 0}
.card{background:#fff;border-radius:24px;padding:20px;box-shadow:0 6px 0 #0001,0 8px 24px #0000000d;margin:14px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.big{display:block;border:none;border-radius:26px;padding:22px 16px;font:inherit;font-size:1.25rem;font-weight:900;color:#fff;cursor:pointer;text-align:center;text-decoration:none;box-shadow:0 6px 0 #0002;transition:transform .1s}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 #0002}
.big .em{font-size:2.6rem;display:block;margin-bottom:6px}
.big small{display:block;font-size:.8rem;font-weight:700;opacity:.95;margin-top:4px}
.c-pink{background:linear-gradient(135deg,#ff8fb8,#ff5c95)}.c-orange{background:linear-gradient(135deg,#ffb86b,#ff8a2b)}.c-green{background:linear-gradient(135deg,#6fe39a,#2fbf63)}
.c-blue{background:linear-gradient(135deg,#7cc2ff,#3b8df5)}.c-purple{background:linear-gradient(135deg,#b9a2ff,#7d5cf2)}.c-yellow{background:linear-gradient(135deg,#ffe066,#ffc21a);color:#6b4b00}
.c-teal{background:linear-gradient(135deg,#6ee7e0,#14b8a6)}.c-red{background:linear-gradient(135deg,#ff8a80,#f0524a)}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hero .big{padding:34px 10px;font-size:1.8rem}
.hero .big .em{font-size:4rem}
@media(max-width:600px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}html,body{font-size:17px}}
.btn{border:none;border-radius:16px;padding:12px 20px;font:inherit;font-weight:900;cursor:pointer;background:var(--blue);color:#fff;box-shadow:0 4px 0 #0002;font-size:1rem}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0002}
.btn.gray{background:#c9c2d6}.btn.pink{background:var(--pink)}.btn.green{background:var(--green)}.btn.orange{background:var(--orange)}.btn.sm{padding:6px 12px;font-size:.85rem;border-radius:12px}
input,textarea,select{font:inherit;border:3px solid #e6dcf5;border-radius:14px;padding:10px 12px;width:100%;background:#fff;color:var(--ink)}
input:focus,textarea:focus{outline:none;border-color:var(--purple)}
label{font-weight:700;display:block;margin:10px 0 4px}
.avatars{display:flex;flex-wrap:wrap;gap:8px}
.avatars button{font-size:2rem;border:3px solid transparent;background:#f5f0ff;border-radius:16px;padding:4px 8px;cursor:pointer}
.avatars button.on{border-color:var(--pink);background:#ffe8f1}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.seg button{border:3px solid #e6dcf5;background:#fff;border-radius:999px;padding:6px 14px;font:inherit;font-weight:700;cursor:pointer}
.seg button.on{background:var(--purple);border-color:var(--purple);color:#fff}
/* quiz */
.qtop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dots{display:flex;gap:5px}.dots i{width:16px;height:16px;border-radius:50%;background:#e9e2f3;display:inline-block}.dots i.ok{background:var(--green)}.dots i.ng{background:#ff7a7a}.dots i.cur{outline:3px solid var(--purple)}
.combo{font-weight:900;color:#ff5c2b}
.qcard{text-align:center}
.qask{font-size:1.15rem;font-weight:700;color:#7a5ea0}
.qprompt{font-size:3.2rem;font-weight:900;margin:14px 0;line-height:1.5;word-break:break-all}
.qprompt.k{font-size:4.2rem;letter-spacing:.05em}
.qtext{font-size:1.25rem;line-height:1.9;text-align:left;font-weight:700}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.choices button{font:inherit;font-size:1.6rem;font-weight:900;padding:18px 8px;border-radius:20px;border:4px solid #eadff7;background:#fff;cursor:pointer;color:var(--ink);box-shadow:0 5px 0 #eadff7;line-height:1.6}
.choices button:hover{border-color:var(--blue)}
.choices button.right{background:#dcfbe6;border-color:var(--green);box-shadow:0 5px 0 #8fdcaa}
.choices button.wrong{background:#ffe1e1;border-color:#ff7a7a;box-shadow:0 5px 0 #ffb0b0}
.choices.small button{font-size:1.2rem}
.ansbox{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0}
.ansbox input{max-width:220px;font-size:2rem;text-align:center;font-weight:900}
.ansbox .unit{font-size:1.4rem;font-weight:900}
.pad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:380px;margin:0 auto}
.pad button{font:inherit;font-size:1.5rem;font-weight:900;padding:12px;border-radius:16px;border:none;background:#f1ebff;cursor:pointer;box-shadow:0 4px 0 #ddd0f5}
.pad button.go{background:var(--green);color:#fff;grid-column:span 2}
.fb{margin-top:16px;border-radius:20px;padding:16px;text-align:left;animation:pop .35s}
.fb.ok{background:#e7fbef;border:3px solid var(--green)}.fb.ng{background:#fff0f0;border:3px solid #ff8f8f}
.fb .mark{font-size:2.4rem;font-weight:900}
.fb .exp{line-height:1.9;margin-top:6px}
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
.stars{font-size:1rem;color:#ffb400;letter-spacing:2px}
.memo{background:#fffbe0;border-left:8px solid #ffd93d;border-radius:12px;padding:10px 14px;margin:10px 0;text-align:left}
.memo.pink{background:#fff0f6;border-color:#ff8fb8}.memo.green{background:#ecfdf2;border-color:#4cd47a}.memo.blue{background:#ecf6ff;border-color:#4aa8ff}
.memo .who{font-weight:900;font-size:.85rem;color:#a07400}
mark{border-radius:6px;padding:0 2px}
mark.yellow{background:#fff07a}mark.pink{background:#ffc4dc}mark.green{background:#b8f5cc}mark.blue{background:#c4e3ff}
mark sup{font-size:.6em;color:#a0522d;margin-left:1px}
/* result */
.result{text-align:center}
.result .score{font-size:4rem;font-weight:900;color:var(--pink)}
.bigstars{font-size:3.6rem;letter-spacing:6px}
.bigstars span{display:inline-block;animation:spin .8s backwards}
.bigstars span:nth-child(2){animation-delay:.25s}.bigstars span:nth-child(3){animation-delay:.5s}
.dim{filter:grayscale(1);opacity:.3}
@keyframes spin{0%{transform:scale(0) rotate(-180deg)}100%{transform:scale(1) rotate(0)}}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.badge{background:#fff;border-radius:18px;padding:12px;text-align:center;border:3px solid #f0e6ff}
.badge .bi{font-size:2.4rem}.badge b{display:block;font-size:.9rem}.badge small{font-size:.72rem;color:#8a7a9a}
.badge.locked{opacity:.35;filter:grayscale(1)}
.lvbar{height:20px;background:#efe7fb;border-radius:999px;overflow:hidden;margin:6px 0}
.lvbar i{display:block;height:100%;background:linear-gradient(90deg,#ffd93d,#ff6fa5);border-radius:999px;transition:width .6s}
table{width:100%;border-collapse:collapse}td,th{padding:8px;border-bottom:2px dashed #eee;text-align:left}
.rank1{font-size:1.4rem}
/* flash */
.flash{perspective:1000px;max-width:420px;margin:10px auto}
.fcard{position:relative;height:340px;transition:transform .6s;transform-style:preserve-3d;cursor:pointer}
.fcard.flip{transform:rotateY(180deg)}
.fface{position:absolute;inset:0;backface-visibility:hidden;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;box-shadow:0 8px 0 #0001,0 10px 30px #0001;border:5px solid #ffd93d;padding:16px}
.fface.back{transform:rotateY(180deg);border-color:#9b7bff;font-size:1.4rem;line-height:2}
.fk{font-size:10rem;font-weight:900;line-height:1}
.tag{display:inline-block;background:#f1ebff;border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:700;margin:2px}
.muted{color:#8a7a9a;font-size:.85rem}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.qlist{max-height:420px;overflow:auto;border:2px solid #eee;border-radius:14px}
.qlist div{padding:8px 12px;border-bottom:1px solid #f2f2f2;cursor:pointer}
.qlist div:hover{background:#f7f2ff}
.sel-area{user-select:text;-webkit-user-select:text;background:#fcfbff;border:2px dashed #d8c9f5;border-radius:14px;padding:12px;line-height:1.9}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50;width:100%;height:100%}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center}
#toast div{background:#3b2f4a;color:#fff;padding:12px 20px;border-radius:999px;font-weight:700;animation:pop .3s;box-shadow:0 6px 18px #0004}
.popbadge{position:fixed;inset:0;background:#0007;z-index:55;display:flex;align-items:center;justify-content:center}
.popbadge .card{text-align:center;animation:pop .4s;max-width:360px}
.popbadge .bi{font-size:5rem;animation:bob 1s infinite}
.bubble{background:#fff;border-radius:20px;padding:10px 16px;display:inline-block;box-shadow:0 4px 0 #0001}
.mascot{font-size:3rem;animation:bob 2s infinite}
.prog{font-size:.75rem;opacity:.9}

.vcard{max-width:440px;width:92%;text-align:center}
.vface{font-size:5rem;margin:8px 0;transition:transform .2s}
.vface.talk{animation:talk .5s infinite alternate}
@keyframes talk{0%{transform:scale(1)}100%{transform:scale(1.12) rotate(-3deg)}}
.vstatus{font-weight:900;color:#7a5ea0;min-height:1.6em}
.vcap{max-height:220px;overflow:auto;text-align:left;background:#faf7ff;border-radius:14px;padding:8px;margin:10px 0;min-height:60px}
.vb{padding:6px 10px;border-radius:12px;margin:4px 0;line-height:1.6}
.vb.ai{background:#fff3d6}.vb.user{background:#e3f1ff;text-align:right}
.vtime{background:#f1ebff;color:#5b3fa0}

.pre{white-space:pre-line}
.qtext{white-space:pre-line}
.qprompt.mid{font-size:2rem}
.qprompt.long{font-size:1.35rem;font-weight:700;text-align:left;line-height:2.3;word-break:normal;background:#fffaf0;border-radius:14px;padding:10px 14px}
ruby{ruby-position:over}
rt{user-select:none;-webkit-user-select:none}
.qtext,.exp,.qask,.choices button{line-height:2.1}
.big .stars{font-size:.8rem;color:#fff8;letter-spacing:.05em}
@media (max-width:520px){.qprompt{font-size:2.4rem}.qprompt.k{font-size:3.4rem}.qprompt.mid{font-size:1.6rem}.qprompt.long{font-size:1.15rem}ruby rt{font-size:.55em}}
.big rt,.qtop rt{color:#fffd}.qtop rt{color:#8a6f9e}
/* ---- parent / billing pages ---- */
.err{color:#e0457b;font-weight:700}
.testmode{background:#fff4c2;border:2px dashed #e0b400;border-radius:12px;padding:8px 12px;font-size:.9rem;margin:8px 0}
.devcode{background:#eef6ff;border:2px dashed #4aa8ff;border-radius:12px;padding:8px 12px}
.warn{color:#c2410c;font-weight:700}.warnbg{background:#ffe1cc!important}.warnbox{border:3px solid #ffb27a}
.card.ok{background:#e9fbef;border:2px solid #4cd47a}
.bigmin{font-size:2.6rem;font-weight:900;color:#5b4bdb}
.ptable{width:100%;border-collapse:collapse}.ptable td,.ptable th{padding:6px 8px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.ptable.legal th{width:32%;background:#faf7ff;white-space:normal}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:12px 0}
.plan{background:#fff;border-radius:20px;padding:16px;box-shadow:0 4px 0 #e6def5;text-align:center;border:3px solid transparent}
.plan.best{border-color:#ff6fa5}.plan h3{margin:4px 0}.plan .yen{font-size:2rem;font-weight:900;color:#e0457b}.plan .yen small{font-size:.9rem;color:#777}
.req{background:#ffe066;color:#7a4b00;font-weight:700;padding:0 4px;border-radius:4px}
.legaltext h3{margin-top:18px}.legal-links{text-align:center;font-size:.85rem;margin:18px 0}
.parentnote{background:#fff8ec;border:2px solid #ffc27a;border-radius:12px;padding:10px;font-size:.9rem;line-height:1.6;margin:8px 0;text-align:left}
.plan .btn{display:inline-block;white-space:nowrap;margin-top:6px}