#arena {
  flex: 1 1 auto; position: relative; min-height: 0; overflow: hidden;
}

#arena .arfit {
  position: absolute; inset: 0;
}

#arena .arstage {
  position: absolute; left: 50%; top: 50%; width: 1440px; height: 900px;
  transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: center center;
}

#arena .arbg {
  position: absolute; inset: 0; border-radius: 4px; overflow: hidden;
  background:
    radial-gradient(820px 480px at 8% 106%, rgba(228, 87, 74, .14), transparent 62%),
    radial-gradient(760px 440px at 94% -8%, rgba(74, 163, 224, .13), transparent 60%),
    radial-gradient(1300px 760px at 50% 44%, var(--bg2) 0%, var(--bg1) 54%, var(--bg0) 100%);
}
#arena .argrain {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(114deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 5px);
}
#arena .arveil { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 1; }
#arena .arveil.top { top: 0; height: 300px; }
#arena .arveil.bot { bottom: 0; height: 340px; }
#arena .arveil.top.az { background: linear-gradient(180deg, rgba(21, 46, 74, .55), rgba(6, 10, 18, 0)); }
#arena .arveil.top.cr { background: linear-gradient(180deg, rgba(72, 26, 20, .55), rgba(6, 10, 18, 0)); }
#arena .arveil.bot.az { background: linear-gradient(0deg, rgba(21, 46, 74, .55), rgba(6, 10, 18, 0)); }
#arena .arveil.bot.cr { background: linear-gradient(0deg, rgba(72, 26, 20, .55), rgba(6, 10, 18, 0)); }
#arena .arhorizon {
  position: absolute; left: 0; top: calc(50% - 38px); width: 100%; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(240, 196, 106, 0), rgba(240, 196, 106, .34) 22%,
    rgba(240, 196, 106, .34) 78%, rgba(240, 196, 106, 0));
}

#arena .arslot { position: absolute; }
#arena .arslot > .card,
#arena .arslot > .cardback {
  width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 9px;
}

#arena .arhand { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
#arena .arhand .arslot { pointer-events: auto; }
body.dragging #arena .arhand .arslot { pointer-events: none; }
#arena .arhand.flippable { cursor: pointer; }
#arena .arhand .arhcard { transition: transform .14s ease; }
#arena .arhand.mine .arhcard:hover { z-index: 90; }
#arena .arhand.mine .card.hcard { transition: transform .14s ease; }
#arena .arhand.mine .card.hcard:hover { transform: translateY(-92px) scale(1.02); }
#arena .arhand.opp .cardback.hback { border-radius: 9px; }
#arena .arhand .arhempty { display: flex; align-items: center; justify-content: center; }
#arena .card .hcost {
  left: 10%; top: 8.6%; right: auto; bottom: auto;
  transform: translate(-50%, -50%); border-radius: 50%;
}
#arena .arhand.mine .card.hcard .hcost { width: 24px; height: 24px; font-size: 13px; }
#arena .card.uplate .mv {
  left: auto; right: 9%; top: 8.6%; bottom: auto; transform: translate(50%, -50%);
}
#arena .arbase.mine .card.uplate .mv { width: 26px; height: 26px; font-size: 13px; }
#arena .card.uplate .badges { left: -4px; right: auto; }

#arena .arcorner { position: absolute; z-index: 24; display: flex; }

#arena .arcards { flex-direction: column; gap: 22px; }
#arena .arcards.tl { left: 24px; top: 18px; align-items: flex-start; }
#arena .arcards.br { right: 24px; bottom: 22px; align-items: flex-end; }
#arena .arpiles { display: flex; gap: 18px; }
#arena .arcards.tl .pilestack { width: 56px; height: 78px; }
#arena .arcards.br .pilestack { width: 66px; height: 92px; }
#arena .arpiles .pilecard { border-radius: 9px; }

