*{box-sizing:border-box}body{margin:0;background:var(--bop-bg);color:var(--bop-ink);font-family:var(--bop-ui)}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit}button{cursor:pointer}.skip{position:fixed;left:15px;top:-100px;background:var(--bop-ink);color:white;padding:15px;z-index:10}.skip:focus{top:15px}
.home-header{max-width:1440px;margin:auto;display:flex;align-items:center;gap:24px;padding:30px 48px 22px}.home-header .bopoli-logo{padding:10px 18px 14px;background:var(--bop-paper);border:2px solid var(--bop-line);border-radius:20px 13px 18px 12px;box-shadow:3px 4px 0 var(--bop-line);transform:rotate(-3deg)}.header-motto{font:17px/1.25 var(--bop-hand);color:var(--bop-muted);transform:rotate(2deg)}.home-header nav{display:flex;align-items:center;gap:26px;margin-left:auto;font:17px var(--bop-hand)}.home-header nav a,.home-header nav button{padding:10px 0}.home-header nav button{border:0;background:none}.home-header nav a:hover,.home-header nav button:hover{text-decoration:underline;text-underline-offset:5px}.nav-catalog{display:flex;align-items:center;gap:9px}.nav-catalog .bopoli-icon{width:34px;height:34px}
main{max-width:1440px;margin:auto}.home-stage{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(0,1.4fr);align-items:center;gap:44px;padding:38px 48px 40px}.welcome{padding:10px 0 22px}.welcome-tag{display:inline-block;background:var(--bop-yellow);border:1.5px solid var(--bop-line);border-radius:8px 13px 8px 12px;padding:9px 15px;font:16px var(--bop-hand);transform:rotate(-3deg);margin:0 0 20px}h1{font:clamp(64px,6.8vw,98px)/.98 var(--bop-hand);letter-spacing:-3px;margin:10px 0 24px}h1 span{color:#8762ac}.intro{font:15px/1.75 var(--bop-ui);max-width:365px;color:var(--bop-muted);margin:0 0 26px}.last-city{display:flex;align-items:center;gap:13px;margin:0 0 22px}.last-city>.bopoli-icon{width:47px;height:47px;transform:rotate(-6deg);background:var(--bop-peach);padding:4px;border:1.5px solid var(--bop-line);border-radius:12px}.last-city>div{display:grid;gap:4px;min-width:0}.last-city small{font:600 9px var(--bop-ui);letter-spacing:1.2px;color:var(--bop-muted)}.last-city strong{font:24px/1.1 var(--bop-hand);overflow-wrap:anywhere}.last-city #last-details{font:11px var(--bop-ui);color:var(--bop-muted)}.play-button{width:min(100%,375px);justify-content:space-between;font-size:27px;padding:17px 24px;transform:rotate(-1deg);box-shadow:4px 5px 0 var(--bop-line)}.play-button:hover{transform:rotate(1deg) translateY(-3px)}.play-button>span:last-child{font-size:32px}.secondary-actions{display:flex;gap:14px;margin-top:19px}.secondary-actions .bopoli-button{font-size:17px;padding:10px 14px}.browser-note{font-size:10px;color:var(--bop-muted);margin:22px 0 0}
.town-stage{min-width:0;position:relative;padding-top:10px}.town-top{display:flex;align-items:center;justify-content:space-between;margin:0 13px 15px;gap:12px}.town-label{font:29px var(--bop-hand);margin:0;transform:rotate(-2deg)}.town-tag{font:15px var(--bop-hand);background:var(--bop-peach);border:1.5px solid var(--bop-line);box-shadow:2px 3px 0 var(--bop-line);border-radius:11px 16px 10px 13px;padding:9px 14px;transform:rotate(6deg)}.district-picks{display:flex;gap:8px;padding:0 10px;position:relative;z-index:2;margin-bottom:-2px}.district-picks button{flex:1;border:1.5px solid var(--bop-line);border-radius:12px 12px 0 0;background:#e5d8f6;padding:12px 6px;font:16px var(--bop-hand);transition:transform .15s}.district-picks button[aria-pressed=true]{background:var(--bop-mint);transform:translateY(-5px);padding-bottom:17px;margin-bottom:-5px}.town-viewport{position:relative;isolation:isolate;height:390px;background:#e1ebd8;border:2px solid var(--bop-line);border-radius:20px 15px 0 0;overflow:hidden}.town-viewport canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}.town-viewport canvas:active{cursor:grabbing}.town-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-1}.town-ready .town-fallback{visibility:hidden}#town-loading{position:absolute;inset:45% 0 auto;text-align:center;font:18px var(--bop-hand);pointer-events:none}.district-label{position:absolute;bottom:15px;left:18px;display:flex;gap:9px;align-items:center;font:12px var(--bop-hand);pointer-events:none}.district-label>span{font:9px var(--bop-ui);color:var(--bop-muted)}.district-label strong{font-weight:400}.town-controls{border:2px solid var(--bop-line);border-top:0;background:var(--bop-paper);display:flex;align-items:center;gap:16px;padding:15px 18px;border-radius:0 0 19px 14px;box-shadow:4px 5px 0 var(--bop-line)}.town-controls label{display:flex;align-items:center;gap:10px;font:15px var(--bop-hand);margin-right:auto}.town-controls select{font:15px var(--bop-hand);border:1px solid #ab94ba;border-radius:9px;background:#f4edff;padding:9px;max-width:145px}.town-controls button{background:none;border:0;font:16px var(--bop-hand);padding:10px 0}.town-controls button:hover{color:#8762ac}.town-controls button span{font-size:23px}.preview-note{font:10px/1.5 var(--bop-ui);color:var(--bop-muted);text-align:center;margin:14px 0 0}#building-label{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);background:var(--bop-paper);border:1.5px solid var(--bop-line);border-radius:9px;padding:8px 12px;font:15px var(--bop-hand);pointer-events:none;max-width:95%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.home-workbench{display:flex;align-items:stretch;gap:12px;margin:10px 48px 40px;padding:15px;background:var(--bop-paper);border:2px solid var(--bop-line);border-radius:25px 19px 22px 18px;box-shadow:5px 6px 0 var(--bop-line)}.workbench-title{padding:8px 20px 8px 8px;min-width:190px}.workbench-title strong{display:block;font:29px/1 var(--bop-hand)}.workbench-title>span{display:block;margin-top:10px;font:10px var(--bop-ui);color:var(--bop-muted)}.home-workbench>a{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:7px;font:17px var(--bop-hand);text-align:center;padding:9px 7px;border-radius:14px;transition:transform .15s}.home-workbench>a:hover{background:#eee3fc;transform:translateY(-3px) rotate(-2deg)}.home-workbench .bopoli-icon{width:48px;height:48px;padding:5px;border-radius:13px;background:#e5d9fa}.home-workbench>a:nth-of-type(2) .bopoli-icon{background:var(--bop-sky)}.home-workbench>a:nth-of-type(3) .bopoli-icon{background:var(--bop-mint)}.home-workbench>a:nth-of-type(4) .bopoli-icon{background:var(--bop-peach)}.home-workbench>a:nth-of-type(5) .bopoli-icon{background:var(--bop-yellow)}.home-workbench>.workbench-all{background:var(--bop-lilac);border:1.5px solid var(--bop-line);box-shadow:2px 3px 0 var(--bop-line);flex:0 0 120px;transform:rotate(2deg);font-size:18px}.workbench-all span{font-size:25px;line-height:1}
.play-your-way{margin:0 48px;padding:4px 0 35px;display:flex;align-items:center;justify-content:space-between;gap:28px}.play-your-way h2{font:31px var(--bop-hand);margin:7px 0 0}.play-your-way>p{font:13px/1.8 var(--bop-ui);color:var(--bop-muted)}.play-your-way strong{color:var(--bop-ink);font-weight:600}.play-your-way .bopoli-button{font-size:17px;transform:rotate(2deg)}footer{max-width:1440px;padding:27px 48px;margin:auto;border-top:1px solid #d0bddf;display:flex;align-items:center;gap:24px;font:11px var(--bop-ui);color:var(--bop-muted)}footer .bopoli-letters{font-size:38px;letter-spacing:-2px}footer p{font:16px var(--bop-hand);margin:0}footer>a:not(.bopoli-logo){margin-left:auto;text-decoration:underline;text-underline-offset:3px}footer small{font-size:9px}
dialog{padding:28px;max-width:min(650px,calc(100vw - 28px));max-height:90dvh;border:2px solid var(--bop-line);border-radius:22px 17px 20px 16px;box-shadow:5px 6px 0 var(--bop-line);color:var(--bop-ink);background:var(--bop-paper);overflow:auto}dialog::backdrop{background:#3b2b5066;backdrop-filter:blur(4px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:14px;font:11px var(--bop-ui);letter-spacing:1px}.dialog-top button{border:1.5px solid var(--bop-line);background:var(--bop-lilac);border-radius:10px;padding:10px;font:16px var(--bop-hand)}dialog h2{font:38px/1.1 var(--bop-hand);margin:25px 0}dialog p{font:14px/1.7 var(--bop-ui);color:var(--bop-muted)}dialog li{margin-bottom:20px;padding-left:8px}dialog li strong{font:23px var(--bop-hand)}dialog ol{padding-left:22px}dialog li p{margin:6px 0}.dialog-cta{display:inline-block;background:var(--bop-mint);border:2px solid var(--bop-line);border-radius:12px;box-shadow:3px 4px 0 var(--bop-line);padding:14px 20px;font:22px var(--bop-hand)}.dialog-note{font-size:11px!important}dialog table{border-collapse:collapse;width:100%;font:14px var(--bop-ui);margin:25px 0}dialog td,dialog th{padding:14px 6px;border-bottom:1px solid #d0bddf;text-align:left}dialog th{font-weight:600}
@media(min-width:1550px){.home-stage{padding-top:52px;padding-bottom:48px}.town-viewport{height:430px}}
@media(max-width:1100px){.home-header{padding:25px 28px}.header-motto{display:none}.home-stage{padding:25px 28px 30px;gap:25px;grid-template-columns:.8fr 1.2fr}h1{font-size:74px}.intro{font-size:13px}.secondary-actions{gap:10px}.secondary-actions .bopoli-button{font-size:15px;padding:10px}.town-label{font-size:25px}.town-tag{font-size:12px;padding:7px 10px}.town-controls{gap:10px;padding:12px}.town-controls label{display:grid;gap:4px}.town-controls button{font-size:14px}.town-viewport{height:355px}.home-workbench{margin:8px 28px 35px;gap:6px}.workbench-title{min-width:135px;padding-right:5px}.workbench-title strong{font-size:26px}.workbench-title>span{max-width:100px;line-height:1.4}.home-workbench>a{font-size:14px}.home-workbench>.workbench-all{flex-basis:90px;font-size:16px}.play-your-way{margin:0 28px;gap:20px}.play-your-way h2{font-size:27px}.play-your-way>p{font-size:12px}footer{padding:25px 28px}}
@media(max-width:760px){.home-header{padding:22px 20px;gap:18px}.home-header .bopoli-logo{padding:8px 12px 11px}.bopoli-letters{font-size:44px;letter-spacing:-3px}.home-header nav{gap:15px;font-size:15px}.home-header nav>a:last-child,.nav-catalog .bopoli-icon{display:none}.home-stage{display:flex;flex-direction:column;align-items:stretch;padding:20px 22px 25px;gap:28px}.welcome{padding:0}.welcome-tag{font-size:14px;margin-bottom:10px}h1{font-size:clamp(65px,14vw,90px);margin:12px 0 19px;letter-spacing:-2px}h1 br{display:initial}h1 span{white-space:nowrap}.intro{font-size:14px;max-width:430px;margin-bottom:23px}.last-city{margin-bottom:22px}.play-button{max-width:440px;width:100%;font-size:25px}.secondary-actions{max-width:440px;gap:13px}.secondary-actions .bopoli-button{flex:1;font-size:17px}.browser-note{margin-top:18px}.town-top{margin:0 0 17px}.town-label{font-size:26px}.town-tag{font-size:13px}.district-picks{padding:0 7px;gap:5px}.district-picks button{font-size:13px;padding:12px 4px}.town-viewport{height:310px;border-radius:14px 13px 0 0}.town-controls{flex-wrap:wrap;gap:11px;padding:12px}.town-controls label{display:flex;font-size:14px;gap:7px}.town-controls select{font-size:14px;padding:8px;max-width:112px}.town-controls button{font-size:14px}.town-controls #turn-town{display:none}.preview-note{font-size:9px;margin-top:13px}.home-workbench{margin:10px 20px 30px;padding:13px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.workbench-title{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;min-width:0;padding:2px 3px 7px}.workbench-title strong{font-size:25px}.workbench-title br{display:none}.workbench-title>span{max-width:110px;margin:0;text-align:right}.home-workbench>a{font-size:15px;min-height:87px;gap:5px;padding:8px 3px}.home-workbench>.workbench-all{font-size:17px}.home-workbench .bopoli-icon{width:43px;height:43px}.play-your-way{margin:0 23px;display:block;padding-bottom:28px}.play-your-way h2{font-size:31px}.play-your-way>p{font-size:13px;margin:15px 0 22px}.play-your-way>p br{display:none}footer{padding:25px 22px;gap:17px;flex-wrap:wrap}footer p{display:none}footer small{width:100%;text-align:right}dialog{padding:22px}dialog h2{font-size:31px}.dialog-top{font-size:9px}dialog td,dialog th{font-size:12px;padding:12px 4px}}
@media(max-width:380px){.home-header{gap:10px;padding:18px 16px}.home-header nav{gap:11px;font-size:13px}.home-header .bopoli-letters{font-size:38px}.home-stage{padding-left:18px;padding-right:18px}.town-tag{font-size:11px;padding:6px}.town-controls{gap:7px}.town-controls label>span{display:none}}

.street-sign{position:absolute;left:19px;top:19px;max-width:calc(100% - 38px);padding:10px 16px 12px;border:2px solid var(--bop-line);border-radius:8px 12px 9px 11px;background:var(--bop-paper);box-shadow:2px 3px 0 #655573;transform:rotate(-2deg);pointer-events:none}.street-sign small{display:block;font:9px var(--bop-ui);letter-spacing:1.3px;color:var(--bop-muted);margin-bottom:5px}.street-sign strong{display:block;font:20px var(--bop-hand);font-weight:400}.preview-note{font:15px/1.5 var(--bop-hand);margin-top:17px}.bopoli-outings{margin:0 48px 48px}.outing-heading{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:20px}.outing-heading .bopoli-eyebrow{width:100%;margin:0}.outing-heading h2{font:34px/1.1 var(--bop-hand);margin:0}.outing-heading>p:last-child{font:12px/1.5 var(--bop-ui);color:var(--bop-muted);margin:0}#home-outings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.outing-card{display:flex;align-items:flex-start;gap:15px;padding:22px 18px;background:var(--bop-paper);border:1.5px solid var(--bop-line);border-radius:17px 12px 18px 13px;box-shadow:3px 4px 0 #bca5cd;transition:transform .15s,box-shadow .15s}.outing-card:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:4px 6px 0 var(--bop-line)}.outing-card>.bopoli-icon{width:44px;height:44px;padding:5px;background:var(--bop-peach);border-radius:12px;transform:rotate(-5deg)}.outing-card:nth-child(2)>.bopoli-icon{background:var(--bop-mint);transform:rotate(5deg)}.outing-card:nth-child(3)>.bopoli-icon{background:var(--bop-sky)}.outing-card>span:nth-child(2){flex:1;min-width:0;display:grid;gap:8px}.outing-card small{font:9px var(--bop-ui);letter-spacing:1.5px;color:var(--bop-muted)}.outing-card strong{font:23px/1.1 var(--bop-hand)}.outing-card>span:nth-child(2)>span{font:12px/1.7 var(--bop-ui);color:var(--bop-muted)}.outing-arrow{font:25px var(--bop-hand);align-self:center}.home-stage{padding-top:26px}.town-viewport{height:410px}
@media(max-width:1000px){.bopoli-outings{margin:0 28px 35px}#home-outings{gap:13px}.outing-card{padding:17px 13px;gap:10px}.outing-card>.bopoli-icon{width:35px;height:35px}.outing-card strong{font-size:21px}.outing-arrow{display:none}}
@media(max-width:760px){.street-sign{left:13px;top:14px;padding:8px 11px}.street-sign small{font-size:8px}.street-sign strong{font-size:16px}.town-viewport{height:350px}.preview-note{font-size:13px;text-align:left;margin-left:6px}.bopoli-outings{margin:0 22px 35px}.outing-heading{gap:10px}.outing-heading h2{font-size:30px}#home-outings{grid-template-columns:1fr;gap:15px}.outing-card{padding:17px 15px}.outing-card>.bopoli-icon{width:43px;height:43px}.outing-card strong{font-size:24px}.outing-arrow{display:block}.home-stage{padding-top:20px}}