#powers-dialog{width:min(94vw,420px);max-height:85dvh;overflow-y:auto;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}
#powers-dialog .fills-head{position:sticky;top:-16px;background:var(--surface);z-index:1}
#powers-dialog h2,#powers-dialog h3{font:var(--control-emphasis);margin:8px 0}
#powers-budget{margin:12px 0;padding:12px;border:2px solid var(--brand);border-radius:var(--r-sm);background:var(--brand-soft);color:var(--ink);font:var(--form-control-text);white-space:pre-line}
#powers-budget[data-spent=true]{border-color:var(--chrome);background:var(--chrome);color:var(--button-ink)}
.competition-strip #powers-open{white-space:pre-line}
#power-active{display:block;margin-bottom:10px;padding:12px;border:1px solid var(--brand);border-radius:var(--r-sm);background:var(--brand-soft);color:var(--ink);font:var(--control-emphasis)}
#power-active[hidden]{display:none}
.power-hint,.power-card p,#powers-note,.power-card label{font:var(--form-help-text);color:var(--dim)}
#powers-note:empty{display:none}
#powers-note[data-state]{padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font:var(--form-control-text)}
#powers-note[data-state=success]{background:var(--brand-soft);border-color:var(--brand)}
#powers-note[data-state=error]{background:var(--warning-bg);border-color:var(--warning-ink);color:var(--warning-ink)}
.power-card{border-top:1px solid var(--line);padding:8px 0 12px}
.power-card .btn{font:var(--control-emphasis);min-height:44px;width:100%;margin-top:8px}
.power-card .btn[data-used=true],.power-card .btn:disabled{background:var(--surface-2);color:var(--dim);border:1px solid var(--line);opacity:1;cursor:not-allowed}
.power-card select{width:100%;min-height:44px;font:var(--form-control-text);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm)}

/* Draw attention only when an unused power can help before advancement. */
#powers-open[data-attention=true]{outline:2px solid var(--warning-ink);outline-offset:2px;animation:power-attention 1.4s ease-in-out infinite}
@keyframes power-attention{0%,100%{box-shadow:0 0 0 0 var(--warning-ink)}50%{box-shadow:0 0 0 4px var(--warning-bg)}}
@media(prefers-reduced-motion:reduce){#powers-open[data-attention=true]{animation:none;outline-width:3px}}