/* ---- shops.css: shopfronts, special offers, standing at a shop, the buy window's previews and "bought it" moment,
   and My House's key, deeds and opening doors (js/shops.js, js/house.js) */

/* the shopfront: the shop's town behind its keeper */
.shopfront{ position:relative; display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:18px; align-items:center; padding:20px 22px; border-radius:24px; overflow:hidden; isolation:isolate;
  border:1px solid rgba(164,107,255,.35); background:#170c28; box-shadow:0 18px 40px rgba(0,0,0,.35); }
.sf-bg{ position:absolute; inset:0; z-index:-2; background:center / cover no-repeat; opacity:.55; transform:scale(1.04); filter:saturate(1.1); }
.shopfront::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(14,7,26,.92) 0%, rgba(14,7,26,.72) 55%, rgba(14,7,26,.45) 100%); }
.sf-keeper{ display:flex; gap:16px; align-items:flex-start; min-width:0; }
.sf-keeper > img{ width:96px; height:96px; flex:0 0 auto; border-radius:26px; object-fit:cover; border:2px solid rgba(255,255,255,.18); box-shadow:0 8px 20px rgba(0,0,0,.45); }
.sf-name{ display:flex; flex-direction:column; gap:1px; } .sf-name b{ font-size:17px; }
.sf-keeper .say{ max-width:none; }
.sf-side{ display:grid; gap:10px; }
.sf-stand, .sf-special{ display:grid; gap:6px; padding:12px 14px; border-radius:16px; background:rgba(13,7,22,.62); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(4px); }
.sf-off{ color:var(--lime, #9dff2e); border-color:rgba(157,255,46,.45); }
.sf-bar{ height:8px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.sf-bar i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #9dff2e, #ffd23f); }
.sf-special{ border-color:rgba(255,210,63,.45); background:linear-gradient(135deg, rgba(255,210,63,.16), rgba(13,7,22,.62)); }
.sf-special b{ font-size:16px; }
button.sf-special{ font:inherit; color:inherit; text-align:left; cursor:pointer; width:100%; transition:transform .15s, border-color .15s; }
button.sf-special:hover:not(:disabled){ transform:translateY(-2px); border-color:rgba(255,210,63,.8); }
button.sf-special:disabled{ cursor:default; opacity:.7; }
.sf-sprow{ display:flex; align-items:center; gap:12px; min-width:0; }
.sf-spic{ flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center; }
.sf-spic img, .sf-spic svg{ max-width:100%; max-height:100%; }
.sf-special .pr.was{ margin-left:4px; }
@media (max-width:760px){
  .shopfront{ grid-template-columns:1fr; padding:16px; }
  .sf-keeper > img{ width:72px; height:72px; border-radius:20px; }
}

/* shelf cards: what it does, what you own, and the special */
.shelf .item{ position:relative; }
.shelf .item .fxrow{ min-height:22px; margin-top:2px; }
.shelf .item .fx{ font-size:10.5px; padding:3px 7px; }
.fx.tag{ --c:#c9b8ff; } .fx.new{ --c:#ffd23f; }
.shelf .item .own{ position:absolute; left:10px; top:10px; padding:2px 7px; border-radius:99px; font:800 11px/1.4 var(--f-head, inherit); background:rgba(157,255,46,.16); color:var(--lime, #9dff2e); border:1px solid rgba(157,255,46,.4); }
.prrow{ display:flex; gap:6px; align-items:baseline; justify-content:center; }
.pr.was{ color:var(--muted, #a99bc6); text-decoration:line-through; font-size:12px; opacity:.85; }
.item.special{ box-shadow:0 0 0 2px #ffd23f, 0 0 20px rgba(255,210,63,.3); }
.sp-rib{ position:absolute; left:-4px; top:34px; padding:3px 10px 3px 8px; border-radius:0 99px 99px 0; background:#ffd23f; color:#1a0d2e; font:900 12px/1.3 var(--f-head, inherit); box-shadow:0 4px 10px rgba(0,0,0,.35); }
.chip.sp{ background:#ffd23f; color:#1a0d2e; border-color:#ffd23f; font-weight:800; }

/* the buy window */
.bwin{ display:grid; gap:14px; }
.bwin-ic{ width:100px; height:100px; flex:0 0 auto; }
.bwin s{ opacity:.6; margin-right:2px; }
.bpv{ margin:0; display:grid; gap:6px; justify-items:center; }
.bpv figcaption{ font-size:12.5px; color:var(--muted, #a99bc6); text-align:center; }
.bpv-stage{ width:min(260px, 70vw); aspect-ratio:1; border-radius:20px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.12); background:#120a20; }
.bpv-stage .goopfig{ position:absolute; inset:0; width:100%; height:100%; }
.bpv.care{ display:flex; grid-template-columns:none; gap:14px; align-items:center; justify-content:flex-start; padding:10px 12px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.bpv-goop{ width:76px; height:76px; flex:0 0 auto; position:relative; }
.bpv-goop .goopfig{ position:absolute; inset:0; width:100%; height:100%; }
.hpvstage{ width:100%; max-width:520px; aspect-ratio:16/10; }
.hpv{ position:absolute; width:18%; height:auto; transform:translate(-50%,-92%); filter:drop-shadow(0 6px 5px rgba(0,0,0,.45)); pointer-events:none; }
.hpv.rug{ width:26%; transform:translate(-50%,-55%); }
.hpv.new{ filter:drop-shadow(0 0 10px rgba(157,255,46,.85)) drop-shadow(0 6px 5px rgba(0,0,0,.45)); animation:hpvIn .7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes hpvIn{ from{ opacity:0; translate:0 -18px; } to{ opacity:1; translate:0 0; } }

/* "bought it" */
.bwin.got{ text-align:center; justify-items:center; }
.bwin.got h2{ margin:0; }
.got-ic{ position:relative; width:120px; height:120px; display:grid; place-items:center; }
.got-ic .ic{ width:110px; height:110px; display:block; }
.got-n{ position:absolute; right:-6px; bottom:4px; padding:3px 9px; border-radius:99px; background:var(--lime, #9dff2e); color:#14200a; font:900 14px/1.2 var(--f-head, inherit); }
.got-ic > i{ position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:2px; opacity:0; pointer-events:none; }
.bwin.got.anim .got-ic .ic{ animation:gotPop .55s cubic-bezier(.2,1.6,.4,1) both; }
.bwin.got.anim .got-ic > i{ animation:gotBurst .9s ease-out .1s both; }
@keyframes gotPop{ 0%{ transform:scale(.3) rotate(-12deg); opacity:0; } 100%{ transform:scale(1) rotate(0); opacity:1; } }
@keyframes gotBurst{ 0%{ transform:translate(-50%,-50%); opacity:1; } 100%{ transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(220deg); opacity:0; } }
.got-tier{ display:grid; gap:2px; padding:10px 14px; border-radius:14px; background:linear-gradient(135deg, rgba(157,255,46,.18), rgba(255,210,63,.12)); border:1px solid rgba(157,255,46,.45); }

/* My House: the key, the deed, the doors */
.hkey{ display:grid; gap:12px; justify-items:center; text-align:center; }
.hkey .host{ text-align:left; }
.hkey-art{ width:120px; height:120px; filter:drop-shadow(0 10px 18px rgba(255,210,63,.35)); }
.hkey-art svg{ width:100%; height:100%; }
.hkeymodal .hkey-art{ animation:keyFloat 2.6s ease-in-out infinite; }
.hkey-art.turn{ animation:keyTurn .7s cubic-bezier(.5,0,.2,1) forwards !important; }
@keyframes keyFloat{ 50%{ transform:translateY(-6px) rotate(-6deg); } }
@keyframes keyTurn{ 0%{ transform:rotate(0) scale(1); } 60%{ transform:rotate(-90deg) scale(1.1); } 100%{ transform:rotate(-90deg) scale(.2); opacity:0; } }
.deed{ position:relative; display:grid; gap:12px; padding:20px 22px; border-radius:16px; color:#3b2412; text-align:left;
  background:radial-gradient(ellipse at 30% 0%, #fff8e4, #f3e2bb 60%, #e6cc93); border:2px solid #b58b4c; box-shadow:inset 0 0 0 5px rgba(181,139,76,.22), 0 10px 30px rgba(0,0,0,.4); }
.deed h2{ margin:0; font-family:'Cinzel', Georgia, serif; font-size:26px; color:#3b2412; letter-spacing:.04em; }
.deed small, .deed .small{ color:#6b4a26; }
.deed .say{ background:rgba(255,255,255,.65); color:#2b1a0c; }
.deed .say::after{ display:none; }
.deed .dim, .deed .small.dim{ color:#7a5a32; opacity:1; }
.deed-head{ display:flex; gap:12px; align-items:center; }
.deed-head small{ font:700 11px/1.2 var(--f-head, inherit); letter-spacing:.14em; text-transform:uppercase; }
.deed-seal{ width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:#fff3c4; background:radial-gradient(circle at 35% 30%, #e0543c, #8a1f12); box-shadow:0 3px 8px rgba(0,0,0,.35); }
.deed-seal svg{ width:22px; height:22px; }
.deed-room{ width:100%; max-height:170px; object-fit:contain; border-radius:10px; background:rgba(59,36,18,.08); }
.deed-lines{ display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; margin:0; }
.deed-lines div{ display:flex; justify-content:space-between; gap:8px; border-bottom:1px dotted rgba(59,36,18,.35); padding:3px 0; }
.deed-lines dt{ font:700 11px/1.6 var(--f-head, inherit); letter-spacing:.1em; text-transform:uppercase; color:#7a5a32; }
.deed-lines dd{ margin:0; font-weight:700; text-align:right; }
.deed-lines .pr{ color:#3b2412; }
.deed-sign{ position:relative; display:flex; align-items:flex-end; gap:8px; height:64px; border-bottom:2px solid #3b2412; }
.deed-x{ font:900 18px/1 var(--f-head, inherit); color:#8a1f12; padding-bottom:6px; }
.deed .sig{ height:60px; width:auto; max-width:85%; overflow:visible; }
.deed .sig text{ font:italic 600 40px 'Fredoka', cursive; fill:transparent; stroke:#1b2a8a; stroke-width:1.2; stroke-dasharray:900; stroke-dashoffset:900; }
.deed.signed .sig text{ animation:sigWrite 1.1s ease-out forwards, sigInk .4s ease-out 1s forwards; }
@keyframes sigWrite{ to{ stroke-dashoffset:0; } }
@keyframes sigInk{ to{ fill:#1b2a8a; } }
.deed-stamp{ position:absolute; right:6px; bottom:6px; padding:4px 12px; border:3px solid #b3261e; border-radius:8px; color:#b3261e; font:900 22px/1 'Cinzel', Georgia, serif; letter-spacing:.12em; text-transform:uppercase; transform:rotate(-12deg) scale(2.4); opacity:0; }
.deed.signed .deed-stamp{ animation:stamp .35s cubic-bezier(.3,1.6,.5,1) 1.2s forwards; }
@keyframes stamp{ to{ transform:rotate(-12deg) scale(1); opacity:.9; } }
.deed.mini{ grid-template-columns:auto 1fr; align-items:center; gap:12px; padding:12px 14px; }
.deed.mini b{ display:block; font-family:'Cinzel', Georgia, serif; }
.deed.mini small{ display:block; }
.deedmodal .modal, .modal.deedmodal{ width:min(560px, 94vw); }
@media (max-width:520px){ .deed{ padding:16px; } .deed-lines{ grid-template-columns:1fr; } .deed h2{ font-size:22px; } }
@media (prefers-reduced-motion:reduce){ .deed .sig text{ fill:#1b2a8a; stroke-dashoffset:0; } .deed.signed .deed-stamp{ animation:none; transform:rotate(-12deg); opacity:.9; } .hkeymodal .hkey-art{ animation:none; } }
html.calm .deed .sig text{ fill:#1b2a8a; stroke-dashoffset:0; } html.calm .deed.signed .deed-stamp{ animation:none; transform:rotate(-12deg); opacity:.9; } html.calm .hkeymodal .hkey-art{ animation:none; }

.hdoors{ position:absolute; inset:0; z-index:90; display:flex; perspective:1200px; pointer-events:none; }
.hdoors i{ flex:1; background:linear-gradient(90deg, #5a3416, #8a5528 40%, #6b3f1c); box-shadow:inset 0 0 0 6px #3d220d, inset 0 0 40px rgba(0,0,0,.45); }
.hdoors i:first-child{ transform-origin:left center; animation:doorL 1.3s cubic-bezier(.6,0,.2,1) .25s forwards; }
.hdoors i:last-child{ transform-origin:right center; animation:doorR 1.3s cubic-bezier(.6,0,.2,1) .25s forwards; }
@keyframes doorL{ to{ transform:rotateY(-100deg); opacity:0; } }
@keyframes doorR{ to{ transform:rotateY(100deg); opacity:0; } }
.hconf{ position:absolute; left:50%; top:50%; width:0; height:0; z-index:95; pointer-events:none; }
.hconf i{ position:absolute; width:9px; height:9px; border-radius:2px; opacity:0; animation:hconf 1.8s cubic-bezier(.2,.8,.4,1) forwards; }
@keyframes hconf{ 0%{ transform:translate(0,0); opacity:1; } 80%{ opacity:1; } 100%{ transform:translate(var(--x), calc(var(--y) + 140px)) rotate(var(--r)); opacity:0; } }