/* 恋する、もうひとつの世界 — アイボリー・夜空の紺・淡いピンク・シャンパンゴールド。ゴールドは重要な選択と演出だけに */
:root {
  --ivory: #fbf6ee; --ivory2: #f1e8da; --paper: #fffdf8; --ink: #2d2a3a; --muted: #7a7385;
  --navy: #101a3e; --navy2: #0a1230; --navy3: #1f3470; --pink: #cfc3ef; --pink2: #ece7fb; --pinkD: #7f6cc4; --blue: #2f55a4;
  --gold: #d8b878; --goldL: #f1e1b6; --goldD: #a8884a;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --ease: cubic-bezier(.25, .8, .3, 1); --pop: cubic-bezier(.2, 1.3, .4, 1);
  --hc: #f0907e; --hc2: #fbe3dc;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--navy2); }
body { margin: 0; min-height: 100vh; min-height: 100svh; font-family: var(--sans); color: var(--ink); line-height: 1.7; overflow-x: hidden;
  background: radial-gradient(1px 1px at 12% 20%, #fff8, transparent), radial-gradient(1.5px 1.5px at 80% 12%, #fff9, transparent), radial-gradient(1px 1px at 60% 70%, #fff6, transparent), radial-gradient(120% 80% at 50% 0%, #26407a, var(--navy) 50%, var(--navy2)) fixed; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--goldL); outline-offset: 2px; border-radius: 10px; }
.loading { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--navy); color: var(--goldL); font-family: var(--serif); letter-spacing: .12em; }
/* 画面の枠：スマホは全面、PCは中央に縦長の一枚 */
.frame { position: relative; width: 100%; max-width: 480px; margin: 0 auto; min-height: 100svh; overflow: hidden; background: var(--navy); }
@media (min-width: 760px) { .frame { margin: 24px auto; min-height: calc(100svh - 48px); border-radius: 26px; box-shadow: 0 0 0 1px rgba(216,184,120,.55), 0 0 0 6px rgba(216,184,120,.08), 0 40px 90px -30px rgba(0,0,0,.9); } }
.screen { display: none; position: relative; min-height: inherit; } .screen.is-active { display: block; animation: scrIn .4s var(--ease) both; }
@keyframes scrIn { from { opacity: 0; } }
.btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 10px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 16px; background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .1s; }
.btn span { font-weight: 700; font-size: 15px; letter-spacing: .06em; } .btn small { font-size: 11.5px; opacity: .85; }
.btn:active { transform: scale(.98); }
.btn.gold { border: 0; color: #3a2a12; background: linear-gradient(115deg, #c9a45e, #f1e1b6 45%, #d8b878 70%, #f6ead0); box-shadow: 0 0 0 1px #fff7 inset, 0 10px 26px -10px rgba(216,184,120,.8); }
.btn.gold span { font-family: var(--serif); font-size: 18px; letter-spacing: .14em; }
.btn.ghost { background: rgba(255,255,255,.06); }
.btn.small { width: auto; min-height: 46px; margin: 0; padding: 0 18px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .row2 .btn { margin-top: 10px; }
.ic-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(10,18,48,.45); color: #fff; font-size: 20px; line-height: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 14px 10px; background: linear-gradient(180deg, rgba(10,18,48,.95), rgba(10,18,48,.6) 70%, transparent); }
.bar h2 { margin: 0; text-align: center; font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--ivory); letter-spacing: .06em; line-height: 1.4; }
.help { margin: 8px 0 0; font-size: 11.5px; color: rgba(255,255,255,.72); } .help.dark { color: var(--muted); }
.link { border: 0; background: none; color: var(--pinkD); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; min-height: 40px; margin-top: 6px; }

/* ================= タイトル ================= */
#s-title, #s-intro { min-height: inherit; color: #fff; }
.t-bg { position: absolute; inset: 0; } .t-bg svg { width: 100%; height: 100%; display: block; }
.t-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,48,.1) 0%, rgba(10,18,48,.2) 40%, rgba(10,18,48,.85) 75%, var(--navy2)); }
.title-art .orb { animation: orb 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; } @keyframes orb { to { transform: translateY(-16px) scale(1.06); } }
.title-art .tw, .bgsvg .tw { animation: tw 3s ease-in-out infinite alternate; } @keyframes tw { to { opacity: .2; } }
.petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.petals i, .fx .pt { position: absolute; top: -6%; width: 12px; height: 9px; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #f1edff, #b9aee8); opacity: .85; animation: petal linear infinite; }
@keyframes petal { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-30px, 55vh) rotate(200deg); } 100% { transform: translate(20px, 115vh) rotate(420deg); } }
.t-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: inherit; padding: 40px 22px max(22px, env(safe-area-inset-bottom)); text-align: center; }
.t-eyebrow { margin: 0; font-size: 11px; letter-spacing: .4em; color: var(--goldL); opacity: .9; }
.t-h { margin: 10px 0 0; font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 10.5vw, 48px); line-height: 1.3; letter-spacing: .06em; color: #fff;
  text-shadow: 0 0 22px rgba(200,190,250,.75), 0 0 2px #fff, 0 4px 30px rgba(10,18,48,.8); animation: logoIn 2s var(--ease) .2s both; }
