/* Build Your Home (level 6). Every rule is scoped to the level; the stage is 400 x 600 logical px. */
.lvl-build-your-home .byh { position: absolute; inset: 0; overflow: hidden; background: #F7F8F6; color: #1A1D1A; font-family: var(--font-sans, Inter, sans-serif); }
.lvl-build-your-home .byh [hidden] { display: none !important; }
.lvl-build-your-home .byh-scene, .lvl-build-your-home .byh-scene svg { position: absolute; left: 0; top: 0; width: 400px; height: 290px; display: block; }
.lvl-build-your-home .byh-panel, .lvl-build-your-home .byh-market { position: absolute; left: 0; top: 290px; width: 400px; height: 310px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; background: #F7F8F6; border-top: 2px solid #1A1D1A; }
.lvl-build-your-home .byh h2, .lvl-build-your-home .byh h3, .lvl-build-your-home .byh strong, .lvl-build-your-home .byh-cost { margin: 0; font-family: var(--font-serif, Georgia, serif); font-weight: 400; line-height: 1.1; }
.lvl-build-your-home .byh p { margin: 0; }

/* budget bar: the dark line is the budget, stripes preview this card, red is money past the line */
.lvl-build-your-home .byh-budget-row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.lvl-build-your-home .byh-budget-left.is-over { color: #B84233; }
.lvl-build-your-home .byh-bar { position: relative; height: 16px; border-radius: 8px; background: #EDEEE9; box-shadow: inset 0 0 0 1.5px #D0D2CC; overflow: hidden; }
.lvl-build-your-home .byh-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; transition: width .3s, left .3s; }
.lvl-build-your-home .byh-bar-fill { background: #7A8F72; }
.lvl-build-your-home .byh-bar-over { background: #B84233; }
.lvl-build-your-home .byh-bar-ghost { background: repeating-linear-gradient(135deg, rgba(194,165,114,.9) 0 5px, rgba(194,165,114,.4) 5px 10px); }
.lvl-build-your-home .byh-bar-ghost.is-over { background: repeating-linear-gradient(135deg, rgba(184,66,51,.8) 0 5px, rgba(194,165,114,.45) 5px 10px); }
.lvl-build-your-home .byh-bar-line { width: 3px !important; margin-left: -3px; background: #1A1D1A; }

/* the card */
.lvl-build-your-home .byh-card { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 16px; background: #fff; border: 2px solid #1A1D1A; border-radius: 14px; box-shadow: 0 3px 0 #1A1D1A; overflow: hidden; }
.lvl-build-your-home .byh-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lvl-build-your-home .byh-where { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5C6360; }
.lvl-build-your-home .byh-cost { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.lvl-build-your-home .byh-name { margin-top: 2px; font-size: 23px; line-height: 1.12; }
.lvl-build-your-home .byh-flavour { font-size: 14.5px; line-height: 1.38; color: #4A5048; }
.lvl-build-your-home p.byh-after { margin-top: auto; font-size: 13px; font-weight: 600; color: #4A7C59; }
.lvl-build-your-home p.byh-after.is-over { color: #B84233; }
.lvl-build-your-home .byh-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: #EDEEE9; }
.lvl-build-your-home .byh-timer i { display: block; height: 100%; background: #C2A572; transform-origin: 0 50%; }
.lvl-build-your-home .byh-timer.is-late i { background: #B84233; }
.lvl-build-your-home .byh-stamp { position: absolute; right: 14px; bottom: 18px; padding: 4px 10px; border: 2.5px solid #4A5048; border-radius: 6px; background: rgba(255,255,255,.9); color: #4A5048; font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-8deg); }
.lvl-build-your-home .byh-stamp.is-add { border-color: #4A7C59; color: #4A7C59; }
@keyframes byh-in { from { opacity: 0; transform: translateY(14px); } }
.lvl-build-your-home .byh-card.is-in { animation: byh-in .22s ease-out; }
.lvl-build-your-home .byh-card.is-added, .lvl-build-your-home .byh-card.is-skipped { transition: transform .32s ease-in .08s, opacity .32s ease-in .08s; opacity: 0; transform: translateY(-40px) scale(.94); }
.lvl-build-your-home .byh-card.is-skipped { transform: translateX(-70px) rotate(-5deg); }

/* buttons */
.lvl-build-your-home .byh-actions { display: flex; gap: 10px; }
.lvl-build-your-home .byh-btn { flex: 1; height: 54px; border: 2px solid #1A1D1A; border-radius: 12px; background: #fff; color: #1A1D1A; font: 700 17px/1 var(--font-sans, Inter, sans-serif); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lvl-build-your-home .byh-add { background: #7A8F72; box-shadow: 0 3px 0 #1A1D1A; }
.lvl-build-your-home .byh-add.is-over { background: #E8B4A8; }
.lvl-build-your-home .byh-btn:active, .lvl-build-your-home .byh-mode:active { transform: translateY(2px); box-shadow: none; }
.lvl-build-your-home .byh-btn:disabled { cursor: default; }
.lvl-build-your-home .byh-btn:focus-visible, .lvl-build-your-home .byh-mode:focus-visible { outline: 3px solid #C2A572; outline-offset: 2px; }

/* mode picker */
.lvl-build-your-home .byh-pick { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px 16px; box-sizing: border-box; background: #F7F8F6; text-align: center; }
.lvl-build-your-home .byh-pick h2 { font-size: 32px; }
.lvl-build-your-home .byh-pick p { margin-bottom: 6px; max-width: 31ch; font-size: 15px; line-height: 1.45; color: #4A5048; }
.lvl-build-your-home .byh-modes { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.lvl-build-your-home .byh-mode { display: grid; grid-template-columns: 150px 1fr; align-items: center; column-gap: 12px; padding: 8px 14px 8px 8px; text-align: left; border: 2px solid #1A1D1A; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 #1A1D1A; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
.lvl-build-your-home .byh-mode svg { grid-row: 1 / 3; width: 150px; height: 100px; border-radius: 10px; }
.lvl-build-your-home .byh-mode strong { align-self: end; font-size: 24px; }
.lvl-build-your-home .byh-mode span { align-self: start; margin-top: 4px; font-size: 13.5px; color: #5C6360; }

/* market: chips carry a mark as well as a colour, so they read without colour too */
.lvl-build-your-home .byh-market { gap: 7px; }
.lvl-build-your-home .byh-verdict { font-size: 25px; }
.lvl-build-your-home .byh-chips { flex: 0 1 auto; max-height: 102px; min-height: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px 5px; overflow: hidden; }
.lvl-build-your-home .byh-chip { padding: 4px 9px; border-radius: 999px; background: #EDEEE9; font-size: 12px; line-height: 1.2; animation: byh-chip .25s ease-out; }
.lvl-build-your-home .byh-chip b, .lvl-build-your-home .byh-legend b { font-weight: 800; }
.lvl-build-your-home .is-love { --c: #4A7C59; } .lvl-build-your-home .is-like { --c: #9DB592; } .lvl-build-your-home .is-meh { --c: #D9C7A0; } .lvl-build-your-home .is-trap { --c: #B84233; }
.lvl-build-your-home .byh-chip[class*="is-"] { background: var(--c); }
.lvl-build-your-home .byh-chip.is-love, .lvl-build-your-home .byh-chip.is-trap { color: #fff; }
.lvl-build-your-home .byh-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: #4A5048; }
.lvl-build-your-home .byh-legend b { display: inline-block; min-width: 20px; padding: 0 4px; margin-right: 3px; border-radius: 6px; background: var(--c); text-align: center; }
.lvl-build-your-home .byh-legend .is-love b, .lvl-build-your-home .byh-legend .is-trap b { color: #fff; }
.lvl-build-your-home .byh-empty { font-size: 14px; color: #4A5048; }
@keyframes byh-chip { from { opacity: 0; transform: scale(.8); } }
.lvl-build-your-home .byh-zach { flex: none; height: 64px; display: flex; align-items: center; gap: 10px; }
.lvl-build-your-home .byh-zach-pic { flex: none; width: 46px; height: 64px; overflow: hidden; display: flex; align-items: flex-end; }
.lvl-build-your-home p.byh-bubble { position: relative; flex: 1; padding: 7px 11px; background: #fff; border: 2px solid #1A1D1A; border-radius: 12px; font-size: 13.5px; line-height: 1.3; }
.lvl-build-your-home .byh-bubble::before { content: ''; position: absolute; left: -9px; top: calc(50% - 8px); border: 8px solid transparent; border-right-color: #1A1D1A; border-left: 0; }
.lvl-build-your-home .byh-finish { flex: none; height: 48px; margin-top: auto; }
.lvl-build-your-home .is-later { visibility: hidden; }

/* scene motion, only when something happens: features drop in, unit floors flash. Nothing loops (Zach, 10-18: constant movement tires the eyes). */
@keyframes byh-pop { 0% { opacity: 0; transform: translateY(-14px) scale(.9); } 60% { opacity: 1; transform: translateY(1px) scale(1.02); } }
.lvl-build-your-home .byh-pop { animation: byh-pop .42s cubic-bezier(.2,.8,.3,1.2); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes byh-flash { from { opacity: .3; } }
.lvl-build-your-home .byh-flash { animation: byh-flash .45s ease-out; }

.lvl-build-your-home .byh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lvl-build-your-home .byh.is-paused * { animation-play-state: paused !important; }
.lvl-build-your-home .byh.is-reduced *, .lvl-build-your-home .byh.is-reduced *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .lvl-build-your-home .byh * { animation: none !important; transition: none !important; } }