*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#020C1E;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#E0F2FE}
#gc{position:fixed;inset:0;width:100%;height:100%}

/* HUD */
#hud{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;z-index:10;pointer-events:none;background:linear-gradient(to bottom,rgba(2,12,30,.8) 0%,transparent 100%)}
#hud-left{display:flex;align-items:center;gap:10px}
#back-btn{pointer-events:all;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);border-radius:10px;padding:6px 13px;font-size:13px;cursor:pointer;font-family:inherit}
#track-dot{width:8px;height:8px;border-radius:50%;background:#EF4444;box-shadow:0 0 8px #EF4444;transition:background .3s,box-shadow .3s;flex-shrink:0}
#track-dot.ok{background:#22C55E;box-shadow:0 0 8px #22C55E}
#hud-mid{display:none}
#score-bar{position:fixed;top:54px;left:50%;transform:translateX(-50%);text-align:center;z-index:9;pointer-events:none;min-width:80px}
#score-val{font-size:34px;font-weight:900;color:#fff;line-height:1;text-shadow:0 2px 20px rgba(103,232,249,.45)}
#score-lbl{font-size:9px;color:rgba(255,255,255,.35);letter-spacing:.06em;margin-top:1px}
#combo-badge{font-size:13px;font-weight:800;color:#FBBF24;margin-top:3px;min-height:18px;transition:opacity .2s}
#hud-right{display:flex;align-items:center;gap:8px}
.heart{font-size:18px;transition:opacity .3s}
.heart.lost{opacity:.18}

