:root {
  --bg: #04120b;
  --bg-soft: #0a1f15;
  --card: rgba(8, 35, 22, 0.82);
  --text: #e6fff0;
  --muted: #9fcab3;
  --primary: #3bd38a;
  --secondary: #2f8f62;
  --border: rgba(90, 190, 135, 0.35);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top, #103423 0%, var(--bg) 58%);
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('logo-cg.svg') center/58vmin no-repeat;
  opacity: .16;
  pointer-events: none;
  z-index: -2;
}

.bg-glow { position: fixed; width: 22rem; height: 22rem; border-radius: 50%; filter: blur(70px); opacity: .35; z-index: -1; }

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(46,133,91,.22) 0 12%, transparent 28%),
    linear-gradient(270deg, rgba(46,133,91,.22) 0 12%, transparent 28%),
    repeating-linear-gradient(90deg, rgba(111,221,164,.09) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(270deg, rgba(111,221,164,.09) 0 2px, transparent 2px 18px);
  mask: linear-gradient(90deg, #000 0 16%, transparent 36% 64%, #000 84%);
}
.bg-glow--one { top:-8rem; right:-6rem; background:#32cc7c; }
.bg-glow--two { left:-8rem; bottom:-8rem; background:#1c6b49; }

.container { width:min(1220px,88vw); margin:0 auto; position: relative; z-index: 1; }
.header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 0; backdrop-filter: blur(2px); }
.brand-wrap { display:flex; align-items:center; gap:.8rem; }
.brand-logo { width:156px; height:156px; object-fit:contain; border-radius:0; border:0; padding:0; background: transparent; }
.inline-logo { width:40px; height:40px; vertical-align:middle; background: transparent; }
.brand { font-weight:800; letter-spacing:.12em; }
.tabs { display:flex; gap:.7rem; flex-wrap:wrap; }

.header-actions { display:flex; align-items:center; gap:.45rem; }
.social-link { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--border); border-radius:.6rem; background:rgba(13,42,27,.8); color:var(--text); text-decoration:none; font-size:1rem; }
.social-link:hover { box-shadow: 0 0 0 1px rgba(85,255,169,.35), 0 0 24px rgba(62,214,139,.35); }
.social-icon { width:20px; height:20px; object-fit:contain; display:block; }
#brand-home-logo { cursor:pointer; }

.hero-search { margin-top:.6rem; max-width: 640px; position: relative; }
#global-search-input { width:100%; padding-right:2.5rem; }
.search-results { position:absolute; left:0; right:0; top:calc(100% + 6px); background:#0b2b1d; border:1px solid var(--border); border-radius:.6rem; display:none; z-index:25; max-height:280px; overflow:auto; }
.search-item { width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid rgba(110,201,149,.2); color:var(--text); padding:.55rem .65rem; cursor:pointer; }
.search-item:hover { background:rgba(70,196,127,.14); }
.search-item:last-child { border-bottom:0; }

.tab-btn,.btn { border:1px solid var(--border); border-radius:.8rem; padding:.62rem 1rem; color:var(--text); background:rgba(13,42,27,.8); font:inherit; font-weight:600; cursor:pointer; }
.tab-btn.is-active { background:linear-gradient(90deg,var(--primary),var(--secondary)); color:#03130b; border-color:transparent; }
.hero { padding:1.4rem 0 .3rem; }
.pill { border:1px solid var(--border); border-radius:999px; padding:.3rem .75rem; color:#b8ffd8; background:rgba(70,196,127,.12); font-size:.85rem; }
h1 { margin:.9rem 0; font-size:clamp(1.55rem,3.1vw,2.5rem); }
h2,h3 { margin:.2rem 0 1rem; }
.hint { color: var(--muted); margin: .3rem 0 .8rem; }
.tab-panel { display:none; background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem; margin:1rem 0; backdrop-filter: blur(10px); }
.tab-panel.is-active { display:block; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:620px; }
th,td { text-align:left; padding:.65rem; border-bottom:1px solid rgba(110,201,149,.2); }
th { color:#d6ffe8; white-space: nowrap; }
td { color:var(--muted); }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: rgba(70, 196, 127, .12); }
.team-logo { width:58px; height:58px; object-fit: contain; border-radius:50%; border:1px solid var(--border); background: rgba(6,32,21,.8); padding:4px; }
.tournaments-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.t-card { background:rgba(7,25,16,.9); border:1px solid rgba(110,201,149,.28); border-radius:.85rem; padding:.85rem; cursor:pointer; }
.t-card:hover { border-color: rgba(129, 239, 173, .75); transform: translateY(-2px); }
.t-tag { display:inline-block; font-size:.76rem; padding:.2rem .5rem; border-radius:999px; margin-bottom:.4rem; }
.t-tag.current { background:rgba(64,222,140,.2); color:#81ffc2; }
.t-tag.past { background:rgba(132,171,148,.2); color:#d2f7df; }
.t-tag.upcoming { background:rgba(180,255,184,.14); color:#cfffbb; }
.detail-panel { min-height: 260px; }

.news-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.news-card { display:grid; gap:.35rem; text-align:left; width:100%; }
.news-card span { color: var(--muted); font-size:.9rem; }
.news-content { white-space: pre-wrap; line-height: 1.6; color: #d4fce5; background: rgba(7,25,16,.7); border:1px solid rgba(110,201,149,.28); border-radius:.8rem; padding:.9rem; }

.meta-line { display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1rem; color:#cfffe0; }
.participant-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; }
.participant-card { border:1px solid rgba(110,201,149,.28); background:rgba(7,25,16,.85); border-radius:.8rem; padding:.7rem; text-align:center; }
.participant-card img { width:54px; height:54px; object-fit:contain; display:block; margin:0 auto .4rem; }
.profile-head,.player-head { display:flex; gap:1rem; align-items:center; margin-bottom:1rem; }
.profile-logo { width:108px; height:108px; object-fit:contain; border-radius:16px; border:1px solid var(--border); padding:8px; }
.player-photo { width:160px; height:190px; object-fit:cover; border-radius:14px; border:1px solid var(--border); background: rgba(7,25,16,.85); }
.stat-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; margin-bottom:1rem; }
.stat-card { background:rgba(7,25,16,.85); border:1px solid rgba(110,201,149,.28); border-radius:.7rem; padding:.7rem; }
.stat-card strong { display:block; color:#dcffe9; margin-bottom:.35rem; }
.admin-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.admin-card { margin-top:.8rem; background:rgba(7,25,16,.85); border:1px solid rgba(110,201,149,.28); border-radius:.85rem; padding:.85rem; }
.form-grid { display:grid; gap:.5rem; }
input,select,textarea { background:#062015; border:1px solid var(--border); border-radius:.55rem; color:var(--text); padding:.55rem .65rem; font:inherit; }
.file-label { display:grid; gap:.35rem; color:var(--muted); font-size:.9rem; }
.action-btn { padding:.45rem .7rem; border-radius:.5rem; border:1px solid var(--border); background:#0d3f28; color:var(--text); cursor:pointer; margin-right:.3rem; }
.action-btn.danger { background:#3d1717; border-color:#814141; }
.footer { display:flex; justify-content:space-between; padding:1rem 0 1.8rem; color:var(--muted); border-top:1px solid rgba(90,190,135,.25); }
.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); z-index: 30; }
.modal.hidden { display: none; }
.modal-card { width:min(420px,90vw); background: #0b271a; border:1px solid var(--border); border-radius:1rem; padding:1rem; }
@media (max-width:980px){ .header{flex-direction:column; align-items:flex-start;} .header-actions{width:100%; justify-content:flex-start;} .tournaments-grid,.admin-grid,.participant-grid,.stat-cards,.news-grid{grid-template-columns:1fr;} .profile-head,.player-head{flex-direction:column; align-items:flex-start;} .footer{flex-direction:column; gap:.6rem;} .brand-logo{width:122px;height:122px;} }


.btn,.tab-btn,.action-btn,.news-card,.t-card { transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease; }
.btn:hover,.tab-btn:hover,.action-btn:hover,.news-card:hover,.t-card:hover { box-shadow: 0 0 0 1px rgba(85,255,169,.35), 0 0 24px rgba(62,214,139,.35); transform: translateY(-1px); }
.btn:active,.tab-btn:active,.action-btn:active,.news-card:active,.t-card:active { transform: scale(.98); }

.spark-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.green-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(163,255,210,.95) 0%, rgba(59,211,138,.9) 40%, rgba(59,211,138,0) 75%);
  box-shadow: 0 0 18px rgba(59,211,138,.7);
  animation: spark-fly .62s ease-out forwards;
}

@keyframes spark-fly {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.25); opacity: 0; }
}

.sync-actions { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.55rem; }

.player-events { margin-top: 1rem; }
.events-wrap { background: rgba(9,35,24,.95); border:1px solid rgba(92,199,146,.45); border-radius:.5rem; overflow:auto; }
.events-table { width:100%; border-collapse: collapse; min-width: 980px; color:#dcffe9; font-size:.95rem; }
.events-table th,.events-table td { border:1px solid rgba(23,70,50,.75); padding:.45rem .55rem; text-align:center; background:rgba(12,45,31,.95); }
.events-table th { background:rgba(21,77,52,.95); text-transform: lowercase; font-weight:700; }
.events-table td.event-cell { text-align:left; min-width:230px; }
.events-table td.place-cell { font-weight:700; }
.events-table .val-good { background:rgba(34,124,80,.95); }
.events-table .val-mid { background:rgba(86,110,44,.95); }
.events-table .val-bad { background:rgba(105,54,42,.95); }
.events-table .place-top { background:rgba(117,142,45,.95); }
.events-table .place-mid { background:rgba(66,103,48,.95); }
.events-table .place-low { background:rgba(46,78,54,.95); }

.events-table .event-link { width:100%; text-align:left; margin:0; padding:.2rem .25rem; background:transparent; border:0; color:#bff7d8; box-shadow:none; }
.events-table .event-link:hover { text-decoration:underline; transform:none; box-shadow:none; }


.rank-place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .35rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .8rem;
  margin-right: .35rem;
  color: #062313;
  background: #99b5a5;
}

.rank-gold { background: linear-gradient(180deg, #ffe79a 0%, #e2b13c 100%); }
.rank-silver { background: linear-gradient(180deg, #f3f6ff 0%, #b8c1ce 100%); }
.rank-bronze { background: linear-gradient(180deg, #f1c8a4 0%, #bd7a45 100%); }

.matches-table .score-cell { font-weight:700; background: linear-gradient(90deg, rgba(110,55,45,.95) 0 46%, rgba(36,118,70,.95) 54% 100%); }
.matches-table td { white-space: nowrap; }

.chat-list {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: .7rem;
  padding: .7rem;
  background: rgba(8, 31, 20, .88);
  display: grid;
  gap: .6rem;
  margin-bottom: .7rem;
}

.chat-message {
  border: 1px solid rgba(110,201,149,.2);
  background: rgba(7,25,16,.8);
  border-radius: .6rem;
  padding: .55rem .65rem;
}

.chat-message p { margin: .35rem 0 0; white-space: pre-wrap; }

.chat-form { display: grid; gap: .55rem; }
.chat-form textarea { min-height: 84px; resize: vertical; }

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: .8rem;
}

@media (max-width:980px){
  .profile-grid { grid-template-columns: 1fr; }
}

.chat-user-link {
  margin: 0;
  padding: .12rem .45rem;
  font-size: .86rem;
  background: rgba(24, 91, 58, .95);
}

.achievements { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.45rem; }
.achievement-badge {
  display:inline-block;
  background: linear-gradient(180deg, #ffe08a 0%, #b88922 100%);
  color:#1b1202;
  border-radius:999px;
  padding:.22rem .6rem;
  font-weight:700;
  font-size:.82rem;
}

.dm-layout { display:grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap:.7rem; align-items:start; }
.dm-chats-list {
  border:1px solid var(--border);
  border-radius:.7rem;
  background: rgba(8, 31, 20, .88);
  padding:.55rem;
  display:grid;
  gap:.4rem;
  max-height: 360px;
  overflow:auto;
}
.dm-chat-item { width:100%; text-align:left; margin:0; }
.dm-chat-item.is-active { outline:1px solid rgba(255,227,144,.6); }
.dm-thread {
  border:1px solid var(--border);
  border-radius:.7rem;
  background: rgba(8, 31, 20, .88);
  padding:.55rem;
  display:grid;
  gap:.45rem;
  max-height: 320px;
  overflow:auto;
  margin-bottom:.55rem;
}
.dm-mine { border-color: rgba(115,226,170,.45); }
.dm-peer { border-color: rgba(110,201,149,.2); }

@media (max-width:980px){
  .dm-layout { grid-template-columns: 1fr; }
}

.inline-link{padding:.08rem .45rem;margin:0 .2rem;}

#login-form { margin-bottom: .45rem; }
#logout-btn { display:block; width:100%; margin-right:0; }

.footer-link { color: var(--muted); text-decoration: none; border-bottom: 1px dashed transparent; }
.footer-link:hover { color: var(--text); border-bottom-color: var(--text); }


/* Disable copying/selecting UI labels on touch devices */
@media (pointer: coarse) {
  .btn,
  .tab-btn,
  .action-btn,
  .news-card,
  .t-card,
  .footer-link,
  .brand,
  h1,h2,h3,
  .pill,
  .hint,
  th {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}