:root { --ink:#172019; --cream:#f5f1e8; --paper:#fffdf7; --green:#1f6b4b; --lime:#cfef67; --red:#c7533f; --line:#d9d5ca; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; color:var(--ink); font-family:"DM Sans",sans-serif; background:var(--cream); }
button,input { font:inherit; }
.shell { height:100%; display:flex; flex-direction:column; }
.topbar { height:76px; flex:none; display:grid; grid-template-columns:260px minmax(280px,600px) 1fr; align-items:center; gap:28px; padding:0 24px; background:var(--paper); border-bottom:1px solid var(--line); z-index:1001; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:50% 50% 45% 55%; background:var(--ink); color:var(--lime); font-family:"Newsreader",serif; font-size:24px; }
.brand b,.brand small { display:block; }.brand small { margin-top:1px; color:#68716a; font-size:11px; letter-spacing:.03em; }
.search-wrap { position:relative; }
.search-wrap input { width:100%; border:1px solid #c9c7bd; border-radius:12px; padding:13px 16px 13px 44px; background:#f8f6f0; outline:none; }
.search-wrap input:focus { border-color:var(--green); box-shadow:0 0 0 3px #1f6b4b20; }
.search-icon { position:absolute; left:16px; top:8px; font-size:25px; color:#657068; transform:rotate(-18deg); }
.results { position:absolute; top:50px; inset-inline:0; max-height:320px; overflow:auto; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--paper); box-shadow:0 18px 45px #17201925; }
.result { display:flex; justify-content:space-between; width:100%; padding:11px 12px; border:0; border-radius:8px; text-align:left; background:transparent; cursor:pointer; }
.result:hover,.result:focus { background:#eef2e9; }.result small{color:#6a736c}
.button { border:0; border-radius:10px; padding:11px 16px; font-weight:700; cursor:pointer; }
.ghost { justify-self:end; color:var(--ink); background:#ece9df; }.ghost:hover{background:#e1ddd1}
.game-menu{position:relative;justify-self:end}.game-menu summary{list-style:none}.game-menu summary::-webkit-details-marker{display:none}.menu-button{display:flex;align-items:center;gap:8px;background:var(--ink);color:white;cursor:pointer}.menu-button span{font-size:17px}.game-menu[open] .menu-button{background:var(--green)}.menu-popover{position:absolute;z-index:1200;top:48px;right:0;width:250px;padding:7px;border:1px solid var(--line);border-radius:13px;background:var(--paper);box-shadow:0 18px 50px #17201935}.menu-action{display:block;width:100%;padding:11px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}.menu-action:hover{background:#eef2e9}.menu-action b,.menu-action small{display:block}.menu-action small{margin-top:2px;color:#747c75;font-size:11px}.danger-action{color:#a54232}.danger-action:hover{background:#f6e5e1}
.workspace { min-height:0; flex:1; position:relative; }
#map { width:100%; height:100%; background:#dce4dc; }
.leaflet-control-zoom { border:0!important; box-shadow:0 4px 18px #16261a2b!important; }.leaflet-control-zoom a{color:var(--ink)!important}
.map-status { position:absolute; z-index:500; left:18px; bottom:18px; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:99px; background:#fffdf7e8; box-shadow:0 4px 18px #17201920; font-size:12px; backdrop-filter:blur(8px); }
.dot { width:8px; height:8px; border-radius:50%; background:#d1a23d; }.dot.live{background:#36a66b}.dot.demo{background:#718076}
.panel { position:absolute; z-index:600; top:20px; right:20px; width:min(365px,calc(100% - 40px)); padding:32px; border:1px solid #d4d1c7; border-radius:18px; background:#fffdf7f2; box-shadow:0 22px 60px #1720192a; backdrop-filter:blur(12px); }
.close { position:absolute; top:13px; right:15px; width:32px; height:32px; border:0; border-radius:50%; background:transparent; font-size:25px; cursor:pointer; }
.eyebrow { margin:0 0 10px; color:var(--green); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:"Newsreader",serif; line-height:.95; letter-spacing:-.025em; }h1{font-size:49px}h2{font-size:44px;text-transform:capitalize}
#emptyState>p:not(.eyebrow){line-height:1.55;color:#626a63}
.legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:25px; padding-top:20px; border-top:1px solid var(--line); font-size:11px; }
.swatch { display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:50%; }.available{background:#b6c5b6}.claimed{background:var(--red)}.yours{background:var(--lime);border:1px solid #839c33}
.owner-card { display:flex; align-items:center; gap:11px; margin:24px 0; padding:15px; border:1px solid var(--line); border-radius:11px; background:#f5f2e9; line-height:1.35; }.owner-card strong,.owner-card small{display:block}.owner-card small{color:#6b736c;margin-top:3px}.owner-color{width:14px;height:36px;flex:none;border-radius:8px;box-shadow:inset 0 0 0 1px #17201922}
fieldset{margin:0;padding:0;border:0}legend{margin-bottom:8px;font-size:12px;font-weight:700}.team-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.team-choice{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1px solid #cbc8be;border-radius:9px;background:white;font-size:12px;font-weight:700;cursor:pointer}.team-choice i{width:18px;height:18px;border-radius:50%}.team-1 i{background:#e45745}.team-2 i{background:#3f7fc4}.team-3 i{background:#2f9a74}.team-choice.selected{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}.team-choice:disabled{opacity:.5;cursor:not-allowed}.primary{width:100%;margin-top:12px;background:var(--ink);color:white}.primary:hover{background:var(--green)}.primary.danger{background:var(--red)}.hint,.message{font-size:12px;color:#697169}.hint{margin:7px 0 0}.message{min-height:18px;margin:10px 0 0}.message.error{color:#a33d2c}
.leaderboard-dialog{width:min(440px,calc(100% - 28px));padding:32px;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 30px 90px #101c1555}.leaderboard-dialog::backdrop{background:#17201988;backdrop-filter:blur(4px)}.leaderboard-subtitle{margin:10px 0 24px;color:#697169}.leaderboard-rows{display:grid;gap:10px}.leaderboard-row{display:grid;grid-template-columns:28px 13px 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:11px;background:#f5f2e9}.leaderboard-row:first-child{border-color:#aaa66d;background:#f7f3dc}.rank{font-family:"Newsreader",serif;font-size:24px}.team-dot{width:13px;height:34px;border-radius:8px}.team-score{font-family:"Newsreader",serif;font-size:28px;line-height:.8}.team-label strong,.team-label small,.score-wrap small{display:block}.team-label small,.score-wrap small{color:#707870;font-size:11px}.score-wrap{text-align:right}
.confirmation-dialog{width:min(430px,calc(100% - 28px));padding:32px;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 30px 90px #101c1555}.confirmation-dialog::backdrop{background:#17201988;backdrop-filter:blur(4px)}.confirmation-dialog h2{font-size:38px}.confirmation-dialog form>p:not(.eyebrow){color:#697169;line-height:1.45}.confirmation-dialog label{display:block;margin:22px 0 7px;font-size:12px;font-weight:700}.confirmation-dialog input{width:100%;padding:12px;border:1px solid #c9c7bd;border-radius:9px;background:white;outline:none}.confirmation-dialog input:focus{border-color:var(--red);box-shadow:0 0 0 3px #c7533f20}.destructive{width:100%;margin-top:8px;background:var(--red);color:white}.destructive:hover{background:#a94231}.destructive:disabled{opacity:.55;cursor:wait}
.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; }
@media(max-width:760px){.topbar{height:auto;min-height:72px;grid-template-columns:1fr auto;gap:10px;padding:11px 14px}.brand small{display:none}.search-wrap{grid-row:2;grid-column:1/-1}.menu-button{font-size:12px;padding:9px 10px}.panel{top:auto;bottom:14px;right:14px;left:14px;width:auto;max-height:47%;overflow:auto;padding:24px}h1{font-size:37px}h2{font-size:38px}.map-status{bottom:auto;top:12px}}