/* Pickup – FLIP animation styles */
.gb-anim-flight {
  transition: transform 1360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 1220ms ease-out;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .gb-anim-flight {
    transition: none;
  }
}

/* Reset list styling inside team containers */
#leftTeamContainer .playerElement,
#rightTeamContainer .playerElement {
  list-style: none;
  margin-left: 0;
}

:root {
  /* CSS Custom Properties for modal styling */
  --color-bg-secondary: rgb(40, 39, 43);
  --color-bgSecondary: rgb(29, 28, 33);
  --color-text-permanent: rgb(255, 255, 255);
  --color-border: rgb(0, 0, 0);
  --color-primary: rgb(56, 189, 248);
  --color-text: rgb(147, 147, 149);
}

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

::before,
::after {
  --tw-content: '';
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  background-color: transparent;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  color: #9ca3af;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

.textarea-style:focus {
  border-color: rgb(56 189 248 / var(--tw-border-opacity));
  outline: none;
}

button,
[role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
}

video {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none;
}

*,
::before,
::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

.invisible {
  visibility: hidden;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.top-0 {
  top: 0px;
}

.left-0 {
  left: 0px;
}

.top-10 {
  top: 2.5rem;
}

.top-3 {
  top: 0.75rem;
}

.right-7 {
  right: 1.75rem;
}

.left-3 {
  left: 0.75rem;
}

.top-5 {
  top: 1.25rem;
}

.right-3 {
  right: 0.75rem;
}

.top-6 {
  top: 1.5rem;
}

.left-2 {
  left: 0.5rem;
}

.top-2 {
  top: 0.5rem;
}

.bottom-0 {
  bottom: 0px;
}

.right-2 {
  right: 0.5rem;
}

.top-14 {
  top: 3.5rem;
}

.top-1\/3 {
  top: 33.333333%;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.z-40 {
  z-index: 40;
}

.z-20 {
  z-index: 20;
}

.float-right {
  float: right;
}

.m-0 {
  margin: 0px;
}

.m-3 {
  margin: 0.75rem;
}

.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 2rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

.mb-0 {
  margin-bottom: 0px;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.ml-0 {
  margin-left: 0;
}

.-ml-8 {
  margin-left: -2rem;
}

.ml-12 {
  margin-left: 50px;
}

.ml-minus-50px {
  margin-left: -50px;
}

@media (min-width: 640px) {
  .sm\:ml-12 {
    margin-left: 3rem;
  }
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.-mt-2 {
  margin-top: -0.5rem;
}

.-mt-3 {
  margin-top: -0.75rem;
}

.-mt-5 {
  margin-top: -1.75rem;
}

.mt-0 {
  margin-top: 0px;
}

.-mt-1 {
  margin-top: -0.25rem;
}

.-mb-2 {
  margin-bottom: -0.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.-mt-\[200px\] {
  margin-top: -200px;
}

.box-border {
  box-sizing: border-box;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.flex-shrink-0 {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.table {
  display: table;
}

.hidden {
  display: none;
}

.inline-block-visible {
  display: inline-block !important;
}

.h-10 {
  height: 2.5rem;
}

.h-auto {
  height: auto;
}

.h-12 {
  height: 3rem;
}

.h-3 {
  height: 0.75rem;
}

.h-8 {
  height: 2rem;
}

.h-full {
  height: 100%;
}

.h-40 {
  height: 10rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-60 {
  height: 15rem;
}

.h-80 {
  max-height: 25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-max {
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

.max-h-\[300px\] {
  max-height: 300px;
}

.min-h-full {
  min-height: 100%;
}

.w-full {
  width: 100%;
}

.w-max {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-3 {
  width: 0.75rem;
}

.w-4 {
  width: 1rem;
}

.w-32 {
  width: 8rem;
}

.w-8 {
  width: 2rem;
}

.w-60 {
  width: 15rem;
}

.w-7 {
  width: 1.75rem;
}

.w-10 {
  width: 2.5rem;
}

.w-1\/2 {
  width: 50%;
}

.w-3\/4 {
  width: 75%;
}

.w-64 {
  width: 16rem;
}

.w-6 {
  width: 1.5rem;
}

.w-\[95px\] {
  width: 95px;
}

.w-5 {
  width: 1.25rem;
}

.w-\[90px\] {
  width: 90px;
}

.w-\[80px\] {
  width: 80px;
}

.w-24 {
  width: 6rem;
}

.min-w-max {
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}

.min-w-32 {
  min-width: 8rem;
}

.min-w-\[160px\] {
  min-width: 160px;
}

.max-w-max {
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}

.flex-auto {
  flex: 1 1 auto;
}

.table-auto {
  table-layout: auto;
}

.cursor-pointer {
  cursor: pointer;
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.space-x-3> :not([hidden])~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1> :not([hidden])~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2> :not([hidden])~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-x-1> :not([hidden])~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-3> :not([hidden])~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-1\.5> :not([hidden])~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-x-2> :not([hidden])~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-6> :not([hidden])~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-l-xl {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.rounded-r-xl {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.rounded-b-none {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.rounded-b-xl {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.rounded-tl-lg {
  border-top-left-radius: 0.5rem;
}

.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.rounded-tr-lg {
  border-top-right-radius: 0.5rem;
}

.rounded-br-none {
  border-bottom-right-radius: 0;
}

.border-\[1px\] {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-y-\[1px\] {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-x-\[1px\] {
  border-left-width: 1px;
  border-right-width: 1px;
}

.border-b-\[1px\] {
  border-bottom-width: 1px;
}

.border-t-\[1px\] {
  border-top-width: 1px;
}

.border-l-0 {
  border-left-width: 0px;
}

.border-r-\[1px\] {
  border-right-width: 1px;
}

.border-t-0 {
  border-top-width: 0px;
}

.border-l-\[1px\] {
  border-left-width: 1px;
}

.border-b-0 {
  border-bottom-width: 0px;
}

.border-colorBorder {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.border-colorRed {
  --tw-border-opacity: 1;
  border-color: #BA0021;
}

.border-colorGreen {
  --tw-border-opacity: 1;
  border-color: #228B22;
}

.border-colorBgSecondary {
  --tw-border-opacity: 1;
  border-color: rgb(40 39 43 / var(--tw-border-opacity));
}

.border-colorSecondary {
  --tw-border-opacity: 1;
  border-color: rgb(21 20 25 / var(--tw-border-opacity));
}

.border-x-colorPrimary {
  --tw-border-opacity: 1;
  border-left-color: rgb(56 189 248 / var(--tw-border-opacity));
  border-right-color: rgb(56 189 248 / var(--tw-border-opacity));
}

.bg-colorBgPrimary {
  --tw-bg-opacity: 1;
  background-color: rgb(29 28 33 / var(--tw-bg-opacity));
}

.bg-colorSecondary {
  --tw-bg-opacity: 1;
  background-color: rgb(21 20 25 / var(--tw-bg-opacity));
}

.hover\:bg-colorSecondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 20 25 / var(--tw-bg-opacity));
}

.bg-colorBgSecondary {
  --tw-bg-opacity: 1;
  background-color: rgb(40 39 43 / var(--tw-bg-opacity));
}

.bg-colorFB {
  --tw-bg-opacity: 1;
  background-color: rgb(58 85 159 / var(--tw-bg-opacity));
}

.bg-colorGoogle {
  --tw-bg-opacity: 1;
  background-color: rgb(207 67 50 / var(--tw-bg-opacity));
}

.bg-colorBorder {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-colorPrimary {
  --tw-bg-opacity: 1;
  background-color: rgb(56 189 248 / var(--tw-bg-opacity));
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-colorBorder {
  --tw-gradient-from: black;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0));
}

.to-colorBgSecondary {
  --tw-gradient-to: #28272b;
}

.bg-cover {
  background-size: cover;
}

.bg-center {
  background-position: center;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.p-0 {
  padding: 0px;
}

.p-3 {
  padding: 0.75rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-1 {
  padding: 0.25rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.px-9 {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-7 {
  padding-bottom: 1.75rem !important;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pl-0 {
  padding-left: 0px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-middle {
  vertical-align: middle;
}

.font-roboto {
  font-family: "Roboto";
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.775rem;
  line-height: 1.25rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.text-colorText {
  --tw-text-opacity: 1;
  color: rgb(147 147 149 / var(--tw-text-opacity));
}

.text-colorTextPermanent {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-colorPrimary {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity));
}

.text-colorBorder {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-colorGreen {
  --tw-text-opacity: 1;
  color: rgb(0 217 35 / var(--tw-text-opacity));
}

.text-colorRed {
  --tw-text-opacity: 1;
  color: rgb(160 6 6 / var(--tw-text-opacity));
}

.text-colorYellow {
  --tw-text-opacity: 1;
  color: rgb(255 222 9 / var(--tw-text-opacity));
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.transition-opacity {
  transition-property: opacity;
}

.duration-300 {
  transition-duration: 300ms;
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline-0 {
  outline-width: 0px;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 0.3);
  transition-duration: 150ms;
}

.delay-75 {
  transition-delay: 75ms;
}

.delay-150 {
  transition-delay: 150ms;
}

.duration-700 {
  transition-duration: 250ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 0.25);
}

a:hover {
  color: rgb(56 189 248);
  transition: ease-in 0.25s;
}

html,
body {
  min-height: 100%;
}

input:focus {
  border-color: rgb(56 189 248);
}

#mainPage {
  position: absolute;
  display: inline-block;
  width: 100%;
  min-height: 100%;
  transition: all 0.25s;
  z-index: 150 !important;
}

#content {
  width: calc(100% - 480px);
  position: relative;
}

.show {
  display: block;
}

.news-content-lighter {
  color: #ccc;
  line-height: 1.5;
  font-size: 1.2rem;
}

#dropdownLanguageMenu {
  border-left: 1px solid rgb(56 189 248);
  border-right: 1px solid rgb(56 189 248);
  overflow: hidden;
  max-height: 0;
  transition: all 0.25s;
  visibility: hidden;
  z-index: 2000001;
}

#dropdownLanguageMenu.active {
  max-height: 300px;
  visibility: visible;
}

@media (max-width: 640px) {
  #jazyk {
    display: none;
  }
}

.dropMenu {
  max-height: 0;
  overflow: hidden;
  transition: all 0.25s;
  border-left: 1px solid rgb(56, 189, 248);
  border-right: 1px solid rgb(56, 189, 248);
  border-top: none;
  border-bottom: none;
}

.dropMenu.active {
  max-height: 500px;
  overflow: hidden;
}

@media (max-width: 1280px) {

  .dropMenuReport1,
  .dropMenuReport2,
  .dropMenuReport3,
  .dropMenuReport4,
  .dropMenuReport5,
  .dropMenuReport6,
  .dropMenuReport7,
  .dropMenuReport8,
  .dropMenuReport9,
  .dropMenuReport10 {
    transform: translateX(-55%);
  }
}

.dropMenuReport1 {
  display: none;
}

.dropMenuReport1.active {
  display: block;
  border-left: 1px solid rgb(56 189 248);
  border-right: 1px solid rgb(56 189 248);
}

.dropMenuReport2 {
  display: none;
}

.dropMenuReport2.active {
  display: block;
  border-left: 1px solid rgb(56 189 248);
  border-right: 1px solid rgb(56 189 248);
}

.dropMenuReport3 {
  display: none;
}

.dropMenuReport3.active {
  display: block;
  border-left: 1px solid rgb(56 189 248);
  border-right: 1px solid rgb(56 189 248);
}

.dropMenuReport4 {
  display: none;
}

.dropMenuReport4.active {
  display: block;
  border-left: 1px solid rgb(56 189 248);
  border-right: 1px solid rgb(56 189 248);
}

.dropMenuReport5 {
  display: none;
}

.dropMenuReport5.active {
  display: block;
  border-left: 1px solid rgb(56 189 248);
  border-right: 1px solid rgb(56 189 248);
}

.dropMenuReport6 {
  display: none;
}

.dropMenuReport6.active {
  display: block;
  border-left: 1px solid rgb(56 189 248);
  border-right: 1px solid rgb(56 189 248);
}

.dropMenuReport7 {
  display: none;
}

.dropMenuReport7.active {
  display: block;
  border-left: 1px solid rgb(56 189 248);
  border-right: 1px solid rgb(56 189 248);
}

.dropMenuReport8 {
  display: none;
}

.dropMenuReport8.active {
  display: block;
  border-left: 1px solid rgb(56 189 248);
  border-right: 1px solid rgb(56 189 248);
}

.dropMenuReport9 {
  display: none;
}

.dropMenuReport9.active {
  display: block;
  border-left: 1px solid rgb(56 189 248);
  border-right: 1px solid rgb(56 189 248);
}

.dropMenuReport10 {
  display: none;
}

.dropMenuReport10.active {
  display: block;
  border-left: 1px solid rgb(56 189 248);
  border-right: 1px solid rgb(56 189 248);
}

#region {
  overflow: hidden;
  max-height: 0;
  transition: all 0.25s;
  visibility: hidden;
  z-index: 9998;
}

#region.active {
  transform: translateX(-50px);
  max-height: 300px;
  visibility: visible;
  padding: 0.75rem;
}

#game {
  overflow: hidden;
  max-height: 0px;
  transition: all 0.25s;
  visibility: hidden;
  z-index: 9998;
}

#game.active {
  transform: translateX(-50px);
  max-height: 400px;
  visibility: visible;
  padding: 0.75rem;
}

#notificationParent {
  position: relative;
  z-index: 9997;
  overflow: visible;
}

#notifications {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  max-height: 0;
  width: 250px;
  visibility: hidden;
  transition: max-height 0.25s ease-in-out, visibility 0.25s ease-in-out;
  z-index: 9997;
  transform: translateX(-70px);
  border-left: 1px solid rgb(56, 189, 248);
  border-right: 1px solid rgb(56, 189, 248);
}

#notifications.active {
  max-height: 400px;
  visibility: visible;
}

#notificationList {
  flex: 1;
  z-index: 100;
  overflow-y: auto;
}

#markAllAsReadBtn {
  transition: all 0.25s ease-in-out;
  border-top: 2px solid black;
  background-color: rgb(29 28 33 / var(--tw-bg-opacity));
  flex-shrink: 0;
  display: none;
  /* Skrytý predvolene, zobrazí sa len keď sú neprecítané notifikácie */
}

#markAllAsReadBtn:hover {
  background-color: rgb(56, 189, 248);
}

.notification-item {
  padding-bottom: 3px;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

.notification-item:last-child {
  border-bottom: none;
}

#messages {
  overflow: hidden;
  max-height: 0px;
  transition: all 0.25s;
  visibility: hidden;
  z-index: 100000;
}

#messages.active {
  max-height: 400px;
  visibility: visible;
}

#messageParent {
  position: relative;
  z-index: 100000;
  overflow: visible;
}

#messages {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  max-height: 0;
  width: 250px;
  visibility: hidden;
  transition: max-height 0.25s ease-in-out, visibility 0.25s ease-in-out;
  z-index: 9997;
  transform: translateX(-70px);
  border-left: 1px solid rgb(56, 189, 248);
  border-right: 1px solid rgb(56, 189, 248);
}

#messages.active {
  max-height: 400px;
  visibility: visible;
}

#messagesList {
  flex: 1;
  overflow-y: auto;
}

#newMessageBtn {
  transition: all 0.25s ease-in-out;
  border-bottom: 2px solid black;
  background-color: rgb(29 28 33 / var(--tw-bg-opacity));
  flex-shrink: 0;
}

#newMessageBtn:hover {
  background-color: rgb(56, 189, 248);
}

#markAllMessagesAsReadBtn {
  transition: all 0.25s ease-in-out;
  border-top: 2px solid black;
  background-color: rgb(29 28 33 / var(--tw-bg-opacity));
  flex-shrink: 0;
}

#markAllMessagesAsReadBtn:hover {
  background-color: rgb(56, 189, 248);
}

.message-item {
  padding-bottom: 3px;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

.message-item:last-child {
  border-bottom: none;
}

@media (min-width: 352px) {
  .plus {
    margin-bottom: 0px;
  }
}

.left-side,
.right-side {
  max-width: 240px;
  min-width: 240px;
  min-height: 100%;
  padding: 1.5rem;
}

.left-side {
  position: fixed;
  background-color: #151419;
  top: 0;
  left: 0;
  width: 240px;
  transition: all 0.25s;
  transform: translateX(-100%);
  z-index: 100002;
}

.relfex {
  border: 2px white solid;
}

.left-side.active {
  transform: translateX(0);
  background-color: #151419;
  border-radius: 8px;
  border: 1px solid rgb(56 189 248);
  z-index: 100002;
}

.right-side {
  position: fixed;
  background-color: #151419;
  right: 0;
  top: 0;
  width: 240px;
  transition: all 0.25s;
  transform: translateX(100%);
  z-index: 99999;
}

.right-side.active {
  transform: translateX(0);
  background-color: #151419;
  border-radius: 8px;
  border: 1px solid rgb(56 189 248);
}

#leftOverlay,
#rightOverlay {
  position: fixed;
  inset: 0;
  transition: opacity 0.25s;
  z-index: 100001;
}

.visible {
  display: block;
}

@media (min-width: 1280px) {
  .right-side {
    position: relative;
    left: 0;
    top: 0;
    right: 0px;
    transform: translateX(0);
    background-color: #151419;
  }

  .left-side {
    position: relative;
    top: 0px;
    left: 0px;
    transform: translateX(0);
  }
}

.chat-side {
  position: fixed;
  width: 240px;
  right: -240px;
  z-index: 99999 !important;
  height: 100vh;
  transition: all 0.25s;
}

.chat-side.active {
  right: 0px;
  background-color: rgb(29 28 33);
}

/* Friend status filter dots */
.chat-side .chatFilterStatus .filter-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}

