*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{font-family:var(--pp-font);color:var(--pp-ink);background:var(--pp-canvas);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;color:inherit}a{color:inherit;text-underline-offset:3px}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--pp-focus);outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:absolute;left:16px;top:-60px;z-index:60;background:white;padding:10px 15px;border-radius:6px}.skip:focus{top:8px}svg.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.topbar{height:var(--pp-header);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 25px;background:var(--pp-surface);border-bottom:1px solid var(--pp-line);position:relative;z-index:20}.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:750;font-size:21px;letter-spacing:-.65px;width:fit-content}.brand-mark{width:23px;height:28px;fill:none;stroke:var(--pp-primary);stroke-width:1.9;stroke-linejoin:round}.brand-mark circle{fill:var(--pp-primary);stroke:none}.mode{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.2px;color:var(--pp-muted);border-left:1px solid var(--pp-line);padding-left:14px;margin-left:7px;font-weight:500}.progress{display:flex;align-items:center;gap:22px;line-height:1.2}.round-label{font-size:10px;font-weight:650;color:var(--pp-muted);letter-spacing:1px;text-transform:uppercase}.round-value{font-size:14px;font-weight:650;margin-left:7px;color:var(--pp-ink);letter-spacing:0}.round-dots{display:flex;gap:4px;margin-top:6px}.round-dots i{display:block;width:19px;height:3px;border-radius:3px;background:#E4E8EF}.round-dots i:first-child{background:var(--pp-primary)}.score-top{border-left:1px solid var(--pp-line);padding-left:22px;font-variant-numeric:tabular-nums}.score-top strong{display:block;font-size:15px;font-weight:650;text-align:center;margin-top:4px}.nav-controls{justify-self:end;display:flex;align-items:center;gap:7px}.icon-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border:0;background:transparent;border-radius:8px;transition:background var(--pp-motion-fast) ease}.icon-button:hover{background:#EEF1F6}.nav-controls .icon-button{width:39px;height:40px;color:#536074}.nav-divider{height:19px;width:1px;background:var(--pp-line);margin:0 5px}.game{position:relative;height:calc(100dvh - var(--pp-header));isolation:isolate;overflow:hidden;background:#E4E9EC}.panorama{position:absolute;inset:0;z-index:0;background:#E4E9EC}.panorama:focus-visible{outline:3px solid white;outline-offset:-6px}.pnlm-container{background:#E4E9EC}.pnlm-about-msg,.pnlm-author-box{display:none!important}.pnlm-load-box{background:#FFFFFFE6;color:var(--pp-ink);border-radius:9px;box-shadow:var(--pp-shadow)}.pnlm-lbox{border-radius:9px}.pnlm-grab{cursor:grab}.pnlm-grabbing{cursor:grabbing}.loading-state{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:#E6EBEE;color:var(--pp-muted)}.loading-inner{text-align:center;max-width:350px;padding:24px}.loading-inner svg{width:28px;height:28px;margin-bottom:11px;color:#7D8998}.loading-inner h1{font-size:17px;font-weight:600;margin:0 0 8px}.loading-inner p{font-size:12px;line-height:1.7;margin:0}.loading-inner button{margin-top:17px}.intro-hint{position:absolute;left:50%;top:18px;transform:translateX(-50%);background:var(--pp-overlay);color:white;border:1px solid #FFFFFF1C;border-radius:7px;padding:8px 10px 8px 13px;display:flex;align-items:center;gap:10px;font-size:11px;z-index:4;box-shadow:0 2px 8px #121A2A12}.intro-hint .icon{width:16px;height:16px}.intro-hint button{background:transparent;color:#DCE3EF;border:0;border-left:1px solid #FFFFFF30;padding:2px 2px 2px 10px;display:flex;align-items:center;justify-content:center;min-height:25px}.intro-hint button svg{width:13px;height:13px}.view-controls{position:absolute;left:22px;bottom:69px;display:flex;flex-direction:column;gap:10px;z-index:4}.control-stack{background:var(--pp-photo-control);border:1px solid #D6DDE4;border-radius:9px;box-shadow:0 2px 10px #1924391C;overflow:hidden}.control-stack .icon-button{display:flex;width:44px;height:43px;border-radius:0}.control-stack .icon-button+button{border-top:1px solid var(--pp-line)}.view-controls>.icon-button{background:var(--pp-photo-control);border:1px solid #D6DDE4;box-shadow:0 2px 10px #1924391C;border-radius:9px}.view-direction{position:absolute;left:22px;top:19px;display:flex;align-items:center;gap:8px;background:var(--pp-photo-control);border:1px solid #D6DDE4;padding:8px 11px;border-radius:7px;font-size:11px;font-variant-numeric:tabular-nums;z-index:4;box-shadow:0 2px 8px #121A2A10}.view-direction svg{width:16px;height:16px;transition:transform 80ms linear}.view-direction small{font-size:8px;letter-spacing:.3px;color:var(--pp-muted);text-transform:uppercase;margin-left:3px}.credit{position:absolute;left:20px;bottom:19px;z-index:4;color:white;background:var(--pp-overlay);padding:7px 10px;border-radius:5px;font-size:10px;line-height:1.6;max-width:calc(100% - 426px)}.credit a{text-decoration-color:#FFFFFF8A}.credit span{color:#C4CDDD}.reference-label{display:inline-flex;align-items:center;gap:6px;color:#5C667A;font-size:10px}.reference-label:before{content:'';width:5px;height:5px;border-radius:50%;background:#A1ABBE}.map-panel{position:absolute;right:22px;bottom:20px;width:362px;z-index:8;border:1px solid #D6DCE5;border-radius:var(--pp-radius-lg);background:var(--pp-surface);box-shadow:var(--pp-shadow);overflow:hidden;transition:width var(--pp-motion-panel) var(--pp-ease),transform var(--pp-motion-panel) var(--pp-ease)}.map-panel.expanded{width:min(560px,calc(100% - 105px))}.map-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 11px 17px;border-bottom:1px solid var(--pp-line)}.map-panel-header h2{font-size:13px;font-weight:650;margin:0}.map-panel-header p{font-size:10px;color:var(--pp-muted);margin:1px 0 0}.panel-header-buttons{display:flex;gap:2px}.panel-header-buttons .icon-button{width:34px;height:34px;border-radius:6px;color:#626D80}.panel-header-buttons svg{width:17px;height:17px}.phone-close{display:none}.map-wrap{position:relative;height:205px;background:#DDE8EF;overflow:hidden;transition:height var(--pp-motion-panel) var(--pp-ease);touch-action:none}.expanded .map-wrap{height:300px}.world-map{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.world-map:focus-visible{outline-offset:-4px}.map-wrap.dragging .world-map{cursor:grabbing}.map-zoom{position:absolute;left:10px;top:10px;background:white;border:1px solid #C9D4DD;border-radius:6px;overflow:hidden;box-shadow:0 1px 4px #122E4710}.map-zoom button{width:36px;height:36px;border:0;background:white;display:flex;align-items:center;justify-content:center}.map-zoom button+button{border-top:1px solid var(--pp-line)}.map-zoom button:hover{background:#EEF2F7}.map-zoom svg{width:17px;height:17px}.map-caption{position:absolute;bottom:5px;right:7px;padding:2px 4px;color:#587185;background:#EDF5FBEA;font-size:8px;border-radius:2px;pointer-events:none}.draft-marker{position:absolute;display:block;left:50%;top:50%;width:23px;height:31px;transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(0 2px 2px #182A3E36)}.draft-marker svg{width:100%;height:100%}.map-crosshair{position:absolute;top:50%;left:50%;width:10px;height:10px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #668092;box-shadow:0 0 0 3px #FFFFFFA6;pointer-events:none}.map-footer{padding:13px 15px 14px}.pin-status{display:flex;align-items:center;gap:7px;min-height:19px;font-size:11px;color:var(--pp-muted);margin:0 0 11px;font-variant-numeric:tabular-nums}.pin-status .icon{width:14px;height:14px;color:#72829B}.pin-status.selected{color:var(--pp-ink)}.pin-status.selected .icon{color:var(--pp-guess)}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--pp-primary);background:var(--pp-primary);color:white;min-height:44px;padding:10px 17px;border-radius:7px;font-size:12px;font-weight:600;transition:background var(--pp-motion-fast) ease}.primary-button:hover{background:var(--pp-primary-hover)}.primary-button:disabled{background:#E9EDF4;border-color:#E9EDF4;color:#788499}.primary-button .icon{width:17px;height:17px}.confirm-button{width:100%}.map-keyboard{font-size:9px;color:#788297;margin:8px 0 0;text-align:center;line-height:1.4}.map-keyboard kbd{font:inherit;color:#5C667A}.map-panel .reference-label{margin-top:9px;width:100%;justify-content:center;font-size:8px}.mobile-map-button{display:none}.result{padding:17px 17px 0;border-top:1px solid var(--pp-line);animation:result-in var(--pp-motion-result) ease both}.result .eyebrow{font-size:9px;font-weight:650;letter-spacing:1px;text-transform:uppercase;color:var(--pp-muted);display:flex;align-items:center;gap:6px}.result .eyebrow .icon{width:13px;height:13px;color:var(--pp-success)}.result h3{font-size:23px;font-weight:650;letter-spacing:-.5px;margin:5px 0 8px}.result-stats{display:flex;gap:22px;padding:12px 0;border-block:1px solid #E8ECF2;margin:13px 0}.result-stats .stat{flex:1}.result-stats .stat span{font-size:10px;color:var(--pp-muted);display:block}.result-stats .stat strong{font-size:20px;font-weight:600;letter-spacing:-.4px;font-variant-numeric:tabular-nums}.result-stats .stat+div{border-left:1px solid var(--pp-line);padding-left:22px}.result-note{font-size:11px;line-height:1.65;color:var(--pp-muted);margin:0}.result-note b{font-weight:600;color:var(--pp-ink)}.result-credit{margin:9px 0 0;font-size:9px;color:#768095}.result-credit a{color:#5C667A}.map-panel.revealed .map-wrap{height:190px}.map-panel.revealed.expanded .map-wrap{height:250px}.map-panel.revealed .map-panel-header p{display:none}.map-panel.revealed .map-footer{padding-top:13px}.map-panel.revealed .pin-status{font-size:10px;margin-bottom:10px}.map-panel.revealed .world-map{cursor:grab}.map-panel.revealed .map-crosshair{display:none}.drawer-backdrop{display:none}.dialog{border:1px solid #D6DCE6;border-radius:13px;background:white;color:var(--pp-ink);width:min(450px,calc(100% - 32px));padding:25px;box-shadow:0 20px 80px #111A3740}.dialog::backdrop{background:#14203870}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}.dialog h2{font-size:20px;font-weight:650;letter-spacing:-.4px;margin:0}.dialog-header .icon-button{width:34px;height:34px;margin:-7px -7px -7px 0}.dialog p{font-size:12px;line-height:1.8;color:var(--pp-muted);margin:10px 0}.dialog ol{padding-left:22px;font-size:12px;color:var(--pp-muted);line-height:1.7}.dialog li{padding-left:3px;margin:11px 0}.dialog li b{display:block;color:var(--pp-ink);font-size:13px;font-weight:600}.dialog .primary-button{width:100%;margin-top:12px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--pp-line);font-size:12px}.setting-row b{display:block;font-size:13px;font-weight:600}.setting-row small{display:block;color:var(--pp-muted);font-size:11px;margin-top:3px}.setting-row input{accent-color:var(--pp-primary);width:20px;height:20px}.subtle-button{border:1px solid var(--pp-line);background:white;padding:10px 15px;border-radius:7px;min-height:44px;font-size:12px;font-weight:600}.subtle-button:hover{background:#F1F4F8}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.dialog-actions .primary-button{width:auto;margin:0}.toast{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:40;background:var(--pp-overlay);border:1px solid #FFFFFF1F;color:white;max-width:min(370px,calc(100% - 32px));padding:10px 14px;border-radius:7px;font-size:11px;text-align:center;pointer-events:none}.not-supported{margin-top:12px}.reduced-motion *,.reduced-motion *:before,.reduced-motion *:after{animation:none!important;transition:none!important}@keyframes result-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:1050px){.topbar{padding:0 19px}.mode{display:none}.map-panel{right:17px;bottom:17px;width:330px}.map-wrap{height:190px}.view-controls{left:18px}.view-direction{left:18px}.credit{left:17px;max-width:calc(100% - 389px);font-size:9px}.intro-hint{font-size:10px;padding:7px 8px 7px 11px}.map-panel.expanded{width:min(500px,calc(100% - 90px))}.expanded .map-wrap{height:275px}.map-panel.revealed .map-wrap{height:150px}}
@media(max-width:680px){.topbar{height:var(--pp-header);padding:0 13px;gap:12px;grid-template-columns:1fr auto auto}.brand{font-size:19px;gap:6px;letter-spacing:-.5px}.brand-mark{width:20px;height:25px}.progress{gap:0}.round-label{font-size:9px;letter-spacing:.5px}.round-value{font-size:12px;margin-left:5px}.round-dots{gap:3px;margin-top:5px}.round-dots i{width:12px;height:2px}.score-top{display:none}.nav-controls{gap:1px}.nav-controls .icon-button{width:32px;height:36px}.nav-controls .icon-button svg{width:18px;height:18px}.nav-controls #settings-button,.nav-divider{display:none}.game{height:calc(100dvh - var(--pp-header))}.intro-hint{top:66px;font-size:10px;max-width:calc(100% - 36px);width:max-content;gap:8px}.view-direction{left:14px;top:14px;padding:7px 9px;font-size:10px;gap:6px}.view-direction small{display:none}.view-direction svg{width:15px;height:15px}.view-controls{left:14px;bottom:134px;gap:8px}.view-controls>.icon-button,.control-stack .icon-button{width:42px;height:42px}.credit{left:14px;bottom:88px;max-width:calc(100% - 28px);font-size:9px;padding:6px 9px}.credit .credit-detail{display:none}.mobile-map-button{position:absolute;display:flex;align-items:center;justify-content:space-between;left:14px;right:14px;bottom:calc(17px + env(safe-area-inset-bottom));z-index:8;min-height:53px;background:white;border:1px solid #D2D9E3;border-radius:10px;box-shadow:var(--pp-shadow);padding:10px 15px;text-align:left}.mobile-map-button .mobile-map-main{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:650}.mobile-map-main .icon{color:var(--pp-primary)}.mobile-map-button .mobile-map-sub{display:block;font-size:10px;font-weight:400;color:var(--pp-muted);margin-top:1px}.mobile-map-button>.icon{width:17px;height:17px;color:#66738A}.drawer-backdrop.show{display:block;position:absolute;inset:0;background:#0B14253D;z-index:9}.map-panel,.map-panel.expanded{position:absolute;left:0;right:0;bottom:0;width:100%;max-height:calc(100% - 66px);border-width:1px 0 0;border-radius:16px 16px 0 0;z-index:12;box-shadow:0 -9px 35px #101E3A29;transform:translateY(105%);visibility:hidden;display:flex;flex-direction:column;transition:transform var(--pp-motion-panel) var(--pp-ease),visibility 0s linear var(--pp-motion-panel)}/* Opening visibility is immediate so synchronous heading focus works; closing hides after the slide. */.map-panel.open{transform:translateY(0);visibility:visible;transition:transform var(--pp-motion-panel) var(--pp-ease)}.map-panel-header{padding:14px 14px 12px 18px;flex-shrink:0}.map-panel-header h2{font-size:14px}.map-panel-header p{font-size:10px}.panel-header-buttons .icon-button{width:40px;height:40px}.phone-close{display:flex}.expand-map{display:none}.map-wrap,.expanded .map-wrap{height:min(34dvh,270px);min-height:170px;flex-shrink:0}.map-panel.revealed .map-wrap,.map-panel.revealed.expanded .map-wrap{height:min(27dvh,215px);min-height:130px}.map-panel.revealed{overflow-y:auto}.map-panel .result{flex-shrink:0}.map-footer{padding:13px 17px calc(17px + env(safe-area-inset-bottom));flex-shrink:0}.pin-status{font-size:11px}.confirm-button{min-height:47px;font-size:13px}.map-keyboard{font-size:9px;margin-top:8px}.map-zoom{left:12px;top:12px}.map-zoom button{width:40px;height:40px}.map-panel .reference-label{font-size:9px}.result{padding:14px 17px 0}.result h3{font-size:22px;margin-top:4px}.result-stats{padding:9px 0;margin:10px 0}.result-stats .stat strong{font-size:19px}.result-note{font-size:11px}.result-credit{font-size:9px}.map-panel.revealed .map-footer{padding-top:12px}.toast{bottom:82px;z-index:16}.dialog{padding:23px}.dialog h2{font-size:19px}.dialog p{font-size:12px}.dialog ol{font-size:12px}.dialog .setting-row{padding:14px 0}.source-panel-photo-credit{display:block!important;font-size:8px;color:#718095;text-align:center;padding:0 15px 10px}.source-panel-photo-credit a{color:#66758B}}
@media(max-height:610px) and (min-width:681px){.map-panel{bottom:13px}.map-wrap{height:155px}.expanded .map-wrap{height:220px}.map-panel.revealed .map-wrap,.map-panel.revealed.expanded .map-wrap{height:110px}.result{padding-top:10px}.result h3{font-size:20px}.result-stats{padding:7px 0;margin:8px 0}.map-keyboard,.map-panel .reference-label{display:none}.view-controls{bottom:64px}.map-panel-header{padding-block:9px}}
@media(max-width:360px){.topbar{padding:0 10px;gap:8px}.brand{font-size:18px;gap:5px}.nav-controls .icon-button{width:29px}.round-value{font-size:11px}.brand-mark{width:19px}.result-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.answer-marker{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--pp-primary);border:3px solid white;box-shadow:0 0 0 3px #3565E828;transform:translate(-50%,-50%);pointer-events:none}.map-legend{position:absolute;top:11px;right:10px;display:flex;flex-direction:column;gap:4px;padding:6px 8px;border:1px solid #D3DDE5;border-radius:5px;background:#FFFFFFF2;font-size:8px;color:#53647B;pointer-events:none}.map-legend>span{display:flex;align-items:center;gap:5px}.map-legend i{display:block;width:6px;height:8px;border-radius:50% 50% 50% 0;background:var(--pp-guess);transform:rotate(-45deg)}.map-legend i.actual{height:6px;border-radius:50%;background:var(--pp-primary)}.result-region{font-size:10px;color:var(--pp-muted);margin:-5px 0 8px}.setting-row select{font:11px var(--pp-font);color:var(--pp-ink);background:white;border:1px solid var(--pp-line);border-radius:6px;padding:8px;max-width:148px;min-height:42px}.map-zoom button{width:44px;height:44px}.panel-header-buttons .icon-button{width:40px;height:40px}.nav-controls .icon-button{width:44px;height:44px}.intro-hint button{min-height:28px}.result-stats .stat strong{font-size:19px}.source-panel-photo-credit{line-height:1.6}
.game{overflow:clip}
/* Street-movement feedback. There is no permanent panel: the status is a screen-reader live region in every state, and one small Retry notice appears only when a movement fails. */
.viewpoint-controls{position:absolute;z-index:5;top:auto;bottom:74px;left:0;right:0;display:flex;justify-content:center;padding:0;border:0;background:none;box-shadow:none;color:var(--pp-ink);pointer-events:none;font-variant-numeric:tabular-nums}
.viewpoint-feedback{position:absolute;display:block;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.viewpoint-feedback p{min-width:0;flex:1;margin:0;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.viewpoint-state-icon{color:var(--pp-muted);width:16px!important;height:16px!important}
.viewpoint-retry{flex:none;border:1px solid var(--pp-line);border-radius:5px;min-width:52px;min-height:44px;padding:6px 10px;background:white;color:var(--pp-primary);font-size:11px;font-weight:650}
.viewpoint-retry:hover{background:#EEF3FD}
.viewpoint-retry:focus-visible{outline-offset:1px}
/* The one visible state: the failure text and its Retry. Ready, loading, unconnected and end stay out of the way. */
.viewpoint-controls[data-state="error"] .viewpoint-feedback{position:static;display:flex;align-items:center;gap:8px;width:auto;height:auto;margin:0;padding:8px 9px;overflow:visible;clip:auto;clip-path:none;white-space:normal;border:1px solid #DCC5B6;border-radius:7px;background:#FFF8F2;box-shadow:0 8px 26px #15223636;pointer-events:auto}
.viewpoint-controls[data-state="error"] .viewpoint-state-icon{color:#965323}
@media(max-width:1050px) and (min-width:681px){
.view-controls{top:76px;bottom:auto}
}
@media(max-width:680px){
.viewpoint-controls{bottom:calc(124px + env(safe-area-inset-bottom));left:14px;right:14px}
.viewpoint-controls[data-state="error"] .viewpoint-feedback{gap:7px;padding:7px 8px}
.viewpoint-feedback p{font-size:10px}
.viewpoint-retry{font-size:10px;min-height:44px}
.view-controls{top:74px;bottom:auto;left:14px}
.game:has(.viewpoint-controls:not([hidden])) .intro-hint{top:14px;left:auto;right:14px;transform:none;width:calc(100% - 111px);max-width:none;font-size:11px;padding:7px 8px 7px 10px;gap:6px}
.intro-hint>.icon{display:none}
.intro-hint button{min-width:35px;min-height:35px;padding-left:7px}
}
@media(max-height:520px) and (min-width:681px){
.view-direction{display:none}
.view-controls{top:12px;bottom:auto;left:14px}
}
@media(max-height:520px) and (max-width:680px){
.view-direction{display:none}
.view-controls{top:14px;bottom:auto}
}
@media(max-width:680px){.nav-controls .icon-button{width:38px;height:44px}.view-controls>.icon-button,.control-stack .icon-button{width:44px;height:44px}.panel-header-buttons .icon-button{width:44px;height:44px}.result h3{font-size:21px;line-height:1.25}.setting-row select{max-width:133px}.map-panel.revealed .map-wrap{min-height:120px}.map-panel.revealed .map-footer .reference-label{display:none}}
/* Results expand automatically from the controller's existing .revealed state. */
.result-header-caption{display:none}
.map-panel.revealed,.map-panel.revealed.expanded{
display:grid;grid-template-columns:minmax(0,1.38fr) minmax(320px,1fr);
grid-template-rows:auto minmax(0,1fr) auto auto;
grid-template-areas:"heading heading" "comparison details" "comparison action" "credit credit";
right:24px;bottom:20px;width:min(1100px,calc(100% - 48px));
height:min(600px,calc(100% - 40px));max-height:calc(100% - 40px);
border-radius:15px;overflow:hidden;box-shadow:0 18px 65px #101E3A40;
}
.map-panel.revealed .map-panel-header{grid-area:heading;padding:16px 22px;gap:16px;background:var(--pp-surface)}
.map-panel.revealed .map-panel-header h2{font-size:17px;line-height:1.35;font-weight:650;letter-spacing:-.25px}
.map-panel.revealed .map-panel-header .result-header-caption{display:block;font-size:12px;line-height:1.5;margin:3px 0 0;color:var(--pp-muted)}
.map-panel.revealed .expand-map{display:none}
.map-panel.revealed .map-wrap,.map-panel.revealed.expanded .map-wrap{grid-area:comparison;width:100%;height:100%;min-width:0;min-height:0;border-right:1px solid var(--pp-line);transition:none}
.map-panel.revealed .map-zoom{left:16px;top:16px}
.map-panel.revealed .map-zoom button{width:44px;height:44px}
.map-panel.revealed .map-legend{top:16px;right:15px;gap:7px;padding:9px 11px;font-size:11px;line-height:1.35;border-radius:7px}
.map-panel.revealed .map-legend i{width:8px;height:10px}
.map-panel.revealed .map-legend i.actual{height:8px}
.map-panel.revealed .result{grid-area:details;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:24px 24px 18px;border:0;background:var(--pp-surface);scroll-padding-block:16px}
.map-panel.revealed .result:focus-visible{outline-offset:-4px}
.map-panel.revealed .result .eyebrow{font-size:10px;letter-spacing:.75px;line-height:1.5}
.map-panel.revealed .result h3{font-size:29px;line-height:1.14;letter-spacing:-.7px;margin:10px 0 8px;overflow-wrap:anywhere}
.map-panel.revealed .result-region{font-size:12px;line-height:1.5;margin:0 0 15px}
.map-panel.revealed .result-stats{gap:18px;padding:18px 0;margin:18px 0}
.map-panel.revealed .result-stats .stat{min-width:0}
.map-panel.revealed .result-stats .stat:first-child{flex:1.35}
.map-panel.revealed .result-stats .stat+div{flex:.65}
.map-panel.revealed .result-stats .stat span{font-size:11px;line-height:1.5;margin-bottom:4px}
.map-panel.revealed .result-stats .stat strong{font-size:30px;font-weight:650;line-height:1.15;letter-spacing:-.8px;overflow-wrap:anywhere}
.map-panel.revealed .result-stats .stat+div{padding-left:18px}
.map-panel.revealed .result-note{font-size:12px;line-height:1.7;overflow-wrap:anywhere}
.result-provenance{margin-top:19px;border-top:1px solid var(--pp-line)}
.result-provenance summary{min-height:44px;padding:13px 0;cursor:pointer;font-size:11px;font-weight:600;line-height:1.5;color:#4D5D74;list-style-position:inside;touch-action:manipulation}
.result-provenance summary:focus-visible{outline:3px solid var(--pp-focus);outline-offset:1px;border-radius:4px}
.map-panel.revealed .result-credit{font-size:11px;line-height:1.7;margin:0 0 6px;color:var(--pp-muted);overflow-wrap:anywhere}
.map-panel.revealed .result-credit a{color:#3E567C}
.map-panel.revealed .map-footer{grid-area:action;min-width:0;padding:14px 24px 17px;background:#F7F9FC;border-top:1px solid var(--pp-line);position:relative;z-index:1}
.map-panel.revealed .pin-status{font-size:11px;line-height:1.5;margin:0 0 10px;overflow-wrap:anywhere}
.map-panel.revealed .confirm-button{min-height:48px;font-size:13px}
.map-panel.revealed .map-footer .reference-label,.map-panel.revealed .map-keyboard{display:none}
.map-panel.revealed .source-panel-photo-credit{display:block!important;grid-area:credit;padding:8px 22px;font-size:10px;line-height:1.6;color:#59687D;text-align:left;background:#F7F9FC;border-top:1px solid var(--pp-line);overflow-wrap:anywhere}
.map-panel.revealed .source-panel-photo-credit::before{content:"Viewed photograph: ";color:#59687D}
.map-panel.revealed .source-panel-photo-credit a{color:#425D82}
.game:has(.map-panel.revealed) .intro-hint{display:none}
.game:has(.map-panel.revealed) .viewpoint-controls{visibility:hidden}
@media(max-width:900px) and (min-width:681px){
.map-panel.revealed,.map-panel.revealed.expanded{right:16px;bottom:16px;width:calc(100% - 32px);height:calc(100% - 32px);max-height:calc(100% - 32px);grid-template-columns:minmax(0,1fr) minmax(295px,.95fr)}
.map-panel.revealed .result{padding:19px 19px 14px}
.map-panel.revealed .result h3{font-size:26px}
.map-panel.revealed .result-stats .stat strong{font-size:27px}
.map-panel.revealed .map-footer{padding-inline:19px}
}
@media(max-width:680px){
.map-panel.revealed,.map-panel.revealed.expanded{
left:0;right:0;bottom:0;width:100%;height:calc(100% - 10px);max-height:calc(100% - 10px);
grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(170px,30%) minmax(0,1fr) auto auto;
grid-template-areas:"heading" "comparison" "details" "action" "credit";border-radius:16px 16px 0 0;
}
.map-panel.revealed .map-panel-header{padding:12px 14px 12px 18px;gap:8px}
.map-panel.revealed .map-panel-header h2{font-size:16px}
.map-panel.revealed .map-panel-header .result-header-caption{font-size:11px;margin-top:2px}
.map-panel.revealed .map-wrap,.map-panel.revealed.expanded .map-wrap{min-height:0;height:100%;border-right:0;border-bottom:1px solid var(--pp-line)}
.map-panel.revealed .map-zoom{top:12px;left:12px}
.map-panel.revealed .map-legend{top:12px;right:12px;font-size:10px;padding:7px 9px;gap:5px}
.map-panel.revealed .result{padding:18px 19px 14px;flex-shrink:1}
.map-panel.revealed .result h3{font-size:25px;line-height:1.16;margin-top:8px}
.map-panel.revealed .result-region{font-size:11px;margin-bottom:12px}
.map-panel.revealed .result-stats{margin:15px 0;padding:14px 0}
.map-panel.revealed .result-stats .stat strong{font-size:28px}
.map-panel.revealed .result-note{font-size:12px}
.map-panel.revealed .map-footer{padding:11px 18px 12px;flex-shrink:0}
.map-panel.revealed .pin-status{font-size:10px;margin-bottom:8px}
.map-panel.revealed .confirm-button{min-height:48px;font-size:13px}
.map-panel.revealed .source-panel-photo-credit{padding:7px 18px calc(8px + env(safe-area-inset-bottom));font-size:9px}
}
@media(max-height:520px) and (min-width:561px){
.map-panel.revealed,.map-panel.revealed.expanded{
left:auto;right:12px;bottom:10px;width:calc(100% - 24px);height:calc(100% - 20px);max-height:calc(100% - 20px);
grid-template-columns:minmax(0,1fr) minmax(275px,.95fr);grid-template-rows:auto minmax(0,1fr) auto auto;
grid-template-areas:"heading heading" "comparison details" "comparison action" "credit credit";border-radius:12px;
}
.map-panel.revealed .map-panel-header{padding:8px 15px}
.map-panel.revealed .map-panel-header h2{font-size:14px}
.map-panel.revealed .map-panel-header .result-header-caption{display:none}
.map-panel.revealed .map-wrap,.map-panel.revealed.expanded .map-wrap{border-bottom:0;border-right:1px solid var(--pp-line)}
.map-panel.revealed .result{padding:12px 16px}
.map-panel.revealed .result h3{font-size:23px;margin-top:6px}
.map-panel.revealed .result-stats{padding:12px 0;margin:13px 0}
.map-panel.revealed .result-stats .stat strong{font-size:25px}
.map-panel.revealed .map-footer{padding:8px 15px 10px}
.map-panel.revealed .pin-status{font-size:10px;margin-bottom:6px}
.map-panel.revealed .confirm-button{min-height:44px;font-size:12px}
.map-panel.revealed .source-panel-photo-credit{font-size:9px;padding:5px 15px calc(5px + env(safe-area-inset-bottom))}
}
/* Detailed map: native map attribution keeps its own unobstructed bottom strip. */
.map-wrap{--map-credit-reserve:30px;isolation:isolate}
.map-wrap>.world-map{position:absolute;inset:0;width:100%;height:100%;z-index:0;background:#E5EDF2}
.world-map .maplibregl-canvas{outline-offset:-4px}
.world-map .maplibregl-canvas:focus-visible{outline:3px solid var(--pp-focus)}
.world-map .maplibregl-ctrl-bottom-right{left:0;right:0;bottom:0;pointer-events:none}
.world-map .maplibregl-ctrl-attrib{width:100%;max-width:100%;min-height:22px;margin:0;padding:3px 8px;border-top:1px solid #D6DEE5;background:#FFFFFFF5;color:#46566C;font:10px/1.5 var(--pp-font);text-align:right;pointer-events:auto}
.world-map .maplibregl-ctrl-attrib a{color:#46566C;text-decoration:underline;text-underline-offset:2px}
.world-map .maplibregl-ctrl-attrib a:focus-visible{outline:2px solid var(--pp-focus);outline-offset:1px}
.world-map .maplibregl-ctrl-attrib-inner{overflow-wrap:anywhere}
.map-wrap>.draft-marker,.map-wrap>.answer-marker{z-index:2}
.map-wrap>.map-crosshair{z-index:1}
.map-zoom,.map-legend{z-index:3}
.map-zoom button{width:44px;height:44px}
.map-zoom button:focus-visible{outline-offset:-4px}
.map-caption,.map-panel.revealed .map-caption{right:8px;bottom:var(--map-credit-reserve);z-index:3;max-width:calc(100% - 85px);padding:3px 5px;border:1px solid #D6DEE5;border-radius:4px;background:#FFFFFFF2;color:#53647B;font-size:9px;line-height:1.5;pointer-events:none}
.map-load-feedback{position:absolute;left:10px;right:85px;bottom:var(--map-credit-reserve);z-index:4;display:flex;align-items:center;gap:8px;width:fit-content;max-width:calc(100% - 95px);padding:6px 9px;border:1px solid #D6DEE5;border-radius:6px;background:#FFFFFFF5;box-shadow:0 2px 8px #122E4712;pointer-events:none}
.map-load-feedback p{min-width:0;margin:0;color:#4D5D74;font-size:10px;line-height:1.5;overflow-wrap:anywhere}
.map-load-feedback:has(#map-load-status[hidden]):has(#map-retry[hidden]),.map-load-feedback:has(#map-load-status:empty):has(#map-retry[hidden]){display:none}
.map-load-feedback:has(#map-retry:not([hidden])){right:10px;max-width:calc(100% - 20px);background:#FFF9F3;border-color:#DDCABB}
.map-load-feedback:has(#map-retry:not([hidden])) p{color:#784A2C}
.map-wrap:has(#map-retry:not([hidden]))>.map-caption{visibility:hidden}
#map-retry{flex:none;min-width:72px;min-height:44px;padding:7px 9px;border:1px solid #CBD5E2;border-radius:5px;background:white;color:#244DAC;font-size:11px;font-weight:650;pointer-events:auto}
#map-retry:hover{background:#EEF3FD}
#map-retry:focus-visible{outline-offset:1px}
.round-dots:has(.current) i:first-child:not(.current):not(.complete){background:#E4E8EF}
.round-dots i.complete{background:#A8BCEB}
.round-dots i.current{background:var(--pp-primary)}
.map-return-hint{display:none}
.help-preview-note{padding:9px 11px;border-radius:7px;background:#F1F5FC;color:#536782!important;font-size:11px!important}
#result.game-summary-visible>:not(#game-summary){display:none}
.game-summary-intro{margin:0;color:var(--pp-muted);font-size:12px;line-height:1.6}
.game-summary-total{padding:18px 0 19px;margin:15px 0 18px;border-block:1px solid var(--pp-line)}
.game-summary-total>span{display:block;margin-bottom:5px;font-size:11px;color:var(--pp-muted)}
#game-total{display:block;font-size:clamp(30px,4vw,44px);font-weight:650;line-height:1.15;letter-spacing:-1px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.game-summary h4{margin:0 0 5px;font-size:12px;font-weight:650}
.game-round-list{list-style:none;margin:0;padding:0}
.game-round-list>li{display:grid;grid-template-columns:51px minmax(0,1fr) auto;align-items:start;column-gap:10px;row-gap:3px;padding:13px 0;border-bottom:1px solid #E7ECF3;font-size:11px;line-height:1.5}
.game-round-label{color:#63728A;font-size:10px;padding-top:1px}
.game-round-place{min-width:0;overflow-wrap:anywhere;color:#304564}
.game-round-points{font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--pp-primary)}
.game-summary-note{margin:14px 0 0;font-size:10px;line-height:1.6;color:var(--pp-muted)}
/* Pannellum owns this wrapper's position and transform. Keep its hit area fixed. */
.street-hotspot-anchor{width:56px;height:56px;pointer-events:auto;background:none;cursor:default}
.street-hotspot{position:relative;display:grid;place-items:center;width:56px;height:56px;min-width:44px;min-height:44px;padding:0;border:2px solid #FFFFFF;border-radius:50%;background:#14243DEB;color:white;box-shadow:0 3px 14px #00000055;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background 120ms ease,box-shadow 120ms ease}
.street-hotspot-arrow{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.street-hotspot-label{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:5px 9px;border:1px solid #FFFFFF99;border-radius:5px;background:#14243DF2;color:#FFFFFF;font:600 11px/1.3 var(--pp-font);white-space:nowrap;pointer-events:none}
.street-hotspot:hover:not(:disabled){background:#234FC5;box-shadow:0 3px 18px #00000066}
.street-hotspot:focus-visible{outline:3px solid #FFFFFF;outline-offset:4px;box-shadow:0 0 0 9px #162847,0 3px 18px #00000066}
.street-hotspot:active:not(:disabled){background:#173C9B}
.street-hotspot:disabled,.street-hotspot[aria-busy="true"]{cursor:wait;background:#47576ADE;color:#DCE3EB;border-color:#DCE3EB;box-shadow:none}
.street-hotspot-anchor[hidden],.game:has(.map-panel.revealed) .street-hotspot-anchor{visibility:hidden;pointer-events:none}
@media(max-width:680px){.street-hotspot-anchor,.street-hotspot{width:52px;height:52px}.street-hotspot-arrow{width:30px;height:30px}.street-hotspot-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){.street-hotspot{transition:none}}
body.reduced-motion .street-hotspot{transition:none}
@media(max-width:680px){
.map-wrap{--map-credit-reserve:32px}
.world-map .maplibregl-ctrl-attrib{font-size:10px;line-height:1.6;padding:3px 7px}
.map-return-hint{display:block;margin-top:5px;color:#536782}
}
/* The game shares the homepage identity; the photographic play surface keeps its own palette.
Header-scoped tokens also cover the status controls in the later-loaded solo stylesheet. */
#topbar {
--pp-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif;
--pp-surface: #071c1d;
--pp-ink: #f6f3e9;
--pp-muted: #a5b9b5;
--pp-line: #1d4445;
--pp-primary: #d2f17a;
--pp-primary-soft: #113233;
--pp-focus: #d2f17a;
background: var(--pp-surface);
color: var(--pp-ink);
font-family: var(--pp-font);
}
#topbar .brand {
min-height: 44px;
max-width: 100%;
gap: .6rem;
color: var(--pp-ink);
font-size: 20px;
font-weight: 800;
letter-spacing: -.03em;
white-space: nowrap;
}
#topbar .brand-mark {
flex: none;
width: 38px;
height: 38px;
border-radius: 9px;
background: #113233;
box-shadow: inset 0 0 0 1px #2a5a5b;
object-fit: contain;
}
#topbar .round-dots i { background: #2a5a5b; }
#topbar .round-dots i:first-child { background: var(--pp-primary); }
#topbar .round-dots:has(.current) i:first-child:not(.current):not(.complete) { background: #2a5a5b; }
#topbar .round-dots i.complete { background: #8fad6b; }
#topbar .round-dots i.current { background: var(--pp-primary); }
#topbar .nav-controls .icon-button { color: var(--pp-ink); }
#topbar .nav-controls .icon-button:hover { background: #113233; }
#topbar .nav-controls #solo-menu-button {
color: var(--pp-primary);
background: #113233;
box-shadow: inset 0 0 0 1px #2a5a5b;
}
#topbar .nav-controls #solo-menu-button:hover { background: #183e3d; }
#topbar .nav-controls #solo-menu-button[aria-expanded="true"] {
color: #071c1d;
background: var(--pp-primary);
box-shadow: none;
}
#topbar .solo-mode {
color: #d3e0d7;
background: #113233;
border-color: #2a5a5b;
}
#topbar .solo-timer { color: var(--pp-ink); }
#topbar .solo-timer[data-urgent="true"] {
color: #ffad8b;
background: #3f251f;
border-color: #8b4e37;
}
/* Preserve solo.css's fixed two-row mobile header, including its status divider. */
#topbar:has(#solo-menu-button) .progress { border-top-color: var(--pp-line); }
/* Daily's date and rules need their own row on tablets, clear of the navigation targets. */
@media (min-width: 681px) and (max-width: 980px) {
:root:has(#solo-menu-button) { --pp-header: 94px; }
#topbar:has(#solo-menu-button) {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: 56px 38px;
gap: 0 12px;
padding: 0 14px;
}
#topbar:has(#solo-menu-button) > :first-child {
grid-column: 1;
grid-row: 1;
min-width: 0;
}
#topbar:has(#solo-menu-button) .nav-controls {
grid-column: 2;
grid-row: 1;
}
#topbar:has(#solo-menu-button) .progress {
position: absolute;
left: 14px;
right: 14px;
bottom: 0;
min-height: 38px;
margin: 0;
padding: 3px 0 4px;
border-top: 1px solid var(--pp-line);
justify-content: space-between;
gap: 12px;
}
#topbar .solo-status { margin: 0; padding: 0; border: 0; gap: 8px; }
}
@media (max-width: 680px) {
#topbar .brand { font-size: 18px; gap: .5rem; }
#topbar .brand-mark { width: 34px; height: 34px; }
}
/* Leave room for the complete wordmark and 44px Help, Solo and Exit targets on narrow phones. */
@media (max-width: 360px) {
#topbar .nav-controls #fullscreen-button { display: none; }
}
/* Saved-game details may span several lines; keep this secondary action above the sticky footer. */
.solo-dialog #solo-resume-previous {
grid-column: 1 / -1;
min-width: 0;
width: 100%;
min-height: 46px;
padding: 12px 16px;
text-align: left;
line-height: 1.55;
white-space: normal;
overflow-wrap: anywhere;
}