@font-face {
    font-family: 'Minecraft';
    src: url('https://db.onlinewebfonts.com/t/6ab5395e2278037c2644fd222384950a.woff2') format('woff2');
}

.hidden { display: none !important; }

body {
    margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center;
    background-color: #111; font-family: 'Minecraft', sans-serif; overflow: hidden; color: white;
}

#shake-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; }

.background-chalkboard {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 
                url('cool-math-aam8r23qhj1sfnmf.jpg') no-repeat center center;
    background-size: cover; z-index: -5;
}

.mc-modal {
    background: #474747; border: 4px solid #000; 
    width: 90%; max-width: 650px; padding: 25px;
    box-shadow: inset 4px 4px #8b8b8b, inset -4px -4px #2d2d2d;
    image-rendering: pixelated; text-align: center;
}

.result-screen { max-width: 750px !important; }

.mc-title { color: #ffff55; text-shadow: 4px 4px 0 #3f3f15; font-size: 2.4rem; margin-bottom: 20px; }
.mc-title-green { color: #55ff55; text-shadow: 4px 4px 0 #153f15; font-size: 2.6rem; margin-bottom: 10px; }
.mc-title-red { color: #ff5555; text-shadow: 4px 4px 0 #3f1515; font-size: 2.6rem; margin-bottom: 10px; }

.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.mc-btn {
    font-family: 'Minecraft', sans-serif; background: #888; border: 4px solid #000;
    border-top-color: #fff; border-left-color: #fff; color: #fff; padding: 12px; cursor: pointer;
    font-size: 1rem; text-shadow: 2px 2px #000; transition: 0.1s;
}
.mc-btn:hover { background: #5a8e44; }

.extreme-glow { background: #aa0000; box-shadow: 0 0 15px #ff0000; }
.survival-glow { background: #5500aa; box-shadow: 0 0 15px #aa00ff; width: 100%; margin-top: 8px; }

.disabled-btn {
    background: #444 !important;
    border-color: #222 !important;
    color: #777 !important;
    pointer-events: none;
    box-shadow: inset 2px 2px #111 !important;
}

.stats-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.hp-bar { width: 140px; height: 18px; background: #222; border: 2px solid #000; }
.hp-fill { height: 100%; transition: width 0.3s; }
.player { background: #55ff55; }
.bot { background: #ff5555; }

.crit-explosion { position: absolute; top: -35px; right: 0; width: 70px !important; pointer-events: none; }

.math-text { font-family: 'Arial', sans-serif !important; font-weight: bold; }
.normal-font { font-size: 1.8rem; background: rgba(0,0,0,0.5); padding: 12px; margin: 15px 0; border-radius: 4px; }
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* End Screen Düzeni */
.score-wrapper { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 10px 0; }
.score-container { grid-column: 2; text-align: center; }
.gold-text { color: #ffff55; font-size: 4rem; text-shadow: 4px 4px 0 #3f3f15; margin: 0; }
.trophy { width: 90px !important; }
.trophy-left { grid-column: 1; margin-right: 20px; justify-self: end; }
.trophy-right { grid-column: 3; margin-left: 20px; justify-self: start; }

.stats-inner-box.wide-grid {
    background: #313131; border: 4px solid #000; padding: 15px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 15px auto;
}
.stat-item { display: flex; flex-direction: column; background: #222; padding: 8px; border: 2px solid #555; }
.stat-item .label { font-size: 0.75rem; color: #aaa; margin-bottom: 2px; }
.stat-item .value { font-size: 1.2rem; }

.button-center { display: flex; justify-content: center; width: 100%; }
.restart-btn { margin-top: 10px; width: 60%; }

@media (max-width: 600px) {
    .stats-inner-box.wide-grid { grid-template-columns: 1fr; }
    .score-wrapper { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; }
    .trophy { margin: 0; width: 60px !important; }
    .trophy-left { margin-right: 0; }
    .trophy-right { margin-left: 0; }
    .gold-text { font-size: 3rem; }
}

.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; z-index: 100; }
.flash-active { opacity: 1; transition: opacity 0.1s; }
.red-flash { background: rgba(255, 0, 0, 0.25); }
.green-flash { background: rgba(0, 255, 0, 0.15); }
.shake-active { animation: shake 0.2s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.float-anim { animation: float 2s infinite ease-in-out; }