.monster-arena-page { min-height: 100vh; background: #f3fafb; color: var(--ink); }
.monster-arena-page [hidden] { display: none !important; }
.monster-arena-page *, .monster-arena-page *::before, .monster-arena-page *::after { box-sizing: border-box; }
.monster-arena-page button { font: inherit; cursor: pointer; }
.monster-arena-page button:disabled { cursor: not-allowed; opacity: .56; }
.monster-arena-page button:focus-visible, .monster-arena-page a:focus-visible { outline: 3px solid #156f68; outline-offset: 3px; }
.monster-arena-page .primary-nav { display: flex; }
.monster-arena-page .button--secondary { background: #fff; border: 1px solid #bdced0; color: #20343a; }
.arena-main { min-height: calc(100vh - 78px); }
.arena-setup { width: min(1320px, calc(100% - 36px)); margin: 0 auto; padding: clamp(24px, 4vw, 48px) 0 70px; }
.arena-intro { padding: clamp(22px, 3vw, 36px); border: 1px solid #bfdcd7; border-radius: 24px; background: linear-gradient(120deg, #fffefa, #eaf9f4); box-shadow: 0 18px 42px #203e3a12; }
.arena-intro .eyebrow, .arena-panel .eyebrow, .arena-dialog .eyebrow { margin: 0 0 8px; color: #aa4d42; }
.arena-intro h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05; letter-spacing: -.025em; }
.arena-intro__lead { max-width: 78ch; margin: 14px 0 22px; color: #495861; font-size: clamp(1rem, 1.5vw, 1.13rem); line-height: 1.55; }
.arena-set-summary { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 12px 17px; border: 1px solid #b7d9d2; border-radius: 14px; background: #fff; color: #20343a; }
.arena-set-summary__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; background: #eaf6f1; color: #197369; font-size: 1.35rem; }
.arena-set-summary strong, .arena-set-summary span:last-child { display: block; overflow-wrap: anywhere; }
.arena-set-summary span:last-child { color: #52636a; font-size: .88rem; }
.arena-lobby-class-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 15px; }
.arena-lobby-class-actions a { color: #f5d185; font-weight: 800; }
.monster-arena-page .arena-lobby-class-actions .arena-host-action { min-height: 42px; padding: 8px 15px; border: 1px solid #ffc8ae; border-radius: 10px; background: #f6a783; color: #23353c; font-weight: 900; }
.monster-arena-page .arena-lobby-class-actions .arena-host-action:not(:disabled):hover { background: #ffd0ae; }
.arena-host-status { margin: 8px 0 0; color: #f8e3b3; font-size: .85rem; font-weight: 750; }
.arena-host-status:empty { display: none; }
.arena-room-panel { margin-top: 18px; padding: clamp(18px, 2.5vw, 28px); border: 2px solid #9ccdc4; border-radius: 18px; background: #f9fffd; box-shadow: 0 12px 30px #203e3a12; }
.arena-room-panel[hidden], .arena-room-panel [hidden], .arena-room-standings[hidden] { display: none !important; }
.arena-room-panel h2 { margin: 0 0 8px; font-size: 1.6rem; }
.arena-room-panel > p { color: #4a5e60; }
.arena-room-panel label { display: grid; gap: 5px; max-width: 360px; margin: 10px 0; font-weight: 750; }
.arena-room-panel input { width: min(100%, 460px); min-height: 42px; padding: 8px 10px; border: 1px solid #a9c8c2; border-radius: 8px; background: #fff; color: #21363c; }
.arena-room-panel button { margin: 5px 9px 5px 0; }
#arena-room-host strong { display: block; color: #185c55; font-size: 1.35rem; }
#arena-room-players { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; list-style: none; }
#arena-room-players li { padding: 6px 10px; border: 1px solid #c7ded9; border-radius: 999px; background: #fff; font-weight: 700; }
#arena-room-players li.is-offline { opacity: .5; }
.arena-room-standings { position: absolute; top: 78px; right: 12px; width: min(220px, 42vw); padding: 9px 11px; border: 1px solid #ffffffab; border-radius: 12px; background: #fffffff0; box-shadow: 0 4px 15px #203d3d24; font-size: .75rem; }
.arena-room-standings > strong { color: #185c55; }
.arena-room-standings ol { margin: 5px 0 0; padding-left: 18px; }
.arena-room-standings li { margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .arena-room-standings { top: 67px; right: 8px; width: 142px; padding: 6px 8px; font-size: .65rem; } }
.arena-setup__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, 1fr); align-items: start; gap: 20px; margin-top: 20px; }
.arena-panel { min-width: 0; padding: clamp(18px, 2.6vw, 28px); border: 1px solid #d9e6e4; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px #203e3a0c; }
.arena-panel__heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; }
.arena-panel h2 { margin: 0; font-size: clamp(1.3rem, 2.3vw, 1.7rem); }
.arena-panel__note { color: #637077; font-size: .8rem; font-weight: 750; text-align: right; }
.arena-panel__description { margin: 12px 0 18px; color: #58666d; font-size: .94rem; line-height: 1.45; }
.arena-character-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; max-height: min(53vh, 510px); overflow-y: auto; overscroll-behavior: contain; padding: 3px 5px 4px 3px; scrollbar-color: #adc9c4 transparent; }
.arena-character-card { display: grid; justify-items: center; align-content: start; gap: 5px; min-width: 0; min-height: 93px; padding: 7px 5px 8px; border: 2px solid #d8e4e3; border-radius: 13px; background: #fbfdfd; color: #233138; line-height: 1.14; transition: border-color .15s, background .15s, transform .15s; }
.arena-character-card:hover { transform: translateY(-2px); border-color: #84bfb3; }
.arena-character-card[aria-pressed="true"], .arena-character-card.is-selected { border-color: #1c8373; background: #eaf8f3; box-shadow: 0 0 0 2px #d0eee5; }
.arena-character-card img, .arena-character-card__portrait { display: block; width: min(64px, 100%); height: 58px; object-fit: contain; image-rendering: auto; }
.arena-character-card strong, .arena-character-card__name { max-width: 100%; overflow-wrap: anywhere; font-size: .7rem; font-weight: 800; text-align: center; }
.arena-map-grid { display: grid; gap: 10px; margin-top: 18px; }
.arena-map-card { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) 22px; align-items: center; gap: 13px; width: 100%; min-height: 104px; padding: 8px 12px 8px 8px; border: 2px solid #d8e4e3; border-radius: 15px; background: #fbfdfd; color: #233138; text-align: left; transition: border-color .15s, background .15s, transform .15s; }
.arena-map-card:hover { transform: translateY(-2px); border-color: #84bfb3; }
.arena-map-card[aria-pressed="true"], .arena-map-card.is-selected { border-color: #1c8373; background: #edf9f5; }
.arena-map-art { display: block; width: 112px; height: 86px; overflow: hidden; border-radius: 10px; background: #dfeeea; }
.arena-map-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arena-map-card__copy { display: grid; gap: 5px; min-width: 0; }
.arena-map-card__copy strong { font-size: .99rem; }
.arena-map-card__copy small { color: #51616a; font-size: .78rem; line-height: 1.35; }
.arena-map-card__check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1d8b77; color: #fff; font-size: .8rem; opacity: 0; }
.arena-map-card[aria-pressed="true"] .arena-map-card__check, .arena-map-card.is-selected .arena-map-card__check { opacity: 1; }
.arena-setup__launch { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e1e9e8; }
.arena-setup__launch p:first-child { margin: 0 0 15px; color: #52636a; font-size: .87rem; line-height: 1.6; }
.arena-setup__launch kbd { display: inline-block; min-width: 1.25em; padding: 1px 4px; margin-right: 2px; border: 1px solid #b9cbca; border-bottom-width: 2px; border-radius: 4px; background: #f4f8f8; color: #25343b; font: 800 .86em ui-monospace, monospace; text-align: center; }
.arena-primary-action { width: 100%; min-height: 50px; border: 0; background: #db6b5f; color: #fff; }
.arena-inline-status { min-height: 1.5em; margin: 8px 0 0; color: #a73737; font-size: .87rem; font-weight: 750; }

.arena-game { position: fixed; inset: 0; z-index: 100; background: #d6e9d9; overflow: hidden; touch-action: none; }
.arena-game canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.arena-hud { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); color: #162b30; text-shadow: 0 1px 0 #ffffffb8; }
.arena-hud__top { display: flex; align-items: flex-start; gap: 8px; }
.arena-hud__top > div:not(.arena-hud__buttons), .arena-hud__bottom { border: 1px solid #ffffffa8; border-radius: 13px; background: #ffffffde; box-shadow: 0 4px 15px #203d3d24; backdrop-filter: blur(8px); }
.arena-hud__top > div:not(.arena-hud__buttons) { min-height: 54px; padding: 7px 11px; }
.arena-hud__health { width: min(220px, 37vw); }
.arena-hud__label { display: block; color: #45565a; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.arena-hud__top strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.arena-health-track, .arena-xp-track { position: relative; overflow: hidden; border-radius: 999px; background: #cfdbdb; }
.arena-health-track { height: 7px; margin-top: 4px; }
.arena-health-track span { display: block; width: 100%; height: 100%; border-radius: inherit; background: #d85a5a; }
.arena-hud__time, .arena-hud__kills { min-width: 78px; text-align: center; }
.arena-hud__buttons { display: flex; gap: 6px; margin-left: auto; pointer-events: auto; }
.arena-hud__buttons button { width: 44px; height: 44px; border: 1px solid #b1c4c2; border-radius: 11px; background: #fff; color: #203239; font-weight: 900; font-size: 1.25rem; box-shadow: 0 4px 12px #203d3d24; }
.arena-hud__buttons button[aria-pressed="true"] { color: #9e4238; background: #fff0ec; }
.arena-hud__bottom { display: flex; align-items: center; gap: 10px; width: min(680px, calc(100% - 28px)); min-height: 52px; margin: 0 auto; padding: 8px 12px; }
.arena-level-label { flex: 0 0 auto; white-space: nowrap; font-size: .84rem; font-weight: 800; }
.arena-level-label strong { font-size: 1.1rem; }
.arena-xp-track { flex: 1; height: 12px; }
.arena-xp-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #7555ad; }
.arena-weapon-list { display: flex; gap: 4px; flex: 0 0 auto; }
.arena-weapon-list img, .arena-weapon-list span { width: 28px; height: 28px; object-fit: contain; }
.arena-weapon-chip { position: relative; display: inline-block; flex: 0 0 28px; }
.arena-weapon-chip img { display: block; }
.arena-weapon-chip b { position: absolute; right: -2px; bottom: -3px; min-width: 13px; padding: 0 2px; border-radius: 4px; background: #fff9e5; box-shadow: 0 0 0 1px #775b41; color: #433425; font-size: 10px; line-height: 13px; text-align: center; }
.arena-joystick { position: absolute; z-index: 2; bottom: max(76px, calc(env(safe-area-inset-bottom) + 76px)); left: max(16px, env(safe-area-inset-left)); width: 132px; height: 132px; border: 2px solid #ffffffad; border-radius: 50%; background: #173b3b3b; opacity: 0; touch-action: none; pointer-events: none; transition: opacity .12s; }
.arena-joystick.is-active { opacity: .7; }
.arena-joystick span { position: absolute; top: 43px; left: 43px; width: 42px; height: 42px; border: 2px solid #fff; border-radius: 50%; background: #fff9; }

.arena-overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; overflow-y: auto; padding: max(18px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: #112a30b8; touch-action: auto; }
.arena-dialog { width: min(690px, 100%); max-height: min(720px, calc(100dvh - 36px)); overflow: auto; padding: clamp(20px, 3.5vw, 34px); border: 3px solid #eef8ed; border-radius: 22px; background: #fffefa; box-shadow: 0 20px 80px #06192170; color: #223039; }
.arena-dialog h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15; }
.arena-dialog p { line-height: 1.5; }
.arena-dialog > p:not(.eyebrow) { color: #4a5960; }
.arena-question-text { margin: 20px 0; padding: 15px 18px; border: 1px solid #c7e4dd; border-radius: 13px; background: #eef9f5; color: #202b32 !important; font-size: clamp(1.25rem, 3vw, 1.9rem); font-weight: 850; overflow-wrap: anywhere; }
.arena-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.arena-answer-grid button { min-height: 64px; padding: 12px; border: 2px solid #c8d6d6; border-radius: 12px; background: #fff; color: #203239; font-size: 1rem; font-weight: 750; text-align: left; overflow-wrap: anywhere; }
.arena-answer-grid button:hover { border-color: #188b79; background: #eff9f5; }
.arena-answer-grid button.is-correct, .arena-answer-grid button[data-state="correct"] { border-color: #187b62; background: #ddf5e9; }
.arena-answer-grid button.is-wrong, .arena-answer-grid button[data-state="wrong"] { border-color: #c54747; background: #fff0ed; }
.arena-question-feedback { min-height: 1.5em; margin: 12px 0 0; color: #994840; font-weight: 800; }
.arena-upgrade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.arena-upgrade-grid button { display: grid; justify-items: start; align-content: start; gap: 8px; min-height: 188px; padding: 17px; border: 2px solid #c7ded8; border-radius: 15px; background: #f3faf7; color: #203239; text-align: left; }
.arena-upgrade-grid button:hover { border-color: #197d70; background: #e7f7ef; }
.arena-upgrade-grid img { width: 44px; height: 44px; object-fit: contain; }
.arena-upgrade-grid strong { font-size: 1.1rem; }
.arena-upgrade-grid span, .arena-upgrade-grid small { color: #51636a; line-height: 1.35; }
.arena-dialog--compact { width: min(460px, 100%); text-align: center; }
.arena-dialog--results { width: min(660px, 100%); }
.arena-dialog__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.arena-dialog__actions .button { min-height: 46px; padding: 0 16px; }
.arena-dialog--results #arena-result-content { max-height: 48vh; overflow-y: auto; }
.arena-result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.arena-result-stats > * { padding: 12px; border: 1px solid #d8e7e2; border-radius: 11px; background: #f7fbf9; color: #223039; }
.arena-noscript { margin: 20px; padding: 12px; border: 1px solid #c48a77; background: #fff7f1; }
[hidden] { display: none !important; }

@media (max-width: 1000px) {
  .arena-setup__grid { grid-template-columns: 1fr; }
  .arena-character-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); max-height: 370px; }
  .arena-map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arena-map-card { grid-template-columns: 1fr 22px; }
  .arena-map-art { grid-column: 1 / -1; width: 100%; height: 100px; }
  .arena-map-card__copy { align-self: start; }
}
@media (max-width: 740px) {
  .monster-arena-page .site-header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
  .monster-arena-page .primary-nav { width: 100%; justify-content: center; flex-wrap: wrap; gap: 10px; padding-bottom: 8px; font-size: .8rem; }
  .arena-setup { width: calc(100% - 20px); padding-top: 14px; }
  .arena-character-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-height: 330px; }
  .arena-map-grid { grid-template-columns: 1fr; }
  .arena-map-card { grid-template-columns: 100px minmax(0, 1fr) 22px; min-height: 90px; }
  .arena-map-art { grid-column: auto; width: 100px; height: 74px; }
  .arena-map-card__copy { align-self: center; }
  .arena-hud__top > div:not(.arena-hud__buttons) { min-height: 47px; padding: 5px 7px; }
  .arena-hud__health { width: min(156px, 31vw); }
  .arena-hud__time, .arena-hud__kills { min-width: 55px; }
  .arena-hud__top strong { font-size: .87rem; }
  .arena-hud__label { font-size: .58rem; }
  .arena-hud__buttons button { width: 38px; height: 38px; }
  .arena-hud__bottom { width: 100%; min-height: 46px; }
  .arena-weapon-list img, .arena-weapon-list span { width: 22px; height: 22px; }
  .arena-weapon-chip { flex-basis: 22px; }
  .arena-upgrade-grid { grid-template-columns: 1fr; }
  .arena-upgrade-grid button { min-height: 84px; grid-template-columns: 42px 1fr; align-items: center; }
  .arena-upgrade-grid button img { grid-row: span 2; width: 38px; height: 38px; }
  .arena-answer-grid { grid-template-columns: 1fr; }
  .arena-answer-grid button { min-height: 52px; }
}
@media (max-width: 430px) {
  .arena-character-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .arena-panel__note { display: none; }
  .arena-map-card { grid-template-columns: 74px minmax(0, 1fr) 18px; gap: 9px; }
  .arena-map-art { width: 74px; height: 66px; }
  .arena-hud__kills { display: none; }
  .arena-hud__bottom { gap: 6px; padding: 7px; }
  .arena-weapon-list { max-width: 82px; overflow: hidden; }
  .arena-dialog { padding: 18px; }
}
@media (pointer: coarse) { .arena-joystick { pointer-events: auto; } }
@media (prefers-reduced-motion: reduce) { .monster-arena-page *, .monster-arena-page *::before, .monster-arena-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Keep the arena visible while a compact adventure panel presents upgrades. */
.arena-hud__top > div:not(.arena-hud__buttons) { border-color: #ffffff4d; background: #1c3c45c9; color: #fff; text-shadow: none; }
.arena-hud__top .arena-hud__label { color: #e7f5ef; }
.arena-hud__identity { display: block; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .94rem; font-weight: 850; }
.arena-hud__health { width: min(190px, 40vw); }
.arena-hud__time { margin-left: auto; }
.arena-hud__bottom { width: calc(100% - 8px); min-height: 34px; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.arena-xp-track { height: 18px; border: 3px solid #f5ffffd6; background: #1f5c64; box-shadow: 0 3px 10px #14373b7a; }
.arena-xp-track span { background: linear-gradient(90deg, #37c7b3, #9be5d3); }
.arena-level-label { order: 2; padding: 4px 9px; border-radius: 8px; background: #1c3c45d9; color: #fff; text-shadow: none; }
.arena-weapon-list { position: absolute; bottom: 45px; left: 14px; padding: 4px; border-radius: 9px; background: #1c3c45ad; }
.arena-overlay#arena-upgrades { background: #0e2a3361; backdrop-filter: blur(2px); }
.arena-dialog--upgrades { position: relative; width: min(570px, 100%); max-height: calc(100dvh - 70px); overflow: visible; margin-top: 54px; padding: 52px clamp(16px, 3vw, 26px) 22px; border: 2px solid #a6c9bf; border-radius: 18px; background: linear-gradient(165deg, #244955, #193c45); box-shadow: 0 16px 0 #102b35, 0 24px 44px #09242ca8; color: #fff; text-align: center; }
.arena-upgrade-crest { position: absolute; top: -56px; left: 50%; width: 110px; height: 110px; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 6px 1px #112b34a8); }
.arena-dialog--upgrades .eyebrow { margin: 0; color: #a8dfd0; font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.arena-dialog--upgrades h2 { margin: 0; color: #f5ead1; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 950; line-height: 1.07; text-shadow: 0 3px #102a32; }
.arena-dialog--upgrades > p:not(.eyebrow) { margin: 6px 0 14px; color: #e4f2ed; font-size: .91rem; }
.arena-upgrade-grid { display: grid; grid-template-columns: 1fr; gap: 9px; max-height: calc(100dvh - 300px); overflow: auto; margin-top: 0; text-align: left; }
.arena-upgrade-grid button { display: grid; grid-template-columns: 55px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: 12px; row-gap: 2px; min-height: 76px; padding: 8px 12px; border: 2px solid #47636d; border-radius: 12px; background: #2d4854; color: #fff; box-shadow: 0 4px 0 #12323c; text-align: left; }
.arena-upgrade-grid button:hover, .arena-upgrade-grid button:focus-visible { border-color: #aee1ce; background: #385d65; transform: translateY(-2px); }
.arena-upgrade-grid img { grid-row: 1 / span 2; width: 51px; height: 51px; object-fit: contain; border-radius: 9px; background: #466574; }
.arena-upgrade-grid strong { font-size: 1.02rem; }
.arena-upgrade-grid span { color: #d8ebe5; font-size: .84rem; }
@media (max-width: 520px) {
  .arena-dialog--upgrades { padding-top: 44px; margin-top: 45px; }
  .arena-upgrade-crest { width: 92px; height: 92px; top: -47px; }
  .arena-upgrade-grid { max-height: calc(100dvh - 255px); }
  .arena-upgrade-grid button { min-height: 69px; }
  .arena-hud__health { width: min(145px, 37vw); }
}

/* Larger portraits stay readable in the same compact gallery on every device. */
.arena-character-grid { grid-template-columns: repeat(4,minmax(0,1fr)); max-height: 580px; gap: 12px; }
.arena-character-card { min-height: 142px; padding: 8px; background: #f3f8ef; }
.arena-character-card img { width: min(112px,100%); height: 112px; }
.arena-character-card strong { font-size: .8rem; }
.arena-character-card[aria-pressed="true"] { background: #d9f2dc; border-color: #23705b; }
@media (min-width:741px) and (max-width:1000px) { .arena-character-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:540px) { .arena-character-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:420px; } .arena-character-card img { height:90px; } .arena-character-card { min-height:122px; } }

.arena-game canvas { cursor: crosshair; }
.arena-joystick, .arena-joystick span { pointer-events: none !important; }
.arena-joystick--aim { border-color:#ffda79; background:#71422455; }

.arena-intro { padding:22px 28px; }
.arena-intro h1 { font-size:clamp(2rem,4vw,3rem); }
.arena-intro__lead { margin:10px 0 14px; max-width:85ch; font-size:1rem; }
.arena-setup { padding-top:20px; }
.arena-result-stats strong { display:block; margin-top:6px; font-size:1.2rem; }
.arena-playing { overflow:hidden; }

@media(max-width:540px) { .arena-character-card strong { font-size:.73rem; overflow-wrap:normal; word-break:normal; } .arena-character-card { padding:6px 3px; } .arena-intro__lead { font-size:.9rem; line-height:1.4; } }

/* Pastel A–D palette, independent of the shuffled correct answer. */
.arena-answer-grid > button:nth-child(4n+1):not(.is-correct):not(.is-wrong) { background: var(--answer-mint); border-color: #367e68; color: var(--answer-ink); }
.arena-answer-grid > button:nth-child(4n+2):not(.is-correct):not(.is-wrong) { background: var(--answer-coral); border-color: #aa534c; color: var(--answer-ink); }
.arena-answer-grid > button:nth-child(4n+3):not(.is-correct):not(.is-wrong) { background: var(--answer-blue); border-color: #476f97; color: var(--answer-ink); }
.arena-answer-grid > button:nth-child(4n+4):not(.is-correct):not(.is-wrong) { background: var(--answer-gold); border-color: #a47c28; color: var(--answer-ink); }
.arena-answer-grid > button:focus-visible { outline: 3px solid #294e65; outline-offset: 3px; }
.arena-answer-grid > button.is-correct { box-shadow: inset 0 0 0 2px #197155; }
.arena-answer-grid > button.is-wrong { box-shadow: inset 0 0 0 2px #ac3838; }

#arena-canvas { cursor: default; touch-action: none; }

.arena-hud__magnet {
  position: absolute;
  top: 66px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 3px;
  border: 1px solid #86dfe5;
  border-radius: 999px;
  background: #103b49e8;
  color: #fff;
  font-size: .76rem;
  font-weight: 850;
  box-shadow: 0 5px 16px #0d25378c;
}
.arena-hud__magnet img { width: 28px; height: 28px; object-fit: contain; }
.arena-upgrade-grid button { grid-template-columns: 168px minmax(0,1fr); }
.arena-upgrade-preview { grid-row: 1 / span 2; width:100%; min-width:0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:2px; }
.arena-upgrade-preview canvas { max-width:44%; height:auto!important; aspect-ratio:1; }
.arena-upgrade-preview--single canvas { max-width:78%; }
.arena-upgrade-preview .arena-level-change { width:100%; text-align:center; color:#aef3e0; font-weight:850; }
.arena-upgrade-copy { display:grid; gap:5px; }
.arena-upgrade-copy span { line-height:1.4; }
.arena-passive-icon { font-size:2.4rem; color:#b1ecff; }
.arena-upgrade-grid .arena-combo-choice { border-color:#ddb6ff; background:linear-gradient(130deg,#463958,#274a5e); }
.arena-overlay#arena-evolution { background:#132332c7; }
.arena-dialog--evolution { position:relative; overflow:hidden; width:min(620px,100%); max-height:calc(100dvh - 32px); overflow-y:auto; background:radial-gradient(ellipse at 50% 45%,#494577,#152c3b 65%); color:#f4f4ff; border:2px solid #c5b3f9; text-align:center; }
.arena-dialog--evolution h2 { color:#f4e8ff; margin:6px 0; }
.arena-dialog--evolution .eyebrow { color:#b9e9fd; }
.monster-arena-page .arena-dialog--evolution p { color:#d8e3f2; }
html[data-theme="dark"] .monster-arena-page .arena-dialog--evolution > p:not(.eyebrow) { color:#d8e3f2; }
.arena-evolution-sources { display:flex; justify-content:center; gap:40px; }
.arena-evolution-source { display:grid; justify-items:center; max-width:45%; }
.arena-evolution-source small { font-size:.8rem; }
.arena-evolution-result { margin:0 auto; width:190px; }
.is-transforming .arena-evolution-source--0 { animation:arena-merge-left 1.5s ease-in-out both; }
.is-transforming .arena-evolution-source--1 { animation:arena-merge-right 1.5s ease-in-out both; }
.is-transforming .arena-evolution-result { animation:arena-reveal 2s ease-out both; }
@keyframes arena-merge-left { 0%,20%{transform:translateX(0)} 70%{transform:translate(65px,30px);opacity:.3} 100%{opacity:1} }
@keyframes arena-merge-right { 0%,20%{transform:translateX(0)} 70%{transform:translate(-65px,30px);opacity:.3} 100%{opacity:1} }
@keyframes arena-reveal { 0%,35%{opacity:0;transform:scale(.3)} 60%{opacity:1;transform:scale(1.12);filter:brightness(2)} 100%{opacity:1;transform:scale(1);filter:brightness(1)} }
.arena-debug { position:fixed; z-index:110; right:8px; bottom:65px; display:flex; flex-wrap:wrap; gap:4px; width:min(330px,calc(100vw - 16px)); padding:8px; border:1px solid #91c5da; border-radius:8px; background:#152d3eed; color:#f0f7ff; font:12px sans-serif; }
.arena-debug output[data-debug-stats] { width:100%; white-space:pre-line; line-height:1.5; }
.arena-debug select { width:100%; background:#274558; color:#fff; }
.arena-debug a { color:#9cedff; }
.arena-debug input[type=range] { flex:1; }
@media(max-width:520px) { .arena-upgrade-grid button { grid-template-columns:115px minmax(0,1fr); column-gap:8px; padding:8px; } .arena-upgrade-copy strong { font-size:.92rem; } .arena-upgrade-copy span { font-size:.76rem; } .arena-dialog--evolution { padding:16px; } .arena-evolution-sources { gap:14px; } .arena-evolution-result canvas { width:150px!important; height:150px!important; } .arena-evolution-result { width:150px; } }
@media (max-width: 700px) { .arena-hud__magnet { top: 55px; left: 8px; font-size: .68rem; } .arena-hud__magnet img { width: 24px; height: 24px; } }

.arena-performance-option { display:flex; align-items:center; gap:12px; margin:14px 0; padding:14px; border:1px solid #8faaa5; border-radius:14px; background:var(--lobby-paper,#fffaf2); color:var(--lobby-ink,#20343a); cursor:pointer; }
.arena-performance-option input { width:22px; height:22px; accent-color:#278c7a; }
.arena-performance-option span { display:grid; gap:4px; }
.arena-performance-option small { font-size:.85rem; font-weight:400; }
html[data-theme="dark"] .arena-performance-option { background:#203441; color:#edf3f5; border-color:#64808e; }

/* Let elementary learners read the reason before resuming the paused arena. */
.arena-learning-reason { color: var(--ink); text-align: left; font-size: 1rem; line-height: 1.5; font-weight: 400; margin: .75rem 0; }
.arena-question-feedback [data-arena-learning-continue] { margin-top: .5rem; }
html[data-theme="dark"] .arena-question-feedback { color: #ffc0b6; }

/* Dialogue layout applies to every grammar set and both themes. */
#arena-question-text { white-space:pre-line;line-height:1.55; }

/* A short student entrance, followed by a dedicated character screen. */
.arena-setup[data-room-view^="student-"] { position:fixed;inset:0;z-index:100;overflow-y:auto;min-height:100dvh;width:100%;max-width:none;margin:0;padding:clamp(16px,3vw,40px);background:var(--lobby-bg,#edf6f4);color:var(--lobby-ink,#20343a); }
.arena-setup[data-room-view^="student-"] .arena-lobby-header,
.arena-setup[data-room-view^="student-"] .arena-intro,
.arena-setup[data-room-view^="student-"] #arena-room-heading,
.arena-setup[data-room-view^="student-"] #arena-room-panel>p:not(#arena-room-status),
.arena-setup[data-room-view^="student-"] #arena-room-count,
.arena-setup[data-room-view^="student-"] #arena-room-players,
.arena-setup[data-room-view^="student-"] .arena-setup__options>.arena-panel:nth-of-type(2),
.arena-setup[data-room-view^="student-"] .arena-performance-option { display:none!important; }
.arena-setup[data-room-view="student-join"] { display:grid;place-content:center; }
.arena-setup[data-room-view="student-join"] .arena-setup__grid { display:none!important; }
.arena-setup[data-room-view="student-join"] #arena-room-panel { width:min(440px,calc(100vw - 32px));padding:clamp(20px,4vw,36px); }
#arena-room-join { display:grid;gap:20px; }
#arena-room-join[hidden] { display:none; }
#arena-room-join label { display:grid;gap:10px;font-size:1.1rem; }
#arena-room-join input { width:100%;min-height:54px; }
#arena-room-join-button,#arena-character-ready { width:100%;min-height:58px;font-size:1.15rem;font-weight:800; }
#arena-room-join-button,#arena-character-ready { background:#f3a49a;color:#20343a;border-color:#9c524c; }
.monster-arena-page .arena-setup.game-lobby[data-room-view="student-character"] .arena-setup__options { width:100%;max-width:none; }
.monster-arena-page .arena-setup.game-lobby[data-room-view="student-character"] .arena-character-grid { grid-template-columns:repeat(4,minmax(0,1fr));max-height:none;overflow:visible; }
.monster-arena-page .arena-setup.game-lobby[data-room-view="student-character"] .arena-character-card { min-height:clamp(150px,26vh,270px); }
.monster-arena-page .arena-setup.game-lobby[data-room-view="student-character"] .arena-character-card img { width:min(200px,100%);height:clamp(130px,22vh,220px); }
.arena-setup[data-room-view="student-character"] #arena-room-panel { padding:0;border:0;background:transparent; }
.arena-setup[data-room-view="student-character"] .arena-setup__grid { display:block!important;max-width:1100px;margin:auto; }
.arena-setup[data-room-view="student-character"] .arena-setup__options { width:100%;max-width:none; }
.arena-setup[data-room-view="student-character"] .arena-character-grid { grid-template-columns:repeat(4,minmax(0,1fr));max-height:none;overflow:visible; }
.arena-setup[data-room-view="student-character"] .arena-character-card { min-height:clamp(130px,20vh,230px); }
.arena-setup[data-room-view="student-character"] .arena-character-card img { width:min(180px,100%);height:clamp(110px,18vh,190px); }
.arena-setup[data-room-view="student-character"] .arena-panel__heading .eyebrow { display:none; }
#arena-character-ready { margin-top:20px; }
.arena-setup[data-room-view="host-running"] .arena-setup__grid,
.arena-setup[data-room-view="host-running"] #arena-room-heading,
.arena-setup[data-room-view="host-running"] #arena-room-host,
.arena-setup[data-room-view="host-running"] #arena-room-panel>p,
.arena-setup[data-room-view="host-running"] .arena-host-settings,
.arena-setup[data-room-view="host-running"] #arena-room-count,
.arena-setup[data-room-view="host-running"] #arena-room-players { display:none!important; }
.arena-setup[data-room-view="host-running"] #arena-room-panel { grid-column:1/-1;width:100%;max-width:none; }
.arena-host-dashboard-top { display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px; }
.arena-host-clock { display:grid;gap:4px;text-align:center;padding:16px 28px;border:2px solid #377d70;border-radius:16px;background:#d9f1e6;color:#183d38; }
.arena-host-clock strong { font-variant-numeric:tabular-nums;font-size:clamp(2rem,4vw,3.5rem);line-height:1.2; }
.arena-host-table-scroll { overflow-x:auto; }
.arena-host-table { width:100%;border-collapse:collapse;font-size:1rem; }
.arena-host-table th,.arena-host-table td { padding:16px 12px;text-align:left;border-bottom:1px solid #97b6b0;white-space:nowrap; }
.arena-host-table tbody tr:nth-child(odd) { background:#2c867a12; }
.arena-host-table th { color:inherit; }
.arena-host-table .is-offline { opacity:.7; }
.arena-finale { position:absolute;top:92px;left:50%;transform:translateX(-50%);z-index:5;max-width:90%;padding:8px 16px;border-radius:12px;background:#ffe7a3;color:#263b3b;font-size:.9rem;font-weight:800;text-align:center;pointer-events:none; }
.arena-completion-message { padding:16px;border-radius:12px;background:#d1efdf;color:#164333;font-weight:700; }
html[data-theme="dark"] .arena-setup[data-room-view^="student-"] { background:#152630;color:#edf4f6; }
html[data-theme="dark"] .arena-host-clock { background:#285247;color:#e9fff5;border-color:#9ed6c5; }
html[data-theme="dark"] .arena-host-table { color:#edf4f6; }
@media(max-width:600px) {
 .arena-setup[data-room-view="student-character"] { padding:12px; }
 .arena-setup[data-room-view="student-character"] .arena-character-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
 .arena-setup[data-room-view="student-character"] .arena-character-card { min-height:120px; }
 .arena-setup[data-room-view="student-character"] .arena-character-card img { height:105px; }
 .monster-arena-page .arena-setup.game-lobby[data-room-view="student-character"] .arena-character-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
 .monster-arena-page .arena-setup.game-lobby[data-room-view="student-character"] .arena-character-card { min-height:clamp(100px,16vh,155px); }
 .monster-arena-page .arena-setup.game-lobby[data-room-view="student-character"] .arena-character-card img { width:min(120px,100%);height:clamp(90px,14vh,130px); }
 .arena-host-dashboard-top { gap:12px; }
 .arena-host-clock { width:100%; }
 .arena-finale { top:74px;font-size:.75rem; }
}

/* Character pages on phones behave like a home-screen grid. */
@media(max-width:600px) {
 .monster-arena-page #arena-characters {grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px;max-height:none;overflow:visible;touch-action:pan-y;justify-items:center;}
 .monster-arena-page .arena-setup .arena-character-card {min-height:0!important;width:100%;max-width:none;height:clamp(78px,15dvh,112px);padding:4px;border-radius:16px;}
 .monster-arena-page .arena-setup .arena-character-card img {width:100%;height:clamp(62px,12dvh,94px)!important;max-height:100%;object-fit:contain;}
 .monster-arena-page .arena-setup[data-room-view="student-character"] {height:100dvh;min-height:0;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom));overflow:auto;display:grid;align-content:center;justify-items:center;gap:12px;}
 .monster-arena-page .arena-setup[data-room-view="student-character"] .arena-setup__grid {width:100%;margin:0;}
 .monster-arena-page .arena-setup[data-room-view="student-character"] #arena-room-panel {width:100%;text-align:center;}
 .monster-arena-page .arena-setup[data-room-view="student-character"] .arena-panel {padding:12px;}
 .monster-arena-page .arena-setup[data-room-view="student-character"] .arena-panel__heading {margin-bottom:8px;justify-content:center;text-align:center;}
 #arena-character-ready {min-height:48px;margin-top:10px;}
}

/* Keep the complete loadout visible on phones and tablets as well as desktops. */
.arena-weapon-list { max-width: calc(100% - 28px); overflow: visible; flex-wrap: wrap; }
.arena-weapon-list .arena-weapon-chip { flex-shrink: 0; }