@keyframes logoIn { from { opacity: 0; letter-spacing: .3em; filter: blur(6px); } }
.t-sub { margin: 10px 0 0; animation: logoIn 1.6s var(--ease) .9s both; } .t-sub span { display: inline-block; padding: 3px 18px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); font-family: var(--serif); font-size: 15px; letter-spacing: .3em; color: var(--goldL); }
.t-lead { margin: 14px 0 0; font-size: 13.5px; line-height: 1.85; color: rgba(255,255,255,.88); }
.t-btns { margin-top: 18px; animation: logoIn 1s var(--ease) 1.4s both; } .t-btns .btn { color: #fff; }
.t-note { margin: 14px 0 0; font-size: 10.5px; line-height: 1.7; color: rgba(255,255,255,.62); }
/* 導入 */
.intro { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: inherit; padding: 40px 24px max(22px, env(safe-area-inset-bottom)); }
.i-page { display: none; font-family: var(--serif); font-size: 16.5px; line-height: 2; text-shadow: 0 2px 12px rgba(0,0,0,.6); } .i-page.is-on { display: block; animation: pageIn .7s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } }
.i-page p { margin: 0 0 14px; } .i-kicker { font-family: var(--sans); font-size: 11px !important; letter-spacing: .4em; color: var(--goldL); }
.i-name { display: block; margin-top: 8px; font-family: var(--sans); } .i-name span { display: block; font-size: 12px; opacity: .85; line-height: 1.6; }
.i-name input, .set input[type=text], #s-name { width: 100%; min-height: 50px; margin-top: 6px; padding: 0 14px; border: 1px solid rgba(216,184,120,.7); border-radius: 12px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 17px; }
.i-help { font-family: var(--sans); font-size: 11.5px !important; line-height: 1.6 !important; opacity: .75; margin-top: 6px !important; }
.i-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.i-dots, .sel-dots { display: flex; gap: 6px; justify-content: center; } .i-dots i, .sel-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); } .i-dots i.on, .sel-dots i.on { background: var(--gold); }

