*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Nunito Sans',sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}
.tik_container{text-align:center;padding:20px;}
h1{color:white;font-size:3rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}
.mode-btn,.difficulty-btn,.btn{cursor:pointer;font-weight:bold;border:none;border-radius:10px;padding:15px 30px;margin:5px;transition:transform .25s ease,box-shadow .25s ease;}
.mode-btn,.difficulty-btn{position:relative;overflow:hidden;}
.mode-btn::before,.difficulty-btn::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(90deg,#ffd700,#ffb700,#fff1a8,#ffb700,#ffd700);background-size:300% 100%;animation:goldBorderMove 10s linear infinite;z-index:-1;}
.mode-btn::after,.difficulty-btn::after{content:"";position:absolute;inset:2px;background:#e0e7ff;border-radius:inherit;z-index:-1;}
.mode-btn:hover,.difficulty-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 18px 30px rgba(255,215,0,.35);}
@keyframes goldBorderMove{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.difficulty-btn.easy{background:#10b981;color:white;}
.difficulty-btn.medium{background:#f59e0b;color:white;}
.difficulty-btn.hard{background:#ef4444;color:white;}
.scoreboard{background:white;padding:20px;border-radius:10px;margin-bottom:20px;display:inline-block;box-shadow:0 10px 20px rgba(0,0,0,.2);}
.scores{display:flex;gap:30px;font-weight:bold;text-transform:capitalize;font-size:1.2rem;}
/* .status{background:white;padding:15px 30px;border-radius:10px;font-size:1.5rem;font-weight:bold;margin-bottom:20px;display:inline-block;text-transform:capitalize;box-shadow:0 10px 20px rgba(0,0,0,.2);} */
.board{display:inline-grid;grid-template-columns:repeat(3,100px);grid-template-rows:repeat(3,100px);gap:0;box-shadow:0 20px 40px rgba(0,0,0,.3);margin-bottom:30px;}
.cell{width:100px;height:100px;background:white;border:4px solid #707070;font-size:3rem;font-weight:bold;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;}
.cell:hover:not(.filled){background:#e0e7ff;}
.cell.filled{cursor:default;}
.cell.winning{background:#bbf7d0;}
.cell.x{color:#2563eb;}
.cell.o{color:#dc2626;}
.controls{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;}
.btn.primary{color:#667eea;}
.btn.secondary{color:#764ba2;}
.hidden{display:none !important;}
.popup-header{color:white;background:linear-gradient(360deg,#3d4b3e,#0b0b0b);padding:10px 20px;border-radius:8px 8px 0 0;margin-top:10px;}
.tik_card {
    background: linear-gradient(45deg, #a0ffc4, #ffa0a0);
    border-radius: 4px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}
#playerNamePopup{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:999;}
.popup-box{width:400px;text-align:center;background:linear-gradient(360deg,#d7d7d7,#0b0b0b);padding:20px 30px;border-radius:8px;color:white;}
.popup-box input{width:100%;padding:10px;margin:8px 0;}
.m-t-15{margin-top:15px;}
.instruction-text{color:#04122a;font-size:1.1rem;margin-top:-10px;margin-bottom:15px;font-weight:600;letter-spacing:0.5px;}
.footer{text-align:center;font-size:16px;color:#04122a;padding:12px;background:linear-gradient(90deg,#ff6f61,#00bcd4);border-radius:6px;margin-top:20px;box-shadow:0 4px 12px rgba(0,0,0,.2);font-weight:500;}
.firework{position:fixed;width:6px;height:6px;border-radius:50%;animation:explode 1s ease-out forwards;}
@keyframes explode{to{transform:translate(var(--x),var(--y)) scale(0);opacity:0;}}
.tik_flex {
    display: flex;
    flex-direction: column;
    align-items: anchor-center;
}
.popup{
        position: absolute;
}
/* Responsive */
@media(max-width:767px) {
    h1 {font-size: 2rem !important;}
}
.mode-btn:hover, .difficulty-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 18px 30px rgba(255, 215, 0, 0.35);
    color: #111 !important;
}
.status {
    background: #f2e8b1;
    padding: 15px 30px;
    border-radius: 15px; /* rounded corners */
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    display: inline-block;
    text-transform: capitalize;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    /* Optional subtle animation for glow */
    animation: pulse 2s infinite;
}

/* Continuous pulse animation */
@keyframes pulse {
    0% {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(255, 60, 60, 0.4);
    }
    50% {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 20px 10px rgba(60, 255, 189, 0.2);
    }
    100% {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(255, 60, 60, 0.4);
    }
}
.popup-win {
    width: 330px;
    text-align: center;
    background: linear-gradient(360deg, #764ba2, #ef4444);
    padding: 20px 20px;
    border-radius: 8px;
    color: white;
}
.back-btn {
    margin-top: 20px;
}

.btn:hover {
    transform: translateY(-2px);
}