/* ============================================================
   PUISSANCE 4 — Feuille de style
   Palette : fond bleu nuit, rouge #E63946, jaune #FFD166
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600;700&display=swap');

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:          #0D1B2A;
    --surface:     #162336;
    --surface-2:   #1E3050;
    --border:      #2a4060;
    --red:         #E63946;
    --red-glow:    rgba(230,57,70,.45);
    --yellow:      #FFD166;
    --yellow-glow: rgba(255,209,102,.45);
    --board-blue:  #1565C0;
    --board-deep:  #0D47A1;
    --cell-hole:   #0a1628;
    --text:        #E8EDF5;
    --muted:       #7a93b4;
    --radius:      14px;
    --disc-size:   68px;
    --gap:         8px;
    --font-head:   'Bebas Neue', sans-serif;
    --font-body:   'Inter', sans-serif;
}

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* ---- App shell ---- */
.app-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px 40px;
}

/* ---- Header ---- */
.game-header {
    width: 100%;
    padding: 24px 0 16px;
    text-align: center;
}
.logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.logo-title {
    font-family: var(--font-head);
    font-size: 2.6rem;
    letter-spacing: .1em;
    color: var(--text);
}
.logo-disc {
    display: inline-block;
    width: 28px; height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}
.logo-disc.red    { background: var(--red);    box-shadow: 0 0 14px var(--red-glow); }
.logo-disc.yellow { background: var(--yellow); box-shadow: 0 0 14px var(--yellow-glow); }

/* ---- Screens ---- */
.screen { display: none; width: 100%; max-width: 640px; }
.screen.active { display: flex; flex-direction: column; align-items: center; }

/* ---- Setup card ---- */
.setup-card {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 32px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}
.setup-title {
    font-family: var(--font-head);
    font-size: 1.8rem;
    letter-spacing: .05em;
    color: var(--text);
}
.player-setup {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}
.player-field { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}
.disc-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.disc-dot.red    { background: var(--red); }
.disc-dot.yellow { background: var(--yellow); }

.name-input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 10px 14px;
    outline: none;
    transition: border-color .2s;
}
.name-input:focus { border-color: var(--yellow); }

.vs-badge {
    font-family: var(--font-head);
    font-size: 1.4rem;
    color: var(--muted);
    flex-shrink: 0;
    padding-top: 28px;
}

/* Mode IA toggle */
.mode-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mode-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
    position: absolute;
    inset: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 99px;
    transition: background .2s;
}
.toggle-track::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    background: var(--muted);
    border-radius: 50%;
    transition: transform .2s, background .2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--surface-2); border-color: var(--yellow); }
.toggle-switch input:checked + .toggle-track::before { transform: translateX(20px); background: var(--yellow); }

/* Buttons */
.btn-start {
    background: linear-gradient(135deg, var(--red), #c0392b);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font-head);
    font-size: 1.2rem;
    letter-spacing: .08em;
    padding: 14px 40px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 4px 20px var(--red-glow);
}
.btn-start:hover { transform: translateY(-2px); box-shadow: 0 6px 28px var(--red-glow); }
.btn-start:active { transform: none; }

/* ---- Scoreboard ---- */
.scoreboard {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 14px;
    gap: 8px;
}
.score-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    flex: 1;
}
.score-disc {
    width: 32px; height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}
.score-disc.red    { background: var(--red);    box-shadow: 0 0 10px var(--red-glow); }
.score-disc.yellow { background: var(--yellow); box-shadow: 0 0 10px var(--yellow-glow); }
.score-info { display: flex; flex-direction: column; }
.score-info.right { align-items: flex-end; }
.score-name { font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.score-value { font-family: var(--font-head); font-size: 1.8rem; line-height: 1; color: var(--text); }

.turn-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
}
.turn-disc {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--muted);
    transition: background .3s, box-shadow .3s;
}
.turn-disc.red    { background: var(--red);    box-shadow: 0 0 12px var(--red-glow); }
.turn-disc.yellow { background: var(--yellow); box-shadow: 0 0 12px var(--yellow-glow); }
#turnText { font-size: .72rem; color: var(--muted); text-align: center; white-space: nowrap; }

