/* v2.3.0 · Selectable palettes (tokens set by theme.js) and a playful handheld-RPG look:
   chunky outlined boxes with an inner ring, buttons that press down, tiles and chips. */
:root{--bg:#eaf6dc;--mapbg1:#4fb06e;--mapbg2:#2c7d4c;--maptext:#f6ffe9;--panel:#fffdf4;--card:#eef8e4;--input:#fff;--line:#34503c;--ring:#9ad8f2;--text:#20301f;--muted:#5a6d58;--accent:#f8d030;--accent-ink:#3a2c00;--brand:#2f9a55;--info:#2f7fd8;--danger:#e04848;--shadow:#2a3d2e;--pixel:ui-monospace,'Cascadia Mono',Consolas,monospace}

/* Page chrome */
html[data-theme] body{background:var(--bg);color:var(--text)}
html[data-theme] header,html[data-theme] footer{background:var(--bg);color:var(--text);border-color:var(--line);border-width:0 0 3px;border-style:solid}
html[data-theme] footer{border-width:3px 0 0;color:var(--muted)}
html[data-theme] footer button{color:var(--text);box-shadow:none}
html[data-theme] .source-dot{background:var(--brand)}
html[data-theme] h1{color:var(--text)}html[data-theme] h1 span,html[data-theme] .emblem{color:var(--brand)}
html[data-theme] .emblem{text-shadow:3px 3px 0 var(--shadow)}
html[data-theme] .brand p,html[data-theme] .brand b,html[data-theme] .version{color:var(--muted)}
html[data-theme] main{background:radial-gradient(ellipse at 50% 45%,var(--mapbg1) 0,var(--mapbg2) 78%)}
html[data-theme] :is(.worldtag span,.compass,.map-hint){color:var(--maptext)}
.worldtag strong,.map-hint{display:none}
html[data-theme] :is(h2,h3,h4,.civic-head small,.worldtag span){font-family:var(--pixel);letter-spacing:.3px}

/* Boxes: outer outline, inner ring and a hard drop shadow */
html[data-theme] :is(aside,dialog,#detail,#playCta,.walk,#civicToast,#drawGuide,.zoom-controls,#themePicker){background:var(--panel);color:var(--text);border:3px solid var(--line);box-shadow:inset 0 0 0 3px var(--ring),5px 5px 0 var(--shadow)}
html[data-theme] .walk{padding:8px 12px;border-radius:14px}
html[data-theme] #civicToast.error{border-color:var(--danger);color:var(--danger);background:var(--panel)}
html[data-theme] #drawGuide{border-color:var(--danger);color:var(--text)}
html[data-theme] .play-toast{background:var(--panel);color:var(--text);border:2px solid var(--line);box-shadow:3px 3px 0 var(--shadow)}
html[data-theme] .play-toast.kind-joined{border-color:var(--brand)}html[data-theme] .play-toast.kind-sign{border-color:var(--danger)}
html[data-theme] .direction-controls span{background:var(--panel);color:var(--text);border:2px solid var(--line)}
html[data-theme] :is(aside,dialog,#detail,#playCta,.walk,#civicToast) :is(p,label,strong,span,li,dd,dt,h2,h3,h4,legend,figcaption,output,b,em,div){color:inherit}
html[data-theme] :is(#civicPanel,#playPanel,#panel,#detail,#about,#stickerDialog,#playCta,.walk) :is(small,.secondary,dd,.origin,.walk p,.empty,.note,.detail-note,.connection-note){color:var(--muted)}
html[data-theme] #panel .results #count{color:var(--muted)}
.civic-open #drawGuide,.play-open #drawGuide{left:calc(50% - 215px)}
html[data-theme] :is(#civicPanel,#playPanel,#panel,#detail,#about,#stickerDialog) a{color:var(--info)}
html[data-theme] :is(#civicPanel,#playPanel) .civic-head{border-color:var(--line);border-width:0 0 3px}
html[data-theme] :is(#civicPanel,#playPanel) .civic-head :is(#myRole,#playSummary){color:var(--brand)}
html[data-theme] #civicPanel .connection-note{background:var(--card)}
html[data-theme] #civicTabs{border-color:var(--line)}
html[data-theme] :is(.play-section,.civic-section,.detail-section,.event-list article,.member-card,.pay-review,.sign-list article,#signalEditor,.sign-admin,#newStaffForm,#passwordForm){border-color:var(--line)}

/* Buttons */
html[data-theme] :is(nav,.zoom-controls,.direction-controls,.featured,.pad,#civicBody,#civicTabs,#playPanel,#panel,#detail,#about,#stickerDialog,#playCta,.walk,#themePicker) button:not(.icon-button){background:var(--card);color:var(--text);border:2px solid var(--line);border-radius:10px;box-shadow:3px 3px 0 var(--shadow);font-weight:600;transition:transform .06s}
html[data-theme] :is(nav,.zoom-controls,.direction-controls,.featured,.pad,#civicBody,#civicTabs,#playPanel,#panel,#detail,#about,#stickerDialog,#playCta,.walk,#themePicker) button:not(.icon-button):hover{filter:brightness(1.06);border-color:var(--line)}
html[data-theme] :is(nav,.zoom-controls,.direction-controls,.featured,.pad,#civicBody,#civicTabs,#playPanel,#panel,#detail,#about,#stickerDialog,#playCta,.walk,#themePicker) button:not(.icon-button):active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
html[data-theme] :is(nav,#civicBody,#civicTabs,#playPanel,#panel,#detail,#about,#stickerDialog,#playCta,.walk,.direction-controls) :is(.primary,.active,[aria-pressed=true],#download){background:var(--accent);color:var(--accent-ink);border-color:var(--line)}
html[data-theme] #civicPanel #civicTabs button{box-shadow:none;border-color:transparent;background:transparent;color:var(--muted)}
html[data-theme] #civicPanel #civicTabs button.active{background:var(--accent);color:var(--accent-ink);border-color:var(--line)}
html[data-theme] :is(#civicPanel,#playPanel) .civic-head>button,html[data-theme] :is(#dismiss,#close,#detail .x){background:transparent!important;border:0!important;box-shadow:none!important;color:var(--text)}
html[data-theme] #civicBody .icon-button{color:var(--text)}
html[data-theme] #playPanel .play-section .subtle{background:transparent;box-shadow:none}
html[data-theme] .walk button#signQuick{background:var(--danger);color:#fff;border-color:var(--line)}
html[data-theme] .zoom-controls{border-radius:14px}html[data-theme] .zoom-controls output{color:var(--text)}
html[data-theme] .marker{border-color:var(--panel);box-shadow:2px 2px 0 var(--shadow)}

/* Fields */
html[data-theme] :is(#civicBody,#playPanel,#stickerDialog,#panel) :is(input:not([type=checkbox]):not([type=range]):not([type=file]),select,textarea),html[data-theme] .search{background:var(--input);color:var(--text);border:2px solid var(--line);border-radius:10px}
html[data-theme] .search input{color:var(--text)}
html[data-theme] :is(#civicBody,#playPanel,#stickerDialog) :is(input[type=checkbox],input[type=range]){accent-color:var(--brand)}

/* Cards and badges */
html[data-theme] :is(.zone-card,.action-card,.sign-form,.pay-card,.geometry-editor,.evidence-editor,.inline-confirm,.road-row,#list button,.cat,.level-list li,.note,.form-alert){background:var(--card)!important;border:2px solid var(--line)!important;color:var(--text)}
html[data-theme] .zone-card.selected{border-color:var(--danger)!important;box-shadow:3px 3px 0 var(--danger)}
html[data-theme] .cat.on{background:var(--accent)!important;color:var(--accent-ink)}
html[data-theme] #civicBody :is(.zone-badge,.action-badge){background:var(--danger);color:#fff;font-family:var(--pixel);font-weight:700;border-radius:6px}
html[data-theme] #civicBody .action-badge{background:var(--info)}
html[data-theme] #civicBody :is(.zone-badge.resolved,.action-badge.resolved){background:var(--brand);color:#fff}
html[data-theme] #civicBody .action-card>p:first-of-type{color:var(--info)}
html[data-theme] #civicBody .vote-progress{background:var(--input);border:2px solid var(--line);height:12px}
html[data-theme] #civicBody .vote-progress>div{background:var(--brand)}
html[data-theme] #civicBody .vote-progress>i{background:var(--danger)}
html[data-theme] :is(#civicBody,#playPanel) :is(.geometry-editor,.evidence-editor) legend{color:var(--brand);font-family:var(--pixel)}
html[data-theme] #civicBody .side-chip{background:var(--danger)!important;color:#fff!important;border-color:var(--line)!important}
html[data-theme] :is(#civicBody,#playPanel) :is(.me-card small,.play-players small,.player-row strong small,.resolved-copy){color:var(--brand)}
html[data-theme] #playPanel .pay-card{border-color:var(--accent)!important}html[data-theme] #playPanel .pay-card.rejected{border-color:var(--danger)!important}
html[data-theme] .file-button{background:var(--card);color:var(--text);border:2px dashed var(--line)}
html[data-theme] .network-counts strong{color:var(--text)}
html[data-theme] #stickerPreview{border:2px solid var(--line);background:repeating-conic-gradient(var(--card) 0 25%,var(--input) 0 50%) 0 0/20px 20px}

/* Palette picker */
#themeOpen{font-size:17px;padding-inline:12px}
#themePicker{position:fixed;z-index:40;top:78px;right:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;width:min(400px,calc(100% - 32px));padding:12px;border-radius:16px}
#themePicker[hidden]{display:none}
#themePicker button{display:grid;gap:6px;justify-items:center;padding:8px;font-size:13px;font-family:var(--pixel)}
#themePicker button[aria-pressed=true]{outline:3px solid var(--brand);outline-offset:2px}
.swatch{display:flex;gap:3px}.swatch i{width:16px;height:16px;border-radius:4px;border:2px solid var(--line)}

/* Tile forms: few words, big touch targets */
.tile-form{display:grid;gap:10px}
.tile-form .step{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-family:var(--pixel);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.tile-form .step>span:first-child{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:2px solid var(--line);font-size:12px}
.tile-form .step .link{margin-left:auto;background:none!important;border:0!important;box-shadow:none!important;color:var(--info)!important;padding:0!important;font-size:12px!important;text-transform:none}
.tile-form .step .flag{margin-left:auto;font-size:11px;color:var(--danger);text-transform:none}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#civicBody .tile{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;text-align:left;padding:10px!important;min-height:58px;border-radius:12px!important;font-size:13px!important}
#civicBody .tile .tile-icon{grid-row:span 2;font-size:24px;line-height:1}
#civicBody .tile small{font-size:11px;color:var(--muted);font-weight:400}
#civicBody .tile.on{background:var(--accent)!important;color:var(--accent-ink)!important;outline:3px solid var(--brand);outline-offset:1px}
#civicBody .tile.on small{color:var(--accent-ink)}
.binary{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#civicBody .binary .tile{grid-template-columns:1fr;justify-items:center;text-align:center;font-size:15px!important;font-weight:800}
#civicBody .binary .tile.yes.on{background:var(--brand)!important;color:#fff!important}
#civicBody .binary .tile.no.on{background:var(--danger)!important;color:#fff!important}
#civicBody .binary .tile.on small{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px}
#civicBody .chip{font-size:12px!important;padding:6px 11px!important;border-radius:20px!important;box-shadow:2px 2px 0 var(--shadow)!important}
#civicBody .chip.on{background:var(--brand)!important;color:#fff!important}
.zone-summary{display:grid;gap:2px;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card)}
.zone-summary b{font-size:14px}.zone-summary small{font-size:12px}
#civicBody .big{width:100%;font-size:16px!important;padding:14px!important;border-radius:14px!important;margin-top:6px}
.tile-form details summary{cursor:pointer;font-size:12px;color:var(--muted)}
#civicBody .subtle{background:transparent!important;box-shadow:none!important;width:100%}
.tile-form .tiny{font-size:11px!important;margin:0!important}
@media(max-width:420px){.tiles{grid-template-columns:1fr 1fr}#civicBody .tile{min-height:52px;padding:8px!important}}
@media(max-width:700px){#themePicker{top:70px;right:12px}}
@media(prefers-reduced-motion:reduce){html[data-theme] button{transition:none}}

/* Demo mode (?demo): scripted simulation over the live map */
.demo-mode :is(#loginOpen,#logoutButton,#communityOpen,#all,#filters,#playCta,.walk,.worldtag,.direction-controls){display:none!important}
#demoHud{position:absolute;inset:0;z-index:7;pointer-events:none}
#demoHud>*{pointer-events:auto}
.demo-title{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;padding:6px 8px 6px 14px;border-radius:22px;background:var(--panel);color:var(--text);border:3px solid var(--line);box-shadow:3px 3px 0 var(--shadow);font:800 12px var(--pixel);white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.demo-exit{font:700 11px system-ui;color:var(--text);text-decoration:none;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:3px 9px}
.demo-stats{position:absolute;top:56px;left:50%;transform:translateX(-50%);display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 180px)}
.demo-stats div{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:5px;padding:4px 10px;background:var(--panel);color:var(--text);border:2px solid var(--line);border-radius:12px;box-shadow:2px 2px 0 var(--shadow)}
.demo-stats span{grid-row:span 2;font-size:18px}.demo-stats b{font:900 15px var(--pixel)}.demo-stats small{font-size:10px;color:var(--muted)}
.demo-votes{position:absolute;right:24px;bottom:92px;width:230px;display:grid;gap:8px;padding:10px 12px;background:var(--panel);color:var(--text);border:3px solid var(--line);border-radius:14px;box-shadow:inset 0 0 0 3px var(--ring),4px 4px 0 var(--shadow)}
.demo-votes[hidden]{display:none}.demo-votes h3{margin:0;font:800 12px var(--pixel)}
.demo-vote small{display:block;font-size:11px;color:var(--muted)}.demo-vote small:first-child{color:var(--text);font-weight:700}
.demo-vote-bar{position:relative;height:10px;margin:3px 0;border:2px solid var(--line);border-radius:6px;background:var(--input);overflow:hidden}.demo-vote-bar i{position:absolute;inset:0 auto 0 0;background:var(--brand);transition:width .4s}.demo-vote-bar em{position:absolute;left:51%;top:0;bottom:0;border-left:2px dashed var(--danger)}
.demo-bar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:min(640px,calc(100% - 24px));padding:10px 12px;background:var(--panel);color:var(--text);border:3px solid var(--line);border-radius:16px;box-shadow:inset 0 0 0 3px var(--ring),5px 5px 0 var(--shadow)}
.demo-bar button,.demo-end button{cursor:pointer;background:var(--card);color:var(--text);border:2px solid var(--line);border-radius:10px;padding:8px 11px;font-weight:800;box-shadow:2px 2px 0 var(--shadow)}
.demo-bar button:active,.demo-end button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--shadow)}
.demo-bar .demo-play,.demo-end .demo-play{background:var(--accent);color:var(--accent-ink);min-width:104px;font-size:15px}
.demo-speed{display:flex;gap:4px}.demo-speed button{padding:6px 8px;font-size:12px}.demo-speed button[aria-pressed=true]{background:var(--brand);color:#fff}
.demo-progress{flex:1;min-width:60px;height:12px;border:2px solid var(--line);border-radius:8px;background:var(--input);overflow:hidden}.demo-progress div{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--brand) 0 10px,var(--accent) 10px 12px)}
#demoTime{font:700 12px var(--pixel);white-space:nowrap}
#demoFx{position:absolute;inset:0;pointer-events:none!important;overflow:hidden}
.demo-float{position:absolute;left:0;top:0;padding:4px 9px;border-radius:12px;border:2px solid var(--line);font:900 13px var(--pixel);white-space:nowrap;box-shadow:2px 2px 0 var(--shadow);animation:demoPop .3s ease-out}
.demo-float.coin{background:#f8d030;color:#3a2c00}.demo-float.zone{background:#e84848;color:#fff}.demo-float.ok{background:#2f9a55;color:#fff}
@keyframes demoPop{from{opacity:0;scale:.6}}
@media(prefers-reduced-motion:reduce){.demo-float{animation:none}.demo-vote-bar i{transition:none}}
.demo-end{position:absolute;inset:0;display:grid;place-items:center;background:#0006;padding:16px}
.demo-end[hidden]{display:none}
.demo-end-card{width:min(520px,100%);padding:22px;background:var(--panel);color:var(--text);border:3px solid var(--line);border-radius:18px;box-shadow:inset 0 0 0 3px var(--ring),6px 6px 0 var(--shadow)}
.demo-end-card h2{margin:0 0 14px;font:900 20px var(--pixel)}.demo-end-card p{font-size:12px;color:var(--muted)}
.demo-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.demo-summary div{display:grid;gap:2px;padding:10px;background:var(--card);border:2px solid var(--line);border-radius:12px}.demo-summary span{font-size:20px}.demo-summary b{font:900 20px var(--pixel)}.demo-summary small{font-size:11px;color:var(--muted)}
.demo-end-actions{display:flex;gap:8px;margin-top:12px}
.demo-mode #playToasts{top:118px}
@media(max-width:700px){
 .demo-title{top:8px;font-size:10px}
 .demo-stats{top:48px;max-width:calc(100% - 16px);gap:4px}.demo-stats div{padding:3px 7px}.demo-stats span{font-size:14px}.demo-stats b{font-size:12px}.demo-stats small{font-size:9px}
 .demo-votes{left:12px;right:12px;width:auto;bottom:88px;padding:8px 10px}
 .demo-bar{bottom:10px;gap:6px;padding:8px}.demo-bar .demo-play{min-width:0;font-size:13px}#demoTime{display:none}
 .demo-mode #playToasts{top:auto;bottom:84px}.demo-mode #playToasts .play-toast:nth-child(n+3){display:none}
 .demo-votes,.demo-long{display:none!important}
}

/* v2.5.0 · sign form, review queue and delete-my-data in the palettes */
html[data-theme] #playPanel button.chip{background:var(--card);color:var(--text);border:2px solid var(--line);box-shadow:2px 2px 0 var(--shadow);font-size:12px;padding:6px 10px;border-radius:18px}
html[data-theme] #playPanel button.chip.on{background:var(--brand)!important;color:#fff!important}
html[data-theme] :is(.sign-form .chars,.sign-form h4 small,.play-section h4 small){color:var(--muted)}
html[data-theme] .evidence-thumb{border:2px solid var(--line)}
html[data-theme] .my-signs li.review-pending small{color:var(--info)}html[data-theme] .my-signs li.review-approved small{color:var(--brand)}html[data-theme] .my-signs li.review-rejected small{color:var(--danger)}
html[data-theme] #playPanel .forget{color:var(--danger)!important}
html[data-theme] .forget-confirm{background:var(--card);border:2px solid var(--danger)}
html[data-theme] #playPanel .danger{background:var(--danger)!important;color:#fff!important;border-color:var(--line)!important}
html[data-theme] :is(.sign-review,.sign-photo){border-color:var(--line)}html[data-theme] .sign-photo{background:var(--input)}