/* Pickup status - orange */
.chat-side .chatFilterStatus .filter-pickup {
  background: #ee9225;
}

/* Online status - green */
.chat-side .chatFilterStatus .filter-online {
  background: #17e580;
}

/* Offline status - gray */
.chat-side .chatFilterStatus .filter-offline {
  background: #939395;
}

/* Inactive state - faded */
.chat-side .chatFilterStatus .filter-dot:not(.active) {
  opacity: 0.25;
  transform: scale(0.85);
}

/* Active state - full brightness with ring */
.chat-side .chatFilterStatus .filter-dot.active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3);
}

/* Hover effect */
.chat-side .chatFilterStatus .filter-dot:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.chat-side .chatFilterStatus .filter-dot.active:hover {
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.5);
}

/* Legacy support for old classes */
.chat-side .chatFilterStatus span.invisible {
  background: #939395;
}

.chat-side .chatFilterStatus span.online {
  background: #17e580;
}

.chat-side .chatFilterStatus span.neaktívne {
  background: #ee9225;
}

.chat-side .chatFilterStatus span.offline {
  background: #da0714;
}

#avatar::before {
  background-color: #17e580;
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 100%;
  position: absolute;
  top: -2px;
  right: -2px;
}

.itemShop::before {
  position: absolute;
  visibility: hidden;
  bottom: 0;
  right: 0;
  text-align: right;
  padding: 1.5rem 0.75rem 0.75rem 1.5rem;
  border-radius: 100% 0 0 0;
  line-height: 1.5rem;
  max-width: 100%;
  font-family: FontAwesome;
  content: "\f07a";
  background-color: rgba(0, 0, 0, 0.3);
}

.itemShop:hover::before {
  visibility: visible;
}

.itemShop2::before {
  position: absolute;
  visibility: hidden;
  height: 100%;
  width: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgb(56 189 248);
  border-bottom: 1px solid rgb(56 189 248);
  border-radius: 0.5rem;
  transition: 0.25s;
  color: #939395;
}

.itemShop2:hover::before {
  position: absolute;
  visibility: visible;
  color: #FFF;
  border-radius: 0.5rem;
}

.itemShop2::after {
  position: absolute;
  visibility: hidden;
  bottom: -15px;
  padding: 0.15rem 0.75rem;
  z-index: 10;
  max-height: 100%;
  max-width: 100%;
  text-align: center;
  font-family: FontAwesome;
  content: "\f07a";
  color: #939395;
  transition: 0.25s;
}

.itemShop2:hover::after {
  position: absolute;
  visibility: visible;
  color: #FFF;
  border: 1px solid rgb(56 189 248);
  border-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 1);
}

.itemShop2:active::after {
  border: 1px solid rgba(0, 0, 0, 1);
  background-color: rgb(56 189 248);
}

#itemsCart {
  display: table;
  width: 100%;
}

#itemsCart>div {
  display: table-row;
}

#itemsCart>div>span {
  display: table-cell;
  text-align: left;
  padding: 0.25rem 1rem;
}

#cenyCart {
  display: table;
  width: 100%;
  text-align: right;
  padding: 1rem;
}

#cenyCart>div {
  display: table-row;
}

#cenyCart>div>span {
  display: table-cell;
  padding: 0.25rem 0;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgb(40 39 43);
  border-radius: 6px;
  border: 1px solid black;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(56 189 248);
}

table tr:nth-child(2n) {
  background: rgb(29 28 33);
}

.medail.gold {
  background: #ffb100;
}

.medail.silver {
  background: #f4f4f4;
}

.medail.bronze {
  background: #de7b29;
}

.medail {
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: #28272c;
}

tr,
td {
  padding: 0.3rem;
  min-width: 120px;
}

th.thSearch {
  min-width: 250px;
}

.table-sortable th {
  cursor: pointer;
}

.table-sortable .th-sort-asc::after {
  content: "\25b4";
}

.table-sortable .th-sort-desc::after {
  content: "\25be";
}

.table-sortable .th-sort-asc::after,
.table-sortable .th-sort-desc::after {
  margin-left: 5px;
}

.table-sortable .th-sort-asc,
.table-sortable .th-sort-desc {
  background: rgba(0, 0, 0, 0.1);
}

.input_error_text {
  color: #da0714;
}

/* Registration: custom checkbox styling (scoped to form#registrationForm) */
form#registrationForm input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  box-sizing: content-box;
  border: 1px solid #000;
  border-radius: 4px;
  background: rgb(40 39 43);
  position: relative;
  display: inline-block;
  aspect-ratio: 1 / 1;
  vertical-align: middle;
}

form#registrationForm input[type="checkbox"]:checked {
  border-color: rgb(56 189 248);
  background: rgb(56 189 248 / 0.2);
}

form#registrationForm input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid rgb(56 189 248);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.input_error {
  border: 1px solid #da0714;
}

.input_correct_text {
  color: #17e580;
}

.input_correct {
  border: 1px solid #17e580;
}

/* Pickup Chat + Online players layout - zosúladené s bac.php */
#pickupWrap,
#myMatchpickupWrap {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
}

#chatPickup,
#myMatchChatPickup {
  flex: 1;
  min-width: 0;
}

#chatPickupZoznam,
#myMatchChatPickupZoznam {
  width: 260px;
  flex-shrink: 0;
}

/* Online player list štýly pre pickup - kompaktný layout */
#usersPickup,
#usersPickupMyMatch {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

#usersPickup .player-element,
#usersPickupMyMatch .player-element {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  width: 100%;
  padding: 0.125rem 0;
}

#usersPickup .avatar-img,
#usersPickupMyMatch .avatar-img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 0.375rem;
  object-fit: cover;
}

/* Responzívne šírky pre pickup */
@media (max-width: 1400px) {

  #chatPickupZoznam,
  #myMatchChatPickupZoznam {
    width: 240px;
  }
}

@media (max-width: 1200px) {

  #chatPickupZoznam,
  #myMatchChatPickupZoznam {
    width: 220px;
  }

  #usersPickup .avatar-img,
  #usersPickupMyMatch .avatar-img {
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 1000px) {

  #chatPickupZoznam,
  #myMatchChatPickupZoznam {
    width: 180px;
  }

  #usersPickup .avatar-img,
  #usersPickupMyMatch .avatar-img {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Malé obrazovky - pod sebou (breakpoint 850px ako v bac.php) */
@media (max-width: 850px) {

  #pickupWrap,
  #myMatchpickupWrap {
    flex-direction: column;
  }

  #chatPickup,
  #myMatchChatPickup {
    width: 100%;
  }

  #chatPickupZoznam,
  #myMatchChatPickupZoznam {
    width: 100%;
  }

  #usersPickup .avatar-img,
  #usersPickupMyMatch .avatar-img {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Zostav a Vyzvi - Chat + Online players layout */
#zvChatWrap,
#zvMatchChatWrap {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
}

