/* Beanville homes (G, 2026-10-02): one home per collector. The scene is plain shapes in the Town's style, built so
   artist-drawn pieces can replace each one later (the house, the mailbox, the flag are separate elements). */

/* ── Town: a collector's home on the street ── */
.bv-home .fam-row { display: flex; justify-content: center; align-items: center; margin-top: -4px; }
.bv-home .fam-row img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--edge); background: #fff; object-fit: cover; margin-left: -6px; }
.bv-home .fam-row img:first-child { margin-left: 0; }
.bv-home .fam-row i { font: 700 11px var(--f-mono); font-style: normal; margin-left: 4px; color: var(--text); }
.bv-home .lbl { font-family: var(--f-body, inherit); font-size: 13px; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; }

/* ── the home page scene ── */
.hm-scene { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 300px; max-height: 560px; overflow: hidden; border: 3px solid var(--edge); border-radius: var(--r-lg, 18px); background: linear-gradient(#BFE6F5 0 58%, #8FCB6B 58% 100%); isolation: isolate; }
.hm-sun { position: absolute; right: 7%; top: 8%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #FFD866; border: 3px solid #2B1B14; }
.hm-cloud { position: absolute; height: 7%; border-radius: 999px; background: #fff; border: 3px solid #2B1B14; animation: hmDrift 26s linear infinite alternate; }
.hm-cloud.a { left: 10%; top: 10%; width: 16%; }
.hm-cloud.b { left: 52%; top: 20%; width: 11%; animation-duration: 34s; }
.hm-hill { position: absolute; left: -10%; right: -10%; top: 46%; height: 30%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #A6D97F; border-top: 3px solid #2B1B14; z-index: 0; }
.hm-house { position: absolute; left: 6%; bottom: 20%; width: 44%; height: 62%; z-index: 1; }
.hm-house .roof { position: absolute; left: -6%; right: -6%; top: 0; height: 42%; background: var(--famC); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hm-house .chimney { position: absolute; right: 16%; top: 6%; width: 9%; height: 22%; background: #B5533C; border: 3px solid #2B1B14; z-index: -1; }
.hm-house .wall { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: #FFF6E6; border: 3px solid #2B1B14; border-radius: 0 0 8px 8px; }
.hm-house .win { position: absolute; top: 18%; width: 22%; height: 38%; background: #CDEBF5; border: 3px solid #2B1B14; border-radius: 4px; }
.hm-house .win.l { left: 9%; } .hm-house .win.r { right: 9%; }
.hm-house .win::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#2B1B14, #2B1B14) center / 3px 100% no-repeat, linear-gradient(#2B1B14, #2B1B14) center / 100% 3px no-repeat; opacity: .55; }
.hm-house .door { position: absolute; left: 39%; bottom: 0; width: 22%; height: 62%; background: var(--famC); border: 3px solid #2B1B14; border-bottom: 0; border-radius: 40% 40% 0 0 / 22% 22% 0 0; }
.hm-house .door::after { content: ""; position: absolute; right: 14%; top: 52%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: #FFD866; border: 2px solid #2B1B14; }
.hm-house .plaque { position: absolute; left: 39%; width: 22%; top: 6%; text-align: center; font: 700 clamp(10px, 1.6vw, 16px) var(--f-mono, monospace); color: #2B1B14; background: #FFD866; border: 2px solid #2B1B14; border-radius: 6px; padding: 1px 0; }
.hm-flag { position: absolute; left: 51%; bottom: 20%; width: 1.2%; min-width: 5px; height: 46%; background: #2B1B14; border-radius: 3px; z-index: 1; }
.hm-flag i { position: absolute; left: 100%; top: 4%; width: 900%; height: 22%; background: var(--famC); border: 3px solid #2B1B14; border-left: 0; clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%); animation: hmWave 2.6s ease-in-out infinite alternate; transform-origin: left center; }
.hm-mailbox { position: absolute; right: 16%; bottom: 8%; width: 1%; min-width: 5px; height: 17%; background: #2B1B14; z-index: 2; }
.hm-mailbox i { position: absolute; left: 50%; top: -34%; width: 720%; height: 40%; transform: translateX(-50%); background: #E4572E; border: 3px solid #2B1B14; border-radius: 40% 40% 4px 4px / 80% 80% 4px 4px; }
.hm-sign { position: absolute; left: 50%; top: 5%; transform: translateX(-50%); z-index: 3; max-width: 60%; padding: 4px 16px; font: 400 clamp(16px, 3vw, 28px)/1.15 var(--f-display, inherit); color: #2B1B14; background: #FFF6E6; border: 3px solid #2B1B14; border-radius: 12px; text-align: center; overflow-wrap: anywhere; }
.hm-who { position: absolute; z-index: 4; display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; animation: hmBob 3.2s ease-in-out infinite alternate; }
.hm-who span { display: grid; justify-items: center; padding: 1px 9px; border-radius: 999px; background: #FFF6E6; border: 2px solid #2B1B14; color: #2B1B14; font-size: clamp(10px, 1.4vw, 13px); font-weight: 700; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.hm-who span small { font-weight: 600; font-size: .8em; opacity: .75; }
.hm-who:hover, .hm-who:focus-visible { animation-play-state: paused; outline: none; }
.hm-who:focus-visible span { box-shadow: 0 0 0 3px var(--accent); }
.hm-cut { display: block; width: auto; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0,0,0,.22)); }
.hm-cut.round { border-radius: 50%; border: 3px solid #2B1B14; background: #fff; aspect-ratio: 1; object-fit: cover; filter: none; }
.hm-who.main { left: 68%; bottom: 6%; transform: translateX(-50%); }
.hm-who.main .hm-cut { height: clamp(120px, 26vw, 250px); }
.hm-who .hm-cut.sm { height: clamp(62px, 13vw, 128px); }
.hm-who.porch { left: 33%; bottom: 17%; animation-delay: -1.1s; }
.hm-who.left { left: 3%; bottom: 5%; animation-delay: -2s; }
.hm-who.right { right: 3%; bottom: 24%; animation-delay: -.6s; }
.hm-who.window { left: 12%; bottom: 34%; z-index: 2; animation-delay: -1.7s; }
.hm-who.window .hm-cut.sm { height: clamp(46px, 9vw, 92px); }
@keyframes hmBob { from { translate: 0 0; } to { translate: 0 -5px; } }
@keyframes hmWave { from { transform: skewY(-4deg); } to { transform: skewY(5deg); } }
@keyframes hmDrift { from { translate: 0 0; } to { translate: 40px 0; } }
.hm-mayor { margin: 0; padding: 10px 14px; border-left: 5px solid var(--accent); background: var(--surface-2); border-radius: 0 12px 12px 0; }

/* ── the owner's panel ── */
.hm-form { display: grid; gap: 10px; margin-top: 10px; }
.hm-form label[for] { font-weight: 700; }
.hm-form input[type="text"], .hm-form #hmName { max-width: 340px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.hm-pick { border: 0; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.hm-pick legend { font-weight: 700; padding: 0; }
.hm-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-opt { display: grid; justify-items: center; gap: 3px; width: 92px; padding: 8px 6px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface-2); cursor: pointer; text-align: center; font-size: 12px; font-weight: 600; position: relative; }
.hm-opt input { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; }
.hm-opt img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--edge); background: #fff; }
.hm-opt span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.hm-opt:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* ── the mantel, the household, the street ── */
.hm-shelf { list-style: none; margin: 14px 0 0; padding: 14px 10px 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); border-bottom: 10px solid #8A5A3B; border-radius: 0 0 6px 6px; }
.hm-trophy { display: grid; justify-items: center; gap: 2px; text-align: center; padding-bottom: 8px; }
.hm-trophy .cup { display: grid; place-items: center; width: 58px; height: 58px; font-size: 28px; border-radius: 50%; border: 3px solid var(--edge); background: #F0D2B0; }
.hm-trophy.silver .cup { background: #EEF2F6; } .hm-trophy.gold .cup { background: #FFE07A; }
.hm-trophy.none .cup { background: none; border-style: dashed; filter: grayscale(1); opacity: .5; }
.hm-trophy b { font-size: 14px; } .hm-trophy small { color: var(--muted); font-size: 12px; }
.hm-folk { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); margin-top: 12px; }
.hm-res { display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; text-align: center; }
.hm-res img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 2px solid var(--edge); background: #fff; }
.hm-res b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-res small { font: 600 11px var(--f-mono, monospace); color: var(--muted); }
.hm-res.main { border-color: var(--accent); }
.hm-res:hover { transform: translateY(-2px); transition: transform .15s; }
.hm-street { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
body.bm-page main.bm-wrap a.hm-door { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 3px solid var(--edge); background: var(--surface); color: var(--text) !important; text-decoration: none; }
.hm-door img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--edge); background: #fff; flex: none; }
.hm-door span { display: grid; min-width: 0; } .hm-door small { color: var(--muted); font-size: 12px; } .hm-door b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-door.town { justify-content: center; text-align: center; }

@media (max-width: 560px) {
  .hm-scene { aspect-ratio: 4 / 3.4; }
  .hm-house { width: 54%; height: 54%; left: 3%; bottom: 26%; }
  .hm-who.main { left: 72%; }
  .hm-mailbox { right: 3%; bottom: 30%; }
  .hm-who.right { right: 1%; bottom: 44%; }
  .hm-who.porch { left: 30%; bottom: 22%; }
  .hm-who.window { left: 9%; bottom: 40%; }
  .hm-who.left { left: 1%; bottom: 3%; }
  .hm-flag { left: 58%; bottom: 26%; height: 36%; }
  .hm-who span { max-width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .hm-who, .hm-flag i, .hm-cloud { animation: none !important; } }

/* ── Life in Beanville: the growing half of the Birth Certificate ── */
.lf-lock { margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 2px solid currentColor; font-size: .85em; letter-spacing: .04em; opacity: .8; white-space: nowrap; }
.lf-life { display: grid; gap: 12px; padding-top: 14px; border-top: 3px dashed var(--edge, #2B1B14); }
.lf-stamps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.lf-stamp { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 10px 8px; border-radius: 12px; border: 3px double #B5533C; color: #8E2F1F; background: rgba(181, 83, 60, .07); transform: rotate(-1.5deg); }
.lf-stamp:nth-child(2n) { transform: rotate(1.2deg); } .lf-stamp:nth-child(3n) { transform: rotate(-.4deg); }
.lf-stamp .ic { font-size: 24px; line-height: 1; }
.lf-stamp b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.lf-stamp small { font-size: 11px; opacity: .85; }
.lf-stamp.now { border-color: #2F6B4F; color: #23533D; background: rgba(47, 107, 79, .08); }
.hm-trophy.crown .cup { background: #FFE07A; box-shadow: 0 0 0 3px #FFC93C; }

/* ── the Town Board ── */
.tb-cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 12px; }
.tb-col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 13px var(--f-body, inherit); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); border: 2px solid var(--edge); }
.tb-live .tb-dot { background: #E4572E; animation: tbPulse 1.4s ease-in-out infinite; }
.tb-surprise .tb-dot { background: #8A4FFF; } .tb-today .tb-dot { background: #FFC93C; } .tb-week .tb-dot { background: #4FA3E0; }
.tb-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.bm-page main.bm-wrap a.tb-item, .tb-item { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface-2); color: var(--text) !important; text-decoration: none; }
a.tb-item:hover { border-color: var(--edge); transform: translateY(-1px); }
.tb-item .ic { grid-row: span 2; font-size: 24px; line-height: 1; }
.tb-item .tx { display: grid; min-width: 0; } .tb-item .tx b { font-size: 15px; } .tb-item .tx small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.tb-item .wh { grid-column: 2; font: 700 12px var(--f-mono, monospace); color: var(--muted); }
.tb-live .tb-item { border-color: #E4572E; } .tb-surprise .tb-item { border-color: #8A4FFF; border-style: dashed; }
@keyframes tbPulse { from { box-shadow: 0 0 0 0 rgba(228,87,46,.6); } to { box-shadow: 0 0 0 7px rgba(228,87,46,0); } }
@media (prefers-reduced-motion: reduce) { .tb-live .tb-dot { animation: none; } }

/* ── Bean Mail ── */
.hm-mailbox.mine { cursor: pointer; }
.hm-mailbox.has-mail i::before { content: ""; position: absolute; right: -6%; top: -70%; width: 14%; height: 90%; background: #2B1B14; }
.hm-mailbox.has-mail i::after { content: ""; position: absolute; right: -34%; top: -74%; width: 30%; height: 44%; background: #FFD866; border: 2px solid #2B1B14; animation: hmWave 1.2s ease-in-out infinite alternate; transform-origin: left center; }
.hm-mailbox.has-mail::after { content: attr(data-n); position: absolute; left: 50%; top: -68%; transform: translateX(-50%); min-width: 22px; padding: 1px 6px; border-radius: 999px; background: #E4572E; color: #fff; border: 2px solid #2B1B14; font: 700 12px/1.3 var(--f-mono, monospace); text-align: center; z-index: 3; }
.hm-gotmail { margin: 8px 0 0; font: 400 22px/1.1 var(--f-display, inherit); color: var(--accent); }
.ml-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.ml-env { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 14px 16px; border-radius: 12px; border: 3px solid var(--edge); background: #FFF6E6; color: #2B1B14; font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.ml-flap { position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(to bottom, rgba(43,27,20,.10), rgba(43,27,20,0)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transition: transform .55s ease; pointer-events: none; }
.ml-seal { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #E4572E; border: 3px solid #2B1B14; font-size: 20px; z-index: 1; transition: transform .45s ease; }
.ml-to { display: grid; min-width: 0; z-index: 1; } .ml-to small { color: #6B5446; font-size: 12px; } .ml-to b { font-size: 16px; overflow-wrap: anywhere; }
.ml-go { z-index: 1; pointer-events: none; }
.ml-letter.opening .ml-flap { transform: rotateX(180deg); }
.ml-letter.opening .ml-seal { transform: scale(0) rotate(90deg); }
.ml-letter.opening .ml-env { animation: mlShake .5s ease; }
.ml-letter.opened details { border: 2px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.ml-letter.opened summary { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; }
.ml-letter.opened summary::-webkit-details-marker { display: none; }
.ml-ic { font-size: 22px; }
.ml-letter.opened .ml-to small { color: var(--muted); }
.ml-paper { margin: 0 12px 12px; padding: 14px 16px; background: #FFFDF7; color: #2B1B14; border: 2px solid #2B1B14; border-radius: 6px; box-shadow: 4px 4px 0 rgba(43,27,20,.18); }
.ml-paper p { margin: 0 0 8px; line-height: 1.5; } .ml-paper p:last-child { margin-bottom: 0; }
.ml-gift { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #FFD866; border: 2px solid #2B1B14; font-weight: 700; }
.ml-letter.fresh .ml-paper { animation: mlRise .5s ease both; }
@keyframes mlRise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mlShake { 20% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } 80% { transform: rotate(-.6deg); } }
@media (max-width: 480px) { .ml-env { grid-template-columns: auto 1fr; } .ml-go { grid-column: 1 / -1; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .ml-flap, .ml-seal { transition: none; } .ml-letter.opening .ml-env, .ml-letter.fresh .ml-paper, .hm-mailbox.has-mail i::after { animation: none; } }