:root{--cream:#fff4d8;--yellow:#ffc928;--red:#fa385d;--blue:#2db5ff}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:#0c0813;color:var(--cream);font-family:Tahoma,"Segoe UI",sans-serif}body{background:radial-gradient(circle at 50% -15%,#6639a0 0,#171022 48%,#09060e 100%);overflow-x:hidden}.game-shell{width:min(1180px,100%);margin:auto;padding:12px}.topbar{height:64px;display:flex;align-items:center;gap:10px}.brand{margin-left:auto}.brand span{color:#cdb9ea;font-size:.68rem}.brand h1{margin:1px 0;font-size:clamp(1.3rem,3vw,2rem)}.round-box{display:flex;gap:7px;align-items:center;background:#ffffff0d;border:1px solid #ffffff18;border-radius:12px;padding:7px 13px}.round-box strong{font-size:1.4rem;color:var(--yellow)}.icon-button{width:40px;height:40px;border-radius:12px;border:1px solid #ffffff1c;background:#ffffff0b;color:white;font-size:18px}.hud{direction:ltr;display:grid;grid-template-columns:1fr 92px 1fr;align-items:center;gap:13px;background:#170e26;border:1px solid #ffffff18;border-bottom:0;padding:12px 18px;border-radius:18px 18px 0 0}.name{display:flex;align-items:center;gap:9px;margin-bottom:6px}.name i{width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 14px var(--blue)}.p2 .name{justify-content:flex-end}.p2 .name i{background:var(--red);box-shadow:0 0 14px var(--red)}.name span{font-size:.8rem;color:var(--yellow)}.health,.stamina{height:14px;background:#07050b;border:2px solid #ffffff1c;border-radius:8px;overflow:hidden}.health i,.stamina i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#00c98e,#9bff52);transition:width .18s}.p2 .health i,.p2 .stamina i{margin-left:auto}.stamina{height:6px;border:0;margin-top:4px;background:#ffffff13}.stamina i{background:var(--yellow)}.timer{text-align:center}.timer span{display:block;font:900 2.3rem/1 Arial}.timer small{color:#a995bd}.arena{position:relative;overflow:hidden;border:5px solid #170e26;border-radius:0 0 18px 18px;background:#301b50;box-shadow:0 25px 70px #000c}.arena canvas{display:block;width:100%;height:auto;aspect-ratio:1280/620;touch-action:none}.announcement{position:absolute;z-index:8;inset:0;display:grid;place-items:center;pointer-events:none;text-align:center;opacity:0;font:900 clamp(2.4rem,10vw,7rem) Tahoma;text-shadow:0 7px 0 #2a1648,0 0 35px #ffcc31}.announcement.show{animation:announce 1.2s ease-out}@keyframes announce{0%{opacity:0;transform:scale(.45)}20%,68%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}.controls{direction:ltr;position:absolute;z-index:6;bottom:14px;display:flex;gap:12px;align-items:end;user-select:none}.p1-controls{left:14px}.p2-controls{right:14px}.joystick{position:relative;width:112px;height:112px;border-radius:50%;border:3px solid #ffffff2d;background:radial-gradient(circle,#ffffff12 0 24%,#120b20d8 25% 100%);box-shadow:inset 0 0 24px #0008,0 6px 0 #07040c;touch-action:none}.joystick i{position:absolute;width:54px;height:54px;left:26px;top:26px;border-radius:50%;background:linear-gradient(#9a77c5,#4b2c75);border:3px solid #d7c5ef;box-shadow:0 6px 12px #0009;pointer-events:none}.action-pad{display:flex;gap:5px}.controls button{height:60px;min-width:60px;padding:0 10px;border:2px solid #ffffff28;border-radius:50%;color:white;background:#130d20dc;box-shadow:0 5px 0 #08050d;font:bold .76rem Tahoma;touch-action:none}.controls button.pressed{transform:translateY(4px);box-shadow:0 1px #000;filter:brightness(1.35)}.block{background:#15976dcc!important}.jab{background:#168dcc!important}.power{width:70px;height:70px!important;background:#d82a4dcc!important;color:#fff1b6!important}.menu-layer{position:absolute;z-index:12;inset:0;display:grid;place-items:center;background:#0b0712dc;backdrop-filter:blur(7px);transition:.2s}.menu-layer.hidden{opacity:0;visibility:hidden}.menu-card{text-align:center;width:min(470px,94%);padding:14px}.gloves{font-size:58px}.gold,.points{color:var(--yellow)!important;font-weight:bold}.menu-card h2{font-size:clamp(2rem,6vw,3.2rem);margin:5px}.menu-card p{color:#c9bade}.mode-buttons{display:flex;gap:10px;justify-content:center}.start-button{margin-top:12px;min-width:170px;border:0;border-radius:15px;padding:14px 18px;color:#20120a;background:linear-gradient(#ffe36a,#ffb414);box-shadow:0 7px 0 #b36509;font:bold .95rem Tahoma}.bot-button{color:white;background:linear-gradient(#ae75ee,#61339a);box-shadow:0 7px 0 #331654}.upgrade-panel{margin-top:10px}.upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}.upgrade-grid button{border:1px solid #ffffff25;border-radius:12px;background:#ffffff10;color:white;padding:10px 5px;font:bold .72rem Tahoma}.upgrade-grid small{display:block;color:#ffdf63;margin-top:5px}.upgrade-grid button:disabled{opacity:.4}.hidden{display:none!important}footer{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;color:#9d8caf;font-size:.7rem}footer p{margin:0}footer .keys{margin-right:auto}footer button{border:1px solid #ffffff20;border-radius:9px;background:#ffffff0b;color:white;padding:8px 12px;font:inherit}
@media(max-width:720px){.game-shell{padding:0}.topbar{height:46px;padding:0 7px}.brand span{display:none}.brand h1{font-size:1.1rem}.round-box{padding:4px 8px}.round-box small{display:none}.icon-button{width:34px;height:34px}.hud{padding:6px 8px;grid-template-columns:1fr 56px 1fr;gap:5px;border-radius:0}.name{font-size:.68rem;margin-bottom:3px}.name span{display:none}.health{height:11px}.timer span{font-size:1.5rem}.arena{border-width:3px;border-radius:0}.controls{bottom:5px;gap:4px}.p1-controls{left:4px}.p2-controls{right:4px}.joystick{width:82px;height:82px}.joystick i{width:42px;height:42px;left:17px;top:17px}.action-pad{gap:3px}.controls button{height:46px;min-width:46px;padding:0 4px;font-size:.58rem}.power{width:52px;height:52px!important}.gloves{font-size:42px}.menu-card{padding:7px}.menu-card h2{font-size:1.8rem}.menu-card p{margin:5px}.start-button{min-width:130px;padding:11px 9px;font-size:.78rem}.upgrade-grid button{padding:7px 3px}footer{padding:6px}.keys{display:none}}
@media(max-height:560px) and (orientation:landscape){.topbar{display:none}.hud{height:48px}.arena canvas{max-height:calc(100vh - 78px)}footer{position:absolute;top:4px;right:4px;z-index:20;padding:0}.keys{display:none}}
.arena.bot-mode .p1-controls{left:14px;right:14px;width:auto;justify-content:space-between;pointer-events:none}.arena.bot-mode .p1-controls .joystick,.arena.bot-mode .p1-controls .action-pad{pointer-events:auto}.arena.bot-mode .p1-controls .action-pad{order:2}.arena.bot-mode .p1-controls .joystick{order:1}
.shop-title{margin:14px 0 7px;font-size:.85rem}.skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.skill-grid button{border:1px solid #b989ff55;border-radius:12px;background:#6a3b9444;color:white;padding:9px 4px;font:bold .7rem Tahoma;cursor:pointer}.skill-grid small{display:block;color:#d9c1ff;margin-top:5px;font-size:.58rem}.skill-grid button.owned{background:#1a8d65;border-color:#65ffc5}.skill-grid button:disabled{opacity:.42}
@media(max-width:720px){.arena.bot-mode .p1-controls{left:5px;right:5px}}
.action-pad{display:grid!important;grid-template-columns:repeat(3,60px);gap:5px;align-items:end}.action-pad .dodge{background:#714dc2cc!important}.action-pad .super{background:linear-gradient(#ffd84d,#e77b00)!important;color:#211000!important;grid-column:span 2;border-radius:18px!important;width:auto!important}.action-pad .super.ready{animation:superGlow .7s infinite alternate}@keyframes superGlow{to{filter:brightness(1.5);box-shadow:0 0 20px #ffd52e}}
@media(max-width:720px){.action-pad{grid-template-columns:repeat(3,46px)!important;gap:3px}.action-pad .super{height:42px!important}}
.reward-title{margin:14px 0 7px;color:#ffe36a}.reward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.reward-grid button{min-height:78px;border:2px solid #ffffff30;border-radius:15px;background:linear-gradient(145deg,#7137a5,#351b62);color:#fff;padding:9px 5px;font:bold .76rem Tahoma;box-shadow:0 5px 0 #170b2d;cursor:pointer}.reward-grid small{display:block;margin-top:6px;color:#f3dfff;font-size:.6rem}.reward-grid button.selected{border-color:#ffe36a;background:linear-gradient(145deg,#e39320,#8d3d11);transform:translateY(3px);box-shadow:0 2px 0 #542100}.reward-grid button:disabled:not(.selected){opacity:.42}.victory-note{color:#8effce;font-weight:bold;margin:7px 0!important}@media(max-width:720px){.reward-grid button{min-height:66px;font-size:.65rem;padding:6px 3px}.reward-grid small{font-size:.53rem}}
.confetti{position:absolute;z-index:20;left:var(--x);top:-24px;width:12px;height:22px;border-radius:4px;background:var(--c);pointer-events:none;animation:confettiFall var(--d) var(--delay) cubic-bezier(.2,.6,.4,1) forwards}@keyframes confettiFall{to{top:105%;transform:rotate(var(--r)) translateX(45px)}}
.menu-card{max-height:96%;overflow-y:auto;overscroll-behavior:contain}.upgrade-panel #nextBotButton{position:sticky;bottom:5px;z-index:5;width:calc(100% - 12px);margin:12px 6px 8px;border:2px solid #fff3a5;box-shadow:0 7px 0 #8d4705,0 0 22px #ffc92866}.upgrade-panel #nextBotButton:disabled{display:block!important;opacity:.6;filter:grayscale(.45);cursor:not-allowed}.upgrade-panel #nextBotButton:disabled::after{content:" — اختر قوة أولاً"}@media(max-width:720px){.menu-card{max-height:98%;padding-bottom:2px}.upgrade-panel #nextBotButton{bottom:3px}}
@media(max-width:720px){.menu-layer{position:fixed;z-index:60;inset:0;background:radial-gradient(circle at 50% 22%,#4f2777 0,#130b20 58%,#08050d 100%)}.menu-card{width:min(390px,94%);max-height:94vh;overflow-y:auto;padding:18px 12px}.mode-buttons{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}.mode-buttons .start-button{width:100%;min-height:62px;margin:0;font-size:1rem;border:2px solid #ffffff2a}.menu-card #menuTitle{font-size:2.15rem}.menu-card #menuText{font-size:.88rem;line-height:1.7}.menu-card .gloves{font-size:58px}.menu-card .gold{font-size:.85rem}}
html,body,.game-shell,.hud,.arena,button{touch-action:manipulation}canvas,.controls,.joystick,.controls button{touch-action:none}@media(max-width:720px){html,body{height:100%;overflow:hidden;overscroll-behavior:none}.game-shell{height:100dvh;overflow:hidden}.hud{position:relative;z-index:45;background:#120a20;padding:8px 7px}.fighter-hud{min-width:0}.health{height:18px;border:3px solid #fff;border-radius:10px;background:#2b2134;box-shadow:0 0 13px #000}.health i{min-width:2px;box-shadow:inset 0 0 5px #fff8}.stamina{height:8px;margin-top:5px;border:1px solid #ffffff55}.name{font-size:.76rem;font-weight:900}.timer span{font-size:1.8rem}.arena{flex:0 0 auto}footer{flex-wrap:wrap}}
@media(max-width:720px){.hud{position:fixed!important;top:46px;right:0;left:0;width:100%;z-index:100;border:0;border-radius:0;box-shadow:0 7px 18px #000c}.arena{margin-top:69px}.health{position:relative}.health:after{content:"الصحة";position:absolute;inset:0;display:grid;place-items:center;color:#082116;font:bold 9px Tahoma;text-shadow:0 1px #fff8;pointer-events:none}.topbar{position:relative;z-index:101;background:#120a20}}@media(max-height:560px) and (orientation:landscape){.hud{top:0!important}.arena{margin-top:48px!important}}
html,body,.game-shell{touch-action:none!important;-ms-touch-action:none!important}.menu-card{touch-action:pan-y!important}.controls button{touch-action:none!important;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}