#zvChat,
#zvMatchChat {
  flex: 1;
  min-width: 0;
}

#zvOnlinePlayers,
#zvMatchChatZoznam {
  width: 260px;
  flex-shrink: 0;
}

/* Online players v zápase */
#zvMatchPlayersOnline {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

#zvMatchPlayersOnline .zv-match-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s;
}

#zvMatchPlayersOnline .zv-match-player:hover {
  background-color: rgba(var(--color-bg-secondary-rgb), 0.5);
}

#zvMatchPlayersOnline .zv-match-player img {
  width: 24px;
  height: 24px;
  border-radius: 0.375rem;
  object-fit: cover;
}

#zvMatchPlayersOnline .zv-match-player a {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#zvMatchPlayersOnline .zv-match-player .team-indicator {
  font-size: 0.65rem;
  font-weight: 600;
}

/* Online player list - kompaktný layout */
#zvPlayersList {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

#zvPlayersList li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  width: 100%;
  padding: 0.125rem 0;
}

#zvPlayersList li>div:first-child {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

#zvPlayersList li>div:first-child img {
  width: 24px;
  height: 24px;
}

#zvPlayersList li>div:first-child a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
}

#zvPlayersList li>div:last-child {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

/* Ikona tímu - modrá farba */
#zvPlayersList .fa-users {
  color: rgb(56 189 248) !important;
}

/* Responzívne šírky */
@media (max-width: 1400px) {

  #zvOnlinePlayers,
  #zvMatchChatZoznam {
    width: 240px;
  }
}

@media (max-width: 1200px) {

  #zvOnlinePlayers,
  #zvMatchChatZoznam {
    width: 220px;
  }

  #zvPlayersList li>div:first-child img,
  #zvMatchPlayersOnline .zv-match-player img {
    width: 22px;
    height: 22px;
  }

  #zvPlayersList li>div:first-child a,
  #zvMatchPlayersOnline .zv-match-player a {
    font-size: 0.8rem;
  }
}

@media (max-width: 1000px) {

  #zvOnlinePlayers,
  #zvMatchChatZoznam {
    width: 180px;
  }

  #zvPlayersList li>div:first-child img,
  #zvMatchPlayersOnline .zv-match-player img {
    width: 20px;
    height: 20px;
  }

  #zvPlayersList li>div:first-child a {
    font-size: 0.75rem;
  }

  #zvPlayersList li>div:last-child i {
    font-size: 0.7rem;
  }
}

/* Malé obrazovky - pod sebou */
@media (max-width: 850px) {

  #zvChatWrap,
  #zvMatchChatWrap {
    flex-direction: column;
  }

  #zvChat,
  #zvMatchChat {
    width: 100%;
  }

  #zvOnlinePlayers,
  #zvMatchChatZoznam {
    width: 100%;
  }

  #zvPlayersList li>div:first-child img,
  #zvMatchPlayersOnline .zv-match-player img {
    width: 24px;
    height: 24px;
  }

  #zvPlayersList li>div:first-child a,
  #zvMatchPlayersOnline .zv-match-player a {
    font-size: 0.85rem;
  }

  #zvPlayersList li>div:last-child i {
    font-size: 0.85rem;
  }
}

.placeholder\:text-colorText::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(147 147 149 / var(--tw-text-opacity));
}

.placeholder\:text-colorText:-ms-input-placeholder {
  --tw-text-opacity: 1;
  color: rgb(147 147 149 / var(--tw-text-opacity));
}

.placeholder\:text-colorText::placeholder {
  --tw-text-opacity: 1;
  color: rgb(147 147 149 / var(--tw-text-opacity));
}

.hover\:border-colorPrimary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(56 189 248 / var(--tw-border-opacity));
}

.border-colorPrimary {
  --tw-border-opacity: 1;
  border-color: rgb(56 189 248 / var(--tw-border-opacity));
}

.hover\:border-colorBorder:hover {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.hover\:bg-colorPrimary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(56 189 248 / var(--tw-bg-opacity));
}

/* Sidebar upcoming events hover background */
.hover\:bg-colorBgSecondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(40 39 43 / var(--tw-bg-opacity));
}

.hover\:bg-gradient-to-l:hover {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.hover\:from-colorPrimary:hover {
  --tw-gradient-from: rgb(56 189 248);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(56 189 248 / 0));
}

.hover\:to-colorBgSecondary:hover {
  --tw-gradient-to: #28272b;
}

.hover\:text-colorTextPermanent:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.hover\:text-colorPrimary:hover {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity));
}

/* Right panel - upcoming events: hover text color for full row */
#upcomingStreamsSection a:hover .text-colorText,
#upcomingStreamsSection a:hover .text-colorTextPermanent {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity));
}

.hover\:text-colorRed:hover {
  --tw-text-opacity: 1;
  color: rgb(160 6 6 / var(--tw-text-opacity));
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.focus\:text-colorTextPermanent:focus {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .sm\:-left-5 {
    left: -1.25rem;
  }

  .sm\:-right-20 {
    right: -5rem;
  }

  .sm\:-right-28 {
    right: -7rem;
  }

  .sm\:m-3 {
    margin: 0.75rem;
  }

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:mr-3 {
    margin-right: 0.75rem;
  }

  .sm\:mb-0 {
    margin-bottom: 0px;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:space-y-0> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:w-60 {
    width: 15rem;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }

  .md\:h-10 {
    height: 2.5rem;
  }

  .md\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .md\:w-4\/5 {
    width: 80%;
  }

  .md\:w-1\/5 {
    width: 20%;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:space-y-0> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .md\:rounded-lg {
    border-radius: 0.5rem;
  }

  .md\:rounded-xl {
    border-radius: 0.75rem;
  }

  .md\:border-x-0 {
    border-left-width: 0px;
    border-right-width: 0px;
  }

  .md\:border-y-\[1px\] {
    border-top-width: 1px;
    border-bottom-width: 1px;
  }

  .md\:border-b-\[1px\] {
    border-bottom-width: 1px;
  }

  .md\:border-t-\[1px\] {
    border-top-width: 1px;
  }

  .md\:w-1\/3 {
    width: 33.333333%;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:block {
    display: block;
  }
}

@media (min-width: 1280px) {
  .xl\:relative {
    position: relative;
  }

  .xl\:left-6 {
    left: 1.5rem;
  }

  .xl\:top-0 {
    top: 0px;
  }

  .xl\:right-8 {
    right: 2rem;
  }

  .xl\:m-0 {
    margin: 0px;
  }

  .xl\:mt-8 {
    margin-top: 2rem;
  }

  .xl\:ml-24 {
    margin-left: 6rem;
  }

  .xl\:mr-5 {
    margin-right: 1.25rem;
  }

  .xl\:block {
    display: block;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .xl\:cursor-default {
    cursor: default;
  }

  .xl\:flex-wrap {
    flex-wrap: wrap;
  }

  .xl\:text-colorTextPermanent {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }

  .xl\:hover\:cursor-default:hover {
    cursor: default;
  }

  .xl\:hover\:text-colorTextPermanent:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
}

.cursor-default {
  cursor: default;
}

@media (min-width: 1536px) {
  .\32xl\:mx-\[30\%\] {
    margin-left: 30%;
    margin-right: 30%;
  }
}

.tabcontent-container {
  position: relative;
  overflow: hidden;
}

.tabcontent-wrapper {
  display: flex;
  flex-direction: column;
}

.tabcontent {
  flex-grow: 1;
  min-height: 400px;
  width: 100%;
  transition: all 0.25s;
}

.tabcontent.hidden {
  display: none;
}

.tabcontent.active {
  display: block;
}

#messageInput {
  padding-right: 60px;
}

#myMatchMessageInput {
  padding-right: 60px;
}

.input-container {
  position: relative;
}

.optionsPalette {
  top: 100%;
  left: 30px;
  z-index: 1000;
}

#parentUsersPickup {
  min-height: 194px;
  max-height: 300px;
  overflow-y: auto;
}

#parentUsersPickupMyMatch {
  min-height: 194px;
  max-height: 300px;
  overflow-y: auto;
}

#zvOnlinePlayersContainer {
  min-height: 194px;
  max-height: 300px;
  overflow-y: auto;
}

.chat-container {
  position: fixed;
  bottom: 0;
  right: 5px;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  z-index: 99999;
}

.chat-window {
  display: flex;
  flex-direction: column;
  max-height: 400px;
  width: 280px;
}

@media (max-width: 768px) {
  .chat-container {
    flex-direction: column-reverse;
  }

  .chat-window {
    margin-bottom: 10px;
  }
}

.chat-header {
  position: relative;
}

.close-chat {
  position: absolute;
  top: 5px;
  right: 10px;
}

.chat-input-container {
  height: 50px;
}

/* Ensure chat input fits on mobile width */
@media (max-width: 768px) {
  .chat-input-container {
    display: flex;
    width: 100%;
  }

  .chat-input-container input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .chat-input-container button {
    flex: 0 0 auto;
  }
}

.chat-messages {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}

.chat-messages div {
  padding-top: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  background-color: rgb(29 28 33 / var(--tw-bg-opacity));
  max-width: 80%;
  min-width: 75%;
  word-wrap: break-word;
}

.chat-messages .message-received {
  background-color: rgb(40 39 43 / var(--tw-border-opacity));
}

.chat-messages .message-sent {
  background-color: rgb(40 39 43 / var(--tw-border-opacity));
}

.chat-message-full {
  max-width: 100% !important;
  width: 100%;
}

.message-sent {
  align-self: flex-end;
}

.message-header {
  font-size: 0.8rem;
}

.message-content {
  padding: 5px;
}

#pickupConnect {
  transition: opacity .15s ease-in-out;
}

.fa-solid.fa-star {
  color: rgb(56 189 248);
  margin-top: -5px;
}

@media (min-width: 888px) {
  #myMatchPlayers {
    display: flex;
    flex-direction: row;
  }

  /* Make captain voting column wider so in-game nick + icon fit nicely */
  #myMatchPlayers>#leftTeamContainer,
  #myMatchPlayers>#rightTeamContainer {
    flex: 0 0 28%;
  }

  #myMatchPlayers>.playerListWithoutCaptains {
    flex: 0 0 44%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.25s ease-in forwards;
}

.playerListWithoutCaptains {
  border-left: 1px solid #28272b;
  border-right: 1px solid #28272b;
}

/* Ensure gamepad icon and in‑game nick always stay together on one line */
.in-game-nick {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .playerListWithoutCaptains {
    border-left: none;
    border-right: none;
  }
}

.trophy-tooltip {
  position: absolute;
  background-color: #28272c;
  color: #fff;
  padding: 10px;
  border: 1px solid rgb(56, 189, 248);
  border-radius: 8px;
  z-index: 10000;
  font-size: 0.9rem;
  max-width: 90%;
  overflow-wrap: break-word;
}

.tooltip-season-group {
  margin-bottom: 15px;
}

.tooltip-season-name {
  font-weight: bold;
  margin-bottom: 5px;
  text-decoration: underline;
}

.tooltip-trophy {
  margin-left: 10px;
  margin-bottom: 5px;
}

.tooltip-trophy i {
  margin-right: 5px;
}

.tooltip-trophy-line {
  margin-bottom: 8px;
}

/* filepath: /var/www/html/css/style.css */
.tooltip {
  position: fixed;
  background: #28272c;
  border: 1px solid rgb(56 189 248);
  border-radius: 8px;
  text-align: center;
  z-index: 10000;
  pointer-events: none;

  /* Počiatočný stav: skrytý pomocou opacity a visibility */
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  /* Pridaná visibility do transition */

  top: var(--tooltip-calculated-top, 0px);
  left: var(--tooltip-calculated-left, 0px);

  --tooltip-vertical-visual-offset: 8px;
  transform: translateY(var(--tooltip-vertical-visual-offset));
}

.tooltip.top {
  --tooltip-vertical-visual-offset: -8px;
}

.tooltip.visible {
  /* JS pridá túto triedu na zobrazenie */
  visibility: visible;
  opacity: 1;
}

.tooltip.hidden {
  /* JS pridá túto triedu na skrytie (ak ju používate) */
  visibility: hidden;
  opacity: 0;
}

