* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }
  html, body {
    margin: 0; padding: 0; height: 100%;
    font-family: "Hiragino Maru Gothic ProN", "Rounded Mplus 1c", "Yu Gothic", "Meiryo", sans-serif;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(120deg, #ff9a9e, #fad0c4, #fbc2eb, #a1c4fd, #c2e9fb, #fbc2eb, #ff9a9e);
    background-size: 400% 400%;
    animation: bgShift 18s ease infinite;
  }
  @keyframes bgShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }


  .screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    justify-self: stretch;
    align-self: stretch;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .screen.active { display: flex; }

  /* ================= スタート画面 ================= */
  #startScreen {
    background: radial-gradient(ellipse at top, #2b2a63 0%, #10102b 60%, #05050f 100%);
    color: #fff;
    text-align: center;
    position: relative;
  }
  .star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: 0.8;
    animation: twinkle 2.4s ease-in-out infinite;
  }
  @keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
  }
  #startScreen h1 {
    font-size: 54px;
    margin: 0 0 8px 0;
    text-shadow: 0 4px 0 rgba(0,0,0,0.3);
    letter-spacing: 4px;
    color: #ffe66d;
  }
  .moon-deco {
    font-size: 60px;
    margin-bottom: 6px;
    filter: drop-shadow(0 0 20px rgba(255,255,180,0.8));
  }
  .animal-row-deco {
    font-size: 46px;
    margin: 14px 0 26px 0;
    letter-spacing: 12px;
  }
  #startScreen p.desc {
    font-size: 20px;
    margin: 4px 0;
    color: #dcefff;
  }
  .big-btn {
    margin-top: 22px;
    font-size: 32px;
    font-weight: bold;
    padding: 22px 64px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(180deg, #ffd86b, #ffb02e);
    color: #6b3e00;
    box-shadow: 0 8px 0 #c67d00, 0 12px 20px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.08s ease;
    min-width: 260px;
  }
  .big-btn:active {
    transform: translateY(6px);
    box-shadow: 0 2px 0 #c67d00, 0 4px 10px rgba(0,0,0,0.3);
  }

  /* ================= ゲーム画面 ================= */
  #gameScreen {
    background: #eafaf7;
    align-items: stretch; /* 子要素(動物園エリア等)を横いっぱいに広げる */
  }
  .info-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 40px;
    padding: 6px 16px;
    font-size: 18px;
    font-weight: bold;
    color: #444;
    box-shadow: 0 2px 0 #e8a000;
  }
  .info-box .val {
    font-size: 22px;
    color: #ff6f3c;
    min-width: 36px;
    text-align: center;
  }
  #quitBtn {
    height: 40px;
    font-size: 18px;
    font-weight: bold;
    padding: 6px 20px;
    border: none;
    border-radius: 40px;
    background: #ff6b6b;
    color: #fff;
    box-shadow: 0 3px 0 #c23f3f;
    cursor: pointer;
  }
  #quitBtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #c23f3f; }

  .zoo-scene {
    position: relative;
    flex: 1;
    margin: 12px 20px 8px 20px;
    border-radius: 20px;
    overflow: hidden;
    touch-action: none;
    cursor: crosshair;
    box-shadow: inset 0 0 0 5px #ffffff;
  }
  .sky {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, #1b1246 0%, #2c1f63 45%, #3a2b6d 70%, #24312f 100%);
  }
  .sky-star {
    position: absolute;
    width: 3px; height: 3px;
    background: #fff;
    border-radius: 50%;
    animation: twinkle 3s ease-in-out infinite;
  }
  .moon {
    position: absolute;
    top: 8%; right: 8%;
    font-size: 44px;
    filter: drop-shadow(0 0 14px rgba(255,255,200,0.9));
  }
  .tree {
    position: absolute;
    bottom: 12%;
    font-size: 60px;
    filter: brightness(0.5);
  }
  .fence {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 16%;
    background: repeating-linear-gradient(90deg, #5b3a29 0 10px, #4a2e20 10px 14px, transparent 14px 30px);
    opacity: 0.9;
  }
  .animal-target {
    position: absolute;
    font-size: 78px;
    transform: translate(-50%, -50%);
    line-height: 1;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));
    z-index: 2;
  }
  .drag-hint {
    position: absolute;
    left: 50%;
    top: 52%;
    z-index: 8;
    font-size: 52px;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.45));
  }
  .drag-hint.show { animation: dragGuide 1.8s ease-in-out forwards; }
  @keyframes dragGuide {
    0% { opacity: 0; transform: translate(-90px,-50%) scale(1); }
    12% { opacity: 1; transform: translate(-90px,-50%) scale(.88); }
    45% { opacity: 1; transform: translate(70px,-50%) scale(.88); }
    72% { opacity: 1; transform: translate(-35px,-50%) scale(.88); }
    100% { opacity: 0; transform: translate(25px,-50%) scale(1); }
  }
  canvas.darkness {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
  }
  .feedback-pop {
    position: absolute;
    top: 46%; left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    font-size: 60px;
    font-weight: bold;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 4px 0 rgba(0,0,0,0.2);
  }
  .feedback-pop.show {
    animation: popFeedback 0.9s ease forwards;
  }
  @keyframes popFeedback {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
    30% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
    50% { transform: translate(-50%,-50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1); }
  }
  .confetti {
    position: absolute;
    font-size: 26px;
    z-index: 9;
    pointer-events: none;
    animation: confettiFall 1s ease-out forwards;
  }
  @keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(160px) rotate(360deg); opacity: 0; }
  }

  .choices-row {
    flex: none;
    height: 128px;
    display: flex;
    gap: 14px;
    padding: 0 20px 14px 20px;
    justify-content: center;
  }
  .choice-btn {
    flex: 1;
    max-width: 270px;
    min-height: 100px;
    font-size: 28px;
    font-weight: bold;
    border: none;
    border-radius: 22px;
    color: #3a2c00;
    cursor: pointer;
    box-shadow: 0 6px 0 rgba(0,0,0,0.18), 0 8px 14px rgba(0,0,0,0.15);
    transition: transform 0.08s ease;
  }
  .choice-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,0.18); }
  .choice-btn.correct-flash { animation: correctFlash 0.6s ease; }
  .choice-btn.wrong-flash { animation: wrongShake 0.5s ease; }
  @keyframes correctFlash {
    0% { transform: scale(1); }
    40% { transform: scale(1.1); box-shadow: 0 0 0 6px #4caf50, 0 8px 14px rgba(0,0,0,0.15); }
    100% { transform: scale(1); }
  }
  @keyframes wrongShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-8px); }
    80% { transform: translateX(8px); }
  }
  .c0 { background: linear-gradient(180deg,#ffe57f,#ffca28); }
  .c1 { background: linear-gradient(180deg,#a5f3d0,#4fd1a5); }
  .c2 { background: linear-gradient(180deg,#ffd0e0,#ff8fb1); }
  .c3 { background: linear-gradient(180deg,#bcdcff,#78b6ff); }

  /* ================= 終了画面 ================= */
  #endScreen {
    background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.9) 0 5px, transparent 6px), radial-gradient(circle at 88% 24%, rgba(255,255,255,.9) 0 7px, transparent 8px), linear-gradient(145deg, #fff3a8, #ffd6eb 50%, #cdefff);
    text-align: center;
  }
  #endScreen h2 {
    font-size: 44px;
    color: #ff6f3c;
    margin: 2px 0 0;
    text-shadow: 0 3px 0 #fff;
  }
  .result-stars {
    font-size: 34px;
    letter-spacing: 12px;
    animation: resultTwinkle 1.2s ease-in-out infinite alternate;
  }
  @keyframes resultTwinkle {
    from { transform: scale(.92) rotate(-2deg); }
    to { transform: scale(1.08) rotate(2deg); }
  }
  .result-box {
    background: #fff;
    border-radius: 26px;
    padding: 12px 70px;
    box-shadow: 0 8px 0 rgba(0,0,0,0.08), 0 10px 20px rgba(0,0,0,0.15);
    margin: 4px 0 8px;
    border: 4px solid #ffcf4a;
  }
  .result-box .score-num {
    font-size: 70px;
    color: #ff6f3c;
    font-weight: bold;
    line-height: 1;
  }
  .result-box .score-label {
    font-size: 22px;
    color: #777;
  }
  #endScreen p.praise {
    font-size: 24px;
    margin: 4px 0 6px;
    color: #555;
    font-weight: bold;
  }
  .result-friends {
    margin-bottom: 10px;
    font-size: 32px;
    letter-spacing: 8px;
  }
  .end-btns { display: flex; gap: 18px; }
  .small-btn {
    font-size: 24px;
    font-weight: bold;
    padding: 16px 34px;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    box-shadow: 0 6px 0 rgba(0,0,0,0.15), 0 8px 14px rgba(0,0,0,0.15);
  }
  .retry-btn { background: linear-gradient(180deg,#ffd86b,#ffb02e); color:#6b3e00; }
  .home-btn { background: linear-gradient(180deg,#b0e0ff,#6cc3ff); color:#00385c; }
  .small-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,0.15); }

.container {
  width: 100%;
  max-width: 1196px;
  height: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid #333;
}
.game-main {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
}
.game-header {
  width: 100%;
  height: 58px;
  padding: 6px 20px;
  flex: none;
  display: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  background: transparent;
}
.game-header.visible { display: grid; }
.game-header h1 { margin: 0; font-size: 21px; text-align: center; white-space: nowrap; }
.header-info, .header-actions { display: flex; align-items: center; gap: 8px; font-weight: bold; }
.header-info { justify-self: start; }
.header-actions { justify-self: end; }
.btn {
  padding: 12px 20px;
  font-size: 16px;
  border: 2px solid #333;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: background-color .15s, transform .05s;
}
.btn:hover { background: #d6f0ff; }
.btn:active { transform: scale(.98); }
.game-header .btn { padding: 6px 10px; }
.header-btn { height: 38px; border: 0; border-radius: 14px; color: #fff; font-size: 17px; font-weight: 900; cursor: pointer; }
.sound-btn { min-width: 82px; padding: 0 12px; background: linear-gradient(145deg,#7fc4ff,#4a9dff); box-shadow: 0 4px 0 #2a7fc9; }
.sound-btn.off { background: linear-gradient(145deg,#aaa,#777); box-shadow: 0 4px 0 #555; }
.start-sound-btn { position: absolute; top: 14px; right: 16px; z-index: 30; }
.time-track { height: 8px; flex: none; background: #ddd; }
.time-track div { width: 100%; height: 100%; background: #51c96b; transition: width 1s linear; }