:root{
  --bg:#0e090c; --panel:#1a1116; --panel2:#22161c; --line:#3b2731; --line2:#5a3a48;
  --text:#f2e7eb; --dim:#a68f99; --crimson:#b3304d; --rose:#e2617f; --gold:#cfa95e; --gold2:#f0d79a;
  --hp:#c8344f; --hp2:#ff6f8a; --ehp:#7d2a9e; --xp:#cfa95e; --shield:#9fb6c9;
  --N:#a3a3a3; --R:#72c27a; --SR:#62a5ea; --SSR:#e8b64c; --UR:#ff4f7b;
  --mincho:'Shippori Mincho B1',serif; --sans:'Zen Kaku Gothic New',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-tap-highlight-color:transparent}
body{overflow-x:hidden}
button{font:inherit;color:inherit}
.hidden{display:none!important}
#app{min-height:100%;position:relative}
.screen{min-height:100vh;min-height:100dvh;position:relative}

/* ---------- 共通部品 ---------- */
.btn{background:var(--panel2);border:1px solid var(--line2);color:var(--text);padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:700;letter-spacing:.04em;transition:background .15s,border-color .15s,transform .05s}
.btn:hover{border-color:var(--gold);}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#c43a58,#8e2239);border-color:#e0607e}
.btn.gold{background:linear-gradient(180deg,#d8b46a,#9c7a35);border-color:var(--gold2);color:#1a1006}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px;font-size:13px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:8px;flex-wrap:wrap}
.msg{min-height:1.3em;color:var(--rose);font-size:14px;margin:8px 0 0}
.tiny{font-size:11px;color:var(--dim)}
.pill{display:inline-flex;align-items:center;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:13px}
h2,h3{font-family:var(--mincho);font-weight:800;letter-spacing:.06em;margin:0 0 10px}
h2{font-size:22px} h3{font-size:17px}
.sec-note{color:var(--dim);font-size:13px;margin:-4px 0 12px}

/* ---------- 画像枠（画像が無いときは名前入りの仮絵） ---------- */
.portrait{position:relative;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:linear-gradient(160deg,#3a1c2a,#150b10 70%);border:1px solid var(--line2)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.portrait .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mincho);font-weight:800;color:rgba(240,215,154,.22);font-size:clamp(40px,45cqw,120px);line-height:1}
.portrait{container-type:inline-size}
.portrait .ph-name{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 8px;background:linear-gradient(transparent,rgba(0,0,0,.75));font-family:var(--mincho);font-weight:800;font-size:15px;text-align:center}
.portrait.locked img{filter:grayscale(1) brightness(.25)}
.portrait.locked .ph{color:rgba(255,255,255,.08)}
.portrait .lock{position:absolute;inset:6px 6px auto 6px;background:rgba(0,0,0,.7);border:1px solid var(--line2);border-radius:6px;padding:4px 6px;font-size:11px;text-align:center;color:var(--gold2)}

/* ---------- タイトル ---------- */
#scr-title{display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}
.title-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,#4a1428 0%,#160a10 55%,#0a0608 100%);background-size:cover;background-position:center}
.title-bg.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,6,8,.92) 0%,rgba(10,6,8,.55) 55%,rgba(10,6,8,.2) 100%)}
.title-box{position:relative;width:min(420px,100%);margin-right:auto;margin-left:max(0px,6vw)}
.title-sub{font-family:var(--mincho);color:var(--gold);letter-spacing:.5em;margin:0 0 6px;font-size:14px}
.logo{font-family:var(--mincho);font-weight:800;font-size:clamp(48px,11vw,84px);line-height:.92;margin:0 0 14px;letter-spacing:.04em;background:linear-gradient(180deg,#fff4f6 10%,#e2617f 60%,#8e2239);-webkit-background-clip:text;background-clip:text;color:transparent}
.title-lead{color:var(--dim);font-size:14px;margin:0 0 22px}
.auth{display:flex;flex-direction:column;gap:10px}
.auth input{background:rgba(20,12,16,.85);border:1px solid var(--line2);color:var(--text);padding:12px 14px;border-radius:6px;font-size:16px}
.auth input:focus{outline:none;border-color:var(--gold)}
.auth .row .btn{flex:1}

/* ---------- ホーム ---------- */
.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:rgba(14,9,12,.9);position:sticky;top:0;z-index:5;backdrop-filter:blur(6px)}
.brand{font-family:var(--mincho);font-weight:800;letter-spacing:.12em;color:var(--rose)}
.soul{flex:1;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim);min-width:0}
.soul b{color:var(--gold2);font-size:15px;white-space:nowrap}
.soul .mini-bar{flex:1;max-width:180px;height:5px;background:#2b1b22;border-radius:3px;overflow:hidden}
.soul .mini-bar i{display:block;height:100%;background:var(--gold)}
.tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--bg);position:sticky;top:49px;z-index:4}
.tabs button{background:none;border:none;padding:12px 14px;color:var(--dim);cursor:pointer;font-weight:700;white-space:nowrap;border-bottom:2px solid transparent}
.tabs button.on{color:var(--text);border-bottom-color:var(--rose)}
.home-main{max-width:1100px;margin:0 auto;padding:18px 14px 60px}

.step-title{display:flex;align-items:baseline;gap:10px;margin:6px 0 10px}
.step-title .n{font-family:var(--mincho);color:var(--gold);font-size:20px}
.job-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.job-card{cursor:pointer;border-radius:9px;padding:0;background:none;border:2px solid transparent;text-align:left}
.job-card.sel{border-color:var(--gold)}
.job-card .role{font-size:11px;color:var(--dim);padding:4px 2px 0}
.job-detail{display:grid;grid-template-columns:200px 1fr;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;margin:14px 0}
.job-detail .lore{color:var(--dim);font-size:14px;margin:0 0 10px}
.skill-list{display:grid;gap:6px}
.skill-list div{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:7px 10px;font-size:13px}
.skill-list b{color:var(--gold2);margin-right:6px}
.skill-list small{color:var(--dim)}
.dun-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.dun{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;text-align:left;position:relative;overflow:hidden;min-height:84px}
.dun .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.35}
.dun>*:not(.bgimg){position:relative}
.dun b{font-family:var(--mincho);font-size:16px;display:block}
.dun small{color:var(--dim)}
.dun.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.dun.locked{opacity:.4;cursor:not-allowed}
.sortie-bar{position:sticky;bottom:0;margin-top:16px;padding:12px;background:rgba(14,9,12,.95);border:1px solid var(--line);border-radius:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sortie-bar .sum{flex:1;font-size:14px;color:var(--dim);min-width:180px}
.sortie-bar .sum b{color:var(--text)}

/* 装備カード */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.item{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--N);border-radius:8px;padding:10px 12px;font-size:13px}
.item .iname{font-weight:700;font-size:14px;margin-bottom:2px}
.item .imeta{color:var(--dim);font-size:11px;margin-bottom:6px}
.item ul{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.item li{color:#e4d6db}
.item .acts{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.item.sel{outline:2px solid var(--gold)}
.r-N{border-left-color:var(--N)} .r-R{border-left-color:var(--R)} .r-SR{border-left-color:var(--SR)} .r-SSR{border-left-color:var(--SSR)} .r-UR{border-left-color:var(--UR)}
.rt{font-weight:800;font-size:11px;padding:1px 6px;border-radius:3px;margin-right:6px;color:#111}
.rt-N{background:var(--N)} .rt-R{background:var(--R)} .rt-SR{background:var(--SR)} .rt-SSR{background:var(--SSR)} .rt-UR{background:var(--UR);color:#fff}
.diff-up{color:#7fd88a} .diff-down{color:#ff7d93}

/* 加護 */
.bless-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.bless{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;align-items:center;gap:10px}
.bless .bi{flex:1}
.bless b{font-family:var(--mincho)}
.bless small{color:var(--dim);display:block}
.bless .pts{font-size:20px;color:var(--gold2);font-weight:800;min-width:48px;text-align:right}

/* 図鑑・ランキング */
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.book-grid .cap{font-size:12px;color:var(--dim);margin-top:3px}
.rank-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.rank-tabs .on{border-color:var(--gold);color:var(--gold2)}
.rank{width:100%;border-collapse:collapse;font-size:14px}
.rank td{padding:9px 8px;border-bottom:1px solid var(--line)}
.rank td:first-child{width:46px;font-family:var(--mincho);font-weight:800;color:var(--dim);text-align:center}
.rank tr.top1 td:first-child{color:#f0d79a} .rank tr.top2 td:first-child{color:#d7d7e0} .rank tr.top3 td:first-child{color:#d39a6a}
.rank tr.me td{background:rgba(179,48,77,.15)}
.rank td:last-child{text-align:right;color:var(--gold2);font-weight:700}
.stats-box{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:18px}
.stats-box div{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px}
.stats-box small{display:block;color:var(--dim);font-size:11px}
.stats-box b{font-size:18px}

/* ---------- 冒険画面 ---------- */
#scr-run{display:flex;flex-direction:column;max-width:1200px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom)}
.run-bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 0%,#3a1424,#0e090c 70%);background-size:cover;background-position:center}
.run-bg.has-img::after{content:"";position:absolute;inset:0;background:rgba(10,6,8,.72)}
.run-top{display:flex;justify-content:space-between;align-items:center;padding:10px 14px}
.where{font-family:var(--mincho);font-weight:800;display:flex;gap:10px;align-items:baseline}
.where b{color:var(--gold2);font-size:22px}
.run-top-r{display:flex;gap:8px;align-items:center}
.stage{display:grid;grid-template-columns:minmax(200px,300px) 1fr minmax(200px,300px);gap:16px;padding:0 14px;align-items:start}
.unit{display:flex;flex-direction:column;gap:8px}
.unit-info{background:rgba(26,17,22,.9);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.uname{font-family:var(--mincho);font-weight:800;margin-bottom:5px}
.uname small{color:var(--dim);font-family:var(--sans);font-weight:500}
.bar{position:relative;height:16px;background:#2a161d;border-radius:4px;overflow:hidden;margin-bottom:4px}
.bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--hp),var(--hp2));transition:width .35s}
.bar.enemy i{background:linear-gradient(90deg,#5a1f78,#b04ad6)}
.bar span{position:relative;font-size:11px;font-weight:700;padding-left:6px;line-height:16px;text-shadow:0 1px 2px #000}
.bar.xp{height:4px}
.bar.xp i{background:var(--xp)}
.tags{display:flex;gap:4px;flex-wrap:wrap;min-height:18px}
.tag{font-size:11px;padding:1px 6px;border-radius:3px;background:#3b2731}
.tag.bad{background:#5b1f2d;color:#ffb3c0} .tag.good{background:#2a4430;color:#b8f0c0} .tag.sh{background:#2e3b47;color:#cfe3f3}
.stage.mode-doors .center{grid-column:2 / 4}
.center{min-height:200px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.door-list{display:grid;gap:10px}
.door{display:flex;gap:12px;align-items:center;background:rgba(26,17,22,.92);border:1px solid var(--line2);border-radius:10px;padding:14px;cursor:pointer;text-align:left;transition:border-color .15s,transform .1s}
.door:hover{border-color:var(--gold);transform:translateX(3px)}
.door .ico{width:44px;height:56px;border-radius:22px 22px 4px 4px;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--mincho);font-weight:800;color:var(--gold2);flex-shrink:0;background:#120a0e}
.door.t-elite .ico{border-color:#e2617f;color:#ff9db1} .door.t-boss .ico{border-color:#ff4f7b;color:#ff4f7b;background:#2a0a14}
.door.t-spring .ico{border-color:#79b8c9;color:#a6e0ee} .door.t-treasure .ico{border-color:#f0d79a}
.door b{font-family:var(--mincho);display:block}
.door small{color:var(--dim)}
.center-title{font-family:var(--mincho);font-weight:800;font-size:18px;text-align:center;color:var(--gold2)}
.vs{font-family:var(--mincho);font-weight:800;font-size:46px;text-align:center;color:rgba(226,97,127,.35)}
.log{margin:12px 14px 0;background:rgba(10,6,8,.8);border:1px solid var(--line);border-radius:8px;padding:8px 12px;height:128px;overflow-y:auto;font-size:13px;line-height:1.55}
.log p{margin:0}
.log .s-p{color:#ffc2cf} .log .s-e{color:#d7b3ff} .log .s-sys{color:var(--gold2)}
.log .k-skill{font-weight:700}
.log .sep{border-top:1px dashed var(--line);margin:4px 0}
.actions{display:grid;grid-template-columns:repeat(4,1fr) 92px;gap:8px;padding:12px 14px 14px}
.skill{position:relative;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:9px 8px;text-align:left;cursor:pointer;min-height:64px}
.skill b{display:block;font-size:14px}
.skill small{display:block;color:var(--dim);font-size:11px;line-height:1.35;margin-top:2px}
.skill:hover:not(:disabled){border-color:var(--gold)}
.skill:disabled{opacity:.45}
.skill .cdn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,6,8,.6);border-radius:8px;font-size:26px;font-weight:800;color:var(--gold2)}
.skill.potion{text-align:center;background:linear-gradient(180deg,#3a1424,#22161c)}
.actions.wide{grid-template-columns:1fr}

/* ダメージ表示 */
.floater{position:absolute;left:50%;top:38%;transform:translate(-50%,0);font-weight:800;font-size:30px;pointer-events:none;text-shadow:0 2px 0 #000,0 0 8px #000;animation:float 1s ease-out forwards;z-index:3;white-space:nowrap}
.floater.dmg{color:#fff} .floater.crit{color:#ffd36b;font-size:38px} .floater.heal{color:#7fe39a} .floater.miss{color:#c9c9c9;font-size:22px}
@keyframes float{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-50px)}}
.shake{animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.flash::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(255,80,110,.35);animation:fl .3s forwards}
@keyframes fl{to{opacity:0}}
.dead img{filter:grayscale(1) brightness(.4);transition:filter .6s}

/* モーダル・トースト */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:50;padding:14px}
.modal-box{background:var(--panel);border:1px solid var(--line2);border-radius:12px;width:min(720px,100%);max-height:90vh;overflow-y:auto;padding:18px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#2a1620;border:1px solid var(--rose);padding:10px 18px;border-radius:8px;z-index:60;font-size:14px;max-width:90vw}
.loot-wrap{display:grid;gap:10px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compare .lbl{font-size:12px;color:var(--dim);margin-bottom:4px}
.result-big{font-family:var(--mincho);font-weight:800;font-size:30px;text-align:center;margin:4px 0}
.result-big.dead{color:var(--rose)} .result-big.clear{color:var(--gold2)}
.result-lines{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:12px 0}
.result-lines div{background:var(--panel2);border-radius:6px;padding:8px;text-align:center}
.result-lines small{display:block;color:var(--dim);font-size:11px}
.eq-slot{font-size:11px;color:var(--gold);margin:10px 0 4px}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px;font-size:13px}
.statgrid div{background:var(--panel2);padding:6px 8px;border-radius:5px}
.statgrid small{color:var(--dim);margin-right:4px}

/* ---------- スマホ ---------- */
@media (max-width:820px){
  .stage{grid-template-columns:1fr 1fr;gap:10px;padding:0 10px}
  .stage .center,.stage.mode-doors .center{grid-column:1 / -1;order:3;min-height:0}
  .stage.mode-doors .hero{grid-column:1 / -1;flex-direction:row;align-items:flex-start}
  .stage.mode-doors .hero .portrait{width:34%;flex-shrink:0}
  .stage.mode-doors .hero .unit-info{flex:1}
  .stage.mode-battle .center{display:none}
  .uname{font-size:14px}
  .actions{grid-template-columns:repeat(2,1fr);padding:10px}
  .actions .potion{grid-column:1 / -1;min-height:44px}
  .log{height:104px;margin:10px 10px 0;font-size:12px}
  .job-detail{grid-template-columns:110px 1fr}
  .compare{grid-template-columns:1fr}
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .tabs{top:47px}
}
.soul span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
@media (max-width:480px){ .brand{font-size:13px} .soul span:first-child{display:none} }

/* =====================================================================
   ChatGPTで作ったUI素材による装飾（素材がない場合は上の地味な見た目のまま）
   ===================================================================== */
:root{--frame:url("img/ui/ui_frame.png");--frame-tall:url("img/ui/ui_frame_tall.png");--btn-red:url("img/ui/ui_btn_red.png");--btn-dark:url("img/ui/ui_btn_dark.png")}
body{background:radial-gradient(ellipse at 50% -10%,#2a0f1a 0%,#0e090c 60%) fixed,var(--bg)}

/* ボタン */
.btn{border:12px solid transparent;border-width:10px 22px;border-image:var(--btn-dark) 34 78 fill / 10px 22px / 0 stretch;background:none;padding:4px 6px;min-height:42px;color:#f3e3c4;text-shadow:0 1px 2px #000;border-radius:0}
.btn.primary{border-image:var(--btn-red) 46 80 fill / 12px 22px / 0 stretch;color:#fff3dc}
.btn.gold{border-image:var(--btn-red) 46 80 fill / 12px 22px / 0 stretch;color:#ffe7a8}
.btn.small{border-width:8px 16px;border-image-width:8px 16px;min-height:34px;padding:2px 4px;font-size:13px}
.btn:hover{filter:brightness(1.18)}
.btn.ghost{opacity:.9}
.btn:disabled{filter:grayscale(.7) brightness(.7)}

/* 額縁つきパネル */
.framed,.job-detail,.modal-box,.item,.bless,.stats-box div,.dun,.door,.unit-info,.log,.sortie-bar,.shop-item,.skill{border:16px solid transparent;border-image:var(--frame) 64 / 16px / 0 stretch;border-radius:0;background:linear-gradient(180deg,rgba(32,16,22,.94),rgba(18,10,14,.96));background-clip:padding-box}
.item{border-width:12px;border-image-width:12px;padding:6px 8px}
.item.r-SR{box-shadow:inset 0 0 0 1px rgba(98,165,234,.35)} .item.r-SSR{box-shadow:inset 0 0 18px rgba(232,182,76,.25)} .item.r-UR{box-shadow:inset 0 0 22px rgba(255,79,123,.35)}
.modal-box{border-width:22px;border-image-width:22px;padding:10px 14px}
.unit-info,.log{border-width:12px;border-image-width:12px;padding:4px 8px}
.skill{border-width:12px;border-image-width:12px;padding:4px 6px}
.skill:hover:not(:disabled){filter:brightness(1.2)}
.dun{border-width:14px;border-image-width:14px;padding:6px 10px}
.door{border-width:14px;border-image-width:14px;padding:6px 10px}
.stats-box div{border-width:10px;border-image-width:10px;padding:4px 8px}

/* 立ち絵の額縁 */
.portrait{border:none;border-radius:4px;overflow:visible}
.portrait img{border-radius:4px}
.portrait::after{content:"";position:absolute;inset:-6px;border:24px solid transparent;border-image:var(--frame-tall) 96 / 24px / 0 stretch;pointer-events:none;z-index:2}
.job-card .portrait::after{inset:-4px;border-width:14px;border-image-width:14px}
.job-card.sel{border:none;filter:drop-shadow(0 0 10px rgba(240,215,154,.6))}
.job-card{border:none}
.book-grid .portrait::after{border-width:12px;border-image-width:12px;inset:-3px}
.portrait .lock,.portrait .ph-name{z-index:3}

/* アイコン */
.ic{width:22px;height:22px;object-fit:contain;vertical-align:middle;flex-shrink:0}
.ic.xs{width:18px;height:18px;margin-right:4px}
.ic.sm{width:24px;height:24px}
.ic.lg{width:64px;height:64px}
.ic.h{width:34px;height:34px;margin-right:8px;vertical-align:-8px}
.ic.slot{width:20px;height:20px;margin-right:4px;vertical-align:-5px}
.tabs button img{width:22px;height:22px;vertical-align:-6px;margin-right:6px}
.tabs button.on{color:#ffe7a8;border-bottom-color:var(--gold)}
.door .ico{width:58px;height:58px;border:none;background:none;border-radius:0;position:relative}
.door .ico em{font-style:normal}
.door .ico .medal{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.door .ico .medal+em,.door .ico em:has(+.medal){visibility:hidden}

/* 上部バー */
.topbar{border-bottom:none;background:linear-gradient(180deg,rgba(26,10,16,.98),rgba(14,9,12,.92));box-shadow:0 2px 0 rgba(207,169,94,.35),0 6px 18px rgba(0,0,0,.6)}
.soul .nm{color:var(--text)}
.coins{display:flex;align-items:center;gap:6px;background:linear-gradient(180deg,#2c1414,#170b0e);border:1px solid rgba(207,169,94,.55);border-radius:999px;padding:3px 12px 3px 6px;cursor:pointer;color:var(--gold2)}
.coins b{font-size:15px;font-variant-numeric:tabular-nums}
.coins small{color:var(--dim);font-size:11px}
.boosts{display:flex;gap:4px;flex-wrap:wrap}
.pill.boost{border-color:rgba(207,169,94,.6);color:var(--gold2);font-size:11px}
.title-sound{margin-top:10px}

/* タイトル */
.logo-wrap{margin:0 0 6px}
.logo-img{width:min(460px,100%);display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.8))}
.title-box{padding:22px 24px;border:22px solid transparent;border-image:var(--frame) 64 / 22px / 0 stretch;background:linear-gradient(180deg,rgba(20,8,12,.78),rgba(10,6,8,.86));background-clip:padding-box;backdrop-filter:blur(2px)}
.title-box .logo-wrap{margin-top:-6px}

/* ショップ */
.shop-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:8px 14px;margin-bottom:10px}
.shop-bal{display:flex;align-items:center;gap:10px}
.shop-bal small{display:block;color:var(--dim);font-size:12px}
.shop-bal b{font-size:30px;color:var(--gold2);font-family:var(--mincho);font-variant-numeric:tabular-nums}
.shop-status{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.shop-status span{font-size:12px;padding:3px 9px;border:1px solid var(--line2);border-radius:999px;color:#e8d8c8;background:rgba(0,0,0,.25)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.shop-item{display:grid;grid-template-columns:84px 1fr;grid-template-rows:1fr auto;gap:4px 12px;padding:8px 10px;align-items:start}
.shop-item .shop-ic{grid-row:1 / 3;display:flex;align-items:center;justify-content:center}
.shop-item .shopimg{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.7))}
.shop-item h3{font-size:16px;margin:0 0 4px;color:var(--gold2)}
.shop-item p{margin:0;font-size:13px;color:#e4d6db;line-height:1.5}
.shop-item .owned{display:block;margin-top:4px;color:var(--dim);font-size:12px}
.shop-item .price{justify-self:end;font-size:16px;font-variant-numeric:tabular-nums;min-width:120px}
.shop-item.sold{opacity:.55}
.chest-anim{display:flex;justify-content:center;margin:4px 0 6px}
.chestimg{width:150px;height:150px;object-fit:contain;animation:chestpop .7s ease-out}
.r-glow-SSR .chestimg{filter:drop-shadow(0 0 24px rgba(232,182,76,.9))}
.r-glow-UR .chestimg{filter:drop-shadow(0 0 30px rgba(255,79,123,1))}
@keyframes chestpop{0%{transform:scale(.4) rotate(-8deg);opacity:0}60%{transform:scale(1.12) rotate(3deg);opacity:1}100%{transform:scale(1)}}
.item.pop{animation:itempop .45s ease-out both}
@keyframes itempop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.confirm-msg{margin:0 0 16px;line-height:1.7;font-size:15px}
.modal.confirm{z-index:70}

@media (max-width:820px){
  .shop-grid{grid-template-columns:1fr}
  .shop-item{grid-template-columns:64px 1fr}
  .shop-item .shopimg{width:64px;height:64px}
  .coins small{display:none}
  .topbar{flex-wrap:wrap}
  .door .ico{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){.chestimg,.item.pop{animation:none}}
/* 調整 */
.btn.primary,.btn.gold{background:none}
.btn{white-space:nowrap}
.actions{grid-template-columns:repeat(4,1fr) 112px}
.skill.potion b{white-space:nowrap}
.run-top .where{min-width:0}
@media (max-width:820px){
  .topbar{display:grid;grid-template-columns:1fr auto auto;gap:6px 8px;padding:8px 10px}
  .topbar .brand{display:none}
  .topbar .soul{grid-column:1 / -1;order:-1}
  .topbar .soul .mini-bar{max-width:none}
  .tabs{position:static}
  .actions{grid-template-columns:repeat(2,1fr)}
  .run-top{gap:6px}
  .where{font-size:14px;gap:6px;flex-wrap:wrap}
  .where b{font-size:18px}
  .run-top-r .btn{padding:0 2px}
  .sortie-bar{background:rgba(14,9,12,.97);background-clip:padding-box}
}
@media (max-width:480px){ .soul span.nm{display:inline} }
.shop-item .price{position:relative;z-index:1;margin-bottom:2px}

/* ---- ブラプレ連携：はじめる・18歳以上の確認 ---- */
.btn.big{font-size:18px;padding:14px 20px;letter-spacing:.1em}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.gate{background:rgba(20,12,16,.88);border:1px solid var(--line2);border-radius:8px;padding:16px 18px;text-align:left;line-height:1.7;font-size:14px}
.gate h2{font-size:17px;margin:0 0 8px;color:var(--gold2)}
.gate p{margin:0 0 10px}
.gate .note{font-size:12px;color:var(--dim)}
.gate input[type=date]{background:rgba(20,12,16,.85);border:1px solid var(--line2);color:var(--text);padding:10px 12px;border-radius:6px;font-size:16px;width:100%;box-sizing:border-box;margin:0 0 10px;color-scheme:dark}
.gate .row{display:flex;gap:10px;flex-wrap:wrap}
.gate .row .btn{flex:1}
.shop-short{text-align:center}
.shop-short p{margin:0 0 14px;line-height:1.7}
/* PC：冒険画面をスクロールなしで1画面に収める（立ち絵の大きさを画面の高さに合わせる） */
@media (min-width:821px){
  #scr-run{height:100vh;height:100dvh;min-height:0;overflow:hidden}
  #scr-run .stage{flex:1;min-height:0}
  #scr-run .unit .portrait{width:min(100%, calc((100dvh - 390px) * .6667));min-width:140px;align-self:center}
  #scr-run .log{height:min(128px,13dvh);flex-shrink:0}
  #scr-run .actions{flex-shrink:0}
}
/* スキルボタンの絵 */
.skill{display:grid;grid-template-columns:54px 1fr;column-gap:8px;align-items:center}
.skill .sk-ic{grid-row:1 / span 2;width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.skill b,.skill small{grid-column:2}
.skill.potion .sk-ic{object-fit:contain;height:46px}
.skill:not(:disabled):hover .sk-ic{transform:scale(1.06)}
@media (max-width:820px){.skill{grid-template-columns:34px 1fr;column-gap:6px}.skill .sk-ic{width:34px;height:34px}}
.eq-slot .ic{vertical-align:middle;margin-right:4px}
.skill.potion{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:0}
.skill.potion .sk-ic{grid-row:auto;width:30px;height:34px}
.skill.potion b,.skill.potion small{grid-column:1}