/*
 * ============================================================
 * تحدي الحروف — Système visuel professionnel global
 * Version 124.8
 * Objectif : harmoniser tailles, espacements, boutons, formulaires,
 * cartes et tableaux sur l'ensemble du site sans changer la logique.
 * ============================================================
 */

:root {
    --ui-content-max: 1180px;
    --ui-radius: 18px;
    --ui-radius-sm: 12px;
    --ui-control-h: 50px;
    --ui-control-h-lg: 54px;
    --ui-section-gap: clamp(18px, 3vw, 28px);
    --ui-title: clamp(28px, 4vw, 42px);
    --ui-h2: clamp(21px, 2.8vw, 28px);
    --ui-body: 15.5px;
}

/* Base typographique cohérente */
body {
    font-size: var(--ui-body);
    line-height: 1.75;
}

main, #main-content {
    width: 100%;
}

h1 {
    font-size: var(--ui-title);
    line-height: 1.25;
    letter-spacing: -.015em;
}

h2 { font-size: var(--ui-h2); line-height: 1.35; }
h3 { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.4; }

p, li { text-wrap: pretty; }

/* Liens/boutons : même hauteur et même rythme visuel */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.rooms-link-btn,
.mode-btn,
.info-button,
.info-actions a,
.legal-actions a,
.ranking-button {
    min-height: var(--ui-control-h) !important;
    padding: 11px 20px !important;
    border-radius: var(--ui-radius-sm) !important;
    font-family: inherit !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    vertical-align: middle;
    text-align: center;
    touch-action: manipulation;
}

button:hover,
a.btn:hover,
.rooms-link-btn:hover,
.mode-btn:hover,
.info-button:hover,
.ranking-button:hover,
.legal-actions a:hover {
    transform: translateY(-1px);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(37,99,235,.20);
    outline-offset: 2px;
}

/* Champs */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    min-height: var(--ui-control-h) !important;
    border-radius: var(--ui-radius-sm) !important;
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    color: #172033 !important;
    font-family: inherit !important;
    font-size: 15.5px !important;
    line-height: 1.5 !important;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

textarea {
    min-height: 120px !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,.10) !important;
    outline: 0 !important;
}

/* Conteneurs généraux */
.container,
.rooms-page,
.form-page,
.legal-page,
.info-page,
.ranking-page {
    max-width: var(--ui-content-max);
}

/* Cartes génériques */
.info-card,
.legal-card,
.form-shell,
.rooms-shell,
.room-mode-card,
.my-ranking-card,
.ranking-panel,
.ranking-card {
    border-radius: var(--ui-radius) !important;
}

/* Titres de sections */
.section-title,
.page-title,
.page-heading {
    margin-bottom: 10px;
}

/* Tables : lecture plus régulière */
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100%;
}

table th,
table td {
    font-size: 14px;
    line-height: 1.55;
    vertical-align: middle;
}

table th {
    font-weight: 800;
}

/* Alertes */
.rooms-alert,
.alert,
.flash-message,
.notice,
.info-note {
    border-radius: var(--ui-radius-sm) !important;
    line-height: 1.7;
}

/* Pages d'information : rythme uniforme */
.info-grid {
    gap: var(--ui-section-gap) !important;
}

.info-card p,
.info-card li,
.legal-card p,
.legal-card li {
    font-size: 15px !important;
    line-height: 1.9 !important;
}

.info-actions,
.legal-actions,
.ranking-actions {
    gap: 10px !important;
}

/* Page des salles */
.rooms-page {
    padding-top: clamp(14px, 2.5vw, 26px) !important;
}

.rooms-hero h1 {
    font-size: clamp(30px, 5vw, 46px) !important;
}

.rooms-hero p {
    max-width: 760px;
    margin-inline: auto;
}

.room-mode-card {
    padding: clamp(22px, 3vw, 28px) !important;
}

.room-mode-card h2 {
    font-size: clamp(20px, 2.2vw, 24px) !important;
}

.room-mode-card p {
    font-size: 15px !important;
    line-height: 1.8 !important;
}

.room-mode-card small {
    font-size: 13px !important;
    line-height: 1.6 !important;
}

