.uix-app{border:1px solid var(--line);border-top:3px solid var(--danger);overflow:hidden;background:var(--ink-2)}
.uix-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);gap:12px;flex-wrap:wrap}
.uix-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--danger);font-family:var(--font-display)}
.uix-title{font-size:18px;margin:3px 0 0;font-weight:400}
.uix-actions{display:flex;gap:8px}
.uix-actions button{background:transparent;border:1px solid var(--line-bright);color:var(--parchment-dim);padding:7px 12px;border-radius:2px;font-size:12px;cursor:pointer}
.uix-actions button:hover{border-color:var(--brass);color:var(--parchment)}
.uix-actions button[aria-pressed="true"]{border-color:var(--brass);color:var(--brass-bright);background:rgba(168,118,58,.12)}
.uix-score{display:inline-flex;align-items:center;background:var(--ink-3);border:1px solid var(--brass);color:var(--brass-bright);font-size:12px;font-weight:600;padding:7px 12px;border-radius:2px}
.uix-timer{display:inline-flex;align-items:center;background:var(--ink-3);border:1px solid var(--line-bright);color:var(--parchment);font-size:12px;font-weight:600;padding:7px 12px;border-radius:2px;font-variant-numeric:tabular-nums}
.uix-timer.uix-timer-warn{border-color:var(--danger);color:#ffb3a8;animation:uix-timer-pulse 1s infinite}
@keyframes uix-timer-pulse{0%,100%{opacity:1}50%{opacity:.55}}

.uix-statbars{display:flex;flex-direction:column;gap:10px}
.uix-statbar-head{display:flex;justify-content:space-between;font-size:12px;color:var(--parchment-dim);margin-bottom:4px}
.uix-statbar-track{height:8px;border-radius:5px;background:var(--ink);border:1px solid var(--line);overflow:hidden}
.uix-statbar-fill{height:100%;background:var(--brass);transition:width .35s}
.uix-statbar-danger .uix-statbar-fill{background:var(--danger)}
.uix-statbar-verdigris .uix-statbar-fill{background:var(--verdigris)}

.uix-stage{position:relative;aspect-ratio:16/9;background:#0a0c14;overflow:hidden}
.uix-scene-image{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .5s ease,transform .6s ease}
.uix-stage.uix-transitioning .uix-scene-image{opacity:.25;transform:scale(1.04)}
.uix-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 30%,rgba(0,0,0,.65) 100%);pointer-events:none}
.uix-hotspots{position:absolute;inset:0}
.uix-hotspot{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;border:2px solid var(--brass);background:rgba(168,118,58,.18);cursor:pointer;padding:0;animation:uix-pulse 2.6s ease-in-out infinite}
.uix-hotspot:hover,.uix-hotspot:focus-visible{background:rgba(168,118,58,.4);box-shadow:0 0 0 6px rgba(168,118,58,.12);animation-play-state:paused}
@keyframes uix-pulse{0%,100%{box-shadow:0 0 0 0 rgba(168,118,58,.35)}50%{box-shadow:0 0 0 9px rgba(168,118,58,0)}}
@media (prefers-reduced-motion:reduce){.uix-hotspot{animation:none}}
.uix-hotspot span{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;background:rgba(10,12,20,.92);border:1px solid var(--line);padding:4px 8px;border-radius:5px;font-size:11px;opacity:0;transition:opacity .15s;pointer-events:none}
.uix-hotspot:hover span,.uix-hotspot:focus-visible span{opacity:1}
@media(hover:none){.uix-hotspot span{opacity:.9}}

.uix-story{padding:20px}
.uix-chapter{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--verdigris);margin-bottom:6px;font-family:var(--font-display)}
.uix-objective{font-size:13px;color:var(--brass-bright);margin-bottom:12px}
.uix-text{line-height:1.75;color:var(--parchment)}

.uix-dialogue{margin-top:14px}
.uix-line{margin-bottom:8px;padding:10px 12px;background:var(--ink-3);border-radius:3px;font-size:14px}
.uix-line strong{display:block;color:var(--brass-bright);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}

