/* إخفاء شريط التمرير */
        ::-webkit-scrollbar { display: none; }
        html { -ms-overflow-style: none; scrollbar-width: none; }

        /* استيراد خط القاهرة من Google Fonts */
        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&display=swap');
        
        body {
            font-family: 'AAGalaxy', sans-serif;
            margin: 0;
            padding: 0;
        }
        
        /* الخلفية الرئيسية (ألوان زجاجية متدرجة) */
        .gradient-bg {
            background: linear-gradient(135deg, #00b5b5, #e07d51, #ffce18);
            /* ** إصلاح 1: إضافة min-h-screen هنا للسماح بالتمرير الطبيعي ** */
            min-height: 100vh; 
        }
        
        /* تأثيرات البطاقات */
        .card-hover {
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            color: #fff;
        }

        /* متغيرات CSS للتحكم الديناميكي في الأحجام */
        :root {
            --pointer-size: 20px; 
            --name-display-width: 60vw; 
            --name-display-height: 20vh; 
        }

        /* تنسيقات عجلة الحظ */
        .wheel-container {
            position: relative;
            /* جعل العجلة تأخذ أقصى مساحة ممكنة مع ترك هامش بسيط على الجوال */
            width: min(90vw, 80vh);
            height: min(90vw, 80vh);
            margin: 0 auto;
            overflow: visible;
        }
        
        .wheel {
            width: 100%; 
            height: 100%; 
            border-radius: 50%;
            transition: transform ease-out;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            position: relative;
            overflow: hidden;
            cursor: grab; 
        }
        .wheel:active {
            cursor: grabbing;
        }

        /* مؤشر SVG الاحترافي الجديد */
        .pin-pointer {
            position: absolute;
            top: 50%;
            left: 100%; 
            transform: translate(-92%, -50%); /* تعديل طفيف ليتناسب مع الحجم الجديد */
            z-index: 100;
            pointer-events: none;
            /* استخدام وحدات ديناميكية ليكون متوازناً (أصغر قليلاً من السابق) */
            width: clamp(45px, 6vw, 65px);
            height: clamp(45px, 6vw, 65px);
            /* ظل أسود خفيف وناعم لإعطاء عمق (3D) للمؤشر */
            filter: drop-shadow(-4px 4px 6px rgba(0,0,0,0.5));
            transition: transform 0.1s ease;
            transform-origin: right center; /* جعل نقطة الارتكاز في الخلف ليعطي ارتداداً طبيعياً */
        }
        
        /* الحركة الاهتزازية للمؤشر */
        .wobble {
            animation: none; /* تم إلغاء الأنيميشن المستمر هنا لأننا سنستخدم transition من خلال JS */
            transform-origin: right center; /* جعل نقطة الارتكاز في المسمار الخلفي (يمين) */
        }
        
        /* كلاس لتطبيق الاهتزازة (Hit) عبر الجافاسكربت */
        .pin-hit {
            transform: translate(-92%, -50%) rotate(25deg) !important; /* المؤشر ينحني للأسفل بشكل ملحوظ */
            transition: transform 0.05s ease-out !important; /* حركة سريعة جداً كأنه ضرب المسمار */
        }
        
        @keyframes numberPulse {
            0% { transform: scale(1) translateY(0); text-shadow: 0 0 10px rgba(255, 255, 255, 0.4); }
            40% { transform: scale(1.12) translateY(-4px); text-shadow: 0 0 16px rgba(255, 255, 255, 0.7); }
            100% { transform: scale(1) translateY(0); text-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
        }
        
        /* تنسيقات النرد */
        .dice-wrapper { perspective: 800px; display: flex; justify-content: center; align-items: center; gap: 20px; }
        
        /* غلاف للحركة القفزية */
        .dice-anim-wrapper {
            position: relative;
            width: 100px; height: 100px;
        }
        .dice-anim-wrapper.jumping {
            animation: diceJump 1.5s ease-out forwards;
        }

        @keyframes diceJump {
            0% { transform: translateY(0); }
            20% { transform: translateY(-150px) scale(1.1); } /* قفزة للأعلى */
            40% { transform: translateY(0); } /* هبوط */
            50% { transform: translateY(-30px); } /* ارتداد بسيط */
            60% { transform: translateY(0); }
            70% { transform: translateY(-10px); } /* ارتداد أخير */
            100% { transform: translateY(0); }
        }

        .dice-container { width: 100px; height: 100px; position: relative; transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
        .dice-face {
            position: absolute; width: 100%; height: 100%; background: linear-gradient(145deg, #ffffff, #f0f0f0); border: 1px solid #ddd;
            display: flex; align-items: center; justify-content: center; border-radius: 4px;
            box-shadow: inset 0 0 15px rgba(0,0,0,0.05); font-size: 3rem; font-weight: bold; color: #333;
            backface-visibility: hidden; /* تحسين الأداء والمظهر */
        }
        /* تحسين شكل النقاط/الأرقام لتبدو محفورة */
        .dice-face {
             text-shadow: 1px 1px 0 #fff, -1px -1px 0 rgba(0,0,0,0.1);
        }

        .dice-face.one { transform: rotateY(0deg) translateZ(50px); }
        .dice-face.two { transform: rotateX(-90deg) translateZ(50px); } /* تعديل الزاوية لتناسب المنطق */
        .dice-face.three { transform: rotateY(90deg) translateZ(50px); }
        .dice-face.four { transform: rotateY(-90deg) translateZ(50px); }
        .dice-face.five { transform: rotateX(90deg) translateZ(50px); } /* تعديل الزاوية لتناسب المنطق */
        .dice-face.six { transform: rotateY(180deg) translateZ(50px); }
        
        /* تنسيقات العملة المحسنة */
        .coin-container { 
            perspective: 1200px; 
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px; /* مساحة كافية للدوران */
        }
        .coin {
            width: 200px; 
            height: 200px; 
            position: relative; 
            transform-style: preserve-3d;
            transition: transform 3s cubic-bezier(0.15, 0.25, 0.25, 1); /* حركة أكثر سلاسة */
        }
        
        /* الطبقات الأساسية */
        .coin-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            backface-visibility: hidden; /* إخفاء الخلفية لمنع التداخل البصري */
        }

        /* الوجه الأمامي */
        .coin-front-face {
            transform: translateZ(10px); /* تقديم للأمام */
            background-color: #fcd34d; /* لون ذهبي فاتح */
            box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
            z-index: 2;
            border: 1px solid #f8a241; /* إخفاء الحواف البيضاء */
        }
        .coin-front-face img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        /* الوجه الخلفي */
        .coin-back-face {
            transform: rotateY(180deg) translateZ(10px); /* تدوير ودفع للخلف (نفس المسافة الموجبة لأنها دارت) */
            background-color: #fcd34d; /* لون ذهبي فاتح */
            box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
            z-index: 2;
            border: 1px solid #f8a241; /* إخفاء الحواف البيضاء */
        }
        .coin-back-face img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        /* طبقات الحافة (Edge) */
        .coin-edge-layer {
            background: #f8a241;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            /* لا نحتاج backface-visibility هنا لأننا نريد رؤيتها من الجوانب */
            backface-visibility: visible; 
            border: 1px solid rgba(0,0,0,0.1); /* حدود خفيفة للواقعية */
        }
        
        /* حركة الرمي للأعلى (Toss) مع محاكاة الجاذبية */
        @keyframes coinToss {
            0% { 
                transform: translateY(0) scale(1); 
                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* Ease Out Cubic (Decelerate) */
            }
            50% { 
                transform: translateY(-200px) scale(1.3); /* تقليل الارتفاع والتكبير لعدم الخروج من الشاشة */
                animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); /* Ease In Cubic (Accelerate) */
            }
            100% { 
                transform: translateY(0) scale(1); 
            }
        }

        .toss-animation {
            animation: coinToss 1s forwards; /* المدة ستحدد عبر JS */
        }
        
        /* حركة الارتداد عند السقوط (Bounce) */
        @keyframes coinBounce {
            0% { transform: translateY(0); }
            40% { transform: translateY(-30px); }
            65% { transform: translateY(0); }
            80% { transform: translateY(-15px); }
            100% { transform: translateY(0); }
        }
        
        .bounce-anim {
            animation: coinBounce 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }
        
        /* تنسيق نوافذ الفرق (لترتيب الأسماء) */
        .team-red { background-color: rgba(220, 38, 38, 0.3); border-color: #dc2626; } 
        .team-blue { background-color: rgba(37, 99, 235, 0.3); border-color: #2563eb; }
        .team-green { background-color: rgba(16, 185, 129, 0.3); border-color: #10b981; }
        .team-yellow { background-color: rgba(251, 191, 36, 0.3); border-color: #fca51f; }
        .team-purple { background-color: rgba(168, 85, 247, 0.3); border-color: #a855f7; }
        .team-orange { background-color: rgba(249, 115, 22, 0.3); border-color: #f97316; }

        /* تنسيق الأزرار وعناصر القائمة المنسدلة في وضع Glass */
        .options-modal .modal-content textarea, .options-modal .modal-content input[type="number"] {
            color: #1f2937; 
            background-color: rgba(255, 255, 255, 0.8); 
            border: 1px solid rgba(255, 255, 255, 0.5);
        }
        
        /* تنسيق العنوان */
        .text-gradient {
            background-image: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* تنسيقات نافذة الإدارة المنبثقة */
        .options-modal {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px);
            display: flex; justify-content: center; align-items: center; z-index: 1500; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
        }
        .options-modal.visible { opacity: 1; pointer-events: auto; }
        .options-modal .modal-content {
            background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); color: #fff; padding: 2rem; border-radius: 20px;
            width: 90%; max-width: 500px; text-align: right; transform: translateY(-20px); transition: transform 0.3s ease;
            max-height: 90vh; display: flex; flex-direction: column;
        }
        .options-modal.visible .modal-content { transform: translateY(0); }
        
        /* جعل رأس النافذة ثابتاً أثناء التمرير في الجوال */
        .options-modal .modal-header {
            flex-shrink: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        .options-modal .modal-body {
            flex-grow: 1;
            overflow-y: auto;
            padding-right: 0.5rem; /* لمنع تداخل النص مع شريط التمرير */
        }
        
        /* تنسيقات النافذة المنبثقة للنتائج */
        .result-popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            z-index: 2000; 
            background: linear-gradient(135deg, #ff6b6b, #ffd93d);
            color: white;
            padding: 2rem;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            text-align: center;
            min-width: 300px;
            animation: popupShow 0.5s ease-out forwards;
        }
        @keyframes popupShow {
            0% { transform: translate(-50%, -50%) scale(0) rotate(180deg); opacity: 0; }
            50% { transform: translate(-50%, -50%) scale(1.1) rotate(0deg); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
        }
        
        /* تنسيقات قصاصات الاحتفال (النسخة الجديدة المعتمدة على مكتبة) */
        .confetti-container {
            display: none; 
        }
        
        /* تنسيقات دائرة الرقم الكبيرة الجديدة */
        .large-number-circle {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            /* تعديل: تحويل الدائرة إلى مستطيل ذو حواف دائرية (Pill-shape) مرن لدعم الأرقام الطويلة جداً */
            border-radius: 40px; 
            display: inline-flex;
            justify-content: center;
            align-items: center;
            box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 10px 30px rgba(0, 0, 0, 0.2);
            border: 4px solid rgba(255, 255, 255, 0.5);
            /* استخدام الحشوة (Padding) بدلاً من الطول/العرض الثابت ليسمح بالتمدد الأفقي */
            padding: 1rem 3rem;
            min-width: clamp(150px, 30vw, 300px); /* لضمان شكل متناسق حتى لو كان الرقم صغيراً (مثال: 1) */
            margin: 0 auto;
            transition: width 0.3s ease, height 0.3s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }
        
        .large-number-circle span {
            font-size: clamp(3rem, 15vw, 12rem); /* خط ديناميكي ذكي للأرقام */
            font-weight: bold;
            color: #0f172a;
            text-shadow: 0 3px 10px rgba(15, 23, 42, 0.6);
            /* animation: numberPulse 0.4s ease-out;  <-- Removed default to control via JS */
            line-height: 1; /* لمنع المساحات الزائدة أعلى وأسفل الرقم */
        }
        
        /* إعدادات النافذة المنبثقة المصغرة (Tooltip) لإرجاع الرقم */
        .number-tooltip {
            position: fixed; /* تغيير إلى fixed لتجاهل overflow الحاويات */
            background: rgba(15, 23, 42, 0.98) !important;
            color: white !important;
            padding: 8px 12px !important;
            border-radius: 8px !important;
            font-size: 0.85rem !important;
            font-weight: bold !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            z-index: 999999 !important; /* أعلى طبقة ممكنة */
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            pointer-events: auto !important;
            /* توسيط وتحديد الموضع عبر الجافاسكربت */
            transform: translate(-50%, -10px) !important;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
            white-space: nowrap !important;
        }
        
        .number-tooltip.show {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translate(-50%, 0) !important;
        }
        
        /* السهم الصغير أسفل النافذة المنبثقة */
        .number-tooltip::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px 5px 0;
            border-style: solid;
            border-color: rgba(15, 23, 42, 0.95) transparent transparent transparent;
        }
        
        /* زر الإرجاع داخل الـ Tooltip */
        .return-number-btn {
            background: #ef4444;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.75rem;
            transition: background 0.2s;
        }
        
        .return-number-btn:hover {
            background: #dc2626;
        }

        /* حاوية الأرقام (مهمة لتموضع الـ Tooltip) */
        .number-badge-wrapper {
            position: relative;
            display: inline-block;
            margin: 2px; /* مسافة إضافية لتجنب تداخل الـ tooltip مع الحواف المخفية overflow:hidden */
        }
        
        /* حركة تصاعد الأرقام السريعة */
        .number-animation {
            animation: numberSlot 0.08s linear infinite; /* أسرع بكثير من الأسماء */
            opacity: 0.9;
            filter: blur(2px);
        }
        
        @keyframes numberSlot {
            0% { transform: translateY(-20px) scale(0.9); opacity: 0; }
            50% { transform: translateY(0) scale(1.05); opacity: 1; }
            100% { transform: translateY(20px) scale(0.9); opacity: 0; }
        }

        /* تأثير الفوز النهائي */
        @keyframes popAnim {
            0% { transform: scale(0.5); opacity: 0; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        .pop-number {
            animation: popAnim 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            /* الإبقاء على اللون الأسود الأصلي (#0f172a) مع إضافة توهج (نبض) ذهبي ناصع حول الرقم */
            color: #0f172a !important;
            text-shadow: 0 0 30px rgba(253, 224, 71, 0.8), 0 0 10px rgba(253, 224, 71, 0.5) !important;
        }

        /* تنسيقات منطقة عرض الاسم الفائز (مستطيل) */
        .large-name-display {
            width: min(90vw, 800px);
            min-height: min(40vh, 300px);
            margin: 0 auto; padding: 2rem; display: flex; flex-direction: column;
            align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border-radius: 20px; text-align: center; transition: all 0.3s ease;
            overflow-x: auto;
            position: relative; /* Added for absolute positioning of children */
        }
        .large-name-display p {
            font-size: 1.8rem;
            font-weight: 900;
            color: #fff;
            margin-bottom: 0; /* Removed margin as it's now absolute */
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
            padding: 0.5rem 2.5rem;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            position: absolute; /* Fixed position relative to container */
            top: 2rem; /* Spacing from top */
            z-index: 10;
        }
        .large-name-display span {
            font-size: clamp(3rem, 15vw, 15rem); /* تعديل CSS ليسمح بتكبير الخط حتى 15rem في الشاشات الضخمة */
            font-weight: 800; color: white; max-width: 100%; padding: 0.2em 1rem;
            line-height: 1.5;
            white-space: normal; overflow: visible; text-overflow: clip;
            word-wrap: break-word;
            transition: transform 0.1s ease, filter 0.1s ease;
            text-shadow: 0 4px 15px rgba(0,0,0,0.3);
            display: inline-block;
            margin-top: 3rem;
        }
        
        /* تأثيرات الأسماء أثناء السحب (Slot Machine Effect) */
        .name-rolling {
            animation: slotMachine 0.1s linear infinite;
            opacity: 0.8;
            filter: blur(1px);
        }
        
        @keyframes slotMachine {
            0% { transform: translateY(-30px); opacity: 0; }
            50% { transform: translateY(0); opacity: 1; }
            100% { transform: translateY(30px); opacity: 0; }
        }

        /* تأثير الفوز النهائي للأسماء */
        .pop-name {
            animation: winnerPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            color: #fde047 !important; /* لون ذهبي للتميز */
            text-shadow: 0 0 20px rgba(253, 224, 71, 0.6) !important;
        }
        
        @keyframes winnerPop {
            0% { transform: scale(0.5); opacity: 0; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        /* تنسيقات السحب والإفلات */
        .name-item.selected {
            background-color: #fff;
            color: #333;
            border-color: #4f46e5;
            box-shadow: 0 0 15px rgba(79, 70, 229, 0.5);
            transform: scale(1.05);
        }
        .custom-modal {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);
            display: flex; justify-content: center; align-items: center; z-index: 2000; 
        }
        .custom-modal .modal-content {
            background: white; padding: 2rem; border-radius: 10px; max-width: 400px; width: 90%;
        }

        /* تنسيقات الفرق المخصصة */
        /* للعرض على الشاشات الكبيرة فقط */
        @media (min-width: 1024px) {
            .team-layout-2 {
                /* فريقان: مستطيلان كبيران بجانب بعضهما */
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-auto-rows: 1fr;
                gap: 1rem;
            }
            .team-layout-3 {
                /* ثلاثة فرق: ثلاث مستطيلات بالطول بجانب بعضها */
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-auto-flow: column;
            }
            .team-layout-4 {
                /* أربعة فرق: 2x2 شبكة */
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(2, 1fr);
                gap: 1rem; 
            }
            .team-layout-5 {
                /* خمسة فرق: 3 فوق و 2 تحت (باستخدام Flexbox للالتفاف) */
                display: flex;
                flex-wrap: wrap;
            }
            .team-layout-5 > div {
                flex: 1 1 30%; 
                min-width: 200px;
            }
            .team-layout-6 {
                /* ستة فرق: 3 فوق و 3 تحت */
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(2, 1fr);
                gap: 1rem;
            }
        }
        @media (max-width: 1023px) {
            #teamsContainer > div {
                min-width: 256px; 
                width: 256px;
                flex-shrink: 0;
            }
            .team-column {
                height: auto !important;
                min-height: 16rem;
                max-height: none !important;
                overflow-y: visible !important;
                padding-top: 1rem;
                padding-bottom: 1rem;
            }
        }
        
        /* تحسين عرض الأسماء على الجوال */
        @media (max-width: 768px) {
            .large-name-display span {
                white-space: normal !important;
                word-wrap: break-word;
                display: block; 
                line-height: 1.3;
            }
            .large-name-display {
                height: auto; 
                min-height: 40vh;
            }
        }

        @media (min-width: 1024px) {
            #teamsContainer.team-layout-3 .team-column,
            #teamsContainer.team-layout-2 .team-column {
                height: auto;
                min-height: 24rem;
                max-height: 80vh;
            }
            #teamsContainer.team-layout-4 .team-column {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-auto-rows: auto;
                gap: 0.5rem;
                overflow-y: auto;
                align-content: flex-start;
            }
        }

        /* تنسيق زر الحذف (✕) الجديد */
        .remove-btn {
            @apply text-red-300 hover:text-red-100 text-sm p-1 rounded-full w-6 h-6 flex items-center justify-center;
            font-size: 1rem;
            line-height: 1; /* لضمان تمركز "✕" */
            font-weight: bold;
        }
        /* ------------------------------------------------------------- */
        /* نمط أزرار النرد الصغير (محتفظ به للنرد) */
        /* ------------------------------------------------------------- */
        
        /* تضييق عرض النرد على الأجهزة الصغيرة */
        #diceCountRadios {
            max-width: 200px !important; 
        }

        .radio-inputs {
            /* يتم الاحتفاظ بهذا النمط للنرد فقط لسهولة التمييز */
            position: relative;
            display: flex;
            flex-wrap: wrap;
            border-radius: 1rem;
            background: rgba(255, 255, 255, 0.1); 
            box-sizing: border-box;
            box-shadow: 
                0 5px 15px rgba(0, 0, 0, 0.15), 
                inset 0 0 10px rgba(255, 255, 255, 0.1);
            padding: 0.5rem;
            width: 100%; 
            max-width: 450px; 
            margin-right: auto;
            margin-left: auto;
            font-size: 14px;
            gap: 0.5rem;
        }

        .radio-inputs .radio { flex: 1 1 auto; text-align: center; position: relative; }
        .radio-inputs .radio input { display: none; }
        .radio-inputs .radio .name {
            display: flex; cursor: pointer; align-items: center; justify-content: center;
            border-radius: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.4);
            padding: 0.7rem 0; color: #ffffff; font-weight: 500; font-family: inherit;
            background: rgba(255, 255, 255, 0.15); 
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; overflow: hidden;
        }
        .radio-inputs .radio input:checked + .name {
            background: linear-gradient(145deg, #00b5b5, #e07d51); 
            color: white; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
            box-shadow:
                inset 2px 2px 5px rgba(0, 0, 0, 0.3),
                inset -2px -2px 5px rgba(255, 255, 255, 0.1),
                0 0 15px rgba(255, 206, 24, 0.6); 
            transform: translateY(1px); 
        }

        /* ------------------------------------------------------------- */
        /* نمط أزرار Tabs الجديد لعدد الفرق (gharsh11032000) */
        /* ------------------------------------------------------------- */

        .tabs-container {
            display: flex;
            gap: 8px;
            justify-content: center; /* لتمركز الأزرار في المنتصف */
            flex-wrap: wrap; /* للسماح بالالتفاف على الجوال */
            max-width: 450px;
            margin: 0 auto;
        }
        
        /* تعديل حجم الأزرار على الجوال لتكون أصغر قليلاً لتناسب الشاشة */
        .tab-group {
            flex-grow: 1;
            flex-shrink: 0;
            min-width: 38px; /* الحد الأدنى للعرض */
        }

        .tab-group input {
            appearance: none;
        }

        .tab-group label {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%; /* اجعل الزر يملأ مساحة الـ tab-group */
            height: 48px;
            line-height: 1.6;
            /* تصميم زجاجي افتراضي */
            border: 1px solid rgba(255, 255, 255, 0.5); 
            border-radius: 12px;
            cursor: pointer;
            font-weight: 700;
            position: relative;
            background-color: rgba(255, 255, 255, 0.15); /* خلفية زجاجية */
            color: #ffffff; /* لون نص أبيض لتباين واضح */
            transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
        }

        /* إزالة التأثيرات الزائدة التي تعتمد على العناصر الوهمية لتجنب التعقيد */
        .tab-group label::after, .tab-group label::before {
            content: none !important;
        }
        
        .tab-group label:hover {
            border-color: #00b5b5; /* لون التوهج */
            color: #00b5b5; /* لون النص عند التمرير */
        }

        .tab-group input:checked + label {
            /* لون التحديد: متدرج بين ألوان الخلفية (الأزرق البحري والبرتقالي الخفيف) */
            background: linear-gradient(145deg, #00b5b5, #e07d51); 
            border-color: transparent;
            color: #ffffff;
            scale: 1.1;
            /* ظل التحديد */
            box-shadow: 
                0rem 6px 13px rgba(0, 181, 181, 0.3), /* ظل يتوافق مع لون التحديد */
                0rem 24px 24px rgba(0, 181, 181, 0.2),
                0px 0px 15px 0px rgba(255, 206, 24, 0.6); /* توهج خارجي */
        }

        /* *************** نهاية تنسيقات Tabs *************** */

        /* تنسيق خيارات المودال لتبدو طبيعية وقابلة للقراءة */
        .options-modal .modal-content select {
            color: #1f2937;
            background-color: rgba(255, 255, 255, 0.9); 
            border: 1px solid rgba(255, 255, 255, 0.5);
            appearance: auto;
            -webkit-appearance: auto;
            -moz-appearance: auto;
            padding-left: 1rem;
        }
        .options-modal .modal-content select option {
             color: #1f2937;
        }