:root {
    /* Palette principale (nouveau design) */
    --game-bg:          #05101f;
    --game-container:   #091a2e;
    --game-board:       #0b2413;
    --game-board-border:#19401b;
    --tile-normal:      #fdfbf0;
    --tile-shadow:      #d3d1bf;
    --tile-active:      #d1f416;
    --tile-active-sh:   #96b604;
    --tile-text:        #123117;
    --accent-yellow:    #ffde00;
    --accent-lime:      #c7ea1b;
    --panel-bg:         #103a15;
    --panel-border:     #2c6c31;

    /* Héritage screens non-jeu */
    --blue-light:   #3ab5f5;
    --blue-mid:     #1a7cd8;
    --blue-deep:    #0d4fa8;
    --blue-navy:    #0a2d5e;
    --blue-dark:    #071e3d;
    --green:        #7cc92e;
    --green-dark:   #5a9e1e;
    --green-soft:   #e8f5d0;
    --white:        #ffffff;
    --off-white:    #f4f7fb;
    --text-primary: #1a2a3a;
    --text-muted:   rgba(255,255,255,0.65);
    --shadow-badge: 0 4px 20px rgba(0,0,0,0.25);
    --radius-sm:    16px;
    --radius-md:    28px;
    --radius-lg:    40px;
    --radius-pill:  100px;
    --bg-gradient:  linear-gradient(175deg, #3ab5f5 0%, #1a7cd8 35%, #0d4fa8 70%, #0a2d5e 100%);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    outline: none;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--game-bg);
    background-image:
        radial-gradient(circle at 10% 20%, rgba(18,54,38,0.4) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(20,30,80,0.5) 0%, transparent 40%);
    font-family: 'Fredoka', 'Nunito', 'Segoe UI', -apple-system, sans-serif;
}

#app-container {
    width: 1080px;
    height: 1920px;
    background: var(--game-container) url('../assets/images/bg.png') center center / cover no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center center;
    overflow: hidden;
    box-shadow: 0 0 120px rgba(0,0,0,0.9);
    will-change: transform;
    isolation: isolate;
}

.screen {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    background: transparent;
}

.screen.active {
    display: flex;
}

/* ── Boutons communs ───────────────────────────────────── */

