:root{
  --mint-deep:#2f7d6e; --mint:#84dcc6; --mint-pale:#c4eee4; --mint-water:#e3f7f1;
  --mint-glass:rgba(255,255,255,.55);
  --choco:#4b342a; --choco-soft:#6f4e3d; --choco-chip:#3a2820;
  --cream:#f0fbf7; --ink:#2b3a36;
  --leaf-on:#3fbfa3; --leaf-off:#d4ece5;
  --ease-chill:cubic-bezier(.37,0,.2,1); /* ゆっくり・やわらかい lo-fi の動き */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{font-family:'Zen Maru Gothic',sans-serif;color:var(--ink);
  background:linear-gradient(135deg,#a8e6d6,#cfeee6);
  display:flex;justify-content:center;align-items:center;min-height:100dvh;overflow:hidden;}
.phone{position:relative;width:min(420px,100vw);height:min(860px,100dvh);overflow:hidden;
  background:
    radial-gradient(120% 80% at 15% 0%,rgba(255,255,255,.7),transparent 50%),
    radial-gradient(100% 70% at 90% 10%,rgba(132,220,198,.5),transparent 55%),
    linear-gradient(180deg,var(--mint-water),var(--cream) 60%);
  box-shadow:0 30px 90px rgba(47,125,110,.22);}
/* lo-fi フィルムグレイン（全体に薄く乗せる“らしさ”の記号） */
.phone::after{content:"";position:absolute;inset:0;z-index:100;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
@media(min-width:440px){.phone{border-radius:38px;height:min(820px,94dvh);}}

/* ambient bubbles */
.ambient{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bubble{position:absolute;border-radius:50%;filter:blur(1.6px);
  background:radial-gradient(circle at 34% 32%,rgba(255,255,255,.85),rgba(196,238,228,.22) 58%,transparent 74%);
  animation:float linear infinite;opacity:.4;}
@keyframes float{0%{transform:translateY(100%) scale(.8);opacity:0;}10%{opacity:.5;}90%{opacity:.4;}100%{transform:translateY(-120px) scale(1.1);opacity:0;}}

/* splash（緑グラデ背景＋透過ロゴのスタート画面）*/
#splash{position:absolute;inset:0;z-index:60;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 28%,var(--mint) 0%,var(--mint-deep) 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  transition:opacity .9s ease,visibility .9s;}
/* アーチ型タグライン（一文字ずつタイピングで出現）*/
.splash-arch{position:relative;z-index:2;width:100%;height:48px;margin-bottom:8px;}
.arch-char{position:absolute;left:50%;top:12px;font-family:'Zen Maru Gothic',sans-serif;
  font-size:11.5px;font-weight:500;color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(20,70,60,.25);}
.arch-char .ac-in{display:inline-block;opacity:0;animation:archPop .42s ease forwards;}
@keyframes archPop{0%{opacity:0;transform:translateY(5px) scale(.6);}60%{opacity:1;transform:translateY(0) scale(1.14);}100%{opacity:1;transform:translateY(0) scale(1);}}
#splash.gone{opacity:0;visibility:hidden;}
.splash-logo{position:relative;z-index:2;width:58%;max-width:268px;height:auto;max-height:54%;object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(20,70,60,.22));
  animation:logoBreath 6s ease-in-out infinite;}
@keyframes logoBreath{0%,100%{transform:scale(1);}50%{transform:scale(1.025);}}
/* スプラッシュ：チルな空気感（ゆっくり立ち昇るボケ＋呼吸する光彩） */
#splash::before{content:"";position:absolute;width:90%;height:54%;left:5%;top:24%;pointer-events:none;z-index:1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.45),transparent 62%);
  animation:auraBreath 8s ease-in-out infinite;}
@keyframes auraBreath{0%,100%{transform:scale(.9);opacity:.45;}50%{transform:scale(1.1);opacity:.8;}}
.bokeh{position:absolute;z-index:1;border-radius:50%;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle at 36% 34%,rgba(255,255,255,.9),rgba(196,238,228,.3) 58%,transparent 74%);
  filter:blur(2px);animation:bokehFloat var(--d,10s) ease-in-out infinite;animation-delay:var(--delay,0s);}
@keyframes bokehFloat{
  0%{transform:translateY(24px) scale(.8);opacity:0;}
  18%{opacity:.55;}
  50%{transform:translateY(-26px) scale(1.04);opacity:.7;}
  82%{opacity:.4;}
  100%{transform:translateY(-82px) scale(1.12);opacity:0;}}

.screen{position:absolute;inset:0;display:none;flex-direction:column;padding-bottom:118px;z-index:1;}
.screen.active{display:flex;animation:fade .7s var(--ease-chill);}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;}}
header{padding:24px 20px 6px;display:flex;justify-content:space-between;align-items:flex-start;}
.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--mint-deep);font-weight:700;}
h1{font-family:'Yomogi',cursive;font-size:21px;color:var(--choco);margin-top:4px;}
.screen-sub{font-size:12px;color:#8aa49b;margin-top:5px;line-height:1.6;letter-spacing:.01em;}
.help-btn{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:var(--mint-glass);backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(47,125,110,.18);
  color:var(--mint-deep);font-size:16px;font-weight:700;margin-top:2px;}
.scroll{flex:1;overflow-y:auto;padding:6px 18px 16px;}
.scroll::-webkit-scrollbar{display:none;}

.sortbar{display:flex;flex-wrap:nowrap;gap:5px;margin:6px 0 8px;}
.sortbar::-webkit-scrollbar{display:none;}
.sortbar button{flex-shrink:0;border:0;background:var(--mint-glass);backdrop-filter:blur(8px);
  font-family:inherit;font-size:11px;font-weight:700;color:#7a978f;padding:7px 10px;border-radius:999px;cursor:pointer;}
.sortbar button.on{background:var(--mint-deep);color:#fff;}
/* お気に入りだけ表示のハート（カードのピンクと色を揃える）*/
.sort-fav{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:7px 10px;}
.sort-fav svg{width:16px;height:16px;}
.sort-fav .h-out{stroke:#c094a4;}
.sort-fav.fav-active{background:linear-gradient(180deg,rgba(255,238,241,.72),rgba(255,205,213,.55));
  border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -6px 12px rgba(255,143,147,.16),0 6px 14px rgba(255,143,147,.2);}

.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;}
.empty{text-align:center;color:#9bb3ab;font-size:13px;line-height:1.9;padding:50px 20px;}
.specimen{position:relative;border-radius:14px;padding:10px 11px 12px;cursor:pointer;
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);
  box-shadow:0 8px 22px rgba(47,125,110,.14),inset 0 1px 0 rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.6);transform:rotate(var(--tilt,0deg));transition:transform .28s var(--ease-chill);}
.specimen:active{transform:rotate(var(--tilt,0deg)) scale(.97);}
.specimen::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(-4deg);
  width:50px;height:15px;background:rgba(132,220,198,.5);border-radius:2px;}
.cat-badge{position:absolute;top:6px;right:6px;z-index:2;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);
  font-size:9px;font-weight:700;color:var(--mint-deep);padding:3px 8px;border-radius:999px;}
