:root{--bg-main:#0f0c29;--bg-gradient:linear-gradient(135deg,#0f0c29,#302b63,#24243e);--accent-red:#ff2e63;--accent-blue:#08d9d6;--accent-yellow:#f9d423;--cell-bg:#ffffff1a;--cell-active:#6200ea}
body{background: #0b0119;color:#eee;font-family:'Poppins',sans-serif;margin:0;padding:0;}
body::before{content:"";width:100%;min-height: 720px;position:absolute;left:0;top:0;background: url('../images/NumberMatch-06.jpg')no-repeat center bottom / cover;z-index:-1;opacity: .25;}
.game-container{max-width:450px;display:flex;flex-direction:column;padding:10px;align-items: center;margin: 10px auto;}
header{display:flex;flex-direction:column;align-items:center}
.header-top{display:flex;align-items:center;width:100%;margin-bottom:10px;justify-content:center}
.logo{width:100px;}
.icon-btn{background:#ffffff1a;border:1px solid #fff3;color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1.2rem;transition:.3s;position:fixed;right:20px;top:20px}
.icon-btn:hover{background:var(--accent-blue);color:#000}
.number-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;padding:15px;background:#4049a6;border-radius:20px;border:1px solid #ffffff1a;box-shadow:0 10px 30px #00000080;width:100%;box-sizing:border-box;margin-bottom:20px}
.number-cell{aspect-ratio:1 / 1;background:var(--cell-bg);display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:1.2rem;font-weight:700;cursor:pointer;user-select:none;transition:all .2s cubic-bezier(0.175,0.885,0.32,1.275)}
.number-cell.selected{background:var(--accent-blue);color:#000;box-shadow:0 0 15px var(--accent-blue);transform:scale(1.05);z-index:5}
.number-cell.removed{opacity:.15;background:transparent!important;border:1px solid #ffffff0d;transform:scale(0.9);pointer-events:none}
.tracker-container{display:flex;justify-content:center;gap:6px;margin-bottom:-10px;padding:10px;background:#0000;border-radius:12px 12px 0 0;width:max-content}
.tracker-item{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:100px 100px 0 0;font-size:.75rem;background:#00000026;color:#ffffff40;transition:all .3s ease}
.tracker-item.eliminated{color:#ffffff1a;box-shadow:none;transform:scale(0.75);text-decoration:line-through;transform-origin:bottom;filter:blur(1px);background:#0000000d}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.btn{padding:14px;border:none;border-radius:12px;font-weight:800;cursor:pointer;transition:all .2s;text-transform:uppercase}
.btn.primary{background:var(--accent-red);color:#fff}
.btn.secondary{background:var(--accent-blue);color:#1a1a2e}
.btn.hint-btn{background:var(--accent-yellow);color:#1a1a2e;grid-column:span 2}
.btn:active{transform:scale(0.95)}
.btn:disabled{opacity:.3;filter:grayscale(1);cursor:not-allowed}
.pulse-animation{animation:pulseGlow 1.5s infinite!important;background-color:var(--accent-red)!important;border:2px solid #fff!important}
@keyframes pulseGlow {
0%{transform:scale(1);box-shadow:0 0 0 0 #ff2e63b3}
70%{transform:scale(1.05);box-shadow:0 0 0 15px #ff2e6300}
100%{transform:scale(1);box-shadow:0 0 0 0 #ff2e6300}
}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0a1ef2;z-index:2000;justify-content:center;align-items:center;backdrop-filter:blur(8px)}
.modal-content{background:linear-gradient(135deg,#1f1c2c,#3a3655);padding:30px;border-radius:25px;text-align:center;border:2px solid var(--accent-yellow);box-shadow:0 0 40px #f9d42333;width:85%;max-width:340px;animation:modalPop .4s cubic-bezier(0.175,0.885,0.32,1.275)}
@keyframes modalPop {
from{transform:scale(0.7);opacity:0}
to{transform:scale(1);opacity:1}
}
.tutorial-slide{display:none;flex-direction:column;align-items:center;min-height:300px}
.tutorial-slide.active{display:flex}
.tutorial-anim-container{position:relative;margin:20px 0;height:160px;display:flex;justify-content:center}
.demo-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:6px;padding:10px;background:#0000004d;border-radius:12px}
.demo-cell{width:38px;height:38px;background:#ffffff1a;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.demo-cell.dummy{opacity:.2}
.demo-cell.highlight-blue{background:var(--accent-blue)!important;color:#000;box-shadow:0 0 10px var(--accent-blue);border:2px solid #fff}
.demo-cell.highlight-red{background:var(--accent-red)!important;color:#fff;box-shadow:0 0 10px var(--accent-red);border:2px solid #fff}
.demo-cell.highlight-yellow{background:var(--accent-yellow)!important;color:#000;box-shadow:0 0 10px var(--accent-yellow);border:2px solid #fff}
.demo-cell.ghost{background:#ffffff08;border:1px dashed #ffffff1a}
.tutorial-content p{font-size:.9rem;line-height:1.4;margin-top:15px;color:#ccc}
.hint-cell{animation:hintGlow 1s infinite ease-in-out}
.close-btn{position:absolute;top:15px;right:15px;width:30px;height:30px;background:#ffffff1a;border:none;border-radius:50%;color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:100}
.close-btn:hover{background:var(--accent-red);transform:rotate(90deg)}
.tutorial-content{position:relative}
@keyframes hintGlow {
0%,100%{box-shadow:0 0 5px var(--accent-yellow);border:2px solid var(--accent-yellow)}
50%{box-shadow:0 0 20px var(--accent-yellow);border:2px solid #fff;transform:scale(1.05)}
}
.shake{animation:shakeEffect .3s ease-in-out}
@keyframes shakeEffect {
0%,100%{transform:translateX(0)}
25%{transform:translateX(-5px);background:var(--accent-red)}
75%{transform:translateX(5px);background:var(--accent-red)}
}
.score-board{font-size:1.8rem;font-weight:800;color:var(--accent-yellow);text-shadow:0 0 10px #f9d42380;transition:transform .2s ease}
.score-bump{animation:scoreBump .3s ease-out}
@keyframes scoreBump {
0%{transform:scale(1)}
50%{transform:scale(1.2);color:#fff}
100%{transform:scale(1)}
}
.stars{font-size:3.5rem;margin-bottom:20px;display:flex;justify-content:center;gap:15px}
.stars span{transition:all .5s ease}
.star-animate{animation:starPop .6s cubic-bezier(0.175,0.885,0.32,1.275) forwards}
@keyframes starPop {
0%{transform:scale(0) rotate(-45deg);opacity:0}
80%{transform:scale(1.2) rotate(10deg)}
100%{transform:scale(1) rotate(0);opacity:1}
}
#rank-text{font-size:1.6rem;font-weight:700;color:var(--accent-blue);margin:15px 0;display:block}
.status-msg{margin:20px auto}
@media (max-width:400px) {
.number-grid{gap:4px;padding:10px}
.number-cell{font-size:1rem;border-radius:6px}
.tracker-item{width:24px;height:24px;font-size:.75rem}
}

.headerButton{background:#fcebe1;color:#f05a7f;padding:5px 20px;border-radius:100px;display:flex;justify-content:center;width:max-content;margin:10px auto;}
.headerButton button{background:none;border:none;color:#f05a7f;}
footer{display:block;text-align: center;margin: 100px auto 10px;}