/* ================================================
   لعنة الفراعنة — Egyptian Dark Gold Theme
   Mobile-first, touch-optimized, شعبي style
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #08081A;
    --bg2: #0E0E28;
    --bg3: #141438;
    --card: rgba(18, 18, 50, 0.85);
    --card-solid: #121232;
    --card-hover: #1A1A4A;
    --glass: rgba(255, 215, 0, 0.04);
    --border: rgba(255, 215, 0, 0.1);
    --border2: rgba(255, 215, 0, 0.18);
    --gold: #FFD700;
    --gold-dim: #D4A520;
    --gold-glow: rgba(255, 215, 0, 0.12);
    --gold-glow2: rgba(255, 215, 0, 0.25);
    --sand: #D4A574;
    --sand-dim: #B8875A;
    --sand-glow: rgba(212, 165, 116, 0.15);
    --teal: #00BFA6;
    --teal-dim: #009B86;
    --teal-glow: rgba(0, 191, 166, 0.15);
    --red: #FF4757;
    --red-dim: #CC3A47;
    --red-bg: rgba(255, 71, 87, 0.12);
    --green: #2ED573;
    --green-dim: #26B863;
    --green-bg: rgba(46, 213, 115, 0.12);
    --orange: #FFA502;
    --orange-bg: rgba(255, 165, 2, 0.12);
    --blue: #54A0FF;
    --blue-bg: rgba(84, 160, 255, 0.12);
    --purple: #A855F7;
    --purple-glow: rgba(168, 85, 247, 0.12);
    --text: #F0E6D3;
    --text2: #A89B8C;
    --text3: #6B6158;
    --radius: 18px;
    --radius-sm: 14px;
    --radius-xs: 10px;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    --shadow-gold: 0 0 30px rgba(255, 215, 0, 0.08);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
    background: var(--bg);
    color: var(--text);
    direction: rtl;
    line-height: 1.7;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255,215,0,0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(212,165,116,0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.container {
    position: relative;
    z-index: 1;
    max-width: 460px;
    margin: 0 auto;
    padding: 0 1rem;
    padding-bottom: calc(2rem + var(--safe-bottom));
}

/* =================== HERO (Landing) =================== */
.hero {
    text-align: center;
    padding: 3rem 0 1.5rem;
}

.logo-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow:
        0 0 40px rgba(255,215,0,0.15),
        0 0 80px rgba(255,215,0,0.06);
    animation: logoPulse 4s ease-in-out infinite;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 32px;
    display: block;
}

@keyframes logoPulse {
    0%, 100% { box-shadow: 0 0 40px rgba(255,215,0,0.1), 0 0 80px rgba(255,215,0,0.05), inset 0 1px 0 rgba(255,215,0,0.1); transform: scale(1); }
    50% { box-shadow: 0 0 60px rgba(255,215,0,0.15), 0 0 120px rgba(255,215,0,0.08), inset 0 1px 0 rgba(255,215,0,0.15); transform: scale(1.03); }
}

.hero h1 {
    font-size: 1.9rem;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 40px rgba(255,215,0,0.2);
    letter-spacing: -0.5px;
}

.subtitle {
    color: var(--text2);
    font-size: 1rem;
    margin-top: 0.3rem;
    font-weight: 600;
}

.subtitle-glow {
    color: var(--sand);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    opacity: 0.7;
    font-weight: 700;
}