.photo{height:96px;border-radius:10px;margin-bottom:9px;overflow:hidden;position:relative;background:#e3f1ec;}
.photo img{width:100%;height:100%;object-fit:cover;display:block;}
.ph-tint{position:absolute;inset:0;mix-blend-mode:soft-light;pointer-events:none;}
.photo.placeholder{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--mint-pale),var(--mint));}
.photo.placeholder span{font-size:30px;opacity:.6;}
.photo.placeholder svg{width:34px;height:34px;color:rgba(255,255,255,.85);}
/* お気に入りハート：カード右下・再訪の列の右端・丸なし・1.5倍・サーモンピンク */
.specimen .fav-badge{position:absolute;right:9px;bottom:9px;z-index:2;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 1px 2px rgba(43,58,54,.2));}
.specimen .fav-badge svg{width:23px;height:23px;}
.h-fill{fill:#ff8f93;}                  /* サーモンピンク寄りのピンク */
.h-out{fill:none;stroke-width:2;}
.detail-fav .h-out{stroke:#fff;}        /* 写真の上＝白い輪郭 */
.fav-toggle .h-out{stroke:#d7a3ad;}     /* 明るいフォーム上＝淡いモーヴ輪郭 */
.sp-name{font-size:13px;font-weight:700;color:var(--choco);line-height:1.3;margin:2px 0 8px;}
.sp-shop{font-size:10px;color:#8aa49b;margin:2px 0 2px;}
.sp-date{font-size:9px;color:#a9bdb6;margin-bottom:6px;display:flex;align-items:center;gap:3px;}
.leafrow{display:flex;align-items:center;gap:5px;margin-top:5px;}
.leafrow .lab{font-size:9px;color:var(--mint-deep);width:46px;font-weight:700;letter-spacing:-.02em;}
.leaves{display:flex;gap:1px;}
.leaves img,.leaves svg{width:11px;height:11px;}
.label-latin{font-family:'Yomogi',cursive;font-size:9px;color:#a9bdb6;font-style:italic;margin-top:8px;}

/* island */
.island-stage{position:relative;height:340px;margin-top:8px;border-radius:24px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 18%,#eafaf5,transparent 60%),
    linear-gradient(180deg,#bdeee2,#e6f8f2);
  box-shadow:inset 0 -20px 40px rgba(47,125,110,.12),0 8px 22px rgba(47,125,110,.12);}

/* ---- スノードーム ---- */
:root{--globe:274px;}
.globe-halo{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:calc(var(--globe) + 46px);height:calc(var(--globe) + 46px);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0) 66%);pointer-events:none;}
.globe-glass{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:var(--globe);height:var(--globe);border-radius:50%;pointer-events:none;z-index:5;
  background:
    radial-gradient(60% 50% at 36% 26%,rgba(255,255,255,.6),rgba(255,255,255,0) 60%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.02),rgba(173,232,220,.10) 68%,rgba(132,220,198,.26) 100%);
  border:1.5px solid rgba(255,255,255,.65);
  box-shadow:inset 0 0 46px rgba(255,255,255,.5),inset 0 -16px 34px rgba(47,125,110,.16),
    0 14px 34px rgba(47,125,110,.2);}
.globe-glass::after{content:"";position:absolute;left:16%;top:11%;width:42%;height:24%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));
  border-radius:50%;transform:rotate(-20deg);filter:blur(2px);}
.globe-base{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:6;
  width:248px;height:60px;
  clip-path:path('M28,0 L220,0 Q229,0 231,9 L244,48 Q246,52 241,53 Q124,61 7,53 Q2,52 4,48 L17,9 Q19,0 28,0 Z');
  background:linear-gradient(180deg,#d4efe7,#7fb7a9);
  filter:drop-shadow(0 9px 13px rgba(47,125,110,.24));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -9px 16px rgba(47,125,110,.16);}
.globe-base::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:1;
  width:222px;height:22px;border-radius:50%;background:linear-gradient(180deg,#e7f6f0,#a4d6c9);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.5);}

/* MAX達成の島に、小さな花火（白・水色・ミント）がドームの中で上がる */
.dome-fw{position:absolute;inset:0;pointer-events:none;z-index:4;
  clip-path:circle(calc(var(--globe)/2 - 4px) at 50% 52%);}
.fw-rise{position:absolute;width:4px;height:4px;border-radius:50%;margin:-2px 0 0 -2px;
  box-shadow:0 0 7px currentColor,0 0 3px #fff;animation:fwRise .5s ease-out forwards;}
@keyframes fwRise{0%{opacity:0;transform:translateY(0) scale(.5);}25%{opacity:1;}100%{opacity:.5;transform:translateY(var(--ry)) scale(.9);}}
.fw-spark{position:absolute;width:4px;height:4px;border-radius:50%;margin:-2px 0 0 -2px;
  box-shadow:0 0 9px currentColor,0 0 4px currentColor,0 0 2px #fff;animation:fwSpark .9s ease-out forwards;}
@keyframes fwSpark{0%{opacity:0;transform:translate(0,0) scale(1);}14%{opacity:1;}100%{opacity:0;transform:translate(var(--fx),calc(var(--fy) + 12px)) scale(.35);}}
.island-img{position:absolute;left:50%;top:58%;transform:translate(-50%,-52%);z-index:3;
  max-width:64%;max-height:56%;object-fit:contain;transition:opacity .6s ease;
  filter:drop-shadow(0 8px 10px rgba(47,125,110,.18));}
/* 初めての標本で島がふわっと生まれる */
.island-img.island-born{animation:islandBorn 1.3s var(--ease-chill);}
@keyframes islandBorn{
  0%{opacity:0;transform:translate(-50%,-52%) scale(.15);}
  55%{opacity:1;transform:translate(-50%,-52%) scale(1.12);}
  75%{transform:translate(-50%,-52%) scale(.96);}
  100%{opacity:1;transform:translate(-50%,-52%) scale(1);}}
/* 進化の閃光：スノードームが光を放つ */
.evo-flash{position:absolute;left:50%;top:52%;width:var(--globe);height:var(--globe);transform:translate(-50%,-50%);
  border-radius:50%;z-index:6;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.96),rgba(206,246,236,.62) 44%,rgba(255,255,255,0) 72%);
  animation:evoFlash 1.4s var(--ease-chill) forwards;}
@keyframes evoFlash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3);}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.04);}  /* パーッと光を放つ */
  46%{opacity:.8;}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.16);}}