/* Page multijoueur */
#multiplayer-room {
    width: min(1120px, calc(100% - 24px)) !important;
    margin-inline: auto !important;
    font-family: "Cairo", system-ui, sans-serif !important;
}

#multiplayer-room > header,
#multiplayer-room > section {
    border-radius: var(--ui-radius) !important;
}

#multiplayer-room > header {
    padding: clamp(20px, 3vw, 30px) !important;
}

#multiplayer-room > section {
    margin-top: var(--ui-section-gap) !important;
}

#multiplayer-room h1 {
    font-size: clamp(28px, 4.5vw, 40px) !important;
}

#multiplayer-room h2 {
    font-size: clamp(20px, 3vw, 26px) !important;
}

#multiplayer-room #players > div {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
}

#multiplayer-room label {
    min-height: 58px !important;
    border: 1px solid #e2e8f0;
}

#multiplayer-room label input {
    min-width: 0;
}

#multiplayer-room #finish-room,
#multiplayer-room #start-room {
    min-height: var(--ui-control-h-lg) !important;
    padding-inline: 24px !important;
}

/* Code de salle : garder le code dominant, sans gonfler les boutons */
.room-code-title {
    font-size: clamp(18px, 2.5vw, 24px) !important;
}

.room-code-value,
#room-code {
    font-size: clamp(32px, 5.5vw, 46px) !important;
}

.copy-room-code {
    min-height: 54px !important;
    font-size: 15.5px !important;
}

/* Ne pas afficher d'éléments de copie si absents */
.copy-room-code-status:empty { display: none !important; }

/* Administration */
.admin-container,
.admin-page,
.dashboard-container {
    width: min(1200px, calc(100% - 24px));
    margin-inline: auto;
}

.admin-container h1,
.admin-page h1,
.dashboard-container h1 {
    font-size: var(--ui-title);
}

.admin-container button,
.admin-page button,
.dashboard-container button {
    min-height: 48px !important;
}

/* Responsive */
@media (max-width: 760px) {
    body { font-size: 15px; }

    .container { padding-inline: 14px; }

    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .rooms-link-btn,
    .mode-btn,
    .info-button,
    .info-actions a,
    .legal-actions a,
    .ranking-button {
        width: 100%;
        min-height: 50px !important;
    }

    .info-actions,
    .legal-actions,
    .ranking-actions {
        flex-direction: column;
    }

    .room-code-box {
        gap: 12px !important;
    }

    #multiplayer-room {
        width: calc(100% - 12px) !important;
    }
}

