@font-face { font-family: 'WTGulim'; src: url('../fonts/gulim.ttc'); }
html, body { margin: 0; height: 100%; height: 100dvh; overflow: hidden; background: #000; color: #e6e6e6; font: 12px/1.3 WTGulim, Gulim, Tahoma, sans-serif; }
body { user-select: none; -webkit-user-select: none; }
input, textarea { user-select: text; -webkit-user-select: text; }
#game { position: fixed; inset: 0; z-index: 1; display: none; }
#game canvas { display: block; }
#game.on { display: block; }
#stage-wrap { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: #000; }
#stage-wrap.hidden { display: none; }
#stage { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; transform-origin: 0 0; overflow: hidden; background: #000; }
#stage.transparent { background: transparent; }
.screen { position: absolute; inset: 0; }
.spr, .btn, .txt, .edit { position: absolute; box-sizing: border-box; }
.spr { background-repeat: no-repeat; pointer-events: none; }
.btn { background-repeat: no-repeat; cursor: pointer; pointer-events: auto; }   /* pointer-events inherits: buttons nested in .spr containers stayed unclickable */
.edit { pointer-events: auto; }
.btn.disabled { cursor: default; pointer-events: none; }
.txt { white-space: pre-wrap; overflow: hidden; pointer-events: none; line-height: 1.25; }
.txt.clickable { pointer-events: auto; cursor: pointer; }
.edit { background: rgba(0,0,0,.55); border: 1px solid #3a3f45; color: #fff; font: 12px WTGulim, Gulim, Tahoma, sans-serif; padding: 0 4px; outline: none; }
.edit:focus { border-color: #ffd25a; }
select.edit { padding: 0; }
select.edit option { color: #111; }
.row-hover:hover { filter: brightness(1.25); }
/* hud */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: none; }
#hud.on { display: block; }
#hud .hp { position: absolute; left: 24px; bottom: 22px; font: bold 34px Tahoma, sans-serif; color: #fff; text-shadow: 0 2px 3px #000; }
#hud .hp small { font-size: 12px; color: #aab; display: block; letter-spacing: .08em; }
#hud .ammo { position: absolute; right: 24px; bottom: 22px; font: bold 34px Tahoma, sans-serif; color: #fff; text-shadow: 0 2px 3px #000; text-align: right; }
#hud .ammo small { font-size: 12px; color: #aab; display: block; letter-spacing: .08em; }
#hud-wicon { width: 128px; height: 64px; margin-left: auto; background: no-repeat center / contain; margin-bottom: 2px; filter: drop-shadow(0 1px 2px #000); }
#hud-slots { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
#hud-slots span { font: bold 12px Tahoma, sans-serif; color: #889; border: 1px solid #556; padding: 1px 6px; border-radius: 2px; }
#hud-slots span.on { color: #ffd25a; border-color: #ffd25a; }
#crosshair.zoom { width: 100vh; height: 100vh; }
#scope-mag { position: absolute; left: 50%; top: 50%; margin: 10px 0 0 10px; font: bold 12px Tahoma, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
#scope-ov { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: no-repeat center / 100% 100%; pointer-events: none; }
#scope-ov.scope { width: 196vh; height: 196vh; box-shadow: 0 0 0 200vw #000; z-index: 0; }
#hud-tex, #crosshair, #scope-mag, #hud .center, #hud .chat, #hud .chat-in { z-index: 2; }
#scope-ov.ads { width: 512px; height: 512px; }
#crosshair.ads { display: none; }
#crosshair.zoom:before, #crosshair.zoom:after { background: rgba(255,120,40,.9); }
#crosshair.zoom:before { left: 50%; top: 0; width: 1px; height: 100%; } #crosshair.zoom:after { top: 50%; left: 0; height: 1px; width: 100%; }
#hud .score { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; font: bold 22px Tahoma, sans-serif; text-shadow: 0 1px 3px #000; }
#hud .score .red { color: #ff5a4a; } #hud .score .blue { color: #5aa8ff; } #hud .score .time { color: #fff; font-size: 18px; }
/* textured HUD */
#hud-tex { position: absolute; inset: 0; pointer-events: none; }
.hud-box { position: absolute; }
.hud-spr, .hud-num, .hud-text { position: absolute; background-repeat: no-repeat; }
.hud-text { font-family: WTGulim, Gulim, Tahoma, Verdana, sans-serif; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 1px #000; }
.hud-num { display: flex; align-items: flex-start; }
.hud-digit { flex: none; }
.hud-score { left: 50%; top: 12px; width: 312px; height: 60px; margin-left: -156px; }
.hud-pips { position: absolute; display: flex; gap: 3px; justify-content: center; }
.hud-pips i { width: 8px; height: 4px; background: #3a3f48; border: 1px solid #0a0a0a; }
.hud-pips i.r { background: #ff3b2f; } .hud-pips i.b { background: #1aa8ff; }
.hud-timer { left: 50%; top: 68px; width: 90px; height: 30px; margin-left: -45px; }
.hud-colon { position: absolute; left: 36px; top: 3px; width: 14px; text-align: center; font: bold 22px Tahoma, sans-serif; color: #fff; }
.hud-tip { left: 50%; top: 100px; width: 320px; margin-left: -160px; text-align: center; font: 11px Tahoma, sans-serif; color: #ddd; background: rgba(0,0,0,.55); border: 1px solid #333; padding: 2px 0; display: none; }
.hud-map { right: 6px; top: 12px; width: 204px; height: 205px; }
.hud-map-inner { position: absolute; overflow: hidden; }
.hud-map-img { position: absolute; inset: 0; background: no-repeat center / 100% 100%; opacity: .9; }
.hud-map-marks { position: absolute; inset: 0; }
.hud-map-marks .mark { left: 0; top: 0; }
.hud-feed { right: 10px; top: 232px; font: 11px Tahoma, sans-serif; text-shadow: 0 1px 2px #000; text-align: right; }
.hud-feed div { margin-bottom: 2px; }
.hud-feed img { height: 14px; vertical-align: middle; margin: 0 4px; }
.hud-sys { left: 16px; bottom: 110px; font: 11px Tahoma, sans-serif; text-shadow: 0 1px 2px #000; }
.hud-sys div { margin-bottom: 1px; }
.hud-hp { left: 16px; bottom: 18px; width: 100px; height: 71px; }
.hud-weapon { right: 30px; bottom: -54px; width: 116px; height: 128px; }
.hud-power { right: 160px; bottom: 20px; width: 104px; height: 60px; }
.hud-slots { left: 50%; bottom: 10px; width: 400px; margin-left: -200px; display: none; justify-content: center; gap: 8px; }
.hud-slots.on { display: flex; }
.hud-slots .slot { width: 96px; height: 48px; background: rgba(0,0,0,.55) no-repeat center / contain; border: 1px solid #333; }
.hud-slots .slot.on { border-color: #ffd25a; background-color: rgba(60,50,20,.7); }
.hud-round { left: 50%; top: 100px; width: 240px; height: 110px; margin-left: -120px; }
#hud .feed { display: none; }
#hud .feed div { margin-bottom: 3px; }
#hud .chat { position: absolute; left: 14px; bottom: 90px; width: 440px; font-size: 12px; text-shadow: 0 1px 2px #000; }
#hud .chat div { margin-bottom: 2px; }
#hud .chat-in { position: absolute; left: 14px; bottom: 70px; width: 440px; display: none; pointer-events: auto; }
#hud .chat-in.on { display: block; }
#hud .chat-in input { width: 100%; box-sizing: border-box; background: rgba(0,0,0,.6); border: 1px solid #555; color: #fff; font: 12px Tahoma, sans-serif; padding: 3px 6px; outline: none; }
#hud .center { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font: bold 20px Tahoma, sans-serif; color: #ffd25a; text-shadow: 0 1px 3px #000; }
#hud .center small { display: block; font: 12px Tahoma, sans-serif; color: #ddd; }
#hud .dmg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(255,0,0,.45)); opacity: 0; transition: opacity .25s; }
#hud .dmg.death { background: rgba(200,0,0,.85); transition: opacity .35s; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; transform: translate(-50%, -50%); }
#crosshair:before, #crosshair:after { content: ""; position: absolute; background: rgba(120, 230, 90, .9); }
#crosshair:before { left: 5px; top: 0; width: 1px; height: 11px; }
#crosshair:after { top: 5px; left: 0; height: 1px; width: 11px; }
#crosshair.hit:before, #crosshair.hit:after { background: #fff; }
#debug { position: absolute; top: 6px; left: 8px; font-size: 11px; color: #aab; text-shadow: 0 1px 2px #000; white-space: pre; }
.nametag { position: absolute; transform: translate(-50%, -100%); font: bold 11px Tahoma, sans-serif; text-shadow: 0 1px 2px #000; white-space: nowrap; text-align: center; }
.nametag small { display: block; font: 10px Tahoma, sans-serif; color: #ffd25a; }
.nametag.red { color: #ff8a7a; } .nametag.blue { color: #8ac4ff; }
/* radio menu + damage direction arrows */
#radio { position: absolute; left: 14px; top: 120px; display: none; background: rgba(0,0,0,.6); border: 1px solid #444; padding: 6px 10px; font-size: 12px; color: #ddd; min-width: 190px; }
#radio.on { display: block; }
#radio .t { color: #ffd25a; font-weight: bold; margin-bottom: 4px; letter-spacing: .05em; }
#radio div b { color: #ffd25a; display: inline-block; width: 14px; }
.dmg-arrow { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; background: url("tex/wt_interface/hud/damagearrow.png") center / 100% 100% no-repeat; opacity: .95; animation: dmgfade .9s linear forwards; pointer-events: none; }
@keyframes dmgfade { to { opacity: 0; } }
/* scoreboard (Tab) + match result */
#scoreboard { position: fixed; inset: 0; z-index: 15; display: none; align-items: center; justify-content: center; pointer-events: none; }
#scoreboard.on { display: flex; }
#scoreboard .box { background: rgba(8,10,14,.88); border: 1px solid #333; padding: 12px 16px; min-width: 620px; box-shadow: 0 4px 24px #000; }
#scoreboard .sw { position: relative; width: 776px; height: 559px; transform: scale(.78); transform-origin: center center; }
#scoreboard .sw-spr { position: absolute; background-repeat: no-repeat; }
#scoreboard .sw-txt { position: absolute; font-family: Tahoma, sans-serif; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 1px #000; }
.hud-winloss { position: absolute; left: -56px; top: 60px; width: 352px; height: 122px; }
#scoreboard .title { font: bold 13px Tahoma, sans-serif; color: #ffd25a; text-align: center; margin-bottom: 8px; letter-spacing: .04em; }
#scoreboard .title.big { font-size: 26px; color: #ff8a7a; }
#scoreboard .title.big.win { color: #8af08a; }
#scoreboard .sub { text-align: center; color: #aab; margin: 4px 0 8px; }
#scoreboard .cols { display: flex; gap: 16px; }
#scoreboard .col { flex: 1; }
#scoreboard h3 { margin: 0 0 4px; font: bold 13px Tahoma, sans-serif; display: flex; justify-content: space-between; border-bottom: 1px solid #333; padding-bottom: 3px; }
#scoreboard h3.red { color: #ff5a4a; } #scoreboard h3.blue { color: #5aa8ff; }
#scoreboard .row { display: grid; grid-template-columns: 1fr 50px 50px; font-size: 12px; padding: 2px 4px; color: #ddd; }
#scoreboard .row span:nth-child(n+2) { text-align: right; }
#scoreboard .row.me { background: rgba(255,210,90,.15); color: #ffd25a; }
/* game menu (ESC) */
#gamemenu { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.45); }
#gamemenu.on { display: flex; }
#gamemenu div.box { background: #0e1013; border: 1px solid #333; padding: 14px 18px; width: 240px; }
#gamemenu button { display: block; width: 100%; margin: 6px 0; padding: 6px; background: linear-gradient(#4a4a50, #1c1c20); border: 1px solid #000; color: #fff; font: bold 12px Tahoma, sans-serif; cursor: pointer; }
#gamemenu button:hover { background: linear-gradient(#8a8a92, #2a2a30); }

/* kill streak / rewards / respawn (reference: 2014 Arrival deathmatch footage) */
.hud-streak { right: 24px; top: 50%; margin-top: 38px; width: 110px; height: 32px; }
.hud-reward { right: 18px; top: 50%; margin-top: 76px; width: 230px; text-align: right; }
.hud-reward-title { font: italic bold 28px Impact, 'Arial Black', Tahoma, sans-serif; color: #ff2a1a; letter-spacing: 1px; -webkit-text-stroke: 1.2px #fff; text-shadow: 2px 2px 0 #3a0000, 0 0 10px #000; }
.hud-reward-pts { font: italic bold 24px Impact, 'Arial Black', Tahoma, sans-serif; color: #ffd21a; -webkit-text-stroke: 1px #6a4a00; text-shadow: 2px 2px 0 #3a2a00; margin-top: -4px; }
.hud-reward.pop { animation: rewardpop .35s ease-out; }
@keyframes rewardpop { 0% { transform: scale(1.6); opacity: 0; } 60% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(1); } }
.hud-respawn { left: 50%; top: 50%; width: 255px; height: 90px; margin: -60px 0 0 -128px; }
.hud-killinfo { left: 50%; bottom: 18px; width: 332px; height: 105px; margin-left: -166px; background: rgba(10,12,16,.72); border: 1px solid #3a3f48; border-radius: 3px; }
.hud-killinfo:before { content: ""; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; background: url("tex/wt_interface/emblem/class/01.png") no-repeat center / 32px 32px; opacity: .8; }
.hud-killinfo:after { content: ""; position: absolute; left: 171px; top: 8px; width: 40px; height: 40px; background: url("tex/wt_interface/emblem/class/01.png") no-repeat center / 32px 32px; opacity: .8; }
.hud-ki-w { position: absolute; width: 64px; height: 32px; background: no-repeat center / contain; }

/* objectives (Yıkım / İşgal) */
.hud-bomb { left: 50%; top: 100px; width: 110px; height: 30px; margin-left: -55px; }
.hud-plant { left: 50%; bottom: 150px; width: 180px; margin-left: -90px; }
.hud-plant-bar { position: absolute; left: 0; top: 34px; width: 180px; height: 14px; background: rgba(0,0,0,.6); border: 1px solid #666; }
.hud-plant-fill { height: 100%; width: 0; background: linear-gradient(#ffe27a, #c98a0a); }
.hud-plant-bar:after { content: attr(data-label); position: absolute; left: 0; right: 0; top: 16px; text-align: center; font: bold 10px Tahoma, sans-serif; color: #ffd25a; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.hud-sites .site { position: absolute; left: 0; top: 0; background-size: 32px 64px !important; }

/* inventory action button (original is a blue-grey gradient bar: KUŞAN / BIRAK; red for SATIN AL) */
.btn.invbtn { background: linear-gradient(#4a4a4a, #2a2a2a 48%, #0c0c0c 52%, #1e1e1e); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.btn.invbtn:hover { background: linear-gradient(#6a6a6a, #3a3a3a 48%, #161616 52%, #2a2a2a); }
.btn.invbtn.red { background: linear-gradient(#5a1a14, #3a0c08 48%, #160403 52%, #2a0806); }
.btn.invbtn.buyart { background: no-repeat; border: none; box-shadow: none; }
.btn.invbtn.disabled { filter: grayscale(1) brightness(.6); }

/* 2013 lobby: profile card slots, notice tabs, promo cards, news ticker */
.btn.cardslot { background: linear-gradient(#3a3a3a, #1c1c1c); border: 1px solid #0a0a0a; box-shadow: inset 0 0 0 1px #4a4a4a; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.btn.cardslot.plain { background: none; border: none; box-shadow: none; }
.btn.cardslot:hover { filter: brightness(1.25); }
.btn.ntab { background-repeat: no-repeat; }
.btn.promo { background: linear-gradient(#1b1b1d, #0b0b0c); border: 1px solid #3a3a3a; box-shadow: inset 0 0 0 1px #141414; overflow: hidden; }
.btn.promo:hover { border-color: #7a6a30; }
.roomrow { overflow: hidden; }
.ticker { position: absolute; left: 0; top: 749px; width: 1024px; height: 18px; overflow: hidden; white-space: nowrap; font: 12px WTGulim, Gulim, Tahoma, sans-serif; color: #d8d8d8; text-shadow: 0 1px 1px #000; line-height: 18px; pointer-events: none; }
.ticker span { display: inline-block; padding-left: 100%; animation: ticker 40s linear infinite; }
.ticker i { font-style: normal; font-size: 10px; margin-right: 6px; }
@keyframes ticker { to { transform: translateX(-100%); } }

#stage input[type=range] { accent-color: #e3b84a; }

.btn.cardslot.gold { background: linear-gradient(#5a4a1e, #2a2410); box-shadow: inset 0 0 0 1px #c9a84a; border-color: #1a1408; }
.chatlog { font-family: WTGulim, Gulim, Tahoma, sans-serif; }

/* ---- touch controls (phones / tablets) */
#touch { position: fixed; inset: 0; z-index: 12; touch-action: none; -webkit-user-select: none; user-select: none; font-family: Tahoma, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#touch .tc-zone { position: absolute; top: 0; bottom: 0; } #touch .tc-zone.left { left: 0; width: 42%; } #touch .tc-zone.right { right: 0; width: 58%; }

/* floating joystick */
#touch .tc-joy { position: absolute; display: none; width: 128px; height: 128px; pointer-events: none; }
#touch .tc-ring { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(120,140,165,.16), rgba(10,14,20,.30) 72%);
  border: 2px solid rgba(255,255,255,.30); box-shadow: inset 0 2px 10px rgba(0,0,0,.4), 0 2px 12px rgba(0,0,0,.35); }
#touch .tc-knob { position: absolute; left: 39px; top: 39px; width: 50px; height: 50px; border-radius: 50%; box-sizing: border-box;
  background: radial-gradient(circle at 42% 34%, rgba(255,255,255,.9), rgba(150,165,185,.75) 55%, rgba(80,95,115,.7) 100%);
  border: 2px solid rgba(255,255,255,.55); box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.7); }

/* action buttons: glassy round, icon + label */
#touch .tc-btn { position: absolute; border-radius: 50%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: rgba(255,255,255,.94);
  background: radial-gradient(circle at 50% 34%, rgba(78,90,106,.52), rgba(14,19,27,.5) 72%);
  border: 1.5px solid rgba(255,255,255,.32);
  box-shadow: 0 3px 12px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.28), inset 0 -9px 16px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, filter .06s ease, box-shadow .12s ease; }
#touch .tc-btn .ic { width: 44%; height: 44%; line-height: 0; }
#touch .tc-btn .ic svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
#touch .tc-btn .lb { font: 700 10px/1 Tahoma, sans-serif; letter-spacing: .03em; opacity: .9; text-shadow: 0 1px 2px #000; }
#touch .tc-btn.fire .ic { width: 50%; height: 50%; } #touch .tc-btn.fire .lb { font-size: 12px; }
#touch .tc-btn.fire { color: #fff;
  background: radial-gradient(circle at 50% 34%, rgba(255,128,96,.78), rgba(158,34,28,.62) 72%);
  border-color: rgba(255,176,146,.75);
  box-shadow: 0 3px 16px rgba(200,45,32,.5), inset 0 1px 2px rgba(255,255,255,.38), inset 0 -10px 18px rgba(70,0,0,.4); }
#touch .tc-btn.fire.blue {
  background: radial-gradient(circle at 50% 34%, rgba(96,170,255,.78), rgba(28,74,158,.62) 72%);
  border-color: rgba(150,196,255,.75);
  box-shadow: 0 3px 16px rgba(32,90,200,.5), inset 0 1px 2px rgba(255,255,255,.38), inset 0 -10px 18px rgba(0,20,70,.4); }
#touch .tc-btn.down { transform: scale(.92); filter: brightness(1.4); box-shadow: 0 1px 6px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.4), 0 0 14px rgba(255,220,140,.4); }
#touch .tc-btn.on { border-color: #ffd25a; color: #ffd25a; box-shadow: 0 0 0 2px rgba(255,210,90,.32), 0 3px 12px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.3); }
#touch .tc-btn.dash { color: #ffd98a; border-color: rgba(255,210,120,.5); }

/* top bar buttons */
#touch .tc-top { position: absolute; left: 50%; top: calc(6px + env(safe-area-inset-top)); transform: translateX(-50%); display: flex; gap: 7px; margin-left: 340px; }
#touch .tc-top button, #touch .tc-slots button { color: #eef2f6; font: 700 12px Tahoma, sans-serif; letter-spacing: .03em;
  background: linear-gradient(rgba(44,52,64,.72), rgba(18,24,32,.72)); border: 1px solid rgba(255,255,255,.3); border-radius: 7px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.18); padding: 8px 11px; min-width: 42px; -webkit-tap-highlight-color: transparent; }
#touch .tc-top button.ico { font-size: 16px; padding: 7px 11px; }
#touch .tc-top button.wolf { color: #cfe0ff; border-color: rgba(120,160,230,.55); background: linear-gradient(rgba(40,60,96,.72), rgba(16,26,44,.72)); }
#touch .tc-slots { position: absolute; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 7px; margin-left: 40px; }
#touch .tc-slots button { min-width: 38px; padding: 7px 9px; }
#touch .tc-slots button.on { border-color: #ffd25a; color: #ffd25a; box-shadow: 0 0 0 1px rgba(255,210,90,.3), 0 2px 6px rgba(0,0,0,.4); }
/* keep the fps/debug line clear of the notch, and larger menu buttons on touch */
@media (pointer: coarse) { #debug { left: calc(6px + env(safe-area-inset-left)); top: calc(4px + env(safe-area-inset-top)); opacity: .6; font-size: 10px; } }
#gamemenu .box button { min-height: 44px; }