@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap');

#ts-root*,#ts-root*::before,#ts-root*::after{box-sizing:border-box;margin:0;padding:0}

#ts-root {
  --bg:    #0a0c0a;
  --surf:  #111410;
  --card:  #181c14;
  --bord:  #2a3020;
  --gr:    #4aff60;
  --ye:    #ffe040;
  --rd:    #ff3030;
  --bl:    #40aaff;
  --tx:    #c8d8b0;
  --mt:    #506040;
  --fh:    'Share Tech Mono', monospace;
  --fb:    'Rajdhani', sans-serif;

  font-family: var(--fb);
  background: var(--bg);
  color: var(--tx);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bord);
  cursor: default;
}

.ts-screen { display:none; flex-direction:column; animation:tsFade .25s ease; }
.ts-screen.active { display:flex; }
@keyframes tsFade { from{opacity:0}to{opacity:1} }

/* Hide cursor only on the game canvas — not in menus or overlays */
#ts-canvas { cursor: none; }
#ts-splash *, #ts-end *, .ts-overlay-box *, #ts-hud-top *, #ts-hud-bot * { cursor: default; }
.ts-btn, .ts-map-btn, .ts-act, .ts-dp, .ts-overlay-btns button { cursor: pointer; }

/* ══ SPLASH ══════════════════════════════════════════════ */
#ts-splash { min-height:560px; position:relative; }
.ts-splash-bg {
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg,transparent,transparent 18px,#ffffff04 19px),
    radial-gradient(ellipse 100% 70% at 50% 100%,#1a2a0a,transparent 60%),
    var(--bg);
}
.ts-splash-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:28px 20px; text-align:center;
}

.ts-logo-line1 { font-family:var(--fh); font-size:clamp(1.6rem,6vw,2.8rem); color:var(--tx); letter-spacing:10px; text-shadow:0 2px 0 #000; }
.ts-logo-line2 { font-family:var(--fh); font-size:clamp(2rem,8vw,3.6rem); color:var(--ye); letter-spacing:6px; text-shadow:2px 2px 0 #3a3000,0 0 20px #ffe04055; margin-top:-8px; }
.ts-logo-line3 { font-family:var(--fh); font-size:.55rem; color:var(--mt); letter-spacing:6px; }

.ts-controls-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px;
  width:100%; max-width:360px;
  background:var(--card); border:1px solid var(--bord); border-radius:6px; padding:12px;
}
.ts-ctrl { display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--mt); }
.ts-key { font-family:var(--fh); font-size:.55rem; background:var(--surf); border:1px solid var(--bord); color:var(--ye); border-radius:3px; padding:2px 6px; white-space:nowrap; }

.ts-map-label { font-family:var(--fh); font-size:.55rem; color:var(--mt); letter-spacing:4px; margin-bottom:6px; }
.ts-map-btns  { display:flex; gap:8px; }
.ts-map-btn   { font-family:var(--fh); font-size:.55rem; background:var(--card); border:1px solid var(--bord); color:var(--tx); border-radius:4px; padding:8px 14px; cursor:pointer; transition:border-color .15s,color .15s; }
.ts-map-btn.active,.ts-map-btn:hover { border-color:var(--ye); color:var(--ye); }

.ts-diff-row { display:flex; gap:10px; margin-top:4px; }