#arena .arident { display: flex; align-items: flex-start; gap: 22px; }
#arena .arcards.tl .arident .bigcard { width: 74px; height: 103px; }
#arena .arcards.br .arident .bigcard { width: 82px; height: 114px; }
#arena .arident .slotplate { bottom: -9px; font-size: 7px; padding: 1px 5px; letter-spacing: .9px; }
#arena .arpiles .slotplate { font-size: 7px; padding: 1px 6px; letter-spacing: 1px; }
#arena .arcards.tl .arident .bigslot { padding-bottom: 4px; }
#arena .arxp {
  position: absolute; left: 50%; top: -9px; transform: translateX(-50%); z-index: 3;
  font-size: 9px; padding: 0 8px; border-color: var(--goldline); color: var(--gold);
}

#arena .arside.tr { right: 20px; top: calc(42px / var(--s, 1)); }
#arena .arside.bl { left: 20px; bottom: 14px; }

#arena .arpool {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px;
  background: rgba(6, 10, 18, .55);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d1, var(--gold)) 30%, transparent),
    0 0 18px color-mix(in srgb, var(--d1, var(--gold)) 20%, transparent);
}
#arena .arpool .poolgroup {
  flex: 0 0 190px; flex-wrap: wrap; align-content: center; min-height: 46px;
}
#arena .arpool .poolgroup.empty { justify-content: center; opacity: .5; }
#arena .arpool .runesplit { height: 48px; }
#arena .arrunes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#arena .arrunegrid {
  display: grid; grid-template-columns: repeat(6, var(--rw)); gap: 4px; justify-items: center;
}
#arena .arside.bl { --rw: 34px; --rh: 48px; }
#arena .arside.tr { --rw: 28px; --rh: 39px; }
#arena .arside .rune, #arena .runehole {
  width: var(--rw); height: var(--rh); border-radius: 6px;
  background-size: cover !important; background-position: center !important;
}
#arena .runedeckpile .rdcard:not(:last-of-type) { display: none; }
#arena .runehole { border: 1px dashed var(--line2); opacity: .45; }
#arena .arside.tr .arrunes { flex-direction: row-reverse; }
#arena .arside.bl .arpool { flex-direction: row-reverse; }

#arena .arbase {
  position: absolute; z-index: 8; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
#arena .arbase.opp {
  left: 50%; transform: translateX(-50%); width: calc(100% - 600px); max-width: 1160px;
  bottom: calc(50% + 154px); height: 126px;
}
#arena .arbase.mine {
  left: 50%; transform: translateX(-50%); width: calc(100% - 640px); max-width: 1200px;
  top: calc(50% + 96px); height: 158px;
}
#arena .arbase .arbaseunits { display: flex; align-items: center; gap: 14px; }
#arena .arbase .arbaseunits.crowd1 { gap: 6px; }
#arena .arbase .arbaseunits.crowd2 { gap: 0; }
#arena .arbase .arbaseunits.crowd2 .card.uplate { margin-left: -18px; }
#arena .arbase .arbaseunits.crowd2 .card.uplate:first-child { margin-left: 0; }
#arena .arbase.opp .card.uplate { width: 84px; height: 117px; }
#arena .arbase.mine .card.uplate { width: 110px; height: 154px; }
#arena .arbase.highlight { outline: 2px solid var(--good); outline-offset: -2px; }
#arena .arbase.clickable-loc { cursor: pointer; }

#arena .arfields {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: calc(100% - 40px); max-width: 1760px;
  top: calc(50% - 154px); height: 232px; z-index: 12;
  display: flex; align-items: stretch;
}
#arena .arbf {
  flex: 1 1 0; min-width: 0; position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); background: #0b1220;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 16px 34px rgba(0, 0, 0, .55);
}
#arena .arbf.cr { border-color: var(--crimline); box-shadow: 0 0 0 1px rgba(228, 87, 74, .25), 0 16px 34px rgba(0, 0, 0, .55); }
#arena .arbf.az { border-color: var(--azline); box-shadow: 0 0 0 1px rgba(74, 163, 224, .25), 0 16px 34px rgba(0, 0, 0, .55); }
#arena .arbf.highlight { outline: 2px solid var(--good); outline-offset: -2px; }
#arena .arbf.clickable-loc { cursor: pointer; }

