:root{
  --ink:#3b2a14; --cream:#fff8e1;
  --kh: clamp(38px, calc((100dvh - 372px) / 10), 56px);
  --gap: 4px;
  --font: "Hiragino Maru Gothic ProN","BIZ UDPGothic","Yu Gothic UI","Meiryo","Noto Sans JP","Noto Sans CJK JP",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{
  font-family:var(--font); font-weight:800; color:var(--ink);
  background:
    radial-gradient(circle at 12% 18%, #fff7 0 14px, transparent 15px),
    radial-gradient(circle at 82% 8%, #fff6 0 22px, transparent 23px),
    radial-gradient(circle at 70% 90%, #fff5 0 30px, transparent 31px),
    linear-gradient(#6fd8ff, #b9f0ff 55%, #ffe9a8);
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
}
[hidden]{display:none !important}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
#app{height:100dvh;max-width:520px;margin:0 auto;position:relative;display:flex;flex-direction:column;
  padding:max(6px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom))}
.screen{flex:1;min-height:0;display:flex;flex-direction:column}

/* ---- タイトル ---- */
#title{align-items:center;justify-content:center;gap:14px;text-align:center}
.title-art .mascot{width:min(62vw,300px);height:auto;animation:bob 1.6s ease-in-out infinite}
#title h1{margin:0;font-size:clamp(34px,10vw,56px);line-height:1.1;display:flex;flex-direction:column;gap:2px;transform:rotate(-3deg)}
#title h1 span{display:block;-webkit-text-stroke:7px #fff;paint-order:stroke fill;text-shadow:0 5px 0 #0003}
.t1{color:#ff4d6d}.t2{color:#7048e8;font-size:1.25em}
.big-btn{background:linear-gradient(#ffd43b,#ffa600);border-radius:999px;padding:14px 46px;font-size:clamp(28px,8vw,40px);
  box-shadow:0 7px 0 #d97706,0 12px 16px #0003;color:#5a2d00;transition:transform .08s,box-shadow .08s;animation:pulse 1.4s ease-in-out infinite}
.big-btn:active{transform:translateY(6px) scale(.97);box-shadow:0 1px 0 #d97706}
.big-btn.small{font-size:22px;padding:10px 32px;animation:none;align-self:center;flex:none}
.title-best{font-size:26px;background:#fff;border-radius:999px;padding:4px 18px;box-shadow:0 4px 0 #0002}
.link-btn{background:#fff8;border-radius:999px;padding:8px 18px;font-size:15px;color:#5b4a8a;text-decoration:underline}

/* ---- ゲーム ---- */
.top{display:flex;align-items:center;gap:6px;flex:none;height:56px}
.mascot-wrap{flex:none;width:54px;height:54px}
.mascot-wrap .mascot{width:100%;height:100%}
.score{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.chip{background:#fff;border-radius:999px;padding:0 10px;font-size:17px;line-height:25px;box-shadow:0 2px 0 #0002;white-space:nowrap;width:max-content}
.chip b{margin-left:4px;font-size:19px}.chip.best{background:#fff3bf}
.chip.bump{animation:bump .45s}
.tools{display:flex;gap:5px;flex:none}
.tool{position:relative;width:50px;height:50px;border-radius:15px;background:#fff;box-shadow:0 4px 0 #0003;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;line-height:1}
.tool i{font-style:normal;font-size:20px}.tool span{font-size:9.5px;margin-top:2px;letter-spacing:-.5px}
.tool em{position:absolute;right:-4px;top:-5px;background:#ff4d6d;color:#fff;border-radius:99px;min-width:19px;height:19px;font-style:normal;font-size:12px;display:grid;place-items:center}
.tool.small{width:40px;height:50px}.tool.small i{font-size:20px}
.tool:active{transform:translateY(3px);box-shadow:0 1px 0 #0003}
.tool[aria-pressed=false]{opacity:.55;background:#e5e5e5}
.tool:disabled{opacity:.4}

.stage{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
#history{flex:1;min-height:70px;overflow-y:auto;background:#ffffffb0;border-radius:22px;padding:10px 8px 8px;display:flex;flex-direction:column;gap:8px;
  box-shadow:inset 0 3px 0 #fff,inset 0 -3px 8px #0001;scroll-behavior:smooth}
#history::-webkit-scrollbar{width:0}
#history::before{content:"";flex:1}  /* ふきだしは した づめ */
.row{display:flex;align-items:flex-end;gap:6px;animation:popin .38s cubic-bezier(.3,1.6,.5,1) both}
.row.me{flex-direction:row-reverse}
.row .avatar{width:34px;height:34px;flex:none}
.row .avatar .mascot{width:100%;height:100%}
.bubble{position:relative;padding:5px 14px 6px;border-radius:20px;font-size:26px;line-height:1.25;letter-spacing:.04em;max-width:78%;word-break:break-all;box-shadow:0 3px 0 #0002}
.row.bot .bubble{background:#ffe066;border-bottom-left-radius:6px}
.row.me .bubble{background:#74c0fc;border-bottom-right-radius:6px}
.bubble .last{color:#e8590c;background:#fff;border-radius:8px;padding:0 3px;margin-left:2px;display:inline-block;transform:translateY(-1px)}
.row.me .bubble .last{color:#7048e8}
.row.bot.thinking .bubble{font-size:22px;padding:6px 18px}
.dots span{display:inline-block;animation:jump .9s infinite}.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}

.entry{flex:none;display:flex;flex-direction:column;gap:6px}
#nextbar{display:flex;align-items:center;justify-content:center;gap:8px;background:#ff4d6d;color:#fff;border-radius:18px;padding:3px 12px;font-size:20px;box-shadow:0 4px 0 #c92a4b}
#nextbar b{background:#fff;color:#ff4d6d;border-radius:14px;min-width:54px;text-align:center;font-size:42px;line-height:1.1;padding:0 8px;box-shadow:inset 0 -4px 0 #ffd6de;animation:pulse2 1.2s ease-in-out infinite}
#nextbar.flash b{animation:bump .5s}
#inputbar{position:relative;height:62px;background:#fff;border:4px solid #7048e8;border-radius:20px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 0 #5f3dc4}
#word{font-size:40px;line-height:1;letter-spacing:.06em;white-space:nowrap;color:#2b2b2b;max-width:100%;padding:0 8px;min-height:44px;display:flex;align-items:center}
#word:empty::after{content:"ここに かくよ";font-size:22px;color:#b0a8c8}
#word .ch{display:inline-block;animation:keypop .22s cubic-bezier(.3,1.8,.5,1)}
#word .cursor{display:inline-block;width:4px;height:36px;background:#ff4d6d;margin-left:3px;border-radius:2px;animation:blink 1s steps(1) infinite}
#word.shake{animation:shake .4s}
#toast{position:absolute;inset:0;background:#fff3bf;color:#c92a2a;display:flex;align-items:center;justify-content:center;font-size:21px;text-align:center;line-height:1.15;padding:0 8px;opacity:0;pointer-events:none;transform:translateY(100%);transition:.22s}
#toast.show{opacity:1;transform:none}

/* ---- ひらがなボード ---- */
#kb{flex:none;display:grid;grid-template-columns:repeat(5,1fr) 1.15fr;grid-template-rows:repeat(10,var(--kh));gap:var(--gap);margin-top:8px}
.key{border-radius:14px;font-size:clamp(22px,calc(var(--kh) * .56),32px);font-weight:900;display:flex;align-items:center;justify-content:center;padding:0;
  background:var(--c);color:var(--t,#fff);box-shadow:0 4px 0 var(--d);text-shadow:0 2px 0 #0002;transition:transform .07s,box-shadow .07s;position:relative}
.key:active,.key.press{transform:translateY(3px) scale(.92);box-shadow:0 1px 0 var(--d)}
.key.blank{visibility:hidden}
.key.fn{--c:#868e96;--d:#495057;font-size:clamp(17px,calc(var(--kh)*.4),24px)}
.key.del{grid-row:1/3;grid-column:6;--c:#ff6b6b;--d:#c92a2a;font-size:clamp(22px,calc(var(--kh)*.5),30px)}
.key.dk{grid-row:3;grid-column:6;font-size:clamp(26px,calc(var(--kh)*.7),38px)}
.key.hd{grid-row:4;grid-column:6;font-size:clamp(26px,calc(var(--kh)*.7),38px)}
.key.sm{grid-row:5;grid-column:6}
.key.ok{grid-row:6/11;grid-column:6;--c:#20c997;--d:#099268;font-size:clamp(26px,7vw,36px);writing-mode:vertical-rl;letter-spacing:.3em;text-orientation:upright;animation:pulse 1.6s ease-in-out infinite}
.key.ok:disabled{--c:#adb5bd;--d:#868e96;animation:none}
.r0{--c:#ff6b6b;--d:#c92a2a}.r1{--c:#ff922b;--d:#d9480f}.r2{--c:#fcc419;--d:#e67700;--t:#5a3a00}.r3{--c:#94d82d;--d:#5c940d;--t:#2b4a00}
.r4{--c:#38d9a9;--d:#087f5b;--t:#04402e}.r5{--c:#4dabf7;--d:#1864ab}.r6{--c:#748ffc;--d:#364fc7}.r7{--c:#da77f2;--d:#9c36b5}
.r8{--c:#f783ac;--d:#c2255c}.r9{--c:#a9805a;--d:#6d4a2a}
.key.dk,.key.hd,.key.sm{--c:#845ef7;--d:#5f3dc4}
.key.long{--c:#868e96;--d:#495057}

/* ---- ダイアログ ---- */
#dialog{position:fixed;inset:0;background:#2b1d5a99;display:flex;align-items:center;justify-content:center;padding:16px;z-index:50;animation:fade .2s}
.card{background:#fff;border-radius:30px;padding:16px 18px 18px;width:min(92vw,400px);max-height:92dvh;overflow:auto;text-align:center;box-shadow:0 8px 0 #0003;animation:popin .45s cubic-bezier(.3,1.6,.5,1);display:flex;flex-direction:column;align-items:center;gap:8px}
#dlg-mascot .mascot{width:120px;height:120px;animation:bob 1.4s ease-in-out infinite}
#dlg-title{font-size:30px;line-height:1.2;color:#e8590c}
#dlg-body{font-size:21px;line-height:1.4}
#dlg-body .big{font-size:44px;color:#7048e8}
#dlg-body .newrec{color:#ff4d6d;font-size:26px;animation:pulse2 .9s infinite}
#dlg-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.btn{border-radius:999px;padding:11px 26px;font-size:26px;background:var(--c,#ffd43b);box-shadow:0 5px 0 var(--d,#d97706);color:#4a2500;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--d,#d97706)}
.btn.green{--c:#20c997;--d:#099268;color:#fff}.btn.gray{--c:#dee2e6;--d:#adb5bd;color:#495057;font-size:20px}
.btn.red{--c:#ff6b6b;--d:#c92a2a;color:#fff}
.chips{display:flex;flex-direction:column;gap:8px;width:100%}
.chip-word{font-size:32px;background:#e7f5ff;color:#1864ab;border-radius:18px;padding:6px;box-shadow:0 4px 0 #a5d8ff}
.chip-word:active{transform:translateY(3px);box-shadow:0 1px 0 #a5d8ff}

/* ---- について ---- */
.about{padding:6px 2px;gap:8px}
.about h2{margin:4px 0;text-align:center;font-size:26px;color:#7048e8}
.about-body{flex:1;overflow:auto;background:#fffc;border-radius:20px;padding:10px 14px;font-size:17px;line-height:1.5;font-weight:700;-webkit-user-select:text;user-select:text}
.about-body h3{margin:10px 0 2px;font-size:18px;color:#e8590c}
.about-body p{margin:6px 0}.about-body [lang=en]{font-size:13px;line-height:1.45;font-weight:500;color:#444}
.about-body a{color:#1c7ed6;word-break:break-all}

/* ---- キャラの きもち ---- */
.mascot .m-eyes-happy,.mascot .m-eyes-sad,.mascot .m-mouth-open,.mascot .m-mouth-sad,.mascot .m-think{display:none}
.mascot.happy .m-eyes-open,.mascot.sad .m-eyes-open,.mascot.cheer .m-eyes-open{display:none}
.mascot.happy .m-eyes-happy,.mascot.cheer .m-eyes-happy{display:inline}
.mascot.happy .m-mouth-open,.mascot.cheer .m-mouth-open{display:inline}
.mascot.happy .m-mouth-smile,.mascot.cheer .m-mouth-smile,.mascot.sad .m-mouth-smile{display:none}
.mascot.sad .m-eyes-sad{display:inline}.mascot.sad .m-mouth-sad{display:inline}
.mascot.think .m-think{display:inline}.mascot.think .m-pupil{transform:translate(-3px,-5px)}
.mascot .m-body{transform-origin:70px 130px}
.mascot.happy .m-body,.mascot.cheer .m-body{animation:hop .5s ease-out}
.mascot.cheer .m-armL{animation:wave .45s ease-in-out infinite alternate;transform-origin:30px 82px}
.mascot.cheer .m-armR{animation:wave .45s ease-in-out infinite alternate-reverse;transform-origin:110px 82px}
.mascot .m-leaf{transform-origin:70px 30px;animation:sway 2.2s ease-in-out infinite}
.mascot .m-tear{animation:tear 1.2s infinite}
.mascot.sad .m-body{animation:droop 1.6s ease-in-out infinite}

/* ---- コンフェッティ ---- */
#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:80}
#confetti i{position:absolute;left:var(--x);top:var(--y);font-style:normal;font-size:var(--s);animation:confetti var(--t) cubic-bezier(.2,.7,.4,1) forwards;color:var(--c)}

@keyframes popin{0%{transform:scale(.3) translateY(14px);opacity:0}100%{transform:none;opacity:1}}
@keyframes keypop{0%{transform:scale(.2) translateY(10px)}100%{transform:none}}
@keyframes pulse{50%{transform:scale(1.045)}}
@keyframes pulse2{50%{transform:scale(1.09)}}
@keyframes bob{50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes bump{30%{transform:scale(1.35)}100%{transform:none}}
@keyframes hop{30%{transform:translateY(-12px) scaleY(1.06)}60%{transform:scaleY(.92) scaleX(1.06)}100%{transform:none}}
@keyframes wave{to{transform:rotate(-35deg)}}
@keyframes sway{50%{transform:rotate(5deg)}}
@keyframes droop{50%{transform:scaleY(.96) translateY(2px)}}
@keyframes tear{0%{transform:translateY(0);opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes jump{40%{transform:translateY(-6px)}}
@keyframes blink{50%{opacity:0}}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
@keyframes fade{from{opacity:0}}
@keyframes confetti{0%{transform:translate(0,0) rotate(0) scale(.4);opacity:1}
  70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important}}

/* ---- ひろい がめん(PC・よこむき) ---- */
@media (min-width:860px) and (orientation:landscape){
  :root{--kh:clamp(38px, calc((100dvh - 140px) / 10), 54px)}
  #app{max-width:1000px}
  #game{display:grid;grid-template-columns:1fr 400px;grid-template-rows:auto 1fr;column-gap:16px}
  #game .top{grid-column:1/3}
  #game .stage{grid-column:1;grid-row:2}
  #game #kb{grid-column:2;grid-row:2;margin-top:0;align-self:start}
}
@media (max-height:640px){.top{height:48px}.mascot-wrap{width:44px;height:44px}.tool{height:42px}#nextbar b{font-size:34px}#inputbar{height:52px}#word{font-size:34px}}
/* ちいさい スマホ(たて 700px いか): うえの ぶぶんを ぎゅっと */
@media (max-height:700px) and (max-width:859px){
  :root{--kh:clamp(31px, calc((100dvh - 282px) / 10), 48px);--gap:3px}
  .top{height:42px}.mascot-wrap{width:40px;height:40px}.tool{height:38px}
  .entry{gap:4px}
  #nextbar{padding:0 10px;font-size:16px;box-shadow:0 3px 0 #c92a4b}#nextbar b{font-size:28px;min-width:44px}
  #inputbar{height:44px}#word{font-size:30px;min-height:36px}#word:empty::after{font-size:18px}
  #kb{margin-top:5px}.key{border-radius:11px}
}

/* ---------- それってどういう いみ？ ---------- */
#nextbar{position:relative}
#btn-mean{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:3px;height:max(30px,calc(100% - 10px));max-height:40px;padding:0 10px 0 6px;border-radius:999px;background:#fff;color:#e8590c;box-shadow:0 3px 0 #ffb3c1;line-height:1}
#btn-mean .qm{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ffd43b;font-size:16px;color:#d9480f}
#btn-mean .qt{font-size:14px;letter-spacing:-.3px}
#btn-mean:active{transform:translateY(calc(-50% + 2px));box-shadow:0 1px 0 #ffb3c1}
#btn-mean:disabled{opacity:.45}
.row.bot .bubble[data-w]{cursor:pointer;padding-right:8px}
.row.bot .bubble[data-w]:active{transform:translateY(2px);box-shadow:0 1px 0 #0002}
.row.bot .bubble[data-w]:focus-visible{outline:3px solid #7048e8;outline-offset:2px}
.bubble .q{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:6px;border-radius:50%;background:#fff;color:#e8590c;font-style:normal;font-size:16px;line-height:1;vertical-align:3px;box-shadow:0 2px 0 #0002;font-weight:700}
.btn.blue{--c:#4dabf7;--d:#1971c2;color:#fff}
#dlg-body .say{position:relative;background:#fff4e6;border-radius:22px;padding:10px 14px 8px;margin-top:6px;min-width:min(78vw,300px);box-shadow:inset 0 -3px 0 #ffe8cc}
#dlg-body .say::before{content:"";position:absolute;left:50%;top:-10px;margin-left:-10px;border:10px solid transparent;border-top:0;border-bottom-color:#fff4e6}
#dlg-body .say p{margin:0}
#dlg-body .say .m{font-size:27px;line-height:1.35;color:#e8590c;margin:2px 0}
#dlg-body .say .d{font-size:19px;color:#495057;margin-left:2px;white-space:nowrap}
#dlg-body .say .m{word-break:keep-all;overflow-wrap:anywhere}
#dlg-body .say .note{font-size:15px;color:#868e96;margin-top:4px}
@media (max-height:700px){#dlg-mascot .mascot{width:84px;height:84px}#dlg-title{font-size:24px}#dlg-body .say .m{font-size:24px}.btn{padding:9px 22px;font-size:22px}}
@media (max-height:700px) and (max-width:859px){#btn-mean{right:5px;padding:0 8px 0 5px}#btn-mean .qm{width:20px;height:20px;font-size:14px}#btn-mean .qt{font-size:12px}.bubble .q{width:22px;height:22px;font-size:14px}}