/* ページ全体のレイアウト */
* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation; /*タブレット連打時の拡大防止 */
}
html { margin: 0; height: 100%; }
body {
  margin: 0;
  height: 100vh;
  font-family: sans-serif;
  background: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  margin: 0 auto;
  background: #ffffff;
  border: 2px solid #333;
  width: 100%;
  max-width: 1196px;
  height: 540px;
  display: flex;
  flex-direction: column;
}
.game-header {
  height: 50px;
  padding: 0 14px;
  background: #ffffff;
  flex: 0 0 50px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.header-spacer {
  min-width: 0;
}
.back-btn {
  justify-self: start;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg,#7ed7ff 0%,#2f95df 72%,#1b70bd 100%);
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  padding: 7px 16px 8px;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(0,80,140,.35);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.75),
    inset 0 -3px 0 rgba(0,76,150,.35),
    0 4px 0 #0e5f9f,
    0 7px 12px rgba(40,110,170,.25);
}
.back-btn:hover {
  background: linear-gradient(180deg,#9be2ff 0%,#3aa8ee 72%,#2078c8 100%);
}
.back-btn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 -2px 0 rgba(0,76,150,.3),
    0 1px 0 #0e5f9f,
    0 4px 8px rgba(40,110,170,.2);
}
.back-btn[hidden] {
  display: none;
}
.game-title {
  font-weight: bold;
  font-size: 22px;
  color: #155a9c;
  text-align: center;
}
.best-score {
  justify-self: end;
  font-weight: bold;
  font-size: 16px;
  color: #d44000;
  white-space: nowrap;
}
.best-score:empty {
  display: none;
}
.game-main {
  position: relative;
  background: #ffffff;
  flex: 1;
  overflow: hidden;
}

