/* Arena: a hero with your rank and showcase, a visual loadout, and opponents shown in their own finery. */

.ar-page { container-type: inline-size; --ar-ink: #22302a; --ar-muted: #6b7a70; --ar-card: #fff; --ar-soft: #f1f5f1; --ar-line: #e1e8e1; --ar-accent: #2f7a50; --ar-accent-soft: #e6f2ea; --ar-fight: #c2522e; --ar-up: #b4452f; --ar-down: #2f7a50; }
html[data-theme="dark"] .ar-page { --ar-ink: #eef0f5; --ar-muted: #aab2bf; --ar-card: #272b34; --ar-soft: #313641; --ar-line: #3a404b; --ar-accent: #6fcf97; --ar-accent-soft: #2b3a33; --ar-fight: #e0764f; --ar-up: #f08b73; --ar-down: #7fd4a0; }
.ar-page button { font: inherit; }
.ar-page.pvp-content { margin-top: 0; }

/* Shared showcase stage: background, pedestal, character, pet */
.ar-stage { position: relative; overflow: hidden; }
.ar-stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-stage-pedestal { position: absolute; z-index: 1; left: 50%; bottom: 4%; width: 84%; height: 30%; object-fit: contain; object-position: bottom; transform: translateX(-50%); }
.ar-stage canvas { position: absolute; z-index: 2; left: 50%; bottom: 17%; width: 88%; height: 88%; transform: translateX(-50%); }
.ar-stage .ar-stage-pet { position: absolute; z-index: 3; left: 6%; bottom: 13%; width: 25%; height: auto; aspect-ratio: 1; }

/* Hero */
.ar-hero { position: relative; height: 340px; overflow: hidden; border-radius: 22px; background: #6b645e; }
.ar-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(14, 20, 22, .78), rgba(14, 20, 22, .28) 55%, transparent 80%), linear-gradient(0deg, rgba(14, 24, 26, .35), transparent 45%); pointer-events: none; }
.ar-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-hero-copy { position: absolute; z-index: 3; left: 28px; top: 50%; display: grid; gap: 16px; width: min(330px, 46%); color: #fff; transform: translateY(-50%); }
.ar-rank { display: flex; align-items: center; gap: 14px; }
.ar-rank img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); }
.ar-rank span { display: grid; gap: 4px; }
.ar-rank strong { font: 700 36px/1 var(--serif); text-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.ar-rank small { color: #eef2ef; font-size: 14px; font-weight: 600; }
.ar-next { display: grid; gap: 6px; }
.ar-next small { color: #e3e8e5; font-size: 12.5px; font-weight: 600; }
.ar-meter { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.ar-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f6d27a, #fff2c4); }
.ar-hero-stage { position: absolute; z-index: 2; right: 5%; bottom: 0; width: 300px; height: 330px; overflow: visible; }
.ar-hero-stage .ar-stage-pedestal { bottom: 22px; }
.ar-hero-stage canvas { bottom: 60px; width: 290px; height: 290px; }
.ar-hero-stage .ar-stage-pet { left: -10px; bottom: 44px; width: 78px; }
.ar-hero-name { position: absolute; z-index: 4; right: calc(5% + 150px); bottom: 12px; display: flex; justify-content: center; transform: translateX(50%); white-space: nowrap; }
.ar-hero-name .player-name-tag:not(.has-art) { color: #fff; font: 700 20px var(--serif); text-shadow: 0 2px 5px rgba(0, 0, 0, .55); }
.ar-hero-name .player-name-tag.has-art { --tag-cap: 30px; height: 46px; min-width: 150px; padding-inline: 36px; font-size: 18px; }

/* Arena style tabs */
.ar-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 18px; }
.ar-styles button { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; border: 1px solid var(--ar-line); border-radius: 16px; background: var(--ar-card); color: var(--ar-ink); text-align: left; }
.ar-styles img { flex: none; width: 38px; height: 38px; object-fit: contain; }
.ar-styles span { display: grid; min-width: 0; }
.ar-styles strong { font-size: 15px; }
.ar-styles small { overflow: hidden; color: var(--ar-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ar-styles button[aria-selected="true"] { border-color: var(--ar-accent); background: var(--ar-accent-soft); box-shadow: inset 0 0 0 1px var(--ar-accent); }

/* Loadout */
.ar-card { border: 1px solid var(--ar-line); border-radius: 20px; background: var(--ar-card); color: var(--ar-ink); }
.ar-loadout { padding: 18px; }
.ar-loadout > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ar-loadout h2 { margin: 0; font: 700 22px/1.2 var(--serif); }
.ar-loadout header small { display: block; margin-top: 3px; color: var(--ar-muted); font-size: 13px; }
.ar-quiet { flex: none; min-height: 36px; padding: 0 14px; border: 1px solid var(--ar-line); border-radius: 10px; background: var(--ar-card); color: var(--ar-ink); font-weight: 700; }
.ar-quiet:hover { border-color: color-mix(in srgb, var(--ar-accent) 45%, var(--ar-line)); }
.ar-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.ar-slot { display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 8px 8px 10px; border: 1px solid var(--ar-line); border-radius: 16px; background: var(--ar-card); color: var(--ar-ink); text-align: center; transition: border-color .15s ease, transform .15s ease; }
.ar-slot:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ar-accent) 40%, var(--ar-line)); }
.ar-slot.is-open { border-color: var(--ar-accent); box-shadow: inset 0 0 0 1px var(--ar-accent); }
.ar-slot-art { position: relative; display: grid; place-items: center; width: 100%; height: 64px; margin-bottom: 5px; border-radius: 11px; background: var(--ar-soft); }
.ar-slot-art > img:first-child { width: 46px; height: 46px; object-fit: contain; }
.ar-slot-art .ar-slot-icon { width: 26px !important; height: 26px !important; opacity: .45; }
.ar-slot-art .item-enchantment-badge, .ar-choice .item-enchantment-badge, .ar-foe-gear .item-enchantment-badge { position: absolute; top: auto; left: auto; right: 4px; bottom: 4px; }
.ar-slot small { color: var(--ar-muted); font-size: 11px; font-weight: 700; }
.ar-slot strong { display: -webkit-box; overflow: hidden; font-size: 12.5px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ar-slot.is-empty strong { color: var(--ar-muted); font-weight: 600; }
.ar-slot-extra .ar-slot-art { background: color-mix(in srgb, var(--ar-accent) 10%, var(--ar-soft)); }
.ar-picker { margin-top: 12px; padding: 12px; border-radius: 16px; background: var(--ar-soft); }
.ar-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ar-picker-head strong { font-size: 14px; }
.ar-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ar-choice { position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-height: 58px; padding: 8px 10px; border: 1px solid var(--ar-line); border-radius: 14px; background: var(--ar-card); color: var(--ar-ink); text-align: left; }
.ar-choice > img:first-child, .ar-choice > .ar-none, .ar-choice > .fallback { grid-row: span 2; width: 38px; height: 38px; object-fit: contain; }
.ar-choice strong { font-size: 13px; line-height: 1.25; }
.ar-choice small { color: var(--ar-muted); font-size: 11.5px; }
.ar-choice .item-enchantment-badge { left: 30px; right: auto; bottom: 6px; }
.ar-choice.is-chosen { border-color: var(--ar-accent); box-shadow: inset 0 0 0 1px var(--ar-accent); }
.ar-none { display: block; border: 2px dashed color-mix(in srgb, var(--ar-muted) 45%, transparent); border-radius: 50%; }
.ar-picker-empty { grid-column: 1 / -1; margin: 4px 0 0; color: var(--ar-muted); font-size: 13px; }

/* Opponents */
.ar-foes-title { margin-top: 26px; }
.ar-foes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ar-foe { position: relative; display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; border: 1px solid var(--ar-line); border-radius: 20px; background: var(--ar-card); color: var(--ar-ink); }
.ar-foe .ar-stage { height: 230px; background: #dfe8e2; }
.ar-foe-name { position: relative; z-index: 3; display: flex; justify-content: center; margin-top: -24px; min-height: 30px; }
.ar-foe-name .player-name-tag:not(.has-art) { padding: 5px 14px; border-radius: 999px; background: var(--ar-card); box-shadow: 0 2px 8px rgba(20, 30, 25, .14); font: 700 17px var(--serif); }
.ar-foe-name .player-name-tag.has-art { --tag-cap: 26px; height: 42px; min-width: 130px; padding-inline: 30px; font-size: 15px; }
.ar-foe-body { display: flex; flex-direction: column; gap: 10px; padding: 8px 14px 14px; }
.ar-foe-body .ar-fight { margin-top: auto; }
.ar-foe-rank { display: flex; align-items: center; gap: 9px; }
.ar-foe-rank img { flex: none; width: 34px; height: 34px; object-fit: contain; }
.ar-foe-rank span { display: grid; flex: 1; min-width: 0; }
.ar-foe-rank strong { font-size: 14px; }
.ar-foe-rank small { color: var(--ar-muted); font-size: 12px; }
.ar-foe-rank em { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--ar-soft); color: var(--ar-muted); font-size: 11.5px; font-style: normal; font-weight: 800; }
.ar-foe-rank em.is-up { background: color-mix(in srgb, var(--ar-up) 12%, transparent); color: var(--ar-up); }
.ar-foe-rank em.is-down { background: color-mix(in srgb, var(--ar-down) 12%, transparent); color: var(--ar-down); }
.ar-foe-gear { display: flex; gap: 6px; }
.ar-foe-gear > span { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--ar-soft); }
.ar-foe-gear img { width: 30px; height: 30px; object-fit: contain; }
.ar-foe-gear .item-enchantment-badge { right: -3px; bottom: -3px; transform: scale(.85); }
.ar-fight { min-height: 42px; border: 0; border-radius: 12px; background: var(--ar-fight); color: #fff; font-weight: 800; letter-spacing: .01em; box-shadow: 0 6px 14px color-mix(in srgb, var(--ar-fight) 28%, transparent); transition: transform .15s ease, filter .15s ease; }
.ar-fight:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.06); }

@container (max-width: 640px) {
  .ar-hero { height: 400px; }
  .ar-hero-copy { top: 22px; left: 20px; width: calc(100% - 40px); transform: none; }
  .ar-rank img { width: 64px; height: 64px; }
  .ar-rank strong { font-size: 28px; }
  .ar-next { width: min(260px, 70%); }
  .ar-hero-stage { right: 50%; width: 240px; height: 250px; transform: translateX(50%); }
  .ar-hero-stage canvas { width: 230px; height: 230px; bottom: 48px; }
  .ar-hero-name { right: 50%; }
  .ar-styles button { flex-direction: column; gap: 4px; padding: 10px 6px; text-align: center; }
  .ar-styles small { display: none; }
  .ar-slots { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .ar-loadout > header { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .ar-slot, .ar-fight { transition: none; transform: none !important; } }

/* Arena match: full-bleed SVG arena, the fighters on the sand line, glass controls. */
.ar-duel { --ar-sand-line: 50%; position: relative; isolation: isolate; min-height: max(760px, calc(100dvh - 120px)); overflow: hidden; border-radius: 20px; background: #c6ab80; color: #1c1d1f; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
html[data-theme="dark"] .ar-duel { background: #3c372f; color: #fff; }
.ar-duel-scene, .ar-duel-ground { position: absolute; z-index: -2; left: 0; width: 100%; pointer-events: none; }
.ar-duel-scene { top: 0; height: var(--ar-sand-line); object-fit: cover; object-position: center bottom; }
.ar-duel-ground { top: calc(var(--ar-sand-line) - 1px); height: calc(100% - var(--ar-sand-line) + 1px); object-fit: cover; object-position: center top; }
.ar-duel .is-dark, html[data-theme="dark"] .ar-duel img:not(.is-dark):is(.ar-duel-scene, .ar-duel-ground) { display: none; }
html[data-theme="dark"] .ar-duel .is-dark { display: block; }
.ar-duel-top { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 16px; }
.ar-glass-chip, .ar-glass-button, .ar-glass-card, .ar-glass-spinner { border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .42); color: inherit; box-shadow: 0 8px 24px rgba(20, 16, 10, .14), inset 0 1px 0 rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
html[data-theme="dark"] :is(.ar-glass-chip, .ar-glass-button, .ar-glass-card, .ar-glass-spinner) { border-color: rgba(255, 255, 255, .14); background: rgba(30, 32, 38, .45); box-shadow: 0 8px 24px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08); }
.ar-glass-chip { min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 34px; }
button.ar-glass-chip { cursor: pointer; }
html .ar-duel .ar-glass-chip.is-danger { border-color: transparent; background: #e5484d; color: #fff; }
.ar-duel-actors { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(100% - var(--ar-sand-line) - 8px); display: grid; grid-template-columns: 1fr 1fr; padding: 0 6%; }
.ar-duel-fighter { position: relative; display: grid; justify-items: center; }
.ar-duel-hero { position: relative; width: min(100%, 250px); height: 270px; }
.ar-duel-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ar-duel-fighter.is-foe canvas { transform: scaleX(-1); }
.ar-duel-hero .ar-duel-pet { position: absolute; z-index: 2; left: 12%; bottom: 0; width: 26%; height: 26%; }
.ar-duel-fighter.is-foe .ar-duel-pet { left: auto; right: 12%; transform: scaleX(-1); }
.ar-duel-fighter .player-name-tag { position: absolute; top: calc(100% + 14px); white-space: nowrap; }
.ar-duel-fighter .player-name-tag:not(.has-art) { font-weight: 700; font-size: 17px; }
.ar-duel-fighter .battle-splats { top: 30%; }
.ar-duel-status { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--ar-sand-line) + 64px); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 6%; }
.ar-duel-status > div { display: grid; gap: 6px; }
.ar-duel-status span { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ar-duel-status b { font-variant-numeric: tabular-nums; }
.ar-duel.is-entering .ar-duel-status, .ar-duel.is-result .ar-duel-status { opacity: 0; }

/* Walk-in while the match opens */
.ar-duel.is-entering .is-you { animation: ar-walk-in-left .9s cubic-bezier(.2, .9, .3, 1.08) both; }
.ar-duel.is-entering .is-foe { animation: ar-walk-in-right .9s cubic-bezier(.2, .9, .3, 1.08) both; }
@keyframes ar-walk-in-left { from { transform: translateX(-70vw); } }
@keyframes ar-walk-in-right { from { transform: translateX(70vw); } }
.ar-duel-entry { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; background: linear-gradient(rgba(0, 0, 0, .16), transparent 35%, transparent 70%, rgba(0, 0, 0, .2)); }
.ar-duel-vs { position: absolute; left: 50%; top: calc(var(--ar-sand-line) - 140px); color: #fff; font: italic 900 48px/1 var(--serif); text-shadow: 0 3px 10px rgba(0, 0, 0, .35); transform: translateX(-50%); animation: ar-vs .5s .55s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes ar-vs { from { opacity: 0; transform: translateX(-50%) scale(1.8); } }
.ar-glass-spinner { position: absolute; bottom: 32px; left: 50%; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; }
.ar-glass-spinner::after { position: absolute; inset: 15px; content: ""; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: .7; animation: ar-spin .8s linear infinite; }
.ar-result-wait .ar-glass-spinner { position: relative; bottom: auto; left: auto; margin: 0 auto; }
@keyframes ar-spin { to { transform: rotate(1turn); } }

/* Result */
.ar-duel-result { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 34px 16px 16px; background: linear-gradient(rgba(0, 0, 0, .28), transparent 40%); }
.ar-duel-result h1 { margin: 0; color: #fff; font: 900 48px/1.1 var(--serif); text-shadow: 0 4px 14px rgba(0, 0, 0, .3); animation: ar-rise .5s .1s cubic-bezier(.2, .9, .3, 1.1) both; }
.ar-glass-card { display: grid; gap: 16px; width: min(100%, 440px); padding: 18px; border-radius: 28px; animation: ar-rise .55s .2s cubic-bezier(.2, .9, .3, 1.1) both; }
.ar-glass-card p { margin: 0; text-align: center; font-size: 15px; }
@keyframes ar-rise { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.ar-result-rank { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.ar-result-rank img { width: 52px; height: 52px; object-fit: contain; }
.ar-result-rank span { display: grid; gap: 2px; }
.ar-result-rank strong { font-size: 17px; }
.ar-result-rank small { opacity: .65; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ar-result-rank em { font: 700 34px/1 ui-rounded, -apple-system, system-ui, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; opacity: .6; }
.ar-result-rank em.is-up { color: #946018; opacity: 1; }
html[data-theme="dark"] .ar-result-rank em.is-up { color: #f5ca70; }
.ar-result-next { display: grid; gap: 6px; }
.ar-result-next .ar-meter { background: rgba(127, 127, 127, .2); }
.ar-result-next small { opacity: .65; font-size: 12px; font-weight: 500; }
.ar-result-wait { display: grid; place-items: center; min-height: 92px; }
.ar-glass-button { min-height: 50px; border-radius: 999px; font-size: 17px; font-weight: 600; font-family: inherit; cursor: pointer; }
html .ar-duel .ar-glass-button.is-prominent { border-color: transparent; background: #0a84ff; color: #fff; }
.ar-glass-button:disabled { opacity: .45; cursor: default; }
@media (max-width: 620px) {
  .ar-duel { margin: 0 -12px; border-radius: 18px; }
  .ar-duel-actors, .ar-duel-status { padding: 0 3%; }
  .ar-duel-hero { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-duel *, .ar-duel *::after { animation: none !important; }
}

/* Arena leaderboard */
.ar-route { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ar-route-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ar-line, rgba(0, 0, 0, .08)); border-radius: 50%; background: var(--ar-card, #fff); cursor: pointer; }
.ar-route-icon img { width: 22px; height: 22px; }
html[data-theme="dark"] .ar-route-icon { border-color: #3a404b; background: #272b34; }
html[data-theme="dark"] .ar-route-icon img { filter: invert(1); }
.arl-page { --arl-card: #fff; display: grid; gap: 16px; max-width: 760px; margin: 0 auto; }
.arl-page h1 { margin: 4px 0 0; font: 700 30px/1.15 var(--serif); }
.arl-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; }
.arl-spot { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.arl-stage { width: 100%; height: 190px; overflow: visible; }
.arl-stage canvas { bottom: 18%; }
.arl-tag { display: flex; justify-content: center; max-width: 100%; }
.arl-tag .player-name-tag.has-art { --tag-cap: 24px; height: 36px; min-width: 110px; padding-inline: 26px; font-size: 14px; }
.arl-tag .player-name-tag:not(.has-art) { font-weight: 700; }
.arl-rep, .arl-score { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.arl-rep img { width: 20px; height: 20px; object-fit: contain; }
.arl-block { display: grid; place-items: start center; width: 100%; padding-top: 8px; border: 1px solid rgba(127, 127, 127, .14); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--arl-card); font: 900 28px/1 var(--serif); }
html[data-theme="dark"] .arl-page { --arl-card: #272b34; }
.is-place-1 .arl-block { height: 84px; } .is-place-2 .arl-block { height: 60px; } .is-place-3 .arl-block { height: 44px; }
.arl-spot.is-you .arl-block { border-color: color-mix(in srgb, #0a84ff 50%, transparent); }
.arl-list { display: grid; gap: 8px; }
.arl-row { display: grid; grid-template-columns: 30px 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(127, 127, 127, .14); border-radius: 12px; background: var(--arl-card); color: inherit; text-align: left; cursor: pointer; }
.arl-row.is-you { border-color: color-mix(in srgb, #0a84ff 35%, transparent); background: color-mix(in srgb, #0a84ff 9%, var(--arl-card)); }
.arl-place { color: rgba(127, 127, 127, .9); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.arl-portrait { width: 44px; height: 44px; overflow: hidden; border-radius: 50%; border: 1px solid rgba(127, 127, 127, .14); }
.arl-portrait canvas { width: 100%; height: 100%; }
.arl-who { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.arl-who .player-name-tag.has-art { --tag-cap: 22px; height: 32px; min-width: 100px; padding-inline: 24px; font-size: 14px; }
.arl-who .player-name-tag:not(.has-art) { font-weight: 600; font-size: 15px; }
.arl-who small { color: rgba(127, 127, 127, .95); font-size: 12px; }
.arl-score strong { font-size: 16px; }
.arl-score img { width: 30px; height: 30px; object-fit: contain; }
@media (max-width: 620px) { .arl-stage { height: 150px; } .arl-podium { gap: 6px; } }

/* Staking: one list, one detail sheet, item tiles with steppers, and glass fight controls. */
.sk-page { display: grid; gap: 16px; --ar-danger: #c2412d; --ar-alert: #e5484d; }
html[data-theme="dark"] .sk-page { --ar-danger: #ff8a73; }
.sk-page button { cursor: pointer; }
.sk-page .stake-header { height: 180px; margin: 0; border-radius: 22px; }
.sk-page .stake-header::after { background: linear-gradient(180deg, transparent 35%, rgba(14, 20, 22, .6)); }
.sk-page .stake-header h1 { bottom: 20px; }
.sk-head-actions { position: absolute; z-index: 2; right: 16px; bottom: 18px; display: flex; gap: 8px; }
.sk-icon { width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff; font-size: 18px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sk-primary { min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ar-accent); color: #fff; font-weight: 700; }
html[data-theme="dark"] .sk-primary { color: #10261a; }
.sk-primary.is-large { width: 100%; min-height: 52px; font-size: 17px; }
.sk-primary:disabled, .sk-quiet:disabled { opacity: .5; cursor: default; }
.sk-quiet { min-height: 40px; padding: 0 16px; border: 1px solid var(--ar-line); border-radius: 999px; background: var(--ar-card); color: var(--ar-ink); font-weight: 700; }
.sk-quiet.is-danger, .sk-link.is-danger { color: var(--ar-danger); }
.sk-link { justify-self: center; padding: 6px 8px; border: 0; background: none; color: var(--ar-muted); font-weight: 700; }
.sk-empty { margin: 0; padding: 22px 8px; color: var(--ar-muted); text-align: center; }

.sk-tabs { display: inline-flex; gap: 4px; justify-self: start; padding: 4px; border-radius: 999px; background: var(--ar-soft); }
.sk-tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--ar-muted); font-weight: 700; }
.sk-tabs button[aria-selected="true"] { background: var(--ar-card); color: var(--ar-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.sk-tabs em { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ar-alert); color: #fff; font: 700 11px/20px system-ui, sans-serif; font-style: normal; }

.sk-list { display: grid; gap: 8px; }
.sk-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 1.4fr) auto 14px; align-items: center; gap: 14px; min-height: 72px; padding: 10px 16px; border: 1px solid var(--ar-line); border-radius: 18px; background: var(--ar-card); color: var(--ar-ink); text-align: left; transition: transform .15s ease, border-color .15s ease; }
.sk-row:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ar-accent) 40%, var(--ar-line)); }
.sk-row > b { color: var(--ar-muted); font-size: 20px; }
.sk-who { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.sk-who .player-name-tag { max-width: 100%; }
.sk-who small { color: var(--ar-muted); font-size: 12px; font-weight: 600; }
.sk-status { padding: 4px 10px; border-radius: 999px; background: var(--ar-soft); color: var(--ar-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sk-status.is-offer, .sk-status.is-ready { background: var(--ar-alert); color: #fff; }
.sk-status.is-won { background: var(--ar-accent-soft); color: var(--ar-accent); }

.sk-pot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.sk-gold { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px 0 6px; border-radius: 999px; background: var(--ar-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-gold img { width: 22px; height: 22px; }
.sk-item { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ar-soft); }
.sk-item > img, .sk-item > span { width: 30px; height: 30px; object-fit: contain; }
.sk-item b { position: absolute; right: -3px; bottom: -3px; min-width: 18px; padding: 0 4px; border-radius: 999px; background: var(--ar-ink); color: var(--ar-card); font-size: 10px; line-height: 16px; text-align: center; }

.sk-sheet { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--ar-line); border-radius: 22px; background: var(--ar-card); color: var(--ar-ink); }
.sk-sheet > header { display: flex; align-items: center; gap: 12px; }
.sk-sheet > header h2 { margin: 0; font-size: 20px; }
.sk-sheet > header .sk-who { flex: 1; }
.sk-back { flex: none; width: 38px; height: 38px; border: 1px solid var(--ar-line); border-radius: 50%; background: var(--ar-card); color: var(--ar-ink); font-size: 22px; line-height: 1; }
.sk-block { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--ar-soft); }
.sk-block h3 { margin: 0; color: var(--ar-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sk-block .sk-gold, .sk-block .sk-item { background: var(--ar-card); }
.sk-block footer, .sk-sheet > form footer, .sk-sheet > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk-block footer p, .sk-sheet footer p { margin: 0; color: var(--ar-muted); font-size: 13px; }
.sk-actions { display: flex; gap: 8px; }
.sk-actions.is-end { justify-content: flex-end; }
.sk-offer { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1.5fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--ar-card); }
.sk-offer + .sk-offer { margin-top: 2px; }
.sk-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-rule { min-height: 34px; padding: 0 14px; border: 1px solid var(--ar-line); border-radius: 999px; background: var(--ar-card); color: var(--ar-muted); font-size: 13px; font-weight: 700; }
.sk-rules.is-static .sk-rule { display: inline-flex; align-items: center; min-height: 28px; }
.sk-rule[aria-pressed="true"] { border-color: var(--ar-ink); background: var(--ar-ink); color: var(--ar-card); }
.sk-field { display: grid; gap: 8px; }
.sk-field > span, .sk-gold-field > span { color: var(--ar-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sk-gold-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; }
.sk-gold-field > span { grid-column: 1 / -1; }
.sk-gold-input { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid var(--ar-line); border-radius: 14px; background: var(--ar-card); }
.sk-gold-input img { width: 24px; height: 24px; }
.sk-gold-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ar-ink); font: 700 18px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.sk-gold-input:focus-within { border-color: var(--ar-accent); box-shadow: 0 0 0 3px var(--ar-accent-soft); }
.sk-gold-field small { color: var(--ar-muted); font-size: 12px; }
.sk-picker { display: grid; gap: 10px; }
.sk-search { min-height: 42px; padding: 0 14px; border: 1px solid var(--ar-line); border-radius: 999px; background: var(--ar-card); color: var(--ar-ink); font: inherit; }
.sk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 360px; overflow: auto; padding: 2px; }
.sk-tile { position: relative; display: grid; border: 1px solid var(--ar-line); border-radius: 14px; background: var(--ar-card); }
.sk-tile[hidden] { display: none; }
.sk-tile.is-picked { border-color: var(--ar-accent); box-shadow: inset 0 0 0 1px var(--ar-accent); }
.sk-tile-add { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 6px 8px; border: 0; background: none; color: var(--ar-ink); text-align: center; }
.sk-tile-add > img, .sk-tile-add > span:first-child { width: 40px; height: 40px; object-fit: contain; }
.sk-tile-add strong { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sk-tile-add small { color: var(--ar-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.sk-stepper { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; margin: 0 6px 6px; border-radius: 999px; background: var(--ar-accent-soft); }
.sk-stepper button { height: 30px; border: 0; background: none; color: var(--ar-accent); font-size: 18px; font-weight: 700; }
.sk-stepper button:disabled { opacity: .35; }
.sk-stepper b { text-align: center; font-variant-numeric: tabular-nums; }
.sk-ready { justify-items: stretch; }
.sk-versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 4px 0 8px; }
.sk-versus span:last-child { justify-self: end; }
.sk-versus b { font: italic 900 22px/1 var(--serif); color: var(--ar-muted); }
.sk-outcome { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; }

.sk-inbox { display: grid; gap: 8px; }
.sk-inbox[hidden] { display: none; }
.sk-inbox header { display: flex; align-items: center; justify-content: space-between; }
.sk-inbox h2 { margin: 0; font-size: 15px; }
.sk-feed { display: grid; overflow: hidden; border: 1px solid var(--ar-line); border-radius: 18px; background: var(--ar-card); }
.sk-feed-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border: 0; border-top: 1px solid var(--ar-line); background: none; color: var(--ar-ink); text-align: left; }
.sk-feed-row:first-child { border-top: 0; }
.sk-feed-row:hover { background: var(--ar-soft); }
.sk-feed-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--ar-line); }
.sk-feed-row.is-offer i, .sk-feed-row.is-ready i { background: #d99a2b; }
.sk-feed-row.is-won i { background: var(--ar-accent); }
.sk-feed-row.is-new i { background: var(--ar-alert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-alert) 22%, transparent); }
.sk-feed-row strong { font-size: 14px; }
.sk-feed-row.is-new strong { font-weight: 800; }
.sk-feed-row small { color: var(--ar-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.pvp-hub .sk-count { position: absolute; z-index: 2; top: 14px; right: 14px; padding: 4px 10px; border-radius: 999px; background: #e5484d; color: #fff; font: 700 12px/1.3 system-ui, sans-serif; font-style: normal; box-shadow: 0 4px 12px rgba(229, 72, 77, .4); }

/* Stake alert: a red pill by the activity accessory, kept until Staking is opened. */
.stake-alert { position: fixed; z-index: 96; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); animation: sk-alert-in .35s cubic-bezier(.2, .9, .3, 1.1) both; }
body:has(#game-accessory:not([hidden])) .stake-alert { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 72px); }
.stake-alert-open { display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: min(420px, calc(100vw - 28px)); min-height: 52px; padding: 6px 16px 6px 8px; border: 0; border-radius: 999px; background: #e5484d; color: #fff; text-align: left; box-shadow: 0 10px 28px rgba(229, 72, 77, .35); cursor: pointer; }
.stake-alert-open img { flex: none; width: 38px; height: 38px; padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, .2); filter: brightness(0) invert(1); }
.stake-alert-open span { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.stake-alert-open strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.stake-alert-open small { opacity: .85; font-size: 12px; }
.stake-alert-open b { font-size: 20px; }
@keyframes sk-alert-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (max-width: 950px) {
  .stake-alert { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body:has(#game-accessory:not([hidden])) .stake-alert { bottom: calc(156px + env(safe-area-inset-bottom)); }
}
.nav-item .nav-alert { position: relative; z-index: 1; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; border-radius: 999px; background: #e5484d; color: #fff; font: 700 11px/20px system-ui, sans-serif; text-align: center; }
.mobile-menu.has-alert { position: relative; }
.mobile-menu.has-alert::after { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; content: ""; border: 2px solid #fff; border-radius: 50%; background: #e5484d; }

/* Stake fight controls on the arena sand */
.sk-controls { position: absolute; z-index: 3; left: 0; right: 0; bottom: 16px; display: grid; gap: 8px; width: min(560px, 100%); margin: 0 auto; padding: 0 16px; }
.sk-controls[inert] { opacity: .5; }
.sk-stances { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sk-stances.is-wide { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.sk-stance, .sk-pick { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 46px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 16px; background: rgba(255, 255, 255, .42); color: inherit; font: 600 15px/1 inherit; box-shadow: 0 6px 18px rgba(20, 16, 10, .12), inset 0 1px 0 rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); cursor: pointer; transition: transform .12s ease, background .15s ease; }
.sk-stance:active, .sk-pick:active { transform: scale(.97); }
.sk-stance img, .sk-pick img, .sk-pick > span:first-child { flex: none; width: 20px; height: 20px; object-fit: contain; }
.sk-stance small { opacity: .65; font-size: 13px; font-variant-numeric: tabular-nums; }
.sk-stance[aria-pressed="true"] { border-color: transparent; background: #1c1d1f; color: #fff; }
.sk-stance[aria-pressed="true"] img { filter: brightness(0) invert(1); }
.sk-prayer[aria-pressed="true"] { background: #1f8a85; }
.sk-loadout { display: flex; justify-content: center; }
.sk-pick { justify-content: flex-start; min-width: 220px; padding: 0 14px; }
.sk-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-pick b { margin-left: auto; opacity: .6; }
.sk-panel { display: grid; gap: 10px; max-height: 280px; padding: 12px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 22px; background: rgba(255, 255, 255, .72); box-shadow: 0 12px 32px rgba(20, 16, 10, .2); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); animation: ar-rise .25s cubic-bezier(.2, .9, .3, 1.1) both; }
.sk-panel header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.sk-x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .08); color: inherit; font-size: 18px; cursor: pointer; }
.sk-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; overflow: auto; }
.sk-choices button { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; border: 1px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, .6); color: inherit; text-align: left; cursor: pointer; }
.sk-choices button > img, .sk-choices button > span:first-child:not(:only-child) { flex: none; width: 28px; height: 28px; object-fit: contain; }
.sk-choices button span { display: grid; min-width: 0; }
.sk-choices strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sk-choices small { opacity: .6; font-size: 11px; }
.sk-choices button[aria-pressed="true"] { border-color: #1c1d1f; background: #fff; box-shadow: inset 0 0 0 1px #1c1d1f; }
.sk-result { display: grid; justify-items: center; gap: 10px; }
.sk-result small { opacity: .7; font-size: 14px; font-weight: 600; }
.sk-result .sk-pot { justify-content: center; }
.sk-result .sk-gold, .sk-result .sk-item { background: rgba(255, 255, 255, .55); }
.sk-duel.is-entering .sk-controls, .sk-duel.is-result .sk-controls { opacity: 0; pointer-events: none; }
html[data-theme="dark"] :is(.sk-stance, .sk-pick) { border-color: rgba(255, 255, 255, .14); background: rgba(30, 32, 38, .5); box-shadow: 0 6px 18px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08); }
html[data-theme="dark"] .sk-stance[aria-pressed="true"] { background: #f2f2f4; color: #15161a; }
html[data-theme="dark"] .sk-stance[aria-pressed="true"] img { filter: none; }
html[data-theme="dark"] .sk-prayer[aria-pressed="true"] { background: #4fc3bc; }
html[data-theme="dark"] .sk-panel { border-color: rgba(255, 255, 255, .14); background: rgba(30, 32, 38, .8); }
html[data-theme="dark"] .sk-choices button { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .sk-choices button[aria-pressed="true"] { border-color: #f2f2f4; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px #f2f2f4; }
html[data-theme="dark"] .sk-x { background: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .sk-result .sk-gold, html[data-theme="dark"] .sk-result .sk-item { background: rgba(255, 255, 255, .1); }
@media (max-width: 620px) {
  .sk-row { grid-template-columns: 1fr auto 14px; grid-template-areas: "who status chevron" "pot pot pot"; gap: 8px 10px; }
  .sk-row > .sk-who { grid-area: who; } .sk-row > .sk-pot { grid-area: pot; } .sk-row > .sk-status { grid-area: status; } .sk-row > b { grid-area: chevron; }
  .sk-offer { grid-template-columns: 1fr; }
  .sk-head-actions { right: 12px; bottom: 14px; }
  .sk-page .stake-header h1 { left: 18px; bottom: 64px; }
  .sk-tabs { justify-self: stretch; } .sk-tabs button { flex: 1; justify-content: center; padding: 0 10px; }
  .sk-controls { padding: 0 10px; }
  .sk-stance { min-height: 44px; padding: 0 6px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .stake-alert, .sk-panel { animation: none; } }