*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;touch-action:none;overscroll-behavior:none;font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;color:#193e51}button{font:inherit;cursor:pointer;touch-action:none;border:0}button:focus-visible{outline:3px solid #ecae35;outline-offset:4px}[hidden]{display:none!important}#world{position:fixed;inset:0;width:100%;height:100%}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#edf9ffb8,transparent 65%)}header{position:fixed;top:26px;left:34px;right:34px;display:flex;justify-content:space-between;align-items:center;z-index:5}.brand{font-size:14px;font-weight:900;letter-spacing:3px}.brand span{display:block;font-size:9px;letter-spacing:5px;margin:6px 0 0 23px}.actions{display:flex;gap:8px}.actions button{border:1px solid #ffffffa8;border-radius:30px;background:#ffffffb8;color:#193e51;padding:10px 16px;font-size:12px;font-weight:bold}.panel{position:absolute;left:9%;top:50%;transform:translateY(-46%);max-width:490px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:3px;color:#39869a}h1{font-size:74px;line-height:1.24;letter-spacing:4px;margin:20px 0}h1 span{color:#298596}p{line-height:1.8}.subtitle{font-size:18px;font-weight:bold}.instruction{font-size:13px;line-height:1.9;margin:20px 0 12px}.legend{display:flex;gap:12px;font-size:10px;font-weight:bold;margin-bottom:22px}.legend span:nth-child(1){color:#16826c}.legend span:nth-child(2){color:#a07819}.legend span:nth-child(3){color:#bf626b}.primary{display:flex;justify-content:space-between;align-items:center;width:100%;background:#1e7081;color:white;padding:17px 24px;border-radius:14px;font-size:18px;font-weight:800;box-shadow:0 7px 0 #124f6120}.primary:hover{background:#238b9c}.controls{font-size:10px;color:#506e7b;margin-top:18px}.best{font-size:12px;font-weight:bold;color:#397c8a}.size{position:absolute;top:108px;left:34px}.size small{font-size:12px}.size strong{display:block;font-size:48px;line-height:1.2}.size strong span{font-size:18px;margin-left:5px}#level{font-size:11px;margin-top:7px}.run{position:absolute;top:110px;right:34px;text-align:right;display:grid;gap:10px}.run strong{font-size:24px}#timer{font-size:14px}#lives{color:#288ba1;letter-spacing:5px}.progress{position:absolute;top:83px;left:34px;right:34px;height:3px;background:#ffffff88}.progress i{display:block;height:100%;background:#298596;width:0}#toast{position:absolute;top:31%;width:100%;text-align:center;font-size:25px;font-weight:900;color:#176a79;text-shadow:0 2px 8px white;transition:opacity .2s;opacity:0}.steer{position:absolute;bottom:28px;left:35px;right:35px;display:flex;justify-content:space-between;font-size:13px;font-weight:bold;color:#305b6b99;pointer-events:none}.modal{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:#153d554d;backdrop-filter:blur(7px)}.card{width:min(410px,90vw);padding:32px;background:#f5fcfff2;border:1px solid white;border-radius:24px;text-align:center;box-shadow:0 20px 80px #153d552a}h2{font-size:26px;margin:15px 0}.scoreLabel{font-size:11px;letter-spacing:4px;margin-top:20px}.score{font-size:55px;font-weight:900;color:#217f91}dl{margin:25px 0}dl div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #cfe2e9;font-size:12px}dd{margin:0;font-weight:bold}body.playing .vignette{background:linear-gradient(#eaf9ff44,transparent 35%)}@media(max-width:600px){header{top:19px;left:20px;right:20px}.brand{font-size:11px}.brand span{font-size:8px}.panel{left:7%;right:7%;top:51%;max-width:none;background:#edf9ff70;border-radius:20px;padding:16px;backdrop-filter:blur(2px)}h1{font-size:49px;margin:13px 0}.eyebrow{font-size:10px}.subtitle{font-size:14px;margin:12px 0}.instruction{font-size:11px;margin:13px 0 10px}.legend{gap:8px;font-size:8px;margin-bottom:15px}.controls{font-size:9px;margin-bottom:6px}.primary{padding:15px 20px;font-size:16px}.best{font-size:10px}.size{left:20px;top:94px}.size strong{font-size:36px}.run{right:20px;top:94px}.run strong{font-size:19px}.progress{top:76px;left:20px;right:20px}.card{padding:25px}.steer{bottom:25px}#toast{font-size:21px;top:33%}}

