/* Arena, concept C. One night scene for every tab; the fight tab is rebuilt by arena-night.js, the others keep their content in new frames.
   Art: /v2/art/arena-night/. */
html.gv-v2 body #mainContent:has(#panelArena.active.ga-reborn){background:#07040c url('/v2/art/arena-night/scene.webp') center/cover no-repeat!important}
html.gv-v2 #panelArena.ga-reborn{background:none!important}
html.gv-v2 #panelArena.ga-reborn>.ga-world-scene{display:none!important}

/* Header */
html.gv-v2 #panelArena.ga-reborn .ga-header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title stats" "tabs tabs";align-items:center;gap:2px 20px;max-width:1540px;padding:12px 26px 0}
html.gv-v2 #panelArena.ga-reborn .ga-heading{grid-area:title;position:relative;min-width:0;background:none;padding:0}
html.gv-v2 #panelArena.ga-reborn .arena-dash-title{font:700 clamp(30px,3.4vw,42px)/1.05 var(--font-display,serif);color:#ffe2a0;text-shadow:0 3px 10px #000c}
html.gv-v2 #panelArena.ga-reborn .arena-dash-desc{margin:2px 0 0;font-size:15px;color:#f4e8d5;text-shadow:0 2px 6px #000d}
html.gv-v2 #panelArena.ga-reborn .ga-pause{display:none}
html.gv-v2 #panelArena.ga-reborn .arena-dash-stats-row{grid-area:stats;padding:0;background:none}
html.gv-v2 #panelArena.ga-reborn .arena-dash-stats-row:before,html.gv-v2 #panelArena.ga-reborn .arena-tabs:before{display:none}
html.gv-v2 #panelArena.ga-reborn .arena-tabs{grid-area:tabs;justify-content:center;gap:clamp(6px,4vw,60px);padding:2px 0 0}
html.gv-v2 #panelArena.ga-reborn :is(.arena-tab,.arena-tab.active){flex-direction:row;gap:8px;min-width:0;min-height:44px;padding:4px 16px;background:linear-gradient(90deg,transparent,#8a6a3f,transparent) center bottom/100% 1px no-repeat!important;font:700 19px/1.1 var(--font-display,serif);color:#dccbb1;text-shadow:0 2px 6px #000e}
html.gv-v2 #panelArena.ga-reborn .arena-tab.active{background:linear-gradient(90deg,transparent,#ffcf70,transparent) center bottom/100% 2px no-repeat!important;color:#ffe2a0;text-shadow:0 0 12px #ffc14d88,0 2px 6px #000e}
html.gv-v2 #panelArena.ga-reborn .arena-tab.active:after{display:none}
html.gv-v2 #panelArena.ga-reborn .arena-tab .ga-tab-icon{width:26px;height:26px}

