/* Grape House cart (2026-10-24) — the pet page's look: centred column, white cards with a black outline and a
   hard shadow, pill chips, a sky "tank" for the pictures. Colours come from site.css's variables. */
.shop{max-width:680px; margin:0 auto 40px; display:flex; flex-direction:column; gap:18px;}
.shop-loading{text-align:center; color:var(--ink-soft,#6f6178);}
.steps-row{display:flex; justify-content:center; gap:8px; flex-wrap:wrap;}
.steps-row span{display:inline-flex; align-items:center; gap:6px; border:var(--bw,3px) solid var(--line,#141414); border-radius:999px; padding:4px 14px; font-weight:700; background:var(--paper,#fff); box-shadow:2px 2px 0 var(--line,#141414);}
.steps-row span i{font-style:normal; width:24px; height:24px; border-radius:50%; background:var(--grape,#7a5bd6); color:#fff; display:inline-grid; place-items:center; font-size:.85rem;}
.steps-row span.on{background:var(--pink-soft,#ffe3ee);}
.scard{position:relative; background:var(--paper,#fff); border:var(--bw,3px) solid var(--line,#141414); border-radius:22px; box-shadow:var(--shadow-hard,5px 5px 0 #141414); padding:18px 20px 20px;}
.scard h2{margin:0 0 4px; font-size:1.35rem; display:flex; align-items:center; gap:8px;}
.scard .say{margin:0 0 10px; color:var(--ink-soft,#6f6178); font-size:.95rem;}
.tank2{position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; padding:16px 14px 22px; border:var(--bw,3px) solid var(--line,#141414); border-radius:18px; overflow:hidden;
  background:linear-gradient(var(--sky-a,#eaf7ff) 0%, var(--sky-b,#cfeaf8) 70%, #b6dff2 100%);}
.tank2::after{content:""; position:absolute; left:0; right:0; bottom:0; height:12px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 20px, transparent 20px 40px);}
.tank2 figure{margin:0; text-align:center; font-weight:700; font-size:.88rem;}
.tank2 figure img{display:block; border:3px solid var(--line,#141414); border-radius:12px; background:#fff; max-width:100%;}
.tank2 figure.room img{width:min(420px,100%);}
.tank2 figure.room.big img{width:min(600px,100%);}
.tank2 figure.spc img{width:200px;}
.tank2 figure.aq img{height:96px; border:0; background:none;}
.lines{margin-top:12px;}
.line{display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:2px dashed var(--line-soft,#e2d6ff);}
.line .ic{font-size:1.2rem; width:28px; text-align:center;}
.line .nm{flex:1; font-weight:600;}
.line .pr{font-weight:800; color:var(--pink-deep,#c74b8a); white-space:nowrap;}
.line a, .line button{font:inherit; font-size:.8rem; border:2px solid var(--line,#141414); background:#fff; border-radius:999px; padding:0 9px; cursor:pointer; color:var(--ink,#141414); text-decoration:none;}
.line button{background:#ffe3ec;}
.letters{margin-top:10px; display:flex; flex-direction:column; gap:6px;}
.letters .gh-letter{margin:0;}
.total{display:flex; justify-content:space-between; align-items:center; margin-top:14px; background:#ffd45e; border:var(--bw,3px) solid var(--line,#141414); border-radius:16px; padding:6px 16px; font-weight:800; font-size:1.15rem; box-shadow:3px 3px 0 var(--line,#141414);}
.total b{font-size:1.6rem;}
.field{display:block; margin-top:10px; font-weight:700; font-size:.92rem;}
.field input{display:block; width:100%; box-sizing:border-box; margin-top:4px; font:inherit; font-weight:600; padding:8px 14px; border:var(--bw,3px) solid var(--line,#141414); border-radius:14px; background:#fff; color:var(--ink,#141414);}
.field small{font-weight:600; color:var(--ink-soft,#6f6178);}
.qrs{display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:12px;}
.qrs figure{margin:0; width:190px; text-align:center; font-weight:700; font-size:.9rem;}
.qrs img{width:100%; border:3px solid var(--line,#141414); border-radius:16px; background:#fff; display:block; margin-bottom:4px;}
.bank{margin-top:14px; text-align:center; background:#f7f2ff; border:3px solid var(--line,#141414); border-radius:16px; padding:10px;}
.bank b{display:block; font-size:1.7rem; letter-spacing:1px; color:var(--grape,#5a3fb0);}
.sbtn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:800; font-size:1.05rem; cursor:pointer; text-decoration:none;
  padding:10px 24px; background:var(--pink-soft,#ffe3ee); color:var(--ink,#141414); border:var(--bw,3px) solid var(--line,#141414); border-radius:999px; box-shadow:3px 3px 0 var(--line,#141414); transition:transform .12s, box-shadow .12s;}
.sbtn:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--line,#141414);}
.sbtn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--line,#141414);}
.sbtn.mint{background:var(--mint,#a8e6cf);} .sbtn.small{font-size:.88rem; padding:5px 14px;}
.sbtn.big{width:100%; font-size:1.25rem; padding:14px; margin-top:14px; background:var(--pink,#ff8fb1);}
.sbtn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:3px 3px 0 var(--line,#141414);}
.drop{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; margin-top:12px; min-height:180px; border:3px dashed var(--grape,#7a5bd6); border-radius:18px; background:#f7f2ff; font-weight:700; color:var(--grape,#5a3fb0); cursor:pointer; text-align:center; padding:12px;}
.drop.has{border-style:solid; background:#fff;}
.drop img{max-height:260px; max-width:100%; border-radius:10px; border:2px solid var(--line,#141414);}
.err{margin-top:10px; background:#ffe3ec; color:#a8366b; border:2px solid #ff8fb5; border-radius:12px; padding:6px 12px; font-weight:700; text-align:center;}
.center{text-align:center;}
.bigseal{width:150px; margin:6px auto; display:block; animation:shop-bob 2.4s ease-in-out infinite;}
@keyframes shop-bob{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-8px) rotate(3deg);}}
.sleepy{filter:grayscale(.2); animation:none; transform:rotate(-8deg);}
.orderno{display:inline-block; margin:6px 0; font-size:1.6rem; font-weight:800; color:var(--grape,#5a3fb0); background:#fff7d6; border:3px solid var(--line,#141414); border-radius:999px; padding:2px 22px; box-shadow:3px 3px 0 var(--line,#141414);}
.btnrow{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:12px;}
.shop-toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:#3b3140; color:#fff; font-weight:700; padding:8px 22px; border-radius:999px; opacity:0; transition:.3s; z-index:40; pointer-events:none;}
.shop-toast.show{opacity:1; transform:translateX(-50%);}
/* plot picker (Grape Village, 2026-10-25): plots in village order, four to a row like the map */
.pk-map.pk-lots{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:10px; background:#bfe8a8;}
.pk-cell.garden{display:flex; align-items:center; justify-content:center; font-size:1.4rem; background:#d6efc6; border-style:dotted; opacity:.75;}
/* room picker (2026-10-25) — the house as a grid of slots, top floor first, like the real house page */
.pk-status{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:4px 0 10px; font-weight:700; text-align:center;}
.pk-status b{font-size:1.2rem; color:var(--grape,#5a3fb0);}
.pk-status.soft{color:var(--ink-soft,#6f6178); font-weight:600;}
.pk-map{max-height:440px; overflow-y:auto; padding:12px 10px 0; border:var(--bw,3px) solid var(--line,#141414); border-radius:18px;
  background:linear-gradient(var(--sky-a,#eaf7ff), var(--sky-b,#cfeaf8)); display:flex; flex-direction:column; gap:6px;}
.pk-house{align-self:center; font-weight:800; font-size:.85rem; background:#fff7d6; border:2px solid var(--line,#141414); border-radius:999px; padding:1px 12px; margin-top:4px;}
.pk-floor{display:grid; grid-template-columns:26px repeat(var(--per,5), 1fr); gap:5px; align-items:stretch; background:#f6e7d4; border:2px solid var(--line,#141414); border-radius:10px; padding:5px;}
.pk-no{align-self:center; text-align:center; font-weight:800; font-size:.8rem; color:#8a6a4a;}
.pk-cell{min-width:0; min-height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border:2px solid var(--line,#141414); border-radius:8px; font:inherit; padding:2px; line-height:1.1; overflow:hidden;}
.pk-cell.big{grid-column:span 2;}
.pk-cell img{width:30px; height:auto; display:block;}
.pk-cell small{font-size:.68rem; font-weight:700; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pk-cell b{font-size:.92rem;}
.pk-cell.own{background:#e9e2f5; color:#6f6178;}
.pk-cell.own img{opacity:.8;}
.pk-cell.free{background:#fff; color:var(--ink,#141414); cursor:pointer; border-style:dashed; transition:transform .12s, background .12s;}
.pk-cell.free:hover{background:#fff1f6; transform:translateY(-2px);}
.pk-cell.free.on{background:var(--pink,#ff8fb1); border-style:solid; box-shadow:2px 2px 0 var(--line,#141414); animation:pk-pop .35s ease-out;}
.pk-cell.free.nofit{opacity:.35; cursor:not-allowed; transform:none;}
@keyframes pk-pop{0%{transform:scale(.85);}70%{transform:scale(1.08);}100%{transform:scale(1);}}
.pk-ground{height:12px; margin:0 -10px; background:repeating-linear-gradient(90deg,#8fd18a 0 14px,#7cc477 14px 28px); border-top:2px solid var(--line,#141414);}
.pk-legend{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:.85rem; font-weight:700;}
.pk-legend .lg{display:inline-block; width:14px; height:14px; border:2px solid var(--line,#141414); border-radius:4px; vertical-align:-2px; margin-right:4px;}
.lg.free{background:#fff; border-style:dashed;} .lg.own{background:#e9e2f5;} .lg.on{background:var(--pink,#ff8fb1);}
@media (max-width:520px){.pk-cell{min-height:50px;} .pk-cell img{width:24px;} .pk-floor{grid-template-columns:20px repeat(var(--per,5), 1fr); gap:3px; padding:4px;}}
:root[data-theme="dark"] .pk-cell.free{background:#1f1a33; color:#efeaff;}
:root[data-theme="dark"] .pk-cell.free.on{background:var(--pink,#ff8fb1); color:#141414;}
:root[data-theme="dark"] .pk-cell.own{background:#3a3150; color:#cfc6e6;}
:root[data-theme="dark"] .scard, :root[data-theme="dark"] .steps-row span{background:#2a2440; color:#efeaff;}
:root[data-theme="dark"] .field input, :root[data-theme="dark"] .drop.has, :root[data-theme="dark"] .bank{background:#1f1a33; color:#efeaff;}
@media (prefers-reduced-motion: reduce){.bigseal{animation:none;}}
@media (max-width:520px){.scard{padding:14px 14px 16px;} .qrs figure{width:150px;}}

/* the plot picker as the real village map (2026-10-25) */
.pk-village{max-height:min(70vh,620px); overflow-y:auto; border-radius:22px; margin-top:8px; -webkit-overflow-scrolling:touch;}
.pk-village .gv-map{min-width:560px; border-width:3px;}
.pk-village .gv-fs{display:none;}
.pk-sign{display:inline-block; background:#f3fff0; border:2px dashed #3b3140; border-radius:8px; padding:0 6px; font-size:.9em; color:#5f7a55;}

/* the chosen land, at the top of the paying step (2026-10-25) */
.scard.pk-done{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 18px; background:#f3fff0;}
.steps-row span[data-step]:hover{background:#fff3fa;}