#arena .arbfart {
  position: absolute; inset: -24% -9%;
  filter: saturate(.72) brightness(.6) contrast(1.05);
}
#arena .arbfveil {
  position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(4, 7, 14, .85);
  background: linear-gradient(180deg, rgba(6, 10, 18, .55) 0%, rgba(6, 10, 18, .06) 34%,
    rgba(6, 10, 18, .06) 66%, rgba(6, 10, 18, .55) 100%);
}
#arena .arbf.ctlmine.cr .arbfveil { background: linear-gradient(180deg, rgba(6, 10, 18, .6) 0%, rgba(6, 10, 18, .08) 32%, rgba(64, 25, 20, .28) 66%, rgba(90, 30, 22, .7) 100%); }
#arena .arbf.ctlmine.az .arbfveil { background: linear-gradient(180deg, rgba(6, 10, 18, .6) 0%, rgba(6, 10, 18, .08) 32%, rgba(21, 42, 64, .3) 66%, rgba(18, 48, 80, .75) 100%); }
#arena .arbf.ctlopp.cr .arbfveil { background: linear-gradient(0deg, rgba(6, 10, 18, .6) 0%, rgba(6, 10, 18, .08) 32%, rgba(64, 25, 20, .28) 66%, rgba(90, 30, 22, .7) 100%); }
#arena .arbf.ctlopp.az .arbfveil { background: linear-gradient(0deg, rgba(6, 10, 18, .6) 0%, rgba(6, 10, 18, .08) 32%, rgba(21, 42, 64, .3) 66%, rgba(18, 48, 80, .75) 100%); }

#arena .arbfedge { position: absolute; left: -1px; top: 0; bottom: 0; width: 5px; background: transparent; }
#arena .arbf.cr .arbfedge { background: linear-gradient(180deg, rgba(228, 87, 74, .1), var(--crimson) 60%); box-shadow: 0 0 14px rgba(228, 87, 74, .7); }
#arena .arbf.az .arbfedge { background: linear-gradient(180deg, rgba(74, 163, 224, .1), var(--azure) 60%); box-shadow: 0 0 14px rgba(74, 163, 224, .7); }
#arena .arbf.ctlopp.cr .arbfedge { background: linear-gradient(0deg, rgba(228, 87, 74, .1), var(--crimson) 60%); }
#arena .arbf.ctlopp.az .arbfedge { background: linear-gradient(0deg, rgba(74, 163, 224, .1), var(--azure) 60%); }

#arena .arbfline {
  position: absolute; left: 30px; right: 30px; top: 118px; height: 1px;
  background: linear-gradient(90deg, rgba(240, 196, 106, 0), rgba(240, 196, 106, .45), rgba(240, 196, 106, 0));
}
#arena .arbfline.hot {
  height: 2px; box-shadow: 0 0 12px rgba(255, 184, 94, .8);
  background: linear-gradient(90deg, rgba(230, 144, 46, 0), #ffb85e 26%, #ffb85e 74%, rgba(230, 144, 46, 0));
}
#arena .arbfname {
  position: absolute; left: 14px; top: 9px; z-index: 3;
  font-family: Cinzel, Georgia, serif; font-size: 13px; font-weight: 600; color: #f0e6e2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .95);
  max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#arena .arbfchips { position: absolute; right: 12px; top: 9px; z-index: 3; display: flex; gap: 4px; }
#arena .arbfchips .chip { font-size: 9px; padding: 1px 8px; }
#arena .arbftext {
  position: absolute; left: 14px; right: 14px; bottom: 3px; z-index: 3;
  font-size: 8px; letter-spacing: 1.2px; text-transform: uppercase; color: #cdbfb8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}
#arena .arbfrow {
  position: absolute; left: 16px; right: 16px; height: 88px; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
