:root{
  /* ホワイト基調（明るく気分が上がるトーン） */
  --bg:#f4f8fa; --bg2:#ffffff; --panel:#ffffff; --panel2:#eef5f8;
  --line:#dfe9ee; --fg:#16323f; --dim:#5b7688; --dim2:#93a7b2;
  --acc:#0e9bb5; --acc2:#0b7f96; --gold:#dd8f1f; --red:#d64545;
  --c-c:#7c92a0; --c-u:#2fa360; --c-r:#1f8fd1; --c-e:#8b5cd6; --c-l:#dd8f1f;
  --shadow:0 2px 10px rgba(22,50,63,.07); --shadow-lg:0 10px 30px rgba(22,50,63,.14);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:linear-gradient(180deg,#eaf5f8 0%,var(--bg) 260px) fixed,var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic UI",sans-serif;
  font-size:15px; line-height:1.6; overscroll-behavior-y:none;
}
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
button{cursor:pointer;border:none;background:none}
h1,h2,h3,p{margin:0}

/* ---------- layout ---------- */
#app{max-width:520px;margin:0 auto;padding:0 14px calc(96px + var(--safe-b));}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;
  padding:14px 2px 10px;background:linear-gradient(180deg,var(--bg) 72%,transparent);
}
.topbar .logo{font-size:17px;font-weight:800;letter-spacing:.08em;color:var(--fg)}
.topbar .logo small{font-weight:700;font-size:10px;color:var(--acc2);letter-spacing:.2em;display:block;margin-top:-2px}
.spacer{flex:1}
.chip-lv{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;box-shadow:var(--shadow)}
.chip-lv b{color:var(--acc);font-size:15px}
.chip-gacha{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;box-shadow:var(--shadow);display:flex;align-items:center;gap:4px;color:var(--dim2)}
.chip-gacha.has{color:var(--gold);border-color:var(--gold)}
.chip-gacha span{font-size:12px}
.chip-set{background:#fff;border:1px solid var(--line);border-radius:999px;width:30px;height:30px;font-size:14px;box-shadow:var(--shadow);display:grid;place-items:center;color:var(--dim)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.card.tight{padding:12px}
.sec-title{font-size:12px;font-weight:800;color:var(--dim);letter-spacing:.12em;margin:18px 4px 8px}

/* ---------- character hero ---------- */
.hero{text-align:center;position:relative;overflow:hidden;
  border-radius:22px;padding:18px 16px 16px;margin-bottom:12px;box-shadow:var(--shadow-lg);
  border:1px solid var(--line);isolation:isolate}
.hero .sky{position:absolute;inset:0;z-index:0;border-radius:22px;overflow:hidden}
.sky-dawn{background:linear-gradient(180deg,#ffd9a8 0%,#ffb199 42%,#8fd0d8 100%)}
.sky-day{background:linear-gradient(180deg,#8fd3e8 0%,#cdeef5 100%)}
.sky-dusk{background:linear-gradient(180deg,#ffb199 0%,#c98fd0 55%,#4a5a8f 100%)}
.sky-night{background:linear-gradient(180deg,#13284a 0%,#1b3a5c 55%,#234a6b 100%)}
.sky .deco{position:absolute;font-size:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.sky .sun{animation:floaty 5s ease-in-out infinite}
.sky .moon{animation:floaty 6s ease-in-out infinite}
.sky .cloud{position:absolute;font-size:22px;opacity:.85;animation:drift linear infinite}
.sky .star{position:absolute;border-radius:50%;background:#fff;animation:twinkle ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes drift{from{transform:translateX(-40px)}to{transform:translateX(340px)}}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}}
.hero .waves{position:absolute;left:0;right:0;bottom:0;height:70px;opacity:.9;pointer-events:none;z-index:1}
.hero .content{position:relative;z-index:2}
.charwrap{position:relative;display:inline-block}
.charwrap svg,.charwrap img{display:block;animation:bob 3.4s ease-in-out infinite}
/* まばたき：目を閉じた双子画像(rank{ri}_blink.png)を base の真上に重ねておき、
   app.js が id="homeEyes" 要素へ .blinking を一瞬だけ付ける瞬間だけ見せる */
.char-base{display:block}
/* フェード（transition）を挟むと、ベースとまばたき画像の輪郭線が数px単位でズレているため
   混ざり合う一瞬だけ「線が二重になって体が一回り小さく見える」不具合が出る。
   瞬きは実際も一瞬なので、フェードなしの瞬時切り替えにして解決する。 */
.char-blink{position:absolute;inset:0;opacity:0;pointer-events:none}
.char-blink.blinking{opacity:1}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.eyeframe-closed{display:none}
.eyes-grp.blinking .eyeframe-open{display:none}
.eyes-grp.blinking .eyeframe-closed{display:inline}
.bobber-grp{transform-box:fill-box;transform-origin:center}
.bobber-grp.bite{animation:bite .45s ease-in-out}
@keyframes bite{0%,100%{transform:translateY(0)}40%{transform:translateY(9px)}}
.rod-sway{transform-box:fill-box;transform-origin:15% 95%;animation:rodsway 4s ease-in-out infinite}
@keyframes rodsway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-1.6deg)}}
.cape-sway{transform-box:fill-box;transform-origin:top center;animation:capesway 3.2s ease-in-out infinite}
@keyframes capesway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(3deg)}}
.halo-rot{transform-box:fill-box;transform-origin:center;animation:rot 7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.sparkle{animation:sp 1.6s ease-in-out infinite}
@keyframes sp{0%,100%{filter:drop-shadow(0 0 6px rgba(221,143,31,.45))}50%{filter:drop-shadow(0 0 16px rgba(221,143,31,.9))}}
.particle{animation:pfloat 3.2s ease-in-out infinite}
@keyframes pfloat{0%{transform:translateY(0);opacity:0}20%{opacity:.9}100%{transform:translateY(-40px);opacity:0}}

.speech{position:relative;z-index:3;max-width:280px;margin:0 auto 4px;min-height:40px;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:9px 14px;
  font-size:13px;font-weight:600;color:var(--fg);box-shadow:var(--shadow);cursor:pointer}
.speech:after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  width:12px;height:12px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,50% 100%)}
.speech .cursor{opacity:.5}
.tapme{font-size:10px;color:var(--dim2);margin:2px 0 8px;position:relative;z-index:3}

.rankname{font-size:20px;font-weight:800;margin-top:2px;letter-spacing:.02em;position:relative;z-index:3;color:var(--hero-fg,var(--fg));cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.rankname .lv{color:var(--acc);font-size:13px;font-weight:700;margin-left:6px}
.rankname .galleryhint{font-size:12px;opacity:.7}

/* 称号ギャラリー */
.rggrid{display:flex;flex-direction:column;gap:8px}
.rgrow{display:flex;align-items:center;gap:12px;background:var(--panel2);border-radius:14px;padding:8px 12px;border:1px solid transparent}
.rgrow.now{border-color:var(--acc);background:linear-gradient(90deg,rgba(14,155,181,.10),var(--panel2))}
.rgchar{position:relative;flex:none;width:56px;height:56px;display:grid;place-items:center}
.rgtx{flex:1;min-width:0}
.rgname{font-size:14.5px;font-weight:800;display:flex;align-items:center;gap:6px}
.rgnow{font-size:9.5px;font-weight:800;color:#fff;background:var(--acc);border-radius:5px;padding:1px 6px}
.rglv{font-size:11px;color:var(--dim)}
.rgevo{font-size:12px;color:var(--gold);font-weight:600;margin-top:2px}
.anglername{font-size:12px;color:var(--hero-fg,var(--fg));opacity:.75;margin-bottom:6px;position:relative;z-index:3;font-weight:700}
.xpbar{height:12px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);overflow:hidden;margin:12px 0 6px;position:relative;z-index:3}
.xpbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.xptext{display:flex;justify-content:space-between;font-size:11px;color:var(--hero-fg,var(--fg));opacity:.85;font-weight:700;position:relative;z-index:3}
.nextrank{font-size:11.5px;color:var(--hero-fg,var(--fg));opacity:.9;margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.6);position:relative;z-index:3;font-weight:600}
.nextrank b{color:#a5480c;background:#fff;padding:1px 6px;border-radius:6px}

/* ---------- stats ---------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--panel2);border-radius:12px;padding:10px 6px;text-align:center}
.stat b{display:block;font-size:19px;line-height:1.2;color:var(--fg)}
.stat span{font-size:10px;color:var(--dim)}

/* ---------- list rows ---------- */
.row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .ic{width:34px;height:34px;border-radius:10px;background:var(--panel2);display:grid;place-items:center;font-size:17px;flex:none}
.row .tx{flex:1;min-width:0}
.row .tx b{display:block;font-size:14.5px;font-weight:700}
.row .tx>span{display:block;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .rt{font-size:11px;color:var(--dim);text-align:right;flex:none}
.row .rt b{display:block;font-size:14px;color:var(--acc)}

/* ---------- 天候カード ---------- */
.wxcard{padding:14px}
.wxtop{display:flex;gap:14px;align-items:center}
.tideblock{flex:none;text-align:center;width:64px}
.tidemoon{font-size:28px;line-height:1}
.tidename{font-size:13px;font-weight:800;margin-top:2px}
.tidesub{font-size:10px;color:var(--dim2)}
.sunblock{flex:1;min-width:0;border-left:1px solid var(--line);padding-left:14px}
.sunrow{font-size:12px;color:var(--fg);margin-bottom:3px}
.sunrow b{color:var(--fg)}
.wxdim{color:var(--dim);font-size:11px}
.wxrow{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);flex-wrap:wrap}
.wxic{font-size:20px}
.wxtemp{font-size:16px;font-weight:800}
.wxmeta{font-size:10.5px;color:var(--dim2);margin-top:6px}
.wxmeta a{color:var(--acc2)}

/* ---------- 今月釣れる魚 ---------- */
.seasonlist{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.seasonlist::-webkit-scrollbar{display:none}
.seasoncard{flex:none;width:88px;background:var(--panel2);border-radius:12px;padding:10px 6px;text-align:center}
.seasoncard .fi{font-size:24px}
.seasoncard .nm{font-size:11.5px;font-weight:700;margin-top:3px}

/* ---------- dex ---------- */
.dexgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dex{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 10px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.dex.locked .fi{filter:grayscale(1) opacity(.4)}
.dex.locked .nm{color:var(--dim2)}
.dex.good{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,var(--shadow)}
.dex.legend{border-color:var(--c-l);box-shadow:0 0 0 2px var(--c-l) inset,0 0 12px rgba(221,143,31,.35)}
.dex .lrtag{position:absolute;top:8px;left:8px;font-size:8.5px;font-weight:800;letter-spacing:.05em;color:#fff;background:linear-gradient(90deg,#dd8f1f,#e8b652);border-radius:5px;padding:1px 5px}
.fi-inline{display:inline-flex;vertical-align:middle}
.fi-inline svg,.fi svg,.ic svg,.badge svg{display:block}
.fishhead .fi.locked svg{filter:grayscale(1) opacity(.45)}
.dex .badge{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 6px;font-size:26px}
.dex .fi{line-height:1}
.dex .nm{font-size:13px;font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dex .sz{font-size:10.5px;color:var(--dim);margin-top:1px}
.dex .ct{position:absolute;top:8px;right:8px;font-size:9.5px;color:#fff;background:var(--acc);border-radius:999px;padding:1px 6px;font-weight:700}
.dexbar{display:flex;gap:6px;align-items:center}
.dexbar .db{flex:1;height:5px;border-radius:3px;background:var(--panel2)}
.dexbar .db.on{background:var(--acc)}

/* ---------- fish detail sheet ---------- */
.fishhead{text-align:center;padding:6px 0 4px}
.fishhead .badge{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;font-size:44px}
.fishhead .fi.locked{filter:grayscale(1) opacity(.35)}
.fishhead h3{font-size:19px;font-weight:800}
.fishhead .cat{font-size:11.5px;color:var(--dim);margin-top:2px}
.fdsec{margin-top:16px}
.fdsec .lbl{font-size:11px;font-weight:800;color:var(--acc2);letter-spacing:.08em;margin-bottom:6px;display:flex;align-items:center;gap:5px}
.fdsec p{font-size:13.5px;line-height:1.75;color:var(--fg)}
.trivia-item{display:flex;gap:8px;align-items:flex-start;background:var(--panel2);border-radius:12px;padding:10px 12px;margin-bottom:6px;font-size:13px;line-height:1.6}
.trivia-item .he{font-size:15px;flex:none}
.monthbar{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.monthbar .mb{aspect-ratio:1;border-radius:6px;background:var(--panel2);display:grid;place-items:center;font-size:9.5px;color:var(--dim2);font-weight:700}
.monthbar .mb.on{background:var(--acc);color:#fff}
.myrecord{background:var(--panel2);border-radius:12px;padding:12px 14px}
.myrecord.empty2{color:var(--dim)}
.credit{font-size:10px;color:var(--dim2);text-align:right;margin-top:10px}

/* ---------- ガチャ ---------- */
.gachastage{display:grid;place-items:center;padding:20px 0;background:radial-gradient(circle,rgba(14,155,181,.08),transparent 70%);border-radius:16px}
.gachabox{font-size:64px;transition:filter .2s}
.gachabox.shake{animation:gshake .55s ease-in-out}
@keyframes gshake{0%,100%{transform:rotate(0)}15%{transform:rotate(-8deg)}30%{transform:rotate(8deg)}45%{transform:rotate(-10deg)}60%{transform:rotate(10deg)}75%{transform:rotate(-6deg)}90%{transform:rotate(6deg)}}
.gachabox.flash{animation:gflash .45s ease-out}
@keyframes gflash{0%{filter:brightness(1)}40%{filter:brightness(2.6) drop-shadow(0 0 24px currentColor)}100%{filter:brightness(1)}}
.rarglow-c{color:#c9d2d6}.rarglow-u{color:var(--c-u)}.rarglow-r{color:var(--c-r)}.rarglow-e{color:var(--c-e)}.rarglow-l{color:var(--c-l)}
.lurecard{margin-top:16px;text-align:center;background:var(--panel2);border-radius:16px;padding:18px 14px;border:2px solid var(--line);animation:pop .4s}
.rarborder-c{border-color:var(--c-c)}.rarborder-u{border-color:var(--c-u)}.rarborder-r{border-color:var(--c-r)}
.rarborder-e{border-color:var(--c-e);box-shadow:0 0 16px rgba(139,92,214,.25)}
.rarborder-l{border-color:var(--c-l);box-shadow:0 0 22px rgba(221,143,31,.4)}
.lureart{display:flex;justify-content:center;margin-bottom:6px}
.lurename{font-size:16px;font-weight:800}
.luremaker{font-size:12px;color:var(--dim);margin-top:2px;display:flex;align-items:center;justify-content:center;gap:6px}
.lurestar{color:var(--gold);font-size:15px;margin-top:6px;letter-spacing:.05em}
.lurescene{font-size:11.5px;color:var(--acc2);margin-top:8px;font-weight:600}
/* 未入手ルアーは中身を伏せる（何が出るか分からないほうがガチャは楽しい） */
.dex.unknown .nm{color:var(--dim2);letter-spacing:.14em}
.unknownbadge{background:var(--panel2)!important;border:1px dashed var(--line);display:grid;place-items:center}
.qm{font-size:22px;font-weight:900;color:var(--dim2);line-height:1}
.qm.big{font-size:34px}
.fdsec .lblname{margin-left:8px;color:var(--fg);font-size:12.5px;font-weight:800;letter-spacing:0}
.lureflavor{font-size:12px;line-height:1.7;color:var(--dim);margin-top:10px;text-align:left}
/* 性能値：10点満点の数値＋バー。●の数だと差が読み取れないため置き換えた */
.lstats{margin-top:10px;text-align:left}
.lstat{display:grid;grid-template-columns:58px 1fr 34px;align-items:center;gap:8px;margin:6px 0}
.lstat .k{font-size:11.5px;color:var(--dim);font-weight:700}
.lstat .bar{height:8px;border-radius:5px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.lstat .bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.lstat .v{font-size:13px;font-weight:800;color:var(--fg);text-align:right;font-variant-numeric:tabular-nums}

/* ---------- achievements ---------- */
.ach{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:var(--panel2);margin-bottom:8px;border:1px solid transparent}
.ach.on{border-color:var(--acc);background:linear-gradient(90deg,rgba(14,155,181,.10),var(--panel2))}
.ach.off{opacity:.55}
.ach .ai{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:19px;flex:none}
.ach .at{flex:1;min-width:0}
.ach .at b{display:block;font-size:14px}
.ach .at span{display:block;font-size:11.5px;color:var(--dim)}
.ach .ax{font-size:10.5px;font-weight:700;flex:none;text-align:right}
.rar-c{color:var(--c-c)} .rar-u{color:var(--c-u)} .rar-r{color:var(--c-r)} .rar-e{color:var(--c-e)} .rar-l{color:var(--c-l)}
.bd-c{border-color:var(--c-c)} .bd-u{border-color:var(--c-u)} .bd-r{border-color:var(--c-r)} .bd-e{border-color:var(--c-e)} .bd-l{border-color:var(--c-l)}

/* ---------- tabs / fab ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:6px 0 calc(6px + var(--safe-b)); box-shadow:0 -4px 16px rgba(22,50,63,.06);
}
.tabbar .inner{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr)}
.tb{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0;color:var(--dim2);font-size:10px;font-weight:700}
.tb i{font-style:normal;font-size:19px;line-height:1}
.tb.on{color:var(--acc)}
/* チケットが残っているときだけタブに赤い点を出す */
.tbdot{position:absolute;top:2px;right:calc(50% - 15px);width:8px;height:8px;border-radius:50%;
  background:var(--c-l,#e0463f);border:1.5px solid #fff;display:none}
.tbdot.has{display:block}
.fab{
  position:fixed;z-index:31;right:calc(50% - 260px + 16px);bottom:calc(78px + var(--safe-b));
  width:60px;height:60px;border-radius:50%;background:linear-gradient(145deg,var(--acc),var(--acc2));
  color:#fff;font-size:26px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 10px 24px rgba(14,155,181,.4)
}
@media(max-width:552px){.fab{right:16px}}

/* ---------- sheet / modal ---------- */
.mask{position:fixed;inset:0;z-index:40;background:rgba(22,50,63,.35);backdrop-filter:blur(2px);display:none}
.mask.on{display:block}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:92vh;overflow:auto;
  background:var(--bg2);border-top:1px solid var(--line);border-radius:20px 20px 0 0;
  padding:8px 16px calc(24px + var(--safe-b));transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -10px 40px rgba(22,50,63,.18);
}
.sheet.on{transform:none}
.sheet .inner{max-width:520px;margin:0 auto}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:6px auto 12px}
.sh-title{font-size:16px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sh-title .x{margin-left:auto;color:var(--dim);font-size:22px;line-height:1}

label.f{display:block;font-size:11.5px;color:var(--dim);font-weight:700;margin:14px 0 5px;letter-spacing:.06em}
.inp,select.inp,textarea.inp{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:12px 13px;color:var(--fg);outline:none
}
.inp:focus{border-color:var(--acc)}
textarea.inp{min-height:70px;resize:vertical;font-size:15px}
.pick{width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;text-align:left;font-size:16px;display:flex;align-items:center;gap:8px}
.pick .ph{color:var(--dim2)}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:46px;height:46px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);font-size:22px;font-weight:700;color:var(--fg)}
.stepper .inp{text-align:center;font-size:20px;font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chips button{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--dim)}
.chips button.on{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:700}
.btn{width:100%;padding:15px;border-radius:14px;background:linear-gradient(145deg,var(--acc),var(--acc2));color:#fff;font-size:16px;font-weight:800;margin-top:20px}
.btn.sub{background:var(--panel2);color:var(--fg);border:1px solid var(--line);font-weight:700}
.btn.danger{background:transparent;color:var(--red);border:1px solid var(--red)}
.btn.sm{padding:11px;font-size:14px;margin-top:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:11.5px;color:var(--dim2);margin-top:6px;line-height:1.5}

/* species picker */
.splist{max-height:56vh;overflow:auto;margin-top:10px}
.spitem{display:flex;align-items:center;gap:10px;padding:11px 6px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.spitem .e{font-size:19px;width:26px;text-align:center}
.spitem .n{flex:1;font-size:15px;font-weight:600}
.spitem .g{font-size:11px;color:var(--dim)}

/* ---------- levelup ---------- */
.lvup{position:fixed;inset:0;z-index:50;display:none;place-items:center;background:rgba(22,50,63,.55);backdrop-filter:blur(4px);padding:20px}
.lvup.on{display:grid}
.lvbox{position:relative;overflow:hidden;max-width:340px;width:100%;text-align:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px 20px;box-shadow:0 20px 60px rgba(22,50,63,.35)}
.lvup .banner{font-size:13px;font-weight:800;letter-spacing:.3em;color:var(--acc);animation:pop .5s}
.lvup .lvs{font-size:34px;font-weight:900;margin:2px 0 6px}
.lvup .lvs em{font-style:normal;color:var(--dim2);font-size:22px}
.lvup .lvs b{color:var(--gold)}
.lvup .say{font-size:13px;color:var(--fg);font-weight:700;margin-top:2px}
.lvup .evo{margin-top:10px;padding-top:12px;border-top:1px dashed var(--line);font-size:13px;color:var(--dim)}
.lvup .evo b{display:block;font-size:19px;color:var(--gold);margin-top:2px}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* 通常レベルアップ：波紋＋数字バウンド */
.ripples{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:22px}
.ripples i{position:absolute;left:50%;top:38%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid var(--acc);border-radius:50%;opacity:0;animation:rippleout 1.3s ease-out infinite}
.ripples i:nth-child(2){animation-delay:.45s}
@keyframes rippleout{0%{transform:scale(0);opacity:.6}100%{transform:scale(9);opacity:0}}
.lvs.bump{animation:lvbump .5s ease-out}
@keyframes lvbump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* 称号進化：暗転→光の柱→シルエット→白フラッシュ→新キャラ登場 */
.lvup.stage-dark{background:rgba(4,10,15,.97);transition:background .3s}
.lvup.stage-flash{background:#fff}
.evo-stage{background:transparent;box-shadow:none;border:none;position:relative;overflow:visible;min-height:220px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px}
.evo-stage .pillar{position:absolute;left:50%;bottom:14%;width:10px;height:0;background:linear-gradient(180deg,rgba(255,242,184,0) 0%,rgba(255,242,184,.95) 45%,rgba(255,242,184,0) 100%);transform:translateX(-50%);transition:height .7s ease-out,width .5s ease-out .1s}
.lvup.stage-pillar .pillar{height:280px;width:110px}
.evo-stage .charwrap{position:relative;z-index:2}
.silhouette-evo svg,.silhouette-evo img{filter:brightness(0) opacity(.88)}
.lvup.stage-flash .evo-stage .charwrap{opacity:0}
.evo-final{position:relative;overflow:hidden}
.evo-content{position:relative;z-index:2}
.raysbg{position:absolute;inset:-60px;background:repeating-conic-gradient(from 0deg,rgba(255,204,77,.22) 0deg 8deg,transparent 8deg 20deg);animation:rayrot 7s linear infinite;z-index:0}
@keyframes rayrot{to{transform:rotate(360deg)}}
.burst{position:absolute;inset:0;pointer-events:none;z-index:1}
.burst i{position:absolute;left:50%;top:42%;width:5px;height:5px;border-radius:50%;background:var(--gold);transform:rotate(var(--ang)) translateX(0);animation:burstout .8s ease-out forwards}
@keyframes burstout{to{transform:rotate(var(--ang)) translateX(100px);opacity:0}}
.evoname{font-size:19px;font-weight:800;margin-top:4px;animation:namepop .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes namepop{from{transform:scale(2);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- toast ---------- */
#toasts{position:fixed;left:0;right:0;top:0;z-index:60;padding:10px 14px;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.toast{
  max-width:460px;width:100%;background:#fff;border:1px solid var(--acc);
  border-radius:14px;padding:10px 13px;display:flex;gap:10px;align-items:center;
  box-shadow:var(--shadow-lg);animation:tin .4s cubic-bezier(.2,.9,.3,1.3)
}
.toast .ti{font-size:22px}
.toast b{display:block;font-size:14px;color:var(--fg)}
.toast span{display:block;font-size:11px;color:var(--dim)}
@keyframes tin{from{transform:translateY(-30px);opacity:0}to{transform:none;opacity:1}}

.empty{text-align:center;color:var(--dim2);font-size:13px;padding:26px 10px;line-height:1.8}
.seg{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;padding-bottom:2px}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:none;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12.5px;color:var(--dim);font-weight:700}
.seg button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.ph{width:100%;border-radius:12px;display:block;margin-top:8px}
.thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}

/* ---------- motion control ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ---------- ミニゲーム「ジグ通し」 ----------
   ゲーム世界（岩・ジグ・糸・魚影）はcanvas内で白黒のみで描く。
   周辺UI（タイトル・結果パネルの文字やボタン）はアプリ本体のテーマ色を使う。 */
.itogame{position:fixed;inset:0;z-index:55;background:#fff;display:none;flex-direction:column}
.itogame.on{display:flex}
.itogame-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.itogame-title{font-weight:800;font-size:15px;color:var(--fg)}
.itogame-close{font-size:26px;line-height:1;color:var(--dim);padding:2px 8px}
.itogame-stage{position:relative;flex:1;overflow:hidden;background:#fff;touch-action:none}
.itogame-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.itogame-hud{position:absolute;top:10px;left:16px;right:16px;display:flex;justify-content:space-between;
  align-items:baseline;font-weight:800;font-size:17px;color:#000;pointer-events:none;font-variant-numeric:tabular-nums;visibility:hidden}
.itogame-hud .best{font-size:13px;color:#444;font-weight:700}
.itogame-near{position:absolute;top:38px;left:0;right:0;text-align:center;font-size:12px;font-weight:800;
  color:#000;opacity:0;transition:opacity .1s;pointer-events:none}
.itogame-near.on{opacity:1}
.itogame-jiai{position:absolute;inset:0;border:5px solid #000;pointer-events:none;opacity:0}
.itogame-jiai.on{animation:itojiai 1s ease-in-out infinite}
@keyframes itojiai{0%,100%{opacity:.12}50%{opacity:.5}}
.itogame-panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:28px 24px;text-align:center;background:rgba(255,255,255,.96)}
.itogame-panel.hide{display:none}
.itogame-panel h2{font-size:21px;font-weight:800;color:var(--fg);margin:0}
.itogame-panel p{font-size:13.5px;color:var(--dim);line-height:1.8;margin:0;max-width:320px}
.itogame-panel p.big{font-size:16px;font-weight:800;color:var(--fg)}
.itogame-panel .btn{max-width:280px}