/* The shop's fantasy art and motion stay inside its own page. */
.shop-page { --shop-gold:#f5c542; --shop-gold-light:#ffe4a0; --shop-ink:#0b121e; margin-top:34px; margin-bottom:54px; }
.shop-page [hidden] { display:none !important; }
.shop-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; }
.shop-eyebrow { font:700 .7rem var(--font-body); letter-spacing:.18em; color:var(--shop-gold); margin-bottom:9px; }
.shop-heading h1 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.9rem,3.4vw,3rem); font-weight:700; letter-spacing:-.025em; line-height:1.12; color:#f3eee3; margin-bottom:10px; }
.shop-tagline { color:#9daec5; font-size:.96rem; }
.shop-wallet { display:flex; flex-direction:column; gap:5px; flex-shrink:0; padding:13px 19px; border:1px solid #735c2c; border-radius:12px; background:#101724; min-width:205px; }
.shop-wallet>span { font-size:.74rem; color:#b0bfd2; }
.shop-wallet>span:first-child { max-width:250px; overflow-wrap:anywhere; }
.shop-wallet strong { color:var(--shop-gold-light); font-size:1.55rem; line-height:1.25; }
.shop-wallet small { font-size:.85rem; font-weight:500; }
.shop-coin { color:var(--shop-gold); text-shadow:0 0 15px #f5c54255; }
.shop-frame { display:grid; grid-template-columns:minmax(0,1fr) 332px; overflow:hidden; background:var(--shop-ink); border:1px solid #6f5a31; border-radius:17px; box-shadow:0 18px 65px #0006; }
.shop-scene { position:relative; min-height:640px; overflow:hidden; isolation:isolate; background:#11243a; cursor:pointer; }
.shop-next { position:absolute; inset:0; z-index:2; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; }
.shop-page .shop-next:focus-visible { outline:2px solid var(--shop-gold); outline-offset:-4px; }
.shop-backdrop { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; object-position:36% 50%; }
.shop-scene:after { content:''; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,#05102066,transparent 24%,transparent 65%,#040c19e8); pointer-events:none; }
.shop-ambience { position:absolute; inset:0; pointer-events:none; z-index:2; }
.shop-lantern,.shop-crystal { position:absolute; border-radius:50%; mix-blend-mode:screen; filter:blur(14px); animation:shop-flicker 4s ease-in-out infinite alternate; }
.shop-lantern { width:100px; height:135px; background:#ffb33a3d; left:3%; top:22%; }
.shop-crystal { width:110px; height:180px; background:#0bd9ff20; right:7%; top:32%; animation-duration:5.5s; }
.shop-mote { position:absolute; bottom:21%; left:12%; width:3px; height:3px; border-radius:50%; color:#ffda85; background:currentColor; box-shadow:0 0 9px currentColor; animation:shop-drift 8s linear infinite; opacity:0; }
.shop-mote:nth-of-type(4) { left:29%; bottom:17%; animation-delay:-2s; animation-duration:10s; }
.shop-mote:nth-of-type(5) { left:57%; bottom:25%; animation-delay:-5s; }
.shop-mote:nth-of-type(6) { left:83%; bottom:35%; color:#69e6ff; animation-delay:-1s; animation-duration:12s; }
.shop-mote:nth-of-type(7) { left:42%; bottom:21%; animation-delay:-7s; }
.shop-mote:nth-of-type(8) { left:75%; bottom:20%; color:#69e6ff; animation-delay:-4s; animation-duration:11s; }
.shop-open { position:absolute; z-index:3; top:22px; left:24px; display:flex; align-items:center; gap:8px; font-size:.7rem; letter-spacing:.04em; color:#ebeddf; background:#09121dd9; padding:8px 12px; border:1px solid #b0bd9c40; border-radius:30px; }
.shop-open>span { width:6px; height:6px; border-radius:50%; background:#80e5b2; box-shadow:0 0 8px #80e5b266; }
.shop-speech { position:absolute; z-index:4; left:43%; top:26%; width:min(270px,48%); padding:15px 18px 11px; background:#101827ee; color:#f4eee0; border:1px solid #bba778; border-radius:14px 14px 14px 3px; font:500 .91rem/1.5 var(--font-body); text-align:left; box-shadow:0 7px 22px #0005; cursor:pointer; transition:transform .2s,border-color .2s; }
.shop-speech:after { content:''; position:absolute; bottom:-10px; left:15px; width:16px; height:16px; background:#101827; border-right:1px solid #bba778; border-bottom:1px solid #bba778; transform:skewY(-35deg); }
.shop-click-hint { display:block; flex-shrink:0; width:20px; height:22px; margin:8px 0 0 auto; color:#e5e9ed; opacity:.55; pointer-events:none; animation:shop-click-cue 1.4s ease-in-out 2; }
.shop-click-hint svg { display:block; width:100%; height:100%; }
.shop-speech:hover .shop-click-hint { opacity:.85; }
.shop-speech.is-rambling { top:65px; left:16px; width:calc(100% - 32px); max-height:calc(100% - 85px); display:flex; flex-direction:column; padding:18px; }
.shop-speech.is-rambling #shop-quote { overflow:auto; min-height:0; white-space:pre-line; overflow-wrap:anywhere; scrollbar-color:#bba778 #172234; font-size:.8rem; line-height:1.55; }
.shop-speech.is-rambling:hover { transform:none; }
.shop-speech:hover { transform:translateY(-3px); border-color:var(--shop-gold); }
.shop-scene-caption { position:absolute; left:26px; bottom:25px; z-index:3; padding-right:20px; }
.shop-scene-caption>span { font-size:.66rem; letter-spacing:.15em; color:var(--shop-gold-light); }
.shop-scene-caption p { color:#bdc8d5; font-size:.76rem; line-height:1.65; margin-top:7px; }
.shop-counter { position:relative; z-index:5; padding:24px 26px 22px; background:radial-gradient(ellipse at 50% 7%,#26364988,transparent 40%),linear-gradient(165deg,#101b29,#090f19 75%); border-left:1px solid #6f5a3180; display:flex; align-items:center; flex-direction:column; text-align:center; }
.shop-item-art { position:relative; width:100%; height:175px; display:grid; place-items:center; margin-bottom:4px; }
.shop-item-art img { position:relative; z-index:1; width:210px; height:190px; object-fit:contain; filter:drop-shadow(0 12px 15px #0009); animation:shop-float 5s ease-in-out infinite; }
.shop-item-halo { position:absolute; width:160px; height:120px; border-radius:50%; background:radial-gradient(ellipse,#a7c85630,transparent 68%); }
.shop-item-type { color:#b4a681; font-size:.61rem; font-weight:700; letter-spacing:.17em; margin-top:4px; }
.shop-counter h2 { font-family:Georgia,'Times New Roman',serif; font-size:2.4rem; color:#f4eee0; margin:5px 0; line-height:1.2; }
.shop-item-description { font-size:.78rem; color:#a2b0c3; }
.shop-unit-price { color:var(--shop-gold); display:flex; align-items:center; justify-content:center; gap:9px; margin:17px 0 15px; }
.shop-unit-price strong { font-size:1.7rem; line-height:1; }
.shop-unit-price>span:last-child { color:#d7bc73; font-size:.8rem; }
.shop-quantity-label { font-size:.71rem; color:#b1bbcc; margin-bottom:7px; }
.shop-quantity { display:flex; width:177px; height:41px; gap:6px; }
.shop-quantity button,.shop-quantity input { color:#f4eee0; background:#0c1522; border:1px solid #536077; border-radius:7px; text-align:center; }
.shop-quantity button { width:42px; font-size:1.25rem; cursor:pointer; border-color:#a78a49; }
.shop-quantity input { width:81px; min-width:0; padding:4px; font:600 1rem var(--font-body); appearance:textfield; -moz-appearance:textfield; }
.shop-quantity input::-webkit-inner-spin-button,.shop-quantity input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.shop-page button:disabled { opacity:.4; cursor:not-allowed; }
.shop-page button:focus-visible,.shop-page a:focus-visible,.shop-page input:focus-visible { outline:2px solid var(--cyan-primary); outline-offset:4px; }
.shop-totals { width:100%; border-top:1px solid #715e384d; margin-top:19px; padding-top:16px; }
.shop-totals p { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.91rem; }
.shop-totals strong { color:var(--shop-gold-light); font-size:1.1rem; }
.shop-totals p+p { margin-top:6px; font-size:.75rem; color:#a1b0c6; }
.shop-buy { width:100%; background:linear-gradient(180deg,#ffe291,#eab538); color:#241a09; border:1px solid #ffdd77; border-radius:8px; padding:13px 10px; margin-top:19px; font:800 .88rem var(--font-body); box-shadow:inset 0 1px #fff6,0 4px 18px #e6a82a16; cursor:pointer; transition:filter .2s,transform .2s; }
.shop-buy:hover:enabled { filter:brightness(1.1); transform:translateY(-1px); }
.shop-notice { font-size:.7rem; color:#b4c1d2; line-height:1.5; min-height:32px; margin-top:11px; }
.shop-login { font-size:.8rem; color:var(--shop-gold-light); margin:4px 0 10px; }
.shop-launch { display:flex; align-items:center; justify-content:center; gap:12px; color:#6edce7; font-size:.78rem; margin-top:auto; padding-top:14px; }
.shop-inventory { display:flex; gap:13px; align-items:center; padding:14px 20px; border:1px solid #344152; border-top:0; border-radius:0 0 12px 12px; background:#0d1521; margin:0 14px; }
.shop-inventory img { width:42px; height:42px; object-fit:contain; }
.shop-inventory p { display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-size:.81rem; color:#b2bfd0; }
.shop-inventory strong { color:#83e3e7; font-size:.95rem; }
.shop-inventory>span { margin-left:auto; color:#8597af; font-size:.66rem; }
.shop-feedback { color:#b2edcc; font-size:.85rem; margin-top:16px; line-height:1.5; min-height:22px; }
.shop-feedback.is-error { color:#ffb2b8; }
.shop-dialog { position:fixed; inset:0; margin:auto; width:min(460px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; color:#ecedf3; background:#101b29; border:1px solid #a78a49; border-radius:15px; padding:28px; box-shadow:0 25px 80px #0009; }
.shop-dialog::backdrop { background:#030813c9; backdrop-filter:blur(5px); }
.shop-dialog h2 { font-family:Georgia,'Times New Roman',serif; font-size:1.8rem; margin:10px 0 17px; }
.shop-dialog p { line-height:1.6; font-size:.9rem; }
.shop-confirm-note { color:#9cacbf; font-size:.78rem !important; margin-top:9px; }
.shop-dialog-actions { display:flex; gap:12px; align-items:stretch; margin-top:24px; }
.shop-dialog-actions>button { flex:1; margin:0; min-height:46px; }
.shop-dialog-actions>button:first-child { border:1px solid #536077; background:#152133; border-radius:8px; color:#d0d9e4; font:500 .8rem var(--font-body); cursor:pointer; }
.shop-error { color:#ffadb4; margin-top:15px; }
.shop-flying-item,.shop-flying-coin { position:fixed; pointer-events:none; z-index:10000; }
.shop-flying-item { width:74px; height:74px; object-fit:contain; }
.shop-flying-coin { color:#ffe094; font-size:26px; text-shadow:0 0 15px #ffb84b; }
.shop-inventory.is-celebrating { animation:shop-inventory-flash .8s ease-out; }
.shop-noscript { margin-top:20px; }
@keyframes shop-float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-7px) rotate(1deg); } }
@keyframes shop-flicker { 0%,100% { opacity:.65; } 22% { opacity:.9; } 27% { opacity:.6; } 53% { opacity:.8; } 78% { opacity:1; } }
@keyframes shop-drift { 0% { opacity:0; transform:translate(0,0); } 20%,70% { opacity:.75; } 100% { opacity:0; transform:translate(24px,-150px); } }
@keyframes shop-inventory-flash { 30% { box-shadow:0 0 26px #90e0a44d; border-color:#90e0a4; } }
@keyframes shop-click-cue { 0%,100% { opacity:.55; transform:translateY(0); } 50% { opacity:.9; transform:translateY(-2px); } }
@media(min-width:1500px) { .shop-scene { min-height:680px; } }
@media(max-width:1050px) { .shop-frame { grid-template-columns:minmax(0,1fr) 300px; } .shop-counter { padding:24px 20px 22px; } .shop-speech { left:30%; top:20%; width:64%; } .shop-heading h1 { font-size:2.1rem; } }
@media(max-width:760px) { .shop-page { margin-top:25px; } .shop-heading { align-items:flex-start; gap:18px; flex-direction:column; margin-bottom:20px; } .shop-heading h1 { font-size:2rem; } .shop-tagline { font-size:.85rem; } .shop-wallet { flex-direction:row; align-items:center; gap:12px; width:100%; min-width:0; padding:10px 14px; flex-wrap:wrap; } .shop-wallet>span:first-child { margin-right:auto; } .shop-wallet>span:last-child { width:100%; font-size:.68rem; } .shop-wallet strong { font-size:1.2rem; } .shop-frame { grid-template-columns:1fr; } .shop-scene { min-height:0; height:400px; } .shop-backdrop { object-position:30% 50%; } .shop-speech { top:17%; left:44%; width:51%; font-size:.78rem; padding:12px; } .shop-open { left:15px; top:15px; font-size:.63rem; } .shop-scene-caption { left:18px; bottom:17px; } .shop-scene-caption p { font-size:.68rem; } .shop-scene-caption>span { font-size:.58rem; } .shop-counter { border-left:0; border-top:1px solid #6f5a3180; padding:22px 28px 26px; } .shop-item-art { height:145px; } .shop-item-art img { height:160px; width:180px; } .shop-counter h2 { font-size:2.2rem; } .shop-counter>* { max-width:380px; } .shop-inventory { margin:0 8px; padding:10px 12px; gap:8px; flex-wrap:wrap; } .shop-inventory>span { width:100%; margin-left:0; } .shop-inventory p { font-size:.75rem; } }
@media(max-width:390px) { .shop-page { padding-left:12px; padding-right:12px; } .shop-heading h1 { font-size:1.7rem; } .shop-scene { height:330px; } .shop-counter { padding-left:20px; padding-right:20px; } .shop-speech { left:39%; width:56%; top:15%; font-size:.73rem; } .shop-open { max-width:90%; } .shop-dialog { padding:22px; } }
@media(prefers-reduced-motion:reduce) { .shop-page *, .shop-page *:before, .shop-page *:after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .shop-mote { display:none; } }