#arena .arbfrow.top { top: 26px; }
#arena .arbfrow.bot { top: 122px; }
#arena .arbfrow.crowd1 { gap: 6px; }
#arena .arbfrow.crowd2 { gap: 0; }
#arena .arbfrow.crowd3 { gap: 0; }
#arena .arbfrow.crowd2 .card.uplate { margin-left: -14px; }
#arena .arbfrow.crowd3 .card.uplate { margin-left: -26px; }
#arena .arbfrow.crowd2 .card.uplate:first-child,
#arena .arbfrow.crowd3 .card.uplate:first-child { margin-left: 0; }
#arena .arbfrow.cr .card.uplate { box-shadow: 0 0 0 1px rgba(228, 87, 74, .55), 0 6px 14px rgba(0, 0, 0, .6); }
#arena .arbfrow.az .card.uplate { box-shadow: 0 0 0 1px rgba(74, 163, 224, .55), 0 6px 14px rgba(0, 0, 0, .6); }
#arena .arbfrow.empty { border-radius: 10px; border: 1px dashed transparent; }
#arena .arbfrow.empty.cr { border-color: rgba(228, 87, 74, .3); background: rgba(228, 87, 74, .05); }
#arena .arbfrow.empty.az { border-color: rgba(74, 163, 224, .32); background: rgba(74, 163, 224, .06); }

#arena .arbf .bffdrow { z-index: 5; right: 10px; }
#arena .arbf .theirsfdrow { top: 32px; bottom: auto; }
#arena .arbf .minefdrow { bottom: 18px; top: auto; }
#arena .arbf .bffd { width: 48px; }
#arena .arbf .bffd .cardback { width: 40px; height: 56px; border-radius: 6px; }
#arena .arbf .bffd .zlabel { font-size: 7px; line-height: 1.15; text-align: center; white-space: normal; }

#arena .ardialbox {
  flex: 0 0 200px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; z-index: 26;
}
#arena .ardial { position: relative; width: 160px; height: 160px; }
#arena .ardialface {
  position: absolute; inset: 12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(12, 19, 33, .96), rgba(6, 10, 18, .9));
  box-shadow: 0 0 0 1px var(--line2), 0 12px 30px rgba(0, 0, 0, .65);
}
#arena .ardialsvg { position: absolute; inset: 0; line-height: 0; }
#arena .arscore {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: Cinzel, Georgia, serif; font-size: 13px; font-weight: 700;
}
#arena .arscore.top { top: 24px; }
#arena .arscore.bot { bottom: 24px; }
#arena .arscore.cr { color: var(--crimtxt); }
#arena .arscore.az { color: var(--aztxt); }
#arena .arscore.win { color: var(--gold); text-shadow: 0 0 12px rgba(240, 196, 106, .7); }
#arena .ardialmid { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; }
#arena .arturn {
  font-family: Cinzel, Georgia, serif; font-size: 15px; font-weight: 700;
  letter-spacing: 2px; color: var(--gold);
}
#arena .arphase { letter-spacing: 2px; color: var(--dim); }
#arena .arturnsub {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; text-align: center;
  color: var(--dim); max-width: 190px;
}
#arena .arturnsub.cr { color: var(--crimtxt); }
#arena .arturnsub.az { color: var(--aztxt); }
#arena .arstatus {
  font-family: Cinzel, Georgia, serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; text-align: center; color: var(--gold); max-width: 200px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#arena .arstatus.wait { font-family: inherit; font-weight: 400; font-size: 10px; color: var(--dim); }
#arena .arstatus.hold { color: var(--warn); animation: arprioPulse 1s ease-in-out infinite; }
#arena .arstatus.over { font-size: 13px; text-shadow: 0 0 12px rgba(240, 196, 106, .7); }
#arena .arerr { color: #ff6b6b; font-size: 11px; font-weight: 700; text-align: center; max-width: 200px; }
#arena .arturnbtn { display: flex; gap: 8px; justify-content: flex-end; }
#arena .arturnbtn .btn { font-size: 13px; padding: 8px 18px; }