/* ゲーム画面 */
#game-wrapper{
    position:relative;width:100%;max-width:none;height:100%;
    border-radius:0;overflow:hidden;
    cursor:none;
  }
  /* 背景SVG */
  #bg-svg{position:absolute;inset:0;width:100%;height:100%;display:block;}

  /* HUD */
  #hud{
    position:absolute;top:0;left:0;right:0;height:52px;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 22px;
    background:rgba(255,245,247,0.92);
    border-bottom:3px solid #f5b8c4;
    z-index:20;
    backdrop-filter:blur(4px);
  }
  .hud-block{
    display:flex;align-items:center;gap:5px;
    font-family:sans-serif;font-size:20px;color:#8a2030;
  }
  #score-val{color:#d44000;}
  #timer-val{color:#1a7acc;}
  #timer-val.danger{color:#dd0000;animation:blk .5s step-end infinite;}
  @keyframes blk{50%{opacity:.25}}

  /* 進行バー */
  #prog-wrap{
    position:absolute;top:52px;left:0;right:0;height:9px;
    background:rgba(230,140,150,0.25);z-index:20;
  }
  #prog-bar{
    height:100%;width:0%;
    background:linear-gradient(90deg,#ff6fa0,#ffb347);
    transition:width .3s ease;
    box-shadow:0 0 8px rgba(255,100,130,.5);
  }

  /* 菌 */
  .germ{
    position:absolute;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:0;line-height:1;user-select:none;
    will-change:left,top;cursor:none;
    animation:gBob var(--bob) ease-in-out infinite alternate;z-index:12;
    overflow:visible;
  }
  .germ::before,
  .germ::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
  }
  .germ::before{
    width:10px;
    height:10px;
    left:26%;
    top:29%;
    background:#251331;
    box-shadow:20px 1px 0 #251331;
  }
  .germ::after{
    width:18px;
    height:9px;
    left:50%;
    top:56%;
    border-bottom:4px solid #251331;
    transform:translateX(-50%);
  }
  .germ-face{
    position:absolute;
    inset:15%;
    border-radius:50%;
    background:
      radial-gradient(circle at 26% 70%, rgba(255,255,255,.34) 0 8%, transparent 9%),
      radial-gradient(circle at 76% 23%, rgba(255,255,255,.28) 0 7%, transparent 8%),
      radial-gradient(circle at 64% 72%, rgba(0,0,0,.12) 0 7%, transparent 8%);
  }
  .germ-spike{
    position:absolute;
    width:18%;
    height:18%;
    border-radius:50%;
    background:inherit;
    border:inherit;
  }
  .germ-spike:nth-child(2){left:42%;top:-10%;}
  .germ-spike:nth-child(3){right:-9%;top:24%;}
  .germ-spike:nth-child(4){right:8%;bottom:-7%;}
  .germ-spike:nth-child(5){left:8%;bottom:-7%;}
  .germ-spike:nth-child(6){left:-9%;top:24%;}
  .germ-spike:nth-child(7){left:14%;top:-5%;}
  .germ-spike:nth-child(8){right:14%;top:-5%;}
  .germ.germ-kind-1::after{
    border-bottom:0;
    border-top:4px solid #251331;
    top:62%;
  }
  .germ.germ-kind-2::after{
    width:16px;
    height:16px;
    border:3px solid #251331;
    border-top:0;
    border-left:0;
    top:49%;
    transform:translateX(-50%) rotate(45deg);
  }
  .germ.germ-kind-3::before{
    box-shadow:18px 0 0 #251331,9px 17px 0 -2px rgba(255,255,255,.85);
  }
  @keyframes gBob{
    from{transform:translateY(0) scale(1) rotate(-4deg);}
    to  {transform:translateY(-8px) scale(1.07) rotate(4deg);}
  }
  .germ.hit{animation:gHit .18s ease forwards!important;}
  @keyframes gHit{
    0%  {transform:scale(1);opacity:1;}
    45% {transform:scale(1.6);filter:brightness(2.5);opacity:.9;}
    100%{transform:scale(0);opacity:0;}
  }

  /* 歯ブラシ */
  #brush{
    position:absolute;pointer-events:none;z-index:25;
    width:140px;height:76px;transform:translate(-50%,-50%);
  }

  /* 泡 */
  .foam{
    position:absolute;border-radius:50%;
    background:rgba(255,255,255,.88);pointer-events:none;z-index:18;
    animation:fmAnim .55s ease-out forwards;
  }
  @keyframes fmAnim{0%{transform:scale(.3);opacity:1;}100%{transform:scale(2.4);opacity:0;}}

  /* 得点表示 */
  .score-pop{
    position:absolute;font-family:sans-serif;font-size:28px;
    color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.45);
    pointer-events:none;z-index:30;white-space:nowrap;
    animation:popUp .8s ease-out forwards;
  }
  @keyframes popUp{
    0%  {transform:translate(-50%,-50%) scale(.5);opacity:1;}
    60% {transform:translate(-50%,-170%) scale(1.2);opacity:1;}
    100%{transform:translate(-50%,-230%) scale(1);opacity:0;}
  }

  /* ステージ表示 */
  #lvl-badge{font-family:sans-serif;font-size:18px;color:#8a2030;}

  /* 画面オーバーレイ */
  .screen{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;z-index:50;
    background:rgba(255,240,243,.93);backdrop-filter:blur(5px);
  }
  .screen h1{
    font-family:sans-serif;font-size:56px;color:#c01840;
    text-shadow:3px 3px 0 rgba(200,80,100,.25);margin-bottom:10px;
    animation:sBounce .7s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes sBounce{from{transform:scale(.3);opacity:0;}to{transform:scale(1);opacity:1;}}
  .screen p{font-size:18px;color:#7a2030;margin-bottom:26px;text-align:center;max-width:520px;line-height:1.75;}
  .big-btn{
    font-family:sans-serif;font-size:26px;color:#fff;
    background:linear-gradient(135deg,#ff6fa0,#ff9f40);
    border:none;border-radius:50px;padding:14px 42px;cursor:pointer;
    box-shadow:0 6px 20px rgba(220,80,80,.4);transition:transform .12s,box-shadow .12s;
  }
  .big-btn:hover{transform:scale(1.07);box-shadow:0 10px 28px rgba(220,80,80,.55);}
  .big-btn:active{transform:scale(.96);}
  .mascot{font-size:68px;margin-bottom:6px;animation:mWave 1.8s ease-in-out infinite;}
  @keyframes mWave{0%,100%{transform:rotate(-6deg) scale(1);}50%{transform:rotate(6deg) scale(1.06);}}
  .rscore{font-family:sans-serif;font-size:36px;color:#d44000;margin-bottom:8px;}