/* Media query pre menšie obrazovky */
@media(max-width:768px) {

  .tooltip,
  .tooltip.top {
    /* Ak chcete, aby sa aj na mobiloch pozicovalo podľa JS: */
    /* left: var(--tooltip-calculated-left, 0px); */
    /* Toto by malo byť už zdedené */
    /* transform: translateY(var(--tooltip-vertical-visual-offset)); */
    /* Toto by malo byť už zdedené */

    /* Ak stále chcete centrovanie na mobiloch, ponechajte pôvodné: */
    left: 50% !important;
    transform: translateX(-50%) translateY(var(--tooltip-vertical-visual-offset));
  }
}

.force-hide-rewards {
  display: none !important;
}

.tooltip-statistics {
  margin: 5px 0;
  text-align: center;
}

.tooltip:not(.hidden) {
  visibility: visible;
  opacity: 1;
}

.player-details {
  display: none;
  position: absolute;
}

.detail-hover:hover .player-details {
  display: block;
}

.fixed-width-select {
  width: 240px;
  max-width: 240px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#seasonTimerWrapper {
  margin: 25px auto;
  margin-top: 0;
  width: 95%;
  display: flex;
  min-height: 40px;
  height: 40px;
  border: 1px solid black;
  border-radius: 6px;
  overflow: visible;
  position: relative;
}

#seasonTimerProgress {
  background-color: rgb(56 189 248);
  transition: width 1s ease;
}

#elapsedTime {
  background-color: rgb(40 39 43);
  flex-grow: 1;
  border-radius: 0 6px 6px 0;
}

#timerText {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  color: white;
  text-align: center;
  z-index: 10;
  white-space: normal;
  word-wrap: break-word;
  overflow: visible;
}

#timerText span {
  display: inline-block;
  padding: 0 5px;
}

#seasonTimerProgress span {
  display: inline-block;
  padding: 0 5px;
}

#seasonTimerWrapper span {
  display: inline-block;
  padding: 0 5px;
}

#seasonTimerWrapper span:first-child {
  margin-left: -5px;
}

#seasonTimerWrapper span:last-child {
  margin-right: -5px;
}

#seasonTimerWrapper span:nth-child(2) {
  margin-left: -5px;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  transition: width 0.5s;
}

.progress-bar.elapsed {
  left: auto;
  right: 0;
  z-index: 1;
  border-radius: 0 6px 6px 0;
  width: var(--elapsed-width, 0%);
}

.progress-bar:not(.elapsed) {
  left: 0;
  z-index: 2;
  border-radius: 6px 0 0 6px;
  width: var(--progress-width, 0%);
}


.important-news-section {
  margin-top: 20px;
}

.news-date {
  color: #aaa;
  font-size: 0.9em;
}

#filterForm.flex label {
  margin-bottom: -10px;
}

#filterModal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 9998;
  justify-content: center;
  align-items: center;
}

#filterModal.active {
  display: flex;
}

#filterModal.hidden {
  display: none;
}

/* Archive Filter Modal in Budget section */
.filter-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 1999999;
  justify-content: center;
  align-items: center;
}

.filter-modal.active {
  display: flex !important;
}

.filter-modal-content {
  position: relative;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 2rem;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  color: var(--color-text);
  cursor: pointer;
  z-index: 2000000;
  transition: color 0.2s ease;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background-color: transparent;
}

.close:hover,
.close:focus {
  color: var(--color-primary);
  background-color: transparent;
  transform: none;
  text-decoration: none;
  cursor: pointer;
}

.closeModal {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  color: var(--color-text);
  cursor: pointer;
  z-index: 2000000;
  transition: color 0.2s ease;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background-color: transparent;
}

.closeModal:hover,
.closeModal:focus {
  color: var(--color-primary);
  background-color: transparent;
  transform: none;
  text-decoration: none;
  cursor: pointer;
}

.input-field,
.submit-btn {
  margin: 10px 0;
  width: 240px;
}

.readonly-input-field {
  pointer-events: none;
  background-color: rgb(29 28 33);
}

.settings-content {
  overflow: visible;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

.settings-content.active {
  opacity: 1;
  max-height: none;
  overflow: visible;
}

#sideMenuAccountSettings {
  flex-grow: 0;
  flex-shrink: 0;
}

#sideMenuAccountSettings ul {
  list-style-type: none;
}

#contentAccountSettings {
  flex-grow: 1;
}

@media (min-width: 768px) {
  .sideMenuAccountSettings {
    width: 25%;
  }
}

.avatar-container {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.avatar {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.user-profile-section table tr td:first-child {
  width: 160px;
  min-width: 160px;
  text-align: left;
}

.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: rgb(29 28 33 / var(--tw-bg-opacity));
  border-radius: 0.75rem 0.75rem 0 0;
}

.tab-button {
  flex: 1 1 auto;
  padding: 8px 16px;
  cursor: pointer;
  background-color: rgb(40 39 43 / var(--tw-bg-opacity));
  transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
  font-size: 1em;
  text-align: center;
  border: 1px solid black;
  border-top-left-radius: 0.75rem !important;
  border-top-right-radius: 0.75rem !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.tab-button:not(:first-child) {
  border-left: none;
}

.tab-contents {
  border: 1px solid black;
  border-top: none;
  border-radius: 0 0 0.75rem 0.75rem !important;
  background-color: rgb(21 20 25 / var(--tw-bg-opacity));
  padding: 16px;
  height: auto !important;
}

.tab-button.active {
  background-color: rgb(21 20 25 / var(--tw-bg-opacity));
  color: rgb(56 189 248 / var(--tw-border-opacity));
  border-bottom: none !important;
}

@media (max-width: 600px) {
  .tab-button {
    flex: 1 1 auto;
    padding: 8px 16px;
    cursor: pointer;
    background-color: rgb(40 39 43 / var(--tw-bg-opacity));
    transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
    font-size: 1em;
    text-align: center;
    border: 1px solid black;
    border-radius: 0.75rem;
  }

  .tab-button:not(:first-child) {
    border-left: 1px solid black;
  }

  .tab-contents {
    border-top: 1px solid black;
    border-radius: 0.75rem;
  }

  .tab-button.active {
    border-bottom: 1px solid black;
  }
}

.tab-button:hover {
  background-color: rgb(40 39 43 / var(--tw-bg-opacity));
  color: white;
  border-top: 1px solid rgb(56 189 248 / var(--tw-border-opacity));
}

.tab-button.active:hover {
  background-color: rgb(21 20 25 / var(--tw-bg-opacity));
  color: rgb(56 189 248 / var(--tw-border-opacity));
  border-top: 1px solid black;
}

.nested-tabcontent {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.25s ease;
  --max-height: 1000px;
  scroll-behavior: auto;
  /* Prevent smooth scrolling during tab switches */
}

.nested-tabcontent.active {
  opacity: 1;
  max-height: var(--max-height, 1000px);
}

.nested-tabcontent.block {
  opacity: 1;
  max-height: var(--max-height, 1000px);
}

.nested-tabcontent.hidden {
  display: none !important;
  max-height: 0;
  opacity: 0;
}

.tabs-container {
  display: flex;
  flex-direction: column;
}

.tab-buttons.flex-wrap-active .tab-button:not(:last-child) {
  border-radius: 10px;
  border-bottom: 1px solid black;
}

.chart-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  min-height: 200px;
}

.chart-wrapper {
  width: 300px;
  height: 200px;
  margin: 10px;
  flex-grow: 1;
}

canvas {
  width: 100%;
  height: 100%;
}

.winner {
  border: 1px solid green;
}

.loser {
  border: 1px solid red;
}

.highlighted-player {
  border-left: 1px solid rgb(56 189 248);
  border-right: 1px solid rgb(56 189 248);
  color: white;
  border-radius: 0.5rem;
}

.form-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 100%;
}

.input-button-container {
  display: flex;
  flex-direction: column;
}

.form-container textarea {
  margin-bottom: 1rem;
  min-height: 130px;
  width: 100%;
}

@media (min-width: 768px) {
  .form-container {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .form-container textarea {
    flex: 1;
    margin-right: 20px;
  }

  .input-button-container {
    flex-direction: column;
    width: auto;
    margin-top: -15px;
  }

  .input-button-container input,
  .input-button-container button {
    margin: 5px 0;
  }
}

.textarea-style:hover {
  border-bottom-right-radius: 0 !important;
  border-color: rgb(56 189 248 / var(--tw-border-opacity));
}

.post {
  display: flex;
  flex-direction: column;
  position: relative;
}

.post-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.username {
  margin-right: 0.5rem;
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1999999;
}

.modal.hidden {
  display: none;
}

.modal.block {
  display: flex;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Ensure opaque background for modal content */
  --tw-bg-opacity: 1;
  /* Fallback to theme variable */
  background-color: var(--color-bgSecondary);
  padding: 38px 20px 20px 20px;
  border: 1px solid black;
  border-radius: 0.75rem;
  max-height: 90vh;
  max-width: 90vw;
  overflow-y: auto;
}

/* CS2 Results Modal Wrapper with scroll support */
.cs2-modal-wrapper {
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cs2-scrollable-wrapper {
  overflow-y: auto;
  overflow-x: auto;
  max-height: calc(90vh - 200px);
  padding: 1rem;
  flex: 1;
  min-height: 0;
}

.cs2-teams-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: max-content;
}

.cs2-table-wrapper {
  overflow-x: auto;
  width: 100%;
}

.cs2-scoreboard-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.cs2-scoreboard-table thead tr {
  background-color: var(--color-bg-secondary);
  border-bottom: 2px solid var(--color-border);
}

.cs2-scoreboard-table th {
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text);
}

.cs2-th-player {
  text-align: left !important;
  min-width: 150px;
}

.cs2-th-stat {
  min-width: 70px;
}

.cs2-scoreboard-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.2s;
}

.cs2-scoreboard-table tbody tr:hover {
  background-color: var(--color-bg-secondary);
}

.cs2-scoreboard-table td {
  padding: 0.75rem 0.5rem;
  text-align: center;
  color: var(--color-text);
}

.cs2-player-row td:first-child {
  text-align: left;
}

.cs2-mvp-row {
  background-color: rgba(234, 179, 8, 0.1);
}

.cs2-team-header-ct {
  background-color: rgba(59, 130, 246, 0.1);
}

.cs2-team-header-t {
  background-color: rgba(251, 146, 60, 0.1);
}

/* Appreciation modal: ensure plain close icon styling without extra circle */
#appreciationModal .close,
#appreciationModal .closeModal {
  border-radius: 0 !important;
  background: transparent !important;
  transform: none !important;
}

#appreciationModal .close:hover,
#appreciationModal .close:focus,
#appreciationModal .closeModal:hover,
#appreciationModal .closeModal:focus {
  background: transparent !important;
  color: var(--color-primary) !important;
  transform: none !important;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
  color: var(--color-text-permanent);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  height: 2.5rem;
  padding: 0.75rem;
  transition: all 0.7s;
  cursor: pointer;
}

/* Specific overrides for input-field class in modals */
.modal-content .input-field {
  margin: 10px 0 !important;
  width: 240px !important;
  /* Keep the other modal styles but add input-field specific ones */
}

.modal-content textarea {
  height: auto;
  min-height: 2.5rem;
}

.modal-content input:hover,
.modal-content select:hover,
.modal-content textarea:hover {
  border-color: var(--color-primary);
}

.modal-content input::placeholder,
.modal-content textarea::placeholder {
  color: var(--color-text);
  opacity: 0.7;
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  border-color: var(--color-primary);
  background-color: var(--color-bg-secondary);
  color: var(--color-text-permanent);
}

.modal-inner-content {
  overflow-y: auto;
  max-height: 75vh;
}

.modal-body {
  overflow-y: auto;
}

@media (max-width: 600px) {
  .modal-content {
    width: 90%;
    max-width: none;
  }
}

/* Ultra-specific styles for postFilterModal inputs */
#postFilterModal .modal-content input[name="filterKey"],
#postFilterModal .modal-content input[name="filterName"],
#postFilterModal .modal-content .input-field,
#postFilterModal .modal-content .language-select,
#postFilterModal .modal-content .translation-input {
  background-color: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-permanent) !important;
  border-radius: 0.75rem !important;
  height: 2.5rem !important;
  padding: 0.75rem !important;
  transition: all 0.7s !important;
  cursor: pointer !important;
  margin: 10px 0 !important;
  width: 240px !important;
}

