@import url('/hc-content.css');
:root{color-scheme:dark;--bb-bg:#10191e;--bb-panel:#1b282f;--bb-edge:#34454c;--bb-ink:#f1f2e9;--bb-soft:#a8bbc2;--bb-mint:#c4efad;--bb-yellow:#f3d77b}*{box-sizing:border-box}body.bb-page{margin:0;background:radial-gradient(ellipse at 30% 0,#203c40 0,transparent 60%),var(--bb-bg);color:var(--bb-ink);font-family:Arial,sans-serif;line-height:1.5}.bb-page main{max-width:760px;margin:auto;padding:0 24px 30px}.bb-page button{font:inherit;cursor:pointer}.bb-page a{color:var(--bb-mint)}.bb-page button:focus-visible,.bb-page a:focus-visible,.bb-page summary:focus-visible{outline:3px solid var(--bb-yellow);outline-offset:4px}.bb-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:76px}.bb-top>a{font-weight:800;text-decoration:none;letter-spacing:.12em;color:var(--bb-ink)}.bb-top-actions{display:flex;gap:8px}.bb-sound{border:1px solid var(--bb-edge);background:transparent;color:var(--bb-soft);border-radius:99px;padding:9px 12px;min-height:44px;font-size:12px!important}.bb-heading{margin:8px 0 18px}.bb-heading h1{font:700 clamp(32px,7vw,52px)/1.1 Georgia,serif;letter-spacing:-.04em;margin:7px 0}.bb-kicker{font-size:10px;letter-spacing:.17em;font-weight:bold;color:var(--bb-soft)}.bb-tagline{font:normal clamp(32px,7vw,54px)/1.06 Georgia,serif;margin:10px 0 24px}.bb-intro{text-align:center}.bb-intro>p:not(.bb-tagline){font-size:16px}.bb-primary,.bb-secondary{border:0;border-radius:14px;min-height:56px;padding:15px 24px;font-weight:bold;display:block;width:100%;margin:12px 0;text-align:center}.bb-primary{background:var(--bb-mint);color:#173121;box-shadow:0 5px 0 #6f9c60;transition:transform .15s,box-shadow .15s}.bb-primary:hover{background:#d6ffc2;transform:translateY(-2px)}.bb-primary:active{transform:translateY(4px);box-shadow:0 1px 0 #6f9c60}.bb-secondary{border:1px solid #577079;background:#23363e;color:var(--bb-ink)}.bb-muted,.bb-storage{color:var(--bb-soft);font-size:12px!important}.bb-best{font-size:12px;color:var(--bb-yellow)}.bb-overview{background:#142229f5;border:1px solid var(--bb-edge);border-radius:20px;padding:18px 22px;position:sticky;top:8px;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) 160px;backdrop-filter:blur(12px)}.bb-value span{font-size:10px;letter-spacing:.12em;color:var(--bb-soft);display:block}.bb-value strong{font:normal clamp(36px,8vw,52px)/1.2 Georgia,serif;letter-spacing:-.04em;color:var(--bb-mint);font-variant-numeric:tabular-nums}.bb-overview svg{width:100%;height:52px;align-self:center}.bb-overview polyline{stroke:var(--bb-mint);fill:none;stroke-width:2.5;stroke-linejoin:round}.bb-stats{display:grid;grid-template-columns:repeat(3,1fr);grid-column:1/-1;border-top:1px solid var(--bb-edge);margin-top:12px;padding-top:10px;gap:12px}.bb-stats span{display:block;font-size:10px;color:var(--bb-soft);text-transform:uppercase;letter-spacing:.08em}.bb-stats strong{font-size:17px;font-variant-numeric:tabular-nums}.bb-city{height:212px;position:relative;overflow:hidden;margin:18px 0 24px;border-radius:18px;background:linear-gradient(180deg,#263f48,#537575);isolation:isolate}.bb-city:before,.bb-city:after{content:'';position:absolute;top:20%;left:9%;width:75px;height:18px;border-radius:100px;background:#c9dad120;box-shadow:220px 20px 0 #c9dad114}.bb-city:after{top:36%;left:30%;width:44px}.bb-sun{position:absolute;right:14%;top:18px;width:47px;height:47px;background:#f3d77b;border-radius:50%;box-shadow:0 0 60px #ffeeb222}.bb-skyline{position:absolute;bottom:32px;left:4%;right:4%;display:flex;align-items:flex-end;justify-content:center;gap:6px}.bb-building{height:var(--height);flex:1;max-width:80px;position:relative;background:#192b34;border-radius:7px 7px 0 0;border-top:5px solid #243840;filter:saturate(.3);opacity:.5;transition:height .6s,background .6s}.bb-building.owned{background:#d6dfbc;border-color:#a6b8a0;filter:none;opacity:1;animation:bb-build .5s var(--delay) both}.bb-building:nth-child(3n).owned{background:#dba985;border-color:#b17e65}.bb-building:nth-child(2n).owned{background:#a9cbd0;border-color:#7ea4b0}.bb-sign{position:absolute;top:9px;width:100%;text-align:center;font-size:9px;font-weight:900;color:#28433e}.bb-windows{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:30px 9px 0}.bb-windows i{background:#334e55;height:9px;border-radius:1px}.owned .bb-windows i{background:#f9e6a8;box-shadow:0 0 6px #f9e6a822}.bb-awning{position:absolute;bottom:20px;height:9px;background:#263f48;width:100%;box-shadow:0 2px 2px #0003}.owned .bb-awning{background:repeating-linear-gradient(90deg,#45645c 0 7px,#e4ead2 7px 14px)}.bb-door{position:absolute;bottom:0;left:38%;height:21px;width:23%;background:#233d40}.bb-road{height:32px;background:#263b40;position:absolute;bottom:0;width:100%;border-top:3px solid #a5bfad}.bb-crowd{position:absolute;bottom:10px;width:100%;height:12px}.bb-crowd i{position:absolute;width:5px;height:9px;border-radius:4px;background:#f2dba1;left:var(--x);animation:bb-walk 6s var(--delay) linear infinite}.bb-crowd i:nth-child(2n){background:#d0e5d0}.bb-scene-label{position:absolute;bottom:7px;right:12px;font-size:8px;letter-spacing:.1em;color:#c4dad0;background:#263b40cc;padding-left:8px}.bb-event{display:flex;align-items:center;gap:12px;padding:12px 15px;background:#26353b;border-radius:12px;border:1px solid var(--bb-edge)}.bb-event>span{font-size:26px;color:var(--bb-yellow);width:32px;text-align:center}.bb-event div>*{display:block}.bb-event strong{font-size:13px}.bb-event div>span{font-size:12px;color:var(--bb-soft)}.bb-round{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:22px 0 12px}.bb-round h2{font:normal 26px Georgia,serif;margin:0}.bb-round>span{font-size:10px;color:var(--bb-soft);letter-spacing:.1em;white-space:nowrap}.bb-choices{display:grid;gap:12px}.bb-choice{position:relative;width:100%;border:1px solid #4b6168;background:linear-gradient(130deg,#25373e,#1a2b32);border-radius:16px;padding:17px 40px 17px 70px;min-height:116px;text-align:left;color:var(--bb-ink);transition:transform .15s,border-color .15s}.bb-choice:hover:not(:disabled){transform:translateX(4px);border-color:var(--bb-mint);background:#2b4147}.bb-choice:active:not(:disabled){transform:scale(.98)}.bb-choice:disabled{opacity:.45;cursor:not-allowed}.bb-choice-icon{position:absolute;left:17px;top:20px;width:37px;height:37px;background:#c4efad16;border:1px solid #739c7c55;border-radius:12px;color:var(--bb-mint);display:grid;place-content:center;font-size:24px}.bb-choice-copy>*{display:block}.bb-choice-copy strong{font-size:17px}.bb-choice-copy>span{font-size:12px;color:var(--bb-soft);margin-top:2px}.bb-effects{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.bb-effects>span{font-size:10px;color:#d5e3e0;background:#ffffff0a;padding:3px 8px;border-radius:5px;border:1px solid #ffffff0b}.bb-effects .free{color:var(--bb-mint)}.bb-choice-arrow{position:absolute;right:16px;top:27px;color:var(--bb-mint);font-size:18px}.bb-choice:disabled .bb-choice-arrow{font-size:9px;color:var(--bb-soft);top:22px}.bb-result{background:#243d31;border:1px solid #547d5e;border-radius:14px;padding:14px;display:flex;gap:12px;align-items:center;margin:-8px 0 18px;animation:bb-arrive .3s both;flex-wrap:wrap}.bb-result-icon{font-size:24px;color:var(--bb-mint)}.bb-result div>*{display:block}.bb-result strong{font-size:16px;color:var(--bb-mint)}.bb-result div>span{font-size:11px;color:#c0d0c1}.bb-combo{font-size:10px;background:#bce09b15;border-radius:6px;padding:5px;color:var(--bb-yellow);margin-left:auto}.bb-unlock{display:grid;gap:4px;text-align:center;border:1px solid var(--bb-yellow);background:#393a28;padding:15px;border-radius:14px;margin:14px 0;animation:bb-arrive .4s}.bb-unlock>span:first-child{font-size:10px;letter-spacing:.15em;color:var(--bb-yellow)}.bb-unlock strong{font:24px Georgia,serif}.bb-unlock>span:last-child{font-size:12px;color:#d7d7b9}.bb-offer,.bb-finish{border:1px solid #bba46a;background:linear-gradient(145deg,#393b2b,#232f2b);padding:25px;border-radius:20px;margin:20px 0;text-align:center}.bb-offer h2,.bb-finish h2{font:32px/1.15 Georgia,serif;margin:12px 0}.bb-offer-number{display:block;font:48px Georgia,serif;color:var(--bb-yellow)}.bb-rank{display:block;color:var(--bb-yellow);font-size:18px}.bb-details{margin:32px 0 10px;font-size:12px;border-top:1px solid var(--bb-edge);padding-top:20px;color:var(--bb-soft)}.bb-details summary{cursor:pointer;min-height:44px}.bb-details a{display:block;padding:12px 0;min-height:44px}.bb-trophies{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 20px}.bb-trophies>div{border:1px solid var(--bb-edge);border-radius:10px;padding:12px;opacity:.6}.bb-trophies>div.earned{opacity:1;background:#c4efad0b;border-color:#81966f}.bb-trophies strong{display:block;font-size:12px}.bb-trophies span{font-size:10px;display:block}.bb-page progress{display:block;width:100%;height:5px;margin-top:22px;accent-color:var(--bb-mint)}.bb-footer{max-width:760px;padding:20px 24px 30px;margin:auto;border-top:1px solid var(--bb-edge);font-size:10px;color:var(--bb-soft)}.bb-footer nav{display:flex;gap:20px;margin-bottom:18px}.bb-dialog{background:#1d3035;color:var(--bb-ink);border:1px solid #59777c;border-radius:18px;padding:25px;width:min(420px,calc(100vw - 30px))}.bb-dialog::backdrop{background:#08151dcc;backdrop-filter:blur(6px)}.bb-dialog h2{font:30px Georgia,serif}.bb-dialog p{font:14px/1.5 Arial,sans-serif}.bb-confetti{position:fixed;inset:0;pointer-events:none;z-index:10;overflow:hidden}.bb-confetti i{position:absolute;left:var(--x);top:-10px;width:8px;height:14px;background:var(--bb-mint);animation:bb-fall 1.1s var(--d) ease-in both}.bb-confetti i:nth-child(2n){background:var(--bb-yellow)}.bb-confetti i:nth-child(3n){background:#dda9a0}@keyframes bb-build{from{transform:scaleY(.7);transform-origin:bottom;opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes bb-walk{to{transform:translateX(65px)}}@keyframes bb-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes bb-fall{to{transform:translateY(100vh) rotate(var(--r));opacity:0}}@media(max-width:480px){.bb-page main{padding-inline:16px}.bb-overview{padding:14px 16px;grid-template-columns:minmax(0,1fr) 95px}.bb-city{height:184px;margin:14px 0 20px}.bb-choice{padding:14px 32px 14px 62px;min-height:110px}.bb-choice-copy strong{font-size:15px}.bb-choice-icon{left:12px;top:16px}.bb-round h2{font-size:25px}.bb-offer,.bb-finish{padding:22px 18px}.bb-top{min-height:66px}}@media(prefers-reduced-motion:reduce){.bb-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep all three moves within reach on a phone. */
.bb-playing .bb-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}.bb-playing .bb-heading>.bb-kicker{display:none}.bb-playing .bb-heading h1{font-size:30px;margin:0}.bb-playing .bb-top{min-height:58px}.bb-playing .bb-overview{padding:12px 16px}.bb-playing .bb-value strong{font-size:38px}.bb-playing .bb-stats{margin-top:8px;padding-top:7px}.bb-playing .bb-city{height:140px;margin:12px 0 16px}.bb-playing .bb-building{max-height:112px}.bb-playing .bb-round{margin:14px 0 10px}.bb-playing .bb-choice{min-height:96px;padding-top:12px;padding-bottom:12px}.bb-playing .bb-choices{gap:9px}.bb-playing .bb-event{padding-block:9px}.bb-playing .bb-effects{margin-top:6px}.bb-playing .bb-result{margin:0 0 12px;padding:9px 12px}.bb-playing .bb-result strong{font-size:14px}.bb-playing .bb-result div>span{font-size:10px}.bb-playing .bb-combo{display:none}
.bb-playing .bb-top{min-height:50px}.bb-playing .bb-heading{margin-bottom:8px}.bb-playing .bb-heading h1{font-size:28px}.bb-playing .bb-city{height:108px;margin:10px 0 12px}.bb-playing .bb-building{max-height:80px}.bb-playing .bb-windows{margin-top:24px;gap:4px}.bb-playing .bb-windows i{height:6px}.bb-playing .bb-choice{min-height:88px;padding-top:10px;padding-bottom:10px}.bb-playing .bb-round{margin:12px 0 8px}.bb-playing .bb-event{padding-block:7px}.bb-playing .bb-result{padding:7px 10px;margin-bottom:10px}
