:root{--ink:#1f2250;--accent:#ff8a1f;--ok:#22c55e;--ng:#ef4444}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#fff6e0;color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;overscroll-behavior:none}
#app{position:fixed;inset:0;max-width:520px;margin:0 auto;overflow:hidden;background:#fff6e0}
.bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.bg i{position:absolute;border-radius:50%;opacity:.55}
.bg .b1{width:260px;height:260px;background:#ffd9a0;left:-90px;top:-60px}
.bg .b2{width:220px;height:220px;background:#bfe6ff;right:-80px;top:38%}
.bg .b3{width:300px;height:300px;background:#ffc9dc;left:-100px;bottom:-120px}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px;text-align:center;gap:16px;z-index:1}
.screen.show{display:flex}
.badge{background:var(--ink);color:#fff;padding:5px 16px;border-radius:99px;font-size:14px;font-weight:700;letter-spacing:.1em}
h1{font-size:48px;margin:0;letter-spacing:.04em;line-height:1.1}h1 span{color:var(--accent)}
h2{margin:0;font-size:26px}
.lead{line-height:1.9;margin:0;font-weight:500}
.note{font-size:12px;opacity:.6;margin:0}
button{font:inherit;color:inherit;cursor:pointer}
.big{padding:16px 56px;border:0;border-radius:99px;background:var(--accent);color:#fff;font-size:20px;font-weight:900;box-shadow:0 5px 0 #d96a00}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #d96a00}
/* mascot */
.mascot-slot{pointer-events:none}
#m-start{position:relative;transform:scale(1.5);margin:10px 0}
#m-end{position:relative;transform:scale(1.3);margin-bottom:6px}
#m-play{position:absolute;right:10px;bottom:30px;transform:scale(.8);transform-origin:100% 100%;z-index:4}
.mascot{position:relative;width:84px;height:90px}
.m-inner{position:absolute;inset:0;transform-origin:50% 100%;animation:m-bounce .5s ease-in-out infinite alternate}
.m-body,.m-arm{position:absolute}.m-body{inset:0}
.m-arm.l{left:-2px;top:38px;transform-origin:20px 4px;animation:m-wave .5s ease-in-out infinite alternate}
.m-arm.r{left:64px;top:34px;transform-origin:4px 4px;transform:rotate(-60deg)}
.m-arm svg,.m-body svg{display:block;overflow:visible}
.mascot.stamping .m-arm.r{animation:m-slam .38s cubic-bezier(.3,1.4,.5,1)}
.mascot.oops .m-inner{animation:m-oops .65s ease-out}
@keyframes m-bounce{from{transform:translateY(0) scaleY(1)}to{transform:translateY(-5px) scaleY(1.03)}}
@keyframes m-wave{from{transform:rotate(-10deg)}to{transform:rotate(35deg)}}
@keyframes m-slam{0%{transform:rotate(-60deg)}45%{transform:rotate(55deg)}70%{transform:rotate(40deg)}100%{transform:rotate(-60deg)}}
@keyframes m-oops{0%{transform:rotate(0)}30%{transform:rotate(-24deg) translateY(4px)}60%{transform:rotate(10deg)}100%{transform:rotate(0)}}
/* play */
.top{position:absolute;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 10px) 14px 0;z-index:5}
.bars{display:flex;gap:4px}
.bars i{flex:1;height:6px;border-radius:3px;background:#1f225026}
.bars i.ok{background:var(--ok)}.bars i.ng{background:var(--ng)}.bars i.cur{background:var(--ink)}
.meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-weight:900}
#snd{background:none;border:0;font-size:20px}
#stage{position:absolute;inset:0;overflow:hidden}
.card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:80px 20px 80px;transition:transform .45s cubic-bezier(.3,.8,.2,1),opacity .45s}
.card.enter{transform:translateY(100%)}
.card.leave{transform:translateY(-100%);opacity:.3}
.tag{align-self:flex-start;font-size:13px;font-weight:900;padding:4px 14px;border-radius:99px;color:#fff;background:var(--c,#6366f1)}
.q{font-size:clamp(22px,6vw,28px);line-height:1.7;font-weight:900;text-align:left;margin:0;background:#fff;border-radius:20px;padding:16px 18px;box-shadow:0 4px 0 rgba(31,34,80,.12)}
.q.mean{font-size:clamp(18px,5vw,22px)}
.q.mean::before{content:"次の意味の言葉は？";display:block;font-size:13px;opacity:.6;margin-bottom:6px}
.opts{display:grid;gap:10px;padding-right:60px}
.opt{padding:14px 16px;border-radius:16px;border:3px solid #fff;background:#fff;font-size:20px;font-weight:900;text-align:left;box-shadow:0 4px 0 rgba(31,34,80,.15);transition:transform .15s}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(31,34,80,.15)}
.opt.ok{background:#d1fae5;border-color:var(--ok)}
.opt.ng{background:#fee2e2;border-color:var(--ng);opacity:.6;pointer-events:none}
.card.shake{animation:sh .3s}
@keyframes sh{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.exp{min-height:3.2em;font-size:14px;line-height:1.6;font-weight:500;opacity:0;transition:opacity .3s;text-align:left;background:#ffffffb3;border-radius:12px;padding:10px 14px;margin-right:60px}
.exp.show{opacity:1}
.hint{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 14px);left:0;right:0;text-align:center;font-size:13px;opacity:.6;margin:0;z-index:2}
.pop{position:absolute;left:50%;top:38%;font-size:72px;font-weight:900;pointer-events:none;animation:pop .8s forwards;z-index:6}
@keyframes pop{0%{transform:translate(-50%,10px) scale(.5);opacity:0}30%{transform:translate(-50%,0) scale(1.1);opacity:1}100%{transform:translate(-50%,-60px);opacity:0}}
.t0{--c:#f97316;background:linear-gradient(170deg,#ffe8c7,#fff6e0 60%)}
.t1{--c:#0ea5e9;background:linear-gradient(170deg,#d4efff,#fff6e0 60%)}
.t2{--c:#a855f7;background:linear-gradient(170deg,#ecdcff,#fff6e0 60%)}
.t3{--c:#10b981;background:linear-gradient(170deg,#cdf5e4,#fff6e0 60%)}
.t4{--c:#ec4899;background:linear-gradient(170deg,#ffd6e6,#fff6e0 60%)}
/* end */
.score{font-size:80px;font-weight:900;color:var(--accent);line-height:1}.score small{font-size:24px;color:var(--ink);opacity:.6}
#msg{margin:0;font-weight:900;font-size:20px}
#miss{list-style:none;padding:0;margin:0;font-size:14px;text-align:left;max-height:22vh;overflow:auto;width:100%;background:#fffc;border-radius:14px}
#miss:empty{display:none}
#miss li{padding:6px 12px;border-bottom:1px solid #1f225018}
.links{display:flex;flex-direction:column;gap:8px;width:100%}
.links p{margin:0;font-size:13px;font-weight:700}
.links a{display:block;padding:12px;border-radius:14px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:15px}
.links a.sub{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{padding:8px 14px;border-radius:99px;border:2px solid var(--ink);background:#fff;font-size:14px;font-weight:700;color:var(--ink)}
.chip.on{background:var(--ink);color:#fff}
.ghost{background:none;border:0;opacity:.7;text-decoration:underline;font-size:14px}
/* しゅうしょく語ハンター */
.lead-q{font-size:clamp(20px,5.6vw,26px);line-height:1.6;font-weight:900;text-align:left;margin:0}
.sent{position:relative;display:flex;flex-wrap:wrap;gap:34px 8px;background:#fff;border-radius:20px;padding:44px 16px 20px;box-shadow:0 4px 0 rgba(31,34,80,.12);margin-right:0}
.arc{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.arc .draw{stroke-dasharray:400;stroke-dashoffset:400;animation:dr .5s .1s forwards}
@keyframes dr{to{stroke-dashoffset:0}}
.w{border:0;background:none;padding:6px 4px;font-size:clamp(20px,5.6vw,26px);font-weight:900;border-radius:12px}
.w.key{background:#fff3c4;color:#c2410c;border-bottom:4px solid #ff8a1f;border-radius:12px 12px 4px 4px;padding:6px 10px}
.w.dim{opacity:.55}
.w.pick{background:#eef2ff;border:3px solid #c7d2fe;padding:3px 10px;box-shadow:0 3px 0 rgba(31,34,80,.15)}
.w.pick:active{transform:translateY(2px)}
.w.ok{background:#d1fae5;border-color:var(--ok)}
.w.ng{background:#fee2e2;border-color:var(--ng);opacity:.6}
.exp b{color:#c2410c}
.lvs{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
.lv{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;padding:10px 16px;border:0;border-radius:18px;background:#fff;box-shadow:0 5px 0 rgba(31,34,80,.18)}
.lv:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(31,34,80,.18)}
.lv b{grid-row:1/3;color:var(--accent);font-size:18px;letter-spacing:-.1em}
.lv span{font-size:20px;font-weight:900}
.lv small{font-size:12px;opacity:.65}
/* タイトルを画面幅に収める(2行・折り返さない) */
#start h1{font-size:clamp(26px,min(11vw,52px),52px);letter-spacing:.02em;white-space:nowrap;max-width:100%}
#start h1 span{display:block}
#start .lead{font-size:clamp(12px,3.9vw,16px);line-height:1.8;word-break:keep-all;overflow-wrap:anywhere}
@media (max-height:700px){#m-start{transform:scale(1.1);margin:0}#start{gap:10px}}