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

* {
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ================= ثيم 1: Cyberpunk Neon ================= */
.theme-cyberpunk {
    background-color: #0b1320;
    color: #e0e1dd;
}
.theme-cyberpunk .brand-title { color: #00e676; text-shadow: 0 0 10px rgba(0,230,118,0.4); }
.theme-cyberpunk .control-panel, .theme-cyberpunk .modal-box { background-color: #111d2f; border-color: #233956; }
.theme-cyberpunk .sub-box { background-color: #0b1320; border-color: #1f3044; }
.theme-cyberpunk .main-board-wrapper { background-color: #111d2f; border-color: #233956; }
.theme-cyberpunk .local-board-bg { background-color: #0b1320; border-color: #1f3044; }
.theme-cyberpunk .active-local-board { border-color: #00e676 !important; background-color: #0f1c2e !important; }
.theme-cyberpunk .cell-btn { background-color: #172a45; color: #e0e1dd; }
.theme-cyberpunk .cell-btn:hover:not(:disabled) { background-color: #233956; }
.theme-cyberpunk .overlay-bg { background-color: rgba(11, 19, 32, 0.9); }
.theme-cyberpunk .action-btn { background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%); color: white; }
.theme-cyberpunk .undo-btn { background-color: #d97706; color: white; }
.theme-cyberpunk .theme-select { background-color: #111d2f; border: 1px solid #233956; color: #00e676; }
.theme-cyberpunk .input-field { background-color: #0b1320; border: 1px solid #233956; color: white; }

/* ================= ثيم 2: Matrix Emerald ================= */
.theme-matrix {
    background-color: #020804;
    color: #a3e635;
}
.theme-matrix .brand-title { color: #22c55e; text-shadow: 0 0 12px rgba(34,197,94,0.5); }
.theme-matrix .control-panel, .theme-matrix .modal-box { background-color: #06150a; border-color: #14532d; }
.theme-matrix .sub-box { background-color: #020804; border-color: #166534; }
.theme-matrix .main-board-wrapper { background-color: #06150a; border-color: #14532d; }
.theme-matrix .local-board-bg { background-color: #020804; border-color: #166534; }
.theme-matrix .active-local-board { border-color: #4ade80 !important; background-color: #062811 !important; }
.theme-matrix .cell-btn { background-color: #0f2918; color: #86efac; }
.theme-matrix .cell-btn:hover:not(:disabled) { background-color: #166534; }
.theme-matrix .overlay-bg { background-color: rgba(2, 8, 4, 0.92); }
.theme-matrix .action-btn { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); color: white; }
.theme-matrix .undo-btn { background-color: #ca8a04; color: white; }
.theme-matrix .theme-select { background-color: #06150a; border: 1px solid #14532d; color: #4ade80; }
.theme-matrix .input-field { background-color: #020804; border: 1px solid #14532d; color: white; }

/* ================= ثيم 3: Dark Obsidian ================= */
.theme-obsidian {
    background-color: #09090b;
    color: #f4f4f5;
}
.theme-obsidian .brand-title { color: #e4e4e7; text-shadow: 0 0 10px rgba(228,228,231,0.3); }
.theme-obsidian .control-panel, .theme-obsidian .modal-box { background-color: #121216; border-color: #27272a; }
.theme-obsidian .sub-box { background-color: #09090b; border-color: #3f3f46; }
.theme-obsidian .main-board-wrapper { background-color: #121216; border-color: #27272a; }
.theme-obsidian .local-board-bg { background-color: #09090b; border-color: #27272a; }
.theme-obsidian .active-local-board { border-color: #f4f4f5 !important; background-color: #18181b !important; }
.theme-obsidian .cell-btn { background-color: #1f1f23; color: #e4e4e7; }
.theme-obsidian .cell-btn:hover:not(:disabled) { background-color: #27272a; }
.theme-obsidian .overlay-bg { background-color: rgba(9, 9, 11, 0.95); }
.theme-obsidian .action-btn { background: linear-gradient(135deg, #52525b 0%, #27272a 100%); color: white; }
.theme-obsidian .undo-btn { background-color: #71717a; color: white; }
.theme-obsidian .theme-select { background-color: #121216; border: 1px solid #27272a; color: #f4f4f5; }
.theme-obsidian .input-field { background-color: #09090b; border: 1px solid #27272a; color: white; }

/* ================= ثيم 4: Sunset Vaporwave ================= */
.theme-vaporwave {
    background-color: #120b1f;
    color: #f3e8ff;
}
.theme-vaporwave .brand-title { color: #f472b6; text-shadow: 0 0 12px rgba(244,114,182,0.5); }
.theme-vaporwave .control-panel, .theme-vaporwave .modal-box { background-color: #1e1333; border-color: #4c1d95; }
.theme-vaporwave .sub-box { background-color: #120b1f; border-color: #581c87; }
.theme-vaporwave .main-board-wrapper { background-color: #1e1333; border-color: #4c1d95; }
.theme-vaporwave .local-board-bg { background-color: #120b1f; border-color: #3b0764; }
.theme-vaporwave .active-local-board { border-color: #ec4899 !important; background-color: #291247 !important; }
.theme-vaporwave .cell-btn { background-color: #2e1065; color: #fbcfe8; }
.theme-vaporwave .cell-btn:hover:not(:disabled) { background-color: #4c1d95; }
.theme-vaporwave .overlay-bg { background-color: rgba(18, 11, 31, 0.93); }
.theme-vaporwave .action-btn { background: linear-gradient(135deg, #db2777 0%, #7c3aed 100%); color: white; }
.theme-vaporwave .undo-btn { background-color: #9333ea; color: white; }
.theme-vaporwave .theme-select { background-color: #1e1333; border: 1px solid #4c1d95; color: #f472b6; }
.theme-vaporwave .input-field { background-color: #120b1f; border: 1px solid #4c1d95; color: white; }

/* Network Grid Layout */
.ultimate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.local-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

/* Screen Shake Effect */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    20% { transform: translate(-2px, 0px) rotate(-1deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    60% { transform: translate(-1px, 1px) rotate(0deg); }
    80% { transform: translate(2px, 1px) rotate(1deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}
.shake-effect {
    animation: shake 0.4s ease-in-out;
}