/* ================= キャラクター選択 ================= */
#s-select, #s-eps, #s-album { min-height: inherit; padding-bottom: 24px; color: #fff; }
.sel-lead { margin: 0 18px; font-size: 12.5px; color: rgba(255,255,255,.75); text-align: center; }
.cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 9% 10px; scrollbar-width: none; overscroll-behavior-x: contain; }
.cards::-webkit-scrollbar { display: none; }
.cc { --c: #f0907e; --c2: #fbe3dc; flex: 0 0 82%; scroll-snap-align: center; position: relative; border-radius: 22px; overflow: hidden; color: var(--ink); background: linear-gradient(180deg, var(--c2), var(--paper) 60%); box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 18px 40px -16px rgba(0,0,0,.8); transition: transform .35s var(--ease), opacity .35s; }
.cc.dim { transform: scale(.94); opacity: .75; }
.cc-art { position: relative; height: 270px; overflow: hidden; background: radial-gradient(70% 80% at 50% 70%, #fff, var(--c2) 70%); }
.cc-art::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, var(--c) 0, transparent 40%); opacity: .25; }
.cc-art svg { position: absolute; left: 50%; top: 4px; width: 300px; height: 480px; transform: translateX(-50%); filter: drop-shadow(0 8px 14px rgba(0,0,0,.15)); }
.cc.pick .cc-art svg { animation: pickHop .6s var(--pop); } @keyframes pickHop { 40% { transform: translateX(-50%) translateY(-10px) scale(1.03); } }
.cc-say { position: absolute; left: 12px; right: 12px; bottom: 10px; margin: 0; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.95); font-size: 13px; font-weight: 700; color: var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,.15); animation: pageIn .4s var(--pop); }
.cc-body { padding: 12px 16px 16px; }
.cc-job { margin: 0; font-size: 11.5px; color: var(--muted); }
.cc-name { margin: 2px 0 0; font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--ink); } .cc-name small { margin-left: 8px; font-family: var(--sans); font-size: 11px; color: var(--muted); font-weight: 400; }
.cc-tag { margin: 6px 0 0; font-weight: 700; font-size: 14px; color: var(--c); filter: brightness(.8); line-height: 1.6; }
.cc-intro { margin: 6px 0 0; font-size: 13px; line-height: 1.75; }
.cc-q { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.035); font-size: 12px; line-height: 1.7; } .cc-q b { color: var(--c); filter: brightness(.75); font-size: 11px; }
.cc-mood { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; } .cc-mood li { padding: 2px 10px; border-radius: 999px; background: var(--c2); font-size: 11.5px; font-weight: 700; color: var(--ink); box-shadow: 0 0 0 1px var(--c) inset; }
.cc-prog { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.cc .btn { color: #fff; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); border: 0; }
.sel-dots { margin-top: 6px; }
/* 話の一覧 */
.eps-hero { position: relative; height: 190px; margin: 0 14px; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, var(--hc2), var(--paper)); }
.eps-hero svg { position: absolute; left: 50%; top: 0; width: 260px; height: 416px; transform: translateX(-50%); }
.eps-hero p { position: absolute; left: 12px; right: 12px; bottom: 10px; margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 12.5px; line-height: 1.6; }
.eps { margin: 12px 14px 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ep { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.ep.cur { border-color: var(--gold); background: rgba(216,184,120,.12); } .ep.lock { opacity: .55; }
.ep-k { margin: 0; font-size: 11px; letter-spacing: .1em; color: var(--goldL); } .ep-t { margin: 2px 0 0; font-family: var(--serif); font-size: 16px; font-weight: 700; color: #fff; line-height: 1.5; }
.ep-s { margin: 4px 0 0; font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.6; }
.ep .row2 .btn, .ep > .btn { min-height: 46px; margin-top: 8px; }
.eps-ends { margin: 14px 14px 0; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.06); font-size: 12.5px; color: rgba(255,255,255,.8); }
.eps-ends b { color: var(--goldL); }

/* ================= 本編（ノベル画面） ================= */
#s-game { height: 100svh; min-height: 0; }
@media (min-width: 760px) { #s-game { height: calc(100svh - 48px); } }
.stage { position: absolute; inset: 0; overflow: hidden; background: var(--navy); user-select: none; -webkit-user-select: none; }
.bg { position: absolute; inset: 0; } .bg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bg .bgsvg.enter { animation: bgIn .6s var(--ease) both; } @keyframes bgIn { from { opacity: 0; transform: scale(1.04); } }
.bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,48,.25), transparent 20%, transparent 55%, rgba(10,18,48,.35)); pointer-events: none; }
.sprite { position: absolute; left: 50%; bottom: 0; width: min(118%, 560px); height: 78%; transform: translateX(-50%); pointer-events: none; transition: filter .3s, opacity .3s; }
.sprite svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 18px rgba(10,18,48,.35)); }
.sprite .hero { transform-origin: 50% 90%; }
.sprite.in { animation: spIn .5s var(--ease) both; } @keyframes spIn { from { opacity: 0; transform: translateX(-50%) translateY(18px); } }
.sprite.talk svg { animation: talk .35s var(--ease); } @keyframes talk { 40% { transform: translateY(-5px); } }
.sprite.dim { filter: brightness(.82) saturate(.85); }
.sprite.react-up svg { animation: hopUp .5s var(--pop); } .sprite.react-down svg { animation: droop .6s var(--ease); }
@keyframes hopUp { 40% { transform: translateY(-14px) scale(1.02); } } @keyframes droop { 40% { transform: translateY(8px) rotate(-1deg); } }
.bgsvg .steam, .hero .steam { animation: steam 2.4s ease-in-out infinite; } @keyframes steam { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-18px); } }
.bgsvg .glowp { animation: glowp 3s ease-in-out infinite alternate; } @keyframes glowp { to { opacity: .55; } }
.bgsvg .dust circle { animation: dust 6s ease-in-out infinite alternate; } @keyframes dust { to { transform: translate(14px, -30px); opacity: .1; } }
.bgsvg .fish g { animation: swim 9s linear infinite alternate; } @keyframes swim { to { transform: translateX(80px); } }
.bgsvg .turtle { animation: turtle 8s ease-in-out infinite alternate; } @keyframes turtle { to { transform: translate(340px, 400px); } }
.bgsvg .bubbles circle { animation: bubble 5s linear infinite; } @keyframes bubble { to { transform: translateY(-500px); opacity: 0; } }
.bgsvg .wave path { animation: wave 4s ease-in-out infinite alternate; } @keyframes wave { to { transform: translateX(-40px); } }
.bgsvg .comet { animation: comet 6s ease-in-out infinite alternate; } @keyframes comet { to { transform: translate(-30px, 12px); } }
.bgsvg .lantern { animation: lantern 3s ease-in-out infinite alternate; } @keyframes lantern { to { transform: translateY(6px); } }
.bgsvg .trainlight { animation: train 6s linear infinite; } @keyframes train { to { transform: translateX(900px); } }
.bgsvg .cloud { animation: cloud 30s linear infinite alternate; } @keyframes cloud { to { transform: translateX(60px); } }
.bgsvg .rays path { animation: glowp 4s ease-in-out infinite alternate; }
/* 天気・光の演出 */
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.fx .rn { position: absolute; top: -10%; width: 1.5px; height: 70px; background: linear-gradient(transparent, rgba(220,235,255,.75)); animation: rain .7s linear infinite; }
@keyframes rain { to { transform: translate(-40px, 120vh); } }
.fx .st { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: tw 2.2s ease-in-out infinite alternate; }
.fx .bk { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,226,168,.55), transparent 70%); animation: bokeh 6s ease-in-out infinite alternate; } @keyframes bokeh { to { transform: translateY(-20px) scale(1.15); opacity: .5; } }
.fx .sun { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 100%, rgba(255,200,150,.45), transparent 70%); animation: glowp 4s ease-in-out infinite alternate; }
.fx .storm { position: absolute; inset: 0; background: rgba(10,16,40,.25); animation: storm 5s infinite; } @keyframes storm { 0%, 88%, 100% { background: rgba(10,16,40,.25); } 90% { background: rgba(220,230,255,.5); } 92% { background: rgba(10,16,40,.25); } 94% { background: rgba(220,230,255,.35); } }
.flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: #fff; }
.flash.go { animation: flash .7s ease forwards; } @keyframes flash { 15% { opacity: .85; } to { opacity: 0; } }
.flash.heart { background: radial-gradient(circle at 50% 45%, rgba(200,190,250,.85), rgba(200,190,250,0) 65%); } .flash.heart.go { animation: flash 1.4s ease forwards; }
.flash.confess { background: radial-gradient(circle at 50% 40%, rgba(255,247,220,.95), rgba(241,225,182,.4) 40%, rgba(200,190,250,0) 75%); } .flash.confess.go { animation: flash 2.2s ease forwards; }
.flash.meet { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.9), rgba(241,225,182,.3) 45%, transparent 70%); }
/* 上部の操作 */
.g-top { position: absolute; left: 0; right: 0; top: 0; z-index: 8; display: flex; align-items: center; gap: 6px; padding: max(10px, env(safe-area-inset-top)) 10px 10px; background: linear-gradient(180deg, rgba(10,18,48,.55), transparent); }
.g-ep { flex: 1; min-width: 0; margin: 0; font-size: 11.5px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { min-height: 38px; padding: 0 11px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; background: rgba(10,18,48,.45); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; }
.pill[aria-pressed="true"] { background: var(--goldL); color: #3a2a12; border-color: var(--gold); }
@media (max-width: 350px) { .pill { padding: 0 8px; font-size: 11px; } .g-ep { font-size: 10.5px; } }
/* 関係の変化 */
.chips { position: absolute; left: 0; right: 0; top: calc(max(10px, env(safe-area-inset-top)) + 52px); z-index: 7; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 12px; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: rgba(255,253,248,.95); color: var(--ink); font-size: 12.5px; font-weight: 800; box-shadow: 0 6px 16px rgba(10,18,48,.3); animation: chip 2.4s var(--pop) forwards; }
.chip i { font-style: normal; } .chip.up i { color: var(--pinkD); } .chip.down { background: rgba(232,236,246,.95); } .chip.down i { color: #6a7aa8; }
@keyframes chip { 0% { opacity: 0; transform: translateY(-8px) scale(.8); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
/* 出会いのカード・章タイトル */
.card-meet { position: absolute; left: 14px; top: 30%; z-index: 7; padding: 12px 18px 12px 16px; border-radius: 4px 18px 18px 4px; background: rgba(255,253,248,.95); border-left: 4px solid var(--hc); box-shadow: 0 10px 30px rgba(10,18,48,.35); animation: meetIn 2.8s var(--ease) forwards; pointer-events: none; }
.card-meet small { display: block; font-size: 11px; color: var(--muted); } .card-meet b { font-family: var(--serif); font-size: 22px; letter-spacing: .08em; } .card-meet em { display: block; font-style: normal; font-size: 11px; color: var(--hc); filter: brightness(.8); letter-spacing: .2em; }
@keyframes meetIn { 0% { opacity: 0; transform: translateX(-30px); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(10px); } }
.chapter { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; background: radial-gradient(80% 60% at 50% 50%, rgba(10,18,48,.75), rgba(10,18,48,.92)); color: #fff; animation: chap 2.2s var(--ease) forwards; pointer-events: none; }
.chapter h3 { margin: 6px 0 0; font-family: var(--serif); font-size: clamp(20px, 6vw, 26px); letter-spacing: .08em; line-height: 1.5; } .ch-k { margin: 0; font-size: 11px; letter-spacing: .4em; color: var(--goldL); }
.chapter::after { content: ''; width: 80px; height: 1px; margin-top: 14px; background: var(--gold); }
@keyframes chap { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
/* テキストボックス */
.box { position: absolute; left: 10px; right: 10px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5; min-height: 148px; padding: 22px 18px 18px; border-radius: 18px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,253,248,.95), rgba(251,246,238,.97)); box-shadow: 0 0 0 1px rgba(216,184,120,.55), 0 14px 34px -10px rgba(10,18,48,.6); }
.box::before { content: ''; position: absolute; inset: 5px; border-radius: 14px; border: 1px solid rgba(216,184,120,.28); pointer-events: none; }
.nameplate { position: absolute; left: 16px; top: -14px; margin: 0; padding: 3px 16px; border-radius: 999px; background: var(--navy3); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .06em; box-shadow: 0 4px 10px rgba(10,18,48,.3); }
.nameplate:empty { display: none; } .nameplate.hero { background: var(--hc); } .nameplate.me { background: #6c7bb0; } .nameplate.mono { background: rgba(108,123,176,.75); }
.text { margin: 0; font-size: clamp(15.5px, 4.3vw, 17px); line-height: 1.85; letter-spacing: .02em; color: var(--ink); min-height: 3.7em; white-space: pre-wrap; }
.text.nar { color: #4a4558; } .text.mono { color: #5c6690; font-style: italic; }
.next-i { position: absolute; right: 16px; bottom: 10px; font-size: 12px; color: var(--goldD); animation: nexti 1s ease-in-out infinite; opacity: 0; } .box.ready .next-i { opacity: 1; }
@keyframes nexti { 50% { transform: translateY(3px); } }
/* 選択肢 */
.choices { position: absolute; left: 12px; right: 12px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 160px); z-index: 7; display: grid; gap: 10px; }
.choices::before { content: 'どうする？'; justify-self: center; padding: 2px 14px; border-radius: 999px; background: rgba(10,18,48,.6); color: #fff; font-size: 12px; letter-spacing: .2em; }
.co { position: relative; width: 100%; min-height: 56px; padding: 12px 16px; border: 0; border-radius: 16px; text-align: left; color: var(--ink); font-weight: 700; font-size: clamp(14.5px, 4vw, 15.5px); line-height: 1.55;
  background: rgba(255,253,248,.96); box-shadow: 0 0 0 1px rgba(10,18,48,.12), 0 8px 20px -8px rgba(10,18,48,.6); animation: coIn .4s var(--pop) both; transition: transform .1s; }
.co:nth-child(3) { animation-delay: .06s; } .co:nth-child(4) { animation-delay: .12s; } .co:nth-child(5) { animation-delay: .18s; }
.co:active { transform: scale(.98); } @media (hover: hover) { .co:hover { box-shadow: 0 0 0 2px var(--pink), 0 8px 20px -8px rgba(10,18,48,.6); } }
.co.key { background: linear-gradient(115deg, #fffaf0, #fdf3dc); box-shadow: 0 0 0 1.5px var(--gold), 0 0 22px rgba(241,225,182,.6), 0 8px 20px -8px rgba(10,18,48,.6); }
.co.key::after { content: '特別な選択'; position: absolute; right: 10px; top: -9px; padding: 0 8px; border-radius: 999px; background: var(--gold); color: #3a2a12; font-size: 10px; letter-spacing: .1em; }
.co.picked { box-shadow: 0 0 0 2px var(--pinkD), 0 0 26px rgba(200,190,250,.8); }
@keyframes coIn { from { opacity: 0; transform: translateY(12px); } }
/* 話の終わり */
.ep-end { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(10,18,48,.82); animation: scrIn .5s var(--ease); }
.ee-card { width: 100%; max-width: 400px; padding: 22px 18px; border-radius: 20px; text-align: center; color: #fff; background: linear-gradient(180deg, rgba(35,44,88,.95), rgba(10,18,48,.95)); box-shadow: 0 0 0 1px rgba(216,184,120,.6); }
.ee-k { margin: 0; font-size: 11px; letter-spacing: .4em; color: var(--goldL); } .ee-card h3 { margin: 6px 0 0; font-family: var(--serif); font-size: 20px; line-height: 1.5; }
.ee-teaser { margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.07); font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.88); }
.ee-teaser::before { content: '次回'; display: block; font-size: 10.5px; letter-spacing: .3em; color: var(--pink); }
.ee-saved { margin: 10px 0 0; font-size: 11px; color: rgba(255,255,255,.6); }

/* ================= 結末 ================= */
#s-end { min-height: inherit; padding: 16px 14px 28px; color: #fff; }
.en-bg { position: absolute; inset: 0; opacity: .5; } .en-bg svg { width: 100%; height: 100%; display: block; } .en-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,48,.3), var(--navy2) 60%); }
.en-card { position: relative; margin-top: 8px; padding: 22px 18px 18px; border-radius: 22px; text-align: center; color: var(--ink); background: linear-gradient(180deg, var(--paper), var(--ivory)); box-shadow: 0 0 0 1px var(--gold), 0 0 0 6px rgba(255,253,248,.08), 0 24px 50px -16px rgba(0,0,0,.85); animation: enIn 1s var(--pop) both; }
.en-card::before { content: ''; position: absolute; inset: 7px; border-radius: 16px; border: 1px solid rgba(216,184,120,.5); pointer-events: none; }
@keyframes enIn { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.en-k { margin: 0; font-size: 11px; letter-spacing: .32em; color: var(--goldD); }
.en-art { position: relative; height: 240px; margin: 4px -18px 0; overflow: hidden; background: radial-gradient(60% 70% at 50% 60%, var(--hc2), transparent 75%); }
.en-art svg { position: absolute; left: 50%; top: 0; width: 280px; height: 448px; transform: translateX(-50%); animation: artIn 1.2s var(--pop) .2s both; } @keyframes artIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } }
.en-type { margin: 6px 0 0; display: inline-block; padding: 2px 14px; border-radius: 999px; background: var(--hc); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.en-title { margin: 8px 0 0; font-family: var(--serif); font-size: clamp(19px, 5.6vw, 26px); line-height: 1.4; letter-spacing: .06em; outline: none; animation: logoIn 1.4s var(--ease) .5s both; }
.en-why { margin: 10px 0 0; font-size: 13.5px; line-height: 1.9; text-align: left; }
.en-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 12px 0 0; text-align: left; font-size: 12px; font-weight: 700; }
.en-stats div { display: grid; grid-template-columns: 2.6em 1fr; align-items: center; gap: 6px; } .bar-i { height: 7px; border-radius: 4px; background: rgba(45,42,58,.1); overflow: hidden; } .bar-i i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--pink), var(--pinkD)); }
.en-mem { margin-top: 14px; text-align: left; } .en-mem h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 15px; color: var(--goldD); letter-spacing: .1em; }
.en-mem ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .en-mem li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.7; } .en-mem li::before { content: '♡'; position: absolute; left: 0; color: var(--pinkD); }
.en-note { margin: 12px 0 0; font-size: 11px; color: var(--muted); }
.en-act { position: relative; margin-top: 14px; }
.share { position: relative; margin-top: 16px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }
.share h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 15px; color: var(--goldL); letter-spacing: .08em; }
.btn-x { width: 100%; min-height: 54px; border: 0; border-radius: 16px; background: #000; color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.ig-wrap { display: grid; place-items: center; min-height: 120px; border-radius: 12px; background: rgba(0,0,0,.25); } .ig-wrap img { width: 100%; max-width: 280px; height: auto; margin: 10px 0; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.ig-wait { margin: 0; padding: 20px; font-size: 13px; text-align: center; color: rgba(255,255,255,.8); }
#b-ig-share[hidden] + #b-ig-save { grid-column: 1 / -1; }

/* ================= アルバム ================= */
.album { display: grid; gap: 12px; margin: 12px 14px 0; }
.al-row h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 15px; color: #fff; } .al-row h3 small { margin-left: 6px; font-family: var(--sans); font-size: 11px; color: rgba(255,255,255,.6); font-weight: 400; }
.al-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.al { min-height: 92px; padding: 8px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; text-align: left; font-size: 11.5px; line-height: 1.5; }
.al b { display: block; font-family: var(--serif); font-size: 13.5px; line-height: 1.4; } .al small { display: block; color: var(--goldL); font-size: 10.5px; }
.al.got { background: linear-gradient(180deg, var(--c2, #fbe3dc), var(--paper)); color: var(--ink); border-color: var(--gold); } .al.got small { color: var(--goldD); }
.al.lock b { color: rgba(255,255,255,.5); }

/* ================= モーダル ================= */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(10,18,48,.7); animation: scrIn .25s ease; }
.m-card { width: 100%; max-width: 440px; max-height: 88svh; overflow: auto; padding: 18px 16px; border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--gold), 0 30px 60px -20px rgba(0,0,0,.8); }
.m-card.tall { display: flex; flex-direction: column; }
.m-card h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 18px; letter-spacing: .1em; text-align: center; }
.m-card .btn { color: var(--ink); background: var(--ivory2); border-color: rgba(45,42,58,.15); backdrop-filter: none; }
.m-rel { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--pink2); }
.m-rel p { margin: 0; font-size: 12.5px; font-weight: 700; } .m-rel .rel { display: grid; grid-template-columns: 3em 1fr; align-items: center; gap: 8px; font-size: 12px; }
.m-saved { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; }
.log { flex: 1; margin: 0; padding: 0 2px; list-style: none; overflow: auto; max-height: 60svh; display: grid; gap: 10px; align-content: start; }
.log li { font-size: 14px; line-height: 1.75; } .log b { display: block; font-size: 12px; color: var(--pinkD); } .log .lg-nar { color: #555; } .log .lg-mono { color: #5c6690; font-style: italic; }
.set { display: grid; gap: 4px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 4px 2px; border-bottom: 1px solid rgba(45,42,58,.08); font-size: 14px; font-weight: 700; }
.set-row.col { flex-direction: column; align-items: stretch; } .set-row input[type=range] { width: 52%; accent-color: var(--pinkD); }
.sw { position: relative; width: 56px; height: 32px; border: 0; border-radius: 999px; background: #d6d1dc; transition: background .2s; } .sw i { position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s; }
.sw[aria-checked="true"] { background: var(--pinkD); } .sw[aria-checked="true"] i { transform: translateX(24px); }
.seg { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } .seg button { min-height: 38px; padding: 0 10px; border: 1px solid rgba(45,42,58,.2); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; } .seg button[aria-checked="true"] { background: var(--navy3); color: #fff; border-color: var(--navy3); }
@media (max-width: 360px) { .set-row { flex-wrap: wrap; } .seg { justify-content: flex-start; } }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 80; max-width: calc(100% - 32px); margin: 0; padding: 10px 18px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13.5px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.4); transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.toast.show { animation: toast 2.4s var(--pop) both; } @keyframes toast { 10%, 85% { transform: translate(-50%, 0); opacity: 1; } }
.nojs { padding: 20px; color: #fff; text-align: center; }
/* 画面の高さが低いとき（横向き・小さい端末） */
@media (max-height: 640px) { .box { min-height: 128px; padding: 18px 14px 14px; } .text { font-size: 15px; line-height: 1.75; } .choices { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 138px); gap: 8px; } .co { min-height: 50px; padding: 9px 14px; } .sprite { height: 74%; } .t-lead br { display: none; } }
/* 動きを減らす */
html.rm *, html.rm *::before, html.rm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
html.rm .petals, html.rm .fx .rn, html.rm .fx .pt { display: none; }
html.rm .chapter { animation: none !important; opacity: 1; } html.rm .card-meet { animation: none !important; opacity: 1; }
/* 調整：タイトルは1行ずつ折り返さない／金のボタンは濃い文字／選択肢の間はテキスト欄をしまい、表情を見せる */
.t-h { font-size: clamp(28px, 8.8vw, 44px); white-space: nowrap; }
.t-btns .btn.gold { color: #3a2a12; }

#s-game.choosing .box { opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity .2s, transform .2s; }
#s-game.choosing .choices { bottom: max(16px, env(safe-area-inset-bottom)); }
#s-game.choosing .sprite { filter: none; }
@media (max-width: 360px) { .row2 .btn span { font-size: 13px; letter-spacing: 0; } }

/* 共有の小窓 */
.msh-preview { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--pink2); font-size: 13px; line-height: 1.75; white-space: pre-wrap; word-break: break-all; }
.m-card .btn-x { margin-top: 4px; }
.ee-card #ee-share { margin-top: 12px; }

/* ================= 彼氏版：顔を大きく見せる立ち絵と、距離感・アップ・イベントCGの演出 ================= */
/* 会話中は胸から上を大きく。関係が深まるほど少しだけ近づく（--near）、重要な場面ではアップ（--cam） */
.sprite { --near: 1; --cam: 1; width: min(160%, 720px); height: 100%; bottom: 0; transform: translateX(-50%) scale(calc(var(--near) * var(--cam))); transform-origin: 50% 30%; transition: transform .9s cubic-bezier(.25, .8, .3, 1), filter .3s, opacity .3s; }
.sprite.cam-close { --cam: 1.45; } .sprite.cam-far { --cam: .86; } .sprite.cam-cg { --cam: 1.75; }
.sprite.in { animation: spIn2 .6s var(--ease) both; } @keyframes spIn2 { from { opacity: 0; filter: blur(4px); } }
.sprite svg { animation: breathe 4.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: translateY(-2px) scaleY(1.004); } }
.sprite.talk svg { animation: talk .35s var(--ease), breathe 4.6s ease-in-out .35s infinite; }
.hero .blink { animation: blink 5.2s steps(1) infinite; } .h-toru .blink { animation-duration: 6.1s; } .h-aoi .blink { animation-duration: 4.4s; } .h-rei .blink { animation-duration: 7s; }
@keyframes blink { 0%, 95.5%, 100% { opacity: 0; } 96% { opacity: 1; } 97.6% { opacity: 0; } }
.hero .sway { animation: sway 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 30% 0; } @keyframes sway { to { transform: rotate(1.6deg); } }
.hero-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; }
/* 照れて目をそらすとき、少しだけ体も横を向く */
.sprite .look-away { transform: translateX(-6px) rotate(-1deg); transition: transform .5s; transform-box: fill-box; transform-origin: 50% 100%; }
/* イベントCG：背景をぼかし、光の筋と上下の帯で映画のように */
.stage.cg-on .bg svg { filter: blur(6px) brightness(.8) saturate(1.2); transform: scale(1.08); transition: filter .8s, transform 1.2s; }
.cgfx { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .8s; }
.stage.cg-on .cgfx { opacity: 1; }
.cgfx::before { content: ''; position: absolute; inset: -20%; background: conic-gradient(from 200deg at 70% 0%, transparent 0deg, rgba(255,246,220,.28) 8deg, transparent 16deg, rgba(226,219,255,.22) 26deg, transparent 34deg, rgba(255,246,220,.2) 46deg, transparent 56deg); animation: rays 9s ease-in-out infinite alternate; }
.cgfx::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 70px 0 -10px #05091c, inset 0 -70px 0 -10px #05091c, inset 0 0 120px rgba(5,9,28,.6); }
@keyframes rays { to { transform: rotate(6deg) translateX(-10px); } }
.cgfx i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,210,.7), transparent 70%); animation: bokeh 5s ease-in-out infinite alternate; }
.stage.cg-on .g-ep::before { content: 'EVENT  '; color: var(--goldL); letter-spacing: .2em; }
/* キャラクター選択・話の一覧・結末では、顔と雰囲気がひと目で伝わる大きさに */
.cc-art { height: 320px; }
.cc-art svg { left: 50%; top: 0; width: 100%; height: 100%; transform: translateX(-50%); }
.cc.pick .cc-art svg { animation: pickHop2 .6s var(--pop); } @keyframes pickHop2 { 40% { transform: translateX(-50%) translateY(-8px) scale(1.03); } }
.cc-type { display: inline-block; margin: 4px 0 0; padding: 2px 10px; border-radius: 999px; background: var(--navy3); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; }
.cc-melo { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: linear-gradient(115deg, rgba(216,184,120,.16), rgba(207,195,239,.25)); font-size: 12.5px; font-weight: 700; line-height: 1.7; } .cc-melo b { display: block; font-size: 10.5px; color: var(--goldD); letter-spacing: .14em; }
.eps-hero { height: 240px; } .eps-hero svg { width: 100%; height: 100%; }
.en-art { height: 300px; } .en-art svg { width: 100%; height: 100%; }
html.rm .sprite { transition: none; } html.rm .hero .blink { animation: none; opacity: 0; }
@media (max-height: 640px) { .sprite { height: 100%; } .cc-art { height: 260px; } }
/* 顔に寄っても輪郭線が太くなりすぎないよう、細い線は画面上の太さで描く（目元の太い線は拡大に合わせる） */
.sprite svg [stroke-width="2.4"], .sprite svg [stroke-width="2.2"], .sprite svg [stroke-width="2"], .sprite svg [stroke-width="1.8"], .sprite svg [stroke-width="1.6"], .sprite svg [stroke-width="1.5"], .sprite svg [stroke-width="1.4"] { vector-effect: non-scaling-stroke; }
.sprite.cam-close svg [stroke-width="2.4"], .sprite.cam-cg svg [stroke-width="2.4"], .sprite.cam-close svg [stroke-width="2.2"], .sprite.cam-cg svg [stroke-width="2.2"] { stroke-width: 3px; }
/* 出会いの名前カードは、顔にかからない胸元の高さに */
.card-meet { top: 56%; }

