:root{
  /* 背景が海の中なので、いつも暗い配色にする */
  --page:#06222f; --page2:#0b3549; --ink:#e6f2f7; --sub:#b6d6e2;
  --flag:#c8232f; --gold:#f2b705; --card:rgba(10,45,64,.7); --line:rgba(230,242,247,.3);
  --paper:#fbf6ea; --paper-ink:#0f2a3a; --rope:#c9955a;
  --dela:"Dela Gothic One","Hiragino Sans",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%; touch-action:manipulation}   /* すばやく 2 回たたいても拡大しない（2026-10-31：100 こチャレンジの終わりにたたき続けると、結果の画面が拡大されて戻せなくなった。2 本指で広げる拡大は、ウェブ版ではそのまま使える） */
body{
  height:100%; margin:0;
  background:linear-gradient(180deg,var(--page),var(--page2));
  color:var(--ink);
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  -webkit-user-select:none; user-select:none; overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit; color:inherit; cursor:pointer}
button:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
#sea{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none}
.app{position:relative; z-index:1; height:100%; max-width:480px; margin:0 auto; display:flex; flex-direction:column; padding:8px 10px 6px; gap:6px}
.nb{display:inline-block}

/* ---- 上の帯：スコア・つぎ・ひと休み ---- */
.hud{display:flex; align-items:center; gap:8px; padding:2px 2px 0; position:relative}
.sc{min-width:0}
.sc{display:grid; grid-template-columns:auto auto; align-items:end; column-gap:10px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:4px 12px 5px}
.sc small{grid-column:1 / -1; font-size:10px; font-weight:800; color:var(--sub); letter-spacing:.08em}
.sc > b{font-family:var(--dela); font-weight:400; font-size:28px; line-height:1; font-variant-numeric:tabular-nums; color:#fff}
.sc .bst{font-size:11px; font-weight:700; color:var(--sub); padding-bottom:2px; white-space:nowrap}
.sc .bst b{font-family:var(--dela); font-weight:400; font-size:13px; color:var(--ink)}
/* せまいとき（game.js の fitScore）：小さい「スコア」の文字の代わりに「ベスト」を上の段へ出して、スコアの数字を大きいまま収める */
.sc.tight{grid-template-columns:auto}
.sc.tight small{display:none}
.sc.tight .bst{grid-row:1; padding-bottom:1px; font-size:10px; line-height:1.3}
.sc.tight .bst b{font-size:11px}
.sc.tight > b{grid-row:2}
.spacer{flex:1}
.next{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--sub); white-space:nowrap}
.next .bubble{width:50px; height:50px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:grid; place-items:center}
.next canvas{width:42px; height:42px; display:block}
.next .bubble{position:relative}
.next .bubble.swap{cursor:pointer; border-color:#f2c14e; box-shadow:0 0 0 2px rgba(242,193,78,.35)}   /* ○こチャレンジ：押すと入れかえ */
.next .bubble.swap.used{cursor:default; border-color:var(--line); box-shadow:none}
.next .swapn{position:absolute; right:-8px; bottom:-6px; min-width:22px; padding:1px 4px; border-radius:9px; background:#f2c14e; color:#3b2a00; font-size:10px; line-height:1.4; font-weight:800; text-align:center}
.next .swapn[hidden]{display:none}
.next .bubble.used .swapn{background:#9aa9b1; color:#fff}
.next .bubble.small{width:36px; height:36px; opacity:.85}   /* そのつぎ（○こチャレンジ） */
.next .bubble.small[hidden]{display:none}
.next .bubble.small canvas{width:30px; height:30px}
.iconbtn{width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:#fff; display:grid; place-items:center; padding:0}
/* 投網：ひと休みボタンの下（空の部分）に出す */
.netbtn{position:absolute; right:0; top:56px; width:52px; height:52px; z-index:3; color:#ffe9a8; border-color:#f2c14e; box-shadow:0 0 0 2px rgba(242,193,78,.3); grid-template-rows:auto auto; align-content:center; gap:0}
.netbtn[hidden]{display:none}
.netbtn .netlbl{font-size:11px; font-weight:800; line-height:1; margin-top:-1px}
.netbtn.armed{background:#f2c14e; color:#3b2a00; animation:netPulse 1s ease-in-out infinite}
@keyframes netPulse{50%{box-shadow:0 0 0 6px rgba(242,193,78,.35)}}
/* まだ一度も投げたことがない人へ：光らせて、左に「押してみて！」の吹き出し */
.netbtn .nettip{display:none; position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%); white-space:nowrap; background:#fff6d6; color:#3b2a00; font-size:13px; font-weight:800; line-height:1; padding:7px 10px; border:2px solid #f2c14e; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.3); pointer-events:none}
.netbtn .nettip::after{content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%); border:7px solid transparent; border-left-color:#f2c14e}
.netbtn.hint{animation:netHint 1.2s ease-in-out infinite}
.netbtn.hint .nettip{display:block; animation:tipBob 1.2s ease-in-out infinite}
@keyframes netHint{50%{background:rgba(242,193,78,.45); box-shadow:0 0 0 7px rgba(242,193,78,.4), 0 0 20px 6px rgba(255,214,102,.75)}}
@keyframes tipBob{50%{transform:translate(-5px,-50%)}}
@media (prefers-reduced-motion: reduce){ .netbtn.armed, .netbtn.hint, .netbtn.hint .nettip{animation:none} .netbtn.hint{box-shadow:0 0 0 4px rgba(242,193,78,.6)} }
body.viewing .netbtn{visibility:hidden}
.stage{flex:1; min-height:0; display:flex; justify-content:center; align-items:center}
#game{display:block; touch-action:none; border-radius:6px; outline:none}
#game:focus-visible{outline:none}

/* ---- 下の列：合体の順番 ---- */
.strip{background:rgba(4,26,40,.55); border-radius:12px; padding:4px 4px 5px; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; justify-content:space-between; align-items:flex-end}
.strip::-webkit-scrollbar{display:none}
.strip .t{flex:1 1 0; min-width:0; text-align:center; border:0; background:none; padding:0}
.strip .t > canvas,.strip .t > span{transition:opacity .4s}
.strip .t:not(.on) > canvas,.strip .t:not(.on) > span{opacity:.35}   /* まだ届いていない段は薄く（しるしは薄くしない。2026-10-26） */
.strip canvas{width:28px; height:28px; display:block; margin:0 auto 2px}
.strip span{display:block; font-size:8px; letter-spacing:-.04em; overflow:hidden; font-weight:700; line-height:1.2; white-space:nowrap}
.strip span.long{font-size:7px; letter-spacing:-.08em}   /* 4 文字の名前（メカジキ・マンボウ）は少し小さく。12 段が 1 列に収まるように */
.strip .t.unknown canvas{filter:brightness(0); opacity:.25}
.strip .t.unknown:not(.on) canvas{opacity:.09}
.strip .t:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:6px}
/* 作るともらえるもののしるし（マグロ＝投網、メカジキ＝入れかえ。入れかえはじっくりだけ） */
.strip .t{position:relative}
.strip .perk{position:absolute; top:-3px; right:calc(50% - 19px); width:13px; height:13px; border-radius:50%; background:#f2c14e; color:#0f2a3a; font-style:normal; font-size:9px; font-weight:900; line-height:13px; text-align:center; box-shadow:0 0 0 1.5px rgba(4,26,40,.85); display:grid; place-items:center; pointer-events:none}
.strip .perk svg{display:block}
.strip:not(.free) .perk.swap{display:none}
/* ゴールのサメは目立たせる */
.strip .t.goal{flex:1.3 1 0}
.strip .t.goal canvas{width:38px; height:38px; border-radius:50%; box-shadow:0 0 0 2px var(--gold), 0 0 12px rgba(242,183,5,.6); background:rgba(242,183,5,.12)}
.strip .t.goal.unknown canvas{filter:brightness(0) invert(.85); opacity:.5}
.strip .t.goal span{color:var(--gold); font-size:11px}

/* ---- 小さなお知らせ（NEW！など） ---- */
.toast{position:fixed; left:50%; top:calc(env(safe-area-inset-top,0px) + 70px); transform:translate(-50%,-12px); opacity:0; pointer-events:none; z-index:8;
  background:var(--paper); color:var(--paper-ink); font-weight:800; font-size:14px; padding:8px 16px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.3); border:2px solid var(--gold); white-space:nowrap; transition:opacity .25s, transform .25s}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.long{white-space:pre-line; width:min(330px, calc(100vw - 32px)); border-radius:16px; text-align:center; line-height:1.45}   /* 長いお知らせは折り返す */
/* 曲が始まったとき、左上（スコアの下）に小さく出る曲名 */
.nowplaying{position:fixed; left:12px; top:calc(env(safe-area-inset-top,0px) + 104px);   /* 100 こチャレンジの「のこり」の下 */ opacity:0; pointer-events:none; z-index:4;   /* ランキングなどの画面より後ろ */
  background:rgba(4,24,36,.55); color:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; transition:opacity .6s}
.nowplaying.show{opacity:.9}
.pnow{margin:2px 0 0; font-size:12px; font-weight:700; color:#5a7a88}
.pnow:empty{display:none}

/* ---- 重ねて出す画面の共通 ---- */
.ov{position:fixed; inset:0; display:none; background:rgba(4,24,36,.66); z-index:5; padding:16px; overflow-x:hidden; overflow-y:auto}   /* 横には動かさない（左右のふらつき防止） */
.ov > *{margin:auto}   /* 収まるときは真ん中、はみ出すときは上下にスクロール */
.ov.show{display:grid}
.card{background:var(--paper); color:var(--paper-ink); border-radius:20px; padding:22px 20px 20px; width:min(340px,100%); text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.35)}
.card h2{font-family:var(--dela); font-weight:400; font-size:24px; margin:0 0 12px}
.go{font-weight:800; font-size:17px; border:0; border-radius:999px; padding:13px 30px; background:var(--flag); color:#fff; box-shadow:0 4px 0 #8f1620}
.go:active{transform:translateY(2px); box-shadow:0 2px 0 #8f1620}
.go.big{font-size:21px; padding:15px 44px; min-width:220px}
.sub{font-weight:800; font-size:14px; border:2px solid var(--line); background:rgba(255,255,255,.08); color:var(--ink); border-radius:999px; padding:9px 16px}
.card .sub, .slip .sub{border-color:#c9dce4; background:#fff; color:var(--paper-ink)}
.row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px}
.link{border:0; background:none; color:#5b7684; font-size:13px; font-weight:700; text-decoration:underline; margin-top:12px; padding:4px}

/* スタート画面 */
.title{background:radial-gradient(ellipse at 50% 35%, rgba(30,96,124,.95), rgba(4,24,36,.98) 75%)}   /* 後ろのゲーム画面がすけないように、濃いめ */
.tcard{text-align:center; width:min(360px,100%); color:#fff}
/* 右上：音と曲 */
.tset{display:flex; justify-content:flex-end; gap:6px; margin:0 0 8px}
.tsetbtn{border:1px solid var(--line); background:rgba(4,24,36,.45); color:var(--ink); border-radius:999px; height:34px; min-width:34px; padding:0 10px; font-size:13px; font-weight:800}
/* 上の絵：安波山から見た気仙沼湾 → 海の中（海の幸の行列） */
.tscene{position:relative; border-radius:18px; overflow:hidden; background:linear-gradient(180deg,#1f6f94 0,#0b3a52 100%); box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12)}
.tview{display:block; width:100%; height:auto}
.tvgull{transform:translate(120px,0)}
.tvgull.rev{transform:translate(250px,0)}
.tvout{transform:translate(160px,67px) rotate(-30deg) scale(1)}
/* 上の絵の時間帯（game.js の updateTimeOfDay が .tscene に tod-day / tod-dusk / tod-night を付ける） */
.tvdusk, .tvnight, .tvshade, .tvlights{display:none}
.tod-dusk .tvdusk, .tod-night .tvnight{display:inline}
.tod-dusk .tvshade, .tod-night .tvshade{display:inline; mix-blend-mode:multiply; pointer-events:none}
.tod-dusk .tvshade{fill:#f0a27c; opacity:.42}          /* 夕方：だいだい色の光 */
.tod-night .tvshade{fill:#1c2a5a; opacity:.86}         /* 夜：紺色に沈める */
.tod-dusk .tvlights{display:inline; opacity:.5}         /* 夕方：明かりがともりはじめる */
.tod-night .tvlights{display:inline}
.tod-dusk .tvnight{display:none}                        /* 星と月は夜だけ */
.tod-night .tvgull{display:none}                        /* ウミネコは夜は飛ばない */
.tod-night{background:linear-gradient(180deg,#0f3a52 0,#061f30 100%)}   /* 海の中も少し暗く */
.tvrainbow{fill:#ff7ab6}
.tline{position:relative; margin-top:-1px; display:flex; align-items:flex-end; justify-content:center; padding:16px 4px 16px}
/* 海の底（砂地）。海の幸は、その上にのっている */
.tline::before{content:""; position:absolute; left:0; right:0; bottom:0; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 18' preserveAspectRatio='none'%3E%3Cpath d='M0 8C40 2 80 12 120 7S200 1 240 8 310 12 340 6V18H0Z' fill='%23c9b07e' fill-opacity='.55'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat}
.tline .ti{z-index:1}
.tline .ti + .ti{margin-left:-1.6%}   /* 少し重ねて、1 つずつを大きく */
.tline .ti{flex:0 1 auto; min-width:0; display:block; position:relative}
.tline .ti img{display:block; width:100%; height:auto}
.tline .ti.goal.unknown img{filter:brightness(0); opacity:.55}
.tline .ti.goal.unknown::after{content:"？"; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--dela); font-size:24px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.5)}
.tline .ti.goal{filter:drop-shadow(0 0 6px rgba(242,183,5,.7))}
.title h1{font-family:var(--dela); font-weight:400; font-size:38px; line-height:1.1; margin:14px 0 0; text-shadow:0 3px 0 #0a3550, 0 6px 18px rgba(0,0,0,.4)}
.catch{font-weight:800; font-size:15px; margin:6px 0 12px; text-shadow:0 2px 6px rgba(0,20,35,.7)}
.tseason{display:inline-block; font-size:13px; font-weight:800; color:#5a3c00; background:#f6d77a; border:1px solid #f2b705; border-radius:999px; padding:5px 14px; margin:0 0 14px}   /* ボタンの赤と取り合わないよう、金色 */
.tseason:empty{display:none}
.tplays{font-size:13px; font-weight:700; margin:-4px 0 14px; text-shadow:0 2px 6px rgba(0,20,35,.7)}   /* みんなで遊ばれた回数（1000 回をこえたら rank.js が出す） */
.tplays b{font-size:16px; color:#f6d77a; margin:0 2px}
/* 遊び方のボタン 2 つ（説明とベストを中に） */
.tmode{display:block; width:100%; padding:10px 16px 9px; line-height:1.25}
.tmode .tm{display:block; font-size:20px}
.tmode small{display:block; font-size:12px; font-weight:700; opacity:.92; margin-top:2px}
.tmode small b{font-family:var(--dela); font-weight:400}
.tbst[hidden]{display:none}
.tmode + .tmode{margin-top:12px}
.tchal{background:#1f6f94; box-shadow:0 4px 0 #0f4560}
.tchal:active{box-shadow:0 2px 0 #0f4560}
/* 図鑑・ランキング・遊び方 */
.tmenu{display:flex; gap:8px; margin-top:16px}
.tmenubtn{flex:1; border:1px solid var(--line); background:rgba(4,24,36,.45); color:var(--ink); border-radius:14px; padding:7px 4px 6px; font-size:13px; font-weight:800}
.tmenubtn span{display:block; font-size:20px; line-height:1.2}
.tinstall{display:flex; align-items:center; gap:10px; width:100%; margin-top:8px; border:1px solid rgba(242,193,78,.6); background:rgba(242,193,78,.12); color:var(--ink); border-radius:14px; padding:7px 12px; text-align:left; cursor:pointer}
.tinstall[hidden]{display:none}
/* アプリでも遊べます（ホーム画面に置くと見分けがつくよう、海の青） */
.tinstall.tapp{border-color:rgba(120,200,235,.7); background:rgba(80,170,215,.16)}
.tinstall.tapp b{color:#bfe9ff}
.appov .storebtn{display:block; margin:8px auto 0; text-decoration:none; text-align:center}
.appov .storebtn[hidden]{display:none}
.appov .apnote{text-align:left; font-size:12px; margin-top:12px}
.tinstall img{width:30px; height:30px; border-radius:8px; flex:none}
.tinstall b{display:block; font-size:14px; font-weight:800; color:#ffe9a8}
.tinstall small{display:block; font-size:11px; font-weight:700; color:var(--sub); line-height:1.4}
.credit button.tlink{border:0; background:none; padding:0; font:inherit; color:rgba(230,242,247,.85); text-decoration:underline}
.credit button.tlink[hidden]{display:none}
/* トップのお知らせ（公開日から 7 日間。× で閉じられる） */
.notice{position:relative; background:rgba(255,246,214,.96); color:var(--paper-ink); border:2px solid var(--gold); border-radius:14px; padding:10px 34px 10px 14px; margin:-10px 0 16px; text-align:left; box-shadow:0 6px 18px rgba(0,0,0,.25)}
.notice[hidden]{display:none}
.notice p{margin:0; font-size:13px; line-height:1.6; font-weight:700}
.notice b{color:var(--flag); font-size:14px}
.notice-x{position:absolute; right:4px; top:4px; width:30px; height:30px; border:0; background:none; color:#5b7684; font-size:20px; font-weight:800; line-height:1; border-radius:50%}
/* ○こチャレンジの、のこりの数 */
.spacer{display:flex; justify-content:center; align-items:center}
.timer{white-space:nowrap; font-family:var(--dela); font-size:15px; color:#fff; background:rgba(4,24,36,.55); border-radius:12px; padding:2px 12px; text-shadow:0 2px 4px rgba(0,0,0,.4)}
/* のこりの数は、スコアの下の 2 段目に出す（同じ段に並べると、せまいスマホでスコアと重なるため） */
.timer{position:absolute; left:2px; top:calc(100% + 4px); z-index:2; font-size:14px}
.timer[hidden]{display:none}
.timer.hurry{color:#ffd0d0; background:rgba(200,35,47,.75)}
/* 100 こチャレンジの終わり近く（のこり 20 こから）、まとめボーナスの見込みを「のこり ○こ」の下に出す（2026-10-18） */
.tidy{position:absolute; left:2px; top:calc(100% + 30px); z-index:2; white-space:nowrap; font-size:12px; font-weight:800; color:#ffe9a8; background:rgba(4,24,36,.55); border-radius:10px; padding:1px 10px; text-shadow:0 1px 3px rgba(0,0,0,.4)}
.tidy[hidden]{display:none}
.tidy.zero{color:rgba(230,242,247,.75)}
.tidy.last{animation:tidyGlow 1s ease-in-out infinite}
@keyframes tidyGlow{50%{background:rgba(214,150,30,.75); color:#fff}}
@media (prefers-reduced-motion: reduce){.tidy.last{animation:none; background:rgba(214,150,30,.75); color:#fff}}
.tnew{color:rgba(230,242,247,.85); margin-top:6px}
.credit{font-size:11px; color:rgba(230,242,247,.6); margin:16px 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px}
@media (prefers-reduced-motion: no-preference){
  /* 海の幸が、少しずつずれて、ゆらゆら */
  .title.show .tline .ti{animation:bob 3s ease-in-out infinite; animation-delay:calc(var(--i) * -0.27s)}
  /* 上の絵：湾の船がゆっくり行き来し、さざ波がきらっと光る */
  .title.show .tvboat{animation:sail 11s ease-in-out infinite alternate}
  .title.show .tvrip{animation:glint 6s ease-in-out infinite}
  @keyframes sail{from{transform:translate(calc(var(--dx) * -1), calc(var(--dy) * -1))}to{transform:translate(var(--dx), var(--dy))}}
  @keyframes glint{0%,100%{opacity:.15}50%{opacity:.6}}
  /* ウミネコ：左から右へ（rev は右から左へ）横切りながら、羽ばたく */
  .title.show .tvgull{animation:fly 26s linear infinite}
  .title.show .tvgull.rev{animation-name:flyback}
  .title.show .tvwing{transform-box:fill-box; transform-origin:50% 100%; animation:flap .5s ease-in-out infinite alternate}
  @keyframes fly{0%{transform:translate(-20px,0)}50%{transform:translate(160px,-4px)}100%{transform:translate(360px,0)}}
  @keyframes flyback{0%{transform:translate(360px,0)}50%{transform:translate(180px,3px)}100%{transform:translate(-20px,0)}}
  @keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.25)}}
  /* 夜：星がまたたき、水面の明かりがゆれ、魚市場が七色に変わり、塔の赤い灯が点滅する */
  .tvstar{animation:twinkle 3.5s ease-in-out infinite}
  .tvrefl{transform-box:fill-box; transform-origin:50% 0; animation:shimmer 2.6s ease-in-out infinite}
  .tvrainbow{animation:rainbow 12s linear infinite}
  .tvrainbow.tvrefl{animation:rainbow 12s linear infinite, shimmer 2.6s ease-in-out infinite}
  .tvblink{animation:blink 2s steps(1) infinite}
  @keyframes twinkle{0%,100%{opacity:1}50%{opacity:.25}}
  @keyframes shimmer{0%,100%{transform:scaleX(1) scaleY(1); opacity:.9}50%{transform:scaleX(.6) scaleY(.8); opacity:.55}}
  @keyframes rainbow{0%{fill:#ff5a6e}16%{fill:#ffa94d}33%{fill:#ffe45c}50%{fill:#5ee08a}66%{fill:#4fc3ff}83%{fill:#9b7bff}100%{fill:#ff5a6e}}
  @keyframes blink{0%{opacity:1}50%{opacity:.15}}
  /* 外海へ出ていく漁船：内湾の岸壁を出て、湾の口をぬけたところで「く」の字に向きを変え、橋の下をくぐって遠ざかる。少し休んでから、また出る */
  .title.show .tvout{animation:outbound 42s linear infinite}
  @keyframes outbound{
    0%,5%{transform:translate(226px,100.6px) rotate(180deg) scale(1.3); opacity:0}
    9%{transform:translate(219px,100.2px) rotate(182deg) scale(1.3); opacity:1}
    25%{transform:translate(176px,99.2px) rotate(188deg) scale(1.25)}
    37%{transform:translate(153.5px,96px) rotate(212deg) scale(1.15)}
    47%{transform:translate(138px,84px) rotate(245deg) scale(1.1)}
    58%{transform:translate(149px,73px) rotate(320deg) scale(.95)}
    74%{transform:translate(172px,62px) rotate(335deg) scale(.8)}
    89%{transform:translate(195px,53px) rotate(345deg) scale(.6); opacity:1}
    97%,100%{transform:translate(212px,49px) rotate(345deg) scale(.45); opacity:0}
  }

  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
}

/* 遊び方 */
.steps{list-style:none; padding:0; margin:0 0 16px; display:grid; gap:10px; counter-reset:s}
.steps li{display:flex; align-items:center; gap:10px; background:#eef6f9; border-radius:14px; padding:8px 10px; text-align:left; counter-increment:s; position:relative}
.steps li::before{content:counter(s); position:absolute; left:-6px; top:-6px; width:22px; height:22px; border-radius:50%; background:var(--flag); color:#fff; font-weight:800; font-size:13px; display:grid; place-items:center}
.steps canvas{width:100px; height:60px; flex:0 0 auto}
.steps p{margin:0; font-size:13px; line-height:1.5}

/* ひと休み */
.menu{display:grid; gap:10px}
.menu h2{margin-bottom:4px}

/* サメに会えた */
.meet{z-index:7; background:radial-gradient(circle at 50% 40%, rgba(255,236,170,.55), rgba(4,24,36,.75) 70%)}
.meetcard{border:4px solid var(--gold); display:grid; gap:10px}
.meetcard .kicker{margin:0; font-weight:800; color:var(--flag); letter-spacing:.1em}
.meetcard h2{margin:0; font-size:28px; line-height:1.2}
.mboya{width:170px; height:auto; margin:4px auto}
.mcount{margin:0; font-size:13px; font-weight:700; color:#3f6070; white-space:pre-line}
/* 金・虹のサメに会えた（2026-10-30） */
.meet.gold{background:radial-gradient(circle at 50% 40%, rgba(255,214,90,.75), rgba(40,26,4,.8) 70%)}
.meet.gold .meetcard{border-color:#e0a92e; box-shadow:0 0 0 4px #fff2a8, 0 0 40px rgba(255,210,80,.9)}
.meet.gold h2{color:#a4700f}
.meet.rainbow{background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.6), rgba(10,10,40,.8) 70%)}
.meet.rainbow .meetcard{border:5px solid transparent; background:linear-gradient(#fffaf0,#fffaf0) padding-box, linear-gradient(90deg,#ff5a5a,#ffa83a,#ffe74a,#5fd86a,#4ab8ff,#7a6bff,#d86bff) border-box; box-shadow:0 0 44px rgba(180,140,255,.9)}
.meet.rainbow h2{background:linear-gradient(90deg,#e8403f,#f08a1c,#d4b800,#2fae46,#2a8fe0,#6a4be0,#b84be0); -webkit-background-clip:text; background-clip:text; color:transparent}
.meet.gold .mboya, .meet.rainbow .mboya{filter:drop-shadow(0 0 12px rgba(255,230,140,.95))}
@media (prefers-reduced-motion: no-preference){
  .meet.show .mboya{animation:pop .7s cubic-bezier(.3,1.6,.5,1) both}
  /* 虹のサメのお祝い：色がぐるぐる変わる */
  .meet.rainbow.show .mboya{animation:pop .7s cubic-bezier(.3,1.6,.5,1) both, niji 3s linear .7s infinite}
  @keyframes niji{from{filter:drop-shadow(0 0 12px rgba(255,230,140,.95)) hue-rotate(0deg)} to{filter:drop-shadow(0 0 12px rgba(255,230,140,.95)) hue-rotate(360deg)}}
  @keyframes pop{0%{transform:scale(.3) rotate(-20deg); opacity:0}100%{transform:scale(1) rotate(0); opacity:1}}
}

/* 結果：出荷表 */
.slip{position:relative; background:var(--paper); color:var(--paper-ink); width:min(340px,100%); border-radius:6px; padding:16px 18px 18px; text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.35); border-top:10px solid var(--flag);
  background-image:repeating-linear-gradient(0deg, transparent 0 27px, rgba(15,42,58,.06) 27px 28px)}
.slip-head{display:flex; justify-content:space-between; align-items:baseline; font-size:12px; font-weight:700; color:#5b7684; border-bottom:2px solid var(--paper-ink); padding-bottom:4px}
.slip-kind{font-family:var(--dela); font-size:16px; color:var(--paper-ink)}
.slip h2{font-family:var(--dela); font-weight:400; font-size:24px; margin:12px 0 8px}
.slip-table{width:100%; border-collapse:collapse; margin:0 0 10px; font-size:14px}
.slip-table th{text-align:left; font-weight:700; color:#5b7684; padding:6px 4px; border-bottom:1px dashed #c9d6dc; white-space:nowrap; width:8em}
.slip-table td{text-align:right; font-weight:800; padding:6px 4px; border-bottom:1px dashed #c9d6dc}
.slip-table td canvas{width:32px; height:32px; vertical-align:middle; margin-right:6px}
.slip-table .big{font-family:var(--dela); font-weight:400; font-size:30px; color:var(--flag)}
.slip-new p{font-size:12px; font-weight:700; color:#5b7684; margin:4px 0 6px}
.slip-new{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:12px}
.slip-new p{flex-basis:100%}
.slip-next{margin:0 auto 12px; padding:8px 12px; max-width:300px; border:1px dashed #b9cfd8; border-radius:10px; text-align:center}   /* 次の名所カードまで */
.slip-next[hidden]{display:none}
.slip-next p{margin:0 0 6px; font-size:13px; font-weight:800; color:var(--paper-ink)}
.slip-next small{display:block; font-size:10px; font-weight:700; color:#5b7684; letter-spacing:.05em}
.slip-bar{height:6px; border-radius:3px; background:#e3edf1; overflow:hidden}
.slip-bar i{display:block; height:100%; width:0; background:#e0a526; border-radius:3px}
.chip{display:flex; align-items:center; gap:4px; border:1px solid #c9dce4; background:#fff; border-radius:999px; padding:2px 10px 2px 2px; font-size:13px; font-weight:800}
.chip canvas{width:26px; height:26px}
/* 結果画面：今回見かけた海のなかま */
.chip .fchip{width:36px !important; height:27px !important; object-fit:contain; border-radius:999px; background:linear-gradient(180deg,#e9f5fa,#cfe7f1)}
.newmark{font-style:normal; font-size:9px; font-weight:800; color:#fff; background:var(--flag); border-radius:4px; padding:1px 4px; margin-left:2px}
/* ベスト更新のはんこ：スコアの左に押す（見出しと重ならないように） */
.stamp{display:inline-grid; vertical-align:middle; margin-right:10px; width:52px; height:52px; border:3px solid var(--flag); border-radius:50%; color:var(--flag); font-family:var(--dela); font-weight:400; font-size:11px; line-height:1.15; place-items:center; transform:rotate(-14deg); opacity:.85}
.slip .row .sub{flex:1}
.sub.wide{display:block; width:100%; margin-top:12px; border-color:#c9dce4; background:#fff; color:var(--paper-ink)}
.sharebtn{display:block; margin:12px auto 14px; min-width:220px; font:inherit; font-weight:800; font-size:17px; border:0; border-radius:999px; padding:11px 30px; background:var(--gold); color:var(--paper-ink); box-shadow:0 4px 0 #a87e00}   /* 結果画面のシェア：「もう一回」の下に、金色で目立たせる（2026-10-31） */
.sharebtn:active{transform:translateY(2px); box-shadow:0 2px 0 #a87e00}
/* 最後のかごを見ているとき */
.boardbar{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 12px); transform:translateX(-50%); display:none; gap:10px; z-index:6}
body.viewing .boardbar{display:flex}
body.viewing .strip, body.viewing #pauseBtn{visibility:hidden}
.boardbar .sub{background:var(--paper); color:var(--paper-ink); border-color:var(--paper)}
.boardbar button{white-space:nowrap; padding:12px 22px; font-size:16px}

/* ---- 図鑑 ---- */
.zukan,.zlist{z-index:6}
.zcard{background:#fff; color:var(--paper-ink); border-radius:18px; padding:18px 20px 20px; width:min(340px,100%); max-height:100%; overflow:auto; text-align:center; border-top:8px solid var(--flag)}
.zcard .found{font-size:12px; font-weight:800; color:var(--flag); margin:0 0 2px; min-height:1em}
.zcard canvas{width:110px; height:110px; display:block; margin:4px auto 6px}
.zcard h2{font-family:var(--dela); font-weight:400; font-size:24px; margin:0 0 2px}
.zrec{font-size:11px; font-weight:700; color:#5b7684; margin:0 0 8px; min-height:1em}
.zcard .txt{font-size:14px; line-height:1.7; text-align:left; margin:0 0 10px}
.info{display:grid; grid-template-columns:auto 1fr; gap:6px 10px; text-align:left; font-size:13px; line-height:1.55; margin:0 0 12px; background:#f6fafb; border-radius:12px; padding:10px 12px}
.info dt{font-weight:800; color:var(--flag); white-space:nowrap}
.info dd{margin:0}
.months{display:grid; grid-template-columns:repeat(12,1fr); gap:2px}
.months span{font-size:9px; font-weight:700; text-align:center; color:#9fb3bd; background:#e6eef1; border-radius:3px; padding:2px 0}
.months span.on{background:var(--flag); color:#fff}
.quiz{background:#eef6f9; border-radius:12px; padding:12px; margin:0 0 14px; text-align:left}
.quiz .q{font-size:14px; font-weight:800; line-height:1.6; margin:0}
.quiz .a{font-family:var(--dela); font-size:26px; color:var(--flag); text-align:center; margin:8px 0 0; display:none}
.quiz .a.show{display:block}
.quiz .a.small{font-family:inherit; font-size:15px; font-weight:800; text-align:left}
.quiz .reveal{display:block; margin:10px auto 0; font-weight:800; font-size:14px; border:2px solid var(--paper-ink); background:#fff; color:var(--paper-ink); border-radius:999px; padding:7px 18px}
.choices{display:grid; gap:6px; margin:10px 0 0}
.choices button{font-weight:700; font-size:14px; text-align:left; border:2px solid #c9dce4; background:#fff; color:var(--paper-ink); border-radius:10px; padding:8px 12px}
.choices button.right{border-color:#1f8a4c; background:#e6f6ec}
.choices button.wrong{border-color:var(--flag); background:#fbe9ea}
.choices button:disabled{cursor:default}
.zlcard{background:#fff; color:var(--paper-ink); border-radius:18px; padding:18px 16px 18px; width:min(360px,100%); max-height:100%; overflow:auto; text-align:center; border-top:8px solid var(--flag)}
.zlcard h2{font-family:var(--dela); font-weight:400; font-size:22px; margin:0}
.zlcount{font-size:12px; color:#3f6070; margin:2px 0 12px}
.complete{display:flex; align-items:center; gap:10px; background:#fff6d6; border:2px solid var(--gold); border-radius:14px; padding:8px 12px; margin:0 0 12px; text-align:left; font-size:12px; line-height:1.5}
.complete img{width:56px; height:auto; flex:0 0 auto}
.complete b{font-family:var(--dela); font-weight:400; font-size:16px; color:var(--flag)}
.zgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px}
.zgrid button{position:relative; border:1px solid #d5e4ea; background:#f6fafb; border-radius:12px; padding:8px 4px 6px; color:var(--paper-ink)}
.zgrid canvas{width:56px; height:56px; display:block; margin:0 auto 4px}
.zgrid .unknown canvas{filter:brightness(0); opacity:.25}
.zgrid span{font-size:12px; font-weight:700}
/* 図鑑の「とくべつ」の枠（金・虹のサメ。2026-10-30） */
.zgrid .zspecial-h{grid-column:1/-1; margin:6px 0 0; font-size:12px; font-weight:800; color:#a4700f; letter-spacing:.1em; text-align:center}
.zgrid .zspecial-h::before, .zgrid .zspecial-h::after{content:"✦"; margin:0 6px; color:#e0a92e}
.zgrid .zspecial.kin:not(.unknown){border:2px solid #e0a92e; background:linear-gradient(160deg,#fffbe6,#fbe7a8)}
.zgrid .zspecial.niji:not(.unknown){border:2px solid transparent; background:linear-gradient(#fffaf0,#fffaf0) padding-box, linear-gradient(90deg,#ff5a5a,#ffa83a,#ffe74a,#5fd86a,#4ab8ff,#7a6bff,#d86bff) border-box}
.zgrid .zspecial.unknown{border-style:dashed}
.zgrid .zhint{display:block; margin-top:2px; font-size:10px; line-height:1.3; font-weight:700; color:#6b8794; word-break:keep-all; overflow-wrap:anywhere}   /* まだ見つけていないものの作り方 */
.shun{position:absolute; left:5px; top:4px; font-style:normal; font-weight:800; font-size:10px; color:#fff; background:var(--flag); border-radius:4px; padding:1px 4px}
.kicker{margin:0 0 4px; font-weight:800; color:var(--flag); font-size:12px; letter-spacing:.08em}
.ktext{font-size:14px; line-height:1.7; text-align:left; margin:0 0 10px}
.kbonus{font-size:15px; margin:0 0 16px}
.kbonus b{color:var(--flag)}
.kearashi{z-index:7}
.qstamp{position:absolute; right:5px; top:3px; font-style:normal; font-weight:800; color:var(--flag); font-size:14px}
.tabs{display:flex; gap:6px; justify-content:center; margin:8px 0 4px}
.tabs button{border:2px solid #c9dce4; background:#fff; color:var(--paper-ink); border-radius:999px; padding:5px 11px; font-weight:800; font-size:12px}
.tabs button[aria-selected="true"]{background:var(--paper-ink); border-color:var(--paper-ink); color:#fff}
.spotgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:10px}
.spot{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; text-align:left; border:1px solid #d5e4ea; background:#f6fafb; border-radius:12px; padding:8px; color:var(--paper-ink)}
.spot svg, .spot .ficon{grid-row:1 / 3; border-radius:6px}
.spot.locked .ficon{opacity:.35}
.spotcard #spIcon canvas{border-radius:12px}
.spot b{font-size:12px; line-height:1.3}
.spot small{font-size:10px; color:#5b7684; line-height:1.3}
.spot.locked{cursor:default}
.spot.locked svg{filter:grayscale(1) opacity(.4)}
.spotov{z-index:7}
/* 海のなかま：大きな絵 */
.friendgrid{margin-bottom:10px}
/* 季節ごとの枠 */
.fsec{border:2px solid var(--fsec, #c9dce4); border-radius:16px; padding:6px 8px 10px; margin:0 0 12px; background:#fbfdfe}
.fsec h3{display:flex; align-items:center; gap:8px; margin:0 0 6px; font-family:var(--dela); font-weight:400; font-size:17px; color:var(--fsec, #3f6070); text-align:left}
.fsec h3 small{font-family:inherit; font-size:11px; font-weight:700; color:#5b7684}
.fsec h3 i{margin-left:auto; font-style:normal; font-size:10px; font-weight:800; color:#fff; background:var(--fsec, #3f6070); border-radius:999px; padding:2px 8px; font-family:"M PLUS Rounded 1c",sans-serif}
.fsec.now{box-shadow:0 0 0 3px rgba(242,183,5,.35)}
.fsec-any{--fsec:#3f7ea0}
.fsec-spring{--fsec:#d0648f}
.fsec-summer{--fsec:#2d9a6a}
.fsec-autumn{--fsec:#c8642a}
.fsec-winter{--fsec:#5d78a8}
.fgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.friend{display:flex; flex-direction:column; align-items:center; gap:2px; border:1px solid #d5e4ea; background:linear-gradient(180deg,#e9f5fa,#cfe7f1); border-radius:14px; padding:8px 6px 8px; color:var(--paper-ink)}
.friend .fbig{width:100%; height:auto; aspect-ratio:4 / 3; object-fit:contain; display:block}
.friend b{font-size:14px}
.friend small{font-size:10px; color:#5b7684}
.friend.locked{cursor:default}
.friend.locked .fbig{filter:brightness(0) opacity(.18)}
.fhuge{width:min(300px,78vw); height:auto; aspect-ratio:4 / 3; object-fit:contain; display:block; margin:0 auto; filter:drop-shadow(0 6px 10px rgba(0,40,60,.25))}
.spotcard #spIcon{display:grid; place-items:center; margin:4px 0 8px}
.spdesc{font-size:14px; line-height:1.7; margin:0 0 6px}
.spgot{font-size:11px; color:#5b7684; margin:0 0 14px}
.golinkbtn{display:inline-block; text-decoration:none; font-size:15px}
.golink{color:#1f6aa5; font-weight:800}
.tip{background:#eef6f9; border-radius:12px; padding:10px 12px; margin:0 0 14px; text-align:left}
.tip-k{margin:0; font-size:11px; font-weight:800; color:var(--flag)}
.tip-n{margin:2px 0; font-family:var(--dela); font-size:17px}
.tip-d{margin:0 0 6px; font-size:12px; line-height:1.6}
.tip-a{display:block; margin-top:8px; padding:11px 14px; border-radius:999px; background:var(--flag); color:#fff; font-size:14px; font-weight:800; text-align:center; text-decoration:none; box-shadow:0 3px 0 #8a1420}
.tip-a:active{transform:translateY(2px); box-shadow:0 1px 0 #8a1420}
.spotchip svg{flex:0 0 auto}
.credit a{color:rgba(230,242,247,.85)}
/* ホーム画面に置く方法 */
.installov{z-index:7}   /* 結果画面のおすすめから開いても、上に出す */
.installov .card{text-align:center}
/* アプリ版だけ：説明のページを開く小窓（ランキングの参加の画面などより上に出す。2026-10-31） */
.ov.docov{z-index:30; padding:calc(env(safe-area-inset-top,0px) + 10px) 10px calc(env(safe-area-inset-bottom,0px) + 10px)}
.doccard{width:min(560px,100%); height:100%; display:flex; flex-direction:column; gap:10px; padding:10px}
.doccard iframe{flex:1; width:100%; min-height:0; border:0; border-radius:12px; background:#fff}
.doccard .go{flex:none; margin:0}
/* 結果画面：ホーム画面に置くおすすめ */
.a2hs{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; background:#fff6dc; border:2px solid #f2c14e; border-radius:14px; padding:10px 30px 10px 10px; margin:0 0 12px; text-align:left}
.a2hs[hidden]{display:none}
.a2hs img{width:40px; height:40px; border-radius:10px; flex:none}
.a2hs p{flex:1; min-width:150px; margin:0; font-size:13px; font-weight:700; line-height:1.5; color:#3b2a00}
.a2hs p small{font-size:11px; color:#7a6330}
.a2hs-go{flex:1 1 100%; border:0; border-radius:999px; background:#f2c14e; color:#3b2a00; font-size:14px; font-weight:800; padding:8px 12px; cursor:pointer}
.a2hs-x{position:absolute; right:4px; top:2px; border:0; background:none; font-size:20px; line-height:1; padding:4px 6px; color:#7a6330; cursor:pointer}
.iicon{display:block; margin:0 auto 8px; border-radius:16px; box-shadow:0 4px 12px rgba(0,0,0,.2)}
.inote{font-size:13px; margin:0 0 12px; line-height:1.6}
.isteps{text-align:left; margin:0 0 14px; padding-left:1.6em; font-size:14px; line-height:1.6}
.isteps li{margin-bottom:8px}
.isteps small{color:#5b7684; font-size:12px}
.installov .go[hidden], .installov .sub[hidden]{display:none}
.installov .link{display:block; margin:8px auto 0}
.rankov,.joinov{z-index:7}
.joinov{z-index:8}
.rkcard{background:#fff; color:var(--paper-ink); border-radius:18px; padding:16px 14px 16px; width:min(380px,100%); text-align:center; border-top:8px solid var(--gold)}
.rk-season{margin:0; font-size:12px; font-weight:800; color:var(--flag); letter-spacing:.06em}
.rkcard h2{font-family:var(--dela); font-weight:400; font-size:24px; margin:0}
.rk-total{font-size:12px; color:#3f6070; margin:4px 0 8px}
.rk-desc{font-size:12px; color:#3f6070; margin:4px 0 6px; text-align:center; white-space:pre-line}
.rk-list{display:grid; gap:6px; margin:10px 0; max-height:52vh; overflow:auto; text-align:left}
.rk-row{display:grid; grid-template-columns:30px 40px 1fr auto auto; align-items:center; gap:8px; background:#f6fafb; border:1px solid #d5e4ea; border-radius:12px; padding:7px 10px}
.rk-row.mine{background:#fff6d6; border-color:var(--gold)}
.rk-rank{font-family:var(--dela); font-size:18px; text-align:center; color:#5b7684}
.rk-name{font-weight:800; font-size:14px; line-height:1.25; overflow:hidden}
.rk-name small{display:block; font-weight:700; font-size:10px; color:#5b7684}
.rk-new{display:inline-block; margin-left:5px; padding:1px 5px; border-radius:6px; background:var(--flag); color:#fff; font-style:normal; font-size:9px; font-weight:900; letter-spacing:.04em; vertical-align:2px; line-height:1.4}   /* 24 時間以内の記録 */
.rk-val{font-family:var(--dela); font-size:16px; color:var(--flag); white-space:nowrap}
.rk-report{border:0; background:none; color:#9fb3bd; font-size:10px; padding:2px}
.rk-acts{display:flex; flex-direction:column; align-items:flex-end; gap:2px}   /* 通報・見えなくする（2026-10-31） */
.rk-ava{width:40px; height:40px; border-radius:50%; background:radial-gradient(circle at 50% 35%, #e9f5fa, #bcdbe8); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,40,60,.25); display:grid; place-items:center; overflow:hidden}
.rk-ava img{width:84%; height:84%; object-fit:contain}
.rk-ava.team img{width:72%; height:72%}
.rk-ava.team{background:radial-gradient(circle at 50% 35%, #8fc2d8, #3f7f9e)}   /* 県別は濃い海の青（白っぽいマンボウ・浮玉が見えるように。2026-10-23） */
.rk-ava.unknown img{filter:brightness(0); opacity:.7}   /* まだ会っていないサメは影 */
/* ゲームの絵は、長押しで保存・拡大の画面を出さない（2026-10-31） */
img{-webkit-touch-callout:none; -webkit-user-drag:none; user-select:none}
/* ---- 1〜3 位を華やかに（2026-10-19）：金・銀・銅のメダル、行の色、1 位の王冠、光がすっと流れる ---- */
.rk-row.top1, .rk-row.top2, .rk-row.top3{position:relative; isolation:isolate; border-width:2px; padding:9px 10px}   /* isolation：メダルのリボンを行の背景より手前に出すため */
.rk-row.top1{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 45%,transparent 60%) -200% 0/250% 100% no-repeat, linear-gradient(90deg,#ffe78a,#fff4c7 45%,#fffbea);
  border-color:#e8b923; box-shadow:0 3px 10px rgba(212,160,0,.35); margin-top:10px}
.rk-row.top2{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.8) 45%,transparent 60%) -200% 0/250% 100% no-repeat, linear-gradient(90deg,#dfe7ec,#f1f5f7 45%,#fafcfd);
  border-color:#aebdc6; box-shadow:0 2px 8px rgba(110,130,145,.3)}
.rk-row.top3{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 45%,transparent 60%) -200% 0/250% 100% no-repeat, linear-gradient(90deg,#f3cfae,#f9e6d4 45%,#fdf6ef);
  border-color:#c98a57; box-shadow:0 2px 8px rgba(176,106,58,.3)}
/* 順位の数字はメダルに */
.rk-row.top1 .rk-rank, .rk-row.top2 .rk-rank, .rk-row.top3 .rk-rank{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:16px; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35); position:relative}
.rk-row.top1 .rk-rank{background:radial-gradient(circle at 35% 30%,#fff6b8,#f2c230 45%,#c08a00); box-shadow:0 0 0 2px #fff, 0 0 0 3px #d4a000, 0 2px 6px rgba(160,110,0,.5)}
.rk-row.top2 .rk-rank{background:radial-gradient(circle at 35% 30%,#ffffff,#c3ced5 45%,#7f8f9a); box-shadow:0 0 0 2px #fff, 0 0 0 3px #95a5b0, 0 2px 6px rgba(80,95,105,.45)}
.rk-row.top3 .rk-rank{background:radial-gradient(circle at 35% 30%,#ffe2c4,#d68f55 45%,#8f5022); box-shadow:0 0 0 2px #fff, 0 0 0 3px #b06a3a, 0 2px 6px rgba(120,60,20,.45)}
/* メダルのリボン */
.rk-row.top1 .rk-rank::before, .rk-row.top2 .rk-rank::before, .rk-row.top3 .rk-rank::before{content:''; position:absolute; left:50%; bottom:-9px; width:14px; height:10px; transform:translateX(-50%);
  background:linear-gradient(90deg,var(--flag) 0 50%,#1f6aa5 50% 100%); clip-path:polygon(0 0,100% 0,100% 100%,50% 65%,0 100%); z-index:-1}
/* アイコンのふちも金・銀・銅 */
.rk-row.top1 .rk-ava{border:3px solid #f2b705; box-shadow:0 0 0 2px #fff6c8, 0 2px 8px rgba(212,160,0,.55)}
.rk-row.top2 .rk-ava{border:3px solid #b8c4cc; box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(110,130,145,.4)}
.rk-row.top3 .rk-ava{border:3px solid #d08a55; box-shadow:0 0 0 2px #fff3e6, 0 2px 6px rgba(176,106,58,.4)}
/* 1 位は王冠（アイコンの上） */
.rk-row.top1::after{content:'👑'; position:absolute; left:58px; top:-13px; font-size:20px; transform:rotate(-12deg); filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)); pointer-events:none}
.rk-row.top1 .rk-name{font-size:15px}
.rk-row.top1 .rk-val{font-size:18px; color:#b8320a}
/* 自分の行が 1〜3 位のときは、金色のふちで分かるように */
.rk-row.mine.top1, .rk-row.mine.top2, .rk-row.mine.top3{outline:3px solid var(--flag); outline-offset:1px}
/* 光がすっと流れる（4 秒おき。1 位・2 位・3 位で少しずらす） */
@media (prefers-reduced-motion: no-preference){
  .rk-row.top1, .rk-row.top2, .rk-row.top3{animation:rkShine 4s ease-in-out infinite}
  .rk-row.top2{animation-delay:.25s} .rk-row.top3{animation-delay:.5s}
  .rk-row.top1::after{animation:rkCrown 2.4s ease-in-out infinite}
}
@keyframes rkShine{0%,55%{background-position:-200% 0,0 0} 85%,100%{background-position:200% 0,0 0}}
@keyframes rkCrown{0%,100%{transform:rotate(-12deg) translateY(0)} 50%{transform:rotate(-8deg) translateY(-2px)}}
.jicons{display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.jicon{aspect-ratio:1; border-radius:50%; border:2px solid #c9dce4; background:radial-gradient(circle at 50% 35%, #fff, #dcecf3); padding:0; display:grid; place-items:center; overflow:hidden; font-weight:800; color:#9fb3bd}
.jicon img{width:82%; height:82%; object-fit:contain}
.jicon.on{border-color:var(--flag); box-shadow:0 0 0 2px rgba(200,35,47,.3)}
.jicon.locked{background:#eef2f4; cursor:default}
.rk-msg{text-align:center; color:#5b7684; font-size:13px; padding:20px 0}
.askov{z-index:9; align-items:center; justify-content:center}
.askov.show{display:flex}
.askcard p{white-space:pre-line; font-size:15px; line-height:1.7; margin:0 0 14px}
.askcard .sub{margin-top:8px}
.rk-gap{text-align:center; color:#5b7684; font-size:16px; letter-spacing:.3em; margin:2px 0}   /* 上位 20 人と「自分の前後」のあいだ */
.rk-me{font-size:12px; font-weight:700; color:#3f6070; margin:6px 0 10px}
.rk-next{display:block; margin-top:4px; font-size:15px; font-weight:800; color:var(--flag)}   /* 「○ 位まで あと ○ 点！」 */
.rk-note{font-size:10px; color:#7a909b; margin:8px 0 0}
.rkcard .link{display:block; margin:8px auto 0}
.joincard{display:grid; gap:8px; text-align:left}
.joincard h2{text-align:center; margin-bottom:4px}
.jfield{display:grid; grid-template-columns:minmax(0,1fr); gap:4px; font-size:13px; font-weight:800}
.jfield select,.jfield input{width:100%; min-width:0}   /* 入力の箱が、もともとの幅のまま右にはみ出さないように（2026-10-31：iPhone のアプリで、ニックネームの箱が右に出ていた） */
.jfield select,.jfield input,.jlink input{font:inherit; font-size:16px; padding:9px 10px; border:2px solid #c9dce4; border-radius:10px; background:#fff; color:var(--paper-ink); -webkit-user-select:text; user-select:text}
.jnote{font-size:11px; color:#5b7684; margin:0; line-height:1.5}
.jagree{font-size:12px; font-weight:700}
.jerr{color:var(--flag); font-size:13px; font-weight:800; margin:0; min-height:1em}
.joincard .go,.joincard .link{justify-self:center}
.jcode{background:#fff6d6; border:2px solid var(--gold); border-radius:12px; padding:10px; text-align:center}
.jcode p{margin:0 0 4px; font-size:12px}
.jcode-big{font-family:var(--dela); font-size:24px; letter-spacing:.06em; color:var(--paper-ink); -webkit-user-select:all; user-select:all}
.jlink{background:#eef6f9; border-radius:12px; padding:10px}
.jlink p{margin:0 0 6px; font-size:12px; font-weight:700}
.jlink-row{display:flex; gap:6px}
.jlink-row input{flex:1; min-width:0; width:0}   /* width:0 で、入力の箱が「最低これだけの幅」を持たないように（2026-10-26：参加ずみでもこの欄を出したら、iPhone で画面が左右にふらついた） */
.joincard > *{min-width:0}   /* 中の部品が、カードを画面より広げないように */
.jcode-big{overflow-wrap:anywhere}
.link.danger{color:var(--flag)}
.slip-rank{background:#fff6d6; border-radius:12px; padding:8px 10px; margin:0 0 12px; font-size:13px; font-weight:700}
.slip-rank p{margin:0 0 6px}
.slip-rank .slip-news{font-size:15px; font-weight:900; color:var(--flag)}   /* 「○ 位に入ったよ！」 */
/* ひとことアンケート（結果画面）。まわりのクリーム色・水色の枠にうもれないよう、海の濃い青に白い字（2026-10-18） */
.vote{background:linear-gradient(180deg,#1f6f99,#155577); border-radius:14px; padding:10px 10px 8px; margin:0 0 12px; text-align:center; box-shadow:0 3px 0 #0e3f59}
.vote-q{margin:0 0 8px; font-size:14px; font-weight:800; color:#fff}
.vote-row{display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
.vote-b{border:2px solid #fff; background:#fff; color:#1a2a33; border-radius:999px; padding:6px 11px; font-size:13px; font-weight:800; cursor:pointer}
.vote-b.on{background:#ffd23f; border-color:#ffd23f; color:#1a2a33}
.vote-s{display:block; margin-top:7px; font-size:10.5px; color:rgba(255,255,255,.8)}
.slip-rank p:last-child{margin:0}
.zall{display:block; font-size:12px; color:#3f6070; margin:0 0 14px}
.zall[hidden]{display:none}
@media (prefers-reduced-motion: reduce){ .strip .t > canvas, .strip .t > span, .toast, .nowplaying{transition:none} }

/* ランキングの下のボタンを横並びに（2026-10-23）。よく使うほうを右で広く・赤く、もう片方を左で狭く・控えめに */
.rk-btns{display:flex; gap:12px; align-items:stretch; margin-top:2px}
.rk-b{border-radius:999px; font-weight:800; cursor:pointer; min-height:50px}
.rk-btns #rkClose{order:0; flex:1; font-size:14px; padding:10px 8px; border:2px solid #c9dce4; background:#fff; color:#5b7684}
.rk-btns #rkJoin{order:1; flex:2; font-size:16px; padding:12px 10px; border:0; background:var(--flag); color:#fff; box-shadow:0 4px 0 #8f1620}
.rk-btns.joined #rkJoin{order:0; flex:1; font-size:14px; padding:10px 8px; border:2px solid #c9dce4; background:#fff; color:#5b7684; box-shadow:none}
.rk-btns.joined #rkClose{order:1; flex:2; font-size:16px; padding:12px 10px; border:0; background:var(--flag); color:#fff; box-shadow:0 4px 0 #8f1620}
.rk-btns .rk-b:active{transform:translateY(2px)}
@media (max-height:720px){ .rk-list{max-height:43vh} }   /* 画面の低いスマホでは、カードがはみ出さないよう表を控えめに */
/* ---- 大会（お店の QR から参加。rank.js の「大会」。2026-11-05）---- */
.tk-open[hidden]{display:none}   /* 参加していない人には出さない（display:block が hidden を上書きしていた。2026-11-06） */
.tk-open{display:block; width:100%; margin:8px 0 6px; padding:10px; border-radius:12px; border:2px solid #0b3549; background:#0b3549; color:#fff; font:inherit; font-weight:800; font-size:14px; cursor:pointer; box-shadow:0 3px 8px rgba(11,53,73,.25)}   /* タブの下に置き、1 位の金色と区別がつく濃い青に（2026-11-06 ユーザー） */
.tkcard #tkBody{display:grid; gap:8px; margin-top:6px}
.tkcard #tkBody > .go{justify-self:center; margin-top:4px}
.tkcard #tkBody > .link{justify-self:center; margin-top:0}
.tk-from{display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap}
.tk-from small{font-size:12px; color:#3f6070; font-weight:700}
.tk-from.small{margin-top:-4px}
.tk-shop{display:inline-flex; align-items:center; gap:4px; max-width:100%; vertical-align:middle}
.tk-shop img{height:18px; width:auto; max-width:60px; object-fit:contain; border-radius:4px}
.tk-shop b{font-size:10px; font-weight:800; color:#5b7684; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rk-name .tk-shop{display:flex; margin-top:2px}
.tk-shop.big{background:#f6fafb; border:2px solid #d5e4ea; border-radius:12px; padding:6px 10px}
.tk-shop.big img{height:36px; max-width:120px}
.tk-shop.big b{font-size:15px; color:var(--paper-ink)}
.tk-period{margin:0; font-size:13px; font-weight:800; color:var(--paper-ink)}
.tk-rules{margin:0; padding:10px 12px 10px 28px; background:#eef6f9; border-radius:12px; text-align:left; font-size:12px; line-height:1.6}
.tk-need{margin:0; font-size:13px; font-weight:800; color:var(--paper-ink)}
.tk-state{font-weight:800}
.tk-state.during{color:var(--flag)}
.tk-row{grid-template-columns:30px 40px 1fr auto auto}
.tk-pick{width:100%}
.tk-prize{background:linear-gradient(180deg,#fff6d6,#fffdf4); border:4px solid var(--gold); border-radius:18px; padding:14px 10px; display:grid; gap:4px; justify-items:center}
.tk-prize p{margin:0}
.tk-medal{font-size:56px; line-height:1}
.tk-rank{font-family:var(--dela); font-size:40px; color:var(--flag)}
.tk-nick{font-size:22px; font-weight:900; color:var(--paper-ink); word-break:break-all}
.tk-score{font-size:14px; font-weight:800; color:#3f6070}
.tk-no{display:grid; justify-items:center; background:#fff; border:3px dashed var(--flag); border-radius:12px; padding:4px 18px; margin-top:6px !important}
.tk-no small{font-size:11px; font-weight:800; color:#5b7684}
.tk-no b{font-family:var(--dela); font-size:36px; letter-spacing:.12em; color:var(--paper-ink); line-height:1.1}
.tk-clock{font-family:var(--dela); font-size:18px; color:var(--paper-ink); background:#fff; border-radius:999px; padding:4px 14px; margin-top:6px !important}
@keyframes tkBob{0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-4px) scale(1.06)}}
@media (prefers-reduced-motion:no-preference){ .tk-medal{animation:tkBob 1.6s ease-in-out infinite} }   /* 動いている＝写真ではない、の目印にも */
.tk-rules-box{background:#eef6f9; border-radius:12px; padding:8px 12px; text-align:left; font-size:12px}
.tk-rules-box summary{font-weight:800; cursor:pointer; color:var(--paper-ink)}
.tk-rules-box p{margin:6px 0 0; white-space:pre-line; line-height:1.6; color:#3f6070}
.tk-prize{position:relative}
.tk-prize.claimed{filter:saturate(.5)}
.tk-stamp{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--dela); font-size:34px; color:#b8320a; transform:rotate(-14deg); text-shadow:0 0 6px #fff, 0 0 12px #fff; pointer-events:none}   /* 受け取り済みの印 */
.tk-claim{background:#f6fafb; border:2px dashed #c9dce4; border-radius:12px; padding:10px; display:grid; gap:6px; text-align:left}
.tk-claim p{margin:0; font-size:12px; font-weight:800; color:#3f6070}
.tk-claim-shop{font:inherit; font-size:15px; padding:8px 10px; border:2px solid #c9dce4; border-radius:10px; background:#fff; color:var(--paper-ink)}
.tk-claim .sub{justify-self:center}