.event-01-formal, .event-01-redlotus, .commission-button, .claim-all-button { cursor: pointer; }
.commission-role { left: 635px; top: 674px; width: 650px; }
.account-control { position: fixed; z-index: 20; top: 80px; right: 20px; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 7px; border: 1px solid rgba(242, 221, 149, .35); border-radius: 24px; color: #ffe4a8; background: linear-gradient(135deg, rgba(61, 31, 76, .94), rgba(29, 17, 39, .94)); box-shadow: 0 4px 16px rgba(17, 5, 25, .3), inset 0 1px 0 rgba(255, 255, 255, .06); font: 14px/1.4 'Microsoft YaHei', sans-serif; }
.account-control #accountStatus { min-width: 0; margin-left: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.account-control button { flex-shrink: 0; border: 1px solid rgba(229, 190, 118, .55); border-radius: 18px; padding: 7px 21px; color: #ffe4a8; background: linear-gradient(180deg, #75508c, #4d305f); font: inherit; cursor: pointer; }
.account-control button:hover { background: linear-gradient(180deg, #8b61a3, #634078); }
.account-control button:focus-visible { outline: 2px solid #ffe4a8; outline-offset: 3px; }
.account-control [hidden] { display: none; }
.reward-options.needs-choice .reward-card { animation: commission-choice-shake 560ms ease-in-out; }
.reward-options.needs-choice .reward-card:nth-child(2) { animation-delay: 45ms; }
@keyframes commission-choice-shake {
  0%, 100% { transform: translateX(0); }
  18%, 54%, 86% { transform: translateX(-8px); }
  36%, 70% { transform: translateX(8px); }
}
.commission-server-toast { position: fixed; z-index: 1200; top: calc(84px + env(safe-area-inset-top, 0px)); left: 50%; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 14px 24px; border: 1px solid rgba(242, 221, 149, .7); border-radius: 8px; color: #fff4ce; background: rgba(49, 28, 61, .97); box-shadow: 0 8px 26px rgba(17, 5, 25, .42); font: 18px/1.4 'Microsoft YaHei', sans-serif; text-align: center; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, -10px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms; }
.commission-server-toast[hidden] { display: none; }
.commission-server-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (max-width: 1024px) { .commission-server-toast { top: calc(16px + env(safe-area-inset-top, 0px)); font-size: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .reward-options.needs-choice .reward-card { animation: none; outline: 3px solid #ffe4a8; outline-offset: 3px; }
  .commission-server-toast { transition: none; }
}
.modal--role-picker { --modal-art: url('images/indextest/6modal.png'); --modal-slices: 120 400 170 150 fill; --modal-borders: 32px 106.667px 45.333px 40px; display: flex; flex-direction: column; width: 1100px; height: 708px; min-height: 708px; padding: 96px 110px 62px; }
.modal--role-picker .modal-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.modal--role-picker .role-picker-title { flex: 0 0 auto; font-size: 30px; font-weight: 700; }
.role-picker-hint { flex: 0 0 auto; margin: 12px 0 0; color: #e2cda0; font-size: 18px; }
.role-picker-fields { display: grid; flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; text-align: left; }
.role-picker-fields label { display: grid; gap: 8px; color: #f2dd95; font-size: 17px; }
.role-picker-fields select { min-width: 0; height: 50px; border: 1px solid #a985b5; border-radius: 4px; padding: 0 12px; color: #24192c; background: #f3e7f1; font: 18px/1.2 'Microsoft YaHei', sans-serif; }
.role-picker-list { display: grid; flex: 1 1 auto; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: 18px; }
.role-picker-list button { min-height: 52px; padding: 12px 16px; border: 1px solid #73567e; color: #f5e9bf; font: 18px/1.4 'Microsoft YaHei', sans-serif; text-align: left; background: #35243f; cursor: pointer; }
.role-picker-list button[aria-pressed='true'] { border-color: #f2d27a; background: #654777; }
.role-picker-actions { display: flex; justify-content: center; flex: 0 0 auto; margin-top: 14px; }
.role-picker-status { flex: 0 0 auto; min-height: 24px; margin: 10px 0 0; color: #f5e9bf; font-size: 16px; text-align: center; }
.role-picker-actions .modal-button { width: 185px; height: 64px; }
.commission-role-title-server, .commission-role-title-change { color: #d90029; }
.role-picker-actions button:disabled { opacity: .45; cursor: default; }
.commission-button .commission-button-label { display: flex; }
.modal-overlay[hidden] { display: none; }
.modal-overlay { position: fixed; z-index: 1000; top: var(--modal-top, 0px); left: 0; width: 100%; height: var(--modal-height, 100vh); display: flex; overflow: auto; overscroll-behavior: contain; padding: 36px 58px; padding-left: max(58px, env(safe-area-inset-left)); padding-right: max(58px, env(safe-area-inset-right)); background: rgba(0, 0, 0, .76); }
html.modal-root-open { overflow-y: hidden; }
body.modal-is-open { position: fixed; top: var(--modal-scroll-top); left: 0; width: var(--modal-page-width); }
.activity-modal { --modal-art: url('images/indextest/modal-message.png'); --modal-slices: 80 fill; --modal-borders: 26px; position: relative; flex: 0 0 auto; width: 638px; max-width: 100%; min-height: 506px; margin: auto; padding: 125px 65px 90px; color: #f2dd95; font-size: 24px; line-height: 1.6; text-align: center; background: var(--modal-art) center / 100% 100% no-repeat; }
.activity-modal.modal--role-picker { width: 1100px; }
.activity-modal:focus { outline: none; }
.modal-close { position: absolute; top: 8px; right: -58px; width: 46px; height: 45px; border: 0; padding: 0; background: none; cursor: pointer; }
.modal-close img { width: 100%; height: 100%; display: block; }
.modal-content h2 { margin: 0; font-size: inherit; font-weight: 400; line-height: 1.5; }
.modal-message { min-height: 120px; display: flex; align-items: center; justify-content: center; white-space: pre-line; overflow-wrap: anywhere; }
.modal-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 62px; }
.modal-button { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; border: 0; padding: 0 18px; width: 203px; height: 72px; color: #64270c; font: 700 24px/1.2 'Microsoft YaHei', sans-serif; background: url('images/indextest/button-orange.png') center / 100% 100% no-repeat; cursor: pointer; }
.modal-confirm { padding: 0; background: url('images/indextest/modal-confirm.png') center / contain no-repeat; }
.modal-cancel { color: #493a4c; background-image: url('images/indextest/button-purple.png'); filter: grayscale(1) brightness(1.3); }
.modal-button:disabled { opacity: .55; cursor: default; }
.modal-button:hover:not(:disabled), .modal-close:hover { filter: brightness(1.15); }
.modal-button:focus-visible, .modal-close:focus-visible, .battlefield-tab:focus-visible { outline: 3px solid #ffe0a5; outline-offset: 4px; }
.modal-notes { font-size: 20px; line-height: 1.8; text-align: left; }
.modal-notes p { margin: 12px 0; }
.modal--confirm { padding-top: 105px; }
.modal--confirm .modal-notes { margin: 20px 0 0; font-size: 17px; }
.modal--confirm .modal-actions { margin-top: 38px; gap: 18px; flex-wrap: nowrap; }
.modal--confirm .modal-button { width: 185px; }
.modal--task-confirm { height: 700px; min-height: 700px; padding: 0; }
.modal--share, .modal--invite { --modal-art: url('images/indextest/6modal.png'); --modal-slices: 120 400 170 150 fill; --modal-borders: 32px 106.667px 45.333px 40px; width: 1411px; min-height: 708px; padding: 125px 150px 90px; }
.modal--share { height: 708px; min-height: 708px; padding: 0; color: #ffe4a8; }
.modal--share h2 { position: absolute; top: 154px; left: 140px; right: 140px; font-size: 26px; font-weight: 700; }
.modal--share .modal-close { display: none; }
.share-link-row { display: flex; gap: 24px; align-items: center; margin: 58px 0 45px; }
.modal--share .share-link-row { position: absolute; top: 224px; left: calc(50% - 376px); width: 804px; gap: 8px; margin: 0; }
.share-link { min-width: 0; flex: 1; width: 100%; height: 50px; border: 0; border-radius: 0; padding: 0 20px; color: #fff; background: #633c79; font: 22px 'Microsoft YaHei', sans-serif; }
.share-link::placeholder { color: #f0e4f5; opacity: 1; }
.share-link:focus { outline: 2px solid #f7cf83; }
.share-link-row .modal-button { width: 125px; height: 50px; }
.share-copy-button { border: 2px solid #80589b; border-radius: 16px; color: #d5b9e1; font-weight: 400; background: rgba(56, 24, 75, .78); }
.share-copy-button:disabled { opacity: .8; }
.share-copy-button:hover:not(:disabled), .share-ok-button:hover:not(:disabled) { filter: brightness(1.08); }
.modal-status { min-height: 28px; margin: 0; font-size: 18px; }
.modal--share .modal-status { position: absolute; top: 290px; left: 165px; right: 165px; text-align: center; }
.modal--share .modal-notes { position: absolute; top: 320px; left: 165px; right: 165px; font-size: 21px; line-height: 1.55; text-align: center; }
.modal--share .modal-notes p { margin: 8px 0; }
.modal--share .modal-actions { position: absolute; top: 476px; left: 0; width: 100%; margin: 0; gap: 24px; }
.modal--share .modal-actions .modal-button { width: 261px; height: 91px; }
.modal--share .share-ok-button { border: 0; color: #64270c; font-weight: 700; font-size: 26px; background: url('images/indextest/button-summon-ok.png') center / 100% 100% no-repeat; }
.modal--invite .inviter-line { margin: 46px 0 32px; font-size: 30px; }
.modal--invite .modal-notes { text-align: center; }
.modal--invite .modal-actions { margin-top: 45px; gap: 95px; }
.modal-accept, .modal-decline { width: 261px; height: 91px; padding: 0; background-image: url('images/indextest/modal-accept.png'); }
.modal-decline { background-image: url('images/indextest/modal-decline.png'); }
.modal--battlefield { --battlefield-art: url('images/indextest/红莲服.png'); --modal-art: var(--battlefield-art); --modal-slices: 120 400 170 150 fill; --modal-borders: 32px 106.667px 45.333px 40px; width: 1397px; min-height: 913px; padding: 65px 100px 110px; }
.battlefield-preview { display: none; }
.battlefield-tabs { display: flex; justify-content: center; gap: 100px; margin: 45px 0 35px; }
.battlefield-tab { width: 266px; height: 63px; border: 0; color: #eed9f5; font: inherit; background: url('images/indextest/tab-active.png') center / 100% 100% no-repeat; cursor: pointer; }
.battlefield-tab[aria-selected='false'] { filter: brightness(.65); }
.battlefield-tab[aria-selected='true'] { filter: brightness(1.4); color: #fff; }
.inviter-line { white-space: pre-line; }
.battlefield-body { text-align: left; }
.battlefield-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.battlefield-body h3 { margin: 0; font-weight: 400; }
.battlefield-body p { margin: 0; }
.battlefield-status:empty { display: none; }
.battlefield-status { margin-top: 12px !important; color: #ffd18f; font-size: 18px; line-height: 1.5; text-align: center; }
.battlefield-body a { flex: 0 0 auto; border: 2px solid #8f60ae; border-radius: 22px; color: #bc8bd7; text-align: center; text-decoration: none; }
.modal--battlefield .modal-close { display: none; }
.modal-frame { position: relative; flex: 0 0 auto; width: var(--modal-frame-width, 638px); height: var(--modal-frame-height, 506px); margin: auto; }
.modal-cancel { position: relative; z-index: 0; background: none; filter: none; color: #392b41; font-size: 26px; letter-spacing: 12px; text-indent: 12px; }
.modal-cancel::before { content: ''; position: absolute; inset: 10px; z-index: -1; border-radius: 30px; background: url('images/indextest/button-purple.png') center / 100% 100% no-repeat; filter: saturate(.3) brightness(1.3); box-shadow: 0 0 8px 2px #d6a4de; }
@media (min-width: 1025px) {
  .activity-modal { position: absolute; left: 0; top: 0; max-width: none; margin: 0; transform: scale(var(--modal-scale, 1)); transform-origin: top left; }
  .modal--message, .modal--confirm { height: 506px; min-height: 506px; padding: 0; }
  .modal--task-confirm { height: 700px; min-height: 700px; }
  .modal--message .modal-message, .modal--confirm .modal-message { position: absolute; left: 40px; right: 40px; top: 176px; height: 84px; min-height: 0; font-size: 28px; font-weight: 700; }
  .modal--confirm .modal-message { top: 143px; height: 132px; font-size: 24px; font-weight: 400; }
  .modal--task-confirm .modal-message { top: 78px; left: 54px; right: 54px; height: 420px; max-height: 420px; min-height: 0; display: block; overflow: auto; padding: 20px 12px; font-size: 20px; line-height: 1.55; text-align: left; }
  .modal--message .modal-actions, .modal--confirm .modal-actions { position: absolute; top: 326px; left: 0; width: 100%; margin: 0; gap: 12px; }
  .modal--confirm .modal-actions { top: 335px; }
  .modal--task-confirm .modal-actions { top: 548px; }
  .modal--confirm .modal-button { width: 203px; }
  .modal--invite { height: 708px; padding: 0; }
  .modal--invite h2 { position: absolute; left: 130px; right: 130px; top: 144px; font-size: 24px; font-weight: 700; }
  .modal--invite .inviter-line { position: absolute; left: 150px; right: 150px; top: 209px; margin: 0; font-size: 28px; line-height: 1.3; font-weight: 700; }
  .modal--invite .modal-notes { position: absolute; left: 140px; right: 140px; top: 329px; font-size: 22px; line-height: 1.55; }
  .modal--invite .modal-notes p { margin: 0; }
  .modal--invite .modal-actions { position: absolute; top: 478px; left: 0; width: 100%; margin: 0; gap: 80px; }
  .modal--battlefield { height: 913px; padding: 0; }
  .modal--battlefield h2 { position: absolute; left: 120px; right: 120px; top: 75px; font-size: 24px; font-weight: 700; }
  .battlefield-tabs { position: absolute; left: 324px; top: 150px; gap: 190px; margin: 0; }
  .battlefield-tab { font-size: 36px; }
  .battlefield-body { position: absolute; left: 668px; top: 253px; width: 540px; }
  .battlefield-heading { margin-bottom: 18px; }
  .battlefield-body h3 { font-size: 28px; line-height: 1.5; }
  .battlefield-body p { font-size: 22px; line-height: 1.55; }
  .battlefield-body a { width: 142px; height: 39px; font-size: 22px; line-height: 35px; }
  .modal--battlefield .modal-actions { position: absolute; left: 767px; top: 670px; margin: 0; gap: 30px; }
  .modal--battlefield .modal-actions .modal-button { width: 203px; height: 72px; }
  .modal--battlefield .modal-actions .modal-confirm { background-size: 100% 100%; }
  .modal--battlefield .modal-actions .modal-cancel::before { inset: 0; }
  .modal--battlefield.modal--required .modal-actions { width: 400px; justify-content: center; }
}
@media (max-width: 1024px) {
  .modal-frame { width: 100%; height: auto; }
  .modal-overlay { padding: 32px 24px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .activity-modal { isolation: isolate; background-image: none; font-size: 20px; padding: 75px 42px 55px; min-height: 390px; }
  .activity-modal::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-image-source: var(--modal-art); border-image-slice: var(--modal-slices); border-image-width: var(--modal-borders); border-image-repeat: stretch; }
  .modal-close { right: -16px; top: -16px; width: 34px; height: 34px; }
  .modal--task-confirm { height: auto; min-height: 420px; padding: 70px 38px 48px; }
  .modal--task-confirm .modal-message { position: static; height: auto; max-height: 240px; min-height: 0; display: block; overflow: auto; padding: 0 4px; font-size: 18px; line-height: 1.5; text-align: left; }
  .modal--task-confirm .modal-actions { position: static; margin-top: 22px; }
  .modal--share, .modal--invite { padding: 70px 55px 55px; min-height: 500px; }
  .modal--share { height: auto; padding: 70px 55px 55px; }
  .modal--share h2, .modal--share .share-link-row, .modal--share .modal-notes, .modal--share .modal-status, .modal--share .modal-actions { position: static; }
  .modal--share .share-link-row { width: 100%; }
  .modal--share h2 { margin-bottom: 18px; }
  .modal--share .modal-notes { margin: 18px 0; }
  .modal--share .modal-status { min-height: 20px; }
  .modal--role-picker { width: 100%; height: min(680px, calc(100vh - 64px)); height: min(680px, calc(100dvh - 64px)); min-height: 0; padding: 66px 50px 34px; }
  .activity-modal.modal--role-picker { width: 100%; }
  .role-picker-fields { gap: 12px; margin-top: 20px; }
  .role-picker-fields label { font-size: 16px; }
  .role-picker-fields select { height: 48px; font-size: 18px; }
  .role-picker-list { margin-top: 16px; }
  .role-picker-list button { min-height: 48px; font-size: 17px; }
  .modal--share h2 { font-size: 23px; }
  .modal--battlefield { --modal-art: url('images/indextest/6modal.png'); min-height: 530px; }
  .battlefield-preview { display: block; width: 170px; height: 199px; margin: 20px auto; background: url('images/indextest/modal-battlefield.png') 12.75% 73.86% / 282.222% 152.759% no-repeat; }
  .battlefield-tabs { gap: 24px; }
  .battlefield-body { margin-left: 0; min-height: 150px; }
  .modal--battlefield .modal-actions { margin-left: 0; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .modal-overlay[data-modal-type='battlefield'] { padding: 14px 16px; }
  .modal-overlay[data-modal-type='battlefield'] .modal-frame { width: var(--modal-frame-width); height: var(--modal-frame-height); flex: 0 0 auto; }
  .modal--battlefield { --modal-art: var(--battlefield-art); position: absolute; left: 0; top: 0; width: 1397px; height: 913px; min-height: 913px; max-width: none; margin: 0; padding: 0; isolation: auto; background: var(--modal-art) center / 100% 100% no-repeat; transform: scale(var(--modal-scale, 1)); transform-origin: top left; }
  .modal--battlefield::before { content: none; }
  .modal--battlefield h2 { position: absolute; left: 120px; right: 120px; top: 75px; font-size: 24px; font-weight: 700; }
  .modal--battlefield .battlefield-tabs { position: absolute; left: 324px; top: 150px; gap: 190px; margin: 0; }
  .modal--battlefield .battlefield-tab { font-size: 36px; }
  .modal--battlefield .battlefield-preview { display: none; }
  .modal--battlefield .battlefield-body { position: absolute; left: 668px; top: 253px; width: 540px; min-height: 0; margin: 0; padding: 0; }
  .modal--battlefield .battlefield-heading { margin-bottom: 18px; }
  .modal--battlefield .battlefield-body h3 { font-size: 28px; line-height: 1.5; }
  .modal--battlefield .battlefield-body p { font-size: 22px; line-height: 1.55; }
  .modal--battlefield .battlefield-body a { width: 142px; height: 39px; font-size: 22px; line-height: 35px; }
  .modal--battlefield .modal-actions { position: absolute; left: 767px; top: 670px; margin: 0; gap: 30px; }
  .modal--battlefield .modal-actions .modal-button { width: 203px; height: 72px; }
  .modal--battlefield .modal-actions .modal-confirm { background-size: 100% 100%; }
  .modal--battlefield .modal-actions .modal-cancel::before { inset: 0; }
  .modal--battlefield.modal--required .modal-actions { width: 400px; justify-content: center; }
}
@media (max-width: 600px) {
  .account-control { top: 6px; right: 6px; gap: 5px; padding: 6px; font-size: 12px; }
  .modal--role-picker { height: min(660px, calc(100vh - 48px)); height: min(660px, calc(100dvh - 48px)); padding: 52px 26px 28px; }
  .modal--role-picker .role-picker-title { font-size: 23px; }
  .role-picker-fields { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
  .role-picker-fields label { grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 16px; }
  .role-picker-fields select { height: 42px; padding: 0 10px; font-size: 17px; }
  .role-picker-list { margin-top: 12px; }
  .role-picker-list button { min-height: 46px; padding: 10px 12px; font-size: 16px; }
  .role-picker-status { min-height: 22px; margin-top: 8px; font-size: 14px; }
  .role-picker-actions { margin-top: 10px; }
  .role-picker-actions .modal-button { width: 165px; height: 56px; }
  .activity-modal { min-height: 300px; padding: 52px 26px 36px; font-size: 16px; }
  .modal-message { min-height: 80px; }
  .modal-actions { gap: 12px; margin-top: 30px; }
  .modal-button { width: 135px; height: 49px; font-size: 17px; }
  .modal--confirm .modal-button { width: 108px; }
  .modal-cancel { font-size: 17px; letter-spacing: 6px; text-indent: 6px; }
  .modal-cancel::before { inset: 7px 5px; }
  .modal--confirm .modal-notes { font-size: 13px; }
  .modal--confirm .modal-actions { margin-top: 24px; gap: 12px; }
  .modal--task-confirm { min-height: 340px; padding: 52px 24px 36px; }
  .modal--task-confirm .modal-message { max-height: 190px; font-size: 16px; }
  .modal--task-confirm .modal-actions { margin-top: 18px; }
  .modal--share, .modal--invite { min-height: 430px; padding: 50px 25px 38px; }
  .modal--share h2 { font-size: 17px; }
  .share-link-row { flex-wrap: wrap; gap: 12px; justify-content: center; margin: 25px 0 20px; }
  .share-link { flex-basis: 100%; height: 45px; font-size: 16px; padding: 0 10px; }
  .share-link-row .modal-button { width: 115px; height: 44px; }
  .modal-notes { font-size: 14px; }
  .modal-status { font-size: 13px; min-height: 20px; }
  .modal--share .modal-actions { margin-top: 16px; }
  .modal--share .modal-actions .modal-button { width: 200px; height: 68px; }
  .modal--share .modal-notes p { margin: 12px 0; }
  .modal--invite .inviter-line { margin: 24px 0; font-size: 18px; }
  .modal--invite .modal-actions { gap: 16px; margin-top: 24px; }
  .modal-accept, .modal-decline { width: 125px; height: 44px; }
  .modal--battlefield { min-height: 450px; }
  .battlefield-tabs { gap: 12px; margin: 24px 0; }
  .battlefield-tab { width: 125px; height: 38px; font-size: 16px; }
  .battlefield-body { min-height: 130px; padding-top: 0; }
  .battlefield-preview { width: 140px; height: 164px; margin: 16px auto; }
  .battlefield-body h3 { font-size: 18px; margin-bottom: 12px; }
  .battlefield-body p { font-size: 15px; }
  .modal--battlefield .modal-actions { margin-top: 16px; }
}

/* 战场素材文件名与设计稿配图相反，以设计稿中的职业/冰狼对应关系为准。 */
.modal--battlefield[data-battlefield-end='formal'] { --battlefield-art: url('images/indextest/红莲服.png'); }
.modal--battlefield[data-battlefield-end='redlotus'] { --battlefield-art: url('images/indextest/正式.png'); }
.modal--battlefield { color: #ffe4a8; }
.modal--battlefield .battlefield-tab { color: #b587d4; border: 2px solid #9565b4; border-radius: 34px; background: linear-gradient(180deg, #30153f, #46215f); filter: none; }
.modal--battlefield .battlefield-tab[aria-selected='true'] { color: #eed7ff; border-color: #c998e4; background: linear-gradient(180deg, #60227f, #9730b9); filter: none; }
.modal--battlefield .battlefield-description { white-space: pre-line; }
.modal--battlefield .battlefield-body a { border-color: #9a6eb4; background: linear-gradient(180deg, #321944, #4a2662); }
.modal--battlefield .battlefield-body a:hover { color: #eed7ff; border-color: #d6a6ee; }
@media (min-width: 601px) {
  .modal--battlefield h2 { top: 100px; }
  .modal--battlefield .battlefield-tabs { top: 166px; }
  .modal--battlefield .battlefield-body { top: 268px; }
  .modal--battlefield .battlefield-body h3 { font-size: 26px; }
  .modal--battlefield .battlefield-body p { font-size: 20px; line-height: 34px; }
  .modal--battlefield .battlefield-intro { min-height: 104px; margin-bottom: 32px; }
  .modal--battlefield .modal-actions { left: 668px; top: 686px; width: 590px; gap: 30px; }
  .modal--battlefield.modal--required .modal-actions { width: 590px; }
}
@media (max-width: 600px) {
  .modal--battlefield .battlefield-preview { background-image: var(--battlefield-art); }
  .modal--battlefield .battlefield-intro { margin-bottom: 20px; }
}

/* Binding details reuse the task confirmation frame at desktop and mobile sizes. */
.modal--bindings { background: var(--modal-art) center / 100% 100% no-repeat; }
.modal--bindings::before { display: none; }
.modal--bindings .bindings-title { position: absolute; top: 78px; left: 54px; right: 54px; font-size: 28px; font-weight: 700; }
.modal--bindings .bindings-list { position: absolute; top: 145px; left: 54px; right: 54px; height: 220px; overflow: auto; text-align: left; font-size: 21px; line-height: 1.65; overflow-wrap: anywhere; }
.modal--bindings .bindings-list p { margin: 12px 0; }
[data-modal-type="claimlog"] .modal--bindings .bindings-list { height: 350px; }
[data-modal-type="claimlog"] .modal--bindings .bindings-notice { display: none; }
.modal--bindings .bindings-notice { position: absolute; top: 380px; left: 54px; right: 54px; max-height: 130px; overflow: auto; font-size: 21px; line-height: 1.6; }
@media (max-width: 1024px) {
  .modal--bindings .bindings-title, .modal--bindings .bindings-list, .modal--bindings .bindings-notice { position: static; }
  .modal--bindings .bindings-title { font-size: 23px; }
  .modal--bindings .bindings-list { height: auto; max-height: 220px; font-size: 18px; }
  [data-modal-type="claimlog"] .modal--bindings .bindings-list { height: auto; max-height: min(40vh, 350px); }
  .modal--bindings .bindings-notice { font-size: 18px; }
}