/* v81 仓库视图（游戏风格） */
.bv-open{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:4px 11px;border-radius:999px;border:1px solid #e0a31a;background:linear-gradient(180deg,#ffd451,#f5b417);color:#5a3510;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;box-shadow:0 2px 0 #c98a0e;vertical-align:middle}
.bv-open:hover{filter:brightness(1.05)}
.bv-open:active{transform:translateY(1px);box-shadow:0 1px 0 #c98a0e}
.bv-open[hidden]{display:none}
.scope-storage-card.bv-clickable{cursor:pointer}

dialog#barnView{width:min(860px,calc(100vw - 20px));max-width:min(860px,calc(100vw - 20px));max-height:calc(100dvh - 24px);padding:0;border:0;background:transparent;overflow:visible;box-shadow:none}
dialog#barnView::backdrop{background:rgba(25,18,8,.62)}
dialog#barnView[open]{animation:bv-pop .28s cubic-bezier(.34,1.56,.64,1)}
.bv-frame{position:relative;display:flex;flex-direction:column;max-height:calc(100dvh - 24px);padding:46px 16px 14px;border-radius:26px;background:linear-gradient(180deg,#ffd23f 0%,#ffbf1a 55%,#f5a90c 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -5px 0 rgba(170,100,0,.35),0 6px 0 #b9780a,0 18px 40px rgba(0,0,0,.35);box-sizing:border-box;margin-top:26px}

.bv-ribbon{position:absolute;left:50%;top:-26px;transform:translateX(-50%);width:min(78%,560px);padding:12px 18px 13px;border-radius:14px 14px 18px 18px;background:linear-gradient(180deg,#d9a46c 0%,#c4884f 60%,#a96f3c 100%);box-shadow:inset 0 2px 0 rgba(255,230,190,.6),inset 0 -4px 0 rgba(90,50,20,.35),0 4px 0 #7b4b22,0 8px 14px rgba(0,0,0,.25);text-align:center;box-sizing:border-box}
.bv-ribbon::before,.bv-ribbon::after{content:'';position:absolute;top:10px;width:9px;height:9px;border-radius:50%;background:#7b4b22;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.bv-ribbon::before{left:12px}.bv-ribbon::after{right:12px}
.bv-title{margin:0;font-size:clamp(18px,4.2vw,26px);font-weight:900;letter-spacing:1px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 text-shadow:2px 0 0 #4a2a10,-2px 0 0 #4a2a10,0 2px 0 #4a2a10,0 -2px 0 #4a2a10,1.5px 1.5px 0 #4a2a10,-1.5px 1.5px 0 #4a2a10,1.5px -1.5px 0 #4a2a10,-1.5px -1.5px 0 #4a2a10,0 4px 0 #4a2a10}

.bv-close{all:unset;position:absolute;right:-10px;top:-20px;z-index:2;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 50% 35%,#ff6a5a 0%,#e8352b 55%,#b81e17 100%);border:4px solid #ffd23f;box-shadow:0 4px 0 #b9780a,0 8px 14px rgba(0,0,0,.3);color:#fff;font-size:26px;font-weight:900;line-height:1;text-shadow:0 2px 0 #7a1009}
.bv-close:hover{filter:brightness(1.08)}
.bv-close:active{transform:translateY(2px)}
.bv-close:focus-visible{outline:3px solid #fff;outline-offset:2px}

.bv-panel{flex:1 1 auto;min-height:0;overflow:auto;border-radius:18px;background:#fff9e6;box-shadow:inset 0 3px 8px rgba(160,110,20,.25);padding:14px 10px;overscroll-behavior:contain}
.bv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px 6px}
.bv-item{all:unset;position:relative;display:flex;align-items:center;justify-content:center;height:92px;border-radius:14px;cursor:pointer;transition:background .15s,transform .15s}
.bv-item:hover{background:rgba(255,200,60,.22)}
.bv-item:active{transform:scale(.96)}
.bv-item:focus-visible{outline:3px solid #f5a90c}
.bv-item img{width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(80,50,10,.25));transform:translateX(-14px)}
.bv-qty{position:absolute;right:6px;bottom:12px;font-size:27px;font-weight:900;line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.5px;
 text-shadow:2px 0 0 #2b2118,-2px 0 0 #2b2118,0 2px 0 #2b2118,0 -2px 0 #2b2118,1.5px 1.5px 0 #2b2118,-1.5px 1.5px 0 #2b2118,1.5px -1.5px 0 #2b2118,-1.5px -1.5px 0 #2b2118,0 3px 0 #2b2118}
.bv-empty{margin:30px 0;text-align:center;color:#8a6a2a;font-weight:700}

.bv-footer{flex:0 0 auto;padding:14px 4px 2px}
.bv-meter{position:relative;height:30px;border-radius:999px;background:#fff3cf;border:3px solid #a96f3c;box-shadow:inset 0 3px 4px rgba(120,80,20,.3),0 3px 0 #7b4b22;overflow:hidden}
.bv-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(180deg,#9be15d 0%,#5cc232 55%,#3f9f22 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.45);transition:width .8s cubic-bezier(.22,.8,.3,1)}
.bv-meter[data-level=high] .bv-fill{background:linear-gradient(180deg,#ffe17a 0%,#ffc21a 55%,#e79a00 100%)}
.bv-meter[data-level=max] .bv-fill{background:linear-gradient(180deg,#ff8c7a 0%,#ef4a37 55%,#c42c1d 100%)}
.bv-ticks{position:absolute;inset:0;display:flex;justify-content:space-evenly;pointer-events:none;padding-right:16%}
.bv-ticks i{width:3px;margin:5px 0;border-radius:2px;background:rgba(169,111,60,.45)}
.bv-max{position:absolute;right:0;top:0;bottom:0;width:16%;display:grid;place-items:center;background:linear-gradient(180deg,#ff6b5b,#d8322a);color:#ffe36b;font-weight:900;font-size:15px;font-style:italic;letter-spacing:1px;text-shadow:0 2px 0 #7a1009;border-left:3px solid #a96f3c}
.bv-cap{display:flex;justify-content:center;align-items:baseline;gap:4px;margin-top:10px;font-weight:900;font-size:clamp(18px,4vw,24px);color:#fff;font-variant-numeric:tabular-nums;
 text-shadow:2px 0 0 #4a2a10,-2px 0 0 #4a2a10,0 2px 0 #4a2a10,0 -2px 0 #4a2a10,1.5px 1.5px 0 #4a2a10,-1.5px 1.5px 0 #4a2a10,1.5px -1.5px 0 #4a2a10,-1.5px -1.5px 0 #4a2a10,0 3px 0 #4a2a10}
.bv-cap-total{color:#b8f03c}
.bv-note{margin:6px 0 0;text-align:center;font-size:12px;font-weight:700;color:#7a4d0d}

@keyframes bv-pop{from{transform:scale(.85);opacity:0}}
@media (max-width:700px){
 dialog#barnView{width:calc(100vw - 12px);max-width:calc(100vw - 12px)}
 .bv-frame{padding:40px 9px 10px;border-radius:22px}
 .bv-close{right:-4px;width:46px;height:46px;font-size:22px}
 .bv-panel{padding:10px 4px}
 .bv-grid{grid-template-columns:repeat(4,1fr);gap:4px 2px}
 .bv-item{height:74px}
 .bv-item img{width:50px;height:50px;transform:translateX(-9px)}
 .bv-qty{right:2px;bottom:8px;font-size:19px}
 .bv-meter{height:24px}
 .bv-max{font-size:12px}
}
@media (prefers-reduced-motion:reduce){dialog#barnView[open]{animation:none}.bv-fill{transition:none}}
/* site-wide dialog heading colours must not tint the game title; no focus ring when the dialog opens */
dialog#barnView .bv-title{color:#fff!important;font-family:inherit}
dialog#barnView .bv-close:focus:not(:focus-visible),dialog#barnView .bv-item:focus:not(:focus-visible){outline:none!important;box-shadow:0 4px 0 #b9780a,0 8px 14px rgba(0,0,0,.3)}
dialog#barnView .bv-item:focus:not(:focus-visible){box-shadow:none}
/* v81e: the 「弹窗」 entry looks like the site's own small pill buttons (theme colours, not game yellow) */
.bv-open{gap:3px;margin-left:8px;padding:2px 9px;border:1px solid #d9c3cf;border:1px solid color-mix(in srgb,var(--green,#84596f) 35%,transparent);
 background:#fff;color:#84596f;color:var(--green,#84596f);font-size:12px;font-weight:700;box-shadow:none;line-height:1.5}
.bv-open:hover{filter:none;background:color-mix(in srgb,var(--green,#84596f) 10%,#fff)}
.bv-open:active{transform:translateY(1px);box-shadow:none}
.bv-open.bv-in-bar{align-self:center;text-shadow:none;letter-spacing:0}
.section-heading>.bt-capacity.bv-clickable{cursor:pointer;border-radius:12px}
.section-heading>.bt-capacity.bv-clickable:hover .bt-meter{background:color-mix(in srgb,var(--green,#84596f) 24%,transparent)}
/* v83: centred landscape box, not full screen — about 9 per row (8–10 by width) and ~6.5 rows visible, the rest scrolls */
dialog#barnView{width:min(860px,calc(100vw - 48px));max-width:min(860px,calc(100vw - 48px));height:auto;max-height:calc(100dvh - 40px);margin:auto}
dialog#barnView .bv-frame{max-height:calc(100dvh - 66px);padding:42px 14px 12px}
dialog#barnView .bv-panel{flex:0 1 auto;max-height:calc(76px*6.5 + 6px*6 + 20px);padding:10px 8px}
dialog#barnView .bv-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px 4px}
dialog#barnView .bv-item{height:76px}
dialog#barnView .bv-item img{width:52px;height:52px;transform:translateX(-11px)}
dialog#barnView .bv-qty{right:5px;bottom:10px;font-size:21px;
 text-shadow:1.6px 0 0 #2b2118,-1.6px 0 0 #2b2118,0 1.6px 0 #2b2118,0 -1.6px 0 #2b2118,1.2px 1.2px 0 #2b2118,-1.2px 1.2px 0 #2b2118,1.2px -1.2px 0 #2b2118,-1.2px -1.2px 0 #2b2118,0 2.5px 0 #2b2118}
dialog#barnView .bv-footer{padding-top:10px}
dialog#barnView .bv-meter{height:24px}
dialog#barnView .bv-cap{margin-top:7px;font-size:clamp(16px,3vw,20px)}
@media (max-width:700px){
 dialog#barnView{width:calc(100vw - 28px);max-width:calc(100vw - 28px)}
 dialog#barnView .bv-frame{padding:38px 8px 10px}
 dialog#barnView .bv-panel{max-height:calc(60px*6.5 + 3px*6 + 14px);padding:7px 3px}
 dialog#barnView .bv-grid{grid-template-columns:repeat(5,1fr);gap:3px 2px}
 dialog#barnView .bv-item{height:60px}
 dialog#barnView .bv-item img{width:40px;height:40px;transform:translateX(-7px)}
 dialog#barnView .bv-qty{right:1px;bottom:6px;font-size:16px;
  text-shadow:1.3px 0 0 #2b2118,-1.3px 0 0 #2b2118,0 1.3px 0 #2b2118,0 -1.3px 0 #2b2118,1px 1px 0 #2b2118,-1px 1px 0 #2b2118,1px -1px 0 #2b2118,-1px -1px 0 #2b2118,0 2px 0 #2b2118}
 dialog#barnView .bv-meter{height:20px}
 dialog#barnView .bv-max{font-size:11px}
}
/* site dialog styles stretch the box to full height; centre the frame inside it (the empty area still closes like the backdrop) */
dialog#barnView[open]{display:flex!important;flex-direction:column;justify-content:center}
dialog#barnView .bv-frame{flex:0 1 auto;min-height:0}
/* v87: wider landscape box on desktop — 12 per row when the window is wide enough; narrower windows fit as many as they can */
@media (min-width:701px){
 dialog#barnView{width:min(1120px,calc(100vw - 48px));max-width:min(1120px,calc(100vw - 48px))}
}
@media (min-width:1168px){
 dialog#barnView .bv-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
}