.arena-page [hidden]{display:none!important}.arena-page{container-type:inline-size;--arena-blue:#71badb;--arena-red:#e49980;color:#e7dcc2}.arena-heading{display:flex;align-items:center;gap:16px;margin:14px 0 22px}.arena-heading>div{min-width:0}.arena-heading h2{font-size:clamp(28px,8cqi,42px);margin:3px 0;line-height:1.06;overflow-wrap:anywhere}.arena-heading p{margin:0}.arena-heading .eyebrow{font-size:10px;letter-spacing:.16em;color:#c8ab72}.arena-heading button{margin-left:auto;flex-shrink:0}
.arena-lobby-hero{position:relative;isolation:isolate;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 25px;border:1px solid #c5a57466;border-radius:24px;overflow:hidden;background:linear-gradient(0deg,#111b1ff7 5%,#10202a70 80%),url('/mobile/building-barracks.webp') center 39%/cover;box-shadow:inset 0 0 65px #07121a99,0 20px 50px #0007}.arena-lobby-hero::before{content:'I';position:absolute;right:24px;top:5px;font-family:Georgia,serif;font-size:180px;line-height:1.2;color:#ddb76818}.arena-lobby-hero h3{font-size:34px;max-width:330px;line-height:1.1;margin:12px 0;color:#f0ddb0}.arena-lobby-hero p{font-size:14px;max-width:400px;color:#bdcacb;line-height:1.6}.arena-lobby-hero .primary{width:fit-content;min-width:190px}.arena-lobby-hero small{margin-top:12px;color:#99adb2;font-size:11px}
.arena-promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:20px 0 30px;border:1px solid #69767440;border-radius:15px;overflow:hidden;background:#778b8933}.arena-promises div{padding:18px 10px;text-align:center;background:#111a1b}.arena-promises b{display:block;color:#e0c189;font:26px Georgia,serif}.arena-promises span{font-size:10px;color:#b0beb9;line-height:1.5;display:block;margin-top:5px}
.arena-live-duel{display:flex;flex-direction:column;gap:8px;padding:20px;width:100%;text-align:left;background:linear-gradient(120deg,#14332e,#14222a);border:1px solid #5eac9855;border-radius:16px;margin:10px 0;color:#e4d4b1}.arena-live-duel span{font-size:12px;color:#b7cbc7}
.arena-scoreboard{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:20px 15px 17px;background:linear-gradient(120deg,#142d3e,#172027 50%,#352020);border:1px solid #88918b50;border-bottom:0;border-radius:22px 22px 0 0}.arena-fighter{min-width:0}.arena-fighter:last-child{text-align:right}.arena-fighter strong{display:block;font:700 clamp(14px,4.8cqi,22px)/1.1 Georgia,serif;overflow-wrap:anywhere;min-height:1.2em;color:#f3e6c5}.arena-fighter small{display:block;font-size:10px;color:#b4c1bd;line-height:1.5;margin:5px 0}.arena-fighter progress{display:block;width:100%;height:7px;border:0;border-radius:20px;accent-color:var(--arena-blue)}.arena-fighter:last-child progress{accent-color:var(--arena-red)}.arena-fighter progress::-webkit-progress-bar{background:#080f1488;border-radius:20px}.arena-fighter progress::-webkit-progress-value{background:linear-gradient(90deg,#38719c,#8bcee2);border-radius:20px;transition:width .45s}.arena-fighter:last-child progress::-webkit-progress-value{background:linear-gradient(90deg,#ac594b,#e5ac8e)}
.arena-fighter-meta{display:flex;justify-content:space-between;margin-top:6px;gap:5px;font-size:10px;color:#c3c7bf}.arena-fighter [id$="Bonus"]{min-height:13px;margin-top:3px;color:#ebc778;font-size:10px}.arena-timer{text-align:center;min-width:64px}.arena-timer span{font:28px/1.1 Georgia,serif;color:#efd9aa;font-variant-numeric:tabular-nums}.arena-timer small{display:block;max-width:70px;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#d0ba8e;margin-top:5px}
.arena-stage{position:relative;isolation:isolate;background:#17252d;border:1px solid #88918b50;border-top:0;overflow:hidden}.arena-canvas{display:block;width:100%;height:clamp(310px,95cqi,470px);touch-action:pan-y}.arena-stage-caption{position:absolute;top:13px;left:15px;right:15px;display:flex;justify-content:space-between;gap:10px;pointer-events:none;text-shadow:0 1px 8px #000}.arena-stage-caption span{font-size:9px;letter-spacing:.12em;color:#e4cd97;text-transform:uppercase}.arena-stage-caption #arenaRenderMode{color:#b8d8df}.arena-camera{display:flex;gap:6px;padding:10px;background:#15232c;border:1px solid #88918b50;border-top:0;border-radius:0 0 18px 18px;justify-content:center}.arena-camera button{background:transparent;border:1px solid #7f9ba64d;border-radius:7px;color:#bfcdd0;padding:8px 11px;font-size:11px;min-height:36px}.arena-camera button[aria-pressed="true"]{background:#55758230;color:#ead2a6;border-color:#c4a47480}
.arena-controls{margin:18px 0;padding:19px;border-radius:18px;border:1px solid #71898b40;background:linear-gradient(125deg,#192a30,#141b1d);box-shadow:inset 0 1px #cad6cb12}.arena-controls h3{font-size:23px;margin:0 0 7px}.arena-controls p{font-size:12px;line-height:1.6;color:#b6c0bd}.arena-control-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#c6ac7d;margin:14px 0 8px}.arena-control-label progress{width:80px;height:5px;accent-color:#cca461}.arena-stance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.arena-stance-grid button{border:1px solid #6e838c66;background:#0a151a;color:#cad1c9;border-radius:10px;padding:12px 3px;min-height:58px;font-size:10px}.arena-stance-grid button span{display:block;font:22px Georgia,serif;color:#cfb279;margin-bottom:5px}.arena-stance-grid button[aria-pressed="true"]{border-color:#e0bb75;background:#96764026;color:#f2d6a2}.arena-ability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:12px}.arena-ability-grid button{min-height:63px;padding:10px 4px;border:1px solid #66839480;border-radius:10px;background:linear-gradient(135deg,#284656,#17262f);color:#e3d5b4;font-size:12px}.arena-ability-grid button small{display:block;font-size:9px;color:#97b3b9;margin-top:5px}.arena-page button:disabled{opacity:.45;cursor:default}.arena-applause{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.arena-applause button{min-height:50px;font-size:12px;border:1px solid #9eaa9455;border-radius:10px;background:#253b3f;color:#d8ddc8;overflow-wrap:anywhere;padding:10px}.arena-applause button:last-child{background:#422e27}
.arena-seats{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin:12px 0}.arena-seats button{padding:2px;min-height:27px;border:1px solid #77919a44;border-radius:4px;background:#17262b;font-size:9px;color:#8db5bf}.arena-seats .occupied{background:#886646;color:#e5cc9d}.arena-seats .own-seat{border-color:#f7dd8c;background:#a68750;opacity:1}.arena-audience{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.arena-audience span{font-size:10px;padding:5px 8px;background:#63787522;border-radius:6px;color:#c0cdc8}.arena-seat-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.arena-seat-actions button{font-size:12px;min-height:40px}.arena-follow{display:flex;align-items:center;gap:8px;font-size:12px;color:#d1b887;margin:15px 0}.arena-follow input{width:17px;height:17px;accent-color:#c9a266}.arena-log{font-size:11px;line-height:1.8;padding-left:17px;color:#9fafae}.arena-result{border:1px solid #cca85488;border-radius:18px;background:radial-gradient(ellipse at top,#ba98482e,transparent),#171c18;text-align:center;margin:18px 0;padding:25px}.arena-result>span{font-size:42px;color:#edca77}.arena-result h3{font-size:27px;color:#eed198;margin:10px 0}.arena-result p{font-size:13px;line-height:1.6;color:#c2c1ac}.arena-feedback{font-size:12px;line-height:1.6;color:#c8bfa5;min-height:1.6em}.arena-no-live{font-size:13px;color:#a8b7b6;line-height:1.7;border-left:2px solid #b79454;padding-left:15px;margin:20px 0}.arena-lobby-note{font-size:11px;color:#829697;line-height:1.6;margin-top:22px}
@media(max-width:370px){.arena-scoreboard{gap:7px;padding:15px 10px}.arena-timer{min-width:51px}.arena-timer span{font-size:23px}.arena-fighter small{font-size:9px}.arena-controls{padding:14px}.arena-stance-grid button{font-size:9px}.arena-camera button{padding:7px 8px;font-size:10px}}

.arena-preparation{padding:22px;margin-bottom:18px;border:1px solid #b39a6460;border-radius:20px;background:linear-gradient(130deg,#27312d,#141b1d)}.arena-preparation h3{margin:5px 0;font:26px/1.2 Georgia,serif;overflow-wrap:anywhere}.arena-preparation p{font-size:13px;line-height:1.6;color:#c2c9be}.arena-preparation fieldset{border:0;padding:0;margin:14px 0;min-width:0}.arena-preparation legend{font-size:12px;color:#cdb789;margin-bottom:12px}.arena-class-options{display:grid;gap:8px}.arena-class-options label{display:flex;align-items:center;gap:12px;min-width:0;padding:14px;border:1px solid #7c929366;border-radius:12px;background:#0e1a1e;cursor:pointer}.arena-class-options label:has(input:checked){border-color:#e2be73;background:#4d452a66}.arena-class-options input{width:19px;height:19px;flex:0 0 19px;accent-color:#e0bc75}.arena-class-options span{min-width:0;overflow-wrap:anywhere}.arena-class-options b{display:block;font-size:15px;color:#edd7ac}.arena-class-options small{display:block;font-size:12px;line-height:1.5;color:#b6c3bd;margin-top:3px}.arena-preparation button{max-width:100%;white-space:normal;font-size:14px}.arena-practice{padding:12px;border-left:3px solid #e0be76;background:#94774022;color:#ecdcbb!important}.arena-result button{margin:5px;max-width:100%;white-space:normal;font-size:14px}.arena-class-options input:focus-visible{outline:2px solid #f2d39b;outline-offset:4px}

/* Arena 0.18.49: portrait framing and restrained, readable combat UI. */
.arena-stage{background:#272c2d;border-color:#8b785148}
.arena-canvas{height:auto;aspect-ratio:9/16;min-height:420px;max-height:660px}
.arena-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#10161445,transparent 18%,transparent 82%,#0b111750),radial-gradient(ellipse at center,transparent 50%,#090d112e);z-index:1}
.arena-stage-caption{z-index:2;top:15px;left:14px;right:14px}
.arena-stage-caption span{font-size:8px;letter-spacing:.13em;color:#d4c5a7}
.arena-scoreboard{background:linear-gradient(110deg,#242d30,#171c1e 52%,#302725);border-color:#8b785148;border-radius:14px 14px 0 0}
.arena-camera{background:#171c1d;border-color:#8b785148;border-radius:0 0 14px 14px;padding:10px}
.arena-camera button{min-height:44px;flex:1;border-color:#887b5a40;color:#c5c4b9}
.arena-camera button[aria-pressed="true"]{background:#82704a26;border-color:#b199625e;color:#e7d6ad}
.arena-controls{background:linear-gradient(135deg,#242b2c,#151b1c);border-color:#8b785138}
@media(prefers-reduced-motion:reduce){.arena-fighter progress::-webkit-progress-value{transition:none}}

/* Transparent thumb controls remain inside the combat viewport. */
.arena-stage .arena-canvas{height:clamp(360px,min(72svh,177.78cqi),660px);min-height:0;max-height:none;aspect-ratio:auto}
.arena-touch-controls{position:absolute;z-index:3;inset:auto 10px 10px;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 22px;border:0;border-radius:0;background:none;box-shadow:none;pointer-events:none}
.arena-touch-controls .arena-control-label{grid-column:1/-1;margin:0;padding:5px 9px;border-radius:8px;background:#0b1419a8;text-shadow:0 1px 3px #000;color:#f4dfb6;font-size:10px;gap:8px}
.arena-touch-controls .arena-control-label progress{width:48px;flex-shrink:0}
.arena-touch-controls .arena-stance-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.arena-touch-controls .arena-ability-grid{grid-template-columns:1fr;gap:6px;margin:0}
.arena-touch-controls button{pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;min-width:0;min-height:44px;border:1px solid #b6c8c570;background:#101c247d;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:inset 0 1px #ffffff10,0 2px 8px #0003;color:#fff2d4;text-shadow:0 1px 3px #000;border-radius:14px;padding:5px 3px;font-size:11px;line-height:1.2}
.arena-touch-controls .arena-stance-grid button{min-height:69px}
.arena-touch-controls .arena-stance-grid button span{font-size:19px;margin-bottom:2px;color:#f1d69e}
.arena-touch-controls button small{display:block;font-size:9px;line-height:1.2;margin-top:3px;color:#d1d9d5}
.arena-touch-controls button[aria-pressed="true"]{border-color:#f6d68b;background:#6c583777;box-shadow:inset 0 0 0 1px #f6d68b40}
.arena-touch-controls button:active:not(:disabled){background:#8d7347a8;transform:scale(.97)}
.arena-touch-controls button:focus-visible{outline:2px solid #ffe6a7;outline-offset:2px}
.arena-touch-controls button:disabled{opacity:.68;background:#12191f70;color:#d0d3cd}
.arena-touch-controls .arena-touch-feedback{grid-column:1/-1;font-size:10px;line-height:1.3;margin:0;padding:4px 7px;color:#fff0ca;background:#0b1419b3;border-radius:6px;min-height:0;text-align:center}
.arena-touch-feedback:empty{display:none}
.arena-touch-help{margin:12px 0;padding:12px 15px}
.arena-touch-help summary{font-size:12px;min-height:24px;cursor:pointer}
@media(max-width:350px){.arena-touch-controls{left:7px;right:7px;gap:6px 12px}.arena-touch-controls button{font-size:10px}.arena-touch-controls .arena-control-label{font-size:9px}}