:root {
  --aqua: #8fd3e6;
  --aqua-strong: #4fb9d8;
  --navy: #0b2a6b;
  --pink: #ff8fb4;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Meiryo", sans-serif;
  /* ゲームの外側は海の中（色はゲーム画面の海と同じ。飾りは下の .sea） */
  background: linear-gradient(180deg, #2d6fc4 0%, #123f8f 45%, #06173f 100%) fixed #123f8f;
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ゲーム画面は縦いっぱい（上にアプリのインストールの帯がある時は、その高さぶん小さく）。
   横に広い画面（パソコンなど）では 9:16 の幅にして、左右は海の背景（.sea）。
   縦に長いスマホでは横幅いっぱいにし、上に余った分は game.js が海の続きを描く（地面は一番下） */
#wrap {
  position: relative;
  flex: none;
  --game-h: min(calc(100vh - var(--appbar-h, 0px)), calc(100dvh - var(--appbar-h, 0px)));
  height: var(--game-h);
  width: min(100vw, calc(var(--game-h) * 9 / 16));
  container-type: size;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 0 0 1px rgba(143, 211, 230, .25), 0 0 60px rgba(4, 16, 48, .55);
}
/* スマホ・タブレットの縦向き（横÷縦が 3/4 以下）は、9:16 より少し横に広くても横幅いっぱいに出す
   （iPhone の Safari はアドレスバーのぶん縦が短いため。横に余った分は game.js が右に海の続きを描く） */
@media (max-aspect-ratio: 3/4) {
  #wrap { width: 100vw; }
}
canvas { display: block; width: 100%; height: 100%; cursor: pointer; }

.score {
  position: absolute; top: 6%; left: 0; right: 0; text-align: center;
  font-size: clamp(40px, 9vh, 72px); font-weight: 800;
  text-shadow: 0 4px 0 var(--navy), 0 0 20px rgba(0,0,0,.4);
  pointer-events: none;
}
.score.pop { animation: scorePop .25s ease-out; }
@keyframes scorePop { 40% { transform: scale(1.3); } }

.mute {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(10, 30, 80, .5); border: 2px solid rgba(143, 211, 230, .6);
  font-size: 18px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(143, 211, 230, .35);
}
.mute svg { display: block; }
.mute:active { transform: scale(.92); }

.panel {
  position: absolute; left: 8%; right: 8%; top: 50%; transform: translateY(-50%);
  background: rgba(10, 30, 80, .82); border: 2px solid var(--aqua); border-radius: 24px;
  padding: 22px 18px; text-align: center; backdrop-filter: blur(4px);
  animation: pop .3s;
}
.panel[hidden] { display: none; }
@keyframes pop { from { transform: translateY(-50%) scale(.85); opacity: 0; } }
/* ゆきたさんのイラストは、パネルの中に収める */
#titlePanel { padding-top: 14px; }
.hero {
  display: block; width: 58%; height: auto; margin: 0 auto 2px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
h1 { margin: 2px 0 10px; font-size: 7cqw; line-height: 1.15; letter-spacing: .02em; white-space: nowrap; }
h2 { margin: 0 0 8px; font-size: 22px; }
.result-img {
  display: block; width: 46%; height: auto; margin: -2px auto 4px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.newbest {
  position: absolute; top: 14px; right: 14px; margin: 0;
  background: var(--pink); color: #5a0f2c; font-weight: 800; font-size: 13px;
  padding: 4px 10px; border-radius: 999px; transform: rotate(8deg);
  animation: badge .5s;
}
@keyframes badge { 0% { transform: rotate(8deg) scale(0); } 70% { transform: rotate(8deg) scale(1.2); } }
.newbest[hidden] { display: none; }
.how { font-size: 13px; line-height: 1.7; color: var(--aqua); margin: 0 0 16px; }
.best { margin: 12px 0 0; font-size: 14px; opacity: .85; }

.btn {
  font-family: inherit; font-weight: 800; font-size: 20px; cursor: pointer;
  background: linear-gradient(180deg, #a8e6f5, var(--aqua-strong)); color: #06295a;
  border: none; border-radius: 999px; padding: 12px 44px;
  box-shadow: 0 6px 0 #2a7fa0, 0 10px 24px rgba(0,0,0,.35);
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #2a7fa0; }
.btn.sub {
  display: block; margin: 14px auto 0; font-size: 14px; padding: 8px 22px;
  background: transparent; color: var(--aqua); border: 2px solid var(--aqua); box-shadow: none;
}
.btn.sub:active { transform: translateY(2px); }
.btn[hidden] { display: none; }
#titlePanel .btn.sub { margin-top: 10px; }
/* 結果画面の「ランキングに登録」「X でシェア」を横に並べる */
.btn-row { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.btn-row .btn.sub { margin: 0; padding: 8px 14px; font-size: 13px; white-space: nowrap; }

.result { display: flex; justify-content: center; gap: 28px; margin-bottom: 8px; }
.result div { font-size: 13px; color: var(--aqua); display: flex; flex-direction: column; }
.result strong { font-size: 36px; color: #fff; }
.place { margin: 2px 0 4px; font-size: 14px; color: var(--aqua); }
.place[hidden] { display: none; }
.place b { font-size: 20px; color: #fff; margin: 0 1px; }
.comment { font-size: 14px; margin: 4px 0 16px; min-height: 1.4em; }

.credit {
  position: absolute; bottom: 4px; left: 0; right: 0; margin: 0;
  text-align: center; font-size: 10px; opacity: .6; pointer-events: none;
}
/* 版番号（右下に小さく） */
.ver {
  position: absolute; bottom: 4px; right: 8px; margin: 0;
  font-size: 9px; letter-spacing: .02em; opacity: .5; pointer-events: none;
}

/* 結果画面から公式サイトへ戻るリンク */
.home-link {
  display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700;
  color: #fff; text-decoration: none; opacity: .9;
  border-bottom: 1px solid rgba(143, 211, 230, .7); padding-bottom: 2px;
}
.home-link:hover { opacity: 1; color: var(--aqua); }

/* ===== アプリ（PWA）のインストール（install.js） ===== */
/* 画面の一番上の細い帯（ポップアップではなく、ここに出しておくだけ） */
.appbar {
  position: relative; z-index: 2;
  flex: none; width: 100%; max-width: 520px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px 8px 10px;
  background: rgba(11, 31, 77, .94); border-bottom: 1px solid rgba(143, 211, 230, .5);
}
.appbar[hidden] { display: none; }
.appbar img { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.appbar-txt { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; line-height: 1.3; }
.appbar-txt strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar-txt span { font-size: 11px; color: var(--aqua); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar-add {
  flex: none; font-family: inherit; font-weight: 800; font-size: 13px; cursor: pointer;
  background: linear-gradient(180deg, #a8e6f5, var(--aqua-strong)); color: #06295a;
  border: none; border-radius: 999px; padding: 8px 12px;
}
.appbar-add:active { transform: scale(.95); }
.appbar-close {
  flex: none; width: 28px; height: 32px; padding: 0; cursor: pointer;
  background: none; border: none; color: #fff; opacity: .7; font-size: 20px; line-height: 1;
}
/* プレイ中はうっかり押さないように、押せなくして少し薄く */
body.playing .appbar { pointer-events: none; opacity: .55; }

/* 「インストール」を押した時に下から出る手順 */
.app-sheet {
  width: 100%; max-width: 480px; max-height: calc(100dvh - 24px);
  margin: auto auto 0; padding: 20px 20px calc(18px + env(safe-area-inset-bottom));
  border: 2px solid var(--aqua); border-bottom: 0; border-radius: 24px 24px 0 0;
  background: #0b1f4d; color: #fff; font-family: inherit; text-align: left;
  -webkit-user-select: none; user-select: none;
}
.app-sheet[open] { animation: sheetUp .28s ease-out; }
@keyframes sheetUp { from { transform: translateY(100%); } }
.app-sheet::backdrop { background: rgba(0, 10, 30, .55); }
.app-sheet header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.app-sheet header img { border-radius: 12px; }
.app-sheet .kicker { margin: 0; font-size: 11px; color: var(--aqua); }
.app-sheet h2 { margin: 2px 0 0; font-size: 18px; }
.app-sheet .lead { margin: 0 0 8px; font-size: 13px; color: var(--aqua); }
.app-sheet .steps { margin: 0; padding-left: 1.4em; font-size: 14px; line-height: 2.1; }
.app-sheet .key {
  display: inline-block; margin: 0 2px; padding: 0 10px; line-height: 1.8;
  border-radius: 8px; background: rgba(143, 211, 230, .18); border: 1px solid rgba(143, 211, 230, .5);
  font-weight: 700; font-size: 13px;
}
.app-sheet .key.blue { background: var(--aqua-strong); color: #06295a; border-color: transparent; }
.app-sheet .note { margin: 12px 0 0; font-size: 12px; opacity: .8; }
.app-sheet .btn.sub { margin-top: 14px; }

/* ===== ランキング（ranking.js） ===== */
.rank-dialog {
  width: min(92vw, 420px); max-height: min(88dvh, 720px); padding: 18px 16px 16px;
  border: 2px solid var(--aqua); border-radius: 24px; background: #0b1f4d; color: #fff;
  font-family: inherit; text-align: center; overflow: auto;
}
.rank-dialog[open] { animation: pop .25s; }
.rank-dialog::backdrop { background: rgba(0, 10, 30, .6); }
.rank-dialog h2 { margin: 0 0 10px; font-size: 22px; }
.rank-form { margin: 0 0 12px; padding: 12px; border-radius: 16px; background: rgba(143, 211, 230, .1); }
.rank-now { margin: 0 0 8px; font-size: 14px; color: var(--aqua); }
.rank-now strong { font-size: 26px; color: #fff; }
.rank-label { display: block; font-size: 12px; text-align: left; margin: 0 0 4px; opacity: .85; }
.rank-input { display: flex; gap: 8px; }
.rank-input input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 8px 12px;
  border-radius: 12px; border: 2px solid rgba(143, 211, 230, .6); background: #fff; color: #0b2a6b;
  -webkit-user-select: text; user-select: text;
}
.rank-input .btn { font-size: 15px; padding: 8px 18px; box-shadow: 0 4px 0 #2a7fa0; }
.rank-input .btn:disabled { opacity: .5; }
.rank-err { margin: 6px 0 0; min-height: 1.2em; font-size: 13px; color: #ffb3cc; text-align: left; }
.rank-done { margin: 0 0 12px; padding: 10px; border-radius: 14px; background: var(--pink); color: #5a0f2c; font-weight: 800; font-size: 14px; }
.rank-tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.rank-tabs button {
  font: inherit; font-weight: 700; font-size: 14px; padding: 6px 18px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--aqua); border: 2px solid rgba(143, 211, 230, .5);
}
.rank-tabs button[aria-selected="true"] { background: var(--aqua); color: #06295a; border-color: var(--aqua); }
.rank-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.rank-list li {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; font-size: 15px;
}
.rank-list li:nth-child(odd) { background: rgba(143, 211, 230, .07); }
.rank-list li.me { background: rgba(255, 143, 180, .25); outline: 2px solid var(--pink); }
.rank-list .no { flex: none; width: 2.2em; text-align: center; font-weight: 800; color: var(--aqua); }
.rank-list .top1 .no { color: #ffd34f; } .rank-list .top2 .no { color: #e3ecf5; } .rank-list .top3 .no { color: #f0a46b; }
.rank-list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list .sc { flex: none; font-weight: 800; font-size: 17px; }
.rank-list .sc small { font-size: 11px; margin-left: 2px; color: var(--aqua); }
.rank-list .rank-note { display: block; text-align: center; font-size: 13px; opacity: .8; padding: 16px 4px; background: none; }
.rank-me { margin: 10px 0 0; font-size: 13px; color: var(--aqua); min-height: 1em; }
.rank-dialog > .btn.sub { margin-top: 12px; }

/* ===== ゲームの外側の海（パソコンなど横に広い画面で見える） ===== */
.sea { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* 水面からさしこむ光 */
.sea-rays {
  position: absolute; inset: -10% -20% 30%;
  background: repeating-linear-gradient(100deg, rgba(200, 240, 255, 0) 0 90px, rgba(200, 240, 255, .13) 90px 150px, rgba(200, 240, 255, 0) 150px 260px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  animation: seaRays 14s ease-in-out infinite alternate;
}
@keyframes seaRays { to { transform: translateX(4%) skewX(-3deg); opacity: .7; } }
/* 底の砂（ゲーム画面の砂と同じ高さ・色） */
.sea-sand {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc((100dvh - var(--appbar-h, 0px)) * 40 / 640);
  background: radial-gradient(ellipse 22px 6px at 30px 60%, rgba(255, 255, 255, .35), transparent) 0 0 / 80px 100%,
    linear-gradient(180deg, #e9d9a8, #bfa36a);
  border-top: 3px solid #8fd3e6;
}
/* 海藻（左右に2本ずつ。ゆらゆら） */
.sea-weed {
  position: absolute; bottom: calc((100dvh - var(--appbar-h, 0px)) * 40 / 640 - 4px); width: 120px; height: 34vh;
  transform-origin: 50% 100%; animation: seaWeed 6s ease-in-out infinite alternate;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M30 300C10 240 50 200 28 150S40 60 30 10' stroke='%232f8f7a' stroke-width='12'/%3E%3Cpath d='M70 300C90 250 50 210 72 160S58 90 74 40' stroke='%2337a58b' stroke-width='10'/%3E%3Cpath d='M98 300C110 260 86 230 100 190S92 130 102 100' stroke='%23246f60' stroke-width='9'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  opacity: .85;
}
.sea-weed.l1 { left: 4vw; } .sea-weed.l2 { left: 15vw; height: 24vh; animation-delay: -2s; }
.sea-weed.r1 { right: 6vw; height: 28vh; animation-delay: -4s; } .sea-weed.r2 { right: 17vw; height: 20vh; animation-delay: -1s; }
@keyframes seaWeed { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
/* 魚の影（ゆっくり横切る） */
.sea-fish {
  position: absolute; left: 0; width: 56px; height: 26px; opacity: .45;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 26'%3E%3Cpath d='M2 13C12 2 30 1 42 9l12-8-4 12 4 12-12-8C30 25 12 24 2 13z' fill='%238fd3e6'/%3E%3Ccircle cx='12' cy='11' r='2' fill='%230b2a6b'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  animation: seaFish 46s linear infinite;
}
.sea-fish.f1 { top: 18%; }
.sea-fish.f2 { top: 34%; width: 38px; height: 18px; animation-duration: 60s; animation-delay: -20s; opacity: .3; }
.sea-fish.f3 { top: 52%; animation-duration: 52s; animation-delay: -35s; }
.sea-fish.f4 { top: 66%; width: 30px; height: 14px; animation-duration: 38s; animation-delay: -8s; opacity: .3; }
.sea-fish.f5 { top: 26%; width: 70px; height: 32px; animation-duration: 70s; animation-delay: -50s; opacity: .25; }
@keyframes seaFish { from { transform: translateX(105vw); } to { transform: translateX(-10vw); } }
/* 泡（下から上へ） */
.sea-bubbles i {
  position: absolute; bottom: -20px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06);
  animation: seaBubble 12s linear infinite;
}
.sea-bubbles i:nth-child(1) { left: 6%; animation-delay: -1s; }
.sea-bubbles i:nth-child(2) { left: 11%; width: 8px; height: 8px; animation-delay: -6s; animation-duration: 9s; }
.sea-bubbles i:nth-child(3) { left: 18%; width: 16px; height: 16px; animation-delay: -3s; animation-duration: 15s; }
.sea-bubbles i:nth-child(4) { left: 24%; animation-delay: -9s; }
.sea-bubbles i:nth-child(5) { left: 29%; width: 6px; height: 6px; animation-delay: -4s; animation-duration: 8s; }
.sea-bubbles i:nth-child(6) { left: 34%; width: 10px; height: 10px; animation-delay: -11s; }
.sea-bubbles i:nth-child(7) { left: 66%; width: 10px; height: 10px; animation-delay: -2s; animation-duration: 10s; }
.sea-bubbles i:nth-child(8) { left: 71%; width: 16px; height: 16px; animation-delay: -7s; animation-duration: 16s; }
.sea-bubbles i:nth-child(9) { left: 77%; width: 7px; height: 7px; animation-delay: -5s; animation-duration: 9s; }
.sea-bubbles i:nth-child(10) { left: 83%; animation-delay: -10s; }
.sea-bubbles i:nth-child(11) { left: 89%; width: 9px; height: 9px; animation-delay: -3s; animation-duration: 11s; }
.sea-bubbles i:nth-child(12) { left: 95%; width: 14px; height: 14px; animation-delay: -8s; animation-duration: 14s; }
@keyframes seaBubble {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(14px, -55vh); }
  100% { transform: translate(-6px, -110vh); opacity: .2; }
}
/* 縦長の画面（スマホ）ではゲームの外側がほとんど見えないので、動く飾りは止める（電池のため） */
@media (max-aspect-ratio: 3/4) {
  .sea-fish, .sea-bubbles, .sea-weed, .sea-rays { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sea * { animation: none !important; }
}