/* ══ BUTTONS ══════════════════════════════════════════════ */
.ts-btn { font-family:var(--fh); font-size:.6rem; border:none; border-radius:4px; padding:10px 20px; cursor:pointer; letter-spacing:2px; transition:transform .1s,filter .1s; text-shadow:1px 1px 0 #00000055; }
.ts-btn:hover  { transform:translateY(-2px); filter:brightness(1.2); }
.ts-btn:active { transform:translateY(0); }
.ts-btn-green  { background:#2a6018; color:#a0f080; box-shadow:0 3px 0 #0a2004; }
.ts-btn-yellow { background:#6a5000; color:#ffe880; box-shadow:0 3px 0 #2a2000; }
.ts-btn-red    { background:#6a0808; color:#ffa0a0; box-shadow:0 3px 0 #2a0000; }

/* ══ HUD TOP ══════════════════════════════════════════════ */
#ts-hud-top {
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 10px; background:var(--surf); border-bottom:1px solid var(--bord);
  gap:8px; flex-wrap:wrap; min-height:40px;
}
.ts-hud-block { display:flex; flex-direction:column; gap:3px; }
.ts-hud-block.center { align-items:center; }
.ts-hud-block.right  { align-items:flex-end; flex-direction:row; gap:8px; }

.ts-hud-hp,.ts-hud-armor { display:flex; align-items:center; gap:5px; }
.ts-hud-icon { font-size:.9rem; }
.ts-bar-track { width:70px; height:5px; background:#0a0c0a; border:1px solid var(--bord); border-radius:2px; overflow:hidden; }
.ts-bar-fill  { height:100%; border-radius:2px; transition:width .3s; }
.ts-bar-fill.hp    { background:linear-gradient(90deg,#206010,var(--gr)); }
.ts-bar-fill.armor { background:linear-gradient(90deg,#104060,var(--bl)); }
.ts-hud-val { font-family:var(--fh); font-size:.6rem; color:var(--tx); min-width:24px; }

.ts-hud-round { font-family:var(--fh); font-size:.55rem; color:var(--ye); letter-spacing:3px; }
.ts-hud-score { font-family:var(--fh); font-size:.55rem; color:var(--mt); }

.ts-hud-weapon-slot { display:flex; align-items:center; gap:4px; padding:3px 7px; border-radius:4px; border:1px solid transparent; transition:border-color .15s; }
.ts-hud-weapon-slot.active { border-color:var(--ye); background:var(--card); }
.ts-slot-num  { font-family:var(--fh); font-size:.5rem; color:var(--mt); }
.ts-slot-icon { font-size:.9rem; }
.ts-slot-ammo { font-family:var(--fh); font-size:.55rem; color:var(--tx); }

/* ══ CANVAS AREA ══════════════════════════════════════════ */
#ts-canvas-wrap { position:relative; background:var(--bg); overflow:hidden; }
#ts-canvas { display:block; width:100%; image-rendering:pixelated; }

/* Crosshair */
#ts-crosshair {
  position:absolute; pointer-events:none; z-index:30;
  width:20px; height:20px; margin:-10px 0 0 -10px;
  transform:translate(0,0);
}
#ts-crosshair::before,#ts-crosshair::after {
  content:''; position:absolute; background:rgba(255,255,255,.9);
  box-shadow:0 0 3px #000;
}
#ts-crosshair::before { width:6px; height:1px; top:9px; left:7px; }
#ts-crosshair::after  { width:1px; height:6px; left:9px; top:7px; }
#ts-crosshair .ch-dot { position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; top:9px; left:9px; }
#ts-crosshair.spread::before { left:4px; }
#ts-crosshair.spread::after  { top:4px; }
#ts-crosshair.ads { transform:scale(.6); }

/* Hit marker */
#ts-hitmarker {
  position:absolute; pointer-events:none; z-index:31;
  width:16px; height:16px; margin:-8px 0 0 -8px;
  opacity:0; transition:opacity .05s;
}
#ts-hitmarker::before,#ts-hitmarker::after {
  content:''; position:absolute; background:#ff4040; box-shadow:0 0 3px #ff0000;
}
#ts-hitmarker::before { width:5px; height:1px; top:7px; left:5px; }
#ts-hitmarker::after  { width:1px; height:5px; left:7px; top:5px; }
#ts-hitmarker.show { opacity:1; }

/* Kill feed */
#ts-killfeed { position:absolute; top:8px; right:8px; z-index:25; display:flex; flex-direction:column; gap:3px; pointer-events:none; }
.ts-kf-entry { font-family:var(--fh); font-size:.52rem; background:#00000088; border-left:2px solid var(--ye); padding:3px 8px; border-radius:0 3px 3px 0; color:var(--ye); animation:tsFade .2s ease; white-space:nowrap; }

/* Overlay */
#ts-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#0a0c0acc; backdrop-filter:blur(3px); z-index:40; opacity:0; pointer-events:none; transition:opacity .2s; }
#ts-overlay.show { opacity:1; pointer-events:auto; }
.ts-overlay-box { background:var(--card); border:1px solid var(--ye); border-radius:6px; padding:22px 26px; max-width:320px; width:90%; text-align:center; box-shadow:0 0 30px #ffe04022; display:flex; flex-direction:column; gap:12px; }
.ts-overlay-title { font-family:var(--fh); font-size:.75rem; color:var(--ye); letter-spacing:3px; }
.ts-overlay-body  { font-size:1rem; color:var(--mt); line-height:1.6; }
.ts-overlay-btns  { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* Reload bar */
#ts-reload-wrap { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); width:140px; text-align:center; z-index:25; }
.ts-reload-label { font-family:var(--fh); font-size:.5rem; color:var(--ye); margin-bottom:3px; letter-spacing:2px; }
.ts-reload-track { height:5px; background:#00000066; border:1px solid var(--ye); border-radius:2px; overflow:hidden; }
.ts-reload-fill  { height:100%; background:var(--ye); width:0%; transition:width .05s linear; }

/* Nade indicator */
#ts-nade-indicator { position:absolute; top:8px; left:50%; transform:translateX(-50%); font-family:var(--fh); font-size:.52rem; color:var(--gr); background:#00000088; border:1px solid var(--gr); padding:3px 10px; border-radius:3px; z-index:25; pointer-events:none; }

/* ══ MOBILE ══════════════════════════════════════════════ */
#ts-hud-bot { background:var(--surf); border-top:1px solid var(--bord); }
#ts-mobile-pad { display:none; padding:8px 12px; justify-content:space-between; align-items:center; gap:8px; }
@media(max-width:540px){#ts-mobile-pad{display:flex;}}
.ts-dpad { position:relative; width:90px; height:90px; }
.ts-dp { position:absolute; width:28px; height:28px; background:var(--card); border:1px solid var(--bord); color:var(--tx); border-radius:4px; font-size:.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
.ts-dp:active{background:var(--bord);}
.ts-dp:nth-child(1){top:0;left:31px;}
.ts-dp:nth-child(2){top:31px;left:0;}
.ts-dp:nth-child(3){top:31px;right:0;}
.ts-dp:nth-child(4){bottom:0;left:31px;}
.ts-mobile-actions { display:flex; flex-wrap:wrap; gap:6px; max-width:160px; justify-content:center; }
.ts-act { width:44px; height:44px; background:var(--card); border:1px solid var(--bord); border-radius:6px; color:var(--tx); font-size:.85rem; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; font-family:var(--fh); }
.ts-act.fire { border-color:var(--ye); color:var(--ye); font-size:1.1rem; }
.ts-act:active { filter:brightness(1.4); }

/* ══ END ══════════════════════════════════════════════════ */
#ts-end { min-height:480px; align-items:center; justify-content:center; background:radial-gradient(ellipse 80% 60% at 50% 50%,#181c14,var(--bg)); }
.ts-end-content { display:flex; flex-direction:column; align-items:center; gap:14px; padding:40px 24px; text-align:center; }
.ts-end-title { font-family:var(--fh); font-size:clamp(.8rem,3.5vw,1.4rem); color:var(--ye); text-shadow:2px 2px 0 #3a3000; letter-spacing:4px; }
.ts-end-sub   { color:var(--mt); font-size:1rem; }
.ts-end-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; max-width:400px; }
.ts-end-box   { background:var(--card); border:1px solid var(--bord); border-radius:5px; padding:10px 6px; }
.ts-end-val   { font-family:var(--fh); font-size:.75rem; color:var(--ye); }
.ts-end-lbl   { font-size:.85rem; color:var(--mt); margin-top:3px; }
.ts-end-btns  { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* Bullet hole flash */
@keyframes tsFlash { 0%{opacity:1}100%{opacity:0} }

/* ══ RANKING BUTTON ══════════════════════════════════════ */
.ts-btn-rank { background:#4a3800; color:#ffe040; box-shadow:0 3px 0 #1a1400; border:1px solid #6a5010; }
.ts-btn-rank:hover { background:#5a4800; }

/* ══ RANKING SCREEN ══════════════════════════════════════ */
#ts-ranking-screen { min-height:520px; background:radial-gradient(ellipse 80% 60% at 50% 30%,#181c14,var(--bg)); }
.ts-ranking-content { display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px 16px; width:100%; }

.ts-ranking-header { text-align:center; }
.ts-ranking-title { font-family:var(--fh); font-size:clamp(.9rem,3.5vw,1.4rem); color:var(--ye); text-shadow:2px 2px 0 #3a3000; letter-spacing:4px; }
.ts-ranking-sub   { font-size:.85rem; color:var(--mt); margin-top:4px; }

.ts-ranking-tabs { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.ts-rtab { font-family:var(--fh); font-size:.52rem; background:var(--card); border:1px solid var(--bord); color:var(--mt); border-radius:4px; padding:6px 12px; cursor:pointer; transition:border-color .15s,color .15s; letter-spacing:1px; }
.ts-rtab.active,.ts-rtab:hover { border-color:var(--ye); color:var(--ye); }

.ts-ranking-table-wrap { width:100%; max-width:580px; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ts-ranking-loading { font-family:var(--fh); font-size:.6rem; color:var(--mt); animation:tsPulse 1.2s ease-in-out infinite; }
@keyframes tsPulse { 0%,100%{opacity:.4} 50%{opacity:1} }
.ts-ranking-empty { font-family:var(--fh); font-size:.65rem; color:var(--mt); text-align:center; padding:24px; }

.ts-ranking-table { width:100%; border-collapse:collapse; font-family:var(--fh); font-size:.52rem; }
.ts-ranking-table thead tr { background:var(--card); border-bottom:2px solid var(--ye); }
.ts-ranking-table th { padding:7px 8px; color:var(--ye); letter-spacing:1px; text-align:left; white-space:nowrap; }
.ts-ranking-table tbody tr { border-bottom:1px solid var(--bord); transition:background .15s; }
.ts-ranking-table tbody tr:hover { background:var(--card); }
.ts-ranking-table td { padding:7px 8px; color:var(--tx); white-space:nowrap; }
.ts-ranking-table td:first-child { color:var(--ye); font-size:.65rem; width:28px; }
.ts-rank-gold   td:first-child { color:#ffd700; text-shadow:0 0 6px #ffd700; }
.ts-rank-silver td:first-child { color:#c0c0c0; }
.ts-rank-bronze td:first-child { color:#cd7f32; }
.ts-rank-you td { color:var(--gr); }
.ts-rank-you td:first-child { color:var(--gr); text-shadow:0 0 6px var(--gr); }
.ts-rank-score { color:var(--ye) !important; font-size:.62rem !important; }
.ts-ranking-back { margin-top:4px; }

/* ══ END SCREEN RANKING ══════════════════════════════════ */
.ts-end-save-wrap { width:100%; max-width:400px; background:var(--card); border:1px solid var(--bord); border-radius:6px; padding:12px 16px; display:flex; flex-direction:column; gap:8px; }
.ts-end-save-label { font-family:var(--fh); font-size:.52rem; color:var(--mt); letter-spacing:2px; }
.ts-end-save-row { display:flex; gap:8px; align-items:center; }
.ts-name-input { flex:1; background:var(--surf); border:1px solid var(--bord); color:var(--tx); font-family:var(--fh); font-size:.6rem; padding:8px 10px; border-radius:4px; outline:none; letter-spacing:2px; }
.ts-name-input:focus { border-color:var(--ye); }
.ts-name-input::placeholder { color:var(--mt); }
.ts-save-status { font-family:var(--fh); font-size:.52rem; min-height:14px; }
.ts-save-status.ok  { color:var(--gr); }
.ts-save-status.err { color:var(--rd); }

.ts-end-ranking-wrap { width:100%; max-width:400px; }
.ts-end-ranking-title { font-family:var(--fh); font-size:.55rem; color:var(--ye); letter-spacing:3px; margin-bottom:8px; }
.ts-end-ranking-list { display:flex; flex-direction:column; gap:4px; }
.ts-end-rank-row { display:flex; align-items:center; gap:8px; padding:5px 10px; background:var(--card); border:1px solid var(--bord); border-radius:4px; font-family:var(--fh); font-size:.52rem; }
.ts-end-rank-row.highlight { border-color:var(--ye); }
.ts-end-rank-pos  { color:var(--ye); min-width:20px; }
.ts-end-rank-name { flex:1; color:var(--tx); overflow:hidden; text-overflow:ellipsis; }
.ts-end-rank-pts  { color:var(--gr); }
.ts-end-rank-map  { color:var(--mt); font-size:.48rem; }

/* ══ NICK INPUT (SPLASH) ══════════════════════════════════ */
.ts-nick-wrap {
  width:100%; max-width:320px;
  display:flex; flex-direction:column; gap:6px;
}
.ts-nick-label {
  font-family:var(--fh); font-size:.52rem; color:var(--mt);
  letter-spacing:3px; text-align:center;
}
.ts-nick-row {
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--bord);
  border-radius:6px; padding:4px 12px;
  transition:border-color .2s;
}
.ts-nick-row:focus-within { border-color:var(--ye); box-shadow:0 0 0 2px #ffe04022; }
.ts-nick-icon { font-size:1.1rem; }
.ts-nick-input {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--ye); font-family:var(--fh); font-size:.75rem;
  padding:6px 0; letter-spacing:3px; text-transform:uppercase;
}
.ts-nick-input::placeholder { color:var(--mt); font-size:.6rem; letter-spacing:2px; text-transform:none; }

/* ══ END SCREEN — nick display row ══════════════════════ */
.ts-end-nick-display {
  font-family:var(--fh); font-size:.65rem; color:var(--tx);
  background:var(--surf); border:1px solid var(--bord);
  border-radius:4px; padding:7px 12px; flex:1;
  letter-spacing:2px;
}
.ts-end-nick-display span { color:var(--ye); }