#postFilterModal .modal-content input[name="filterKey"]:focus,
#postFilterModal .modal-content input[name="filterName"]:focus,
#postFilterModal .modal-content .input-field:focus,
#postFilterModal .modal-content .language-select:focus,
#postFilterModal .modal-content .translation-input:focus {
  border-color: var(--color-primary) !important;
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-permanent) !important;
  outline: none !important;
}

#postFilterModal .modal-content input[name="filterKey"]:hover,
#postFilterModal .modal-content input[name="filterName"]:hover,
#postFilterModal .modal-content .input-field:hover,
#postFilterModal .modal-content .language-select:hover,
#postFilterModal .modal-content .translation-input:hover {
  border-color: var(--color-primary) !important;
}

/* Drag & drop štýly pre filtre */
.drag-handle {
  color: var(--color-text) !important;
  cursor: grab !important;
  transition: color 0.3s ease, transform 0.2s ease !important;
  font-size: 1.1rem !important;
}

.drag-handle:hover {
  color: var(--color-primary) !important;
  cursor: grab !important;
  transform: scale(1.1) !important;
}

.drag-handle:active {
  cursor: grabbing !important;
}

/* Filter action icons štýly */
.edit-filter-btn,
.delete-filter-btn {
  color: var(--color-text) !important;
  cursor: pointer !important;
  transition: color 0.3s ease, transform 0.2s ease !important;
  padding: 0.5rem !important;
  border-radius: 0.375rem !important;
  font-size: 1rem !important;
}

.edit-filter-btn:hover {
  color: var(--color-primary) !important;
  transform: scale(1.1) !important;
}

.delete-filter-btn:hover {
  color: #ef4444 !important;
  /* red-500 */
  transform: scale(1.1) !important;
}

.filter-item {
  border: 1px solid black !important;
}

/* Filter item drag states */
.filter-item:hover {
  border: 1px solid var(--color-primary) !important;
  cursor: grab;
}

.filter-item.drag-over {
  border-color: var(--color-primary) !important;
  background-color: var(--color-bg-secondary) !important;
  transform: scale(1.02) !important;
}

.like-avatar-container,
.appreciation-avatar-container {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  overflow: hidden;
  margin-right: 0.5rem;
}

.like-avatar,
.appreciation-avatar {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0.5rem;
}

.like-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.appreciation-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.appreciation-user {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.appreciation-message {
  flex-grow: 1;
  text-align: left;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.modal-content .error {
  color: red;
}

.comment-container {
  margin-left: var(--indent, 0px);
  /* inline z JS */
  width: calc(100% - var(--indent, 0px));
}

@media (max-width: 640px) {
  .comment-container {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

#UserProfile.fade-out {
  opacity: 0;
}

#UserProfile.fade-in {
  opacity: 1;
}

#addComment:focus,
#addNewsComment:focus {
  --tw-border-opacity: 1;
  border-color: rgb(56 189 248 / var(--tw-border-opacity));
}

.comment-section.active {
  max-height: 1000px;
}

.ready {
  color: #164B63 !important;
}

.user-info {
  margin-left: -0.75rem;
  margin-right: 0.5rem;
  border-left: none;
  border-radius: 0.75rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 1rem;
  border: 1px solid black;
}

.user-icon {
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border-radius: 0.75rem;
}

.user-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.user-icon-friendRequest {
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: 0.75rem;
}

.user-icon-friendRequest img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.accept-icon,
.reject-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: normal;
}

.comment-time {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.news-footer,
.discussion-footer {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 10%;
  transform: translateY(50%);
}

.timestamp {
  text-align: left;
  display: block;
  color: #FFF;
  font-size: 0.875rem;
}

.image-style-alignLeft {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
}

.image-style-alignRight {
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
}

.image-style-align-left {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
}

.image-style-align-right {
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
}

.slide-toggle {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-in-out;
}

.slide-toggle.active {
  max-height: 1000px;
}

#full-news-container .news-content {
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 20px;
}

#full-news-container .comments-container {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  max-height: 800px;
  overflow-y: auto;
  position: relative;
}

/* Post comments - same styling as news comments for consistent scroll behavior */
[id*="tower-post-comments-container"] {
  padding: 10px;
  border-radius: 5px;
  max-height: 800px;
  overflow-y: auto;
  position: relative;
}

.comment-container {
  margin-bottom: 10px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
}

.comment-text {
  margin-top: 10px;
  background: rgb(29, 28, 33);
}