/* シェアされたリンクから来た人へのお知らせ */
.t-from { margin: 14px auto 0; max-width: 360px; padding: 10px 14px; border-radius: 14px; background: rgba(255,253,248,.95); color: var(--ink); font-size: 13.5px; font-weight: 700; line-height: 1.6; box-shadow: 0 0 0 1.5px var(--gold), 0 10px 24px -10px rgba(0,0,0,.6); animation: logoIn 1s var(--ease) 1s both; }
.t-from b { display: block; font-size: 10.5px; letter-spacing: .2em; color: var(--goldD); } .t-from small { display: block; margin-top: 2px; font-size: 12px; color: var(--pinkD); }
a.btn-x { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* キャラクター選択：PC でも選びやすく（顔の一覧・矢印・押せる点） */
.sel-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 14px 0; }
.st { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 76px; padding: 6px 2px 4px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(255,255,255,.06); color: #fff; transition: transform .15s, background .2s, border-color .2s; }
.st-face { display: block; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #fff, var(--c2)); box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.st-face svg { display: block; width: 100%; height: 100%; }
.st-name { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.st[aria-selected="true"] { background: rgba(255,255,255,.16); border-color: var(--gold); transform: translateY(-2px); } .st[aria-selected="true"] .st-face { box-shadow: 0 0 0 2.5px var(--c), 0 0 0 5px rgba(255,255,255,.55); }
@media (hover: hover) { .st:hover { background: rgba(255,255,255,.14); } }
.sel-stage { position: relative; }
.sel-arrow { position: absolute; top: 210px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(10,18,48,.72); color: #fff; font-size: 26px; line-height: 1; box-shadow: 0 6px 16px rgba(0,0,0,.4); transition: opacity .2s, transform .15s; }
.sel-arrow.prev { left: 4px; } .sel-arrow.next { right: 4px; } .sel-arrow:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) { .sel-arrow:hover { transform: scale(1.08); background: var(--navy3); } }
.sel-dots button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; } .sel-dots { gap: 0; }
@media (max-width: 360px) { .st-face { width: 42px; height: 42px; } .st-name { font-size: 11px; } }
/* 顔の一覧は上に固定して、カードを下まで読んでいても、すぐ別の人に移れるように */
.sel-tabs { position: sticky; top: calc(max(12px, env(safe-area-inset-top)) + 54px); z-index: 4; margin-top: 6px; padding: 6px 0; background: linear-gradient(180deg, rgba(10,18,48,.92), rgba(10,18,48,.78)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 0 0 16px 16px; }
/* 枠の外へのはみ出しは隠しつつ、上部の固定（sticky）が効くように */
.frame { overflow: clip; }