/* ============================================================
   style.css — FPS Reaction Speed Test (KO + EN shared)
   ============================================================ */

   :root {
    --bg: #050a0f;
    --bg2: #0a1520;
    --bg3: #0d1e2e;
    --panel: #0f2235;
    --border: #1a4060;
    --neon: #00ff88;
    --neon2: #00cfff;
    --neon3: #ff4444;
    --gold: #ffd700;
    --text: #c8e0f0;
    --text2: #7aadcc;
    --font-display: 'Black Han Sans', sans-serif;
    --font-body: 'Noto Sans KR', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
    --r: #ff4444;
    --g: #00ff88;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    min-height:100vh;
    overflow-x:hidden;
    padding-bottom:120px;
  }
  
  /* Grid overlay */
  body::before{
    content:'';position:fixed;inset:0;
    background-image:linear-gradient(rgba(0,255,136,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,136,0.03) 1px,transparent 1px);
    background-size:40px 40px;pointer-events:none;z-index:0;
  }
  /* Scanline */
  body::after{
    content:'';position:fixed;inset:0;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.08) 2px,rgba(0,0,0,0.08) 4px);
    pointer-events:none;z-index:0;
  }
  
  /* ── HEADER ─────────────────────────────────────────────── */
  .site-header{
    position:relative;z-index:10;
    border-bottom:1px solid var(--border);
    background:linear-gradient(180deg,rgba(5,10,15,0.95) 0%,rgba(10,21,32,0.9) 100%);
    padding:12px 20px 8px;
    text-align:center;
  }
  .site-header h1{
    font-family:var(--font-display);
    font-size:clamp(1.4rem,4vw,2rem);
    color:var(--neon);
    text-shadow:0 0 20px rgba(0,255,136,0.5);
    letter-spacing:2px;
  }
  .site-header p{font-size:0.75rem;color:var(--text2);margin-top:2px;}
  .lang-switch{
    position:absolute;right:16px;top:50%;transform:translateY(-50%);
    background:var(--bg3);border:1px solid var(--border);border-radius:6px;
    padding:4px 10px;font-size:0.72rem;color:var(--neon2);text-decoration:none;
    font-family:var(--font-mono);
  }
  .lang-switch:hover{background:var(--panel);}
  
  /* ── DAILY CHALLENGE & TABS (PC 최대 너비 적용) ─────────────── */
  .daily-challenge{
    position:relative;z-index:5;
    margin:12px 16px;
    background:linear-gradient(135deg,rgba(0,207,255,0.08),rgba(0,255,136,0.05));
    border:1px solid rgba(0,207,255,0.3);
    border-radius:10px;padding:10px 16px;
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    max-width:640px; /* PC 정렬 */
    margin-left:auto;
    margin-right:auto;
  }
  .daily-challenge .badge{
    background:var(--neon2);color:#000;font-family:var(--font-mono);
    font-size:0.65rem;font-weight:700;padding:2px 8px;border-radius:4px;white-space:nowrap;
  }
  .daily-challenge .mission{font-size:0.82rem;color:var(--neon2);flex:1;}
  .daily-challenge .streak{font-size:0.72rem;color:var(--gold);font-family:var(--font-mono);}
  
  .tabs-wrapper{
    position:relative;z-index:5;padding:0 12px;margin-bottom:16px;
    max-width:640px; /* PC 정렬 */
    margin-left:auto;
    margin-right:auto;
  }
  .tabs{
    display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
    border-bottom:1px solid var(--border);padding-bottom:0;
    justify-content:flex-start; /* 모바일에서 스크롤을 위해 기본은 flex-start */
  }
  @media(min-width: 640px) {
    .tabs { justify-content:center; /* PC에서는 중앙 정렬 */ }
  }
  .tabs::-webkit-scrollbar{display:none;}
  .tab-btn{
    font-family:var(--font-body);
    white-space:nowrap;padding:10px 14px;
    background:transparent;border:none;border-bottom:2px solid transparent;
    color:var(--text2);cursor:pointer;font-size:0.8rem;font-weight:700;
    transition:all .2s;position:relative;top:1px;
  }
  .tab-btn:hover{color:var(--neon);}
  .tab-btn.active{color:var(--neon);border-bottom-color:var(--neon);}
  
  /* ── PANELS ─────────────────────────────────────────────── */
  .tab-panel{display:none;position:relative;z-index:5;}
  .tab-panel.active{display:block;}
  .panel-inner{max-width:640px;margin:0 auto;padding:0 16px;}
  
  /* ── TEST AREA ──────────────────────────────────────────── */
  .test-area{
    background:var(--panel);border:1px solid var(--border);border-radius:12px;
    overflow:hidden;margin-bottom:16px;
  }
  .test-header{
    padding:12px 16px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:8px;
  }
  .test-header h2{font-family:var(--font-display);font-size:1.1rem;color:var(--neon2);}
  .test-desc{padding:10px 16px;font-size:0.78rem;color:var(--text2);line-height:1.6;}
  
  /* ── REACTION BOX ───────────────────────────────────────── */
  .reaction-box{
    height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    cursor:pointer;transition:background .1s;user-select:none;
    background:var(--bg3);border-top:1px solid var(--border);
    font-family:var(--font-mono);gap:8px;
  }
  .reaction-box.waiting{background:#1a0a0a;}
  .reaction-box.ready{background:#00aa44;cursor:pointer;}
  .reaction-box.early{background:#aa2200;}
  .reaction-box .box-text{font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:1px;}
  .reaction-box .box-sub{font-size:0.75rem;color:rgba(255,255,255,0.7);}
  .reaction-box .big-ms{font-size:2.5rem;font-weight:900;color:#fff;font-family:var(--font-mono);}
  
  /* ── STATS ROW ──────────────────────────────────────────── */
  .stats-row{
    display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);flex-wrap:wrap;
  }
  .stat-box{
    flex:1;min-width:70px;background:var(--bg3);border:1px solid var(--border);
    border-radius:8px;padding:8px 10px;text-align:center;
  }
  .stat-box .label{font-size:0.65rem;color:var(--text2);font-family:var(--font-mono);}
  .stat-box .value{font-size:1.1rem;font-weight:700;color:var(--neon);font-family:var(--font-mono);}
  
  /* ── BUTTONS ────────────────────────────────────────────── */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:12px 24px;border-radius:8px;border:none;cursor:pointer;
    font-size:0.88rem;font-weight:700;font-family:var(--font-body);
    transition:all .2s;letter-spacing:0.5px;
  }
  .btn-primary{background:var(--neon);color:#000;}
  .btn-primary:hover{background:#00dd77;transform:translateY(-1px);}
  .btn-secondary{background:transparent;border:1px solid var(--neon2);color:var(--neon2);}
  .btn-secondary:hover{background:rgba(0,207,255,0.1);}
  .btn-danger{background:transparent;border:1px solid var(--r);color:var(--r);}
  .btn-sm{padding:8px 16px;font-size:0.78rem;}
  .btn-row{display:flex;gap:8px;padding:12px 16px;flex-wrap:wrap;}
  
  /* ── TIER RESULT ────────────────────────────────────────── */
  .tier-card{
    background:var(--bg3);border:1px solid var(--border);border-radius:12px;
    padding:20px;text-align:center;margin-bottom:16px;
  }
  .tier-badge{
    display:inline-block;padding:6px 20px;border-radius:20px;
    font-family:var(--font-display);font-size:1.8rem;letter-spacing:3px;
    margin:8px 0;text-shadow:0 0 20px currentColor;
  }
  .tier-radiant{color:var(--gold);border:2px solid var(--gold);background:rgba(255,215,0,0.08);}
  .tier-diamond{color:#88ccff;border:2px solid #88ccff;background:rgba(136,204,255,0.08);}
  .tier-platinum{color:#88ddaa;border:2px solid #88ddaa;background:rgba(136,221,170,0.08);}
  .tier-gold{color:#ffdd44;border:2px solid #ffdd44;background:rgba(255,221,68,0.08);}
  .tier-silver{color:#aabbcc;border:2px solid #aabbcc;background:rgba(170,187,204,0.08);}
  .tier-iron{color:#aa8877;border:2px solid #aa8877;background:rgba(170,136,119,0.08);}
  .result-ms{font-family:var(--font-mono);font-size:2.8rem;font-weight:900;color:var(--neon);}
  .result-label{font-size:0.8rem;color:var(--text2);margin-bottom:4px;}
  
  /* ── PRO TABLE ──────────────────────────────────────────── */
  .pro-table{width:100%;border-collapse:collapse;font-size:0.8rem;margin-top:12px;}
  .pro-table th{background:rgba(0,255,136,0.08);color:var(--neon);padding:6px 10px;text-align:left;border-bottom:1px solid var(--border);}
  .pro-table td{padding:6px 10px;border-bottom:1px solid rgba(26,64,96,0.4);color:var(--text);}
  .pro-table tr.highlight td{color:var(--neon2);font-weight:700;}
  .pro-table .bar-cell{width:120px;}
  .pro-bar{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;}
  .pro-bar-fill{height:100%;background:linear-gradient(90deg,var(--neon),var(--neon2));border-radius:3px;}
  
  /* ── AIM TEST ───────────────────────────────────────────── */
  .aim-arena{
    position:relative;width:100%;height:260px;background:var(--bg);
    border-top:1px solid var(--border);overflow:hidden;cursor:crosshair;
  }
  .aim-arena .target{
    position:absolute;width:48px;height:48px;border-radius:50%;
    background:radial-gradient(circle,#ff6644 0%,#cc2200 60%,#660000 100%);
    border:2px solid #ff8866;transform:translate(-50%,-50%);cursor:crosshair;
    box-shadow:0 0 12px rgba(255,68,44,0.6);
    animation:targetPop .15s ease-out;
  }
  @keyframes targetPop{from{transform:translate(-50%,-50%) scale(0.3);}to{transform:translate(-50%,-50%) scale(1);}}
  .aim-arena .crosshair{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    pointer-events:none;
  }
  .aim-score{
    position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:0.75rem;
    color:var(--neon);background:rgba(0,0,0,0.6);padding:4px 8px;border-radius:4px;
  }
  .hit-feedback{
    position:absolute;pointer-events:none;font-family:var(--font-mono);font-size:0.9rem;
    font-weight:700;color:var(--neon);animation:hitFade .6s ease-out forwards;
  }
  @keyframes hitFade{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-30px);}}
  
  /* ── HEADSHOT ───────────────────────────────────────────── */
  .hs-arena{
    position:relative;width:100%;height:320px;
    background:linear-gradient(180deg,#0a0a0f 0%,#0d1520 100%);
    border-top:1px solid var(--border);overflow:hidden;cursor:crosshair;
  }
  .silhouette-wrap{
    position:absolute;transform:translate(-50%,-50%);
  }
  .hs-score-tag{
    position:absolute;font-family:var(--font-mono);font-size:1rem;font-weight:700;
    animation:scoreFloat .8s ease-out forwards;pointer-events:none;
  }
  @keyframes scoreFloat{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-40px);}}
  .hs-head-hit{color:#ffdd00;}
  .hs-body-hit{color:#ff8844;}
  .hs-limb-hit{color:#aaaaaa;}
  .hs-miss{color:#ff4444;}
  
  /* ── SOUND TEST ─────────────────────────────────────────── */
  .sound-box{
    height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:var(--bg3);border-top:1px solid var(--border);gap:8px;cursor:pointer;
    user-select:none;
  }
  .sound-wave{display:flex;align-items:center;gap:4px;height:40px;}
  .sound-wave span{
    width:4px;border-radius:2px;background:var(--neon2);
    animation:wave 1s ease-in-out infinite;
  }
  .sound-wave span:nth-child(2){animation-delay:.1s;height:60%;}
  .sound-wave span:nth-child(3){animation-delay:.2s;height:100%;}
  .sound-wave span:nth-child(4){animation-delay:.3s;height:70%;}
  .sound-wave span:nth-child(5){animation-delay:.4s;height:40%;}
  @keyframes wave{0%,100%{transform:scaleY(0.4);}50%{transform:scaleY(1);}}
  .sound-wave.off span{animation:none;background:var(--border);}
  
  /* ── TOUCH TEST ─────────────────────────────────────────── */
  .touch-arena{
    width:100%;height:280px;background:var(--bg);
    border-top:1px solid var(--border);position:relative;overflow:hidden;
  }
  .touch-target{
    position:absolute;border-radius:50%;
    background:radial-gradient(circle,rgba(0,255,136,0.6) 0%,rgba(0,207,255,0.3) 60%,transparent 100%);
    border:2px solid var(--neon);transform:translate(-50%,-50%);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:0.7rem;color:var(--neon);
    animation:touchPop .15s ease-out;box-shadow:0 0 15px rgba(0,255,136,0.4);
  }
  @keyframes touchPop{from{transform:translate(-50%,-50%) scale(0);}to{transform:translate(-50%,-50%) scale(1);}}
  
  /* ── RECORDS ────────────────────────────────────────────── */
  .records-section{margin-bottom:16px;}
  .records-section h3{
    font-family:var(--font-mono);font-size:0.8rem;color:var(--text2);
    padding:8px 16px;border-bottom:1px solid var(--border);
  }
  .record-list{padding:8px 16px;}
  .record-item{
    display:flex;align-items:center;justify-content:space-between;
    padding:6px 0;border-bottom:1px solid rgba(26,64,96,0.3);font-size:0.78rem;
  }
  .record-item:last-child{border-bottom:none;}
  .record-ms{font-family:var(--font-mono);color:var(--neon);}
  .record-date{color:var(--text2);font-size:0.7rem;}
  
  /* ── SHARE ──────────────────────────────────────────────── */
  .share-section{
    background:var(--panel);border:1px solid var(--border);border-radius:12px;
    padding:16px;margin-bottom:16px;
  }
  .share-section h3{font-family:var(--font-display);font-size:1rem;color:var(--text);margin-bottom:12px;}
  .share-btns{display:flex;gap:8px;flex-wrap:wrap;}
  .share-btn{
    display:inline-flex;align-items:center;gap:6px;padding:9px 14px;
    border-radius:8px;border:none;cursor:pointer;font-size:0.78rem;font-weight:700;
    font-family:var(--font-body);transition:all .2s;
  }
  .share-kakao{background:#FEE500;color:#000;}
  .share-kakao:hover{background:#ffd900;}
  .share-fb{background:#1877F2;color:#fff;}
  .share-fb:hover{background:#166de0;}
  .share-x{background:#000;color:#fff;border:1px solid #333;}
  .share-x:hover{background:#111;}
  .share-threads{background:#0a0a0a;color:#fff;border:1px solid #333;}
  .share-threads:hover{background:#111;}
  .share-copy{background:var(--bg3);color:var(--neon2);border:1px solid var(--border);}
  .share-copy:hover{background:var(--panel);}
  
  /* ── TOAST ──────────────────────────────────────────────── */
  .toast{
    position:fixed;bottom:130px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--neon);color:#000;padding:10px 20px;border-radius:8px;
    font-weight:700;font-size:0.85rem;opacity:0;transition:all .3s;z-index:999;white-space:nowrap;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  
  /* ── PROMO ──────────────────────────────────────────────── */
  .promo-section{margin-bottom:16px;}
  .promo-section h3{
    font-family:var(--font-mono);font-size:0.8rem;color:var(--text2);
    padding:8px 16px;border-bottom:1px solid var(--border);margin-bottom:12px;
  }
  .promo-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:8px;padding:0 16px;
  }
  .promo-card{
    display:flex;align-items:center;gap:6px;
    background:var(--panel);border:1px solid var(--border);border-radius:8px;
    padding:8px 10px;text-decoration:none;color:var(--text);
    font-size:0.75rem;transition:all .2s;
  }
  .promo-card:hover{border-color:var(--neon2);color:var(--neon2);transform:translateY(-1px);}
  .promo-icon{font-size:1rem;}
  
  /* ── FIXED AD ───────────────────────────────────────────── */
  .kakao-ad-fixed{
    position:fixed;bottom:0;left:0;right:0;
    background:rgba(5,10,15,0.97);border-top:1px solid var(--border);
    display:flex;justify-content:center;align-items:center;
    padding:8px;z-index:100;min-height:56px;
  }
  
  /* ── FOOTER ─────────────────────────────────────────────── */
  .site-footer{
    position:relative;z-index:5;text-align:center;
    padding:16px;font-size:0.72rem;color:var(--text2);
    border-top:1px solid var(--border);margin-top:16px;
  }
  
  /* ── PROGRESS DOTS ──────────────────────────────────────── */
  .progress-dots{display:flex;gap:6px;justify-content:center;padding:8px;}
  .dot{width:10px;height:10px;border-radius:50%;background:var(--border);transition:background .2s;}
  .dot.done{background:var(--neon);}
  .dot.current{background:var(--neon2);animation:pulse 1s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
  
  /* ── SCIENCE NOTE ───────────────────────────────────────── */
  .science-note{
    background:rgba(0,207,255,0.05);border:1px solid rgba(0,207,255,0.2);
    border-radius:8px;padding:10px 14px;margin:8px 16px;
    font-size:0.76rem;color:var(--text2);line-height:1.6;
  }
  .science-note strong{color:var(--neon2);}
  
  /* ── COUNTDOWN ──────────────────────────────────────────── */
  .countdown-overlay{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    text-align:center;pointer-events:none;
  }
  .countdown-number{
    font-family:var(--font-mono);font-size:3.5rem;font-weight:900;
    color:var(--neon);text-shadow:0 0 30px rgba(0,255,136,0.7);
    animation:countPulse .4s ease-out;
  }
  .countdown-number.go{color:var(--neon3);text-shadow:0 0 30px rgba(255,68,68,0.8);}
  @keyframes countPulse{from{transform:scale(1.4);opacity:0.6;}to{transform:scale(1);opacity:1;}}
  .countdown-sub{font-size:0.85rem;color:var(--text2);margin-top:8px;font-family:var(--font-mono);}
  
  /* ── MISC ───────────────────────────────────────────────── */
  .divider{border:none;border-top:1px solid var(--border);margin:8px 16px;}
  .hidden{display:none!important;}
  
  /* ── MOBILE ─────────────────────────────────────────────── */
  @media(max-width:480px){
    .reaction-box{height:220px;}
    .aim-arena{height:300px;}
    .aim-arena .target{width:56px;height:56px;}
    .hs-arena{height:300px;}
    .touch-arena{height:320px;}
    .touch-target{min-width:64px;min-height:64px;}
    .btn{min-height:48px;}
    .tab-btn{padding:10px 10px;font-size:0.75rem;}
    .promo-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));}
  }