.text-button{display:block;margin:12px auto 0;background:none;color:#39869a;font-size:13px;font-weight:bold;padding:8px 12px}
.text-button:hover{text-decoration:underline}
.back{display:inline-block;margin-top:6px;padding-block:.35rem;font-size:12px;font-weight:bold;color:#397c8a;text-decoration:none}
.back:hover{text-decoration:underline}
.modal .primary b{font-size:14px}

/* 一時停止・結果：収まらない画面では中で縦スクロール（margin:auto で中央寄せでも先頭が切れない） */
.t-left,.t-right,.c-left,.c-right{min-width:0}
.modal{display:flex;overflow-y:auto;touch-action:pan-y;padding:12px}
.modal .card{margin:auto}
.modal button,.panel button{touch-action:manipulation}

/* 高さの低い PC 画面：タイトルをヘッダの下から始めて詰める。収まらなければ縦スクロール */
@media (min-width:601px) and (max-height:800px){
  .panel{position:fixed;top:78px;bottom:0;left:9%;right:auto;transform:none;max-width:490px;overflow-y:auto;touch-action:pan-y;padding:0 8px 16px 0}
  h1{font-size:54px;margin:8px 0 10px}
  .subtitle{font-size:16px;margin:8px 0}
  .instruction{font-size:12px;line-height:1.7;margin:10px 0 8px}
  .legend{margin-bottom:14px}
  .primary{padding:14px 22px}
  .controls{margin:12px 0 6px;line-height:1.7}
  .best{margin:4px 0}
}

/* スマホ横（高さの低い横向き）：タイトルと結果を左右2列に。ヘッダも詰める */
@media (orientation:landscape) and (max-height:500px){
  header{top:10px;left:20px;right:20px}
  .brand{font-size:11px}.brand span{font-size:8px;margin-top:3px}
  .actions button{padding:7px 12px}
  .panel{position:fixed;top:46px;bottom:0;left:0;right:0;max-width:none;transform:none;overflow-y:auto;touch-action:pan-y;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px;align-items:start;padding:2px 5% 14px;background:none;border-radius:0;backdrop-filter:none}
  .eyebrow{font-size:10px}
  h1{font-size:40px;margin:6px 0 8px;letter-spacing:2px}
  .subtitle{font-size:13px;margin:6px 0}
  .instruction{font-size:11px;line-height:1.65;margin:0 0 6px}
  .legend{gap:4px 8px;font-size:9px;margin-bottom:10px;flex-wrap:wrap}
  .primary{padding:11px 18px;font-size:16px}
  .controls{font-size:9.5px;margin:8px 0 2px;line-height:1.6}
  .best{font-size:11px;margin:2px 0}
  .back{margin-top:0}
  .modal{padding:8px}
  #result .card{width:min(680px,94vw);padding:14px 22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0 24px;align-items:center}
  #result h2{font-size:20px;margin:6px 0}
  #result .scoreLabel{margin-top:6px}
  #result .score{font-size:40px}
  #result dl{margin:0 0 8px}
  #result dl div{padding:5px 0}
  #result .primary{padding:11px 18px}
  #result .text-button{margin-top:4px}
  #paused .card{padding:16px 24px}
  #paused h2{font-size:20px;margin:6px 0}
  #paused p{margin:6px 0 12px}
}

/* 背の低い縦画面（320x568 など）：見出しを少し詰めて「← ほかのゲーム」まで収める */
@media (max-width:600px) and (max-height:640px) and (orientation:portrait){
  h1{font-size:44px;margin:8px 0}
  .subtitle{margin:8px 0}
  .instruction{margin:8px 0 8px}
}