/* Little Sparks shares the homepage palette and type, with no remote assets. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled, fieldset:disabled { cursor: not-allowed; opacity: .65; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
.village-main { padding-bottom: 75px; }
.village-intro { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-block: 65px 45px; }
.village-intro h1 { font-size: clamp(44px, 5vw, 68px); }
.village-intro > div > p:last-child { color: var(--muted); max-width: 610px; font-size: 15px; }
.village-invitation { flex-shrink: 0; }
.village-invitation p { color: var(--text); font: 22px/1.5 var(--serif); margin-bottom: 25px; }
.village-invitation em { color: var(--mint); }
.scene-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.scene-toolbar h2 { font: 20px var(--serif); letter-spacing: 0; margin: 0; }
.small-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #526961; border-radius: 5px; padding: 8px 14px; background: #14221f; color: var(--text); font-size: 12px; }
.small-button:hover { background: #253d33; }
.simulation-note { font-size: 12px; color: var(--muted); max-width: 840px; }
.landscape { height: 460px; position: relative; border: 1px solid #3b5148; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 65% 0, #39545755, transparent 65%), #132327; isolation: isolate; }
.landscape::before { content: ''; position: absolute; inset: 0 0 48%; opacity: .5; background-image: radial-gradient(circle at 10% 20%, #cee8c5 1px, transparent 2px), radial-gradient(circle at 35% 40%, #cee8c5 1px, transparent 2px), radial-gradient(circle at 55% 15%, #cee8c5 1px, transparent 2px), radial-gradient(circle at 90% 35%, #cee8c5 1px, transparent 2px); }
.scene-moon { position: absolute; width: 49px; height: 49px; right: 16%; top: 36px; background: #dbe5b7; border-radius: 50%; box-shadow: 0 0 55px #dbe5b715; }
.scene-hill { position: absolute; width: 140%; border-radius: 50% 50% 0 0; }
.hill-back { height: 100%; top: 85px; left: -30%; background: #263e37; transform: rotate(2deg); }
.hill-front { height: 100%; top: 110px; left: -4%; background: #304a3b; transform: rotate(-2deg); }
.scene-path { position: absolute; left: 38%; top: 44%; width: 20%; height: 70%; background: #74806833; transform: rotate(55deg); border-radius: 50%; }
.commons-homes { position:absolute; inset:0; z-index:1; pointer-events:none; }
.commons-home { position:absolute; display:flex; flex-direction:column; align-items:center; min-width:0; height:86px; padding:0; text-align:center; border-radius:50%; color:var(--shell,#b9ebcf); pointer-events:auto; }
.saved-yard { display:block; position:relative; width:100%; height:66px; flex-shrink:0; border-radius:50%; background:radial-gradient(ellipse at center,#718f4f66 0,#506d3b44 48%,transparent 72%); }
.yard-object { position:absolute; transform:translate(-50%,-50%); font-size:14px; line-height:1; pointer-events:none; }
.yard-path { font-size:24px; color:#c6c29b; }.yard-decoration { color:#ffe4a2; }
.commons-home:hover,.commons-home:focus-visible { background:#b9ebcf0a; outline:2px solid var(--shell,#b9ebcf); outline-offset:2px; }
.cottage-shape { position:relative; display:block; width:22px; height:16px; margin:0 auto; border:1px solid var(--shell,#b9ebcf); background:#1b332d; }
.cottage-shape::before { content:''; position:absolute; top:-11px; left:-4px; border-inline:14px solid transparent; border-bottom:11px solid var(--shell,#b9ebcf); }
.cottage-shape::after { content:''; position:absolute; width:6px; height:10px; bottom:0; left:7px; background:var(--shell,#b9ebcf); }
.cottage-name { display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:10px; line-height:1.4; }
.commons-recordings { margin-top:18px; font-size:13px; }
.commons-recordings summary { cursor:pointer; min-height:44px; padding-block:12px; color:var(--mint); }
.commons-recordings article { border:1px solid var(--line); border-radius:8px; padding:14px; margin-block:12px; overflow-wrap:anywhere; }
.commons-recordings article p { margin:5px 0; }
.scene-sign { position: absolute; right: 7%; top: 29%; font: 9px var(--mono); letter-spacing: 1px; border-bottom: 2px solid #779780; padding-bottom: 5px; color: #d1debd; }
.scene-coordinate { position: absolute; left: 20px; bottom: 15px; font: 8px var(--mono); letter-spacing: 1.5px; color: #d1debd; }
.scene-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 21px/1.5 var(--serif); max-width: 290px; color: #edf2df; width: 75%; }
.village-chicken { position: absolute; right: 7%; bottom: 15px; border: none; background: transparent; font-size: 34px; padding: 2px 8px; min-height: 48px; }
.chicken-message { color: var(--muted); font: 11px/1.6 var(--mono); margin-top: 12px; }
.village-resident { position: absolute; z-index: 2; border: 0; padding: 0; width: 64px; height: 67px; background: transparent; transform: translate(-50%, -50%); color: var(--text); }
.village-resident:hover, .village-resident:focus-visible { z-index: 5; }
.robot { --shell: #b9ebcf; --dark: #182d2b; display: inline-block; position: relative; width: 48px; height: 66px; vertical-align: middle; flex-shrink: 0; }
.color-lavender { --shell: #d2bdec; }.color-peach { --shell: #efbaa1; }.color-sky { --shell: #a7d7ed; }.color-gold { --shell: #ebd58e; }
.robot-antenna { position: absolute; width: 2px; height: 10px; background: var(--shell); left: 23px; top: 4px; }
.robot-antenna::before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--shell); left: -3px; top: -3px; box-shadow: 0 0 10px #d2ffe22a; }
.antenna-sprout .robot-antenna::before { border-radius: 8px 0; transform: rotate(-25deg); width: 11px; height: 7px; }
.antenna-sprout .robot-antenna::after { content: ''; position: absolute; width: 9px; height: 6px; border-radius: 0 8px; background: var(--shell); left: -8px; top: 1px; }
.antenna-bolt .robot-antenna::before { border-radius: 0; width: 10px; height: 15px; top: -7px; clip-path: polygon(50% 0, 100% 0, 65% 40%, 100% 40%, 20% 100%, 40% 55%, 0 55%); }
.robot-face { position: absolute; width: 40px; height: 28px; left: 4px; top: 13px; border-radius: 10px; background: var(--shell); border: 2px solid #ffffff38; box-shadow: 0 3px 0 #0003; }
.robot-face::before { content: ''; position: absolute; width: 5px; height: 7px; border-radius: 50%; background: var(--dark); left: 8px; top: 7px; box-shadow: 15px 0 0 var(--dark); }
.robot-face::after { content: ''; position: absolute; width: 8px; height: 3px; border-bottom: 1px solid var(--dark); border-radius: 50%; left: 14px; bottom: 4px; }
.robot-ears { position: absolute; width: 48px; height: 12px; background: var(--shell); opacity: .65; border-radius: 4px; top: 22px; left: 0; }
.robot-body { position: absolute; width: 28px; height: 17px; left: 10px; top: 42px; border-radius: 4px 4px 7px 7px; background: var(--shell); border: 2px solid #ffffff20; }
.robot-body::before { content: '♡'; position: absolute; inset: -3px 0 0; text-align: center; font: 15px sans-serif; color: var(--dark); }
.robot-feet { position: absolute; left: 11px; top: 59px; width: 10px; height: 6px; border-radius: 2px; background: var(--shell); box-shadow: 16px 0 0 var(--shell); }
.robot-name { display: block; max-width: 90px; margin: -1px -13px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 10px/1.4 'Segoe UI', sans-serif; color: #f5f1dd; text-shadow: 0 1px 3px #000; }
.robot-bubble { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); padding: 8px 10px; max-width: 210px; width: max-content; border: 1px solid #cde0c1; border-radius: 10px 10px 10px 0; color: #193227; background: #e6eed8; font-size: 12px; line-height: 1.45; pointer-events: none; overflow-wrap:anywhere; }
.bubble-source { display:block; margin-bottom:4px; font-size:9px; font-weight:600; }
.robot-bubble:empty { display: none; }
.new-spark .robot { animation: spark-arrival 1.1s ease-out 1; }
@keyframes spark-arrival { 0% { transform: translateY(-22px) scale(.5); opacity: 0; } 65% { transform: translateY(0) scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
.village-columns { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; padding-top: 70px; }
.village-columns h2 { font-size: 35px; }
.panel-copy { font-size: 14px; color: var(--muted); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
label { display: block; font-size: 13px; color: var(--text); margin: 20px 0 7px; }
label span { color: var(--muted); font-size: 11px; }
input, select { background: #12201e; border: 1px solid #5c7167; border-radius: 5px; color: var(--text); min-height: 46px; width: 100%; padding: 10px 12px; font-size: 14px; }
.field-help { color: var(--muted); font-size: 11px; line-height: 1.7; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.robot-preview { display: flex; align-items: center; justify-content: center; border: 1px dashed #3b5148; border-radius: 6px; min-height: 110px; margin-block: 25px; background: #16251f; }
#create-submit { width: 100%; border: 0; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { color: var(--mint); font-size: 13px; line-height: 1.7; }
.private-link-panel { padding: 22px; border: 1px solid #7ba68a; background: #182b22; border-radius: 6px; margin-top: 25px; }
.private-link-panel p { font-size: 13px; color: var(--muted); }
.private-link-panel input { font: 11px var(--mono); margin-bottom: 15px; }
.private-link-panel .small-button { margin: 5px 5px 5px 0; }
.directory-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block: 24px 15px; }
#page-status { color: var(--muted); font-size: 11px; }
.resident-directory { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 650px; overflow-y: auto; scrollbar-gutter: stable; }
.resident-directory li { min-width: 0; }
.directory-resident { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 12px; border: 1px solid #354b40; border-radius: 7px; background: #12201b; text-align: left; color: var(--text); min-height: 100px; }
.directory-resident:hover { border-color: #9dc7ab; background: #1b3025; }
.directory-resident > span:last-child { min-width: 0; }
.directory-resident strong { font-size: 13px; font-weight: 500; display: block; overflow-wrap: anywhere; }
.directory-resident > span > span { display: block; font-size: 10px; color: var(--muted); }
.resident-directory details { border: 1px solid var(--line); padding-inline: 10px; border-radius: 5px; }
.pagination { display: flex; gap: 12px; margin-top: 20px; }
.pagination a { flex: 1; }
dialog { background: #13221e; color: var(--text); border: 1px solid #648574; border-radius: 12px; padding: 28px; width: min(500px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow: auto; }
dialog::backdrop { background: #050c10c9; }
.profile-top { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.profile-top .eyebrow { font-size: 9px; }
.profile-robot { text-align: center; margin: 25px 0; }
.profile-robot .robot { transform: scale(1.5); }
dialog h2 { overflow-wrap: anywhere; margin-top: 30px; }
dl { font-size: 13px; }dt { color: var(--muted); margin-top: 12px; }dd { margin: 2px 0 0; overflow-wrap: anywhere; }
@media(max-width: 1050px) { .village-columns { gap: 35px; }.resident-directory { grid-template-columns: 1fr; } }
@media(max-width: 650px) {
    .village-intro { display: block; padding-block: 45px 30px; }.village-invitation { margin-top: 25px; }.village-invitation p { font-size: 19px; }.village-intro h1 { font-size: 44px; }
    .village-columns { grid-template-columns: 1fr; gap: 50px; padding-top: 45px; }.landscape { height: 430px; }.scene-toolbar h2 { font-size: 18px; }.scene-toolbar .small-button { max-width: 120px; }
    .scene-coordinate { font-size: 7px; left: 12px; }.scene-moon { right: 14%; top: 20px; width: 28px; height: 28px; }
    .form-row { gap: 12px; }.resident-directory { max-height: 550px; grid-template-columns: 1fr; }.directory-resident { min-height: 95px; }.robot-bubble { max-width: 180px; font-size: 11px; }
}
@media(prefers-reduced-motion: reduce) { .new-spark .robot { animation: none; } }
@media(forced-colors: active) { .robot-face, .robot-body, .robot-ears, .robot-feet, .robot-antenna { background: ButtonText; }.robot-face::before, .robot-face::after { background: ButtonFace; }.robot-bubble { border: 1px solid CanvasText; } }