:root {
  color: #18221d;
  font-synthesis: none;
  text-rendering: optimizelegibility;
  --green: #145d3c;
  --green-2: #1f7a50;
  --green-3: #dff2e7;
  --ink: #17221c;
  --muted: #6e7c73;
  --line: #dfe8e2;
  --soft: #f7faf8;
  --shadow: 0 20px 60px #162d2014;
  background: #eef3ef;
  font-family:
    Inter,
    Arial,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background:
    radial-gradient(circle at 15% 0, #3b8f6017, #0000 28%),
    radial-gradient(circle at 100% 18%, #23654412, #0000 26%), #eef3ef;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
img {
  max-width: 100%;
  display: block;
}
.app-shell {
  width: min(1560px, 100% - 36px);
  margin: 18px auto 28px;
}
.surface {
  box-shadow: var(--shadow);
  background: #fffffff5;
  border: 1px solid #d4e1d8f2;
}
.topbar {
  z-index: 30;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  min-height: 72px;
  padding: 12px 16px 12px 20px;
  display: flex;
  position: sticky;
  top: 14px;
}
.brand {
  color: var(--ink);
  align-items: center;
  gap: 12px;
  text-decoration: none;
  display: inline-flex;
}
.brand img {
  width: 42px;
  height: 42px;
}
.brand div {
  flex-direction: column;
  gap: 2px;
  display: flex;
}
.brand strong {
  letter-spacing: -0.03em;
  font-family: Inter, Arial, sans-serif;
  font-size: 18px;
  line-height: 1;
}
.brand span {
  color: #779084;
  letter-spacing: 0.12em;
  font-size: 9px;
  font-weight: 800;
}
.topnav {
  align-items: center;
  gap: 8px;
  display: flex;
}
.topnav button {
  color: #3a4b41;
  background: #f3f7f4;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  font-weight: 700;
  display: inline-flex;
}
.topnav button:hover {
  background: #e8f1eb;
  transform: translateY(-1px);
}
.topnav .topnav__primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 24px #145d3c33;
}
.topnav .topnav__primary:hover {
  background: #0f5134;
}
.main-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  margin-top: 18px;
  display: grid;
}
.hero {
  border-radius: 28px;
  grid-column: 1/-1;
  grid-template-columns: 0.92fr 1.38fr;
  min-height: 520px;
  display: grid;
  position: relative;
  overflow: hidden;
}
.hero:before {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #0000 42%, #145d3c06 42%);
  position: absolute;
  inset: 0;
}
.hero-copy {
  z-index: 1;
  padding: 54px 42px 44px;
  position: relative;
}
.eyebrow {
  color: var(--green-2);
  letter-spacing: 0.15em;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
}
.eyebrow i {
  background: var(--green-2);
  border-radius: 999px;
  width: 22px;
  height: 2px;
}
.hero h1 {
  letter-spacing: -0.055em;
  color: #19241e;
  margin: 24px 0 22px;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(42px, 4vw, 66px);
  line-height: 0.99;
}
.hero h1 em {
  color: var(--green-2);
  font-style: normal;
}
.hero-copy > p {
  color: #627067;
  max-width: 560px;
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
}
.hero-metrics {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 26px;
  display: grid;
}
.hero-metrics > div {
  background: #f6f9f7;
  border: 1px solid #e5ece7;
  border-radius: 14px;
  grid-template-rows: auto auto;
  grid-template-columns: 28px 1fr;
  padding: 13px 12px;
  display: grid;
}
.hero-metrics span {
  width: 25px;
  height: 25px;
  color: var(--green-2);
  background: #e6f3eb;
  border-radius: 8px;
  grid-row: 1/3;
  align-self: center;
  place-items: center;
  display: grid;
}
.hero-metrics b {
  font-size: 14px;
}
.hero-metrics small {
  color: var(--muted);
  margin-top: 2px;
  font-size: 10px;
}
.hero-actions {
  gap: 10px;
  margin-top: 24px;
  display: flex;
}
.btn {
  border: 0;
  border-radius: 13px;
  min-height: 44px;
  padding: 0 17px;
  font-weight: 800;
  transition: all 0.18s;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  box-shadow: 0 12px 28px #145d3c38;
}
.btn--primary span {
  margin-left: 10px;
}
.btn--ghost {
  color: var(--green);
  background: 0 0;
  border: 1px solid #ccddd2;
}
.btn--soft {
  color: #2f6749;
  background: #edf5f0;
}
.btn--danger-soft {
  color: #a24a3f;
  background: #fff3f1;
}
.btn--large {
  min-width: 210px;
  min-height: 50px;
}
.network-panel {
  background:
    linear-gradient(#f8fbf9f2, #f8fbf9f2),
    url(../assets/pitch.svg) 50% / cover;
  border: 1px solid #dfe9e2;
  border-radius: 24px;
  flex-direction: column;
  min-width: 0;
  margin: 26px;
  padding: 24px;
  display: flex;
}
.network-panel__top {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}
.network-panel__top > div:first-child {
  flex-direction: column;
  gap: 5px;
  display: flex;
}
.network-panel__top span {
  color: #839087;
  letter-spacing: 0.13em;
  font-size: 9px;
  font-weight: 800;
}
.network-panel__top b {
  font-family: Inter, Arial, sans-serif;
  font-size: 18px;
}
.live-pill {
  white-space: nowrap;
  background: #e9f6ee;
  border: 1px solid #d5eadc;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  display: inline-flex;
  color: var(--green) !important;
  font-size: 9px !important;
}
.live-pill i,
.status-chip i {
  background: #37b36f;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 5px #37b36f1f;
}
.network-visual {
  flex: 1;
  grid-template-columns: 145px minmax(160px, 1fr) 145px;
  align-items: center;
  min-height: 290px;
  padding: 24px 4px 18px;
  display: grid;
}
.network-club {
  text-align: center;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: relative;
}
.network-club > b {
  max-width: 140px;
  margin-top: 11px;
  font-size: 13px;
}
.network-club > small {
  color: var(--muted);
  margin-top: 4px;
  font-size: 10px;
}
.club-code {
  color: #75837a;
  background: #fff;
  border: 1px solid #dce6df;
  border-radius: 7px;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 900;
  position: absolute;
  top: -12px;
  right: 2px;
}
.network-path {
  place-items: center;
  min-width: 0;
  height: 180px;
  display: grid;
  position: relative;
}
.network-path svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}
.network-path path {
  fill: none;
  stroke: #7eaa91;
  stroke-width: 2px;
  stroke-dasharray: 7 7;
}
.network-path circle {
  fill: #3e8d61;
  stroke: #fff;
  stroke-width: 3px;
}
.shared-player {
  background: #fff;
  border: 1px solid #dce7df;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 126px;
  height: 126px;
  display: flex;
  position: relative;
  box-shadow: 0 16px 40px #1f52351f;
}
.shared-player:before {
  content: "";
  border-radius: inherit;
  border: 1px dashed #bfd5c6;
  position: absolute;
  inset: 8px;
}
.shared-player span {
  color: var(--green-2);
  font-size: 29px;
}
.shared-player b {
  letter-spacing: 0.08em;
  margin-top: 4px;
  font-size: 9px;
}
.shared-player small {
  color: #809087;
  margin-top: 3px;
  font-size: 9px;
}
.connection-footer {
  background: #fffc;
  border: 1px solid #e1e9e4;
  border-radius: 16px;
  grid-template-columns: 1fr 170px 1fr;
  align-items: center;
  gap: 18px;
  padding: 13px 16px;
  display: grid;
}
.connection-footer > div {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.connection-footer span {
  color: #87958c;
  letter-spacing: 0.11em;
  font-size: 8px;
  font-weight: 800;
}
.connection-footer b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  overflow: hidden;
}
.connection-footer small {
  color: var(--muted);
  font-size: 9px;
}
.connection-footer__right {
  text-align: right;
}
.strength {
  text-align: center;
}
.strength strong {
  color: var(--green-2);
  font-size: 16px;
}
.strength > div {
  background: #e0e9e3;
  border-radius: 999px;
  height: 5px;
  margin-top: 3px;
  overflow: hidden;
}
.strength i {
  border-radius: inherit;
  background: linear-gradient(90deg, #7cc49a, #1b7a4f);
  height: 100%;
  transition: width 0.35s;
  display: block;
}
.club-badge {
  --club-accent: #1f7a50;
  color: #fff;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--club-accent) 84%, white),
    var(--club-accent)
  );
  letter-spacing: -0.05em;
  border-radius: 20px;
  flex: none;
  place-items: center;
  font-family: Inter, Arial, sans-serif;
  font-weight: 900;
  display: inline-grid;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px #ffffff47,
    0 12px 28px #1937251f;
}
.club-badge img {
  object-fit: contain;
  width: 70%;
  height: 70%;
}
.club-badge--sm {
  border-radius: 12px;
  width: 38px;
  height: 38px;
  font-size: 11px;
}
.club-badge--md {
  width: 54px;
  height: 54px;
  font-size: 13px;
}
.club-badge--lg {
  border-radius: 24px;
  width: 82px;
  height: 82px;
  font-size: 17px;
}
.club-badge--empty {
  color: #91a098;
  background: #edf2ef;
  box-shadow: inset 0 0 0 1px #dfe7e2;
}
.game-card {
  border-radius: 24px;
  align-self: start;
  padding: 28px;
}
.section-title {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}
.section-title > div:first-child > span,
.side-card__title > span {
  color: var(--green-2);
  letter-spacing: 0.14em;
  font-size: 9px;
  font-weight: 800;
}
.section-title h2 {
  letter-spacing: -0.035em;
  margin: 6px 0;
  font-family: Inter, Arial, sans-serif;
  font-size: 24px;
}
.section-title p {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
}
.status-chip {
  color: #75857c;
  white-space: nowrap;
  background: #f2f6f3;
  border: 1px solid #e1e9e4;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}
.status-chip i {
  background: #aab7af;
  box-shadow: 0 0 0 4px #aab7af1f;
}
.status-chip--ready {
  color: var(--green);
  background: #ebf7ef;
  border-color: #d9ebdf;
}
.status-chip--ready i {
  background: #39ae6e;
  box-shadow: 0 0 0 4px #39ae6e1f;
}
.mode-switch {
  background: #f3f6f4;
  border-radius: 15px;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 24px 0 18px;
  padding: 6px;
  display: grid;
}
.mode-switch button {
  color: #5d6d63;
  text-align: left;
  background: 0 0;
  border: 1px solid #0000;
  border-radius: 11px;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 8px 13px;
  display: flex;
  position: relative;
}
.mode-switch button > span {
  background: #e7eee9;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 900;
  display: grid;
}
.mode-switch button div {
  flex-direction: column;
  gap: 2px;
  display: flex;
}
.mode-switch button b {
  font-size: 11px;
}
.mode-switch button small {
  color: #89958e;
  font-size: 9px;
}
.mode-switch button em {
  color: #89958e;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  position: absolute;
  top: 8px;
  right: 10px;
}
.mode-switch button.active {
  color: var(--green);
  background: #fff;
  border-color: #dce8e0;
  box-shadow: 0 7px 20px #1f472e0f;
}
.mode-switch button.active > span {
  color: #fff;
  background: var(--green);
}
.players-grid {
  grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  display: grid;
}
.player-card {
  background: #fbfcfb;
  border: 1px solid #e0e8e3;
  border-radius: 18px;
  min-width: 0;
  padding: 16px;
}
.player-card__head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  display: flex;
}
.player-label {
  letter-spacing: 0.1em;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 900;
  display: flex;
}
.player-dot {
  background: #2f8d5a;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 5px #e7f4ec;
}
.score-chip {
  background: #edf4ef;
  border-radius: 9px;
  align-items: center;
  gap: 8px;
  padding: 5px 7px 5px 9px;
  display: flex;
}
.score-chip span {
  color: #809087;
  letter-spacing: 0.08em;
  font-size: 7px;
  font-weight: 800;
}
.score-chip strong {
  color: #fff;
  background: var(--green);
  border-radius: 7px;
  place-items: center;
  min-width: 23px;
  height: 23px;
  font-size: 11px;
  display: grid;
}
.club-search {
  background: #fff;
  border: 1px solid #dce6df;
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  display: flex;
  position: relative;
}
.club-search:focus-within {
  border-color: #83b89b;
  box-shadow: 0 0 0 4px #35875614;
}
.club-search input {
  color: #26342b;
  background: 0 0;
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
}
.club-search input::placeholder {
  color: #a0aca5;
  font-weight: 500;
}
.search-icon {
  color: #8f9b94;
  padding-right: 5px;
}
.search-menu,
.player-menu {
  z-index: 25;
  background: #fff;
  border: 1px solid #dce7df;
  border-radius: 14px;
  max-height: 310px;
  padding: 7px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  overflow: auto;
  box-shadow: 0 20px 45px #142d1f24;
}
.search-menu__caption,
.player-menu > div {
  color: #8a9890;
  letter-spacing: 0.13em;
  padding: 6px 8px 8px;
  font-size: 8px;
  font-weight: 900;
}
.search-menu button {
  text-align: left;
  background: 0 0;
  border: 0;
  border-radius: 10px;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  display: grid;
}
.search-menu button:hover {
  background: #eff6f1;
}
.search-menu button > span {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.search-menu button b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  overflow: hidden;
}
.search-menu button small {
  color: #7f8e85;
  font-size: 8px;
}
.search-menu button em {
  color: var(--green-2);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}
.search-empty {
  text-align: center;
  color: #849087;
  padding: 15px;
  font-size: 10px;
}
.club-summary {
  grid-template-columns: 1.25fr 0.8fr 1fr;
  gap: 8px;
  margin-top: 12px;
  display: grid;
}
.club-summary > div {
  background: #f2f6f3;
  border-radius: 10px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  display: flex;
}
.club-summary span,
.role-card span {
  color: #88968e;
  letter-spacing: 0.1em;
  font-size: 7px;
  font-weight: 900;
}
.club-summary b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 9px;
  overflow: hidden;
}
.role-card {
  background: linear-gradient(135deg, #edf6f0, #f7faf8);
  border: 1px solid #e1ebe4;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 10px 11px;
  display: flex;
}
.role-card > div:first-child {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.role-card strong {
  font-size: 10px;
}
.role-code {
  width: 34px;
  height: 28px;
  color: var(--green);
  background: #fff;
  border: 1px solid #d8e5dc;
  border-radius: 8px;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}
.versus {
  flex-direction: column;
  align-self: center;
  align-items: center;
  gap: 5px;
  display: flex;
}
.versus span {
  color: #fff;
  background: linear-gradient(135deg, #1f7a50, #124f34);
  border-radius: 17px;
  place-items: center;
  width: 52px;
  height: 52px;
  font-family: Inter, Arial, sans-serif;
  font-weight: 900;
  display: grid;
  box-shadow: 0 14px 28px #145d3c38;
}
.versus small {
  color: #8e9b93;
  letter-spacing: 0.1em;
  font-size: 7px;
  font-weight: 900;
}
.game-actions {
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  display: flex;
}
.side-stack {
  flex-direction: column;
  gap: 18px;
  display: flex;
}
.side-card {
  border-radius: 22px;
  padding: 22px;
}
.side-card__title h3 {
  letter-spacing: -0.03em;
  margin: 5px 0 0;
  font-family: Inter, Arial, sans-serif;
  font-size: 17px;
}
.steps {
  flex-direction: column;
  margin-top: 17px;
  display: flex;
}
.step {
  opacity: 0.55;
  grid-template-columns: 34px 1fr 20px;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  display: grid;
  position: relative;
}
.step:not(:last-child):after {
  content: "";
  background: #dce7df;
  width: 1px;
  height: 18px;
  position: absolute;
  top: 43px;
  left: 16px;
}
.step > span {
  color: #7f8c84;
  background: #edf2ef;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}
.step > div {
  flex-direction: column;
  gap: 3px;
  display: flex;
}
.step b {
  font-size: 10px;
}
.step small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}
.step > i {
  color: #8d9a92;
  font-size: 11px;
  font-style: normal;
}
.step.active {
  opacity: 1;
}
.step.active > span {
  color: #fff;
  background: var(--green);
  box-shadow: 0 8px 18px #145d3c2b;
}
.step.active > i {
  color: #2e9a61;
}
.data-grid {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 17px;
  display: grid;
}
.data-grid > div {
  background: #f5f8f6;
  border: 1px solid #e6ece8;
  border-radius: 12px;
  grid-template-rows: auto auto;
  grid-template-columns: 28px 1fr;
  padding: 12px;
  display: grid;
}
.data-grid span {
  width: 25px;
  height: 25px;
  color: var(--green-2);
  background: #e5f2ea;
  border-radius: 8px;
  grid-row: 1/3;
  place-items: center;
  display: grid;
}
.data-grid strong {
  font-size: 14px;
}
.data-grid small {
  color: var(--muted);
  font-size: 8px;
}
.data-card > p {
  color: #839087;
  margin: 13px 0 0;
  font-size: 9px;
  line-height: 1.55;
}
.history-list {
  margin-top: 15px;
}
.history-item {
  border-bottom: 1px solid #edf1ee;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  display: grid;
}
.history-item > span {
  color: #fff;
  background: linear-gradient(135deg, #2d8357, #175a3b);
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}
.history-item > div {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.history-item b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 9px;
  overflow: hidden;
}
.history-item small {
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 7px;
  overflow: hidden;
}
.history-item em {
  color: #728078;
  font-size: 8px;
  font-style: normal;
}
/* V196 — "Bu maçta tüm denemeler" paneli: doğru/yanlış rozet renkleri */
.attempt-item.attempt-wrong > span {
  background: linear-gradient(135deg, #c0392b, #8e2418);
}
.attempt-item.attempt-wrong small {
  color: #b23a2b;
}
.attempt-item.attempt-correct > span {
  background: linear-gradient(135deg, #2d8357, #175a3b);
}
.empty-state {
  text-align: center;
  color: #8c9891;
  flex-direction: column;
  align-items: center;
  padding: 22px 8px 8px;
  display: flex;
}
.empty-state > span {
  background: #f0f5f2;
  border-radius: 50%;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 22px;
  display: grid;
}
.empty-state b {
  color: #607067;
  margin-top: 9px;
  font-size: 10px;
}
.empty-state small {
  margin-top: 4px;
  font-size: 8px;
}
.footer {
  border-radius: 20px;
  grid-column: 1/-1;
  grid-template-columns: 1fr 1.5fr auto;
  align-items: center;
  gap: 20px;
  min-height: 80px;
  margin-top: 18px;
  padding: 16px 20px;
  display: grid;
}
.brand--footer img {
  width: 34px;
  height: 34px;
}
.brand--footer strong {
  font-size: 14px;
}
.footer p {
  text-align: center;
  color: #76847c;
  margin: 0;
  font-size: 9px;
}
.footer > span {
  color: #8a9690;
  font-size: 8px;
  font-weight: 700;
}
.modal-backdrop {
  z-index: 100;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #111e168a;
  place-items: center;
  padding: 18px;
  display: grid;
  position: fixed;
  inset: 0;
}
.modal-card {
  background: #fff;
  border: 1px solid #ffffffb3;
  border-radius: 24px;
  width: min(520px, 100%);
  padding: 24px;
  box-shadow: 0 30px 90px #0a19104d;
}
.modal-card__head {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.modal-card__head span {
  color: var(--green-2);
  letter-spacing: 0.14em;
  font-size: 8px;
  font-weight: 900;
}
.modal-card__head h3 {
  margin: 5px 0 0;
  font-family: Inter, Arial, sans-serif;
  font-size: 24px;
}
.modal-card__head button,
.round-close {
  color: #66766c;
  background: #f0f4f1;
  border: 0;
  border-radius: 11px;
  width: 36px;
  height: 36px;
  font-size: 22px;
}
.guide-list {
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
  display: flex;
}
.guide-list > div {
  background: #f8faf9;
  border: 1px solid #e4ebe6;
  border-radius: 14px;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: grid;
}
.guide-list > div > span {
  background: var(--green);
  color: #fff;
  border-radius: 11px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-weight: 900;
  display: grid;
}
.guide-list b {
  font-size: 11px;
}
.guide-list p {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: 9px;
  line-height: 1.5;
}
.modal-button {
  width: 100%;
  margin-top: 18px;
}
.settings-list {
  border: 1px solid #e3ebe5;
  border-radius: 14px;
  margin-top: 20px;
  overflow: hidden;
}
.settings-list > div {
  border-bottom: 1px solid #edf1ee;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  font-size: 10px;
  display: flex;
}
.settings-list > div:last-child {
  border-bottom: 0;
}
.settings-list span {
  color: #748178;
}
.settings-list .muted {
  color: #8b9790;
}
.online-note {
  text-align: center;
  padding: 20px 10px 2px;
}
.online-note > span {
  width: 58px;
  height: 58px;
  color: var(--green);
  background: #e8f4ec;
  border-radius: 18px;
  place-items: center;
  margin: 0 auto;
  font-size: 26px;
  display: grid;
}
.online-note h4 {
  margin: 14px 0 7px;
}
.online-note p {
  color: var(--muted);
  max-width: 380px;
  margin: 0 auto;
  font-size: 10px;
  line-height: 1.65;
}
.round-backdrop {
  background: #0d1c12ad;
}
.round-modal {
  background: #f8fbf9;
  border-radius: 28px;
  width: min(900px, 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 35px 100px #00000052;
}
.round-close {
  z-index: 4;
  position: absolute;
  top: 14px;
  right: 14px;
}
.round-scoreboard {
  color: #fff;
  background:
    linear-gradient(90deg, #145d3cf7, #196f48f0),
    url(../assets/stadium.svg) 50% / cover;
  grid-template-columns: 1fr 120px 1fr;
  align-items: center;
  min-height: 180px;
  padding: 28px 62px;
  display: grid;
}
.round-team {
  align-items: center;
  gap: 15px;
  display: flex;
}
.round-team--right {
  text-align: right;
  justify-content: flex-end;
}
.round-team > div:not(.club-badge) {
  flex-direction: column;
  gap: 4px;
  display: flex;
}
.round-team b {
  font-family: Inter, Arial, sans-serif;
  font-size: 15px;
}
.round-team span {
  color: #ffffffb8;
  font-size: 9px;
}
.timer-ring {
  background: #ffffff1c;
  border: 2px solid #ffffff5c;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 96px;
  margin: auto;
  display: flex;
  box-shadow: inset 0 0 0 7px #ffffff12;
}
.timer-ring strong {
  font-size: 34px;
  line-height: 1;
}
.timer-ring span {
  letter-spacing: 0.13em;
  opacity: 0.75;
  margin-top: 5px;
  font-size: 8px;
  font-weight: 900;
}
.timer-ring--danger {
  background: #b73c3059;
  border-color: #ffcbc6a6;
}
.round-content {
  text-align: center;
  padding: 30px;
}
.round-kicker {
  color: var(--green-2);
  letter-spacing: 0.15em;
  font-size: 9px;
  font-weight: 900;
}
.round-content h3 {
  margin: 8px 0 18px;
  font-family: Inter, Arial, sans-serif;
  font-size: 22px;
}
.responder-tabs {
  background: #edf3ef;
  border-radius: 12px;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 16px;
  padding: 5px;
  display: inline-grid;
}
.responder-tabs button {
  color: #738178;
  background: 0 0;
  border: 0;
  border-radius: 9px;
  padding: 8px 18px;
  font-size: 10px;
  font-weight: 800;
}
.responder-tabs button.active {
  color: var(--green);
  background: #fff;
  box-shadow: 0 6px 16px #18372314;
}
.answer-box {
  gap: 8px;
  width: min(620px, 100%);
  margin: 0 auto;
  display: flex;
  position: relative;
}
.answer-box input {
  color: #26352c;
  border: 1px solid #d7e3db;
  border-radius: 13px;
  outline: 0;
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 15px;
  font-weight: 700;
}
.answer-box input:focus {
  border-color: #77ad8d;
  box-shadow: 0 0 0 4px #28804f17;
}
.answer-box > button {
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  border: 0;
  border-radius: 13px;
  width: 150px;
  font-weight: 800;
}
.answer-box > button:disabled,
.answer-box input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.player-menu {
  text-align: left;
  top: 58px;
}
.player-menu button {
  text-align: left;
  background: 0 0;
  border: 0;
  border-radius: 9px;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px;
  display: grid;
}
.player-menu button:hover {
  background: #eef5f0;
}
.player-menu button span {
  width: 32px;
  height: 32px;
  color: var(--green);
  background: #e3f0e8;
  border-radius: 9px;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}
.player-menu button b {
  font-size: 10px;
}
.feedback {
  color: #647169;
  background: #edf3ef;
  border-radius: 11px;
  width: min(620px, 100%);
  margin: 15px auto 0;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 700;
}
.feedback--success {
  color: #1d7548;
  background: #e6f5eb;
}
.feedback--error {
  color: #aa4b3e;
  background: #fff0ee;
}
.toast {
  z-index: 200;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  background: #183326;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 10px;
  font-weight: 800;
  transition: all 0.2s;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  box-shadow: 0 14px 36px #0a1e1240;
}
.toast--show {
  opacity: 1;
  transform: translate(-50%);
}
@media (width<=1180px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    padding-bottom: 18px;
  }
  .network-panel {
    margin-top: 0;
  }
  .main-grid {
    grid-template-columns: 1fr;
  }
  .side-stack {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
  }
  .footer {
    grid-template-columns: 1fr auto;
  }
  .footer p {
    display: none;
  }
}
@media (width<=860px) {
  .app-shell {
    width: min(100% - 20px, 760px);
    margin-top: 10px;
  }
  .topbar {
    border-radius: 16px;
    top: 8px;
  }
  .topnav button span {
    display: none;
  }
  .topnav button {
    justify-content: center;
    min-width: 42px;
    padding: 0 11px;
  }
  .hero-copy {
    padding: 38px 24px 18px;
  }
  .hero h1 {
    font-size: clamp(39px, 10vw, 58px);
  }
  .network-panel {
    margin: 14px;
    padding: 18px;
  }
  .network-visual {
    grid-template-columns: 105px minmax(120px, 1fr) 105px;
  }
  .network-club > b {
    font-size: 10px;
  }
  .network-path {
    height: 150px;
  }
  .shared-player {
    width: 100px;
    height: 100px;
  }
  .connection-footer {
    text-align: center;
    grid-template-columns: 1fr;
  }
  .connection-footer__right {
    text-align: center;
  }
  .players-grid {
    grid-template-columns: 1fr;
  }
  .versus {
    flex-direction: row;
    justify-content: center;
  }
  .versus span {
    width: 44px;
    height: 44px;
  }
  .side-stack {
    grid-template-columns: 1fr;
  }
  .round-scoreboard {
    grid-template-columns: 1fr 85px 1fr;
    padding: 24px 18px;
  }
  .round-team {
    text-align: center;
    flex-direction: column;
    gap: 8px;
  }
  .round-team--right {
    text-align: center;
    flex-direction: column-reverse;
  }
  .round-team b {
    font-size: 11px;
  }
  .club-badge--lg {
    border-radius: 18px;
    width: 64px;
    height: 64px;
  }
  .timer-ring {
    width: 72px;
    height: 72px;
  }
  .timer-ring strong {
    font-size: 25px;
  }
}
@media (width<=560px) {
  .brand span {
    display: none;
  }
  .brand strong {
    font-size: 15px;
  }
  .hero-metrics {
    grid-template-columns: 1fr;
  }
  .hero-actions {
    flex-direction: column;
  }
  .network-panel__top b {
    font-size: 14px;
  }
  .network-visual {
    grid-template-columns: 84px 1fr 84px;
    min-height: 230px;
    padding-inline: 0;
  }
  .club-badge--lg {
    border-radius: 16px;
    width: 56px;
    height: 56px;
    font-size: 12px;
  }
  .network-club > small {
    display: none;
  }
  .network-club > b {
    font-size: 9px;
  }
  .club-code {
    display: none;
  }
  .shared-player {
    width: 82px;
    height: 82px;
  }
  .shared-player span {
    font-size: 21px;
  }
  .shared-player b,
  .shared-player small {
    font-size: 7px;
  }
  .game-card {
    padding: 20px 14px;
  }
  .section-title {
    flex-direction: column;
  }
  .mode-switch,
  .club-summary {
    grid-template-columns: 1fr;
  }
  .game-actions {
    flex-direction: column;
  }
  .game-actions .btn {
    width: 100%;
  }
  .footer {
    text-align: center;
    grid-template-columns: 1fr;
  }
  .footer .brand {
    justify-content: center;
  }
  .footer > span {
    text-align: center;
  }
  .round-content {
    padding: 24px 14px;
  }
  .round-content h3 {
    font-size: 17px;
  }
  .round-scoreboard {
    padding-inline: 10px;
  }
  .round-team b {
    max-width: 90px;
  }
  .answer-box {
    flex-direction: column;
  }
  .answer-box > button {
    width: 100%;
    height: 46px;
  }
  .player-menu {
    top: 55px;
  }
}
.round-arena {
  background: #f8fbf9;
  border: 1px solid #dce8e0;
  border-radius: 22px;
  margin-top: 24px;
  overflow: hidden;
  box-shadow: 0 18px 44px #18422914;
}
.round-arena .round-scoreboard {
  grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1fr);
  min-height: 154px;
  padding: 24px 34px;
}
.round-arena .round-content {
  text-align: left;
  padding: 28px 30px 30px;
}
.round-heading-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 22px;
  display: flex;
}
.round-heading-row h3 {
  margin: 7px 0 0;
  font-size: 24px;
  line-height: 1.2;
}
.round-back-button {
  color: #4f6758;
  background: #fff;
  border: 1px solid #d4e2d9;
  border-radius: 11px;
  flex: none;
  min-height: 40px;
  padding: 0 13px;
  font-size: 10px;
  font-weight: 800;
}
.round-back-button:hover {
  color: var(--green);
  background: #eff6f1;
}
.round-play-grid {
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  display: grid;
}
.round-player-choice {
  background: #fff;
  border: 1px solid #e0e9e3;
  border-radius: 16px;
  padding: 15px;
}
.round-player-choice > span,
.answer-area > label {
  color: #748279;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 9px;
  font-size: 9px;
  font-weight: 900;
  display: block;
}
.round-player-choice .responder-tabs {
  width: 100%;
  margin: 0;
  display: grid;
}
.round-player-choice .responder-tabs button {
  min-height: 42px;
  padding: 8px 10px;
}
.answer-area {
  min-width: 0;
}
.answer-box {
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 10px;
  width: 100%;
  margin: 0;
  display: grid;
}
.answer-box input {
  background: #fff;
  border-radius: 15px;
  width: 100%;
  height: 62px;
  padding: 0 20px;
  font-size: 16px;
}
.answer-box > button {
  border-radius: 15px;
  width: 100%;
  min-height: 62px;
  font-size: 13px;
}
.player-suggestions {
  background: #fff;
  border: 1px solid #dce7df;
  border-radius: 15px;
  margin-top: 10px;
  padding: 10px;
  box-shadow: 0 13px 30px #142d1f14;
}
.player-suggestions__label {
  color: #829087;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 1px 3px 8px;
  font-size: 8px;
  font-weight: 900;
}
.player-suggestions__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}
.player-suggestions button {
  color: #24342a;
  text-align: left;
  background: #f5f8f6;
  border: 0;
  border-radius: 11px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px;
  display: grid;
}
.player-suggestions button:hover {
  background: #eaf4ed;
}
.player-suggestions .player-suggestion-flag {
  width: 34px;
  height: 34px;
  color: var(--green);
  background: #e2f0e7;
  border-radius: 9px;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
  display: grid;
}
.player-suggestion-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.player-suggestions button b {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
}
.player-suggestions button small {
  color: #75837b;
  line-height: 1.35;
  font-size: 9px;
  white-space: normal;
}
.round-arena .feedback {
  border-radius: 12px;
  width: 100%;
  margin: 16px 0 0;
  padding: 13px 15px;
  font-size: 11px;
}
@media (width<=860px) {
  .round-arena .round-scoreboard {
    padding: 22px 16px;
  }
  .round-arena .round-content {
    padding: 24px 18px;
  }
  .round-play-grid {
    grid-template-columns: 1fr;
  }
  .round-player-choice {
    padding: 11px;
  }
  .round-player-choice .responder-tabs {
    grid-template-columns: 1fr 1fr;
  }
}
@media (width<=560px) {
  .round-arena {
    border-radius: 18px;
    margin-top: 18px;
  }
  .round-arena .round-content {
    padding: 20px 12px;
  }
  .round-heading-row {
    flex-direction: column;
    gap: 12px;
  }
  .round-heading-row h3 {
    font-size: 18px;
  }
  .round-back-button {
    width: 100%;
  }
  .answer-box {
    grid-template-columns: 1fr;
  }
  .answer-box input {
    height: 56px;
    font-size: 15px;
  }
  .answer-box > button {
    min-height: 52px;
  }
  .player-suggestions__grid {
    grid-template-columns: 1fr;
  }
}
.mode-switch--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.solo-settings,
.online-setup,
.online-room-bar,
.opponent-strip {
  background: #f8fbf9;
  border: 1px solid #dbe7df;
  border-radius: 16px;
  margin-top: 14px;
}
.solo-settings {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  display: flex;
}
.solo-settings span,
.online-setup__status b {
  color: var(--green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 900;
  display: block;
}
.solo-settings b,
.online-setup__status small {
  color: #76847b;
  margin-top: 3px;
  font-size: 9px;
  display: block;
}
.difficulty-tabs {
  gap: 7px;
  display: flex;
}
.difficulty-tabs button {
  color: #526158;
  background: #fff;
  border: 1px solid #d4e2d8;
  border-radius: 10px;
  min-width: 76px;
  height: 36px;
  font-size: 10px;
  font-weight: 850;
}
.difficulty-tabs button.active {
  color: #fff;
  border-color: var(--green);
  background: linear-gradient(135deg, #13805a, #07583d);
  box-shadow: 0 7px 16px #07583d29;
}
.online-setup {
  padding: 16px;
}
.online-setup__status {
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  display: flex;
}
.online-setup__status > span {
  color: #fff;
  background: var(--green);
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 18px;
  display: grid;
}
.online-form {
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 9px;
  display: grid;
}
.online-form input {
  background: #fff;
  border: 1px solid #d5e2d9;
  border-radius: 11px;
  outline: none;
  height: 44px;
  padding: 0 13px;
}
.online-form input:focus {
  border-color: #4a9677;
  box-shadow: 0 0 0 3px #4a96771c;
}
.online-divider {
  color: #8b9890;
  text-transform: uppercase;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 8px;
  font-weight: 900;
  display: flex;
}
.online-divider:before,
.online-divider:after {
  content: "";
  background: #e0e8e3;
  flex: 1;
  height: 1px;
}
.online-room-bar {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  display: flex;
}
.online-room-bar > div:first-child span {
  color: #7a897f;
  letter-spacing: 0.12em;
  font-size: 7px;
  font-weight: 900;
  display: block;
}
.online-room-bar > div:first-child strong {
  letter-spacing: 0.16em;
  color: var(--green);
  font-size: 20px;
}
.online-room-bar > div:first-child button,
.online-exit {
  color: #3d765f;
  background: 0 0;
  border: 0;
  margin-left: 8px;
  font-size: 9px;
  font-weight: 850;
}
.online-members {
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  display: flex;
}
.online-members span {
  color: #5d6b62;
  background: #fff;
  border: 1px solid #dbe5df;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 9px;
  font-weight: 800;
}
.online-members span i {
  background: #b6c0ba;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  display: inline-block;
}
.online-members span.ready {
  color: #0c6b48;
  background: #eaf6ee;
  border-color: #b9dbc8;
}
.online-members span.ready i {
  background: #1b9a62;
}
.opponent-strip {
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 13px;
  display: flex;
}
.opponent-strip > span {
  background: #e3f0e8;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 17px;
  display: grid;
}
.opponent-strip b {
  font-size: 10px;
  display: block;
}
.opponent-strip small {
  color: #75827a;
  margin-top: 2px;
  font-size: 8px;
  display: block;
}
.opponent-strip--online {
  background: #edf6f1;
}
.solo-player-chip {
  color: var(--green);
  text-align: center;
  background: #eaf4ed;
  border-radius: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 900;
}
@media (width<=860px) {
  .mode-switch--three {
    grid-template-columns: 1fr;
  }
  .solo-settings,
  .online-room-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .online-form {
    grid-template-columns: 1fr;
  }
  .difficulty-tabs {
    width: 100%;
  }
  .difficulty-tabs button {
    flex: 1;
  }
}

/* Kariyer Köprüsü v2: milli takım bayrakları ve maç ayarları */
.club-badge--flag {
  color: #14251b;
  background: linear-gradient(145deg, #ffffff, #edf4ef);
  letter-spacing: 0;
  box-shadow:
    inset 0 0 0 1px #dbe6df,
    0 12px 28px #19372514;
}
.club-badge--flag b {
  line-height: 1;
}
.club-badge--flag.club-badge--sm b {
  font-size: 23px;
}
.club-badge--flag.club-badge--md b {
  font-size: 31px;
}
.club-badge--flag.club-badge--lg b {
  font-size: 43px;
}
.match-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.match-settings__group {
  background: #f8fbf9;
  border: 1px solid #dbe7df;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.match-settings__group span {
  color: var(--green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 900;
  display: block;
}
.match-settings__group b {
  color: #76847b;
  margin-top: 3px;
  font-size: 9px;
  display: block;
}
.setting-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.setting-tabs button {
  min-width: 48px;
  height: 34px;
  color: #526158;
  background: #fff;
  border: 1px solid #d4e2d8;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 850;
}
.setting-tabs button.active {
  color: #fff;
  border-color: var(--green);
  background: linear-gradient(135deg, #13805a, #07583d);
  box-shadow: 0 7px 16px #07583d29;
}
.setting-tabs button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
@media (width <= 980px) {
  .match-settings {
    grid-template-columns: 1fr;
  }
}
@media (width <= 560px) {
  .match-settings__group {
    align-items: stretch;
    flex-direction: column;
  }
  .setting-tabs {
    justify-content: stretch;
  }
  .setting-tabs button {
    flex: 1;
  }
}


/* Kariyer Köprüsü v4: Windows'ta harf olarak görünen bayrak emojileri yerine gerçek görseller */
.country-flag-image,
.club-flag-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: none;
}
.country-flag-image img,
.club-flag-image img {
  display: block;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(22, 48, 33, 0.14), 0 2px 5px rgba(22, 48, 33, 0.12);
}
.country-flag-fallback {
  display: none;
  align-items: center;
  justify-content: center;
}
.club-flag-image {
  width: 76%;
  height: 76%;
}
.club-flag-image img {
  width: 100%;
  height: auto;
  max-height: 100%;
}
.player-suggestion-flag .country-flag-image {
  width: 28px;
  height: 22px;
}
.player-suggestion-flag .country-flag-image img {
  width: 28px;
  height: 21px;
}
.club-badge--flag.club-badge--sm .club-flag-image img {
  border-radius: 3px;
}


/* V5: Daha profesyonel aktif oyun alanı */
.round-arena .round-scoreboard {
  background:
    linear-gradient(90deg, rgba(5,20,12,.62), rgba(5,20,12,.48)),
    linear-gradient(105deg, var(--left-team-accent, #145d3c) 0%, #145d3c 42%, #196f48 58%, var(--right-team-accent, #196f48) 100%),
    url(../assets/stadium.svg) 50% / cover;
  position: relative;
  isolation: isolate;
}
.round-arena .round-scoreboard:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--left-team-accent, #145d3c) 0 45%, rgba(255,255,255,.72) 45% 55%, var(--right-team-accent, #196f48) 55% 100%);
}
.round-arena .round-team {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 17px;
  background: rgba(9,27,17,.28);
  backdrop-filter: blur(6px);
}
.round-arena .round-team b { font-size: 16px; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.round-arena .round-team span { color: rgba(255,255,255,.82); }
.round-arena .timer-ring { background: rgba(7,29,17,.42); box-shadow: inset 0 0 0 7px rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.2); }
.round-match-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: -4px 0 18px;
  padding: 10px 12px;
  border: 1px solid #dce7df;
  border-radius: 15px;
  background: linear-gradient(180deg,#fff,#f5f9f6);
}
.round-score-player { display:flex; align-items:center; gap:10px; }
.round-score-player--right { justify-content:flex-end; }
.round-score-player span { color:#6f7f75; letter-spacing:.1em; font-size:9px; font-weight:900; }
.round-score-player strong { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#fff; background:#176f48; font-size:17px; box-shadow:0 7px 18px rgba(23,111,72,.2); }
.round-target { text-align:center; padding:0 16px; border-inline:1px solid #e1e9e4; }
.round-target b { display:block; color:#1d5137; font-size:10px; letter-spacing:.08em; }
.round-target small { display:block; color:#88958d; margin-top:2px; font-size:8px; }
.round-play-grid { padding: 16px; border:1px solid #e0e9e3; border-radius:18px; background:#fff; box-shadow:0 12px 30px rgba(20,45,31,.055); }
.round-player-choice { background:linear-gradient(180deg,#f8fbf9,#f2f7f4); }
.answer-box input { border:1px solid #d8e5dc; box-shadow:inset 0 1px 0 #fff; }
.answer-box input:focus { border-color:#4b9a70; box-shadow:0 0 0 4px rgba(50,133,85,.11); }
.answer-box > button { box-shadow:0 10px 22px rgba(23,111,72,.18); }
.round-arena .feedback { font-weight:700; }

/* V5: Maç sonu penceresi */
.match-result-modal { text-align:center; padding:18px 8px 4px; }
.match-result-trophy { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 12px; border-radius:20px; color:#fff; background:linear-gradient(145deg,#1c8a58,#115d3b); font-size:30px; font-weight:950; box-shadow:0 16px 34px rgba(17,93,59,.25); }
.match-result-modal > strong { display:block; color:#173426; font-size:20px; }
.match-result-score { display:flex; justify-content:center; align-items:center; gap:16px; margin:15px 0 10px; }
.match-result-score span { display:grid; place-items:center; min-width:58px; height:58px; border-radius:16px; color:#fff; background:#176f48; font-size:27px; font-weight:950; }
.match-result-score i { color:#93a299; font-style:normal; font-weight:900; }
.match-result-modal p { color:#67786e; max-width:390px; margin:0 auto; line-height:1.6; font-size:11px; }
.match-result-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.match-result-actions .btn { width:100%; }
@media (max-width:700px) {
  .round-match-meta { grid-template-columns:1fr auto 1fr; }
  .round-target { padding:0 8px; }
  .round-target small { display:none; }
  .round-arena .round-team { padding:10px; }
  .match-result-actions { grid-template-columns:1fr; }
}


/* Kariyer Köprüsü V6 — maç akışı ve profesyonel oyun alanı */
.club-badge {
  --club-secondary: #b9dcc6;
  --club-ink: #17231c;
  color: var(--club-ink);
  background:
    linear-gradient(135deg, var(--club-accent) 0 49%, var(--club-secondary) 51% 100%);
  border: 1px solid #ffffffb8;
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px #0000000d, 0 14px 30px #173b2724;
}
.club-badge:not(.club-badge--flag)::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid #ffffff66;
  border-radius: inherit;
  z-index: -1;
}
.club-badge:not(.club-badge--flag) b {
  color: #15231a;
  background: #fffffff0;
  border: 1px solid #ffffff;
  border-radius: 8px;
  padding: 4px 6px;
  letter-spacing: .02em;
  line-height: 1;
  text-shadow: none;
  box-shadow: 0 4px 12px #0000001c;
}
.club-badge--sm:not(.club-badge--flag) b { padding: 3px 4px; font-size: 8px; }
.club-badge--lg:not(.club-badge--flag) b { padding: 6px 8px; font-size: 14px; }

.game-card {
  background:
    radial-gradient(circle at 8% 0%, #e8f8ee 0, transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
  border: 1px solid #d9e8de;
  box-shadow: 0 24px 65px #153b2517;
  padding: 30px;
  overflow: visible;
}
.game-card .section-title h2 { font-size: 28px; }
.game-card .section-title p { max-width: 620px; font-size: 13px; line-height: 1.55; }
.players-grid {
  position: relative;
  gap: 18px;
  margin-top: 4px;
  padding: 18px;
  background: linear-gradient(135deg, #edf7f0, #f9fcfa 62%, #eef6f1);
  border: 1px solid #dbe9e0;
  border-radius: 24px;
}
.player-card {
  background: #ffffffed;
  border-color: #d9e6dd;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 14px 32px #183b2710;
}
.player-card:hover { transform: translateY(-1px); box-shadow: 0 18px 38px #183b2718; }
.versus span {
  width: 58px;
  height: 58px;
  border: 4px solid #ffffff;
  background: linear-gradient(145deg, #1c7e50, #0d4f31);
  box-shadow: 0 16px 34px #145d3c42;
}
.game-actions {
  background: #f2f8f4;
  border: 1px solid #dce9e1;
  border-radius: 18px;
  margin-top: 16px;
  padding: 12px;
}
.game-actions .btn { min-height: 48px; }
.game-actions .btn--primary { min-width: 210px; box-shadow: 0 12px 25px #145d3c30; }
.game-actions .btn:disabled { opacity: .45; cursor: not-allowed; }

.round-arena {
  background:
    radial-gradient(circle at 50% 0%, #edf9f1, transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f5faf7 100%);
  border: 1px solid #cfe2d6;
  border-radius: 28px;
  margin-top: 26px;
  box-shadow: 0 30px 75px #14392320;
  animation: arenaEnter .42s cubic-bezier(.2,.8,.2,1);
}
@keyframes arenaEnter { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: none; } }
.round-arena .round-scoreboard {
  position: relative;
  min-height: 176px;
  padding: 28px 42px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--left-team-accent) 88%, #10271a) 0%,
      color-mix(in srgb, var(--left-team-secondary) 84%, #10271a) 39%,
      #153d28 49%, #153d28 51%,
      color-mix(in srgb, var(--right-team-secondary) 84%, #10271a) 61%,
      color-mix(in srgb, var(--right-team-accent) 88%, #10271a) 100%),
    url(../assets/stadium.svg) center/cover;
  isolation: isolate;
}
.round-arena .round-scoreboard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #06170b22, #07140c60);
  pointer-events: none;
  z-index: -1;
}
.round-team { min-width: 0; }
.round-team > div:not(.club-badge) { min-width: 0; }
.round-team b { font-size: 17px; text-shadow: 0 2px 10px #0008; }
.round-team span { font-size: 10px; color: #fffde0; text-shadow: 0 2px 8px #0008; }
.timer-ring {
  width: 104px;
  height: 104px;
  backdrop-filter: blur(8px);
  background: #102f20a8;
  border: 2px solid #ffffff8c;
  box-shadow: inset 0 0 0 7px #ffffff12, 0 12px 30px #06180e42;
}
.timer-ring--countdown {
  background: #ffffffed;
  border-color: #ffffff;
  color: #145d3c;
  animation: countdownPulse 1s ease-in-out infinite;
}
@keyframes countdownPulse { 50% { transform: scale(1.06); box-shadow: 0 0 0 12px #ffffff22, 0 15px 35px #06180e52; } }
.round-arena .round-content { padding: 32px 34px 34px; }
.round-heading-row { margin-bottom: 20px; }
.round-heading-row h3 { font-size: 27px; letter-spacing: -.035em; }
.round-play-grid {
  grid-template-columns: 205px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  background: #f1f7f3;
  border: 1px solid #dbe8df;
  border-radius: 20px;
}
.round-player-choice {
  border-radius: 17px;
  box-shadow: 0 8px 22px #153b2510;
}
.answer-area {
  background: #fff;
  border: 1px solid #dbe7df;
  border-radius: 17px;
  padding: 15px;
  box-shadow: 0 8px 22px #153b2510;
}
.answer-box { grid-template-columns: minmax(0,1fr) 168px 102px; }
.answer-box input {
  height: 66px;
  border: 1px solid #cfe0d5;
  box-shadow: inset 0 1px 0 #fff;
}
.answer-box input:focus { border-color: #3e9664; box-shadow: 0 0 0 5px #28804f16, inset 0 1px 0 #fff; }
.answer-box > button { min-height: 66px; }
.answer-box > button:not(.answer-pass-button) { box-shadow: 0 12px 24px #145d3c2d; }
.answer-box .answer-pass-button {
  color: #6b4e25;
  background: linear-gradient(180deg, #fff9e9, #fff1c8);
  border: 1px solid #efd99c;
  box-shadow: none;
}
.answer-box .answer-pass-button:hover:not(:disabled) { background: #ffe9ae; }
.round-pass-status {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 13px;
}
.round-pass-status span {
  color: #276242;
  background: #e8f4ec;
  border: 1px solid #d3e7da;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 9px;
  font-weight: 800;
}
.round-pass-status span.passed { color: #8a6228; background: #fff5dc; border-color: #f1ddaa; }
.round-arena .feedback { text-align: center; min-height: 44px; display: grid; place-items: center; }
.player-suggestions { max-height: 245px; overflow: auto; }

.round-result-modal { text-align: center; padding: 4px 8px 8px; }
.round-result-icon {
  width: 72px;
  height: 72px;
  margin: 4px auto 14px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 900;
  animation: resultPop .45s cubic-bezier(.18,.85,.24,1.2);
}
.round-result-icon.winner { color: #fff; background: linear-gradient(145deg,#32a467,#126b40); box-shadow: 0 18px 38px #176c4038; }
.round-result-icon.neutral { color: #8a6228; background: #fff1c9; }
@keyframes resultPop { from { opacity:0; transform:scale(.5) rotate(-8deg); } to { opacity:1; transform:none; } }
.round-result-modal > strong { font-size: 21px; }
.round-result-score {
  display: grid;
  grid-template-columns: 1fr 34px 1fr;
  align-items: center;
  gap: 8px;
  margin: 20px auto 14px;
  max-width: 360px;
}
.round-result-score span {
  background: #f0f6f2;
  border: 1px solid #dbe7df;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 3px;
}
.round-result-score small { color:#74847a; font-size:8px; font-weight:900; letter-spacing:.09em; }
.round-result-score b { font-size: 30px; }
.round-result-score i { color:#93a198; font-style:normal; font-weight:900; }
.round-result-modal p { color:#68766d; }
.round-continue-button { min-height: 52px; font-size: 13px; }

@media (max-width: 860px) {
  .players-grid { padding: 12px; }
  .round-play-grid { grid-template-columns: 1fr; padding: 12px; }
  .answer-box { grid-template-columns: 1fr; }
  .answer-box > button { min-height: 50px; }
  .round-arena .round-scoreboard { padding: 20px 14px; min-height: 152px; }
  .round-team b { font-size: 13px; }
  .round-team span { display: none; }
}


/* Kariyer Köprüsü V7 — takım kimliği, kurulum merkezi ve online tur hazırlığı */
.club-badge:not(.club-badge--flag) {
  overflow: hidden;
  background:
    linear-gradient(112deg, var(--club-accent) 0 48%, var(--club-secondary) 48.5% 100%);
}
.club-badge:not(.club-badge--flag)::before {
  content: "";
  position: absolute;
  inset: -35% auto -35% 45%;
  width: 18%;
  transform: rotate(12deg);
  background: #ffffff52;
  z-index: -1;
}
.club-badge:not(.club-badge--flag) b {
  min-width: 32px;
  max-width: 54px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .055em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.club-badge--lg:not(.club-badge--flag) b { min-width: 44px; font-size: 13px; }

.setup-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 180px minmax(260px, .9fr);
  align-items: center;
  gap: 22px;
  min-height: 172px;
  margin: 4px 0 18px;
  padding: 26px 28px;
  overflow: hidden;
  color: #eefcf4;
  border: 1px solid #ffffff35;
  border-radius: 26px;
  background:
    radial-gradient(circle at 72% 42%, #4ccf8c2b 0 9%, transparent 30%),
    linear-gradient(122deg, #0c3524 0%, #145a3b 52%, #0c2b20 100%);
  box-shadow: 0 22px 55px #123b282c, inset 0 1px 0 #ffffff2b;
  isolation: isolate;
}
.setup-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(#ffffff1c 1px, transparent 1px),
    linear-gradient(90deg, #ffffff1c 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, #000, transparent 80%);
  z-index: -1;
}
.setup-showcase__copy { display: grid; gap: 8px; min-width: 0; }
.setup-showcase__copy > span { color: #67e5a5; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.setup-showcase__copy > strong { max-width: 560px; font-size: 24px; line-height: 1.12; letter-spacing: -.035em; }
.setup-showcase__copy > small { max-width: 570px; color: #c7dfd1; font-size: 11px; line-height: 1.6; }
.setup-showcase__visual { position: relative; display: grid; place-items: center; height: 118px; }
.setup-ball {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 24px;
  font-size: 34px;
  background: linear-gradient(145deg, #ffffff, #d9f2e4);
  box-shadow: 0 18px 45px #00180d70, inset 0 1px 0 #fff;
  animation: setupFloat 3.2s ease-in-out infinite;
}
.setup-orbit { position: absolute; border: 1px solid #82f0b46b; border-radius: 50%; }
.setup-orbit--one { width: 116px; height: 60px; transform: rotate(18deg); }
.setup-orbit--two { width: 72px; height: 126px; transform: rotate(-28deg); }
.setup-live { position: absolute; bottom: -2px; z-index: 4; padding: 6px 9px; border: 1px solid #ffffff28; border-radius: 999px; color: #d8f9e7; background: #052319b8; backdrop-filter: blur(8px); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.setup-live i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #52e89b; box-shadow: 0 0 0 5px #52e89b1e; }
@keyframes setupFloat { 50% { transform: translateY(-8px) rotate(4deg); } }
.setup-showcase__stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.setup-showcase__stats span { display: grid; gap: 4px; min-width: 0; padding: 12px 10px; border: 1px solid #ffffff1e; border-radius: 15px; background: #ffffff0e; backdrop-filter: blur(8px); }
.setup-showcase__stats small { color: #8edeb4; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.setup-showcase__stats b { overflow: hidden; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mode-switch--three {
  padding: 8px;
  border: 1px solid #d7e7dd;
  border-radius: 21px;
  background: linear-gradient(180deg,#f5faf7,#edf6f1);
  box-shadow: inset 0 1px 0 #fff;
}
.mode-switch--three button { min-height: 76px; border-radius: 15px; transition: .22s ease; }
.mode-switch--three button:hover { transform: translateY(-2px); }
.mode-switch--three button.active { box-shadow: 0 12px 28px #145d3c22, inset 0 1px 0 #fff; }
.solo-settings,
.match-settings {
  border: 1px solid #d8e7dd;
  border-radius: 21px;
  background: linear-gradient(135deg,#ffffff,#f3f9f5);
  box-shadow: 0 14px 35px #173b2710;
}
.match-settings { position: relative; overflow: hidden; padding: 14px; gap: 12px; }
.match-settings::after { content:""; position:absolute; width:150px; height:150px; right:-70px; bottom:-90px; border-radius:50%; background:#42b97912; }
.match-settings__group { position: relative; z-index: 1; min-height: 108px; padding: 16px; border: 1px solid #e0ece4; border-radius: 17px; background: #ffffffd9; }
.match-settings__group > div:first-child span { color:#2c704b; font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.match-settings__group > div:first-child b { font-size:13px; }
.setting-tabs { padding: 5px; border-radius: 13px; background:#edf5f0; }
.setting-tabs button { min-height: 36px; border-radius: 10px; }
.setting-tabs button.active { color:#fff; background:linear-gradient(145deg,#228258,#145d3c); box-shadow:0 8px 18px #145d3c2d; }
.match-winning-answer { display:grid; gap:4px; max-width:360px; margin:18px auto 4px; padding:14px 18px; border:1px solid #cfe5d7; border-radius:17px; background:linear-gradient(135deg,#eaf8ef,#fff); }
.match-winning-answer span { color:#2f7d53; font-size:8px; font-weight:900; letter-spacing:.14em; }
.match-winning-answer strong { color:#153b28; font-size:21px; }
.match-winning-answer small { color:#708078; font-size:9px; }
.round-continue-button:disabled { opacity:.68; cursor:wait; }
.online-members span.ready { background:#dff6e8; border-color:#a9dcbc; }

@media (max-width: 1020px) {
  .setup-showcase { grid-template-columns: 1fr 130px; }
  .setup-showcase__stats { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .setup-showcase { grid-template-columns: 1fr; padding: 22px; }
  .setup-showcase__visual { display:none; }
  .setup-showcase__stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .setup-showcase__copy > strong { font-size:21px; }
}


/* ===== V8 MATCH EXPERIENCE ===== */
.setup-showcase{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:210px;padding:28px 30px;
  grid-template-columns:minmax(0,1.35fr) 210px minmax(300px,.95fr);
  border:1px solid #b9d7c7;border-radius:28px;
  background:
    radial-gradient(circle at 75% 45%,#7ee4ac30 0 9%,transparent 30%),
    linear-gradient(115deg,#062f22 0%,#0b4f37 46%,#11734d 100%);
  box-shadow:0 24px 60px #123d2926,inset 0 1px 0 #ffffff32;
}
.setup-showcase::before{content:"";position:absolute;inset:0;z-index:-2;background:url('./stadium-tunnel-v8.svg') center/cover no-repeat;opacity:.34}
.setup-showcase::after{content:"";position:absolute;inset:auto -8% -64% 38%;height:180%;z-index:-1;background:radial-gradient(ellipse,#72e6ac36,transparent 63%);transform:rotate(-8deg)}
.setup-showcase__copy>span{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:7px 10px;border:1px solid #7ae8ad4d;border-radius:999px;background:#ffffff0e;color:#8df0ba}
.setup-showcase__copy>strong{font-size:30px;line-height:1.06;text-wrap:balance;text-shadow:0 6px 28px #001b11}
.setup-showcase__copy>small{max-width:620px;font-size:12px;color:#d6eee1}
.setup-showcase__visual{height:154px;filter:drop-shadow(0 22px 28px #00190f88)}
.setup-ball{width:104px;height:104px;border-radius:50%;padding:0;background:transparent;box-shadow:none;animation:setupFloat 3.4s ease-in-out infinite}
.setup-ball img{width:100%;height:100%;display:block}
.setup-orbit--one{width:168px;height:74px;border-color:#b9ffd66b;box-shadow:0 0 32px #8ff1bb24}
.setup-orbit--two{width:92px;height:174px;border-color:#57d99a63}
.setup-live{bottom:-7px;padding:7px 12px;border-color:#98e9bb42;background:#032319d6;box-shadow:0 8px 24px #00170e66}
.setup-showcase__stats{gap:10px}
.setup-showcase__stats span{min-height:74px;padding:14px;border-color:#ffffff2b;border-radius:18px;background:linear-gradient(145deg,#ffffff18,#ffffff09);box-shadow:inset 0 1px 0 #ffffff22}
.setup-showcase__stats small{font-size:8px}.setup-showcase__stats b{font-size:13px}
.mode-switch--three{padding:10px;border-radius:24px;background:linear-gradient(180deg,#f8fcfa,#eaf4ee);box-shadow:0 16px 38px #183b2712,inset 0 1px 0 #fff}
.mode-switch--three button{position:relative;overflow:hidden;min-height:92px;border:1px solid transparent;border-radius:18px;background:#ffffffb8}
.mode-switch--three button::after{content:"";position:absolute;inset:auto -22px -34px auto;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle,#3dbb7c1f,transparent 68%)}
.mode-switch--three button.active{border-color:#83cba6;background:linear-gradient(145deg,#fff,#e7f7ed);box-shadow:0 14px 30px #145d3c24,inset 0 1px 0 #fff}
.solo-settings,.match-settings{border-radius:25px;background:linear-gradient(145deg,#fff,#eff8f3);box-shadow:0 20px 50px #173b2714,inset 0 1px 0 #fff}
.match-settings__group{min-height:120px;border-radius:20px;background:linear-gradient(145deg,#ffffff,#f6fbf8)}
.players-grid{position:relative;gap:24px;padding:16px;border:1px solid #d6e9de;border-radius:28px;background:linear-gradient(145deg,#f7fbf9,#edf6f1);box-shadow:0 20px 48px #153d2912,inset 0 1px 0 #fff}
.player-card{position:relative;overflow:visible;border:1px solid #d2e5da;border-radius:24px;background:linear-gradient(155deg,#ffffff 0%,#f4faf6 100%);box-shadow:0 18px 40px #123b2714,inset 0 1px 0 #fff}
.player-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;border-radius:24px 24px 0 0;background:linear-gradient(90deg,#0b573b,#55c58a,#c8f1db)}
.player-card__head{padding-top:4px}.player-label{letter-spacing:.11em}.score-chip{box-shadow:0 8px 18px #163e2920}
.club-search{min-height:62px;border:1px solid #c9dfd2;border-radius:17px;background:#fff;box-shadow:0 10px 24px #173d2910,inset 0 1px 0 #fff}
.club-search:focus-within{border-color:#3ba975;box-shadow:0 0 0 4px #4ab27d18,0 14px 30px #173d2914}
.club-summary{gap:8px}.club-summary>div{min-height:58px;border:1px solid #e0ece5;border-radius:14px;background:#fbfdfc}
.role-card{border-radius:16px;background:linear-gradient(135deg,#0b4e36,#15734d);color:#fff;box-shadow:0 12px 28px #0c4f3525}.role-card span,.role-card strong{color:inherit}.role-code{border-color:#ffffff32;background:#ffffff12;color:#fff}
.versus{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);width:68px;height:68px;border:7px solid #eef7f2;border-radius:50%;background:linear-gradient(145deg,#123f2d,#1d8457);box-shadow:0 14px 32px #0b3d292d;color:#fff}.versus span{color:#fff}.versus small{color:#bfe9d2}
.game-actions{padding:16px 18px;border:1px solid #d8e9df;border-radius:20px;background:#ffffffc9;box-shadow:0 14px 32px #173d2910}

.round-arena{position:relative;isolation:isolate;overflow:hidden;padding:0;border:1px solid #a9cdb9;border-radius:30px;background:linear-gradient(160deg,#f9fcfa,#eaf4ef);box-shadow:0 30px 70px #123c2826}
.round-arena::before{content:"";position:absolute;inset:0;z-index:-2;background:url('./match-radar-v8.svg') center/cover no-repeat;opacity:.25}
.round-arena::after{content:"";position:absolute;inset:138px 5% auto;height:1px;background:linear-gradient(90deg,transparent,#50b77f66,transparent)}
.round-scoreboard{position:relative;min-height:154px;padding:24px 30px;border-radius:29px 29px 0 0;background:linear-gradient(112deg,var(--left-team-accent),var(--left-team-secondary) 43%,#0e3d2b 50%,var(--right-team-secondary) 57%,var(--right-team-accent));box-shadow:inset 0 -1px 0 #ffffff2c}
.round-scoreboard::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#00000030,transparent 34% 66%,#00000030),url('./stadium-lights-v8.svg') center/cover no-repeat;opacity:.86}
.round-team{position:relative;z-index:2;min-width:0;padding:12px 16px;border:1px solid #ffffff44;border-radius:20px;background:#071d16a8;backdrop-filter:blur(14px);box-shadow:0 14px 34px #00130d5c,inset 0 1px 0 #ffffff21}
.round-team b{font-size:17px;color:#fff;text-shadow:0 2px 12px #000}.round-team span{color:#e8f6ee}
.timer-ring{position:relative;z-index:3;width:92px;height:92px;border:8px solid #ffffff4f;background:#07271ccf;box-shadow:0 0 0 1px #ffffff5a,0 18px 40px #00160ea1,inset 0 0 0 3px #0b4a34}
.timer-ring strong{font-size:31px;color:#fff}.timer-ring span{color:#aee7c8}
.round-content{padding:30px 32px 34px}
.round-heading-row h3{font-size:26px;letter-spacing:-.035em}.round-kicker{display:inline-flex;padding:7px 10px;border-radius:999px;background:#e1f5e9;color:#176743}
.opponent-strip{border:1px solid #cbe2d5;border-radius:18px;background:linear-gradient(135deg,#fff,#edf7f1);box-shadow:0 12px 28px #153d2910}.opponent-strip>span{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#dff6e8,#bde8cf);font-size:22px}
.round-match-meta{padding:12px;border:1px solid #d6e9de;border-radius:20px;background:#ffffffbd;box-shadow:0 12px 28px #153d2910}
.round-score-player{border-radius:15px;background:linear-gradient(145deg,#edf8f2,#fff)}.round-target{border-radius:15px;background:linear-gradient(145deg,#0d5d3f,#1c8b5c);color:#fff}.round-target b,.round-target small{color:#fff}
.round-play-grid{gap:18px}.answer-panel{position:relative;overflow:hidden;border:1px solid #cfe3d7;border-radius:23px;background:linear-gradient(145deg,#fff,#f1f8f4);box-shadow:0 18px 42px #173d2914}.answer-panel::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(#2ba46e,#8de2b5)}
.answer-input-wrap{border-radius:18px;box-shadow:0 12px 28px #173d2910}.answer-submit-button{border-radius:17px;background:linear-gradient(145deg,#168257,#0c5a3d);box-shadow:0 14px 30px #0d5d3f35}.answer-pass-button{border-radius:17px}
.round-result-modal,.match-result-modal{position:relative;overflow:hidden;padding:8px}.round-result-modal::before,.match-result-modal::before{content:"";position:absolute;inset:-120px -100px auto auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#63d99a25,transparent 66%)}

@media(max-width:1100px){.setup-showcase{grid-template-columns:1fr 170px}.setup-showcase__stats{grid-column:1/-1}.round-scoreboard{padding:20px}.round-content{padding:24px}.players-grid{gap:14px}}
@media(max-width:720px){.setup-showcase{grid-template-columns:1fr;padding:24px}.setup-showcase__visual{display:grid;height:118px}.setup-showcase__stats{grid-template-columns:1fr}.players-grid{display:grid;padding:10px}.versus{position:relative;left:auto;top:auto;transform:none;margin:-6px auto}.round-scoreboard{grid-template-columns:1fr 74px 1fr;padding:12px}.round-team{padding:9px}.round-team b{font-size:12px}.timer-ring{width:70px;height:70px;border-width:5px}.timer-ring strong{font-size:23px}.round-content{padding:20px 14px}.round-heading-row h3{font-size:21px}}

/* ===== V9 ONLINE ROOM & POLISH ===== */
.online-room-bar{
  display:grid;
  grid-template-columns:minmax(180px,240px) minmax(0,1fr) auto;
  gap:16px;
  align-items:start;
  padding:18px;
  border:1px solid #cfe4d8;
  border-radius:24px;
  background:
    radial-gradient(circle at top right,#78d9a71e,transparent 34%),
    linear-gradient(145deg,#ffffff,#eff8f2);
  box-shadow:0 18px 42px #153d2910,inset 0 1px 0 #fff;
}
.online-room-bar>div:first-child{display:grid;gap:6px;padding:10px 12px;border:1px solid #dceadf;border-radius:18px;background:#f9fcfa}
.online-room-bar>div:first-child span{font-size:10px;font-weight:900;letter-spacing:.12em;color:#2d7650}
.online-room-bar>div:first-child strong{font-size:24px;letter-spacing:.12em;color:#123f2d}
.online-room-bar>div:first-child button{width:max-content;padding:8px 12px;border:none;border-radius:12px;background:linear-gradient(145deg,#1a8459,#0f5f40);color:#fff;box-shadow:0 10px 22px #0f5f4028;cursor:pointer}
.online-members-panel{display:grid;gap:10px;min-width:0}
.online-members-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.online-members-head strong{font-size:13px;color:#143f2c}
.online-members-head strong small{font-size:10px;color:#538265}
.online-members-head span{font-size:11px;color:#5c7468}
.online-members{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}
.room-member{
  display:grid;
  grid-template-columns:18px minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
  min-height:64px;
  padding:12px 13px;
  border:1px solid #cfe3d8;
  border-radius:18px;
  background:linear-gradient(145deg,#ffffff,#f4fbf7);
  box-shadow:0 10px 24px #153d290c,inset 0 1px 0 #fff;
  color:#173929;
  text-align:left;
}
.room-member i{width:12px;height:12px;border-radius:50%;background:#9ab3a5;box-shadow:0 0 0 5px #9ab3a51f}
.room-member span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.room-member small{padding:5px 7px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.1em;color:#557266;background:#eef5f1}
.room-member.is-player{border-color:#9fd4b6;background:linear-gradient(145deg,#ffffff,#ebfaf1)}
.room-member.is-player i{background:#39bf7b;box-shadow:0 0 0 5px #39bf7b24}
.room-member.is-player small{color:#0f6c44;background:#dff6e8}
.room-member.is-spectator{opacity:.92}
.room-member.is-spectator i{background:#7d9690}
.room-member.is-spectator small{color:#5b7070;background:#edf1f2}
.room-member.ready{box-shadow:0 14px 30px #20a16418,inset 0 0 0 1px #9ed7b6}
.room-member.is-manageable{cursor:pointer;transition:.18s ease}
.room-member.is-manageable:hover{transform:translateY(-2px);box-shadow:0 16px 34px #153d2913,inset 0 0 0 1px #9ecfb4}
.room-member.is-host{position:relative}
.room-member.is-host::after{content:"YÖNETİCİ";position:absolute;top:-8px;right:12px;padding:4px 7px;border-radius:999px;background:linear-gradient(145deg,#fee59d,#ffd569);color:#5d4200;font-size:8px;font-weight:900;letter-spacing:.12em;box-shadow:0 8px 16px #b38a1518}
.online-spectator-note{padding:10px 12px;border:1px dashed #c3d8cb;border-radius:15px;color:#667d71;background:#f7fbf8;font-size:11px}
.online-exit{align-self:stretch;padding:0 16px;border:none;border-radius:18px;background:linear-gradient(145deg,#163e2b,#0a6140);color:#fff;font-weight:800;box-shadow:0 12px 28px #0b4f3528;cursor:pointer}
.online-exit:hover{filter:brightness(1.03)}
.players-grid{overflow:hidden}
.players-grid::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at top left,#6fd6a31a,transparent 28%),radial-gradient(circle at bottom right,#2aa26f14,transparent 24%)}
.players-grid::after{content:"";position:absolute;inset:auto 8% 50%;height:1px;background:linear-gradient(90deg,transparent,#3fb67d3d,transparent);pointer-events:none}
.player-card{backdrop-filter:blur(10px)}
.club-summary>div{box-shadow:inset 0 1px 0 #fff,0 8px 18px #153d2908}
.role-card{background:linear-gradient(135deg,#0a4b34,#15754d 58%,#23a467)}
.game-actions{background:linear-gradient(145deg,#ffffff,#f4faf6)}
.answer-panel{background:linear-gradient(145deg,#ffffff,#f4faf7)}
.answer-input-wrap{background:#fff}
.answer-submit-button{background:linear-gradient(145deg,#199666,#0d6342)}
.round-result-modal,.match-result-modal{border:1px solid #d6e7dd;border-radius:26px;background:linear-gradient(155deg,#ffffff,#eff8f3);box-shadow:0 25px 60px #10392618}
@media(max-width:980px){.online-room-bar{grid-template-columns:1fr}.online-exit{min-height:48px}.online-members{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}

/* ===== V10 ROOM LIST + CLEAN LAYOUT ===== */
.online-room-bar{
  grid-template-columns:minmax(170px,220px) minmax(0,1fr) 116px !important;
  gap:18px !important;
  align-items:start !important;
}
.online-members-panel{display:grid;gap:14px;min-width:0}
.online-members-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;padding:2px 2px 0}
.online-members-head strong{display:flex;align-items:center;gap:8px;font-size:14px;color:#123b2a}
.online-members-head strong small{padding:4px 8px;border-radius:999px;background:#e7f7ee;color:#1c8054;font-size:10px;font-weight:900;letter-spacing:.04em}
.online-members-head span{max-width:100%;font-size:11px;line-height:1.5;color:#61796d}
.online-members-block{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.95fr);gap:12px;align-items:start}
.member-section{display:grid;gap:10px;padding:14px;border:1px solid #d6e9de;border-radius:22px;background:linear-gradient(145deg,#ffffff,#f3faf6);box-shadow:0 14px 34px #163d2a10}
.member-section__title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:900;letter-spacing:.04em;color:#18412f}
.member-section__title b{min-width:34px;padding:4px 8px;border-radius:999px;background:#123f2d;color:#fff;font-size:10px;text-align:center}
.online-members{display:grid;grid-template-columns:1fr;gap:10px}
.online-members--spectators{max-height:240px;overflow:auto;padding-right:4px}
.online-spectator-empty{padding:16px 14px;border:1px dashed #d0e0d7;border-radius:16px;background:#fbfdfb;color:#73887d;font-size:12px;text-align:center}
.room-member{display:grid;grid-template-columns:14px minmax(0,1fr) auto auto;gap:10px;align-items:center;min-height:58px;padding:11px 12px;border:1px solid #d1e3d8;border-radius:18px;background:linear-gradient(145deg,#ffffff,#f6fbf8);box-shadow:inset 0 1px 0 #fff,0 10px 26px #163d2a0d}
.room-member span{font-size:13px;font-weight:800}
.room-member small{font-size:9px;letter-spacing:.12em}
.room-member.is-player{border-color:#a9d6bc;background:linear-gradient(145deg,#ffffff,#eaf9f1)}
.room-member.is-player small{background:#ddf4e6;color:#106a42}
.room-member.is-spectator{border-style:dashed;background:linear-gradient(145deg,#fff,#f8fbfa)}
.room-member.is-spectator small{background:#eef3f1;color:#5e746a}
.online-spectator-note{font-size:11px;line-height:1.55}
.online-exit{min-height:100%;border-radius:22px !important;display:grid;place-items:center;text-align:center;padding:16px 12px !important}

.players-grid{
  grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr) !important;
  align-items:stretch !important;
  gap:16px !important;
  padding:18px !important;
  overflow:visible !important;
}
.player-card{
  min-width:0 !important;
  height:100% !important;
  padding:16px !important;
}
.player-card__head{margin-bottom:12px !important}
.club-search{min-height:68px}
.club-summary{grid-template-columns:1.2fr .8fr .8fr !important}
.club-summary > div{min-height:58px;justify-content:center}
.role-card{min-height:54px}
.versus{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  align-self:center !important;
  justify-self:center !important;
  width:86px !important;
  height:auto !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
}
.versus span{width:72px !important;height:72px !important;border-radius:50% !important;border:6px solid #ecf6f0;background:linear-gradient(145deg,#0e5a3d,#1fa268) !important;box-shadow:0 16px 32px #0c4e3529 !important;font-size:26px}
.versus small{display:block;font-size:10px;letter-spacing:.16em;color:#6d8478 !important}
.game-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.game-actions .btn{min-width:160px}

.round-shell,.answer-panel,.setup-showcase,.game-actions,.online-room-bar{backdrop-filter:blur(10px)}
.setup-showcase,.game-actions,.players-grid,.online-room-bar{position:relative;overflow:hidden}
.setup-showcase::after{opacity:.9}

@media(max-width:1180px){
  .online-room-bar{grid-template-columns:1fr !important}
  .online-members-block{grid-template-columns:1fr !important}
  .online-exit{min-height:56px}
}
@media(max-width:820px){
  .players-grid{grid-template-columns:1fr !important;padding:12px !important}
  .versus{order:2;margin:0 auto}
  .players-grid > :first-child{order:1}
  .players-grid > :last-child{order:3}
  .club-summary{grid-template-columns:1fr !important}
  .game-actions .btn{min-width:unset;width:100%}
}

/* ===== V11 ONLINE FLOW, DRAG & VISUAL STABILITY ===== */
.selection-warning{
  display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;
  margin:14px 0;padding:14px 16px;border:1px solid #efc99b;border-radius:18px;
  background:linear-gradient(145deg,#fffaf1,#fff3df);box-shadow:0 12px 28px #8b5a1812;color:#603d13
}
.selection-warning>span{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:#f6b84e;color:#fff;font-size:22px;font-weight:950;box-shadow:0 9px 20px #c47b192b}
.selection-warning b{display:block;margin-bottom:3px;font-size:13px}.selection-warning p{margin:0;font-size:12px;line-height:1.5;color:#76562d}
.member-section{min-height:132px;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.member-section--players{background:linear-gradient(145deg,#fff,#edf9f2)}
.member-section--spectators{background:linear-gradient(145deg,#fff,#f4f7f6)}
.member-section:has(.room-member.is-draggable:active){border-color:#75c99c}
.room-member.is-draggable{cursor:grab;user-select:none}
.room-member.is-draggable:active{cursor:grabbing;opacity:.72;transform:scale(.985)}
.room-member.is-draggable::before{content:"⋮⋮";color:#78a08b;font-size:11px;letter-spacing:-3px;margin-right:2px}
.room-member{grid-template-columns:auto 14px minmax(0,1fr) auto auto!important}
.online-spectator-empty{min-height:58px;display:grid;place-items:center}
.online-members--spectators{scrollbar-width:thin;scrollbar-color:#b9d5c6 transparent}
.online-members--spectators::-webkit-scrollbar{width:6px}.online-members--spectators::-webkit-scrollbar-thumb{background:#b9d5c6;border-radius:999px}

/* Team choices stay clean and do not collide at desktop widths. */
.players-grid{min-height:342px!important}
.player-card{display:flex!important;flex-direction:column!important;justify-content:flex-start!important}
.club-search{flex:0 0 auto}
.club-summary{flex:0 0 auto}
.role-card{margin-top:auto!important}
.versus{z-index:8!important;pointer-events:none}
.game-actions{position:relative;z-index:10;min-height:78px}

/* Round screen: names remain readable even with long usernames. */
.round-score-player span,.round-pass-status span,.solo-player-chip{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.round-score-player{min-width:0}.round-match-meta{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important}
.round-score-player--right{text-align:right}

@media(max-width:1180px){
  .online-members-block{grid-template-columns:1fr!important}
  .players-grid{min-height:0!important}
}
@media(max-width:820px){
  .room-member{grid-template-columns:auto 14px minmax(0,1fr) auto!important}
  .room-member>small{grid-column:auto}.round-match-meta{grid-template-columns:1fr!important}.round-score-player--right{text-align:left}
}
.player-card--locked{background:linear-gradient(155deg,#f9fcfa,#eef5f1)!important}
.player-card--locked .club-search{opacity:.72;background:#f1f6f3}
.player-card--locked .club-summary,.player-card--locked .role-card{opacity:.58}
.hidden-selection-note{display:grid;grid-template-columns:28px auto minmax(0,1fr);gap:8px;align-items:center;margin:0 0 10px;padding:9px 11px;border:1px dashed #b9d4c5;border-radius:14px;background:#f5faf7;color:#456a58}
.hidden-selection-note>span{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:#dff1e7;color:#166f48;font-size:12px}.hidden-selection-note b{font-size:10px;text-transform:uppercase;letter-spacing:.08em}.hidden-selection-note small{font-size:10px;color:#70867b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spectator-result-wait{padding:14px 16px;border:1px dashed #b9d5c6;border-radius:16px;background:#f5faf7;color:#5d7669;font-size:12px;font-weight:700;text-align:center}
/* Hard cache/layout guard: setup panel must never collapse into an empty white block. */
.setup-showcase{display:grid!important;color:#fff!important;min-height:206px!important;background:radial-gradient(circle at 76% 42%,#4ccf8c30 0 10%,transparent 31%),linear-gradient(122deg,#082f21 0%,#0d5b3d 54%,#09281e 100%)!important}
.setup-showcase__copy,.setup-showcase__visual,.setup-showcase__stats{position:relative;z-index:2}
.mode-switch--three,.solo-settings,.match-settings{position:relative;z-index:2}


/* ===== V13 COMPACT DESKTOP + MOBILE FIT TUNING ===== */
@media (min-width: 1100px) {
  .app-shell{width:min(1400px,100% - 28px)!important;margin:12px auto 22px!important}
  .main-grid{grid-template-columns:minmax(0,1fr) 310px!important;gap:14px!important;margin-top:14px!important}
  .topbar{min-height:64px!important;padding:10px 14px 10px 18px!important;border-radius:18px!important;top:8px!important}
  .brand img{width:38px!important;height:38px!important}
  .brand strong{font-size:16px!important}
  .brand span{font-size:8px!important}
  .topnav button{min-height:38px!important;padding:0 12px!important;border-radius:11px!important}
  .setup-showcase{padding:20px 22px!important;min-height:186px!important;border-radius:24px!important;gap:14px!important}
  .setup-showcase__copy>strong{font-size:25px!important}
  .setup-showcase__copy>small{font-size:11px!important;max-width:560px!important}
  .setup-showcase__visual{height:132px!important}
  .setup-showcase__stats span{min-height:66px!important;padding:12px!important}
  .setup-showcase__stats b{font-size:12px!important}
  .online-room-bar{gap:12px!important}
  .players-grid{gap:16px!important;padding:12px!important;border-radius:24px!important;min-height:300px!important}
  .player-card{border-radius:20px!important}
  .player-card__head{padding:14px 14px 0!important}
  .club-search{min-height:58px!important}
  .club-search input{min-height:56px!important;font-size:15px!important;padding:0 15px!important}
  .club-summary>div{min-height:52px!important}
  .role-card{min-height:50px!important}
  .versus{width:74px!important}
  .versus span{width:60px!important;height:60px!important;font-size:22px!important}
  .game-actions{padding:12px 14px!important;min-height:64px!important}
  .game-actions .btn{min-height:44px!important;min-width:150px!important}
  .round-scoreboard,.round-arena .round-scoreboard{min-height:136px!important;padding:18px 22px!important;border-radius:24px 24px 0 0!important}
  .club-badge--lg{width:58px!important;height:58px!important;border-radius:18px!important}
  .timer-ring{width:78px!important;height:78px!important}
  .timer-ring strong{font-size:26px!important}
  .round-content{padding:20px 22px!important}
  .answer-panel{border-radius:20px!important}
  .answer-area{padding:18px 20px!important}
  .answer-box{grid-template-columns:minmax(0,1fr) 150px 94px!important;gap:10px!important}
  .answer-box input{min-height:58px!important;font-size:15px!important}
  .answer-box>button{min-height:58px!important}
  .player-suggestions button{padding:9px 10px!important}
}
@media (max-width: 760px) {
  .app-shell{width:min(100% - 14px,760px)!important;margin:8px auto 16px!important}
  .main-grid{gap:12px!important;margin-top:12px!important}
  .topbar{min-height:60px!important;padding:10px 12px!important;border-radius:16px!important;top:6px!important}
  .setup-showcase{padding:18px 16px!important;border-radius:22px!important;min-height:0!important}
  .setup-showcase__copy>strong{font-size:22px!important}
  .setup-showcase__copy>small{font-size:11px!important;line-height:1.55!important}
  .online-room-bar{padding:14px!important;border-radius:20px!important}
  .member-section{min-height:118px!important}
  .room-member{min-height:54px!important;padding:10px 11px!important}
  .players-grid{padding:10px!important;gap:12px!important;border-radius:20px!important}
  .player-card{border-radius:18px!important}
  .club-search{min-height:56px!important}
  .club-search input{min-height:52px!important;font-size:14px!important;padding:0 14px!important}
  .answer-panel{border-radius:18px!important}
  .answer-area{padding:16px 14px!important}
  .answer-box{gap:10px!important}
  .answer-box input,.answer-box>button{min-height:50px!important}
  .player-suggestions button{padding:8px 9px!important}
}

/* V15 — online lobi adları tam görünür, izleyici alanı açık, çıkış düğmesi kompakt */
.online-room-bar{
  grid-template-columns:minmax(170px,220px) minmax(0,1fr) auto!important;
  align-items:start!important;
  overflow:visible!important;
}
.online-members-panel,
.online-members-block,
.member-section,
.online-members{min-width:0!important}
.online-members-block{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:start!important;
  gap:14px!important;
}
.room-member{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:14px minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:8px!important;
  min-height:48px!important;
  padding:9px 10px!important;
  text-align:left!important;
}
.room-member>span{
  min-width:0!important;
  max-width:none!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.25!important;
}
.room-member>small{white-space:nowrap!important}
.online-members--spectators{
  max-height:320px!important;
  overflow:auto!important;
}
.online-exit{
  align-self:start!important;
  width:auto!important;
  min-width:104px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 14px!important;
  border-radius:13px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:12px!important;
  line-height:1!important;
}
@media(max-width:1180px){
  .online-room-bar{grid-template-columns:1fr!important}
  .online-exit{justify-self:start!important;width:auto!important}
}
@media(max-width:760px){
  .online-members-block{grid-template-columns:1fr!important}
  .room-member{grid-template-columns:14px minmax(0,1fr) auto!important}
}


/* V17 — tam kariyer bağlantısı + 100% masaüstü maç görünümü */
.round-arena{scroll-margin-top:88px}
@media (min-width:1100px){
  .app-shell.is-match-started{width:min(1460px,100% - 22px)!important;margin:8px auto 18px!important}
  .app-shell.is-match-started .main-grid{grid-template-columns:minmax(0,1fr) 292px!important;gap:12px!important;margin-top:10px!important}
  .app-shell.is-match-started .topbar{min-height:58px!important;padding:8px 14px!important;top:6px!important}
  .app-shell.is-match-started .round-arena{margin-top:12px!important;border-radius:24px!important;scroll-margin-top:76px!important}
  .app-shell.is-match-started .round-arena .round-scoreboard{min-height:112px!important;padding:12px 20px!important}
  .app-shell.is-match-started .round-arena .club-badge--lg{width:50px!important;height:50px!important;border-radius:15px!important}
  .app-shell.is-match-started .round-arena .round-team b{font-size:14px!important}
  .app-shell.is-match-started .round-arena .round-team span{font-size:9px!important}
  .app-shell.is-match-started .round-arena .timer-ring{width:70px!important;height:70px!important}
  .app-shell.is-match-started .round-arena .timer-ring strong{font-size:23px!important}
  .app-shell.is-match-started .round-arena .round-content{padding:14px 18px 16px!important}
  .app-shell.is-match-started .round-heading-row{margin-bottom:10px!important}
  .app-shell.is-match-started .round-heading-row h3{font-size:23px!important}
  .app-shell.is-match-started .round-play-grid{grid-template-columns:185px minmax(0,1fr)!important;gap:12px!important;padding:12px!important;border-radius:18px!important}
  .app-shell.is-match-started .answer-area{padding:12px!important;border-radius:15px!important}
  .app-shell.is-match-started .answer-box{grid-template-columns:minmax(0,1fr) 145px 90px!important;gap:8px!important}
  .app-shell.is-match-started .answer-box input,.app-shell.is-match-started .answer-box>button{min-height:50px!important}
  .app-shell.is-match-started .player-suggestions{max-height:190px!important;overflow:auto!important}
  .app-shell.is-match-started .player-suggestions button{padding:7px 9px!important;min-height:48px!important}
  .app-shell.is-match-started .feedback{min-height:34px!important}
  .app-shell.is-match-started .side-stack{gap:10px!important}
  .app-shell.is-match-started .side-card{padding:16px!important;border-radius:20px!important}
}


/* V18 — performance, youth-team cleanup and interaction-layer polish */
.footer{display:none!important}

/* The team dropdown must always be above reset/start controls and surrounding panels. */
.players-grid{overflow:visible!important;position:relative!important;z-index:30!important}
.player-card{overflow:visible!important;isolation:isolate}
.player-card:focus-within{z-index:5000!important;isolation:auto!important}
.club-search{z-index:2!important}
.club-search:focus-within{z-index:6000!important}
.search-menu{z-index:99999!important;max-height:min(390px,48vh)!important;overscroll-behavior:contain!important;scrollbar-width:thin}
.game-actions{z-index:1!important;overflow:visible!important}
.setup-showcase,.online-room-bar{overflow:hidden}

/* More breathing room after removing the technical footer. */
.round-play-grid{align-items:start!important}
.answer-area{min-height:170px!important}
.player-suggestions{max-height:270px!important;scrollbar-width:thin}
.player-suggestions__grid{gap:9px!important}
.player-suggestions button{min-height:54px!important}

/* Curated senior-club colours are visible in both badges and selected cards. */
.club-badge{background:linear-gradient(135deg,var(--club-accent) 0 52%,var(--club-secondary) 52% 100%)!important}

@media (min-width:1100px){
  .app-shell.is-match-started .round-play-grid{grid-template-columns:190px minmax(0,1fr)!important;gap:14px!important}
  .app-shell.is-match-started .answer-area{padding:14px!important;min-height:190px!important}
  .app-shell.is-match-started .player-suggestions{max-height:250px!important}
  .app-shell.is-match-started .round-content{padding-bottom:22px!important}
}
@media (max-width:900px){
  .search-menu{position:fixed!important;top:118px!important;left:12px!important;right:12px!important;max-height:55vh!important}
}


/* V19 — smooth startup, senior-team dropdowns and 100% desktop match fit */
*{scroll-behavior:auto}
.search-menu{contain:layout paint;will-change:auto}
.player-suggestions{contain:layout paint}
.club-badge,.country-flag-image img{content-visibility:auto}
@media (prefers-reduced-motion:no-preference){
  .surface,.side-card,.player-card,.answer-panel{transition:none!important}
}
@media (min-width:1100px){
  .app-shell.is-match-started{width:min(1560px,100% - 18px)!important;margin:6px auto 14px!important}
  .app-shell.is-match-started .main-grid{grid-template-columns:minmax(0,1fr) 276px!important;gap:10px!important;margin-top:8px!important}
  .app-shell.is-match-started .topbar{min-height:52px!important;padding:6px 12px!important;top:4px!important}
  .app-shell.is-match-started .brand img{width:34px!important;height:34px!important}
  .app-shell.is-match-started .round-arena{margin-top:8px!important;border-radius:20px!important;scroll-margin-top:64px!important}
  .app-shell.is-match-started .round-arena .round-scoreboard{min-height:102px!important;padding:9px 16px!important}
  .app-shell.is-match-started .round-arena .club-badge--lg{width:46px!important;height:46px!important;border-radius:14px!important}
  .app-shell.is-match-started .round-arena .timer-ring{width:64px!important;height:64px!important}
  .app-shell.is-match-started .round-arena .timer-ring strong{font-size:21px!important}
  .app-shell.is-match-started .round-arena .round-content{padding:10px 14px 14px!important}
  .app-shell.is-match-started .round-heading-row{margin-bottom:7px!important}
  .app-shell.is-match-started .round-heading-row h3{font-size:21px!important}
  .app-shell.is-match-started .round-feedback{min-height:54px!important;padding:9px 12px!important}
  .app-shell.is-match-started .score-strip{min-height:50px!important;margin:8px 0!important}
  .app-shell.is-match-started .round-play-grid{grid-template-columns:170px minmax(0,1fr)!important;gap:10px!important;padding:10px!important;border-radius:16px!important}
  .app-shell.is-match-started .answer-area{padding:10px!important;min-height:160px!important;border-radius:14px!important}
  .app-shell.is-match-started .answer-box{grid-template-columns:minmax(0,1fr) 140px 88px!important;gap:8px!important}
  .app-shell.is-match-started .answer-box input,.app-shell.is-match-started .answer-box>button{min-height:48px!important}
  .app-shell.is-match-started .player-suggestions{max-height:285px!important;overflow:auto!important}
  .app-shell.is-match-started .player-suggestions__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .app-shell.is-match-started .player-suggestions button{min-height:44px!important;padding:6px 8px!important}
  .app-shell.is-match-started .side-stack{gap:8px!important}
  .app-shell.is-match-started .side-card{padding:13px!important;border-radius:17px!important}
}


/* V21 low-power rendering: keep the same layout while avoiding continuous GPU work. */
@media (min-width: 761px) {
  .topbar,
  .round-team,
  .round-shell,
  .answer-panel,
  .setup-showcase,
  .game-actions,
  .online-room-bar,
  .player-card,
  .setup-live,
  .setup-showcase__stats span {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .setup-ball,
  .setup-showcase__visual,
  .timer-ring--countdown {
    animation: none !important;
  }
  .round-arena,
  .answer-panel,
  .player-card,
  .round-team,
  .timer-ring {
    will-change: auto !important;
  }
  .side-panel,
  .history-card,
  .data-card {
    content-visibility: auto;
    contain-intrinsic-size: 320px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* v37 — olası futbolcu sayısı ve tur sonu bütün adaylar */
.status-chip>span{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.status-chip__candidate-count{
  display:block;
  max-width:100%;
  color:rgba(19,79,54,.78);
  font-size:10px;
  font-weight:850;
  line-height:1.15;
  white-space:normal;
  overflow-wrap:anywhere;
}
.round-candidate-list{
  width:100%;
  display:grid;
  gap:8px;
  padding:11px;
  border:1px solid rgba(35,91,65,.16);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(246,250,247,.98),rgba(235,244,238,.98));
}
.round-candidate-title{
  color:#1d543a;
  font-size:11px;
  font-weight:950;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.round-candidate-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(125px,1fr));
  gap:6px;
  max-height:min(34vh,260px);
  overflow:auto;
  padding:2px 4px 2px 0;
  scrollbar-gutter:stable;
}
.round-candidate-grid>span,
.round-candidate-empty{
  min-width:0;
  padding:7px 8px;
  border:1px solid rgba(35,91,65,.14);
  border-radius:10px;
  background:#fff;
  color:#234c39;
  font-size:11px;
  font-weight:800;
  line-height:1.25;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.round-candidate-empty{grid-column:1/-1;text-align:center;color:#64776e}
.round-result-modal{max-width:min(100%,720px)}
@media(max-width:640px){
  .round-candidate-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:31vh}
  .round-candidate-grid>span,.round-candidate-empty{font-size:10px;padding:6px}
  .status-chip__candidate-count{font-size:9px}
}

/* V107 — show every other valid shared player on the match-winning result. */
.match-result-modal .match-candidate-list{
  width:min(100%,720px);
  margin:14px auto 4px;
  text-align:left;
}
.match-result-modal .round-candidate-grid{max-height:210px;overflow:auto;scrollbar-width:thin}