/* Screens */
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.box{background:rgba(2,12,30,.98);border-radius:22px;padding:28px 22px;max-width:420px;width:100%;text-align:center;max-height:96vh;overflow-y:auto}
.s-ico{font-size:48px;margin-bottom:8px}
.s-title{font-size:34px;font-weight:900;color:#fff;margin-bottom:6px;letter-spacing:-.02em}
.s-sub{font-size:15px;color:rgba(255,255,255,.75);line-height:1.65;margin-bottom:18px}
.s-note{font-size:12px;color:#7b94b6;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px;margin-bottom:18px;text-align:left;line-height:1.7;white-space:pre-line}
.btn{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border:none;border-radius:14px;padding:16px 0;font-size:17px;font-weight:800;cursor:pointer;font-family:inherit;width:100%;margin-bottom:8px;transition:opacity .15s,transform .1s;letter-spacing:.02em}
.btn:hover{opacity:.88;transform:translateY(-1px)}
.btn-s{background:rgba(255,255,255,.07);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 0;font-size:14px;cursor:pointer;font-family:inherit;width:100%;margin-bottom:8px}
.btn-install{background:rgba(52,211,153,.10);color:#34d399;border-radius:14px;padding:13px 0;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;width:100%;margin-bottom:8px;transition:background .2s,border-color .2s}
.btn-install:hover{background:rgba(52,211,153,.2);border-color:rgba(52,211,153,.6)}
.ctrl-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.ctrl-card{border-radius:16px;padding:16px 12px;text-align:center;transition:transform .15s}
.ctrl-card.c-head{background:rgba(59,130,246,.1);border:1.5px solid rgba(59,130,246,.35)}
.ctrl-card.c-blink{background:rgba(6,182,212,.12);border:1.5px solid rgba(6,182,212,.45)}
.ctrl-card.c-mouth{background:rgba(168,85,247,.1);border:1.5px solid rgba(168,85,247,.35)}
.ctrl-card.c-health{background:rgba(52,211,153,.08);border:1.5px solid rgba(52,211,153,.3)}
.ctrl-ico{width:70px;height:70px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
.ctrl-ico img{width:70px;height:70px;object-fit:contain;display:block}
.ctrl-lbl{font-size:15px;font-weight:800;color:#e2e8f0;margin-bottom:6px;letter-spacing:.01em}
.ctrl-desc{font-size:13px;color:#7b99bb;line-height:1.55}
.stats{display:flex;gap:8px;margin-bottom:16px}
.stat{flex:1;background:rgba(255,255,255,.05);border-radius:10px;padding:12px 6px}
.stat-n{font-size:26px;font-weight:900;color:#67e8f9;line-height:1}
.stat-l{font-size:10px;color:#4b6080;margin-top:3px}

/* Calibration */
#calib-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:25;background:rgba(2,12,30,.95);gap:0}
#calib-inner{text-align:center;max-width:300px}
#calib-icon{font-size:52px;margin-bottom:16px}
#calib-title{font-size:20px;font-weight:800;color:#fff;margin-bottom:8px}
#calib-desc{font-size:13px;color:rgba(255,255,255,.55);line-height:1.6;margin-bottom:24px}
#calib-bar-wrap{width:100%;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-bottom:10px}
#calib-bar{height:100%;background:linear-gradient(90deg,#06b6d4,#3b82f6);width:0%;transition:width .1s;border-radius:3px}
#calib-step{font-size:13px;color:rgba(255,255,255,.3)}
#calib-feedback{font-size:18px;margin-top:16px;min-height:24px;font-weight:700;color:#34d399}

/* Health break */
#health-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;background:rgba(2,12,30,.97);padding:20px;text-align:center}
#hb-ico{font-size:56px;margin-bottom:14px;animation:hb-pulse 1.2s ease-in-out infinite}
@keyframes hb-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
#hb-title{font-size:26px;font-weight:900;color:#34d399;margin-bottom:8px}
#hb-sub{font-size:16px;color:rgba(255,255,255,.6);margin-bottom:22px}
#hb-exercise{font-size:28px;font-weight:900;color:#fff;margin-bottom:10px;line-height:1.35}
#hb-desc{font-size:17px;color:rgba(255,255,255,.7);margin-bottom:22px;line-height:1.7;max-width:320px}
#hb-progress{display:flex;gap:8px;margin-bottom:22px}
.hb-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.15);transition:background .3s}
.hb-dot.done{background:#34d399}
.hb-dot.active{background:#06b6d4;box-shadow:0 0 8px #06b6d4}
#hb-timer-bar{width:100%;max-width:300px;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-bottom:24px}
#hb-timer-fill{height:100%;background:#34d399;width:100%;transition:width .1s linear;border-radius:3px}
#hb-skip{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);border:1.5px solid rgba(255,255,255,.3);border-radius:12px;padding:12px 32px;font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s,border-color .2s}
#hb-skip:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}

/* Language switcher */
.lang-sw-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.flag-mob-trigger{display:none}
.lang-sw{display:flex;gap:4px;align-items:center;justify-content:center;margin-top:12px}
.flag-btn{background:none;border:none;cursor:pointer;padding:3px 5px;border-radius:5px;display:inline-flex;align-items:center;opacity:.7;transition:all .15s}
.flag-btn img{width:28px;height:19px;object-fit:cover;border-radius:3px;display:block;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.flag-btn:hover{background:rgba(255,255,255,.1);opacity:.95}
.flag-btn.flg-active{opacity:1;transform:scale(1.12)}
@media(max-width:639px){
  .flag-mob-trigger{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:7px;cursor:pointer;padding:5px 8px 5px 7px;margin-top:12px}
  .flag-mob-trigger img{width:24px;height:16px;object-fit:cover;border-radius:2px;display:block}
  .flag-mob-trigger .caret{font-size:10px;color:rgba(255,255,255,.5);line-height:1}
  .lang-sw{display:none;margin-top:0}
  .lang-sw.flg-open{display:flex;flex-direction:column;position:absolute;bottom:calc(100%+6px);left:50%;transform:translateX(-50%);background:#0d1829;border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:5px;gap:3px;z-index:999;box-shadow:0 -4px 24px rgba(0,0,0,.75)}
  .lang-sw.flg-open .flag-btn{display:inline-flex}
  .lang-sw.flg-open .flag-btn img{width:30px;height:20px}
}

/* Splash screen */
#scr-splash{position:fixed;inset:0;background:#030303;display:flex;align-items:center;justify-content:center;z-index:50;padding:24px;overflow-y:auto}
#splash-inner{display:flex;flex-direction:column;align-items:center;gap:28px;max-width:480px;width:100%;text-align:center;padding:20px 0}
#splash-logo{width:min(320px,82vw);height:auto}
#splash-tag{font-size:clamp(17px,4.2vw,22px);color:rgba(255,255,255,.82);line-height:1.65;font-weight:500;max-width:390px}
.btn-splash{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border:none;border-radius:16px;padding:18px 0;font-size:clamp(17px,4vw,20px);font-weight:800;cursor:pointer;font-family:inherit;width:100%;max-width:340px;transition:opacity .15s,transform .12s;letter-spacing:.03em;box-shadow:0 4px 32px rgba(139,92,246,.35)}
.btn-splash:hover{opacity:.88;transform:translateY(-2px)}
#hud-logo{height:26px;opacity:.8;margin-left:2px}
#scr-end .box{margin-top:-20px}
/* Calibration enlarged */
#calib-icon{font-size:72px;margin-bottom:20px}
#calib-title{font-size:28px;font-weight:900;color:#fff;margin-bottom:12px}
#calib-desc{font-size:17px;color:rgba(255,255,255,.75);line-height:1.65;margin-bottom:26px}
/* Game over title */
#scr-end .s-title{margin-bottom:20px}
/* Info card & screen text bigger */
.ctrl-lbl{font-size:18px;color:#f1f5f9}
.ctrl-desc{font-size:15px;color:#94b8d4;line-height:1.6}
.s-sub{font-size:17px;line-height:1.7}
.s-note{font-size:14px;line-height:1.75}
.stat-n{font-size:30px}
.stat-l{font-size:13px;color:#6b8db0}
/* Splash tag — Space Grotesk, full Turkish support */
#splash-tag{text-align:center;display:flex;flex-direction:column;gap:0}
.sp-l1,.sp-l2,.sp-l3{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:-.02em;
  line-height:1.2;
  color:#7e9ab8;
  -webkit-text-fill-color:#7e9ab8;
}
.sp-l1{font-size:clamp(15px,7.2vw,17px);font-weight:500;margin-bottom:6px}
.sp-l2{font-size:clamp(19px,5vw,26px);font-weight:700;color:#d4e2f0;-webkit-text-fill-color:#d4e2f0;margin-bottom:6px}
.sp-l3{font-size:clamp(15px,7.2vw,17px);font-weight:500}
/* Disco HUD */
#disco-hud{position:fixed;left:50%;transform:translateX(-50%);top:74px;z-index:15;text-align:center;pointer-events:none;padding:9px 28px 12px;border-radius:18px;background:rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}
#disco-timer-val{font-size:40px;font-weight:900;line-height:1;letter-spacing:-.01em}
#disco-blink-ct{font-size:14px;font-weight:700;margin-top:5px;opacity:.9}
/* Benefits screen */
#scr-benefits{position:fixed;inset:0;background:#030303;display:none;flex-direction:column;align-items:center;overflow-y:auto;padding:28px 16px 48px;z-index:55}
#benefits-inner{max-width:460px;width:100%}
#benefits-inner h2{font-size:clamp(22px,5vw,28px);font-weight:900;color:#e2e8f0;margin-bottom:6px;letter-spacing:-.01em}
#benefits-inner .ben-sub{font-size:15px;color:#64748b;margin-bottom:24px;line-height:1.6}
.ben-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:18px 16px;margin-bottom:14px;text-align:left}
.ben-card-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.ben-ico{font-size:28px;line-height:1;flex-shrink:0}
.ben-title{font-size:16px;font-weight:800;color:#e2e8f0;line-height:1.25}
.ben-badge{font-size:10px;font-weight:700;color:#67e8f9;background:rgba(103,232,249,.1);border:1px solid rgba(103,232,249,.25);border-radius:6px;padding:2px 7px;margin-left:auto;flex-shrink:0;letter-spacing:.04em;white-space:nowrap}
.ben-body{font-size:14px;color:#94a3b8;line-height:1.7}
.ben-body b{color:#cbd5e1;font-weight:700}
.ben-ref{font-size:13px;color:#475569;margin-top:7px;font-style:italic}
.btn-back-ben{background:none;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.65);border-radius:12px;padding:13px 24px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;width:100%;margin-top:8px}
.btn-back-ben:hover{background:rgba(255,255,255,.06)}
/* Share block */
.share-block{border-top:1px solid rgba(255,255,255,.08);margin-top:16px;padding-top:14px}
.share-lbl{font-size:13px;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.share-row{display:flex;gap:12px;justify-content:center}
.share-btn{width:48px;height:48px;border-radius:14px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,opacity .15s}
.share-btn:hover{transform:translateY(-2px);opacity:.88}
.share-btn svg{width:22px;height:22px}
.share-wa{background:#25D366;color:#fff}
.share-fb{background:#1877F2;color:#fff}
.share-x{background:#000;color:#fff}
.share-ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
/* Splash benefits link */
.splash-ben-link{background:none;border:none;color:rgba(180,190,210,.65);font-size:14px;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:3px;padding:4px 0;letter-spacing:.01em;transition:color .2s}
.splash-ben-link:hover{color:rgba(200,210,230,.9)}
#mute-btn{position:fixed;bottom:22px;right:14px;z-index:12;background:rgba(0,0,0,.52);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.75);border-radius:50%;width:40px;height:40px;font-size:17px;cursor:pointer;font-family:inherit;display:none;align-items:center;justify-content:center;transition:background .2s}
#mute-btn:hover{background:rgba(255,255,255,.12)}
/* Health report button */
.btn-health{background:rgba(103,232,249,.07);border:1.5px solid rgba(103,232,249,.22);color:#67e8f9;border-radius:12px;padding:13px 0;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;width:100%;margin-bottom:8px;transition:background .2s,border-color .2s}
.btn-health:hover{background:rgba(103,232,249,.13);border-color:rgba(103,232,249,.38)}
/* Health Report Screen */
#scr-health{
  position:fixed;inset:0;
  background:radial-gradient(ellipse at 20% 25%,rgba(59,130,246,.07) 0%,transparent 55%),
             radial-gradient(ellipse at 80% 75%,rgba(139,92,246,.06) 0%,transparent 55%),
             #020c1e;
  z-index:60;overflow-y:auto;display:none
}
#hr-inner{max-width:560px;margin:0 auto;padding:28px 16px 64px}
.hr-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px;gap:12px}
.hr-eyeico{font-size:40px;line-height:1;margin-bottom:8px}
.hr-title{font-size:clamp(22px,5vw,28px);font-weight:900;color:#e2e8f0;letter-spacing:-.02em;margin-bottom:5px}
.hr-sub-text{font-size:14px;color:#4a6a8a;line-height:1.5}
.hr-date{font-size:13px;color:#2a4060;font-weight:600;text-align:right;padding-top:6px;white-space:nowrap;flex-shrink:0}
.hr-daily-lbl{color:rgba(103,232,249,.8);font-weight:600}.hr-daily-val{color:#67e8f9;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.hr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:32px}
@media(max-width:600px){.hr-grid{grid-template-columns:repeat(2,1fr)}}
.hr-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px 14px;text-align:center;position:relative;overflow:hidden}
.hr-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0}
.hr-card.clr-green{border-color:rgba(74,222,128,.18)}
.hr-card.clr-yellow{border-color:rgba(251,191,36,.18)}
.hr-card.clr-red{border-color:rgba(248,113,113,.18)}
.hr-card.clr-green::before{background:linear-gradient(90deg,#22c55e,#4ade80)}
.hr-card.clr-yellow::before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.hr-card.clr-red::before{background:linear-gradient(90deg,#ef4444,#f87171)}
.hr-card.clr-gray::before{background:rgba(255,255,255,.08)}
.hr-name{font-size:13px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;line-height:1.3}
.hr-val{font-size:clamp(26px,6vw,34px);font-weight:900;line-height:1;margin-bottom:4px}
.hr-card.clr-green .hr-val{color:#4ade80}
.hr-card.clr-yellow .hr-val{color:#fbbf24}
.hr-card.clr-red .hr-val{color:#f87171}
.hr-card.clr-gray .hr-val{color:#4a6a8a}
.hr-unit{font-size:13px;font-weight:600;opacity:.55;margin-left:2px}
.hr-status{display:inline-block;font-size:13px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:10px;margin-top:4px}
.clr-green .hr-status{background:rgba(74,222,128,.12);color:#4ade80}
.clr-yellow .hr-status{background:rgba(251,191,36,.12);color:#fbbf24}
.clr-red .hr-status{background:rgba(248,113,113,.12);color:#f87171}
.clr-gray .hr-status{background:rgba(255,255,255,.06);color:#4a6a8a}
.hr-interp{font-size:13px;color:rgba(255,255,255,.55);line-height:1.55;margin-bottom:8px;text-align:left}
.hr-norm{font-size:13px;color:#2a4a6a;line-height:1.4;text-align:left}
.hr-section{margin-bottom:32px}
.hr-section-title{font-size:16px;font-weight:800;color:#c8d8e8;margin-bottom:4px;letter-spacing:-.01em}
.hr-section-sub{font-size:13px;color:#2a4060;margin-bottom:14px}
#hr-chart{display:block;width:100%;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
.hr-legend{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}
.hr-leg-item{display:flex;align-items:center;gap:7px;font-size:13px;color:rgba(255,255,255,.45);font-weight:600}
.hr-leg-dot{width:20px;height:3px;border-radius:2px;flex-shrink:0}
.hr-refs{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:18px 16px;margin-bottom:20px}
.hr-refs-title{font-size:13px;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.hr-ref{font-size:13px;color:#344a62;line-height:1.7;padding-left:14px;position:relative;margin-bottom:4px}
.hr-ref::before{content:'·';position:absolute;left:0;color:#1a2a3a}
.hr-disclaimer{background:rgba(251,191,36,.04);border:1px solid rgba(251,191,36,.12);border-radius:14px;padding:16px;margin-bottom:20px}
.hr-disclaimer-title{font-size:13px;font-weight:700;color:rgba(251,191,36,.7);margin-bottom:6px}
.hr-disclaimer-text{font-size:13px;color:rgba(255,255,255,.4);line-height:1.7}

/* PWA Install Modal */
#install-modal{display:none;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);padding:16px}
#install-modal.open{display:flex}
.install-modal-box{background:#0d1829;border:1px solid rgba(255,255,255,.15);border-radius:22px;padding:28px 24px;max-width:380px;width:100%;text-align:center}
.install-modal-title{font-size:22px;font-weight:900;color:#fff;margin-bottom:8px}
.install-modal-sub{font-size:14px;color:rgba(255,255,255,.55);margin-bottom:22px;line-height:1.6}
.install-steps{text-align:left;display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.install-step{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:rgba(255,255,255,.7);line-height:1.5}
.install-step-num{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.install-step b{color:#fff}
.install-modal-or{font-size:12px;color:rgba(255,255,255,.3);margin-bottom:16px;letter-spacing:.05em;text-transform:uppercase}
.install-modal-close{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);border-radius:10px;padding:10px 24px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;width:100%}
.install-modal-close:hover{background:rgba(255,255,255,.12)}