* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; /*タブレット連打時の拡大防止 */
}

html {
  margin: 0;
  height: 100%;
}

body {
  margin: 0;
  height: 100vh;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  background: #f2f2f2;

  display: flex;
  justify-content: center;
  align-items: center;
}

.container{
  margin: 0 auto;
  border: 2px solid #333;

  width: 100%;
  max-width: 1196px;
  height: 540px;

  display: flex;
  flex-direction: column;
}

.game-header{
  align-items: center;
}

.stars{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(#fff 1.5px,transparent 2px),radial-gradient(#ffe9a8 1px,transparent 1.6px),radial-gradient(#bfe7ff 2px,transparent 2.6px);
  background-size:130px 110px,77px 91px,211px 173px;background-position:0 0,30px 40px,80px 10px;
  animation:tw 3s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.55}to{opacity:1}}
#field{position:absolute;left:0;top:0;bottom:0;right:350px;overflow:hidden}
#earth{position:absolute;left:-15%;width:130%;height:340px;border-radius:50%;
  background:
   radial-gradient(ellipse 90px 34px at 22% 24%,#5fd35f 0 99%,transparent 100%),
   radial-gradient(ellipse 130px 30px at 58% 16%,#5fd35f 0 99%,transparent 100%),
   radial-gradient(ellipse 70px 26px at 82% 30%,#5fd35f 0 99%,transparent 100%),
   radial-gradient(circle at 50% 0,#4cc3ff,#1d7fe0 55%,#1450a8);
  box-shadow:0 -6px 0 4px #9be4ff88,0 -14px 30px 6px #7fd8ff66}
#earth::after{content:"";position:absolute;left:46%;top:-6px;width:70px;height:34px;border-radius:40px;background:#ffffffcc;box-shadow:-120px 10px 0 -4px #ffffffaa,150px 8px 0 -2px #ffffffaa}
#met{position:absolute;left:0;top:0;width:130px;height:130px;display:none;will-change:transform}
.rock{position:absolute;inset:0;border-radius:52% 46% 55% 45%;
  background:radial-gradient(circle at 30% 28%,#d9a36a,#a8683a 55%,#6e3d22);
  box-shadow:inset -10px -10px 0 #0003,0 0 26px 8px #ff9a3c99;animation:spin 6s linear infinite}
.rock::before{content:"";position:absolute;left:14%;top:56%;width:26px;height:20px;border-radius:50%;background:#6e3d22;box-shadow:52px -34px 0 -3px #6e3d22,60px 20px 0 -6px #6e3d22}
@keyframes spin{to{transform:rotate(360deg)}}
.tail{position:absolute;left:28px;bottom:80px;width:74px;height:170px;border-radius:50% 50% 40% 40%;
  background:linear-gradient(to top,#ffb52e,#ff6a2e88 55%,transparent);filter:blur(4px);animation:fl .25s infinite alternate}
@keyframes fl{to{transform:scaleY(1.15);opacity:.8}}
#q,.dq{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;
  text-shadow:0 3px 0 #5a2d12,2px 2px 0 #5a2d12,-2px 2px 0 #5a2d12,0 0 8px #0006;}
.boom{position:absolute;pointer-events:none;border-radius:50%}
.flash{width:60px;height:60px;margin:-30px;background:radial-gradient(#fff,#ffe14d 40%,#ff7a2e 70%,transparent 72%);animation:fx .6s ease-out forwards}
@keyframes fx{to{transform:scale(6);opacity:0}}
.part{width:16px;height:16px;margin:-8px;background:#ffd23f;animation:pt .8s ease-out forwards}
@keyframes pt{to{transform:translate(var(--dx),var(--dy)) scale(.2) rotate(360deg);opacity:0}}
#msg{position:absolute;left:0;right:0;top:170px;text-align:center;font-size:54px;font-weight:900;color:#fff;
  text-shadow:0 4px 0 #e0457b,3px 3px 0 #e0457b,-3px 3px 0 #e0457b;opacity:0;pointer-events:none}
#msg.show{animation:pop 1s ease-out}
#msg.speed-up{color:#ffe66d;text-shadow:0 4px 0 #8a3c00,3px 3px 0 #8a3c00,-3px 3px 0 #8a3c00}
#msg.show.speed-up{animation-duration:1.6s}
@keyframes pop{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.15)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-30px)}}
#score{background:#fff;border-radius:40px;font-weight:900;}
button{font-family:inherit;cursor:pointer;border:0;color:#fff;font-weight:900;touch-action:manipulation}
button:active{transform:translateY(4px);box-shadow:none!important}
#quit{background:#ff8a3d;}
#pad{position:absolute;right:0;top:0;bottom:0;width:350px;padding:12px 14px;background:#ffffff26;border-left:5px solid #ffd23f;
  display:flex;flex-direction:column;gap:10px}
#eq{height:84px;border-radius:22px;background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:900;color:#3a2a8a}
#ans{min-width:78px;height:64px;border-radius:14px;background:#fff6c9;border:4px dashed #ffb52e;color:#e0457b;
  display:flex;align-items:center;justify-content:center}
#keys{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px}
#keys button{font-size:44px;border-radius:22px;background:#3fa9f5;box-shadow:0 7px 0 #1f6fb8}
#answer-value{display:inline-block}
#answer-value.wrong-answer{animation:answerFade .5s ease-out .4s forwards}
@keyframes answerFade{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
#best{font-size:clamp(18px,4vw,30px);font-weight:900;color:#ffe66d}
#over .big{font-size:clamp(26px,6vw,48px)}
#met.shake{animation:meteorShake .4s}
@keyframes meteorShake{0%,100%{left:0}20%,60%{left:-12px}40%,80%{left:12px}}
#hitflash{position:absolute;inset:0;background:#ff3b3b;opacity:0;pointer-events:none}
#hitflash.on{animation:hf .8s}
@keyframes hf{0%{opacity:.85}100%{opacity:0}}
.ov{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  background:#150f45cc;text-align:center;z-index:5}
.ov.on{display:flex}
.ov h1{margin:0;color:#fff;text-shadow:0 6px 0 #e0457b,4px 4px 0 #e0457b,-4px 4px 0 #e0457b;letter-spacing:4px}
.ov h2{margin:0;color:#ffe66d}
.ov .big{color:#fff;font-weight:900}
.btn{min-width:300px;padding:0 40px;border-radius:48px;background:#43c463;box-shadow:0 9px 0 #238a3d}
.btn.o{background:#ff8a3d;box-shadow:0 9px 0 #c4561a;}
.demo{position:relative;width:130px;height:130px;animation:bob 1.6s ease-in-out infinite alternate}
.demo .rock{animation-duration:8s}
@keyframes bob{to{transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.stars,.demo,.tail,.rock{animation:none}}

.container { position:relative; overflow:hidden; background:radial-gradient(circle at 12% 18%,#ffe66d 0 26px,transparent 27px),radial-gradient(ellipse at 50% 100%,#6a3fc8 0,transparent 60%),linear-gradient(#150f45,#2b1a75 55%,#4a2a9a); }
.game-main { position:relative; flex:1; min-height:0; overflow:hidden; display:grid; place-items:center; }
.game-header { position:relative; z-index:10; height:50px; flex:0 0 50px; padding:4px 12px; background:transparent; display:grid; grid-template-columns:1fr auto 1fr; gap:8px; color:#fff; }
.game-header h1 { margin:0; font-size:22px; white-space:nowrap; }
.info { display:flex; align-items:center; justify-self:start; gap:8px; background:#fff; border-radius:40px; padding:4px 16px; font-size:18px; font-weight:bold; color:#444; box-shadow:0 2px 0 #e8a000; }
.info #score { padding:0; border:0; font-size:22px; color:#ff6f3c; }
.header-actions { display:flex; align-items:center; justify-self:end; gap:10px; }
#quit { min-width:80px; height:36px; font-size:18px; border-radius:32px; box-shadow:0 3px 0 #c4561a; }
.sound-btn { height:38px; min-width:104px; padding:4px 12px; border:3px solid #f2b321; border-radius:50px; font-size:18px; font-weight:700; letter-spacing:1px; background:#fff0ad; color:#694100; box-shadow:0 3px 0 #d89500; }
.sound-btn:hover { background:#ffe680; border-color:#dc9700; color:#5a3500; }
.sound-btn.sound-off { background:#e9edf1; border-color:#aeb7c0; color:#66717b; box-shadow:0 3px 0 #929ba4; }
.container[data-screen="title"] .game-header { position:absolute; top:0; left:0; right:0; }
.container[data-screen="title"] .info, .container[data-screen="title"] .game-header h1, .container[data-screen="title"] #quit { visibility:hidden; }
.container[data-screen="title"] #field, .container[data-screen="title"] #pad, .container[data-screen="over"] #pad { visibility:hidden; }
.container[data-screen="over"] #quit { visibility:hidden; }
#earth { top:calc(100% - 88px); }
.ov { gap:16px; }
.ov h1 { font-size:clamp(30px,6.8vw,76px); }
.ov h2 { font-size:clamp(17px,3vw,30px); }
.ov .big { font-size:48px; }
.btn { height:78px; font-size:36px; }
.btn.o { height:64px; font-size:28px; }
#q,.dq { font-size:30px; letter-spacing:0; }
#eq { font-size:36px; }
#eq .word { font-size:20px; }
#over { background:#150f45bb; }
#over::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(#ffe66d 2px,transparent 3px),radial-gradient(#bfe7ff 3px,transparent 4px); background-size:89px 97px,151px 137px; animation:resultStars 8s linear infinite; }
@keyframes resultStars { to { background-position:89px 97px,-151px 137px; } }
@media(max-width:650px) {
 .game-header { padding:4px; gap:4px; }
 .game-header h1 { font-size:14px; }
 .info { padding:4px 7px; font-size:12px; gap:4px; }
 .info #score { font-size:18px; }
 .header-actions { gap:5px; }
 #quit { min-width:48px; font-size:14px; }
 .sound-btn { min-width:64px; padding:4px; font-size:14px; }
 #pad { width:46%; padding:10px 7px; border-left-width:3px; }
 #field { right:46%; }
 #eq { gap:3px; font-size:24px; height:70px; }
 #eq .word { font-size:13px; }
 #ans { min-width:38px; height:52px; }
 #keys { gap:8px; }
 #keys button { font-size:32px; border-radius:14px; }
 #msg { font-size:30px; }
 .btn { min-width:260px; }
}