@font-face {font-family:"Mystery Anagram";src:url("mystery-anagram-handwriting.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap;}
.star-note { box-sizing:border-box;width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:42px 30px 24px;border:0;border-radius:12px;background:#e9ddc3;color:#473421;text-align:center;font:15px/1.5 'Segoe UI',Arial,sans-serif;box-shadow:0 15px 90px #000b; }
.star-note::backdrop {background:#060a12d9;backdrop-filter:blur(4px)}
.star-note-close {position:absolute;top:7px;right:12px;background:none;border:0;color:#473421;font:30px Arial;cursor:pointer}
.star-note h2 {margin:0 0 18px;font-size:22px}
.star-riddle {font:26px/1.4 'Mystery Handwriting',cursive;margin:10px 0 22px}
.star-help {font-size:13px;max-width:570px;margin:0 auto 22px}
.star-words {display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:20px 0}
.star-word {display:flex;gap:5px}.star-word-red {color:#b32c25}
.star-letter-slot {width:30px;height:43px;padding:0;border:0;border-bottom:2px solid currentColor;background:transparent;color:inherit;font:23px 'Segoe UI',Arial;cursor:pointer}
.star-letter-slot:disabled {opacity:1;cursor:default}
.star-letters {display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:500px;margin:25px auto}
.star-letters button {width:36px;height:40px;border:1px solid #9a7543;background:#f7ecd4;color:#493621;border-radius:4px;font:21px Arial;cursor:pointer}
.star-letters button[aria-pressed=true] {outline:2px solid #855222;background:#dcc08c}
.star-letters button:disabled {opacity:.25;cursor:default}
.star-note-actions {display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.star-note-actions button,.star-answer button {padding:10px 16px;border:1px solid #967445;background:#d8bb86;color:#493621;border-radius:5px;font:14px 'Segoe UI',Arial;cursor:pointer}
.star-answer {margin:24px auto 0;max-width:340px}.star-answer label {display:block;margin-bottom:8px}.star-answer input {box-sizing:border-box;width:100%;padding:10px;border:1px solid #9a7543;background:#faf3e5;color:#493621;font:20px 'Segoe UI',Arial;text-align:center;margin-bottom:12px}
.star-note-status {min-height:24px;margin:16px 0 0;font-size:14px}
@media(max-width:480px){.star-note {padding:35px 14px 20px}.star-riddle{font-size:21px}.star-letter-slot{width:27px;font-size:21px}.star-words{gap:16px}.star-help{font-size:12px}}

.star-letter-slot {touch-action:none;user-select:none;cursor:grab;border-radius:4px 4px 0 0;transition:background .15s,box-shadow .15s;}
.star-letter-slot[aria-pressed=true] {background:#c8a66b55;box-shadow:0 0 0 2px #9e783c;}
.star-letter-slot.is-dragging {background:#c8a66b88;transform:translateY(-4px);cursor:grabbing;}
.star-letter-slot:focus-visible {outline:2px solid #9e783c;outline-offset:3px;}
@media(prefers-reduced-motion:reduce){.star-letter-slot{transition:none}}

.star-letter-slot {font-family:"Mystery Anagram",cursive;font-size:29px;line-height:1.2;}
@media(max-width:480px){.star-letter-slot{font-size:27px}}

.star-letter-glyph {display:inline-block;position:relative;z-index:1;pointer-events:none;transform-origin:center;}

.star-riddle-answer {display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:8px;}
.star-riddle-prefix {white-space:nowrap;}
.star-riddle .star-words {display:inline-flex;align-items:baseline;flex-wrap:nowrap;gap:14px;margin:0;vertical-align:baseline;}
.star-riddle .star-word {gap:3px;}
.star-riddle .star-letter-slot {width:24px;height:34px;font-size:24px;}
@media(max-width:480px){
 .star-riddle-answer {gap:6px;}
 .star-riddle-prefix {font-size:19px;}
 .star-riddle .star-words {gap:8px;}
 .star-riddle .star-word {gap:1px;}
 .star-riddle .star-letter-slot {width:14px;height:30px;font-size:18px;}
}

.star-note {background:#f1dfba url("mystery-puzzle-parchment.webp") center / cover no-repeat;}

/* Supplied wooden buttons for puzzle actions; letter slots stay underlined. */
.constellation .constellation-actions button,
.constellation .coordinate-place,
.star-note .star-note-actions button,
.star-note .star-answer button {
 min-width:240px;min-height:48px;padding:12px 24px;border:0!important;border-radius:0;
 background:#ead7b5 url("mystery-button-light-small.png") center / 100% 100% no-repeat!important;
 color:#49301a!important;font:14px/1.35 'Segoe UI',Arial,sans-serif;
 box-shadow:none;transition:transform .12s ease,filter .12s ease;
}
@media(hover:hover){
 .constellation .constellation-actions button:not(:disabled):hover,
 .constellation .coordinate-place:not(:disabled):hover,
 .star-note .star-note-actions button:not(:disabled):hover,
 .star-note .star-answer button:not(:disabled):hover {
 background-image:url("mystery-button-dark-small.png")!important;
 }
}
.constellation .constellation-actions button:not(:disabled):active,
.constellation .coordinate-place:not(:disabled):active,
.star-note .star-note-actions button:not(:disabled):active,
.star-note .star-answer button:not(:disabled):active {
 background-image:url("mystery-button-dark-small.png")!important;transform:translateY(1px);
}
.constellation .constellation-actions button:focus-visible,
.constellation .coordinate-place:focus-visible,
.star-note .star-note-actions button:focus-visible,
.star-note .star-answer button:focus-visible {outline:2px solid #ad7335;outline-offset:3px;}
.star-note .star-note-actions button:disabled,.star-note .star-answer button:disabled,.constellation .coordinate-place:disabled {opacity:.55;}
@media(prefers-reduced-motion:reduce){.constellation .constellation-actions button,.constellation .coordinate-place,.star-note .star-note-actions button,.star-note .star-answer button{transition:none;}}

/* The third-stage content sits on its own paper; navigation stays above it. */
.star-note-paper {box-sizing:border-box;width:min(980px,100%);min-height:520px;margin:auto;flex-shrink:0;padding:64px 64px 48px;display:flex;flex-direction:column;justify-content:center;background:transparent url("mystery-anagram-paper-cutout.webp") center / 100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 10px 12px #4a301e30);}
.star-note-paper .star-answer[hidden] {display:none;}
.star-note-paper .star-note-status:empty {min-height:0;margin:0;}
.star-note-paper .star-note-actions {margin-top:12px;}
@media(min-width:1024px){.star-note[open]{padding-bottom:35px;}.star-note-paper{min-height:min(580px,calc(100dvh - 190px));}}
@media(max-width:600px){
 .star-note[open]{padding-left:8px;padding-right:8px;}
 .star-note-paper{min-height:430px;padding:38px 18px 32px;}
 .star-note-paper h2{font-size:20px;}
 .star-note-paper .star-riddle{font-size:21px;}
 .star-note-paper .star-riddle-answer{row-gap:10px;}
 .star-note-paper .star-note-actions button{min-width:0;width:min(240px,100%);font-size:12px;}
 .star-note-paper .star-answer{width:100%;max-width:100%;}
}