:root {
    --solo-ink: #f7fbff;
    --solo-muted: #a8bfd4;
    --solo-blue: #0797ff;
    --solo-amber: #ffb526;
    --solo-panel: #081525;
    --solo-border: #244662;
}

.solo-preview-page { background: #03070d; margin: 0; }

.solo-app {
    color: var(--solo-ink);
    background: radial-gradient(circle at 50% 0%, #123e68 0, #07111f 48%, #03070d 100%);
    border: 1px solid var(--solo-border);
    border-radius: 1.25rem;
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 45%);
    margin: 1rem auto 2rem;
    max-width: 1180px;
    overflow: hidden;
}

.solo-app[data-text-scale="125"] { font-size: 1.25rem; }
.solo-app[data-text-scale="150"] { font-size: 1.5rem; }

.solo-app__header, .solo-app__roundline {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.solo-app__header { padding: 1rem 1.25rem; }
.solo-app__header h2, .solo-app__header p { margin: 0; }
.solo-app__eyebrow { color: var(--solo-amber); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.solo-app__status { display: grid; text-align: right; }
.solo-app__status span, .solo-app__status small { color: var(--solo-muted); font-size: .78rem; }

.solo-app__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(22rem, .85fr);
    min-height: min(39rem, calc(100vh - 8rem));
}

.solo-app__interaction {
    background: rgb(8 21 37 / 96%);
    border-left: 1px solid var(--solo-border);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.solo-app__stage {
    background: #02060b;
    min-height: 28rem;
    overflow: hidden;
    position: relative;
}

.solo-app[data-state="loading"] .solo-app__stage { box-shadow: inset 0 0 0 2px var(--solo-blue); }
.solo-app[data-state="reveal"] .solo-app__stage { box-shadow: inset 0 0 3rem rgb(255 181 38 / 30%); }
.solo-app[data-state="complete"] .solo-app__stage { box-shadow: inset 0 0 4rem rgb(54 214 136 / 28%); }
.solo-app[data-renderer="failed"] .solo-app__stage { box-shadow: inset 0 0 0 2px #ff9cac; }

#solo-unity-canvas { display: none; height: 100%; width: 100%; }
.solo-app__stage-fallback { align-items: center; display: flex; flex-direction: column; inset: 0; justify-content: center; padding: 2rem; position: absolute; text-align: center; }
.solo-app__stage-mark { color: var(--solo-blue); font-size: clamp(3rem, 10vw, 7rem); font-weight: 900; letter-spacing: -.08em; text-shadow: 0 0 2rem rgb(7 151 255 / 65%); }
.solo-app__stage-fallback p { color: var(--solo-muted); max-width: 34rem; }
.solo-app__caption { background: rgb(0 0 0 / 78%); bottom: 1rem; font-size: clamp(1rem, 2vw, 1.35rem); left: 50%; max-width: 85%; padding: .55rem .85rem; position: absolute; text-align: center; transform: translateX(-50%); }
.solo-app__caption:empty { display: none; }
.solo-app__progress { background: rgb(0 0 0 / 75%); inset: 0; padding-top: 25%; position: absolute; text-align: center; }
.solo-app__progress progress { display: block; margin: .75rem auto; width: min(22rem, 70%); }

.solo-app__panel { background: transparent; padding: 1.1rem 1.25rem 1.25rem; }
.solo-app__panel h3 { margin-top: 0; }
.solo-app__field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.solo-app input[type="text"], .solo-app input:not([type]) { background: #fff; border: 3px solid transparent; border-radius: .5rem; color: #06101c; font-size: 1rem; padding: .75rem; }
.solo-app fieldset { border: 0; margin: 0 0 1rem; padding: 0; }
.solo-app legend { font-weight: 700; margin-bottom: .5rem; }
.solo-app__choices { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.solo-app__choices--compact { display: flex; flex-wrap: wrap; }
.solo-app__choices--compact label { background: #10283f; border: 1px solid var(--solo-border); border-radius: .5rem; cursor: pointer; padding: .65rem .85rem; }
.solo-app__choices--compact label:has(input:checked) { border-color: var(--solo-amber); box-shadow: inset 0 0 0 1px var(--solo-amber); }
.solo-app button { background: #10283f; border: 2px solid #477294; border-radius: .65rem; color: var(--solo-ink); cursor: pointer; font-weight: 750; min-height: 3rem; padding: .7rem 1rem; text-align: left; }
.solo-app button:hover { border-color: var(--solo-blue); }
.solo-app button:focus-visible, .solo-app input:focus-visible { outline: 4px solid var(--solo-amber); outline-offset: 3px; }
.solo-app button:disabled { cursor: not-allowed; opacity: .45; }
.solo-app button[data-state="selected"] { border-color: var(--solo-amber); box-shadow: inset 0 0 0 2px var(--solo-amber); opacity: 1; }
.solo-app button[data-state="correct"] { background: #0b4a36; border-color: #79f1bd; opacity: 1; }
.solo-app button[data-state="incorrect"] { background: #561b25; border-color: #ff9cac; opacity: 1; }
.solo-app button[data-state="locked"] { opacity: .65; }
.solo-app .solo-app__primary { background: var(--solo-blue); border-color: #8ed2ff; color: #00101f; text-align: center; }
.solo-app__link-button { background: var(--solo-blue); border: 2px solid #8ed2ff; border-radius: .65rem; color: #00101f; display: inline-block; font-weight: 750; padding: .75rem 1rem; text-decoration: none; }
.solo-app__roundline { color: var(--solo-amber); font-weight: 800; margin-bottom: .75rem; text-transform: uppercase; }
.solo-app__feedback { border-left: 4px solid var(--solo-blue); margin-bottom: .8rem; min-height: 1.5rem; padding-left: .75rem; }
.solo-app__feedback[data-result="correct"] { border-color: #36d688; }
.solo-app__feedback[data-result="incorrect"] { border-color: var(--solo-amber); }
.solo-app__lifelines { display: flex; gap: .6rem; margin-top: 1rem; }
.solo-app__lifelines button { min-height: 2.5rem; }
.solo-app__wager { align-items: end; display: grid; gap: .75rem; grid-template-columns: 1fr 1fr auto; }
.solo-app__wager label { font-weight: 700; grid-column: 1 / -1; }
.solo-app__wager input { min-height: 3rem; }
.solo-app__setup-error { background: #571824; border: 2px solid #ff9cac; border-radius: .5rem; padding: .75rem; }

.solo-app__settings { border-bottom: 1px solid var(--solo-border); }
.solo-app__settings summary { color: var(--solo-muted); cursor: pointer; font-size: .85rem; font-weight: 750; padding: .7rem 1.25rem; }
.solo-app__settings-grid { align-items: center; display: grid; gap: .65rem; grid-template-columns: 1fr 1fr; padding: 0 1.25rem 1rem; }
.solo-app__settings-grid button { min-height: 2.5rem; }
.solo-app__settings-grid select { background: #10283f; border: 2px solid #477294; border-radius: .45rem; color: var(--solo-ink); min-height: 2.5rem; padding: .35rem; }
.solo-app__share { display: grid; gap: .5rem; margin-block: 1rem; }
.solo-app__share textarea { background: #fff; border-radius: .5rem; color: #06101c; padding: .65rem; resize: none; width: 100%; }
.solo-app [hidden] { display: none !important; }

.solo-app[data-captions="off"] .solo-app__caption { display: none; }
.solo-app[data-motion="reduce"] *,
.solo-app[data-motion="reduce"] *::before,
.solo-app[data-motion="reduce"] *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }

@media (max-width: 820px) {
    .solo-app { border-radius: 0; margin-inline: -.75rem; }
    .solo-app__workspace { display: block; min-height: 0; }
    .solo-app__interaction { border-left: 0; }
    .solo-app__stage { aspect-ratio: 16 / 9; min-height: 0; }
    .solo-app__choices { grid-template-columns: 1fr; }
    .solo-app__header { align-items: flex-start; }
    .solo-app__wager { grid-template-columns: 1fr; }
    .solo-app__stage-fallback { padding: 1rem; }
    .solo-app__stage-fallback p { margin-bottom: 0; }
    .solo-app__settings summary { padding-block: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .solo-app:not([data-motion="full"]) *,
    .solo-app:not([data-motion="full"]) *::before,
    .solo-app:not([data-motion="full"]) *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}