/* =================== BUTTONS =================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all var(--transition);
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
}

.btn:active { transform: scale(0.95); }

.btn-block { width: 100%; padding: 1.1rem; font-size: 1.05rem; }

.btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    color: #0A0A1A;
    box-shadow: 0 4px 20px rgba(255,215,0,0.25);
}
.btn-primary:active { box-shadow: 0 2px 10px rgba(255,215,0,0.3); }
.btn-primary:disabled {
    background: var(--bg3);
    color: var(--text3);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    color: #0A0A1A;
    box-shadow: 0 4px 20px rgba(255,215,0,0.2);
}

.btn-secondary {
    background: var(--card-solid);
    color: var(--text);
    border: 1.5px solid var(--border2);
}
.btn-secondary:active { background: var(--card-hover); }

.btn-outline {
    background: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
}
.btn-outline:active { background: var(--gold-glow); }

.btn-success {
    background: linear-gradient(135deg, var(--green), var(--green-dim));
    color: #fff;
    box-shadow: 0 4px 15px var(--green-bg);
}

.btn-danger {
    background: linear-gradient(135deg, var(--red), var(--red-dim));
    color: #fff;
    box-shadow: 0 4px 15px var(--red-bg);
}

.btn-ghost {
    background: transparent;
    color: var(--text3);
    border: 1px solid rgba(255,215,0,0.08);
    font-weight: 600;
    font-size: 0.85rem;
}
.btn-ghost:active { color: var(--red); border-color: rgba(255,71,87,0.2); }

.btn-sm { padding: 0.55rem 1rem; font-size: 0.85rem; border-radius: var(--radius-xs); }

.btn-group-v { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.btn-group-h { display: flex; gap: 0.6rem; }
.btn-group-h .btn { flex: 1; }

/* =================== CARDS =================== */
.card {
    background: var(--card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    position: relative;
}

.card-glow {
    border-color: var(--border2);
    box-shadow: var(--shadow-gold);
}

.card-header {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.card-header .fa { font-size: 0.9rem; opacity: 0.8; }

/* =================== FORMS =================== */
.page-title {
    text-align: center;
    padding: 2rem 0 1.25rem;
}

.page-title h1 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--gold);
}

.page-title p {
    color: var(--text2);
    font-size: 0.9rem;
    margin-top: 0.3rem;
}

.form-group { margin-bottom: 1.35rem; }

.form-label {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.45rem;
    color: var(--sand);
}

.form-input {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    background: var(--bg2);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
    direction: rtl;
    -webkit-appearance: none;
}

.form-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

.form-input::placeholder { color: var(--text3); }

.form-input[type="number"] {
    direction: ltr;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 8px;
    color: var(--gold);
}

/* =================== MESSAGES =================== */
.msg {
    padding: 0.8rem 1rem;
    border-radius: var(--radius-xs);
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid;
}

.msg-error { background: var(--red-bg); color: var(--red); border-color: rgba(255,71,87,0.15); }
.msg-info { background: var(--blue-bg); color: var(--blue); border-color: rgba(84,160,255,0.15); }
.msg-success { background: var(--green-bg); color: var(--green); border-color: rgba(46,213,115,0.15); }
.msg-warning { background: var(--orange-bg); color: var(--orange); border-color: rgba(255,165,2,0.15); }

.hidden { display: none !important; }

.back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
    color: var(--text3);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.75rem;
}
.back-link:active { color: var(--gold); }

/* =================== AVATAR PICKER =================== */
.avatar-picker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
    padding: 0.5rem 0;
}

.avatar-opt {
    border-radius: var(--radius-xs);
    border: 2px solid var(--border);
    background: var(--bg2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.2rem;
    gap: 0.15rem;
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.avatar-opt img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    transition: all var(--transition);
}

.avatar-opt-name {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text3);
    text-align: center;
    line-height: 1.2;
}

.avatar-opt:active { transform: scale(0.93); }

.avatar-opt.selected {
    border-color: var(--gold);
    background: var(--gold-glow);
    box-shadow: 0 0 20px var(--gold-glow);
}

.avatar-opt.selected img {
    border-color: var(--gold);
    box-shadow: 0 0 12px var(--gold-glow);
}

.avatar-opt.selected .avatar-opt-name { color: var(--gold); }

/* =================== ROOM CODE =================== */
.room-code-box {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg2);
    border: 2px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.2rem;
    box-shadow: 0 0 25px var(--gold-glow);
}

