/* ROPA 0.8: generated artwork applied to the ACTUAL UI. All main surfaces are semi-transparent. */
:root{--gold:#ffdda2;--txt:#fff3db;--border:#c19767}
html,body{background-color:#060913}
body{background:linear-gradient(to bottom,rgba(3,5,9,.03),rgba(4,6,11,.26)),url('./art/arena-bg.webp') center top / cover fixed no-repeat!important}
.app{max-width:490px;padding:0 16px 16px}
.topbar{height:30px;padding:5px 0 1px}
.connection{background:#04081380;font-size:10px;border-color:#ebbb747a}
.intro{min-height:0!important;padding:0 0 10px!important}
.hero-title{margin:0;align-items:center}
.hero-title img{width:100%;max-width:445px;max-height:none!important;display:block;object-fit:contain;filter:drop-shadow(0 8px 10px #0009)}
/* Real illustration is the frame; the form's center is a dark transparent glass surface. */
.panel{isolation:isolate;position:relative;border:0!important;border-radius:14px!important;background:rgba(7,10,18,.34)!important;box-shadow:0 14px 30px #0008,0 0 0 1px #b9825477!important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:20px 20px 18px!important;overflow:hidden}
.panel:before{content:''!important;display:block!important;position:absolute;inset:-10px;z-index:-1;width:auto;height:auto;background:url('./art/form-panel-v08.webp') center center/100% 100% no-repeat!important;opacity:.43!important;pointer-events:none;transform:none!important;box-shadow:none!important}
.panel:after{display:none!important}
.tabs{border:0!important;background:transparent!important;padding:0!important;gap:10px!important;clip-path:none!important;border-radius:0!important;margin-bottom:16px!important}
.tab,.tab.selected{position:relative;border:0!important;border-radius:0!important;clip-path:none!important;background:url('./art/button-secondary-v08.webp') center/100% 100% no-repeat!important;color:#f9e9d5!important;box-shadow:none!important;text-shadow:0 2px 4px #000!important;font:italic 800 clamp(12px,3vw,14px)/1.1 'Arial Narrow',system-ui,sans-serif!important;letter-spacing:.5px!important;min-height:53px!important;filter:brightness(.85);padding:12px 4px!important}
.tab.selected{background-image:url('./art/button-primary-v08.webp')!important;filter:brightness(1.15)!important}
.field{margin-bottom:14px!important}.field>label{color:#ffe4b4!important;font-size:11px!important;font-weight:850;letter-spacing:1.2px!important;margin-bottom:6px;text-shadow:0 1px 4px #000}
.field>input:not([type=hidden]),.field select{color:#fff7e8!important;height:48px!important;padding:9px 15px!important;border:0!important;border-radius:0!important;background:rgba(4,8,16,.48) url('./art/input-frame-v08.webp') center/100% 100% no-repeat!important;box-shadow:none!important;outline:none!important}
.field>input:focus-visible,.field select:focus-visible{outline:2px solid #ffdc9c!important;outline-offset:0}
.field input::placeholder{color:#e9d1b5!important;opacity:.7}
.select-wrap:after{color:#ffe7af}
.length-row{gap:4px!important}.length,.length.selected{padding:9px 3px!important;min-height:47px!important;border:0!important;border-radius:0!important;background:url('./art/button-secondary-v08.webp') center/100% 100% no-repeat!important;box-shadow:none!important;color:#ffe8ce!important;line-height:1.1;font:800 clamp(10px,2.8vw,12px)/1.1 'Arial Narrow',system-ui,sans-serif!important;white-space:normal;filter:brightness(.82)}
.length.selected{background-image:url('./art/button-primary-v08.webp')!important;filter:brightness(1.14)!important;color:white!important}
.primary,.arena-button,.secondary,.arena-secondary{border:0!important;border-radius:0!important;clip-path:none!important;box-shadow:none!important;background-color:transparent!important;background-image:url('./art/button-primary-v08.webp')!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;color:#fff5df!important;text-shadow:0 2px 4px #330e09!important;font:italic 850 clamp(16px,4.7vw,21px)/1.1 'Arial Narrow','Arial Black',system-ui,sans-serif!important;letter-spacing:.4px!important;padding:11px 25px!important;min-height:67px!important;filter:drop-shadow(0 3px 5px #0008);transition:transform .16s,filter .16s!important}
.primary{width:100%}.secondary,.arena-secondary{background-image:url('./art/button-secondary-v08.webp')!important;min-height:53px!important;font-size:clamp(13px,3.5vw,16px)!important;padding:10px 11px!important}
.primary:hover,.secondary:hover,.tab:hover,.length:hover{filter:brightness(1.18)!important}
.primary:active,.secondary:active,.tab:active,.length:active{transform:scale(.975)}
.primary:after,.arena-button:after{display:none!important}
.action-row{gap:7px}
.foot{margin-top:9px;color:#f9e0ba;font-size:11px;text-shadow:0 1px 3px #000}
.local{margin-top:12px;background:#060b14a3;border-radius:6px;gap:8px;padding:10px 12px}
.site-footer{font-size:9px;color:#ead0a2}
.room-brand{display:flex;justify-content:center;transform:none;max-width:100%;margin:5px auto 11px}
.room-brand img{width:min(100%,330px);height:auto;max-height:120px;object-fit:contain;filter:drop-shadow(0 5px 8px #000b)}
.invite-box,.game-box{background:rgba(7,10,18,.47)!important;box-shadow:inset 0 0 0 1px #d9a46585,0 12px 30px #0008!important;border:1px solid #bc8e66a6!important;backdrop-filter:blur(4px)}
.invite-box .primary,.game-box .primary{font-size:18px!important}
.room[data-corner] .hand{border-color:#d4a67c!important}
/* TRUE SOURCE PANELS, not letterboxed/cropped stacked fragments. 16:9 fight frame with blurless arena surrounding it. */
.fight-overlay{background:rgba(3,5,10,.96) url('./art/arena-bg.webp') center/cover no-repeat!important}
.fight-shell{width:min(480px,100%);min-height:0;gap:11px;justify-content:center}
.fight-stage{width:100%;height:auto!important;min-height:0!important;aspect-ratio:16 / 9;border:2px solid #dda65e!important;overflow:hidden!important;border-radius:7px!important;background:#0c0f17!important;box-shadow:0 9px 26px #000b,0 0 16px #e9a65444!important}
.fight-stage:has(.fight-frame[src*="tie-"]){aspect-ratio:3 / 5;max-height:58dvh;width:min(100%,330px);margin-inline:auto}
.fight-frame{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;inset:0!important;filter:none!important;animation:none!important;transition:none!important}
.fight-blur{display:none!important}
.fight-header{margin-top:5px}.fight-versus{margin-top:4px!important;font-size:clamp(24px,7vw,32px)!important}
.fight-result{z-index:3;padding:33px 10px 12px;background:linear-gradient(0deg,#0a0611f2 0%,#0a0611a8 58%,transparent 100%)}
.fight-result-title{font-size:clamp(34px,12vw,61px)!important}
.fight-actions .primary,.fight-actions .secondary{min-height:57px!important}
.fight-skip{color:#ffdfa4}
@media(max-width:420px){.app{padding:0 10px 12px}.panel{padding:15px 14px 15px!important}.hero-title img{max-height:none!important}.intro{padding-bottom:5px!important}.length{font-size:10px!important}.tab{font-size:12px!important}.primary{min-height:60px!important}}
@media(prefers-reduced-motion:reduce){.primary,.secondary,.tab,.length{transition:none!important}}