.btn-primary {
    background: var(--green);
    border: none;
    color: var(--white);
    padding: 38px 60px;
    font-family: inherit;
    font-size: 48px;
    font-weight: 800;
    border-radius: var(--radius-pill);
    margin: 18px 0;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 10px 0 var(--green-dark), 0 14px 30px rgba(90,158,30,0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    letter-spacing: 0.5px;
}
.btn-primary:active {
    transform: translateY(8px);
    box-shadow: 0 2px 0 var(--green-dark);
}

.btn-quick {
    background: linear-gradient(to bottom, #ffb300, #e65c00);
    border: none;
    color: var(--white);
    padding: 42px 60px;
    font-family: inherit;
    font-size: 52px;
    font-weight: 800;
    border-radius: var(--radius-pill);
    margin: 18px 0;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 10px 0 #a33d00, 0 14px 30px rgba(230, 92, 0, 0.4);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    letter-spacing: 0.5px;
}
.btn-quick:active {
    transform: translateY(8px);
    box-shadow: 0 2px 0 #a33d00;
}

.btn-secondary {
    background: linear-gradient(to bottom, #3b82f6, #1d4ed8);
    border: none;
    color: var(--white);
    padding: 38px 60px;
    font-family: inherit;
    font-size: 48px;
    font-weight: 800;
    border-radius: var(--radius-pill);
    margin: 18px 0;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 10px 0 #1e3a8a, 0 14px 30px rgba(59,130,246,0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    letter-spacing: 0.5px;
}
.btn-secondary:active {
    transform: translateY(8px);
    box-shadow: 0 2px 0 #1e3a8a;
}


.btn-ghost {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    padding: 28px 60px;
    font-family: inherit;
    font-size: 42px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    margin: 10px 0;
    cursor: pointer;
    width: 100%;
}

.btn-icon {
    margin-right: 18px;
    font-size: 0.9em;
    vertical-align: middle;
}

.btn-back {
    background: rgba(255,255,255,0.18);
    border: none;
    color: var(--white);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    font-size: 48px;
    font-size: 52px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.btn-back:active {
    background: rgba(255,255,255,0.3);
}

/* ── Inputs ────────────────────────────────────────────── */

input[type="text"] {
    width: 100%;
    padding: 40px 48px;
    font-family: inherit;
    font-size: 52px;
    font-weight: 700;
    border-radius: var(--radius-md);
    border: 3px solid rgba(255,255,255,0.15);
    margin-bottom: 30px;
    text-align: center;
    background: rgba(255,255,255,0.95);
    color: var(--text-primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    transition: border-color 0.2s;
}
input[type="text"]:focus {
    border-color: var(--green);
}

/* ── Pseudo + Avatar inline ────────────────────────────── */

.pseudo-layout {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 30px;
}

.pseudo-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pseudo-fields .form-label {
    margin-bottom: 12px;
}

.pseudo-input-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pseudo-input-row input[type="text"] {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
    width: auto;
    text-align: left;
}

.avatar-trigger {
    width: 210px;
    height: 210px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 6px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.95);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    transition: border-color 0.2s, transform 0.15s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.avatar-trigger:active {
    transform: scale(0.93);
}

.btn-random {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 5px solid #fff;
    background: #3b82f6;
    color: #fff;
    font-size: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(59,130,246,0.45);
    transition: transform 0.15s, background 0.15s;
}
.btn-random:active {
    transform: scale(0.9);
    background: #2563eb;
}

/* ── Avatars ───────────────────────────────────────────── */

.avatar-item {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    border: 7px solid rgba(255,255,255,0.3);
    cursor: pointer;
    background: var(--white);
    transition: border-color 0.2s, transform 0.2s;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    overflow: hidden;
}
.avatar-item.selected {
    border-color: var(--green);
    transform: scale(1.12);
    box-shadow: 0 8px 24px rgba(124,201,46,0.4);
}

.avatar-item-lg {
    width: 177px;
    height: 177px;
}

/* ── Modal avatars ─────────────────────────────────────── */

.avatar-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.78);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}
.avatar-modal-overlay.active {
    display: flex;
}

.avatar-modal-box {
    width: 1000px;
    max-height: 1700px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
    background: linear-gradient(175deg, #1a7cd8 0%, #0d4fa8 70%, #0a2d5e 100%);
    border-radius: 48px;
    padding: 50px 40px 60px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    border: 2px solid rgba(255,255,255,0.15);
}

.avatar-color-panel {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 4px;
}

.avatar-color-label {
    font-size: 26px;
    font-weight: 900;
    color: rgba(255,255,255,0.75);
    letter-spacing: 2px;
    text-align: center;
}

.avatar-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.avatar-color-swatch {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: border-color 0.15s, transform 0.15s;
    padding: 0;
    background-clip: padding-box;
}

.avatar-color-swatch.selected {
    border-color: #fff;
    transform: scale(1.2);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.avatar-color-custom {
    -webkit-appearance: none;
    appearance: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 0;
    background: none;
    overflow: hidden;
}

.avatar-color-custom::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}

.avatar-color-custom::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.avatar-modal-grid-scroll {
    flex: 1;
    overflow-y: auto;
    max-height: 1580px;
}

.avatar-modal-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.avatar-sprite {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-size: 800% 800%;
    background-position: var(--avatar-x) var(--avatar-y);
}

.avatar-normal {
    background-image: url("../assets/images/avatars.png");
}

.avatar-king {
    background-image: url("../assets/images/avatars.king.png");
}

.avatar-loser {
    background-image: url("../assets/images/avatars_perdants.png");
}

.avatar-preview,
.player-avatar,
.rank-avatar,
.winner-avatar-image {
    border-radius: 50%;
}

/* ── Classement commun ─────────────────────────────────── */

.ranking-item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 40px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}
.rank {
    font-size: 44px;
    font-weight: 900;
    color: rgba(255,255,255,0.5);
    width: 80px;
    text-align: center;
}
.rank-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.rank-name {
    flex: 1;
    font-size: 46px;
    font-weight: 800;
    color: var(--white);
}
.rank-score-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.rank-score {
    font-size: 48px;
    font-weight: 900;
    color: var(--green);
}

.rank-combo-badge {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #f97316, #ef4444);
    padding: 3px 14px;
    border-radius: 16px;
    transform: rotate(-6deg);
    box-shadow: 0 3px 0 rgba(0,0,0,0.3);
    letter-spacing: 1px;
    line-height: 1.3;
}

/* ── Player card (lobby) ───────────────────────────────── */

.player-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 30px 24px;
    background: rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    border: 2px solid rgba(255,255,255,0.2);
}
.player-card img,
.player-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: var(--white);
}
.player-name {
    font-size: 38px;
    font-weight: 800;
    color: var(--white);
    text-align: center;
}

/* ── Modal quitter la partie ── */

.quit-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quit-modal-box {
    background: linear-gradient(to bottom, #0d1f3a, #081528);
    border: 6px solid rgba(255,255,255,0.18);
    border-radius: 48px;
    padding: 80px 100px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
    animation: popIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.quit-modal-icon {
    font-size: 110px;
    line-height: 1;
}

.quit-modal-title {
    font-size: 72px;
    font-weight: 900;
    color: var(--white);
    text-shadow: 0 4px 0 rgba(0,0,0,0.4);
}

.quit-modal-sub {
    font-size: 42px;
    color: rgba(255,255,255,0.55);
}

.quit-modal-buttons {
    display: flex;
    gap: 32px;
    margin-top: 16px;
}

.quit-btn-cancel {
    background: rgba(255,255,255,0.12);
    border: 5px solid rgba(255,255,255,0.25);
    color: var(--white);
    font-family: inherit;
    font-size: 48px;
    font-weight: 800;
    padding: 28px 64px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s;
}
.quit-btn-cancel:active { background: rgba(255,255,255,0.22); }

.quit-btn-confirm {
    background: linear-gradient(to bottom, #ef4444, #b91c1c);
    border: 5px solid #fca5a5;
    color: var(--white);
    font-family: inherit;
    font-size: 48px;
    font-weight: 800;
    padding: 28px 64px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 8px 0 #7f1d1d, 0 12px 20px rgba(0,0,0,0.4);
    transition: transform 0.1s;
}
.quit-btn-confirm:active { transform: translateY(6px); box-shadow: 0 2px 0 #7f1d1d; }