@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--ink:#124c70;--paper:#f0f8fc;--orange:#007cb6}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,[role=button]:focus-visible{outline:3px solid #007cb6;outline-offset:4px}main{max-width:1140px;margin:auto;padding:0 38px}header{height:88px;border-bottom:1px solid #c9e0ec;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:var(--ink);font-size:13px;letter-spacing:2px;font-weight:800}.brand span{color:var(--orange);font-size:24px;margin-right:14px}.edition,.eyebrow,.section-label,.map-top,.map-foot{font-size:10px;letter-spacing:1.4px;font-weight:700}.edition{color:#628398}.intro{padding:45px 0 29px;position:relative}.eyebrow{color:#628398}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(42px,6.4vw,76px);letter-spacing:-4px;line-height:.98;margin:22px 0 24px;font-weight:700}h1 em{font-style:normal;color:var(--orange)}.spark{position:absolute;font-size:110px;right:32px;top:65px;color:var(--orange);font-weight:400}.intro-bottom{display:flex;align-items:center;justify-content:space-between}.intro-bottom h2{font-weight:500;font-size:22px;letter-spacing:-.7px;margin:0}.intro-bottom p{font-size:13px;line-height:1.6;color:#587c93;margin:0}.layout{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:start}.map-card{background:#d4e7ed;border:1px solid #b7d5e5;border-radius:16px;overflow:hidden}.map-top{display:flex;justify-content:space-between;padding:20px 22px 0;font-size:9px}.map-card svg{display:block;width:100%;height:auto}.map-foot{border-top:1px solid #bdd9e6;display:flex;justify-content:space-between;padding:15px 19px;font-size:8px;letter-spacing:.8px}.map-foot span:last-child{font-weight:400;letter-spacing:0}.place{font:700 11px 'DM Sans',sans-serif;fill:#124c70;paint-order:stroke;stroke:#d4e7ed;stroke-width:3px;stroke-linejoin:round}.sea{font-size:9px;letter-spacing:3px;fill:#266f94}.landmark{font-size:6px;letter-spacing:1px;fill:#467d99}.right{display:flex;flex-direction:column;gap:17px}.selector,.ranking{border:1px solid #c9e0ec;border-radius:16px;background:#fbfdff;padding:25px}.section-label{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#587c93}.level{background:#e3f2fa;padding:6px 9px;border-radius:20px;color:#266f94;font-size:9px}h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-1px;font-size:29px;line-height:1.15;margin:22px 0 8px}.quip{font-size:13px;color:#587c93;line-height:1.5;min-height:39px;margin:0 0 22px}.slider-label{font-size:11px;display:flex;justify-content:space-between;font-weight:700}.slider-label span{color:var(--orange)}input[type=range]{width:100%;height:34px;margin:8px 0 0;accent-color:var(--orange);cursor:ew-resize}input[type=range]::-webkit-slider-runnable-track{background:#c5e0ed;height:6px;border-radius:8px}input[type=range]::-webkit-slider-thumb{appearance:none;margin-top:-5px}.ticks{display:flex;justify-content:space-between}.ticks button{background:none;border:0;font-size:10px;padding:2px 5px;color:#7193a8}.ticks button[aria-pressed=true]{color:var(--orange);font-weight:800}.ends{display:flex;justify-content:space-between;font-size:10px;color:#587c93;margin:5px 0 24px}form{border-top:1px solid #d9eaf2;padding-top:20px}form label{font-size:11px;font-weight:700;display:block;margin-bottom:9px}.join{display:flex;gap:7px}.join input{min-width:0;width:100%;border:1px solid #bdd9e6;border-radius:7px;padding:12px;font-size:13px;background:white;color:var(--ink)}.join button{border:0;border-radius:7px;background:var(--ink);color:#fff;padding:12px 14px;font-size:11px;font-weight:700;white-space:nowrap}.join button:disabled{opacity:.5;cursor:default}.status{font-size:10px;line-height:1.5;color:#587c93;margin:10px 0 0}.inferno{border-color:var(--orange)}.inferno h3,.inferno .quip{color:#005c94}.ranking-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.ranking-heading h3{font-size:23px;margin:19px 0 7px}.ranking-heading>span{font-size:10px;color:#587c93}.live{font-size:8px;color:#167eaa;letter-spacing:.6px}.offline{color:#587c93}.small{font-size:10px;color:#587c93;line-height:1.6;margin:0}.empty{display:flex;align-items:center;gap:17px;padding:22px 8px 5px}.empty>span{font-size:34px;color:#8db6cc}.empty p{font-size:13px;font-weight:600}.empty small{display:block;font-size:10px;font-weight:400;color:#587c93;margin-top:5px}ol{list-style:none;padding:0;margin:14px 0 0;max-height:300px;overflow-y:auto}li{display:flex;align-items:center;gap:10px;border-top:1px solid #dfedf5;padding:11px 0}.rank{font-size:11px;width:17px;color:#628398}.avatar{display:grid;place-items:center;background:#daedf8;width:32px;height:32px;border-radius:50%;font-size:12px}li div{flex:1;min-width:0}li strong{display:block;font-size:12px;overflow-wrap:anywhere}li small{font-size:10px;color:#587c93}.badge{font-size:11px;color:var(--orange)}.whatsapp{border:0;border-radius:9px;background:#d3eaf8;padding:16px 20px;color:var(--ink);display:flex;justify-content:space-between;font-size:12px;font-weight:700}.copy{border:0;background:none;font-size:10px;text-decoration:underline;color:#587c93;margin-top:-7px;padding:5px}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #c9e0ec;margin-top:35px;padding:24px 0 30px;font-size:10px;color:#628398}footer strong{font-weight:500;color:#46738d}
@media(min-width:800px){.map-card svg{max-height:655px}.map-card{height:100%}}
@media(max-width:700px), (pointer:coarse) and (max-device-width:700px){main{padding:0 20px}header{height:66px}.edition{font-size:7px;letter-spacing:.7px}.brand{font-size:10px;letter-spacing:1px}.brand span{margin-right:7px}.intro{padding-top:31px}.eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:45px;letter-spacing:-2.6px;margin-top:18px}.spark{font-size:54px;right:0;top:60px}.intro-bottom{display:block}.intro-bottom h2{font-size:19px}.intro-bottom p{font-size:12px;margin-top:10px}.desktop{display:none}.layout{grid-template-columns:1fr;gap:17px}.map-card svg{max-height:510px}.selector,.ranking{padding:22px}.map-top{padding:18px 18px 0}.right{gap:15px}h3{font-size:27px}.join button{padding:12px 10px}.map-foot{padding:14px;font-size:7px}footer{display:block;line-height:1.7}footer span{display:block;margin-top:6px}}
@media(prefers-reduced-motion:no-preference){.selector{transition:border-color .2s}button{transition:filter .15s}button:hover{filter:brightness(.95)}}