/* 舞い上がる光の粒子 */
.evo-particle{position:absolute;border-radius:50%;pointer-events:none;z-index:7;margin:-3px 0 0 -3px;
  background:radial-gradient(circle,#fff,rgba(180,240,225,.6) 58%,transparent 72%);
  box-shadow:0 0 7px rgba(255,255,255,.9);animation:evoParticle 1.35s ease-out forwards;}
@keyframes evoParticle{0%{opacity:0;transform:translate(0,0) scale(.3);}22%{opacity:1;}100%{opacity:0;transform:translate(var(--ex),var(--ey)) scale(1.1);}}
.island-actors{position:absolute;inset:0;pointer-events:none;z-index:4;}

/* ---- 舞い散る雪 ---- */
.snow{position:absolute;inset:0;pointer-events:none;z-index:4;
  clip-path:circle(calc(var(--globe)/2 - 4px) at 50% 52%);}
.flake{position:absolute;top:8%;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,rgba(255,255,255,.25));opacity:.7;
  animation:snowfall linear infinite;}
@keyframes snowfall{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  12%{opacity:.85;}
  88%{opacity:.7;}
  100%{transform:translateY(230px) translateX(12px);opacity:0;}}

/* ---- キラキラ（瞬く光）---- */
.sparkle{position:absolute;width:9px;height:9px;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 56%);
  animation:twinkle ease-in-out infinite;}
.sparkle::before,.sparkle::after{content:"";position:absolute;left:50%;top:50%;
  width:150%;height:1.4px;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);}
.sparkle::after{transform:translate(-50%,-50%) rotate(90deg);}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.35);}50%{opacity:1;transform:scale(1);}}

/* ---- ふわふわ（漂う光の綿毛）---- */
.mote{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.9),rgba(213,245,237,.18) 70%,transparent);
  filter:blur(.5px);animation:floaty ease-in-out infinite;}
@keyframes floaty{
  0%{transform:translate(0,0) scale(.9);opacity:0;}
  22%{opacity:.7;}
  78%{opacity:.55;}
  100%{transform:translate(16px,-46px) scale(1.05);opacity:0;}}
@keyframes floatyL{
  0%{transform:translate(0,0) scale(.9);opacity:0;}
  22%{opacity:.7;}
  78%{opacity:.55;}
  100%{transform:translate(-16px,-46px) scale(1.05);opacity:0;}}
.mote.l{animation-name:floatyL;}
.actor{position:absolute;will-change:transform;}
.actor.mintizen{width:26px;height:34px;display:flex;align-items:flex-end;justify-content:center;font-size:22px;}
.actor.mintizen img,.actor.mintizen svg{width:100%;height:100%;object-fit:contain;}
.actor.butterfly{width:24px;height:24px;font-size:18px;opacity:.9;}
.actor.butterfly img,.actor.butterfly svg{width:100%;height:100%;object-fit:contain;}
.island-level{position:absolute;top:10px;right:12px;z-index:7;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  color:var(--mint-deep);font-weight:700;font-size:12px;padding:4px 12px;border-radius:999px;}
/* ミンツの小瓶（画像）＋つぎのレベルまでの進捗バー */
.level-jar-wrap{display:flex;align-items:center;gap:14px;margin-top:14px;padding:0 4px;position:relative;}
/* MAX後、小瓶から「ありがとう！」がぽんっと出る */
.jar-thanks{position:absolute;transform:translate(-50%,-100%);pointer-events:none;z-index:6;white-space:nowrap;
  font-family:'Yomogi',cursive;font-size:13px;color:var(--mint-deep);
  background:rgba(255,255,255,.92);padding:5px 13px;border-radius:999px;
  box-shadow:0 5px 13px rgba(47,125,110,.2),inset 0 1px 0 rgba(255,255,255,.9);
  animation:jarThanks 1.7s var(--ease-chill) forwards;}
@keyframes jarThanks{
  0%{opacity:0;transform:translate(-50%,-80%) scale(.4);}
  18%{opacity:1;transform:translate(-50%,-112%) scale(1.14);}
  34%{transform:translate(-50%,-106%) scale(1);}
  78%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-134%) scale(.95);}}
/* 記録すると、ミンツが小瓶に落ちていく */
.jar-mint{position:absolute;width:25px;height:auto;pointer-events:none;z-index:4;
  filter:drop-shadow(0 3px 4px rgba(47,125,110,.3));animation:jarDrop .95s var(--ease-chill) forwards;}
@keyframes jarDrop{
  0%{opacity:0;transform:translateY(-46px) scale(.55) rotate(var(--r,0deg));}
  20%{opacity:1;}
  60%{opacity:1;transform:translateY(-2px) scale(1.05) rotate(var(--r,0deg));}
  100%{opacity:0;transform:translateY(11px) scale(.4) rotate(var(--r,0deg));}}
.jar-img{width:84px;height:auto;flex-shrink:0;filter:drop-shadow(0 5px 10px rgba(47,125,110,.18));}
.level-prog{flex:1;min-width:0;position:relative;}
/* メーターが伸びるときのキラキラ＆発光 */
.lp-bar-fill.shine{animation:barShine 1.1s ease;}
@keyframes barShine{0%{box-shadow:0 0 8px rgba(132,220,198,.5);}38%{box-shadow:0 0 18px rgba(132,220,198,.95),0 0 7px rgba(255,255,255,.85);}100%{box-shadow:0 0 8px rgba(132,220,198,.5);}}
.lp-spark{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;pointer-events:none;z-index:5;
  background:radial-gradient(circle,#fff,rgba(180,240,225,.5) 60%,transparent);animation:lpSpark .85s ease forwards;}
@keyframes lpSpark{0%{opacity:0;transform:scale(.2);}30%{opacity:1;transform:scale(1.1);}100%{opacity:0;transform:scale(.4) translateY(-8px);}}
.lp-lv{font-family:'Yomogi',cursive;font-size:17px;color:var(--mint-deep);line-height:1.2;}
.lp-bar{height:9px;border-radius:999px;margin:6px 0 5px;overflow:hidden;
  background:rgba(47,125,110,.12);box-shadow:inset 0 1px 2px rgba(47,125,110,.12);}
.lp-bar-fill{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--mint),var(--mint-deep));
  box-shadow:0 0 8px rgba(132,220,198,.5);transition:width 1s var(--ease-chill);}
