/* ==============================
   HUSSEIN GAME - style.css
   تصميم احترافي - Mobile First
================================= */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Tajawal:wght@400;500;700&display=swap');

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; overscroll-behavior: none;
    font-family: 'Tajawal', 'Tahoma', 'Segoe UI', sans-serif;
    background: #050208;
    color: #fff;
    touch-action: none;
}
.logo, .timer, .countdown-num, .ko-text, .room-code-big, h1, h2 {
    font-family: 'Rajdhani', 'Tajawal', sans-serif;
}

/* ---------- خلفية عامة ---------- */
.bg-arena {
    position: fixed; inset: 0;
    background:
        radial-gradient(circle at 50% 0%, #2a0a3a 0%, #0d0518 55%, #050208 100%);
    z-index: -2;
}
.bg-grid {
    position: fixed; inset: 0; z-index: -1; opacity: .25;
    background-image:
        linear-gradient(rgba(255,46,99,.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,46,99,.15) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridMove 12s linear infinite;
}
@keyframes gridMove { from { background-position: 0 0; } to { background-position: 40px 40px; } }

/* ============ MENU PAGE ============ */
.menu-wrap {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px 18px; gap: 18px;
}
.logo {
    font-size: 40px; font-weight: 900; letter-spacing: 3px; text-align: center;
    background: linear-gradient(90deg,#ff2e63,#ffb347,#ff2e63);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shine 3s linear infinite;
    text-shadow: 0 0 30px rgba(255,46,99,.4);
    line-height: 1.1;
}
@keyframes shine { to { background-position: 200% center; } }
.logo small { display:block; font-size: 13px; letter-spacing: 6px; color: #a89bb8; font-weight: 400; margin-top: 6px;}

.card {
    width: 100%; max-width: 380px;
    background: linear-gradient(160deg, rgba(27,15,46,.85), rgba(16,8,22,.9));
    border: 1px solid #3a2650;
    border-radius: 18px;
    padding: 22px 20px;
    box-shadow: 0 0 40px rgba(255,46,99,.12), inset 0 0 30px rgba(255,46,99,.03);
    backdrop-filter: blur(6px);
}
.card h2 { margin: 0 0 14px; font-size: 15px; color: #ffb347; letter-spacing: 1px; }
.input, input[type=text] {
    width: 100%; padding: 14px; border-radius: 10px; border: 1px solid #3a2650;
    background: #150a22; color: #fff; font-size: 15px; margin-bottom: 12px; text-align: center;
}
.input:focus { outline: none; border-color: #ff2e63; }
.input.code { letter-spacing: 6px; text-transform: uppercase; font-weight: bold; font-size: 20px; }

.btn {
    display: block; width: 100%; padding: 15px; border: none; border-radius: 12px;
    font-size: 16px; font-weight: bold; letter-spacing: .5px; cursor: pointer;
    color: #fff; transition: transform .1s ease;
}
.btn:active { transform: scale(.96); }
.btn-primary { background: linear-gradient(90deg,#ff2e63,#ff6b35); box-shadow: 0 6px 20px rgba(255,46,99,.35); }
.btn-secondary { background: linear-gradient(90deg,#3a2650,#26163d); border: 1px solid #ff2e63; }
.divider { text-align: center; color: #6b5c80; font-size: 12px; margin: 16px 0; position: relative; }
.divider::before, .divider::after { content:''; position:absolute; top:50%; width:40%; height:1px; background:#3a2650; }
.divider::before { left:0; } .divider::after { right:0; }

.status-msg { text-align: center; font-size: 13px; color: #ff8fa3; min-height: 18px; margin-top: 10px; }
.footer-note { color: #55475f; font-size: 11px; text-align: center; max-width: 320px; }

/* ============ GAME PAGE ============ */
.game-shell {
    position: relative; width: 100%; height: 100vh; height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
#gameCanvas {
    background: linear-gradient(180deg,#3a1e52 0%, #1b0e2c 60%, #0d0616 100%);
    display: block;
    box-shadow: 0 0 60px rgba(0,0,0,.6);
    touch-action: none;
    max-width: 100%;
    max-height: 100%;
}

/* HUD */
.hud {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    padding: 10px 12px 0; pointer-events: none;
}
.hud-row { display: flex; align-items: center; gap: 8px; }
.hp-wrap { flex: 1; }
.hp-name { font-size: 11px; margin-bottom: 3px; color: #e6d9f0; text-shadow: 0 1px 2px #000; }
.hp-outer {
    height: 16px; border-radius: 8px; background: #1a0d28; border: 2px solid #4a3466; overflow: hidden;
    position: relative;
}
.hp-inner {
    height: 100%; width: 100%;
    background: linear-gradient(90deg,#ffdd57,#ff8a00,#ff2e63);
    transition: width .25s ease;
}
.hp-outer.right .hp-inner { margin-right: 0; margin-left: auto; }
.timer {
    min-width: 46px; text-align: center; font-size: 20px; font-weight: 900;
    color: #ffb347; text-shadow: 0 0 10px rgba(255,179,71,.6);
}
.round-dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.round-dots span { width: 8px; height: 8px; border-radius: 50%; background: #3a2650; border: 1px solid #ff2e63; }
.round-dots span.won { background: #ff2e63; }

/* Overlays */
.overlay {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(5,2,8,.72); backdrop-filter: blur(3px);
    text-align: center; padding: 20px;
}
.overlay.hidden { display: none; }
.overlay h1 {
    font-size: 34px; margin: 0 0 8px;
    background: linear-gradient(90deg,#ff2e63,#ffb347);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: 2px;
}
.overlay p { color: #cbb8dc; font-size: 14px; margin: 4px 0; }
.room-code-big {
    font-size: 30px; font-weight: 900; letter-spacing: 8px; color: #ffb347;
    background: #150a22; border: 1px solid #ff2e63; padding: 10px 22px; border-radius: 12px; margin: 14px 0;
}
.spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid #3a2650; border-top-color: #ff2e63;
    animation: spin 0.8s linear infinite; margin: 14px auto 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.countdown-num {
    font-size: 90px; font-weight: 900; color: #fff;
    text-shadow: 0 0 40px rgba(255,46,99,.8);
    animation: pop .5s ease;
}
@keyframes pop { 0% { transform: scale(0.4); opacity:0; } 60% { transform: scale(1.15); opacity: 1;} 100% { transform: scale(1); } }

/* Touch Controls */
/* direction: ltr مفروضة عمدًا لمنع RTL من قلب مواضع أزرار الحركة */
.controls {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
    display: flex; justify-content: space-between; align-items: flex-end;
    padding: 0 14px 16px; pointer-events: none;
    direction: ltr;
}
.pad-group, .action-group { pointer-events: auto; display: flex; gap: 10px; align-items: flex-end; direction: ltr; }
.action-group { flex-direction: column; align-items: flex-end; gap: 8px; }
.action-row { display: flex; gap: 10px; direction: ltr; }

/* لوحة الاتجاهات على شكل صليب حقيقي - يمين/يسار/قفز/انخفاض */
.dpad-cross {
    display: grid;
    grid-template-columns: 58px 58px 58px;
    grid-template-rows: 58px 58px 58px;
    gap: 6px;
    direction: ltr;
}
.dpad-jump { grid-column: 2; grid-row: 1; }
.dpad-left { grid-column: 1; grid-row: 2; }
.dpad-hub  { grid-column: 2; grid-row: 2; }
.dpad-right{ grid-column: 3; grid-row: 2; }
.dpad-duck { grid-column: 2; grid-row: 3; }

.ctrl-btn {
    width: 58px; height: 58px; border-radius: 16px;
    background: linear-gradient(160deg, rgba(58,38,80,.9), rgba(18,9,28,.95));
    border: 2px solid #5a3d80;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #e6d9f0;
    box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
    touch-action: none;
    transition: transform .08s ease, background .12s ease, box-shadow .12s ease;
}
.ctrl-btn:active, .ctrl-btn.pressed {
    background: linear-gradient(160deg, #ff2e63, #ff6b35);
    border-color: #ffb347;
    transform: scale(.9);
    box-shadow: 0 0 18px rgba(255,110,60,.6);
}
.ctrl-btn.jump { border-color: #4ac6ff; border-radius: 50%; }
.ctrl-btn.jump:active, .ctrl-btn.jump.pressed { background: linear-gradient(160deg,#4ac6ff,#2f7dff); border-color: #4ac6ff; box-shadow: 0 0 18px rgba(74,198,255,.6);}
.ctrl-btn.duck { border-color: #b98fff; border-radius: 50%; font-size: 20px; }
.ctrl-btn.duck:active, .ctrl-btn.duck.pressed { background: linear-gradient(160deg,#9d5fff,#5a2fbf); border-color: #b98fff; box-shadow: 0 0 18px rgba(157,95,255,.6);}

.ctrl-btn.punch { border-color: #ff8fa3; width: 72px; height: 72px; font-size: 27px; border-radius: 50%; }
.ctrl-btn.punch:active, .ctrl-btn.punch.pressed { background: linear-gradient(160deg,#ff2e63,#c81e4a); }
.ctrl-btn.kick { border-color: #ffb347; width: 72px; height: 72px; font-size: 27px; border-radius: 50%; }
.ctrl-btn.kick:active, .ctrl-btn.kick.pressed { background: linear-gradient(160deg,#ff8a00,#c85e00); }
.ctrl-btn.knife { width: 52px; height: 52px; font-size: 19px; border-color: #a0ff8f; border-radius: 50%; margin-inline-start: auto; }
.ctrl-btn.knife:active, .ctrl-btn.knife.pressed { background: linear-gradient(160deg,#5fce4a,#2e8f1c); }
.ctrl-btn.disabled { opacity: .28; filter: grayscale(.6); pointer-events: none; }
.ctrl-btn.dpad { width: 58px; height: 58px; }

.dpad-hub {
    grid-column: 2; grid-row: 2;
    border-radius: 10px;
    background: radial-gradient(circle, rgba(255,46,99,.08), transparent 70%);
}

.top-left-info {
    position: absolute; top: 66px; left: 12px; z-index: 3;
    font-size: 11px; color: #a89bb8; background: rgba(10,4,18,.5); padding: 4px 10px; border-radius: 8px;
}

.ko-text {
    font-size: 52px; font-weight: 900; letter-spacing: 4px;
    color: #ff2e63; text-shadow: 0 0 30px rgba(255,46,99,.8);
    animation: pop .4s ease;
}

@media (min-width: 500px) {
    .logo { font-size: 52px; }
}