.resource-screen { width: min(1040px, 100%); margin: 36px auto 70px; }
.rs-heading { margin: 28px 0 24px; }
.rs-heading .eyebrow { overflow-wrap: anywhere; margin-bottom: 12px; }
.rs-heading h1 { font: 400 clamp(34px, 5vw, 49px)/1.1 var(--serif); }
.rs-intro { color: var(--muted); font-size: 14px; max-width: 660px; margin-top: 16px; }
.rs-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--border); }
.rs-status { color: var(--gold); font-size: 13px; }
.rs-checked { color: var(--muted); font-size: 11px; margin: 8px 0 28px; }
.rs-error { margin-bottom: 22px; padding: 14px 16px; border: 1px solid #a65b65; background: #5b25362b; color: #efc0c2; font-size: 13px; line-height: 1.65; }
.rs-section-title { margin-bottom: 16px; font: 400 26px/1.2 var(--serif); }
.rs-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rs-card { min-width: 0; border: 1px solid #624c424f; border-top: 2px solid #9b7955; border-radius: 4px; background: linear-gradient(140deg, #30232766, #201b1c); padding: 24px; }
.rs-card h3 { font: 24px/1.3 var(--serif); margin: 0 0 15px; }
.rs-resource-value { font: 28px/1.2 var(--serif); color: var(--gold); margin-bottom: 16px; }
.rs-track-note, .rs-note { color: var(--muted); font: 12px/1.7 var(--sans); }
.rs-track-note { margin: 12px 0; }
.rs-pips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 15px; }
.rs-pip { display: block; width: 13px; height: 13px; border: 1px solid #b49a73; border-radius: 50%; background: transparent; }
.rs-pip.is-filled { background: #c5a879; box-shadow: inset 0 0 0 2px #2e2522; }
.rs-pips--squares .rs-pip { border-radius: 2px; }
.rs-pips[data-known="false"] { opacity: .4; }
.rs-permanent { padding-top: 12px; margin-top: 16px; border-top: 1px solid var(--border); }
.rs-permanent > span:first-child { display: block; color: var(--muted); font-size: 11px; margin-bottom: 10px; }
.rs-permanent .rs-pips { gap: 5px; }
.rs-permanent .rs-pip { width: 8px; height: 8px; }
.rs-permanent .rs-pip.is-filled { box-shadow: none; }
.rs-track-help { margin-top: 8px; }
.rs-track-help summary { min-height: 44px; padding: 10px 0; color: var(--gold); font-size: 11px; }
.rs-track-help summary::after, .rs-rules summary::after { content: '+'; color: var(--gold); font-size: 18px; font-weight: 300; }
.rs-track-help[open] summary::after, .rs-rules[open] summary::after { content: '−'; }
.rs-track-help > p { font: 12px/1.75 var(--sans); color: var(--muted); }
.rs-damage-track { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-damage-box { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #b49a73; font: 24px/1 var(--sans); color: #eed9be; }
.rs-damage-box[data-damage="aggravated"] { background: #812f43; border-color: #d1888e; }
.rs-damage-box[data-damage="superficial"] { background: #4b3949; border-color: #ae93a7; }
.rs-damage-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 14px; color: var(--muted); font: 12px/1.7 var(--sans); }
.rs-card--wheel { grid-column: 1 / -1; }
.rs-wheel-layout { display: grid; grid-template-columns: minmax(160px, 250px) minmax(0, 1fr); align-items: center; gap: 28px; }
.rs-wheel { width: 100%; height: auto; overflow: visible; }
.rs-wheel g path { fill: #211d1e; stroke: #776455; stroke-width: .65; }
.rs-wheel g text { fill: #efdcc0; font: 600 9px/1 var(--sans); }
.rs-wheel g[data-kind="quintessence"] path { fill: #ae8b52; stroke: #dec093; }
.rs-wheel g[data-kind="quintessence"] text { fill: #231914; }
.rs-wheel g[data-kind="paradox"] path { fill: #65516d; stroke: #a894b0; }
.rs-wheel g[data-kind="permanentParadox"] path { fill: #7a3046; stroke: #d58d96; }
.rs-wheel[data-known="false"] g { opacity: .4; }
.rs-wheel-number { fill: var(--text); font: 29px var(--serif); }
.rs-wheel-caption { fill: var(--muted); font: 8px var(--sans); }
.rs-wheel-legend { margin: 0; min-width: 0; }
.rs-wheel-legend > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); padding: 12px 0; }
.rs-wheel-legend dt { display: flex; align-items: center; gap: 11px; font-size: 13px; min-width: 0; }
.rs-wheel-legend dd { margin: 0; color: var(--gold); font: 23px/1.2 var(--serif); }
.rs-wheel-key { flex: 0 0 26px; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #ae8b52; color: #d9bc8b; font: 600 15px/1 var(--sans); }
.rs-wheel-key[data-kind="paradox"] { border-color: #a894b0; color: #cfb5d8; }
.rs-wheel-key[data-kind="permanentParadox"] { border-color: #d58d96; color: #eab2ba; }
.rs-rest { padding: 28px; margin: 28px 0 32px; border: 1px solid #755c47; border-left: 3px solid var(--gold); border-radius: 5px; background: radial-gradient(ellipse at 0 0, #5b3e3638, transparent 70%), #201b1d; }
.rs-rest-heading { display: flex; align-items: center; gap: 17px; margin-bottom: 19px; }
.rs-rest-heading h2 { font: 30px/1.2 var(--serif); }
.rs-rest-symbol { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border: 1px solid #b3976955; border-radius: 50%; color: var(--gold); font: 33px/1 var(--serif); }
.rs-rest-status { font: 23px/1.4 var(--serif); }
.rs-rest-benefit { color: var(--text); font-size: 13px; margin-top: 12px; }
.rs-rest-when { color: var(--gold); font: 13px/1.7 var(--sans); margin-top: 13px; }
.rs-countdown { color: var(--muted); font: 12px/1.7 var(--sans); font-variant-numeric: tabular-nums; margin-top: 6px; }
.rs-rest-reason { color: var(--muted); font: 12px/1.7 var(--sans); margin-top: 14px; }
.rs-rest-actions { display: flex; gap: 12px; margin: 20px 0 16px; }
.rs-opportunity-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.rs-opportunity { border: 1px solid var(--border); padding: 20px; border-radius: 4px; min-width: 0; }
.rs-opportunity h3 { font: 21px/1.3 var(--serif); margin-bottom: 9px; }
.rs-opportunity-time { color: var(--gold); font: 12px/1.7 var(--sans); margin-top: 11px; }
.rs-result { margin-top: 28px; padding: 22px; border: 1px solid #816e4e; border-radius: 4px; background: #9b805015; }
.rs-result > p { font: 14px/1.7 var(--sans); }
.rs-result > time { display: block; color: var(--muted); font-size: 11px; margin-top: 12px; }
.rs-rules { margin-top: 32px; padding-top: 10px; border-top: 1px solid var(--border); }
.rs-rules summary { color: var(--gold); min-height: 44px; }
.rs-rules p { max-width: 750px; color: var(--muted); font-size: 12px; margin-top: 10px; }
.rs-rules .rs-policy-title { color: var(--text); font: 21px/1.4 var(--serif); }
.resource-screen p, .resource-screen h1, .resource-screen h2, .resource-screen h3, .rs-confirm-dialog { overflow-wrap: anywhere; }
.rs-confirm-dialog { max-width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 28px; border: 1px solid #a5896d; border-radius: 8px; background: #261e24; color: var(--text); box-shadow: 0 20px 80px #0009; }
.rs-confirm-dialog::backdrop { background: #100d12b8; }
.rs-confirm-dialog h2 { font: 28px/1.2 var(--serif); margin-bottom: 18px; }
.rs-confirm-dialog > p { font: 14px/1.8 var(--sans); margin-bottom: 16px; }
.rs-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.resource-screen button, .rs-confirm-dialog button { min-height: 44px; }
.resource-screen button:disabled { cursor: default; }
.resource-screen [aria-disabled="true"] { opacity: .7; }
@media (max-width: 650px) {
  .resource-screen { margin: 24px auto 45px; }
  .rs-tracks, .rs-opportunity-list { grid-template-columns: 1fr; }
  .rs-status-bar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .rs-status-bar .button, .rs-rest-actions .button { width: 100%; }
  .rs-card { padding: 21px; }
  .rs-rest { padding: 22px 20px; }
  .rs-wheel-layout { grid-template-columns: 1fr; gap: 12px; }
  .rs-wheel { width: min(240px, 100%); justify-self: center; }
  .rs-confirm-dialog { padding: 22px; }
  .rs-dialog-actions { flex-direction: column-reverse; }
  .rs-dialog-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .resource-screen *, .rs-confirm-dialog * { scroll-behavior: auto; } }