#arena .aroverlay {
  position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 7, 12, .45); pointer-events: none;
}
#arena .arpanel, .arpanelghost {
  pointer-events: auto; display: flex; flex-direction: column; gap: 10px;
  max-width: calc(100% - 80px); padding: 14px 18px; border-radius: 14px;
  background: rgba(9, 14, 24, .97); border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(240, 196, 106, .25), 0 0 46px rgba(240, 196, 106, .16), 0 18px 44px rgba(0, 0, 0, .75);
}
.arpanelghost h3, #arena .arpanel h3 { font-family: Cinzel, Georgia, serif; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; color: var(--gold); }
#arena .arpanel .note { color: var(--dim); font-size: 12px; white-space: pre-wrap; max-width: 640px; }
#arena .arpanel .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
#choicemenu.anchored { transition: none; }
#arena #grouptray {
  left: 50%; bottom: auto; top: calc(50% + 300px * var(--s, 1)); transform: translateX(-50%);
}
#app.arenaskin #selpanel { right: auto; left: 14px; }

#arena .arprio {
  position: absolute; left: 0; width: 100%; height: 46%; z-index: 3; pointer-events: none;
  --pc: var(--gold); --k: 1; overflow: hidden;
}
#arena .arprio.bot { bottom: 0; }
#arena .arprio.top { top: 0; }
#arena .arprio.cr { --pc: var(--crimson); }
#arena .arprio.az { --pc: var(--azure); }
#arena .arprio.wait { --k: .45; }
#arena .arprio::before, #arena .arprio::after { content: ""; position: absolute; }

#arena .arprio.v-edge::before, #arena .arprio.v-strong::before, #arena .arprio.v-soft::before {
  inset: 0; box-shadow: inset 0 0 90px 10px color-mix(in srgb, var(--pc) 42%, transparent);
  animation: arprioPulse 1.7s ease-in-out infinite;
}
#arena .arprio.v-strong::before {
  box-shadow: inset 0 0 160px 30px color-mix(in srgb, var(--pc) 70%, transparent);
  animation-duration: 1.1s;
}
#arena .arprio.v-soft::before {
  box-shadow: inset 0 0 120px 20px color-mix(in srgb, var(--pc) 30%, transparent);
  animation-duration: 3s;
}
#arena .arprio.v-edge::after, #arena .arprio.v-strong::after {
  left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--pc) 15%, transparent) 30%,
    var(--pc) 50%, color-mix(in srgb, var(--pc) 15%, transparent) 70%, transparent 100%);
  background-size: 60% 100%; background-repeat: no-repeat;
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--pc) 70%, transparent);
  animation: arprioSweep 2.6s linear infinite; opacity: var(--k);
}
#arena .arprio.v-strong::after {
  height: 5px; box-shadow: 0 0 34px 6px color-mix(in srgb, var(--pc) 90%, transparent);
  animation-duration: 1.6s;
}
#arena .arprio.bot::after { top: 0; }
#arena .arprio.top::after { bottom: 0; }

#arena .arprio.v-frame::before {
  inset: 10px; border-radius: 22px; border: 2px solid var(--pc);
  box-shadow: 0 0 24px 4px color-mix(in srgb, var(--pc) 70%, transparent),
    inset 0 0 40px color-mix(in srgb, var(--pc) 35%, transparent);
  animation: arprioPulse 1.4s ease-in-out infinite;
}
#arena .arprio.v-frame.bot::before { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; top: 0; }
#arena .arprio.v-frame.top::before { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; bottom: 0; }

#arena .arprio.v-wave::before {
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--pc) 55%, transparent) 50%, transparent 100%);
  background-size: 100% 60%; background-repeat: no-repeat;
  animation: arprioWaveBot 2.2s ease-in infinite;
}
#arena .arprio.v-wave.top::before { animation-name: arprioWaveTop; }

#arena .arprio::before { opacity: var(--k); }
#arena .arprio.wait::before { animation-duration: 3.4s; }

