/* =============================================
   NOUGHTSANDCROSSES.CSS — Noughts and Crosses styles
   Sofia's Game Arcade
   ============================================= */

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ---- Screens ---- */
.screen {
    display: none;
    animation: fadeIn 0.4s ease;
}

.screen.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Game container ---- */
.game-container {
    text-align: center;
    padding: var(--space-xl);
    max-width: 480px;
    width: 100%;
}

/* ---- Title ---- */
.title {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: var(--space-xs);
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.credit {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
}

/* ---- X O Icon ---- */
.xo-icon {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: var(--space-xl);
    display: flex;
    justify-content: center;
    gap: var(--space-md);
}

.xo-x {
    color: var(--accent-blue);
    text-shadow: 0 0 20px rgba(96, 165, 250, 0.4);
}

.xo-o {
    color: var(--accent-red);
    text-shadow: 0 0 20px rgba(248, 113, 113, 0.4);
}

/* ---- Mode buttons ---- */
.mode-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform var(--transition-fast),
                border-color var(--transition-fast),
                background var(--transition-fast),
                box-shadow var(--transition-fast);
    min-width: 160px;
}

.btn-mode:hover {
    transform: scale(1.05);
    border-color: var(--accent-blue);
    background: rgba(96, 165, 250, 0.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.btn-mode:active {
    transform: scale(0.97);
}

.mode-emoji {
    font-size: 2.2rem;
}

.mode-label {
    font-size: 1.2rem;
    font-weight: 800;
}

.mode-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ---- Scoreboard ---- */
.scoreboard {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: var(--space-xs);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
}

.score-x {
    color: var(--accent-blue);
}

.score-o {
    color: var(--accent-red);
}

.score-dash {
    color: var(--text-muted);
    font-weight: 400;
}

.round-info {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.turn-indicator {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    min-height: 1.6em;
}

.turn-indicator.thinking {
    color: var(--accent-yellow);
}

/* ---- Board ---- */
.board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-width: 300px;
    margin: 0 auto var(--space-lg);
}

.cell {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 2.8rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform var(--transition-fast),
                background var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.cell:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.04);
}

.cell:active:not(:disabled) {
    transform: scale(0.96);
}

.cell:disabled {
    cursor: not-allowed;
    transform: none;
}

.cell.x {
    color: var(--accent-blue);
    text-shadow: 0 0 12px rgba(96, 165, 250, 0.3);
}

.cell.o {
    color: var(--accent-red);
    text-shadow: 0 0 12px rgba(248, 113, 113, 0.3);
}

.cell.win {
    background: rgba(74, 222, 128, 0.15);
    border-color: var(--accent-green);
    box-shadow: 0 0 16px rgba(74, 222, 128, 0.3);
    animation: winPulse 0.6s ease;
}

@keyframes winPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ---- Round result overlay ---- */
.round-result {
    font-size: 1.3rem;
    font-weight: 800;
    min-height: 1.6em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.round-result.visible {
    opacity: 1;
}

.round-result.win-x {
    color: var(--accent-blue);
}

.round-result.win-o {
    color: var(--accent-red);
}

.round-result.draw {
    color: var(--accent-yellow);
}

/* ================================================
   RESULTS SCREEN — Base styles
   ================================================ */

.results-icon {
    font-size: 5rem;
    margin-bottom: var(--space-md);
}

.results-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

.results-subtitle {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    min-height: 1.5em;
}

.results-score {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: var(--space-xl);
}

/* ================================================
   CONFETTI — Falling party pieces
   ================================================ */

.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    top: -20px;
    border-radius: 2px;
    opacity: 0;
    will-change: transform, opacity;
}

.confetti-piece.sway1 { animation: confettiFall1 ease-in forwards; }
.confetti-piece.sway2 { animation: confettiFall2 ease-in forwards; }
.confetti-piece.sway3 { animation: confettiFall3 ease-in forwards; }
.confetti-piece.sway4 { animation: confettiFall4 ease-in forwards; }

@keyframes confettiFall1 {
    0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
    20%  { opacity: 1; }
    100% { transform: translateY(108vh) translateX(40px) rotate(720deg); opacity: 0; }
}

@keyframes confettiFall2 {
    0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
    20%  { opacity: 1; }
    100% { transform: translateY(108vh) translateX(-35px) rotate(-600deg); opacity: 0; }
}

@keyframes confettiFall3 {
    0%   { transform: translateY(0) translateX(0) rotate(0deg) scale(1); opacity: 1; }
    50%  { transform: translateY(50vh) translateX(25px) rotate(360deg) scale(0.8); opacity: 0.9; }
    100% { transform: translateY(108vh) translateX(-15px) rotate(700deg) scale(0.3); opacity: 0; }
}

@keyframes confettiFall4 {
    0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
    35%  { transform: translateY(35vh) translateX(-30px) rotate(220deg); opacity: 1; }
    100% { transform: translateY(108vh) translateX(20px) rotate(580deg); opacity: 0; }
}

/* ================================================
   FLOATING EMOJIS — Rising celebration icons
   ================================================ */

.floating-emojis {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 49;
    overflow: hidden;
}

.floating-emoji {
    position: absolute;
    bottom: -60px;
    opacity: 0;
    will-change: transform, opacity;
}

.floating-emoji.drift1 { animation: floatUp1 ease-out forwards; }
.floating-emoji.drift2 { animation: floatUp2 ease-out forwards; }

@keyframes floatUp1 {
    0%   { transform: translateY(0) translateX(0) scale(0.3) rotate(0deg); opacity: 0; }
    12%  { opacity: 1; transform: translateY(-12vh) translateX(10px) scale(1) rotate(8deg); }
    100% { transform: translateY(-115vh) translateX(-25px) scale(0.5) rotate(-20deg); opacity: 0; }
}

@keyframes floatUp2 {
    0%   { transform: translateY(0) translateX(0) scale(0.3) rotate(0deg); opacity: 0; }
    12%  { opacity: 1; transform: translateY(-12vh) translateX(-15px) scale(1) rotate(-8deg); }
    100% { transform: translateY(-115vh) translateX(30px) scale(0.5) rotate(25deg); opacity: 0; }
}

/* ================================================
   WIN SCREEN — Celebration animations
   ================================================ */

.win-screen .results-icon {
    font-size: 6rem;
    animation: trophyBounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards,
               trophyGlow 2s ease 1s infinite;
}

@keyframes trophyBounce {
    0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
    45%  { transform: scale(1.35) rotate(10deg); opacity: 1; }
    65%  { transform: scale(0.85) rotate(-5deg); }
    80%  { transform: scale(1.1) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes trophyGlow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.4)); }
    50%      { filter: drop-shadow(0 0 28px rgba(250, 204, 21, 0.9)); }
}

