.constellation { box-sizing:border-box; width:min(700px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:28px 32px 24px; border:1px solid #9a7943; border-radius:20px; background:radial-gradient(ellipse at 50% 40%,#17273a,#080e18 75%); color:#f2e6c9; box-shadow:0 20px 100px #000c; text-align:center; font:15px/1.5 'Segoe UI',Arial,sans-serif; scrollbar-width:thin; scrollbar-color:#9a7943 #080e18; }
.constellation::backdrop { background:#030609d9; backdrop-filter:blur(5px); }
.constellation-close { position:absolute; top:8px; right:12px; background:none; color:#e2d3b4; border:0; font:30px Arial; padding:6px 12px; cursor:pointer; }
.constellation-eyebrow { margin:0 25px 8px; color:#bd9c60; font-size:11px; letter-spacing:.15em; text-transform:uppercase; }
.constellation h2 { margin:0 12px 10px; font-size:26px; font-weight:600; }
.constellation-instructions { max-width:500px; margin:0 auto 16px; color:#aab7c7; font-size:13px; }
.constellation-sky { position:relative; width:min(100%,460px,calc(100dvh - 300px)); min-width:200px; aspect-ratio:1; margin:0 auto; border-radius:50%; border:1px solid #8d723955; background:radial-gradient(ellipse at 45% 40%,#21385155,transparent 65%),#070f1b; box-shadow:inset 0 0 60px #0008,0 0 30px #50739b17; }
.constellation-sky svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.constellation-lines line { stroke:#b7d9ef; stroke-width:1.5px; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-opacity:.82; }
.constellation-star { position:absolute; transform:translate(-50%,-50%); width:36px; height:36px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; z-index:2; }
.constellation-star::after { content:''; display:block; margin:auto; width:6px; height:6px; border-radius:50%; background:#f7f5df; box-shadow:0 0 5px #fff,0 0 13px #aed8ff,0 0 24px #7ab3e97a; transition:box-shadow .3s,transform .3s; }
.constellation-star[aria-pressed=true] { outline:1px solid #e2bf70; background:#e2bf7019; }
.constellation-star:focus-visible { outline:2px solid #f7d68e; outline-offset:1px; }
.constellation-star:hover::after { transform:scale(1.5); }
.constellation-star:disabled { cursor:default; }
.constellation-dust { position:absolute; width:1px; height:1px; background:#cbdfff; pointer-events:none; }
.constellation-status { min-height:45px; margin:16px 0 12px; font-size:14px; }
.constellation-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.constellation-actions button { border:1px solid #957645; border-radius:6px; padding:11px 18px; color:#e7d4b0; background:#141c27; font:inherit; font-size:13px; cursor:pointer; }
.constellation-actions .constellation-check { background:#e2c488; color:#241f17; }
.constellation-actions button:disabled { opacity:.55; cursor:default; }
.constellation-sky.is-solved { box-shadow:0 0 40px #e7bd5355; transition:box-shadow 1s; }
.is-solved .constellation-lines line { stroke:#ffe3a1; filter:drop-shadow(0 0 1px #ffc957); }
.is-solved .constellation-star::after { box-shadow:0 0 8px #fff,0 0 22px #ffd26d; }
@media(max-width:480px) { .constellation { padding:28px 14px 20px; } .constellation h2 { font-size:21px; } .constellation-instructions { font-size:12px; } .constellation-star { width:30px;height:30px; } }
@media(prefers-reduced-motion:reduce) { .constellation *, .constellation-sky.is-solved { transition:none; } }
.constellation { width:min(740px,calc(100vw - 24px)); }
.constellation-sky { width:min(100%,390px); transition:background 1.2s,box-shadow 1.2s,border-radius 1.2s; }
.constellation-sky.is-map { border-radius:8px; background:#ddcda8; box-shadow:inset 0 0 35px #6b47262a; border-color:#ad8b53; cursor:crosshair; touch-action:pan-y; }
.coordinate-grid { display:none; }
.is-map .coordinate-grid { display:block; }
.coordinate-grid path { stroke:#816b4a;stroke-width:.17;opacity:.55;fill:none; }
.coordinate-grid text { fill:#59482f;font:3px Arial;text-anchor:middle; }
.is-map .constellation-star,.is-map .constellation-dust { display:none; }
.coordinate-crosshair { display:none;position:absolute;width:16px;height:16px;border:1px solid #924628;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none; }
.is-map .coordinate-crosshair { display:block; }
.coordinate-marker { position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:#69432a;color:#fff5da;width:19px;height:19px;font:12px/19px Arial;pointer-events:none; }
.coordinate-controls { display:flex;align-items:center;justify-content:center;gap:15px;margin:12px 0;flex-wrap:wrap; }
.coordinate-controls[hidden],.coordinate-note[hidden] { display:none; }
.coordinate-readout { color:#f1d59c;font-variant-numeric:tabular-nums; }
.coordinate-place { border:1px solid #ab8a53;border-radius:5px;padding:9px 14px;background:#e2c488;color:#241f17;cursor:pointer;font:13px 'Segoe UI',Arial; }
.coordinate-note { margin:14px auto 0;padding:20px 18px;background:#e9ddc0;color:#493621;border-radius:4px;box-shadow:0 4px 20px #0003;max-width:560px; }
.coordinate-note h3 { margin:0 0 5px;font-size:18px;font-weight:500; }
.coordinate-note p { margin:0 0 12px;font-size:12px; }
.coordinate-list { display:flex;justify-content:center;flex-wrap:wrap;gap:7px; }
.coordinate-list button { padding:7px 9px;border:1px solid #a58b61;background:#f4ecd6;color:#493621;border-radius:4px;font:12px 'Segoe UI',Arial;cursor:pointer; }
.coordinate-list button[aria-pressed=true] { outline:2px solid #805225;outline-offset:1px;background:#d7bb84; }
.coordinate-list .is-placed { box-shadow:inset 0 -3px #846443; }
@media(max-width:480px) { .coordinate-note { padding:14px 10px; } .constellation-sky { min-width:0; } }

/* Supplied map artwork keeps its native proportions; hit targets use its grid. */
.constellation-sky.is-map {width:min(100%,520px);aspect-ratio:1;border:0;border-radius:0;background:transparent;box-shadow:none;}
.coordinate-art {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:0;transition:opacity .9s;}
.is-map .coordinate-art {opacity:1;}
.coordinate-marker {box-sizing:border-box;width:16px;height:16px;border:2px solid #bd2725;background:#c328231a;box-shadow:0 0 0 1px #f3b28c55;border-radius:50%;}
.coordinate-crosshair {box-sizing:border-box;width:22px;height:22px;border:1px dashed #b9201f;background:#bd272511;}
@media(max-width:480px){.coordinate-marker{width:12px;height:12px;border-width:2px}.coordinate-crosshair{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.coordinate-art{transition:none}}

.coordinate-note {max-width:none;padding:0;background:none;box-shadow:none;color:#decea9;}
.coordinate-note .coordinate-scroll-hint {font:12px/1.5 'Segoe UI',Arial;margin:0 0 5px;}
.coordinate-note-scroll {overflow-x:auto;scrollbar-width:thin;scrollbar-color:#b88b48 #1b2025;overscroll-behavior-x:contain;border-radius:8px;}
.coordinate-note-sheet {position:relative;width:100%;min-width:480px;aspect-ratio:1609 / 978;}
.coordinate-note-sheet>img {display:block;width:100%;height:auto;pointer-events:none;}
.coordinate-note .coordinate-list {position:absolute;inset:0;display:block;max-width:none;margin:0;}
.coordinate-note .coordinate-list button {position:absolute;top:41%;height:16%;width:28%;padding:0;margin:0;background:transparent;border:0;font-size:0;color:transparent;border-radius:0;box-shadow:none;}
.coordinate-note .coordinate-list button:nth-child(1){left:6%;}
.coordinate-note .coordinate-list button:nth-child(2){left:37%;}
.coordinate-note .coordinate-list button:nth-child(3){left:67%;}
.coordinate-note .coordinate-list button:nth-child(4){left:6%;top:60%;height:17%;}
.coordinate-note .coordinate-list button:nth-child(5){left:37%;top:60%;height:17%;}
.coordinate-note .coordinate-list button:nth-child(6){left:67%;top:60%;height:17%;}
.coordinate-note .coordinate-list button:nth-child(7){left:36%;top:79%;height:16%;width:29%;}
.coordinate-note .coordinate-list button[aria-pressed=true] {outline:none;background:transparent;}
.coordinate-note .coordinate-list button[aria-pressed=true]::before {content:'';position:absolute;left:1%;width:98%;aspect-ratio:2172 / 724;bottom:-48%;background:url('mystery-red-underline.png') center / 100% 100% no-repeat;pointer-events:none;}
.coordinate-note .coordinate-list button:focus-visible {outline:1px dashed #a42825;outline-offset:3px;}
.coordinate-note .coordinate-list button.is-placed::after {content:'✓';position:absolute;right:1px;top:0;color:#ac2825;font:16px/1 Arial;}

.coordinate-note {margin:0 auto 16px;}

/* Single-line coordinates on the revised note. */
.coordinate-note .coordinate-list button {top:44%;height:10%;width:29%;}
.coordinate-note .coordinate-list button:nth-child(1){left:6%;}
.coordinate-note .coordinate-list button:nth-child(2){left:37%;}
.coordinate-note .coordinate-list button:nth-child(3){left:68%;}
.coordinate-note .coordinate-list button:nth-child(4){left:6%;top:57%;height:10%;}
.coordinate-note .coordinate-list button:nth-child(5){left:37%;top:57%;height:10%;}
.coordinate-note .coordinate-list button:nth-child(6){left:68%;top:57%;height:10%;}
.coordinate-note .coordinate-list button:nth-child(7){left:35%;top:69%;height:10%;width:31%;}
.coordinate-note .coordinate-list button[aria-pressed=true]::before {bottom:auto;top:20%;}

/* Original game cursor sprites, restricted to the open puzzle. */
@media (hover:hover) and (pointer:fine) {
 .constellation, .constellation *, .star-note, .star-note * {cursor:url("puzzle-cursor-magnifier.png") 8 8,auto !important;}
 .constellation button:not(:disabled):hover, .star-note button:not(:disabled):hover {cursor:url("puzzle-cursor-magnifier-active.png") 12 12,pointer !important;}
 .constellation .constellation-sky:not(.is-map), .constellation .constellation-sky:not(.is-map) * {cursor:url("puzzle-cursor-hand.png") 15 15,grab !important;}
 .constellation .constellation-sky:not(.is-map) .constellation-star:hover {cursor:url("puzzle-cursor-hand-active.png") 15 15,pointer !important;}
 .constellation .constellation-sky:not(.is-map).is-connecting, .constellation .constellation-sky:not(.is-map).is-connecting *, .constellation .constellation-sky:not(.is-map).is-connecting .constellation-star:hover {cursor:url("puzzle-cursor-hand-closed.png") 15 15,grabbing !important;}
}
.constellation-star {touch-action:none;}
.constellation-lines .connection-preview {stroke-dasharray:5 6;opacity:.65;pointer-events:none;}

/* Desktop workspace; mobile retains its original document layout. */
.constellation-workspace,.constellation-map-panel {display:contents;}
@media (min-width:1024px) {
 .constellation[open] {display:flex;flex-direction:column;width:100vw;height:100dvh;max-width:none;max-height:none;inset:0;margin:0;padding:24px 40px;border:0;border-radius:0;overflow:auto;}
 .constellation .mystery-progress {width:480px;flex-shrink:0;margin:10px auto 18px;}
 .constellation-workspace {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;flex:1;min-height:0;}
 .constellation-map-panel {display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;}
 .constellation .coordinate-note {width:100%;margin:0;min-width:0;}
 .constellation .coordinate-note-sheet {min-width:0;}
 .constellation .coordinate-scroll-hint {display:none;}
 .constellation .coordinate-note-scroll {overflow:visible;}
 .constellation .constellation-sky.is-map {width:min(100%,calc((100dvh - 270px) * 1));min-width:0;flex-shrink:0;}
 .constellation .coordinate-controls {margin:8px 0 0;}
 .constellation .constellation-status {min-height:22px;margin:10px 0;}
 .constellation-workspace:has(.coordinate-note[hidden]) {grid-template-columns:minmax(0,1fr);}
 .constellation .constellation-sky:not(.is-map) {width:min(100%,calc(100dvh - 320px));min-width:220px;}
 .constellation .constellation-instructions {max-width:750px;}
 .constellation-actions {flex-shrink:0;}
 .star-note[open] {display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100dvh;max-width:none;max-height:none;inset:0;margin:0;border-radius:0;overflow:auto;}
 .star-note .mystery-progress {width:480px;flex-shrink:0;}
 .star-note .star-answer {width:340px;}
}
@media (min-width:1024px) and (max-height:650px) {
 .constellation[open] {padding:14px 30px;}
 .constellation-workspace {min-height:310px;}
 .constellation .constellation-sky.is-map {width:min(100%,340px);}
 .star-note[open] {justify-content:flex-start;}
}

/* The constellation stage opens onto a rectangular sky chart. */
.constellation .constellation-sky:not(.is-map) {
 width:100%;min-width:0;aspect-ratio:4 / 3;border-radius:8px;overflow:hidden;
 background:radial-gradient(ellipse at 65% 25%,#263b5c77,transparent 65%),radial-gradient(ellipse at 20% 85%,#23385c66,transparent 60%),#050b17;
}
.constellation-dust {width:var(--star-size,1px);height:var(--star-size,1px);border-radius:50%;box-shadow:0 0 5px #b5d2ff88;}
@media(min-width:1024px){
 .constellation-workspace:has(.coordinate-note[hidden]) {align-items:stretch;}
 .constellation-workspace:has(.coordinate-note[hidden]) .constellation-map-panel {height:100%;}
 .constellation .constellation-sky:not(.is-map) {width:100%;height:100%;min-height:260px;aspect-ratio:auto;}
}

/* Supplied parchment belongs to the map and riddle, never the night sky. */
.constellation:has(.constellation-sky.is-map),.star-note {
 background:#f1dfba url("mystery-puzzle-parchment.webp") center / cover no-repeat;
 color:#49351f;
}
.constellation:has(.is-map) .mystery-progress {
 --step-accent:#795126;--step-muted:#77664e;--step-track:#b59c74;
}
.constellation:has(.is-map) .mystery-progress .is-complete .mystery-progress-number {color:#fff5df;}
.constellation:has(.is-map) .constellation-eyebrow,
.constellation:has(.is-map) .constellation-close,
.constellation:has(.is-map) .coordinate-readout,
.constellation:has(.is-map) .coordinate-note {color:#624521;}
.constellation:has(.is-map) .constellation-actions button {
 background:#ead3a6;color:#49351f;border-color:#987341;
}
.constellation:has(.is-map) .constellation-actions .constellation-check,
.constellation:has(.is-map) .coordinate-place {background:#d9b777;color:#372511;border-color:#896030;}

/* The night stage is one edge-to-edge sky, with controls above it. */
.constellation[open]:has(.constellation-sky:not(.is-map)) {
 display:flex;flex-direction:column;isolation:isolate;box-sizing:border-box;
 width:100vw;height:100dvh;max-width:none;max-height:none;inset:0;margin:0;
 padding:24px 32px;border:0;border-radius:0;overflow:auto;
}
.constellation:has(.constellation-sky:not(.is-map)) .constellation-workspace,
.constellation:has(.constellation-sky:not(.is-map)) .constellation-map-panel {display:contents;}
.constellation .constellation-sky:not(.is-map) {
 position:absolute;inset:0;z-index:-1;width:100%;height:100%;min-height:0;
 margin:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;
}
.constellation:has(.constellation-sky:not(.is-map)) .mystery-progress {width:min(480px,100%);flex-shrink:0;}
.constellation:has(.constellation-sky:not(.is-map)) .constellation-status {margin-top:auto;padding-top:16px;}
.constellation:has(.constellation-sky:not(.is-map)) h2,
.constellation:has(.constellation-sky:not(.is-map)) .constellation-instructions,
.constellation:has(.constellation-sky:not(.is-map)) .constellation-status {text-shadow:0 2px 6px #000;}
@media(max-width:600px){
 .constellation[open]:has(.constellation-sky:not(.is-map)) {padding:32px 16px 20px;}
 .constellation:has(.constellation-sky:not(.is-map)) .constellation-instructions {font-size:11px;}
}

.constellation-sky:not(.is-map) .constellation-dust {animation:sky-twinkle var(--twinkle-time,6s) ease-in-out var(--delay,0s) infinite alternate;}
@keyframes sky-twinkle {from{filter:brightness(.75)}to{filter:brightness(1.3)}}
.sky-meteor {position:absolute;width:2px;height:2px;background:#fff8e8;border-radius:50%;pointer-events:none;z-index:1;box-shadow:0 0 5px 2px #d4e9ff99;animation:sky-meteor-flight var(--meteor-duration,1300ms) ease-out forwards;}
.sky-meteor::before {content:'';position:absolute;right:0;top:0;width:100px;height:1px;transform-origin:right center;transform:rotate(var(--meteor-angle));background:linear-gradient(90deg,transparent,#accfff55,#fff9ef);box-shadow:0 0 4px #b5d6ff66;}
@keyframes sky-meteor-flight {0%{opacity:0;transform:translate(0,0)}12%{opacity:.9}65%{opacity:.7}100%{opacity:0;transform:translate(var(--meteor-x),var(--meteor-y))}}
@media(prefers-reduced-motion:reduce){.constellation-sky:not(.is-map) .constellation-dust{animation:none}.sky-meteor{display:none}}

/* Revised note: three rows of two coordinates and one centered entry. */
.coordinate-note-sheet {aspect-ratio:1536 / 1024;}
.coordinate-note .coordinate-list button:nth-child(1){left:11%;top:45%;width:38%;height:9%;}
.coordinate-note .coordinate-list button:nth-child(2){left:55%;top:45%;width:38%;height:9%;}
.coordinate-note .coordinate-list button:nth-child(3){left:11%;top:57%;width:38%;height:9%;}
.coordinate-note .coordinate-list button:nth-child(4){left:55%;top:57%;width:38%;height:9%;}
.coordinate-note .coordinate-list button:nth-child(5){left:11%;top:69%;width:38%;height:9%;}
.coordinate-note .coordinate-list button:nth-child(6){left:55%;top:69%;width:38%;height:9%;}
.coordinate-note .coordinate-list button:nth-child(7){left:31%;top:81%;width:40%;height:9%;}
.coordinate-note .coordinate-list button[aria-pressed=true]::before {top:0;}

@media(min-width:1024px){
 .constellation-workspace:has(.is-map) {grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px;}
 .constellation:has(.is-map) .coordinate-note {width:92%;transform:translateX(clamp(20px, 3vw, 58px)) rotate(-2deg);transform-origin:center;}
 .constellation .constellation-sky.is-map {width:min(100%,calc(100dvh - 240px));}
}

@media(min-width:1024px){.constellation-workspace:has(.is-map){flex:1 0 auto;min-height:min-content;}.constellation:has(.is-map) .constellation-status{flex-shrink:0;}}

.coordinate-note-sheet > img {filter:drop-shadow(3px 9px 9px rgba(55,31,10,.30)) drop-shadow(0 2px 2px rgba(55,31,10,.18));}

.coordinate-note-scroll {overflow:visible;}
.coordinate-note-sheet {width:100%;min-width:0;}

/* Map actions and instructions stay together beneath the complete artwork. */
.coordinate-readout,.coordinate-scroll-hint {display:none!important;}
.coordinate-chart-frame {position:relative;width:min(100%,520px);margin:0 auto;}
.constellation .coordinate-chart-frame .constellation-sky.is-map {width:100%;}
.constellation .coordinate-controls {width:100%;display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;margin:6px 0 0;}
.constellation .coordinate-controls[hidden],.constellation-actions[hidden] {display:none;}
.constellation .coordinate-controls button {min-width:0;width:50%;max-width:260px;padding:12px 14px;font-size:13px;}
.constellation .coordinate-controls .constellation-check {min-height:48px;border:0;background:#ead7b5 url('mystery-button-light-small.png') center / 100% 100% no-repeat;color:#49301a;font-family:'Segoe UI',Arial;}
.constellation .coordinate-controls .constellation-check:not(:disabled):hover,.constellation .coordinate-controls .constellation-check:not(:disabled):active {background-image:url('mystery-button-dark-small.png');}
.constellation .constellation-reset {position:absolute;right:0;top:0;z-index:3;width:52px;height:52px;min-width:0;padding:0;border:0;border-radius:50%;background:transparent url('mystery-reset-normal-small.png') center / contain no-repeat;color:transparent;}
.constellation .constellation-reset:not(:disabled):hover,.constellation .constellation-reset:not(:disabled):active {background-image:url('mystery-reset-hover-small.png');}
.constellation .constellation-reset:disabled {opacity:.5;}
.constellation .constellation-reset:focus-visible {outline:2px solid #91602e;outline-offset:2px;}
.constellation:has(.is-map) .constellation-status {width:100%;margin:10px 0 0;min-height:42px;font-size:13px;}
.constellation:has(.constellation-sky:not(.is-map)) .coordinate-chart-frame {display:contents;}
.constellation:has(.constellation-sky:not(.is-map)) .constellation-reset {position:fixed;top:130px;right:20px;}
@media(min-width:1024px){
 .coordinate-chart-frame {width:min(100%,calc(100dvh - 255px));}
 .constellation:has(.is-map) .coordinate-note {transform:translateX(clamp(30px,4vw,78px)) rotate(-2deg);}
 .constellation:has(.is-map) .constellation-map-panel {padding-right:24px;}
 .constellation:has(.is-map) .constellation-reset {right:-24px;top:0;}
}
@media(max-width:1023px){
 .constellation .coordinate-note {width:100%;max-width:100%;transform:none;}
 .constellation .coordinate-note-scroll {width:100%;max-width:100%;overflow:visible;}
 .constellation .coordinate-note-sheet {min-width:0;width:100%;max-width:100%;}
 .constellation .coordinate-note-sheet>img {width:100%;height:auto;object-fit:contain;}
 .constellation-map-panel {display:block;width:100%;min-width:0;}
 .constellation .coordinate-controls button {font-size:11px;padding:10px 8px;}
 .constellation .constellation-reset {width:44px;height:44px;}
}

/* Readable stage-two letter, dismissible to keep the entire sky playable. */
.constellation-letter {padding:0;border:0;background:transparent;max-width:none;max-height:92dvh;width:min(840px,94vw);overflow:visible;}
.constellation-letter::backdrop {background:rgba(2,7,16,.72);}
.constellation-letter img {display:block;width:100%;max-height:88dvh;object-fit:contain;filter:drop-shadow(0 12px 24px #0008);}
.constellation-letter button[aria-label="Закрыть записку"] {position:absolute;right:3%;top:5%;width:40px;height:40px;border:0;border-radius:50%;background:#ead7b5;color:#49301a;font:28px/1 Arial;cursor:pointer;}
.constellation .constellation-letter-toggle {position:absolute;left:20px;top:130px;z-index:3;border:1px solid #bda268;border-radius:6px;background:#152233;color:#f4dfac;padding:9px 14px;}
.constellation:has(.is-map) .constellation-letter-toggle {display:none;}
@media(max-width:600px){.constellation .constellation-letter-toggle{top:190px;left:12px;padding:7px 10px;}.constellation-letter button[aria-label="Закрыть записку"]{width:32px;height:32px;font-size:23px;}}