#arena .arprio.arrive::before { animation-name: arprioArrive, arprioPulse; animation-duration: .7s, 3s; animation-delay: var(--jd, 0s), calc(.7s + var(--jd, 0s)); animation-timing-function: ease-out, ease-in-out; animation-iteration-count: 1, infinite; }
#arena .arpriojump {
  position: absolute; left: 0; width: 100%; height: 160px; z-index: 3; pointer-events: none;
  --pc: var(--gold);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pc) 60%, transparent) 50%, transparent);
  animation: arprioJumpDown .5s cubic-bezier(.4, 0, .6, 1) forwards;
}
#arena .arpriojump.cr { --pc: var(--crimson); }
#arena .arpriojump.az { --pc: var(--azure); }
#arena .arpriojump.to-top { animation-name: arprioJumpUp; }
@keyframes arprioJumpDown { 0% { top: 12%; opacity: 0; } 25% { opacity: 1; } 100% { top: 72%; opacity: 0; } }
@keyframes arprioJumpUp { 0% { top: 72%; opacity: 0; } 25% { opacity: 1; } 100% { top: 12%; opacity: 0; } }
@keyframes arprioArrive { 0% { opacity: 0; } 40% { opacity: 1; box-shadow: inset 0 0 200px 60px color-mix(in srgb, var(--pc) 75%, transparent); } 100% { opacity: calc(.35 * var(--k)); } }
@keyframes arprioPulse { 0%, 100% { opacity: calc(.35 * var(--k)); } 50% { opacity: var(--k); } }
@keyframes arprioSweep { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } }
@keyframes arprioWaveBot { 0% { background-position: 0 -60%; opacity: 0; } 30% { opacity: var(--k); } 100% { background-position: 0 160%; opacity: 0; } }
@keyframes arprioWaveTop { 0% { background-position: 0 160%; opacity: 0; } 30% { opacity: var(--k); } 100% { background-position: 0 -60%; opacity: 0; } }

#arena #chainrail {
  right: 16px; top: auto; bottom: calc(350px * var(--s, 1)); transform: none;
  max-height: calc(100% - 350px * var(--s, 1) - 140px * var(--s, 1));
}

#app.arenaskin #topbar { top: 9px; }

#arena.pgroot .arfit { will-change: transform; }

#arena .pgtop {
  position: absolute; left: 0; right: 0; top: 0; height: 88px; z-index: 30;
  display: flex; align-items: center; gap: 18px; padding: 0 26px;
}
#arena .pgtitle { display: flex; flex-direction: column; gap: 2px; }
#arena .pgtitle h1 {
  margin: 0; font-family: Cinzel, Georgia, serif; font-size: 22px; letter-spacing: 5px;
  color: var(--gold); text-transform: uppercase;
}

#arena .pgseat {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 26;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 20px 8px 8px; border-radius: 999px;
  background: rgba(10, 15, 26, .82); border: 1px solid var(--line2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
}
#arena .pgseat.top { top: 108px; }
#arena .pgseat.bot { bottom: 250px; }
#arena .pgseat.cr { border-color: var(--crimline); }
#arena .pgseat.az { border-color: var(--azline); }
#arena .pgseatart {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
  background-color: #0b1220; background-size: cover; background-position: 50% 22%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
#arena .pgseattext { display: flex; flex-direction: column; gap: 1px; }
#arena .pgseatname { font-family: Cinzel, Georgia, serif; font-size: 15px; color: var(--text); }
#arena .pgflag {
  font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; margin-left: 6px;
}
#arena .pgflag.ok { background: rgba(120, 200, 140, .16); color: var(--good); border: 1px solid rgba(120, 200, 140, .4); }
#arena .pgflag.wait { background: rgba(240, 196, 106, .12); color: var(--gold); border: 1px solid var(--goldline); }

