.window[data-title="PVP"] { box-sizing: border-box; min-width: 620px; min-height: 390px; }
.window[data-title="PVP"] > .window-content { min-height: 0; padding: 0; overflow: hidden; background: #07183c; }

.robinhood-game {
  --rh-gold: #ffd85e;
  --rh-blue: #0c2b69;
  --rh-ink: #071638;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: #fff;
  background: #07183c;
  font: 700 12px/1.2 Tahoma, sans-serif;
}

.robinhood-game *, .robinhood-game *::before, .robinhood-game *::after { box-sizing: border-box; }
.robinhood-game button, .robinhood-game input { font: inherit; }
.rh-stage-wrap { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; overflow: hidden; background: #061435; container-type: size; }
.rh-stage { position: relative; width: min(100cqw, calc(100cqh * 16 / 9)); height: min(100cqh, calc(100cqw * 9 / 16)); overflow: hidden; background: #0c54b8; container-type: size; }
.rh-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; cursor: default; }

.rh-icon { display: inline-block; flex: 0 0 auto; width: clamp(18px, 2.6cqw, 34px); height: clamp(18px, 2.6cqw, 34px); background: url('../assets/robinhood-game/hud-icons.png') 0 50% / 800% 100% no-repeat; image-rendering: pixelated; vertical-align: middle; }
.rh-arena-hud { position: absolute; z-index: 3; top: 2.1%; left: calc(2.4% + clamp(25px, 3.4cqw, 42px)); right: calc(2.4% + clamp(25px, 3.4cqw, 42px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, .8fr) minmax(0, 1fr); gap: 3.8%; pointer-events: none; text-shadow: 2px 2px 0 var(--rh-ink); }
.rh-fighter { min-width: 0; }
.rh-fighter > div { display: flex; justify-content: space-between; gap: 8px; margin-bottom: .35cqh; font-size: clamp(8px, 1.18cqw, 15px); }
.rh-fighter strong { color: #fff8a5; white-space: nowrap; }
.rh-shiba-hud { text-align: right; }
.rh-health-track { position: relative; display: block; height: clamp(10px, 2cqh, 17px); overflow: hidden; border: clamp(1px, .3cqw, 3px) solid #fff; outline: 2px solid var(--rh-ink); background: #321b24; box-shadow: 2px 2px 0 rgba(0,0,0,.45); }
.rh-health-track::after { position: absolute; inset: 2px; content: ''; opacity: .24; background: repeating-linear-gradient(90deg, transparent 0 9%, #fff 9% 10%); }
.rh-health-fill { position: absolute; inset: 0 auto 0 0; display: block; background: linear-gradient(#55f779 0 48%, #1bba49 49% 100%); transition: width .15s steps(5); }
.rh-health-fill.shiba { background: linear-gradient(#ffbb4b 0 48%, #ee6e22 49% 100%); }
.rh-health-damage { position: absolute; z-index: 2; top: 0; bottom: 0; display: block; background: #fff; }
.rh-health-damage.active { animation: rh-damage-segment .12s steps(2) 6; }
.rh-round-hud { margin-top: -.4cqh; text-align: center; }
.rh-round-hud > b { display: block; color: var(--rh-gold); font-size: clamp(9px, 1.3cqw, 17px); letter-spacing: .04em; }
/* `display: block` above outranks the UA's [hidden] rule, so say it again. */
.rh-round-hud > b[hidden] { display: none; }
/* The PVP stage counter sits above ROUND and reads as the outer number. */
.rh-round-hud > b[data-hud="stage"] { color: #8dff9f; font-size: clamp(8px, 1.1cqw, 14px); }
.rh-round-hud > strong { display: block; margin: .15cqh 0; font-size: clamp(15px, 2.4cqw, 29px); }
.rh-wind { display: inline-flex; align-items: center; justify-content: center; min-width: 72%; padding: .2cqh .8cqw; border: 2px solid rgba(255,255,255,.8); background: rgba(7,22,56,.78); color: #fff8a5; font-size: clamp(9px, 1.35cqw, 17px); box-shadow: 3px 3px 0 rgba(0,0,0,.38); }

.rh-scoreboard { position: absolute; z-index: 3; top: 15.6%; left: 50%; display: flex; gap: 1.4cqw; transform: translateX(-50%); padding: .45cqh 1cqw; border: 2px solid rgba(255,255,255,.72); background: rgba(7,22,56,.76); color: #fff; font-size: clamp(8px, 1.1cqw, 14px); pointer-events: none; text-shadow: 2px 2px #071638; }
.rh-scoreboard b { color: var(--rh-gold); }
.rh-modifier { position: absolute; z-index: 3; top: 21.2%; left: 50%; display: flex; align-items: center; gap: .45cqw; max-width: 64%; transform: translateX(-50%); padding: .25cqh .7cqw; border: 2px solid #b7e7ff; background: rgba(0,57,133,.82); color: #fff; font-size: clamp(8px, 1.05cqw, 14px); text-align: center; text-shadow: 2px 2px #003067; pointer-events: none; }
.rh-modifier .rh-icon { width: clamp(15px, 2.2cqw, 27px); height: clamp(15px, 2.2cqw, 27px); }
.rh-repeat-warning { position: absolute; z-index: 8; top: 33%; left: 50%; transform: translateX(-50%); padding: .45cqh .9cqw; border: 3px solid #fff36b; background: #c73725; color: #fff; font-size: clamp(13px, 2cqw, 25px); letter-spacing: .06em; text-shadow: 2px 2px #5f130c; box-shadow: 4px 4px 0 rgba(0,0,0,.45); animation: rh-ready .3s steps(2) infinite; pointer-events: none; }

.rh-pixel-button { min-height: 30px; border: clamp(2px, .35cqw, 4px) solid #fff; border-right-color: #071638; border-bottom-color: #071638; background: linear-gradient(#397de9, #1550b6); color: #fff; box-shadow: 2px 2px 0 rgba(0,0,0,.45); text-shadow: 2px 2px 0 #073273; cursor: pointer; image-rendering: pixelated; }
.rh-pixel-button:hover:not(:disabled), .rh-pixel-button:focus-visible { filter: brightness(1.17); outline: 2px solid var(--rh-gold); outline-offset: 1px; }
.rh-pixel-button:active:not(:disabled) { transform: translate(1px, 1px); border-color: #071638 #fff #fff #071638; box-shadow: 1px 1px 0 rgba(0,0,0,.4); }
.rh-pixel-button:disabled { cursor: default; filter: grayscale(.85) brightness(.72); opacity: .72; }
.rh-icon-button { position: absolute; z-index: 5; top: 1.8%; right: 1.6%; width: clamp(25px, 3.4cqw, 42px); min-width: 0; height: clamp(25px, 3.4cqw, 42px); border: 2px solid #fff; border-right-color: #071638; border-bottom-color: #071638; background: #1550b6; color: #fff; cursor: pointer; box-shadow: 2px 2px #071638; }
.rh-leaderboard-open { position: absolute; z-index: 4; top: 9.5%; right: 1.6%; min-height: 24px; padding: .25cqh .7cqw; font-size: clamp(7px, .9cqw, 12px); }

.rh-hud-top { display: contents; }
/* The controls bar sits on the ground strip, under the fighters' feet
   (GROUND_Y 610 of 720 = 84.7%), so it never covers Alon, the dog or the aim
   arrow wherever the fighters stand. Empty outside the player's turn. */
.rh-controls { position: absolute; z-index: 4; left: 1.6%; right: 1.6%; bottom: 1%; height: 12.4%; display: flex; align-items: stretch; justify-content: center; gap: 1cqw; pointer-events: none; }
.rh-controls > * { pointer-events: auto; }
.rh-player-readout { display: flex; flex: 0 1 50cqw; min-width: 0; align-items: center; gap: .8cqw; padding: .3cqh .7cqw; border: clamp(2px, .32cqw, 4px) solid #fff; background: rgba(7,22,56,.87); box-shadow: 3px 3px 0 rgba(0,0,0,.5); }
.rh-player-readout[hidden] { display: none; }
.rh-angle { display: flex; flex: none; align-items: center; gap: .55cqw; padding: .35cqh .65cqw; border: 2px solid #fff; background: rgba(7,22,56,.9); color: #fff8a5; font-size: clamp(9px, 1.25cqw, 16px); text-shadow: 2px 2px #071638; white-space: nowrap; }
.rh-angle-lock { align-self: center; padding: .12em .4em; border: 2px solid #fff36b; background: #228245; color: #fff; font-size: .72em; font-style: normal; letter-spacing: .04em; animation: rh-lock-pulse .6s steps(2) infinite; }
.rh-angle-lock[hidden] { display: none; }
.rh-power-meter { flex: 1 1 18cqw; min-width: 0; }
.rh-power-meter label > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rh-power-meter label { display: flex; gap: .4cqw; white-space: nowrap; justify-content: space-between; margin-bottom: .35cqh; color: #fff8a5; font-size: clamp(8px, 1.05cqw, 14px); }
.rh-power-meter > span { position: relative; display: block; height: clamp(12px, 2.1cqh, 20px); overflow: hidden; border: 2px solid #fff; background: #152441; }
.rh-power-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#32cf54 0 64%,#ffd548 65% 87%,#ff5a3c 88%); transition: width .05s linear; }
.rh-power-meter i.overcharge { animation: rh-overcharge .18s steps(2) infinite; }
.rh-power-meter em { position: absolute; top: -2px; bottom: -2px; width: 3px; background: #fff; box-shadow: 0 0 0 1px #071638; }
.rh-is-charging .rh-player-readout { flex-basis: 60cqw; border-color: #fff36b; background: rgba(7,22,56,.96); animation: rh-charge-panel .55s steps(2) infinite; }
.rh-is-charging .rh-power-meter label { font-size: clamp(9px, 1.3cqw, 17px); letter-spacing: .04em; }
.rh-is-charging .rh-power-meter > span { height: clamp(16px, 3.6cqh, 34px); border-width: clamp(3px, .45cqw, 5px); box-shadow: 0 0 0 3px #071638; }
.rh-is-charging .rh-power-meter i.overcharge { background: repeating-linear-gradient(135deg,#ffef5a 0 14px,#e42f26 14px 28px); box-shadow: inset 0 0 0 4px #fff; }
.rh-super { display: flex; flex: none; align-items: center; justify-content: center; gap: .45cqw; align-self: stretch; padding: .3cqh .55cqw; font-size: clamp(8px, 1.1cqw, 14px); }
.rh-super small { display: flex; margin-left: auto; align-items: center; gap: .35cqw; color: #dce7ff; }
.rh-super.ready { border-color: #92ffac #166b31 #166b31 #92ffac; background: linear-gradient(#29b853,#0d792e); animation: rh-ready .65s steps(2) infinite; filter: none; opacity: 1; }
.rh-super.queued { background: linear-gradient(#e8a92a,#ad5e09); }

.rh-throw { flex: none; min-width: clamp(130px, 20cqw, 280px); padding: .4cqh 1.4cqw; font-size: clamp(9px, 1.3cqw, 17px); }
.rh-throw[hidden] { display: none; }
.rh-throw small, .rh-brace small { display: none; margin-left: .6cqw; }
.rh-brace { display: flex; flex: none; min-width: clamp(150px, 22cqw, 280px); align-items: center; justify-content: center; background: linear-gradient(#f08f30,#b73d1e); font-size: clamp(11px, 1.6cqw, 20px); animation: rh-ready .42s steps(2) infinite; }
.rh-brace[hidden] { display: none; }
.rh-keyboard-active .rh-throw small, .rh-keyboard-active .rh-brace small { display: inline; }
.rh-keyboard-help { position: absolute; z-index: 3; left: 1.8%; top: 12%; display: none; padding: .35cqh .55cqw; background: rgba(7,22,56,.74); font-size: clamp(7px, .8cqw, 11px); text-shadow: 1px 1px #071638; }
.rh-keyboard-active .rh-keyboard-help { display: block; }
kbd { display: inline-block; min-width: 1.6em; padding: .05em .28em; border: 1px solid #fff; border-right-color: #16213f; border-bottom-color: #16213f; background: #e9eef9; color: #071638; font: 700 .85em Tahoma, sans-serif; text-align: center; text-shadow: none; }
.rh-tutorial { position: absolute; z-index: 4; left: 50%; top: 40%; transform: translateX(-50%); padding: .4cqh .9cqw; border: 2px solid #fff8a5; background: rgba(7,22,56,.9); color: #fff8a5; font-size: clamp(10px, 1.5cqw, 19px); letter-spacing: .04em; text-shadow: 2px 2px #071638; animation: rh-tutorial-bob .65s steps(2) infinite; pointer-events: none; }
.rh-tutorial[hidden] { display: none; }
.rh-message { position: absolute; z-index: 3; left: 27%; right: 27%; top: 28%; overflow: hidden; color: #fff; font-size: clamp(8px, 1.12cqw, 15px); text-align: center; text-overflow: ellipsis; text-shadow: 2px 2px 0 #003399,-1px -1px 0 #003399; white-space: nowrap; pointer-events: none; }

.rh-panel { position: absolute; z-index: 12; top: 50%; left: 50%; width: min(430px, 82%); max-height: 86%; overflow: auto; transform: translate(-50%,-50%); border: clamp(3px, .5cqw, 6px) solid #fff; border-right-color: #051334; border-bottom-color: #051334; background: linear-gradient(#174f9d,#081f55 32%,#061638); color: #fff; padding: clamp(9px, 1.5cqw, 18px); box-shadow: clamp(4px, .7cqw, 8px) clamp(4px, .7cqw, 8px) 0 rgba(0,0,0,.55); text-align: center; text-shadow: 1px 1px #071638; }
.rh-panel[hidden] { display: none; }
.rh-panel-title { display: flex; min-height: 30px; align-items: center; justify-content: center; gap: .55cqw; margin: calc(clamp(9px, 1.5cqw, 18px) * -1) calc(clamp(9px, 1.5cqw, 18px) * -1) 1.2cqh; padding: .5cqh .8cqw; border-bottom: 3px solid #fff; background: linear-gradient(90deg,#0b36a0,#2e8ae6,#0b36a0); color: #fff8a5; font-size: clamp(12px, 1.7cqw, 21px); letter-spacing: .035em; }
.rh-panel-close { position: absolute; top: .45cqh; right: .55cqw; width: clamp(23px,3cqw,34px); height: clamp(23px,3cqw,34px); border: 2px solid #fff; border-right-color: #59120b; border-bottom-color: #59120b; background: #db4c34; color: #fff; cursor: pointer; }
.rh-panel p { margin: .7cqh 0; }
.rh-timing-track { position: relative; height: clamp(24px, 4.5cqh, 42px); margin: 1.2cqh 0; border: 3px solid #fff; background: linear-gradient(90deg,#c13e33 0 35%,#2fbe58 35% 65%,#c13e33 65%); box-shadow: inset 0 0 0 3px #071638; }
.rh-timing-track span { position: absolute; inset: 3px auto 3px 45%; width: 10%; background: #8dff9f; }
.rh-timing-track i { position: absolute; top: -5px; width: 5px; height: calc(100% + 10px); background: #fff8a5; box-shadow: 0 0 0 2px #071638; }
.rh-timing-lock { min-width: 62%; padding: .7cqh 1cqw; }
.rh-pause-screen .rh-resume { width: 100%; margin-bottom: 1cqh; padding: .65cqh; }
.rh-seed-label { display: grid; grid-template-columns: auto 1fr; gap: .7cqw; align-items: center; margin: .7cqh 0; color: #fff8a5; text-align: left; }
.rh-seed { min-width: 0; height: 28px; border: 2px solid #071638; border-right-color: #fff; border-bottom-color: #fff; background: #eaf2ff; color: #071638; padding: 2px 5px; }
.rh-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55cqw; margin: .8cqh 0; }
.rh-menu-grid button { padding: .45cqh .35cqw; font-size: clamp(7px,.9cqw,11px); }

.rh-leaderboard { width: min(880px, 92%); }
.rh-leaderboard > p { color: #dbe9ff; font-size: clamp(7px,.9cqw,12px); }
.rh-leaderboard-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45cqw; margin-bottom: .75cqh; }
.rh-tab { min-height: 30px; padding: .4cqh .35cqw; font-size: clamp(7px,.86cqw,11px); }
.rh-tab.active { border-color: #fff36b #755b00 #755b00 #fff36b; background: linear-gradient(#27a957,#0b702f); color: #fff; }
.rh-ranked-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5cqw; margin: .65cqh 0; }
.rh-ranked-summary[hidden] { display: none; }
.rh-ranked-summary span { padding: .55cqh .35cqw; border: 2px solid #3971be; background: #0a2558; color: #bcd1f5; font-size: clamp(7px,.8cqw,10px); }
.rh-ranked-summary b { display: block; margin-top: .25cqh; color: #fff8a5; font-size: clamp(10px,1.15cqw,15px); }
.rh-ranked-action { min-width: 210px; margin: 0 0 .55cqh; padding: .55cqh 1cqw; }
.rh-ranked-action[hidden] { display: none; }
.rh-leaderboard-status { min-height: 1.3em; margin-bottom: .4cqh; color: #fff8a5; font-size: clamp(7px,.8cqw,10px); }
.rh-verified { color: #83ff9e; }
.rh-rejected { color: #ff8d81; }
.rh-table-scroll { overflow: auto; max-height: 55cqh; border: 2px solid #fff; background: #071638; }
.rh-leaderboard table { width: 100%; border-collapse: collapse; font-size: clamp(7px,.9cqw,12px); text-align: center; }
.rh-leaderboard th { position: sticky; top: 0; background: #184eaa; color: #fff8a5; }
.rh-leaderboard th, .rh-leaderboard td { padding: .55cqh .45cqw; border: 1px solid #457acb; white-space: nowrap; }
.rh-leaderboard tr:nth-child(even) { background: #0f2b63; }
.rh-mini-button { border: 1px solid #fff; background: #2a67c9; color: #fff; cursor: pointer; font-size: .9em; }
.rh-empty { height: 70px; color: #c7d6ef; }

.rh-results { width: min(650px, 88%); }
.rh-final-score { display: flex; flex-direction: column; align-items: center; margin-bottom: 1cqh; }
.rh-final-score span { color: #c8d9ff; }
.rh-final-score strong { color: var(--rh-gold); font-size: clamp(28px, 5cqw, 58px); line-height: 1; }
.rh-final-score em { min-height: 1.2em; color: #82ff9c; font-style: normal; }
.rh-result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .55cqw; }
.rh-result-grid span { display: flex; min-height: clamp(42px, 8cqh, 70px); flex-direction: column; justify-content: center; border: 2px solid #3971be; background: #0a2558; color: #bcd1f5; font-size: clamp(7px,.9cqw,12px); }
.rh-result-grid b { margin-top: .35cqh; color: #fff; font-size: clamp(12px,1.5cqw,19px); }
.rh-result-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: .55cqw; margin: 1cqh 0; }
.rh-result-actions button { padding: .65cqh .3cqw; font-size: clamp(7px,.95cqw,12px); }
.rh-result-actions .rh-result-retry[hidden] { display: none; }
.rh-save-status { display: block; margin-bottom: .4cqh; color: #ffb37a; font-size: clamp(7px,.85cqw,11px); }
.rh-save-status[hidden] { display: none; }
.rh-checksum { color: #8ea9d0; font: 9px Consolas, monospace; }
.rh-results > p { color: #fff8a5; font-size: clamp(7px,.8cqw,10px); }

/* Character picker (js/robinhood-game/characterPicker.js). Slots are buttons,
   so each one resets the xp.css 75px button minimum; 44px is the smallest tap target. */
.rh-characters { width: min(540px, 92%); }
.rh-character-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1cqw, 12px); margin: .4cqh 0 1cqh; }
.rh-character-slot { display: flex; min-width: 0; min-height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: clamp(6px, 1cqh, 10px) 4px; border: 3px solid #fff; border-right-color: #071638; border-bottom-color: #071638; background: linear-gradient(#1f63c9, #0d3b8f); color: #fff; text-shadow: 1px 1px #071638; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.rh-character-slot:hover:not(.is-locked) { filter: brightness(1.15); }
.rh-character-slot:focus-visible { outline: 3px solid var(--rh-gold); outline-offset: 2px; }
.rh-character-slot[aria-checked="true"] { border-color: #fff36b #755b00 #755b00 #fff36b; background: linear-gradient(#27a957, #0b702f); box-shadow: 0 0 0 2px #071638, 0 0 0 4px var(--rh-gold); }
/* xp.css styles button:hover/:focus with its own glow and dotted outline; the slots keep their own look. */
/* Doubled class: xp.css's button:not(:disabled):hover is (0,2,1) and must lose. */
.rh-character-slot.rh-character-slot:is(:hover, :active, :focus) { box-shadow: none; }
.rh-character-slot.rh-character-slot:focus:not(:focus-visible) { outline: none; }
.rh-character-slot.rh-character-slot[aria-checked="true"]:is(:hover, :active, :focus) { box-shadow: 0 0 0 2px #071638, 0 0 0 4px var(--rh-gold); }
.rh-character-slot.is-locked { border-style: dashed; border-color: #6f8fc4; background: #0a2253; color: #9fb4d8; cursor: not-allowed; }
.rh-character-art { display: grid; width: clamp(40px, 7cqw, 64px); aspect-ratio: 1; place-items: center; }
.rh-character-art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.rh-character-silhouette { width: 82%; height: 82%; fill: #3d5f99; }
.rh-character-name { max-width: 100%; overflow: hidden; font-size: clamp(8px, 1.05cqw, 13px); font-weight: bold; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.rh-character-slot.is-locked .rh-character-name { font-size: clamp(7px, .85cqw, 11px); }
.rh-character-skins { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: .8cqh; }
.rh-character-skins[hidden] { display: none; }
.rh-character-skin { min-width: 0; min-height: 30px; padding: 2px 10px; font-size: clamp(8px, .95cqw, 12px); }
.rh-character-skin[aria-checked="true"] { border-color: #fff36b #755b00 #755b00 #fff36b; background: linear-gradient(#27a957, #0b702f); }
.rh-character-note { color: #c8d9ff; font-size: clamp(7px, .85cqw, 11px); }
.rh-character-status { display: block; min-height: 1.3em; color: #fff8a5; font-size: clamp(7px, .85cqw, 11px); }
.rh-character-play { min-width: min(260px, 100%); min-height: 44px; padding: .6cqh 1cqw; font-size: clamp(9px, 1.1cqw, 14px); }

/* PVP select screen (js/robinhood-game/pvpSelect.js). It reuses the picker's
   slot styling, so a fighter looks the same wherever it is chosen. The grid
   keeps its columns at every window size: the panel scrolls vertically inside
   the window, and nothing here ever scrolls sideways. */
.rh-select { width: min(720px, 94%); }
.rh-select-body { display: grid; grid-template-columns: minmax(0, 118px) minmax(0, 1fr); gap: clamp(8px, 1.4cqw, 16px); align-items: start; }
.rh-select-preview { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: clamp(6px, 1cqh, 10px) 4px; border: 3px solid #fff; border-right-color: #071638; border-bottom-color: #071638; background: linear-gradient(#0d3b8f, #06204f); }
.rh-select-art { display: grid; width: 100%; aspect-ratio: 1; place-items: center; }
.rh-select-art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.rh-select-name { max-width: 100%; overflow: hidden; color: #fff8a5; font-size: clamp(10px, 1.3cqw, 16px); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.rh-select-role { color: #b9cdf2; font-size: clamp(7px, .8cqw, 10px); letter-spacing: .06em; }
.rh-select-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.rh-select-note { color: #c8d9ff; font-size: clamp(7px, .85cqw, 11px); }
.rh-select-status { display: block; min-height: 1.3em; color: #fff8a5; font-size: clamp(7px, .85cqw, 11px); }
.rh-select-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(6px, 1cqw, 12px); }
.rh-select-actions button { min-width: 0; min-height: 44px; padding: .6cqh 1cqw; font-size: clamp(9px, 1.1cqw, 14px); }
.rh-select-next { background: linear-gradient(#27a957, #0b702f); }

/* Stage screen: VS, YOU WIN!, GAME OVER and PVP CHAMPION all paint here
   (renderStageScreen() in js/robinhoodGame.js). */
.rh-stage-screen { width: min(680px, 94%); overflow: hidden; background: linear-gradient(135deg,#071638 0 48%,#123f88 49% 51%,#071638 52%); }
.rh-stage-sub { color: #fff8a5; font-size: clamp(9px, 1.15cqw, 14px); letter-spacing: .05em; }
.rh-stage-note { min-height: 1.3em; color: #c8d9ff; font-size: clamp(8px, .95cqw, 12px); letter-spacing: .04em; }
.rh-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(6px, 1cqw, 14px); align-items: center; margin: .8cqh 0; overflow: hidden; }
.rh-stage-screen.is-solo .rh-versus { grid-template-columns: minmax(0, 1fr); }
.rh-stage-screen.is-solo .rh-versus-mark, .rh-stage-screen.is-solo .rh-versus-side:last-child { display: none; }
.rh-versus-side { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: clamp(5px, .9cqh, 9px) 4px; border: 3px solid #fff; border-right-color: #071638; border-bottom-color: #071638; background: linear-gradient(#1f63c9, #0d3b8f); }
.rh-versus-art { display: grid; width: clamp(92px, 15cqw, 176px); aspect-ratio: 1; place-items: center; }
.rh-versus-art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.rh-versus-side figcaption { max-width: 100%; overflow: hidden; font-size: clamp(8px, 1.05cqw, 13px); font-weight: bold; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.rh-versus-mark { color: #fff36b; font-size: clamp(34px, 6cqw, 76px); font-style: italic; letter-spacing: -.08em; text-shadow: 5px 5px #9b271c; transform: rotate(-7deg); }
.rh-stage-screen.is-impact .rh-versus-side:first-child { animation: rh-vs-left .42s steps(5) both; }
.rh-stage-screen.is-impact .rh-versus-side:last-child { animation: rh-vs-right .42s steps(5) both; }
.rh-stage-screen.is-impact .rh-versus-mark { animation: rh-vs-impact .5s steps(4) .28s both; }
.rh-stage-skip { margin: 0 auto .6cqh; min-height: 28px; padding: 2px 14px; font-size: clamp(8px,.9cqw,11px); }
.rh-stage-skip[hidden] { display: none; }
.rh-stage-defeated { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin: .6cqh 0; padding: 0; list-style: none; }
.rh-stage-defeated[hidden] { display: none; }
.rh-stage-defeated li { padding: 2px 7px; border: 2px solid #3971be; background: #0a2558; color: #bcd1f5; font-size: clamp(7px, .85cqw, 11px); }
.rh-stage-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(6px, 1cqw, 12px); }
.rh-stage-actions button { min-width: 0; min-height: 44px; padding: .6cqh .8cqw; font-size: clamp(9px, 1.05cqw, 13px); }
.rh-stage-actions button[hidden] { display: none; }
.rh-stage-again { background: linear-gradient(#27a957, #0b702f); }

/* 3 · 2 · 1 · FIGHT over the arena, during the simulation's round-one intro. */
.rh-countdown { position: absolute; z-index: 9; top: 38%; left: 50%; transform: translateX(-50%); color: #fff36b; font-size: clamp(30px, 6cqw, 86px); letter-spacing: .08em; text-shadow: 4px 4px #071638; pointer-events: none; }
.rh-countdown[hidden] { display: none; }

@keyframes rh-vs-left { from { transform: translateX(-130%); } to { transform: translateX(0); } }
@keyframes rh-vs-right { from { transform: translateX(130%); } to { transform: translateX(0); } }
@keyframes rh-vs-impact { 0% { opacity: 0; transform: scale(2.2) rotate(-7deg); } 100% { opacity: 1; transform: scale(1) rotate(-7deg); } }

/* A button that takes a whole row of its grid (OPTIONS under the menu pairs). */
.rh-menu-grid .rh-wide, .rh-result-actions .rh-wide { grid-column: 1 / -1; }

/* OPTIONS and LEAVE RANKED RUN? (js/robinhood-game/settingsPanel.js): modal
   dialogs over a backdrop that keeps the HUD buttons underneath from being hit. */
.rh-modal { position: absolute; z-index: 20; inset: 0; background: rgba(4,12,34,.62); }
.rh-modal[hidden] { display: none; }
.rh-options { display: flex; width: min(760px, 94%); max-height: 92%; flex-direction: column; padding-bottom: clamp(8px, 1.2cqw, 14px); text-align: left; }
.rh-options-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.rh-options-columns { columns: 2 280px; column-gap: clamp(6px, 1cqw, 12px); }
/* xp.css styles fieldset and legend (rounded light border, blue legend); the duel's panels do not. */
.rh-settings-section { min-width: 0; margin: 0 0 clamp(6px, 1cqw, 12px); padding: 4px 8px 8px; break-inside: avoid; border: 2px solid #5f8fd6; border-right-color: #031030; border-bottom-color: #031030; border-radius: 0; background: rgba(4,18,52,.55); box-shadow: none; }
.rh-settings-section legend { padding: 0 4px; background: transparent; color: var(--rh-gold); font-size: clamp(9px, 1.05cqw, 13px); letter-spacing: .05em; }
.rh-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 5px 0; border-bottom: 1px dotted rgba(159,190,240,.35); }
.rh-setting:last-child { border-bottom: 0; }
.rh-setting-choice { grid-template-columns: minmax(0, 1fr); }
.rh-setting-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.rh-setting-label { color: #fff; font-size: clamp(9px, 1.05cqw, 13px); letter-spacing: .03em; }
.rh-setting-description { color: #b9cdf2; font-size: clamp(8px, .9cqw, 11px); font-weight: normal; line-height: 1.3; text-shadow: none; }
.rh-options .rh-pixel-button { min-width: 0; min-height: 30px; }
.rh-options .rh-setting-switch { width: 64px; padding: 2px 6px; font-size: clamp(9px, 1cqw, 12px); }
.rh-setting-switch[aria-checked="true"], .rh-setting-option[aria-checked="true"] { border-color: #fff36b #755b00 #755b00 #fff36b; background: linear-gradient(#27a957, #0b702f); }
.rh-setting-switch[aria-checked="false"] { background: linear-gradient(#5a6680, #343d52); }
/* The row is its own size container, so labels like PERFORMANCE shrink with a narrow phone instead of overflowing. */
.rh-setting-options { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; container-type: inline-size; }
/* Two classes: `.robinhood-game button { font: inherit }` is (0,1,1). */
.rh-options .rh-setting-option { padding: 2px; font-size: clamp(8px, 3.7cqi, 12px); letter-spacing: 0; white-space: nowrap; }
.rh-setting-range { grid-template-columns: minmax(0, 1fr) minmax(90px, 40%) 3.2em; }
.rh-setting-slider { width: 100%; min-width: 0; }
.rh-setting-value { color: #fff8a5; font-size: clamp(9px, 1cqw, 12px); text-align: right; }
.rh-shortcuts { padding-top: 6px; }
.rh-shortcuts dl { display: grid; gap: 3px; margin: 4px 0 0; }
.rh-shortcuts dl > div { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); align-items: baseline; gap: 6px; }
.rh-shortcuts dt { white-space: nowrap; }
.rh-shortcuts dd { margin: 0; color: #c8d9ff; font-size: clamp(8px, .88cqw, 11px); font-weight: normal; text-shadow: none; }
.rh-options-status { display: block; min-height: 1.3em; margin: 6px 0 2px; color: #ffb37a; font-size: clamp(8px, .9cqw, 11px); text-align: center; }
.rh-options-actions, .rh-confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(6px, 1cqw, 12px); }
.rh-options-actions button, .rh-confirm-actions button { min-height: 36px; padding: .5cqh .8cqw; font-size: clamp(9px, 1.05cqw, 13px); }
.rh-options-done, .rh-confirm-keep { background: linear-gradient(#27a957, #0b702f); }
.rh-confirm { width: min(460px, 90%); }
.rh-confirm p { color: #fff8a5; font-size: clamp(9px, 1.05cqw, 13px); line-height: 1.35; }
.rh-confirm small { display: block; margin-top: 8px; color: #b9cdf2; font-size: clamp(8px, .85cqw, 11px); }
.rh-confirm-leave { background: linear-gradient(#e0533c, #a02a1a); }
/* Touch: every control in the dialogs is at least a 44px target. */
@media (pointer: coarse) {
  .rh-options .rh-pixel-button, .rh-options-actions button, .rh-confirm-actions button { min-height: 44px; }
  /* A square 44px close button, with a title band tall enough to hold it clear of the list below. */
  .rh-options .rh-panel-title { min-height: 50px; }
  .rh-options-close { width: 44px; min-width: 0; height: 44px; }
  .rh-options .rh-setting-switch { width: 72px; }
  .rh-setting-slider { min-height: 44px; }
}

/* GAMEPLAY > KEYBOARD HINTS off: no key strip and no key labels on the buttons. */
.robinhood-game[data-rh-hints="off"] :is(.rh-keyboard-help, .rh-throw small, .rh-brace small, .rh-super kbd, .rh-timing-lock kbd) { display: none; }

@keyframes rh-damage-segment { 50% { background: #ff4e39; } }
@keyframes rh-ready { 50% { filter: brightness(1.25); } }
@keyframes rh-overcharge { 50% { filter: brightness(1.5); } }
@keyframes rh-tutorial-bob { 50% { margin-top: -.45cqh; } }
@keyframes rh-lock-pulse { 50% { background: #35b75f; } }
@keyframes rh-charge-panel { 50% { box-shadow: 4px 4px 0 rgba(0,0,0,.5), 0 0 0 3px rgba(255,243,107,.35); } }

@container (max-width: 720px) {
  .rh-arena-hud { grid-template-columns: 1fr 120px 1fr; gap: 1.6%; }
  .rh-fighter > div { display: block; }
  .rh-fighter strong { display: block; }
  .rh-message { left: 18%; right: 18%; }
  .rh-menu-grid, .rh-result-actions { grid-template-columns: 1fr; }
  .rh-leaderboard-tabs, .rh-ranked-summary { grid-template-columns: 1fr; }
  .rh-character-name { font-size: 10px; }
  .rh-character-slot.is-locked .rh-character-name { font-size: 9px; }
  /* The select screen narrows by dropping columns, never by scrolling sideways. */
  .rh-select-body { grid-template-columns: minmax(0, 1fr); }
  .rh-select-preview { flex-direction: row; justify-content: center; gap: 10px; }
  .rh-select-art { width: clamp(44px, 12cqw, 64px); }
  .rh-select-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rh-select-actions, .rh-stage-actions { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ bands
   js/robinhood-game/viewport.js picks data-rh-layout from the free space
   around the 16:9 arena and sets --rh-arena-w / --rh-arena-h. In "stack" and
   "side" the stage becomes a grid the size of the whole game: the canvas and
   the in-arena overlays share the "arena" area (absolutely positioned inside
   it, so the world is never stretched), the HUD moves into the bands. Band
   sizes are fixed (HUD_BANDS), so the arena never moves when a band empties. */
.robinhood-game[data-rh-layout="stack"] .rh-stage,
.robinhood-game[data-rh-layout="side"] .rh-stage { display: grid; width: 100%; height: 100%; background: transparent; }
.robinhood-game[data-rh-layout="stack"] .rh-stage { grid-template-columns: minmax(0,1fr) var(--rh-arena-w) minmax(0,1fr); grid-template-rows: minmax(0,1fr) 112px var(--rh-arena-h) 112px minmax(0,1fr); grid-template-areas: ". . ." ". top ." ". arena ." ". bottom ." ". . ."; }
.robinhood-game[data-rh-layout="side"] .rh-stage { grid-template-columns: minmax(0,1fr) var(--rh-arena-w) minmax(0,1fr); grid-template-rows: minmax(0,1fr) var(--rh-arena-h) minmax(0,1fr); grid-template-areas: "left . right" "left arena right" "left . right"; }
.robinhood-game[data-rh-layout="stack"] :is(.rh-canvas, .rh-message, .rh-repeat-warning, .rh-countdown, .rh-tutorial, .rh-keyboard-help),
.robinhood-game[data-rh-layout="side"] :is(.rh-canvas, .rh-message, .rh-repeat-warning, .rh-countdown, .rh-tutorial, .rh-keyboard-help, .rh-arena-hud) { grid-area: arena; }
.robinhood-game[data-rh-layout="stack"] .rh-message { top: 5%; left: 6%; right: 6%; font-size: 11px; }
.robinhood-game[data-rh-layout="stack"] .rh-keyboard-help { top: 15%; }

/* stack, top band: score + buttons / health, round, wind / modifier */
.robinhood-game[data-rh-layout="stack"] .rh-hud-top { grid-area: top; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; grid-template-areas: "score . board pause" "status status status status" "modifier modifier modifier modifier"; align-content: end; align-items: center; gap: 4px 6px; padding: 0 6px 6px; }
.robinhood-game[data-rh-layout="stack"] .rh-hud-top > * { position: static; transform: none; inset: auto; max-width: none; }
.robinhood-game[data-rh-layout="stack"] .rh-scoreboard { grid-area: score; gap: 10px; padding: 2px 8px; font-size: 11px; }
.robinhood-game[data-rh-layout="stack"] .rh-leaderboard-open { grid-area: board; min-height: 28px; padding: 2px 8px; font-size: 11px; }
.robinhood-game[data-rh-layout="stack"] .rh-pause { grid-area: pause; width: 28px; height: 28px; }
.robinhood-game[data-rh-layout="stack"] .rh-arena-hud { grid-area: status; grid-template-columns: minmax(0,1fr) 104px minmax(0,1fr); gap: 8px; }
.robinhood-game[data-rh-layout="stack"] .rh-fighter { display: flex; flex-direction: column; justify-content: flex-end; align-self: stretch; }
.robinhood-game[data-rh-layout="stack"] .rh-fighter > div { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 6px; margin-bottom: 3px; font-size: 10px; }
.robinhood-game[data-rh-layout="stack"] .rh-health-track { height: 12px; border-width: 2px; }
.robinhood-game[data-rh-layout="stack"] .rh-round-hud { margin: 0; }
.robinhood-game[data-rh-layout="stack"] .rh-round-hud > b { font-size: 11px; }
.robinhood-game[data-rh-layout="stack"] .rh-round-hud > strong { margin: 0; font-size: 17px; }
.robinhood-game[data-rh-layout="stack"] .rh-wind { min-width: 0; padding: 1px 4px; font-size: 10px; }
.robinhood-game[data-rh-layout="stack"] .rh-wind .rh-icon { width: 16px; height: 16px; }
.robinhood-game[data-rh-layout="stack"] .rh-modifier { grid-area: modifier; justify-self: center; gap: 4px; padding: 1px 6px; font-size: 10px; }
.robinhood-game[data-rh-layout="stack"] .rh-modifier .rh-icon { width: 15px; height: 15px; }

/* stack, bottom band: angle | power / market pump | throw (brace takes the throw's place) */
.robinhood-game[data-rh-layout="stack"] .rh-controls { position: static; grid-area: bottom; display: grid; height: auto; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: 42px 52px; grid-template-areas: "angle power" "super throw"; gap: 6px; padding: 6px 6px 0; }
.robinhood-game[data-rh-layout="stack"] .rh-player-readout:not([hidden]) { display: contents; }
.robinhood-game[data-rh-layout="stack"] .rh-angle { grid-area: angle; justify-content: center; padding: 2px 6px; font-size: 13px; }
.robinhood-game[data-rh-layout="stack"] .rh-power-meter { grid-area: power; padding: 3px 6px; border: 2px solid #fff; background: rgba(7,22,56,.9); }
.robinhood-game[data-rh-layout="stack"] .rh-power-meter label { margin-bottom: 2px; font-size: 11px; }
.robinhood-game[data-rh-layout="stack"] .rh-power-meter > span { height: 14px; }
.robinhood-game[data-rh-layout="stack"].rh-is-charging .rh-power-meter { border-color: #fff36b; }
.robinhood-game[data-rh-layout="stack"].rh-is-charging .rh-power-meter label { font-size: 11px; letter-spacing: 0; }
.robinhood-game[data-rh-layout="stack"].rh-is-charging .rh-power-meter > span { height: 16px; border-width: 2px; box-shadow: none; }
.robinhood-game[data-rh-layout="stack"] .rh-super { grid-area: super; min-width: 0; padding: 2px 6px; font-size: 11px; }
.robinhood-game[data-rh-layout="stack"] :is(.rh-throw, .rh-brace) { grid-area: throw; min-width: 0; padding: 2px 6px; font-size: 13px; }

/* side, landscape phone: aim / power / pump on the left, throw on the right */
.robinhood-game[data-rh-layout="side"] .rh-controls { display: contents; }
.robinhood-game[data-rh-layout="side"] .rh-player-readout { position: absolute; z-index: 4; grid-area: left; top: 46px; left: 6px; right: 6px; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; }
.robinhood-game[data-rh-layout="side"] .rh-power-meter { flex: none; }
.robinhood-game[data-rh-layout="side"] .rh-arena-hud { left: 1.8%; right: 1.8%; }
.robinhood-game[data-rh-layout="side"] .rh-angle { justify-content: center; padding: 2px 4px; font-size: 12px; }
/* "LOCKED" in the label already says it; the band has no room for both. */
.robinhood-game[data-rh-layout="side"] .rh-angle-lock { display: none; }
.robinhood-game[data-rh-layout="side"] .rh-power-meter label { flex-wrap: wrap; font-size: 9px; white-space: normal; }
.robinhood-game[data-rh-layout="side"] .rh-power-meter > span { height: 14px; }
.robinhood-game[data-rh-layout="side"].rh-is-charging .rh-power-meter label { font-size: 9px; letter-spacing: 0; }
.robinhood-game[data-rh-layout="side"].rh-is-charging .rh-power-meter > span { height: 22px; border-width: 3px; }
.robinhood-game[data-rh-layout="side"] .rh-super { min-height: 44px; flex-wrap: wrap; gap: 2px 4px; padding: 3px 4px; font-size: 10px; }
.robinhood-game[data-rh-layout="side"] .rh-super .rh-icon { width: 16px; height: 16px; }
.robinhood-game[data-rh-layout="side"] .rh-super small { margin-left: 0; }
.robinhood-game[data-rh-layout="side"] :is(.rh-throw, .rh-brace) { position: absolute; z-index: 4; grid-area: right; top: 50%; left: 8px; right: 8px; min-width: 0; min-height: 96px; padding: 4px 6px; transform: translateY(-50%); font-size: 13px; }
.robinhood-game[data-rh-layout="side"] :is(.rh-throw, .rh-brace):active:not(:disabled) { transform: translate(1px, calc(-50% + 1px)); }
.robinhood-game[data-rh-layout="side"] .rh-brace { flex-direction: column; }
.robinhood-game[data-rh-layout="side"] .rh-leaderboard-open { grid-area: left; top: 8px; left: 6px; right: 6px; min-height: 30px; font-size: 10px; }
.robinhood-game[data-rh-layout="side"] .rh-pause { grid-area: right; top: 8px; right: 8px; width: 34px; height: 34px; }
.robinhood-game[data-rh-layout="side"] .rh-scoreboard { grid-area: right; top: auto; bottom: 8px; left: 8px; right: 8px; flex-direction: column; align-items: center; gap: 2px; padding: 4px; transform: none; font-size: 11px; }
.robinhood-game[data-rh-layout="side"] .rh-modifier { grid-area: left; top: auto; bottom: 8px; left: 6px; right: 6px; max-width: none; flex-wrap: wrap; justify-content: center; padding: 2px 4px; transform: none; font-size: 9px; }

/* GRAPHICS > REDUCED MOTION. The engine resolves the setting (SYSTEM follows
   the device) into data-rh-motion; the media query only covers the moment
   before it is set. Flashing and bobbing stop; nothing the game needs to
   show is hidden. */
.robinhood-game[data-rh-motion="reduced"] .rh-health-fill { transition: none; }
.robinhood-game[data-rh-motion="reduced"] :is(.rh-health-damage.active, .rh-super.ready, .rh-brace, .rh-tutorial, .rh-power-meter i.overcharge, .rh-angle-lock, .rh-repeat-warning),
.robinhood-game[data-rh-motion="reduced"].rh-is-charging .rh-player-readout,
.robinhood-game[data-rh-motion="reduced"] :is(.rh-versus-side,.rh-versus-mark) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .robinhood-game:not([data-rh-motion]) .rh-health-fill { transition: none; }
  .robinhood-game:not([data-rh-motion]) :is(.rh-health-damage.active, .rh-super.ready, .rh-brace, .rh-tutorial, .rh-power-meter i.overcharge, .rh-angle-lock, .rh-repeat-warning),
  .robinhood-game.rh-is-charging:not([data-rh-motion]) .rh-player-readout { animation: none; }
}
.rh-player-identity {
  color: inherit;
}

.rh-player-identity .user-identity-avatar {
  width: 20px;
  height: 20px;
  border: 1px solid #252525;
  image-rendering: pixelated;
}