.rooms-page { width:min(1220px,100%); margin:0 auto; padding:20px 14px 60px; }
.rooms-shell { background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(239,246,255,.94)); border:1px solid rgba(148,163,184,.24); border-radius:28px; padding:clamp(18px,3vw,34px); box-shadow:0 24px 70px rgba(15,23,42,.10); overflow:hidden; }
.rooms-topbar { display:flex; justify-content:flex-start; margin-bottom:12px; }
.rooms-home-btn { display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:11px 18px; border-radius:14px; background:#173b8f; color:#fff; font-weight:800; box-shadow:0 10px 22px rgba(23,59,143,.22); }
.rooms-hero { text-align:center; padding:10px 0 26px; }
.rooms-hero-icon { font-size:clamp(46px,9vw,72px); animation:v35Float 4s ease-in-out infinite; }
.rooms-hero h1 { margin:8px 0; font-size:clamp(30px,5vw,48px); background:linear-gradient(90deg,#173b8f,#7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rooms-hero p { color:#52627a; font-size:clamp(16px,2.5vw,20px); margin:0; }
.rooms-player { margin:18px auto 0; max-width:620px; padding:15px; border:1px solid #dbeafe; border-radius:18px; background:rgba(255,255,255,.78); }
.rooms-name-form { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.rooms-name-form input { flex:1; min-width:220px; min-height:50px; padding:12px 15px; border:1px solid #cbd5e1; border-radius:14px; text-align:center; background:#fff; }
.rooms-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.room-mode-card { display:flex; flex-direction:column; align-items:center; text-align:center; min-height:300px; padding:25px 20px; background:rgba(255,255,255,.94); border:1px solid #e2e8f0; border-top:5px solid var(--card-accent,#2563eb); border-radius:22px; box-shadow:0 12px 30px rgba(15,23,42,.07); }
.room-mode-card:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(15,23,42,.12); }
.room-mode-icon { font-size:48px; margin-bottom:8px; }
.room-mode-card h2 { font-size:22px; margin:4px 0 10px; }
.room-mode-card p { color:#64748b; line-height:1.8; margin:0 0 18px; flex:1; }
.room-mode-card .mode-btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; width:100%; padding:11px 18px; border:0; border-radius:14px; color:#fff; font-weight:800; font-size:17px; cursor:pointer; }
.room-mode-card small { color:#64748b; margin-top:10px; }
.rooms-alert { margin:0 0 18px; padding:14px 16px; border-radius:15px; text-align:center; font-weight:700; }
.rooms-alert.error { background:#fee2e2; color:#991b1b; }
.rooms-active { margin-bottom:20px; padding:18px; border:1px solid #bfdbfe; border-radius:18px; background:#eff6ff; text-align:center; }
.rooms-active a { display:inline-flex; margin-top:8px; min-height:46px; align-items:center; padding:10px 20px; border-radius:12px; background:#2563eb; color:#fff; font-weight:800; }
.rooms-link-btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:11px 22px; border-radius:14px; color:#fff; font-weight:800; width:100%; }
@media (max-width:1000px) { .rooms-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .rooms-page{padding:8px 8px 35px}.rooms-shell{border-radius:20px;padding:14px}.rooms-grid{grid-template-columns:1fr;gap:14px}.room-mode-card{min-height:250px;padding:21px 17px}.rooms-home-btn{width:100%;justify-content:center}.rooms-name-form{flex-direction:column}.rooms-name-form input,.rooms-name-form button{width:100%;min-width:0}.rooms-hero{padding-bottom:18px} }
.form-page{width:min(720px,100%);margin:0 auto;padding:20px 12px 60px}.form-shell{background:rgba(255,255,255,.95);border:1px solid #e2e8f0;border-radius:26px;padding:clamp(22px,5vw,42px);box-shadow:0 24px 60px rgba(15,23,42,.10);text-align:center}.form-icon{font-size:clamp(48px,12vw,70px);animation:v35Float 4s ease-in-out infinite}.form-shell h1{font-size:clamp(27px,5vw,40px);margin:8px 0 12px}.form-shell p{color:#64748b;line-height:1.9}.form-shell label{display:block;margin:18px 0 8px;font-weight:800}.form-shell input,.form-shell textarea{width:100%;padding:14px 16px;border:1px solid #cbd5e1;border-radius:14px;background:#fff;outline:none}.form-shell input{min-height:52px;font-size:22px;text-align:center;letter-spacing:3px}.form-shell textarea{min-height:120px;resize:vertical}.form-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}.form-actions .mode-btn{min-width:190px}.form-back{display:inline-flex;margin-top:18px;color:#2563eb;font-weight:800}

.rooms-name-form select{width:100%;min-height:48px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;font:inherit}.rooms-player-flag{font-size:1.2em;margin-inline:4px}

/* V45 — pays détecté automatiquement par IP */
.rooms-country-detected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .7rem .9rem;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 12px;
    background: rgba(37, 99, 235, .06);
}
.rooms-country-detected small { flex-basis: 100%; opacity: .78; }

/* ============================================================
   V47 — Refonte des 4 modes de jeu : attractive, professionnelle
   Mobile First — Smartphone → Tablet → Desktop
   ============================================================ */
.rooms-grid {
    align-items: stretch;
    margin-top: 8px;
}

.room-mode-card {
    position: relative;
    isolation: isolate;
    min-height: 340px;
    padding: 28px 22px 24px;
    overflow: hidden;
    border-width: 1px;
    border-top-width: 6px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.room-mode-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--card-accent,#2563eb) 12%, transparent), transparent 52%);
    pointer-events: none;
}

.room-mode-card::after {
    content: '';
    position: absolute;
    width: 130px;
    height: 130px;
    top: -62px;
    left: -48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--card-accent,#2563eb) 8%, transparent);
    z-index: -1;
    pointer-events: none;
}

.room-mode-card:hover,
.room-mode-card:focus-within {
    transform: translateY(-7px);
    box-shadow: 0 22px 48px rgba(15,23,42,.14);
    border-color: color-mix(in srgb, var(--card-accent,#2563eb) 32%, #e2e8f0);
}

.room-mode-icon {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    margin: 0 auto 14px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--card-accent,#2563eb) 10%, white);
    border: 1px solid color-mix(in srgb, var(--card-accent,#2563eb) 18%, #e2e8f0);
    box-shadow: 0 12px 26px rgba(15,23,42,.08);
    font-size: 43px;
    line-height: 1;
    animation: v47Float 4.5s ease-in-out infinite;
}

.room-mode-card:nth-child(2) .room-mode-icon { animation-delay: -.7s; }
.room-mode-card:nth-child(3) .room-mode-icon { animation-delay: -1.4s; }
.room-mode-card:nth-child(4) .room-mode-icon { animation-delay: -2.1s; }

.room-mode-card h2 {
    font-size: clamp(21px, 2vw, 25px);
    line-height: 1.35;
    margin: 2px 0 11px;
}

.room-mode-card p {
    max-width: 31ch;
    font-size: 15.5px;
    line-height: 1.9;
    margin-bottom: 20px;
}

.room-mode-card .mode-btn,
.room-mode-card .rooms-link-btn {
    min-height: 56px;
    margin-top: auto;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 10px 22px rgba(15,23,42,.13);
    font-size: 17px;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.room-mode-card .mode-btn:hover,
.room-mode-card .rooms-link-btn:hover {
    filter: brightness(1.04);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(15,23,42,.17);
}

.room-mode-card .mode-btn:active,
.room-mode-card .rooms-link-btn:active {
    transform: translateY(1px);
}

.room-mode-card small {
    display: block;
    min-height: 21px;
    margin-top: 12px;
    line-height: 1.6;
}

.room-mode-card small::before {
    content: '•';
    margin-inline-end: 5px;
    color: var(--card-accent,#2563eb);
    font-weight: 900;
}

@keyframes v47Float {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(-1deg); }
}

@media (min-width: 1001px) {
    .rooms-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (min-width: 601px) and (max-width: 1000px) {
    .room-mode-card { min-height: 325px; }
}

@media (max-width: 600px) {
    .rooms-grid { margin-top: 2px; }
    .room-mode-card {
        min-height: 0;
        padding: 24px 18px 20px;
        border-radius: 20px;
    }
    .room-mode-icon {
        width: 72px;
        height: 72px;
        border-radius: 21px;
        font-size: 38px;
    }
    .room-mode-card p {
        max-width: none;
        font-size: 15px;
        margin-bottom: 18px;
    }
    .room-mode-card .mode-btn,
    .room-mode-card .rooms-link-btn {
        min-height: 58px;
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .room-mode-card,
    .room-mode-icon,
    .room-mode-card .mode-btn,
    .room-mode-card .rooms-link-btn { animation: none; transition: none; }
    .room-mode-card:hover,
    .room-mode-card:focus-within,
    .room-mode-card .mode-btn:hover,
    .room-mode-card .rooms-link-btn:hover { transform: none; }
}

/* V48 - واجهات الجلسات الفعلية */
.session-nav{width:min(1100px,calc(100% - 24px));margin:14px auto 0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;direction:rtl}
.session-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 18px;border-radius:14px;text-decoration:none;font-weight:900;font-size:16px;transition:transform .18s ease,box-shadow .18s ease;background:#fff;border:1px solid #dbe4f0;color:#173b8f;box-shadow:0 7px 18px rgba(15,23,42,.07);touch-action:manipulation}
.session-nav a:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,23,42,.11)}
.session-nav a:active{transform:translateY(0)}
.session-nav a.primary{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;border-color:transparent}
.session-nav a.rank{background:linear-gradient(135deg,#fff7ed,#fffbeb);color:#9a3412;border-color:#fed7aa}
.session-nav + .form-page,.session-nav + #multiplayer-room{margin-top:12px!important}
.session-nav + #multiplayer-room{margin-top:12px!important}
@media(max-width:520px){.session-nav{width:calc(100% - 16px);gap:8px}.session-nav a{flex:1 1 calc(50% - 8px);min-height:50px;padding:10px 8px;font-size:15px}}