.uix-choices{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.uix-choice{text-align:left;background:var(--ink-3);border:1px solid var(--line);color:var(--parchment);padding:12px 14px;border-radius:3px;cursor:pointer;font-size:14px}
.uix-choice:hover:not(:disabled){border-color:var(--brass)}
.uix-choice:disabled{opacity:.4;cursor:not-allowed}

.uix-quiz-options{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.uix-quiz-option{text-align:left;background:var(--ink-3);border:1px solid var(--line);color:var(--parchment);padding:13px 16px;border-radius:3px;cursor:pointer;font-size:14px;transition:border-color .15s,background .15s}
.uix-quiz-option:hover:not(:disabled){border-color:var(--brass)}
.uix-quiz-option:disabled{cursor:not-allowed}
.uix-quiz-option.correct{border-color:var(--verdigris);background:rgba(79,138,123,.18);color:#bfe3d6}
.uix-quiz-option.wrong{border-color:var(--danger);background:rgba(162,51,37,.18);color:#f0c2bc}
.uix-quiz-option.chosen{border-color:var(--brass);background:rgba(168,118,58,.18);color:var(--brass-bright)}
.uix-quiz-feedback{margin-top:12px}
.uix-quiz-feedback p{margin:0 0 10px;font-size:14px;color:var(--parchment-dim)}

.uix-puzzle-card{margin-top:16px;background:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:16px}
.uix-puzzle-card h3{font-size:16px}
.uix-puzzle-input{display:flex;gap:8px;margin-top:10px}
.uix-puzzle-input input{flex:1;background:var(--ink);border:1px solid var(--line-bright);color:var(--parchment);padding:9px 12px;border-radius:2px}
.uix-puzzle-input button{background:var(--brass);border:0;color:var(--ink);padding:9px 16px;border-radius:2px;font-weight:600;cursor:pointer}
.uix-puzzle-msg{margin-top:8px;font-size:13px;color:var(--danger)}

.uix-ending-card{margin-top:18px;padding:22px;border:1px solid var(--brass);border-radius:3px;background:radial-gradient(ellipse at 50% 0%,rgba(168,118,58,.14),transparent 70%);animation:uix-ending-in .6s ease}
@keyframes uix-ending-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.uix-ending-label{font-size:11px;letter-spacing:.16em;color:var(--brass);margin-bottom:6px}
.uix-ending-card button{margin-top:12px;background:var(--brass);border:0;color:var(--ink);padding:10px 18px;border-radius:2px;font-weight:600;cursor:pointer}

.uix-next-adventures{margin-top:22px}
.uix-next-adventures h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--parchment-dim);margin-bottom:10px}
.uix-next-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.uix-next-card{display:block;text-decoration:none;background:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:12px;transition:border-color .15s,transform .15s}
.uix-next-card:hover{border-color:var(--brass);transform:translateY(-2px)}
.uix-next-card-type{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--verdigris);margin-bottom:4px}
.uix-next-card-title{font-size:13px;color:var(--parchment);font-weight:600}

@keyframes uix-levelup{0%{transform:scale(1)}30%{transform:scale(1.35)}55%{transform:scale(.95)}100%{transform:scale(1)}}
.uix-levelup-burst{animation:uix-levelup .6s ease}

.uix-sidebar{padding:20px;border-top:1px solid var(--line)}
.uix-sidebar section{margin-bottom:22px}
.uix-sidebar h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--parchment-dim);margin-bottom:10px}
.uix-muted{color:var(--parchment-dim);font-size:13px}
.uix-inventory{display:flex;flex-wrap:wrap;gap:8px}
.uix-item{display:flex;align-items:center;gap:6px;background:var(--ink-3);border:1px solid var(--line);border-radius:2px;padding:7px 10px;font-size:13px}
.uix-goal{font-size:13px;margin-bottom:6px;color:var(--parchment-dim)}
.uix-goal.done{color:var(--verdigris);text-decoration:line-through}
.uix-ach{font-size:13px;margin-bottom:6px;color:var(--parchment-dim)}
.uix-ach.unlocked{color:var(--brass-bright)}
.uix-map{position:relative;aspect-ratio:16/10;background:var(--ink-3);border-radius:3px;overflow:hidden}
.uix-map-node{position:absolute;transform:translate(-50%,-50%);background:var(--ink);border:1px solid var(--line-bright);color:var(--parchment);padding:6px 10px;border-radius:2px;font-size:11px;cursor:pointer}
.uix-map-node.active{border-color:var(--brass);color:var(--brass-bright)}
.uix-map-node:disabled{opacity:.35;cursor:not-allowed}

.uix-toast{position:fixed;right:20px;bottom:20px;z-index:9000;padding:11px 16px;background:var(--ink-3);border:1px solid var(--brass);border-radius:3px;font-size:13px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}
.uix-toast.show{opacity:1;transform:translateY(0)}

@media(max-width:760px){
  .uix-layout{display:block}
  .uix-story{padding:16px}
}
@media(min-width:761px){
  .uix-layout{display:grid;grid-template-columns:1fr 300px}
  .uix-sidebar{border-top:0;border-left:1px solid var(--line)}
}