.room-code-num {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 6px;
    direction: ltr;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 20px rgba(255,215,0,0.3);
}

.room-code-label {
    font-size: 0.7rem;
    color: var(--text2);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* =================== STATUS PILLS =================== */
.status-pill {
    text-align: center;
    padding: 0.65rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    border: 1px solid;
}

.status-pill.waiting { background: var(--orange-bg); color: var(--orange); border-color: rgba(255,165,2,0.15); }
.status-pill.ready { background: var(--green-bg); color: var(--green); border-color: rgba(46,213,115,0.15); }

.quote-banner {
    text-align: center;
    padding: 0.6rem 0.5rem;
    font-size: 0.82rem;
    color: var(--sand-dim);
    font-style: italic;
    min-height: 2rem;
    font-weight: 600;
}

/* =================== BADGES =================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    border: 1px solid;
}

.badge-green { background: var(--green-bg); color: var(--green); border-color: rgba(46,213,115,0.15); }
.badge-blue { background: var(--blue-bg); color: var(--blue); border-color: rgba(84,160,255,0.15); }
.badge-orange { background: var(--orange-bg); color: var(--orange); border-color: rgba(255,165,2,0.15); }
.badge-gray { background: rgba(107,97,88,0.15); color: var(--text3); border-color: rgba(107,97,88,0.15); }
.badge-red { background: var(--red-bg); color: var(--red); border-color: rgba(255,71,87,0.15); }
.badge-gold { background: var(--gold-glow); color: var(--gold); border-color: rgba(255,215,0,0.2); }
.badge-purple { background: var(--purple-glow); color: var(--purple); border-color: rgba(168,85,247,0.15); }
.badge-cyan { background: var(--teal-glow); color: var(--teal); border-color: rgba(0,191,166,0.15); }
.badge-sand { background: var(--sand-glow); color: var(--sand); border-color: rgba(212,165,116,0.15); }

/* =================== PLAYER ITEMS =================== */
.player-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    gap: 0.65rem;
    transition: all var(--transition);
}

.player-item.is-me {
    background: var(--gold-glow);
    border-color: rgba(255,215,0,0.15);
}

.player-item.eliminated { opacity: 0.45; filter: grayscale(0.6); }

.player-item.winner {
    background: var(--gold-glow);
    border-color: rgba(255,215,0,0.25);
}

.player-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg3);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.player-item.is-me .player-avatar { border-color: var(--gold); }
.player-item.winner .player-avatar { border-color: var(--gold); box-shadow: 0 0 12px var(--gold-glow); }

.player-info { flex: 1; min-width: 0; }

.player-name-text {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
}

.me-tag {
    font-size: 0.7rem;
    color: var(--gold);
    font-weight: 700;
    margin-right: 0.3rem;
}

.player-badges {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}