.comment-section-container,
.news-comment-section-container {
  width: 100%;
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.comment-section-container.expanding,
.news-comment-section-container.expanding,
.comments-container.expanding {
  display: block;
  max-height: 400px;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 1rem;
  opacity: 1;
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* Mobile responsive - same behavior as desktop but with smaller height */
@media (max-width: 768px) {

  .comment-section-container.expanding,
  .news-comment-section-container.expanding,
  .comments-container.expanding {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.comment-section-container.collapsed,
.news-comment-section-container.collapsed {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* Specific rule for tower-post comments - should be visible by default */
[id*="tower-post-comments-container"].collapsed {
  max-height: none;
  overflow: visible;
  opacity: 1;
  display: none;
  /* Use display none instead for these */
}

/* Comment form container animations */
.comment-form-container {
  width: 100%;
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.comment-form-container.active {
  max-height: 1000px;
  opacity: 1;
}

.comment-form-container.expanding {
  max-height: 200px;
  opacity: 1;
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.comment-form-container.collapsed {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.nested-reply-section-container {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 0;
  padding-bottom: 0;
  transition: max-height 0.5s ease, padding-bottom 0.5s ease, opacity 0.5s ease;
  display: none;
  opacity: 0;
}

.nested-reply-section-container.expanding {
  max-height: 800px;
  overflow-y: auto;
  padding-bottom: 1rem;
  opacity: 1;
  display: block;
}

.nested-reply-section-container.collapsed {
  max-height: 0;
  padding-bottom: 0;
  opacity: 0;
  display: none;
}

.collapsed {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-in-out, opacity 0.25s ease-in-out;
  opacity: 0;
}

.expanding {
  max-height: 800px !important;
  transition: max-height 0.25s ease-in-out, opacity 0.25s ease-in-out;
  opacity: 1;
  overflow: auto;
}

.visible-block {
  display: block !important;
  opacity: 1 !important;
}

.post-actions {
  position: relative;
}

.share-button,
.news-share-button,
.post-share-button,
.comment-share-button,
.nested-comment-share-button {
  display: block;
  position: absolute;
  top: 85%;
  left: 90%;
  transform: translateX(-50%);
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s;
}

.share-button.show,
.news-share-button.show,
.post-share-button.show,
.comment-share-button.show,
.nested-comment-share-button.show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {

  .share-button,
  .news-share-button,
  .post-share-button,
  .comment-share-button,
  .nested-comment-share-button {
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    padding: 0.5rem;
  }
}

@media (max-width: 480px) {

  .share-button,
  .news-share-button,
  .post-share-button,
  .comment-share-button,
  .nested-comment-share-button {
    top: 95%;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
}

.profile-share-comment-icon-container {
  position: relative;
  display: inline-block;
}

.profile-comment-share-button,
.nested-reply-share-button {
  position: absolute;
  top: calc(100% - 5px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  white-space: nowrap;
  min-width: 150px;
}

#dropdownMenuFilterTower {
  z-index: 50;
  min-width: 150px;
  border-radius: 0.5rem !important;
  overflow: hidden;
  border: 1px solid var(--colorBorder);
}

.fade-slow {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-slow.show {
  opacity: 1;
}

#friendRequestsList,
#sentFriendRequestsList {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

#friendRequestsList.expanded,
#sentFriendRequestsList.expanded {
  max-height: 500px;
}

.cancel-request i {
  display: inline-block;
  vertical-align: middle;
  line-height: 2rem;
}

/* Removed old CKEditor styles - replaced by TipTap */

.search-input {
  color: #164B63;
}

.search-input::placeholder {
  color: #164B63;
}

.avatar-link {
  background-image: var(--avatar-url);
  background-size: auto 100%;
  background-color: black;
  background-position: center;
}

.notification-count,
.message-count {
  position: absolute;
  bottom: -18px;
  right: -18px;
  background-color: rgb(56, 189, 248);
  color: black;
  font-size: 10px;
  padding: 3px 5px;
  border: 2px solid black;
  border-radius: 7px;
  z-index: 9999;
  white-space: nowrap;
}

.avatar-circle {
  width: 2rem;
  height: 2rem;
  background-color: black;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 0.5rem;
  margin-right: 3px;
}

.text-red-600 {
  color: #dc2626;
}

.text-green-600 {
  color: #16a34a;
}

.width-0 {
  width: 0%;
}

.width-5 {
  width: 5%;
}

.width-10 {
  width: 10%;
}

.width-15 {
  width: 15%;
}

.width-20 {
  width: 20%;
}

.width-25 {
  width: 25%;
}

.width-30 {
  width: 30%;
}

.width-35 {
  width: 35%;
}

.width-40 {
  width: 40%;
}

.width-45 {
  width: 45%;
}

.width-50 {
  width: 50%;
}

.width-55 {
  width: 55%;
}

.width-60 {
  width: 60%;
}

.width-65 {
  width: 65%;
}

.width-70 {
  width: 70%;
}

.width-75 {
  width: 75%;
}

.width-80 {
  width: 80%;
}

.width-85 {
  width: 85%;
}

.width-90 {
  width: 90%;
}

.width-95 {
  width: 95%;
}

.width-100 {
  width: 100%;
}

.avatar-div {
  width: 3rem;
  height: 3rem;
  background-color: black;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 0.5rem;
}

.avatar-div::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--avatar-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.translate-x-full {
  transform: translateX(100%);
}

.translate-x-0 {
  transform: translateX(0);
}

.translate-none {
  transform: none;
}

.chat-active {
  z-index: 0;
}

.chat-inactive {
  z-index: 100;
}

.mainpage-shift-left {
  left: -240px;
}

.mainpage-full-left {
  left: 0;
}

.mainpage-narrow {
  width: calc(100% - 240px);
}

.mainpage-full-width {
  width: 100%;
}

.z-50 {
  z-index: 50;
}

.z-100 {
  z-index: 100;
}

.translate-200 {
  transform: translateX(200%);
}

.translate-100 {
  transform: translateX(100%);
}

.transition-all-700 {
  transition: all 0.7s;
}

.transition-all {
  transition: all 0.7s;
}

.carousel_track {
  display: flex;
  transition: transform 0.3s ease;
}

.carousel_slide {
  flex: 0 0 100%;
}

.carousel_track-container {
  overflow: hidden;
}

.translate-x-0 {
  transform: translateX(0);
}

.-translate-x-0 {
  transform: translateX(0);
}

.-translate-x-100 {
  transform: translateX(-100%);
}

.-translate-x-200 {
  transform: translateX(-200%);
}

.report-highlight {
  color: #a00606;
}

.report-muted {
  color: #939395;
}

.text-glow {
  color: white !important;
  text-shadow: 0 0 10px white;
}

.table-row {
  display: table-row !important;
}

.max-h-0 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.max-h-full {
  max-height: 1000px;
  transition: max-height 0.3s ease;
}

.ml-auto {
  margin-left: auto;
}

.leading-8 {
  line-height: 2rem;
}

.avatar-bg {
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: 0.5rem;
  margin-right: 3px;
}

.avatar-bg img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-current-match {
  overflow: visible !important;
}

.has-avatar {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-avatar-1 {
  background-image: url('/img/clan1.png');
}

.bg-avatar-2 {
  background-image: url('/img/clan2.png');
}

.bg-avatar-3 {
  background-image: url('../img/avatar-woman.png');
}

[data-bg-url] {
  background-image: attr(data-bg-url url);
}

.hover\:bg-hoverSnippet:hover {
  background-color: rgb(29 28 33 / var(--tw-bg-opacity));
}

.bg-post {
  background: rgb(29, 28, 33);
}

.post-image-style,
.post-video-style,
.comment-media {
  max-width: 100%;
  height: auto;
}

.indent-level-0 {
  margin-left: 0px;
  width: 100%;
}

.indent-level-1 {
  margin-left: 50px;
  width: calc(100% - 50px);
}

.indent-level-2 {
  margin-left: 100px;
  width: calc(100% - 100px);
}

.indent-level-3 {
  margin-left: 150px;
  width: calc(100% - 150px);
}

.indent-level-4 {
  margin-left: 200px;
  width: calc(100% - 200px);
}

.indent-level-5 {
  margin-left: 250px;
  width: calc(100% - 250px);
}

@media (max-width: 640px) {

  .indent-level-0,
  .indent-level-1,
  .indent-level-2,
  .indent-level-3,
  .indent-level-4,
  .indent-level-5 {
    margin-left: 0 !important;
    width: 100% !important;
    /* ak tam je */
  }
}


.tiptap-toolbar {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  border: 1px solid rgb(0 0 0 / var(--tw-border-opacity));
  border-radius: 0.5rem;
  background-color: #151419;
}

.toolbar-group {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-left: none;
}

.tiptap-toolbar button {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(0 0 0 / var(--tw-border-opacity));
  border-radius: 0.375rem;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  background-color: rgb(40 39 43 / var(--tw-bg-opacity));
}

.tiptap-toolbar button:hover {
  background-color: rgb(21 20 25 / var(--tw-bg-opacity));
  border-color: rgb(56 189 248 / var(--tw-border-opacity));
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.tiptap-toolbar button.is-active {
  background-color: rgb(56 189 248 / var(--tw-border-opacity));
  border-color: rgb(56 189 248 / var(--tw-border-opacity));
  color: rgb(29 28 33 / var(--tw-bg-opacity));
}

.tiptap-toolbar input[type="color"],
.tiptap-toolbar select {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgb(0 0 0 / var(--tw-border-opacity));
  background-color: rgb(29 28 33 / var(--tw-bg-opacity));
  border-radius: 0.375rem;
  cursor: pointer;
  background-color: rgb(40 39 43 / var(--tw-bg-opacity));
}

.tiptap-toolbar input[type="file"] {
  display: none;
}

.tiptap-editor {
  width: 100%;
  min-height: 18rem;
  padding: 1rem;
  border: 1px solid rgb(0 0 0 / var(--tw-border-opacity));
  border-radius: 0.5rem;
  background-color: rgb(40 39 43 / var(--tw-bg-opacity));
  color: rgb(147 147 149 / var(--tw-text-opacity));
  line-height: 1.6;
  word-break: break-word;
}

.tiptap-editor>.ProseMirror {
  min-height: 18rem;
  outline: none;
  background-color: rgb(40 39 43 / var(--tw-bg-opacity));
}


.tiptap-editor h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 1rem 0;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.tiptap-editor h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0.75rem 0;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.tiptap-editor h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0.5rem 0;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.tiptap-editor blockquote {
  padding-left: 0.75rem;
  margin: 1rem 0;
  border-left: 4px solid rgb(56 189 248 / var(--tw-border-opacity));
  background-color: rgb(40 39 43 / var(--tw-bg-opacity));
  color: rgb(154 173 189 / var(--tw-text-opacity));
  font-style: italic;
}

.tiptap-editor>.ProseMirror ul,
.tiptap-editor>.ProseMirror ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.tiptap-editor>.ProseMirror ul {
  list-style-type: disc;
  list-style-position: outside;
}

.tiptap-editor>.ProseMirror ol {
  list-style-type: decimal;
  list-style-position: outside;
}

.tiptap-editor pre {
  padding: 1rem;
  margin: 1rem 0;
  background-color: rgb(31 31 31);
  border-radius: 0.375rem;
  overflow-x: auto;
  color: rgb(209 213 219);
}

.tiptap-editor code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  background-color: rgb(42 42 42);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}

.tiptap-editor table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.tiptap-editor th,
.tiptap-editor td {
  padding: 0.5rem;
  border: 1px solid rgb(0 0 0 / var(--tw-border-opacity));
}

.tiptap-editor th {
  background-color: rgb(40 39 43 / var(--tw-bg-opacity));
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.tiptap-editor>.ProseMirror iframe[data-youtube] {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  margin: 1rem 0;
  border: none;
  border-radius: 0.375rem;
}

/* Responsive YouTube embeds that might be plain iframes (fallback) */
.responsive-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

.responsive-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.tiptap-editor img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
  border-radius: 0.375rem;
}

.tiptap-editor hr {
  border: none;
  border-top: 1px solid rgb(0 0 0 / var(--tw-border-opacity));
  margin: 1rem 0;
}

.tiptap-editor img.float-left {
  float: left;
  margin: 0 1em 1em 0;
}

.tiptap-editor img.float-right {
  float: right;
  margin: 0 0 1em 1em;
}

.tiptap-editor img.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

.cell-left {
  text-align: left !important;
}

.cell-center {
  text-align: center !important;
}

.cell-right {
  text-align: right !important;
}

.yt-left {
  display: block;
  margin: 1em 1em 1em 0;
  float: left;
  clear: both;
}

.yt-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

.yt-right {
  display: block;
  margin: 1em 0 1em 1em;
  float: right;
  clear: both;
}

.text-ff0000 {
  color: #ff0000 !important;
}

.bg-ffff00 {
  background: #ffff00 !important;
}

.font-roboto {
  font-family: 'Roboto', sans-serif !important;
}

.font-georgia {
  font-family: 'Georgia', serif !important;
}

.font-courier {
  font-family: 'Courier New', monospace !important;
}

.font-comic {
  font-family: 'Comic Sans MS', cursive !important;
}

.font-arial {
  font-family: Arial, sans-serif !important;
}

.font-times {
  font-family: "Times New Roman", Times, serif !important;
}

.font-verdana {
  font-family: Verdana, Geneva, sans-serif !important;
}

.font-tahoma {
  font-family: Tahoma, Geneva, sans-serif !important;
}

.forum-page tr[data-href] {
  cursor: pointer;
}

.forum-page tr[data-href]:hover {
  background-color: rgb(40 39 43 / var(--tw-bg-opacity));
  color: rgb(56 189 248 / var(--tw-border-opacity));
}

.forum-page .avatar-small {
  width: auto;
  height: 24px;
  border-radius: 7px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  border: 1px solid black;
}

.forum-page th,
.forum-page td {
  padding: 12px 15px;
  text-align: left;
  white-space: nowrap;
}

.forum-page .forum-table {
  min-width: 700px;
  width: 100%;
}

@media (max-width: 768px) {
  .forum-page .forum-table {
    min-width: 700px;
    width: auto;
  }

  .forum-page th,
  .forum-page td {
    padding: 8px 10px;
    white-space: nowrap;
  }

  .forum-page .forum-categories {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
  }

  .forum-page .forum-categories::-webkit-scrollbar {
    height: 8px;
  }

  .forum-page .forum-categories::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  .forum-page .forum-categories::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 4px;
  }

  .forum-page .forum-categories::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7);
  }
}

@media (max-width: 600px) {

  .forum-page th,
  .forum-page td {
    padding: 6px 8px;
    font-size: 14px;
    white-space: nowrap;
  }

  .forum-page .forum-table {
    min-width: 650px;
  }

  .forum-page .category-description {
    font-size: 12px;
  }

  .forum-page .subcategory {
    font-size: 14px;
  }

  .forum-page .forum-categories {
    border-left: 1px solid rgba(156, 163, 175, 0.3);
    border-right: 1px solid rgba(156, 163, 175, 0.3);
  }
}

.forum-category-page tr[data-href] {
  cursor: pointer;
}

.forum-category-page tr[data-href]:hover {
  color: rgb(56 189 248 / var(--tw-border-opacity));
}

/* Forum Category Page Responsive Styles */
@media (max-width: 768px) {
  .forum-category-page .discussion-list {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
  }

  .forum-category-page .table-sortable {
    min-width: 800px;
    width: auto;
  }

  .forum-category-page th,
  .forum-category-page td {
    padding: 8px 10px;
    white-space: nowrap;
  }

  .forum-category-page .discussion-list::-webkit-scrollbar {
    height: 8px;
  }

  .forum-category-page .discussion-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  .forum-category-page .discussion-list::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 4px;
  }

  .forum-category-page .discussion-list::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7);
  }
}

@media (max-width: 600px) {
  .forum-category-page .table-sortable {
    min-width: 750px;
  }

  .forum-category-page th,
  .forum-category-page td {
    padding: 6px 8px;
    font-size: 14px;
    white-space: nowrap;
  }

  .forum-category-page .search-input {
    font-size: 13px;
    height: 36px;
  }

  .forum-category-page .discussion-list {
    border-left: 1px solid rgba(156, 163, 175, 0.3);
    border-right: 1px solid rgba(156, 163, 175, 0.3);
  }

  .forum-category-page .discussion-title,
  .forum-category-page .discussion-author {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.trophy-icon-gold {
  color: gold;
}

.trophy-icon-silver {
  color: silver;
}

.trophy-icon-bronze {
  color: #cd7f32;
}

.trophy-icon-black {
  color: black;
}

.user-avatar {
  background-color: black;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.characters-left {
  position: absolute;
  right: 6px;
  padding-top: 6px;
}

.star-icon {
  bottom: -12px;
  right: -12px;
  padding-top: 2px;
  border: 1px solid black;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
}

.characters-left-mymatch {
  position: absolute;
  right: 6px;
  padding-top: 6px;
}

.count-badge {
  display: inline-block;
  background-color: rgb(56 189 248);
  color: black;
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid black;
  border-radius: 7px;
  margin-left: 5px;
  white-space: nowrap;
}

.default-border {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  box-sizing: border-box;
}

.message-item-border {
  border-bottom: 1px solid black;
}

/* Team fade-in animation */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

/* Kontajner pre avatar */
.avatar-container-pickup {
  position: relative;
  background-color: black;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Samotný avatar vo vnútri kontajnera */
.contained-avatar {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.avatar-img {
  width: 1.5rem;
  /* 24 px */
  height: 1.5rem;
  border-radius: .5rem;
  background: black;
  /* fallback farba */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-image-dynamic {
  background-color: black;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Použije CSS premennú --avatar-url; ak nie je nastavená, použije sa fallback. */
  background-image: var(--avatar-url, url('/img/avatar-man.png'));
}

.dynamic-background-image {
  background-image: var(--bg-url, none);
}

.player-item-border {
  border-top: 1px solid #28272b;
  border-bottom: 1px solid #28272b;
  border-left: 1px solid transparent;
  /* Pridané */
  border-right: 1px solid transparent;
  /* Pridané */
  box-sizing: border-box;
}

/* Border styles for player selection */
.player-hover {
  border-left: 1px solid var(--color-primary, rgb(56 189 248));
  border-right: 1px solid var(--color-primary, rgb(56 189 248));
  transition: border-color .3s ease;
  cursor: pointer;
}

.captain-icon-overlay {
  bottom: -12px;
  right: -12px;
  padding-top: 2px;
  border: 1px solid black;
  background-color: rgba(0, 0, 0, 0.5);
}

/* prerytme fade in/out v thread-view */
#comments-container.fade-out {
  opacity: 0;
  transition: opacity .25s ease;
}

#comments-container.fade-in {
  opacity: 1;
  transition: opacity .25s ease;
}

/* Mobile thread view animations */
.content-main.fade-out {
  opacity: 0;
  transition: opacity .25s ease;
}

.content-main.fade-in {
  opacity: 1;
  transition: opacity .25s ease;
}

/* CSS classes to replace inline styles for CSP compliance */
.tooltip-positioned {
  position: absolute;
  z-index: 1000;
}

.modal-visible {
  display: block !important;
}

.modal-hidden {
  display: none !important;
}

.tooltip-positioned {
  position: absolute;
  z-index: 1000;
  left: var(--tooltip-left, 0);
  top: var(--tooltip-top, 0);
}

.modal-visible {
  display: block !important;
}

.modal-hidden {
  display: none !important;
}

.comment-container-indented {
  margin-left: 0;
}

.comment-form-indented {
  margin-left: 0;
  width: 100%;
  box-sizing: border-box;
}

.nested-comments-hidden {
  display: none;
}

.nested-comments-visible {
  display: block;
}

.appreciation-form-visible {
  display: flex;
}

.appreciation-message-hidden {
  display: none;
}

/* Transform utilities for footer positioning */
.transform-translate-y-50 {
  transform: translateY(50%);
}

/* Media query for larger screens - comment indentation */
@media (min-width: 768px) {
  .comment-container-indented[data-indent] {
    margin-left: var(--indent-amount, 0);
    width: calc(100% - var(--indent-amount, 0));
  }

  .comment-form-indented[data-indent] {
    margin-left: var(--indent-amount, 0);
    width: calc(100% - var(--indent-amount, 0));
  }

  /* Static indentation classes for CSP compliance */
  .comment-indent-1 {
    margin-left: 30px;
    width: calc(100% - 30px);
  }

  .comment-indent-2 {
    margin-left: 60px;
    width: calc(100% - 60px);
  }

  .comment-indent-3 {
    margin-left: 90px;
    width: calc(100% - 90px);
  }

  .comment-indent-4 {
    margin-left: 120px;
    width: calc(100% - 120px);
  }

  .comment-indent-5 {
    margin-left: 150px;
    width: calc(100% - 150px);
  }

  .comment-indent-6 {
    margin-left: 180px;
    width: calc(100% - 180px);
  }

  .comment-indent-7 {
    margin-left: 210px;
    width: calc(100% - 210px);
  }

  .comment-indent-8 {
    margin-left: 240px;
    width: calc(100% - 240px);
  }
}

/* Dynamic margin top utilities */
.dynamic-margin-top {
  margin-top: var(--margin-amount, 0);
}

.dynamic-transform-y {
  transform: translateY(var(--transform-amount, 0));
}

/* TipTap content display styles - for showing saved content */
.tiptap-content {
  text-align: initial;
  line-height: 1.6;
}

.tiptap-content h1 {
  font-size: 2rem;
  font-weight: bold;
  margin: 1.5rem 0 1rem 0;
  max-width: 65ch;
}

.tiptap-content h2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 1.25rem 0 0.75rem 0;
  max-width: 65ch;
}

.tiptap-content h3 {
  font-size: 1.25rem;
  font-weight: bold;
  margin: 1rem 0 0.5rem 0;
  max-width: 65ch;
}

.tiptap-content blockquote {
  border-left: 4px solid rgb(156 163 175);
  padding-left: 1rem;
  margin: 1rem 0;
  max-width: 65ch;
  font-style: italic;
}

.tiptap-content ul,
.tiptap-content ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
  max-width: 65ch;
}

.tiptap-content ul {
  list-style-type: disc;
  list-style-position: outside;
}

.tiptap-content ol {
  list-style-type: decimal;
  list-style-position: outside;
}

.tiptap-content pre {
  padding: 1rem;
  margin: 1rem 0;
  background-color: rgb(31 31 31);
  border-radius: 0.375rem;
  overflow-x: auto;
  color: rgb(209 213 219);
}

.tiptap-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  background-color: rgb(42 42 42);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  color: rgb(209 213 219);
}

.tiptap-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.tiptap-content th,
.tiptap-content td {
  padding: 0.5rem;
  border: 1px solid rgb(0 0 0 / var(--tw-border-opacity));
}

.tiptap-content th {
  background-color: rgb(40 39 43 / var(--tw-bg-opacity));
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.tiptap-content iframe[data-youtube] {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  margin: 1rem 0;
  border: none;
  border-radius: 0.375rem;
}

.tiptap-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
  border-radius: 0.375rem;
}

.tiptap-content hr {
  border: none;
  border-top: 1px solid rgb(0 0 0 / var(--tw-border-opacity));
  margin: 1rem 0;
}

.tiptap-content img.float-left {
  float: left;
  margin: 0 1em 1em 0;
}

.tiptap-content img.float-right {
  float: right;
  margin: 0 0 1em 1em;
}

.tiptap-content p {
  margin: 0.5rem 0;
  max-width: 65ch;
}

.tiptap-content strong {
  font-weight: bold;
}

.tiptap-content em {
  font-style: italic;
}

.tiptap-content a {
  color: rgb(59 130 246);
  text-decoration: underline;
}

.tiptap-content a:hover {
  color: rgb(29 78 216);
}


/* TipTap Editor - Text Color Support */
[data-color="red"] {
  color: #ff0000 !important;
}

[data-color="green"] {
  color: #00ff00 !important;
}

[data-color="blue"] {
  color: #0000ff !important;
}

[data-color="yellow"] {
  color: #ffff00 !important;
}

[data-color="orange"] {
  color: #ffa500 !important;
}

[data-color="purple"] {
  color: #800080 !important;
}

[data-color="pink"] {
  color: #ffc0cb !important;
}

[data-color="cyan"] {
  color: #00ffff !important;
}

[data-color="black"] {
  color: #000000 !important;
}

[data-color="white"] {
  color: #ffffff !important;
}

[data-color="gray"] {
  color: #808080 !important;
}

[data-color="brown"] {
  color: #a52a2a !important;
}

/* TipTap Editor - Background Color Support */
[data-bg="red"] {
  background-color: #ff0000 !important;
}

[data-bg="green"] {
  background-color: #00ff00 !important;
}

[data-bg="blue"] {
  background-color: #0000ff !important;
}

[data-bg="yellow"] {
  background-color: #ffff00 !important;
}

[data-bg="orange"] {
  background-color: #ffa500 !important;
}

[data-bg="purple"] {
  background-color: #800080 !important;
}

[data-bg="pink"] {
  background-color: #ffc0cb !important;
}

[data-bg="cyan"] {
  background-color: #00ffff !important;
}

[data-bg="black"] {
  background-color: #000000 !important;
}

[data-bg="white"] {
  background-color: #ffffff !important;
}

[data-bg="gray"] {
  background-color: #808080 !important;
}

[data-bg="brown"] {
  background-color: #a52a2a !important;
}

/* Kombinované pravidlá pre lepšiu čitateľnosť */
[data-bg="black"],
[data-bg="blue"],
[data-bg="purple"],
[data-bg="brown"] {
  color: #ffffff !important;
}

[data-bg="yellow"],
[data-bg="white"],
[data-bg="pink"],
[data-bg="cyan"] {
  color: #000000 !important;
}

/* Mobile thread view styles for news detail page */
.mobile-thread-header {
  background: var(--colorBgSecondary);
  border-bottom: 1px solid var(--colorBorder);
  border-radius: 12px;
  margin-bottom: 16px;
}

.mobile-thread-view {
  max-width: 100%;
  overflow-x: hidden;
}

.back-btn {
  background: transparent;
  border: none;
  color: var(--colorPrimary);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-btn:hover {
  color: var(--colorText);
}

.back-btn:focus {
  outline: 2px solid var(--colorPrimary);
  outline-offset: 2px;
}

/* Mobile thread view adjustments */
@media (max-width: 640px) {
  .mobile-thread-view .comment-form-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    --indent-amount: 0px !important;
  }

  .mobile-thread-view .comments-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mobile-thread-view .comment-element {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ensure comments container maintains proper styling */
  #comments-container.mobile-thread-active {
    padding: 0;
    margin: 0;
  }

  /* Thread wrapper styles */
  .mobile-thread-view {
    width: 100%;
    padding: 0;
  }
}

/* Keep appreciation message always white */
.group:hover .appreciation-message {
  color: white !important;
}

.liked-arrow {
  position: absolute;
  bottom: -1rem;
  right: 3rem;
  z-index: 20;
  pointer-events: auto;
}

/* Collapsible accordion styling */
.toggle-icon {
  transition: transform 0.3s ease;
}

.collapsible-header {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.collapsible-content {
  overflow: visible;
}

.collapsible-content.hidden {
  display: none;
}

.profile-visibility-section .collapsible-content {
  overflow: visible;
  padding-bottom: 2rem !important;
}

/* Profile grid and card styling */
.profile-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.profile-card {
  background-color: rgb(40 39 43 / 0.8);
  border: 1px solid rgb(0 0 0 / 0.3);
  border-radius: 0.75rem;
  padding: 1.5rem;
  min-height: 400px;
}

.profile-card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.profile-card-avatar-wrap {
  margin-bottom: 1rem;
}

.profile-card-avatar-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgb(56 189 248 / 0.3);
}

.profile-card-heading {
  color: rgb(255 255 255 / 1);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.profile-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 280px;
}

.profile-action-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.profile-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: 1px solid rgb(0 0 0 / 1);
  background-color: rgb(40 39 43 / 1);
  color: rgb(147 147 149 / 1);
  transition: all 0.3s ease;
  cursor: pointer;
  flex: 1;
}

.profile-action-btn:hover {
  background-color: rgb(56 189 248 / 1);
  border-color: rgb(56 189 248 / 1);
  color: rgb(255 255 255 / 1);
}

.profile-action-main {
  flex: 1;
}

.profile-action-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 2.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(0 0 0 / 1);
  background-color: rgb(40 39 43 / 0.8);
  color: rgb(255 255 255 / 1);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.profile-action-counter:hover {
  background-color: rgb(56 189 248 / 0.2);
  border-color: rgb(56 189 248 / 1);
  color: rgb(56 189 248 / 1);
}

.profile-action-badge {
  margin-left: auto;
  background-color: rgb(56 189 248 / 0.2);
  color: rgb(255 255 255 / 1);
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.profile-field-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-field-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgb(0 0 0 / 0.1);
}

.profile-field-row:last-child {
  border-bottom: none;
}

.profile-field-icon {
  color: rgb(255 255 255 / 1);
  width: 1.25rem;
  text-align: center;
}

.profile-field-label {
  color: rgb(255 255 255 / 1);
  font-size: 0.875rem;
  font-weight: 500;
  min-width: 120px;
}

.profile-field-value {
  color: rgb(255 255 255 / 1);
  font-size: 0.875rem;
  flex: 1;
}

.profile-field-link {
  color: rgb(255 255 255 / 1);
  text-decoration: none;
}

.profile-field-link:hover {
  color: rgb(56 189 248 / 1);
}

.profile-card-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem;
  color: rgb(255 255 255 / 0.6);
  font-size: 0.875rem;
}

.profile-card-empty i {
  font-size: 2rem;
  color: rgb(255 255 255 / 0.3);
}

.profile-name-text {
  color: rgb(255 255 255 / 1);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.profile-role-text {
  color: rgb(255 255 255 / 1);
  font-size: 0.875rem;
  margin: 0;
}

.profile-nick-text {
  color: rgb(255 255 255 / 0.9);
  font-size: 0.8rem;
  margin: 0;
}

.profile-registration-box {
  background-color: rgb(255 255 255 / 0.05);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-top: 1rem;
  text-align: center;
}

.profile-registration-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.profile-registration-icon {
  color: rgb(255 255 255 / 1);
  font-size: 0.875rem;
}

.profile-registration-label {
  color: rgb(255 255 255 / 1);
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
}

.profile-registration-date {
  color: rgb(255 255 255 / 1);
  font-size: 0.8rem;
  margin: 0;
}

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

  .profile-card {
    min-height: auto;
  }
}

/* Cross-hover effect for liked/appreciated/commented posts */
.post {
  position: relative;
}

/* When hovering over main content, change arrow border */
.main-content-link:hover+.liked-arrow .arrow-link {
  border-color: var(--color-primary) !important;
}

/* When hovering over arrow, change main content border */
.liked-arrow:hover+.main-content-link {
  border-color: var(--color-primary) !important;
}

/* Alternative: When hovering over the entire post, sync the borders */
.post:hover .main-content-link,
.post:hover .arrow-link {
  border-color: var(--color-primary) !important;
}

/* Gold icons styling for eshop */
.golds-icon {
  width: 35px;
  height: 25px;
  padding: 0px 5px;
}

.golds-icon-small {
  width: 28px;
  height: 20px;
  padding: 0px 4px;
}

/* Backup CSS for red text if Tailwind fails */
.text-red-500 {
  color: #ef4444 !important;
}

.text-green-500 {
  color: #22c55e !important;
}

.text-yellow-500 {
  color: #eab308 !important;
}

/* Gold icon container - CSP compliant */
.gold-icon-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
}

/* Gold icon sizing - CSP compliant */
.gold-icon-img {
  height: 32px !important;
  width: 32px !important;
}

/* Gold item text alignment - vertical centering */
.gold-item-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 48px !important;
}

.gold-item-text>* {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  line-height: 1.2 !important;
}

.gold-item-text>*:not(:first-child) {
  margin-top: 2px !important;
}

/* Reset all inherited styles */
.gold-item-title,
.gold-item-subtitle {
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  display: block !important;
  border: none !important;
  outline: none !important;
}

/* Menšie nadpisy pre filter komponenty */
#selectedRegionHeading,
#regionResultsHeading,
#selectedGameHeading,
#gameResultsHeading,
#selectedGameValueInRegionHeading,
#selectedRegionValueInGameHeading {
  font-size: 1.125rem !important;
  /* text-lg */
  line-height: 1.75rem !important;
}

