/* Parchment, brass and timber: the UI belongs to the tabletop. */
:root{--paper:#fbf1d9;--cream:#f0dfb9;--ink:#322219;--amber:#efbe53;--amber-dark:#a5722e;--hop:#64805b;--danger:#b64d3c}
body{font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Noto Sans JP',sans-serif;background:#624731}
#scene-container::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 125px 35px rgba(24,13,8,.37)}
#topbar{padding:14px 16px 24px;background:linear-gradient(180deg,rgba(34,22,16,.94),rgba(34,22,16,.6) 65%,transparent)}
#title{color:#f7dfa4;font-size:18px;letter-spacing:.06em;text-align:center;padding-left:0;text-shadow:0 2px 3px #24170f}
#title .brand{display:block;font-family:'Space Grotesk',sans-serif;color:#cdb78f;font-size:9px;letter-spacing:.20em;margin-bottom:4px;font-weight:700}
#title .beta{font-size:9px;background:rgba(232,186,94,.15);color:#ead095;border:1px solid #c7a36a;vertical-align:2px}
#mu-back{top:17px;left:16px;padding:10px 12px;min-height:40px;font-size:11px;color:#efd8a8;background:rgba(52,35,24,.78);border-color:#ab8658;border-radius:12px}
#mute-btn,#speed-btn{top:17px;width:40px;height:40px;background:#f3dfb8;border:1px solid #8f6a40;border-radius:12px;box-shadow:0 3px 8px #21130955;font-size:16px}
#mute-btn{right:16px}#speed-btn{right:64px;opacity:.80}#speed-btn.on{background:#edbe57;opacity:1}
.corner-stat{width:108px;padding:8px 6px;border-radius:12px;border:1px solid rgba(240,218,166,.5);background-image:linear-gradient(135deg,rgba(255,241,202,.10),rgba(26,17,12,.45));box-shadow:0 3px 12px #160b0755;opacity:.84;transition:opacity .2s,box-shadow .2s,transform .2s}
.corner-stat.active{opacity:1;box-shadow:0 0 0 2px #f6d784,0 5px 14px #24120866;transform:translateY(-2px)}
.corner-stat .cname{font-size:11px;color:#fff3d2;line-height:1.4;letter-spacing:.01em}
.corner-stat .chearts{font-size:11px;letter-spacing:-1px;margin-top:4px;line-height:1.35}
.corner-stat .ccoin{font-size:15px;color:#fff0c8;margin-top:3px}
.corner-stat.dead{opacity:.4;transform:none;box-shadow:0 2px 5px #0003}
#view-home{position:fixed;right:16px;top:176px;z-index:16;min-height:40px;border:1px solid #aa8556;border-radius:12px;padding:8px 12px;background:rgba(55,37,26,.8);color:#f7dfaa;font-size:11px;box-shadow:0 3px 10px #160b0740;cursor:pointer}
#bottombar{left:50%;right:auto;bottom:16px;transform:translateX(-50%);width:min(680px,calc(100% - 32px));border:1px solid #b8955d;border-radius:18px;padding:12px;background:linear-gradient(145deg,rgba(51,34,24,.97),rgba(37,25,18,.97));box-shadow:0 8px 30px #150b0780,inset 0 1px #f6db9940;gap:10px}
#log{font-size:12px;line-height:1.6;min-height:22px;max-height:44px;color:#f1dec0;padding:0 4px}
#log b{color:#f1c966}#actions{gap:8px;min-height:48px}
.btn{font-size:14px;min-height:48px;padding:12px 16px;border:1px solid #805c32;border-radius:12px;background:linear-gradient(180deg,#f6d477,#e5ae43);box-shadow:0 3px 0 #93662f;color:#3c2a18;letter-spacing:.015em}
.btn.secondary{background:linear-gradient(180deg,#f8eed8,#e6d1a9);box-shadow:0 3px 0 #a8916e}
.btn.danger{background:linear-gradient(180deg,#cd6b51,#af4738);border-color:#8a3429;box-shadow:0 3px 0 #743126;color:#fff2d2}
.btn.choice{font-size:13px;padding:12px 14px;line-height:1.5}
#dicetable{border:1px solid #bfa16e;border-radius:12px;background:#f7e8c9;padding:8px}
.dtitle{font-size:10px;color:#614c32}.dcell{border:1px solid #bd9c62;border-radius:9px;background:#ffefd0;padding:5px 2px}.dcell.zero{opacity:.52}.dface{font-size:23px}.ddmg{font-size:9px}.dcell.hit{box-shadow:0 0 0 2px #af4738;background:#f1c76a}
#toast{top:178px;border:1px solid #cca76b;border-radius:13px;background:rgba(44,29,21,.96);color:#fae8c6;font-size:14px;box-shadow:0 7px 25px #170c0760;padding:10px 16px}
#monpanel{top:177px;background:#faecd1;border:1px solid #b9935c;box-shadow:0 5px 20px #180c0780;padding:10px;width:180px}
#dieflash{border:1px solid #c39a59;background:#fcf0d8;box-shadow:0 7px 20px #1a0d0760;border-radius:17px}
#modal-layer{background:rgba(24,15,10,.73);backdrop-filter:blur(4px)}
.modal{background:radial-gradient(ellipse at top,#fff7e2,#efe0bd);border:1px solid #c9a76e;border-radius:20px;padding:20px;max-width:460px;max-height:86dvh;box-shadow:0 18px 70px #160c0790,inset 0 0 0 5px #f8eccf}
.modal h2{font-size:17px;line-height:1.6;color:#4a3321}.modal p{font-size:12px;color:#624b36}.rules{background:#b88c3d15;border:1px solid #b497632e;border-radius:12px;padding:10px;font-size:12px}
.monbtn{border:1px solid #c8aa76;border-radius:14px;background:linear-gradient(145deg,#fff7e4,#ecdbb6);padding:12px;gap:5px;box-shadow:0 2px 4px #4b311013}
.monbtn:hover{border-color:#8d6a37;background:#fff0c9}.monbtn:active{transform:translateY(1px)}
.sg-select-return{border:1px solid #a37d43;border-radius:12px;background:linear-gradient(180deg,#f5d475,#e3ae47);font-size:13px;box-shadow:0 3px 0 #a17737}
.monkey,.monnone,.monlock{border-color:#c8b083;background:#8f693909;border-radius:14px}
.facebtn{border:1px solid #bb995e;border-radius:12px;background:#faebcb;min-height:68px}.facebtn .dieface{font-size:32px}.recbtn{border:1px solid #b59462;background:#faedcf;color:#614a30;padding:5px 10px}
#skipres{top:178px;border:1px solid #9d7439;background:#efc462;font-size:13px;z-index:25;min-height:42px}
#dg-surrender{top:178px;right:110px;height:40px;border-radius:12px;background:#421c24;border-color:#bd6863;z-index:23}
body.dg .corner-stat{filter:saturate(.75)}body.dg #bottombar{background:linear-gradient(145deg,#30212f,#201520)}body.dg #scene-container::after{box-shadow:inset 0 0 145px 35px #130b2066}
.btn:focus-visible,.monbtn:focus-visible,#view-home:focus-visible{outline:3px solid #ffe08c;outline-offset:3px}
@media(max-width:600px){
 #topbar{padding:13px 8px 26px}#title{font-size:15px;padding-left:0;line-height:1.45}#title .brand{font-size:8px;letter-spacing:.10em}#title .beta{display:none}
 #mu-back{top:15px;left:10px;padding:9px 8px;font-size:10px;border-radius:10px;min-height:38px}#mute-btn,#speed-btn{top:15px;width:36px;height:38px;border-radius:10px;font-size:14px}#mute-btn{right:10px}#speed-btn{right:52px}
 .corner-stat{width:96px;border-radius:10px;padding:7px 3px}.corner-stat .cname{font-size:10px}.corner-stat .chearts{font-size:10px;letter-spacing:-1.3px}.corner-stat .ccoin{font-size:14px}
 #bottombar{bottom:max(10px,env(safe-area-inset-bottom));width:calc(100% - 20px);border-radius:16px;padding:10px;gap:8px}#log{font-size:11px;max-height:36px}.btn{font-size:13px;padding:12px 10px}.btn.choice{font-size:12px;min-height:52px}
 #view-home{right:10px;top:164px;min-height:36px;font-size:10px;padding:7px 10px;border-radius:10px}#toast{top:162px;font-size:13px;max-width:80%}#monpanel{top:162px}#skipres{top:163px}
 .modal{padding:17px;max-height:86dvh}.modal h2{font-size:16px}.modal p{font-size:12px}.monbtn{padding:10px}.monthumb{width:80px;height:80px}
 #dg-surrender{top:164px;right:98px;height:36px;font-size:11px;padding:0 9px}
}
@media(max-width:360px){#title{font-size:13px}#title .brand{font-size:7px}#mu-back{font-size:9px;padding:9px 6px}.corner-stat .cname{font-size:9px}.corner-stat .chearts{font-size:9px}}
@media(max-height:520px) and (min-width:601px){.corner-stat{padding:4px}.corner-stat .chearts{margin-top:1px}#view-home{top:130px}#toast{top:129px}#bottombar{bottom:8px;padding:8px;width:min(540px,calc(100% - 24px))}#log{max-height:20px}.btn{min-height:40px;padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.corner-stat,.btn,.monbtn{transition:none}}

/* v10.57.1（ユーザー決定）：HPなどの表示は今まで通り画面の4隅に */
.corner-tl{top:78px;left:8px}.corner-tr{top:78px;right:8px}.corner-bl{bottom:185px;left:8px}.corner-br{bottom:185px;right:8px}
#view-home{top:auto;bottom:250px}

/* v10.57.3（ユーザー指摘）：上の2つは少し上、下の2つは操作パネルのすぐ上まで下げる（下の位置はJSでパネルの高さに合わせる） */
.corner-tl,.corner-tr{top:62px}
.corner-bl,.corner-br{bottom:var(--cb,150px);transition:bottom .2s,opacity .2s}
#view-home{bottom:var(--vh,240px)}
/* 戦いの間：4隅は半透明で目立たなく、全体表示ボタンは隠す */
body.battle .corner-stat{opacity:.32;box-shadow:none;transform:none}
body.battle #view-home{opacity:0;pointer-events:none}
/* 頭の上の❤️ */
.bhearts{position:fixed;z-index:14;transform:translate(-50%,-100%);pointer-events:none;font-size:13px;letter-spacing:-1.5px;white-space:nowrap;padding:2px 6px 3px;border-radius:10px;background:rgba(38,25,17,.55);line-height:1.2}
/* 出た目の表示：上の真ん中に小さく横一列で（モンスターに重ならない） */
#dieflash{top:66px;transform:translate(-50%,0) scale(.8);display:flex;align-items:center;gap:8px;padding:4px 12px;border-radius:14px;white-space:nowrap}
#dieflash.show{transform:translate(-50%,0) scale(1)}
#dieflash .who{font-size:10px;line-height:1.2;max-width:4.5em;white-space:normal;overflow:hidden}
#dieflash .face{font-size:34px;line-height:1}
#dieflash .dmg{font-size:12px;white-space:nowrap}
/* 左右2つのボタンを1行に */
#actions.row2{flex-wrap:nowrap}
#actions.row2 > .btn{flex:1 1 0;min-width:0;padding-left:8px;padding-right:8px}
.btn small{display:block;font-size:10px;font-weight:700;opacity:.85;line-height:1.3;margin-top:1px}
.btn.choice b{display:block;font-size:14px}
.btn.choice{line-height:1.3;padding-top:8px;padding-bottom:8px}
.btn.dirL{box-shadow:0 3px 0 #93662f,inset 5px 0 0 #4fd2ff}
.btn.dirR{box-shadow:0 3px 0 #93662f,inset -5px 0 0 #ffb12e}
/* 攻撃ダイスの表：コンパクトに */
#dicetable{padding:4px 6px}
.dtitle{font-size:10px;margin-bottom:3px}
.dcells{gap:3px}
.dcell{display:flex;align-items:center;justify-content:center;gap:2px;padding:2px 1px;border-radius:7px}
.dface{font-size:18px;line-height:1}
.ddmg{font-size:11px;font-weight:800;color:#8a3429;white-space:nowrap}
.dcell.hit{transform:scale(1.08)}

/* v10.57.4（ユーザー指摘）：下の説明テキストはなし。全体表示ボタンはなくし、全体表示でない時だけ小さく案内 */
#log{display:none !important}
#view-home{display:none !important}
#view-hint{position:fixed;left:50%;bottom:calc(var(--cb,150px) + 4px);transform:translateX(-50%);z-index:16;font-size:10px;color:#f7dfaa;background:rgba(40,27,19,.6);padding:3px 9px;border-radius:9px;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}
#view-hint.show{opacity:.9}

/* v10.57.7：左上の「MONSTER UNIVERSE」と題名が重ならないように（スマホ） */
#mu-back.muLogo{top:15px;left:10px}
@media(max-width:600px){a.muLogo#mu-back{font-size:10px !important;padding:6px 7px 7px !important;gap:3px}#mu-back.muLogo .b{font-size:7px;padding:1px 3px}#title{padding-left:180px !important;padding-right:84px !important;text-align:center !important;font-size:13px !important;letter-spacing:0 !important}}
@media(max-width:360px){a.muLogo#mu-back{font-size:9px !important;padding:5px 6px 6px !important}#title{padding-left:164px !important;padding-right:80px !important;font-size:12.5px !important}}
/* v10.57.8：モンスター選び（ふだん・デスゲーム）の「ユニバースへ」もロゴに統一 */
a.muLogo.sg-ml{margin:0 0 14px;font-size:14px !important;padding:9px 13px 10px !important}

/* v10.57.9（ユーザー決定）：モンスター選びを、すごろくの盤（木の台・マス）の雰囲気に */
.modal.sgsel{background:
  repeating-linear-gradient(92deg,rgba(255,220,160,.035) 0 3px,rgba(0,0,0,.04) 3px 9px,rgba(255,220,160,.02) 9px 15px),
  linear-gradient(170deg,#8a5d37,#6d4628 55%,#5a391f);
  border:2px solid #3b2516;border-radius:22px;box-shadow:0 18px 70px #0c0604a0,inset 0 0 0 4px #a77a4a55,inset 0 2px 0 #e0b47a66;color:#fbeed2}
.modal.sgsel .selhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 10px}
.modal.sgsel h2{margin:0;font-size:18px;color:#fbe7b5;text-shadow:0 2px 0 #3a2312;letter-spacing:.02em}
.modal.sgsel .recbtn{flex:none;border:1px solid #805c32;border-radius:999px;background:linear-gradient(180deg,#f6d477,#e5ae43);box-shadow:0 2px 0 #4a2f18;color:#3c2a18;font-size:12px;padding:6px 12px}
.selrules{display:grid;gap:6px;margin:0 0 6px}
.selrules .sr{display:flex;align-items:center;gap:9px;padding:7px 10px 7px 7px;border-radius:11px;background:rgba(40,24,13,.42);border:1px solid rgba(255,214,150,.18);font-size:12.5px;font-weight:700;line-height:1.45;color:#fbeed2}
.selrules .sr i{flex:none;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:15px;border:2px solid #6d4c32;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 2px 0 #2e1c10}
.selrules .t-wood i{background:#e8d2a4}
.selrules .t-shop i{background:#ad7840;color:#fff0c8}
.selrules .t-home i{background:#4a9a52}
.selrules .t-goal{justify-content:center;padding:8px;background:linear-gradient(180deg,#f6d477,#e3ae47);border:1px solid #805c32;color:#3c2a18;font-size:13.5px;font-weight:900;box-shadow:0 3px 0 #4a2f18;letter-spacing:.04em}
.modal.sgsel .monsec{color:#f3d796;font-size:12px;letter-spacing:.08em;margin:14px 0 7px;text-shadow:0 1px 0 #2e1c10}
/* モンスターのカード＝盤のマス（土の上面＋木のふち） */
.modal.sgsel .monbtn{background:radial-gradient(ellipse at 50% 35%,#f4dca8,#e2c085 70%,#d4ad6c);border:3px solid #6d4c32;border-radius:16px;box-shadow:inset 0 0 0 2px #f7e5bd88,0 4px 0 #3f2716,0 7px 12px #1a0e0660;color:#3c2a18;padding:10px 8px}
.modal.sgsel .monbtn:hover{background:radial-gradient(ellipse at 50% 35%,#fbe6b8,#e9ca90 70%,#dab474);border-color:#5a3c26}
.modal.sgsel .monbtn:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px #f7e5bd88,0 2px 0 #3f2716}
.modal.sgsel .montype{color:#8a4e1e}
.modal.sgsel .monkey,.modal.sgsel .monnone,.modal.sgsel .monlock{border:2px dashed rgba(255,226,170,.38);background:rgba(40,24,13,.35);color:#e9d3a6;border-radius:16px}
.modal.sgsel .monkey b,.modal.sgsel .monlock b{color:#fbe7b5}
.modal.sgsel .monlock span{color:#e1c896}
.modal.sgsel a.muLogo.sg-ml{margin-bottom:12px}

/* v10.57.10（ユーザー指摘）：説明は1つの枠に、モンスターは横長のカードで縦を詰める */
.modal.sgsel .recbtn{padding:6px 14px}
.modal.sgsel .selrules{display:block;margin:0 0 4px;padding:8px 11px;border-radius:12px;background:rgba(40,24,13,.42);border:1px solid rgba(255,214,150,.18);font-size:12px;font-weight:700;line-height:1.6;color:#fbeed2}
.modal.sgsel .selrules b{display:block;margin-top:2px;color:#f6d477;font-size:13px;text-align:center;letter-spacing:.06em}
.modal.sgsel .monsec{margin:11px 0 6px}
.modal.sgsel .mongrid{gap:7px}
.modal.sgsel .monbtn.mrow{flex-direction:row;align-items:center;text-align:left;gap:6px;padding:6px 7px 6px 4px;border-radius:13px}
.modal.sgsel .mrow .monthumb{width:54px;height:54px;flex:none;border-radius:0;background:none;object-fit:contain}
.modal.sgsel .mrow .mi{min-width:0;flex:1}
.modal.sgsel .mrow .mn{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.modal.sgsel .mrow .mn b{font-size:12.5px;line-height:1.25}
.modal.sgsel .mrow .montype{margin:0;font-size:9px}
.modal.sgsel .mrow .monhp{font-size:9.5px;margin-top:2px;letter-spacing:-1.5px}
.modal.sgsel .mrow .monatk{font-size:8.5px;margin-top:1px;justify-content:flex-start;letter-spacing:-1.5px}
.modal.sgsel .monkey{flex-direction:row;gap:8px;padding:6px;font-size:11px}
.modal.sgsel .monkey .lockicon{font-size:24px;margin:0}
.modal.sgsel .monkey small{display:block}
.modal.sgsel .monlock{padding:5px 8px;gap:8px}
.modal.sgsel .monlock img.monthumb{width:44px;height:44px}
.modal.sgsel .monlock b{font-size:12px;margin:0}
.modal.sgsel .monlock span{font-size:11px}
/* v10.57.11：説明はマスの色のアイコン付きのまま、全体を1つの枠に */
.modal.sgsel .selrules.one{display:grid;gap:5px;padding:8px 10px 8px 8px}
.modal.sgsel .selrules.one .sr{background:none;border:0;padding:0;gap:8px;font-size:12px;line-height:1.4}
.modal.sgsel .selrules.one .sr i{width:24px;height:24px;font-size:13px;border-radius:7px}
.modal.sgsel .selrules.one b{margin-top:3px;padding-top:6px;border-top:1px dashed rgba(255,214,150,.25)}

/* v10.57.14（ユーザー決定）：デスゲームの入口は黒い背景に赤い「デスゲーム」 */
.modal.sgsel.dgsel{background:radial-gradient(ellipse at 50% 0%,#2a0d10,#0d0809 60%,#070505);border:1px solid #5b1a1d;box-shadow:0 18px 70px #000c,inset 0 0 0 3px #3a0f12aa,inset 0 0 60px #4a0a0e55;color:#eadcd2}
.modal.dgsel h2.dgtitle{margin:2px 0 10px;font-size:26px;font-weight:900;letter-spacing:.08em;color:#ff2d2d;text-shadow:0 0 12px #ff1a1a99,0 2px 0 #3a0000}
.modal.dgsel .dgrules{padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,80,80,.18);font-size:12.5px;font-weight:700;line-height:1.7}
.modal.dgsel .dgred{color:#ff4b4b}
.modal.dgsel .dginfo{margin:8px 0 4px;border-radius:12px;border:1px solid rgba(255,80,80,.18);background:rgba(255,255,255,.03)}
.modal.dgsel .dginfo summary{cursor:pointer;padding:9px 11px;font-size:12.5px;font-weight:800;color:#f0b8b0;list-style:none}
.modal.dgsel .dginfo summary::-webkit-details-marker{display:none}
.modal.dgsel .dginfo summary::before{content:'▸ ';color:#ff4b4b}
.modal.dgsel .dginfo[open] summary::before{content:'▾ '}
.modal.dgsel .dginfo p{margin:6px 11px 8px;font-size:11.5px;line-height:1.6;color:#d9c8be}
.modal.dgsel .dgrisk{width:calc(100% - 22px);margin:0 11px 4px;font-size:10.5px;color:#e6d6cc}
.modal.dgsel .dgrisk td{border:1px solid #ffffff22;padding:3px 4px}
.modal.dgsel .dgnote{margin-top:10px;font-size:12px;color:#d9c8be;line-height:1.6}
.modal.dgsel .dgnote b{color:#ff8a80}
.modal.dgsel .monbtn.dggo{margin-top:12px;background:linear-gradient(145deg,#2a1214,#170a0b);border:2px solid #8a1f22;box-shadow:0 0 0 1px #000,0 4px 14px #ff1a1a33;color:#f2e2d8}
.modal.dgsel .monbtn.dggo:hover{background:linear-gradient(145deg,#361719,#1c0c0d);border-color:#b02a2d}
.modal.dgsel .monbtn.dggo .montype{color:#e0a090}
.modal.dgsel .dgcta{flex:none;padding:8px 10px;border-radius:10px;background:#b3161b;color:#fff;font-size:12px;font-weight:900;line-height:1.3;text-align:center;box-shadow:0 2px 0 #4a0608}

/* v10.57.15（ユーザー決定）：デスゲームでは、文字の出る画面（SHOP・ゲーム終了・お知らせなど）を黒い背景に */
body.dg .modal{background:radial-gradient(ellipse at 50% 0%,#24100f,#0d0809 60%,#070505);border:1px solid #5b1a1d;box-shadow:0 18px 70px #000c,inset 0 0 0 3px #3a0f12aa;color:#eadcd2}
body.dg .modal h2{color:#ff4b4b;text-shadow:0 0 10px #ff1a1a66}
body.dg .modal p{color:#d9c8be}
body.dg .modal p b{color:#fff0e8}
body.dg .modal .rules{background:rgba(255,255,255,.04);border-color:rgba(255,80,80,.18);color:#e6d6cc}
body.dg .modal .facebtn{background:#1c1213;border:1px solid #6a2a2c;color:#f0e2d8}
body.dg .modal .facebtn.disabled{background:#120c0d;color:#7a6a64;opacity:.55}
body.dg .modal .facebtn:active{background:#4a1416}
body.dg .modal .monbtn{background:linear-gradient(145deg,#2a1214,#170a0b);border:1px solid #8a1f22;color:#f2e2d8;box-shadow:0 3px 0 #000}
body.dg .modal .monbtn:hover{background:linear-gradient(145deg,#361719,#1c0c0d);border-color:#b02a2d}
body.dg .modal .btn.secondary{background:linear-gradient(180deg,#2a1a1b,#1a1011);color:#f0e2d8;border-color:#6a2a2c;box-shadow:0 3px 0 #000}
body.dg .modal .dgfate{background:#000;border:1px solid #5b1a1d;color:#f2ead9}
body.dg .modal .rank td{border-bottom-color:#ffffff1a}
body.dg .modal .defeats span{background:#ffffff10;color:#a89890}
body.dg .modal .defeats span.on{background:#b3161b;color:#fff}
body.dg .modal .unlockmsg{background:#1c1213;border-color:#8a1f22;color:#f0e2d8}
.modal .monbtn.off{opacity:.4;pointer-events:none}

/* v10.57.23：ポップ乱入のカットイン */
#cutin{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(10,6,4,.55);animation:ciBg .25s ease-out both;cursor:pointer;overflow:hidden}
#cutin.out{animation:ciOut .3s ease-in both}
#cutin .ci-flash{position:absolute;inset:0;background:#fff;animation:ciFlash .35s ease-out both;pointer-events:none}
#cutin .ci-band{position:relative;width:130%;height:190px;transform:skewY(-7deg);background:linear-gradient(90deg,#1a2a06,#3d6b0c 40%,#86B81A 50%,#3d6b0c 60%,#1a2a06);border-top:4px solid #ffd84d;border-bottom:4px solid #ffd84d;box-shadow:0 0 40px #86B81A99;display:flex;align-items:center;justify-content:center;gap:10px;animation:ciBand .45s cubic-bezier(.2,1.4,.4,1) both;overflow:hidden}
#cutin .ci-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.14) 22px 26px);animation:ciLines .5s linear infinite;pointer-events:none}
#cutin img{position:relative;width:170px;height:170px;object-fit:contain;transform:skewY(7deg);filter:drop-shadow(0 6px 10px #000a);animation:ciImg .5s .1s cubic-bezier(.2,1.3,.4,1) both}
#cutin .ci-txt{position:relative;transform:skewY(7deg);display:flex;flex-direction:column;color:#fff;text-shadow:0 3px 0 #1a2a06,0 0 12px #000;animation:ciTxt .5s .18s cubic-bezier(.2,1.3,.4,1) both}
#cutin .ci-txt small{font-size:11px;letter-spacing:.4em;color:#ffd84d;font-weight:900}
#cutin .ci-txt b{font-size:34px;line-height:1.1;font-weight:900;letter-spacing:.04em}
#cutin .ci-txt span{font-size:26px;font-weight:900;color:#e8ff9a}
#cutin .ci-txt em{font-style:normal;font-size:12px;font-weight:800;margin-top:4px;color:#fff3c4}
@keyframes ciBg{from{opacity:0}to{opacity:1}}
@keyframes ciOut{to{opacity:0}}
@keyframes ciFlash{from{opacity:.9}to{opacity:0}}
@keyframes ciBand{from{transform:skewY(-7deg) translateX(110%)}to{transform:skewY(-7deg) translateX(0)}}
@keyframes ciImg{from{transform:skewY(7deg) translateX(-160%) scale(.6)}to{transform:skewY(7deg) translateX(0) scale(1)}}
@keyframes ciTxt{from{transform:skewY(7deg) translateX(140%);opacity:0}to{transform:skewY(7deg) translateX(0);opacity:1}}
@keyframes ciLines{from{background-position:0 0}to{background-position:-104px 0}}
@media(prefers-reduced-motion:reduce){#cutin,#cutin *{animation:none!important}}