/* =================== ASSIGN PLAYER CARDS =================== */
.assign-players {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.assign-player-card {
    background: var(--bg2);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.8rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.assign-player-card:active:not(.disabled) { transform: scale(0.95); }

.assign-player-card.selected {
    border-color: var(--gold);
    background: var(--gold-glow);
    box-shadow: 0 0 20px var(--gold-glow);
}

.assign-player-card.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.assign-player-card .apc-avatar { margin-bottom: 0.3rem; }
.assign-player-card .apc-name { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.assign-player-card .apc-status { font-size: 0.7rem; color: var(--gold); margin-top: 0.15rem; font-weight: 600; }
.assign-player-card.disabled .apc-status { color: var(--text3); }

/* =================== IMAGE GRID =================== */
.img-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.img-cell {
    position: relative;
    border-radius: var(--radius-xs);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
    border: 3px solid var(--border);
    transition: all var(--transition);
    touch-action: manipulation;
}

.img-cell:active { transform: scale(0.93); }

.img-cell.selected {
    border-color: var(--gold);
    box-shadow: 0 0 18px var(--gold-glow);
}

.img-cell.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    background: var(--gold);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}

.img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =================== TABS =================== */
.tabs-bar {
    display: flex;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px;
    margin-bottom: 0.75rem;
}

.tab-btn {
    flex: 1;
    padding: 0.55rem 0.25rem;
    border: none;
    background: transparent;
    border-radius: calc(var(--radius-sm) - 2px);
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--text3);
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.tab-btn.active {
    background: var(--gold-glow);
    color: var(--gold);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* =================== FILE UPLOAD =================== */
.file-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 2px dashed var(--border2);
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
}

.file-upload:active { border-color: var(--gold); background: var(--gold-glow); }
.file-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-upload .upload-icon { font-size: 2rem; color: var(--gold); }
.file-upload .upload-text { font-size: 0.85rem; color: var(--text2); font-weight: 600; }

/* =================== PREVIEW =================== */
.preview-box {
    text-align: center;
    margin: 0.75rem 0;
    padding: 0.75rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.preview-box img {
    max-width: 100px;
    max-height: 100px;
    border-radius: 8px;
    border: 2px solid var(--gold);
}

.preview-box p { font-size: 0.8rem; color: var(--text2); margin-bottom: 0.4rem; }

/* =================== PROGRESS BAR =================== */
.progress-track {
    width: 100%;
    height: 8px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--sand));
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px var(--gold-glow);
}

.progress-text {
    font-size: 0.75rem;
    color: var(--text2);
    text-align: center;
    margin-top: 0.35rem;
    font-weight: 700;
}

/* =================== GAME TOP =================== */
.game-top {
    text-align: center;
    padding: 1rem 0 0.5rem;
}

.game-logo {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
    display: block;
    margin: 0 auto 0.4rem;
    box-shadow: 0 0 20px rgba(255,215,0,0.12);
}

.game-top h1 {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(255,215,0,0.15);
}

/* =================== TURN CARD =================== */
.turn-card {
    background: var(--card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    position: relative;
    overflow: hidden;
}

.turn-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.pair-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.75rem 0;
}

.pair-player {
    flex: 1;
    max-width: 140px;
    text-align: center;
    padding: 0.6rem 0.4rem;
    background: var(--bg2);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.pair-player.active-me {
    background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(212,165,116,0.1));
    border-color: var(--gold);
    box-shadow: 0 0 20px var(--gold-glow);
}

.pair-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 auto 0.3rem;
    overflow: hidden;
    border: 2px solid var(--border);
}

.pair-player.active-me .pair-avatar { border-color: var(--gold); box-shadow: 0 0 12px var(--gold-glow); }

.pair-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pair-label {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pair-player.active-me .pair-label { color: var(--gold); }

.pair-vs {
    font-size: 1.3rem;
    color: var(--gold);
    animation: vsPulse 2s ease-in-out infinite;
    text-shadow: 0 0 15px rgba(255,215,0,0.4);
    flex-shrink: 0;
}

@keyframes vsPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.25); opacity: 1; }
}

/* =================== OPPONENT IMAGE IN TURN =================== */
.opponent-reveal {
    text-align: center;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}

.opponent-reveal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sand), transparent);
}

.opponent-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--sand);
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.opponent-reveal img {
    width: 100%;
    max-width: 200px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--gold);
    box-shadow: 0 4px 20px rgba(255,215,0,0.15);
    aspect-ratio: 1;
    object-fit: cover;
}

/* =================== VOTE CARD =================== */
.vote-card {
    background: var(--card);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.vote-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--sand), transparent);
}

.vote-card h3 { font-size: 1rem; color: var(--gold); margin-bottom: 0.5rem; }

.vote-card.vote-active { animation: voteGlow 2s ease-in-out infinite; }

@keyframes voteGlow {
    0%, 100% { box-shadow: 0 0 15px var(--gold-glow); }
    50% { box-shadow: 0 0 35px var(--gold-glow2); }
}