#indexPage {
  max-width: 800px;
  margin: 0 auto;
}

#UserPosts {
  overflow: auto;
}

/* Avatar Crop Editor Styles */
.crop-container {
  position: relative;
  overflow: hidden;
  border: 2px solid #374151;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: 160px;
  height: 160px;
  margin: 0 auto;
  background-color: #000000;
  border-radius: 0.5rem;
}

.crop-container img {
  display: block;
  max-width: none;
  pointer-events: auto;
  cursor: move;
  position: absolute;
  width: 160px;
  height: auto;
  left: 0;
  top: 0;
  transform-origin: top left;
  transform: translate(var(--crop-x, 0px), var(--crop-y, 0px)) scale(var(--crop-scale, 1));
}

.crop-container img:active {
  cursor: grabbing;
}

/* Stream image Crop Editor (16:9) */
.stream-crop-container {
  position: relative;
  overflow: hidden;
  border: 2px solid #374151;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: 320px;
  height: 180px;
  /* 16:9 */
  margin: 0 auto;
  background-color: #000000;
  border-radius: 0.5rem;
}

.stream-crop-container img {
  display: block;
  max-width: none;
  pointer-events: auto;
  cursor: move;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
  transform: translate(var(--crop-x, 0px), var(--crop-y, 0px)) scale(var(--crop-scale, 1));
}

