/* Old School interface language shared by the full-screen overlays and shop. */
:root {
  --rs-font: 'RuneScape', monospace;
  --rs-yellow: #ffff00;
  --rs-orange: #ff981f;
  --rs-white: #fff5df;
  --rs-muted: #c4b394;
  --rs-shadow: #080705;
  --rs-panel: #4b4335;
  --rs-panel-deep: #302b23;
  --rs-border-light: #8a7a5d;
  --rs-border-dark: #17150f;
  --rs-line: #736348;
  --cream: var(--rs-white);
  --muted: var(--rs-muted);
  --faint: #9c8b6e;
  --bronze: var(--rs-orange);
  --gold: var(--rs-yellow);
  --gold-light: #ffff80;
  --panel: var(--rs-panel);
  --border: var(--rs-line);
  --health: #a02119;
  --xp: #b68e23;
  font-family: var(--rs-font);
  font-synthesis: none;
}

body { color: var(--rs-white); font-family: var(--rs-font); font-size: 17px; }
button, input, a, output, kbd { font-family: inherit; }
button { border-radius: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rs-yellow);
  outline-offset: 3px;
}
button:disabled { opacity: .55; }
button, .screen, .equipment-dialog, .toast { -webkit-font-smoothing: none; }
.screen, .equipment-dialog {
  font-family: var(--rs-font);
  text-shadow: 1px 1px 0 var(--rs-shadow);
  letter-spacing: 0;
}
.screen { padding: 24px; background: #0b09075c; backdrop-filter: none; }
.screen h1, .screen h2, .screen h3, .screen p, .screen button,
.screen a, .screen .eyebrow, .screen .screen-subtitle,
.equipment-dialog h1, .equipment-dialog h2, .equipment-dialog h3,
.equipment-dialog p, .equipment-dialog button, .equipment-dialog small,
.equipment-dialog strong, .equipment-dialog span, .equipment-dialog dt,
.equipment-dialog dd {
  font-family: var(--rs-font);
  font-weight: normal;
  letter-spacing: 0;
}
.screen .eyebrow {
  color: var(--rs-orange);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: .3px;
}
.screen .screen-subtitle {
  color: var(--rs-muted);
  font-size: 17px;
  line-height: 1.3;
}
.stone-panel, .upgrade-panel, .loading-content, .equipment-dialog {
  color: var(--rs-white);
  border: 3px solid #30271b;
  border-top-color: #8b7b5c;
  border-left-color: #8b7b5c;
  border-radius: 0;
  background-color: var(--rs-panel);
  background-image: var(--rs-panel-texture, repeating-linear-gradient(7deg, #fff1 0 1px, transparent 1px 5px));
  background-repeat: repeat;
  box-shadow: 0 0 0 1px #17130f, 0 0 0 4px #61533d, 0 0 0 5px #17130f,
    inset 0 0 0 1px #242018, inset 0 0 0 3px #746147, 4px 6px 0 #0006;
}
.stone-panel::before, .stone-panel::after { display: none; }
.gold-button, .outline-button, .training-options > button, .equipment-actions button,
.equipment-tabs button, .equipped-items button {
  border: 2px solid #25180e;
  border-top-color: #8c7350;
  border-left-color: #8c7350;
  border-radius: 0;
  background: #554432;
  box-shadow: inset 1px 1px 0 #a58b62, inset -1px -1px 0 #372719, 0 1px 0 #15110c;
  color: var(--rs-orange);
  text-shadow: 1px 1px 0 #000;
  font-family: var(--rs-font);
  font-weight: normal;
  letter-spacing: 0;
  transition: none;
}
.gold-button {
  min-height: 44px;
  padding: 11px 18px;
  font-size: 21px;
  color: var(--rs-yellow);
  border-top-color: #b98561;
  border-left-color: #b98561;
  background: #6f2018;
  box-shadow: inset 1px 1px 0 #ad5141, inset -1px -1px 0 #3d100c, 0 2px 0 #17100c;
}
.gold-button > span:last-child { color: #d29b5d; font-size: 22px; }
.gold-button:hover { background: #8a2d21; filter: none; transform: none; }
.gold-button:active { background: #5f1c16; box-shadow: inset 1px 1px 0 #34120d; transform: none; }
.outline-button { font-size: 18px; padding: 10px 12px; min-height: 40px; }
.screen .gold-button, .screen .outline-button, .screen .training-options > button,
.equipment-actions button, .equipment-tabs button, .equipped-items button {
  border: 6px solid transparent;
  border-image: url('/assets/ui/button-combat.png') 6 fill stretch;
  background: transparent;
  box-shadow: none;
  image-rendering: pixelated;
}
.screen .gold-button { border-image-source: url('/assets/ui/button-combat-selected.png'); padding: 6px 13px; }
.screen .outline-button { padding: 6px 10px; }
.screen .gold-button:hover, .screen .gold-button:active,
.screen .outline-button:hover, .screen .training-options > button:hover,
.equipment-actions button:hover:not(:disabled), .equipment-tabs button:hover,
.equipped-items button:hover { background: transparent; box-shadow: none; filter: brightness(1.12); }
.outline-button:hover, .equipped-items button:hover,
.equipment-tabs button:hover, .training-options > button:hover {
  background: #6a543b;
  color: var(--rs-yellow);
  border-color: #b49a65 #302115 #302115 #b49a65;
}
.quiet-link { font-size: 15px; color: var(--rs-orange); text-decoration: none; }
.quiet-link:hover { color: var(--rs-yellow); text-decoration: underline; }
.profile-save-status { font-family: var(--rs-font); font-size: 13px; line-height: 1.3; color: #b4a181; }
.profile-save-status[data-state=error] { color: #ffb266; }
.screen kbd {
  padding: 1px 5px;
  color: #eee1c4;
  background: #30281e;
  border: 1px solid #897251;
  border-radius: 0;
  box-shadow: 0 1px 0 #17120b;
  font: inherit;
}

/* Opening screen: a small framed game window over the live arena. */
.menu-screen { gap: 16px; flex-direction: column; background: #0e0b0757; }
.menu-panel { width: 460px; max-width: 100%; padding: 20px 28px 16px; text-align: center; }
.menu-overline { gap: 9px; color: #baa684; font-size: 13px; line-height: 1; }
.menu-overline > span:first-child { color: #e7c77a; font-size: inherit; font-weight: normal; letter-spacing: 1px; }
.tiny-separator { width: 3px; height: 3px; transform: none; background: #8c7754; }
.rune-emblem {
  display: grid;
  width: 35px;
  height: 38px;
  margin: 15px auto 9px;
  background: #403526;
  clip-path: none;
  border: 2px solid #9e8051;
  border-right-color: #221a10;
  border-bottom-color: #221a10;
  box-shadow: inset 0 0 0 1px #211b13;
  color: #e5bd66;
  font: 31px/1 var(--rs-font);
  text-shadow: 2px 2px 0 #130e08;
}
.rune-emblem::after { display: none; }
.screen .rune-emblem {
  width: 36px;
  height: 36px;
  border: 0;
  box-shadow: none;
  background: url('/assets/ui/tab-combat.png') center / 32px 30px no-repeat;
  font-size: 0;
  image-rendering: pixelated;
}
.menu-panel h1 {
  font: normal 40px/.98 var(--rs-font);
  letter-spacing: 0;
  color: var(--rs-yellow);
  margin: 0;
  text-shadow: 2px 2px 0 #090600;
}
.menu-panel h1 span { display: inline; margin: 0; color: var(--rs-yellow); font-size: inherit; }
.menu-location { gap: 9px; margin: 12px 0; font-size: 14px; line-height: 1; color: var(--rs-orange); letter-spacing: .3px; }
.ornament-line { width: 26px; height: 1px; background: #8d7451; box-shadow: 0 1px 0 #241b10; }
.menu-description { margin: 0; font-size: 17px; line-height: 1.25; color: #e1cfb0; }
.run-rules {
  gap: 11px;
  margin: 17px 0;
  padding: 14px 0;
  border-top: 1px solid #211c14;
  border-bottom: 1px solid #8f7850;
  box-shadow: inset 0 1px 0 #8f7850, 0 1px 0 #211c14;
}
.run-rules > div { gap: 12px; align-items: flex-start; }
.rule-symbol { flex: none; width: 27px; height: 28px; color: #e1b34d; font: 25px/1 var(--rs-font); }
.keyboard-symbol { margin: 0; width: 27px; height: 26px; border: 1px solid #a78a59; background: #30271c; border-radius: 0; box-shadow: inset -1px -1px #15110b; font-size: 18px; }
.star-symbol { font-size: 25px; }
.run-rules > div:nth-child(2) .rule-symbol,
.run-rules .star-symbol {
  font-size: 0;
  background: url('/assets/ui/tab-combat.png') center / 24px 24px no-repeat;
  image-rendering: pixelated;
}
.run-rules .star-symbol { background-image: url('/assets/ui/tab-skills.png'); }
.run-rules p { font-size: 15px; gap: 2px; line-height: 1.13; color: #b9aa8e; }
.run-rules strong { font-size: 18px; color: #ffcf73; font-weight: normal; }
.menu-panel .equipment-open { margin-top: 9px; gap: 9px; font-size: 17px; }
.equipment-open .coin-balance { font-size: 15px; color: var(--rs-yellow); }
.menu-skill-note { margin: 15px 0 7px; color: #dfcaa0; font-size: 16px; line-height: 1.2; }
#menu-skill-summary { color: var(--rs-orange); font-size: 15px; }
.menu-panel .profile-save-status { margin: 0; font-size: 13px; color: #ad9b7d; }
.menu-footer { gap: 12px; margin-top: 15px; padding-top: 10px; border-top: 1px solid #796243; color: #bba17e; font-size: 13px; }
.menu-footer a { color: #e1ab52; }
.menu-groundnote { color: #d9c29c; font: 13px/1.2 var(--rs-font); letter-spacing: 0; margin: 0; text-shadow: 1px 1px #000; }
.keyboard-notice { margin: 10px 0 0; font-size: 14px; color: #ffba66; }

/* Pausing and results retain the same frame and button treatment. */
.compact-panel { width: 430px; padding: 24px 28px; }
.small-rune, .error-emblem {
  width: 35px;
  height: 35px;
  margin: 0 auto 12px;
  color: #e4b65c;
  background: #30281f;
  border: 2px solid #99825c;
  border-right-color: #21180f;
  border-bottom-color: #21180f;
  border-radius: 0;
  font: 25px/31px var(--rs-font);
}
.compact-panel .eyebrow, .end-panel .eyebrow { margin: 0; }
.compact-panel h1, .end-panel h1 { font: normal 29px/1.05 var(--rs-font); color: var(--rs-yellow); margin: 9px 0 0; letter-spacing: 0; }
.compact-panel .screen-subtitle { margin: 11px 0 19px; }
.pause-training { margin: 0 0 18px; border-top: 1px solid #806b4a; padding-top: 10px; }
.training-selector legend { color: var(--rs-orange); font: 13px/1 var(--rs-font); letter-spacing: 0; }
.training-options > button { min-height: 34px; padding: 6px 3px; font: 16px/1.1 var(--rs-font); }
.training-options > button[aria-pressed=true] {
  background: #6a1f17;
  color: var(--rs-yellow);
  border-color: #bc8054 #31180d #31180d #bc8054;
  box-shadow: inset 1px 1px #a54e39, inset -1px -1px #36120e;
}
.screen .training-options > button[aria-pressed=true] {
  border: 6px solid transparent;
  border-image: url('/assets/ui/button-combat-selected.png') 6 fill stretch;
  box-shadow: none;
  background: transparent;
}
.pause-training .training-options { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.pause-training .training-options > button { font-size: 15px; min-height: 34px; }
.pause-training .training-description { color: #cab797; font: 14px/1.25 var(--rs-font); margin-top: 9px; }
.pause-keyhint { font-size: 15px; color: #b4a180; margin: 16px 0 0; }
.error-screen .quiet-link { margin-top: 17px; }
.end-panel { width: 490px; padding: 20px 27px 22px; }
.end-panel .end-emblem { margin: 0 auto 11px; width: 31px; height: 34px; font-size: 0; }
.end-panel .screen-subtitle { margin: 9px 0 15px; font-size: 16px; }
.end-panel .end-stats { margin: 0 0 16px; border-color: #8a714c; grid-template-columns: repeat(3,minmax(0,1fr)); }
.end-panel .end-stats > div { padding: 10px 3px; gap: 4px; }
.end-panel .end-stats > div + div { border-left: 1px solid #776044; }
.end-panel .end-stats > div:last-child:nth-child(odd) { grid-column: auto; }
.end-stats span, .end-stats dt, .end-stats .stat-label { color: #cbb18a; font-size: 13px; line-height: 1; letter-spacing: 0; }
.end-panel .end-stats strong, .end-stats dd, .end-stats .stat-value { color: var(--rs-yellow); font: normal 26px/1 var(--rs-font); }
.end-skill-section { margin: 0 0 15px; font-family: var(--rs-font); }
.end-skill-section h2, .end-loot-section h2 { margin: 0 0 9px; color: var(--rs-orange); font: 15px/1 var(--rs-font); letter-spacing: 0; }
.end-skill-results { gap: 6px; }
.end-skill-row { grid-template-columns: 1fr auto 100px; gap: 8px; font-size: 17px; line-height: 1; color: #ecdbb9; }
.end-skill-row > output { color: #fff; }
.end-skill-row > small { color: #b3a286; font-size: 14px; }
.end-skill-row.has-level-up > small { color: var(--rs-yellow); }
.end-skill-section .profile-save-status { margin-top: 9px; font-size: 13px; }
.end-loot-section { font: 16px/1.2 var(--rs-font); color: #dac8a7; margin: 0 0 16px; padding-top: 12px; border-color: #89714d; }
.end-loot-section p { color: #f0d5a2; }
.end-loot-section p > span { color: #bdab8d; font-size: 14px; }
.end-loot-section ul { max-height: 82px; margin-top: 7px; }
.end-loot-section li { font-size: 14px; padding: 4px 0; border-color: #776044; }
.end-panel .equipment-open { font-size: 18px; margin: 0 0 9px; }
.end-panel .quiet-link { display: inline-block; margin-top: 13px; }

/* Upgrade choices use inventory-style inset slots inside a framed window. */
.upgrade-screen { background: #0a080767; padding: 25px; }
.upgrade-panel { width: 880px; padding: 24px; text-align: center; }
.upgrade-panel > .eyebrow { color: var(--rs-orange); font-size: 16px; letter-spacing: .5px; margin: 0; }
.upgrade-panel h1 { color: var(--rs-yellow); font: normal 32px/1 var(--rs-font); margin: 9px 0 0; letter-spacing: 0; text-shadow: 2px 2px #110b03; }
.upgrade-panel > .screen-subtitle { margin: 11px 0 20px; font-size: 17px; }
.upgrade-options { gap: 13px; }
.upgrade-options > button {
  min-height: 260px;
  padding: 18px 17px 15px;
  gap: 10px;
  background: #393125;
  border: 2px solid #201b14;
  border-bottom-color: #8a7150;
  border-right-color: #8a7150;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px #554634;
  color: var(--rs-white);
  text-shadow: 1px 1px #000;
  transition: none;
}
.upgrade-options > button::before { display: none; }
.upgrade-options > button::after { color: var(--rs-orange); padding-top: 16px; font: 15px/1 var(--rs-font); letter-spacing: 0; }
.upgrade-options > button:hover { background: #51402c; border-color: #ffcc4c; transform: none; box-shadow: inset 0 0 0 1px #86714d; }
.upgrade-options > button:hover::after { color: var(--rs-yellow); }
.upgrade-options h2, .upgrade-options h3, .upgrade-name, .upgrade-title { color: var(--rs-yellow); font: normal 26px/1.05 var(--rs-font); margin: 0; }
.upgrade-options p, .upgrade-description, .upgrade-desc { color: #e0cbaa; font: 17px/1.25 var(--rs-font); margin: 0; }
.upgrade-icon { width: 45px; height: 45px; margin-bottom: 3px; border: 2px solid #8b7453; border-top-color: #20190f; border-left-color: #20190f; border-radius: 0; background: #2b241b; color: #e2b763; font: 29px/1 var(--rs-font); }
.upgrade-card .upgrade-icon {
  font-size: 0;
  background: #2b241b var(--rs-upgrade-icon,url('/assets/ui/skill-strength.png')) center / 29px 29px no-repeat;
  image-rendering: pixelated;
}
.upgrade-card[data-ability=cleave] { --rs-upgrade-icon: url('/assets/ui/combat-sword.png'); }
.upgrade-card[data-ability=flurry] { --rs-upgrade-icon: url('/assets/ui/combat-dagger.png'); }
.upgrade-card[data-ability=smash] { --rs-upgrade-icon: url('/assets/ui/combat-hammer.png'); }
.upgrade-card[data-ability=riposte] { --rs-upgrade-icon: url('/assets/ui/combat-shield.png'); }
.upgrade-card[data-upgrade-id=might] { --rs-upgrade-icon: url('/assets/ui/skill-strength.png'); }
.upgrade-card[data-upgrade-id=haste] { --rs-upgrade-icon: url('/assets/ui/skill-attack.png'); }
.upgrade-card[data-upgrade-id=reach] { --rs-upgrade-icon: url('/assets/ui/combat-sword.png'); }
.upgrade-card[data-upgrade-id=vitality] { --rs-upgrade-icon: url('/assets/ui/skill-hitpoints.png'); }
.upgrade-card[data-upgrade-id=agility] { --rs-upgrade-icon: url('/assets/ui/orb-run-icon.png'); }
.upgrade-card[data-upgrade-id=magnet] { --rs-upgrade-icon: url('/assets/ui/coins.png'); }
.upgrade-card[data-upgrade-id=armor] { --rs-upgrade-icon: url('/assets/ui/skill-defence.png'); }
.upgrade-card[data-upgrade-id=targets] { --rs-upgrade-icon: url('/assets/ui/tab-combat.png'); }
.upgrade-card[data-upgrade-id=recovery] { --rs-upgrade-icon: url('/assets/ui/orb-health-icon.png'); }
.upgrade-kind, .upgrade-category, .upgrade-kicker, .upgrade-tag { color: var(--rs-orange); font: 14px/1 var(--rs-font); letter-spacing: 0; }
.upgrade-level { color: #bca67d; font: 14px var(--rs-font); }
.choice-note { margin: 17px 0 0; color: #bca886; font: 15px/1.2 var(--rs-font); letter-spacing: 0; }
.choice-note > span { color: #8d754e; }

/* Loading deliberately uses the same window as the rest of the client. */
.loading-screen { background: #17130e; }
.loading-content { max-width: 390px; width: calc(100vw - 48px); padding: 25px; }
.loading-content .loading-emblem { animation: none; margin: 0 auto 15px; width: 36px; height: 39px; font-size: 0; }
.loading-content .eyebrow { color: var(--rs-orange); font-size: 14px; letter-spacing: 0; }
.loading-content h1 { color: var(--rs-yellow); font: normal 30px/1 var(--rs-font); letter-spacing: 0; margin: 12px 0 20px; }
.loading-line { width: 230px; max-width: 100%; height: 16px; margin: 0 auto 16px; padding: 2px; border: 1px solid #ac8f5c; background: #211a11; box-shadow: 0 0 0 1px #17110a; }
.loading-line > span { width: 50%; background: #a50d04; box-shadow: inset 0 1px #dd4532, inset 0 -1px #580b05; }
.loading-content > p:last-child { color: #d2bc96; font: 16px/1.3 var(--rs-font); margin: 0; }
.toast {
  color: #ffff80;
  font: 17px/1.2 var(--rs-font);
  text-shadow: 1px 1px #000;
  background: #362c20f5;
  border: 2px solid #9d8057;
  border-right-color: #241b10;
  border-bottom-color: #241b10;
  border-radius: 0;
  box-shadow: 0 0 0 1px #21180e;
  padding: 9px 15px;
}

/* Between-run shop. Item rows remain complete and usable at narrow widths. */
.equipment-dialog {
  width: min(980px,calc(100vw - 38px));
  max-height: calc(100dvh - 38px);
  padding: 0;
  font: 17px/1.2 var(--rs-font);
  overflow: auto;
  scrollbar-color: #9a8058 #30281d;
}
.equipment-dialog::backdrop { background: #080604a8; }
.equipment-shell { padding: 20px 23px 16px; background: none; }
.equipment-header { align-items: flex-start; gap: 14px; margin: -7px -9px 0; padding: 0 0 10px; border-bottom: 1px solid #211a11; box-shadow: 0 1px #8a704b; }
.equipment-header .eyebrow { margin: 0 0 5px; color: #cdb28a; font: 13px/1 var(--rs-font); letter-spacing: 0; }
.equipment-header h1 { font: normal 27px/1 var(--rs-font); color: var(--rs-orange); margin: 0; }
.equipment-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 27px;
  height: 27px;
  padding: 0;
  margin-top: 1px;
  border: 2px solid #bd8960;
  border-right-color: #32160e;
  border-bottom-color: #32160e;
  border-radius: 0;
  box-shadow: inset 1px 1px #a35539, inset -1px -1px #3a160d, 0 0 0 1px #1b1109;
  color: #e8c39c;
  background: #72271b;
  font: 27px/.8 var(--rs-font);
  text-shadow: 1px 1px #130704;
}
.equipment-close:hover { border-color: #e5b475 #30170e #30170e #e5b475; color: var(--rs-yellow); background: #953b25; }
.equipment-dialog .equipment-close {
  border: 0;
  box-shadow: none;
  background: url('/assets/ui/close.png') center / 21px 21px no-repeat;
  font-size: 0;
  image-rendering: pixelated;
}
.equipment-dialog .equipment-close:hover { background-image: url('/assets/ui/close-hover.png'); }
.equipment-wallet { gap: 20px; margin-top: 16px; padding-bottom: 13px; border-color: #7b6343; }
.equipment-wallet > p { color: #ddc7a3; font-size: 16px; line-height: 1.2; max-width: 640px; }
.equipment-wallet > div > span { color: var(--rs-orange); font-size: 13px; line-height: 1; letter-spacing: 0; }
.equipment-wallet strong { color: var(--rs-yellow); font: normal 26px/1.05 var(--rs-font); margin-top: 3px; }
.equipment-wallet small { color: #d5b67c; font: 15px var(--rs-font); }
.equipped-section h2 { margin: 13px 0 7px; color: var(--rs-orange); font: 14px/1 var(--rs-font); letter-spacing: 0; }
.equipped-items { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
.equipped-items button { padding: 8px 9px; background: #3d3326; min-width: 0; color: var(--rs-yellow); }
.equipped-items span { color: #bba483; font-size: 13px; margin-bottom: 4px; line-height: 1; }
.equipped-items strong { display: block; font: normal 17px/1 var(--rs-font); color: #f1ce87; overflow-wrap: normal; }
.equipment-tabs { gap: 5px; margin-top: 16px; border-bottom: 2px solid #231b10; padding-bottom: 5px; }
.equipment-tabs button { padding: 8px 19px; min-height: 34px; font: 17px/1 var(--rs-font); }
.equipment-tabs button[aria-pressed=true] { background: #6f2118; border-color: #b78356 #30160e #30160e #b78356; color: var(--rs-yellow); box-shadow: inset 1px 1px #a24931, inset -1px -1px #38120d; }
.equipment-dialog .equipment-tabs button[aria-pressed=true] {
  border: 6px solid transparent;
  border-image: url('/assets/ui/button-combat-selected.png') 6 fill stretch;
  background: transparent;
  box-shadow: none;
}
.equipment-slot-description { color: #d4bd97; font-size: 15px; line-height: 1.15; margin: 10px 0 13px; min-height: 17px; }
.equipment-columns, .equipment-item { grid-template-columns: minmax(170px,1.2fr) minmax(300px,1.7fr) 128px; gap: 16px; }
.equipment-columns { padding: 0 12px 8px; font-size: 12px; line-height: 1; letter-spacing: 0; color: #c0a47a; }
.equipment-items { gap: 6px; }
.equipment-item {
  padding: 12px;
  background: #3b3226;
  border: 1px solid #282016;
  border-right-color: #7a6243;
  border-bottom-color: #7a6243;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px #554430;
}
.equipment-item.is-equipped { border-color: #ad894c; background: #55452d; box-shadow: inset 0 0 0 1px #34291a; }
.equipment-identity h3 { color: #ffcc77; font: normal 21px/1.05 var(--rs-font); }
.equipment-identity p { margin-top: 6px; color: #c3b08d; font-size: 14px; line-height: 1; }
.equipment-requirements[data-met=false] { color: #ff7963; }
.equipment-bonuses { grid-template-columns: 1.15fr .65fr 1.15fr; gap: 10px; }
.equipment-bonuses dt { margin-bottom: 5px; color: #c0a780; font-size: 13px; line-height: 1; }
.equipment-bonuses dd { color: #ede0c5; font-size: 16px; line-height: 1; }
.equipment-bonuses small { color: #b2a084; font-size: 13px; line-height: 1.1; margin-top: 5px; }
.equipment-bonuses small[data-change=higher] { color: #89df62; }
.equipment-bonuses small[data-change=lower] { color: #ff7963; }
.equipment-actions { gap: 5px; }
.equipment-ownership { color: var(--rs-orange); font-size: 14px; line-height: 1; letter-spacing: 0; }
.equipment-actions button { color: var(--rs-yellow); padding: 7px 5px; min-height: 34px; font: 17px/1 var(--rs-font); }
.equipment-actions button:hover:not(:disabled) { background: #7c5834; border-color: #d2a164 #302115 #302115 #d2a164; }
.equipment-actions button:disabled { cursor: default; background: #3a3023; border-color: #6c583b #251b10 #251b10 #6c583b; box-shadow: inset 1px 1px #5d4a32; color: #b3a080; opacity: 1; }
.equipment-actions small { color: #bba482; font-size: 13px; line-height: 1.1; }
.equipment-footer { margin-top: 13px; padding-top: 11px; border-color: #8a704b; }
.equipment-footer > p { font-size: 13px; line-height: 1.25; color: #c1a986; }
.equipment-footer #equipment-status { min-height: 17px; margin-top: 7px; font-size: 16px; line-height: 1.2; color: var(--rs-yellow); }
.equipment-footer #equipment-save-status { margin-top: 6px; font-size: 13px; }
.equipment-dialog .equipment-tabs button,
.equipment-dialog .equipped-items button,
.equipment-dialog .equipment-actions button {
  border: 6px solid transparent;
  border-image: url('/assets/ui/button-combat.png') 6 fill stretch;
  background: transparent;
  box-shadow: none;
}
.equipment-dialog .equipment-tabs button[aria-pressed=true] {
  border-image-source: url('/assets/ui/button-combat-selected.png');
}
.equipment-dialog .equipment-tabs button:hover,
.equipment-dialog .equipped-items button:hover,
.equipment-dialog .equipment-actions button:hover:not(:disabled) {
  background: transparent;
  box-shadow: none;
  filter: brightness(1.12);
}
.equipment-dialog .equipment-actions button:disabled {
  background: transparent;
  box-shadow: none;
  border: 6px solid transparent;
  border-image: url('/assets/ui/button-combat.png') 6 fill stretch;
  filter: brightness(.75);
}

@media (max-width: 800px) {
  .equipment-shell { padding: 18px 18px 15px; }
  .equipment-columns, .equipment-item { grid-template-columns: minmax(140px,1.05fr) minmax(260px,1.65fr) 110px; gap: 10px; }
  .equipment-tabs button { padding-inline: 15px; }
  .equipment-identity h3 { font-size: 20px; }
  .equipment-bonuses { gap: 6px; }
  .equipment-bonuses dd { font-size: 15px; }
  .equipment-columns { font-size: 11px; }
  .upgrade-panel { padding: 20px; }
  .upgrade-options { gap: 10px; }
  .upgrade-options > button { padding: 16px 13px; }
  .upgrade-name { font-size: 24px; }
}

@media (max-width: 650px) {
  .screen { padding: 18px; }
  .menu-panel { width: 420px; padding: 18px 21px 15px; }
  .menu-panel h1 { font-size: 36px; }
  .menu-groundnote { max-width: 320px; font-size: 12px; }
  .compact-panel { width: 400px; padding: 23px; }
  .end-panel { padding: 22px; width: 460px; }
  .end-panel .end-emblem { display: none; }
  .end-panel h1 { font-size: 28px; }
  .end-stats span { font-size: 12px; }
  .end-panel .end-stats strong { font-size: 24px; }
  .end-skill-row { font-size: 16px; grid-template-columns: 1fr auto 90px; }
  .end-skill-row > small { font-size: 13px; }
  .upgrade-panel { padding: 20px 16px 17px; }
  .upgrade-panel h1 { font-size: 28px; }
  .upgrade-panel > .screen-subtitle { font-size: 16px; margin: 10px 0 16px; }
  .upgrade-options { grid-template-columns: 1fr; gap: 9px; }
  .upgrade-options > button { min-height: 0; display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 5px 11px; padding: 13px; }
  .upgrade-options > button:hover { transform: none; }
  .upgrade-icon { grid-column: 1; grid-row: 1 / 4; width: 40px; height: 40px; margin: 0; float: none; }
  .upgrade-kind, .upgrade-category, .upgrade-kicker, .upgrade-tag { grid-column: 2; font-size: 13px; margin: 0; }
  .upgrade-name, .upgrade-title { grid-column: 2; font-size: 23px; margin: 0; }
  .upgrade-description, .upgrade-desc { grid-column: 2; font-size: 16px; line-height: 1.15; }
  .upgrade-options > button::after { grid-column: 2; padding-top: 5px; font-size: 13px; }
  .choice-note { font-size: 14px; margin-top: 15px; }
  .equipment-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .equipment-shell { padding: 16px 13px; }
  .equipment-header { margin: -3px -1px 0; gap: 10px; }
  .equipment-header .eyebrow { font-size: 11px; }
  .equipment-header h1 { font-size: 23px; max-width: 270px; }
  .equipment-wallet { gap: 13px; margin-top: 13px; padding-bottom: 12px; align-items: flex-start; }
  .equipment-wallet > p { font-size: 14px; }
  .equipment-wallet > div > span { font-size: 12px; white-space: nowrap; }
  .equipment-wallet strong { font-size: 24px; white-space: nowrap; }
  .equipment-wallet small { font-size: 13px; }
  .equipped-section h2 { margin: 12px 0 7px; font-size: 13px; }
  .equipped-items { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
  .equipped-items button { padding: 7px 6px; }
  .equipped-items span { font-size: 12px; }
  .equipped-items strong { font-size: 15px; line-height: 1.05; }
  .equipment-tabs { margin-top: 14px; gap: 3px; justify-content: stretch; }
  .equipment-tabs button { flex: 1; min-width: 0; padding: 8px 4px; font-size: 14px; }
  .equipment-slot-description { font-size: 14px; line-height: 1.2; margin: 9px 0 11px; }
  .equipment-columns { display: none; }
  .equipment-item { grid-template-columns: minmax(0,1fr) 86px; gap: 10px 8px; padding: 10px; }
  .equipment-identity { grid-column: 1; grid-row: 1; }
  .equipment-identity h3 { font-size: 20px; line-height: 1; }
  .equipment-identity p { font-size: 13px; margin-top: 5px; line-height: 1.1; }
  .equipment-actions { grid-column: 2; grid-row: 1 / 3; align-self: center; gap: 5px; }
  .equipment-actions button { min-height: 34px; padding: 7px 3px; font-size: 16px; }
  .equipment-actions small, .equipment-ownership { font-size: 12px; }
  .equipment-bonuses { grid-column: 1; grid-row: 2; grid-template-columns: 1.1fr .75fr 1.1fr; gap: 5px; }
  .equipment-bonuses dt { font-size: 11px; margin-bottom: 4px; }
  .equipment-bonuses dd { font-size: 13px; letter-spacing: -.2px; }
  .equipment-bonuses small { font-size: 11px; line-height: 1.1; margin-top: 4px; }
  .equipment-footer > p, .equipment-footer #equipment-save-status { font-size: 12px; }
  .equipment-footer #equipment-status { font-size: 15px; }
  .toast { font-size: 16px; }
}

@media (max-width: 380px) {
  .screen { padding: 14px; }
  .menu-screen { gap: 13px; }
  .menu-panel { padding: 17px 18px 13px; }
  .menu-panel h1 { font-size: 33px; }
  .menu-location { font-size: 12px; gap: 7px; }
  .menu-description { font-size: 16px; }
  .run-rules { gap: 10px; margin: 14px 0; padding: 12px 0; }
  .run-rules strong { font-size: 17px; }
  .run-rules p { font-size: 14px; }
  .menu-panel .equipment-open { flex-direction: column; gap: 3px; padding: 7px; font-size: 17px; }
  .menu-panel .equipment-open .coin-balance { font-size: 14px; }
  .menu-skill-note { font-size: 15px; margin-top: 13px; }
  #menu-skill-summary { font-size: 14px; }
  .menu-footer { font-size: 12px; gap: 9px; }
  .compact-panel, .end-panel { padding: 20px 18px; }
  .pause-training .training-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .end-panel h1 { font-size: 26px; }
  .end-skill-row { grid-template-columns: 1fr auto 83px; font-size: 15px; }
  .end-skill-row > small { font-size: 12px; }
  .end-loot-section { font-size: 15px; }
  .end-loot-section p > span { font-size: 13px; }
  .upgrade-panel { padding: 18px 13px 15px; }
  .upgrade-panel h1 { font-size: 27px; }
  .upgrade-options > button { padding: 11px; gap: 5px 9px; }
  .upgrade-name { font-size: 22px; }
  .upgrade-description { font-size: 15px; }
  .equipment-header h1 { font-size: 22px; max-width: 230px; }
  .equipment-item { grid-template-columns: minmax(0,1fr) 78px; gap: 9px 6px; padding: 9px; }
  .equipment-bonuses { gap: 4px; }
  .equipment-bonuses dd { font-size: 12px; }
}

@media (max-height: 760px) {
  .screen:has(.menu-panel), .screen:has(.end-panel), .screen:has(.compact-panel), .screen:has(.upgrade-panel) { align-items: center; }
  .menu-panel { padding-top: 16px; padding-bottom: 14px; }
  .menu-panel .rune-emblem { display: none; }
  .menu-panel h1 { margin-top: 14px; }
  .menu-groundnote { display: none; }
  .menu-panel .menu-location { margin: 10px 0; }
  .menu-panel .run-rules { gap: 9px; margin: 13px 0; padding: 11px 0; }
  .menu-panel .menu-skill-note { margin-top: 12px; }
  .menu-panel .menu-footer { margin-top: 12px; }
  .end-panel { padding-top: 18px; padding-bottom: 17px; }
  .end-panel .end-emblem { display: none; }
}

@media (max-height: 600px) {
  .screen { align-items: flex-start; padding-block: 16px; }
  .screen:has(.menu-panel), .screen:has(.end-panel), .screen:has(.compact-panel), .screen:has(.upgrade-panel) { align-items: flex-start; }
  .menu-panel, .end-panel, .compact-panel, .upgrade-panel { margin-block: auto; }
  .menu-screen { justify-content: flex-start; }
  .menu-panel { margin-block: 0; }
}

/* Three primary combat styles share the native brown buttons and skill icons. */
.combat-style-picker{padding:0;margin:12px 0;border:0;text-align:left}
.combat-style-picker legend{color:#ffcf68;font:12px/1.2 'OSRS Small',monospace;margin-bottom:6px}
.combat-style-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.combat-style-buttons button{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 4px;color:#ffcf68;background:#514a3c url('/assets/ui/button-combat.png') center/100% 100%;border:2px ridge #827354;font:16px/1 'OSRS Plain',monospace;cursor:pointer;text-shadow:1px 1px #000}
.combat-style-buttons button[aria-pressed=true]{background-color:#792d24;background-image:url('/assets/ui/button-combat-selected.png');border-color:#c69d55;color:#ffff00}
.combat-style-buttons img{image-rendering:pixelated;object-fit:contain}
.combat-style-buttons button:disabled{opacity:.65;cursor:wait}
.equipment-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.skill-row[data-skill=ranged] .skill-row-title strong::before{background-image:url('/assets/ui/skill-ranged.png')}
.skill-row[data-skill=magic] .skill-row-title strong::before{background-image:url('/assets/ui/skill-magic.png')}
.ability-slot[hidden],.training-options button[hidden]{display:none!important}
.ability-slot[data-ability=splitshot] .ability-icon,.ability-slot[data-ability=piercing] .ability-icon,.ability-slot[data-ability=poisonarrow] .ability-icon,.ability-slot[data-ability=arrowrain] .ability-icon{background-image:url('/assets/ui/skill-ranged.png');color:transparent}
.ability-slot[data-ability=elementalburst] .ability-icon,.ability-slot[data-ability=chaincast] .ability-icon,.ability-slot[data-ability=bindingpulse] .ability-icon,.ability-slot[data-ability=arcaneward] .ability-icon{background-image:url('/assets/ui/skill-magic.png');color:transparent}
@media(max-width:600px){.combat-style-buttons button{font-size:14px;gap:4px}.combat-style-buttons img{width:20px;height:20px}.equipment-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}