:root{
  --bg:#e6f2ec; --panel:#ffffff; --ink:#1f3838; --sub:#5d7a76; --line:#c9ddd5;
  --chance:#ffcf33; --good:#23a35f; --ok:#c99417; --bad:#e04356;
  --k1:#ff8a3d; --k2:#3d7eff; --k3:#26a867; --k4:#ff5c8a;
  --skin:#f7d6bd; --face-ink:#2a2320;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#142625; --panel:#1f3634; --ink:#e6f3ee; --sub:#9bb9b3; --line:#2f4a47;
    --chance:#f2c21f; --good:#3cc47a; --ok:#e0ac2b; --bad:#ff6275;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#142625; --panel:#1f3634; --ink:#e6f3ee; --sub:#9bb9b3; --line:#2f4a47;
  --chance:#f2c21f; --good:#3cc47a; --ok:#e0ac2b; --bad:#ff6275;
  color-scheme: dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  font-weight:500; -webkit-user-select:none; user-select:none;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; overflow:hidden;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button:focus-visible{outline:3px solid var(--k2);outline-offset:3px}
.screen{display:none;height:100dvh;max-width:520px;margin:0 auto;flex-direction:column;
  padding:max(14px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom))}
.screen.active{display:flex}

/* ===== title ===== */
#title{overflow-y:auto;gap:18px}
.logo{margin-top:10px;text-align:center}
.logo h1{font-weight:900;font-size:clamp(38px,11vw,54px);letter-spacing:.02em;line-height:1.1;position:relative;display:inline-block}
.logo h1 span{display:inline-block;background:var(--panel);border:3px solid var(--ink);border-radius:22px;padding:4px 16px 8px;position:relative}
.logo h1 span::after{content:"";position:absolute;left:28px;bottom:-14px;width:20px;height:20px;background:var(--panel);
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:skewY(35deg) rotate(20deg)}
.logo p{margin-top:18px;color:var(--sub);font-size:15px}
.howto{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:14px 16px;font-size:14px;line-height:1.75}
.howto b{font-weight:900}
.pick-h{font-weight:900;font-size:17px;margin-top:4px}
.cards{display:flex;flex-direction:column;gap:10px;padding-bottom:10px}
.card{display:flex;align-items:center;gap:12px;text-align:left;background:var(--panel);border:2px solid var(--ink);
  border-radius:18px;padding:10px 14px 10px 10px;box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.card:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.card .av{width:64px;height:64px;flex:none;border-radius:50%;background:var(--bg)}
.card .nm{font-weight:900;font-size:18px}
.card .lv{font-size:12px;font-weight:700;border-radius:99px;padding:1px 8px;margin-left:6px;vertical-align:2px;color:#fff}
.lv.lv-k1{background:var(--k1)} .lv.lv-k2{background:var(--k2)} .lv.lv-k3{background:var(--k3)} .lv.lv-bad{background:var(--bad)}
.card .ds{font-size:13px;color:var(--sub);margin-top:2px;line-height:1.5}
.card .best{font-size:12px;color:var(--sub);margin-top:2px}

.mute,.pause{width:36px;height:36px;flex:none;border-radius:50%;border:2px solid var(--ink);background:var(--panel);
  display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1}
.pause svg{width:14px;height:14px;display:block;fill:var(--ink)}
.mute-float{position:absolute;top:max(12px,env(safe-area-inset-top));right:16px}
#title{position:relative}
/* ===== game ===== */
#game{gap:10px;position:relative}
.hud{display:flex;align-items:center;gap:8px}
.hud .who{font-weight:900;font-size:15px;white-space:nowrap}
.meter{flex:1;height:18px;border-radius:99px;background:var(--panel);border:2px solid var(--ink);overflow:hidden;position:relative}
.meter i{position:absolute;inset:0;width:60%;background:var(--good);transition:width .35s,background .35s}
.meter em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:900;color:var(--ink)}
.hud .sc{font-weight:900;font-size:15px;min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.sub-hud{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);margin-top:-4px}
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:relative;min-height:0}
.avatar{width:clamp(110px,32vw,150px);aspect-ratio:1;border-radius:50%;background:var(--panel);border:3px solid var(--ink);overflow:hidden;position:relative}
.avatar svg{width:100%;height:100%;display:block}
.avatar.shake{animation:shake .35s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.bubble{position:relative;width:100%;background:var(--panel);border:3px solid var(--ink);border-radius:22px;
  padding:18px 18px;min-height:112px;display:flex;align-items:center;justify-content:center;text-align:center}
.bubble::before{content:"";position:absolute;top:-13px;left:50%;width:22px;height:22px;background:var(--panel);
  border-left:3px solid var(--ink);border-top:3px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.bubble p{font-size:clamp(18px,5.2vw,22px);font-weight:700;line-height:1.6;word-break:auto-phrase;text-wrap:pretty}
.bubble.reply p{color:var(--sub)}
.bubble.reply.good p{color:var(--good)}
.bubble.reply.bad p{color:var(--bad)}
.you{align-self:flex-end;background:var(--ink);color:var(--bg);font-weight:900;font-size:17px;border-radius:18px 18px 4px 18px;
  padding:8px 16px;opacity:0;transform:translateY(8px) scale(.9);transition:opacity .15s,transform .15s}
.you.show{opacity:1;transform:none}
.badge{position:absolute;top:4%;right:2%;font-weight:900;font-size:20px;padding:4px 12px;border-radius:12px;color:#fff;
  opacity:0;transform:rotate(8deg) scale(.6);pointer-events:none}
.badge.pop{animation:pop .9s forwards}
@keyframes pop{0%{opacity:0;transform:rotate(8deg) scale(.6)}18%{opacity:1;transform:rotate(8deg) scale(1.1)}30%{transform:rotate(8deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:rotate(8deg) translateY(-10px)}}
.toast{position:absolute;top:2%;left:50%;transform:translateX(-50%);background:var(--bad);color:#fff;font-weight:900;font-size:15px;
  padding:5px 14px;border-radius:99px;white-space:nowrap;opacity:0;pointer-events:none}
.toast.combo{background:var(--k2)}
.toast.pop{animation:toast 1s forwards}
@keyframes toast{0%{opacity:0;margin-top:8px}15%{opacity:1;margin-top:0}75%{opacity:1}100%{opacity:0}}
/* 一時停止中はアニメーションも止める */
#game.paused *{animation-play-state:paused !important}

.chance{height:30px;border-radius:99px;border:2px dashed var(--line);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.chance i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--chance)}
.chance span{position:relative;font-weight:900;font-size:14px;color:var(--sub)}
.chance.on{border:2px solid var(--ink)}
.chance.on span{color:#1f3838}
.chance.on span::after{content:" いまだ！"}

.keys{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.key{height:clamp(64px,12vh,84px);border-radius:20px;color:#fff;font-weight:900;font-size:clamp(20px,6vw,24px);
  border:2px solid var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform .06s,box-shadow .06s;text-shadow:0 1px 0 rgba(0,0,0,.15)}
.keys.three{grid-template-columns:repeat(3,1fr);gap:8px}
.keys.three .key{height:clamp(76px,14vh,96px);font-size:clamp(17px,4.8vw,22px);padding:0 4px}
.keys.three .key.long{font-size:clamp(14px,4vw,18px)}
.keys.two .key{height:clamp(84px,16vh,112px);font-size:clamp(22px,6.6vw,28px)}
.key.down{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.key.long{font-size:clamp(16px,4.6vw,20px)}
.key[data-slot="0"]{background:var(--k1)}
.key[data-slot="1"]{background:var(--k2)}
.key[data-slot="2"]{background:var(--k3)}
.key[data-slot="3"]{background:var(--k4)}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.chips span{font-size:11px;font-weight:700;border:1.5px solid var(--line);border-radius:99px;padding:0 7px;color:var(--sub)}

/* ===== pause ===== */
.pause-menu{position:absolute;inset:0;z-index:10;background:var(--bg);display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:24px 16px;text-align:center}
#game.paused .pause-menu{display:flex}
.pause-menu h2{font-weight:900;font-size:clamp(28px,8vw,36px)}
.pause-menu p{font-size:14px;color:var(--sub);margin-bottom:10px}
.pause-menu .btn{flex:none;width:100%;max-width:320px}

/* ===== result ===== */
#result{align-items:center;justify-content:center;gap:14px;text-align:center;overflow-y:auto}
#result .avatar{width:120px}
.rank-sub{font-size:14px;color:var(--sub)}
.rank{font-weight:900;font-size:clamp(34px,10vw,44px);line-height:1.2}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.stats div{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:8px 4px}
.stats b{display:block;font-weight:900;font-size:22px;font-variant-numeric:tabular-nums}
.stats small{font-size:12px;color:var(--sub)}
.final-score{font-size:15px;color:var(--sub)}
.final-score b{font-size:28px;color:var(--ink);font-weight:900;font-variant-numeric:tabular-nums}
.final-score .pts{font-size:12px}
.rank.perfect{background:linear-gradient(90deg,var(--k1),var(--k4),var(--k2));-webkit-background-clip:text;background-clip:text;color:transparent}
.new{display:inline-block;background:var(--k4);color:#fff;font-weight:900;font-size:12px;border-radius:99px;padding:1px 8px;margin-left:6px;vertical-align:4px}
.row{display:flex;gap:10px;width:100%}
.btn{flex:1;height:56px;border-radius:18px;font-weight:900;font-size:17px;border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);background:var(--panel)}
.btn.primary{background:var(--k2);color:#fff}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}

@media (prefers-reduced-motion: reduce){
  .avatar.shake{animation:none}
  .badge.pop,.toast.pop{animation-duration:.01s}
}