/* ═══════════════════════════════════════════════
   GATAN (/gatan) – PvP, neon/gangster-tema (samma språk som profile.css)
   ═══════════════════════════════════════════════ */

.gt-wrap { max-width: 1500px; margin: 0 auto; padding: 8px 4px 24px; }

.gt-header { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.gt-header-icon {
  width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 30px; background: radial-gradient(circle at 35% 30%, #3a1020, #0a0f1c 75%);
  border: 1px solid #d6336c80; box-shadow: 0 0 22px rgba(214, 51, 108, .35);
}
.gt-title {
  font-size: 1.7em; font-weight: 900; letter-spacing: 4px; margin: 0;
  background: linear-gradient(180deg, #ffffff 15%, #ffb3c7 55%, #d6336c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(214, 51, 108, .35);
}
.gt-subtitle { color: #8b9bb8; font-size: .85em; margin-top: 2px; }

.gt-grid { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(280px, 380px); gap: 18px; align-items: start; }
@media (max-width: 1200px) { .gt-grid { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); } .gt-col-right { grid-column: 1 / -1; } }
@media (max-width: 800px)  { .gt-grid { grid-template-columns: 1fr; } }
.gt-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.gt-card {
  background: linear-gradient(160deg, rgba(16, 24, 40, .92), rgba(7, 11, 20, .95));
  border: 1px solid #1c2942; border-radius: 14px; padding: 18px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(120, 170, 255, .06);
}
.gt-card-danger { border-color: #d6336c90; box-shadow: 0 0 26px rgba(214, 51, 108, .22), inset 0 1px 0 rgba(255, 120, 170, .08); }
.gt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.gt-card-title { font-size: .95em; font-weight: 800; letter-spacing: 2px; color: #e8eefc; }
.gt-muted { color: #5c6b85; font-size: .8em; }

.gt-name { font-size: 1.35em; font-weight: 900; color: #f2f6ff; letter-spacing: 1px; }
.gt-meta { color: #8b9bb8; font-size: .8em; }

.gt-bar-label { display: flex; justify-content: space-between; font-size: .72em; font-weight: 800; letter-spacing: 1px; color: #8b9bb8; margin: 10px 0 4px; }
.gt-bar { height: 8px; background: #0b1220; border-radius: 6px; overflow: hidden; border: 1px solid #1c2942; }
.gt-bar-fill { height: 100%; border-radius: 6px; transition: width .5s ease; }
.gt-bar-hp { background: linear-gradient(90deg, #c51f1f, #ff5c7a); box-shadow: 0 0 8px rgba(255, 92, 122, .6); }
.gt-bar-en { background: linear-gradient(90deg, #1f8f4e, #3fe08a); box-shadow: 0 0 8px rgba(63, 224, 138, .5); }

.gt-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.gt-stat { background: rgba(10, 16, 30, .9); border: 1px solid #1c2942; border-radius: 10px; padding: 10px; text-align: center; }
.gt-stat-label { font-size: .66em; color: #5c6b85; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.gt-stat-value { font-size: 1.25em; font-weight: 900; color: #e8eefc; line-height: 1.2; }
.gt-red { color: #ff5c7a !important; }
.gt-blue { color: #6ea8fe !important; }
.gt-gold { color: #ffd166 !important; }
.gt-green { color: #3fe08a !important; }

.gt-cd-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: .85em; color: #b5c2dc; }
.gt-cd-ready { color: #3fe08a; font-weight: 800; }
.gt-cd-wait { color: #ff5c7a; font-weight: 800; font-variant-numeric: tabular-nums; }

.gt-banner { border-radius: 12px; padding: 12px 14px; font-size: .85em; line-height: 1.45; margin-bottom: 14px; }
.gt-banner-info { background: rgba(110, 168, 254, .08); border: 1px solid #6ea8fe55; color: #b9d3ff; }
.gt-banner-danger { background: rgba(255, 92, 122, .08); border: 1px solid #ff5c7a66; color: #ffc2cf; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.gt-banner-alert { background: linear-gradient(90deg, rgba(214, 51, 108, .22), rgba(10, 16, 30, .9)); border: 1px solid #d6336c; color: #ffd6e2; animation: gt-pulse 1.6s ease-in-out 3; }

.gt-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.gt-input {
  flex: 1; min-width: 150px; background: #0b1220; border: 1px solid #1c2942; border-radius: 10px;
  color: #e8eefc; padding: 8px 12px; font-size: .85em; outline: none;
}
.gt-input:focus { border-color: #d6336c; box-shadow: 0 0 10px rgba(214, 51, 108, .3); }
.gt-toggle {
  background: #0b1220; border: 1px solid #1c2942; color: #8b9bb8; border-radius: 999px; padding: 6px 12px;
  font-size: .75em; font-weight: 700; cursor: pointer; letter-spacing: .5px;
}
.gt-toggle.on { border-color: #d6336c; color: #ffd6e2; background: rgba(214, 51, 108, .15); box-shadow: 0 0 10px rgba(214, 51, 108, .25); }
.gt-btn-ghost {
  background: transparent; border: 1px solid #2b3d63; color: #8b9bb8; border-radius: 10px; padding: 6px 12px;
  font-size: .75em; font-weight: 800; letter-spacing: 1px; cursor: pointer;
}
.gt-btn-ghost:hover { border-color: #6ea8fe; color: #e8eefc; }

.gt-target {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; margin-bottom: 8px; cursor: pointer;
  background: rgba(10, 16, 30, .85); border: 1px solid #1c2942; transition: all .16s ease;
}
.gt-target:hover { transform: translateY(-1px); border-color: #d6336c80; }
.gt-target.selected { border-color: #d6336c; background: linear-gradient(90deg, rgba(214, 51, 108, .16), rgba(10, 16, 30, .9)); box-shadow: 0 0 18px rgba(214, 51, 108, .25); }
.gt-target.unavailable { opacity: .55; }
.gt-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden; position: relative;
  background: radial-gradient(circle at 35% 30%, #22314f, #0a0f1c 70%); border: 1px solid #2b3d63;
  display: flex; align-items: center; justify-content: center; font-size: 1.3em;
}
.gt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gt-dot { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #0a0f1c; background: #3b4760; }
.gt-dot.on { background: #3fe08a; box-shadow: 0 0 8px #3fe08a; }
.gt-target-body { flex: 1; min-width: 0; }
.gt-target-name { font-weight: 900; color: #f2f6ff; text-decoration: none; }
.gt-target-name:hover { color: #ffb3c7; }
.gt-tags { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.gt-tag { font-size: .6em; font-weight: 900; letter-spacing: .8px; padding: 2px 6px; border-radius: 6px; border: 1px solid; }
.gt-tag-online { color: #3fe08a; border-color: #3fe08a66; background: rgba(63, 224, 138, .1); }
.gt-tag-revenge { color: #ff5c7a; border-color: #ff5c7a88; background: rgba(255, 92, 122, .12); }
.gt-tag-bounty { color: #ffd166; border-color: #ffd16677; background: rgba(255, 209, 102, .1); }
.gt-target-hp { width: 64px; flex-shrink: 0; text-align: right; font-size: .72em; color: #8b9bb8; }
.gt-mini-bar { height: 4px; background: #0b1220; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.gt-reason { font-size: .72em; color: #ff8fa6; margin-top: 3px; }

.gt-chance { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: .75em; color: #8b9bb8; font-weight: 700; }
.gt-chance .gt-bar { flex: 1; height: 6px; }

.gt-action {
  width: 100%; border: none; border-radius: 12px; padding: 13px 12px; margin-top: 10px; cursor: pointer;
  font-weight: 900; font-size: .95em; letter-spacing: 1.5px; color: #fff; transition: all .15s ease;
}
.gt-action:disabled { cursor: not-allowed; background: #121a2b !important; color: #4a5875 !important; box-shadow: none !important; border: 1px solid #1c2942; }
.gt-action-rob { background: linear-gradient(135deg, #b8860b, #ffcc33); color: #1a1200; box-shadow: 0 0 16px rgba(255, 204, 51, .35); }
.gt-action-attack { background: linear-gradient(135deg, #8b0000, #ff3b5c); box-shadow: 0 0 18px rgba(255, 59, 92, .4); }
.gt-action:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.08); }
.gt-action-info { font-size: .72em; color: #5c6b85; margin-top: 5px; line-height: 1.4; }

.gt-log { max-height: 460px; overflow-y: auto; }
.gt-log-entry { border-left: 3px solid; border-radius: 0 10px 10px 0; padding: 9px 11px; margin-bottom: 8px; animation: gt-slide .3s ease-out both; }
.gt-log-win { border-color: #3fe08a; background: rgba(63, 224, 138, .06); }
.gt-log-lose { border-color: #ff5c7a; background: rgba(255, 92, 122, .06); }
.gt-log-blocked { border-color: #8b9bb8; background: rgba(139, 155, 184, .06); }
.gt-log-line { font-size: .75em; color: #8b9bb8; line-height: 1.45; }
.gt-log-main { font-size: .85em; font-weight: 800; margin-top: 3px; }
.gt-log-sub { font-size: .75em; margin-top: 2px; }

.gt-rules { margin: 0; padding-left: 18px; color: #8b9bb8; font-size: .78em; line-height: 1.6; }
.gt-empty { text-align: center; color: #5c6b85; padding: 26px 8px; }
.gt-empty-icon { font-size: 2em; margin-bottom: 6px; }

@keyframes gt-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes gt-pulse { 0%, 100% { box-shadow: 0 0 6px rgba(214, 51, 108, .3); } 50% { box-shadow: 0 0 24px rgba(214, 51, 108, .8); } }

/* ── Realtids-toast till offret (visas på alla sidor) ── */
.gt-toast-stack { position: fixed; left: 20px; bottom: 20px; z-index: 9998; display: flex; flex-direction: column-reverse; gap: 10px; max-width: min(380px, calc(100vw - 40px)); }
.gt-toast {
  background: linear-gradient(160deg, rgba(40, 8, 20, .97), rgba(7, 11, 20, .97)); border: 1px solid #d6336c; border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 0 24px rgba(214, 51, 108, .45), 0 6px 24px rgba(0, 0, 0, .6); color: #ffd6e2;
  animation: gt-toast-in .35s cubic-bezier(.16, 1, .3, 1);
}
.gt-toast-title { font-size: .7em; font-weight: 900; letter-spacing: 2px; color: #ff5c7a; margin-bottom: 4px; display: flex; justify-content: space-between; }
.gt-toast-close { background: none; border: none; color: #8b9bb8; cursor: pointer; font-size: 1.1em; line-height: 1; }
.gt-toast-msg { font-size: .9em; font-weight: 700; color: #f2f6ff; }
.gt-toast-link { display: inline-block; margin-top: 8px; font-size: .72em; font-weight: 900; letter-spacing: 1px; color: #ffd166; text-decoration: none; border: 1px solid #ffd16666; border-radius: 8px; padding: 4px 10px; }
@keyframes gt-toast-in { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: none; } }