.universe-card, .universe-dialog { --universe-violet: #a990ff; --universe-cyan: #76dded; --universe-gold: #ffdc83; font-family: var(--font-ui); color: var(--text); }
.universe-card *, .universe-dialog *, .universe-card *::before, .universe-dialog *::before { box-sizing: border-box; }
.universe-card [hidden], .universe-dialog [hidden], .universe-card[hidden] { display: none !important; }
.universe-card :is(h2,h3,p), .universe-dialog :is(h2,h3,p) { margin: 0; }
.universe-card :is(h2,h3), .universe-dialog :is(h2,h3) { color: var(--text-bright); line-height: 1.3; overflow-wrap: anywhere; }
.universe-card { position: relative; width: 100%; min-width: 0; margin: 24px 0; padding: clamp(19px, 3vw, 34px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent-bright) 45%, var(--border)); border-radius: 25px; background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--universe-violet) 12%, transparent), transparent 60%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%), var(--panel); }
.universe-card::before { content: ''; position: absolute; top: 0; left: 10%; width: 70%; height: 1px; background: linear-gradient(90deg, transparent, var(--universe-cyan), var(--universe-violet), transparent); opacity: .75; pointer-events: none; }
.universe-eyebrow { display: block; color: var(--accent-bright); font-size: 10px; font-weight: 850; letter-spacing: .13em; line-height: 1.6; }
.universe-card h2 { margin-top: 7px; font-size: clamp(25px, 2.7vw, 37px); letter-spacing: -.025em; }
.universe-card-head > p { margin-top: 9px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.universe-card-body { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: center; margin-top: 24px; }
.universe-map { position: relative; min-width: 0; padding: 4px 0 23px; border: 1px solid var(--border); border-radius: 20px; background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--universe-violet) 11%, transparent), transparent 67%), var(--bg-soft); }
.universe-constellation { display: block; width: 100%; height: auto; }
.universe-nebula { fill: var(--universe-violet); opacity: .045; }
.universe-star-path { fill: none; stroke: color-mix(in srgb, var(--accent) 35%, var(--border)); stroke-width: 1.6; stroke-dasharray: 5 6; }
.universe-shard-aura { fill: var(--universe-violet); opacity: .025; }
.universe-shard-shape { fill: color-mix(in srgb, var(--accent) 7%, var(--panel)); stroke: color-mix(in srgb, var(--accent) 45%, var(--border)); stroke-width: 1.5; }
.universe-shard-core { fill: var(--accent); opacity: .35; }
.universe-shard.earned .universe-shard-shape { fill: var(--universe-cyan); stroke: var(--universe-gold); stroke-width: 1.4; }
.universe-shard.earned .universe-shard-aura { fill: var(--universe-cyan); opacity: .12; }
.universe-shard.earned .universe-shard-core { fill: #fff7dd; opacity: 1; }
.universe-small-stars { fill: var(--accent-bright); stroke: var(--accent-bright); stroke-width: 1.2; opacity: .35; }
.universe-map-caption { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: -9px; }
.universe-map-caption strong { color: var(--text-bright); font-size: clamp(26px, 3vw, 41px); font-weight: 850; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.universe-map-caption span { color: var(--text-muted); font-size: 12px; }
.universe-requirements { display: grid; gap: 15px; min-width: 0; }
.universe-legend-name { display: flex; align-items: center; gap: 13px; margin-bottom: 4px; }
.universe-legend-name h3 { font-size: 21px; }
.universe-legend-name > div > span { display: block; margin-top: 5px; color: var(--text-muted); font-size: 11px; }
.universe-silhouette { display: grid; flex: 0 0 53px; place-items: center; width: 53px; height: 53px; color: color-mix(in srgb, var(--accent) 45%, var(--text-muted)); border: 1px solid var(--border); border-radius: 15px; font-size: 38px; background: var(--bg-soft); }
.universe-silhouette svg { width: 44px; height: 44px; }
.universe-rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 14px; }
.universe-rule > span { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.universe-rule > strong { align-self: start; color: var(--text-bright); font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.universe-rule.complete > strong { color: var(--accent-bright); }
.universe-rule progress { grid-column: 1 / -1; width: 100%; height: 5px; }
.universe-card progress, .universe-dialog progress { display: block; appearance: none; border: 0; border-radius: 10px; overflow: hidden; background: var(--border); }
.universe-card progress::-webkit-progress-bar, .universe-dialog progress::-webkit-progress-bar { background: var(--border); }
.universe-card progress::-webkit-progress-value, .universe-dialog progress::-webkit-progress-value { border-radius: 10px; background: linear-gradient(90deg, var(--accent), var(--universe-cyan)); }
.universe-card progress::-moz-progress-bar, .universe-dialog progress::-moz-progress-bar { border-radius: 10px; background: var(--accent); }
.universe-trial-note { padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-soft); color: var(--text-muted); font-size: 11px; line-height: 1.7; }
.universe-button { min-height: 44px; max-width: 100%; padding: 10px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); color: var(--text-bright); font: inherit; font-size: 12px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; cursor: pointer; transition: background .15s, border-color .15s; }
.universe-button:hover:not(:disabled) { background: var(--panel-elevated); border-color: var(--accent-bright); }
.universe-button:disabled { opacity: .5; cursor: default; }
.universe-primary { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.universe-primary:hover:not(:disabled) { color: var(--accent-ink); background: var(--accent-bright); }
.universe-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.universe-card :is(button,a):focus-visible, .universe-dialog :is(button,textarea,[tabindex]):focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }
.universe-status, .universe-dialog-message { font-size: 11px; color: var(--text-muted); line-height: 1.65; overflow-wrap: anywhere; }
.universe-error { color: var(--error); }
.universe-shard-list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; padding: 0; margin: 24px 0 0; list-style: none; }
.universe-shard-list li { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 13px 7px; text-align: center; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); }
.universe-shard-list li.earned { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: var(--accent-dim); }
.universe-day-star { color: var(--text-muted); font-size: 22px; line-height: 1; opacity: .4; }
.universe-shard-list .earned .universe-day-star { color: var(--accent-bright); opacity: 1; }
.universe-shard-list li > span:nth-child(2) { color: var(--text); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.universe-shard-list small { color: var(--text-muted); font-size: 9px; line-height: 1.45; }
.universe-owned .universe-silhouette { color: var(--universe-gold); border-color: color-mix(in srgb, var(--universe-gold) 50%, var(--border)); }
.universe-dialog { width: min(860px, calc(100vw - 28px)); max-width: none; max-height: calc(100dvh - 28px); padding: 0; border: 1px solid color-mix(in srgb, var(--universe-violet) 55%, var(--border)); border-radius: 24px; background: var(--panel); color: var(--text); box-shadow: 0 24px 80px #0005; overflow: auto; overscroll-behavior: contain; }
.universe-dialog::backdrop { background: #081125b8; }
.universe-dialog-shell { position: relative; min-width: 0; padding: clamp(21px, 3vw, 35px); background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--universe-violet) 10%, transparent), transparent 60%); }
.universe-dialog-shell > header { padding-right: 40px; }
.universe-dialog h2 { margin-top: 5px; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.02em; }
.universe-close { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-soft); color: var(--text-muted); font: inherit; font-size: 25px; line-height: 1; cursor: pointer; }
.universe-close:hover { color: var(--text-bright); border-color: var(--accent); }
.universe-dialog-body { margin-top: 24px; }
.universe-dialog-message { margin-top: 17px !important; }
.universe-trial-preview { display: grid; justify-items: start; gap: 13px; }
.universe-preview-star, .universe-result-star { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid var(--border); border-radius: 21px; background: var(--accent-dim); color: var(--accent-bright); font-size: 42px; }
.universe-trial-preview h3 { font-size: 21px; }
.universe-trial-preview p { color: var(--text-muted); font-size: 13px; line-height: 1.7; }
.universe-safe-note { width: 100%; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); color: var(--text); font-size: 12px; line-height: 1.6; }
.universe-trial-preview .universe-button { margin-top: 3px; }
.universe-trial-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.universe-trial-meters > div { min-width: 0; padding: 13px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg-soft); }
.universe-trial-meters span { display: block; color: var(--text-muted); font-size: 11px; }
.universe-trial-meters strong { display: block; margin-top: 4px; color: var(--text-bright); font-size: clamp(18px, 2vw, 28px); font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; }
.universe-trial-meters strong.low { color: var(--error); }
.universe-typing-progress { width: 100%; height: 6px; margin: 17px 0; }
.universe-paper { position: relative; max-height: min(310px, 37dvh); padding: clamp(15px, 2vw, 25px); border: 1px solid var(--border); border-radius: 15px; background: var(--bg-soft); overflow: auto; cursor: text; }
.universe-trial-text { color: var(--text-muted); font-family: var(--font-mono, monospace); font-size: clamp(16px, 2vw, 21px); line-height: 1.9; overflow-wrap: anywhere; white-space: pre-wrap; }
.universe-trial-text .typed { color: var(--accent-bright); }
.universe-trial-text .cursor { color: var(--text-bright); background: var(--accent-dim); box-shadow: inset 0 -2px var(--accent); }
.universe-hidden-input { position: absolute; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; opacity: 0; resize: none; pointer-events: none; font-size: 16px; }
.universe-input-hint, .universe-input-warning { margin-top: 11px !important; color: var(--text-muted); font-size: 11px; line-height: 1.6; }
.universe-input-warning { color: var(--error); }
.universe-trial-result { display: grid; justify-items: center; gap: 17px; padding: 12px 0; text-align: center; }
.universe-trial-result h3 { font-size: clamp(22px, 3vw, 29px); }
.universe-trial-result strong { color: var(--text-bright); font-size: 15px; }
.universe-trial-result p { color: var(--text-muted); font-size: 13px; line-height: 1.8; }
.universe-dialog[data-phase="won"] .universe-result-star { color: var(--universe-gold); border-color: color-mix(in srgb, var(--universe-gold) 45%, var(--border)); }
.universe-cosmos { position: relative; isolation: isolate; width: 100%; height: clamp(245px, 38vw, 365px); overflow: hidden; border: 1px solid #8392ca36; border-radius: 21px; color: #f3edff; background: radial-gradient(ellipse at 50% 55%, #232856, #0c142d 67%, #080e1d); }
.universe-cosmic-haze { position: absolute; inset: 8% 10%; border-radius: 50%; opacity: .2; background: radial-gradient(ellipse, #be80ee55 0, #61cad329 33%, transparent 65%); transition: opacity 8s; }
.universe-ritual-starfield { position: absolute; inset: 0; }
.universe-ritual-starfield i { position: absolute; left: var(--star-x); top: var(--star-y); width: 2px; height: 2px; border-radius: 50%; background: #d1eaff; opacity: .25; animation: universe-star-appear 3s var(--star-delay) 1 both; }
.universe-ritual-ingredients { position: absolute; inset: 0; z-index: 2; opacity: 1; transition: opacity 5s; }
.universe-ritual-ingredients > span { position: absolute; left: calc(50% - 27px); top: calc(50% - 27px); width: 54px; height: 54px; transform: rotate(calc(var(--ingredient) * 72deg - 90deg)) translateX(clamp(72px, 12vw, 132px)) rotate(calc(90deg - var(--ingredient) * 72deg)); animation: universe-gather 24s 1 both; animation-delay: var(--ritual-elapsed, 0s); }
.universe-ritual-ingredients svg { width: 100%; height: 100%; fill: #f8d363; stroke: #fff1b0; stroke-width: 1.4; }
.universe-ritual-ingredients svg circle:first-child { fill: #253664; stroke: #e9d493; stroke-width: 2; }
.universe-ritual-ingredients svg circle:last-child { fill: #f3efba; stroke: #d59e32; }
.universe-galaxy { position: absolute; inset: 0; opacity: 0; transform: scale(.35); transition: opacity 9s, transform 22s ease-out; }
.universe-galaxy-arm { position: absolute; left: 18%; top: 32%; width: 64%; height: 31%; border: 6px solid #a18ee3; border-left-color: #75dbf3; border-right-color: #a18ee326; border-radius: 50%; transform: rotate(-24deg); box-shadow: 0 0 26px #978ee338, inset 0 0 16px #55c8e726; }
.universe-galaxy-arm.second { left: 28%; top: 25%; width: 44%; height: 45%; border-width: 4px; border-color: #efbda38c #80c8ee52 #efbda38c #9c8cea; transform: rotate(24deg); }
.universe-galaxy-core { position: absolute; left: calc(50% - 27px); top: calc(50% - 27px); width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, #fff9d2 0, #ffcf79 23%, #ba8bef75 60%, #789ad300 74%); box-shadow: 0 0 24px #dcc3ff77; }
.universe-cosmic-orbit { position: absolute; left: 18%; top: 13%; width: 64%; height: 74%; border: 1px solid #9addec38; border-radius: 50%; transform: rotate(-22deg); opacity: 0; transition: opacity 7s; }
.universe-cosmic-orbit.orbit-two { left: 27%; top: 12%; width: 47%; height: 78%; transform: rotate(48deg); border-color: #c4a3ef42; }
.universe-cosmic-orbit.orbit-three { left: 9%; top: 24%; width: 81%; height: 46%; transform: rotate(14deg); border-color: #eab47d38; }
.universe-planet { position: absolute; width: 21px; height: 21px; border-radius: 50%; background: radial-gradient(circle at 28% 25%, #cceaff, #498ebc 62%, #224870); box-shadow: -2px 3px 7px #0005; opacity: 0; transition: opacity 6s, transform 12s; }
.universe-planet.planet-one { left: 18%; top: 33%; transform: translate(15px,10px); }
.universe-planet.planet-two { right: 19%; top: 59%; width: 29px; height: 29px; transform: translate(-13px,-8px); background: radial-gradient(circle at 28% 25%, #faddb6, #c28558 60%, #794969); }
.universe-planet.planet-two::after { content: ''; position: absolute; inset: 7px -9px; border: 3px solid #f2c69d8c; border-radius: 50%; transform: rotate(-20deg); }
.universe-planet.planet-three { left: 42%; top: 16%; width: 15px; height: 15px; transform: translate(0,10px); background: radial-gradient(circle at 28% 25%, #f5d5f3, #966abb 62%, #4e4172); }
.universe-born-mark { position: absolute; left: calc(50% - 61px); top: calc(50% - 61px); display: grid; place-items: center; width: 122px; height: 122px; border: 1px solid #e5dbff5e; border-radius: 32px; font-size: 88px; color: #ffe7a4; background: #172345d9; opacity: 0; transform: scale(.35); transition: opacity 7s, transform 7s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 45px #ba9cec38; }
.universe-born-mark svg { width: 103px; height: 103px; }
.universe-cosmos[data-stage="1"] .universe-ritual-ingredients, .universe-cosmos[data-stage="2"] .universe-ritual-ingredients, .universe-cosmos[data-stage="3"] .universe-ritual-ingredients { opacity: 0; }
.universe-cosmos:is([data-stage="1"],[data-stage="2"],[data-stage="3"]) .universe-galaxy { opacity: 1; transform: scale(1); }
.universe-cosmos:is([data-stage="1"],[data-stage="2"],[data-stage="3"]) .universe-cosmic-haze { opacity: .85; }
.universe-cosmos:is([data-stage="2"],[data-stage="3"]) .universe-cosmic-orbit { opacity: 1; }
.universe-cosmos:is([data-stage="2"],[data-stage="3"]) .universe-planet { opacity: 1; transform: translate(0,0); }
.universe-cosmos[data-stage="3"] .universe-born-mark { opacity: 1; transform: scale(1); }
.universe-cosmos[data-stage="3"] .universe-galaxy { opacity: .48; }
.universe-ritual-caption { margin-top: 19px; text-align: center; }
.universe-ritual-caption h3 { font-size: clamp(19px, 2.8vw, 26px); }
.universe-ritual-caption p { margin-top: 8px; color: var(--text-muted); font-size: 12px; line-height: 1.65; }
.universe-ritual-meter { display: flex; align-items: center; gap: 13px; margin-top: 17px; }
.universe-ritual-meter progress { flex: 1; width: 100%; height: 6px; }
.universe-ritual-meter span { min-width: 39px; color: var(--text-bright); font-size: 12px; font-variant-numeric: tabular-nums; }
.universe-ritual-caption .universe-button { margin-top: 19px; }
@keyframes universe-star-appear { from { opacity: 0; transform: scale(.4); } to { opacity: .65; transform: scale(1); } }
@keyframes universe-gather { 0% { transform: rotate(calc(var(--ingredient) * 72deg - 90deg)) translateX(clamp(72px, 12vw, 132px)) rotate(calc(90deg - var(--ingredient) * 72deg)); } 35% { transform: rotate(calc(var(--ingredient) * 72deg - 60deg)) translateX(clamp(85px, 14vw, 145px)) rotate(calc(60deg - var(--ingredient) * 72deg)); } 78% { transform: rotate(calc(var(--ingredient) * 72deg + 90deg)) translateX(35px) rotate(calc(-90deg - var(--ingredient) * 72deg)) scale(.65); } 100% { transform: translate(0,0) scale(.1); } }
@media (max-width: 900px) { .universe-shard-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 660px) { .universe-card { border-radius: 20px; } .universe-card-body { grid-template-columns: minmax(0, 1fr); gap: 22px; } .universe-map { max-width: 430px; width: 100%; justify-self: center; } .universe-map-caption strong { font-size: 30px; } .universe-legend-name h3 { font-size: 20px; } .universe-shard-list { margin-top: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .universe-actions > button { flex: 1 1 100%; } }
@media (max-width: 390px) { .universe-card { padding: 17px; } .universe-card h2 { font-size: 25px; } .universe-legend-name { gap: 10px; } .universe-legend-name h3 { font-size: 18px; } .universe-silhouette { flex-basis: 45px; width: 45px; height: 45px; font-size: 31px; } .universe-rule { gap: 6px 9px; } .universe-rule > span { font-size: 11px; } .universe-dialog-shell { padding: 18px; } .universe-trial-meters { gap: 6px; } .universe-trial-meters > div { padding: 10px 8px; } .universe-trial-meters span { font-size: 9px; } .universe-trial-meters strong { font-size: 17px; } .universe-paper { padding: 14px; } .universe-trial-text { font-size: 16px; } .universe-cosmos { height: 245px; border-radius: 15px; } .universe-born-mark { left: calc(50% - 48px); top: calc(50% - 48px); width: 96px; height: 96px; border-radius: 25px; } .universe-born-mark svg { width: 82px; height: 82px; } }
@media (prefers-reduced-motion: reduce) { .universe-card *, .universe-dialog * { animation: none !important; transition: none !important; } .universe-ritual-ingredients > span { animation: none; } .universe-ritual-starfield i { opacity: .6; } }