/* ===============================
   基本設定（全要素に適用）
   =============================== */

/* paddingやborderを含めてサイズ計算する設定
   レイアウト崩れ防止の超重要設定 */
* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; /*タブレット連打時の拡大防止 */
}
body {
  margin: 0;
  height: 100vh;          /* 画面の高さを使う */

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

  :root{
    --sky1:#8fe0ff;
    --sky2:#bdf2c9;
    --sun:#ffd23f;
    --leaf1:#4caf50;
    --leaf2:#3d8b40;
    --pink:#ff6f91;
    --brown:#8a5a35;
    --card:#fffdf6;
    --text:#3a2b1a;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{
    margin:0; padding:0; width:100%; min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    background:#dff3ff;

  }

  /* --- decorative background --- */
  .sun{
    position:absolute; top:26px; left:36px; width:76px; height:76px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, #fff2b0, var(--sun));
    box-shadow:0 0 0 10px rgba(255,210,63,0.35);
    animation:pulse 3s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} }

  .cloud{ position:absolute; background:#fff; border-radius:50px; opacity:0.9; }
  .cloud:before, .cloud:after{ content:""; position:absolute; background:#fff; border-radius:50%; }
  .cloud1{ width:90px; height:32px; top:50px; left:200px; animation:drift 26s linear infinite; }
  .cloud1:before{ width:50px; height:50px; top:-24px; left:10px; }
  .cloud1:after{ width:40px; height:40px; top:-16px; left:45px; }
  .cloud2{ width:70px; height:26px; top:100px; left:600px; animation:drift 34s linear infinite; }
  .cloud2:before{ width:40px; height:40px; top:-18px; left:8px; }
  .cloud2:after{ width:32px; height:32px; top:-12px; left:36px; }
  .cloud3{ width:60px; height:22px; top:34px; left:920px; animation:drift 20s linear infinite; }
  .cloud3:before{ width:32px; height:32px; top:-14px; left:6px; }
  @keyframes drift{ 0%{transform:translateX(0);} 50%{transform:translateX(30px);} 100%{transform:translateX(0);} }

  .bush{ position:absolute; bottom:0; border-radius:50% 50% 0 0; background:var(--leaf1); }
  .hill{ position:absolute; bottom:0; width:100%; height:70px; left:0;
    background:var(--leaf2); border-radius:50% 50% 0 0/ 30px 30px 0 0; }

  .leaf-deco{ position:absolute; font-size:34px; opacity:0.9; filter:drop-shadow(0 2px 1px rgba(0,0,0,0.1)); }

  /* --- screens --- */
  .screen{
    position:absolute; inset:0;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
  }
  .screen.active{ display:flex; }

  /* START SCREEN */
  #start-screen h1{
    font-size:52px;
    color:var(--pink);
    text-shadow:3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.08);
    margin:0 0 10px 0;
    line-height:1.3;
  }
  .start-dino{ width:210px; height:150px; object-fit:contain; margin:6px 0 18px 0; animation:bob 2s ease-in-out infinite; filter:drop-shadow(0 8px 5px rgba(0,0,0,.18)); }
  @keyframes bob{ 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-14px) rotate(2deg);} }

  .big-btn{
    font-family:inherit;
    font-size:30px;
    font-weight:bold;
    color:#fff;
    background:linear-gradient(180deg, var(--pink), #e0507a);
    border:none;
    border-bottom:8px solid #c73f66;
    border-radius:50px;
    padding:18px 56px;
    cursor:pointer;
    box-shadow:0 6px 14px rgba(0,0,0,0.2);
    transition:transform .08s, box-shadow .08s;
  }
  .big-btn:active{ transform:translateY(6px); border-bottom-width:2px; box-shadow:0 2px 6px rgba(0,0,0,0.2); }

  /* GAME SCREEN */
  #game-screen{ justify-content:flex-start; padding-top:14px; }

  #quit-btn{
    position:absolute; top:16px; right:20px;
    font-family:inherit; font-size:20px; font-weight:bold; color:#fff;
    background:#9a9a9a; border:none; border-bottom:5px solid #767676;
    border-radius:40px; padding:10px 26px; cursor:pointer; z-index:50;
  }
  #quit-btn:active{ transform:translateY(4px); border-bottom-width:1px; }

  .progress{ display:flex; gap:10px; margin:4px 0 12px 0; }
  .dot{ width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid #ffb703; }
  .dot.done{ background:#ffb703; }

  .prompt-text{
    font-size:26px; font-weight:bold; color:var(--text);
    background:#fff; border-radius:20px; padding:8px 24px; margin:6px 0 0 0;
    box-shadow:0 4px 0 rgba(0,0,0,0.08);
  }

  .dino-stage{ position:absolute; left:50%; bottom:2px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; }
  .drop-zone{
    width:360px; height:255px;
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }

  /* speech bubble (dinosaur's line), shown above the dinosaur */
  .speech-bubble{
    position:absolute;
    left:50%;
    bottom:calc(100% - 30px);
    margin:0;
    background:#fff;
    border:4px solid #ffb703;
    border-radius:24px;
    padding:8px 24px;
    font-size:22px; font-weight:bold;
    width:320px;
    max-width:calc(100vw - 40px);
    text-align:center;
    white-space:pre-line;
    box-shadow:0 6px 0 rgba(0,0,0,0.1);
    opacity:0;
    transform:translateX(-50%) scale(0.7);
    transition:transform .25s, opacity .25s;
    pointer-events:none;
    visibility:hidden;
  }
  .speech-bubble:after{
    content:"";
    position:absolute; left:50%; bottom:-28px; transform:translateX(-50%);
    border:14px solid transparent;
    border-top-color:#ffb703;
  }
  .speech-bubble:before{
    content:"";
    position:absolute; left:50%; bottom:-20px; transform:translateX(-50%);
    border:11px solid transparent;
    border-top-color:#fff;
    z-index:1;
  }
  .speech-bubble.show{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) scale(1);
  }
  .speech-bubble.good{ color:#2a9d3b; border-color:#7cd992; }
  .speech-bubble.good:after{ border-top-color:#7cd992; }
  .speech-bubble.bad{ color:#e05353; border-color:#f3a0a0; }
  .speech-bubble.bad:after{ border-top-color:#f3a0a0; }

  .dino-svg{ width:360px; height:255px; transition:transform .15s; }
  .dino-svg img{ width:100%; height:100%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 9px 5px rgba(0,0,0,.2)); }
  .dino-svg.enter{ animation:popin .4s ease; }
  @keyframes popin{ 0%{ transform:scale(0.5); opacity:0;} 100%{ transform:scale(1); opacity:1;} }
  .dino-svg.happy{ animation:happyBounce .6s ease; }
  @keyframes happyBounce{
    0%{ transform:scale(1) rotate(0deg); }
    25%{ transform:scale(1.12) rotate(-6deg); }
    50%{ transform:scale(0.96) rotate(5deg); }
    75%{ transform:scale(1.1) rotate(-3deg); }
    100%{ transform:scale(1) rotate(0deg); }
  }
  .dino-svg.shake{ animation:shakeNo .5s ease; }
  @keyframes shakeNo{
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-12px) rotate(-3deg); }
    40%{ transform:translateX(10px) rotate(3deg); }
    60%{ transform:translateX(-8px) rotate(-2deg); }
    80%{ transform:translateX(6px) rotate(2deg); }
  }

  .dino-name{
    font-size:24px; font-weight:bold; color:#fff;
    background:var(--brown); border-radius:20px; padding:4px 22px; margin:-6px 0 12px;
    box-shadow:0 4px 0 rgba(0,0,0,0.15);
    line-height:1.2; text-align:center; white-space:pre-line;
  }

  .food-left{ position:absolute; left:26px; top:50%; transform:translateY(-50%); }
  .food-right{ position:absolute; right:26px; top:50%; transform:translateY(-50%); }
  .food-left.dragging{ transform:translateY(-50%) scale(0.94); }
  .food-right.dragging{ transform:translateY(-50%) scale(0.94); }

  .food{
    width:170px; height:170px;
    background:var(--card);
    border-radius:26px;
    border:4px solid #eadfc4;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px;
    cursor:pointer;
    touch-action:manipulation;
    box-shadow:0 6px 0 rgba(0,0,0,0.1);
    transition:transform .25s, box-shadow .08s;
  }
  .food-icon{ font-size:52px; line-height:1; pointer-events:none; }
  .food-label{ font-size:19px; font-weight:bold; color:var(--text); pointer-events:none; line-height:1.3; }
  .food.disabled{ opacity:0.5; pointer-events:none; }
  .flying-food{
    position:fixed; z-index:1000;
    transform:translate(-50%, -50%) scale(1);
    font-size:58px; line-height:1;
    pointer-events:none;
    filter:drop-shadow(0 7px 4px rgba(0,0,0,.25));
    transition:left .72s cubic-bezier(.2,.8,.25,1), top .72s cubic-bezier(.2,.8,.25,1), transform .72s ease-in, opacity .72s ease-in;
  }

  /* RESULT SCREEN */
  #result-screen h2{ font-size:44px; color:var(--pink); text-shadow:3px 3px 0 #fff; margin-bottom:6px; }
  .stars{ font-size:46px; margin-bottom:20px; letter-spacing:6px; }
  .result-dino{ width:180px; height:125px; object-fit:contain; margin-bottom:8px; filter:drop-shadow(0 7px 4px rgba(0,0,0,.18)); }

  @media (max-width:700px){
    #start-screen h1{ font-size:38px; }
    .start-dino{ width:160px; height:115px; }
    .big-btn{ font-size:22px; padding:14px 40px; }
    .prompt-text{ font-size:20px; }
    .dino-name{ font-size:19px; }
    .speech-bubble{ font-size:17px; padding:8px 16px; }
    .food{ width:110px; height:110px; }
    .food-icon{ font-size:34px; }
    .food-label{ font-size:12px; }
    .food-left{ left:10px; }
    .food-right{ right:10px; }
  }

/* 既存レイアウトへ組み込むための設定 */
html, body { width:100%; height:100%; min-height:0; }
body { margin:0; background:#dff3ff; display:flex; align-items:center; justify-content:center; }
.container { position:relative; width:100%; max-width:1196px; height:540px; border:2px solid #333; border-radius:28px; overflow:hidden; display:flex; flex-direction:column; background:linear-gradient(to bottom,var(--sky1) 0%,var(--sky1) 45%,var(--sky2) 45%,var(--sky2) 100%); box-shadow:0 12px 0 rgba(0,0,0,.12),0 20px 40px rgba(0,0,0,.2); }
.game-header { position:relative; z-index:100; flex:0 0 50px; height:50px; padding:6px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:transparent; opacity:0; pointer-events:none; }
.game-header.visible { opacity:1; pointer-events:auto; }
.header-left,.header-title { color:var(--text); font-size:20px; font-weight:bold; text-shadow:0 2px #fff; }
.header-left,.header-actions { flex:1; }
.header-title { text-align:center; white-space:nowrap; }
.header-actions { display:flex; justify-content:flex-end; gap:8px; }
.header-actions button { position:static !important; font-family:inherit; min-height:36px; padding:6px 14px !important; border:0 !important; border-radius:22px !important; color:#fff; font-size:16px !important; font-weight:bold; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.18); }
#quit-btn { background:#777 !important; }
#sound-btn { min-width:94px; background:#238b57; }
#sound-btn.off { background:#777; }
.game-main { position:relative; flex:1; overflow:hidden; display:grid; place-items:center; background:transparent; }
.screen { inset:0; }
#game-screen { padding-top:2px; }
.sun { top:-22px; }
.cloud1 { top:8px; }.cloud2 { top:52px; }.cloud3 { top:4px; }
.prompt-text { font-size:22px; padding:6px 22px; margin:2px 0 0; }
.drop-zone { width:360px; height:255px; }.dino-svg { width:360px; height:255px; }
.speech-bubble { font-size:19px; }
.result-buttons { display:flex; gap:14px; }
.home-btn { background:linear-gradient(180deg,#53b980,#348d5b); border-bottom-color:#267149; }
@media (max-width:700px) { .dino-stage{bottom:0}.drop-zone,.dino-svg{width:250px;height:180px}.header-title{display:none}.header-left{font-size:15px}.header-actions button{font-size:14px!important;padding:6px 9px!important}#sound-btn{min-width:80px}.result-buttons{flex-direction:column;gap:8px} }