.win-screen .results-title {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(90deg,
        var(--accent-blue), var(--accent-purple), var(--accent-red),
        var(--accent-yellow), var(--accent-green), var(--accent-blue));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: winTitleBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s both,
               rainbowShift 2s linear 1s infinite;
}

@keyframes winTitleBounce {
    0%   { transform: scale(0) translateY(40px); opacity: 0; }
    55%  { transform: scale(1.2) translateY(-8px); opacity: 1; }
    75%  { transform: scale(0.95) translateY(3px); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes rainbowShift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.win-screen .results-subtitle {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-yellow);
    text-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
    opacity: 0;
    animation: subtitlePop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.7s forwards;
}

@keyframes subtitlePop {
    0%   { transform: scale(0.4) translateY(12px); opacity: 0; }
    65%  { transform: scale(1.1) translateY(-3px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.win-screen .results-score {
    opacity: 0;
    animation: scoreFadeUp 0.5s ease 1s forwards;
}

.win-screen .review-list {
    opacity: 0;
    animation: scoreFadeUp 0.4s ease 1.2s forwards;
}

.win-screen .results-buttons {
    opacity: 0;
    animation: scoreFadeUp 0.4s ease 1.5s forwards;
}

/* ================================================
   LOSE SCREEN — Sympathetic animations
   ================================================ */

.lose-screen .results-icon {
    font-size: 5rem;
    animation: sadWobble 1s ease forwards;
}

@keyframes sadWobble {
    0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
    35%  { transform: scale(1.08) rotate(4deg); opacity: 1; }
    55%  { transform: scale(0.97) rotate(-2deg); }
    70%  { transform: scale(1.03) rotate(1deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.lose-screen .results-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-muted);
    opacity: 0;
    animation: loseSlideIn 0.8s ease 0.3s forwards;
}

@keyframes loseSlideIn {
    0%   { transform: translateY(25px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.lose-screen .results-subtitle {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent-yellow);
    opacity: 0;
    animation: encourageIn 0.7s ease 0.8s forwards;
}

@keyframes encourageIn {
    0%   { transform: translateY(12px) scale(0.95); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.lose-screen .results-score {
    opacity: 0;
    animation: scoreFadeUp 0.5s ease 1.2s forwards;
}

.lose-screen .review-list {
    opacity: 0;
    animation: scoreFadeUp 0.4s ease 1.4s forwards;
}

.lose-screen .results-buttons {
    opacity: 0;
    animation: scoreFadeUp 0.4s ease 1.7s forwards;
}

/* ---- Shared fade-up for score, review, buttons ---- */
@keyframes scoreFadeUp {
    0%   { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ---- Review list ---- */
.review-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
    text-align: left;
}

.review-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border-left: 4px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.review-card.win-x {
    border-left-color: var(--accent-blue);
}

.review-card.win-o {
    border-left-color: var(--accent-red);
}

.review-card.draw {
    border-left-color: var(--accent-yellow);
}

.review-round {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 700;
    flex-shrink: 0;
}

.review-outcome {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ---- Buttons ---- */
.btn {
    display: inline-block;
    padding: 0.9rem 2.4rem;
    border-radius: var(--radius-full);
    border: none;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast);
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
}

.btn:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.btn:active {
    transform: scale(0.97);
}

.btn-start {
    background: var(--accent-green);
    color: #0b0e1a;
    padding: 1rem 2.4rem;
    font-size: 1.2rem;
}

.btn-start:hover {
    background: #22c55e;
    box-shadow: 0 0 24px rgba(74, 222, 128, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid var(--border-subtle);
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.results-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 420px) {
    .game-container {
        padding: 1.2rem;
    }

    .title {
        font-size: 1.8rem;
    }

    .xo-icon {
        font-size: 3rem;
    }

    .btn-mode {
        min-width: 130px;
        padding: var(--space-md) var(--space-lg);
    }

    .board {
        max-width: 240px;
    }

    .cell {
        font-size: 2.2rem;
    }

    .scoreboard {
        font-size: 1.2rem;
    }

    .win-screen .results-title {
        font-size: 2.2rem;
    }

    .results-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 260px;
    }
}