#arena .pgfields { gap: 0; }
#arena .pgbf { transform-origin: 50% 100%; will-change: transform; }
#arena .pgbf.pghidden { background: #070c16; }
#arena .pgbfback {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  color: var(--faint); opacity: .5;
}
#arena .pgbfwho {
  position: absolute; left: 14px; top: 10px; z-index: 4;
  font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase;
}
#arena .pgbfwho.cr { color: var(--crimtxt); }
#arena .pgbfwho.az { color: var(--aztxt); }
#arena .pgshock {
  position: absolute; left: 50%; top: 100%; width: 260px; height: 260px; margin: -130px 0 0 -130px;
  border-radius: 50%; pointer-events: none; z-index: 6; opacity: 0;
  background: radial-gradient(circle, rgba(240, 196, 106, .5) 0%, rgba(240, 196, 106, .12) 42%, rgba(240, 196, 106, 0) 68%);
}

#arena .pgdial { flex: 0 0 220px; gap: 12px; }
#arena .pgcrest {
  width: 108px; height: 108px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(12, 19, 33, .96), rgba(6, 10, 18, .9));
  box-shadow: 0 0 0 1px var(--goldline), 0 12px 30px rgba(0, 0, 0, .65);
}
#arena .pgcrestnum { font-family: Cinzel, Georgia, serif; font-size: 26px; color: var(--gold); letter-spacing: 2px; }

#arena .pgdice { display: flex; gap: 18px; align-items: flex-end; }
#arena .pgdicecell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#arena .pgdie {
  width: 62px; height: 62px; border-radius: 13px; padding: 7px;
  background: linear-gradient(160deg, #f4efe2, #cdc4b0);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 10px 22px rgba(0, 0, 0, .6);
  will-change: transform;
}
#arena .pgdie.cr { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 0 0 2px var(--crimline), 0 10px 22px rgba(0, 0, 0, .6); }
#arena .pgdie.az { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 0 0 2px var(--azline), 0 10px 22px rgba(0, 0, 0, .6); }
#arena .pgdie.won { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 0 0 2px var(--gold), 0 0 26px rgba(240, 196, 106, .6); }
#arena .pgdieface { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; }
#arena .pgpip { display: block; width: 11px; height: 11px; border-radius: 50%; margin: auto; background: transparent; }
#arena .pgpip.on { background: #17202f; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); }
#arena .pgroll { margin-top: 2px; }

#arena .pgtray {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 28;
  width: min(1000px, calc(100% - 60px));
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 18px; border-radius: 16px;
  background: rgba(10, 15, 26, .9); border: 1px solid var(--goldline);
  box-shadow: 0 -6px 40px rgba(0, 0, 0, .6);
}
#arena .pgtray.pgwait, #arena .pgtray.pgorder { align-items: center; }
#arena .pghead { display: flex; align-items: baseline; justify-content: space-between; }
#arena .pgpick { display: flex; gap: 14px; }
#arena .pgopt {
  flex: 1 1 0; min-width: 0; position: relative; height: 132px; border-radius: 12px; overflow: hidden;
  cursor: pointer; border: 1px solid var(--line2); background: #0b1220;
  transition: transform .12s ease, border-color .12s ease;
}
#arena .pgopt:hover { transform: translateY(-3px); border-color: var(--goldline); }
#arena .pgopt.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 26px rgba(240, 196, 106, .35); }
#arena .pgopt.dim { opacity: .4; cursor: not-allowed; }
#arena .pgopt.dim:hover { transform: none; }
#arena .pgoptart { position: absolute; inset: -18% -6%; background-color: #0b1220; }
#arena .pgoptveil {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6, 10, 18, .92) 0%, rgba(6, 10, 18, .1) 60%);
}
#arena .pgoptname {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2;
  font-family: Cinzel, Georgia, serif; font-size: 14px; color: var(--text);
}
#arena .pgoptused {
  position: absolute; right: 10px; top: 8px; z-index: 2;
  font-size: 9px; letter-spacing: 1.6px; color: var(--crimtxt);
}
#arena .pgfoot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
#arena .pgchoice { display: flex; gap: 16px; }

#arena .pgrule {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 27;
  font-size: 11px; color: var(--faint); text-align: center; max-width: 900px;
}
#arena .pgtray .pgrule { position: static; transform: none; max-width: none; }

#app.arenaskin #selpanel.pgview { z-index: 40; }