.arena-world{width:min(100%,680px);margin:auto;padding:18px 16px calc(40px + env(safe-area-inset-bottom));color:#244646}.arena-header{display:flex;align-items:center;gap:14px;margin:5px 0 25px}.arena-header div{flex:1}.arena-header h1{font-size:26px;margin:4px 0}.arena-header small,.arena-eyebrow{color:#936d2c;font-weight:800;font-size:11px;letter-spacing:.12em}.arena-header button{width:44px;height:44px;padding:10px}.arena-world button{border:2px solid #b79a62;background:#fff4d3;color:#2f504b;border-radius:15px;padding:12px 16px;font-weight:800;min-height:44px;cursor:pointer}.arena-world button:disabled{opacity:.55;cursor:default}.arena-world svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2}.arena-crest{display:flex;justify-content:center;margin:16px auto -28px;position:relative;z-index:1;width:96px;height:96px;align-items:center;background:linear-gradient(135deg,#4c7b74,#163d48);color:#ffdf94;border:4px solid #d9b46a;border-radius:50%;box-shadow:0 6px 0 #685c43}.arena-crest svg{width:38px;height:38px}.arena-card{padding:42px 22px 24px;background:#fff8e8;border:3px solid #c4ac7b;border-radius:25px;box-shadow:0 7px 0 #867a5b33}.arena-card h2{font-size:24px;line-height:1.5;margin:8px 0 12px}.arena-card p,.arena-card li{font-size:14px;line-height:1.8}.arena-card ul{padding-left:22px}.arena-card details{font-size:13px;line-height:1.7;margin:16px 0}.arena-rules{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid #dbcba8;padding:18px 0;gap:12px}.arena-rules b{font-size:23px;display:block;color:#946223}.arena-rules span{font-size:12px;display:block;margin-top:5px}.arena-card>button{display:block;width:100%;margin-top:12px}.arena-world .arena-primary{color:#ffedc0;background:#2d625e;border-color:#193c3f}.arena-note{color:#6c7667;font-size:12px!important}.arena-balance{display:flex;flex-direction:column;gap:8px;background:#edf0df;padding:16px;border-radius:15px}.arena-confirm{background:#fff4d4;border:3px solid #ae9254;padding:20px;border-radius:18px;margin-top:18px}.arena-confirm button{margin:5px}.arena-history button{display:flex;flex-direction:column;gap:8px;width:100%;margin:12px 0;text-align:left}.arena-history small{font-size:11px}.arena-duel{padding:20px 12px}.arena-duel canvas{width:100%;height:auto;border-radius:16px;margin-top:16px}.arena-versus{display:flex;align-items:center;justify-content:space-around;gap:10px}.arena-versus b{font-size:15px;overflow-wrap:anywhere;max-width:40%}.arena-versus span{color:#a3722c;font-weight:900}.arena-world [role=status]{min-height:24px;line-height:1.6;text-align:center;font-size:14px}.arena-world [aria-busy=true]{cursor:progress}.arena-entry{width:100%;margin:12px 0;padding:15px;font-weight:800;border:2px solid #b79a62;border-radius:14px;background:#fff2ca;color:#365650}

.arena-header button{display:grid;place-items:center;flex:0 0 44px;padding:0}

.arena-crest svg:last-child{transform:scaleX(-1)}.arena-confirm-layer{position:fixed;inset:0;z-index:1500;background:#102a38bb;display:grid;place-items:center;padding:24px}.arena-confirm-layer .arena-confirm{width:min(100%,370px);max-height:80dvh;overflow-y:auto;box-shadow:0 12px 50px #0006;margin:0}

.arena-versus small,.arena-history span>small{display:block;color:#796330;font-size:11px;font-weight:700;margin-top:5px}

/* Battle presentation: large art stage and an automatic skill monitor. */
.arena-world:has(.arena-duel){padding:12px 12px calc(50px + env(safe-area-inset-bottom))}
.arena-world:has(.arena-duel) .arena-header{margin-bottom:14px}
.arena-duel{padding:12px;border-radius:22px;overflow:hidden}
.arena-duel>.arena-note{margin:6px 0;font-size:11px!important}
.arena-duel>.arena-eyebrow{margin:0 0 10px;font-size:10px}
.arena-duel canvas{display:block;margin:10px 0 0;border:2px solid #b5a06d;aspect-ratio:36/31;background:#eee1c0}
.arena-skill-tray{margin:9px 0;padding:8px;border-radius:12px;background:#e7e8d8;border:1px solid #c3bc9e}
.arena-skill-tray>p{font-size:10px;margin:0 0 5px;text-align:center;color:#52665e}
.arena-skill-row{display:grid;grid-template-columns:20px repeat(3,minmax(0,1fr));gap:5px;align-items:stretch;margin-top:5px}
.arena-skill-row>small{writing-mode:vertical-rl;align-self:center;font-size:10px;letter-spacing:3px;color:#617970}
.arena-skill{position:relative;display:grid;grid-template-columns:26px 1fr;column-gap:3px;align-items:center;padding:5px 3px;border:1px solid #b9b38f;border-radius:8px;background:#fff9e7;min-height:49px;transition:background .12s,border-color .12s}
.arena-skill>span{grid-row:1/3;display:grid;place-items:center;color:#517970}
.arena-skill svg{width:25px;height:25px}.arena-skill b{font-size:10px;line-height:1.3;overflow-wrap:anywhere}.arena-skill small{font-size:9px;color:#617267;line-height:1.4}
.arena-ultimate{border-color:#bf964d}.arena-ultimate>span{color:#a27425}
.arena-skill.is-cooling>span{opacity:.45}.arena-skill.is-casting{background:#fff0af;border:2px solid #be8b37;box-shadow:0 0 10px #e3b35580}.arena-skill.is-casting small{color:#956118;font-weight:900}
.arena-replay-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.arena-replay-actions button{font-size:12px;padding:9px}
.arena-duel>[role=status]{margin:6px 0;font-size:12px}
@media(max-width:360px){.arena-duel{padding:8px}.arena-skill-tray{padding:5px}.arena-skill{grid-template-columns:20px 1fr;gap:1px}.arena-skill svg{width:20px;height:20px}.arena-skill b{font-size:9px}.arena-header h1{font-size:22px}}

.arena-scene-banner{height:150px;margin-bottom:-26px;border:3px solid #c4ac7b;border-radius:22px 22px 0 0;background:linear-gradient(0deg,#294a491a,#294a4900),url('./assets/oath-arena-v1.webp') center 38%/cover;box-shadow:0 3px 20px #143d4122}.arena-scene-banner+.arena-card{position:relative;padding-top:22px}
/* Weekly honor and exchange keep the same cream, gold and teal game language. */
.arena-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:35px 0 12px}.arena-tabs button{padding:10px 4px;font-size:13px;position:relative}.arena-tabs button[aria-pressed=true],.arena-shop-filter button[aria-pressed=true]{background:#2d625e;color:#ffedc0;border-color:#234a44}.arena-tabs i{font-size:9px;color:#c88838;margin-left:4px}
.arena-medals{display:flex;align-items:center;gap:10px;background:linear-gradient(110deg,#294f4d,#46766c);border:2px solid #c5aa6f;border-radius:16px;padding:12px 16px;margin:12px 0;color:#ffedc0}.arena-medals>svg{width:43px;height:43px;stroke:none}.arena-medals span{font-size:11px}.arena-medals b{display:block;font-size:25px;line-height:1.2}.arena-medals>small{margin-left:auto;text-align:right;font-size:11px;line-height:1.5}.arena-league{padding:18px 16px}.arena-league h2{font-size:23px}.arena-lock{margin:12px 0;padding:15px;border:2px solid #c4ac7b;border-radius:16px;background:#fff1d3;font-size:13px}.arena-lock p{line-height:1.6}.arena-lock button{display:block;width:100%;margin-top:8px}.arena-lock small{display:block;margin-top:8px;line-height:1.5}
.arena-score{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;background:#e8ecdc;border-radius:13px}.arena-score span{font-size:11px}.arena-score b{display:block;font-size:23px;color:#355e56;margin-top:4px}.arena-score-rules,.arena-match-reward{font-size:12px!important;text-align:center;color:#87672e;padding:10px 0}
.arena-week-prize{background:#fff0b9;border:2px solid #d1ad56;border-radius:12px;padding:12px;margin:12px 0;display:flex;gap:8px;align-items:center}.arena-week-prize>div{flex:1}.arena-week-prize b{font-size:12px}.arena-week-prize small{display:block;font-size:12px;margin-top:6px}.arena-week-prize button{font-size:12px;padding:8px;flex-shrink:0}
.arena-reward-tiers{padding:0!important;list-style:none}.arena-reward-tiers li{display:flex;justify-content:space-between;border-bottom:1px solid #d9cba9;padding:5px 0}.arena-ranking{padding:0;list-style:none}.arena-ranking li{display:flex;align-items:center;gap:9px;padding:13px 0;border-bottom:1px solid #ded1b8;font-size:14px}.arena-ranking li>strong{font-size:16px;color:#a47a35;min-width:26px}.arena-ranking li>img{width:44px;height:52px;object-fit:contain;object-position:top}.arena-ranking li>div{flex:1;min-width:0;overflow-wrap:anywhere}.arena-ranking li>span{text-align:right;font-size:17px;font-weight:800}.arena-ranking small{display:block;font-size:10px;font-weight:400;margin-top:5px}.arena-ranking .is-me{background:#e5eddd;border-radius:10px;padding-inline:7px}.arena-empty{font-size:13px!important;line-height:1.6}
.arena-shop-filter{display:flex;gap:5px;flex-wrap:wrap;margin:16px 0}.arena-shop-filter button{padding:8px;font-size:11px;min-height:38px}.arena-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.arena-product{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;border:2px solid #b6c5b3;border-radius:14px;background:#fffdf5;padding:10px}.arena-product[data-quality=epic]{border-color:#b79bc3;background:#fbf6fa}.arena-product-art{height:92px;width:100%;display:grid;place-items:center;border-radius:10px;background:radial-gradient(#f0dca7,#f6eee000);margin-bottom:7px}.arena-product-art img{max-width:100%;width:86px;height:86px;object-fit:contain}.arena-product-art>svg{width:86px;height:86px;stroke:none}.arena-product-art .mall-wing-icon{position:relative;width:98px;height:80px;display:block}.arena-product-art .mall-wing-icon img{position:absolute;width:55px;height:80px;object-fit:contain;left:0}.arena-product-art .mall-wing-icon img+img{left:auto;right:0;transform:scaleX(-1)}.arena-product h3{font-size:14px;margin:5px 0}.arena-product>small{font-size:10px;line-height:1.5;color:#6f7663}.arena-product p{font-size:11px;line-height:1.55;margin:5px 0 8px;flex:1}.arena-product .arena-gear-stats{font-size:10px;flex:0;color:#4c7366}.arena-price{display:flex;gap:3px;align-items:center;font-size:13px;margin:7px 0;color:#997035}.arena-price svg{height:23px;width:23px;stroke:none}.arena-product button{width:100%;padding:8px;font-size:12px;margin-top:9px}
@media(max-width:360px){.arena-world{padding-inline:10px}.arena-league{padding:15px 10px}.arena-product{padding:8px}.arena-products{gap:7px}.arena-product h3{font-size:13px}.arena-tabs button{font-size:12px}.arena-week-prize{padding:8px}.arena-week-prize button{font-size:11px}}