.stream-crop-container img:active {
  cursor: grabbing;
}

.crop-controls input[type="range"] {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.crop-controls input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: #3b82f6;
  border-radius: 50%;
  cursor: pointer;
}

.crop-controls input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #3b82f6;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* Dark theme adjustments */
.dark .crop-container {
  border-color: #6b7280;
  background-color: #1f2937;
}

.dark .crop-controls input[type="range"] {
  background: #374151;
}

@media (max-width: 640px) {
  .crop-container {
    width: 140px !important;
    height: 140px !important;
  }
}

/* Comment media styles - restrict size and maintain responsive layout */
.comment-text img,
.comment-container img,
.nested-comments-container img,
.comment-media-img {
  max-width: 100% !important;
  height: auto !important;
  max-height: 400px !important;
  object-fit: contain !important;
  border-radius: 0.5rem !important;
  margin: 0.5rem 0 !important;
  display: block !important;
}

.comment-text video,
.comment-container video,
.nested-comments-container video,
.comment-media-video {
  max-width: 100% !important;
  height: auto !important;
  max-height: 400px !important;
  border-radius: 0.5rem !important;
  margin: 0.5rem 0 !important;
  display: block !important;
}

/* Ensure comment containers don't overflow */
.comment-text {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.comment-container {
  max-width: 100% !important;
  overflow: hidden !important;
}

.comment-media {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Mobile responsive adjustments for comment media */
@media (max-width: 640px) {

  .comment-text img,
  .comment-container img,
  .nested-comments-container img,
  .comment-media-img {
    max-height: 250px !important;
  }

  .comment-text video,
  .comment-container video,
  .nested-comments-container video,
  .comment-media-video {
    max-height: 250px !important;
  }
}

/* Modal styles for CSP compliance */
.modal.active:not(.hidden),
#archiveFilterModal.active:not(.hidden) {
  display: flex !important;
}

/* Custom Spin Buttons for Number Inputs - Appreciation Donate */
.number-input-wrapper {
  position: relative;
}

.donate-input {
  -moz-appearance: textfield;
  min-height: 3.5rem;
  height: 3.5rem;
}

.donate-input::-webkit-outer-spin-button,
.donate-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.custom-spin-buttons {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 10;
}

.spin-button {
  width: 34px;
  height: 22px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--color-text);
  transition: all 0.3s ease;
  border-radius: 4px;
}

.spin-button:hover {
  background: var(--color-primary);
  color: var(--color-text-permanent);
  border-color: var(--color-primary);
}

.spin-button.up {
  border-radius: 4px 4px 0 0;
}

.spin-button.down {
  border-radius: 0 0 4px 4px;
}

.donate-input:hover,
.donate-input:focus {
  border-color: var(--color-primary) !important;
}

/* Menu icon and text hover effect - both light up together */
.menu-group:hover #leftMenuIcon,
.menu-group:hover #leftMenuText,
.menu-group:hover #rightMenuIcon,
.menu-group:hover #rightMenuText {
  color: rgb(56 189 248) !important;
  /* colorPrimary */
}

/* On xl+ screens, keep white color on hover */
@media (min-width: 1280px) {

  .menu-group:hover #leftMenuIcon,
  .menu-group:hover #leftMenuText,
  .menu-group:hover #rightMenuIcon,
  .menu-group:hover #rightMenuText {
    color: rgb(255 255 255) !important;
    /* colorTextPermanent */
  }
}

/* Avatar History Styles */
.avatar-history-card {
  position: relative;
  transition: all 0.3s ease;
  width: 120px;
  height: 120px;
  z-index: 1;
}

.avatar-history-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.avatar-history-card img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.avatar-history-overlay {
  z-index: 20;
  pointer-events: auto !important;
}

.avatar-history-overlay button {
  pointer-events: auto !important;
  z-index: 30;
}

.avatar-history-section {
  background: var(--color-bg-secondary);
  border-radius: 12px;
}

#avatarHistoryContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  max-height: none !important;
  overflow: visible !important;
}

.default-avatar-card {
  width: 120px;
  height: 120px;
  position: relative;
  z-index: 1;
}

.default-avatar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.default-avatar-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  display: block;
}

.default-avatar-overlay {
  pointer-events: auto;
  z-index: 20;
}

.default-avatar-overlay button {
  pointer-events: auto;
}

.default-avatar-card:hover .default-avatar-overlay,
.default-avatar-card.active .default-avatar-overlay {
  opacity: 1 !important;
}

/* Avatar Confirm Modal Button Hover Effects */
#avatarConfirmModalYes:hover {
  background-color: var(--color-primary, #38bdf8) !important;
  color: var(--color-text-permanent, white) !important;
  border-color: var(--color-primary, #38bdf8) !important;
}

#avatarConfirmModalCancel:hover {
  background-color: #ef4444 !important;
  color: white !important;
  border-color: #ef4444 !important;
}

/* CS2 Logo - White Filter */
.cs2-logo-white {
  filter: brightness(0) invert(1);
}

/* CS2 Status Tab - Custom Classes */
.font-bold {
  font-weight: 700;
}

.font-mono {
  font-family: monospace;
}

.border-bottom-gray {
  border-bottom: 1px solid var(--color-border, #000);
}

.cs2-progress-container {
  height: 12px;
}

.cs2-progress-bar {
  height: 12px;
}

/* ZV Invite Buttons - same style as project buttons with hover:bg-colorPrimary hover:text-colorTextPermanent */
.zv-accept-invite:hover,
.zv-decline-invite:hover,
.zv-cancel-btn:hover,
.zv-ok-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(56 189 248 / var(--tw-bg-opacity)) !important;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

/* ZV Confirm (red) Button */
.zv-confirm-btn:hover {
  background-color: rgb(185 28 28) !important;
  color: white !important;
}


/* ZV Online Status Indicator - same as pickup.php lobby */
.zv-online-status {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  border: 2px solid white;
}

.zv-online-status.online {
  background-color: #22c55e;
  /* green-500 */
}

.zv-online-status.offline {
  background-color: #6b7280;
  /* gray-500 */
}

/* Text gray for offline status */
.text-gray-500 {
  color: #6b7280;
}

/* Cancel team button hover */
.hover\:bg-red-500:hover {
  background-color: #ef4444 !important;
}

.hover\:text-white:hover {
  color: white !important;
}

/* Crown positioning */
.-translate-x-1\/2 {
  transform: translateX(-50%);
}

.-top-2 {
  top: -0.5rem;
}

.left-1\/2 {
  left: 50%;
}

/* ZV Crown centering in team cards */
.zv-crown-center {
  transform: translateX(-50%);
}

.-top-1\.5 {
  top: -0.375rem;
}

/* Line clamp for description */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ZV Filter buttons hover */
.zv-filter-hover:hover {
  background-color: rgba(56, 189, 248, 0.2);
  color: rgb(56 189 248);
}

/* ZV Join button hover */
.zv-join-btn:hover {
  background-color: rgb(56 189 248);
  color: white;
  border-color: rgb(56 189 248);
}

/* Crown positioning fix */
.-top-2\.5 {
  top: -0.625rem;
}

/* Grid layout for teams */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.gap-3 {
  gap: 0.75rem;
}

/* Font weight */
.font-semibold {
  font-weight: 600;
}

/* Flex utilities */
/* .flex-col is already defined at line ~819, removing duplicate to fix sm:flex-row override issue */

.flex-1 {
  flex: 1 1 0%;
}

.justify-center {
  justify-content: center;
}

.shrink-0 {
  flex-shrink: 0;
}

/* Spacing */
.space-y-1>*+* {
  margin-top: 0.25rem;
}

.space-y-0\.5>*+* {
  margin-top: 0.125rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

/* Text colors for filter active state */
.text-colorTextPermanent {
  color: white;
}

/* Crown on avatar edge */
.-top-2 {
  top: -0.5rem;
}

/* ZV Modal box - used for confirm/info dialogs */
.zv-modal-box {
  position: relative;
  transform: none;
  max-height: 90vh;
  overflow-y: auto;
}

/* Crown on avatar edge - precise positioning */
.zv-crown {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgb(56 189 248);
  font-size: 10px;
}

/* ZV Challenge voting modal */
.zv-voting-modal {
  max-width: 700px;
}

/* ZV My team background highlight */
.zv-my-team-bg {
  background-color: rgba(56, 189, 248, 0.1);
}

/* ZV Team card my team highlight */
.zv-team-highlight {
  background-color: rgba(56, 189, 248, 0.1);
}

/* Tailwind opacity color utilities */
.bg-colorPrimary\/10 {
  background-color: rgba(56, 189, 248, 0.1);
}

.bg-colorPrimary\/20 {
  background-color: rgba(56, 189, 248, 0.2);
}

.bg-yellow-500\/20 {
  background-color: rgba(234, 179, 8, 0.2);
}

.bg-yellow-500\/50 {
  background-color: rgba(234, 179, 8, 0.5);
}

.border-yellow-500\/50 {
  border-color: rgba(234, 179, 8, 0.5);
}

.bg-green-500\/20 {
  background-color: rgba(34, 197, 94, 0.2);
}

.bg-green-500\/50 {
  background-color: rgba(34, 197, 94, 0.5);
}

.border-green-500\/50 {
  border-color: rgba(34, 197, 94, 0.5);
}

.bg-red-500\/20 {
  background-color: rgba(239, 68, 68, 0.2);
}

.bg-red-500\/50 {
  background-color: rgba(239, 68, 68, 0.5);
}

.border-red-500\/50 {
  border-color: rgba(239, 68, 68, 0.5);
}

.bg-blue-500\/20 {
  background-color: rgba(59, 130, 246, 0.2);
}

.bg-colorBgSecondary\/50 {
  background-color: rgba(40, 39, 43, 0.5);
}

.hover\:border-colorPrimary\/50:hover {
  border-color: rgba(56, 189, 248, 0.5);
}

/* ZV Filter button active state - white text */
.zv-filter-btn.bg-colorPrimary {
  color: white !important;
}

/* ZV Accept/Reject button styles */
.zv-btn-accept {
  background-color: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.5);
  color: var(--color-text);
  transition: all 0.3s ease;
}

.zv-btn-accept:hover {
  background-color: rgb(34, 197, 94);
  border-color: rgb(34, 197, 94);
  color: white;
}

.zv-btn-reject {
  background-color: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: var(--color-text);
  transition: all 0.3s ease;
}

.zv-btn-reject:hover {
  background-color: rgb(239, 68, 68);
  border-color: rgb(239, 68, 68);
  color: white;
}

/* ==================== */
/* Responsive utilities for md: breakpoint (768px+) */
/* ==================== */
@media (min-width: 768px) {
  .md\:flex-row {
    flex-direction: row;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-2\/4 {
    width: 50%;
  }

  .md\:mb-0 {
    margin-bottom: 0;
  }

  .md\:items-start {
    align-items: flex-start;
  }
}