:root{--ink:#30323a;--muted:#6d7079;--paper:#fffdf9;--line:#e4e1e4;--aqua:#d7f3f3;--pink:#ffd5de;--pink-strong:#e97893;--gold:#f7c55b;--night:#182332;--shadow:0 24px 60px rgba(48,50,58,.15)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 10% 18%,rgba(215,243,243,.75),transparent 29rem),radial-gradient(circle at 90% 38%,rgba(255,213,222,.55),transparent 28rem),var(--paper);color:var(--ink);font-family:"Source Sans 3",sans-serif;margin:0}button,input{font:inherit}.topbar{position:sticky;top:0}.topbar .brand>span:last-child{display:flex;flex-direction:column}main{margin:auto;max-width:1220px;padding:38px clamp(10px,3vw,32px) 60px}.hero{margin:0 auto 23px;max-width:1040px;text-align:center}.eyebrow,.modal-kicker{color:#85631f;font:900 11px Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase}.hero h1{font:900 clamp(38px,5vw,61px)/1.03 Nunito,sans-serif;letter-spacing:-.045em;margin:8px 0 11px}.hero h1 em{color:var(--pink-strong);font-style:normal}.hero>p{color:var(--muted);font-size:clamp(16px,2vw,19px);margin:0}.hero-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:15px}.hero-pills span{background:#fff;border:1px solid var(--line);border-radius:999px;font:800 12px Nunito,sans-serif;padding:7px 11px}
.game-shell{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);overflow:hidden;position:relative}.toolbar{align-items:center;background:#fff;display:flex;gap:14px;justify-content:space-between;padding:11px 14px}.match-stats,.tools{display:flex;flex-wrap:wrap;gap:7px}.match-stats span{background:#f7f7f5;border:1px solid #ece9e7;border-radius:10px;color:var(--muted);font:900 9px Nunito,sans-serif;letter-spacing:.08em;min-width:94px;padding:6px 9px;text-align:center}.match-stats strong{color:var(--ink);font-size:14px;letter-spacing:0;margin-left:4px}.tools button{background:#fff;border:1px solid var(--line);border-radius:9px;cursor:pointer;font:900 10px Nunito,sans-serif;padding:8px 9px}.tools button:hover{background:var(--aqua)}
.arena{background:var(--night);height:720px;overflow:hidden;position:relative}.arena-bg{height:100%;inset:0;object-fit:cover;position:absolute;width:100%}.arena-shade{background:linear-gradient(180deg,rgba(12,20,32,.55),rgba(14,23,36,.08) 28%,rgba(13,22,34,.18) 58%,rgba(11,18,29,.91));inset:0;position:absolute}.scoreboard{align-items:center;display:grid;gap:12px;grid-template-columns:1fr auto 1fr;left:16px;position:absolute;right:16px;top:14px;z-index:7}.player-score{align-items:center;background:linear-gradient(180deg,rgba(22,31,45,.94),rgba(25,35,50,.86));border:1px solid rgba(255,255,255,.25);border-radius:13px;color:#fff;display:grid;gap:11px;min-height:58px;padding:8px 12px}.player-score.p1{grid-template-columns:minmax(86px,auto) 1fr auto}.player-score.p2{grid-template-columns:auto 1fr minmax(86px,auto);text-align:right}.player-score small{color:#aeb9c7;display:block;font:900 8px Nunito,sans-serif;letter-spacing:.12em}.player-score strong{display:block;font:900 13px Nunito,sans-serif}.player-score>b{font:900 25px Nunito,sans-serif}.score-pips{display:flex;gap:4px}.p2 .score-pips{justify-content:flex-end}.score-pip{background:#566171;border:1px solid rgba(255,255,255,.25);border-radius:999px;height:8px;transition:.25s;width:100%}.score-pip.on{background:linear-gradient(90deg,#f7c55b,#fff0a6);box-shadow:0 0 9px rgba(247,197,91,.75)}.p2 .score-pip.on{background:linear-gradient(90deg,#f4a4b6,#ffd8e1);box-shadow:0 0 9px rgba(233,120,147,.75)}.versus{background:linear-gradient(145deg,#fff7db,#f7c55b);border:2px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 5px 13px rgba(10,18,28,.28);color:#4b3a1c;font:900 15px Nunito,sans-serif;height:45px;line-height:41px;text-align:center;transform:rotate(-5deg);width:45px}
.duel-stage{bottom:128px;left:0;pointer-events:none;position:absolute;right:0;top:70px;z-index:2}.fighter{bottom:6px;height:78%;position:absolute;transform-origin:50% 93%;width:39%;z-index:2}.fighter img{filter:drop-shadow(0 20px 15px rgba(8,16,26,.48));height:100%;object-fit:contain;width:100%}.fighter-one{animation:idleOne 2.7s ease-in-out infinite;left:0}.fighter-two{animation:idleTwo 2.9s ease-in-out infinite;right:0}.fighter-one.attack{animation:attackOne .55s cubic-bezier(.25,.8,.25,1)!important}.fighter-two.attack{animation:attackTwo .55s cubic-bezier(.25,.8,.25,1)!important}.fighter-one.hit{animation:hitOne .5s ease!important}.fighter-two.hit{animation:hitTwo .5s ease!important}.fighter.stunned{animation:stun .18s ease-in-out 5!important;filter:grayscale(.38) brightness(.85)}.ground-shadow{background:radial-gradient(ellipse,rgba(7,13,21,.63),rgba(7,13,21,0) 70%);bottom:0;height:55px;position:absolute;width:31%}.shadow-one{left:4%}.shadow-two{right:4%}.hit-text{color:#fff;font:900 clamp(24px,4vw,46px) Nunito,sans-serif;left:50%;opacity:0;position:absolute;text-shadow:0 3px 0 #1f2632,0 0 18px rgba(255,255,255,.8);top:42%;transform:translate(-50%,-50%);z-index:6}.hit-text.show{animation:hitText .75s ease}.arena.shake{animation:arenaShake .34s ease}
.challenge-board{background:rgba(255,253,248,.95);border:1px solid rgba(255,255,255,.85);border-radius:19px;box-shadow:0 15px 35px rgba(13,22,34,.28);left:50%;padding:12px 15px 14px;position:absolute;text-align:center;top:102px;transform:translateX(-50%);width:min(38%,410px);z-index:6}.challenge-kicker{color:#886920;font:900 9px Nunito,sans-serif;letter-spacing:.14em}.challenge-board h2{font:900 clamp(16px,2vw,23px)/1.15 Nunito,sans-serif;margin:3px 0 10px}.number-cards{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}.number-card{background:linear-gradient(155deg,#fff,#eef2f2);border:2px solid #7a8794;border-radius:12px;box-shadow:0 5px 0 #485461;color:var(--ink);font:900 clamp(23px,3vw,36px) Nunito,sans-serif;min-height:67px;padding:6px 2px;transition:.18s}.number-card.correct{background:#dff5e6;border-color:#53a873;box-shadow:0 5px 0 #36764f;color:#245d39}.number-card.wrong{animation:wrongCard .3s;background:#ffe2e8;border-color:#d45c78;box-shadow:0 5px 0 #9d4057;color:#94364e}.round-curtain{align-items:center;background:rgba(24,35,50,.91);border-radius:17px;display:none;inset:0;justify-content:center;position:absolute}.round-curtain.show{display:flex}.round-curtain b{color:#fff;font:900 clamp(30px,5vw,56px) Nunito,sans-serif;letter-spacing:.04em;text-shadow:0 4px 0 rgba(0,0,0,.22)}
.controls-area{align-items:center;bottom:12px;display:grid;gap:10px;grid-template-columns:1fr minmax(170px,.65fr) 1fr;left:12px;position:absolute;right:12px;z-index:8}.player-controls{align-items:center;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.72);border-radius:15px;box-shadow:0 7px 19px rgba(10,18,28,.26);display:flex;gap:10px;justify-content:space-between;padding:9px 11px;transition:.2s}.p2-controls{flex-direction:row-reverse;text-align:right}.player-controls strong{display:block;font:900 11px Nunito,sans-serif}.player-controls small{color:var(--muted);display:block;font-size:10px}.player-controls.locked{filter:grayscale(.85);opacity:.55;transform:translateY(3px)}.key-row{display:flex;gap:5px}.key-row button{background:transparent;border:0;cursor:pointer;padding:0;touch-action:manipulation}.key-row button:disabled{cursor:default}.touch-choice{align-items:center;background:#fff;border:1px solid #bdc5cc;border-radius:8px;box-shadow:0 4px 0 #7a8791;display:flex;font:900 17px Nunito,sans-serif;height:42px;justify-content:center;min-width:54px;padding:0 7px}.p1-controls .touch-choice{background:#dbf4f4}.p2-controls .touch-choice{background:#ffe0e7}.key-row button:active .touch-choice{box-shadow:0 1px 0 #7a8791;transform:translateY(3px)}.round-message{background:rgba(25,35,50,.88);border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;font:800 11px/1.2 Nunito,sans-serif;min-height:40px;padding:7px 12px;text-align:center}.round-message.good{background:rgba(38,105,67,.92)}.round-message.bad{background:rgba(142,54,76,.92)}
.layer{align-items:center;background:rgba(255,253,249,.96);display:none;inset:0;justify-content:center;padding:20px;position:absolute;z-index:20}.layer.show{display:flex}.modal{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);max-width:660px;padding:30px;text-align:center;width:100%}.modal-icon{font-size:50px}.modal h2{font:900 clamp(27px,4vw,39px) Nunito,sans-serif;margin:7px 0 10px}.modal>p{color:var(--muted);font-size:15px;line-height:1.5}.name-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin:15px 0}.name-grid label{color:var(--muted);font:800 11px Nunito,sans-serif;text-align:left;text-transform:uppercase}.name-grid input{border:1px solid var(--line);border-radius:10px;color:var(--ink);display:block;font:800 15px Nunito,sans-serif;margin-top:4px;padding:10px;width:100%}.modal-steps{display:grid;gap:8px;grid-template-columns:repeat(3,1fr);margin:18px 0}.modal-steps span{background:#f5f5f3;border-radius:12px;font-weight:800;padding:11px}.modal-steps b{background:var(--gold);border-radius:999px;display:block;font:900 12px Nunito,sans-serif;line-height:27px;margin:0 auto 5px;min-height:27px;padding:0 8px;width:max-content}.start-btn{background:var(--ink);border:0;border-radius:11px;color:#fff;cursor:pointer;font:900 14px Nunito,sans-serif;min-height:44px;padding:9px 17px}.final-score{align-items:center;display:flex;gap:16px;justify-content:center;margin:18px 0}.final-score strong{background:#f4f4f1;border-radius:12px;font:900 30px Nunito,sans-serif;min-width:72px;padding:8px}.final-score span{color:var(--muted);font-weight:900}
.teacher-guide{margin-top:20px}.teacher-guide__grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}footer{border-top:1px solid var(--line);color:var(--muted);display:flex;flex-wrap:wrap;font-size:12px;gap:14px 22px;justify-content:center;padding:17px}footer a{color:inherit;text-decoration:none}.game-shell:fullscreen,.game-shell:-webkit-full-screen{background:#fff;border:0;border-radius:0;height:100vh;overflow:auto}.game-shell:fullscreen .arena{height:calc(100vh - 61px);min-height:650px}
@keyframes idleOne{0%,100%{transform:translateY(0) rotate(.15deg)}50%{transform:translateY(-5px) rotate(-.45deg)}}@keyframes idleTwo{0%,100%{transform:translateY(0) rotate(-.15deg)}50%{transform:translateY(-5px) rotate(.45deg)}}@keyframes attackOne{0%,100%{transform:translateX(0)}42%{transform:translateX(72px) rotate(2deg) scale(1.035)}68%{transform:translateX(62px) rotate(1deg)}}@keyframes attackTwo{0%,100%{transform:translateX(0)}42%{transform:translateX(-72px) rotate(-2deg) scale(1.035)}68%{transform:translateX(-62px) rotate(-1deg)}}@keyframes hitOne{0%,100%{transform:translateX(0)}30%{filter:brightness(1.6);transform:translateX(-26px) rotate(-3deg)}65%{transform:translateX(-13px) rotate(-1deg)}}@keyframes hitTwo{0%,100%{transform:translateX(0)}30%{filter:brightness(1.6);transform:translateX(26px) rotate(3deg)}65%{transform:translateX(13px) rotate(1deg)}}@keyframes stun{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}@keyframes arenaShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}@keyframes hitText{0%{opacity:0;transform:translate(-50%,-20%) scale(.55)}24%{opacity:1;transform:translate(-50%,-55%) scale(1.16)}100%{opacity:0;transform:translate(-50%,-100%) scale(.92)}}@keyframes wrongCard{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}70%{transform:translateX(5px)}}
@media(max-width:780px){main{padding:28px 8px 45px}.toolbar{align-items:stretch;flex-direction:column}.match-stats,.tools{justify-content:center}.arena{height:780px}.scoreboard{gap:5px;left:7px;right:7px}.player-score{gap:5px;padding:7px}.player-score.p1{grid-template-columns:minmax(64px,auto) 1fr auto}.player-score.p2{grid-template-columns:auto 1fr minmax(64px,auto)}.player-score strong{font-size:10px}.score-pips{gap:2px}.versus{font-size:12px;height:36px;line-height:32px;width:36px}.challenge-board{top:95px;width:min(70%,390px)}.duel-stage{bottom:205px;top:140px}.fighter{height:66%;width:48%}.controls-area{grid-template-columns:1fr 1fr}.round-message{grid-column:1/-1;grid-row:1}.player-controls{align-items:stretch;flex-direction:column;text-align:center}.p2-controls{flex-direction:column}.key-row{justify-content:center}.teacher-guide__grid{grid-template-columns:1fr}}
@media(max-width:520px){.arena{height:760px}.player-score small,.score-pips{display:none}.player-score.p1,.player-score.p2{grid-template-columns:1fr auto}.player-score.p2{direction:rtl}.challenge-board{top:88px;width:88%}.challenge-board h2{font-size:18px}.number-card{font-size:25px;min-height:58px}.duel-stage{bottom:225px;top:165px}.fighter{height:58%;width:52%}.fighter-one{left:-5%}.fighter-two{right:-5%}.controls-area{bottom:10px;gap:7px;left:7px;right:7px}.player-controls{padding:8px 5px}.key-row{gap:3px}.touch-choice{font-size:13px;height:38px;min-width:38px;padding:0 3px}.round-message{font-size:10px}.modal{padding:22px 16px}.name-grid{grid-template-columns:1fr}.modal-steps{grid-template-columns:1fr}.modal-steps span{padding:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Canlı arena bekleyişi: karakterler yerlerinden ayrılmadan farklı ritimlerde hareket eder. */
.fighter-one{animation:duelIdleOne 4.2s ease-in-out infinite}.fighter-two{animation:duelIdleTwo 4.7s ease-in-out .35s infinite}.shadow-one{animation:duelShadowOne 4.2s ease-in-out infinite}.shadow-two{animation:duelShadowTwo 4.7s ease-in-out .35s infinite}
@keyframes duelIdleOne{0%,10%,100%{transform:translate(0,0) rotate(.15deg) scale(1)}18%{transform:translate(-3px,3px) rotate(-.7deg) scale(1.012,.985)}27%{transform:translate(3px,-13px) rotate(.8deg) scale(.992,1.012)}35%{transform:translate(1px,0) rotate(.25deg) scale(1)}57%{transform:translate(5px,-4px) rotate(-.5deg)}74%{transform:translate(-2px,-2px) rotate(.5deg)}}
@keyframes duelIdleTwo{0%,13%,100%{transform:translate(0,0) rotate(-.15deg) scale(1)}24%{transform:translate(4px,3px) rotate(.8deg) scale(1.012,.985)}33%{transform:translate(-3px,-12px) rotate(-.8deg) scale(.992,1.012)}42%{transform:translate(-1px,0) rotate(-.25deg) scale(1)}64%{transform:translate(-5px,-5px) rotate(.5deg)}82%{transform:translate(2px,-2px) rotate(-.5deg)}}
@keyframes duelShadowOne{0%,10%,35%,100%{opacity:1;transform:scaleX(1)}18%{transform:scaleX(1.05)}27%{opacity:.62;transform:scaleX(.8)}}
@keyframes duelShadowTwo{0%,13%,42%,100%{opacity:1;transform:scaleX(1)}24%{transform:scaleX(1.05)}33%{opacity:.62;transform:scaleX(.8)}}
@media(prefers-reduced-motion:reduce){.fighter-one,.fighter-two,.shadow-one,.shadow-two{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Soru ve seçenekler iki oyuncunun kendi dokunmatik panelinde gösterilir. */
.arena-curtain{height:105px;inset:auto;left:50%;position:absolute;top:39%;transform:translate(-50%,-50%);width:240px;z-index:12}.duel-stage{bottom:158px}.player-controls{display:grid;grid-template-columns:auto minmax(145px,1fr) auto}.p1-controls{grid-template-areas:"identity question choices"}.p2-controls{grid-template-areas:"choices question identity"}.player-identity{grid-area:identity}.player-question{grid-area:question;text-align:center}.player-question span{color:#8a6b28;display:block;font:900 8px Nunito,sans-serif;letter-spacing:.12em}.player-question strong{font:900 12px/1.15 Nunito,sans-serif}.key-row{grid-area:choices}.key-row button.correct .touch-choice{background:#dff5e6;border-color:#53a873;box-shadow:0 4px 0 #36764f;color:#245d39}.key-row button.wrong .touch-choice{animation:wrongCard .3s;background:#ffe2e8;border-color:#d45c78;box-shadow:0 4px 0 #9d4057;color:#94364e}
@media(max-width:980px){.player-controls{grid-template-columns:1fr;grid-template-areas:"identity" "question" "choices"}.p2-controls{grid-template-areas:"identity" "question" "choices"}.duel-stage{bottom:235px}.player-question strong{font-size:11px}.controls-area{align-items:end}}
@media(max-width:520px){.arena-curtain{top:37%}.duel-stage{bottom:270px}.player-question strong{font-size:10px}.player-identity small{display:none}.controls-area{grid-template-columns:1fr 1fr}.round-message{grid-column:1/-1}.touch-choice{font-size:12px;min-width:36px}}

/* Büyük, iki yana ayrılmış dokunmatik oyuncu panelleri. */
.controls-area{bottom:14px;grid-template-columns:1fr 1fr;gap:14px}.player-controls{min-height:126px;padding:14px 16px}.p1-controls{grid-template-columns:90px minmax(180px,1fr) auto}.p2-controls{grid-template-columns:auto minmax(180px,1fr) 90px}.player-question strong{font-size:18px;line-height:1.2}.player-question span{font-size:9px;margin-bottom:4px}.player-identity strong{font-size:14px}.player-identity small{font-size:12px}.touch-choice{font-size:23px;height:62px;min-width:72px}.key-row{gap:8px}.round-message{left:50%;min-height:34px;padding:8px 18px;position:absolute;top:-48px;transform:translateX(-50%);width:max-content;z-index:10}.duel-stage{bottom:190px}
@media(max-width:980px){.player-controls{grid-template-columns:1fr;min-height:178px;padding:11px}.p1-controls,.p2-controls{grid-template-areas:"identity" "question" "choices"}.player-question strong{font-size:15px}.touch-choice{font-size:19px;height:52px;min-width:58px}.duel-stage{bottom:248px}}
@media(max-width:520px){.controls-area{gap:7px}.player-controls{min-height:190px;padding:9px 5px}.player-question strong{font-size:13px;line-height:1.15}.player-question span{font-size:8px}.player-identity strong{font-size:12px}.touch-choice{font-size:15px;height:46px;min-width:42px}.key-row{gap:4px}.round-message{font-size:10px;max-width:90%;top:-45px;white-space:normal}.duel-stage{bottom:270px}}

/* Doğru cevap kartı oyuncudan rakibine doğru uçar. */
.duel-projectile{align-items:center;background:linear-gradient(145deg,#fff,#dff5f4);border:3px solid #54b5be;border-radius:12px;box-shadow:0 0 18px rgba(113,226,232,.9),0 8px 15px rgba(8,16,26,.35);display:none;height:82px;justify-content:center;left:25%;position:absolute;top:42%;width:62px;z-index:9}.duel-projectile span{color:#24384a;font:900 22px Nunito,sans-serif}.duel-projectile.from-one{animation:cardFromOne .68s cubic-bezier(.22,.7,.3,1);display:flex}.duel-projectile.from-two{animation:cardFromTwo .68s cubic-bezier(.22,.7,.3,1);background:linear-gradient(145deg,#fff,#ffe0e7);border-color:#e97893;box-shadow:0 0 18px rgba(233,120,147,.9),0 8px 15px rgba(8,16,26,.35);display:flex}
@keyframes cardFromOne{0%{left:25%;opacity:0;top:48%;transform:rotate(-18deg) scale(.55)}12%{opacity:1}48%{top:25%;transform:rotate(160deg) scale(1.08)}88%{left:70%;opacity:1;top:45%;transform:rotate(335deg) scale(.92)}100%{left:72%;opacity:0;top:47%;transform:rotate(365deg) scale(.6)}}
@keyframes cardFromTwo{0%{left:70%;opacity:0;top:48%;transform:rotate(18deg) scale(.55)}12%{opacity:1}48%{top:25%;transform:rotate(-160deg) scale(1.08)}88%{left:27%;opacity:1;top:45%;transform:rotate(-335deg) scale(.92)}100%{left:25%;opacity:0;top:47%;transform:rotate(-365deg) scale(.6)}}
@media(max-width:520px){.duel-projectile{height:60px;width:46px}.duel-projectile span{font-size:16px}}
@media(prefers-reduced-motion:reduce){.duel-projectile.from-one,.duel-projectile.from-two{animation-duration:.01ms!important}}