.lp-next{font-size:12px;color:#8aa49b;}

/* お祝い演出：ミンツの飛び散り＋レベルアップのキラキラ */
.celebrate{position:absolute;inset:0;z-index:55;pointer-events:none;overflow:hidden;}
.cel-mint{position:absolute;left:50%;top:46%;width:33px;height:auto;margin:-15px 0 0 -16px;
  filter:drop-shadow(0 2px 4px rgba(47,125,110,.25));animation:celMint 2.3s var(--ease-chill) forwards;}
@keyframes celMint{
  0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0deg);}
  11%{opacity:1;transform:translate(var(--bx),var(--by)) scale(1.2) rotate(8deg);}
  46%{opacity:1;transform:translate(var(--bx),var(--by)) scale(1.05) rotate(-4deg);} /* ふわっと漂って見せる */
  90%{opacity:1;}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.32) rotate(12deg);}}
.cel-spark{position:absolute;width:11px;height:11px;
  background:radial-gradient(circle,#fff,rgba(255,255,255,0) 60%);animation:celSpark .9s ease forwards;}
.cel-spark::before,.cel-spark::after{content:"";position:absolute;left:50%;top:50%;width:150%;height:2px;
  background:linear-gradient(90deg,transparent,#fff,transparent);transform:translate(-50%,-50%);}
.cel-spark::after{transform:translate(-50%,-50%) rotate(90deg);}
@keyframes celSpark{0%{opacity:0;transform:scale(.2);}40%{opacity:1;transform:scale(1.1);}100%{opacity:0;transform:scale(.4);}}
.cel-text{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:'Yomogi',cursive;font-size:21px;color:#fff;
  text-shadow:0 2px 14px rgba(47,125,110,.6);background:rgba(47,125,110,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  padding:12px 22px;border-radius:999px;animation:celText 1.9s var(--ease-chill) forwards;}
@keyframes celText{0%{opacity:0;transform:translate(-50%,-50%) scale(.7);}16%{opacity:1;transform:translate(-50%,-50%) scale(1.07);}76%{opacity:1;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;transform:translate(-50%,-50%) scale(1.02);}}
/* やわらかいフレア（記録した瞬間ふわっと光が広がる）*/
.cel-flare{position:absolute;width:140px;height:140px;margin:-70px 0 0 -70px;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.92) 0%,rgba(150,232,216,.5) 30%,rgba(132,220,198,0) 70%);
  animation:celFlare .9s var(--ease-chill) forwards;}
@keyframes celFlare{0%{opacity:0;transform:scale(.2);}30%{opacity:.95;transform:scale(1);}100%{opacity:0;transform:scale(1.75);}}
/* ミントカラーのハート（ふわっと上に立ち昇る）*/
.cel-heart{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(47,125,110,.22));animation:celHeart 1.25s var(--ease-chill) forwards;}
.cel-heart svg{width:100%;height:100%;display:block;}
@keyframes celHeart{0%{opacity:0;transform:translate(0,0) scale(.3);}24%{opacity:1;transform:translate(var(--hx),var(--hy)) scale(1.1);}100%{opacity:0;transform:translate(var(--hx2),var(--hy2)) scale(.45);}}
/* 新しい標本がふわっとポップして追加される */
.specimen.card-pop{animation:cardPop .55s var(--ease-chill);}
@keyframes cardPop{0%{opacity:0;transform:rotate(var(--tilt,0deg)) scale(.55);}60%{opacity:1;transform:rotate(var(--tilt,0deg)) scale(1.06);}100%{transform:rotate(var(--tilt,0deg)) scale(1);}}
/* スノードームに触れる：中の住人が喜ぶ演出 */
.dome-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:8;white-space:nowrap;
  font-size:10.5px;color:var(--mint-deep);background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:4px 13px;border-radius:999px;pointer-events:none;letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(47,125,110,.12);animation:hintBreath 3.4s ease-in-out infinite;transition:opacity .5s ease;}
@keyframes hintBreath{0%,100%{opacity:.45;}50%{opacity:.95;}}
.dome-hint.hide{opacity:0;}
.dome-heart{position:absolute;width:18px;height:18px;pointer-events:none;z-index:4;
  filter:drop-shadow(0 1px 3px rgba(47,125,110,.2));animation:domeHeart 1.2s var(--ease-chill) forwards;}
.dome-heart svg{width:100%;height:100%;display:block;}
@keyframes domeHeart{0%{opacity:0;transform:translateY(8px) scale(.4);}26%{opacity:1;transform:translateY(-2px) scale(1.05);}100%{opacity:0;transform:translateY(-42px) scale(.7);}}
.dome-spark{z-index:4;}
.dome-ripple{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;pointer-events:none;z-index:7;
  border:2px solid rgba(255,255,255,.85);animation:domeRipple .62s ease-out forwards;}
@keyframes domeRipple{0%{opacity:.85;transform:scale(.3);}100%{opacity:0;transform:scale(3.6);}}
/* 記録のご褒美：ミンツを受け取った「ミントの島」タブが喜ぶ */
.tab.tab-cheer{animation:tabCheer .7s var(--ease-chill);}
@keyframes tabCheer{0%{transform:none;}26%{transform:translateY(-7px) scale(1.16);}54%{transform:translateY(0) scale(1.04);}100%{transform:none;}}
.tab.tab-cheer svg{filter:drop-shadow(0 0 9px rgba(132,220,198,.95));}
/* レベルMAX：ステータスのレベルを金色に */
.stat b.is-max{background:linear-gradient(145deg,#f6d678,#dba62c 52%,#b9831f);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.01em;}
/* MAX達成の金バッジ（島の右上に常設・タップでメッセージ再表示）*/
.gold-badge[hidden]{display:none;} /* display:flex が hidden属性を上書きしないように（未達成では非表示）*/
.gold-badge{position:absolute;top:10px;right:12px;z-index:8;width:54px;height:54px;border-radius:50%;cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:radial-gradient(120% 120% at 32% 24%,#fff4cf,#ecc153 46%,#cf9a2c 78%,#a9781f);
  border:1.5px solid rgba(255,249,224,.9);
  box-shadow:0 6px 16px rgba(150,110,20,.38),inset 0 2px 3px rgba(255,255,255,.7),inset 0 -6px 10px rgba(120,80,10,.3);}
.gold-badge svg{width:23px;height:15px;fill:#7a5410;filter:drop-shadow(0 1px 0 rgba(255,255,255,.4));}
.gold-badge span{font-family:'Yomogi',cursive;font-size:11px;font-weight:700;color:#6f4a0c;letter-spacing:.04em;line-height:1;}
.gold-badge::after{content:"";position:absolute;top:-60%;left:-40%;width:55%;height:220%;transform:rotate(20deg);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.72),rgba(255,255,255,0));animation:goldShine 5s ease-in-out infinite;}
@keyframes goldShine{0%,74%{left:-50%;}88%,100%{left:130%;}}
.gold-badge.pop{animation:goldPop .7s var(--ease-chill);}
@keyframes goldPop{0%{transform:scale(0) rotate(-30deg);opacity:0;}60%{transform:scale(1.18) rotate(6deg);opacity:1;}100%{transform:scale(1) rotate(0);}}
/* 花吹雪 */
.confetti{position:absolute;top:-14px;z-index:56;pointer-events:none;border-radius:2px;animation:confettiFall linear forwards;}
@keyframes confettiFall{0%{opacity:0;transform:translateY(-12px) rotate(0);}8%{opacity:1;}100%{opacity:.85;transform:translateY(var(--fall,640px)) rotate(var(--spin,540deg));}}
/* MAXお祝いカード：中央配置・花吹雪が映えるよう暗幕なし */
.ovl.max-ovl{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;align-items:center;justify-content:center;z-index:58;}
.max-ovl .max-card{position:relative;width:min(330px,86vw);background:linear-gradient(180deg,#ffffff,#f0fbf7);
  border-radius:26px;padding:30px 24px 22px;text-align:center;
  box-shadow:0 26px 60px rgba(47,125,110,.34),inset 0 1px 0 rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.8);animation:maxCardSoft 1.1s ease;}
@keyframes maxCardIn{0%{opacity:0;transform:translateY(16px) scale(.94);}100%{opacity:1;transform:none;}}
/* おめでとうカードは ジワ〜とゆっくり立ち上がる（感動を邪魔しない）*/
@keyframes maxCardSoft{0%{opacity:0;transform:translateY(22px) scale(.97);}100%{opacity:1;transform:none;}}
.max-seal{width:78px;height:78px;border-radius:50%;margin:-58px auto 12px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 32% 24%,#fff4cf,#ecc153 46%,#cf9a2c 80%,#a9781f);
  border:2px solid rgba(255,249,224,.95);
  box-shadow:0 10px 22px rgba(150,110,20,.4),inset 0 2px 4px rgba(255,255,255,.7),inset 0 -8px 14px rgba(120,80,10,.3);}
.max-seal svg{width:40px;height:25px;fill:#7a5410;}
.max-ovl h2{font-family:'Yomogi',cursive;font-size:26px;color:var(--choco);}
.max-sub{font-family:'Yomogi',cursive;font-size:15px;margin-top:3px;
  background:linear-gradient(145deg,#e6b53f,#c2901f);-webkit-background-clip:text;background-clip:text;color:transparent;}
.max-msg{font-size:12.5px;line-height:2;color:#6b8980;margin:14px 4px 20px;}
.max-ovl .save{width:100%;}
/* おめでとうカードの「ありがとう」ボタン：光沢が中央でスパッと切れて白い横線が出るのを防ぐ（上から下へ柔らかく減衰）*/
.max-ovl .save::before{height:100%;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 62%);}
/* 島のミント民カード：数字の左にミント民のキャラ */
.mz-row{display:flex;align-items:center;justify-content:center;gap:3px;}
.mz-row b{display:inline-block;}
.mz-ic{width:18px;height:22px;display:inline-block;flex-shrink:0;filter:drop-shadow(0 1px 1px rgba(47,125,110,.18));}
.mz-ic svg{width:100%;height:100%;display:block;}
/* MAXカードの贈り物ボタン */
.max-gift{margin:2px 0 12px;}
.gift-label{display:block;font-size:10.5px;color:#a98a3e;letter-spacing:.02em;margin-bottom:7px;}
.gift-btn{width:100%;border:0;cursor:pointer;font-family:'Yomogi',cursive;font-size:14px;color:#6f4a0c;padding:11px;border-radius:14px;
  background:linear-gradient(180deg,#fff4cf,#ecc153 60%,#d6a738);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 14px rgba(150,110,20,.28);transition:transform .2s var(--ease-chill);}
.gift-btn:active{transform:scale(.97);}
/* ボツ島アルバム */
.ovl.album-ovl{align-items:center;justify-content:center;}
.album-card{position:relative;width:min(360px,90vw);max-height:86vh;overflow-y:auto;text-align:center;
  background:linear-gradient(180deg,#fbfffe,#eef9f4);border-radius:26px;padding:24px 20px 22px;
  box-shadow:0 26px 60px rgba(47,125,110,.34),inset 0 1px 0 rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.8);
  animation:maxCardIn .55s var(--ease-chill);}
.album-card::-webkit-scrollbar{display:none;}
.album-close{position:absolute;top:12px;right:14px;z-index:2;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(47,125,110,.1);color:var(--mint-deep);font-size:18px;line-height:1;}
.album-head{margin-bottom:16px;}
.album-head h2{font-family:'Yomogi',cursive;font-size:23px;color:var(--choco);margin-top:3px;}
.album-sub{font-size:11.5px;color:#7c9a90;line-height:1.85;margin-top:7px;}
.album-grid{display:flex;flex-direction:column;gap:14px;}
.album-item{border-radius:18px;padding:12px 12px 14px;
  background:radial-gradient(120% 90% at 50% 16%,#e7f7f1,#cdeee4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 6px 16px rgba(47,125,110,.12);}
.album-pic{height:152px;display:flex;align-items:center;justify-content:center;}
.album-pic img{max-width:96%;max-height:100%;object-fit:contain;filter:drop-shadow(0 7px 11px rgba(47,125,110,.22));}
.album-growth .album-pic{height:auto;}
.album-growth .album-pic img{max-width:100%;max-height:none;border-radius:12px;filter:drop-shadow(0 5px 10px rgba(47,125,110,.2));}
.album-item figcaption{font-family:'Yomogi',cursive;font-size:14.5px;color:var(--mint-deep);margin-top:8px;}
.album-pic{cursor:zoom-in;}
/* アルバム写真の拡大（ライトボックス）*/
.ovl.lightbox-ovl{align-items:center;justify-content:center;z-index:62;background:rgba(244,252,249,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.lightbox-card{position:relative;width:min(440px,94vw);max-height:88vh;text-align:center;margin:0;animation:maxCardIn .4s var(--ease-chill);}
.lightbox-card img{max-width:100%;max-height:78vh;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(47,125,110,.28));}
.lightbox-card figcaption{margin-top:12px;font-family:'Yomogi',cursive;font-size:19px;color:var(--choco);}
.lightbox-card figcaption small{display:block;font-family:'Zen Maru Gothic',sans-serif;font-size:12px;color:#8aa49b;margin-top:4px;}
.album-item small{display:block;font-size:10.5px;color:#8aa49b;margin-top:3px;letter-spacing:.01em;}
.island-stat{display:flex;gap:10px;margin-top:14px;}
.stat{flex:1;border-radius:18px;padding:12px;text-align:center;
  background:rgba(255,255,255,.7);backdrop-filter:blur(10px);box-shadow:0 6px 16px rgba(47,125,110,.1);}
.stat b{font-family:'Yomogi',cursive;font-size:22px;color:var(--mint-deep);display:block;}
.stat span{font-size:10px;color:#8aa49b;}
/* ラベルの小アイコン（モック準拠）。ラベルは各statの最後のspan */
.stat > span:last-child{display:inline-flex;align-items:center;justify-content:center;gap:3px;}
.stat-ic{width:12px;height:12px;color:var(--mint-deep);opacity:.85;flex-shrink:0;}
.hint{font-size:11px;color:#8aa49b;text-align:center;margin-top:14px;line-height:1.7;}

/* levelup flash */
.levelup{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;}
.levelup.show{animation:lvflash 1.8s ease forwards;}
.levelup b{font-family:'Yomogi',cursive;font-size:26px;color:#fff;text-shadow:0 2px 14px rgba(47,125,110,.6);
  background:rgba(47,125,110,.5);backdrop-filter:blur(6px);padding:12px 24px;border-radius:999px;}
@keyframes lvflash{0%{opacity:0;transform:scale(.8);}20%{opacity:1;transform:scale(1);}80%{opacity:1;}100%{opacity:0;}}

/* tabbar */
/* 浮遊するミントキャンディーの曇りガラスバー（後ろの標本が透ける）*/
.tabbar{position:absolute;left:16px;right:16px;bottom:16px;z-index:30;border-radius:30px;
  background:linear-gradient(180deg,rgba(212,241,233,.30),rgba(198,235,225,.42));
  -webkit-backdrop-filter:blur(18px) saturate(155%);backdrop-filter:blur(18px) saturate(155%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 12px 30px rgba(47,125,110,.18),inset 0 1px 0 rgba(255,255,255,.6);
  display:flex;padding:9px 8px 11px;}
.tab{flex:1;position:relative;border:0;background:transparent;font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;color:#86a39a;font-size:10px;font-weight:700;}
.tab.on{color:var(--mint-deep);}
.tab svg{width:22px;height:22px;}
/* 両隣＝アイコン大きく＋背後だけ曇りを下げてくっきり */
.tab:not(.tab-fab){border-radius:20px;
  background:radial-gradient(circle at 50% 36%,rgba(249,253,251,.66),rgba(249,253,251,.2) 52%,transparent 66%);}
.tab:not(.tab-fab) svg{width:37px;height:37px;filter:drop-shadow(0 1px 2px rgba(255,255,255,.6));}
.tab-fab .plus{position:relative;top:-18px;background:linear-gradient(160deg,#5e463a,var(--choco));
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(75,52,42,.4);margin-bottom:-14px;}
.tab-fab .plus svg{width:26px;height:26px;stroke:var(--mint-pale);}

/* overlays */
.ovl{position:absolute;inset:0;z-index:50;background:rgba(43,58,54,.38);backdrop-filter:blur(3px);
  display:none;align-items:flex-end;}
.ovl.show{display:flex;animation:fade .5s var(--ease-chill);}
.sheet-card{background:var(--cream);width:100%;border-radius:28px 28px 0 0;padding:22px 22px 30px;
  animation:up .55s var(--ease-chill);max-height:94%;overflow-y:auto;}
.sheet-card::-webkit-scrollbar{display:none;}
@keyframes up{from{transform:translateY(40px);}to{transform:translateY(0);}}
.sheet-card h2{font-family:'Yomogi',cursive;font-size:18px;color:var(--choco);margin-bottom:4px;}
.sheet-sub{font-size:11px;color:#9bb3ab;margin-bottom:16px;}
.form-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;}
.form-head-text{min-width:0;}
.form-head .sheet-sub{margin-bottom:0;}
.fav-toggle{flex-shrink:0;border:0;background:transparent;cursor:pointer;padding:4px;margin-top:-2px;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  transition:transform .15s var(--ease-chill);}
.fav-toggle:active{transform:scale(.85);}
.fav-toggle svg{width:32px;height:32px;}
.fav-toggle.pop{animation:heartPop .42s var(--ease-chill);}
.field{margin-bottom:14px;}
.field label{font-size:12px;color:var(--mint-deep);font-weight:700;display:block;margin-bottom:6px;}
.field input[type=text],.field input[type=date],.field textarea{width:100%;border:1px solid #d3ebe3;border-radius:12px;padding:11px;
  font-family:inherit;font-size:14px;background:#fff;resize:none;color:var(--ink);}
.field input[type=date]{appearance:none;-webkit-appearance:none;accent-color:var(--leaf-on);color-scheme:light;}
/* カレンダー（日付ピッカー）をミントグリーンに */
input[type=date]{accent-color:var(--leaf-on);}
.field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(58%) sepia(34%) saturate(560%) hue-rotate(115deg) brightness(92%);}
.field textarea{min-height:60px;}
.cat-pick{display:flex;gap:7px;flex-wrap:wrap;}
.cat-pick button{border:1px solid #d3ebe3;background:#fff;font-family:inherit;font-size:12px;font-weight:700;
  color:#8aa49b;padding:8px 13px;border-radius:999px;cursor:pointer;}
.cat-pick button.on{background:var(--mint-deep);color:#fff;border-color:var(--mint-deep);}
.photo-strip{display:flex;gap:8px;flex-wrap:wrap;}
.photo-thumb{width:72px;height:72px;border-radius:12px;overflow:hidden;position:relative;border:1px solid #d3ebe3;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;background:#fff;
  transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease;}
.photo-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none;}
.photo-thumb.dragging{opacity:.92;transform:scale(1.09);cursor:grabbing;z-index:5;
  box-shadow:0 10px 22px rgba(47,125,110,.35);border-color:var(--mint);}
.photo-thumb .del{position:absolute;top:2px;right:2px;background:rgba(43,58,54,.7);color:#fff;border:0;
  width:18px;height:18px;border-radius:50%;font-size:12px;cursor:pointer;line-height:1;}
.photo-add{width:72px;height:72px;border:2px dashed #aadac9;border-radius:12px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9bb3ab;font-size:22px;cursor:pointer;gap:2px;}
.photo-add small{font-size:8px;}
.rate{margin-bottom:14px;}
.rate .rlab{font-size:12px;color:var(--mint-deep);font-weight:700;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;}
.rate .rlab em{font-style:normal;font-size:10px;color:#a9bdb6;font-weight:400;}
.leafpick{display:flex;gap:8px;}
.leafpick button{border:0;background:transparent;cursor:pointer;padding:2px;}
.leafpick img,.leafpick svg{width:30px;height:30px;}
.form-actions{display:flex;gap:10px;margin-top:14px;}
.form-actions button{touch-action:manipulation;}
.btn-ghost{flex:0 0 90px;background:#fff;border:1px solid #d3ebe3;color:#8aa49b;font-family:inherit;font-weight:700;font-size:14px;padding:14px;border-radius:14px;cursor:pointer;}
.save{flex:1;background:linear-gradient(160deg,var(--mint),var(--mint-deep));color:#fff;border:0;font-family:inherit;font-weight:700;font-size:15px;padding:14px;border-radius:14px;cursor:pointer;box-shadow:0 8px 18px rgba(47,125,110,.3);}

/* detail */
.detail-card{background:var(--cream);width:100%;border-radius:28px 28px 0 0;padding:0 0 30px;animation:up .55s var(--ease-chill);max-height:94%;overflow-y:auto;}
.detail-card::-webkit-scrollbar{display:none;}
.detail-hero{position:relative;}
.detail-photos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:28px 28px 0 0;}
.detail-photos::-webkit-scrollbar{display:none;}
.detail-photos .dp{position:relative;min-width:100%;height:240px;scroll-snap-align:center;
  background:linear-gradient(160deg,var(--mint-pale),var(--mint));display:flex;align-items:center;justify-content:center;}
.detail-photos .dp img{width:100%;height:100%;object-fit:cover;}
.detail-photos .dp span{font-size:56px;opacity:.6;filter:drop-shadow(0 8px 12px rgba(47,125,110,.2));}
.detail-photos .dp svg{width:64px;height:64px;color:rgba(255,255,255,.9);filter:drop-shadow(0 6px 10px rgba(47,125,110,.18));}
.detail-photos .dp:has(svg){background:radial-gradient(120% 90% at 50% 28%,#eafaf5,var(--mint-pale) 52%,var(--mint));}
.dot-row{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;}
.dot-row i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7);}
.detail-close{position:absolute;top:12px;left:12px;background:rgba(43,58,54,.45);backdrop-filter:blur(4px);
  color:#fff;border:0;width:34px;height:34px;border-radius:50%;font-size:18px;cursor:pointer;z-index:3;}
.detail-fav{position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:rgba(43,58,54,.4);backdrop-filter:blur(4px);
  box-shadow:0 4px 12px rgba(43,58,54,.18);transition:transform .15s var(--ease-chill),background .2s ease;}
.detail-fav svg{width:20px;height:20px;}
.detail-fav.on{background:rgba(255,255,255,.82);box-shadow:0 4px 14px rgba(255,126,174,.32),inset 0 1px 0 rgba(255,255,255,.9);}
.detail-fav:active{transform:scale(.88);}
.detail-fav.pop{animation:heartPop .42s var(--ease-chill);}
@keyframes heartPop{0%{transform:scale(.7);}45%{transform:scale(1.22);}70%{transform:scale(.95);}100%{transform:scale(1);}}
.detail-body{padding:18px 22px 0;}
.detail-cat{display:inline-block;background:var(--mint-pale);color:var(--mint-deep);font-size:11px;font-weight:700;padding:4px 12px;border-radius:999px;margin-bottom:10px;}
.detail-body h2{font-family:'Yomogi',cursive;font-size:22px;color:var(--choco);}
.detail-shop{font-size:12px;color:#8aa49b;margin:4px 0 6px;}
.detail-date{font-size:12px;color:var(--mint-deep);font-weight:700;margin:0 0 16px;display:flex;align-items:center;gap:5px;}
.detail-rates{position:relative;margin:18px 0 16px;padding:16px 16px 8px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(196,238,228,.34));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px rgba(47,125,110,.1);}
.rates-head{font-size:10px;letter-spacing:.18em;font-weight:700;color:var(--mint-deep);opacity:.75;margin-bottom:12px;}
.detail-rates .leafrow{margin-bottom:11px;align-items:center;}
.detail-rates .leafrow .lab{width:104px;flex-shrink:0;font-size:11.5px;margin-right:8px;color:var(--mint-deep);}
.detail-rates .leaves{gap:3px;}
.detail-rates .leaves img,.detail-rates .leaves svg{width:17px;height:17px;}
.detail-meta{display:flex;flex-direction:column;gap:4px;margin:6px 0 4px;}
.dm-item{font-size:12px;color:#7e9b93;display:flex;align-items:center;gap:5px;}
.dm-item svg{width:13px;height:13px;flex-shrink:0;}
.detail-memo{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(227,247,241,.7));
  border-radius:16px;padding:16px 16px 16px 30px;font-size:13px;color:var(--ink);line-height:1.8;margin:4px 0 0;
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 16px rgba(47,125,110,.08);}
.detail-memo::before{content:"“";position:absolute;left:10px;top:6px;font-family:'Yomogi',cursive;
  font-size:30px;color:var(--mint);line-height:1;opacity:.7;}
.detail-latin{font-family:'Yomogi',cursive;font-size:11px;color:#a9bdb6;font-style:italic;margin-top:4px;}
.detail-actions{display:flex;gap:10px;margin-top:18px;}
.detail-actions button{flex:1;font-family:inherit;font-weight:700;font-size:14px;padding:12px;border-radius:14px;cursor:pointer;border:0;}
.btn-edit{background:var(--mint-deep);color:#fff;}
.btn-del{background:#fff;color:#c96a5a;border:1px solid #f0d4cd!important;}

/* help */
.help-card{background:var(--cream);width:100%;border-radius:28px 28px 0 0;padding:26px 24px 30px;animation:up .55s var(--ease-chill);max-height:94%;overflow-y:auto;}
.help-card::-webkit-scrollbar{display:none;}
.help-card h2{font-family:'Yomogi',cursive;font-size:20px;color:var(--choco);margin-bottom:4px;text-align:center;}
.help-card .lead{font-size:12px;color:#8aa49b;text-align:center;margin-bottom:20px;line-height:1.7;}
.help-step{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start;}
.help-ic{flex-shrink:0;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--mint-deep);
  background:linear-gradient(160deg,var(--mint-pale),var(--mint));box-shadow:0 4px 10px rgba(47,125,110,.15);}
.help-ic svg{width:24px;height:24px;}
.help-step b{font-size:14px;color:var(--choco);display:block;margin-bottom:3px;}
.help-step p{font-size:12px;color:#7a978f;line-height:1.7;}
.help-ig{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:14px;text-decoration:none;color:var(--mint-deep);font-size:12.5px;}
.help-ig svg{width:16px;height:16px;flex-shrink:0;}
.help-ig b{font-weight:700;}
.help-ig:active{opacity:.6;}
.help-close{width:100%;background:var(--mint-deep);color:#fff;border:0;font-family:inherit;font-weight:700;font-size:15px;padding:14px;border-radius:14px;margin-top:12px;cursor:pointer;}
.help-share{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(196,238,228,.2));
  border:1px solid rgba(255,255,255,.75);color:var(--mint-deep);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:inherit;font-weight:700;font-size:13px;padding:12px;border-radius:14px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px rgba(47,125,110,.1);
  transition:transform .12s var(--ease-chill);}
.help-share:active{transform:scale(.97);}
.help-share svg{width:16px;height:16px;flex-shrink:0;}
.help-backup{margin-top:14px;padding:15px 15px 16px;border-radius:16px;background:rgba(196,238,228,.16);border:1px solid rgba(255,255,255,.7);}
.backup-head{display:flex;align-items:center;gap:7px;color:var(--mint-deep);font-weight:700;font-size:13px;}
.backup-head svg{width:16px;height:16px;flex-shrink:0;}
.backup-note{font-size:11px;color:#7a978f;line-height:1.7;margin:6px 0 11px;}
.backup-btns{display:flex;gap:9px;}
.backup-btn{flex:1;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(196,238,228,.25));
  border:1px solid rgba(255,255,255,.85);color:var(--mint-deep);
  font-family:inherit;font-weight:700;font-size:13px;padding:11px;border-radius:12px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 9px rgba(47,125,110,.08);
  transition:transform .12s var(--ease-chill);}
.backup-btn:active{transform:scale(.96);}

/* ============================================================
   Liquid Glass UI — 氷ガラスのボタン（追記レイヤーで見た目だけ上書き）
   ほんのりミント・透明・氷っぽい。押すと軽く沈む。
   ============================================================ */

/* --- サブ：透明な氷ガラス（チップ・丸ボタン） --- */
.help-btn,
.sortbar button,
.cat-pick button{
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.14) 46%,rgba(132,220,198,.16));
  border:1px solid rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(12px) saturate(165%);backdrop-filter:blur(12px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -8px 16px rgba(132,220,198,.16),0 5px 14px rgba(47,125,110,.16);
  color:var(--mint-deep);
  transition:transform .12s ease,box-shadow .12s ease,background .2s ease;
}
.help-btn:active,
.sortbar button:active,
.cat-pick button:active{transform:scale(.94);}

/* 未選択チップは控えめ／選択チップはミントガラスで主張 */
.sortbar button,.cat-pick button{color:#7e9b93;}
.sortbar button.on,.cat-pick button.on{
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(132,220,198,.5) 48%,rgba(63,191,163,.5));
  border-color:rgba(255,255,255,.9);color:#1f6253;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -8px 16px rgba(47,125,110,.2),0 6px 16px rgba(47,125,110,.24);
}

/* --- 主ボタン：濃いめミントガラス＋濡れたツヤ（白文字で可読性キープ） --- */
.save,.detail-actions .btn-edit,.help-close{
  position:relative;overflow:hidden;
  background:linear-gradient(170deg,rgba(140,222,201,.96),rgba(47,125,110,.97));
  border:1px solid rgba(255,255,255,.6);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -10px 18px rgba(31,90,78,.3),0 8px 18px rgba(47,125,110,.3);
  transition:transform .12s ease,box-shadow .12s ease;
}
.save::before,.detail-actions .btn-edit::before,.help-close::before{
  content:"";position:absolute;left:0;right:0;top:0;height:50%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));}
.save:active,.detail-actions .btn-edit:active,.help-close:active{
  transform:scale(.97);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 10px rgba(47,125,110,.3);}

/* やめる：静かな透明ガラス */
.btn-ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.12) 55%,rgba(196,238,228,.12));
  border:1px solid rgba(255,255,255,.7);color:#7d9a92;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 4px 12px rgba(47,125,110,.1);
  transition:transform .12s ease;}
.btn-ghost:active{transform:scale(.97);}

/* 削除：氷ガラス＋削除のサーモン文字 */
.detail-actions .btn-del{
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.2) 50%,rgba(243,212,205,.28));
  color:#c96a5a;border:1px solid rgba(255,255,255,.8)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 5px 14px rgba(201,106,90,.14);
  transition:transform .12s ease;}
.detail-actions .btn-del:active{transform:scale(.97);}

/* 写真追加：氷ガラスのダッシュ枠（"足す"の意味は残す） */
.photo-add{
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(196,238,228,.3));
  border:2px dashed rgba(118,200,180,.8);color:var(--mint-deep);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 4px 12px rgba(47,125,110,.12);
  transition:transform .12s ease;}
.photo-add:active{transform:scale(.96);}

/* カテゴリのタグ：薄い氷ガラス */
.detail-cat{
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(196,238,228,.55));
  border:1px solid rgba(255,255,255,.8);color:var(--mint-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);}

/* 中央＋＝ツヤツヤの立体マーブルチョコ（球体に光が当たった質感）*/
.tab-fab .plus{width:56px;height:56px;top:-18px;
  background:
    radial-gradient(58% 50% at 37% 28%, rgba(255,255,255,.34), rgba(255,255,255,0) 48%),
    radial-gradient(125% 120% at 35% 30%, #876350 0%, #6b4c3a 46%, #4b342a 74%, #3c2a20 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.24),
    inset 0 -7px 13px rgba(0,0,0,.22),
    0 7px 16px rgba(47,125,110,.22),   /* ミントグリーンの淡い影 */
    0 2px 5px rgba(47,125,110,.16);}
.tab-fab .plus::before{content:"";position:absolute;top:19%;left:27%;width:32%;height:22%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.5), rgba(255,255,255,0) 72%);
  filter:blur(1.2px);pointer-events:none;}
.tab-fab .plus svg{position:relative;z-index:1;}
.tab-fab:active .plus{transform:scale(.93);transition:transform .12s ease;}

/* ニックネーム：編集できるタイトル＋名前シート */
h1.editable{display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:opacity .15s var(--ease-chill);}
h1.editable:active{opacity:.65;}
.pencil{width:14px;height:14px;stroke:var(--mint-deep);opacity:.45;flex-shrink:0;}
.name-sheet{text-align:center;}
.name-sheet .field{margin-top:18px;text-align:left;}
.nick-count{font-size:11px;color:#a9bdb6;text-align:right;margin-top:6px;}
.name-sheet .save{margin-top:8px;}
.btn-text{display:block;width:100%;background:transparent;border:0;color:#9bb3ab;font-family:inherit;font-size:13px;padding:12px 12px 2px;margin-top:4px;cursor:pointer;}