/* On Parmak Yarışı */
.opKap{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(120% 90% at 50% 0%,#1d3d66,#0b1526 72%);overflow:hidden}
.opKonfeti{position:fixed;inset:0;pointer-events:none;z-index:50}

/* menü */
.opMenu{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px 16px;text-align:center;overflow:auto}
.opLogo{font-size:72px;line-height:1;position:relative;filter:drop-shadow(0 8px 12px #0009)}
.opLogo span{position:absolute;right:-40px;bottom:-6px;font-size:44px;animation:opSur 1.6s ease-in-out infinite}
@keyframes opSur{50%{transform:translateX(10px)}}
.opMenu h2{font-size:34px;margin:0;text-shadow:0 3px 0 #0005}
.opAlt{margin:-8px 0 0;color:#d6ecff;opacity:.85}
.opStatlar{display:flex;gap:10px;width:100%;max-width:380px}
.opStat{flex:1;background:#0005;border:1px solid #ffffff22;border-radius:14px;padding:8px 4px}
.opStat b{display:block;font:800 22px 'Baloo 2',Nunito,sans-serif}
.opStat small{color:#d6ecff;opacity:.8;font-size:12px}
.opOyna{width:100%;max-width:380px;font-size:21px;padding:16px;border-radius:16px}
.btnBuyuk{font-size:20px;padding:14px 22px}
.opRakipler{display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;align-items:center;max-width:380px;font-size:14px}
.opRakipler span{background:#0004;border-radius:10px;padding:3px 8px}
.opRakipler b{color:#ffd23f}
.opRakipler small{opacity:.7}
.opTestBtn{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;max-width:380px;padding:12px;border-radius:16px;border:2px solid #4fd1ff88;background:#4fd1ff1f;color:#fff;font:inherit;cursor:pointer}
.opTestBtn b{font-size:18px}
.opTestBtn small{opacity:.8}

/* oyun */
.opOyun{flex:1;display:flex;flex-direction:column;min-height:0;max-width:760px;width:100%;margin:0 auto}
.opHud{display:flex;align-items:center;gap:6px;padding:8px 10px}
.opHudBtn{width:36px;height:36px;flex:none;border-radius:10px;border:1px solid #ffffff33;background:#0004;color:#fff;font-size:16px;cursor:pointer}
.opHudAd{flex:1;font:800 17px 'Baloo 2',Nunito,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opHudKutu{background:#0004;border-radius:10px;padding:5px 9px;font-size:14px;white-space:nowrap}
.opHudKutu b{color:#ffd23f}
.opHudKutu small{opacity:.7;font-size:11px}
.opPist{margin:0 10px;border-radius:14px;background:repeating-linear-gradient(90deg,#3a3f4b 0 40px,#363b46 40px 80px);box-shadow:inset 0 0 0 3px #ffffff1a;overflow:hidden;flex:none}
.opSerit{position:relative;height:38px;border-bottom:2px dashed #ffffff30;display:flex;align-items:center}
.opSerit:last-child{border-bottom:none}
.opSerit.ben{background:#4fd1ff1a}
.opAd{position:absolute;left:8px;top:1px;font-size:10px;opacity:.85;white-space:nowrap}
.opAd small{color:#ffd23f}
.opAraba{position:absolute;left:6px;bottom:2px;font-size:26px;line-height:1;transform:scaleX(-1) translateX(0);transition:transform .15s linear;display:inline-block}
.opBayrak{position:absolute;right:6px;font-size:22px}
.opTestSaat{display:flex;align-items:baseline;justify-content:center;gap:6px;padding:8px}
.opTestSaat b{font:800 44px/1 'Baloo 2',Nunito,sans-serif;color:#ffd23f}
.opMetin{flex:1;min-height:90px;overflow-y:auto;margin:10px;padding:14px 16px;border-radius:14px;background:#fdfbf4;color:#2a2f3a;font:600 22px/1.65 'Nunito',sans-serif;letter-spacing:.2px;cursor:text;transition:filter .2s}
.opDurdu .opMetin,.opDurdu .opPist{filter:blur(8px)}
.opK{white-space:nowrap}
.opK.tamam{color:#2fa65a}
.opK.simdi{background:#4fd1ff2e;border-radius:6px;padding:0 2px}
.opK i{font-style:normal}
.opK i.iyi{color:#2fa65a}
.opK i.kotu{color:#fff;background:#e5484d;border-radius:3px}
.opK i.imlec{border-left:2px solid #1d7fd6;animation:opImlec 1s steps(1) infinite}
@keyframes opImlec{50%{border-color:transparent}}
.opGirisKap{position:relative;padding:0 10px calc(10px + env(safe-area-inset-bottom))}
.opGiris{width:100%;box-sizing:border-box;padding:14px 16px;border-radius:14px;border:3px solid #4fd1ff;background:#0d1b2e;color:#fff;font:700 22px 'Nunito',sans-serif;outline:none}
.opGiris.hata{border-color:#e5484d;background:#3a1218}
.opGiris:disabled{opacity:.6}
.opGeriSayim{position:absolute;left:50%;bottom:120%;transform:translateX(-50%);font:800 72px/1 'Baloo 2',Nunito,sans-serif;color:#ffd23f;text-shadow:0 5px 0 #0008;pointer-events:none;animation:opSayim .8s infinite}
@keyframes opSayim{0%{transform:translateX(-50%) scale(1.4);opacity:0}30%{transform:translateX(-50%) scale(1);opacity:1}}
.test .opMetin{font-size:24px}

/* pencereler */
.opSonuc{text-align:center}
.opBuyuk{font-size:58px;line-height:1.1}
.opSkorBuyuk{font:800 58px/1 'Baloo 2',Nunito,sans-serif;color:#ffd23f;text-shadow:0 4px 0 #0006;margin:6px 0}
.opSkorBuyuk small{font-size:22px;color:#fff}
.opYildizlar{font-size:42px;letter-spacing:6px}
.opYildizlar span{color:#ffffff33;display:inline-block}
.opYildizlar span.dolu{color:#ffd23f;animation:opYildiz .5s both}
@keyframes opYildiz{from{transform:scale(0) rotate(-90deg)}}
@media (max-width:420px){.opMetin{font-size:19px;padding:10px 12px}.opGiris{font-size:19px;padding:11px 14px}}