.layout{display:block}.map-card{margin-bottom:24px;height:auto}.map-card svg{max-height:none;width:100%;height:auto}.map-scroll{overflow-x:auto;scrollbar-color:#579bc2 #e4f2fa}.right{display:grid;grid-template-columns:1fr 1fr;gap:22px}.whatsapp{grid-column:1/-1}.copy{grid-column:1/-1}.map-top{padding-bottom:15px}.map-hint{font-size:8px;letter-spacing:.5px}.place{fill:#124c70;stroke:#e2f0f6;stroke-width:3px}.spark{color:#1395c6}h3{font-family:'Space Grotesk','DM Sans',sans-serif}.whatsapp{background:#086c9f;color:white}.map-foot{background:#eaf5fb}
@media(max-width:700px), (pointer:coarse) and (max-device-width:700px){.right{display:flex;gap:15px}.map-card svg{min-width:660px;max-height:none}.map-card{margin-bottom:17px}.map-hint{font-size:7px}.map-foot{font-size:7px}h1{font-size:42px}.spark{font-size:45px;top:66px;right:0}}
/* Compact composition: map and slider share the full available width. */
main{padding:0 24px;max-width:1140px}.intro{padding:20px 0 14px}.intro h1{white-space:nowrap;font-size:clamp(19px,5.1vw,57px);letter-spacing:-2px;line-height:1.1;margin:0 0 9px;color:#086c9f}.intro-bottom{display:flex;justify-content:space-between;gap:12px;align-items:center}.intro-bottom h2{font-size:16px}.intro-bottom p{white-space:nowrap;margin:0;font-size:14px}.map-card{margin:0;border-radius:12px;background:#dce6b1}.map-card svg{min-width:660px;width:100%;height:auto;max-height:none;aspect-ratio:740/186}.map-scroll{overflow-x:auto}.place{fill:#254b52;stroke:#f3f0d9;stroke-width:3px;font-size:11px}.landmark{fill:#8b683d;font-size:6px;letter-spacing:.7px}.selector{margin:0 0 14px;padding:12px 15px 9px;border:0;border-bottom:1px solid #c9e0ec;border-radius:0;background:transparent}.selector .section-label{float:right;margin-top:4px;gap:10px}.selector h3{font-size:22px;margin:0 0 4px}.quip{min-height:0;margin:0 0 8px;font-size:12px}.slider-label{font-size:11px}.selector input[type=range]{margin:0;width:100%;height:30px}.ends{margin:3px 0 0}.ticks button{min-width:24px;padding:3px}.right{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.name-card,.ranking{border:1px solid #c9e0ec;border-radius:11px;background:#fbfdff;padding:17px}.name-card form{padding:0;border:0}.name-card label{font-size:14px;line-height:1.5;margin:0 0 12px}.join{flex-direction:column;gap:9px}.join input{padding:12px;font-size:14px}.join button{padding:12px;font-size:13px}.status{font-size:11px}.ranking-heading h3{margin-top:12px;font-size:22px}.whatsapp{padding:13px 17px}.copy{margin:0;padding:0 0 14px}.empty{padding:10px 0 0}.small{font-size:11px}.inferno .quip{color:#b74622}
@media(max-width:700px), (pointer:coarse) and (max-device-width:700px){main{padding:0 12px}.intro{padding:14px 0 10px}.intro h1{font-size:clamp(18px,5.45vw,37px);letter-spacing:-.9px;margin-bottom:6px}.intro-bottom h2{font-size:11px}.intro-bottom p{font-size:12px}.map-card{margin:0}.selector{padding:10px 4px 9px;margin-bottom:12px}.selector .section-label{float:none;justify-content:space-between;margin:0 0 7px}.selector h3{font-size:21px}.right{display:flex;gap:12px}.name-card,.ranking{padding:15px}.name-card label{font-size:13px}.join{flex-direction:column}.map-card svg{min-width:660px;aspect-ratio:740/186}.status{margin-top:8px}}
.photo-credits{font-size:10px;color:#628398;margin:0 0 12px}.photo-credits summary{cursor:pointer}.photo-credits p{line-height:1.5}.photo-credits a{color:#46738d}
/* Clearly readable scale labels, including on narrow screens. */
.slider-label{font-size:16px;font-weight:800;color:#124c70;margin:8px 0 5px}
.ticks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:7px -10px 4px;align-items:stretch}
.ticks button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding:8px 3px;min-width:0;border:1px solid transparent;border-radius:8px;color:#183e53;background:transparent;line-height:1.25;min-height:78px}
.ticks button strong{font-size:21px;line-height:1.1;font-weight:800}
.ticks button span{font-size:14px;font-weight:700;overflow-wrap:normal}
.ticks button[aria-pressed=true]{color:#005c8c;background:#d7edf9;border-color:#78afcc}
.ticks button[aria-pressed=true] span{font-weight:800}
@media(max-width:700px), (pointer:coarse) and (max-device-width:700px){.slider-label{font-size:16px}.ticks{gap:2px;margin:6px -3px 2px}.ticks button{padding:7px 1px;min-height:95px;gap:6px}.ticks button strong{font-size:19px}.ticks button span{font-size:12px;line-height:1.3;word-break:normal;hyphens:none}.selector{padding-left:0;padding-right:0}}
@media(max-width:700px), (pointer:coarse) and (max-device-width:700px){.ticks button span{font-size:14px;line-height:1.3;hyphens:auto;overflow-wrap:anywhere}.ticks button strong{font-size:21px}.ticks button{min-height:110px}}
.selected-level{display:flex;align-items:center;gap:17px;margin:0 0 13px}.level-circle{display:grid;place-items:center;flex:0 0 70px;width:70px;height:70px;border-radius:50%;background:#007cb6;color:white;border:4px solid white;box-shadow:0 0 0 2px #007cb6;font-size:34px;font-weight:800;line-height:1}.selected-copy{flex:1;min-width:0}.selector .selected-copy h3{font-size:27px;margin:0 0 6px}.selector .selected-copy .quip{font-size:18px;font-weight:800;line-height:1.45;color:#164b68;margin:0}.selector .section-label{float:none;justify-content:flex-end;margin-bottom:10px}.inferno .selected-copy .quip{color:#b74622}
@media(max-width:700px), (pointer:coarse) and (max-device-width:700px){.selected-level{gap:12px;margin-bottom:14px;align-items:flex-start}.level-circle{width:60px;height:60px;flex-basis:60px;font-size:30px}.selector .selected-copy h3{font-size:23px}.selector .selected-copy .quip{font-size:17px;line-height:1.4}.selector .section-label{justify-content:space-between;margin-bottom:12px}}
.achievement{display:flex;align-items:center;gap:14px;background:linear-gradient(110deg,#fff4ca,#ffefd6);border:1px solid #e7bc57;border-radius:12px;padding:14px 18px;margin:0 0 18px;color:#6c410d}.achievement-medal{font-size:38px;line-height:1}.achievement strong{display:block;font-family:'Space Grotesk','DM Sans',sans-serif;font-size:23px;line-height:1.2;letter-spacing:-.5px}.achievement div>span{display:block;font-size:13px;font-weight:600;margin-top:4px}.achievement-flame{margin-left:auto;font-size:30px}.inferno .level-circle{background:linear-gradient(145deg,#ffd765,#eca53d);color:#59380e;box-shadow:0 0 0 2px #dba147,0 3px 18px #e9b74c40}.celebration-burst{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:100}.celebration-burst i{position:absolute;top:-35px;width:10px;height:17px;border-radius:2px;opacity:0;animation:confetti-fall 3s ease-in forwards}.celebration-burst i:nth-child(3n){width:13px;height:8px;border-radius:50%}.celebration-burst i:nth-child(2n){animation-timing-function:linear}
@keyframes confetti-fall{0%{transform:translate3d(0,-20px,0) rotate(0deg);opacity:0}5%{opacity:1}85%{opacity:1}100%{transform:translate3d(45px,110vh,0) rotate(760deg);opacity:0}}
@media(max-width:700px), (pointer:coarse) and (max-device-width:700px){.achievement{padding:12px;gap:11px;margin-bottom:15px}.achievement strong{font-size:21px}.achievement div>span{font-size:12px;line-height:1.4}.achievement-medal{font-size:33px}.achievement-flame{font-size:25px}}
@media(prefers-reduced-motion:reduce){.celebration-burst{display:none}}
.level-circle.negative{background:#cc3737;box-shadow:0 0 0 2px #b62e2e;color:white}
.ranking-location{display:flex;align-items:center;gap:7px;margin-top:5px;color:#204e65;font-size:13px;font-weight:600;line-height:1.4}.mini-level{display:inline-grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#007cb6;color:#fff;font-size:13px;font-weight:800;line-height:1}.mini-level.negative{background:#cc3737}.mini-level.maximum{background:#efb647;color:#59380e}.ranking li{padding:13px 0}.ranking li strong{font-size:14px}
.ranking-location{margin:0 0 0 auto;flex:0 1 auto;justify-content:flex-end;text-align:right;max-width:55%;font-size:13px;gap:7px}.ranking li>div{flex:1;min-width:0}.ranking li{gap:9px}.mini-level{flex-shrink:0}
@media(max-width:700px), (pointer:coarse) and (max-device-width:700px){.ranking-location{font-size:12px;max-width:54%}.ranking li strong{font-size:13px}.mini-level{width:25px;height:25px;flex-basis:25px}}
/* Touch controls and phone layout. Desktop keeps the existing composition. */
.mobile-map-hint,.mobile-scale,.mobile-control-hint{display:none}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:10px;background:#a6cee1;border:1px solid #689ab6}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-11px;border:3px solid white;border-radius:50%;background:#007cb6;box-shadow:0 1px 5px #124c7080}
input[type=range]::-moz-range-track{height:6px;border-radius:10px;background:#a6cee1;border:1px solid #689ab6}
input[type=range]::-moz-range-thumb{width:23px;height:23px;border:3px solid white;border-radius:50%;background:#007cb6;box-shadow:0 1px 5px #124c7080}
@media(max-width:700px), (pointer:coarse) and (max-device-width:700px){
 body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 main{padding:0 max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));width:100%;min-width:0}
 .intro{padding:16px 0 12px}
 .intro h1{font-size:clamp(18px,5.45vw,35px);letter-spacing:-.75px;margin-bottom:10px}
 .intro-bottom{gap:8px;align-items:center}.intro-bottom h2{font-size:12px}.intro-bottom p{font-size:13px;font-weight:700}
 .map-card{max-width:100%;border-radius:12px}.map-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#579bc2 #eaf4ed}
 .map-card svg{width:900px;min-width:900px;max-width:none;height:auto;aspect-ratio:740/186}
 .mobile-map-hint{display:flex;justify-content:space-between;align-items:center;margin:0;padding:9px 12px;background:#ecf6f7;color:#285b72;font-size:12px;font-weight:700;border-top:1px solid #c5dfe7}
 .mobile-map-hint span{font-size:22px;line-height:1}
 .selector{padding:13px 0 14px;margin-bottom:14px}
 .selector .section-label{font-size:10px;letter-spacing:.7px;margin:0 0 14px}.level{font-size:11px;padding:7px 10px}
 .selected-level{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px 13px;align-items:center;margin-bottom:17px}
 .level-circle{width:56px;height:56px;font-size:29px;grid-column:1;grid-row:1}
 .selected-copy{display:contents}.selector .selected-copy h3{grid-column:2;grid-row:1;font-size:24px;line-height:1.12;letter-spacing:-.6px;margin:0;overflow-wrap:anywhere}
 .selector .selected-copy .quip{grid-column:1/-1;font-size:17px;font-weight:800;line-height:1.5;margin:2px 0 0}
 .slider-label{font-size:17px;margin:0;font-weight:800}
 .selector input[type=range]{height:48px;margin:0 0 0;padding:0 2px;width:100%}
 input[type=range]::-webkit-slider-thumb{width:32px;height:32px;margin-top:-14px}
 input[type=range]::-moz-range-thumb{width:26px;height:26px}
 .mobile-scale{display:flex;justify-content:space-between;padding:0 6px;margin:-3px 0 13px;color:#204e65;font-size:14px;font-weight:800}
 .mobile-control-hint{display:block;font-size:13px;color:#456d83;margin:0 0 10px}
 .ticks{display:none}
 .ticks button{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:9px;text-align:left;min-height:58px;padding:10px;border:1px solid #c0dae8;border-radius:10px;background:#fbfdff;color:#164b68;touch-action:manipulation}
 .ticks button strong{flex:0 0 30px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:16px;background:#e1eff7}
 .ticks button span{font-size:15px;line-height:1.25;font-weight:700;word-break:normal;overflow-wrap:normal;hyphens:none}
 .ticks button:last-child{grid-column:1/-1}
 .ticks button[aria-pressed=true]{background:#d8edf9;border:2px solid #007cb6;padding:9px}
 .ticks button[aria-pressed=true] strong{background:#007cb6;color:#fff}
 .ticks button:first-child strong{background:#f9e1e1;color:#b62e2e}
 .ticks button:first-child[aria-pressed=true]{border-color:#c53636;background:#fff0f0}
 .ticks button:first-child[aria-pressed=true] strong{background:#cc3737;color:white}
 .ticks button:last-child[aria-pressed=true]{border-color:#d19a30;background:#fff3d0}
 .ticks button:last-child[aria-pressed=true] strong{background:#efb647;color:#59380e}
 .right{display:flex;flex-direction:column;gap:14px;width:100%;min-width:0}
 .name-card,.ranking{padding:16px;min-width:0;width:100%;border-radius:12px}
 .name-card label{font-size:17px;line-height:1.35;margin-bottom:12px}
 .join{gap:10px}.join input{font-size:16px;min-height:50px;padding:13px 12px}
 .join button{font-size:16px;min-height:50px;padding:12px}
 .status{font-size:12px;line-height:1.5;margin-top:10px}
 .ranking .section-label{font-size:10px;letter-spacing:.6px}.live{font-size:10px}
 .ranking-heading{flex-wrap:wrap;align-items:baseline}.ranking-heading h3{font-size:24px;margin:13px 0 6px}.ranking-heading>span{font-size:12px}
 .small{font-size:13px;line-height:1.5}.ranking ol{max-height:none;margin-top:13px}
 .ranking li{gap:7px;padding:14px 0;align-items:center}.rank{flex:0 0 16px;width:16px;font-size:12px}.avatar{flex:0 0 28px;width:28px;height:28px}
 .ranking li>div{flex:1;min-width:0}.ranking li strong{font-size:15px;line-height:1.4}
 .ranking-location{max-width:53%;font-size:14px;line-height:1.35;gap:6px}.mini-level{width:28px;height:28px;flex-basis:28px;font-size:14px}
 .empty{gap:12px;padding:8px 0 0}.empty p{font-size:15px;line-height:1.4}.empty small{font-size:13px;line-height:1.5}
 .whatsapp{width:100%;font-size:16px;line-height:1.4;min-height:52px;padding:14px 16px;align-items:center}
 .copy{font-size:14px;min-height:44px;padding:10px;margin:0}
 .achievement{padding:13px 12px;gap:10px;margin-bottom:17px}.achievement strong{font-size:20px}.achievement div>span{font-size:13px}.achievement-medal{font-size:30px}.achievement-flame{font-size:24px}
}
@media(max-width:370px){.avatar{display:none}.ranking-location{max-width:55%}.name-card,.ranking{padding:13px}.ticks button{padding:9px 7px;gap:6px}.ticks button[aria-pressed=true]{padding:8px 6px}.ticks button span{font-size:14px}.intro-bottom{display:block}.intro-bottom h2{font-size:12px;margin-bottom:5px}.intro-bottom p{font-size:15px}.achievement-flame{display:none}}

/* Mobile view also works when an embedded browser reports a desktop viewport. */
html.mobile-layout {

 body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 main{padding:0 max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));width:100%;min-width:0}
 .intro{padding:16px 0 12px}
 .intro h1{font-size:clamp(18px,5.45vw,35px);letter-spacing:-.75px;margin-bottom:10px}
 .intro-bottom{gap:8px;align-items:center}.intro-bottom h2{font-size:12px}.intro-bottom p{font-size:13px;font-weight:700}
 .map-card{max-width:100%;border-radius:12px}.map-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#579bc2 #eaf4ed}
 .map-card svg{width:900px;min-width:900px;max-width:none;height:auto;aspect-ratio:740/186}
 .mobile-map-hint{display:flex;justify-content:space-between;align-items:center;margin:0;padding:9px 12px;background:#ecf6f7;color:#285b72;font-size:12px;font-weight:700;border-top:1px solid #c5dfe7}
 .mobile-map-hint span{font-size:22px;line-height:1}
 .selector{padding:13px 0 14px;margin-bottom:14px}
 .selector .section-label{font-size:10px;letter-spacing:.7px;margin:0 0 14px}.level{font-size:11px;padding:7px 10px}
 .selected-level{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px 13px;align-items:center;margin-bottom:17px}
 .level-circle{width:56px;height:56px;font-size:29px;grid-column:1;grid-row:1}
 .selected-copy{display:contents}.selector .selected-copy h3{grid-column:2;grid-row:1;font-size:24px;line-height:1.12;letter-spacing:-.6px;margin:0;overflow-wrap:anywhere}
 .selector .selected-copy .quip{grid-column:1/-1;font-size:17px;font-weight:800;line-height:1.5;margin:2px 0 0}
 .slider-label{font-size:17px;margin:0;font-weight:800}
 .selector input[type=range]{height:48px;margin:0 0 0;padding:0 2px;width:100%}
 input[type=range]::-webkit-slider-thumb{width:32px;height:32px;margin-top:-14px}
 input[type=range]::-moz-range-thumb{width:26px;height:26px}
 .mobile-scale{display:flex;justify-content:space-between;padding:0 6px;margin:-3px 0 13px;color:#204e65;font-size:14px;font-weight:800}
 .mobile-control-hint{display:block;font-size:13px;color:#456d83;margin:0 0 10px}
 .ticks{display:none}
 .ticks button{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:9px;text-align:left;min-height:58px;padding:10px;border:1px solid #c0dae8;border-radius:10px;background:#fbfdff;color:#164b68;touch-action:manipulation}
 .ticks button strong{flex:0 0 30px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:16px;background:#e1eff7}
 .ticks button span{font-size:15px;line-height:1.25;font-weight:700;word-break:normal;overflow-wrap:normal;hyphens:none}
 .ticks button:last-child{grid-column:1/-1}
 .ticks button[aria-pressed=true]{background:#d8edf9;border:2px solid #007cb6;padding:9px}
 .ticks button[aria-pressed=true] strong{background:#007cb6;color:#fff}
 .ticks button:first-child strong{background:#f9e1e1;color:#b62e2e}
 .ticks button:first-child[aria-pressed=true]{border-color:#c53636;background:#fff0f0}
 .ticks button:first-child[aria-pressed=true] strong{background:#cc3737;color:white}
 .ticks button:last-child[aria-pressed=true]{border-color:#d19a30;background:#fff3d0}
 .ticks button:last-child[aria-pressed=true] strong{background:#efb647;color:#59380e}
 .right{display:flex;flex-direction:column;gap:14px;width:100%;min-width:0}
 .name-card,.ranking{padding:16px;min-width:0;width:100%;border-radius:12px}
 .name-card label{font-size:17px;line-height:1.35;margin-bottom:12px}
 .join{gap:10px}.join input{font-size:16px;min-height:50px;padding:13px 12px}
 .join button{font-size:16px;min-height:50px;padding:12px}
 .status{font-size:12px;line-height:1.5;margin-top:10px}
 .ranking .section-label{font-size:10px;letter-spacing:.6px}.live{font-size:10px}
 .ranking-heading{flex-wrap:wrap;align-items:baseline}.ranking-heading h3{font-size:24px;margin:13px 0 6px}.ranking-heading>span{font-size:12px}
 .small{font-size:13px;line-height:1.5}.ranking ol{max-height:none;margin-top:13px}
 .ranking li{gap:7px;padding:14px 0;align-items:center}.rank{flex:0 0 16px;width:16px;font-size:12px}.avatar{flex:0 0 28px;width:28px;height:28px}
 .ranking li>div{flex:1;min-width:0}.ranking li strong{font-size:15px;line-height:1.4}
 .ranking-location{max-width:53%;font-size:14px;line-height:1.35;gap:6px}.mini-level{width:28px;height:28px;flex-basis:28px;font-size:14px}
 .empty{gap:12px;padding:8px 0 0}.empty p{font-size:15px;line-height:1.4}.empty small{font-size:13px;line-height:1.5}
 .whatsapp{width:100%;font-size:16px;line-height:1.4;min-height:52px;padding:14px 16px;align-items:center}
 .copy{font-size:14px;min-height:44px;padding:10px;margin:0}
 .achievement{padding:13px 12px;gap:10px;margin-bottom:17px}.achievement strong{font-size:20px}.achievement div>span{font-size:13px}.achievement-medal{font-size:30px}.achievement-flame{font-size:24px}

 /* zoom already adjusts percentage widths; dividing again makes a narrow column. */
 main{max-width:none;width:100%;margin-inline:auto;zoom:var(--mobile-viewport-scale,1)}
 .intro h1{font-size:clamp(18px,5.45vw,25px);white-space:normal}
 .intro-bottom{flex-wrap:wrap}
 .intro-bottom p{white-space:normal}
}

/* Use an SVG focus ring instead of the browser outline on a zoomed SVG group. */
.map-level-button{-webkit-tap-highlight-color:transparent}
.map-level-button:focus,.map-level-button:focus-visible{outline:none}
.map-focus-ring{opacity:0}
.map-level-button:focus-visible .map-focus-ring{opacity:1}

/* Give each location's phrase its own contrasting card. */
.selector .selected-copy .quip{padding:14px 16px;border:1px solid #e5c78b;border-radius:12px;background:#fff1d6}
.selector.inferno .selected-copy .quip{background:#ffe8dd;border-color:#e7ab8c}

.return-home{display:inline-block;color:#086c9f;font-size:13px;font-weight:700;text-decoration:none;margin-top:18px;padding:6px 0}.return-home:hover{text-decoration:underline}