/* Grape House (village.html) — the house, its side panel and the room window. See grape-house.js.
   The house itself stays pastel in dark mode on purpose: it's a picture, like the canvas rooms in it.
   Only the side cards and the window follow the site theme. */

.gh-shell{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start; margin:10px 0 30px;}
.gh-shell.hidden{display:none;}
.gh-house{--gh-ink:#3b3140; position:relative; max-width:1040px; margin:0 auto; width:100%; padding-top:6px;}

/* ---- roof: two clip-path layers, the dark one a hair bigger, fake the drawn outline ---- */
.gh-roof{position:relative; padding:5.5% 14% 1.6%; display:flex; justify-content:center;}
.gh-roof::before, .gh-roof::after{content:""; position:absolute; inset:0; clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);}
.gh-roof::before{background:var(--gh-ink);}
.gh-roof::after{inset:4px 6px 0; background:
  repeating-linear-gradient(180deg, transparent 0 22px, rgba(214,176,80,.38) 22px 24px), #fff3b8;}
.gh-roof > *{position:relative; z-index:1;}
.gh-chimney{position:absolute !important; right:24%; top:-4px; width:5%; height:38%; background:#ffd6e4; border:3px solid var(--gh-ink); border-bottom:0; z-index:0 !important;}
.gh-chimney::before{content:""; position:absolute; left:-18%; right:-18%; top:-12px; height:12px; background:#ffb3cc; border:3px solid var(--gh-ink); border-radius:4px;}
.gh-attic{width:42%;}
/* house 2, 3… (2026-10-24): a roof with no king's room under it, a gap above each new house, jump chips on top */
.gh-attic-empty{aspect-ratio:440/90;}
.gh-house-n{margin-top:36px;}
.gh-house-nav{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px 0 14px; position:sticky; top:8px; z-index:5;}
.gh-house-nav a{background:#fff; color:#3b3140; border:3px solid #3b3140; border-radius:99px; padding:4px 14px; font-weight:800; font-size:14px; text-decoration:none; box-shadow:0 3px 0 rgba(59,49,64,.25);}
.gh-house-nav a:hover{background:#ffe3ec;}
.gh-sign{position:absolute !important; left:6%; bottom:10%; background:#fff; border:3px solid var(--gh-ink); border-radius:22px;
  padding:6px 18px; text-align:center; line-height:1.15; box-shadow:0 4px 0 rgba(59,49,64,.12);}
.gh-sign b{display:block; color:#7a5bd6; font-size:clamp(13px,2vw,26px);}
.gh-sign small{display:block; color:#e0609a; font-size:clamp(9px,1.1vw,14px); font-weight:700;}
.gh-roundwin{position:absolute !important; right:9%; bottom:20%; width:6%; aspect-ratio:1; border-radius:50%; border:3px solid var(--gh-ink);
  background:linear-gradient(var(--gh-ink),var(--gh-ink)) center/3px 100% no-repeat, linear-gradient(var(--gh-ink),var(--gh-ink)) center/100% 3px no-repeat, #d8f0ff;}

/* ---- the body of the house ---- */
.gh-body{background:#ffe9f1; border:4px solid var(--gh-ink); border-top:0; margin:0 1.5%; padding:0 1.6%;}
.gh-floor{display:grid; grid-template-columns:16px repeat(var(--gh-per,5),minmax(0,1fr)); gap:1.3%; padding:2.4% 0 1.6%; border-bottom:10px solid #ffd6e4; align-items:stretch;}
.gh-floor:last-child{border-bottom:0;}
.gh-floor-top{border-bottom-color:#ffe08a;}
.gh-floor-no{align-self:center; font-size:11px; font-weight:800; color:#b08ab8; text-align:center;}

/* min-width:0 + border-box: a grid item won't shrink below its content otherwise, and the empty
   rooms' "จอง ฿68" chip pushed every empty cell wider than its column (they overlapped and ran
   past the right-hand wall). */
.gh-cell{position:relative; display:block; box-sizing:border-box; min-width:0; width:100%; padding:0; margin:0; border:0; background:none; border-radius:10px; aspect-ratio:440/240;
  cursor:var(--cursor-pointer-url), pointer; font:inherit; color:var(--gh-ink); transition:transform .15s, opacity .2s, filter .2s;}
.gh-cell:hover{transform:translateY(-2px);}
.gh-cell:focus-visible{outline:3px solid #7a5bd6; outline-offset:3px;}
.gh-cell.gh-big{aspect-ratio:auto;}
.gh-cell canvas{display:block; width:100%; height:100%; object-fit:cover; border-radius:10px;}
.gh-special{aspect-ratio:600/330;}
.gh-free canvas{opacity:.78;}

.gh-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4%; background:#f6f2fb;
  border:3px dashed #b9a8e8; color:#6f6890; font-weight:800;}
.gh-plus{width:26%; aspect-ratio:1; border-radius:50%; background:#fff; border:3px solid var(--gh-ink); color:#7a5bd6;
  display:flex; align-items:center; justify-content:center; font-size:clamp(14px,2.2vw,30px); line-height:1;}
.gh-empty-t{font-size:clamp(9px,1.25vw,17px);}

.gh-tag{position:absolute; left:50%; top:-9%; transform:translateX(-50%); max-width:96%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:#fff; border:2px solid var(--gh-ink); border-radius:10px; padding:1px 8px; font-size:clamp(9px,1.15vw,15px); font-weight:800; line-height:1.35;
  box-shadow:0 2px 0 rgba(59,49,64,.15); z-index:1;}
.gh-tag i{font-style:normal; margin-left:4px; color:#7a5bd6;}
.gh-tag.gh-rank1{background:linear-gradient(180deg,#fff3b0,#ffd45e);}
.gh-tag.gh-rank2{background:linear-gradient(180deg,#ffffff,#dfe6f0);}
.gh-tag.gh-rank3{background:linear-gradient(180deg,#ffe3cc,#f0b98a);}
.gh-special .gh-tag{top:auto; bottom:5%;}
.gh-tag-free{background:#fff8dc;}
.gh-ribbon{position:absolute; left:50%; top:-8%; transform:translateX(-50%); white-space:nowrap; z-index:1;
  background:#ffe08a; color:#6b4a00; border:2px solid var(--gh-ink); border-radius:6px; padding:1px 10px; font-size:clamp(9px,1.1vw,15px); font-weight:800;}
.gh-chip{display:inline-block; background:#ffd45e; color:var(--gh-ink); border:2px solid var(--gh-ink); border-radius:999px; padding:1px 10px;
  font-size:clamp(8px,1.05vw,14px); font-weight:800; white-space:nowrap;}
.gh-chip-free{position:absolute; left:50%; bottom:5%; transform:translateX(-50%);}

/* ---- ground and the aquarium under it ---- */
.gh-ground{position:relative; height:26px; margin:0 -1%; background:
  radial-gradient(circle at 15px 26px, #b8e6a0 14px, transparent 15px) 0 0/30px 26px repeat-x;}
.gh-door{position:absolute; left:50%; top:0; transform:translateX(-50%); width:7%; height:10px; background:#c9a27a; border:2px solid var(--gh-ink); border-top:0; border-radius:0 0 4px 4px;}
.gh-basement{position:relative; background:#c9a27a; margin:0 -1%; padding:3.4% 3% 3%; border-radius:0 0 22px 22px;
  background-image:radial-gradient(ellipse 12px 5px, rgba(120,80,50,.25) 98%, transparent) , none; background-size:60px 34px;}
.gh-tank{position:relative; aspect-ratio:1600/320; border:4px solid var(--gh-ink); border-radius:12px; overflow:hidden; box-shadow:0 0 0 8px #a07c5a;}
.gh-tank-bg{position:absolute; inset:0; width:100%; height:100%;}
.gh-ladder{position:absolute; left:7%; top:-14px; width:28px; height:calc(3.4% + 34px);
  background:linear-gradient(90deg,#7a5a3a 0 5px,transparent 5px 23px,#7a5a3a 23px) , repeating-linear-gradient(180deg,transparent 0 9px,#7a5a3a 9px 13px);}
.gh-ribbon-aqua{top:0; background:#b9e3f7; color:#1c5f85;}
.gh-tank-chip{position:absolute; right:4%; bottom:5%; z-index:1;}
.gh-swimmer{position:absolute; width:8.5%; padding:0; border:0; background:none; cursor:var(--cursor-pointer-url), pointer;
  animation:gh-swim 3.2s ease-in-out infinite alternate; transition:opacity .2s, filter .2s;}
.gh-swimmer canvas{display:block; width:100%; height:auto;}
.gh-swim-name{display:block; margin:-6% auto 0; width:max-content; max-width:150%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:rgba(255,255,255,.88); border-radius:8px; padding:0 6px; font-size:clamp(7px,.85vw,12px); font-weight:800; color:#1c5f85;}
@keyframes gh-swim{from{transform:translate(-8%,0) rotate(-4deg);} to{transform:translate(8%,-12%) rotate(4deg);}}

/* ---- the seals, as pets (2026-10-21) ----
   Each seal is its own element over its room (grape-house.js sealHtml / specialSealHtml), three layers
   deep so the three kinds of movement never fight over one transform:
     .gh-walk  where it is in the room   (translateX, eased by a transition the brain sets per walk)
     .gh-face  which way it looks        (scaleX)
     img       what it's doing           (the .gh-a-* animation the brain picks)
   All transform-only, so nothing is repainted. Animations are paused unless the room is near the
   screen (.gh-live, set by liveWatch()), and the brain only runs for those rooms too. */
.gh-seal{position:absolute; transform:translate(-50%,-50%); pointer-events:none; line-height:0;}
.gh-sp-seal{transform:none;}
.gh-walk, .gh-face{display:block;}
.gh-walk{transition:transform 1s linear;}
.gh-face{transition:transform .25s ease;}
.gh-seal img{display:block; width:100%; height:auto; transform-origin:50% 85%;
  animation:gh-breathe 3.4s ease-in-out infinite;}
.gh-sp-seal img{transform-origin:50% 70%;}
/* frozen while the room is off screen. Written this specific on purpose: the .gh-a-* rules below use the
   animation shorthand, which would otherwise switch play-state back to running. */
.gh-cell:not(.gh-live) .gh-seal img, .gh-cell:not(.gh-live) .gh-zzz, .gh-cell:not(.gh-live) .gh-heart{animation-play-state:paused !important;}
.gh-swimmer{animation-play-state:paused;}
.gh-tank.gh-live .gh-swimmer{animation-play-state:running;}
.gh-free .gh-seal{opacity:.78;}

.gh-a-walk img{animation:gh-step .42s ease-in-out infinite alternate;}
.gh-a-nap img{animation:gh-sleep 3.6s ease-in-out infinite;}
.gh-a-hop img{animation:gh-hop1 1s ease-out 1;}
.gh-a-sway img{animation:gh-sway 3s ease-in-out infinite;}
.gh-a-dance img{animation:gh-dance 1.1s ease-in-out infinite;}
.gh-a-float img{animation:gh-float 3.2s ease-in-out infinite;}
.gh-a-bounce img{animation:gh-bounce .9s ease-in-out infinite;}
.gh-a-twirl img{animation:gh-twirl 2.2s ease-in-out infinite;}
.gh-a-gaze img{animation:gh-gaze 4s ease-in-out infinite;}
.gh-a-swing img{animation:gh-swing 3.4s ease-in-out infinite; transform-origin:50% 0;}
.gh-a-read img{animation:gh-read 4.5s ease-in-out infinite;}
.gh-a-soak img{animation:gh-soak 3.8s ease-in-out infinite;}
.gh-a-royal img{animation:gh-royal 3s ease-in-out infinite;}
.gh-a-love img{animation:gh-hop1 .9s ease-out 2;}
/* playing with furniture (grape-house.js USE) */
.gh-a-eat img{animation:gh-eat .7s ease-in-out infinite;}
.gh-a-hug img{animation:gh-hug 1.4s ease-in-out infinite;}
.gh-a-lookup img{animation:gh-lookup 2.4s ease-in-out infinite;}
.gh-r.gh-a-lookup img{animation-name:gh-lookup-r;}
@keyframes gh-eat{0%,100%{transform:rotate(0) scale(1,1);} 30%{transform:rotate(8deg) scale(1.03,.96);} 60%{transform:rotate(-2deg) scale(1,1);}}
@keyframes gh-hug{0%,100%{transform:scale(1,1);} 50%{transform:scale(1.1,.9);}}
@keyframes gh-lookup{0%,100%{transform:rotate(0);} 35%,70%{transform:rotate(12deg) translateY(-4%);}}
@keyframes gh-lookup-r{0%,100%{transform:rotate(0);} 35%,70%{transform:rotate(-12deg) translateY(-4%);}}
/* what floats up while it plays: a note at the piano, a heart hugging the teddy, a bubble in the tub… */
.gh-fx{position:absolute; left:46%; top:0; opacity:0; pointer-events:none; line-height:1; font-size:clamp(10px,1.4vw,18px);
  text-shadow:0 0 3px #fff,0 0 3px #fff; color:#7a5bd6;}
.gh-fx.f2{left:62%;}
.gh-fxon .gh-fx{animation:gh-fx 2.2s ease-out infinite;}
.gh-fxon .gh-fx.f2{animation-delay:1.1s;}
@keyframes gh-fx{0%{opacity:0; transform:translate(0,30%) scale(.6);} 20%{opacity:1;} 100%{opacity:0; transform:translate(40%,-160%) scale(1.15);}}
.gh-m-pic .gh-fx{font-size:clamp(16px,2.8vw,28px);}
.gh-cell:not(.gh-live) .gh-fx{animation-play-state:paused !important;}

@keyframes gh-breathe{0%,100%{transform:scale(1,1);} 50%{transform:scale(1.02,.98);}}
@keyframes gh-step{from{transform:rotate(-6deg) translateY(0);} to{transform:rotate(6deg) translateY(-4%);}}
@keyframes gh-sleep{0%,100%{transform:scale(1,1) rotate(2deg);} 50%{transform:scale(1.05,.94) rotate(2deg);}}
@keyframes gh-hop1{0%{transform:translateY(0) scale(1,1);} 15%{transform:translateY(0) scale(1.1,.88);}
  40%{transform:translateY(-26%) scale(.94,1.07);} 70%{transform:translateY(0) scale(1.08,.92);} 100%{transform:translateY(0) scale(1,1);}}
@keyframes gh-sway{0%,100%{transform:rotate(-6deg);} 50%{transform:rotate(6deg);}}
@keyframes gh-dance{0%,100%{transform:rotate(-9deg) translateY(0);} 25%{transform:rotate(0) translateY(-10%);}
  50%{transform:rotate(9deg) translateY(0);} 75%{transform:rotate(0) translateY(-10%);}}
@keyframes gh-float{0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-9%) rotate(3deg);}}
@keyframes gh-bounce{0%,100%{transform:translateY(0) scale(1.04,.96);} 50%{transform:translateY(-8%) scale(.98,1.03);}}
@keyframes gh-twirl{0%,100%{transform:scaleX(1) rotate(0);} 25%{transform:scaleX(-1) rotate(-5deg);} 50%{transform:scaleX(1) rotate(5deg);} 75%{transform:scaleX(-1) rotate(0);}}
@keyframes gh-gaze{0%,100%{transform:rotate(0);} 30%{transform:rotate(-4deg) translateY(-2%);} 60%{transform:rotate(2deg);}}
@keyframes gh-swing{0%,100%{transform:rotate(-4deg) translateX(-2%);} 50%{transform:rotate(4deg) translateX(2%);}}
@keyframes gh-read{0%,70%,100%{transform:rotate(0);} 78%{transform:rotate(-3deg) translateY(-2%);} 86%{transform:rotate(1deg);}}
@keyframes gh-soak{0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(3%) rotate(1deg);}}
@keyframes gh-royal{0%,100%{transform:rotate(-3deg) scale(1);} 50%{transform:rotate(3deg) scale(1.03);}}

/* the seal's name tag (its owner's name): out visiting a neighbour, or when petted */
.gh-pname{position:absolute; left:50%; top:-30%; transform:translateX(-50%); opacity:0; pointer-events:none; white-space:nowrap; max-width:12em;
  overflow:hidden; text-overflow:ellipsis; padding:1px 7px; border-radius:99px; background:#fff; color:#7a3f9a; box-shadow:0 1px 3px rgba(0,0,0,.25);
  font:800 clamp(9px,1.1vw,13px)/1.35 sans-serif; transition:opacity .25s;}
.gh-pname:empty{display:none;}
.gh-named .gh-pname, .gh-a-love .gh-pname{opacity:1;}
.gh-m-pic .gh-pname{font-size:clamp(12px,2vw,18px);}

/* a napping seal's "z", and the hearts when you tap it in the room window */
.gh-zzz, .gh-heart{position:absolute; top:0; opacity:0; pointer-events:none; text-shadow:0 0 3px #fff,0 0 3px #fff; line-height:1;}
.gh-zzz{right:12%; font:800 clamp(10px,1.4vw,18px)/1 sans-serif; color:#7a5bd6;}
.gh-a-nap .gh-zzz{animation:gh-zzz 3.6s ease-out infinite;}
@keyframes gh-zzz{0%{opacity:0; transform:translate(0,0) scale(.6);} 25%{opacity:1;} 100%{opacity:0; transform:translate(60%,-120%) scale(1.3);}}
.gh-heart{left:40%; font-size:clamp(12px,1.6vw,22px); color:#ff6f9f;}
.gh-heart.h2{left:58%;}
.gh-a-love .gh-heart{animation:gh-heart 1.6s ease-out 1;}
.gh-a-love .gh-heart.h2{animation-delay:.25s;}
@keyframes gh-heart{0%{opacity:0; transform:translateY(0) scale(.5);} 20%{opacity:1; transform:translateY(-40%) scale(1.1);} 100%{opacity:0; transform:translateY(-200%) scale(.9);}}
.gh-m-pic{position:relative;}
.gh-m-pic .gh-seal{pointer-events:auto; cursor:var(--cursor-pointer-url), pointer;}
.gh-m-pic .gh-zzz{font-size:clamp(14px,2.4vw,24px);}
.gh-m-pic .gh-heart{font-size:clamp(18px,3vw,30px);}
@media (prefers-reduced-motion: reduce){.gh-swimmer, .gh-seal img, .gh-zzz, .gh-heart, .gh-fx{animation:none !important;} .gh-walk, .gh-face{transition:none;}}

/* ---- search marks ---- */
.gh-dim{opacity:.22; filter:grayscale(.7);}
.gh-hit{outline:4px solid #7a5bd6; outline-offset:2px;}
.gh-swimmer.gh-hit{outline-offset:0; border-radius:12px;}

/* ---- side panel ---- */
.gh-side{display:flex; flex-direction:column; gap:14px; position:sticky; top:12px;}
.gh-card{background:#fff; border:3px solid #e4dcf7; border-radius:18px; padding:14px 16px; color:#3b3140;}
.gh-card-title{margin:0 0 8px; font-size:18px; color:#7a5bd6;}
.gh-top{list-style:none; margin:0; padding:0;}
.gh-top-row{display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:8px; padding:6px 4px; border-radius:10px; cursor:var(--cursor-pointer-url), pointer;}
.gh-top-row + .gh-top-row{border-top:1px dashed #e4dcf7;}
.gh-top-row:hover{background:#f6f2fb;}
.gh-top-king{background:linear-gradient(90deg,#fff3c4,transparent);}
.gh-medal{font-size:18px; text-align:center; font-weight:800; color:#8a7fb0;}
.gh-top-name{font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gh-top-name small{display:block; font-size:11px; font-weight:600; color:#8a7fb0;}
.gh-top-amt{font-weight:800; color:#c74b8a;}
.gh-note{font-size:12px; color:#6f6890; margin:8px 0 0;}
.gh-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; text-align:center; font-size:11px; color:#6f6890;}
.gh-stats b{display:block; font-size:18px; color:#7a5bd6;}
.gh-search{margin-top:10px;}
.gh-search input{width:100%; padding:8px 12px; border:2px solid #e4dcf7; border-radius:999px; font:inherit; font-size:14px;}
#ghSearchOut{display:block; font-size:12px; color:#7a5bd6; min-height:16px; margin-top:4px;}
.gh-prices ul{list-style:none; margin:0; padding:0; font-size:13px;}
.gh-prices li{display:flex; justify-content:space-between; gap:10px; padding:4px 0;}
.gh-prices li + li{border-top:1px dashed #e4dcf7;}
.gh-prices b{color:#c74b8a; white-space:nowrap;}

/* ---- the room window ---- */
.gh-modal-backdrop{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:rgba(30,20,50,.55); padding:16px;}
.gh-modal-backdrop.show{display:flex;}
.gh-modal{position:relative; width:min(760px,100%); max-height:92vh; overflow:auto; background:#fffaf0; color:#3b3140; border-radius:22px; padding:20px 22px 22px; box-shadow:0 20px 50px rgba(0,0,0,.35);}
/* room windows open wide; "ขยายใหญ่" hides everything but the title and the picture and sizes the window to the
   picture's own shape (--ar, set from the painted canvas) so it fills as much of the screen as it can */
.gh-modal.gh-wide{width:min(700px,100%);}
.gh-modal.gh-zoomed{width:min(98vw, calc(78vh * var(--ar, 1.83) + 44px));}
.gh-modal.gh-zoomed .gh-modal-body > :not(.gh-m-title):not(.gh-m-pic){display:none;}
.gh-m-zoom{position:absolute; right:8px; top:8px; z-index:3; border:2px solid #3b3140; background:rgba(255,255,255,.93); color:#3b3140; border-radius:99px;
  padding:3px 11px; font:800 13px/1.35 inherit; cursor:var(--cursor-pointer-url), pointer; box-shadow:0 2px 0 rgba(59,49,64,.25);}
.gh-modal-close{position:absolute; right:12px; top:10px; width:34px; height:34px; border-radius:50%; border:2px solid #3b3140; background:#fff; font-size:16px; cursor:var(--cursor-pointer-url), pointer;}
.gh-m-title{margin:0 40px 12px 0; font-size:22px; color:#3b2a7a;}
.gh-m-title small{font-size:13px; color:#8a7fb0; font-weight:600;}
.gh-m-prem{display:inline-block; font-size:12px; background:#ffd45e; color:#6b4a00; border-radius:999px; padding:1px 8px; vertical-align:middle;}
.gh-m-canvas{display:block; width:100%; height:auto; border-radius:14px;}
/* the aquarium seal's window (2026-10-21 redesign): its own little tank in a wooden frame, the seal
   swimming in the middle with bubbles going up, and a card per thing it can wear */
.gh-m-aqua{position:relative; aspect-ratio:2/1; margin:10px 8px 16px; border:4px solid #3b3140; border-radius:24px; overflow:hidden;
  box-shadow:0 0 0 7px #c9a27a, 0 0 0 10px #3b3140, 0 12px 0 10px rgba(59,49,64,.12);}
.gh-m-aqua-bg{position:absolute; inset:0; width:100%; height:100%; display:block;}
.gh-m-swim{position:absolute; left:50%; top:48%; width:42%; transform:translate(-50%,-50%);}
.gh-m-swim canvas{display:block; width:100%; height:auto; animation:gh-mswim 4.2s ease-in-out infinite;
  filter:drop-shadow(0 10px 8px rgba(20,60,100,.25));}
@keyframes gh-mswim{0%,100%{transform:translate(-4%,0) rotate(-4deg);} 50%{transform:translate(4%,-7%) rotate(3deg);}}
.gh-bub{position:absolute; bottom:-6%; width:2.2%; aspect-ratio:1; border-radius:50%; border:2px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.25); animation:gh-bub 6.5s linear infinite;}
.gh-bub:nth-child(odd){width:1.5%;}
@keyframes gh-bub{0%{transform:translate(0,0); opacity:0;} 10%{opacity:1;} 50%{transform:translate(12px,-260%);} 100%{transform:translate(-6px,-560%); opacity:0;}}
.gh-m-plate{position:absolute; left:50%; bottom:5%; transform:translateX(-50%); white-space:nowrap; max-width:80%; overflow:hidden; text-overflow:ellipsis;
  background:#fff8e6; border:2.5px solid #3b3140; border-radius:999px; padding:2px 14px; font-size:clamp(12px,1.8vw,16px); font-weight:800; color:#1c5f85;}
.gh-m-aitems{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px;}
.gh-m-ai{position:relative; border:2.5px solid #d6e9f3; border-radius:16px; background:linear-gradient(#f2fbff,#dff2fb); text-align:center; padding:6px 4px 8px;
  font-size:12.5px; line-height:1.25; opacity:.62; filter:saturate(.55);}
.gh-m-ai canvas{display:block; width:100%; height:auto;}
.gh-m-ai b{display:block; color:#3b3140; margin-top:2px;}
.gh-m-ai-price{display:inline-block; margin-top:3px; font-weight:800; color:#c74b8a;}
.gh-m-ai.on{opacity:1; filter:none; border-color:#7a5bd6; background:linear-gradient(#fbf8ff,#ece4ff); box-shadow:0 3px 0 #c9b6ff;}
.gh-m-ai-on{display:inline-block; margin-top:3px; font-size:11.5px; font-weight:800; color:#fff; background:#7a5bd6; border-radius:999px; padding:1px 9px;}
@media (max-width:560px){.gh-m-aitems{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (prefers-reduced-motion: reduce){.gh-m-swim canvas, .gh-bub{animation:none;}}
:root[data-theme="dark"] .gh-m-ai b{color:#efeaff;}
.gh-m-owner{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0 6px;}
.gh-m-owner .gh-tag{position:static; transform:none; font-size:18px; max-width:100%;}
.gh-m-rank{font-size:13px; font-weight:700; color:#c74b8a;}
.gh-m-letter{background:#fff1a8; border-radius:10px; padding:8px 12px; margin:8px 0;}
/* the seal's mailbox (2026-10-24): a flag on the room in the house, folded letters in the room window */
/* the room's mailbox (2026-10-25) — stands at the front left corner; in the room window it's a button with the count */
.gh-mailbox{position:absolute; left:1.5%; bottom:2%; width:8.5%; min-width:12px; line-height:0; pointer-events:none; z-index:2; filter:drop-shadow(0 2px 1px rgba(59,49,64,.25));}
.gh-big .gh-mailbox{width:4.3%; left:.8%;}
.gh-mailbox svg{width:100%; height:auto; display:block; overflow:visible;}
.gh-mailbox svg path:nth-of-type(4){transform-origin:42px 28px; animation:gh-flag 2.6s ease-in-out infinite;}
@keyframes gh-flag{0%,70%,100%{transform:rotate(0);} 80%{transform:rotate(-14deg);} 90%{transform:rotate(6deg);}}
.gh-cell:not(.gh-live) .gh-mailbox svg path{animation-play-state:paused !important;}
button.gh-mailbox{pointer-events:auto; cursor:pointer; border:0; background:none; padding:0; width:9.5%; min-width:40px; font:inherit; transition:transform .15s;}
button.gh-mailbox:hover{transform:translateY(-3px) rotate(-4deg);}
button.gh-mailbox b{position:absolute; right:-14%; top:-10%; min-width:20px; height:20px; padding:0 5px; box-sizing:border-box; border-radius:99px; background:#ff6b8b; color:#fff; font-size:12px; line-height:20px; text-align:center; border:2px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.25);}
@media (prefers-reduced-motion: reduce){.gh-mailbox svg path{animation:none !important;}}
.gh-mail{background:#fff6dc; border:3px solid #3b3140; border-radius:16px; padding:10px 12px 12px; margin:12px 0; box-shadow:0 3px 0 rgba(59,49,64,.2);}
.gh-mail-head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.gh-mail-head b{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gh-mail-ico{font-size:24px; line-height:1;}
.gh-mail-head i{font-style:normal; font-weight:800; font-size:13px; background:#ff6f9f; color:#fff; border-radius:99px; min-width:22px; padding:1px 7px; text-align:center;}
.gh-letter{background:#fff; border:2px solid #3b3140; border-radius:12px; margin:6px 0; overflow:hidden;}
.gh-letter summary{cursor:pointer; padding:7px 12px; font-weight:800; font-size:14px; background:linear-gradient(90deg,#ffd6e4,#fff 70%); list-style:none;}
.gh-letter summary::-webkit-details-marker{display:none;}
.gh-letter[open] summary{border-bottom:2px dashed #ffb3cc;}
.gh-letter p{margin:0; padding:9px 12px 11px; line-height:1.55; word-break:break-word;}
.gh-m-sub{font-size:13px; font-weight:700; color:#6f6890; margin:10px 0 6px;}
.gh-m-pieces{display:flex; flex-wrap:wrap; gap:6px;}
.gh-m-piece{font-size:13px; padding:3px 10px; border-radius:999px; border:1.5px dashed #c9bde8; color:#a59cc0;}
.gh-m-piece.on{border-style:solid; border-color:#7a5bd6; background:#f0eaff; color:#3b2a7a; font-weight:700;}
.gh-m-also{font-size:13px; color:#6f6890; margin:12px 0 0;}
.gh-m-empty{margin:4px auto 12px; width:90px; height:90px; border-radius:50%; border:3px dashed #b9a8e8; display:flex; align-items:center; justify-content:center; font-size:46px; color:#7a5bd6;}
.gh-m-prices{list-style:none; padding:0; margin:0; font-size:14px;}
.gh-m-prices li{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed #e4dcf7;}
.gh-m-prices b{color:#c74b8a; white-space:nowrap;}
.gh-m-free{font-size:18px; font-weight:800; color:#c74b8a; margin:14px 0 4px;}

.gh-share-btn{display:block; width:100%; margin:14px 0 0; padding:10px 16px; border:2px solid #3b3140; border-radius:999px; font:inherit; font-weight:800; font-size:15px;
  color:#fff; background:linear-gradient(90deg,#c9a7ff,#7a5bd6); box-shadow:0 3px 0 #3b3140; cursor:var(--cursor-pointer-url), pointer;}
.gh-share-btn:active{transform:translateY(2px); box-shadow:0 1px 0 #3b3140;}
.gh-card .gh-share-btn{font-size:13px; padding:7px 12px;}

:root[data-theme="dark"] .gh-card, :root[data-theme="dark"] .gh-modal{background:#2a2440; color:#efeaff; border-color:#4a3f6e;}
:root[data-theme="dark"] .gh-top-name small, :root[data-theme="dark"] .gh-note, :root[data-theme="dark"] .gh-stats{color:#c9bde8;}
:root[data-theme="dark"] .gh-search input{background:#1f1a33; color:#efeaff; border-color:#4a3f6e;}
:root[data-theme="dark"] .gh-m-title{color:#e9dcff;}
:root[data-theme="dark"] .gh-top-row:hover{background:#3a3158;}

@media (max-width: 860px){
  .gh-shell{grid-template-columns:minmax(0,1fr);}
  .gh-side{position:static;}
  .gh-floor{grid-template-columns:10px repeat(var(--gh-per,5),minmax(0,1fr)); gap:1.6%; border-bottom-width:6px;}
  .gh-floor-no{font-size:8px;}
  .gh-tag{border-width:1.5px; padding:0 4px; border-radius:6px;}
  .gh-ribbon{border-width:1.5px; padding:0 5px;}
  .gh-sign{padding:3px 10px; border-width:2px;}
  .gh-chimney, .gh-roundwin{border-width:2px;}
}

/* ---- 2026-10-24: the special touches ---- */
/* first resident of a house */
.gh-first{position:absolute; left:3%; bottom:4%; z-index:2; background:#fff6dc; border:2px solid #3b3140; border-radius:99px; padding:0 7px; white-space:nowrap; pointer-events:none;
  font:800 clamp(8px,.95vw,12px)/1.5 sans-serif; color:#a8366b;}
/* "just opened" ribbon on a new house's sign */
.gh-new{display:block; margin-top:2px; font-weight:800; font-size:clamp(9px,1.1vw,14px); color:#e0609a; animation:gh-pulse 1.8s ease-in-out infinite;}
@keyframes gh-pulse{0%,100%{opacity:.55; transform:scale(1);} 50%{opacity:1; transform:scale(1.08);}}
@keyframes gh-bob{0%,100%{transform:translateY(0) rotate(-6deg);} 50%{transform:translateY(-12%) rotate(6deg);}}
/* a seal with all three aquarium items has a little fish swimming circles around it */
.gh-orbit{position:absolute; left:50%; top:40%; width:0; height:0; pointer-events:none; animation:gh-orbit 6s linear infinite;}
.gh-orbit i{position:absolute; left:34px; top:0; display:block; font-style:normal; font-size:13px; line-height:1; animation:gh-orbit-r 6s linear infinite;}
@keyframes gh-orbit{to{transform:rotate(360deg);}}
@keyframes gh-orbit-r{from{transform:translate(-50%,-50%) rotate(0);} to{transform:translate(-50%,-50%) rotate(-360deg);}}
.gh-tank:not(.gh-live) .gh-orbit, .gh-tank:not(.gh-live) .gh-orbit i{animation-play-state:paused;}
/* fancy envelopes */
.gh-letter.st-heart{border-color:#ff6f9f;}
.gh-letter.st-heart summary{background:linear-gradient(90deg,#ffb3cc,#fff0f5 75%);}
.gh-letter.st-star{border-color:#d9a400;}
.gh-letter.st-star summary{background:linear-gradient(90deg,#ffe58a,#fffbe6 75%);}
.gh-letter.st-gold{border-color:#b9831d; box-shadow:0 0 0 2px #ffd45e inset, 0 2px 0 rgba(59,49,64,.2);}
.gh-letter.st-gold summary{background:linear-gradient(90deg,#ffd45e,#fff3b8 45%,#ffd45e); color:#6a4300;}
@media (prefers-reduced-motion: reduce){.gh-orbit, .gh-orbit i, .gh-new{animation:none !important;}}

/* link to the catalogue book (2026-10-24) */
.village-cat{display:inline-block; margin:2px 0 12px; background:#7a5bd6; color:#fff; border:3px solid #3b3140; border-radius:999px; padding:3px 18px; font-weight:800; font-size:18px; text-decoration:none; box-shadow:0 4px 0 #5a3fb0;}
.village-cat:hover{background:#6a4bc6;}

/* ---- house page in the same look as pet.html (2026-10-24) ---- */
.gh-hero{padding-top:10px;}
.gh-hero .village-title{margin:0; font-size:var(--fs-villageTitle, 2.3rem); line-height:1.25;}
.gh-hero .village-intro{margin:2px 0 0; color:var(--pink, #ff8fb1); font-weight:700; font-size:var(--fs-villageIntro, 1.35rem);}
.gh-hero-btns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:14px 0 6px;}
.gh-hbtn{display:inline-flex; align-items:center; gap:8px; padding:10px 26px; font-weight:800; font-size:1.1rem; text-decoration:none;
  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 ease, box-shadow .12s ease;}
.gh-hbtn:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--line, #141414);}
.gh-hbtn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--line, #141414);}
.gh-hbtn.cart{background:var(--mint, #a8e6cf);}
.gh-hbtn i{font-style:normal; background:#ff6f9f; color:#fff; border:2px solid var(--line, #141414); border-radius:99px; font-size:.85rem; padding:0 8px; line-height:1.4;}
.gh-hbtn i:empty{display:none;}
.village-cat{display:none;}
/* the side cards: white, black outline, hard shadow — like the pet page's cards */
.gh-card{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:16px 18px;}
.gh-card-title{color:var(--ink, #141414); font-size:1.15rem;}

/* thank-you note on the house after a slip is sent (2026-10-25) */
.gh-thanks{display:flex; align-items:center; gap:12px; max-width:560px; margin:10px auto 0; text-align:left; background:#fff; border:var(--bw,3px) solid var(--line,#141414); border-radius:22px; box-shadow:var(--shadow-hard,5px 5px 0 #141414); padding:10px 16px;}
.gh-thanks img{width:72px; flex:none; animation:gh-thx 2.4s ease-in-out infinite;}
.gh-thanks b{display:block; font-size:1.15rem;}
.gh-thanks span{display:block; color:var(--ink-soft,#6f6178); font-size:.92rem; line-height:1.35;}
@keyframes gh-thx{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-6px) rotate(4deg);}}
@media (prefers-reduced-motion: reduce){.gh-thanks img{animation:none;}}

/* ==== house looks (2026-10-25) — preview: village.html?house=cake|night|cottage|candy|sky (skinClass() in grape-house.js).
   Only the house shell changes (roof, walls, floor bands, ground, sign); rooms are the same pictures. ==== */
.gh-house[class*="gh-skin-"] .gh-body{position:relative;}
.gh-house[class*="gh-skin-"] .gh-body::before, .gh-house[class*="gh-skin-"] .gh-body::after{content:""; position:absolute; pointer-events:none;}

/* 🍰 strawberry cake: sprinkle-cream roof, chocolate drips, sponge walls, cream filling between floors, a candle chimney */
.gh-skin-cake .gh-roof::after{background:radial-gradient(#ff8fb1 2.5px, transparent 3px) 0 0/26px 26px, radial-gradient(#8fd0ff 2.5px, transparent 3px) 13px 13px/26px 26px,
  radial-gradient(#ffd45e 2px, transparent 2.6px) 6px 19px/26px 26px, #fffaf0;}
.gh-skin-cake .gh-body{background:radial-gradient(rgba(255,255,255,.55) 1.5px, transparent 2px) 0 0/14px 14px, #ffc9d6;}
.gh-skin-cake .gh-body::before{left:0; right:0; top:0; height:24px; background:linear-gradient(#7a4030,#7a4030) top/100% 7px no-repeat,
  radial-gradient(circle at 50% 8px, #7a4030 7px, transparent 7.5px) 0 0/34px 24px repeat-x, radial-gradient(ellipse 5px 9px at 50% 9px, #7a4030 98%, transparent) 17px 0/51px 24px repeat-x;}
.gh-skin-cake .gh-floor{border-bottom:12px solid #fffaf0; box-shadow:0 2px 0 #f0a8bd;}
.gh-skin-cake .gh-floor-top{border-bottom-color:#fffaf0;}
.gh-skin-cake .gh-floor-no{color:#c45c80;}
.gh-skin-cake .gh-chimney{background:repeating-linear-gradient(135deg,#fff 0 6px,#ff9fc0 6px 12px);}
.gh-skin-cake .gh-chimney::before{left:22%; right:22%; top:-20px; height:17px; background:#ffd45e; border-radius:50% 50% 50% 50%/62% 62% 38% 38%; box-shadow:0 0 12px 4px rgba(255,212,94,.55);}
.gh-skin-cake .gh-sign{background:#fff0f5;} .gh-skin-cake .gh-sign b{color:#d94f7d;} .gh-skin-cake .gh-sign small{color:#a0603e;}
.gh-skin-cake .gh-roundwin{background:radial-gradient(circle at 50% 60%, #ff5a7a 38%, transparent 40%), radial-gradient(ellipse 30% 22% at 50% 22%, #6fb35e 95%, transparent), #fff6f0;}
.gh-skin-cake .gh-empty{background:#fff6f8; border-color:#f0a8bd;}
.gh-skin-cake .gh-ground{background:radial-gradient(circle at 15px 0, #fff 14px, #e7d6dd 14.5px 15.5px, transparent 16px) 0 0/30px 26px repeat-x;}

/* 🌙 starry night: navy roof full of stars, a moon window, plum walls, fairy lights between floors */
.gh-skin-night .gh-roof::after{background:radial-gradient(#fff 1.2px, transparent 2px) 0 0/40px 34px, radial-gradient(#ffe9a0 1.6px, transparent 2.4px) 20px 17px/56px 40px,
  radial-gradient(#cfc6ff 1px, transparent 1.8px) 9px 26px/30px 30px, linear-gradient(#232055,#4a3f8c);}
.gh-skin-night .gh-body{background:radial-gradient(rgba(255,255,255,.07) 2px, transparent 3px) 0 0/28px 28px, #3d3470;}
.gh-skin-night .gh-floor{position:relative; border-bottom:12px solid #2a2450;}
.gh-skin-night .gh-floor:not(:last-child)::after{content:""; position:absolute; left:0; right:0; bottom:-12px; height:12px; pointer-events:none;
  background:radial-gradient(circle at 12px 7px, #ffe27a 3.2px, transparent 4px) 0 0/48px 12px repeat-x, radial-gradient(circle at 36px 7px, #ff9fc0 3.2px, transparent 4px) 0 0/48px 12px repeat-x,
  linear-gradient(#1a1636,#1a1636) 0 3px/100% 1.5px no-repeat; filter:drop-shadow(0 0 3px rgba(255,226,122,.8));}
.gh-skin-night .gh-floor-top{border-bottom-color:#2a2450;}
.gh-skin-night .gh-floor-no{color:#b9aef0;}
.gh-skin-night .gh-chimney{background:#5a4fa0;} .gh-skin-night .gh-chimney::before{background:#7a6fc8;}
.gh-skin-night .gh-roundwin{background:radial-gradient(circle at 66% 36%, #2c2a6a 40%, transparent 42%), #ffe9a0;}
.gh-skin-night .gh-sign{background:#2a2450;} .gh-skin-night .gh-sign b{color:#ffe27a;} .gh-skin-night .gh-sign small{color:#ff9fc0;}
.gh-skin-night .gh-empty{background:#4a4180; border-color:#8a7fd0; color:#ddd6ff;}
.gh-skin-night .gh-ground{background:radial-gradient(circle at 15px 26px, #4f7a5a 14px, transparent 15px) 0 0/30px 26px repeat-x;}

/* 🌿 garden cottage: leafy shingle roof, wooden plank walls, beams, ivy down both sides, flowers on the lawn */
.gh-skin-cottage .gh-roof::after{background:radial-gradient(circle at 18px 0, #a6db8f 16px, #5f9e4f 17px 18.5px, transparent 19px) 0 0/36px 24px,
  radial-gradient(circle at 18px 0, #a6db8f 16px, #5f9e4f 17px 18.5px, transparent 19px) 18px 12px/36px 24px, #a6db8f;}
.gh-skin-cottage .gh-body{background:repeating-linear-gradient(90deg, #f6e2c2 0 46px, #e2c497 46px 48px);}
.gh-skin-cottage .gh-body::before, .gh-skin-cottage .gh-body::after{top:0; bottom:0; width:22px; z-index:2;
  background:radial-gradient(ellipse 7px 5px at 30% 30%, #6fb35e 95%, transparent) 0 0/22px 34px repeat-y, radial-gradient(ellipse 6px 4px at 70% 75%, #8fcf7a 95%, transparent) 0 0/22px 34px repeat-y,
  radial-gradient(circle at 50% 55%, #ff9fc0 2.5px, transparent 3px) 0 0/22px 102px repeat-y;}
.gh-skin-cottage .gh-body::before{left:-13px;} .gh-skin-cottage .gh-body::after{right:-13px;}
.gh-skin-cottage .gh-floor{border-bottom:10px solid #b98a5a;}
.gh-skin-cottage .gh-floor-top{border-bottom-color:#b98a5a;}
.gh-skin-cottage .gh-floor-no{color:#8a6a4a;}
.gh-skin-cottage .gh-chimney{background:radial-gradient(ellipse 6px 4px, #a9a196 95%, transparent) 0 0/14px 10px, #cfc8bd;} .gh-skin-cottage .gh-chimney::before{background:#a9a196;}
.gh-skin-cottage .gh-sign{background:#fff7e6;} .gh-skin-cottage .gh-sign b{color:#5f8f3a;} .gh-skin-cottage .gh-sign small{color:#b0703a;}
.gh-skin-cottage .gh-empty{background:#fbf3e4; border-color:#d4b48a;}
.gh-skin-cottage .gh-ground{background:radial-gradient(circle at 15px 9px, #ff9fc0 3px, transparent 3.6px) 0 0/60px 26px repeat-x, radial-gradient(circle at 45px 12px, #fff27a 3px, transparent 3.6px) 0 0/60px 26px repeat-x,
  radial-gradient(circle at 15px 26px, #9fd88a 14px, transparent 15px) 0 0/30px 26px repeat-x;}

/* 🍬 gingerbread: candy-stripe roof, icing drips, gingerbread walls, white icing between floors, peppermint window */
.gh-skin-candy .gh-roof::after{background:repeating-linear-gradient(115deg, #ff8fb1 0 18px, #fff 18px 30px);}
.gh-skin-candy .gh-body{background:radial-gradient(#f2b987 2px, transparent 3px) 0 0/24px 24px, #c97f48;}
.gh-skin-candy .gh-body::before{left:0; right:0; top:0; height:22px; background:linear-gradient(#fff,#fff) top/100% 6px no-repeat,
  radial-gradient(circle at 50% 7px, #fff 6px, transparent 6.5px) 0 0/28px 22px repeat-x, radial-gradient(ellipse 5px 8px at 50% 8px, #fff 98%, transparent) 14px 0/42px 22px repeat-x;}
.gh-skin-candy .gh-floor{border-bottom:10px solid #fff; box-shadow:0 2px 0 #a8643a;}
.gh-skin-candy .gh-floor-top{border-bottom-color:#fff;}
.gh-skin-candy .gh-floor-no{color:#fff;}
.gh-skin-candy .gh-chimney{background:repeating-linear-gradient(135deg,#ff5a7a 0 6px,#fff 6px 12px);} .gh-skin-candy .gh-chimney::before{background:#fff;}
.gh-skin-candy .gh-roundwin{background:conic-gradient(#ff5a7a 0 12.5%, #fff 0 25%, #ff5a7a 0 37.5%, #fff 0 50%, #ff5a7a 0 62.5%, #fff 0 75%, #ff5a7a 0 87.5%, #fff 0);}
.gh-skin-candy .gh-sign b{color:#c9573c;} .gh-skin-candy .gh-sign small{color:#e0609a;}
.gh-skin-candy .gh-empty{background:#f6d2b0; border-color:#fff; color:#7a4a2a;}
.gh-skin-candy .gh-ground{background:radial-gradient(circle at 10px 15px, #ff8fb1 6px, transparent 7px) 0 0/72px 26px repeat-x, radial-gradient(circle at 34px 15px, #8fd0ff 6px, transparent 7px) 0 0/72px 26px repeat-x,
  radial-gradient(circle at 58px 15px, #b6e88f 6px, transparent 7px) 0 0/72px 26px repeat-x;}

/* ☁️ sky: matches the catalogue — baby-blue roof with a white scallop trim, blue gingham walls */
.gh-skin-sky .gh-roof::after{background:radial-gradient(circle at 20px 100%, #fff 13px, transparent 14px) 0 100%/40px 18px repeat-x,
  repeating-linear-gradient(180deg, transparent 0 22px, rgba(255,255,255,.55) 22px 24px), #a9d8f5;}
.gh-skin-sky .gh-body{background:repeating-linear-gradient(0deg, rgba(120,180,230,.16) 0 14px, transparent 14px 28px), repeating-linear-gradient(90deg, rgba(120,180,230,.16) 0 14px, transparent 14px 28px), #f6fbff;}
.gh-skin-sky .gh-floor{border-bottom:10px solid #bfe0f7;}
.gh-skin-sky .gh-floor-top{border-bottom-color:#ffd6e4;}
.gh-skin-sky .gh-floor-no{color:#6aa4d4;}
.gh-skin-sky .gh-chimney{background:#fff;} .gh-skin-sky .gh-chimney::before{background:#ffb3cc;}
.gh-skin-sky .gh-sign b{color:#4a8fd0;} .gh-skin-sky .gh-sign small{color:#ff8fb1;}
.gh-skin-sky .gh-empty{background:#eef7ff; border-color:#9cc9ec;}
.gh-skin-sky .gh-ground{background:radial-gradient(circle at 15px 26px, #fff 14px, transparent 15px) 0 0/30px 26px repeat-x;}

/* ==== Grape Village (2026-10-25) — the map of houses, grape-village.js. The canvas is the picture; every place you
   can tap is a transparent button over it, in percent, so it scales with the map. ==== */
.gv-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:26px; isolation:isolate;}
.gv-map{position:relative; min-width:720px; border:4px solid #3b3140; border-radius:26px; overflow:hidden; background:#b9e3a0; box-sizing:border-box;}
.gv-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.gv-spot{position:absolute; padding:0; margin:0; border:0; background:none; border-radius:16px; font:inherit; color:#3b3140; cursor:var(--cursor-pointer-url), pointer; transition:background .15s;}
.gv-spot:hover{background:rgba(255,255,255,.18);}
.gv-spot:focus-visible{outline:3px solid #7a5bd6; outline-offset:2px;}
.gv-tag{position:absolute; left:50%; top:0; transform:translate(-50%,-55%); line-height:1.25; white-space:nowrap; background:#fff; border:2.5px solid #3b3140; border-radius:10px;
  padding:1px 9px; font-weight:800; font-size:clamp(10px,1.15vw,14px); color:#3b3140; box-shadow:0 2px 0 rgba(59,49,64,.25); pointer-events:none; transition:transform .15s;}
.gv-tag small{color:#7a5bd6; margin-left:4px; font-size:.85em;}
.gv-tag-k{background:linear-gradient(#fff3b0,#ffd45e);}
.gv-tag-sp{font-size:clamp(9px,1vw,12px); background:#fff8dc;}
.gv-tag-free{background:#f3fff0; color:#5f7a55; border-style:dashed;}
.gv-spot:hover .gv-tag{transform:translate(-50%,-70%);}
.gv-pondtag{position:absolute; transform:translate(-50%,0);}
.gv-free .gv-tag{top:auto; bottom:100%; transform:translate(-50%,10%);}
.gv-free:hover .gv-tag{transform:translate(-50%,-5%);}
/* search / Top Spender tap: the matching places light up, the rest fade */
.gv-spot.gh-dim .gv-tag{opacity:.35;}
.gv-spot.gh-hit{background:rgba(255,224,138,.35); box-shadow:0 0 0 4px #ff6b8b;}
.gv-spot.gh-hit .gv-tag{background:#ffe08a; animation:gv-bounce 1s ease-in-out infinite;}
@keyframes gv-bounce{0%,100%{transform:translate(-50%,-55%);}50%{transform:translate(-50%,-80%);}}
@media (prefers-reduced-motion: reduce){.gv-spot.gh-hit .gv-tag{animation:none;}}
/* the house window: every room the person owns, tap one to go in */
.gh-home-rooms{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:8px 0 12px;}
.gh-home-room{position:relative; display:block; padding:0 0 6px; border:3px solid #3b3140; border-radius:14px; background:#fff; overflow:hidden; font:inherit; color:#3b3140; cursor:pointer; text-align:center; transition:transform .15s;}
.gh-home-room:hover{transform:translateY(-3px);}
.gh-home-room.big{grid-column:span 2;}
.gh-home-room canvas{display:block; width:100%; height:auto; border-bottom:3px solid #3b3140;}
.gh-home-room b{display:block; margin-top:5px; font-size:.92rem;}
.gh-home-room i{position:absolute; right:6px; top:6px; font-style:normal; font-weight:800; font-size:.8rem; background:#fff; border:2px solid #3b3140; border-radius:99px; padding:0 7px;}
.gh-lot-go{display:block; text-align:center; text-decoration:none; margin-top:12px;}
.gh-home-back{margin-top:10px;}
@media (max-width:520px){.gh-home-rooms{grid-template-columns:1fr;} .gh-home-room.big{grid-column:auto;}}
:root[data-theme="dark"] .gh-home-room{background:#1f1a33; color:#efeaff;}

/* full screen map (2026-10-25): a fixed layer under the room window (that one is z-index 200) */
.gv-wrap{position:relative;}
.gv-fs{position:absolute; right:12px; top:12px; z-index:3; font:inherit; font-weight:800; font-size:14px; color:#3b3140; background:#fff; border:3px solid #3b3140; border-radius:99px;
  padding:4px 14px; box-shadow:0 3px 0 rgba(59,49,64,.3); cursor:pointer;}
.gv-fs:hover{background:#ffe3ec;}
.gv-wrap.gv-full{position:fixed; inset:0; z-index:150; background:#b9e3a0;}
.gv-full .gv-fs{position:fixed; right:16px; top:16px; z-index:151;}
.gv-full .gv-scroll{position:absolute; inset:0; overflow:auto; border-radius:0;}
.gv-full .gv-map{width:min(100%,1500px); margin:0 auto; border-width:0 4px; border-radius:0;}
html.gv-noscroll, html.gv-noscroll body{overflow:hidden;}

/* the five special buildings' name plates: gold, a little bigger */
.gv-tag-lux{background:linear-gradient(#fff8d6,#ffd45e); border-color:#3b3140; font-size:clamp(10px,1.1vw,13px); box-shadow:0 2px 0 rgba(59,49,64,.3), 0 0 0 2px #fff inset;}
.gv-tag-lux b{color:#7a3fb0;}
.gv-lux .gv-tag{top:auto; bottom:0; transform:translate(-50%,55%); text-align:center; line-height:1.2; padding:2px 10px;}
.gv-lux:hover .gv-tag{transform:translate(-50%,40%);}
.gv-lux .gv-tag small{margin:0; color:#7a5bd6;}
.gv-spot.gv-lux.gh-hit .gv-tag{animation:none;}

/* the village takes the whole width; the side panel is tabs inside the map (2026-10-25). Wider than the page column
   by a negative margin rather than a transform — a transform would break the full-screen layer (position:fixed). */
.gh-shell.gv-mode{grid-template-columns:minmax(0,1fr); width:min(1400px, calc(100vw - 32px)); margin-left:calc(50% - min(700px, 50vw - 16px));}
.gv-dock{position:sticky; top:10px; z-index:5; height:0;}
.gv-tabs{position:absolute; left:12px; top:12px; display:flex; gap:6px; flex-wrap:wrap; max-width:calc(100% - 150px);}
.gv-tab{font:inherit; font-weight:800; font-size:14px; color:#3b3140; background:#fff; border:3px solid #3b3140; border-radius:99px; padding:4px 13px; box-shadow:0 3px 0 rgba(59,49,64,.3); cursor:pointer;}
.gv-tab:hover{background:#ffe3ec;}
.gv-tab.on{background:#ffd45e;}
.gh-side.gv-panel{position:absolute; left:12px; top:58px; width:min(330px, calc(100vw - 56px)); max-height:min(72vh, 620px); overflow:auto; display:none; gap:0;}
.gv-dock.open .gh-side.gv-panel{display:block;}
.gv-panel .gh-card{margin:0; box-shadow:0 10px 30px rgba(59,49,64,.25), 5px 5px 0 #3b3140;}
@media (max-width:520px){.gv-tab{font-size:12px; padding:3px 9px;} .gv-tabs{max-width:calc(100% - 110px);} .gv-fs{font-size:12px; padding:3px 10px;}}

/* life on the map (2026-10-25): walking seals, bobbing pond seals, fireflies at night, the festival sign */
.gv-life{position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden;}
.gv-spot{z-index:2;}
.gv-walker{position:absolute; width:3.4%; transform:translate(-50%,-100%); transition-property:left, top; transition-timing-function:linear;}
.gv-walker img{display:block; width:100%; height:auto; filter:drop-shadow(0 2px 0 rgba(59,49,64,.25));}
.gv-walker.gv-right img{transform:scaleX(-1);}
.gv-walker.gv-going img{animation:gv-hop .45s ease-in-out infinite alternate;}
@keyframes gv-hop{from{translate:0 0;} to{translate:0 -14%;}}
.gv-walker b{position:absolute; left:50%; bottom:100%; transform:translateX(-50%); white-space:nowrap; font-size:clamp(8px,.8vw,11px); font-weight:800; background:rgba(255,255,255,.9);
  border:1.5px solid #3b3140; border-radius:8px; padding:0 5px; opacity:0; transition:opacity .3s;}
.gv-walker.gv-going b{opacity:1;}
.gv-swim img{display:block; width:100%; height:auto; pointer-events:none;}
.gv-swim{animation:gv-float 3.2s ease-in-out infinite;}
@keyframes gv-float{0%,100%{translate:0 0; rotate:-3deg;} 50%{translate:0 -10%; rotate:3deg;}}
.gv-fly{position:absolute; width:.5%; aspect-ratio:1; border-radius:50%; background:#fff6a8; box-shadow:0 0 8px 3px rgba(255,240,140,.85); animation:gv-fly 6s ease-in-out infinite;}
@keyframes gv-fly{0%,100%{translate:0 0; opacity:.2;} 30%{opacity:1;} 50%{translate:18px -14px; opacity:.9;} 80%{translate:-10px 6px; opacity:.3;}}
.gv-tag-fest{position:absolute; transform:translate(-50%,0); background:linear-gradient(#ffd8a8,#ff9a3c); font-size:clamp(10px,1.1vw,14px);}
.gv-night .gv-tag, .gv-night .gv-fs, .gv-night .gv-tab{box-shadow:0 0 0 2px rgba(255,240,180,.35), 0 3px 0 rgba(0,0,0,.4);}
@media (prefers-reduced-motion: reduce){.gv-swim, .gv-fly, .gv-walker.gv-going img{animation:none;}}

/* "our house" previewed on a plot in the cart */
.gv-tag-mine{background:linear-gradient(#ffd0e1,#ff8fb1); font-size:clamp(11px,1.2vw,15px); animation:gv-bounce 1.2s ease-in-out infinite;}
.gv-mine{box-shadow:0 0 0 4px #ff6b8b; background:rgba(255,143,177,.15);}
.gv-free .gv-tag{cursor:pointer;}
@media (prefers-reduced-motion: reduce){.gv-tag-mine{animation:none;}}

/* the village's progress signboard (2026-10-25): a wooden board on two posts */
.gv-goal{position:absolute; z-index:3; box-sizing:border-box; padding:.7% 1.4% 1%; background:#fffaf0; border:3px solid #3b3140; border-radius:14px;
  box-shadow:0 0 0 5px #d9b48c, 0 0 0 8px #3b3140, 0 8px 0 8px rgba(59,49,64,.2); color:#3b3140; text-align:center; line-height:1.2; pointer-events:none;}
.gv-goal::before, .gv-goal::after{content:""; position:absolute; top:100%; width:7%; height:46%; margin-top:8px; background:#c99a6a; border:3px solid #3b3140; border-top:0; border-radius:0 0 4px 4px; z-index:-1;}
.gv-goal::before{left:16%;} .gv-goal::after{right:16%;}
.gv-goal-t{display:block; font-size:clamp(12px,1.45vw,19px); color:#7a5bd6;}
.gv-goal-n{font-size:clamp(12px,1.4vw,18px); margin:2px 0 5px;}
.gv-goal-n b{font-size:clamp(18px,2.5vw,34px); color:#e0609a;}
.gv-goal-n span{color:#6f6178; font-weight:700;}
.gv-goal-bar{position:relative; height:clamp(16px,1.9vw,26px); border:2.5px solid #3b3140; border-radius:99px; background:#f1e9ff; overflow:hidden;}
.gv-goal-bar i{position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:repeating-linear-gradient(115deg,#ff9fc0 0 10px,#ffb8d0 10px 20px); animation:gv-stripe 1.6s linear infinite;}
.gv-goal-bar span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:clamp(10px,1.15vw,15px); font-weight:800;}
.gv-goal small{display:block; margin-top:5px; font-size:clamp(10px,1.15vw,15px); color:#6f6178; font-weight:700;}
@keyframes gv-stripe{to{background-position:40px 0;}}
@media (prefers-reduced-motion: reduce){.gv-goal-bar i{animation:none;}}

/* 🎄 Christmas + New Year (2026-10-30): snow drifting over the map, Santa hats on the seals out for a walk */
.gv-xmas .gv-tag-fest{background:linear-gradient(#ffd0d6,#e8606a); color:#fff; text-shadow:0 1px 0 rgba(59,49,64,.5);}
.gv-flake{position:absolute; top:-1%; aspect-ratio:1; border-radius:50%; background:#fff; opacity:.85; box-shadow:0 0 4px rgba(255,255,255,.9); animation:gv-snowfall 60s linear infinite;}
@keyframes gv-snowfall{from{top:-1%; translate:0 0;} 50%{translate:16px 0;} to{top:101%; translate:-8px 0;}}
.gv-xmas .gv-walker::after{content:""; position:absolute; left:6%; top:-24%; width:40%; aspect-ratio:1; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M5 30 Q8 6 28 4 Q26 14 34 30Z' fill='%23e8454f' stroke='%233b3140' stroke-width='2.5' stroke-linejoin='round'/%3E%3Crect x='3' y='28' width='33' height='8' rx='4' fill='%23fff' stroke='%233b3140' stroke-width='2.5'/%3E%3Ccircle cx='29' cy='5' r='4.5' fill='%23fff' stroke='%233b3140' stroke-width='2.2'/%3E%3C/svg%3E") center/contain no-repeat;}
.gv-xmas .gv-walker.gv-right::after{left:auto; right:6%; transform:scaleX(-1);}
@media (prefers-reduced-motion: reduce){.gv-flake{animation:none; display:none;}}

/* 🎉 the sponsor's sign */
.gv-promo{background:#fff6dc; box-shadow:0 0 0 5px #f0c76b, 0 0 0 8px #3b3140, 0 8px 0 8px rgba(59,49,64,.2);}
.gv-promo .gv-goal-t{color:#d2742a;}
.gv-promo .gv-goal-n b{color:#e0609a;}
.gv-promo .gv-goal-n s{opacity:.55;}
.gv-promo .gv-goal-bar i{background:repeating-linear-gradient(115deg,#ffc46b 0 10px,#ffd994 10px 20px);}
.gv-promo a{pointer-events:auto; color:#c74b8a; text-decoration:none; font-weight:800; border-bottom:2px solid currentColor;}

/* 📸 photo mode: full screen, the menus tucked away, a sticker frame, a shutter button */
.gv-photobtn{position:absolute; right:12px; top:50px; z-index:3; font:inherit; font-weight:800; font-size:14px; color:#3b3140; background:#fff; border:3px solid #3b3140; border-radius:99px; padding:4px 14px; box-shadow:0 3px 0 rgba(59,49,64,.3); cursor:pointer;}
.gv-photobtn:hover{background:#e7f3ff;}
.gv-full .gv-photobtn{position:fixed; right:16px; top:58px; z-index:151;}
.gv-photo .gv-fs, .gv-photo .gv-photobtn, .gv-photo .gv-dock{display:none;}
.gv-photoframe{position:fixed; inset:0; z-index:152; pointer-events:none; border:12px solid #fff; box-shadow:inset 0 0 0 3px #3b3140, 0 0 0 3px #3b3140;}
.gv-photoframe i{position:absolute; font-style:normal; font-size:clamp(24px,4vw,40px); filter:drop-shadow(0 2px 0 rgba(59,49,64,.3));}
.gv-photoframe i:nth-child(1){left:6px; top:2px;} .gv-photoframe i:nth-child(2){right:6px; top:2px;} .gv-photoframe i:nth-child(3){left:6px; bottom:2px;} .gv-photoframe i:nth-child(4){right:6px; bottom:2px;}
.gv-photobar{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:153; display:flex; gap:10px;}
.gv-photobar button{font:inherit; font-weight:800; font-size:16px; border:3px solid #3b3140; border-radius:99px; padding:8px 20px; background:#fff; color:#3b3140; box-shadow:0 4px 0 rgba(59,49,64,.35); cursor:pointer;}
.gv-photobar .gv-snap{background:#ffd0e0;}
.gv-photobar button:active{transform:translateY(2px); box-shadow:0 2px 0 rgba(59,49,64,.35);}
.gv-photohint{position:fixed; left:50%; top:26px; transform:translateX(-50%); z-index:153; margin:0; padding:4px 14px; font-size:13px; font-weight:800; color:#3b3140; background:rgba(255,255,255,.92); border:2.5px solid #3b3140; border-radius:99px; white-space:nowrap; pointer-events:none;}
.gv-flash{position:fixed; inset:0; z-index:154; background:#fff; opacity:0; pointer-events:none;}
.gv-flash.on{animation:gv-flash .45s ease-out;}
@keyframes gv-flash{0%{opacity:.85;} 100%{opacity:0;}}
@media (max-width:520px){.gv-photobtn{font-size:12px; padding:3px 10px; top:44px;} .gv-photohint{font-size:11px; max-width:86vw; white-space:normal; text-align:center;}}
@media (prefers-reduced-motion: reduce){.gv-flash.on{animation:none;}}

/* 🌧️ weather, 🧺 picnic, 📮 notices, 🖼️ card frames (2026-10-30) */
.gv-weatherbtn{position:absolute; right:12px; top:88px; z-index:3; font:inherit; font-weight:800; font-size:13px; color:#3b3140; background:#fff; border:3px solid #3b3140; border-radius:99px; padding:3px 12px; box-shadow:0 3px 0 rgba(59,49,64,.3); cursor:pointer;}
.gv-weatherbtn:hover{background:#e7f3ff;}
.gv-full .gv-weatherbtn{position:fixed; right:16px; top:98px; z-index:151;}
.gv-photo .gv-weatherbtn{display:none;}
@media (max-width:520px){.gv-weatherbtn{font-size:11px; padding:2px 9px; top:76px;}}
.gv-w-rain .gv-life::after{content:""; position:absolute; inset:0; pointer-events:none; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%23a9c4ee' stroke-width='2' stroke-linecap='round' opacity='.75'%3E%3Cline x1='20' y1='4' x2='15' y2='26'/%3E%3Cline x1='64' y1='30' x2='59' y2='52'/%3E%3Cline x1='100' y1='8' x2='95' y2='30'/%3E%3Cline x1='38' y1='70' x2='33' y2='92'/%3E%3Cline x1='88' y1='78' x2='83' y2='100'/%3E%3Cline x1='8' y1='96' x2='3' y2='116'/%3E%3C/g%3E%3C/svg%3E"),
  rgba(80,100,150,.16); animation:gv-rain .55s linear infinite;}
@keyframes gv-rain{to{background-position:-27px 120px, 0 0;}}
@media (prefers-reduced-motion: reduce){.gv-w-rain .gv-life::after{animation:none;}}
.gv-sit{transition:none;}
.gv-sit img{animation:gv-hop 1.1s ease-in-out infinite alternate;}
@media (prefers-reduced-motion: reduce){.gv-sit img{animation:none;}}
.gv-free .gv-tag small{display:block; font-size:.8em; font-weight:700; color:#c74b8a;}
.gh-notices{list-style:none; padding:0; margin:10px 0 0; display:grid; gap:10px;}
.gh-notices li{background:#fff8e6; border:2.5px solid #3b3140; border-radius:14px; padding:10px 14px;}
.gh-notices p{margin:0; font-weight:700; white-space:pre-wrap;}
.gh-notices small{display:block; margin-top:4px; color:#6f6890; font-size:12px;}

/* share modal: backdrop chips for the house card (2026-10-31) */
.share-bgs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 12px;}
.share-bgs[hidden]{display:none;}
.share-bgs button{font:inherit; font-weight:700; font-size:.88rem; padding:5px 12px; border:3px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); cursor:pointer; box-shadow:2px 2px 0 var(--line);}
.share-bgs button.on{background:var(--grape-soft);}
.share-gif[hidden]{display:none;}