:root{color-scheme:dark;font:15px system-ui;color:#f5e6bf;background:#100e0c}*{box-sizing:border-box}body{margin:0}button,select{font:inherit;color:inherit;background:#32241a;border:1px solid #b99553;border-radius:8px;padding:9px 13px}button{cursor:pointer;touch-action:none}button:disabled{opacity:.45}a{color:#f1d18e}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #ffe3a0;outline-offset:2px}.gold{background:#d4aa59;color:#17120c;font-weight:800}.arena-app{height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;max-width:1800px;margin:0 auto}header{display:flex;align-items:center;gap:18px;padding:10px 18px;border-bottom:1px solid #8a713e}header h1{font:22px Georgia;letter-spacing:2px;margin:0;flex:1}header h1 span{color:#d6b16a}.hud{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;padding:9px 22px;background:#291c15}.meter{display:grid;gap:4px}.meter b{font:16px Georgia}.meter small{font-size:10px;color:#dbcbb0}progress{width:100%;height:13px;accent-color:#ba9e54}progress[id$=Stamina]{height:7px;accent-color:#6fa6b5}.clock{min-width:120px;text-align:center;display:grid;align-content:center;gap:3px}.clock strong{font:26px Georgia}.clock small{font-size:11px}main{min-height:0;position:relative;overflow:hidden;background:#9b7551}canvas{width:100%;height:100%;display:block}.status{margin:0;padding:7px 15px;background:#21160f;color:#f3d596;text-align:center;font-size:13px;min-height:31px}.control-pad{display:flex;gap:24px;justify-content:space-between;padding:9px 18px;background:#1c1510;border-top:1px solid #80633a}.movement,.combat{display:flex;gap:8px}.control-pad button{min-width:76px;min-height:55px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700}.movement button{font-size:25px;min-width:85px}.control-pad small{font-size:10px;font-weight:400;color:#c8b58d;margin-top:3px}.control-pad button:active{background:#765525}footer{display:flex;gap:12px;align-items:center;padding:7px 18px}footer small{flex:1;font-size:11px;color:#bcaf94}.setup{position:absolute;inset:12px max(12px,calc((100% - 1000px)/2));padding:20px;background:#160f0ceF;border:1px solid #c2a368;border-radius:16px;overflow:auto;box-shadow:0 10px 50px #0008}.setup[hidden]{display:none}.setup-title span{font-size:10px;letter-spacing:3px;color:#c9a561}.setup h2{font:32px Georgia;margin:6px 0}.setup p{font-size:12px;color:#d9c6a1;margin:7px 0 15px}.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.picks label{display:flex;flex-direction:column;gap:5px;font-size:12px}.picks select{width:100%;font-size:12px}.roster{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}.roster article{min-height:100px;display:grid;grid-template-columns:100px 1fr;align-items:center;gap:4px 12px;padding:10px;background:#302015;border:1px solid #645032;border-radius:12px}.fighter-preview{display:block;width:90px;height:120px;background-repeat:no-repeat;grid-row:1/4}.animal-preview{height:100px}.roster small{font-size:11px;color:#d0ba8f}.roster p{margin:0;font-size:10px}.setup .gold{width:100%;padding:12px}.setup .fine{font-size:10px;margin-top:8px}.advance{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);box-shadow:0 4px 12px #0008;white-space:nowrap}dialog{background:#201812;color:inherit;border:1px solid #bc9b61;border-radius:14px;max-width:650px;max-height:85dvh;line-height:1.6}dialog::backdrop{background:#000b}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
@media(max-width:650px){header{gap:7px;padding:7px}header h1{font-size:14px;letter-spacing:1px}header button{padding:7px;font-size:10px}.hud{padding:7px;gap:8px}.clock{min-width:65px}.clock strong{font-size:21px}.clock small{font-size:9px}.meter b{font-size:13px}.meter small{font-size:9px}.control-pad{gap:8px;padding:6px}.movement,.combat{gap:4px}.control-pad button{min-width:48px;min-height:52px;padding:5px;font-size:10px}.movement button{min-width:35px;font-size:21px}.control-pad small{font-size:8px}.status{font-size:11px;min-height:32px;padding:6px}footer{padding:6px;gap:7px;flex-wrap:wrap}footer button{font-size:11px;padding:6px}footer small{min-width:150px;font-size:9px}footer a{font-size:11px}.setup{inset:8px;padding:12px}.setup h2{font-size:25px}.picks{gap:8px}.picks select{padding:7px;font-size:10px}.roster{gap:7px}.roster article{grid-template-columns:1fr;text-align:center;padding:7px}.fighter-preview{grid-row:auto;width:85px;height:100px;margin:auto}.roster b{font-size:12px}.roster small{font-size:9px}.roster p{display:none}}
@media(max-height:500px){header{padding:5px 10px}header h1{font-size:16px}header button{padding:4px 8px;font-size:11px}.hud{padding:5px 10px;gap:12px}.meter b{font-size:12px}.meter small{font-size:8px}progress{height:8px}progress[id$=Stamina]{height:5px}.clock strong{font-size:19px}.control-pad{padding:5px 10px}.control-pad button{min-height:35px;flex-direction:row;gap:5px;font-size:11px}.control-pad small{margin:0}.status{font-size:10px;min-height:23px;padding:4px}footer{padding:4px 10px}footer button{padding:4px 8px;font-size:10px}.setup{inset:5px;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.setup-title{grid-column:1/-1}.setup-title h2{font-size:22px;margin:0}.setup-title p,.setup .fine{display:none}.picks{gap:5px}.picks select{padding:4px;font-size:10px}.picks label{font-size:9px;gap:2px}.roster{margin:0;gap:7px}.roster article{grid-template-columns:1fr;text-align:center;padding:5px;gap:2px}.fighter-preview{grid-row:auto;height:75px;width:60px;margin:auto}.roster small,.roster p{display:none}.roster b{font-size:10px}.setup .gold{grid-column:1/-1;padding:6px}}