:root{--blue:#1e4fa3;--blue-d:#123672;--orange:#ff8f00;--ink:#1d1d1d;--sub:#666;--red:#d32f2f;--plus:#1565c0;--line:#dfe6f3}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#10244d radial-gradient(circle at 50% 0,#2a5bb8,#10244d 70%);color:var(--ink);font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;font-size:15px}
button{font:inherit;cursor:pointer;border:none;border-radius:10px;padding:9px 14px;background:linear-gradient(#3f7fe0,#1e4fa3);color:#fff;font-weight:bold;box-shadow:0 3px 0 #0d2a5c}
button:active{transform:translateY(2px);box-shadow:0 1px 0 #0d2a5c}
button:disabled{background:#aaa;box-shadow:0 3px 0 #777;cursor:default}
button.sub{background:#fff;color:var(--blue);border:2px solid var(--blue);box-shadow:0 3px 0 #9fb4db}
button.warn{background:linear-gradient(#ef5350,#c62828);box-shadow:0 3px 0 #7f1414}
select,input{font:inherit;padding:8px;border:2px solid #c9d6ee;border-radius:8px;background:#fff;width:100%}
.hidden{display:none!important}
.plus{color:var(--plus)}.minus{color:var(--red)}.muted{color:var(--sub);font-size:13px}
#app{max-width:860px;margin:0 auto;min-height:100%}

/* ---- タイトル ---- */
.title-screen{padding:30px 14px 40px;background:linear-gradient(#7ec8ff,#bfe6ff 55%,#7bc96f 55%,#4f9e45);min-height:100vh}
.logo{text-align:center;margin:10px 0 26px;transform:rotate(-3deg)}
.logo .l1{font-size:58px;font-weight:900;color:#ffe14d;letter-spacing:.06em;-webkit-text-stroke:3px #c62828;text-shadow:4px 5px 0 #123672}
.logo .l2{display:inline-block;margin-top:4px;font-size:26px;font-weight:900;color:#fff;background:var(--blue);padding:4px 22px;border-radius:30px;border:3px solid #fff;box-shadow:3px 4px 0 #123672}
.tcard{background:#fff;border:4px solid var(--blue);border-radius:18px;padding:16px;max-width:560px;margin:0 auto;box-shadow:0 8px 0 #123672}
.tc-h{font-weight:900;color:#fff;background:var(--orange);display:inline-block;padding:3px 16px;border-radius:20px;margin:-30px 0 10px;border:3px solid #fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 label{display:block;font-size:12px;font-weight:bold;color:var(--blue);margin-bottom:3px}
.start{width:100%;margin-top:14px;padding:14px;font-size:20px;background:linear-gradient(#ffb300,#ef6c00);box-shadow:0 5px 0 #8d3b00}
.start.cont{background:linear-gradient(#3f7fe0,#1e4fa3);box-shadow:0 5px 0 #0d2a5c;font-size:17px}
.credit{text-align:center;color:#fff;font-size:12px;text-shadow:0 1px 2px #000;margin-top:18px}

/* ---- ゲーム画面 ---- */
.screen{display:flex;flex-direction:column;min-height:100vh;background:#e9eef8}
.topbar{display:flex;align-items:stretch;gap:8px;padding:8px;background:linear-gradient(#2f66c9,#1e4fa3);border-bottom:4px solid #0d2a5c}
.cal{width:86px;background:#fff;border-radius:10px;text-align:center;overflow:hidden;box-shadow:0 3px 0 #0d2a5c;flex:none}
.cal .yn{background:var(--red);color:#fff;font-size:12px;font-weight:bold;padding:2px 0}
.cal .md{font-size:30px;font-weight:900;line-height:1.05;color:#222}.cal .md small{font-size:13px}
.cal .wk{display:flex;justify-content:center;gap:3px;margin:2px 0}.cal .wk i{width:12px;height:6px;border-radius:3px;background:#ddd}.cal .wk i.past{background:#9bb3e0}.cal .wk i.on{background:var(--orange)}
.cal .wl{font-size:12px;font-weight:bold;color:var(--blue);padding-bottom:3px}
.stats{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.st{display:flex;align-items:center;gap:6px;background:#0d2a5c99;border-radius:20px;padding:3px 10px 3px 3px;color:#fff}
.st .lb{background:#ffd54f;color:#5d4000;font-size:11px;font-weight:bold;border-radius:14px;padding:2px 8px;white-space:nowrap}
.st .lb.debt{background:#ef5350;color:#fff}
.st .val{font-weight:900;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.st .val.low{color:#ffab91}
.yaruki{width:104px;flex:none;background:#fff;border-radius:10px;text-align:center;padding:3px 4px;box-shadow:0 3px 0 #0d2a5c}
.yaruki .lb{font-size:11px;font-weight:bold;color:var(--blue)}
.yaruki .arrow{font-size:26px;line-height:1;font-weight:900}
.yaruki .yl{font-size:13px;font-weight:900}
.yaruki .gauge{height:6px;background:#eee;border-radius:3px;overflow:hidden;margin-top:2px}.yaruki .gauge i{display:block;height:100%}
.ya5 .arrow,.ya5 .yl{color:#e53935}.ya5 .gauge i{background:#e53935}
.ya4 .arrow,.ya4 .yl{color:#fb8c00}.ya4 .gauge i{background:#fb8c00}
.ya3 .arrow,.ya3 .yl{color:#c0a000}.ya3 .gauge i{background:#fdd835}
.ya2 .arrow,.ya2 .yl{color:#1e88e5}.ya2 .gauge i{background:#1e88e5}
.ya1 .arrow,.ya1 .yl{color:#6a1b9a}.ya1 .gauge i{background:#6a1b9a}

.stage{position:relative;flex:1;min-height:280px;max-height:430px;overflow:hidden;border-bottom:4px solid #0d2a5c}
.stage .deco{position:absolute;inset:0}
.sc-home{background:linear-gradient(#f7e9cf 0 70%,#b98a5a 70% 72%,#d7a86e 72%)}
.sc-home .deco::before{content:"";position:absolute;left:8%;top:12%;width:120px;height:90px;background:linear-gradient(#9fd8ff,#dff2ff);border:8px solid #fff;box-shadow:0 0 0 3px #b98a5a}
.sc-home .deco::after{content:"🏆";position:absolute;right:9%;top:34%;font-size:40px;filter:drop-shadow(0 3px 0 #0003)}
.sc-tv{background:linear-gradient(#e8dcc6 0 70%,#a0764a 70% 72%,#c79a64 72%)}
.sc-tv .deco::before{content:"";position:absolute;right:6%;top:14%;width:170px;height:110px;border-radius:6px;background:linear-gradient(#8fd06f 55%,#5ea34a 55%);border:10px solid #222;box-shadow:0 6px 0 #0004}
.sc-tv .deco::after{content:"📺 LIVE";position:absolute;right:calc(6% + 14px);top:calc(14% + 10px);font-size:12px;font-weight:bold;color:#fff;background:#d32f2f;padding:1px 6px;border-radius:4px}
.sc-track{background:linear-gradient(#6ec6ff 0 42%,#d9d9d9 42% 44%,#fff 44% 46%,#43a047 46%,#2e7d32)}
.sc-track .deco::before{content:"";position:absolute;left:0;right:0;top:20%;height:22%;background:repeating-linear-gradient(90deg,#b0bec5 0 40px,#90a4ae 40px 44px);border-top:6px solid #455a64}
.sc-track .deco::after{content:"";position:absolute;left:0;right:0;top:64%;height:5px;background:#fff;box-shadow:0 30px 0 #ffffff88}
.sc-farm{background:radial-gradient(ellipse 70% 40% at 20% 75%,#66bb6a 60%,transparent 61%),radial-gradient(ellipse 80% 45% at 85% 80%,#4caf50 60%,transparent 61%),linear-gradient(#7fd0ff 0 55%,#81c784 55%)}
.sc-farm .deco::before{content:"🐎　　🐎";position:absolute;left:10%;top:48%;font-size:34px}
.sc-farm .deco::after{content:"";position:absolute;left:0;right:0;bottom:22%;height:26px;background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 60px),linear-gradient(transparent 4px,#fff 4px 8px,transparent 8px 16px,#fff 16px 20px,transparent 20px)}
.sc-outdoor{background:linear-gradient(#8fd3ff 0 60%,#9ccc65 60%)}
.sc-outdoor .deco::before{content:"☀";position:absolute;right:10%;top:8%;font-size:52px;color:#ffca28}
.sc-town{background:linear-gradient(#90caf9,#e3f2fd)}
.sc-night{background:linear-gradient(#1a1040,#4a1d6b)}
.sc-night .deco::before{content:"✦ BAR ✦";position:absolute;left:8%;top:18%;font-weight:900;font-size:28px;color:#ff80ab;text-shadow:0 0 12px #ff4081}
.sc-night .deco::after{content:"🍾🥂";position:absolute;right:10%;top:40%;font-size:40px}

.chara{position:absolute;left:50%;bottom:-6px;width:190px;transform:translateX(-50%)}
.chara.talk{animation:bob .5s ease-in-out 2}
@keyframes bob{50%{transform:translateX(-50%) translateY(-8px)}}
.ava{width:100%;display:block;filter:drop-shadow(0 4px 0 #0003)}
.ticker{position:absolute;left:0;right:0;top:0;background:#000a;color:#fff;font-size:12px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner{position:absolute;left:50%;top:16%;z-index:3;transform:translate(-50%,-50%) rotate(-6deg);font-size:52px;font-weight:900;color:#fff;-webkit-text-stroke:3px #123672;text-shadow:4px 4px 0 #123672;white-space:nowrap;animation:stamp .35s cubic-bezier(.2,1.6,.4,1)}
.banner.win{color:#ffe14d;-webkit-text-stroke:3px #c62828;text-shadow:4px 4px 0 #7f1414}
@keyframes stamp{from{transform:translate(-50%,-50%) rotate(-6deg) scale(2.4);opacity:0}}

.msgwin{position:relative;margin:-40px 10px 0;z-index:4;background:#fffffff5;border:4px solid var(--blue);border-radius:16px;padding:22px 16px 14px;min-height:120px;box-shadow:0 5px 0 #0d2a5c,inset 0 0 0 3px #fff,inset 0 0 0 5px #c9d6ee;font-size:16px;line-height:1.7}
.msgwin.active:not(:has(.choices)){cursor:pointer}
.msgwin .msg{max-height:44vh;overflow:auto}
.nametag{position:absolute;top:-16px;left:14px;background:linear-gradient(#ffb300,#ef6c00);color:#fff;font-weight:900;padding:2px 16px;border-radius:14px;border:3px solid #fff;box-shadow:0 2px 0 #8d3b00;font-size:14px}
.qt{color:var(--blue);font-weight:bold;font-size:14px}
.nx{position:absolute;right:14px;bottom:4px;color:var(--orange);animation:blink .8s infinite}
@keyframes blink{50%{opacity:0}}
.choices{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.choices button{background:linear-gradient(#fff,#e3ecff);color:var(--blue-d);border:3px solid var(--blue);box-shadow:0 3px 0 #0d2a5c;text-align:left;padding:10px 16px}
.choices button::before{content:"▶ ";color:var(--orange)}
.mt{display:inline-block;margin-left:6px;font-size:13px;font-weight:900;padding:0 8px;border-radius:10px;color:#fff}
.mt.up{background:#e53935}.mt.down{background:#1e88e5}
.gr{display:inline-block;font-size:11px;font-weight:900;color:#fff;background:#c62828;border-radius:4px;padding:0 5px}
.bigname{font-size:26px;font-weight:900;text-align:center;color:var(--blue-d);margin:6px 0;text-shadow:2px 2px 0 #ffe082}

.cmds{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;padding:14px 10px 6px}
.cmds.lock{opacity:.45;pointer-events:none}
.cmd{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:78px;font-size:18px;border-radius:14px;border:3px solid #fff;line-height:1.2}
.cmd .ic{font-size:24px}.cmd small{font-size:11px;font-weight:normal;opacity:.9}
.cmd.track{background:linear-gradient(#66bb6a,#2e7d32);box-shadow:0 5px 0 #1b4d1e}
.cmd.track.hot{background:linear-gradient(#ffd54f,#ff8f00);color:#4a2500;box-shadow:0 5px 0 #8d3b00;animation:pulse 1s infinite}
@keyframes pulse{50%{filter:brightness(1.15);transform:scale(1.03)}}
.cmd.next{background:linear-gradient(#42a5f5,#1565c0);box-shadow:0 5px 0 #0d2a5c}
.cmd.month{background:linear-gradient(#ab47bc,#6a1b9a);box-shadow:0 5px 0 #3c0f58}
.menu{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;padding:8px 10px 20px}
.menu button{position:relative;background:#fff;color:var(--blue-d);border:2px solid #b9c9ea;box-shadow:0 3px 0 #9fb4db;padding:6px 2px;font-size:12px;display:flex;flex-direction:column;align-items:center}
.menu button span{font-size:20px}
.dot{position:absolute;top:3px;right:6px;width:10px;height:10px;border-radius:50%;background:var(--red);border:2px solid #fff}
@media(max-width:620px){.menu{grid-template-columns:repeat(5,1fr)}.stage{min-height:230px}.chara{width:160px}.banner{font-size:40px}.logo .l1{font-size:44px}.grid2{grid-template-columns:1fr}.st .val{font-size:15px}}

/* ---- パネル ---- */
.panel-wrap{position:fixed;inset:0;z-index:10;background:#0008;display:flex;justify-content:center;align-items:flex-start;padding:16px 10px;overflow:auto}
.panel{background:#fff;width:100%;max-width:820px;border:4px solid var(--blue);border-radius:16px;box-shadow:0 6px 0 #0d2a5c;animation:pop .18s ease-out}
@keyframes pop{from{transform:scale(.95);opacity:.3}}
.ph{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#2f66c9,#1e4fa3);color:#fff;padding:8px 12px;border-radius:10px 10px 0 0;font-size:18px}
.ph .close{padding:5px 12px;font-size:13px;background:#fff;color:var(--blue);box-shadow:0 2px 0 #0d2a5c}
.pb{padding:12px;font-size:14px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 4px;border-bottom:2px dotted var(--line)}
.row.click{cursor:pointer}.row.click:hover{background:#f3f7ff}
.nm{font-weight:900;font-size:16px}
.meta{font-size:12px;color:var(--sub)}.r{text-align:right}
.tag{display:inline-block;font-size:11px;font-weight:bold;color:#fff;padding:1px 8px;border-radius:10px;margin-right:6px;vertical-align:2px}
.sex{display:inline-block;font-size:11px;font-weight:bold;color:#fff;padding:0 6px;border-radius:4px}.sex.m{background:#1e88e5}.sex.f{background:#e91e63}
.stars{color:#f9a825;letter-spacing:-1px}
.hint{font-size:12px;background:#fff8e1;border-left:4px solid var(--orange);padding:3px 8px;margin-top:4px}
.tabs{display:flex;gap:6px;margin-bottom:8px}.tabs button{background:#e3ecff;color:var(--blue-d);box-shadow:0 3px 0 #9fb4db}.tabs button.on{color:#fff}
.filters{display:flex;gap:6px;margin-bottom:6px}.filters select{width:auto}
.box{border:2px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:6px 0}.kv b{font-weight:bold;color:var(--blue);font-size:13px}
.tbl{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
.tbl th,.tbl td{padding:5px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{background:#eef3fc;color:var(--blue);font-weight:bold}.tbl td.r,.tbl th.r{text-align:right}.tbl tr.sum td{font-weight:900;border-top:2px solid var(--blue)}
.rank1{color:var(--red);font-weight:900}.rank23{color:var(--plus);font-weight:900}
.reveal{background:linear-gradient(135deg,#fff8e1,#fff);border:3px solid #f9a825;border-radius:12px;padding:10px;margin-top:8px}
.news div{padding:5px 0;border-bottom:1px dashed var(--line)}.news .d{color:var(--sub);font-size:11px;margin-right:6px}
.mini{width:64px;flex:none}
.win{color:var(--red)}

#modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:30;padding:16px}
.modal-card{background:#fff;border:4px solid var(--blue);border-radius:16px;max-width:480px;width:100%;padding:16px;box-shadow:0 6px 0 #0d2a5c;animation:pop .18s ease-out}
.modal-card h2{margin:0 0 8px;font-size:18px;color:var(--blue)}
#m-body{line-height:1.7}
#m-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:flex-end}

/* ---- カタログ・馬ページ ---- */
.thumb{width:84px;flex:none;background:linear-gradient(#e3f2fd,#c8e6c9);border-radius:8px}
.horse-art{width:100%;display:block}
.arrow-r{font-size:28px;color:#9fb4db;font-weight:bold}
.hero{display:grid;grid-template-columns:minmax(160px,260px) 1fr;gap:12px;align-items:center;margin:8px 0}
.hero svg.horse-art{display:block;width:100%;background:linear-gradient(#bbdefb 72%,#a5d6a7 72%);border-radius:12px;border:3px solid #c9d6ee}
@media(max-width:620px){.hero{grid-template-columns:1fr}}
.sec{border:2px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0;line-height:1.7}
.sec h4{margin:0 0 4px;color:var(--blue);font-size:15px}
.sec.apply{border-color:var(--orange);background:#fff8ef}
.applyform label{display:block;margin:6px 0}.applyform select{width:auto}
.chk input{width:auto;margin-right:6px;transform:scale(1.3)}
.sysbox{border-left:6px solid;background:#f7f9fe;border-radius:8px;padding:8px 10px;margin:6px 0 10px;font-size:13px;line-height:1.6}
.nukki{display:flex;gap:10px;align-items:flex-start}
.nk-grade{display:inline-block;font-size:22px;font-weight:900;color:#fff;padding:2px 14px;border-radius:10px;margin:2px 0 6px;box-shadow:0 3px 0 #0003}
.gS{background:linear-gradient(#ffd54f,#ff6f00)}.gA{background:linear-gradient(#ef5350,#b71c1c)}.gB{background:linear-gradient(#42a5f5,#1565c0)}.gC{background:linear-gradient(#9ccc65,#558b2f)}.gD{background:linear-gradient(#bdbdbd,#757575)}
.nk-chip,.ap-chip{display:inline-block;font-size:11px;font-weight:bold;color:#fff;padding:1px 7px;border-radius:8px;margin-left:4px;vertical-align:2px}
.ap-chip{background:var(--orange)}
.bar{display:grid;grid-template-columns:78px 1fr 30px;gap:6px;align-items:center;font-size:12px;margin:3px 0}
.bar div{height:10px;background:#eee;border-radius:5px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#42a5f5,#e53935)}
.bar b{text-align:right}
.ftype{display:inline-block;font-size:11px;font-weight:bold;padding:1px 8px;border-radius:8px;color:#fff}
.ftype.good{background:#43a047}.ftype.quirky{background:#fb8c00}.ftype.bad{background:#757575}
/* ---- アルバム ---- */
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.aitem{border:2px solid var(--line);border-radius:12px;padding:8px;text-align:center;background:#fffdf5}
.aitem .meta{margin:6px 0}
.photo svg{width:100%;height:auto;display:block;border:6px solid #fff;box-shadow:0 3px 8px #0004;transform:rotate(-1deg);margin:6px auto}
.msgwin .photo{max-width:420px;margin:6px auto}
.shield{margin:6px auto;width:150px;height:180px;background:linear-gradient(#8d6e63,#4e342e);border-radius:14px 14px 70px 70px;border:5px solid #ffd54f;color:#ffe082;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 4px 0 #3e2723}
.sh-g{font-size:22px;font-weight:900;color:#ffd54f}.sh-r{font-size:13px;font-weight:bold;padding:0 8px}.sh-n{font-size:15px;font-weight:900;color:#fff}.sh-d{font-size:10px}

/* ---- v4 ---- */
.st.goal .lb{background:#ff7043;color:#fff}.st.goal .val{font-size:14px}
.achv{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.ach{border:2px solid var(--line);border-radius:10px;padding:8px;background:#f5f5f5;opacity:.7}
.ach.on{background:linear-gradient(135deg,#fff8e1,#fff);border-color:#f9a825;opacity:1}
.ach .an{font-weight:900;color:var(--blue-d)}
.btns{display:flex;gap:6px}
.box button{margin:4px 4px 4px 0}
.filebtn{display:inline-block;margin:4px 0;padding:9px 14px;border:2px solid var(--blue);border-radius:10px;color:var(--blue);font-weight:bold;cursor:pointer;background:#fff}
.filebtn input{display:none}
.tcard .filebtn{display:block;text-align:center;margin-top:10px}
.start.slot{font-size:14px;padding:10px;background:linear-gradient(#78909c,#455a64);box-shadow:0 4px 0 #263238}
.party{margin:6px auto;width:170px;height:180px;background:linear-gradient(135deg,#4a148c,#880e4f);border-radius:14px;border:5px solid #ffd54f;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:36px}
.party .meta{color:#f8bbd0}
.reveal.small{padding:4px 8px;font-size:13px;margin-top:4px}

/* ---- 生成画像(背景・キャラクター) ---- */
.stage.has-bg{background-size:cover;background-position:center}
.stage.has-bg .deco{display:none}
.stage .chara{width:auto;height:92%;bottom:0}
.chara .cimg{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center}
.stage .chara .cimg img{height:100%;width:auto;display:block;filter:drop-shadow(0 6px 6px #0006)}
.cimg.f-sad img{filter:saturate(.5) brightness(.92) drop-shadow(0 6px 6px #0006)!important}
.cimg.f-smug img{transform:rotate(-3deg)}
.cimg .fx{position:absolute;top:4%;right:-6%;font-size:40px;animation:fxpop .6s ease-out}
@keyframes fxpop{from{transform:scale(0) rotate(-30deg)}}
.chara.talk .cimg.f-happy{animation:hop .45s ease-in-out 2}
@keyframes hop{50%{transform:translateY(-14px)}}
.mini .cimg{height:78px}.mini .cimg img{height:78px;width:auto;display:block;margin:0 auto}
.title-screen{background-size:cover!important;background-position:center!important}
.title-screen .credit{text-shadow:0 1px 3px #000,0 0 6px #000}
.menu{grid-template-columns:repeat(11,1fr)!important}
@media(max-width:620px){.menu{grid-template-columns:repeat(6,1fr)!important}}
.stage.has-bg .banner{left:26%;top:34%}
@media(max-width:620px){.stage.has-bg .banner{left:30%;top:30%;font-size:34px}}

.mute{flex:none;align-self:center;background:#fff;color:#1e4fa3;border-radius:50%;width:40px;height:40px;padding:0;font-size:18px;box-shadow:0 3px 0 #0d2a5c}
.panel .pb>.box:first-child{border-color:var(--orange);background:#fff8ef}

/* ---- v6: 実況・応援馬券・ウマッター・殿堂・対決 ---- */
.jikkyo{margin-top:6px;border-left:4px solid var(--orange);padding-left:8px}
.jikkyo span{display:block;opacity:0;animation:jk .4s ease-out forwards}
.jikkyo span:nth-child(1){animation-delay:.1s}.jikkyo span:nth-child(2){animation-delay:1.1s}.jikkyo span:nth-child(3){animation-delay:2.1s;font-weight:bold}
@keyframes jk{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.racebtn{margin-top:6px;background:linear-gradient(#ffd54f,#ff8f00);color:#4a2500;box-shadow:0 3px 0 #8d3b00}
.betrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.betrow button{padding:6px 10px;font-size:13px}
.mark{color:var(--red);font-size:16px}
.sns .tw{border-bottom:1px solid var(--line);padding:8px 4px}.tw-h{font-size:13px}.tw-h b{color:#1d9bf0}
.vs{display:flex;align-items:center;justify-content:center;gap:14px;text-align:center;margin:6px 0}
.vs>div{background:#f3f7ff;border-radius:10px;padding:6px 14px}.vs .vsx{background:none;font-size:26px;font-weight:900;color:var(--red)}
.hof-rank{width:34px;text-align:center;font-weight:900;font-size:18px;color:var(--blue)}
.hofbox{margin-top:12px}.hofbox .hofin{max-height:50vh;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.hofbox .hofin::-webkit-scrollbar{display:none} /* 見出しはスクロールさせない(中身だけ動く)ので、下まで読んでも、そのまま閉じられる */.hofbox summary{cursor:pointer;font-weight:bold;color:var(--blue)}
.menu{grid-template-columns:repeat(13,1fr)!important}.menu button{font-size:11px}
@media(max-width:620px){.menu{grid-template-columns:repeat(7,1fr)!important}}

.st .lb.fam{background:#f48fb1;color:#fff}.st .val.heart{color:#ff8a80;font-size:14px}
.visit{max-width:260px;margin:6px auto;background:linear-gradient(#bbdefb 60%,#a5d6a7 60%);border-radius:10px;border:5px solid #fff;box-shadow:0 3px 8px #0004}
/* ---- スマホ幅で横にはみ出さないように ---- */
html,body{overflow-x:hidden}
.menu{grid-template-columns:repeat(13,minmax(0,1fr))!important}
.menu button{min-width:0;overflow:hidden;white-space:nowrap}
.cmds{grid-template-columns:1.2fr 1fr 1fr}
.cmds>*{min-width:0}
@media(max-width:620px){
  .topbar{gap:5px;padding:6px}
  .cal{width:60px}.cal .md{font-size:24px}.cal .yn,.cal .wl{font-size:10px}
  .yaruki{width:66px;padding:2px}.yaruki .arrow{font-size:18px}.yaruki .yl{font-size:11px}.yaruki .lb{font-size:10px}
  .mute{width:30px;height:30px;font-size:13px}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:3px;min-width:0}
  .st{padding:2px 6px 2px 2px;gap:4px;min-width:0}.st .lb{font-size:9.5px;padding:1px 5px}.st .val{font-size:12px}
  .st.goal{grid-column:1/-1}
  .cmds{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px 8px 4px}
  .cmd{font-size:15px;min-height:64px}.cmd small{font-size:9.5px}
  .menu{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:4px;padding:6px 8px 16px}
  .menu button{font-size:9.5px;padding:4px 0}.menu button span{font-size:17px}
  .msgwin{margin:-36px 6px 0;padding:20px 12px 12px;font-size:15px}
}

.fixed-note{grid-column:1/-1;background:#fff8e1;border:2px dashed #ffb300;border-radius:10px;padding:8px;text-align:center;font-weight:bold;color:#6d4c00}
.fixed-note span{font-size:12px;font-weight:normal;color:#8d6e63}
.deshita{text-align:center;font-weight:bold;color:var(--blue-d);margin-top:-4px}
.endhorse{display:flex;gap:10px;align-items:center;margin:8px 0}
/* ---- レースアニメーション ---- */
.race-anim{position:relative;height:190px;margin:8px 0;border-radius:10px;overflow:hidden;background:repeating-linear-gradient(90deg,#43a047 0 40px,#4caf50 40px 80px);border:3px solid #fff;box-shadow:inset 0 0 0 2px #2e7d32}
.race-anim::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:#fff}
.race-anim::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:#fff}
.goal-line{position:absolute;right:28px;top:0;bottom:0;width:4px;background:repeating-linear-gradient(#fff 0 6px,#d32f2f 6px 12px)}
.rh{position:absolute;left:4px;transform:translateY(-50%);animation:run var(--d) forwards;display:flex;align-items:center;gap:4px;white-space:nowrap}
.rh i{display:block;width:16px;height:9px;border-radius:5px 7px 4px 4px;background:var(--c);border:1px solid #0006}
.rh.me{z-index:2}.rh.me i{width:22px;height:12px;border:2px solid #fff;box-shadow:0 0 6px #ffeb3b}
.rh b{position:absolute;left:-6px;top:-15px;font-size:10px;background:#fffd;color:#123672;border-radius:6px;padding:0 5px}
.rh.e1{animation-timing-function:cubic-bezier(.2,.6,.5,1)}.rh.e2{animation-timing-function:cubic-bezier(.4,.2,.6,1)}.rh.e3{animation-timing-function:linear}
.rh.late{animation-timing-function:cubic-bezier(.7,0,.6,1)}
.rh.stop{animation:runstop 3s forwards}
@keyframes run{from{left:4px}to{left:calc(100% - 44px)}}
@keyframes runstop{from{left:4px}to{left:45%}}
.rh.me.stop i{background:#999}

.skip{position:absolute;right:34px;bottom:6px;padding:4px 10px;font-size:12px;background:#fff;color:var(--blue);border:2px solid var(--blue);box-shadow:0 2px 0 #9fb4db}
details.help{border:2px solid var(--line);border-radius:10px;margin:6px 0;padding:6px 10px;line-height:1.7}
details.help summary{cursor:pointer;font-weight:bold;color:var(--blue)}
.chart{width:100%;height:auto;background:#fafcff;border-radius:8px;margin-top:6px}
.lg{display:inline-block;font-size:11px;margin-left:8px}.lg::before{content:"";display:inline-block;width:14px;height:3px;background:var(--c);vertical-align:middle;margin-right:4px}
.menu{grid-template-columns:repeat(15,minmax(0,1fr))!important}
@media(max-width:620px){.menu{grid-template-columns:repeat(8,minmax(0,1fr))!important}}

.rcard{margin:6px auto;width:170px;background:linear-gradient(160deg,#fff,#f3f3f3);border:5px solid var(--c);border-radius:12px;padding:6px;box-shadow:0 4px 0 #0003;text-align:center}
.rc-t{font-size:11px;font-weight:bold;color:#fff;background:var(--c);border-radius:6px;display:inline-block;padding:0 8px}
.rc-n{font-weight:900;font-size:16px;color:#222;margin-top:4px}.rc-s{font-weight:bold}.rc-r,.rc-m{font-size:11px;color:#666}
.mvp{background:linear-gradient(90deg,#fff8e1,#fff);border:2px solid #f9a825;border-radius:10px;padding:6px 10px;margin-bottom:6px}
.title-help{background:#fffe;margin:12px auto 0;max-width:560px}

/* ---- 季節・動き・お気に入り ---- */
.season{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.season span{position:absolute;top:-8%;font-size:18px;animation:fall linear infinite;opacity:.85}
.season.snow span{color:#fff;text-shadow:0 0 4px #9cf;font-size:16px}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(40px,340px) rotate(300deg)}}
.season.sun{background:radial-gradient(circle at 90% 5%,#fff9c4cc,transparent 40%)}
.cal.flip{animation:flip .45s ease-out}
@keyframes flip{0%{transform:perspective(300px) rotateX(-80deg)}100%{transform:none}}
.stage .chara:not(.talk) .cimg{animation:breath 3.2s ease-in-out infinite;transform-origin:bottom center}
@keyframes breath{50%{transform:scaleY(1.015)}}
.fav{cursor:pointer;color:#f9a825;font-size:18px;margin-right:4px}.fav.on{color:#ff8f00}
.favbtn{padding:6px 10px;font-size:13px}
.postrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.postrow button{font-size:12px;padding:6px 10px;text-align:left}

.warn-chip{margin-left:4px;font-size:10px;font-weight:bold;background:#d32f2f;color:#fff;border-radius:8px;padding:1px 6px;animation:blink 1s infinite;white-space:nowrap}
.mini-btn{padding:2px 8px;font-size:11px}
.snd{display:flex;flex-direction:column;gap:4px;align-self:center}.snd .mute.off{opacity:.45}
@media(max-width:620px){.snd{gap:2px}}
.sec.boshi{border-color:#8e24aa;background:#f8f0fb}
.tipbox{background:#fffde7;border-color:#fbc02d}
.payslip-h{font-weight:bold;color:#1e4fa3;border-bottom:3px double #1e4fa3;padding-bottom:4px;margin-bottom:4px}.payslip-h span{float:right;font-weight:normal;color:#555;font-size:13px}
.payslip td{border-bottom:1px dotted #c9d6ee}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.confetti i{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;animation:conf linear forwards}
@keyframes conf{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(320px) rotate(720deg);opacity:.2}}
.venue-list{max-height:40vh;overflow:auto;margin-top:6px}.venue-list>div{padding:4px 0;border-bottom:1px dashed #ddd}
#m-choices{max-height:30vh;overflow:auto}
.hanko{position:fixed;left:50%;top:45%;z-index:60;transform:translate(-50%,-50%) rotate(-12deg);border:6px solid #c62828;border-radius:50%;color:#c62828;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff8;animation:hanko 1.4s ease-out forwards;pointer-events:none;font-family:serif;line-height:1.1}
.hanko small{font-size:.38em;font-family:sans-serif}
@keyframes hanko{0%{transform:translate(-50%,-50%) rotate(-12deg) scale(2.6);opacity:0}15%{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:1}75%{opacity:1}100%{opacity:0}}
.catnav{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;position:sticky;top:-12px;background:#fff;z-index:2;padding:6px 0;border-bottom:2px solid var(--line)}

/* 脚質ごとの走り方(ゴール時刻は --d で着順どおり)。途中の位置だけが脚質で変わる */
.rh.k-nige{animation:k-nige var(--d) linear forwards}
.rh.k-senko{animation:k-senko var(--d) linear forwards}
.rh.k-sashi{animation:k-sashi var(--d) linear forwards}
.rh.k-oikomi,.rh.k-deokure{animation:k-oikomi var(--d) linear forwards}
.rh.stop{animation:runstop 3s forwards!important}
@keyframes k-nige{0%{left:4px}25%{left:34%}60%{left:66%}100%{left:calc(100% - 44px)}}
@keyframes k-senko{0%{left:4px}25%{left:29%}60%{left:62%}100%{left:calc(100% - 44px)}}
@keyframes k-sashi{0%{left:4px}25%{left:22%}60%{left:54%}100%{left:calc(100% - 44px)}}
@keyframes k-oikomi{0%{left:4px}25%{left:15%}60%{left:44%}100%{left:calc(100% - 44px)}}

/* バッドエンドの駅・白飛び */
.sc-station{background:linear-gradient(#3a3f4a 0 55%,#9e9e9e 55% 60%,#ffd600 60% 62%,#555 62%)}
.sc-station .deco::before{content:"";position:absolute;right:12%;top:18%;width:26px;height:26px;border-radius:50%;background:#e53935;box-shadow:0 0 20px #ff1744;animation:blink .64s infinite}
.sc-station .deco::after{content:"";position:absolute;right:calc(12% + 36px);top:18%;width:26px;height:26px;border-radius:50%;background:#e53935;box-shadow:0 0 20px #ff1744;animation:blink .64s .32s infinite}
.sc-white{background:#fff;animation:whiteflash 1.2s ease-out}
@keyframes whiteflash{0%{background:#ffe082}100%{background:#fff}}
.whiteout{font-size:18px;text-align:center;color:#999;padding:10px}

/* 上部の情報は2行に収める(1行目: 所持金・借金・出資馬、2行目: 家族・目標) */
.strow{display:flex;gap:14px;align-items:center;min-width:0;flex-wrap:nowrap}
.strow .st{min-width:0;white-space:nowrap}
@media(max-width:620px){.stats{display:flex!important;flex-direction:column}.strow{gap:8px}.strow .st{font-size:12px}}
.result-txt{white-space:pre-wrap;font-size:13px;background:#f5f7fb;border-radius:8px;padding:8px;text-align:left;user-select:text}

/* 音量パネル */
.snd{position:relative}
.volpop{position:absolute;top:100%;right:0;margin-top:6px;z-index:50;background:#fff;color:#222;border-radius:12px;padding:10px 12px;box-shadow:0 6px 18px #0006;width:240px;display:flex;flex-direction:column;gap:8px}
.volrow{display:grid;grid-template-columns:72px 1fr 36px;align-items:center;gap:6px;font-size:13px;font-weight:bold}
.volrow input{width:100%;accent-color:#1e4fa3}.volrow b{text-align:right;font-size:12px;color:#1e4fa3}
.volpop .sub{padding:4px;font-size:12px}
.nukki.setbox{margin:8px 0;background:#f4f8ff;border:1px solid #c9d8f5;border-radius:10px;padding:8px}

/* ---- レースシーン(馬の形・走る向き) ---- */
.goal-line{right:auto;left:auto}
.race-anim.ltr .goal-line{right:30px;left:auto}
.race-anim.rtl .goal-line{left:30px;right:auto}
.dir-tag{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:10px;color:#ffffffcc;letter-spacing:.1em;pointer-events:none}
.rh i{display:none}
.rh{left:4px;transform:translateY(-50%)}
.race-anim.rtl .rh{left:auto;right:4px}
.rh .rhs{display:block;overflow:visible;filter:drop-shadow(0 1px 1px #0005)}
.race-anim.rtl .rhs{transform:scaleX(-1)}
.rh.me .rhs{filter:drop-shadow(0 0 4px #ffeb3b) drop-shadow(0 1px 1px #0005)}
.rh .bob{animation:gbob .26s ease-in-out infinite alternate}
.rh .lga{animation:lga .26s ease-in-out infinite alternate}
.rh .lgb{animation:lgb .26s ease-in-out infinite alternate}
@keyframes gbob{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@keyframes lga{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
@keyframes lgb{from{transform:rotate(26deg)}to{transform:rotate(-26deg)}}
.rh.stop .bob,.rh.stop .lg{animation-play-state:paused}
.rh.stop{filter:grayscale(.6)}
.rh b{left:auto;top:-14px}
.race-anim.rtl .rh b{left:auto;right:0}
.race-anim.ltr .rh b{left:0}
@keyframes nxshow{to{visibility:visible}}
.jikkyo span{animation-delay:0s}
.race-anim.ltr .rh.k-nige{animation-name:L-nige}.race-anim.ltr .rh.k-senko{animation-name:L-senko}.race-anim.ltr .rh.k-sashi{animation-name:L-sashi}.race-anim.ltr .rh.k-oikomi,.race-anim.ltr .rh.k-deokure{animation-name:L-oikomi}
@keyframes L-nige{0%{left:4px}25%{left:34%}60%{left:66%}100%{left:calc(100% - 48px - var(--fo,0px))}}
@keyframes L-senko{0%{left:4px}25%{left:29%}60%{left:62%}100%{left:calc(100% - 48px - var(--fo,0px))}}
@keyframes L-sashi{0%{left:4px}25%{left:22%}60%{left:54%}100%{left:calc(100% - 48px - var(--fo,0px))}}
@keyframes L-oikomi{0%{left:4px}25%{left:15%}60%{left:44%}100%{left:calc(100% - 48px - var(--fo,0px))}}
.race-anim.rtl .rh.k-nige{animation-name:R-nige}.race-anim.rtl .rh.k-senko{animation-name:R-senko}.race-anim.rtl .rh.k-sashi{animation-name:R-sashi}.race-anim.rtl .rh.k-oikomi,.race-anim.rtl .rh.k-deokure{animation-name:R-oikomi}
@keyframes R-nige{0%{right:4px}25%{right:34%}60%{right:66%}100%{right:calc(100% - 48px - var(--fo,0px))}}
@keyframes R-senko{0%{right:4px}25%{right:29%}60%{right:62%}100%{right:calc(100% - 48px - var(--fo,0px))}}
@keyframes R-sashi{0%{right:4px}25%{right:22%}60%{right:54%}100%{right:calc(100% - 48px - var(--fo,0px))}}
@keyframes R-oikomi{0%{right:4px}25%{right:15%}60%{right:44%}100%{right:calc(100% - 48px - var(--fo,0px))}}
.race-anim.ltr .rh.stop{animation:runstop 3s forwards!important}
.race-anim.rtl .rh.stop{animation:runstop-r 3s forwards!important}
@keyframes runstop-r{from{right:4px}to{right:45%}}

.tw-img{margin:4px 0;width:200px;max-width:100%;border-radius:8px;overflow:hidden;border:1px solid var(--line)}.face-crop{display:block;width:100%;height:auto}.tw-img img{display:block;width:100%;height:auto}

.soubi{width:62px;flex:none;background:#fff;border-radius:10px;text-align:center;padding:3px 4px;box-shadow:0 3px 0 #0d2a5c}
.soubi .lb{font-size:11px;font-weight:bold;color:var(--blue)}
.soubi .lv{font-size:19px;line-height:1.25;font-weight:900;color:#6a1b9a}
.soubi .gauge{height:6px;background:#eee;border-radius:3px;overflow:hidden;margin-top:2px}.soubi .gauge i{display:block;height:100%;background:#8e24aa}
@media(max-width:620px){.soubi{width:46px;padding:2px}.soubi .lb{font-size:9px}.soubi .lv{font-size:13px}}

#m-title:empty,#m-body:empty{display:none}

/* 移動のカットイン: 背景がゆっくり流れる */
.stage.sc-move.has-bg{background-size:135% 100%;background-position:0 50%;animation:movebg 1.9s ease-in-out forwards}
@keyframes movebg{from{background-position:0 50%}to{background-position:100% 50%}}

.tw-h b.me{color:#d32f2f}
.sns .tw:has(b.me){background:#fff3f1}

/* 移動のカットイン: 背景は止めて、馬が右端から左端へ走り抜ける */
.stage.sc-move.has-bg{animation:none;background-size:cover;background-position:center}
.movehorse{position:absolute;bottom:11%;height:40%;left:100%;z-index:2;will-change:left,transform;visibility:hidden}
.movehorse.go{visibility:visible;animation:movehorse 2s linear forwards,horsebob .2s ease-in-out infinite alternate}
@keyframes horsebob{from{margin-bottom:0}to{margin-bottom:5px}}
/* 馬の幅ぶん左へ出し切る(スマホで後ろ脚が画面に残らないように) */
@keyframes movehorse{from{left:100%;transform:translateX(0)}to{left:-4%;transform:translateX(-104%)}}

/* 場内モニターの背景: 左上のモニターを必ず見せる(右側は切れてよい) */
.stage.sc-monitor.has-bg{background-position:left top}

/* お告げの「キュピーン」演出 */
.kyupin{position:absolute;inset:0;z-index:30;pointer-events:none;animation:kyflash 1.3s ease-out forwards}
@keyframes kyflash{0%{background:#fff}35%{background:#fff0}100%{background:#fff0}}
@keyframes kystar{0%{transform:scale(0) rotate(0);opacity:0}25%{transform:scale(1.6) rotate(20deg);opacity:1}100%{transform:scale(.6) rotate(70deg);opacity:0}}
.kyupin b{position:absolute;left:0;right:0;top:10%;text-align:center;font-size:40px;color:#fff;-webkit-text-stroke:2px #e65100;text-shadow:0 3px 0 #e65100;opacity:0;animation:kytxt 1.3s ease-out forwards}
@keyframes kytxt{0%{transform:scale(.4);opacity:0}25%{transform:scale(1.15);opacity:1}70%{opacity:1}100%{transform:scale(1);opacity:1}}

/* 目の位置(キャラの画像に対する割合)にきらめきを置く */
.chara .eyes{position:absolute;inset:0;z-index:5;pointer-events:none}
.chara .eyes2{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);pointer-events:none;z-index:5}
.chara .eyes i,.chara .eyes2 i{position:absolute;top:35.5%;font-style:normal;font-size:44px;line-height:1;color:#fff;text-shadow:0 0 10px #ffe27a,0 0 26px #ffd54f;opacity:0;transform:translate(-50%,-50%);animation:kyeye 1.3s ease-out forwards}
.chara .eyes i:nth-child(1){left:38%}.chara .eyes i:nth-child(2){left:62%;animation-delay:.1s}
.chara .eyes2 i:nth-child(2){animation-delay:.1s}
@keyframes kyeye{0%{transform:translate(-50%,-50%) scale(0) rotate(0);opacity:0}25%{transform:translate(-50%,-50%) scale(1.6) rotate(20deg);opacity:1}100%{transform:translate(-50%,-50%) scale(.9) rotate(20deg);opacity:1}}
.chara .eyes i,.chara .eyes2 i{animation:kyeye 1.3s ease-out forwards,kytwinkle 1.6s ease-in-out 1.3s infinite}
.chara .eyes i:nth-child(2),.chara .eyes2 i:nth-child(2){animation-delay:.1s,1.5s}
@keyframes kytwinkle{0%,100%{transform:translate(-50%,-50%) scale(.9) rotate(20deg)}50%{transform:translate(-50%,-50%) scale(1.15) rotate(20deg)}}

.visit{max-width:360px}.visit svg{display:block;width:100%;height:auto}
.strow:empty{display:none}

.rcardwrap svg{display:block;width:100%;max-width:420px;margin:0 auto;border-radius:12px}
.rcardwrap{width:min(86vw,420px);margin:0 auto}.rcardwrap svg{width:100%;max-width:none}

/* 恋人はバストアップの高解像度絵(腰から上)。ほかのキャラと頭の大きさをそろえるため少し拡大。彩香(lover3)は小柄なので低めに置く */
.stage .chara .cimg.lv{overflow:hidden;align-items:flex-start}
.stage .chara .cimg.lv img{height:108%;max-width:none;margin-top:0}
.stage .chara .cimg.lover3 img{height:100%;margin-top:9%}
.cimg.lv.f-sad img{filter:drop-shadow(0 6px 6px #0006)!important}/* 恋人は悲しい表情の専用絵があるので、暗くする演出はしない */
.mini .cimg.lv{overflow:hidden}.mini .cimg.lv img{height:150px;max-width:none;margin-top:-1px}

.logbtn{position:absolute;right:10px;top:-14px;background:#fff;border:2px solid var(--blue);color:var(--blue);border-radius:14px;padding:2px 10px;font-size:12px;font-weight:bold;box-shadow:0 2px 0 #0d2a5c;cursor:pointer;z-index:5}
.msglog{max-height:60vh;overflow:auto;text-align:left}
.msglog .ml{border-bottom:1px solid #dde;padding:6px 2px;font-size:14px;line-height:1.6}
.msglog .mlh{display:flex;justify-content:space-between;font-size:12px}
#m-choices{padding:0 4px 8px;overflow-x:hidden}

/* メッセージ内の補足も本文と同じ大きさで読めるように。「まとめて送る」ボタンが文字に被らないよう下に余白を取る */
.msgwin .msg .muted{font-size:inherit;color:#4a5670}
.msgwin.hasskip{padding-bottom:46px}

/* 季節の変わり目のカットイン */
.seasoncut{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none;animation:scfade 2.6s ease-in-out both}
.seasoncut b{font-size:92px;font-weight:900;color:#fff;-webkit-text-stroke:4px var(--sc);text-shadow:5px 5px 0 var(--sc);letter-spacing:8px}
.seasoncut span{font-size:70px;animation:scspin 2.6s ease-out}
.seasoncut.s-spring{--sc:#e0527a;background:linear-gradient(#ffd6e599,#ffe9f255)}
.seasoncut.s-summer{--sc:#0f9d58;background:linear-gradient(#aee9ff99,#fff7b055)}
.seasoncut.s-autumn{--sc:#d2691e;background:linear-gradient(#ffcc8099,#ffe1a855)}
.seasoncut.s-winter{--sc:#1e5fa8;background:linear-gradient(#d7ecff99,#ffffff66)}
@keyframes scfade{0%{opacity:0;transform:scale(1.08)}18%{opacity:1;transform:scale(1)}78%{opacity:1}100%{opacity:0}}
@keyframes scspin{0%{transform:rotate(-40deg) scale(.4)}60%{transform:rotate(8deg) scale(1.15)}100%{transform:rotate(0) scale(1)}}
@media(max-width:620px){.seasoncut b{font-size:62px}.seasoncut span{font-size:48px}}

/* ---- オープニング映像 ---- */
#opening{position:fixed;inset:0;z-index:100000;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .45s}
#opening.out{opacity:0}
#opening video{width:100%;height:100%;object-fit:contain;background:#000}
#opening .op-skip{position:absolute;right:14px;bottom:14px;background:#0009;color:#fff;border:2px solid #fff;border-radius:20px;padding:7px 18px;font-size:15px;font-weight:bold;box-shadow:none;cursor:pointer}
#opening .op-skip:hover{background:#000c}

.op-warn{font-size:12px;color:#a33;background:#fff5f0;border-radius:8px;padding:6px 10px;margin:-2px 0 8px;line-height:1.5}

.betrow{align-items:center}.betbar{display:flex;align-items:center;gap:8px;flex:1;min-width:220px}.betbar input[type=range]{flex:1;min-width:90px;accent-color:#ff8f00}.betbar b{min-width:72px;text-align:right;font-size:14px}

/* ---- タイトル画面: 馬の全身が見えるよう絵をずらし、ロゴを派手に、スタートを下寄せに ---- */
.title-screen{background-position:82% center!important;position:relative}
.title-screen.step0{display:flex;flex-direction:column;min-height:100vh;padding-top:7vh;padding-bottom:9vh}
.title-screen.step0 .tcard.start-only{margin-top:auto;width:100%;box-sizing:border-box;background:transparent;border:none;box-shadow:none;padding:0 6px}
.title-screen.step0 .start{padding:18px;font-size:26px;letter-spacing:.3em;border-radius:40px;border:3px solid #fff;box-shadow:0 6px 0 #8d3b00,0 0 24px #ffb30099;animation:startpulse 1.6s ease-in-out infinite}
@keyframes startpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.title-screen .logo{margin:6px 0 20px;animation:logopop .9s cubic-bezier(.2,1.5,.4,1) both,logofloat 3.5s ease-in-out .9s infinite;filter:drop-shadow(0 6px 10px #0008)}
.title-screen .logo .l1{font-size:84px;line-height:1.05;letter-spacing:.08em;color:#ffe14d;-webkit-text-stroke:8px #c62828;paint-order:stroke fill;text-shadow:5px 6px 0 #123672,0 0 22px #ffd54f;position:relative}
.title-screen .logo .l2{font-size:34px;letter-spacing:.1em;margin-top:8px;padding:6px 30px;background:linear-gradient(#4f9cff,#1e4fa3 70%);border:4px solid #fff;box-shadow:0 5px 0 #123672,0 0 18px #7ec8ffcc;position:relative;overflow:hidden}
.title-screen .logo .l2::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#fffa,transparent);animation:logoshine 3.2s ease-in-out 1.2s infinite}
@keyframes logopop{0%{transform:rotate(-3deg) scale(.3);opacity:0}100%{transform:rotate(-3deg) scale(1);opacity:1}}
@keyframes logofloat{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-6px)}}
@keyframes logoshine{0%{left:-60%}45%,100%{left:130%}}
@media(max-width:620px){.title-screen .logo .l1{font-size:64px;-webkit-text-stroke:6px #c62828}.title-screen .logo .l2{font-size:26px;padding:5px 22px}}
/* ボタンの押し込み感(全体) */
button:not(:disabled){transition:transform .06s,box-shadow .06s,filter .1s}
button:not(:disabled):active{transform:translateY(3px) scale(.985);filter:brightness(.94)}
.start:active,.racebtn:active{box-shadow:0 1px 0 #5a2600!important}

/* ---- 節目の演出 ---- */
.seasoncut.s-newyear{--sc:#c62828;background:linear-gradient(#ffe08299,#fff3c455)}
.seasoncut.s-fiscal{--sc:#2e7d32;background:linear-gradient(#c8f0cf99,#fff9c455)}
.stage .glow{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at 50% 40%,#fff8,#ffd54f55 40%,transparent 70%);animation:glowpulse 1.4s ease-out both}
@keyframes glowpulse{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:.25;transform:scale(1.2)}}
.stage .hearts{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.stage .hearts span{position:absolute;bottom:-10%;animation:heartup ease-out infinite}
@keyframes heartup{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-330px) scale(1.1);opacity:0}}
.stage.shake{animation:stageshake .55s cubic-bezier(.36,.07,.19,.97) both}
@keyframes stageshake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-7px,3px)}40%,60%{transform:translate(7px,-3px)}}
.stage .vig{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle,transparent 45%,#b71c1c88 100%);animation:vigfade 1.6s ease-out both}
@keyframes vigfade{0%{opacity:0}20%{opacity:1}100%{opacity:.35}}
/* 応援馬券ボタン(セリフ枠の中): 影・押し込みの動きで枠の外にはみ出すと、右に上下バーが出るので、影を使わず枠の中に収める */
.msgwin .msg{overflow-x:hidden;padding-bottom:6px;scrollbar-width:thin}
.msg .racebtn{display:inline-flex;align-items:center;gap:6px;width:auto;margin:8px 0 2px;padding:5px 16px;font-size:14px;line-height:1.3;border-radius:20px;border:2px solid #c46a00;box-shadow:none;background:linear-gradient(#ffd54f,#ffa000);color:#4a2500}
.msg .racebtn:active{transform:none;box-shadow:none;filter:brightness(.92)}
.msg button:active{transform:none}

/* 友達・恋人の絵をタップして一言 */
.mini.tap{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mini.tap:active{transform:scale(.95)}
.tapline{margin:6px 0 2px 0;padding:8px 12px;background:#fff;border:2px solid #9fb6e6;border-radius:4px 14px 14px 14px;font-size:14px;line-height:1.55;color:#223;animation:tapin .25s ease-out}
@keyframes tapin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* 結婚式のアルバム写真 */
.wedphoto{position:relative;width:100%;max-width:300px;aspect-ratio:4/3;margin:4px auto;border:5px solid #fff;border-radius:6px;box-shadow:0 2px 8px #0006;background:#d9c7e8 center/cover;overflow:hidden}
.wedphoto::before{content:"";position:absolute;inset:0;background:linear-gradient(#fff3,transparent 40%,#0003)}
.wedphoto img{position:absolute;bottom:-2%;object-fit:contain}
.wedphoto .wp-me{left:8%;height:70%}
.wedphoto .wp-bride{right:4%;height:104%;bottom:-18%}
.wedphoto .wp-fl{position:absolute;top:6%;right:8%;font-style:normal;font-size:22px}
.rkchip{display:inline-block;color:#fff;font-weight:900;font-size:14px;padding:3px 12px;border-radius:14px}
.title-help{width:100%;box-sizing:border-box}
.title-help>summary,.hofbox>summary{text-align:center;list-style-position:inside}
details.help.title-help{margin:12px auto 0}
.blackout{position:fixed;inset:0;z-index:9999;background:#000;opacity:0;transition:opacity 2s ease;display:flex;align-items:center;justify-content:center;pointer-events:all}
.blackout.on{opacity:1}
.blackout div{color:#fff;font-size:22px;letter-spacing:.3em;opacity:0;transition:opacity 1.5s ease 1s}
.blackout.on div{opacity:1}
.medal.gold{filter:sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.15) drop-shadow(0 0 2px #ffd54f)}
.ach.gold{border-color:#e0a800;background:linear-gradient(#fffbe6,#fff3c4)}
.ach.gold .an{color:#8a5a00}
.menu button.l5{font-size:8px!important;letter-spacing:-.04em}
/* スマホ: 所持金・出資馬の表示が見切れないよう、入りきらないときは折り返す */
@media(max-width:620px){.strow{flex-wrap:wrap!important;gap:3px 8px!important}.st .val{overflow:visible!important;text-overflow:clip!important}.strow .st{flex:0 0 auto}}
/* スマホ: ダブルタップでの拡大・タップ時の青い枠・文字サイズの自動拡大を防ぐ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,summary,label,.tap,.mini{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.lockmsg{background:#37474f;color:#fff;font-weight:bold;font-size:12px;text-align:center;padding:5px 6px;border-radius:14px;margin:0 0 6px}
/* ウインドウは少し狭くして、まわりの隙間をさわれば閉じられるようにする(スマホでは左右22pxほど空ける) */
.panel{max-width:740px}
.panel-wrap{padding:20px 22px 30px}
@media(min-width:900px){.panel-wrap{padding:24px 24px 36px}}
/* 縁取り文字は、線を文字の外側だけに描く(内側にもはみ出すと「着」「春」のような画数の多い字がつぶれる)。スマホでは字を大きめに */
.banner,.banner.win,.seasoncut b,.kyupin b{paint-order:stroke fill}
.banner{-webkit-text-stroke:6px #123672;text-shadow:3px 3px 0 #123672}
.banner.win{-webkit-text-stroke:6px #c62828;text-shadow:3px 3px 0 #7f1414}
.seasoncut b{-webkit-text-stroke:8px var(--sc);text-shadow:4px 4px 0 var(--sc)}
@media(max-width:620px){
  .banner{font-size:46px}
  .stage.has-bg .banner{left:32%;top:28%;font-size:46px}
  .seasoncut b{font-size:68px;-webkit-text-stroke:7px var(--sc);letter-spacing:4px}
}

/* タイトルの背景は画面に固定する(ゲーム説明や殿堂を開いて縦に伸びても、背景が拡大されない) */
.title-screen[style*="--tbg"]{background:none!important;isolation:isolate}
.title-screen[style*="--tbg"]::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--tbg) 82% center/cover no-repeat;pointer-events:none}

/* ---- 一覧・詳細の行(出資馬・カタログ)。名前や募集名は、なるべく1行で見せる ---- */
.hrow .hmain,.crow .cmain{flex:1;min-width:0}
.hl1,.cl1{display:flex;align-items:center;gap:4px;white-space:nowrap;min-width:0}
.hl1 .nm{overflow:hidden;text-overflow:ellipsis}
.hprize{white-space:nowrap}.hprize b{font-size:14px;color:var(--ink,#222)}
.cl1 .nm{font-size:15px}.cl1 .fav{flex:none}
.chips{margin:2px 0;display:flex;flex-wrap:wrap;gap:3px}
.meta.one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
details.sysbox{cursor:pointer}details.sysbox summary{list-style:none}details.sysbox summary::-webkit-details-marker{display:none}
details.sysbox summary::before{content:"▸ "}details.sysbox[open] summary::before{content:"▾ "}
.sysinfo{font-size:12px;margin:-4px 2px 8px;line-height:1.5}
@media(max-width:620px){
  .panel-wrap{padding:12px 16px 18px!important}
  .panel{border-width:3px}
  .ph{padding:8px 10px!important}.ph b{font-size:17px}
  .pb{padding:8px 10px 12px!important}
  .tabs{gap:4px}.tabs button{padding:6px 4px;font-size:13px;white-space:nowrap;flex:1}
  .row{gap:8px;padding:8px 2px}
  .nm{font-size:15px}
  .filters{flex-wrap:nowrap;gap:4px}.filters select,.filters .favbtn{font-size:12px;padding:5px 4px;min-width:0}
  .sysbox{font-size:12px;padding:6px 8px;margin:4px 0}
  .hero{gap:6px;margin:4px 0}
  .hero svg.horse-art{width:62%;margin:0 auto}
  .bigname{font-size:21px;margin:2px 0}
  .kv{gap:2px 10px;margin:4px 0}.kv b{font-size:12px}.kv span{font-size:14px}
  .tbl{font-size:12px}.tbl td:first-child{white-space:nowrap}
  .sec{padding:8px 10px;margin:8px 0}
  .nukki{gap:8px}.nukki .mini{width:46px}
}
.cl1{flex-wrap:wrap;row-gap:2px}.cl1 .nm{white-space:nowrap}
.nukki.setbox{align-items:center;font-size:13px;line-height:1.5}.nukki.setbox button{font-size:13px;padding:6px 12px;margin-top:4px}
@media(max-width:620px){.pb>.box{padding:8px 10px;margin:6px 0}.nukki.setbox .mini{width:40px}.pb p.muted{margin:4px 0}}

.joinbtn{flex:none;white-space:nowrap}.joinbtn button{white-space:nowrap;padding:8px 12px}

/* 出資馬一覧・カタログ: 1段目に名前を横いっぱいで、2段目に絵と情報(名前が2行に割れない) */
.hrow,.crow{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px}
.hbody{display:flex;align-items:center;gap:10px}
.hbody .cmain{flex:1;min-width:0}
.hl1 .hsx{margin-left:auto;font-size:13px;white-space:nowrap}
.hl1 .nm,.cl1 .nm{overflow:visible;font-size:16px}
.hbody .hprize{font-size:14px;text-align:left}.hbody .hprize b{font-size:16px}

.crow .hbody.click{cursor:pointer;border-radius:10px}.crow .hbody.click:active{background:#f3f7ff}
.cl1 .fav{font-size:18px;line-height:1;padding:10px 12px 10px 6px;margin:-10px -2px -10px -6px}
.crow .hbody.click:hover{background:#f3f7ff}
@media(max-width:620px){.tbl th,.tbl td{padding:3px 4px}}

.menu button .lb{font-style:normal;display:flex;align-items:center;justify-content:center;height:14px;line-height:14px;white-space:nowrap}
/* レース実況など幅広のウインドウは上へ寄せ、スクロールなしで読めるようにする */
.stage.shrink{flex:none;min-height:0;height:90px}
@media(max-width:620px){.stage.shrink{height:70px}}
.cmd.off,.cmd:disabled{filter:grayscale(.6) brightness(.55);cursor:not-allowed;pointer-events:none;animation:none}
/* パネルの外側(暗い部分)をタップして通常画面へ戻れるよう、左右に余白を残す */
.panel.p-sns,.panel.p-news{max-width:560px}
@media(max-width:620px){.panel-wrap{padding:10px 14px 14px!important}}
/* レース実況は、スクロールなしで最後まで読めるようにする */
.msgwin.wide .msg{max-height:none;overflow:visible}
@media(max-width:620px){.race-anim{height:150px}}
/* レース実況: 上の情報と実況の文字を、スマホで折り返しても収まる大きさにする */
.rhead{line-height:1.45}.rhead .muted{font-size:12px}
.msgwin.wide .jikkyo{font-size:15px;line-height:1.55}
@media(max-width:620px){.rhead{font-size:13px}.rhead .muted{font-size:11px}.msgwin.wide .jikkyo{font-size:14px;line-height:1.5}.msgwin.wide .race-anim{margin:6px 0}}
/* 口取り式: 写真をカメラで撮る演出(ピント枠→フラッシュ→「カシャッ」→写真が浮かび上がる) */
.photo.cam{position:relative;overflow:hidden;border-radius:6px}
.photo.cam>svg,.photo.cam>img{display:block;animation:camdev .5s ease-out .9s backwards}
.photo.cam .shot{position:absolute;inset:0;pointer-events:none;z-index:3}
.photo.cam .shot .vf{position:absolute;inset:14% 12%;border:2px solid #fff;border-radius:4px;box-shadow:0 0 0 2000px #0006;background:linear-gradient(#fff,#fff) center/2px 14px no-repeat,linear-gradient(#fff,#fff) center/14px 2px no-repeat;opacity:0;animation:camvf .9s ease-out forwards}
.photo.cam .shot .fl{position:absolute;inset:0;background:#fff;opacity:0;animation:camfl .7s ease-out .75s forwards}
@keyframes camvf{0%{opacity:0;transform:scale(1.25)}35%{opacity:1;transform:scale(1)}85%{opacity:1}100%{opacity:0}}
@keyframes camfl{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@keyframes camdev{from{filter:brightness(.35) saturate(.3)}to{filter:none}}
.hnav{display:flex;align-items:center;gap:6px;margin-bottom:8px}.hnav button{padding:8px 10px;font-size:13px;white-space:nowrap}.hnav .muted{margin-left:auto;font-size:12px;white-space:nowrap}
/* 結婚と借金が重なっても、一番上のバーが高くならないよう、スマホでは1行ずつを詰めて4行を収める */
@media(max-width:620px){.stats{display:flex!important;flex-direction:column;justify-content:center;gap:2px!important}.strow{display:contents!important}.stats .st{padding:0 7px 0 2px;line-height:1.15}.stats .st .lb{font-size:9px;padding:0 5px}.stats .st .val{font-size:12px}.stats .st .val.heart{font-size:11px}}
/* ダートのレースは、土の色のコースにする */
.race-anim.dirt{background:repeating-linear-gradient(90deg,#b98a5a 0 40px,#c8996a 40px 80px);box-shadow:inset 0 0 0 2px #7a5430}
/* 出走成績: 1レース2行(日付・着順・賞金 / レース名) */
.rrows{margin:6px 0}
.rr{padding:7px 2px;border-bottom:1px solid var(--line,#dde5f2)}
.rr .r1{display:flex;align-items:baseline;gap:8px}
.rr .d{font-size:13px;color:#4a5670}
.rr .k{font-weight:900;font-size:14px;min-width:2.4em;text-align:right}
.rr .k.rank1{color:#d32f2f}.rr .k.rank23{color:#1565c0}
.rr .p{min-width:3.8em;text-align:right;font-size:14px}
.rr .r2{margin-top:2px;font-size:14px;line-height:1.45;display:flex;align-items:baseline;gap:8px}
.rr .n{flex:1;overflow-wrap:anywhere}
/* 競馬場の選択など、選択肢が2〜3個以上のダイアログは、ボタンを縦に同じ幅でそろえる */
#m-choices:has(.stackbtn){flex-direction:column;align-items:stretch}
#m-choices .stackbtn{width:100%;text-align:center}
/* レース: 脚質ごとの差をはっきりさせる(逃げ=序盤から前、差し・追込=後ろから終盤に追い上げる) */
@keyframes L-nige{0%{left:4px}25%{left:calc((100% - 48px) * 0.42)}60%{left:calc((100% - 48px) * 0.74)}85%{left:calc((100% - 48px) * 0.93)}100%{left:calc(100% - 48px - var(--fo,0px))}}
@keyframes R-nige{0%{right:4px}25%{right:calc((100% - 48px) * 0.42)}60%{right:calc((100% - 48px) * 0.74)}85%{right:calc((100% - 48px) * 0.93)}100%{right:calc(100% - 48px - var(--fo,0px))}}
@keyframes L-senko{0%{left:4px}25%{left:calc((100% - 48px) * 0.33)}60%{left:calc((100% - 48px) * 0.66)}85%{left:calc((100% - 48px) * 0.91)}100%{left:calc(100% - 48px - var(--fo,0px))}}
@keyframes R-senko{0%{right:4px}25%{right:calc((100% - 48px) * 0.33)}60%{right:calc((100% - 48px) * 0.66)}85%{right:calc((100% - 48px) * 0.91)}100%{right:calc(100% - 48px - var(--fo,0px))}}
@keyframes L-sashi{0%{left:4px}25%{left:calc((100% - 48px) * 0.18)}60%{left:calc((100% - 48px) * 0.5)}85%{left:calc((100% - 48px) * 0.86)}100%{left:calc(100% - 48px - var(--fo,0px))}}
@keyframes R-sashi{0%{right:4px}25%{right:calc((100% - 48px) * 0.18)}60%{right:calc((100% - 48px) * 0.5)}85%{right:calc((100% - 48px) * 0.86)}100%{right:calc(100% - 48px - var(--fo,0px))}}
@keyframes L-oikomi{0%{left:4px}25%{left:calc((100% - 48px) * 0.08)}60%{left:calc((100% - 48px) * 0.36)}85%{left:calc((100% - 48px) * 0.8)}100%{left:calc(100% - 48px - var(--fo,0px))}}
@keyframes R-oikomi{0%{right:4px}25%{right:calc((100% - 48px) * 0.08)}60%{right:calc((100% - 48px) * 0.36)}85%{right:calc((100% - 48px) * 0.8)}100%{right:calc(100% - 48px - var(--fo,0px))}}
.race-anim .rh .bob{animation-duration:.26s}
.race-anim{--pad:0}

/* ---- ゴールライン=赤白バーの、馬が来る側の端(左回りは左端)の垂直線。馬の鼻先がそこへ最初に届いた馬が1着。越える時刻が着順の時刻で、そのあと少し走り抜ける ---- */
.race-anim .rh[class*="k-"]{animation-duration:calc(var(--d) * 1.06)}
@keyframes GL-nige{0%{left:4px}23.6%{left:calc(calc(100% - 34px - var(--hw)) * 0.4)}56.6%{left:calc(calc(100% - 34px - var(--hw)) * 0.78)}94.3%{left:calc(100% - 34px - var(--hw))}100%{left:calc(100% - 8px - var(--hw) - var(--fo,0px))}}
@keyframes GL-senko{0%{left:4px}23.6%{left:calc(calc(100% - 34px - var(--hw)) * 0.34)}56.6%{left:calc(calc(100% - 34px - var(--hw)) * 0.73)}94.3%{left:calc(100% - 34px - var(--hw))}100%{left:calc(100% - 8px - var(--hw) - var(--fo,0px))}}
@keyframes GL-sashi{0%{left:4px}23.6%{left:calc(calc(100% - 34px - var(--hw)) * 0.26)}56.6%{left:calc(calc(100% - 34px - var(--hw)) * 0.64)}94.3%{left:calc(100% - 34px - var(--hw))}100%{left:calc(100% - 8px - var(--hw) - var(--fo,0px))}}
@keyframes GL-oikomi{0%{left:4px}23.6%{left:calc(calc(100% - 34px - var(--hw)) * 0.18)}56.6%{left:calc(calc(100% - 34px - var(--hw)) * 0.52)}94.3%{left:calc(100% - 34px - var(--hw))}100%{left:calc(100% - 8px - var(--hw) - var(--fo,0px))}}
.race-anim.ltr .rh.k-nige{animation-name:GL-nige}.race-anim.ltr .rh.k-senko{animation-name:GL-senko}.race-anim.ltr .rh.k-sashi{animation-name:GL-sashi}.race-anim.ltr .rh.k-oikomi,.race-anim.ltr .rh.k-deokure{animation-name:GL-oikomi}
@keyframes GR-nige{0%{right:4px}23.6%{right:calc(calc(100% - 34px - var(--hw)) * 0.4)}56.6%{right:calc(calc(100% - 34px - var(--hw)) * 0.78)}94.3%{right:calc(100% - 34px - var(--hw))}100%{right:calc(100% - 8px - var(--hw) - var(--fo,0px))}}
@keyframes GR-senko{0%{right:4px}23.6%{right:calc(calc(100% - 34px - var(--hw)) * 0.34)}56.6%{right:calc(calc(100% - 34px - var(--hw)) * 0.73)}94.3%{right:calc(100% - 34px - var(--hw))}100%{right:calc(100% - 8px - var(--hw) - var(--fo,0px))}}
@keyframes GR-sashi{0%{right:4px}23.6%{right:calc(calc(100% - 34px - var(--hw)) * 0.26)}56.6%{right:calc(calc(100% - 34px - var(--hw)) * 0.64)}94.3%{right:calc(100% - 34px - var(--hw))}100%{right:calc(100% - 8px - var(--hw) - var(--fo,0px))}}
@keyframes GR-oikomi{0%{right:4px}23.6%{right:calc(calc(100% - 34px - var(--hw)) * 0.18)}56.6%{right:calc(calc(100% - 34px - var(--hw)) * 0.52)}94.3%{right:calc(100% - 34px - var(--hw))}100%{right:calc(100% - 8px - var(--hw) - var(--fo,0px))}}
.race-anim.rtl .rh.k-nige{animation-name:GR-nige}.race-anim.rtl .rh.k-senko{animation-name:GR-senko}.race-anim.rtl .rh.k-sashi{animation-name:GR-sashi}.race-anim.rtl .rh.k-oikomi,.race-anim.rtl .rh.k-deokure{animation-name:GR-oikomi}

/* ---- 月が変わるとき、カレンダーの前の月が破れてめくれる ---- */
.cal{position:relative}
.cal .peel{position:absolute;left:0;top:0;right:0;bottom:0;background:#fff;z-index:3;transform-origin:0 0;pointer-events:none;animation:calpeel .8s cubic-bezier(.45,0,.85,.55) forwards;box-shadow:0 5px 8px #0005;clip-path:polygon(0 0,100% 0,100% 90%,88% 96%,76% 89%,64% 97%,52% 90%,40% 98%,28% 91%,14% 97%,0 90%)}
@keyframes calpeel{0%{transform:none;opacity:1}18%{transform:rotate(-3deg) translateY(-3px)}100%{transform:translate(26px,-170%) rotate(24deg);opacity:0}}

/* ---- 移動の絵(乗り物ごと) ---- */
/* 電車・車: ゆっくり走ってきて、左側に全身が残る */
.movehorse.mv-slow.go{animation:movehorse-slow 2.8s cubic-bezier(.25,.6,.3,1) forwards,horsebob .3s ease-in-out infinite alternate}
@keyframes movehorse-slow{from{left:100%;transform:none}to{left:3%;transform:none}}
/* 飛行機: 羽の生えた馬が、空を高速で飛んでいく */
.moveplane{position:absolute;bottom:36%;height:38%;aspect-ratio:183/177;left:100%;z-index:2;visibility:hidden;will-change:left,transform}
.moveplane.go{visibility:visible;animation:planefly 1.4s linear forwards}
.moveplane img{position:relative;display:block;height:100%;z-index:2;animation:horsebob .14s ease-in-out infinite alternate}
.moveplane .wing{position:absolute;width:60%;left:30%;top:-34%;transform-origin:50% 96%;animation:wingflap .16s ease-in-out infinite alternate;}
.moveplane .wing.wb{left:42%;top:-30%;opacity:1;z-index:1;animation-delay:-.06s}
.moveplane .wing.wf{z-index:3}
@keyframes wingflap{from{transform:rotate(-34deg)}to{transform:rotate(26deg)}}
@keyframes planefly{from{left:100%;transform:translate(0,14%)}to{left:-4%;transform:translate(-104%,-24%)}}
/* 縦に長いカード(その後・成績)でも、スマホで「閉じる」までたどり着ける: 画面の高さに収め、カードの絵は縮め、ボタンは下に固定する */
.modal-card{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal-card #m-choices{position:sticky;bottom:-16px;background:#fff;padding:8px 0 4px;margin-bottom:-4px}
.rcardwrap{width:auto}
.rcardwrap svg,.rcardwrap img{display:block;margin:0 auto;width:100%;height:auto;max-width:100%;max-height:none;border-radius:12px} /* カードは、画面の幅いっぱいに大きく見せる(縦に長いので、画面の中でスクロールする。ボタンは下に固定) */

/* 家計簿: 月(年)ごとのカード。項目名は左、金額は右にそろえる。PCは2列、スマホは1列 */
.bkgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.bkm{border:2px solid var(--line);border-radius:10px;padding:6px 10px 8px;background:#fff}
.bkh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:2px solid var(--blue);padding-bottom:3px;margin-bottom:4px;font-size:14px}.bkh b{color:var(--blue)}.bkh span{font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums}
.bkr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px}.bkr .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:620px){.bkgrid{grid-template-columns:1fr}}
.kv .subk{font-weight:normal;color:var(--sub);font-size:12px}.kv .subv{color:var(--sub);font-size:13px}
.yrtbl{font-size:12px;font-variant-numeric:tabular-nums}.yrtbl th,.yrtbl td{padding:5px 2px;white-space:nowrap}

/* 称号の最上位(激レア)は、レインボー */
@keyframes rbwHue{from{filter:hue-rotate(0deg) saturate(2.4) drop-shadow(0 0 3px #fff)}to{filter:hue-rotate(360deg) saturate(2.4) drop-shadow(0 0 3px #fff)}}
@keyframes rbwSlide{from{background-position:0 0,0% 50%}to{background-position:0 0,200% 50%}}
.medal.rainbow{display:inline-block;animation:rbwHue 3s linear infinite}
.ach.rainbow{border:3px solid transparent;background:linear-gradient(#fffdf6,#fff) padding-box,linear-gradient(110deg,#ff5252,#ffb300,#fdd835,#66bb6a,#29b6f6,#ab47bc,#ff5252) border-box;background-size:auto,200% 100%;animation:rbwSlide 4s linear infinite}
.ach.rainbow .an{background:linear-gradient(90deg,#e53935,#fb8c00,#43a047,#1e88e5,#8e24aa);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ach.rainbow .an .medal{-webkit-text-fill-color:initial;color:initial;background:none}

/* みんなのランキング */
.rk-wrap{position:fixed;inset:0;z-index:60;background:#000a;display:flex;justify-content:center;align-items:flex-start;padding:12px 10px;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.rk-wrap::-webkit-scrollbar{display:none}
.rk{background:#fff;width:100%;max-width:520px;border:4px solid var(--blue);border-radius:14px;padding:12px;box-shadow:0 6px 0 #0d2a5c}
.rk-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.rk-sel{display:grid;grid-template-columns:1fr;gap:6px;margin-bottom:6px}.rk-sel select{width:100%;font-size:15px;padding:6px;border:2px solid var(--line);border-radius:8px;background:#fff}
.rk-me{background:#fff8ef;border:2px solid var(--orange);border-radius:8px;padding:6px 8px;margin:6px 0;font-size:14px}
.rktbl{font-size:14px}.rktbl td:first-child,.rktbl th:first-child{width:2.6em;text-align:center}.rktbl tr.me td{background:#fff3cd;font-weight:bold}
.rk-you{background:var(--orange);color:#fff;border-radius:6px;padding:0 5px;font-size:11px}
.rk-t{font-size:10px;color:var(--muted,#8a8a8a);margin-left:2px;white-space:nowrap}
/* ランキング上位の名前枠: 1位はレインボー、2・3位は金色 */
.rk-nm{display:inline-block;padding:1px 9px;border-radius:999px;font-weight:900;border:2px solid transparent;background-origin:border-box;background-clip:padding-box,border-box}
.rk-nm.rainbow{background-image:linear-gradient(#fff,#fff),linear-gradient(90deg,#ff4d4d,#ffa63d,#ffe14d,#4dd65a,#4db8ff,#7a5cff,#e04dff,#ff4d4d);background-size:100% 100%,100% 100%;color:#4a2a8a;box-shadow:0 0 8px #c38bff66}
.rk-nm.gold{background-image:linear-gradient(#fffaf0,#fffaf0),linear-gradient(135deg,#8a6200,#ffd75e,#fff3b0,#e0a800,#8a6200);color:#6b4a00;box-shadow:0 0 6px #ffcc3355}
@keyframes rkRainbow{from{background-position:0 0,0 0}to{background-position:0 0,300% 0}}
@media (prefers-reduced-motion:reduce){.rk-nm.rainbow{animation:none}}
.rk-rate{color:#6a7d9c;font-size:12px}
.cmdpair{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}.cmdpair:has(>:only-child){grid-template-columns:1fr}

/* ---- 操作感の仕上げ(2026-10-09) ---- */
/* 画面の端(ノッチ・ホームバー)を避ける。viewport-fit=cover と組み合わせる */
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
@media(max-width:620px){.panel-wrap{padding-bottom:max(18px,env(safe-area-inset-bottom))!important}}
/* パネルや会話窓の後ろの画面が、いっしょに動かないようにする */
html,body{overscroll-behavior-y:contain}
.panel-wrap,#modal{overscroll-behavior:contain}
/* ボタンの種類ごとの押した反応(押すと沈み、少しだけ縮む) */
button{transition:transform .08s ease-out,box-shadow .08s ease-out,filter .12s}
.cmd:active{transform:translateY(4px) scale(.97);filter:brightness(.95)}
.menu button:active{transform:translateY(2px) scale(.93);filter:brightness(.96)}
.choices button:active{transform:translateY(2px) scale(.985);filter:brightness(.95)}
@media(hover:hover){.cmd:not(.off):hover{filter:brightness(1.07)}.menu button:hover{filter:brightness(1.04)}.choices button:hover{filter:brightness(1.03)}}
button:focus-visible{outline:3px solid #ffd54f;outline-offset:2px}
/* 画面を閉じるときの動き(開くときの pop と対にする) */
@keyframes pfade{to{opacity:0}}
@keyframes ppop{to{transform:scale(.95) translateY(8px);opacity:0}}
.panel-wrap.closing{animation:pfade .14s ease-in forwards;pointer-events:none}
.panel-wrap.closing .panel{animation:ppop .14s ease-in forwards}
/* 所持金の増減(数字が動いている間、色を変える) */
.cashval{transition:color .2s}
.cashval.up{color:#a5ffb0!important}.cashval.down{color:#ff9e9e!important}
/* 動きを減らす設定のとき */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
/* レース中の走りは遊びの本体なので、動きを減らす設定でも止めない */
.race-anim .rh[class*="k-"]{animation-duration:calc(var(--d) * 1.06)!important}
.race-anim .rh.stop{animation-duration:3s!important}
.race-anim .rh .bob{animation-duration:.26s!important;animation-iteration-count:infinite!important}}

/* ---- 操作感の仕上げ その2 ---- */
/* 背景が変わるとき、前の背景がゆっくり消える */
.stage .bgfade{position:absolute;inset:0;background-size:cover;background-position:center;z-index:1;pointer-events:none;animation:pfade .45s ease-out forwards}
/* 小さな通知(セーブしたときなど) */
#toast{position:fixed;left:50%;top:calc(100px + env(safe-area-inset-top));transform:translateX(-50%) translateY(-10px);background:#10244df0;color:#fff;border:2px solid #ffd54f;border-radius:999px;padding:9px 20px;font-weight:bold;font-size:14px;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:86vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* 新しいものが届いたしるし(メニューの赤い点) */
.menu button .dot.new{background:#ff3d3d;box-shadow:0 0 0 2px #fff;animation:glowpulse 1.4s ease-in-out infinite}

/* ---- 絶好調のやる気メーター(金色に光り、虹色のゲージが流れる) ---- */
.yaruki.ya5{position:relative;background:linear-gradient(135deg,#fff3c4,#ffd54f 45%,#ffb300);box-shadow:0 3px 0 #8d3b00,0 0 0 2px #ffd54f,0 0 14px 3px #ffb300aa;animation:yaGlow .9s ease-in-out infinite alternate}
@keyframes yaGlow{to{box-shadow:0 3px 0 #8d3b00,0 0 0 2px #fff176,0 0 22px 7px #ff8f00cc}}
.ya5 .lb{color:#b71c1c}
.ya5 .arrow{text-shadow:0 0 8px #fff;animation:yaUp .6s ease-in-out infinite alternate}
@keyframes yaUp{to{transform:translateY(-3px) scale(1.12)}}
.ya5 .yl{font-size:14px;color:#c62828;text-shadow:0 0 6px #fff,0 1px 0 #fff}
.ya5 .gauge{height:8px;background:#fff8;box-shadow:0 0 6px #ff6f00}
.ya5 .gauge i{background:linear-gradient(90deg,#ff1744,#ff9100,#ffee58,#69f0ae,#40c4ff,#e040fb,#ff1744);background-size:200% 100%;animation:yaFlow 1.2s linear infinite}
@keyframes yaFlow{to{background-position:-200% 0}}
.ya5::before,.ya5::after{content:'✨';position:absolute;font-size:14px;line-height:1;pointer-events:none;animation:yaTw 1s ease-in-out infinite alternate}
.ya5::before{top:-7px;left:-6px}.ya5::after{bottom:-5px;right:-6px;animation-delay:.5s}
@keyframes yaTw{from{opacity:.2;transform:scale(.6) rotate(0)}to{opacity:1;transform:scale(1.15) rotate(25deg)}}

/* ---- 操作感の仕上げ その3 ---- */
/* パネル: 見出し帯に金のラインを入れ、中の面にも、やわらかい影をつける */
.panel .ph{border-bottom:3px solid #ffd54f;box-shadow:0 2px 6px #0003}
.panel .pb>.box{box-shadow:0 2px 0 #dfe6f3,0 3px 8px #1e4fa311}
.panel .pb>.box:first-child{box-shadow:0 2px 0 #ffd9a0,0 3px 10px #ff8f0022}
/* タイトルのスタートボタン: 光の筋が、ゆっくり横切る */
.title-screen.step0 .start{position:relative;overflow:hidden}
.title-screen.step0 .start::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,#ffffffcc,transparent);transform:skewX(-20deg);animation:startSheen 3.2s ease-in-out infinite}
@keyframes startSheen{0%,55%{left:-40%}100%{left:130%}}
/* レースの勝ち・的中のバナー: 金色の光が、脈打つ */
.banner.win{animation:stamp .35s cubic-bezier(.2,1.6,.4,1),bannerGlow 1.1s ease-in-out .4s infinite alternate}
@keyframes bannerGlow{from{filter:drop-shadow(0 0 4px #ffd54f)}to{filter:drop-shadow(0 0 16px #ffb300)}}

/* ---- レース情報の札(テレビ中継のように) ---- */
.rplate{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:6px 0 2px;padding:6px 10px;border-radius:10px;background:linear-gradient(#1b3f86,#0e2557);color:#fff;border:2px solid #7fa6e8;box-shadow:0 2px 0 #0a1a3d}
.rplate .rp-n{font-size:15px;font-weight:900;letter-spacing:.02em}
.rplate .rp-i{font-size:11.5px;color:#cfe0ff;width:100%}
.rplate .rp-g{font-size:12px;font-weight:900;padding:1px 8px;border-radius:6px;background:#fff;color:#0e2557}
.rplate.g1{background:linear-gradient(#a17400,#4d3600);border-color:#ffd54f;box-shadow:0 0 12px #ffb30088,0 2px 0 #2a1d00}.rplate.g1 .rp-g{background:#ffd54f;color:#4d3600}.rplate.g1 .rp-i{color:#ffe9a8}
.rplate.g2{background:linear-gradient(#59636f,#2d343d);border-color:#d0d6dd}.rplate.g2 .rp-g{background:#e3e7eb;color:#2d343d}
.rplate.g3{background:linear-gradient(#8a4a2a,#4a2412);border-color:#e0a070}.rplate.g3 .rp-g{background:#f0c9a8;color:#4a2412}
@media(max-width:620px){.rplate .rp-n{font-size:14px}.rplate{padding:5px 8px}}

/* エンディングの4つのボタン: 2列で、同じ大きさにそろえる */
.endgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.endgrid button{width:100%;margin:0;padding:12px 6px;font-size:14px;line-height:1.3;text-align:center}

/* 作者のnoteへのリンク(タイトルとエンディング) */
.notelink{display:inline-block;padding:8px 18px;border-radius:999px;background:#fff;color:var(--blue-d);font-weight:bold;font-size:14px;text-decoration:none;border:2px solid var(--blue);box-shadow:0 3px 0 #9fb4db}
.notelink:active{transform:translateY(2px);box-shadow:0 1px 0 #9fb4db}
.notelink.top{display:block;width:fit-content;margin:14px auto 0;background:#ffffffee;font-size:13px;padding:7px 16px}
.endnote{margin-top:10px;text-align:center;font-size:13px;color:var(--sub)}.endnote .notelink{margin-top:6px}

/* クラブの色(宮台=黄・ホリデー=赤・コットン=水色・パンプキン=緑)。黄色は白い文字が読みにくいので、濃い色にする */
.tag[style*="#f5b800"],.tabs button[style*="#f5b800"]{color:#4a3500}
.rcard[style*="#f5b800"] .rc-t{color:#4a3500}
.notelink.row{display:block;width:fit-content;margin:12px auto 4px}
/* レインボーの称号: 獲得の知らせでも、名前を虹色にする */
.rbname{font-size:1.12em;background:linear-gradient(90deg,#e53935,#fb8c00,#fdd835,#43a047,#1e88e5,#8e24aa,#e53935);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:rbnSlide 3s linear infinite}
@keyframes rbnSlide{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.rbname{animation:none}}
/* タイトルのセーブボタン: 名前・ゲーム内の日付・現実の保存日時を2行で出す */
.start.cont .sv{display:block;margin-top:3px;font-size:12px;font-weight:normal;letter-spacing:0;line-height:1.45;opacity:.95}
/* プチュン演出(テレビを消したときのように、光が中央へ収縮して消える) */
#puchun{position:fixed;inset:0;background:#000;z-index:2147483000;opacity:1;transition:opacity .3s ease;overflow:hidden}
#puchun .ln{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:linear-gradient(90deg,transparent,#fff7d6 12%,#fff 50%,#fff7d6 88%,transparent);box-shadow:0 0 8px 2px #ffe08a,0 0 22px 5px #ffb54799;transform-origin:center;animation:pcLine .4s cubic-bezier(.5,0,.9,.5) both}
#puchun .st{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;background:radial-gradient(circle,#fff 0 7%,#ffefb8 14%,#ffc860aa 30%,transparent 62%);animation:pcStar .4s ease-in both}
#puchun .st::before{content:"";position:absolute;left:50%;top:-6%;bottom:-6%;width:4px;margin-left:-2px;background:linear-gradient(transparent,#fff 45%,#fff 55%,transparent);box-shadow:0 0 10px 2px #ffd36acc}
@keyframes pcLine{0%{transform:scaleX(1);opacity:1}20%{transform:scaleX(1);opacity:1}85%{transform:scaleX(.02);opacity:1}100%{transform:scaleX(0);opacity:0}}
@keyframes pcStar{0%{transform:scale(.9);opacity:.9}25%{transform:scale(1);opacity:1}80%{transform:scale(1.15);opacity:1}100%{transform:scale(0);opacity:0}}
@media (prefers-reduced-motion:reduce){#puchun .ln,#puchun .st{animation:none;opacity:0}}
/* スマホでは、称号・持ち物を2列にして、縦に長くなりすぎないようにする */
@media(max-width:560px){.achv{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.achv .ach{padding:6px 8px;border-radius:9px}.achv .ach .an{font-size:13.5px;line-height:1.3}.achv .ach .meta{font-size:11.5px;line-height:1.35}.achv .ach.rainbow{border-width:2px}}

/* ================= タイトル・プロフィール画面の仕上げ(豪華版) ================= */
/* 背景: ゆっくり寄っていく動き。四隅を暗くする縁取りと、舞い上がる光の粒(どちらも画面に固定。操作はじゃましない) */
.title-screen[style*="--tbg"]::before{transform-origin:72% 62%;animation:tbgzoom 30s ease-in-out infinite alternate}
@keyframes tbgzoom{from{transform:scale(1)}to{transform:scale(1.09)}}
.title-screen.step1[style*="--tbg"]::before{animation:none;transform:scale(1.06);filter:brightness(.55) saturate(1.1) blur(2.5px)}
.tfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,transparent 52%,#000b 100%),linear-gradient(#0008,transparent 22%,transparent 70%,#0009)}
.tfx i{position:absolute;bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fff,#ffe9a8 45%,transparent 70%);opacity:0;animation:tfxrise var(--d) linear var(--t) infinite}
@keyframes tfxrise{0%{transform:translate(0,0);opacity:0}12%{opacity:.85}80%{opacity:.5}100%{transform:translate(var(--x),-92vh);opacity:0}}
/* ロゴ: 金色の立体。光の筋が、ときどき走る */
.title-screen .logo .l1{color:#4a1a00;-webkit-text-stroke:10px #4a1a00;paint-order:stroke fill;text-shadow:0 7px 0 #2a0c00,0 0 26px #ffb300aa;position:relative;display:inline-block}
.title-screen .logo .l1::after{content:attr(data-t);position:absolute;left:0;top:0;right:0;bottom:0;-webkit-text-stroke:0;text-shadow:none;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(105deg,transparent 38%,#fffc 50%,transparent 62%),linear-gradient(#fff7c9 8%,#ffd54f 40%,#e59a00 56%,#ffe27a 78%,#ffb300);background-size:260% 100%,100% 100%;background-repeat:no-repeat;animation:logoGlint 4.2s ease-in-out 1.4s infinite}
@keyframes logoGlint{0%,55%{background-position:140% 0,0 0}100%{background-position:-60% 0,0 0}}
.title-screen .logo .l2{background:linear-gradient(#2f69d0,#143a85 70%);border:3px solid #ffe08a;box-shadow:0 5px 0 #0a1f4d,0 0 0 2px #8a5a00,0 0 20px #ffd54f88;text-shadow:0 2px 0 #0a1f4d}
/* スタートボタン: 金の縁 */
.title-screen.step0 .start{background:linear-gradient(#ffc233,#ff8f00 55%,#e65100);border:3px solid #fff1b8;box-shadow:0 6px 0 #7a3000,0 0 0 2px #b9770e,0 0 28px #ffb300aa,inset 0 2px 0 #fff8;text-shadow:0 2px 0 #7a3000}
/* スタートを押したときの、白い光 */
#tflash{position:fixed;inset:0;z-index:2147483000;background:radial-gradient(circle at 50% 70%,#fff,#fff9 40%,#fff0 80%);opacity:0;pointer-events:none;animation:tflash .6s ease-out}
@keyframes tflash{0%{opacity:0}25%{opacity:1;background:#fff}100%{opacity:0}}
.tcredit{text-align:center;font-size:11px;letter-spacing:.08em;color:#fffc;text-shadow:0 1px 3px #000,0 0 6px #000;margin-top:14px}
/* プロフィール画面: 半透明の濃紺に、金の細い線 */
.title-screen.step1 .tcard{background:linear-gradient(#142a5ae6,#0a1633ee);border:1px solid #d9b24a;border-radius:18px;box-shadow:0 14px 34px #000a,inset 0 0 0 1px #ffffff1c,0 0 0 3px #0a163355;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:18px 16px 16px}
.title-screen.step1 .tc-h{background:linear-gradient(#ffe27a,#d99a1a);color:#4a2c00;border:1px solid #fff1b8;margin:-32px 0 12px;box-shadow:0 3px 0 #7a4a00;letter-spacing:.06em}
.title-screen.step1 .tcard label{color:#ffe9a8}
.title-screen.step1 .tcard input,.title-screen.step1 .tcard select{background:#0a1736;color:#fff;border:1px solid #5d7fc9;border-radius:10px}
.title-screen.step1 .fixed-note{background:#ffd54f1a;border:1px dashed #d9b24a;color:#ffe9a8}
.title-screen.step1 .op-warn{background:transparent;color:#ffd0c8;padding:4px 2px;margin:6px 0 8px;font-size:11.5px}
.title-screen.step1 .start.go{margin-top:14px;padding:16px;font-size:22px;letter-spacing:.2em;background:linear-gradient(#ffc233,#ff8f00 55%,#e65100);border:2px solid #fff1b8;box-shadow:0 5px 0 #7a3000,0 0 20px #ffb30088,inset 0 2px 0 #fff8;text-shadow:0 2px 0 #7a3000}
/* つづきから・スロット: 名前・ゲーム内の日付・保存日時が見えるカード */
.tsave{display:block;width:100%;margin-top:10px;padding:10px 12px;text-align:center;color:#fff;background:linear-gradient(#274a96,#16316f);border:1px solid #7f9bdb;border-radius:12px;box-shadow:0 3px 0 #0a1a40;font:inherit;cursor:pointer}
.tsave b{display:block;font-size:16px}
.tsave .sv{display:block;margin-top:2px;font-size:12px;line-height:1.45;font-weight:normal;color:#dbe6ff}
.tsave.main{background:linear-gradient(#3a6fdc,#1b429a);border:2px solid #ffe08a;box-shadow:0 4px 0 #0a1a40,0 0 16px #ffd54f55}
.tsave.main b{font-size:18px;color:#fff3b8}
/* そのほか: 小さなボタンを2列に */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.tsub{padding:11px 6px;font:inherit;font-size:13.5px;font-weight:bold;color:#fff;background:#ffffff14;border:1px solid #ffffff44;border-radius:12px;cursor:pointer;box-shadow:0 2px 0 #0006}
.tsub:active,.tsave:active{transform:translateY(2px);box-shadow:none}
.title-screen.step1 .notelink.row{background:#ffffff14;border:1px solid #ffffff44;color:#fff}
.title-screen.step1 .hofbox summary,.title-screen.step1 .hofbox{color:#fff}
.hofbox .ach{color:#222}.hofbox .ach .meta{color:#666}.hofbox .achv{margin-top:8px}
@media (prefers-reduced-motion:reduce){.title-screen[style*="--tbg"]::before,.tfx i,.title-screen .logo .l1::after,#tflash{animation:none}.tfx i{display:none}}
.tgrid .tsub:last-child:nth-child(odd){grid-column:1/-1}
/* キュイン演出: 画面の両端でパトランプが回り、縁が赤く脈打つ(音を消していても気づけるように) */
.patolamp{position:fixed;inset:0;z-index:2147482000;pointer-events:none;animation:patoOut .6s ease 7.5s forwards}
.patolamp u{position:absolute;inset:0;box-shadow:inset 0 0 70px 14px #ff1c1c99;animation:patoPulse .55s ease-in-out infinite alternate}
.patolamp i{position:absolute;top:calc(env(safe-area-inset-top,0px) + 120px);width:58px;height:58px;margin:0;border-radius:50%;background:radial-gradient(circle at 38% 34%,#ffd0d0 0 8%,#ff4a4a 9% 40%,#c40000 41% 75%,#6a0000 76%);box-shadow:0 0 22px 8px #ff2a2acc,0 0 60px 20px #ff000066}
.patolamp i:first-child{left:6px}.patolamp i:nth-child(2){right:6px}
.patolamp i::before{content:"";position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:conic-gradient(from 0deg,#ff2a2ae0 0 12%,transparent 12% 50%,#ff2a2ae0 50% 62%,transparent 62%);-webkit-mask:radial-gradient(circle,#000 0 12%,transparent 70%);mask:radial-gradient(circle,#000 0 12%,transparent 70%);animation:patoSpin .7s linear infinite}
.patolamp i:nth-child(2)::before{animation-direction:reverse}
@keyframes patoSpin{to{transform:rotate(360deg)}}
@keyframes patoPulse{from{opacity:.25}to{opacity:1}}
@keyframes patoOut{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.patolamp i::before,.patolamp u{animation:none}}
/* 結婚後の自宅の背景: 幅の狭い画面(スマホ)で、右端のソファが切れないよう、少し右を見せる */
@media(max-width:620px){.stage.has-bg.homefam{background-position:77% center}}

/* ---- 主人公を選ぶ(プロフィール設定) ---- */
.hero-pick-wrap{grid-column:1/-1}
.hero-pick-wrap label{display:block;font-size:12px;font-weight:bold;color:var(--blue);margin-bottom:3px}
.hero-pick{display:flex;gap:8px;justify-content:space-between}
.hero-pick .hp{flex:1 1 0;min-width:0;height:112px;padding:8px 3px 6px;border:3px solid #c9d6ee;border-radius:14px;background:linear-gradient(#f4f8ff,#dbe7fb);overflow:hidden;cursor:pointer;position:relative;transition:transform .12s,box-shadow .12s,border-color .12s}
.hero-pick .hp img{width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;filter:saturate(.9);transition:filter .12s}
.hero-pick .hp.on{border-color:#ffb300;box-shadow:0 0 0 3px #fff4c2,0 4px 10px #0003;transform:translateY(-2px)}
.hero-pick .hp.on img{filter:none}
.hero-pick .hp:active{transform:scale(.97)}
#p-name.need{border-color:#e53935;box-shadow:0 0 0 3px #e5393555}
.rktbl td.r,.rktbl th.r{white-space:nowrap;padding-left:8px}.rktbl th:first-child{white-space:nowrap}.rktbl td:nth-child(2){word-break:break-all}
.bigname2{font-size:24px;color:#1e4fa3;display:inline-block;margin:6px 0}
/* ランキングを開いているあいだは、背面の演出(ロゴの揺れ・光の粒など)を止める。止めると、スマホのスクロールがかくつかなくなる */
body.rk-open *{animation-play-state:paused!important}

/* 投稿・カードの画面のボタン: 2列に並べる。bw=全幅、bh=半幅 */
#m-choices:has(.bw,.bh){display:grid;grid-template-columns:1fr 1fr;gap:10px;justify-content:stretch;max-height:none;overflow:visible}
#m-choices:has(.bw,.bh) .bw{grid-column:1/-1}
#m-choices:has(.bw,.bh) button{width:100
/* 投稿・カードの画面のボタン: 2列に並べる。bw=全幅、bh=半幅 */
#m-choices:has(.bw,.bh){display:grid;grid-template-columns:1fr 1fr;gap:10px;justify-content:stretch;max-height:none;overflow:visible}
#m-choices:has(.bw,.bh) .bw{grid-column:1/-1}
#m-choices:has(.bw,.bh) button{width:100%;min-height:46px;padding:10px 4px;font-size:clamp(13px,4vw,15px);line-height:1.3;white-space:nowrap}