.guess-text-display {
    background: var(--bg2);
    border: 2px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    margin: 0.75rem 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255,215,0,0.2);
}

.vote-progress {
    font-size: 0.8rem;
    color: var(--text2);
    margin: 0.5rem 0;
    font-weight: 600;
}

/* =================== GALLERY =================== */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.gallery-item {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all var(--transition);
}

.gallery-item:active {
    transform: scale(0.97);
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.gallery-item .g-name {
    padding: 0.55rem 0.6rem;
    font-weight: 800;
    font-size: 0.82rem;
    text-align: center;
    color: var(--gold);
    background: var(--card-solid);
    border-top: 1px solid var(--border);
}

/* =================== REVEAL BOX =================== */
.reveal-box {
    text-align: center;
    padding: 1rem;
    background: var(--gold-glow);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: 0 0 25px var(--gold-glow);
}

.reveal-box img {
    max-width: 180px;
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
    border: 2px solid var(--gold);
}

/* =================== MODAL =================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 26, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.modal-sheet {
    background: var(--card-solid);
    border: 1px solid var(--border2);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 1.5rem;
    padding-bottom: calc(1.5rem + var(--safe-bottom));
    width: 100%;
    max-width: 460px;
    max-height: 85dvh;
    overflow-y: auto;
    animation: slideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.modal-sheet .modal-handle {
    width: 40px;
    height: 4px;
    background: var(--border2);
    border-radius: 2px;
    margin: 0 auto 1rem;
}

.modal-sheet h2 {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--gold);
}

/* =================== RESULTS =================== */
.results-title {
    text-align: center;
    padding: 2rem 0 1rem;
}

.results-title h1 {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(255,215,0,0.2);
}

.podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0 0.25rem;
}

