/* A single, aspect-correct world contains every art and character layer. */
#wares .wares-world{z-index:0;inset:0;overflow:hidden}
#wares #stage{position:absolute;width:min(100vw,177.68vh);height:min(56.28vw,100vh);left:50%;top:50%;transform:translate(-50%,-50%);isolation:isolate;pointer-events:none}
#wares #poster,#wares #backgrounds,#wares #backgrounds video,#wares #foreground,#wares #foreground-still,#wares #jump-character,#wares #jump-hand,#wares #shared-counter,#wares #counter-contacts,#wares #arrival-lines{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
#wares #backgrounds video{opacity:0;transition:opacity .18s linear}#wares #backgrounds video.active{opacity:1}
#wares #foreground{visibility:hidden}#wares #stage.rendering #foreground{visibility:visible}#wares #stage.rendering #foreground-still{visibility:hidden}
#wares #foreground-still{mask-image:linear-gradient(to right,black 54%,transparent 60%)}
#wares #jump-character{z-index:2;visibility:hidden}#wares #shared-counter{z-index:3}#wares #counter-contacts{z-index:4;opacity:calc(var(--rest-contact,.18) / .18)}
#wares #foreground,#wares #foreground-still,#wares #jump-hand{z-index:5}#wares #jump-hand{visibility:hidden}
#wares #stage.jumping #jump-character,#wares #stage.jumping #jump-hand{visibility:visible}
#wares #stage.jumping #foreground,#wares #stage.jumping #foreground-still{opacity:var(--jump-rest-opacity,0)}
#wares #stage[data-presence=away] #foreground,#wares #stage[data-presence=away] #foreground-still,#wares #stage[data-presence=away]:not(.jumping) #counter-contacts{visibility:hidden}
#wares[data-shop-presence=away] .wares-ui,#wares[data-shop-presence=away] .card-stage,#wares[data-shop-presence=away] .inventory-footer,#wares[data-shop-presence=away] .chapter-next{visibility:hidden}
#wares #arrival-lines{z-index:7;opacity:0;transform:translateX(-12%)}
#wares #paper-sweep{position:absolute;inset:-4% -20%;z-index:25;pointer-events:none;visibility:hidden;transform:translateX(110%)}#wares #paper-sweep svg{width:100%;height:100%;display:block}
#wares .scene-atmosphere{display:none}
/* Hand-inked inventory: the artwork stays wide, while the interface uses the viewport. */
#wares{--inventory-center:70%;--inventory-card-height:min(51vh,505px);--inventory-card-width:clamp(250px,25vw,315px)}
#wares .shop-title{left:43%;right:3%;top:6.5%;z-index:8;text-align:center}
#wares .shop-title h2{font-size:clamp(34px,4vw,56px);line-height:1.1}
#wares .inventory-flourish{display:block;font:14px/1.1 Georgia,serif;letter-spacing:.28em;margin-top:8px}
#wares .card-stage{z-index:8;left:43%;right:3%;top:17%;height:var(--inventory-card-height);perspective:1500px;--card-w:var(--inventory-card-width);--card-h:var(--inventory-card-height)}
#wares .ware{border:0;border-radius:0;padding:22px 23px 20px;display:grid;grid-template-rows:25px minmax(0,1fr) auto auto 22px;gap:11px;background:none;box-shadow:none;isolation:isolate;color:#191919;filter:drop-shadow(3px 6px 3px #00000018)}
#wares .ware:before{content:none}#wares .ware:not(.selected){opacity:.2;pointer-events:auto;filter:blur(2px) brightness(.9) drop-shadow(3px 6px 3px #00000018)}
#wares .ware{transition:filter .3s ease,opacity .3s ease}
#wares .ware:not(.selected) .card-image{filter:grayscale(1)}
#wares .ink-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}
#wares .ink-frame path{vector-effect:non-scaling-stroke;stroke:#252525;stroke-linecap:round;stroke-linejoin:round}
#wares .frame-paper{fill:#fff;stroke-width:1.35}#wares .frame-inner{fill:none;stroke-width:.7}#wares .frame-pencil{fill:none;stroke-width:.6;opacity:.65}
#wares .card-top{display:flex;align-items:center;justify-content:space-between;gap:7px;font:15px/1.1 IMFellEnglish,Georgia,serif;letter-spacing:.01em;border:0;padding:0 0 7px;border-bottom:1px solid #303030;text-transform:none}
#wares .card-number{font:10px/1.2 monospace;white-space:nowrap;letter-spacing:.06em}
#wares .card-art{position:relative;display:block;min-height:0;border:1px solid #292929;padding:5px;outline:1px solid #aaaaaa;outline-offset:3px;margin:4px 3px 5px;transform:rotate(-.35deg);background:white}
#wares .card-art:after{content:'✧';position:absolute;bottom:-11px;left:calc(50% - 12px);background:white;width:24px;text-align:center;font:18px/20px Georgia,serif}
#wares .card-image{width:100%;height:100%;border:0;object-fit:contain;background:#fafafa;margin:0;filter:grayscale(1);transition:filter .35s ease}
#wares .ware:hover .card-image,#wares .ware:focus-visible .card-image{filter:grayscale(0)}
#wares .card-name{display:block;min-height:0;font:clamp(25px,2.65vw,35px)/1.03 Pirata,Georgia,serif;margin:7px 1px 2px;text-align:center}
#wares .card-stats{display:grid;gap:9px;padding:12px 1px 3px;border-top:1px solid #555;font:13px/1.25 IMFellEnglish,Georgia,serif}
#wares .stat-row{display:grid;grid-template-columns:43px 1fr;gap:8px;text-align:left}
#wares .card-stats .stat-row>span{font:italic 13px/1.3 IMFellEnglish,Georgia,serif;color:#555}
#wares .stat-row strong{font:14px/1.25 IMFellEnglish,Georgia,serif;text-align:right;font-weight:400}
#wares .card-bottom{align-self:end;margin:0;border-top:1px solid #bbb;padding-top:8px;font:italic 14px/1 IMFellEnglish,Georgia,serif;letter-spacing:.02em;text-transform:none}
#wares .inventory-footer{position:absolute;left:43%;right:3%;top:calc(17% + var(--inventory-card-height) + 12px);bottom:auto;z-index:9;display:block;padding:0;border:0;box-shadow:none;background:none}
#wares .card-controls{display:flex;align-items:center;justify-content:center;gap:23px}
#wares .card-controls button{width:59px;height:43px;border:0;padding:5px;background:transparent;transition:transform .18s ease;opacity:1}
#wares .card-controls button:disabled{opacity:.25}
#wares .card-controls button:not(:disabled):hover{transform:translateX(3px)}#wares #prev-card:not(:disabled):hover{transform:translateX(-3px)}
#wares .card-controls svg{width:100%;height:100%;fill:none;stroke:#171717;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#wares #card-count{font:13px/1 IMFellEnglish,Georgia,serif;letter-spacing:.1em}
#wares .wares-speech{position:absolute;left:7%;bottom:17%;top:auto;width:36%;max-width:440px;min-height:102px;z-index:8;padding:24px 27px 22px;isolation:isolate;pointer-events:none;color:#181818}
#wares .speaker-name{position:absolute;top:-4px;left:29px;padding:0 9px;background:white;font:11px/1.4 monospace;letter-spacing:.12em}
#wares .wares-speech p{font:26px/1.3 IMFellEnglish,Georgia,serif;margin:3px 0}
#wares .dialogue-diamond{position:absolute;right:24px;bottom:17px;font:9px Georgia,serif}
@media(max-width:1000px) and (min-width:701px){#wares{--inventory-card-width:250px}#wares .wares-speech{left:5%;width:38%;padding:22px}#wares .wares-speech p{font-size:24px}#wares .card-name{font-size:27px}}
@media(max-width:700px){
 #wares{--inventory-card-height:min(46vh,410px);--inventory-card-width:clamp(210px,59vw,280px)}
 #wares #stage{width:140vw;height:78.8vw;left:50%;top:24%;transform:translate(-50%,-50%)}
 #wares .shop-title{left:0;right:0;top:5%}#wares .shop-title h2{font-size:34px}#wares .inventory-flourish{font-size:11px;margin-top:4px}
 #wares .card-stage{left:0;right:0;top:29%;height:var(--inventory-card-height)}
 #wares .ware{padding:17px 20px 16px;grid-template-rows:21px minmax(0,1fr) auto auto 20px;gap:7px}
 #wares .card-name{font-size:27px;margin-top:4px}#wares .card-top{font-size:13px}#wares .card-stats{gap:6px;padding-top:8px}#wares .stat-row strong{font-size:12px}#wares .card-stats .stat-row>span{font-size:12px}#wares .card-bottom{font-size:12px}
 #wares .inventory-footer{left:0;right:0;top:calc(29% + var(--inventory-card-height) + 3px)}#wares .card-controls{gap:18px}#wares .card-controls button{height:36px;width:49px}
 #wares .wares-speech{left:6%;bottom:auto;top:17%;width:59%;min-height:66px;padding:15px 20px 12px}#wares .wares-speech p{font-size:18px;line-height:1.2}#wares .speaker-name{font-size:8px;left:21px}#wares .dialogue-diamond{right:16px;bottom:12px;font-size:7px}
}
@media(max-height:690px) and (min-width:701px){
 #wares{--inventory-card-height:51vh;--inventory-card-width:225px}
 #wares .shop-title{top:4%}#wares .shop-title h2{font-size:34px}#wares .inventory-flourish{margin-top:2px;font-size:11px}
 #wares .card-stage{top:17%}#wares .inventory-footer{top:calc(17% + var(--inventory-card-height) + 2px)}
 #wares .ware{padding:17px 20px;gap:7px;grid-template-rows:20px minmax(0,1fr) auto auto 18px}#wares .card-name{font-size:25px;margin:3px 0}#wares .card-stats{padding-top:7px;gap:5px}#wares .stat-row strong{font-size:12px}#wares .card-bottom{font-size:12px}#wares .wares-speech{bottom:22%;min-height:85px;padding:20px 24px}#wares .wares-speech p{font-size:23px}
}
.reduced-motion #wares #backgrounds video{transition:none}
#wares .ware{transform-style:flat}
#wares .card-stats{grid-template-columns:1fr;justify-content:stretch}
#wares .card-controls svg{stroke-width:1.65;filter:drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white) drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white)}
#wares #card-count{paint-order:stroke fill;-webkit-text-stroke:4px white}
@media(max-width:700px){#wares .wares-speech{left:54%;width:40%;top:17%;padding:15px 14px 16px}#wares .speaker-name{left:12px}#wares .wares-speech p{font-size:17px}}

/* One collectible at a time, with physical card proportions and inked stock. */
#wares{--inventory-card-height:min(44vh,400px);--inventory-card-width:calc(var(--inventory-card-height) * .714286)}
#wares .card-float{position:absolute;inset:0;transform-style:preserve-3d;animation:relic-float 4.6s ease-in-out infinite;will-change:transform}
#wares .ware{padding:18px 19px 17px;grid-template-rows:42px minmax(0,1fr) 22px 65px 23px;gap:5px;border-radius:15px;filter:drop-shadow(2px 3px 0 #333) drop-shadow(9px 16px 9px #00000026);transition:opacity .15s ease}
#wares .ware:not(.selected){opacity:0;visibility:hidden;pointer-events:none;filter:none;transition:none}
#wares .ware .frame-paper{fill:#fff;stroke-width:1.8}
#wares .ware .frame-inner{stroke-width:1.1}
#wares .ware .frame-pencil{stroke-width:.6;opacity:.8}
#wares .card-top{padding:0;border:0;gap:8px}
#wares .card-name{font:24px/1 Pirata,Georgia,serif;text-align:left;margin:0;min-width:0}
#wares .card-sigil{flex-shrink:0;width:28px;height:28px;border:1px solid #333;border-radius:50% 46% 50% 43%;outline:1px solid #aaa;outline-offset:2px;display:grid;place-items:center;font:21px/1 Georgia,serif}
#wares .card-art{margin:3px 2px 3px;outline-color:#555;outline-offset:2px;padding:4px;transform:none;border-radius:2px;box-shadow:1px 2px 0 #bbb}
#wares .card-art:after{content:none}
#wares .card-type{display:flex;align-items:center;justify-content:space-between;gap:3px;font:italic 11px/1 IMFellEnglish,Georgia,serif;border-top:1px solid #777;border-bottom:1px solid #777;white-space:nowrap;background:repeating-linear-gradient(120deg,transparent 0 4px,#00000005 4px 5px)}
#wares .card-type>span{font:12px Georgia,serif}
#wares .card-stats{padding:6px 0 4px;border:0;gap:6px;align-content:center}
#wares .stat-row{grid-template-columns:34px 1fr;gap:6px}
#wares .card-stats .stat-row>span{font-size:12px}
#wares .stat-row strong{font-size:12px;line-height:1.15}
#wares .card-bottom{display:flex;align-items:center;justify-content:space-between;gap:4px;padding-top:6px;border-top:1px solid #333;font:italic 11px/1 IMFellEnglish,Georgia,serif;text-align:left;white-space:nowrap}
#wares .card-number{font:9px/1 IMFellEnglish,Georgia,serif;letter-spacing:.03em}
@keyframes relic-float{0%,100%{transform:translateY(7px) rotate(-1.4deg)}50%{transform:translateY(-12px) rotate(1.2deg)}}
#wares:not(.active-scene) .card-float,body:has(dialog[open]) #wares .card-float{animation-play-state:paused}
.reduced-motion #wares .card-float{animation:none;transform:none}
@media(max-width:700px){#wares{--inventory-card-height:min(43vh,370px)}#wares .ware{padding:16px 17px 15px;grid-template-rows:38px minmax(0,1fr) 21px 61px 22px;gap:4px}#wares .card-name{font-size:22px}}
@media(max-height:690px) and (min-width:701px){#wares{--inventory-card-height:51vh}#wares .ware{padding:15px 17px;grid-template-rows:36px minmax(0,1fr) 20px 57px 21px;gap:3px}#wares .card-name{font-size:21px}}
/* The floating wrapper is a stage, not an interactive overlay. */
#wares .card-float{pointer-events:none}
#wares .ware.selected{pointer-events:auto}

/* Shop dialogue and matching hand-inked turn controls. */
#wares .wares-speech{left:5%;top:6%;bottom:auto;width:390px;max-width:43%;min-height:130px;padding:23px 25px 19px;pointer-events:auto}
#wares .wares-speech p{font:25px/1.25 IMFellEnglish,Georgia,serif;margin:0 0 15px}
#wares .shop-choices{display:flex;align-items:flex-start;gap:22px}
#wares .shop-choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:3px 4px;font:17px/1.25 IMFellEnglish,Georgia,serif;white-space:nowrap}
#wares .shop-choice-name{position:relative;display:inline-block;padding:0 4px}
#wares .shop-choice small{font:12px/1.25 IMFellEnglish,Georgia,serif;color:#93918c}
#wares .shop-choice:is(.selected,:hover,:focus-visible) .shop-choice-name:before{content:'';position:absolute;inset:-2px -9px;border:1px solid #222;border-radius:48% 53% 44% 57%;transform:rotate(-4deg)}
#wares .shop-choice:is(.selected,:hover,:focus-visible) .shop-choice-name:after{content:'';position:absolute;inset:0 -7px -3px -10px;border-bottom:1px solid #777;border-radius:50%;transform:rotate(3deg)}
#wares .future-choice{display:flex;flex-direction:column;align-items:center;gap:3px}
#wares .shop-choice:disabled{opacity:1;color:#777}
#wares .future-choice small{font:9px/1.2 PermanentMarker,cursive;color:#888}
#wares .card-controls{gap:20px;align-items:flex-start}
#wares .card-controls button{width:76px;height:72px;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:1}
#wares .arrow-plaque{position:relative;display:grid;place-items:center;width:76px;height:48px;isolation:isolate}
#wares .card-controls .control-frame{position:absolute;inset:0;width:100%;height:100%;filter:none;fill:none;stroke:#191919;stroke-width:1;z-index:-1}
#wares .control-frame .control-paper{fill:white}
#wares .control-frame .control-pencil{stroke-width:.6;opacity:.5}
#wares .card-controls .control-arrow{width:43px;height:24px;filter:none;stroke-width:1.4}
#wares .control-caption{font:12px/1.4 PermanentMarker,cursive;color:#777}
#wares .card-controls button:disabled .control-arrow,#wares .card-controls button:disabled .control-caption{opacity:.35}
#wares .card-controls button:disabled .control-frame{stroke:#aaa}
#wares #card-count{padding-top:18px}
@media(max-width:700px){#wares .wares-speech{left:6%;top:7%;width:82%;max-width:none;min-height:120px;padding:20px 23px 17px}#wares .wares-speech p{font-size:22px;margin-bottom:12px}#wares .speaker-name{left:23px}#wares .shop-choice{font-size:16px}#wares .shop-choices{gap:22px}#wares .card-controls button{height:66px;width:68px}#wares .arrow-plaque{width:68px;height:44px}#wares .control-caption{font-size:11px}#wares #card-count{padding-top:16px}}
#wares .card-controls button:disabled{opacity:1}
#wares .control-caption{paint-order:stroke fill;-webkit-text-stroke:3px white}

/* Dialogue belongs to the shopkeeper: centered copy and an inked speech tail. */
#wares .wares-speech{left:23%;top:16%;width:390px;max-width:38%;text-align:center;padding:22px 25px 20px}
#wares .wares-speech p{text-align:center}
#wares .shop-choices{justify-content:center;text-align:center;gap:28px}
#wares .wares-speech .ink-frame{overflow:visible}
@media(max-width:1000px) and (min-width:701px){#wares .wares-speech{left:19%;width:370px;max-width:43%}#wares .wares-speech p{font-size:23px}}
@media(max-width:700px){#wares .wares-speech{left:6%;top:5%;width:82%;max-width:none;padding:19px 20px 17px}#wares .wares-speech .ink-frame{transform:scaleX(-1)}#wares .wares-speech p{font-size:22px}#wares .shop-choices{gap:23px}}
@media(max-height:690px) and (min-width:701px){#wares .wares-speech{top:10%;min-height:113px;padding:17px 22px}#wares .wares-speech p{font-size:22px;margin-bottom:10px}}

/* Every logo lives within the same preview window, regardless of source aspect ratio. */
#wares .card-art{min-width:0;min-height:0;overflow:hidden;contain:paint}
#wares .card-art .card-image{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;padding:12%;object-fit:contain;object-position:center;display:block;background:#fff;box-sizing:border-box}

#wares .card-art .card-image.logo-ink{background:transparent;filter:brightness(0)}

/* WebKit can collapse the empty, paint-contained grid item whose only child
   is positioned. Give the logo window a definite height in every composition. */
#wares .ware{--card-art-reserved:213px}
#wares .card-art{height:max(24px,calc(var(--card-h) - var(--card-art-reserved)));align-self:stretch;justify-self:stretch;contain:none}
#wares .card-bottom .card-inspect-arrow{display:inline-block;width:1em;height:1em;vertical-align:-.1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){#wares .ware{--card-art-reserved:195px}}
@media(max-height:690px) and (min-width:701px){#wares .ware{--card-art-reserved:182px}}
.mobile-landscape #wares .ware{--card-art-reserved:174px}
.handheld-scene #wares .ware{--card-art-reserved:498px}