@media (max-width: 480px) {
    h1 { font-size: clamp(25px, 8vw, 32px); }
    h2 { font-size: 20px; }

    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
        font-size: 15px !important;
    }

    .rooms-shell { padding: 14px !important; }
    .room-mode-card { padding: 20px 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================
   V124.9 — Premium visual refinement
   ============================================================ */
:root {
    --pro-ink:#172033;
    --pro-heading:#173b8f;
    --pro-muted:#64748b;
    --pro-border:#e4eaf2;
    --pro-surface:#fff;
    --pro-radius:20px;
    --pro-radius-sm:13px;
    --pro-shadow:0 10px 30px rgba(15,23,42,.07);
    --pro-shadow-hover:0 18px 45px rgba(15,23,42,.11);
}

body{background:radial-gradient(circle at 92% 0,rgba(37,99,235,.055),transparent 26rem),radial-gradient(circle at 4% 38%,rgba(124,58,237,.035),transparent 22rem),#f5f8fc;color:var(--pro-ink);font-size:15.5px;line-height:1.75}
h1{font-size:clamp(28px,4vw,42px);line-height:1.25;font-weight:900;letter-spacing:-.012em}
h2{font-size:clamp(21px,2.7vw,29px);line-height:1.35;font-weight:900}
h3{font-size:clamp(18px,2.2vw,22px);font-weight:800}

/* Navigation */
.main-navbar{min-height:72px;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(203,213,225,.75);box-shadow:0 5px 22px rgba(15,23,42,.055);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav-container{min-height:72px}
.nav-logo{font-size:23px;font-weight:900;color:#173b8f}
.nav-item,.nav-link-btn{min-height:42px;border-radius:12px;font-size:14px;font-weight:800}
.nav-item:hover,.nav-item.active{background:#eef4ff;color:#2563eb}
.nav-link-btn{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 7px 18px rgba(37,99,235,.2)}

/* Controls */
.btn,button,input[type=submit],input[type=button],input[type=reset],.rooms-link-btn,.mode-btn,.info-button,.info-actions a,.legal-actions a,.ranking-button{min-height:50px!important;padding:10px 20px!important;border-radius:13px!important;font-family:inherit!important;font-size:15px!important;font-weight:800!important;line-height:1.35!important;gap:8px;box-shadow:none;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease}
.btn-primary,.rooms-link-btn,.mode-btn{box-shadow:0 7px 18px rgba(37,99,235,.16)}
.btn:hover,button:hover:not(:disabled),a.btn:hover,.rooms-link-btn:hover,.mode-btn:hover,.info-button:hover,.ranking-button:hover,.legal-actions a:hover{transform:translateY(-2px)}
input:not([type=checkbox]):not([type=radio]),textarea,select{min-height:50px!important;border:1px solid #cfd8e5!important;border-radius:13px!important;font-size:15px!important;background:#fff!important;color:#172033!important;box-shadow:inset 0 1px 1px rgba(15,23,42,.02)}
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{border-color:#2563eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.1)!important;outline:none!important}

/* Surfaces */
.card,.info-card,.legal-card,.form-shell,.rooms-shell,.room-mode-card,.my-ranking-card,.ranking-panel,.ranking-card,.panel,.stat-card,.metric,.hero-box,.summary-card,.answers-section,.valid-words-section{border:1px solid var(--pro-border)!important;border-radius:20px!important;box-shadow:var(--pro-shadow)}
.info-card:hover,.room-mode-card:hover,.ranking-card:hover,.stat-card:hover,.metric:hover{box-shadow:var(--pro-shadow-hover)}
.alert,.rooms-alert,.info-note,.flash-message,.notice{border-radius:13px!important;border-width:1px!important;line-height:1.75}
.badge{border-radius:999px!important;font-weight:800!important}

/* Home */
.home-page{max-width:none;width:100%}
.home-page .hero{position:relative;overflow:hidden;background:radial-gradient(circle at 12% 20%,rgba(37,99,235,.16),transparent 25%),radial-gradient(circle at 88% 25%,rgba(124,58,237,.14),transparent 27%),linear-gradient(135deg,#f2f7ff,#f8f5ff);border-bottom:1px solid var(--pro-border)}
.home-page .hero-content{max-width:920px;margin-inline:auto}
.home-page .hero h1{font-weight:900}
.home-page .hero p{max-width:720px;margin-inline:auto;color:#526176}
.home-page .feature-card,.home-page .step-card{border:1px solid var(--pro-border)!important;border-radius:18px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 7px 22px rgba(15,23,42,.055)!important;transition:transform .2s ease,box-shadow .2s ease}
.home-page .feature-card:hover,.home-page .step-card:hover{transform:translateY(-5px);box-shadow:var(--pro-shadow-hover)!important}
.home-page .cta-box{border-radius:26px!important;box-shadow:0 18px 45px rgba(30,58,138,.18)}
.home-player-card,.hero-player-form{border:1px solid rgba(37,99,235,.14)!important;border-radius:20px!important;box-shadow:0 14px 36px rgba(20,40,80,.10)!important}

/* Rooms */
.rooms-page{padding-top:26px!important;padding-bottom:34px!important}
.rooms-grid{gap:clamp(16px,2.5vw,24px)!important}
.room-mode-card{position:relative;overflow:hidden;min-height:250px;padding:26px!important;background:rgba(255,255,255,.96)!important}
.room-mode-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--card-accent,#2563eb)}
.room-mode-icon{width:62px!important;height:62px!important;display:grid!important;place-items:center!important;border-radius:18px!important;box-shadow:0 8px 20px rgba(15,23,42,.07)}
.room-mode-card h2{margin-bottom:9px!important}.room-mode-card p{color:#5b687b}.room-mode-card small{display:block;color:#7a8798;margin-top:12px}
.rooms-link-btn,.mode-btn{width:100%}

/* Game */
.game-page{width:min(1180px,calc(100% - 28px));margin-inline:auto;background:transparent!important}
.game-header{border-radius:0 0 20px 20px;padding:clamp(20px,3vw,30px)!important;margin-bottom:18px}
.game-header h1{font-weight:900}
.game-board{gap:16px!important}
.letter-box,.timer-box,.score-box{border:1px solid var(--pro-border)!important;border-radius:18px!important;box-shadow:var(--pro-shadow)!important}
.letter-box strong,.summary-value,.answer-word{font-weight:900!important}
.game-start-panel,.word-form{border:1px solid var(--pro-border)!important;border-radius:20px!important;box-shadow:var(--pro-shadow)!important}
.input-group{gap:10px!important}.input-group input,.input-group button{min-height:52px!important}
#words-list{border-radius:16px!important;border:1px solid var(--pro-border)!important}.word-badge,.word-item,.valid-word{border-radius:11px!important}

/* Results */
.result-page{background:transparent!important}.result-container{width:min(1120px,calc(100% - 28px))}
.result-header,.result-progress,.answers-section,.valid-words-section{border-radius:20px!important;box-shadow:var(--pro-shadow)!important}
.result-header{padding:clamp(22px,3vw,34px)!important}.result-icon{border-radius:20px!important}
.result-summary{gap:16px!important}.summary-card{border-radius:17px!important;box-shadow:var(--pro-shadow)!important}
.answers-grid{gap:14px!important}.answer-card{border-radius:16px!important;overflow:hidden}
.answer-status{border-radius:999px!important;font-weight:800!important}

/* Ranking / information / forms */
.ranking-page,.info-page,.legal-page,.form-page{padding-top:26px!important;padding-bottom:36px!important}
.ranking-tab,.period-button,.ranking-button,.page-link{border-radius:12px!important}
.info-grid{gap:20px!important}.info-card,.legal-card,.form-shell{background:rgba(255,255,255,.96)!important}
.info-card p,.info-card li,.legal-card p,.legal-card li{font-size:15px!important;line-height:1.95!important}
.info-actions,.legal-actions,.ranking-actions{gap:10px!important}

/* Admin */
.admin-container,.admin-page,.dashboard-container{width:min(1200px,calc(100% - 28px));margin-inline:auto;padding-top:24px;padding-bottom:32px}
.admin-container .panel,.admin-page .panel,.dashboard-container .panel,.admin-container .stat-card,.admin-page .stat-card,.dashboard-container .stat-card,.admin-container .metric,.admin-page .metric,.dashboard-container .metric{background:#fff;border:1px solid var(--pro-border)!important;border-radius:17px!important;box-shadow:0 7px 24px rgba(15,23,42,.055)!important}
.table-wrap{border-radius:15px!important;border:1px solid var(--pro-border)!important;overflow:auto}table th{background:#f6f8fc!important}table tr:hover td{background:#fafcff}

/* Footer */
.main-footer{margin-top:28px;border-top:1px solid var(--pro-border)!important}
.footer-live-pill{border-radius:999px!important}

@media(max-width:760px){
    body{font-size:15px}.container{padding-inline:14px}.main-navbar,.nav-container{min-height:64px}.nav-container{padding:8px 14px}.nav-logo{font-size:20px}.nav-links{gap:4px}.nav-item,.nav-link-btn{min-height:40px;font-size:13px}
    .btn,button,input[type=submit],input[type=button],input[type=reset],.rooms-link-btn,.mode-btn,.info-button,.info-actions a,.legal-actions a,.ranking-button{width:100%;min-height:50px!important}
    .home-player-card{flex-wrap:wrap}.home-player-actions{width:100%}.home-player-actions>*{flex:1 1 100%}.hero-player-row{flex-direction:column}.hero-player-row button{width:100%}
    .rooms-grid{grid-template-columns:1fr!important}.room-mode-card{min-height:auto}.result-container,.game-page{width:calc(100% - 20px)}.info-actions,.legal-actions,.ranking-actions{flex-direction:column}
}
@media(max-width:480px){h1{font-size:27px}h2{font-size:20px}.room-mode-card{padding:20px 16px!important}.summary-card{padding:15px!important}.letter-box,.timer-box,.score-box{border-radius:15px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}