/* こっきラン: 九九ランの style.css に足す分 */
.qflag{display:block;margin:12px auto 0;width:clamp(150px,30vw,250px);height:auto;aspect-ratio:4/3;border-radius:4px;
  background:#fff;border:5px solid #fff;box-shadow:0 8px 0 rgba(74,46,26,.25);opacity:0}
.qflag.on{opacity:1}
.qflag.pop{animation:qpop .35s ease-out}
.qbig.name{margin-top:8px;font-size:clamp(38px,8vw,72px)}
.miss li{display:flex;align-items:center;gap:8px}
.miss li canvas{width:40px;height:30px;border-radius:3px}
.kuku{margin-top:10px;font-size:15px}
.kuku a{color:#7a5a3e}
@media (orientation:landscape) and (max-height:900px){
  .qflag{width:clamp(120px,22vh,200px);margin-top:6px}
  .qbig.name{margin-top:4px;font-size:clamp(34px,6vh,60px)}
}
/* スマホ幅で字が割れる・はみ出すのを防ぐ(10/18 見本で確認) */
@media (max-width:620px){
  #hud{padding-left:12px;padding-right:12px}
  .chips{gap:6px}
  .chip{padding:8px 10px;gap:5px}.chip small{font-size:13px}.chip small.u{font-size:11px}.chip b{font-size:22px}
  #hearts svg{width:18px;height:18px}
  .logo{font-size:50px}
  .dan button{font-size:15px;white-space:nowrap}
  .res dt{font-size:18px;white-space:nowrap}
}
/* 上の国旗も重ね描きを使い回す(九九ランの文字と同じ。iPadで毎回描き直すとカクつく) */
.qflag{will-change:transform,opacity;transform:translateZ(0)}
/* あそびかた(こっき→なまえ / なまえ→こっき)と めちゃムズ(10/20) */
.dan.mode{margin-top:18px}
.dan.mode button{font-size:17px;padding:12px 4px}
.dan.lv4{margin-top:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.dan.lv4 button{padding:12px 4px}
.dan button.meccha{color:var(--red)}
.dan button.meccha.on{background:var(--red);color:#fff;box-shadow:inset 0 0 0 3px #8f1d24,0 4px 0 #8f1d24}
.mhint{margin-top:8px;font-size:14px;color:var(--red);font-weight:700}
.mhint[hidden]{display:none}
.panel{max-height:calc(100% - 24px);overflow-y:auto;touch-action:pan-y}
@media (max-width:620px){ .dan.mode button{font-size:15px} }