:root {
    --shiba-gold: #ffb100;
    --glass: rgba(255, 255, 255, 0.9);
    --x-color: #ff4757;
    --o-color: #2ed573;
}

body {
    margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    font-family: 'Segoe UI', sans-serif;
    background: url('https://shibamemegen.com/tictac/background.png') no-repeat center center fixed;
    background-size: cover;
}

.top-nav { position: absolute; top: 20px; width: 100%; text-align: center; }
.back-btn { text-decoration: none; color: white; background: rgba(0,0,0,0.7); padding: 8px 18px; border-radius: 20px; font-size: 0.85rem; transition: 0.3s; }
.back-btn:hover { background: var(--shiba-gold); }

.game-container {
    background: var(--glass);
    padding: 1.5rem;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    text-align: center;
    width: 320px;
    max-width: 90%;
}

/* Score Board */
.score-board {
    display: flex;
    justify-content: space-around;
    background: rgba(0,0,0,0.05);
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 15px;
}
.score-item { display: flex; flex-direction: column; }
.score-item .label { font-size: 0.7rem; color: #666; font-weight: bold; }
.score-item span:last-child { font-size: 1.5rem; font-weight: 800; color: #333; }

/* Difficulty Toggle */
.mode-selector { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 15px; }
.mode-label { font-size: 0.8rem; font-weight: bold; color: #555; }
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--shiba-gold); }
input:checked + .slider:before { transform: translateX(20px); }

#status { font-weight: bold; margin-bottom: 15px; color: #333; font-size: 1rem; }

.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 auto; width: 280px; height: 280px; }
.cell { background: white; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 2.5rem; font-weight: bold; cursor: pointer; transition: transform 0.1s; }
.cell:active { transform: scale(0.95); }
.cell.x { color: var(--x-color); }
.cell.o { color: var(--o-color); }

.cell span { animation: popIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }

#restartBtn { margin-top: 20px; width: 100%; padding: 12px; border: none; background: var(--shiba-gold); color: white; font-weight: bold; border-radius: 12px; cursor: pointer; transition: 0.2s; }
#restartBtn:hover { filter: brightness(1.1); }

@media (max-width: 360px) {
    .game-container { width: 280px; padding: 1rem; }
    .board { width: 220px; height: 220px; }
    .cell { font-size: 2rem; }
}