.echo-round-actions { flex-wrap: wrap; justify-content: flex-end; }
.echo-guess-notice { margin: -8px 0 18px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.echo-round-actions [aria-pressed="true"] { border-color: var(--echo-gold); color: var(--echo-gold); }
.echo-guide > button { margin: 0 0 10px 20px; }
.echo-practice { margin-top: 20px; border: 1px solid #e5c69466; background: #e5c6940b; border-radius: 16px; padding: 18px; }
.echo-practice h3 { margin: 3px 0 8px; font-size: 21px; }
.echo-practice p { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.echo-practice-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.echo-practice-actions button:first-child { border-color: var(--echo-gold); }
.echo-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; padding: 12px; border-left: 2px solid var(--feedback-color,#c7b8dc); background: #ffffff04; border-radius: 0 10px 10px 0; }
.echo-feedback strong { color: var(--feedback-color,#c7b8dc); font-size: 13px; }
.echo-feedback span { font-size: 11px; padding: 3px 8px; background: #ffffff07; border-radius: 6px; }
.echo-feedback.warm,.echo-feedback.found { --feedback-color: #f6d595; }
.echo-feedback.cold { --feedback-color: #aabfee; }
.echo-clue-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.echo-clue-chips span { border: 1px solid var(--echo-line); border-radius: 5px; font-size: 10px; padding: 2px 6px; color: var(--muted); }
.echo-clue-chips .echo-exact { border-color: #e5c69466; color: var(--echo-gold); }
.echo-guess-row .echo-trend { display: block; }
.echo-live-map { margin: 18px 0; border: 1px solid var(--echo-line); border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at 50% 45%,#73609020,transparent 65%),#181320; }
.echo-map-heading { padding: 16px 18px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.echo-map-heading h3 { font-size: 18px; }
.echo-map-heading span { font-size: 11px; color: var(--muted); }
.echo-map-scroll { overflow-x: auto; }
.echo-map-scroll svg { display: block; width: 100%; min-width: 480px; max-height: 290px; }
.echo-map-orbits { fill: none; stroke: #d8bddd12; stroke-dasharray: 2 7; }
.echo-map-lines { stroke: #c4b5fd4d; stroke-width: 1; fill: none; }
.echo-map-star text { fill: currentColor; font: 12px var(--font-b); }
.echo-map-core { fill: #282031; stroke: #efc69566; }
.echo-map-answer { fill: #f3d5a6; font: 15px var(--font-d); }
.echo-map-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; padding: 0 12px 8px; font-size: 10px; color: #c4b5cf; }
.echo-map-legend span:first-child { color: #f6d595; }
.echo-map-legend span:nth-child(2) { color: #f3b8cf; }
.echo-map-legend span:nth-child(3) { color: #aabfee; }
.echo-map-caption { font-size: 10px; text-align: center; color: var(--muted); padding: 0 16px 14px; }
.echo-celebrating .echo-letter-tile { animation: echo-discover .85s ease both; color: var(--echo-gold); border-color: #f3d5a6aa; }
.echo-celebrating .echo-map-lines { stroke: #f3d5a6aa; stroke-dasharray: 800; animation: echo-connect 1.6s ease-out both; }
.echo-celebrating .echo-map-core { animation: echo-discover 1.3s ease both; transform-origin: 300px 145px; }
.echo-discovery-banner { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--echo-line); }
.echo-discovery-banner > span { font-size: 40px; color: var(--echo-gold); }
.echo-discovery-banner h2 { font-size: 30px; text-transform: capitalize; }
.echo-discovery-banner p { margin: 0; font-size: 12px; }
@keyframes echo-discover { 0% { transform: scale(.9); filter: brightness(1); } 45% { transform: scale(1.06); filter: brightness(1.7); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes echo-connect { from { stroke-dashoffset: 800; } to { stroke-dashoffset: 0; } }
.echo-scene-art { aspect-ratio: 1; background-size: 300% 200%; background-repeat: no-repeat; background-color: #241d31; border-radius: 12px; }
.echo-scene-fallback { display: grid; place-items: center; font-size: 48px; color: var(--echo-gold); background-image: url('/assets/echo/constellation-v1.jpg'); background-size: cover; }
.echo-story-pick { grid-template-columns: 112px 1fr; }
.echo-story-pick-cover { position: relative; min-height: 112px; background: none; }
.echo-story-pick-cover .echo-scene-art { width: 100%; height: 100%; border-radius: 0; }
.echo-story-pick-cover em { position: absolute; bottom: 5px; background: #17111ddd; color: #fff4df; padding: 3px 6px; opacity: 1; }
.echo-story-mark { width: 66px; height: 66px; overflow: hidden; }
.echo-story-mark .echo-scene-art { width: 100%; height: 100%; }
.echo-story-cover { grid-template-columns: 66px 1fr; }
.echo-story-gallery { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.echo-story-gallery figure { margin: 0; min-width: 0; }
.echo-story-gallery figcaption { font-size: 10px; color: var(--muted); line-height: 1.4; margin-top: 5px; }
.echo-scene-locked { aspect-ratio: 1; border: 1px dashed var(--echo-line); border-radius: 12px; display: grid; place-content: center; text-align: center; background: #181320; color: #b8a5c5; font-size: 12px; }
.echo-scene-locked span { font-size: 26px; color: var(--echo-gold); }
.echo-scene-reveal { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 20px; margin: 18px 0; }
.echo-scene-reveal .echo-scene-art { width: 100%; }
.echo-scene-reveal p { font-size: 14px; }
.echo-collection-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.echo-collection-head h3 { font-size: 21px; }
.echo-collection-head p,.echo-collection-head label { font-size: 12px; color: var(--muted); }
.echo-collection-head select { margin-left: 6px; max-width: 160px; border-radius: 8px; padding: 8px; color: var(--text); background: #241d30; border: 1px solid var(--echo-line); }
.echo-word-collection { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; max-height: 520px; overflow-y: auto; }
.echo-word-keepsake { border: 1px solid var(--echo-line); border-radius: 13px; overflow: hidden; background: #ffffff03; }
.echo-keepsake-art { height: 86px; display: grid; place-items: center; background: linear-gradient(#21162933,#21162955),url('/assets/echo/constellation-v1.jpg') 82% 48% / 165%; }
.echo-keepsake-art span { font-size: 37px; color: #ffe6ba; text-shadow: 0 2px 12px #1a0b1a; }
.echo-word-keepsake > div:last-child { padding: 12px; }
.echo-word-keepsake h4 { font-size: 21px; text-transform: capitalize; overflow-wrap: anywhere; }
.echo-word-keepsake small { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--echo-gold); }
.echo-word-keepsake p,.echo-word-keepsake time { font-size: 11px; color: var(--muted); }
.echo-category-album { margin-top: 20px; }
.echo-category-album summary { cursor: pointer; font-size: 14px; color: var(--echo-gold); }
.echo-category-collection { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.echo-category-keepsake { display: flex; flex-direction: column; text-align: center; align-items: center; border: 1px solid var(--echo-line); border-radius: 12px; padding: 10px; }
.echo-category-keepsake svg { width: 100%; max-width: 120px; fill: #d3bce8; stroke: #d3bce8; }
.echo-category-keepsake b { font-size: 12px; }
.echo-category-keepsake span,.echo-category-keepsake small { font-size: 10px; color: var(--muted); }
.echo-category-keepsake.complete { border-color: #f3d5a666; background: #f3d5a608; }
.echo-category-keepsake.complete svg { fill: var(--echo-gold); stroke: var(--echo-gold); }
.echo-journal-section-title { margin: 24px 0 12px; font-size: 20px; }
@media(max-width:760px) { .echo-round-actions { justify-content:flex-start; } .echo-word-collection { grid-template-columns:repeat(2,minmax(0,1fr)); } .echo-category-collection { grid-template-columns:repeat(3,minmax(0,1fr)); } .echo-guess-row .echo-trend { grid-column:1/-1; text-align:left; } }
@media(max-width:480px) { .echo-map-heading,.echo-collection-head { align-items:flex-start; flex-direction:column; } .echo-map-scroll svg { min-width:0; } .echo-map-star text { font-size:20px; } .echo-map-answer { font-size:22px; } .echo-story-pick { grid-template-columns:88px 1fr; } .echo-story-gallery { gap:5px; } .echo-story-gallery figcaption { font-size:9px; } .echo-scene-locked { font-size:10px; } .echo-scene-reveal { grid-template-columns:1fr; } .echo-scene-reveal .echo-scene-art { max-width:240px; margin:auto; } .echo-category-collection { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { html:has(.echo-page) { scroll-behavior:auto; } .echo-page .echo-celebrating * { animation:none!important; transition:none!important; } }
.echo-account-status{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 20px;padding:16px 20px;border:1px solid rgba(196,181,253,.2);border-radius:16px;background:rgba(196,181,253,.045)}
.echo-account-status>div{flex:1;min-width:210px}.echo-account-status strong{color:#f6d595;font-size:.9rem}.echo-account-status p{margin:5px 0 0;color:#b9b0c5;font-size:.82rem;line-height:1.5}.echo-account-status a{color:#e2d6fa;font-size:.85rem;text-underline-offset:4px}.echo-account-status [hidden]{display:none}
.echo-hint-panel{padding:20px;margin:20px 0;border:1px solid rgba(246,213,149,.24);border-radius:16px;background:rgba(246,213,149,.045)}.echo-hint-panel[hidden]{display:none}.echo-hint-panel h3{margin:0 0 8px;color:#f6d595}.echo-hint-panel p{font-size:.84rem;line-height:1.6;color:#bdb2c9;margin:8px 0 14px}.echo-hint-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.echo-hint-choices button{padding:14px;border:1px solid rgba(196,181,253,.24);border-radius:12px;background:rgba(196,181,253,.06);color:#f7efff;text-align:left;cursor:pointer}.echo-hint-choices small{display:block;margin-top:7px;color:#bdb2c9;line-height:1.4}.echo-hint-choices button:disabled{opacity:.4;cursor:default}.echo-hint-choices button:focus-visible{outline:2px solid #f6d595;outline-offset:3px}.echo-hint-trail{padding-left:20px;line-height:1.7;font-size:.9rem;color:#ede1f3}.echo-hint-trail:empty{display:none}@media(max-width:560px){.echo-hint-choices{grid-template-columns:1fr}.echo-hint-choices button{padding:12px}.echo-hint-choices small{margin-top:3px}}