/* ============================================================
   تحدي الحروف - غرفة اللعب الجماعي
   Mobile First: هاتف → جهاز لوحي → كمبيوتر
   ============================================================ */
#multiplayer-room {
    width: min(1100px, calc(100% - 24px)) !important;
    margin: 12px auto 28px !important;
    padding: 14px !important;
    overflow-x: clip;
}

#multiplayer-room * { box-sizing: border-box; }

.room-home-bar {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 12px;
}

.room-home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #eef2ff;
    color: #173b8f;
    text-decoration: none;
    font-weight: 800;
    border: 1px solid #c7d2fe;
    touch-action: manipulation;
}

.room-home-button:active { transform: translateY(1px); }

#multiplayer-room input,
#multiplayer-room button,
#multiplayer-room a { font: inherit; }

#multiplayer-room input {
    min-height: 46px;
    font-size: 16px;
}

#multiplayer-room button,
#multiplayer-room .request-answer-review-btn,
#multiplayer-room .inline-review-btn {
    min-height: 46px;
    touch-action: manipulation;
}

#players {
    grid-template-columns: 1fr !important;
}

#game-panel,
#results-panel,
#waiting-panel {
    padding: 16px !important;
    border-radius: 16px !important;
}

#game-panel form > div {
    grid-template-columns: 1fr !important;
}

#game-panel form label {
    width: 100%;
    min-height: 58px;
}

#game-panel form label strong {
    min-width: 78px !important;
}

#results-table {
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    border-radius: 12px;
}

.multiplayer-results-table {
    min-width: 820px;
}

.multiplayer-results-table th,
.multiplayer-results-table td {
    padding: 9px !important;
    vertical-align: middle;
}

.multiplayer-results-table .answer-cell-main {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.request-answer-review-btn {
    width: 100%;
    max-width: 170px;
    margin: 7px auto 0 !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

.inline-answer-review { margin-top: 7px !important; }

.inline-review-box { width: 100%; }

.inline-review-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 7px !important;
}

.inline-review-btn {
    width: 100%;
    padding: 9px 7px !important;
    font-size: 13px !important;
}

#countdown-number { font-size: clamp(56px, 18vw, 88px) !important; }
#letter { font-size: clamp(38px, 14vw, 52px) !important; }
#timer { font-size: clamp(28px, 9vw, 38px) !important; }

@media (min-width: 600px) {
    #multiplayer-room { width: min(1100px, calc(100% - 32px)) !important; padding: 18px !important; }
    #players { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #game-panel form > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #game-panel, #results-panel, #waiting-panel { padding: 22px !important; }
}

@media (min-width: 900px) {
    #multiplayer-room { margin-top: 24px !important; padding: 20px !important; }
    #players { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }
    #game-panel form > div { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }
    #game-panel, #results-panel, #waiting-panel { padding: 25px !important; }
    .room-home-bar { margin-bottom: 8px; }
}

@media (max-width: 380px) {
    #multiplayer-room { width: calc(100% - 12px) !important; padding: 8px !important; }
    #multiplayer-room h1 { font-size: 25px !important; }
    #multiplayer-room h2 { font-size: 20px !important; }
    #room-code { letter-spacing: 2px !important; }
    #game-panel form label strong { min-width: 66px !important; font-size: 14px; }
    .request-answer-review-btn { font-size: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
    #multiplayer-room * { scroll-behavior: auto !important; }
}

/* V37: cadre de réclamation et contrôles tactiles */
.complaint-box{
    margin:28px 0 0!important;
    padding:clamp(18px,4vw,30px)!important;
    border:2px solid rgba(249,115,22,.22)!important;
    border-radius:24px!important;
    background:linear-gradient(145deg,#fff7ed 0%,#ffffff 72%)!important;
    box-shadow:0 18px 45px rgba(15,23,42,.10)!important;
}
.complaint-box h3{margin:0 0 8px!important;font-size:clamp(20px,4.8vw,28px)!important}
.complaint-box p{margin:0 0 18px!important;line-height:1.8;color:#475569}
.complaint-form{display:grid!important;gap:14px!important}
.complaint-form select,.complaint-form input,.complaint-form textarea{
    width:100%!important;box-sizing:border-box!important;
    min-height:54px!important;padding:14px 16px!important;
    border:2px solid #dbe3ee!important;border-radius:14px!important;
    background:#fff!important;color:#0f172a!important;font:inherit!important;
    font-size:16px!important;outline:none;
}
.complaint-form textarea{min-height:140px!important;line-height:1.7;resize:vertical}
.complaint-form select:focus,.complaint-form textarea:focus{border-color:#f97316!important;box-shadow:0 0 0 4px rgba(249,115,22,.12)}
.complaint-form button{
    width:100%!important;min-height:56px!important;padding:14px 20px!important;
    border:0!important;border-radius:14px!important;background:#ea580c!important;color:#fff!important;
    font:inherit!important;font-weight:800!important;font-size:17px!important;
    cursor:pointer!important;box-shadow:0 10px 24px rgba(234,88,12,.20);
    touch-action:manipulation;transition:transform .18s ease,box-shadow .18s ease;
}
.complaint-form button:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(234,88,12,.25)}
.complaint-form button:active{transform:translateY(0)}
.complaint-status{min-height:24px;font-weight:800;line-height:1.6}
@media (min-width:700px){.complaint-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.complaint-form textarea,.complaint-form button,.complaint-status{grid-column:1/-1}}
@media (max-width:480px){.complaint-box{padding:16px!important;border-radius:20px!important}.complaint-form select,.complaint-form textarea,.complaint-form button{font-size:16px!important}.complaint-form textarea{min-height:125px!important}}

/* V52 — توحيد غرفة اللعب الجماعي */
#multiplayer-room{max-width:1120px!important;padding:8px 10px 50px!important}
#multiplayer-room>header{padding:26px 18px!important;margin-bottom:18px!important;border:1px solid #dbe7f5!important;border-radius:24px!important;background:linear-gradient(135deg,#fff,#f5f9ff)!important;box-shadow:0 15px 45px rgba(15,23,42,.07)!important}
#multiplayer-room>section{margin-bottom:16px!important;border:1px solid #e2e8f0!important;box-shadow:0 12px 35px rgba(15,23,42,.06)!important}
#multiplayer-room h1{font-size:clamp(28px,5vw,42px)!important}#multiplayer-room h2{font-size:clamp(20px,3vw,27px)!important}
#multiplayer-room button{min-height:54px!important;border-radius:14px!important;font-weight:900!important}
#multiplayer-room input{min-height:52px!important;border-radius:13px!important;font-size:16px!important}
.complaint-box{max-width:900px;margin-inline:auto!important}
@media(max-width:600px){#multiplayer-room{width:calc(100% - 10px)!important;padding:5px 4px 35px!important}#multiplayer-room>header{padding:20px 13px!important;border-radius:19px!important}#multiplayer-room>section{padding:14px!important;border-radius:18px!important}.complaint-box{padding:16px!important}}