/* Story mode */
#story-ui { position: fixed; inset: 0; z-index: 25; pointer-events: none; font-family: inherit; }
#story-ui.hidden { display: none; }
#story-ui button, #story-ui input, .st-card, .st-side, .st-panel, .st-overlay { pointer-events: auto; }
.st-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(20,14,8,.78), rgba(0,0,0,.94)); backdrop-filter: blur(6px); }
.st-panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 18px; padding: 24px 28px; width: min(900px, 100%);
  max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.65); backdrop-filter: blur(14px); }
.st-panel.small { width: min(440px, 100%); }
.st-panel h2 { margin: 0 0 4px; font: 700 28px Georgia, serif; color: var(--gold-2); }
.st-panel label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.st-panel input { background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 10px; color: var(--text); font-size: 16px; }
.st-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.st-sub { color: var(--muted); margin: 0; }

.st-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.st-slot { border: 1px solid var(--panel-border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: rgba(0,0,0,.28); }
.st-slot.empty { border-style: dashed; justify-content: center; }
.st-slot-n { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.st-slot-name { font: 700 22px Georgia, serif; color: var(--gold-2); }
.st-slot-empty { color: var(--muted); padding: 18px 0; text-align: center; }
.st-slot-row { font-size: 14px; }
.st-slot-row small { color: var(--muted); }

/* map HUD */
.st-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.st-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 8px 14px; backdrop-filter: blur(8px); }
.st-who { display: flex; flex-direction: column; }
.st-who b { font-family: Georgia, serif; color: var(--gold-2); }
.st-chips { font-weight: 600; }
.st-pop { min-width: 220px; flex: 0 1 300px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.st-pop-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.st-pop-h small { color: var(--muted); font-size: 11px; }
.st-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.st-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); box-shadow: 0 0 10px rgba(212,175,55,.6); transition: width .4s; }
.st-bar.sm { height: 5px; margin-top: 4px; }
.st-btns { margin-left: auto; display: flex; gap: 8px; }
.st-ib { position: relative; }
.st-ib em { position: absolute; top: -5px; right: -5px; background: #e84a5a; color: #fff; font-style: normal; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.st-hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--muted); font-size: 13px; text-shadow: 0 1px 6px #000; }
.st-tip { position: fixed; background: rgba(12,9,6,.92); border: 1px solid var(--gold); border-radius: 8px; padding: 6px 10px; font-size: 13px; display: flex; flex-direction: column; pointer-events: none; z-index: 40; max-width: 210px; }
.st-tip small { color: var(--muted); }
.st-tip.hidden, .st-root .hidden { display: none; }

.st-side { position: absolute; top: 74px; right: 12px; width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 100px); overflow: auto; display: none;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 16px; padding: 18px; backdrop-filter: blur(14px); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.st-side.open { display: flex; flex-direction: column; gap: 10px; }
.st-side h3 { margin: 0; font: 700 22px Georgia, serif; color: var(--gold-2); }
.st-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.35); cursor: pointer; }
.st-v-flag { font-size: 34px; line-height: 1; }
.st-v-sub { color: var(--muted); font-size: 13px; }
.st-v-boss { border-left: 3px solid #e84a5a; padding: 4px 10px; font-size: 13px; background: rgba(232,74,90,.08); border-radius: 0 8px 8px 0; }
.st-v-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.st-v-tbl td { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.st-v-tbl td:last-child { text-align: right; color: var(--gold-2); }
.st-v-money { display: flex; justify-content: space-between; gap: 10px; }
.st-v-money > div { display: flex; flex-direction: column; gap: 2px; }
.st-v-money small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.st-v-best { font-size: 14px; }
.st-v-reason { color: #ff9a8a; font-size: 13px; text-align: center; }

.st-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); pointer-events: auto; }
.st-overlay .st-panel { width: min(620px, 100%); }
.st-how { margin: 0; line-height: 1.5; font-size: 14px; }
.st-mlist { display: flex; flex-direction: column; gap: 8px; }
.st-m { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 12px; background: rgba(0,0,0,.25); }
.st-m.done { border-color: var(--gold); }
.st-m-t { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.st-m-t small { color: var(--muted); }
.st-m-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: var(--gold-2); font-size: 13px; }

.st-results { text-align: center; align-items: stretch; }
.st-res-medal { font-size: 72px; line-height: 1; filter: drop-shadow(0 0 18px rgba(243,215,122,.6)); }
.st-res-place { font: 700 26px Georgia, serif; color: var(--gold-2); }
.st-ev { padding: 8px 10px; border-radius: 10px; font-size: 14px; }
.st-ev.good { background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.4); }
.st-ev.bad { background: rgba(232,74,90,.1); border: 1px solid rgba(232,74,90,.35); }

/* Daily Challenge card (map hub) */
.st-daily { position: absolute; left: 12px; top: 74px; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; cursor: pointer; pointer-events: auto;
  background: linear-gradient(135deg, #3a2a08, #1b1404); border: 2px solid var(--gold-2, #d4af37); color: #ffe9a8; box-shadow: 0 0 14px rgba(212,175,55,.45); text-align: left; font: inherit; }
.st-daily:hover { filter: brightness(1.15); }
.st-daily.done { opacity: .8; box-shadow: none; }
.st-daily-i { font-size: 26px; }
.st-daily-t { display: flex; flex-direction: column; }
.st-daily-t b { font: 700 16px Georgia, serif; color: var(--gold-2, #d4af37); }
.st-daily-t small { font-size: 12px; opacity: .9; }