:root{font-family:'DM Sans',system-ui,sans-serif;color:#253d39;background:#f5f3ea;font-synthesis:none;--green:#27695b;--coral:#e87961;--land:#b9d4aa}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;min-height:44px}button:disabled{cursor:default;opacity:.4}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #e18b40;outline-offset:4px}button:hover:not(:disabled){filter:brightness(.96)}main{width:100%;max-width:1320px;margin:0 auto;padding:38px 24px 0}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#668178}h1,h2,h3{font-family:Outfit,system-ui,sans-serif}h1{font-size:43px;letter-spacing:-1.5px;margin:7px 0}h1 em{font-style:normal;color:#dc775f;font-weight:500}.title-dot{display:inline-block;width:8px;height:8px;background:#e1ad49;margin-left:8px;border-radius:50%}.heading p{font-size:14px;color:#77817a;margin:8px 0}.map-button{border:1px solid #d4ddd1;background:#fdfcf6;border-radius:14px;padding:12px 18px;display:flex;align-items:center;gap:14px;font-size:20px}.map-button span{font-size:12px;font-weight:700}.map-button b{font-size:11px;color:#638274;background:#edf1e6;border-radius:8px;padding:7px}.layout{display:grid;grid-template-columns:260px minmax(360px,580px) 1fr;gap:30px;align-items:start}.district-card{padding:26px 22px;background:#eeeee2;border:1px solid #e1e3d5;border-radius:18px;margin-top:22px}.district-card h2{font-size:25px;letter-spacing:-.6px;margin:12px 0 6px}.district-card p{font-size:12px;color:#728378;line-height:1.7}.district-art{margin:18px -10px 20px;overflow:hidden;border-radius:12px;aspect-ratio:3/2}.district-art img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}.district-progress{display:flex;justify-content:space-between;font-size:11px}.district-progress b{font-weight:500;color:#7c897b}.progress-track{height:5px;background:#d9dfd0;border-radius:3px;margin-top:10px}.progress-track i{display:block;height:100%;background:#6d9680;border-radius:3px}.small{font-size:11px!important;line-height:1.8}.daily-button{display:flex;align-items:center;gap:12px;text-align:left;border-top:1px solid #d6ddce;padding:20px 0 8px;width:100%;margin-top:25px}.daily-button .sun{font-size:32px;color:#c18b3e}.daily-button b{display:block;font-size:13px}.daily-button small{font-size:11px;display:block;margin-top:5px;color:#7b8778}.text-button{font-size:13px;color:#5e7666;width:100%;text-align:left}.play-card{background:#fffef9;border:1px solid #e1e4d9;border-radius:24px;box-shadow:0 12px 40px #3c50310b;padding:22px 26px 17px;overflow:hidden}.level-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;letter-spacing:1px}.level-heading>span:last-child{font-size:10px;color:#7a8676;text-align:right}.live-dot{display:inline-block;width:6px;height:6px;background:#599b75;border-radius:50%;margin-right:5px}.scoreboard{display:flex;align-items:center;margin:22px 0 2px;gap:28px}.scoreboard div{padding-right:25px;border-right:1px solid #e9eadf}.scoreboard small{font-size:11px;letter-spacing:1.4px;display:block;color:#83907e}.scoreboard b{font-family:Outfit,sans-serif;font-weight:500;font-size:29px;display:block;margin-top:3px}.score-stars{margin-left:auto;color:#d7aa57;font-size:23px;white-space:nowrap}.city{position:relative;padding:64px 35px 56px 23px;isolation:isolate;--land:#b9d4aa}.city:before{content:'';position:absolute;inset:37px 0 24px;background:var(--land);border-radius:35% 22% 25% 15%;z-index:-2;box-shadow:inset 0 -8px 0 #517a3a15;transition:background 1s}.lot-rim{--rim:9px;position:relative;padding:var(--rim);background:#d8d8c8;border-radius:10px;box-shadow:0 10px 0 #94a083,0 15px 17px #344c3540;z-index:2}.board{width:100%;aspect-ratio:1;position:relative;border:3px solid #eee9d7;border-radius:5px;background-color:#687773;background-image:linear-gradient(90deg,#f1eddb13 1px,transparent 1px),linear-gradient(#f1eddb13 1px,transparent 1px);background-size:16.6667% 16.6667%;touch-action:none;box-shadow:inset 0 2px 10px #263a3d40}.board:before{content:'';position:absolute;inset:35% 0 auto;height:13%;background:repeating-linear-gradient(90deg,transparent 0 12px,#eeeac536 12px 25px) center/100% 2px no-repeat;pointer-events:none}.vehicle{position:absolute;padding:4px;border:0;min-height:0;z-index:3;touch-action:none;transition:left .18s ease,top .18s ease;cursor:grab;outline-offset:-2px!important}.vehicle.dragging{transition:none;z-index:9;cursor:grabbing}.vehicle .car-body{position:relative;display:block;width:100%;height:100%;border-radius:23% / 30%;background:linear-gradient(180deg,#ffffff38,transparent 45%,#00000020),var(--paint);border:1px solid #263e3b55;box-shadow:0 4px 0 color-mix(in srgb,var(--paint) 65%,#172f2d),0 7px 5px #172f2d66,inset 0 2px 1px #ffffffa0;pointer-events:none}.car-body:before{content:'';position:absolute;inset:18% 26%;background:linear-gradient(90deg,#163e4e 0 16%,var(--paint) 17% 79%,#163e4e 80%);border:1px solid #ffffff50;border-radius:25%;box-shadow:0 2px 2px #25333344}.car-body:after{content:'';position:absolute;right:4%;top:15%;height:70%;width:4%;border-top:5px solid #fff3ba;border-bottom:5px solid #fff3ba;filter:drop-shadow(0 0 2px #fff8b4)}.vehicle.vertical .car-body{border-radius:30% / 20%;background:linear-gradient(90deg,#ffffff38,transparent 45%,#00000020),var(--paint)}.vertical .car-body:before{inset:26% 18%;background:linear-gradient(#163e4e 0 16%,var(--paint) 17% 79%,#163e4e 80%)}.vertical .car-body:after{right:15%;top:4%;width:70%;height:4%;border:0;border-left:5px solid #fff3ba;border-right:5px solid #fff3ba}.bus .car-body:before{inset:15% 15%;background:repeating-linear-gradient(90deg,#214452 0 12%,var(--paint) 12% 21%);border-radius:12%}.bus.vertical .car-body:before{background:repeating-linear-gradient(#214452 0 12%,var(--paint) 12% 21%)}.van .car-body:before{inset:16% 25%;border-radius:10%}.car-body .star{position:absolute;inset:0;display:grid;place-items:center;color:#fff9df;text-shadow:0 2px #bd4935;font-size:clamp(14px,2vw,23px)}.vehicle.selected .car-body{outline:3px solid #fff2af;outline-offset:2px}.vehicle.hinted .car-body{animation:hintPulse .8s infinite alternate}.vehicle .hint-arrow{position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:32px;text-shadow:0 2px 4px #000;z-index:2}.destination{position:absolute;min-height:0;background:#fff4b330;border:1px dashed #fff8ca;border-radius:8px;z-index:2;color:#fffbe3;font-size:18px}.exit-road{position:absolute;left:calc(100% - 4px);top:calc(var(--rim) + 3px + (100% - 2*var(--rim) - 6px)*2/6);height:calc((100% - 2*var(--rim) - 6px)/6);width:72px;background:#687773;border-block:5px solid #d9d8c8;z-index:1;display:grid;place-items:center}.exit-road span{font-size:9px;color:#ffefd0;font-weight:bold;letter-spacing:1px;transform:translateX(6px)}.barrier{position:absolute;left:17px;top:0;width:6px;height:100%;background:repeating-linear-gradient(0deg,#f8f3d9 0 7px,#e77b65 7px 14px);transform-origin:top;transition:transform .5s;box-shadow:2px 2px 3px #263e3b50}.escaping .barrier{transform:rotate(-90deg)}.escaping .vehicle.target{left:115%!important;transition:left 1s ease-in!important;z-index:8}.escaping .vehicle.target .car-body{filter:drop-shadow(8px 0 7px #fff8bb)}.town{position:absolute;top:5px;left:30px;right:25px;height:70px;z-index:3;pointer-events:none}.house{position:absolute;bottom:5px;width:44px;height:43px;background:#e9c49a;box-shadow:5px 5px 0 #af96716b;border:2px solid #f1d7b1;border-radius:3px}.house:before{content:'';position:absolute;top:-15px;left:-4px;right:-4px;height:20px;background:#69988b;clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}.house:after{content:'';position:absolute;inset:11px 8px;background:repeating-linear-gradient(90deg,#648b87 0 7px,transparent 7px 16px);border-top:3px solid #f7dcbc}.house-one{left:8%;transform:rotate(-4deg)}.house-two{left:44%;height:54px;background:#d4b6a4}.house-two:before{background:#c7816d}.house-three{left:64%;width:40px;background:#e4d8b4}.tree{display:inline-block;position:relative;width:31px;height:38px;background:radial-gradient(circle at 30% 25%,#a6c783,#75a465 70%);border-radius:48%;box-shadow:4px 5px 0 #52794655;vertical-align:middle}.tree:after{content:'';position:absolute;bottom:-9px;left:45%;height:12px;width:5px;background:#897858;z-index:-1}.tree-one{position:absolute;left:27%;bottom:5px}.tree-two{position:absolute;right:0;bottom:7px}.parking-sign{position:absolute;left:-6px;bottom:0;background:#477f9c;color:white;padding:4px 7px;border-radius:4px;border:2px solid #eee7d0;font:bold 15px Outfit}.lamp{position:absolute;right:18%;bottom:-8px;width:3px;height:37px;background:#68796c}.lamp:before{content:'';position:absolute;width:13px;height:6px;left:-5px;top:-2px;background:#fff6cb;border-radius:50%;box-shadow:0 0 10px #fff7ac}.garden{display:flex;align-items:center;gap:20px;position:absolute;bottom:7px;left:38px;right:12px}.garden .tree{width:24px;height:26px}.bench{width:40px;height:12px;background:repeating-linear-gradient(#ad8960 0 3px,#e5c795 3px 5px);transform:rotate(-6deg);box-shadow:0 4px 0 #7a7560}.cone{color:#d58d53;text-shadow:0 3px #f8e6c4;transform:rotate(10deg)}.street-label{font-size:7px;letter-spacing:1.5px;color:#768672;margin-left:auto}.cloud{position:absolute;top:18%;left:10%;width:55px;height:17px;background:#ffffed50;border-radius:50%;filter:blur(5px);z-index:1;pointer-events:none;animation:cloud 25s linear infinite}.guidance{display:flex;gap:10px;align-items:center;justify-content:center;min-height:48px}.guidance p{font-size:13px;line-height:1.5;color:#6b7e6f;text-align:center;margin:5px}.guidance-icon{color:#b39152;font-size:23px}.tools{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #e9ecdf;padding-top:10px;gap:7px}.tools button{font-size:12px;border-radius:11px;padding:7px}.tools button span{display:block;font-size:25px;line-height:30px;font-weight:400}.tools #hint{background:#f7edcc;color:#86703a}.right-note{padding:58px 5px 0 8px}.right-note h2{font-size:27px;font-weight:500;line-height:1.25;letter-spacing:-.7px;margin-top:15px}.right-note p{font-size:12px;line-height:1.9;color:#859080;max-width:190px}.mini-car{margin:35px 0 35px 24px;background:#e67e66;width:95px;height:43px;border-radius:14px;box-shadow:0 5px #bc604f,3px 10px 0 #dfdfcb;transform:rotate(-13deg);text-align:center;padding:10px;color:#fff9df}.note-line{display:block;width:36px;height:2px;background:#d7ddcb}.keyboard-tip{display:block;font-size:10px;letter-spacing:1.6px;color:#a0a58f;margin-top:30px}footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#969d8a;margin:30px 0 20px}footer nav{display:flex;gap:18px}dialog{border:1px solid #e0e5d4;border-radius:24px;background:#fffdf5;color:#294239;max-width:min(650px,94vw);width:540px;padding:35px;max-height:90dvh;box-shadow:0 30px 100px #172f2d30}dialog::backdrop{background:#1e39396b;backdrop-filter:blur(6px)}.close{position:sticky;top:0;float:right;margin:-22px -12px 0 0;font-size:25px;width:44px;border-radius:50%;background:#fffdf5;z-index:1}.dialog-kicker{letter-spacing:2px;font-size:10px;color:#778b72}dialog h2{font-size:32px;margin:10px 0}dialog p{line-height:1.6;font-size:14px;color:#7a8877}.primary{background:#2d7160;color:white;border-radius:12px;padding:14px 24px;font-weight:700}.secondary{border:1px solid #c9d5c3;border-radius:12px;padding:12px 18px}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}.result{text-align:center}.result-car{font-size:58px;margin:15px}.result-stars{font-size:43px;color:#d3a142;letter-spacing:10px}.result strong{color:#2b775d}.map-world{padding:16px 0;border-top:1px solid #e2e8d9}.map-world h3{font-size:19px;margin:6px 0}.map-world p{font-size:11px;margin:4px 0 10px}.map-nodes{display:flex;flex-wrap:wrap;gap:8px;padding:9px;border-radius:18px;background:repeating-linear-gradient(0deg,#e6eadd 0 27px,#faf9ef 27px 30px,#e6eadd 30px 57px)}.map-nodes button{width:44px;height:49px;border-radius:50% 50% 40% 40%;background:#fffdf4;border:2px solid #c1cfb6;font-size:12px;box-shadow:0 3px #a6b798}.map-nodes button:nth-child(3n){transform:translateY(6px)}.map-nodes button small{display:block;font-size:9px;color:#b68a39}.map-nodes button.done{background:#d7e6c7}.map-nodes button.current{border-color:#de8867}.badge{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #e5e7d9;font-size:13px}.badge.locked{color:#90978a}.badge small{display:block;margin-top:5px;font-size:11px}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0}.setting-row button{border:1px solid #c3d0bc;border-radius:10px;padding:0 20px}.storage-warning{color:#a45e34!important}.shake{animation:shake .2s}@keyframes hintPulse{to{filter:brightness(1.22);outline:3px solid #fff3af}}@keyframes shake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}@keyframes cloud{to{transform:translateX(230px);opacity:0}}@media(min-width:1400px){.layout{gap:38px}}@media(max-width:1120px){.layout{grid-template-columns:220px minmax(340px,560px);justify-content:center}.right-note{display:none}.heading{max-width:815px;margin-inline:auto}.district-card{padding:23px 17px}}@media(max-width:720px){main{padding:20px 13px 0}.heading{margin-bottom:16px;gap:8px}.eyebrow{font-size:10px;letter-spacing:1.4px}h1{font-size:29px;letter-spacing:-1px}.heading p{font-size:11px}.map-button{padding:8px 10px;border-radius:12px;gap:5px;display:flex;flex-direction:column;font-size:15px}.map-button span{font-size:11px}.map-button b{display:none}.layout{display:flex;flex-direction:column;gap:15px;align-items:stretch}.play-card{order:0;padding:18px 15px 12px;border-radius:20px;max-width:540px;width:100%;margin:auto}.district-card{order:1;margin:0 auto;padding:16px 18px;max-width:540px;width:100%;display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.district-card>.eyebrow,.district-card>p,.district-art,.district-progress,.progress-track{display:none}.district-card h2{font-size:18px;margin:6px 0}.daily-button{padding:0;margin:0;border:0;grid-column:2;grid-row:1/3}.daily-button .sun{font-size:25px}.daily-button b{font-size:12px}.daily-button small{font-size:11px}.text-button{min-height:40px;font-size:12px}.scoreboard{gap:18px;margin-top:17px}.scoreboard div{padding-right:18px}.scoreboard b{font-size:26px}.score-stars{font-size:19px}.city{padding:58px 29px 48px 13px}.exit-road{width:67px}.lot-rim{--rim:7px}.town{left:20px;right:22px;top:0}.garden{left:23px;gap:15px;bottom:3px}.street-label{font-size:6px}.guidance p{font-size:13px}.tools button{min-height:52px}footer{font-size:11px;gap:12px;align-items:center}footer nav{gap:10px}.vehicle{padding:3px}.car-body .star{font-size:16px}.vehicle .car-body{box-shadow:0 3px 0 color-mix(in srgb,var(--paint) 65%,#172f2d),0 5px 4px #172f2d66,inset 0 2px 1px #ffffffa0}dialog{padding:30px 21px}.level-heading>span:last-child{font-size:10px;letter-spacing:.5px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.cloud{display:none}}

/* Long titles do not fit beside the icon buttons on phones; the page h1 names the game. */
@media (max-width:420px) { .ppgh-game-copy { display: none; } }

/* Laptops: size the lot to the window height so the whole play card fits on screen. */
@media (min-width:721px) {
  .city { max-width: max(300px, calc(100dvh - 400px)); margin-inline: auto; }
}
@media (min-width:721px) and (max-height:900px) {
  main { padding-top: 20px; }
  .heading { margin-bottom: 14px; }
  h1 { font-size: 36px; }
  .district-card { margin-top: 0; }
  .right-note { padding-top: 20px; }
}

/* Landscape phones: board on the left, score and tools on the right, all on one screen. */
@media (max-height:500px) and (orientation:landscape) {
  .ppgh { position: relative; }
  main { max-width: none; padding: 10px max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
  .heading { margin: 0 0 10px; align-items: center; }
  .heading .eyebrow, .heading p { display: none; }
  .heading h1 { font-size: 22px; margin: 0; }
  .map-button { flex-direction: row; padding: 6px 12px; gap: 8px; font-size: 15px; }
  .map-button span { font-size: 12px; }
  .layout { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
  .right-note { display: none; }
  .play-card { order: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "city head" "city score" "city guide" "city tools"; align-content: center; column-gap: 16px; padding: 12px 18px; max-width: none; margin: 0; }
  .level-heading { grid-area: head; align-self: end; }
  .scoreboard { grid-area: score; margin: 10px 0 0; gap: 14px; }
  .scoreboard div { padding-right: 14px; }
  .scoreboard b { font-size: 22px; }
  .guidance { grid-area: guide; }
  .tools { grid-area: tools; align-self: start; }
  .city { grid-area: city; width: calc(100dvh - 12px); max-width: none; margin: 0; padding: 10px 52px 22px 10px; }
  .exit-road { width: 56px; }
  .city:before { inset: 0 0 6px; }
  .town, .garden, .cloud { display: none; }
  .district-card { order: 1; margin: 0; max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; padding: 14px 18px; }
  .district-card > .eyebrow, .district-card > p, .district-art, .district-progress, .progress-track { display: none; }
  .district-card h2 { font-size: 18px; margin: 6px 0; }
  .daily-button { padding: 0; margin: 0; border: 0; grid-column: 2; grid-row: 1 / 3; }
}