.podium-item {
    flex: 1;
    max-width: 130px;
    text-align: center;
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.podium-item.first { order: 2; }
.podium-item.second { order: 1; }
.podium-item.third { order: 3; }

.podium-rank {
    padding: 0.5rem;
    font-size: 1.5rem;
    font-weight: 900;
}

.podium-item.first .podium-rank {
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    color: #0A0A1A;
    font-size: 2rem;
    padding: 0.75rem;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
}

.podium-item.second .podium-rank {
    background: linear-gradient(135deg, #BDC3C7, #95A5A6);
    color: #fff;
}

.podium-item.third .podium-rank {
    background: linear-gradient(135deg, var(--sand), var(--sand-dim));
    color: #fff;
}

.podium-avatar { padding: 0.4rem 0; }

.podium-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.podium-name {
    padding: 0.55rem 0.25rem;
    font-weight: 800;
    font-size: 0.8rem;
    background: var(--bg2);
    color: var(--text);
}

.rest-list { margin-top: 0.5rem; }

.rest-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

.rest-item img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.rest-item .rest-avatar { font-size: 1.5rem; }
.rest-item .rest-name { font-weight: 700; flex: 1; }

/* =================== MISC =================== */
.empty-state {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--text3);
}

.empty-state p { font-size: 0.9rem; font-weight: 600; }

.dots::after { content: ''; animation: dots 1.5s steps(4) infinite; }
@keyframes dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

.leave-bar {
    text-align: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* =================== CONFETTI =================== */
.confetti-piece {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    animation: confettiFall 3s ease-in forwards;
}

@keyframes confettiFall {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* =================== ANIMATIONS =================== */
.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.slide-in-right { animation: slideInRight 0.4s ease; }
@keyframes slideInRight { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }

.scale-in { animation: scaleIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }

.bounce-in { animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.shake { animation: shake 0.5s ease; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.horus-loader {
    display: inline-block;
    font-size: 2rem;
    animation: horusFloat 3s ease-in-out infinite;
}

@keyframes horusFloat {
    0%, 100% { transform: translateY(0) rotateY(0deg); }
    25% { transform: translateY(-8px) rotateY(90deg); }
    50% { transform: translateY(0) rotateY(180deg); }
    75% { transform: translateY(8px) rotateY(270deg); }
}

.turn-card.new-turn { animation: turnFlash 0.8s ease; }

@keyframes turnFlash {
    0% { box-shadow: 0 0 15px var(--gold-glow); }
    40% { box-shadow: 0 0 50px var(--gold-glow2), 0 0 80px var(--gold-glow); }
    100% { box-shadow: none; }
}

/* =================== EASTER EGGS =================== */
.scarab-egg {
    position: fixed;
    font-size: 2rem;
    z-index: 9998;
    cursor: pointer;
    filter: drop-shadow(0 0 10px rgba(255,215,0,0.7));
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 14px;
    touch-action: manipulation;
}

@keyframes scarabCrawl {
    0% { left: -50px; top: 35vh; transform: rotate(0deg) scale(1); }
    10% { transform: rotate(10deg) scale(1.1); }
    25% { left: 25vw; top: 22vh; transform: rotate(-8deg) scale(1); }
    50% { left: 50vw; top: 42vh; transform: rotate(-12deg) scale(1); }
    75% { left: 75vw; top: 28vh; transform: rotate(18deg) scale(1); }
    100% { left: calc(100vw + 50px); top: 33vh; transform: rotate(0deg); }
}

.osiris-ghost {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9997;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(255,215,0,0.4);
    pointer-events: none;
    opacity: 0;
    animation: osirisFloat 4s ease-in-out forwards;
}

@keyframes osirisFloat {
    0% { bottom: -30px; opacity: 0; }
    15% { opacity: 0.85; }
    75% { opacity: 0.85; }
    100% { bottom: 80vh; opacity: 0; }
}

.sand-particle {
    position: fixed;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: sandDrift linear forwards;
}

@keyframes sandDrift {
    0% { opacity: 0; transform: translateX(0) translateY(0); }
    10% { opacity: 0.35; }
    90% { opacity: 0.15; }
    100% { opacity: 0; transform: translateX(var(--dx)) translateY(100vh); }
}

.secret-toast {
    position: fixed;
    bottom: calc(1.5rem + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    color: #0A0A1A;
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 800;
    font-family: 'Cairo', sans-serif;
    z-index: 10000;
    box-shadow: 0 8px 32px rgba(255,215,0,0.35);
    opacity: 0;
    animation: toastIn 3s ease forwards;
    text-align: center;
    max-width: 88vw;
    width: max-content;
    line-height: 1.6;
    pointer-events: none;
}

@keyframes toastIn {
    0% { opacity: 0; transform: translateX(-50%) translateY(30px) scale(0.85); }
    8% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.02); }
    12% { transform: translateX(-50%) translateY(0) scale(1); }
    82% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-15px) scale(0.95); }
}

.hieroglyph-rain {
    position: fixed;
    top: 0;
    font-size: 1rem;
    color: var(--gold);
    opacity: 0;
    pointer-events: none;
    z-index: 9996;
    animation: hieroglyphFall linear forwards;
    text-shadow: 0 0 6px rgba(255,215,0,0.3);
}

@keyframes hieroglyphFall {
    0% { top: -2rem; opacity: 0; }
    5% { opacity: 0.5; }
    95% { opacity: 0.3; }
    100% { top: 105vh; opacity: 0; }
}

/* =================== HOW TO PLAY =================== */
.htp-fab {
    position: fixed;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    left: 1rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    color: #0A0A1A;
    border: none;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(255,215,0,0.3);
    cursor: pointer;
    z-index: 999;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: all var(--transition);
    animation: fabPulse 3s ease-in-out infinite;
}

.htp-fab:active { transform: scale(0.9); }

@keyframes fabPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(255,215,0,0.3); }
    50% { box-shadow: 0 4px 30px rgba(255,215,0,0.5); }
}

