#arena { position:absolute; inset:0; z-index:10; overflow:auto; color:#eee5cf; background:linear-gradient(90deg,rgba(7,17,20,.48),rgba(8,17,20,.2) 52%,rgba(8,16,19,.7)),linear-gradient(0deg,#0a1418 0%,transparent 65%),url('./menu_bg.webp') center/cover fixed; font:16px/1.45 var(--game-font); touch-action:pan-y; user-select:text; -webkit-user-select:text; }
#arena * { box-sizing:border-box; }
#arena button,#arena input { font:inherit; }
#arena button { cursor:pointer; color:inherit; }
#arena button:focus-visible,#arena input:focus-visible { outline:2px solid #f8dea0; outline-offset:5px; }
#arena button:disabled { opacity:.55; cursor:wait; }
#arena button { transition:filter .16s,background .16s; }
#arena button:hover { filter:brightness(1.18); }
#arena p,#arena h1,#arena h2,#arena h3 { margin:0; }
#arena .arena-shell { max-width:1600px; margin:auto; padding:24px 5% 18px; min-height:100%; display:flex; flex-direction:column; }
#arena .arena-header { display:flex; align-items:center; gap:28px; min-height:68px; margin-bottom:30px; }
#arena .arena-logo { width:210px; height:70px; object-fit:contain; }
#arena .arena-preview { display:flex; gap:9px; align-items:center; border-left:1px solid #b99b6055; padding-left:26px; font:10px/1.4 var(--game-font); letter-spacing:2px; color:#c2b393; }
#arena .arena-preview i,#arena .arena-dot { display:inline-block; width:6px; height:6px; background:#c6ab68; border-radius:50%; box-shadow:0 0 8px #d2a85955; }
#arena .arena-back { margin-left:auto; padding:10px 18px; background:#192527a6; border:1px solid #b7a26c66; font-size:14px; }
#arena .arena-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.86fr); gap:8%; flex:1; align-items:center; }
#arena .arena-story { max-width:660px; padding:12px 0 20px; }
#arena .arena-eyebrow { font:10px/1.6 var(--game-font); letter-spacing:2.6px; color:#ceba87; }
#arena h1 { font-size:clamp(56px,6.4vw,96px); line-height:.98; letter-spacing:-3px; margin:22px 0!important; font-weight:normal; text-shadow:0 3px 24px #0008; }
#arena h1 em { font-style:normal; color:#e6c77f; }
#arena .arena-intro { font-size:20px; line-height:1.55; color:#e0d6be; text-shadow:0 2px 10px #000; }
#arena .arena-profile { margin-top:35px; padding:23px 25px 19px; border:1px solid #b6a16b66; background:linear-gradient(125deg,#202e2dec,#121d21ef); box-shadow:inset 0 0 0 4px #0b14184d,0 10px 40px #0003; }
#arena .arena-identity { display:flex; align-items:center; gap:18px; }
#arena .arena-identity svg { width:62px; height:74px; flex-shrink:0; filter:drop-shadow(0 3px 5px #0008); }
#arena .arena-identity h2 { font-size:23px; font-weight:normal; margin:4px 0!important; overflow-wrap:anywhere; }
#arena .arena-identity p:last-child { font-size:13px; color:#baa887; }
#arena .arena-stats { display:grid; grid-template-columns:1fr 1.2fr 1fr; border-top:1px solid #a88e4d33; margin-top:18px; padding-top:16px; gap:10px; }
#arena .arena-stats>div+div { border-left:1px solid #a88e4d33; padding-left:18px; }
#arena .arena-stats span { display:block; font:9px var(--game-font); letter-spacing:1.3px; color:#b6ad96; }
#arena .arena-stats strong { display:block; margin-top:6px; font-size:23px; font-weight:normal; color:#edd9a6; }
#arena .arena-stats small { font-size:13px; color:#a6a899; }
#arena .arena-xp-label { display:flex; justify-content:space-between; margin:17px 0 7px; color:#c2baa7; font:11px var(--game-font); }
#arena .arena-xp { height:6px; background:#071213; border:1px solid #a88e4d44; }
#arena .arena-profile-note { margin-top:10px; font-size:11px; color:#b6b1a1; }
#arena .arena-progression { margin-top:26px; }
#arena .arena-section-label { display:flex; justify-content:space-between; font:9px var(--game-font); letter-spacing:1.8px; color:#caba94; }
#arena .arena-section-label span:last-child { color:#9eaa9f; letter-spacing:1px; }
#arena .arena-badges { display:flex; justify-content:space-between; gap:8px; margin:14px 0 10px; position:relative; }
#arena .arena-badges:before { content:''; position:absolute; top:29px; left:20px; right:20px; border-top:1px solid #ae996446; }
#arena .arena-milestone { position:relative; text-align:center; width:58px; color:#bcb9aa; }
#arena .arena-milestone svg { display:block; width:46px; height:55px; margin:0 auto 6px; }
#arena .arena-milestone span { font-size:10px; }
#arena .arena-milestone.current { color:#e8c988; }
#arena .arena-milestone.current:after { content:'◆'; display:block; font-size:8px; }
#arena .arena-progression>p { color:#a9b0a4; font-size:12px; }
#arena .arena-panel { position:relative; padding:32px 34px 22px; background:linear-gradient(#233032f5,#101c20fa); border:2px solid #9a8b5e; outline:1px solid #9a8b5e55; outline-offset:5px; box-shadow:inset 0 0 0 5px #0f1b1d,inset 0 0 0 6px #a1925f55,0 20px 70px #0008; text-align:center; }
#arena .arena-panel:before,#arena .arena-panel:after { content:'◆'; position:absolute; left:calc(50% - 5px); color:#c9b57b; font-size:12px; top:-11px; }
#arena .arena-panel:after { top:auto; bottom:-11px; }
#arena .arena-panel-art>h2 { font-size:37px; font-weight:normal; color:#f4dfaa; margin:5px 0 12px!important; }
#arena .arena-rule { display:flex; gap:12px; align-items:center; color:#a79560; font-size:8px; margin:0 18px; }
#arena .arena-rule:before,#arena .arena-rule:after { content:''; flex:1; height:1px; background:#ac986144; }
#arena .arena-houses { display:flex; justify-content:center; align-items:center; gap:28px; margin:12px 0 15px; }
#arena .arena-houses>div { width:130px; display:flex; flex-direction:column; align-items:center; font-size:18px; color:#b5d0e7; }
#arena .arena-houses>div:last-child { color:#e3b5a8; }
#arena .arena-houses img { width:108px; height:112px; object-fit:contain; filter:drop-shadow(0 0 20px #75b4d425); }
#arena .arena-houses>div:last-child img { filter:drop-shadow(0 0 20px #db6c5425); }
#arena .arena-versus { color:#b19c6c; font-size:16px; font-style:italic; }
#arena .arena-house-note { color:#c0b9a5; font-size:12px; }
#arena .arena-steps { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:25px 0; padding:15px 0; border-block:1px solid #ac986133; font:10px var(--game-font); color:#a2a798; white-space:nowrap; }
#arena .arena-steps i { flex:1; border-top:1px solid #ac986144; }
#arena .arena-steps .active { color:#f0d18f; }
#arena .arena-steps .done { color:#a4c7ae; }
#arena .arena-flow { min-height:207px; }
#arena .arena-flow-title { display:flex; align-items:center; text-align:left; gap:14px; margin:4px 0 24px; }
#arena .arena-mini-icon { display:grid; place-items:center; width:43px; height:43px; flex-shrink:0; border:1px solid #c0a16777; color:#e8cd8f; font-size:27px; background:#a58a4a13; }
#arena h3 { font-size:20px; font-weight:normal; }
#arena .arena-flow-title p { font-size:12px; color:#bcb8a9; margin-top:5px; }
#arena .arena-primary,#arena .arena-secondary { display:block; width:100%; min-height:54px; padding:12px; border:3px double #e4c487; background:linear-gradient(#e5c88d,#b99350); box-shadow:0 0 0 2px #756139,inset 0 0 0 1px #6b552b,0 3px 9px #0006; color:#302413; font-size:21px; text-shadow:0 1px #f6e5b377; }
#arena .arena-primary>span { float:right; padding-right:8px; }
#arena .arena-secondary { background:linear-gradient(#404b43,#29342e); color:#efe2bd; border-color:#a3a17f; text-shadow:none; }
#arena .arena-small { font-size:11px; color:#b1b6a7; margin:13px 0!important; line-height:1.6; }
#arena .arena-text-button { border:0; background:none; font-size:12px; color:#d5c08d; text-decoration:underline; text-underline-offset:4px; padding:6px; min-height:34px; }
#arena .arena-notice { color:#ecd195; font:12px/1.5 var(--game-font); text-align:left; }
#arena .arena-notice:not(:empty) { margin:10px 0 16px; }
#arena .arena-panel-footer { border-top:1px solid #ac986133; padding-top:16px; color:#aaa995; font:10px var(--game-font); }
#arena .arena-panel-footer .arena-dot { margin-right:6px; width:5px; height:5px; }
#arena .arena-wallet { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 12px; margin-bottom:18px; border:1px solid #8eaa8744; background:#8eaa8710; font:11px var(--game-font); color:#b9ceb7; }
#arena .arena-wallet i { display:inline-block; width:5px; height:5px; background:#9ac39b; border-radius:50%; margin-right:7px; }
#arena .arena-wallet button { border:0; background:none; font:11px var(--game-font); color:#c1b89c; padding:5px; }
#arena form { text-align:left; }
#arena form label { font-size:22px; }
#arena .arena-name-hint { font:11px/1.5 var(--game-font); color:#b7b9a8; margin:7px 0; }
#arena input { display:block; width:100%; padding:12px 14px; background:#091719; border:1px solid #bca16b88; color:#f2e3ba; font-size:19px; border-radius:0; margin:12px 0 18px; user-select:text; -webkit-user-select:text; touch-action:manipulation; }
#arena input::placeholder { color:#8c998f; }
#arena .arena-modes { display:flex; gap:10px; margin-bottom:15px; }
#arena .arena-modes button { flex:1; padding:13px 6px; background:#0a181a; border:1px solid #6c756759; }
#arena .arena-modes button[aria-pressed=true] { border-color:#cfb276; background:linear-gradient(#5a513733,#b3934c20); box-shadow:inset 0 0 0 3px #a58a4a10; }
#arena .arena-modes strong { display:block; color:#e5cf9b; font-size:20px; font-weight:normal; }
#arena .arena-modes span { display:block; font-size:11px; color:#b7b8a7; margin-top:5px; }
#arena .arena-match-info { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; font:10px var(--game-font); color:#c6bca0; margin-bottom:22px; }
#arena .arena-search { padding:0 0 17px; }
#arena .arena-search>p,#arena .arena-match>p { font-size:12px; color:#b7bfaf; margin-top:5px; }
#arena .arena-search>strong { display:block; font-size:26px; color:#e7cd8d; font-weight:normal; margin-top:7px; font-variant-numeric:tabular-nums; }
#arena .arena-spinner { width:32px; height:32px; margin:0 auto 12px; border:1px solid #ae996444; border-top:2px solid #d5b475; border-right:2px solid #d5b475; border-radius:50%; animation:arena-spin 1.8s linear infinite; }
#arena .arena-match { padding:8px 0 17px; }
#arena .arena-match h3 { margin-top:9px; color:#efdba6; font-size:26px; }
#arena .arena-footer { display:flex; justify-content:space-between; gap:20px; padding-top:30px; color:#a5aa9d; font:10px var(--game-font); }
#arena .arena-footer span:last-child { letter-spacing:2px; font-size:9px; }
@keyframes arena-spin { to { transform:rotate(360deg); } }
@media(min-width:1200px) and (min-height:900px) { #arena .arena-shell { padding-top:32px; padding-bottom:28px; } #arena .arena-panel { padding-block:40px 28px; } #arena .arena-houses img { width:140px; height:150px; } }
@media(max-width:1050px) { #arena .arena-shell { padding:15px 4% 15px; } #arena .arena-layout { gap:5%; grid-template-columns:minmax(0,1fr) minmax(340px,.95fr); } #arena .arena-panel { padding:24px; } #arena .arena-profile { padding:18px; } #arena .arena-identity h2 { font-size:20px; } #arena .arena-stats strong { font-size:20px; } #arena .arena-stats>div+div { padding-left:10px; } #arena .arena-stats span { font-size:8px; } #arena .arena-section-label span:last-child { display:none; } }

#arena .arena-mobile-nav,#arena .arena-mobile-summary { display:none; }
#arena .arena-panel-art,#arena .arena-panel-controls { min-width:0; }
@media(max-width:700px) { #arena[data-layout="desktop"] .arena-layout { grid-template-columns:1fr; gap:35px; } }
@media(prefers-reduced-motion:reduce) { #arena .arena-spinner { animation:none; } #arena button { transition:none; } }

/* Mobile is a separate composition: arena first, progression on its own screen. */
#arena[data-layout="mobile"] { background-position:35% center; }
#arena[data-layout="mobile"] .arena-shell { max-width:1100px; padding:8px max(18px,env(safe-area-inset-right)) 14px max(18px,env(safe-area-inset-left)); }
#arena[data-layout="mobile"] .arena-header { min-height:44px; gap:16px; margin-bottom:12px; }
#arena[data-layout="mobile"] .arena-logo { width:140px; height:44px; }
#arena[data-layout="mobile"] .arena-preview { display:none; }
#arena[data-layout="mobile"] .arena-mobile-nav { display:flex; margin:auto; gap:4px; border:1px solid #bda06866; background:#0b191dcc; padding:2px; }
#arena[data-layout="mobile"] .arena-mobile-nav button { border:0; background:none; min-width:88px; min-height:44px; padding:8px 14px; font-size:15px; color:#c5c1ad; }
#arena[data-layout="mobile"] .arena-mobile-nav button[aria-pressed="true"] { background:linear-gradient(#8d774344,#8d774322); box-shadow:inset 0 -2px #d6b577; color:#f5dfa7; }
#arena[data-layout="mobile"] .arena-back { margin-left:0; font-size:13px; min-height:44px; padding:8px 12px; }
#arena[data-layout="mobile"] .arena-layout { display:block; flex:none; }
#arena[data-layout="mobile"] .arena-story,#arena[data-layout="mobile"] .arena-footer { display:none; }
#arena[data-layout="mobile"] .arena-panel { display:grid; grid-template-columns:minmax(180px,.75fr) minmax(0,1.25fr); gap:24px; padding:16px 22px; min-height:285px; }
#arena[data-layout="mobile"] .arena-panel-art { align-self:center; }
#arena[data-layout="mobile"] .arena-panel-art>.arena-eyebrow { font-size:9px; letter-spacing:2px; }
#arena[data-layout="mobile"] .arena-panel-art>h2 { font-size:30px; font-weight:normal; color:#f4dfaa; margin:5px 0 12px!important; }
#arena[data-layout="mobile"] .arena-rule { display:none; }
#arena[data-layout="mobile"] .arena-houses { gap:12px; margin:10px 0; }
#arena[data-layout="mobile"] .arena-houses>div { width:auto; font-size:13px; }
#arena[data-layout="mobile"] .arena-houses img { width:63px; height:68px; }
#arena[data-layout="mobile"] .arena-house-note { font-size:11px; max-width:230px; margin:auto; }
#arena[data-layout="mobile"] .arena-mobile-summary { display:flex; align-items:center; justify-content:center; gap:10px; border-top:1px solid #bda06844; margin-top:16px; padding-top:12px; text-align:left; }
#arena[data-layout="mobile"] .arena-mobile-summary svg { width:38px; height:46px; flex-shrink:0; }
#arena[data-layout="mobile"] .arena-mobile-summary strong { font-size:16px; font-weight:normal; display:block; overflow-wrap:anywhere; }
#arena[data-layout="mobile"] .arena-mobile-summary span { display:block; font:11px var(--game-font); color:#c0b492; margin-top:4px; }
#arena[data-layout="mobile"] .arena-panel-controls { border-left:1px solid #bda06833; padding-left:22px; align-self:center; }
#arena[data-layout="mobile"] .arena-steps { margin:0 0 14px; padding:0 0 12px; border-top:0; font-size:11px; gap:5px; }
#arena[data-layout="mobile"][data-stage="lobby"] .arena-steps { display:none; }
#arena[data-layout="mobile"] .arena-flow { min-height:0; }
#arena[data-layout="mobile"] .arena-flow-title { margin:4px 0 16px; gap:12px; }
#arena[data-layout="mobile"] h3 { font-size:21px; }
#arena[data-layout="mobile"] .arena-flow-title p { font-size:13px; }
#arena[data-layout="mobile"] .arena-mini-icon { display:none; }
#arena[data-layout="mobile"] .arena-primary,#arena[data-layout="mobile"] .arena-secondary { min-height:48px; padding:10px; font-size:20px; }
#arena[data-layout="mobile"] .arena-small { font-size:11px; margin:8px 0!important; }
#arena[data-layout="mobile"] .arena-text-button { min-height:44px; font-size:13px; }
#arena[data-layout="mobile"] .arena-wallet { padding:0 7px; margin-bottom:10px; font-size:11px; }
#arena[data-layout="mobile"] .arena-wallet button { min-height:44px; padding:6px; font-size:12px; }
#arena[data-layout="mobile"] .arena-modes { margin-bottom:8px; }
#arena[data-layout="mobile"] .arena-modes button { min-height:48px; padding:5px; }
#arena[data-layout="mobile"] .arena-modes strong { font-size:18px; }
#arena[data-layout="mobile"] .arena-modes span { display:none; }
#arena[data-layout="mobile"] .arena-match-info { font-size:11px; gap:10px; margin-bottom:12px; }
#arena[data-layout="mobile"] .arena-panel-footer { font-size:10px; padding-top:9px; }
#arena[data-layout="mobile"] .arena-notice:not(:empty) { font-size:12px; margin:8px 0; }
#arena[data-layout="mobile"] form label { font-size:21px; }
#arena[data-layout="mobile"] .arena-name-hint { margin:5px 0; font-size:11px; }
#arena[data-layout="mobile"] input { font-size:18px; min-height:44px; padding:8px 12px; margin:8px 0 12px; }
#arena[data-layout="mobile"] .arena-search { padding:0 0 12px; }
#arena[data-layout="mobile"] .arena-spinner { width:24px; height:24px; margin-bottom:8px; }
#arena[data-layout="mobile"] .arena-match { padding:4px 0 10px; }
#arena[data-layout="mobile"][data-mobile-view="progress"] .arena-panel { display:none; }
#arena[data-layout="mobile"][data-mobile-view="progress"] .arena-story { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:none; padding:12px 0; align-items:center; }
#arena[data-layout="mobile"] .arena-story>h1,#arena[data-layout="mobile"] .arena-story>.arena-eyebrow,#arena[data-layout="mobile"] .arena-intro { display:none; }
#arena[data-layout="mobile"] .arena-profile { margin:0; padding:18px; }
#arena[data-layout="mobile"] .arena-identity { gap:12px; }
#arena[data-layout="mobile"] .arena-identity svg { width:44px; height:55px; }
#arena[data-layout="mobile"] .arena-identity h2 { font-size:21px; }
#arena[data-layout="mobile"] .arena-identity .arena-eyebrow { font-size:9px; letter-spacing:1.5px; }
#arena[data-layout="mobile"] .arena-stats span { font-size:9px; }
#arena[data-layout="mobile"] .arena-stats strong { font-size:22px; }
#arena[data-layout="mobile"] .arena-profile-note { font-size:12px; }
#arena[data-layout="mobile"] .arena-progression { margin:0; padding:18px; background:#101e23e8; border:1px solid #bda06866; }
#arena[data-layout="mobile"] .arena-section-label { font-size:11px; }
#arena[data-layout="mobile"] .arena-section-label span:last-child { display:none; }
#arena[data-layout="mobile"] .arena-badges { display:grid; grid-template-columns:repeat(4,1fr); gap:12px 6px; margin:16px 0; }
#arena[data-layout="mobile"] .arena-badges:before { display:none; }
#arena[data-layout="mobile"] .arena-milestone { width:auto; }
#arena[data-layout="mobile"] .arena-milestone svg { width:35px; height:42px; }
#arena[data-layout="mobile"] .arena-milestone span { font-size:11px; }
#arena[data-layout="mobile"] .arena-milestone.current:after { display:none; }
@media(max-width:740px) {
  #arena[data-layout="mobile"] .arena-shell { padding-inline:max(12px,env(safe-area-inset-left)); }
  #arena[data-layout="mobile"] .arena-header { gap:8px; }
  #arena[data-layout="mobile"] .arena-logo { width:110px; }
  #arena[data-layout="mobile"] .arena-mobile-nav button { min-width:70px; padding:7px 10px; }
  #arena[data-layout="mobile"] .arena-panel { grid-template-columns:minmax(140px,.6fr) minmax(0,1.4fr); padding:12px 14px; gap:14px; }
  #arena[data-layout="mobile"] .arena-panel-controls { padding-left:14px; }
  #arena[data-layout="mobile"] .arena-panel-art>h2 { font-size:25px; }
  #arena[data-layout="mobile"] .arena-steps { font-size:10px; }
  #arena[data-layout="mobile"] .arena-houses img { width:48px; height:52px; }
  #arena[data-layout="mobile"][data-mobile-view="progress"] .arena-story { gap:14px; grid-template-columns:1.1fr 1fr; }
  #arena[data-layout="mobile"] .arena-profile,#arena[data-layout="mobile"] .arena-progression { padding:12px; }
}
@media(max-width:550px) {
  #arena[data-layout="mobile"] .arena-panel,#arena[data-layout="mobile"][data-mobile-view="progress"] .arena-story { grid-template-columns:1fr; }
  #arena[data-layout="mobile"] .arena-panel-controls { border-left:0; padding-left:0; }
  #arena[data-layout="mobile"] .arena-logo { width:85px; }
  #arena[data-layout="mobile"] .arena-back { font-size:11px; padding:6px; }
}

/* Clean lobby: profile, progression and matchmaking only. */
#arena .arena-shell { max-width:1320px; }
#arena .arena-layout { gap:44px; grid-template-columns:minmax(0,1.2fr) minmax(340px,.85fr); align-content:center; }
#arena .arena-story { padding:0; }
#arena .arena-profile { margin-top:0; }
#arena .arena-progression { padding:22px 24px 18px; background:linear-gradient(125deg,#202e2dec,#121d21ef); border:1px solid #b6a16b66; margin-top:18px; }
#arena .arena-section-label,#arena[data-layout="mobile"] .arena-section-label { font:22px var(--game-font); color:#e5cc94; letter-spacing:0; }
#arena .arena-section-label span:last-child { color:inherit; letter-spacing:inherit; }
#arena .arena-badges { margin:22px 0 0; }
#arena .arena-milestone span { font-size:12px; }
#arena .arena-panel { padding:28px; }
#arena .arena-panel-art>h1 { font-size:32px; line-height:1.2; letter-spacing:0; color:#f0db9f; margin:0 0 26px!important; font-weight:normal; }
#arena .arena-flow { min-height:0; }
#arena .arena-connect-note { margin:0 0 24px; color:#d2c9b3; font-size:16px; }
#arena .arena-panel-footer { margin-top:18px; }
#arena .arena-modes button { padding:14px 8px; }
#arena .arena-match-info { margin-bottom:22px; }
#arena .arena-footer { letter-spacing:0; font-size:10px; }
#arena .arena-footer span:last-child { letter-spacing:0; font-size:10px; }
#arena[data-layout="mobile"] .arena-panel { grid-template-columns:minmax(160px,.65fr) minmax(0,1.35fr); min-height:260px; }
#arena[data-layout="mobile"] .arena-panel-art>h1 { font-size:28px; margin:0 0 18px!important; }
#arena[data-layout="mobile"] .arena-mobile-summary { flex-direction:column; border:0; margin:0; padding:0; text-align:center; gap:10px; }
#arena[data-layout="mobile"] .arena-mobile-summary svg { width:56px; height:66px; }
#arena[data-layout="mobile"] .arena-mobile-summary strong { font-size:20px; }
#arena[data-layout="mobile"] .arena-mobile-summary span { font-size:12px; line-height:1.4; }
#arena[data-layout="mobile"] .arena-panel-footer { margin-top:12px; }
#arena[data-layout="mobile"] .arena-connect-note { font-size:16px; margin-bottom:22px; }
#arena[data-layout="mobile"] .arena-badges { margin-bottom:0; }
#arena[data-layout="mobile"] .arena-modes button { padding:8px; }
#arena[data-layout="mobile"] .arena-progression { margin:0; }
@media(max-width:740px) {
  #arena[data-layout="mobile"] .arena-panel { grid-template-columns:minmax(135px,.6fr) minmax(0,1.4fr); }
  #arena[data-layout="mobile"] .arena-mobile-nav button { min-width:64px; }
}
@media(max-width:550px) {
  #arena[data-layout="mobile"] .arena-panel { grid-template-columns:1fr; }
}
#arena .arena-section-label span:last-child,
#arena[data-layout="mobile"] .arena-section-label span:last-child { display:block; }

/* Original, locally bundled OFL fonts; no game font assets are used. */
#arena { --arena-display:var(--game-font); --arena-body:var(--game-font); font-family:var(--arena-body); }
#arena .arena-header { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; min-height:150px; margin-bottom:24px; }
#arena .arena-logo { grid-column:2; grid-row:1; width:420px; height:auto; max-width:42vw; justify-self:center; filter:drop-shadow(0 5px 8px #0009); }
#arena .arena-back { grid-column:3; grid-row:1; justify-self:end; margin:0; min-height:48px; padding:10px 22px; }
#arena .arena-content { flex:1; display:flex; flex-direction:column; justify-content:center; }
#arena .arena-layout { flex:none; align-items:stretch; min-height:440px; }
#arena .arena-story { display:grid; grid-template-rows:1.15fr 1fr; gap:18px; }
#arena .arena-profile { display:flex; flex-direction:column; justify-content:center; margin:0; }
#arena .arena-progression { margin:0; display:flex; flex-direction:column; justify-content:center; }
#arena .arena-panel { display:flex; flex-direction:column; justify-content:center; outline:none; border:3px solid #8e8058; box-shadow:inset 0 0 0 3px #0c1719,inset 0 0 0 4px #94805866,0 10px 30px #0005; }
#arena .arena-panel:before { top:-9px; } #arena .arena-panel:after { bottom:-9px; }
#arena .arena-panel-art>h1,#arena .arena-identity h2,#arena .arena-section-label,#arena[data-layout="mobile"] .arena-section-label,#arena .arena-mobile-summary strong,#arena .arena-stats strong,#arena h3 { font-family:var(--arena-display); font-weight:400; }
#arena .arena-identity h2 { font-size:27px; }
#arena .arena-section-label { font-size:25px; }
#arena .arena-panel-art>h1 { font-size:38px; }
#arena .arena-connect-note { font-size:18px; }
#arena .arena-stats span,#arena .arena-xp-label,#arena .arena-wallet,#arena .arena-name-hint,#arena .arena-match-info,#arena .arena-notice,#arena .arena-panel-footer,#arena .arena-footer { font-family:var(--arena-body); }
#arena .arena-stats span { font-size:12px; letter-spacing:1px; }
#arena .arena-xp-label { font-size:14px; }
#arena .arena-identity p:last-child,#arena .arena-milestone span { font-size:15px; }
#arena .arena-small { font-size:13px; }
#arena .arena-panel-footer { font-size:12px; }
#arena .arena-access-note { text-align:center; font-size:16px; line-height:1.4; color:#e0d1af; text-shadow:1px 2px 2px #000; margin:20px auto 0; max-width:760px; }
#arena .arena-footer { padding-top:22px; }

/* Chiselled stone edges and bronze highlights for every action. */
#arena[data-layout] .arena-back,#arena[data-layout] .arena-primary,#arena[data-layout] .arena-secondary,#arena[data-layout] .arena-text-button,#arena[data-layout] .arena-modes button,#arena[data-layout] .arena-wallet button,#arena[data-layout] .arena-mobile-nav button {
  font-family:var(--arena-display); font-weight:400; color:#ead6a0;
  background:repeating-linear-gradient(127deg,#ffffff03 0 2px,#00000003 2px 5px),linear-gradient(#514b3c,#302e26);
  border:3px solid; border-color:#80745b #24241e #1a1d19 #706650; border-radius:2px;
  box-shadow:inset 0 0 0 1px #b8a37b33,inset 0 3px 4px #ffffff0a,0 2px 3px #0008;
  text-shadow:1px 2px 0 #171710; text-decoration:none; letter-spacing:.3px;
}
#arena[data-layout] .arena-back { font-size:19px; }
#arena[data-layout] .arena-primary { background:repeating-linear-gradient(127deg,#ffffff04 0 2px,#00000004 2px 5px),linear-gradient(#80633b,#514025); border-color:#c6a36a #44311b #312615 #a58a57; color:#ffe29a; font-size:26px; min-height:58px; }
#arena[data-layout] .arena-text-button { min-height:44px; margin:6px auto 0; padding:8px 22px; font-size:17px; }
#arena[data-layout] .arena-wallet { padding:7px 10px; background:#171d19a6; border-color:#82745366; font-size:13px; }
#arena[data-layout] .arena-wallet button { padding:6px 10px; font-size:14px; min-height:36px; }
#arena[data-layout] .arena-modes button[aria-pressed="true"],#arena[data-layout] .arena-mobile-nav button[aria-pressed="true"] { background:linear-gradient(#62553a,#3b3525); border-color:#bba36f #51452c #3b311e #a58e60; box-shadow:inset 0 0 0 1px #d4ba7833; color:#ffe29a; }
#arena[data-layout] .arena-modes strong { font-family:inherit; font-weight:400; color:inherit; }
#arena button:active { filter:brightness(.88); }
#arena .arena-mobile-nav { background:none; border:0; padding:0; }

#arena[data-layout="mobile"] .arena-header { grid-template-columns:1fr auto 1fr; min-height:60px; gap:12px; margin-bottom:12px; }
#arena[data-layout="mobile"] .arena-logo { width:180px; height:auto; max-width:27vw; }
#arena[data-layout="mobile"] .arena-mobile-nav { grid-column:1; grid-row:1; justify-self:start; margin:0; padding:0; border:0; background:none; gap:5px; }
#arena[data-layout="mobile"] .arena-mobile-nav button { min-width:64px; min-height:44px; padding:7px 10px; font-size:15px; }
#arena[data-layout="mobile"] .arena-back { font-size:16px; padding:8px 12px; }
#arena[data-layout="mobile"] .arena-content { flex:none; }
#arena[data-layout="mobile"] .arena-layout { min-height:0; }
#arena[data-layout="mobile"] .arena-panel { display:grid; min-height:240px; padding:14px 22px; }
#arena[data-layout="mobile"] .arena-story { display:none; }
#arena[data-layout="mobile"][data-mobile-view="progress"] .arena-story { align-items:stretch; grid-template-rows:auto; padding:0; }
#arena[data-layout="mobile"] .arena-profile,#arena[data-layout="mobile"] .arena-progression { padding:16px; }
#arena[data-layout="mobile"] .arena-section-label { font-size:24px; }
#arena[data-layout="mobile"] .arena-panel-art>h1 { font-size:30px; }
#arena[data-layout="mobile"] .arena-mobile-summary strong { font-size:23px; }
#arena[data-layout="mobile"] .arena-mobile-summary span { font-family:var(--arena-body); font-size:14px; }
#arena[data-layout="mobile"] .arena-connect-note { font-size:17px; margin-bottom:16px; }
#arena[data-layout="mobile"] .arena-primary,#arena[data-layout="mobile"] .arena-secondary { font-size:23px; min-height:48px; padding:8px; }
#arena[data-layout="mobile"] .arena-text-button { min-height:44px; font-size:16px; margin-top:0; padding:6px 18px; }
#arena[data-layout="mobile"] .arena-small { font-size:12px; margin:6px 0!important; }
#arena[data-layout="mobile"] .arena-wallet { padding:0 6px; font-size:12px; }
#arena[data-layout="mobile"] .arena-wallet button { font-size:14px; }
#arena[data-layout="mobile"] .arena-panel-footer { font-size:11px; margin-top:10px; padding-top:8px; }
#arena[data-layout="mobile"] .arena-match-info { font-size:12px; }
#arena[data-layout="mobile"] .arena-access-note { font-size:13px; max-width:650px; margin:12px auto 0; }
#arena[data-layout="mobile"] .arena-stats span { font-size:11px; }
#arena[data-layout="mobile"] .arena-milestone span { font-size:13px; }
@media(max-width:740px) {
  #arena[data-layout="mobile"] .arena-header { gap:8px; }
  #arena[data-layout="mobile"] .arena-logo { width:155px; }
  #arena[data-layout="mobile"] .arena-mobile-nav button { font-size:13px; padding:7px; min-width:52px; }
  #arena[data-layout="mobile"] .arena-back { font-size:14px; padding:7px 9px; }
  #arena[data-layout="mobile"] .arena-panel { padding:12px 14px; }
}
@media(max-width:550px) {
  #arena[data-layout="mobile"] .arena-header { grid-template-columns:1fr 1fr; }
  #arena[data-layout="mobile"] .arena-logo { grid-column:1/-1; grid-row:1; max-width:60vw; width:210px; }
  #arena[data-layout="mobile"] .arena-mobile-nav { grid-column:1; grid-row:2; }
  #arena[data-layout="mobile"] .arena-back { grid-column:2; grid-row:2; }
}