:root{
  --ink:#31558f;
  --soft-ink:#6f83ad;
  --shadow:0 24px 64px rgba(81,101,159,.18);
  --marine-font:"Cooper Black","American Typewriter","Avenir Next Rounded","Hiragino Maru Gothic ProN",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--ink);
  font-family:"Avenir Next Rounded","Hiragino Maru Gothic ProN","Yu Gothic UI",sans-serif;
  background:
    radial-gradient(circle at 12% 12%,rgba(104,224,230,.38),transparent 28%),
    radial-gradient(circle at 88% 14%,rgba(221,155,238,.36),transparent 30%),
    radial-gradient(circle at 12% 82%,rgba(252,167,211,.32),transparent 32%),
    radial-gradient(circle at 88% 78%,rgba(123,194,245,.34),transparent 31%),
    linear-gradient(145deg,#effcff,#f7f4ff 48%,#fff6fb);
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(circle at 16% 24%,rgba(255,255,255,.38),transparent 10%),
    radial-gradient(circle at 78% 34%,rgba(255,255,255,.32),transparent 13%),
    radial-gradient(circle at 48% 75%,rgba(255,255,255,.28),transparent 12%);
  filter:blur(8px);
}
.liquid-glow{
  position:fixed;width:52vmax;height:52vmax;border-radius:45% 55% 62% 38%/55% 40% 60% 45%;
  filter:blur(58px);opacity:.22;z-index:-2;animation:floatLiquid 18s ease-in-out infinite alternate;
}
.glow-a{left:-24vmax;top:12vh;background:conic-gradient(from 60deg,#75e6e6,#c79df0,#f4a8cf,#75e6e6)}
.glow-b{right:-27vmax;top:57vh;background:conic-gradient(from 180deg,#87c9fb,#d99be9,#8be5d7,#87c9fb);animation-delay:-8s}
@keyframes floatLiquid{to{transform:translate3d(8vmax,-4vmax,0) rotate(34deg)}}

.hero{text-align:center;padding:calc(42px + env(safe-area-inset-top)) 20px 18px}
.micro{font-size:.68rem;letter-spacing:.22em;color:#7c90ba}
h1{
  margin:.55rem 0 0;
  font-family:var(--marine-font);
  font-size:clamp(2.25rem,10vw,4.7rem);
  line-height:1;
  font-weight:700;
  color:#315a9b;
  text-shadow:0 2px 0 rgba(255,255,255,.72);
}

.floating-controls{
  position:sticky;top:calc(10px + env(safe-area-inset-top));z-index:20;
  width:max-content;max-width:94vw;margin:0 auto 16px;padding:8px;
  display:flex;gap:8px;
  border-radius:999px;
  background:rgba(255,255,255,.34);
  backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:0 12px 30px rgba(72,94,153,.14),inset 0 1px 0 rgba(255,255,255,.7);
}
button,select,input{font:inherit}
.bubble-button{
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  color:#42619a;font-weight:700;font-size:1rem;
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.9),rgba(255,255,255,.28) 24%,transparent 42%),
    conic-gradient(from 30deg,rgba(111,221,228,.48),rgba(195,151,238,.42),rgba(246,156,203,.42),rgba(126,203,245,.46),rgba(111,221,228,.48));
  box-shadow:inset 0 0 18px rgba(255,255,255,.72),0 8px 18px rgba(77,100,160,.17);
  border:1px solid rgba(255,255,255,.66);
}
.bubble-button.play{color:white;background:linear-gradient(135deg,#63d3dc,#9a88e8 55%,#ed99c5)}
.bubble-button.small{width:42px;height:42px;font-size:1.45rem}
.bubble-button:active{transform:translateY(1px) scale(.98)}

.status-dock{width:min(88vw,620px);margin:0 auto 24px;color:#6279a8;font-size:.8rem}
.progress{height:7px;margin-top:8px;border-radius:999px;overflow:hidden;background:rgba(85,116,181,.11)}
.progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#63d6dc,#a28be5,#ee9cc4);transition:width .35s ease}

.card-list{width:min(92vw,640px);margin:0 auto;display:flex;flex-direction:column;gap:28px;padding-bottom:52px}

.card-shell{scroll-margin-top:98px}
.card{
  position:relative;width:100%;aspect-ratio:1/1;
  transition:filter .3s ease;
}
.card-shell.active .card{filter:drop-shadow(0 25px 34px rgba(85,106,169,.25))}
.face{
  position:absolute;inset:0;overflow:hidden;border-radius:36px;
  border:1px solid rgba(255,255,255,.58);
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.62),transparent 23%),
    radial-gradient(circle at 85% 82%,rgba(255,255,255,.42),transparent 28%),
    var(--card-gradient);
  box-shadow:var(--shadow),inset 0 1px 2px rgba(255,255,255,.84),inset 0 -16px 34px rgba(102,129,198,.08);
  transition:opacity .32s ease,transform .42s cubic-bezier(.2,.8,.2,1),visibility 0s linear .42s;
}
.front{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:13% 10%;
  opacity:1;visibility:visible;transform:scale(1);
  z-index:2;
}
.back{
  padding:12% 9%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:scale(.92);
  z-index:1;
}
.card.flipped .front{
  opacity:0;visibility:hidden;transform:scale(.92);
  transition:opacity .26s ease,transform .36s ease,visibility 0s linear .36s;
  pointer-events:none;
}
.card.flipped .back{
  opacity:1;visibility:visible;transform:scale(1);
  transition:opacity .32s ease .08s,transform .42s cubic-bezier(.2,.8,.2,1) .04s,visibility 0s;
  pointer-events:auto;
  z-index:3;
}
.number{position:absolute;top:7%;left:8%;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.05rem,4.8vw,1.7rem);color:var(--accent)}
.word{
  width:100%;padding:0 2%;
  font-family:var(--marine-font);
  font-size:clamp(2rem,10.5vw,4.2rem);
  line-height:1.02;color:var(--accent);text-align:center;
  overflow-wrap:anywhere;word-break:normal;
  text-shadow:0 2px 0 rgba(255,255,255,.76);
}
.meaning{margin-top:28px;max-width:90%;font-size:clamp(1.15rem,5.4vw,1.9rem);line-height:1.55;color:var(--accent)}
.ornament{width:44%;height:1px;margin-top:23px;position:relative;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.58}
.ornament::after{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);padding:0 8px;background:rgba(255,255,255,.34)}
.sentence{
  position:relative;z-index:2;margin:0;width:100%;
  font-family:var(--marine-font);
  font-size:clamp(1.65rem,7.5vw,3.05rem);
  line-height:1.28;color:#35588f;text-align:center;
  overflow-wrap:anywhere;
}
.focus{color:var(--accent)}
.translation{
  position:relative;z-index:2;margin:30px auto 0;width:92%;padding-top:23px;
  border-top:1px dashed color-mix(in srgb,var(--accent) 62%,transparent);
  font-size:clamp(1rem,4.5vw,1.5rem);line-height:1.65;text-align:center;color:var(--accent)
}
.card-actions{position:absolute;right:7%;bottom:6%;z-index:4}
.card-actions button{width:44px;height:44px}
.hint{position:absolute;left:7%;bottom:7%;font-size:.66rem;letter-spacing:.1em;color:var(--accent);opacity:.58}

.settings-backdrop{position:fixed;inset:0;z-index:39;background:rgba(45,56,94,.2);backdrop-filter:blur(6px)}
.settings-panel{
  position:fixed;z-index:40;left:0;right:0;bottom:0;
  max-height:min(82vh,720px);overflow:auto;
  padding:18px 18px calc(26px + env(safe-area-inset-bottom));
  border-radius:32px 32px 0 0;
  background:linear-gradient(160deg,rgba(244,255,255,.95),rgba(250,244,255,.94) 50%,rgba(255,244,250,.95));
  box-shadow:0 -24px 70px rgba(62,79,131,.22),inset 0 1px 0 rgba(255,255,255,.86);
  transform:translateY(105%);transition:transform .38s ease;
}
.settings-panel.open{transform:translateY(0)}
.settings-head{display:flex;align-items:center;justify-content:space-between;width:min(100%,680px);margin:0 auto 12px}
.settings-head h2{margin:.18rem 0 0;font-family:var(--marine-font);font-size:2rem;color:#365b98}
.settings-body{width:min(100%,680px);margin:auto;display:grid;gap:14px}
.setting-item{
  display:block;padding:15px 16px;border-radius:22px;color:#657ba8;font-size:.86rem;
  background:rgba(255,255,255,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 7px 18px rgba(92,108,167,.08)
}
.setting-item>span{display:block;margin-bottom:10px}
output{float:right;color:#47649b}
input[type=range]{width:100%;accent-color:#9e8ae4}
.bubble-select-wrap{position:relative}
.bubble-select-wrap::after{content:"⌄";position:absolute;right:16px;top:50%;transform:translateY(-55%);pointer-events:none;color:#6e71b4;font-size:1.2rem}
select{
  width:100%;appearance:none;-webkit-appearance:none;border:0;border-radius:999px;padding:13px 44px 13px 16px;color:#4d679d;
  background:
    radial-gradient(circle at 15% 18%,rgba(255,255,255,.85),transparent 26%),
    linear-gradient(110deg,rgba(133,222,230,.34),rgba(184,150,232,.32),rgba(244,164,204,.31));
  box-shadow:inset 0 0 16px rgba(255,255,255,.64),0 5px 14px rgba(92,111,171,.1);
}
footer{width:min(86vw,620px);margin:0 auto;padding:0 0 calc(34px + env(safe-area-inset-bottom));text-align:center;color:#7c90b5;font-size:.8rem;line-height:1.7}
@media(max-width:520px){.face{border-radius:28px}.card-shell{scroll-margin-top:90px}.floating-controls{top:calc(6px + env(safe-area-inset-top))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}}


/* v4: iPhoneホーム画面起動時の余白と表示を最適化 */
html,body{
  min-height:100%;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
body{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
@media (display-mode: standalone){
  .hero{
    padding-top:calc(22px + env(safe-area-inset-top));
  }
  .floating-controls{
    top:calc(6px + env(safe-area-inset-top));
  }
}


/* v6: 学習モード・お気に入り・苦手・カテゴリ・検索 */
.study-toolbar{width:min(92vw,720px);margin:0 auto 24px;padding:16px;border:1px solid rgba(255,255,255,.68);border-radius:28px;background:rgba(255,255,255,.42);backdrop-filter:blur(18px) saturate(1.25);box-shadow:0 14px 34px rgba(72,94,153,.12),inset 0 1px 0 rgba(255,255,255,.82)}
.toolbar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.toolbar-grid label{display:block}.toolbar-grid label>span{display:block;margin:0 0 7px 5px;font-size:.72rem;color:#7185ae;letter-spacing:.04em}.toolbar-grid select,.toolbar-grid input{width:100%;min-height:46px;border:0;border-radius:18px;padding:11px 14px;color:#4d679d;background:rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 14px rgba(92,111,171,.08)}.toolbar-grid input::placeholder{color:#94a2be}.toolbar-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:0 4px;color:#657ba8;font-size:.82rem}.toolbar-foot button{border:0;border-radius:999px;padding:8px 13px;color:#5d72a4;background:rgba(255,255,255,.6);box-shadow:0 4px 12px rgba(92,111,171,.08)}
.category-badge{position:absolute;top:7%;right:8%;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.45);font-size:.68rem;color:var(--accent);letter-spacing:.04em}.recall-hint{margin-top:24px;font-size:.75rem;letter-spacing:.12em;color:var(--accent);opacity:.7}.front .sentence{margin-top:28px;font-size:clamp(1.35rem,6vw,2.4rem)}.front .meaning{font-size:clamp(1.55rem,7vw,2.5rem)}
.card-actions{display:flex;gap:7px}.mini-action{width:42px!important;height:42px!important;border:1px solid rgba(255,255,255,.72);border-radius:50%;color:var(--accent);background:rgba(255,255,255,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 14px rgba(75,98,158,.13);font-weight:800}.mini-action.on{color:white;background:linear-gradient(135deg,#67d4dc,#9c88e7 56%,#ed9ac5)}.mini-action.weak.on{background:linear-gradient(135deg,#f0b870,#ee8ba5)}.empty-state{padding:56px 20px;border-radius:30px;text-align:center;color:#7185ae;background:rgba(255,255,255,.42)}
@media(max-width:620px){.toolbar-grid{grid-template-columns:1fr}.study-toolbar{padding:14px;border-radius:24px}.card-actions{right:5%;bottom:5%}.mini-action{width:39px!important;height:39px!important}}

/* v7: 学習設定を設定パネルへ統合・単語サイズ統一 */
.settings-body .study-toolbar{width:100%;margin:0;padding:14px;border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 7px 18px rgba(92,108,167,.08)}
.settings-body .toolbar-grid{grid-template-columns:1fr;}
.settings-body .toolbar-foot{margin-top:12px;}
/* v5.1 — シャボン玉オーロラカラー */
:root{
  --ink:#4e5797;
  --soft-ink:#7d78aa;
  --shadow:0 26px 68px rgba(91,75,159,.22),0 10px 28px rgba(67,179,205,.14);
}
body{
  background:
    radial-gradient(circle at 8% 8%,rgba(104,238,233,.58),transparent 30%),
    radial-gradient(circle at 92% 10%,rgba(207,137,255,.52),transparent 33%),
    radial-gradient(circle at 8% 58%,rgba(255,145,205,.47),transparent 34%),
    radial-gradient(circle at 91% 72%,rgba(105,191,255,.52),transparent 35%),
    radial-gradient(circle at 45% 96%,rgba(139,244,211,.38),transparent 35%),
    linear-gradient(150deg,#e9fbff 0%,#eee9ff 32%,#ffeaf6 64%,#e9fff8 100%);
  background-attachment:fixed;
}
body::before{
  background:
    radial-gradient(circle at 13% 20%,rgba(255,255,255,.74) 0 2.2%,rgba(126,220,236,.22) 2.6% 4.2%,transparent 4.7%),
    radial-gradient(circle at 84% 24%,rgba(255,255,255,.66) 0 2.8%,rgba(227,154,255,.22) 3.1% 5.1%,transparent 5.6%),
    radial-gradient(circle at 25% 76%,rgba(255,255,255,.62) 0 2.1%,rgba(255,147,205,.22) 2.5% 4.7%,transparent 5.2%),
    radial-gradient(circle at 78% 83%,rgba(255,255,255,.68) 0 2.4%,rgba(116,202,255,.22) 2.8% 5.2%,transparent 5.7%),
    radial-gradient(circle at 54% 47%,rgba(255,255,255,.48),transparent 14%);
  filter:blur(1px);
  opacity:.95;
}
.liquid-glow{opacity:.38;filter:blur(44px) saturate(1.35)}
.glow-a{background:conic-gradient(from 30deg,#52e6e3,#9d8cff,#f18dc5,#74bfff,#52e6e3)}
.glow-b{background:conic-gradient(from 180deg,#64caff,#d78cff,#ff9cc9,#69ead0,#64caff)}

.floating-controls{
  background:linear-gradient(135deg,rgba(255,255,255,.53),rgba(238,248,255,.34),rgba(255,235,249,.38));
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 15px 38px rgba(94,91,169,.18),inset 0 1px 0 rgba(255,255,255,.92),inset 0 -10px 22px rgba(140,205,236,.08);
}
.bubble-button{
  background:
    radial-gradient(circle at 27% 20%,rgba(255,255,255,.98),rgba(255,255,255,.44) 18%,transparent 38%),
    radial-gradient(circle at 72% 78%,rgba(255,255,255,.5),transparent 30%),
    conic-gradient(from 20deg,rgba(80,229,226,.66),rgba(157,133,255,.62),rgba(244,133,197,.64),rgba(100,192,255,.64),rgba(94,235,206,.62),rgba(80,229,226,.66));
  box-shadow:inset 0 0 22px rgba(255,255,255,.85),inset 0 -8px 18px rgba(121,104,207,.14),0 9px 22px rgba(84,91,165,.23);
  border:1px solid rgba(255,255,255,.88);
}
.bubble-button.play{
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.96),transparent 29%),
    linear-gradient(135deg,#5fe2df 0%,#8f8df1 45%,#ef91c7 78%,#76c9ff 100%);
  box-shadow:inset 0 0 22px rgba(255,255,255,.54),0 10px 24px rgba(110,91,187,.28);
}
.progress span{background:linear-gradient(90deg,#57dedb,#8d91f3 34%,#f28fc6 68%,#72c8ff)}

.face{
  border:1.4px solid rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 16% 13%,rgba(255,255,255,.88),transparent 20%),
    radial-gradient(circle at 88% 84%,rgba(255,255,255,.54),transparent 27%),
    radial-gradient(circle at 78% 12%,rgba(157,132,255,.14),transparent 27%),
    radial-gradient(circle at 17% 82%,rgba(83,226,219,.14),transparent 30%),
    var(--card-gradient);
  box-shadow:var(--shadow),inset 0 1px 3px rgba(255,255,255,.98),inset 0 -22px 44px rgba(115,113,207,.10);
  backdrop-filter:blur(18px) saturate(1.32);
}
.face::before{
  content:"";position:absolute;inset:2.3%;border-radius:31px;pointer-events:none;
  border:1px solid rgba(255,255,255,.34);
  background:linear-gradient(118deg,rgba(255,255,255,.22),transparent 28%,rgba(255,255,255,.1) 58%,transparent 76%);
}
.face::after{
  content:"";position:absolute;width:34%;aspect-ratio:1;border-radius:50%;right:-8%;top:-9%;pointer-events:none;
  border:1px solid rgba(255,255,255,.48);
  background:radial-gradient(circle at 31% 27%,rgba(255,255,255,.58),transparent 18%),conic-gradient(from 30deg,rgba(92,232,226,.13),rgba(170,135,255,.15),rgba(246,143,202,.14),rgba(105,197,255,.13),rgba(92,232,226,.13));
  box-shadow:inset 0 0 18px rgba(255,255,255,.3);
}
.settings-panel{
  background:
    radial-gradient(circle at 12% 8%,rgba(99,230,226,.22),transparent 28%),
    radial-gradient(circle at 88% 16%,rgba(213,143,255,.22),transparent 30%),
    radial-gradient(circle at 85% 88%,rgba(255,151,207,.20),transparent 32%),
    linear-gradient(160deg,rgba(239,255,255,.97),rgba(247,239,255,.96) 49%,rgba(255,239,249,.97));
}
.setting-item{
  border:1px solid rgba(255,255,255,.74);
  background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(237,248,255,.42),rgba(255,238,249,.45));
}
select{
  background:
    radial-gradient(circle at 15% 18%,rgba(255,255,255,.95),transparent 25%),
    linear-gradient(105deg,rgba(89,228,224,.45),rgba(156,135,244,.38) 45%,rgba(245,145,200,.39) 72%,rgba(108,199,255,.40));
}

/* v8 — VOC設定内の学習フィルターもシャボン玉配色へ統一 */
.study-toolbar,
.settings-body .study-toolbar{
  border:1px solid rgba(255,255,255,.82);
  background:
    radial-gradient(circle at 10% 8%,rgba(255,255,255,.78),transparent 25%),
    linear-gradient(135deg,rgba(100,230,226,.23),rgba(156,137,244,.20) 46%,rgba(245,145,200,.21) 73%,rgba(108,199,255,.20));
  box-shadow:0 14px 36px rgba(88,89,166,.16),inset 0 1px 0 rgba(255,255,255,.94),inset 0 -14px 28px rgba(121,185,230,.07);
}
.toolbar-grid select,
.toolbar-grid input{
  border:1px solid rgba(255,255,255,.78);
  color:#555f9f;
  background:
    radial-gradient(circle at 14% 18%,rgba(255,255,255,.92),transparent 25%),
    linear-gradient(105deg,rgba(89,228,224,.31),rgba(156,135,244,.27) 45%,rgba(245,145,200,.28) 72%,rgba(108,199,255,.28));
  box-shadow:inset 0 0 17px rgba(255,255,255,.64),0 6px 15px rgba(92,111,171,.11);
}
.toolbar-foot button{
  border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(218,245,252,.52),rgba(255,224,243,.52));
}
.mini-action{
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.96),transparent 35%),
    linear-gradient(135deg,rgba(91,227,224,.38),rgba(157,137,244,.34),rgba(245,145,201,.36));
}
.empty-state{
  border:1px solid rgba(255,255,255,.76);
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(225,248,253,.42),rgba(255,232,247,.43));
}


/* v10 — 文字色と選択画面をシャボン玉カラーへ統一 */
:root{
  --bubble-text:linear-gradient(100deg,#39bfc9 0%,#6da9e8 22%,#9b78df 48%,#df78bc 73%,#58cfc2 100%);
}
.hero h1,
.settings-head h2,
.word,
.meaning,
.sentence,
.translation,
.number,
.category-badge,
.status-dock,
.setting-item>span,
.toolbar-grid label>span,
.toolbar-foot,
.micro{
  color:#665aaf;
  background-image:var(--bubble-text);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
/* 例文内の学習対象語：以前の淡いオーロラ文字色へ戻す */
.focus{
  color:#c660b3;
  background-image:linear-gradient(90deg,#42c7cb,#8f73df,#e574b7);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:inherit;
  text-shadow:none;
}
.hint:empty{display:none!important}

/* Native select is retained for data/state only. */
.native-select-hidden{
  position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;
  pointer-events:none!important;clip-path:inset(50%)!important;
}
.liquid-select-trigger{
  width:100%;min-height:50px;border:1px solid rgba(255,255,255,.84);border-radius:18px;
  padding:12px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:#5e5ba4;text-align:left;font:inherit;
  background:
    radial-gradient(circle at 13% 16%,rgba(255,255,255,.96),transparent 26%),
    linear-gradient(105deg,rgba(75,224,222,.36),rgba(148,129,240,.31) 45%,rgba(245,133,195,.32) 73%,rgba(91,191,247,.33));
  box-shadow:inset 0 0 18px rgba(255,255,255,.68),0 7px 17px rgba(83,100,166,.13);
}
.liquid-select-value{
  background-image:var(--bubble-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:650;
}
.liquid-chevron{font-size:1.2rem;color:#886fc6}
.bubble-select-wrap::after{display:none}

.liquid-select-backdrop{
  position:fixed;inset:0;z-index:79;background:rgba(39,45,78,.34);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .2s ease;
}
.liquid-select-backdrop.open{opacity:1}
.liquid-select-sheet{
  position:fixed;z-index:80;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  max-height:min(74vh,680px);overflow:hidden;border-radius:30px;padding:16px;
  border:1px solid rgba(255,255,255,.82);
  background:
    radial-gradient(circle at 10% 6%,rgba(92,231,226,.35),transparent 28%),
    radial-gradient(circle at 90% 12%,rgba(205,137,255,.30),transparent 31%),
    radial-gradient(circle at 82% 92%,rgba(255,140,204,.28),transparent 34%),
    linear-gradient(155deg,rgba(244,255,255,.98),rgba(246,239,255,.98) 49%,rgba(255,239,249,.98));
  box-shadow:0 28px 80px rgba(42,48,90,.36),inset 0 1px 0 rgba(255,255,255,.95);
  transform:translateY(110%);opacity:0;transition:transform .24s ease,opacity .2s ease;
}
.liquid-select-sheet.open{transform:translateY(0);opacity:1}
.liquid-select-head{display:flex;align-items:center;justify-content:space-between;padding:2px 3px 12px 8px}
.liquid-select-head strong{
  font-size:1.08rem;background-image:var(--bubble-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.liquid-select-options{display:grid;gap:9px;max-height:calc(min(74vh,680px) - 76px);overflow:auto;padding:2px 2px 8px}
.liquid-select-option{
  width:100%;border:1px solid rgba(255,255,255,.83);border-radius:21px;padding:15px 17px;
  display:flex;align-items:center;justify-content:space-between;gap:15px;text-align:left;
  color:#5f5b9f;font-size:1rem;line-height:1.4;
  background:
    radial-gradient(circle at 10% 15%,rgba(255,255,255,.95),transparent 28%),
    linear-gradient(105deg,rgba(76,223,222,.27),rgba(151,130,241,.25) 45%,rgba(245,136,196,.26) 73%,rgba(96,194,247,.27));
  box-shadow:inset 0 0 15px rgba(255,255,255,.58),0 6px 15px rgba(84,100,165,.11);
}
.liquid-select-option.selected{
  border-color:rgba(255,255,255,.98);
  background:
    radial-gradient(circle at 12% 12%,rgba(255,255,255,.98),transparent 25%),
    linear-gradient(105deg,rgba(55,211,211,.49),rgba(139,111,233,.43) 45%,rgba(239,113,183,.44) 73%,rgba(73,179,240,.45));
  box-shadow:0 8px 22px rgba(117,91,190,.19),inset 0 0 20px rgba(255,255,255,.68);
}
.liquid-select-option span:first-child{
  background-image:var(--bubble-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:700;
}
.liquid-check{font-size:1.2rem;color:#835fc2;min-width:1.2em;text-align:center}

/* v13 — カード本文を旧配色へ戻し、例文中の対象語だけをオーロラ色にする */
.word,
.meaning,
.number,
.category-badge,
.translation,
.hint,
.recall-hint{
  color:var(--accent);
  background-image:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  text-shadow:none;
}
.word{
  text-shadow:0 2px 0 rgba(255,255,255,.76);
}
.sentence{
  color:#35588f;
  background-image:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  text-shadow:none;
}
.sentence .focus{
  color:#8b6fd4;
  background-image:linear-gradient(90deg,#42bfc7 0%,#7a79d9 48%,#d96dae 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:inherit;
  text-shadow:none;
}

/* v14 — Soft Bubble Glass: 目に優しい淡色・揺らぐ輪郭・柔らかなオーロラ */
:root{
  --ink:#756f98;
  --soft-ink:#8c87a8;
  --soft-deep:#6f7396;
  --soft-muted:#9b96b1;
  --bubble-text-soft:linear-gradient(100deg,#79cfd1 0%,#91b8df 24%,#aa98d5 49%,#d79abe 74%,#8bcfc3 100%);
  --target-aurora-soft:linear-gradient(90deg,#76c8cc 0%,#9ea4da 47%,#d89abd 100%);
  --shadow-soft:0 22px 58px rgba(103,101,155,.105),0 9px 24px rgba(115,190,206,.075);
}

body{
  color:var(--ink);
  background:
    radial-gradient(circle at 7% 8%,rgba(137,230,225,.34),transparent 31%),
    radial-gradient(circle at 93% 11%,rgba(211,174,239,.31),transparent 34%),
    radial-gradient(circle at 9% 61%,rgba(244,184,216,.28),transparent 35%),
    radial-gradient(circle at 91% 75%,rgba(146,202,238,.30),transparent 36%),
    radial-gradient(circle at 48% 98%,rgba(165,231,211,.22),transparent 36%),
    linear-gradient(150deg,#f2fcfd 0%,#f3f1fb 34%,#fcf2f8 67%,#f1fbf7 100%);
}
body::before{opacity:.68;filter:blur(4px)}
.liquid-glow{opacity:.20;filter:blur(64px) saturate(1.05)}

.micro,
.hero h1,
.settings-head h2,
.status-dock,
.setting-item>span,
.toolbar-grid label>span,
.toolbar-foot,
.liquid-select-head strong,
.liquid-select-value,
.liquid-select-option span:first-child{
  background-image:var(--bubble-text-soft);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}

.hero h1{filter:saturate(.88);opacity:.93}
.status-dock{opacity:.94}

/* カード全体：硬い正方形ではなく、輪郭が少し揺らぐガラスの膜 */
.card{transition:filter .55s ease,transform .55s cubic-bezier(.22,.76,.24,1)}
.card-shell.active .card{filter:drop-shadow(0 21px 30px rgba(105,105,158,.13))}
.face{
  border:0;
  border-radius:38px 34px 40px 32px / 34px 40px 33px 39px;
  background:
    radial-gradient(circle at 17% 14%,rgba(255,255,255,.72),transparent 23%),
    radial-gradient(circle at 86% 84%,rgba(255,255,255,.35),transparent 29%),
    radial-gradient(circle at 76% 13%,rgba(186,169,226,.075),transparent 30%),
    radial-gradient(circle at 18% 84%,rgba(148,218,216,.07),transparent 32%),
    var(--card-gradient);
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 1px rgba(255,255,255,.68),
    inset 0 -18px 38px rgba(119,132,184,.045),
    0 0 0 .65px rgba(255,255,255,.42);
  backdrop-filter:blur(20px) saturate(1.08);
}
.face::before{
  inset:2.7%;
  border:0;
  border-radius:35px 31px 38px 29px / 31px 37px 30px 36px;
  background:
    linear-gradient(120deg,rgba(255,255,255,.19),transparent 28%,rgba(255,255,255,.07) 59%,transparent 78%);
  box-shadow:inset 0 0 0 .55px rgba(255,255,255,.25);
  opacity:.72;
}
.face::after{
  border:0;
  opacity:.52;
  filter:blur(.2px);
  box-shadow:inset 0 0 16px rgba(255,255,255,.20),0 0 20px rgba(168,190,224,.045);
}

/* 文字：視認性を維持しながら彩度とコントラストを弱める */
.word,
.meaning,
.number,
.category-badge,
.translation,
.hint,
.recall-hint{
  color:color-mix(in srgb,var(--accent) 62%,#8f8aa7 38%);
  text-shadow:none;
}
.word{opacity:.94;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.meaning{opacity:.91}
.number,.category-badge,.hint,.recall-hint{opacity:.74}
.sentence{
  color:#747b9c;
  opacity:.96;
  text-shadow:none;
}
.translation{
  color:#8a86a4;
  border-top:0;
  position:relative;
}
.translation::before{
  content:"";
  position:absolute;left:8%;right:8%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(151,149,183,.25),rgba(139,194,199,.20),transparent);
  filter:blur(.15px);
}
.sentence .focus{
  color:#a493c9;
  background-image:var(--target-aurora-soft);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:saturate(.83) brightness(1.03);
  font-weight:inherit;
  text-shadow:none;
}
.ornament{opacity:.30;filter:blur(.15px)}
.ornament::after{background:rgba(255,255,255,.18);color:#aaa1c7}

/* 操作部：枠ではなく、曖昧な光の膜で形を作る */
.floating-controls{
  border:0;
  background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(237,248,250,.24),rgba(250,235,245,.25));
  box-shadow:
    0 14px 34px rgba(103,105,153,.085),
    inset 0 1px 0 rgba(255,255,255,.56),
    0 0 0 .55px rgba(255,255,255,.30);
  backdrop-filter:blur(22px) saturate(1.06);
}
.bubble-button,
.mini-action{
  border:0!important;
  color:#807ba2;
  background:
    radial-gradient(circle at 29% 22%,rgba(255,255,255,.75),rgba(255,255,255,.20) 23%,transparent 43%),
    conic-gradient(from 26deg,rgba(130,217,214,.34),rgba(178,159,224,.31),rgba(231,165,202,.31),rgba(147,197,231,.32),rgba(130,217,214,.34));
  box-shadow:
    inset 0 0 15px rgba(255,255,255,.52),
    inset 0 -6px 13px rgba(136,126,186,.055),
    0 7px 17px rgba(102,105,154,.095),
    0 0 0 .5px rgba(255,255,255,.34);
  transition:filter .28s ease,transform .28s ease,box-shadow .28s ease;
}
.bubble-button.play,
.mini-action.on{
  color:rgba(255,255,255,.92);
  background:
    radial-gradient(circle at 29% 21%,rgba(255,255,255,.76),transparent 31%),
    linear-gradient(135deg,rgba(118,210,208,.76),rgba(163,151,219,.72) 48%,rgba(222,153,193,.72) 78%,rgba(137,190,225,.72));
  box-shadow:inset 0 0 17px rgba(255,255,255,.34),0 8px 19px rgba(112,105,170,.12);
}
.bubble-button:hover,.mini-action:hover{filter:brightness(1.035) saturate(.94)}
.bubble-button:active,.mini-action:active{transform:scale(.985);filter:brightness(1.04)}

.progress{background:rgba(126,133,172,.075)}
.progress span{background:linear-gradient(90deg,#8bd1cf,#a6a6d8 39%,#d8a1c0 72%,#9ec6e2);opacity:.82}

/* 設定・検索・選択UIも同じ柔らかい質感に統一 */
.settings-backdrop,.liquid-select-backdrop{background:rgba(73,73,104,.16);backdrop-filter:blur(9px)}
.settings-panel,
.liquid-select-sheet{
  border:0;
  background:
    radial-gradient(circle at 12% 8%,rgba(157,222,219,.14),transparent 29%),
    radial-gradient(circle at 88% 16%,rgba(210,180,235,.14),transparent 31%),
    radial-gradient(circle at 84% 88%,rgba(239,187,215,.12),transparent 33%),
    linear-gradient(160deg,rgba(247,253,253,.94),rgba(248,244,252,.93) 49%,rgba(253,245,249,.94));
  box-shadow:0 -20px 58px rgba(88,88,130,.13),inset 0 1px 0 rgba(255,255,255,.64),0 0 0 .55px rgba(255,255,255,.34);
}
.settings-panel{border-radius:34px 30px 0 0 / 30px 35px 0 0}
.liquid-select-sheet{border-radius:31px 27px 34px 28px / 29px 33px 27px 34px}
.setting-item,
.study-toolbar,
.settings-body .study-toolbar,
.empty-state{
  border:0;
  background:linear-gradient(135deg,rgba(255,255,255,.43),rgba(239,248,249,.26),rgba(251,239,246,.27));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.54),0 7px 18px rgba(105,106,151,.055),0 0 0 .5px rgba(255,255,255,.29);
}
.setting-item{border-radius:23px 20px 25px 19px / 21px 25px 19px 24px;color:#8b87a7}
.toolbar-grid input,
.liquid-select-trigger,
.liquid-select-option,
.toolbar-foot button{
  border:0;
  color:#817d9e;
  background:
    radial-gradient(circle at 13% 16%,rgba(255,255,255,.70),transparent 27%),
    linear-gradient(105deg,rgba(143,217,214,.20),rgba(184,169,224,.18) 45%,rgba(231,171,203,.18) 73%,rgba(156,202,229,.19));
  box-shadow:inset 0 0 13px rgba(255,255,255,.38),0 5px 13px rgba(104,106,153,.06),0 0 0 .5px rgba(255,255,255,.28);
}
.liquid-select-trigger{border-radius:19px 17px 21px 16px / 17px 21px 16px 20px}
.liquid-select-option{border-radius:22px 18px 24px 19px / 19px 23px 18px 24px}
.liquid-select-option.selected{
  border:0;
  background:
    radial-gradient(circle at 12% 12%,rgba(255,255,255,.76),transparent 26%),
    linear-gradient(105deg,rgba(125,208,205,.31),rgba(172,154,217,.29) 45%,rgba(225,156,195,.29) 73%,rgba(145,193,224,.30));
  box-shadow:0 7px 18px rgba(112,105,164,.085),inset 0 0 15px rgba(255,255,255,.42),0 0 0 .5px rgba(255,255,255,.32);
}
.liquid-chevron,.liquid-check{color:#9a8fbb}
input[type=range]{accent-color:#aaa0cf}
output{color:#817d9f}

/* 呼吸するような、ごく弱い揺らぎ */
@keyframes bubbleBreathe{
  0%,100%{filter:brightness(1) saturate(1);transform:translateY(0)}
  50%{filter:brightness(1.012) saturate(.98);transform:translateY(-.4px)}
}
.card-shell.active .face{animation:bubbleBreathe 6.8s ease-in-out infinite}

@media(max-width:520px){
  .face{border-radius:31px 27px 34px 25px / 27px 33px 25px 32px}
  .face::before{border-radius:28px 24px 31px 22px / 24px 30px 22px 29px}
}