/* ---- Board ---- */
.board-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.column-buttons {
    display: grid;
    grid-template-columns: repeat(7, var(--disc-size));
    gap: var(--gap);
    margin-bottom: 4px;
}
.col-btn {
    width: var(--disc-size);
    height: 28px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 1rem;
    cursor: pointer;
    border-radius: 6px;
    transition: color .15s, background .15s;
    line-height: 1;
}
.col-btn:hover { color: var(--yellow); background: rgba(255,209,102,.08); }
.col-btn:disabled { opacity: 0; pointer-events: none; }

.board {
    display: grid;
    grid-template-columns: repeat(7, var(--disc-size));
    grid-template-rows: repeat(6, var(--disc-size));
    gap: var(--gap);
    background: var(--board-blue);
    border-radius: var(--radius);
    padding: var(--gap);
    box-shadow:
        0 0 0 4px var(--board-deep),
        0 8px 40px rgba(0,0,0,.6);
    position: relative;
}

.cell {
    width: var(--disc-size);
    height: var(--disc-size);
    border-radius: 50%;
    background: var(--cell-hole);
    overflow: hidden;
    position: relative;
}

.disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translateY(-110%);
    transition: transform .35s cubic-bezier(.25,.8,.25,1);
}
.disc.empty  { background: var(--cell-hole); transform: translateY(0); }
.disc.p1     { background: radial-gradient(circle at 35% 35%, #ff6b76, var(--red)); }
.disc.p2     { background: radial-gradient(circle at 35% 35%, #ffe066, var(--yellow)); }
.disc.drop   { animation: dropIn .35s cubic-bezier(.25,.8,.25,1) forwards; }
.disc.win    { animation: winPulse 0.7s ease-in-out infinite alternate; }

@keyframes dropIn {
    from { transform: translateY(-600%); }
    to   { transform: translateY(0); }
}
@keyframes winPulse {
    from { filter: brightness(1);   box-shadow: none; }
    to   { filter: brightness(1.5); box-shadow: 0 0 18px 4px rgba(255,255,255,.5); }
}

/* ---- Game controls ---- */
.game-controls {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.btn-ctrl {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 600;
    padding: 9px 18px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.btn-ctrl:hover { background: var(--surface-2); color: var(--text); border-color: var(--yellow); }
.btn-ctrl:disabled { opacity: .35; pointer-events: none; }

/* ---- Score card active highlight ---- */
.score-card.active-turn {
    border-color: transparent;
}
.red-card.active-turn   { border-color: var(--red);    box-shadow: 0 0 16px var(--red-glow); }
.yellow-card.active-turn { border-color: var(--yellow); box-shadow: 0 0 16px var(--yellow-glow); }

/* ---- Win overlay ---- */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(4px);
}
.overlay.hidden { display: none; }
.overlay-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 44px 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: popIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn {
    from { transform: scale(.7); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.win-discs {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
}
.win-discs span {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-block;
}
.win-discs span.red    { background: var(--red);    box-shadow: 0 0 10px var(--red-glow); }
.win-discs span.yellow { background: var(--yellow); box-shadow: 0 0 10px var(--yellow-glow); }
.win-title   { font-family: var(--font-head); font-size: 2.4rem; letter-spacing: .06em; }
.win-subtitle { color: var(--muted); font-size: 1rem; }
.overlay-actions { display: flex; gap: 12px; margin-top: 8px; }

/* ---- AI thinking ---- */
.ai-thinking {
    font-size: .8rem;
    color: var(--yellow);
    letter-spacing: .04em;
    animation: blink 1s step-end infinite;
    height: 1.1em;
}
@keyframes blink {
    0%,100% { opacity: 1; } 50% { opacity: .2; }
}

/* ---- Responsive ---- */
@media (max-width: 560px) {
    :root { --disc-size: 42px; --gap: 5px; }
    .logo-title { font-size: 1.8rem; }
    .setup-card { padding: 24px 20px; }
    .player-setup { flex-direction: column; }
    .vs-badge { padding-top: 0; }
    .overlay-card { padding: 32px 24px; }
    .game-controls { flex-wrap: wrap; justify-content: center; }
}