#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 Georgia,'Times New Roman',serif; 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 Arial,sans-serif; 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 Arial,sans-serif; 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 Arial,sans-serif; 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 Arial,sans-serif; }
#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 Arial,sans-serif; 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>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 Arial,sans-serif; 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 Arial,sans-serif; 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 Arial,sans-serif; }
#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 Arial,sans-serif; 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 Arial,sans-serif; color:#c1b89c; padding:5px; }
#arena form { text-align:left; }
#arena form label { font-size:22px; }
#arena .arena-name-hint { font:11px/1.5 Arial,sans-serif; 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 Arial,sans-serif; 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 Arial,sans-serif; }
#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; } }
@media(max-height:600px) and (orientation:landscape) { #arena .arena-header { min-height:44px; margin-bottom:16px; } #arena .arena-logo { width:150px; height:50px; } #arena .arena-layout { align-items:start; } #arena .arena-story { padding-top:4px; } #arena h1 { font-size:52px; margin:14px 0!important; } #arena .arena-intro { font-size:16px; } #arena .arena-profile { margin-top:22px; } #arena .arena-panel { padding:23px 22px 20px; } #arena .arena-panel>h2 { font-size:30px; } #arena .arena-houses { gap:20px; margin-block:7px 12px; } #arena .arena-houses img { width:70px; height:72px; } #arena .arena-houses>div { font-size:15px; } #arena .arena-steps { margin:17px 0; font-size:9px; } #arena .arena-preview { font-size:9px; } #arena .arena-footer { padding-top:25px; } }
@media(max-width:700px) { #arena .arena-layout { grid-template-columns:1fr; gap:35px; } #arena .arena-header { gap:10px; } #arena .arena-preview { display:none; } #arena .arena-story { max-width:none; } #arena .arena-footer span:last-child { display:none; } }
@media(prefers-reduced-motion:reduce) { #arena .arena-spinner { animation:none; } #arena button { transition:none; } }
/* Landscape phones keep the action in view; the panel can scroll when a keyboard opens. */
@media(max-height:600px) and (orientation:landscape) {
  #arena .arena-shell { padding:7px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left)); }
  #arena .arena-header { min-height:36px; margin-bottom:10px; }
  #arena .arena-logo { width:124px; height:40px; }
  #arena .arena-back { padding:7px 14px; font-size:12px; }
  #arena .arena-layout { gap:5%; grid-template-columns:minmax(0,1fr) minmax(340px,1fr); }
  #arena .arena-story>.arena-eyebrow,#arena .arena-intro,#arena .arena-house-note,#arena .arena-houses,#arena .arena-rule,#arena .arena-footer,#arena .arena-profile-note { display:none; }
  #arena h1 { font-size:34px; letter-spacing:-1px; margin:0 0 12px!important; }
  #arena h1 br { display:none; }
  #arena h1 em:before { content:' '; }
  #arena .arena-profile { margin:0; padding:12px 14px; }
  #arena .arena-identity { gap:12px; }
  #arena .arena-identity svg { width:41px; height:49px; }
  #arena .arena-identity h2 { font-size:18px; }
  #arena .arena-identity .arena-eyebrow { font-size:8px; letter-spacing:1.5px; }
  #arena .arena-identity p:last-child { font-size:11px; }
  #arena .arena-stats { padding-top:10px; margin-top:10px; }
  #arena .arena-stats strong { font-size:19px; }
  #arena .arena-xp-label { margin:11px 0 6px; }
  #arena .arena-progression { margin-top:14px; }
  #arena .arena-badges { margin:8px 0 5px; gap:4px; }
  #arena .arena-milestone svg { width:30px; height:36px; margin-bottom:3px; }
  #arena .arena-milestone span { font-size:9px; }
  #arena .arena-progression>p { font-size:10px; }
  #arena .arena-panel { padding:11px 17px 13px; }
  #arena .arena-panel>.arena-eyebrow { font-size:8px; letter-spacing:2px; }
  #arena .arena-panel>h2 { font-size:24px; margin:1px 0 3px!important; }
  #arena .arena-steps { margin:8px 0 12px; padding:8px 0; }
  #arena .arena-flow { min-height:0; }
  #arena .arena-flow-title { margin:3px 0 15px; }
  #arena h3 { font-size:18px; }
  #arena .arena-flow-title p { font-size:11px; }
  #arena .arena-primary,#arena .arena-secondary { min-height:40px; padding:8px; font-size:17px; }
  #arena .arena-small { margin:8px 0!important; font-size:10px; }
  #arena .arena-panel-footer { padding-top:9px; font-size:9px; }
  #arena .arena-wallet { padding:3px 8px; margin-bottom:10px; font-size:10px; }
  #arena .arena-wallet button { min-height:28px; }
  #arena .arena-modes { gap:8px; margin-bottom:10px; }
  #arena .arena-modes button { padding:6px; }
  #arena .arena-modes strong { font-size:17px; }
  #arena .arena-modes span { font-size:10px; margin-top:2px; }
  #arena .arena-match-info { margin-bottom:11px; font-size:9px; }
  #arena .arena-notice:not(:empty) { margin:7px 0; font-size:10px; }
  #arena form label { font-size:18px; }
  #arena .arena-name-hint { font-size:10px; margin:3px 0; }
  #arena input { font-size:16px; padding:8px 10px; margin:8px 0 12px; }
  #arena .arena-search { padding-bottom:12px; }
  #arena .arena-spinner { width:22px; height:22px; margin-bottom:7px; }
  #arena .arena-match { padding:0 0 8px; }
}