/* Fight tab */
html.gv-v2 #panelArena.an-on{display:flex;flex-direction:column;overflow:hidden!important}
html.gv-v2 #panelArena.an-on>.arena-top-row{flex:none}
html.gv-v2 #panelArena.an-on .ga-content{flex:1 1 auto;min-height:0;width:100%;max-width:1540px;box-sizing:border-box;padding:0 26px 8px!important;display:flex;flex-direction:column}
html.gv-v2 #panelArena.an-on .ga-content>:not(#anView){display:none!important}
#anView{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;color:#f4e8d5;container-type:inline-size;container-name:an}
.an-duel{position:relative;flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr)}
.an-side{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,.8fr);align-items:center;min-width:0;min-height:0}
.an-me{grid-template-columns:minmax(170px,.7fr) minmax(0,1fr)}
.an-me .an-figure{grid-column:2;grid-row:1}
.an-me .an-who{grid-column:1;grid-row:1;text-align:left}
.an-foe .an-who{text-align:left}
.an-figure{display:block;justify-self:center;align-self:end;aspect-ratio:320/390;width:auto;max-width:100%;height:100%;min-height:0;max-height:100%;filter:drop-shadow(0 18px 22px #000b);overflow:hidden}
.an-figure.flip{transform:scaleX(-1)}
.an-who{display:flex;flex-direction:column;gap:2px;font-size:15px;text-shadow:0 2px 8px #000,0 0 3px #000}
.an-who b{font:700 clamp(22px,2.3cqw,32px)/1.1 var(--font-display,serif);color:#ffe2a0;overflow-wrap:anywhere}
.an-who em,.an-minfo em{font:700 16px Georgia,serif;font-style:italic}
.t-weak em{color:#8fe6a5}.t-even em{color:#8cc7ff}.t-strong em{color:#ff9f92}
.an-rws{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:3px;font-weight:700}
.an-rw{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.an-rw img{width:1.25em;height:1.25em;object-fit:contain}
.an-foe q{position:absolute;left:6%;top:4%;z-index:2;max-width:70%;padding:6px 14px;border:1px solid #8a6a3f;border-radius:14px;background:#0b0712d9;font:italic 14px Georgia,serif;quotes:none}
.an-enter{animation:anIn .34s ease-out both}
@keyframes anIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.an-mid{position:relative;display:grid;place-items:center}
.an-seam{position:absolute;top:0;bottom:0;left:50%;width:150px;margin-left:-75px;background:url('/v2/art/arena-night/seam.webp?v=2') center/100% 100% no-repeat;filter:brightness(1.3);animation:anSeam 3.4s ease-in-out infinite}
@keyframes anSeam{0%,100%{opacity:.8}50%{opacity:1}}
.an-mid strong{position:relative;font:700 clamp(34px,4.4cqw,58px) var(--font-display,serif);color:#ffe2a0;text-shadow:0 0 22px #ff5a3c88,0 3px 10px #000}
#anView{position:relative}
.an-slot[data-slot=pets]{position:absolute;left:0;bottom:6px;z-index:3;max-width:44%}
/* Closed: one quiet line with the two companions. Open: a stone window over the duel. */
html.gv-v2 #panelArena .an-slot .gap-team{margin:0;padding:0;border:0;border-image:none;background:none;box-shadow:none}
.an-slot .gap-summary{display:flex;align-items:center;flex-wrap:nowrap;gap:10px;min-height:0;padding:4px 0;color:#ffe2a0;text-shadow:0 2px 6px #000d}
.an-slot .gap-title{font-size:17px;white-space:nowrap}
.an-slot .gap-mini{margin-left:0;order:-1}.an-slot .gap-mini-pet{width:40px;height:40px}
.an-slot .gap-edit{white-space:nowrap;font-size:13px}
#anView.an-pets-open .an-duel,#anView.an-pets-open .an-side{position:static}
#anView.an-pets-open .an-slot[data-slot=pets]{position:absolute;inset:0;max-width:none;z-index:30;display:grid;place-items:center;padding:12px;background:#07040bd9;animation:anFade .18s ease-out}
@keyframes anFade{from{opacity:0}to{opacity:1}}
html.gv-v2 #panelArena #anView.an-pets-open .an-slot .gap-team{width:min(680px,100%);max-height:100%;overflow:auto;padding:6px 10px;border:14px solid transparent;border-image:url('/v2/art/council/dialog.webp') 150 fill / 14px / 0 stretch;background:#211728;box-shadow:0 20px 60px #000c}
#anView.an-pets-open .gap-summary{padding:8px 10px;border-bottom:1px solid #8a6a3f66}
#anView.an-pets-open .gap-title{font-size:22px}
#anView.an-pets-open .gap-mini{display:none}
#anView.an-pets-open .gap-edit{margin-left:auto;font-size:14px}

.an-acts{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:2px 0}
.an-shout{justify-self:start;min-width:0}
.an-shout .gvas-mychip{background:none!important;border:0!important;box-shadow:none!important;color:#f4e8d5}
.an-go{display:flex;flex-direction:column;align-items:center}
.an-fight{min-width:340px;max-width:100%;min-height:68px;padding:6px 44px;border:0;background:url('/v2/art/create-screen/begin-button.webp') center/100% 100% no-repeat;color:#2d1804;font:700 30px/1 var(--font-display,serif);cursor:pointer;transition:filter .18s,transform .12s}
.an-fight:hover:not(:disabled){filter:brightness(1.12) drop-shadow(0 0 14px #ffc14daa)}
.an-fight:active:not(:disabled){transform:scale(.98)}
.an-fight:disabled{filter:saturate(.35) brightness(.8);cursor:default}
.an-link{padding:3px 8px;border:0;background:none;color:#ead8bd;font:600 14px var(--font-body,sans-serif);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.an-clock{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;text-shadow:0 2px 6px #000d}
.an-clock span{font-size:13px;color:#d9c9b4}
.an-clock b{font:700 24px/1.1 var(--font-display,serif);color:#ffd98a;font-variant-numeric:tabular-nums}
.an-clock b.ready{color:#8fe6a5}

.an-medals{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.an-medal{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-width:0;padding:4px 8px;cursor:pointer;opacity:.7;transition:opacity .2s}
.an-medal:hover,.an-medal.on{opacity:1}
.an-medal:focus-visible{outline:2px solid #ffe2a0;outline-offset:2px}
.an-ring{position:relative;flex:none;width:88px;height:94px;display:block}
.an-ring>img{position:absolute;left:7%;top:6%;width:86%;height:81%;object-fit:cover;border-radius:50%}
.an-ring:after{content:"";position:absolute;inset:0;background:url('/v2/art/arena-night/medal.webp') center/100% 100% no-repeat}
.an-medal.on .an-ring{filter:drop-shadow(0 0 4px #ffe9a8) drop-shadow(0 0 16px #ffc14dcc)}
.an-medal.prem .an-ring{filter:drop-shadow(0 0 10px #ffd98a99)}
.an-medal.on.prem .an-ring{filter:drop-shadow(0 0 4px #ffe9a8) drop-shadow(0 0 18px #ffc14d)}
.an-cdx{position:absolute;right:-4px;top:-2px;z-index:2;display:flex;align-items:center;font:700 12px var(--font-body,sans-serif);font-style:normal;color:#fff}
.an-cdx img{width:20px;height:20px}
.an-minfo{display:flex;flex-direction:column;min-width:0;font-size:13.5px;line-height:1.3;text-shadow:0 2px 6px #000d}
.an-minfo b{font:700 19px/1.15 var(--font-display,serif);color:#ffe2a0;overflow-wrap:anywhere}
.an-minfo em{font-size:14px}
html.an-quick #modalOverlay{visibility:hidden!important}

@media(max-height:820px) and (min-width:761px){
 html.gv-v2 #panelArena.ga-reborn .arena-dash-desc{display:none}
 html.gv-v2 #panelArena.ga-reborn :is(.arena-tab,.arena-tab.active){min-height:34px;font-size:16px}
 html.gv-v2 #panelArena.ga-reborn .arena-dash-title{font-size:28px}
 .an-fight{min-height:52px;min-width:260px;font-size:23px}
 .an-ring{width:62px;height:66px}
 .an-minfo{font-size:12px;line-height:1.2}.an-minfo b{font-size:15px}.an-minfo em{font-size:12px}
 .an-who{font-size:13px}
}
@container an (max-width:760px){
 .an-duel{flex:none;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);height:auto;align-items:start}
 .an-mid{align-self:stretch}
 .an-side,.an-me{display:flex;flex-direction:column}
 .an-side .an-figure{flex:none;height:140px;width:auto;max-width:100%;align-self:center}
 .an-me .an-slot[data-slot=pets]{order:9;max-width:100%}
 .an-who{text-align:center!important;align-items:center;font-size:12px}
 .an-who b{font-size:17px}.an-who em{font-size:13px}
 .an-slot[data-slot=pets]{position:static}
 .an-slot .gap-summary{justify-content:center;flex-wrap:wrap;gap:4px 8px}.an-slot .gap-edit{flex-basis:auto}.an-slot .gap-title{font-size:15px}
 #anView.an-pets-open .an-slot[data-slot=pets]{place-items:start center;padding:8px 0}
 .an-foe q{display:none}
 .an-mid strong{font-size:26px}
 .an-seam{width:70px;margin-left:-35px}
 .an-acts{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"go go" "shout clock"}
 .an-go{grid-area:go}.an-shout{grid-area:shout}.an-clock{grid-area:clock}
 .an-fight{min-width:240px;min-height:58px;font-size:25px}
 .an-medals{grid-template-columns:minmax(0,1fr);gap:4px}
 .an-ring{width:68px;height:72px}
}
@media(max-width:760px){
 html.gv-v2 body #mainContent:has(#panelArena.active.ga-reborn){background-image:url('/v2/art/arena-night/scene-phone.webp')!important}
 html.gv-v2 #panelArena.an-on{overflow:auto!important;display:block}
 html.gv-v2 #panelArena.ga-reborn .ga-header{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "stats" "tabs";padding:8px 12px 0}
 html.gv-v2 #panelArena.ga-reborn :is(.arena-tab,.arena-tab.active){flex:1;padding:4px 2px;font-size:14px;min-height:42px;flex-direction:column;gap:2px}
 html.gv-v2 #panelArena.an-on .ga-content{padding:0 8px 12px!important}
}

/* History, ranks, shop: the same content on stone */
html.gv-v2 #panelArena.ga-reborn:is([data-arena-view=history],[data-arena-view=ranks],[data-arena-view=shop]) .ga-content{padding-top:10px}
html.gv-v2 #panelArena.ga-reborn :is(.ga-rank-gallery,.ga-ranking-board,.ga-merchant,.ga-stock,.arena-history-col){position:relative;isolation:isolate;box-sizing:border-box;padding:34px 54px 40px;background:none!important;border:0!important;border-image:none!important;box-shadow:none!important}
html.gv-v2 #panelArena.ga-reborn :is(.ga-rank-gallery,.ga-ranking-board,.ga-merchant,.ga-stock,.arena-history-col):before{content:"";display:block;position:absolute;inset:0;z-index:-1;background:none;border-style:solid;border-color:transparent;border-width:54px 42px 40px;border-image:url('/v2/art/arena-night/panel.webp') 90 70 64 fill / 54px 42px 40px / 0 stretch;filter:drop-shadow(0 12px 22px #0009)}
html.gv-v2 #panelArena.ga-reborn :is(.ga-rank-gallery,.ga-ranking-board,.ga-merchant,.ga-stock,.arena-history-col):after{display:none!important}
html.gv-v2 #panelArena.ga-reborn .ga-history-switch{justify-content:center}
html.gv-v2 #panelArena.ga-reborn .arena-lb-row{background:none!important;border-width:0 0 1px!important;border-style:solid!important;border-color:#8a6a3f55!important;border-image:none!important;border-radius:0}
@media(max-width:760px){html.gv-v2 #panelArena.ga-reborn :is(.ga-rank-gallery,.ga-ranking-board,.ga-merchant,.ga-stock,.arena-history-col){padding:26px 28px 30px}
 html.gv-v2 #panelArena.ga-reborn :is(.ga-rank-gallery,.ga-ranking-board,.ga-merchant,.ga-stock,.arena-history-col):before{border-width:32px 26px 26px;border-image-width:32px 26px 26px}}

/* Inspecting a rival */
html.gv-v2 .gvas-modal.ga-inspection{background:none!important;border:0!important;border-image:none!important;box-shadow:none!important}
@media(prefers-reduced-motion:reduce){.an-enter,.an-seam{animation:none}}

/* Equipment under each fighter */
#anView .an-gear{display:grid;grid-template-columns:repeat(4,36px);gap:4px;margin-top:8px}
#anView .an-gear .gvl-gear-slot{position:relative;width:36px;height:36px;box-sizing:border-box;border-radius:6px;background:#0b0712cc;border:1px solid #6b5536}
#anView .an-gear .gvl-gear-slot img{width:100%;height:100%;object-fit:contain}
#anView .an-gear .gvl-gear-slot i{position:absolute;right:1px;bottom:0;font:700 9px/1 var(--font-body,sans-serif);font-style:normal;color:#fff;text-shadow:0 1px 2px #000}
#anView .an-gear .r-uncommon{border-color:#5fbf6f}#anView .an-gear .r-rare{border-color:#5aa8ff}#anView .an-gear .r-epic{border-color:#b26bff}#anView .an-gear .r-legendary{border-color:#ffb347}#anView .an-gear .r-mythic{border-color:#ff5a66}
@container an (max-width:760px){#anView .an-gear{grid-template-columns:repeat(4,26px);gap:3px;justify-content:center}#anView .an-gear .gvl-gear-slot{width:26px;height:26px}}
@media(max-height:820px) and (min-width:761px){#anView .an-gear{grid-template-columns:repeat(4,26px);gap:3px;margin-top:4px}#anView .an-gear .gvl-gear-slot{width:26px;height:26px}}

/* Quartermaster: a calm column instead of a word per line */
html.gv-v2 #panelArena.ga-reborn .ga-shop-layout{display:grid;grid-template-columns:minmax(220px,270px) minmax(0,1fr);gap:22px;align-items:start}
html.gv-v2 #panelArena.ga-reborn .ga-merchant{flex-direction:column;align-items:center;gap:14px;text-align:center}
html.gv-v2 #panelArena.ga-reborn .ga-merchant-portrait{width:150px}
html.gv-v2 #panelArena.ga-reborn .ga-merchant-quote{max-width:none;margin:0;font:italic 17px/1.4 Georgia,serif;text-transform:none;letter-spacing:0;color:#f4e8d5}
html.gv-v2 #panelArena.ga-reborn .ga-merchant .ashop-balance{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:8px 0 0;border-top:1px solid #8a6a3f77;background:none;border-radius:0}
html.gv-v2 #panelArena.ga-reborn .ga-merchant .ashop-balance-val{font:700 28px var(--font-display,serif);color:#ffe2a0}
html.gv-v2 #panelArena.ga-reborn .ga-merchant .ashop-balance-label{font-size:14px;color:#d9c9b4}
@media(max-width:760px){html.gv-v2 #panelArena.ga-reborn .ga-shop-layout{grid-template-columns:minmax(0,1fr)}
 html.gv-v2 #panelArena.ga-reborn .ga-merchant{flex-direction:row;text-align:left}
 html.gv-v2 #panelArena.ga-reborn .ga-merchant-portrait{width:90px}}

/* Inspect sits under the rival's gear, away from Fight (Sonsuu: easy misclick, 11.11.2026), as its own clear button */
#anView .an-inspect{position:relative;align-self:flex-start;box-sizing:border-box;min-width:190px;min-height:46px;margin-top:22px;padding:8px 26px;border:0;border-radius:0;background:url('/v2/art/council/action-walnut.webp') center/100% 100% no-repeat;color:#ffe4b8;font:700 15px/1 var(--font-display,Georgia,serif);letter-spacing:.03em;text-decoration:none;text-shadow:0 1px 2px #000;filter:drop-shadow(0 4px 10px #000a);transition:filter .18s,transform .12s}
#anView .an-inspect:before{content:"";position:absolute;left:8%;right:8%;top:-12px;height:1px;background:linear-gradient(90deg,transparent,#c9a05a,transparent)}
#anView .an-inspect:hover{color:#fff1d2;filter:brightness(1.12) drop-shadow(0 0 10px #ffc14d88)}
#anView .an-inspect:active{transform:scale(.98)}
#anView .an-inspect:focus-visible{outline:2px solid #ffe2a0;outline-offset:3px}
@media(max-height:820px) and (min-width:761px){#anView .an-inspect{min-height:38px;min-width:160px;margin-top:16px;font-size:13px}}
@container an (max-width:760px){#anView .an-inspect{align-self:center;min-width:0;min-height:34px;margin:14px 0 26px;padding:6px 18px;font-size:11px;white-space:nowrap}#anView .an-inspect:before{top:-9px}}