.how-to-play-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 26, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10003;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.how-to-play-sheet {
    background: var(--card-solid);
    border: 1px solid var(--border2);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 1.25rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: 460px;
    max-height: 88dvh;
    overflow-y: auto;
    animation: slideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    -webkit-overflow-scrolling: touch;
}

.how-to-play-sheet h2 {
    text-align: center;
    font-size: 1.15rem;
    color: var(--gold);
    margin-bottom: 1rem;
}

.htp-step {
    display: flex;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
    padding: 0.7rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.htp-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    color: #0A0A1A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.htp-text {
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--text);
}

.htp-text strong {
    color: var(--gold);
    font-size: 0.88rem;
}

.htp-tips {
    background: var(--gold-glow);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin: 0.75rem 0 1rem;
}

.htp-tips-title {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--gold);
    margin-bottom: 0.4rem;
}

.htp-tips ul {
    list-style: none;
    padding: 0;
}

.htp-tips li {
    font-size: 0.8rem;
    color: var(--sand);
    padding: 0.2rem 0;
    font-weight: 600;
}

.htp-tips li::before {
    content: '🔸 ';
}

@media (min-width: 768px) {
    .how-to-play-overlay { align-items: center; padding: 1rem; }
    .how-to-play-sheet { border-radius: var(--radius); max-width: 440px; }
    .htp-fab { bottom: 2rem; left: 2rem; }
}

/* =================== TURN ALERT BANNER =================== */
.turn-alert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    color: #0A0A1A;
    text-align: center;
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
    font-weight: 900;
    font-family: 'Cairo', sans-serif;
    box-shadow: 0 4px 30px rgba(255,215,0,0.4);
    animation: turnAlertSlide 3s ease forwards;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-top: calc(0.85rem + env(safe-area-inset-top, 0px));
}

@keyframes turnAlertSlide {
    0% { transform: translateY(-100%); opacity: 0; }
    8% { transform: translateY(0); opacity: 1; }
    75% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100%); opacity: 0; }
}

/* =================== GOLD SPARK (burst effect) =================== */
.gold-spark {
    position: fixed;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: sparkBurst 0.6s ease-out forwards;
    box-shadow: 0 0 6px var(--gold);
}

@keyframes sparkBurst {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}

/* =================== IMAGE ZOOM OVERLAY =================== */
.image-zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 26, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.25s ease;
    cursor: pointer;
}

.image-zoom-overlay img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: var(--radius);
    border: 3px solid var(--gold);
    box-shadow: 0 0 60px rgba(255,215,0,0.2);
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =================== MUMMY DANCE =================== */
.mummy-dance {
    position: fixed;
    bottom: -50px;
    font-size: 2.5rem;
    z-index: 9998;
    pointer-events: none;
    animation: mummyJump 2.5s ease-out forwards;
}

@keyframes mummyJump {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    25% { transform: translateY(-40vh) rotate(-15deg); }
    40% { transform: translateY(-25vh) rotate(10deg); }
    55% { transform: translateY(-45vh) rotate(-10deg); }
    70% { transform: translateY(-30vh) rotate(15deg); }
    85% { transform: translateY(-50vh) rotate(-5deg); opacity: 0.6; }
    100% { transform: translateY(-60vh) rotate(0deg); opacity: 0; }
}

/* =================== RESPONSIVE =================== */
@media (min-width: 768px) {
    .container { max-width: 500px; padding: 0 2rem; }
    .hero { padding: 4rem 0 2rem; }
    .modal-overlay { align-items: center; padding: 1rem; }
    .modal-sheet { border-radius: var(--radius); max-width: 440px; }
    .gallery { grid-template-columns: repeat(3, 1fr); }
    .img-grid { grid-template-columns: repeat(4, 1fr); }
    .assign-players { grid-template-columns: repeat(3, 1fr); }
}

/* =================== SCROLLBAR =================== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }