/* 画面の仕上げ。main.css と skin.css のあとに読む。
   トースト、機能ボタン、持ち物、酒、台選択、社格ツリー、図鑑、ガチャの追加分をここに置く。
   時代ごとの素材の貼り付けは assets/ui/skin.css（tools/cut_ui.py が生成）が持ち、ここは寸法と配置を持つ。 */

/* ===== 土台の補正 ============================================================ */
/* btn の左右の飾りより内側に文字を置く。飾りの幅は skin.css の 30px / 44px */
.btn { padding-inline: 40px; }
.btn.big { padding-inline: 60px; }
.modal-t { display: inline-flex; align-items: center; min-height: 56px; padding: 0 58px; }
.modal-t h2 { margin: 0; font-size: 34px; font-weight: 400; line-height: 1.2; white-space: nowrap; }
.modal-h { align-items: center; padding: 24px 40px 6px; }
.modal-c { padding: 12px 40px 36px; }
.modal-x { right: 28px; top: 26px; }
.cx-tab { min-width: 176px; height: 56px; padding: 0 44px; white-space: nowrap; }

/* ===== トースト: 盤面の外へ ================================================== */
#toasts { left: 20px; right: auto; top: auto; bottom: 240px; width: 376px; gap: 6px; flex-direction: column-reverse; }
.toast {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 7px 12px 8px 8px; border-radius: 12px; overflow: hidden; pointer-events: auto;
  color: var(--ink); background: var(--pn); box-shadow: inset 0 0 0 1px var(--line), 0 4px 14px rgba(0, 0, 0, .28);
  opacity: 0; transform: translateX(-26px); transition: opacity .2s, transform .26s var(--ease-back); cursor: pointer;
}
.toast.on { opacity: 1; transform: none; }
.toast.hold { display: none; }
.toast.bump { animation: toastBump .3s var(--ease-back); }
@keyframes toastBump { 40% { transform: scale(1.04); } }
.toast-i { width: 42px; height: 42px; font-size: 19px; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.toast.t-ach .toast-i, .toast.t-unlock .toast-i { width: 46px; height: 46px; }
.toast.t-item .toast-i { background: linear-gradient(160deg, #ffd9a0, #cc7a2a); }
.toast.t-info .toast-i { background: linear-gradient(160deg, #8fd1ff, #2a7bd0); font-family: var(--f-round); }
.toast-b { flex: 1; }
.toast-b b { font-size: 16px; line-height: 1.25; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-b span { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toast-n { flex: none; font: 800 22px/1 var(--f-disp); font-style: normal; color: var(--acc); }
.toast-n:empty { display: none; }
.toast.has-link { box-shadow: inset 0 0 0 1px var(--hot-border), 0 4px 14px rgba(0, 0, 0, .28); }
/* モーダルの中の操作の結果は下端の中央に出す */
#toasts.over { left: 50%; bottom: 36px; width: 560px; transform: translateX(-50%); }
html[data-layout='portrait'] #toasts { left: 12px; right: 12px; top: 160px; bottom: auto; width: auto; }
html[data-layout='portrait'] #toasts.over { left: 50%; right: auto; top: auto; bottom: 40px; width: 760px; }
html[data-layout='portrait'] .toast { min-height: 74px; }
html[data-layout='portrait'] .toast-b b { font-size: 24px; }
html[data-layout='portrait'] .toast-b span { font-size: 19px; -webkit-line-clamp: 1; }

/* ===== 機能ボタンと通貨の入口 ================================================ */
.fbs { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(var(--fb-cols, 1), 1fr); }
.fbs[data-n='2'] { --fb-cols: 2; }
.fbs[data-n='3'], .fbs[data-n='5'], .fbs[data-n='6'] { --fb-cols: 3; }
.fbs[data-n='4'] { --fb-cols: 2; }
.fb { height: 50px; flex-direction: row; justify-content: flex-start; gap: 6px; padding: 0 6px; }
.fb b { font-size: 16px; }
.fb-i { flex: none; width: 40px; height: 40px; font-size: 15px; background-color: transparent; text-shadow: 0 0 3px #000, 0 1px 2px #000; color: #fff; }
.fb-i[data-id='bag']::after { content: '物'; }
.fb-i[data-id='sake']::after { content: '酒'; }
.fbs[data-n='1'] .fb, .fbs[data-n='2'] .fb, .fbs[data-n='3'] .fb { justify-content: center; }
.shop-list { min-height: 0; }
button.cur { text-align: left; transition: transform .12s, filter .12s; }
button.cur:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cur .cur-v { grid-column: 2; }
.m-plate { padding: 16px 16px 14px; }
.mp-swap { align-self: stretch; height: 34px; margin-top: 4px; font: 800 14px var(--f-round); pointer-events: auto; }
html[data-layout='portrait'] .fb { height: 62px; }

/* ===== 台を選ぶ ============================================================== */
.mc-grid { flex: 1; min-height: 0; max-height: none; grid-template-columns: repeat(7, 1fr); gap: 14px 12px; padding: 4px 8px 4px 2px; align-content: start; }
.mc { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 8px 10px; border-radius: 12px; text-align: center; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--line); transition: transform .14s var(--ease-out), filter .14s; }
.mc:not([disabled]):hover { transform: translateY(-4px); filter: brightness(1.08); }
.mc[disabled] { cursor: default; }
.mc.on { box-shadow: inset 0 0 0 3px var(--hot-border), 0 0 calc(16px * var(--user-glow)) var(--neon); }
.mc-t, .cxm-t { position: relative; display: grid; place-items: center; aspect-ratio: 736 / 944; height: auto; border-radius: 8px; overflow: hidden; font-family: var(--f-disp); font-size: 40px; color: var(--ink3); background: var(--pn3); }
.mc-t img.art, .cxm-t img.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-t.has-art, .cxm-t.has-art { font-size: 0; }
.mc.unk:not(.next) .mc-t, .cxm.unk .cxm-t { background: repeating-linear-gradient(135deg, var(--pn3) 0 10px, var(--pn2) 10px 20px); }
.mc.next .mc-t img.art { filter: grayscale(.85) brightness(.7); }
.mc.unk:not(.next) { opacity: .62; }
.mc-no { position: absolute; left: 14px; top: 13px; z-index: 2; padding: 0 8px; border-radius: 6px; font: 400 18px/26px var(--f-disp); font-style: normal; color: #fff; background: rgba(0, 0, 0, .62); }
.mc-name, .cxm-name { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: -24px; padding: 0 30px; position: relative; z-index: 2; font: 800 17px/1.1 var(--f-round); text-align: center; color: var(--ink); }
.mc-full { min-height: 36px; font-size: 12.5px; line-height: 1.35; color: var(--ink2); }
.mc-foot { font-style: normal; font: 800 15px var(--f-round); color: var(--ink2); }
.mc.on .mc-foot { color: var(--acc); }
.mc.next .mc-foot { color: var(--good); }
html[data-layout='portrait'] .mc-grid { grid-template-columns: repeat(3, 1fr); max-height: 1120px; }
html[data-layout='portrait'] .mc-name, html[data-layout='portrait'] .cxm-name { font-size: 16px; padding: 0 20px; }

/* ===== 社格ツリー ============================================================ */
.tr { grid-template-columns: 1fr 390px; gap: 16px; }
.tr-scroll { overflow-x: auto; }
.tr-lines path { fill: none; stroke: var(--line); stroke-width: 3; }
.tr-lines path.far { stroke-width: 1.5; stroke-dasharray: 4 6; opacity: .75; }
.tr-lines path.on { stroke: var(--acc2); opacity: 1; }
.tr-lines path.need { stroke: var(--hot-border); stroke-width: 3.5; stroke-dasharray: none; opacity: 1; }
.tr-h { min-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; }
.tr-h b { display: flex; align-items: center; justify-content: center; min-width: 136px; height: 44px; padding: 0 40px; font-size: 18px; line-height: 1; }
.tr-h small { font-size: 12.5px; line-height: 1.2; color: var(--ink2); }
.tr-n.chip { min-width: 0; padding: 2px 10px; white-space: normal; font: 700 13px/1.2 var(--f-round); overflow: visible; }
.tr-n span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-n i { position: absolute; right: -3px; top: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font: 800 12px/20px var(--f-round); font-style: normal; color: #fff; background: rgba(0, 0, 0, .72); }
.tr-n:not(.avail):not(.owned) { filter: saturate(.5) brightness(.8); }
.tr-n.owned i { display: none; }
.tr-n.can { filter: drop-shadow(0 0 calc(7px * var(--user-glow)) var(--hot-border)); }
.tr-n.sel { outline: 0; }
.tr-n.sel::after { content: ''; position: absolute; inset: -4px; border-radius: 13px; border: 2px solid var(--hot-border); pointer-events: none; }
.tr-side, .co-side { position: relative; padding: 34px 32px 30px; gap: 10px; min-height: 0; }
.tr-bal { flex-wrap: wrap; gap: 0 12px; }
.tr-got { flex-basis: 100%; font-size: 14px; color: var(--ink2); }
.tr-side > .co-k { align-self: flex-start; }
.tr-req { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--warn); }
.tr-req li { cursor: pointer; }
.tr-req li::before { content: '前提 '; font-size: 13px; color: var(--ink2); }
.tr-req li.ok { color: var(--ink2); }
.tr-side .btn.big { padding-inline: 44px; font-size: 22px; }
html[data-layout='portrait'] .tr { grid-template-columns: 1fr; grid-template-rows: 660px auto; }
html[data-layout='portrait'] .tr-side { min-height: 330px; }
html[data-layout='portrait'] .tr-d-f { flex: none; }

/* ===== 持ち物 ================================================================ */
.co { grid-template-columns: 1fr 390px; gap: 16px; }
.co-l { gap: 8px; }
.co-side { display: flex; flex-direction: column; background: var(--pn2); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.co-art { position: relative; flex: none; align-self: center; width: 210px; height: 210px; border-radius: 16px; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .18), transparent 70%); }
.co-art img.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.co-art.unk img.art { filter: brightness(0) opacity(.4); }
.co-art[data-r='SR'] { background: radial-gradient(circle at 50% 45%, rgba(255, 203, 61, .42), transparent 70%); }
.co-art[data-r='SSR'] { background: radial-gradient(circle at 50% 45%, rgba(255, 79, 163, .45), transparent 70%); }
.co-side .tr-d-n { margin-top: 2px; font-size: 25px; }
.co-side .tr-d-e { font-size: 18px; }
.co-side .tr-d-f { font-size: 16px; }
.co-tags { display: flex; gap: 6px; align-items: center; }
.co-r { padding: 0 10px; border-radius: 7px; font: 800 15px/24px var(--f-round); color: #fff; background: #8b93a0; }
.co-r.r-R { background: var(--rar-r); }
.co-r.r-SR { background: #d69a0a; }
.co-r.r-SSR { background: var(--rar-ssr); }
.co-k { padding: 0 10px; border-radius: 7px; font: 700 14px/24px var(--f-round); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--line); }
.co-acts { flex: none; }
.co-acts .btn { width: 100%; min-height: 48px; font-size: 16px; }
.co-need { text-align: center; font-size: 14px; color: var(--ink2); }
.co-purse { flex: none; display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 6px 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink2); }
.co-purse b { font: 800 21px var(--f-round); color: var(--ink); }
.co-buy { grid-column: 1 / -1; font-size: 15px; }
.co-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.co-chips { display: flex; gap: 6px; }
.chip { min-width: 100px; height: 40px; padding: 0 16px; border-radius: 8px; font: 800 15px var(--f-round); color: var(--ink2); background: var(--pn2); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.chip.on { color: var(--tab-on-ink); background: var(--tab-on); box-shadow: none; }
.chip[disabled] { opacity: .5; cursor: not-allowed; }
.co-sum { margin: 0; font-size: 15px; }
.co-load { flex: none; display: flex; align-items: center; gap: 8px; }
.co-slot { flex: none; width: 232px; height: 72px; padding: 6px 10px 6px 76px; position: relative; display: flex; flex-direction: column; justify-content: center; text-align: left; line-height: 1.25; border-radius: 10px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--hot-border); }
.co-slot.empty { box-shadow: inset 0 0 0 1px var(--line); }
.co-slot small { font-size: 12.5px; color: var(--ink2); }
.co-slot b { font: 800 14.5px/1.2 var(--f-round); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-slot.empty b { color: var(--ink3); }
.co-si { position: absolute; left: 8px; top: 7px; width: 58px; height: 58px; border-radius: 50%; background: var(--pn3); }
.co-si img.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.co-hint { flex: 1; min-width: 0; padding-left: 8px; font-size: 14px; line-height: 1.4; color: var(--ink2); }
.co-grid { grid-template-columns: repeat(7, 1fr); gap: 8px; }
.co-c { height: 158px; padding: 6px 6px 8px; align-items: stretch; justify-content: flex-start; gap: 2px; text-align: center; overflow: hidden; }
.co-i { position: relative; flex: none; height: 96px; }
.co-i img.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.co-c.unk { opacity: 1; }
.co-c.unk .co-i img.art { filter: brightness(0) opacity(.3); }
.co-c.unk b { color: var(--ink3); }
.co-c > i { position: absolute; left: 6px; top: 5px; }
.co-c b { font-size: 13.5px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-c.can { box-shadow: inset 0 0 0 1px var(--good); }
.co-c.sel { box-shadow: inset 0 0 0 3px var(--hot-border); }
.co-c.eq::after { content: '装備中'; left: 0; right: 0; top: 74px; bottom: auto; font-size: 12px; line-height: 20px; color: #fff; background: rgba(0, 0, 0, .55); }
.co-c.r-SR { background: linear-gradient(180deg, rgba(255, 203, 61, .18), var(--pn2) 60%); }
.co-c.r-SSR { background: linear-gradient(180deg, rgba(255, 79, 163, .2), var(--pn2) 60%); }
html[data-layout='portrait'] .co { grid-template-columns: 1fr; grid-template-rows: auto auto; }
html[data-layout='portrait'] .co-scroll { height: 500px; flex: none; }
html[data-layout='portrait'] .co-grid { grid-template-columns: repeat(4, 1fr); }
html[data-layout='portrait'] .co-load { flex-wrap: wrap; }
html[data-layout='portrait'] .co-hint { flex-basis: 100%; padding: 0; }
html[data-layout='portrait'] .co-side { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; padding: 22px; }
html[data-layout='portrait'] .co-art { width: 150px; height: 150px; grid-row: span 4; }
html[data-layout='portrait'] .co-side .tr-d-f { flex: none; }
html[data-layout='portrait'] .co-acts, html[data-layout='portrait'] .co-purse { grid-column: 1 / -1; }

/* ===== 冷蔵庫 ================================================================ */
.sk { display: grid; grid-template-columns: 330px 1fr; gap: 18px; height: 760px; min-height: 0; }
.sk-l { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.sk-art { position: relative; flex: 1 1 200px; min-height: 0; overflow: hidden; border-radius: 12px; background: var(--pn3); }
.sk-art img.art { position: absolute; left: 50%; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; max-width: none; transform: translateX(-50%); }
.sk-art.gulp img.art { animation: skGulp .4s var(--ease-out); }
@keyframes skGulp { 30% { transform: translateX(-50%) rotate(-3deg) scale(1.04); } }
.sk-gh { display: flex; justify-content: space-between; font: 800 15px var(--f-round); color: var(--ink2); }
.sk-g { position: relative; height: 16px; border-radius: 8px; background: var(--pn3); box-shadow: inset 0 0 0 1px var(--line); }
.sk-g > i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #ffd66b, #f2a93b); transform-origin: left; transform: scaleX(0); transition: transform .25s; }
.sk-g.hot > i { background: linear-gradient(90deg, #ff9a5a, #e0301e); }
.sk-lim { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--warn); }
.sk-state { font: 700 16px/1.3 var(--f-round); }
.sk-stat { margin: 0; display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 0 8px; align-items: baseline; font-size: 14px; color: var(--ink2); }
.sk-stat dd { margin: 0; }
.sk-stat b { font: 800 20px var(--f-round); color: var(--ink); }
.sk-buffs { margin: 0; padding: 0; list-style: none; max-height: 104px; overflow: hidden; font-size: 13.5px; line-height: 1.3; }
.sk-buffs li { display: flex; flex-direction: column; padding: 2px 0; }
.sk-buffs b { font-weight: 700; }
.sk-buffs span { color: var(--acc); }
.sk-buffs .none { color: var(--ink3); }
.sk-ban { width: 100%; flex: none; }
.sk-note { font-size: 13px; line-height: 1.3; color: var(--ink2); }
.sk-list { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding-right: 6px; align-content: start; }
.sk-r { flex: none; display: grid; grid-template-columns: 76px 1fr 54px 138px 102px; align-items: center; gap: 8px; min-height: 92px; padding: 6px 10px 6px 6px; border-radius: 10px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--line); }
.sk-r.r-SR { box-shadow: inset 0 0 0 1px var(--rar-sr); }
.sk-r.r-SSR { box-shadow: inset 0 0 0 1px var(--rar-ssr); }
.sk-r.empty { filter: saturate(.7); }
.sk-i { position: relative; width: 76px; height: 76px; }
.sk-i img.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sk-m { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.sk-n { font: 800 17px/1.2 var(--f-round); }
.sk-k { font-size: 12.5px; color: var(--ink2); }
.sk-e { font-size: 13.5px; font-weight: 700; color: var(--acc); }
.sk-s { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.sk-s small { font-size: 12px; color: var(--ink2); }
.sk-s b { font: 800 23px var(--f-round); }
.sk-b { min-height: 46px; padding-inline: 30px; font-size: 15px; }
.bump-s { animation: toastBump .24s var(--ease-back); }
html[data-layout='portrait'] .sk { grid-template-columns: 1fr; grid-template-rows: 380px 640px; height: auto; }
html[data-layout='portrait'] .sk-l { display: grid; grid-template-columns: 170px 1fr; gap: 6px 12px; align-content: start; }
html[data-layout='portrait'] .sk-art { grid-row: span 6; height: 370px; }
html[data-layout='portrait'] .sk-r { grid-template-columns: 56px 1fr 1fr 44px; }
html[data-layout='portrait'] .sk-m { grid-column: 2 / 4; }
html[data-layout='portrait'] .sk-i { width: 56px; height: 56px; }
html[data-layout='portrait'] .sk-b { grid-column: 1 / 3; }
html[data-layout='portrait'] .sk-b:last-child { grid-column: 3 / 5; }

/* ===== 図鑑 ================================================================== */
.cx-mgrid { gap: 14px 12px; }
.cxm { position: relative; padding: 8px 8px 10px; text-align: center; gap: 4px; }
.cxm small { min-height: 34px; font-size: 12.5px; }
.cxm p { text-align: left; font-size: 12.5px; }
.cx-abar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.cx-abar .cx-lead { margin: 0; }
.cxa { min-height: 86px; }
.cxa-m { flex: 1; min-width: 0; }
.cxa.done .cxa-i { width: 56px; height: 56px; border-radius: 0; }
.cxa-p { display: block; height: 5px; margin-top: 4px; border-radius: 3px; overflow: hidden; background: var(--line); }
.cxa-p i { display: block; height: 100%; background: var(--acc); transform-origin: left; }

/* ===== おみくじ ============================================================== */
html[data-era] .modal.pn[data-id='gacha'] { border-image: none; background: #1a0a14 url('../assets/gacha/scene_bg.webp') center / cover; }
html[data-era] .modal.pn[data-id='gacha'] .modal-c { padding: 0; }
.modal.pn[data-id='gacha'] { overflow: hidden; }
.gc-ico { background: radial-gradient(circle at 50% 42%, #fff, color-mix(in srgb, var(--rc, #c0c8d0) 45%, #eee) 80%); }

/* Dela Gothic は画数の多い字が潰れる。「図鑑」の看板だけ丸ゴシックの極太にする */
.modal[data-id='codex'] .modal-t h2 { font-family: var(--f-round); font-weight: 800; letter-spacing: .12em; }

/* スマホ縦の台の下の段。#6 以降はハンドル、固定、PUSH が並ぶので見出しを落とし、部屋の小窓を詰めて台パンの幅を取る */
html[data-layout='portrait'] #hud-left .room-win { width: 250px; }
html[data-layout='portrait'] #rail-left { left: 266px; width: 428px; }
html[data-layout='portrait'] .lc:has(.lw) .lc-t { display: none; }

/* 明るい時代の枠絵は中が半透明。後ろの HUD が透けて字が読めないので、枠の内側に地を敷く（四隅の飾りの外には出さない） */
html[data-era='ancient'] .modal.pn:not([data-id='gacha']), html[data-era='final'] .modal.pn:not([data-id='gacha']) { background: linear-gradient(#fbf6ea, #fbf6ea) center / calc(100% - 28px) calc(100% - 28px) no-repeat; }
html[data-era='showa'] .modal.pn:not([data-id='gacha']) { background: linear-gradient(#f8ecd2, #f8ecd2) center / calc(100% - 28px) calc(100% - 28px) no-repeat; }
html[data-era='ancient'] .tr-n:not(.avail):not(.owned), html[data-era='final'] .tr-n:not(.avail):not(.owned), html[data-era='showa'] .tr-n:not(.avail):not(.owned) { filter: saturate(.6); opacity: .8; }
html[data-era='showa'] .cx-tab:not(.on) { color: #7a4a22; }