/* The shop is one continuous set; controls are attached to its physical props. */
#app[data-hub="true"]{background:#142740}
#app[data-hub="true"]>.game-topbar{position:absolute;inset:0 0 auto;height:72px;padding:12px 24px;border:0;background:linear-gradient(#0d2037c9,#0d20374d 65%,transparent);box-shadow:none;color:#fff2d4;pointer-events:none}
#app[data-hub="true"]>.game-topbar:after{display:none}
#app[data-hub="true"] .game-brand{color:#fff0d4;font-size:26px;letter-spacing:.12em;text-shadow:0 2px 8px #16263a}
#app[data-hub="true"] .game-topbar h1{font-size:15px;font-weight:500;letter-spacing:.28em;text-shadow:0 2px 8px #14263b}
#app[data-hub="true"] .round-control{pointer-events:auto;background:#16314bb8;border:1px solid #eac89b7a;outline:1px dashed #f3d5aa3b;outline-offset:-5px;box-shadow:0 3px 9px #06112033;color:#fff0d6;width:42px;height:42px}
#app[data-hub="true"] .round-control:hover{background:#304e67}
.game.shop-hub{position:relative;display:block;flex:1;min-height:0;padding:0;overflow:hidden;background:#13283f}
.hub-room{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x;isolation:isolate;background:#13283f}
.hub-room::-webkit-scrollbar{display:none}
.hub-world{--hub-scale:1;position:relative;width:150vh;height:100vh;isolation:isolate}
.hub-art{display:block;width:100%;height:100%;max-width:none;object-fit:fill;user-select:none;pointer-events:none}
.hub-afterhours .hub-art{filter:brightness(.69) saturate(.86)}
.hub-daylight{position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#ffeaba10 15%,transparent 46%);mix-blend-mode:screen;animation:hub-light 13s ease-in-out infinite alternate}
.hub-afterhours .hub-daylight{background:radial-gradient(ellipse at 50% 58%,#ffd69025,transparent 50%)}
.hub-motes{position:absolute;inset:8% 45% 40% 6%;pointer-events:none;overflow:hidden}
.hub-motes i{position:absolute;left:calc(8% + var(--i)*15%);top:calc(28% + var(--i)*9%);width:3px;height:3px;border-radius:50%;background:#ffe5a0;box-shadow:0 0 7px #fff0b9;animation:hub-drift 9s linear infinite;animation-delay:calc(var(--i)*-1.7s)}
.hub-jar-glow{position:absolute;left:66%;top:59%;width:20%;height:14%;background:radial-gradient(ellipse,#ffe6a627,transparent 65%);mix-blend-mode:screen;pointer-events:none;animation:hub-light 4s ease-in-out infinite alternate}
.shop-hub .hub-door-sign{position:absolute;left:20.9%;top:23.4%;right:auto;bottom:auto;transform:translate(-50%,-50%) rotate(2deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4px * var(--hub-scale));width:17.6%;height:10.3%;min-width:0;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;outline:0;color:#ffebc2;text-shadow:0 2px 1px #051221;line-height:1.1;pointer-events:none}
.shop-hub .hub-door-sign:before,.shop-hub .hub-door-sign:after{display:none}
.shop-hub button.hub-door-sign{pointer-events:auto;cursor:pointer;font-family:inherit}
.shop-hub button.hub-door-sign:hover{filter:brightness(1.2)}
.shop-hub button.hub-door-sign:focus-visible{outline:2px dashed #fff0c8;outline-offset:8px;border-radius:8px}
.shop-hub .hub-door-sign span{font-size:clamp(10px,calc(17px * var(--hub-scale)),18px);letter-spacing:.25em}
.shop-hub .hub-door-sign strong{font-size:clamp(20px,calc(37px * var(--hub-scale)),40px);font-family:Georgia,serif;font-weight:600;letter-spacing:.1em;line-height:1}
.shop-hub .hub-door-sign small{font-size:clamp(10px,calc(15px * var(--hub-scale)),16px);letter-spacing:.24em;color:#e7c391}
.hub-object{position:absolute;display:block;margin:0;padding:0;border:0;border-radius:20%;background:none;color:#fff0d2;cursor:pointer;font:inherit;outline-offset:5px;-webkit-tap-highlight-color:transparent;isolation:isolate}
.hub-object:focus-visible{outline:2px dashed #fff1c9;background:#ffe3a415;box-shadow:0 0 30px #ffc77933}
.hub-object-label{position:absolute;left:50%;top:100%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:5px;width:max-content;max-width:125%;padding:7px 12px;color:#fff6dd;text-align:center;line-height:1.3;text-shadow:0 2px 3px #40281b,0 0 9px #462812;transition:transform .25s,color .25s}
.hub-object-label:before{content:'';position:absolute;inset:0 -12px;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#27190f66,transparent 72%);filter:blur(5px);pointer-events:none}
.hub-object-label strong{font-size:clamp(15px,calc(22px * var(--hub-scale)),23px);font-weight:600;letter-spacing:.08em}
.hub-object-label small{font-size:clamp(11px,calc(15px * var(--hub-scale)),15px);color:#ffdfb8;letter-spacing:.06em;font-weight:400}
.hub-object-label em{font-size:.72em;font-style:normal;letter-spacing:0;margin-left:5px;color:#ffe3ae}
.hub-object-label em span{opacity:.75}
.hub-object-halo{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse,#fff2bd30,transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.hub-object:hover .hub-object-halo,.hub-object:focus-visible .hub-object-halo{opacity:1}
.hub-object:hover .hub-object-label,.hub-object:focus-visible .hub-object-label{transform:translate(-50%,-4px);color:#fff}
.hub-journal{left:10%;top:60%;width:31%;height:17%}
.hub-journal .hub-object-label{top:105%}
.hub-emotions{left:65%;top:54%;width:24%;height:21%}
.hub-emotions .hub-object-label{top:113%}
.hub-cups{left:71%;top:23%;width:22%;height:12%}
.hub-cups .hub-object-label{top:108%}
.hub-primary{left:43%;top:64%;width:20%;height:14%}
.hub-primary .hub-object-label{left:47%;top:106%;max-width:160%}
.hub-primary .hub-object-label strong{font-size:clamp(16px,calc(24px * var(--hub-scale)),25px);font-weight:800}
.hub-primary .hub-object-label strong>span{display:inline-block;color:#ffcf8c;transition:transform .25s}
.hub-primary:hover .hub-object-label strong>span{transform:translate(2px,-2px)}
.hub-ticket-ink{position:absolute;left:26%;top:60%;transform:translate(-50%,-50%) rotate(-3deg);width:38%;display:flex;flex-direction:column;align-items:center;gap:calc(7px * var(--hub-scale));color:#6d452b;text-shadow:0 1px #fff2d8;line-height:1.1}
.hub-ticket-ink small{font-size:clamp(9px,calc(13px * var(--hub-scale)),14px);letter-spacing:.05em;white-space:nowrap}
.hub-ticket-ink b{font-size:clamp(13px,calc(20px * var(--hub-scale)),21px);letter-spacing:.05em;white-space:nowrap}
.hub-ticket-ink i{font-size:clamp(10px,calc(15px * var(--hub-scale)),16px);font-style:normal;color:#a76d3a;letter-spacing:.2em}
.hub-bell-ring{position:absolute;left:64%;top:8%;width:15%;height:20%;border-top:2px solid #ffdfa0;border-radius:50%;transform:rotate(-28deg);opacity:.75;animation:hub-bell 3.6s ease-in-out infinite;pointer-events:none}
.hub-bell-ring:after{content:'';position:absolute;inset:-7px -6px;border-top:1px solid #ffdfa0;border-radius:50%;opacity:.65}
.hub-hint{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);margin:0;color:#f4dabac9;font-size:12px;letter-spacing:.2em;pointer-events:none;white-space:nowrap;text-shadow:0 2px 8px #14253a;animation:hub-hint-fade 12s both}
.hub-pan-hint{display:none}
.shop-hub:has(.hub-room[data-panoramic="true"]) .hub-wide-hint{display:none}
.shop-hub:has(.hub-room[data-panoramic="true"]) .hub-pan-hint{display:inline}
.hub-look{position:absolute;top:48%;transform:translateY(-50%);width:42px;height:68px;border:0;background:linear-gradient(90deg,#11233cac,transparent);color:#ffe8c1;cursor:pointer;font:40px Georgia,serif;text-shadow:0 1px 6px #172137;z-index:3}
.hub-look[hidden]{display:none}
.hub-look-left{left:0;border-radius:0 50% 50% 0}
.hub-look-right{right:0;border-radius:50% 0 0 50%;background:linear-gradient(-90deg,#11233cac,transparent)}
.hub-look:hover,.hub-look:focus-visible{color:#fff;outline:1px dashed #ffe8c1}
@keyframes hub-drift{0%{opacity:0;transform:translate(0,25px)}20%{opacity:.65}80%{opacity:.25}100%{opacity:0;transform:translate(24px,-60px)}}
@keyframes hub-light{from{opacity:.35}to{opacity:1}}
@keyframes hub-bell{0%,60%,100%{opacity:0;transform:rotate(-28deg) scale(.85)}72%{opacity:.8;transform:rotate(-28deg) scale(1.08)}87%{opacity:0;transform:rotate(-28deg) scale(1.2)}}
@keyframes hub-hint-fade{0%,65%{opacity:.85}100%{opacity:0}}
@media(max-width:650px){
 #app[data-hub="true"]>.game-topbar{height:62px;padding:10px 12px}
 #app[data-hub="true"] .game-brand{min-width:80px;font-size:22px;gap:8px}
 #app[data-hub="true"] .game-topbar h1{font-size:12px;letter-spacing:.06em}
 #app[data-hub="true"] .round-control{width:36px;height:36px}
 .hub-object-label strong{font-size:17px}
 .hub-object-label small{font-size:12px}
 .hub-primary .hub-object-label strong{font-size:19px}
}
@media(max-height:480px){
 #app[data-hub="true"]>.game-topbar{height:48px;padding:6px 14px}
 #app[data-hub="true"] .round-control{width:32px;height:32px;padding:7px}
 #app[data-hub="true"] .game-brand{font-size:20px}
 .hub-object-label{gap:2px;padding:3px 6px}
 .hub-object-label strong,.hub-primary .hub-object-label strong{font-size:14px}
 .hub-object-label small{font-size:10px}
 .hub-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
 .hub-motes,.hub-bell-ring{display:none}
 .hub-daylight,.hub-jar-glow,.hub-hint{animation:none}
 .hub-object-label,.hub-object-halo{transition:none}
}
