/* © 2026 Seiaura™. All rights reserved.
   Proprietary source. Copying, reuse or redistribution without written
   permission is prohibited. See terms.html#ip and LICENSE.txt. */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap");

:root {
--background: #f6f5ed;
--surface: #ffffff;
--surface-soft: #efeee5;
--ink: #143528;
--ink-soft: #617067;
--green: #b8ef50;
--green-strong: #88ba2d;
--green-dark: #1b4b35;
--border: rgba(20, 53, 40, 0.12);
--shadow: 0 30px 70px rgba(31, 54, 42, 0.12);
--radius-lg: 30px;
--radius-md: 20px;
--radius-sm: 14px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
min-height: 100vh;
background: var(--background);
color: var(--ink);
font-family: "DM Sans", sans-serif;
overflow-x: hidden;
}

button,
a {
font: inherit;
}

button {
border: 0;
cursor: pointer;
}

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

/* =========================
NAVBAR
========================= */

.navbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(246, 245, 237, 0.82);
border-bottom: 1px solid rgba(20, 53, 40, 0.06);
backdrop-filter: blur(18px);
}

.nav-container {
width: min(1240px, calc(100% - 44px));
height: 82px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
}

.brand {
display: flex;
align-items: center;
gap: 12px;
}

.brand-mark {
width: 42px;
height: 42px;
border-radius: 14px;
display: grid;
place-items: center;
background: var(--green-dark);
color: var(--green);
font-family: "Manrope", sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: -0.05em;
}

.brand-text {
display: flex;
flex-direction: column;
}

.brand-text strong {
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 800;
letter-spacing: -0.02em;
}

.brand-text span {
margin-top: 1px;
color: var(--ink-soft);
font-size: 10px;
}

.nav-links {
display: flex;
align-items: center;
gap: 32px;
color: #4e6057;
font-size: 13px;
font-weight: 600;
}

.nav-links a {
position: relative;
}

.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 0;
height: 2px;
border-radius: 999px;
background: var(--green-strong);
transition: width 0.25s ease;
}

.nav-links a:hover::after {
width: 100%;
}

.nav-actions {
display: flex;
align-items: center;
gap: 10px;
}

.text-btn {
min-height: 44px;
padding: 0 16px;
background: transparent;
color: var(--ink);
font-size: 13px;
font-weight: 700;
}

.nav-cta {
min-height: 46px;
padding: 0 19px;
border-radius: 14px;
background: var(--green-dark);
color: white;
font-size: 13px;
font-weight: 700;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(20, 53, 40, 0.14);
}

/* =========================
HERO
========================= */

.hero {
position: relative;
overflow: hidden;
}

.hero-container {
width: min(1240px, calc(100% - 44px));
min-height: 760px;
margin: auto;
padding: 76px 0 105px;
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
align-items: center;
gap: 72px;
}

.hero-background {
position: absolute;
border-radius: 50%;
filter: blur(3px);
pointer-events: none;
}

.hero-background-one {
width: 520px;
height: 520px;
right: -120px;
top: 80px;
background: radial-gradient(circle, rgba(184, 239, 80, 0.24), transparent 68%);
}

.hero-background-two {
width: 420px;
height: 420px;
left: -140px;
bottom: -120px;
background: radial-gradient(circle, rgba(133, 214, 194, 0.18), transparent 68%);
}

.hero-content,
.hero-visual {
position: relative;
z-index: 2;
}

.hero-label {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 35px;
padding: 0 13px;
border: 1px solid rgba(20, 53, 40, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.58);
color: #597064;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green-strong);
box-shadow: 0 0 0 5px rgba(136, 186, 45, 0.13);
animation: livePulse 1.8s ease-in-out infinite;
}

@keyframes livePulse {
0%,
100% {
transform: scale(0.86);
box-shadow: 0 0 0 4px rgba(136, 186, 45, 0.11);
}


50% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(136, 186, 45, 0.03);
}


}

.hero h1 {
max-width: 760px;
margin-top: 28px;
font-family: "Manrope", sans-serif;
font-size: clamp(58px, 7vw, 100px);
line-height: 0.92;
letter-spacing: -0.075em;
font-weight: 800;
}

.hero-highlight {
position: relative;
display: inline-block;
color: var(--green-strong);
}

.hero-highlight::after {
content: "";
position: absolute;
left: 4px;
right: -6px;
bottom: -6px;
height: 9px;
border-radius: 50%;
background: rgba(184, 239, 80, 0.42);
filter: blur(1px);
transform: rotate(-2deg);
z-index: -1;
}

.hero-description {
max-width: 600px;
margin-top: 31px;
color: var(--ink-soft);
font-size: 17px;
line-height: 1.72;
}

.hero-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 37px;
}

.primary-btn,
.secondary-btn {
min-height: 55px;
padding: 0 22px;
border-radius: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
font-size: 13px;
font-weight: 800;
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.primary-btn {
background: var(--green-dark);
color: white;
box-shadow: 0 14px 30px rgba(27, 75, 53, 0.13);
}

.primary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 20px 38px rgba(27, 75, 53, 0.18);
}

.primary-btn span {
color: var(--green);
font-size: 17px;
}

.secondary-btn {
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.63);
color: var(--ink);
}

.secondary-btn:hover {
transform: translateY(-3px);
background: white;
}

.hero-proof {
margin-top: 47px;
display: flex;
align-items: center;
gap: 15px;
}

.avatar-stack {
display: flex;
}

.avatar-stack span {
width: 34px;
height: 34px;
margin-left: -7px;
border: 3px solid var(--background);
border-radius: 50%;
display: grid;
place-items: center;
background: var(--surface);
font-size: 10px;
font-weight: 800;
}

.avatar-stack span:first-child {
margin-left: 0;
}

.avatar-stack span:last-child {
background: var(--green);
}

.proof-copy {
display: flex;
flex-direction: column;
}

.proof-copy strong {
font-size: 11px;
}

.proof-copy span {
margin-top: 3px;
color: var(--ink-soft);
font-size: 10px;
}

/* =========================
PLAYER CARD
========================= */

.hero-visual {
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
}

.player-card {
position: relative;
width: min(405px, 100%);
padding: 22px;
border: 1px solid rgba(20, 53, 40, 0.11);
border-radius: 29px;
background: rgba(255, 255, 255, 0.87);
box-shadow: var(--shadow);
backdrop-filter: blur(16px);
animation: cardFloat 5s ease-in-out infinite;
}

@keyframes cardFloat {
0%,
100% {
transform: translateY(0) rotate(1deg);
}


50% {
    transform: translateY(-10px) rotate(-0.5deg);
}


}

.player-card-header {
display: flex;
align-items: center;
justify-content: space-between;
}

.availability {
display: flex;
align-items: center;
gap: 7px;
color: #5b8020;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
}

.availability > span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green-strong);
}

.distance {
color: var(--ink-soft);
font-size: 10px;
font-weight: 600;
}

.profile-visual {
position: relative;
height: 245px;
margin-top: 17px;
border-radius: 21px;
display: grid;
place-items: center;
overflow: hidden;
background: linear-gradient(135deg, #edf5dc, #e8efe7);
}

.profile-avatar {
position: relative;
z-index: 4;
width: 116px;
height: 116px;
border: 9px solid rgba(255, 255, 255, 0.55);
border-radius: 50%;
display: grid;
place-items: center;
background: #d6e3d7;
color: #637b6d;
font-family: "Manrope", sans-serif;
font-size: 43px;
font-weight: 800;
}

.profile-orbit {
position: absolute;
border: 1px solid rgba(27, 75, 53, 0.12);
border-radius: 50%;
animation: orbitMove 10s linear infinite;
}

.orbit-one {
width: 185px;
height: 185px;
}

.orbit-two {
width: 290px;
height: 290px;
animation-direction: reverse;
}

@keyframes orbitMove {
to {
transform: rotate(360deg);
}
}

.match-badge {
position: absolute;
right: 18px;
bottom: 17px;
width: 69px;
height: 69px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--green);
color: var(--ink);
transform: rotate(7deg);
box-shadow: 0 12px 28px rgba(100, 140, 30, 0.18);
}

.match-badge strong {
font-family: "Manrope", sans-serif;
font-size: 16px;
}

.match-badge span {
margin-top: -1px;
font-size: 8px;
text-transform: uppercase;
letter-spacing: 0.08em;
}

.player-info {
margin-top: 20px;
display: flex;
align-items: flex-start;
justify-content: space-between;
}

.player-status {
color: var(--green-strong);
font-size: 8px;
font-weight: 800;
letter-spacing: 0.12em;
}

.player-info h2 {
margin-top: 4px;
font-family: "Manrope", sans-serif;
font-size: 28px;
line-height: 1;
}

.profile-menu {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--surface-soft);
color: var(--ink-soft);
font-weight: 800;
}

.player-tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 15px;
}

.player-tags span {
padding: 7px 10px;
border-radius: 9px;
background: var(--surface-soft);
color: #53665d;
font-size: 9px;
font-weight: 700;
}

.player-description {
margin-top: 15px;
color: var(--ink-soft);
font-size: 11px;
line-height: 1.6;
}

.request-btn {
width: 100%;
min-height: 49px;
margin-top: 19px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 11px;
background: var(--green-dark);
color: white;
font-size: 12px;
font-weight: 800;
}

.request-btn span {
color: var(--green);
font-size: 17px;
}

.floating-pill {
position: absolute;
z-index: 9;
min-height: 42px;
padding: 0 14px;
border: 1px solid rgba(20, 53, 40, 0.09);
border-radius: 999px;
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 13px 30px rgba(31, 54, 42, 0.1);
font-size: 10px;
font-weight: 700;
backdrop-filter: blur(12px);
}

.floating-pill-one {
left: -10px;
top: 83px;
transform: rotate(-5deg);
}

.floating-pill-two {
right: -10px;
top: 170px;
transform: rotate(5deg);
}

.match-toast {
position: absolute;
z-index: 8;
left: -25px;
bottom: 80px;
min-width: 255px;
padding: 13px 15px;
border-radius: 15px;
display: flex;
align-items: center;
gap: 11px;
background: var(--green-dark);
color: white;
box-shadow: 0 18px 38px rgba(27, 75, 53, 0.2);
transform: rotate(-4deg);
}

.toast-icon {
width: 31px;
height: 31px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--green);
color: var(--green-dark);
font-size: 12px;
font-weight: 900;
}

.match-toast div:last-child {
display: flex;
flex-direction: column;
}

.match-toast strong {
font-size: 10px;
}

.match-toast span {
margin-top: 2px;
color: rgba(255, 255, 255, 0.65);
font-size: 8px;
}

/* =========================
COMMON SECTION
========================= */

.section-container {
width: min(1240px, calc(100% - 44px));
margin: auto;
}

.section-eyebrow {
color: var(--green-strong);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}

.section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 60px;
}

.section-header h2,
.how-heading h2,
.why-copy h2 {
margin-top: 14px;
font-family: "Manrope", sans-serif;
font-size: clamp(44px, 5.7vw, 72px);
line-height: 0.99;
letter-spacing: -0.06em;
}

.section-header h2 span,
.how-heading h2 span,
.why-copy h2 span {
color: var(--green-strong);
}

.section-header > p {
max-width: 420px;
color: var(--ink-soft);
font-size: 14px;
line-height: 1.7;
}

/* =========================
SPORTS
========================= */

.sports-section {
padding: 118px 0;
background: var(--surface);
}

.sports-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 58px;
}

.sport-card {
min-height: 265px;
padding: 23px;
border: 1px solid var(--border);
border-radius: 22px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: #fafaf5;
transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease, color 0.24s ease;
cursor: pointer;
}

.sport-card:hover {
transform: translateY(-7px);
box-shadow: 0 22px 45px rgba(26, 55, 42, 0.08);
}

.sport-card.active {
background: var(--green-dark);
color: white;
transform: translateY(-5px);
}

.sport-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}

.sport-top > span {
color: #96a39b;
font-family: "Manrope", sans-serif;
font-size: 9px;
font-weight: 700;
}

.sport-card.active .sport-top > span {
color: rgba(255, 255, 255, 0.45);
}

.sport-icon {
width: 63px;
height: 63px;
border-radius: 18px;
display: grid;
place-items: center;
background: #eeefe6;
font-size: 30px;
}

.sport-card.active .sport-icon {
background: rgba(255, 255, 255, 0.1);
}

.sport-bottom h3 {
font-family: "Manrope", sans-serif;
font-size: 20px;
letter-spacing: -0.03em;
}

.sport-bottom p {
margin-top: 7px;
color: var(--ink-soft);
font-size: 11px;
}

.sport-card.active .sport-bottom p {
color: rgba(255, 255, 255, 0.58);
}

/* =========================
HOW IT WORKS
========================= */

.how-section {
padding: 125px 0;
}

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

.steps-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 66px;
}

.step-card {
position: relative;
min-height: 285px;
padding: 25px;
border: 1px solid var(--border);
border-radius: 22px;
background: rgba(255, 255, 255, 0.47);
}

.step-number {
color: #9caaa2;
font-family: "Manrope", sans-serif;
font-size: 9px;
font-weight: 700;
}

.step-icon {
width: 54px;
height: 54px;
margin-top: 32px;
border-radius: 17px;
display: grid;
place-items: center;
background: var(--green);
color: var(--green-dark);
font-family: "Manrope", sans-serif;
font-size: 22px;
font-weight: 800;
}

.step-card h3 {
margin-top: 31px;
font-family: "Manrope", sans-serif;
font-size: 17px;
letter-spacing: -0.025em;
}

.step-card p {
margin-top: 10px;
color: var(--ink-soft);
font-size: 11px;
line-height: 1.65;
}

/* =========================
WHY SECTION
========================= */

.why-section {
padding: 125px 0;
background: var(--surface);
}

.why-container {
width: min(1240px, calc(100% - 44px));
margin: auto;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 90px;
align-items: center;
}

.why-copy p {
max-width: 510px;
margin-top: 24px;
color: var(--ink-soft);
font-size: 14px;
line-height: 1.75;
}

.why-copy .primary-btn {
margin-top: 31px;
}

.feature-stack {
display: flex;
flex-direction: column;
gap: 12px;
}

.feature-card {
min-height: 125px;
padding: 20px;
border: 1px solid var(--border);
border-radius: 22px;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 18px;
background: #fafaf5;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.feature-card:hover {
transform: translateX(-6px);
box-shadow: 0 18px 40px rgba(20, 53, 40, 0.07);
}

.feature-icon {
width: 58px;
height: 58px;
border-radius: 18px;
display: grid;
place-items: center;
background: var(--green);
color: var(--green-dark);
font-size: 23px;
font-weight: 800;
}

.feature-card h3 {
font-family: "Manrope", sans-serif;
font-size: 15px;
}

.feature-card p {
margin-top: 5px;
color: var(--ink-soft);
font-size: 10px;
line-height: 1.55;
}

/* =========================
FINAL CTA
========================= */

.final-cta {
position: relative;
min-height: 480px;
display: grid;
place-items: center;
overflow: hidden;
background: var(--green-dark);
color: white;
text-align: center;
}

.cta-content {
position: relative;
z-index: 3;
}

.cta-content > span {
color: var(--green);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.17em;
}

.cta-content h2 {
margin-top: 18px;
font-family: "Manrope", sans-serif;
font-size: clamp(52px, 7vw, 91px);
line-height: 0.93;
letter-spacing: -0.065em;
}

.cta-content h2 strong {
color: var(--green);
font-weight: 800;
}

.cta-btn {
min-height: 55px;
margin-top: 34px;
padding: 0 23px;
border-radius: 15px;
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--green);
color: var(--green-dark);
font-size: 12px;
font-weight: 800;
transition: transform 0.2s ease;
}

.cta-btn:hover {
transform: translateY(-3px) scale(1.02);
}

.cta-orbit {
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
}

.orbit-a {
width: 550px;
height: 550px;
}

.orbit-b {
width: 850px;
height: 850px;
}

/* =========================
FOOTER
========================= */

.footer {
padding: 35px 0;
background: #0f2c21;
color: white;
}

.footer-container {
width: min(1240px, calc(100% - 44px));
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}

.footer-brand .brand-mark {
background: var(--green);
color: var(--green-dark);
}

.footer-brand .brand-text span {
color: rgba(255, 255, 255, 0.5);
}

.footer-container > p,
.footer-container > span {
color: rgba(255, 255, 255, 0.55);
font-size: 10px;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 1050px) {
.nav-links {
display: none;
}


.hero-container {
    grid-template-columns: 1fr;
    padding-top: 65px;
    text-align: center;
}

.hero-description {
    margin-left: auto;
    margin-right: auto;
}

.hero-actions,
.hero-proof {
    justify-content: center;
}

.hero-visual {
    min-height: 650px;
}

.sports-grid,
.steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.why-container {
    grid-template-columns: 1fr;
    gap: 60px;
}


}

@media (max-width: 700px) {
.nav-container,
.section-container,
.why-container,
.footer-container,
.hero-container {
width: min(100% - 28px, 1240px);
}


.brand-text span,
.text-btn {
    display: none;
}

.nav-cta {
    min-height: 42px;
    padding: 0 13px;
    font-size: 11px;
}

.hero-container {
    min-height: auto;
    padding: 52px 0 85px;
}

.hero h1 {
    font-size: clamp(52px, 16vw, 76px);
}

.hero-description {
    font-size: 14px;
}

.hero-actions {
    flex-direction: column;
    align-items: stretch;
}

.primary-btn,
.secondary-btn {
    width: 100%;
}

.hero-visual {
    min-height: 590px;
}

.player-card {
    width: calc(100% - 20px);
}

.floating-pill-one {
    left: -4px;
}

.floating-pill-two {
    right: -4px;
}

.match-toast {
    left: -1px;
    min-width: 225px;
}

.section-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
}

.sports-grid,
.steps-grid {
    grid-template-columns: 1fr;
}

.sport-card {
    min-height: 215px;
}

.footer-container {
    flex-direction: column;
    align-items: flex-start;
}


}
/* =====================================================
AUTH PAGE
===================================================== */

.auth-page {
min-height: 100vh;
background: #f7f6ef;
}

.auth-layout {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr);
}

/* LEFT SHOWCASE */

.auth-showcase {
position: relative;
min-height: 100vh;
padding: 46px 56px;
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--green-dark);
color: white;
}

.auth-showcase::before {
content: "";
position: absolute;
width: 620px;
height: 620px;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 50%;
right: -280px;
top: -190px;
}

.auth-showcase::after {
content: "";
position: absolute;
width: 440px;
height: 440px;
border-radius: 50%;
left: -230px;
bottom: -170px;
background: rgba(184, 239, 80, 0.07);
}

.auth-brand {
position: relative;
z-index: 3;
}

.auth-brand .brand-mark {
background: var(--green);
color: var(--green-dark);
}

.auth-brand .brand-text span {
color: rgba(255, 255, 255, 0.55);
}

.auth-showcase-content {
position: relative;
z-index: 3;
width: 100%;
max-width: 570px;
margin: auto 0;
}

.auth-mini-label {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--green);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.14em;
}

.auth-mini-label > span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 5px rgba(184, 239, 80, 0.1);
}

.auth-showcase h1 {
margin-top: 25px;
font-family: "Manrope", sans-serif;
font-size: clamp(54px, 5.5vw, 82px);
line-height: 0.94;
letter-spacing: -0.065em;
}

.auth-showcase h1 span {
color: var(--green);
}

.auth-showcase-content > p {
max-width: 480px;
margin-top: 25px;
color: rgba(255, 255, 255, 0.61);
font-size: 14px;
line-height: 1.75;
}

.auth-preview-card {
max-width: 460px;
margin-top: 45px;
padding: 17px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 22px;
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(15px);
}

.auth-preview-top {
display: flex;
align-items: center;
gap: 13px;
}

.preview-avatars {
display: flex;
}

.preview-avatars span {
width: 32px;
height: 32px;
margin-left: -7px;
border: 2px solid var(--green-dark);
border-radius: 50%;
display: grid;
place-items: center;
background: #dbe4d9;
color: var(--green-dark);
font-size: 9px;
font-weight: 800;
}

.preview-avatars span:first-child {
margin-left: 0;
}

.auth-preview-top > div:last-child {
display: flex;
flex-direction: column;
}

.auth-preview-top strong {
font-size: 10px;
}

.auth-preview-top small {
margin-top: 2px;
color: rgba(255, 255, 255, 0.46);
font-size: 8px;
}

.preview-match {
margin-top: 17px;
min-height: 78px;
padding: 13px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 13px;
background: white;
color: var(--ink);
}

.preview-sport {
width: 47px;
height: 47px;
flex-shrink: 0;
border-radius: 14px;
display: grid;
place-items: center;
background: #edf4df;
font-size: 22px;
}

.preview-info {
flex: 1;
display: flex;
flex-direction: column;
}

.preview-info strong {
font-family: "Manrope", sans-serif;
font-size: 12px;
}

.preview-info span {
margin-top: 3px;
color: var(--ink-soft);
font-size: 9px;
}

.preview-score {
width: 48px;
height: 48px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--green);
color: var(--green-dark);
font-size: 11px;
font-weight: 800;
}

.auth-showcase-footer {
position: relative;
z-index: 3;
color: rgba(255, 255, 255, 0.35);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}

/* RIGHT PANEL */

.auth-panel {
min-height: 100vh;
padding: 55px 40px;
display: grid;
place-items: center;
}

.auth-box {
width: min(450px, 100%);
}

.auth-mobile-brand {
display: none;
}

.auth-back {
padding: 0;
background: transparent;
color: var(--ink-soft);
font-size: 11px;
font-weight: 700;
transition: color 0.2s ease, transform 0.2s ease;
}

.auth-back:hover {
color: var(--ink);
transform: translateX(-3px);
}

.auth-heading {
margin-top: 55px;
}

.auth-heading > span {
color: var(--green-strong);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.14em;
}

.auth-heading h2 {
margin-top: 11px;
font-family: "Manrope", sans-serif;
font-size: 42px;
line-height: 1;
letter-spacing: -0.055em;
}

.auth-heading p {
max-width: 370px;
margin-top: 13px;
color: var(--ink-soft);
font-size: 12px;
line-height: 1.6;
}

/* TABS */

.auth-tabs {
margin-top: 34px;
padding: 4px;
border-radius: 14px;
display: grid;
grid-template-columns: 1fr 1fr;
background: #eaeae2;
}

.auth-tab {
min-height: 43px;
border-radius: 11px;
background: transparent;
color: #78847d;
font-size: 11px;
font-weight: 800;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.auth-tab.active {
background: white;
color: var(--ink);
box-shadow: 0 5px 15px rgba(20, 53, 40, 0.07);
}

/* FORM */

.auth-form {
margin-top: 29px;
}

.auth-form.hidden {
display: none;
}

.auth-field {
margin-top: 17px;
}

.auth-field:first-child {
margin-top: 0;
}

.auth-field label {
display: block;
margin-bottom: 8px;
color: #3f5449;
font-size: 10px;
font-weight: 800;
}

.field-label-row {
display: flex;
align-items: center;
justify-content: space-between;
}

.field-label-row span {
margin-bottom: 8px;
color: #99a29d;
font-size: 9px;
}

.auth-field input {
width: 100%;
height: 52px;
padding: 0 15px;
border: 1px solid rgba(20, 53, 40, 0.12);
outline: none;
border-radius: 13px;
background: white;
color: var(--ink);
font-family: "DM Sans", sans-serif;
font-size: 12px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-field input::placeholder {
color: #a5ada8;
}

.auth-field input:focus {
border-color: #91bd43;
box-shadow: 0 0 0 4px rgba(184, 239, 80, 0.13);
}

.password-wrapper {
position: relative;
}

.password-wrapper input {
padding-right: 65px;
}

.password-toggle {
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
padding: 6px;
background: transparent;
color: var(--green-strong);
font-size: 9px;
font-weight: 800;
}

.forgot-password {
margin-bottom: 8px;
background: transparent;
color: var(--green-strong);
font-size: 9px;
font-weight: 800;
}

.auth-submit {
width: 100%;
height: 54px;
margin-top: 24px;
padding: 0 18px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 11px;
background: var(--green-dark);
color: white;
font-size: 12px;
font-weight: 800;
box-shadow: 0 14px 30px rgba(27, 75, 53, 0.13);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.auth-submit:hover {
transform: translateY(-2px);
box-shadow: 0 19px 35px rgba(27, 75, 53, 0.18);
}

.auth-submit span {
color: var(--green);
font-size: 17px;
}

.auth-terms {
max-width: 350px;
margin: 13px auto 0;
color: #9aa39e;
font-size: 8px;
line-height: 1.55;
text-align: center;
}

.auth-security {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--border);
display: flex;
align-items: flex-start;
gap: 9px;
}

.auth-security > span {
width: 21px;
height: 21px;
flex-shrink: 0;
border-radius: 50%;
display: grid;
place-items: center;
background: #e8f3d6;
color: #67901c;
font-size: 8px;
font-weight: 900;
}

.auth-security p {
color: #89958e;
font-size: 9px;
line-height: 1.55;
}

/* AUTH RESPONSIVE */

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


.auth-showcase {
    display: none;
}

.auth-panel {
    padding: 35px 22px 60px;
}

.auth-mobile-brand {
    display: block;
    margin-bottom: 50px;
}

.auth-heading {
    margin-top: 35px;
}




@media (max-width: 500px) {
.auth-panel {
place-items: start center;
}


.auth-heading h2 {
    font-size: 37px;
}}}
/* =====================================================
   ONBOARDING PAGE
===================================================== */

.onboarding-page {
    min-height: 100vh;
    background: #f7f6ef;
}

.onboarding-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 0.72fr) minmax(650px, 1.28fr);
}

/* LEFT PANEL */

.onboarding-side {
    position: relative;
    min-height: 100vh;
    padding: 42px 48px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--green-dark);
    color: white;
}

.onboarding-side::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -300px;
    top: -180px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
}

.onboarding-side::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    left: -260px;
    bottom: -230px;
    border-radius: 50%;
    background: rgba(184, 239, 80, 0.07);
}

.onboarding-brand {
    position: relative;
    z-index: 3;
}

.onboarding-brand .brand-mark {
    background: var(--green);
    color: var(--green-dark);
}

.onboarding-brand .brand-text span {
    color: rgba(255, 255, 255, 0.5);
}

.onboarding-side-content {
    position: relative;
    z-index: 3;
    margin: auto 0;
}

.onboarding-kicker {
    color: var(--green);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.onboarding-side h1 {
    margin-top: 20px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(50px, 4.7vw, 74px);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.onboarding-side h1 span {
    color: var(--green);
}

.onboarding-side-content > p {
    max-width: 440px;
    margin-top: 25px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.75;
}

.onboarding-side-points {
    margin-top: 42px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.onboarding-side-points div {
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: rgba(255, 255, 255, 0.04);
}

.onboarding-side-points span {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(184, 239, 80, 0.13);
    color: var(--green);
    font-size: 8px;
    font-weight: 800;
}

.onboarding-side-points p {
    font-size: 10px;
    font-weight: 600;
}

.onboarding-side-footer {
    position: relative;
    z-index: 3;
    color: rgba(255, 255, 255, 0.36);
    font-size: 9px;
}

/* MAIN PANEL */

.onboarding-main {
    min-height: 100vh;
    padding: 40px 55px 55px;
}

.onboarding-shell {
    width: min(900px, 100%);
    margin: auto;
}

.onboarding-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.onboarding-back {
    padding: 8px 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 700;
}

.onboarding-step-count {
    color: #8b9991;
    font-size: 10px;
    font-weight: 700;
}

.onboarding-step-count span:first-child {
    color: var(--ink);
}

/* PROGRESS */

.onboarding-progress {
    margin-top: 35px;
}

.progress-track {
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: #e4e5dd;
}

.progress-fill {
    width: 20%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--green-strong), var(--green));
    transition: width 0.35s ease;
}

.progress-labels {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    color: #9ba49f;
    font-size: 8px;
    text-align: center;
}

/* STEPS */

.onboarding-step {
    display: none;
    padding: 56px 0 20px;
}

.onboarding-step.active {
    display: block;
    animation: onboardingFade 0.35s ease;
}

.onboarding-step[hidden] {
    display: none !important;
}

.verified-profile-note {
    margin-bottom: 26px;
    padding: 14px 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #eef8d9;
    color: var(--ink);
}

.verified-profile-note span {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green-dark);
    color: var(--green);
    font-weight: 800;
}

.verified-profile-note p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.verified-profile-note strong {
    color: var(--ink);
}

@keyframes onboardingFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-heading > span {
    color: var(--green-strong);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.step-heading h2 {
    margin-top: 12px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(36px, 4.4vw, 55px);
    line-height: 1;
    letter-spacing: -0.055em;
}

.step-heading p {
    max-width: 550px;
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.65;
}

/* CHOICES */

.choice-grid {
    display: grid;
    gap: 12px;
    margin-top: 34px;
}

.sport-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.three-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.four-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.select-card {
    position: relative;
    min-height: 118px;
    padding: 18px;
    border: 1px solid rgba(20, 53, 40, 0.11);
    border-radius: 19px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    color: var(--ink);
    text-align: left;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.select-card:hover {
    transform: translateY(-3px);
    border-color: rgba(136, 186, 45, 0.45);
    box-shadow: 0 14px 28px rgba(20, 53, 40, 0.06);
}

.select-card.active {
    border-color: var(--green-strong);
    background: #f3f9e8;
    box-shadow: 0 0 0 3px rgba(184, 239, 80, 0.11);
}

.select-card-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: #eef1e7;
    font-size: 26px;
}

.select-card.active .select-card-icon {
    background: var(--green);
}

.select-card-copy {
    display: flex;
    flex-direction: column;
}

.select-card strong {
    font-family: "Manrope", sans-serif;
    font-size: 13px;
}

.select-card span {
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 9px;
}

.select-indicator {
    position: absolute;
    right: 13px;
    top: 13px;
    width: 22px;
    height: 22px;
    border: 1px solid #d7ddd9;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: white;
    color: transparent;
    font-size: 9px;
    font-weight: 900;
}

.select-card.active .select-indicator {
    border-color: var(--green-strong);
    background: var(--green);
    color: var(--green-dark);
}

/* FIELD BLOCK */

.onboarding-field-block {
    margin-top: 36px;
}

.block-label {
    display: block;
    color: #53675c;
    font-size: 10px;
    font-weight: 800;
}

.onboarding-field-block .choice-grid {
    margin-top: 12px;
}

.compact-card {
    min-height: 105px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.mini-card {
    min-height: 95px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.mini-card strong {
    font-size: 17px;
}

/* DAYS */

.multi-choice-row {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.multi-choice-row button {
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 800;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.multi-choice-row button.active {
    border-color: var(--green-strong);
    background: var(--green);
    color: var(--green-dark);
}

/* REVIEW */

.review-card {
    margin-top: 34px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: white;
    box-shadow: 0 18px 42px rgba(20, 53, 40, 0.06);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 13px;
}

.review-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-weight: 900;
}

.review-header > div:last-child {
    display: flex;
    flex-direction: column;
}

.review-header span {
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.review-header h3 {
    margin-top: 3px;
    font-family: "Manrope", sans-serif;
    font-size: 18px;
}

.review-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.review-item {
    min-height: 82px;
    padding: 15px;
    border-radius: 15px;
    background: #f7f8f2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.review-item span {
    color: #95a098;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.review-item strong {
    margin-top: 5px;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
}

.review-wide {
    grid-column: span 2;
}

.privacy-note {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 15px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: #edf4df;
}

.privacy-note > div {
    width: 29px;
    height: 29px;
    flex-shrink: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: white;
    color: var(--green-dark);
    font-weight: 800;
}

.privacy-note p {
    color: #60705f;
    font-size: 9px;
    line-height: 1.55;
}

/* ACTIONS */

.onboarding-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.onboarding-primary,
.onboarding-secondary {
    min-height: 50px;
    padding: 0 19px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 800;
}

.onboarding-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--green-dark);
    color: white;
    box-shadow: 0 14px 28px rgba(27, 75, 53, 0.13);
}

.onboarding-primary span {
    color: var(--green);
    font-size: 16px;
}

.onboarding-secondary {
    background: transparent;
    color: var(--ink-soft);
}

.onboarding-secondary:disabled {
    opacity: 0;
    pointer-events: none;
}

/* RESPONSIVE */

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

    .onboarding-side {
        min-height: auto;
        padding: 30px 35px;
    }

    .onboarding-side-content,
    .onboarding-side-footer {
        display: none;
    }

    .onboarding-main {
        min-height: auto;
        padding: 35px 30px 55px;
    }
}

@media (max-width: 720px) {
    .onboarding-main {
        padding: 28px 16px 45px;
    }

    .sport-choice-grid,
    .three-column,
    .two-column {
        grid-template-columns: 1fr;
    }

    .four-column {
        grid-template-columns: repeat(2, 1fr);
    }

    .multi-choice-row {
        grid-template-columns: repeat(4, 1fr);
    }

    .progress-labels {
        display: none;
    }

    .review-grid {
        grid-template-columns: 1fr;
    }

    .review-wide {
        grid-column: auto;
    }
}

/* =====================================================
   BUDDY DISCOVERY
===================================================== */

.discovery-page {
    min-height: 100vh;
    background: #f7f6ef;
}

/* NAVBAR */

.discovery-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(20, 53, 40, 0.08);
    background: rgba(247, 246, 239, 0.9);
    backdrop-filter: blur(18px);
}

.discovery-nav-inner {
    width: min(1240px, calc(100% - 44px));
    height: 78px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.discovery-nav-links {
    display: flex;
    align-items: center;
    gap: 31px;
}

.discovery-nav-links a {
    position: relative;
    color: #6f7e75;
    font-size: 11px;
    font-weight: 700;
}

.discovery-nav-links a.active {
    color: var(--ink);
}

.discovery-nav-links a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -15px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-strong);
    transform: translateX(-50%);
}

.discovery-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-location {
    min-height: 41px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: white;
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 700;
}

.nav-location > span:first-child {
    color: var(--green-strong);
    font-size: 14px;
}

.nav-profile {
    width: 41px;
    height: 41px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--green-dark);
    color: var(--green);
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

/* MAIN */

.discovery-main {
    width: min(1240px, calc(100% - 44px));
    margin: auto;
    padding: 74px 0 100px;
}

/* INTRO */

.discovery-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
}

.discovery-eyebrow {
    color: var(--green-strong);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.discovery-intro h1 {
    margin-top: 15px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(48px, 6vw, 78px);
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.discovery-intro h1 span {
    color: var(--green-strong);
}

.discovery-intro p {
    max-width: 530px;
    margin-top: 20px;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.7;
}

.edit-preferences-btn {
    min-height: 54px;
    padding: 0 12px 0 22px;
    border: 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--green-dark);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(27, 75, 53, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.edit-preferences-btn span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 15px;
    transition: transform 0.3s ease;
}

.edit-preferences-btn:hover {
    transform: translateY(-2px);
    background: var(--green);
    color: var(--green-dark);
    box-shadow: 0 18px 34px rgba(136, 186, 45, 0.4);
}

.edit-preferences-btn:hover span {
    background: var(--green-dark);
    color: var(--green);
    transform: rotate(60deg);
}

.edit-preferences-btn:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px;
}

/* SUMMARY */

.matching-summary {
    margin-top: 48px;
    padding: 22px 26px;
    border: 1px solid rgba(136, 186, 45, 0.35);
    border-radius: 26px;
    display: flex;
    align-items: stretch;
    gap: 28px;
    background: linear-gradient(135deg, #ffffff 0%, #f4fbe4 100%);
    box-shadow: 0 18px 40px rgba(31, 54, 42, 0.07);
}

.matching-summary-label {
    min-width: 150px;
    padding: 0 20px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--green-dark);
    color: var(--green);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.summary-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(184, 239, 80, 0.25);
    animation: summaryPulse 1.8s ease-in-out infinite;
}

@keyframes summaryPulse {
    50% { box-shadow: 0 0 0 8px rgba(184, 239, 80, 0); }
}

.matching-summary-items {
    flex: 1;
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 12px;
}

.matching-summary-items > div {
    min-height: 74px;
    padding: 12px 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
}

.matching-summary-items span {
    color: var(--green-strong);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.matching-summary-items strong {
    margin-top: 6px;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* CONTROLS */

.discovery-controls {
    margin-top: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.discovery-result-info {
    display: flex;
    flex-direction: column;
}

.discovery-result-info strong {
    font-family: "Manrope", sans-serif;
    font-size: 18px;
}

.discovery-result-info span {
    margin-top: 3px;
    color: #929d96;
    font-size: 9px;
}

.discovery-filter-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.discovery-filter {
    min-height: 39px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 800;
}

.discovery-filter.active {
    border-color: var(--green-dark);
    background: var(--green-dark);
    color: white;
}

/* PLAYER GRID */

.discovery-player-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.discovery-card {
    position: relative;
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 23px;
    background: white;
    transition: transform 0.23s ease, box-shadow 0.23s ease;
}

.discovery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 45px rgba(20, 53, 40, 0.08);
}

.discovery-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.player-online {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #668b23;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.player-online::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green-strong);
}

.player-distance {
    color: #929d96;
    font-size: 9px;
    font-weight: 700;
}

/* PROFILE AREA */

.discovery-card-profile {
    margin-top: 17px;
    min-height: 180px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #edf2e4, #f4f4ed);
}

.discovery-avatar {
    width: 90px;
    height: 90px;
    border: 7px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #d9e4d9;
    color: #4f6a5b;
    font-family: "Manrope", sans-serif;
    font-size: 30px;
    font-weight: 800;
}

.discovery-match-score {
    position: absolute;
    right: 31px;
    top: 151px;
    width: 57px;
    height: 57px;
    border: 4px solid white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--green);
    color: var(--green-dark);
}

.discovery-match-score strong {
    font-family: "Manrope", sans-serif;
    font-size: 12px;
}

.discovery-match-score span {
    font-size: 6px;
    font-weight: 800;
    text-transform: uppercase;
}

/* CARD INFO */

.discovery-card-info {
    margin-top: 18px;
}

.discovery-card-info h3 {
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    letter-spacing: -0.035em;
}

.discovery-card-meta {
    margin-top: 5px;
    color: var(--ink-soft);
    font-size: 9px;
}

.discovery-tags {
    margin-top: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.discovery-tags span {
    padding: 6px 8px;
    border-radius: 8px;
    background: #f0f1e9;
    color: #617068;
    font-size: 8px;
    font-weight: 700;
}

.discovery-card-message {
    min-height: 38px;
    margin-top: 13px;
    color: #5f6f67;
    font-size: 12.5px;
    line-height: 1.6;
}

.discovery-card-actions {
    margin-top: 17px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.player-request-btn {
    min-height: 43px;
    border-radius: 12px;
    background: var(--green-dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
}

.player-request-btn.requested {
    background: #e8f2d8;
    color: #628622;
}

.player-view-btn {
    width: 43px;
    height: 43px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
    color: var(--ink);
    font-size: 14px;
}

/* EMPTY */

.discovery-empty {
    margin-top: 50px;
    padding: 70px 20px;
    border: 1px dashed rgba(20, 53, 40, 0.17);
    border-radius: 24px;
    text-align: center;
}

.discovery-empty.hidden {
    display: none;
}

.empty-icon {
    width: 55px;
    height: 55px;
    margin: auto;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 20px;
}

.discovery-empty h2 {
    margin-top: 18px;
    font-family: "Manrope", sans-serif;
    font-size: 25px;
}

.discovery-empty p {
    max-width: 400px;
    margin: 9px auto 0;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.6;
}

.discovery-empty button {
    min-height: 43px;
    margin-top: 18px;
    padding: 0 16px;
    border-radius: 12px;
    background: var(--green-dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
}

/* REQUEST MODAL */

.request-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(13, 34, 26, 0.46);
    backdrop-filter: blur(8px);
}

.request-modal-backdrop.hidden {
    display: none;
}

.request-modal {
    position: relative;
    width: min(430px, 100%);
    padding: 35px;
    border-radius: 26px;
    background: #f9f8f2;
    box-shadow: 0 35px 80px rgba(10, 30, 22, 0.22);
    text-align: center;
}

.modal-close {
    position: absolute;
    right: 17px;
    top: 17px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #ebece5;
    color: var(--ink-soft);
    font-size: 18px;
}

.modal-player-icon {
    width: 72px;
    height: 72px;
    margin: 5px auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-family: "Manrope", sans-serif;
    font-size: 23px;
    font-weight: 800;
}

.modal-eyebrow {
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.request-modal h2 {
    margin-top: 8px;
    font-family: "Manrope", sans-serif;
    font-size: 29px;
    letter-spacing: -0.045em;
}

.request-modal h2 span {
    color: var(--green-strong);
}

.request-modal > p {
    max-width: 330px;
    margin: 10px auto 0;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.6;
}

.modal-match-summary {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.modal-match-summary div {
    min-height: 67px;
    padding: 12px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #efefe7;
}

.modal-match-summary span {
    color: #929d96;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
}

.modal-match-summary strong {
    margin-top: 4px;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
}

.modal-send-request {
    width: 100%;
    min-height: 50px;
    margin-top: 17px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--green-dark);
    color: white;
    font-size: 10px;
    font-weight: 800;
}

.modal-send-request span {
    color: var(--green);
    font-size: 15px;
}

.modal-send-request.requested {
    background: var(--green);
    color: var(--green-dark);
}

.modal-note {
    display: block;
    margin-top: 11px;
    color: #9ba39e;
    font-size: 8px;
}

/* RESPONSIVE */

@media (max-width: 1000px) {
    .discovery-player-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discovery-nav-links {
        display: none;
    }
}

@media (max-width: 720px) {
    .discovery-main,
    .discovery-nav-inner {
        width: min(100% - 28px, 1240px);
    }

    .discovery-main {
        padding-top: 50px;
    }

    .nav-location {
        display: none;
    }

    .discovery-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .matching-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .matching-summary-items {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }

    .matching-summary-label {
        min-height: 44px;
        width: 100%;
    }

    .matching-summary-items > div:first-child {
        grid-column: 1 / -1;
    }

    .discovery-controls {
        align-items: flex-start;
        flex-direction: column;
    }

    .discovery-filter-row {
        width: 100%;
        overflow-x: auto;
    }

    .discovery-filter {
        flex-shrink: 0;
    }

    .discovery-player-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   REQUESTS PAGE
===================================================== */

.requests-page {
    min-height: 100vh;
    background: #f7f6ef;
}

/* NAVBAR */

.app-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(20, 53, 40, 0.08);
    background: rgba(247, 246, 239, 0.91);
    backdrop-filter: blur(18px);
}

.app-nav-inner {
    width: min(1240px, calc(100% - 44px));
    height: 78px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-nav-links {
    display: flex;
    align-items: center;
    gap: 31px;
}

.app-nav-links a {
    position: relative;
    color: #6f7e75;
    font-size: 11px;
    font-weight: 700;
}

.app-nav-links a.active {
    color: var(--ink);
}

.app-nav-links a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -15px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-strong);
    transform: translateX(-50%);
}

.app-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.requests-find-btn {
    min-height: 41px;
    padding: 0 15px;
    border-radius: 12px;
    background: var(--green-dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
}

.app-profile-btn {
    width: 41px;
    height: 41px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

/* MAIN */

.requests-main {
    width: min(1050px, calc(100% - 44px));
    margin: auto;
    padding: 75px 0 100px;
}

/* HERO */

.requests-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
}

.requests-eyebrow {
    color: var(--green-strong);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.requests-hero h1 {
    margin-top: 13px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(52px, 6vw, 76px);
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.requests-hero h1 span {
    color: var(--green-strong);
}

.requests-hero p {
    max-width: 510px;
    margin-top: 18px;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.7;
}

.requests-overview {
    min-width: 245px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: white;
}

.requests-overview > div {
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.requests-overview > div + div {
    border-left: 1px solid var(--border);
}

.requests-overview strong {
    font-family: "Manrope", sans-serif;
    font-size: 21px;
}

.requests-overview span {
    margin-top: 3px;
    color: #929d96;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* TABS */

.requests-tabs {
    margin-top: 55px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.requests-tab {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #7a8981;
    font-size: 10px;
    font-weight: 800;
}

.requests-tab > span {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #e7e8e1;
    color: #7a8981;
    font-size: 7px;
}

.requests-tab.active {
    background: var(--green-dark);
    color: white;
}

.requests-tab.active > span {
    background: var(--green);
    color: var(--green-dark);
}

/* REQUEST LIST */

.requests-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.request-item {
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 20px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;
    background: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.request-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 32px rgba(20, 53, 40, 0.06);
}

.request-avatar {
    width: 59px;
    height: 59px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #e8eee1;
    color: #557061;
    font-family: "Manrope", sans-serif;
    font-size: 19px;
    font-weight: 800;
}

.request-content {
    min-width: 0;
}

.request-top-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.request-top-line h3 {
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    letter-spacing: -0.025em;
}

.request-match {
    padding: 4px 7px;
    border-radius: 7px;
    background: #edf5dc;
    color: #64891f;
    font-size: 7px;
    font-weight: 800;
}

.request-description {
    margin-top: 4px;
    color: #78877f;
    font-size: 9px;
}

.request-tags {
    margin-top: 9px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.request-tags span {
    padding: 5px 7px;
    border-radius: 7px;
    background: #f0f1ea;
    color: #68776f;
    font-size: 7px;
    font-weight: 700;
}

.request-item-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.request-action-primary,
.request-action-secondary,
.request-action-danger {
    min-height: 40px;
    padding: 0 13px;
    border-radius: 11px;
    font-size: 8px;
    font-weight: 800;
}

.request-action-primary {
    background: var(--green-dark);
    color: white;
}

.request-action-secondary {
    border: 1px solid var(--border);
    background: #f8f8f3;
    color: var(--ink);
}

.request-action-danger {
    background: transparent;
    color: #9a7771;
}

.request-status {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    background: #f0f1e9;
    color: #77847d;
    font-size: 8px;
    font-weight: 800;
}

.request-status.accepted {
    background: #e8f3d7;
    color: #638821;
}

/* EMPTY */

.requests-empty {
    margin-top: 25px;
    padding: 75px 20px;
    border: 1px dashed rgba(20, 53, 40, 0.16);
    border-radius: 22px;
    text-align: center;
}

.requests-empty.hidden {
    display: none;
}

.requests-empty-icon {
    width: 55px;
    height: 55px;
    margin: auto;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 18px;
}

.requests-empty h2 {
    margin-top: 17px;
    font-family: "Manrope", sans-serif;
    font-size: 24px;
}

.requests-empty p {
    max-width: 390px;
    margin: 8px auto 0;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.6;
}

.requests-empty button {
    min-height: 43px;
    margin-top: 18px;
    padding: 0 15px;
    border-radius: 12px;
    background: var(--green-dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
}

/* CONNECTION MODAL */

.connection-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(13, 34, 26, 0.48);
    backdrop-filter: blur(8px);
}

.connection-modal-backdrop.hidden {
    display: none;
}

.connection-modal {
    position: relative;
    width: min(450px, 100%);
    padding: 38px;
    border-radius: 27px;
    background: #f9f8f2;
    text-align: center;
    box-shadow: 0 35px 80px rgba(10, 30, 22, 0.23);
}

.connection-modal-close {
    position: absolute;
    right: 17px;
    top: 17px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #e9eae3;
    color: var(--ink-soft);
    font-size: 18px;
}

.connection-success-icon {
    width: 68px;
    height: 68px;
    margin: 3px auto 19px;
    border-radius: 21px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 21px;
    font-weight: 900;
    transform: rotate(-4deg);
}

.connection-eyebrow {
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.connection-modal h2 {
    margin-top: 8px;
    font-family: "Manrope", sans-serif;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.05em;
}

.connection-modal h2 span {
    color: var(--green-strong);
}

.connection-modal > p {
    max-width: 330px;
    margin: 13px auto 0;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.65;
}

.connection-actions {
    margin-top: 25px;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 8px;
}

.connection-secondary-btn,
.connection-primary-btn {
    min-height: 49px;
    border-radius: 13px;
    font-size: 9px;
    font-weight: 800;
}

.connection-secondary-btn {
    border: 1px solid var(--border);
    background: white;
    color: var(--ink);
}

.connection-primary-btn {
    background: var(--green-dark);
    color: white;
}

.connection-primary-btn span {
    margin-left: 6px;
    color: var(--green);
}

/* RESPONSIVE */

@media (max-width: 850px) {
    .app-nav-links {
        display: none;
    }

    .request-item {
        grid-template-columns: auto 1fr;
    }

    .request-item-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 650px) {
    .requests-main,
    .app-nav-inner {
        width: min(100% - 28px, 1050px);
    }

    .requests-main {
        padding-top: 50px;
    }

    .requests-find-btn {
        display: none;
    }

    .requests-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 28px;
    }

    .requests-overview {
        width: 100%;
    }

    .requests-tabs {
        overflow-x: auto;
    }

    .requests-tab {
        flex-shrink: 0;
    }

    .request-item {
        grid-template-columns: 1fr;
    }

    .request-avatar {
        width: 52px;
        height: 52px;
    }

    .request-item-actions {
        grid-column: auto;
        justify-content: stretch;
    }

    .request-item-actions button {
        flex: 1;
    }

    .connection-actions {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   SEIAURA - CHAT
===================================================== */

.chat-page {
    height: 100vh;
    overflow: hidden;
    background: #f7f6ef;
}

.chat-back-requests {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: white;
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 800;
}

/* =====================================================
   MAIN CHAT LAYOUT
===================================================== */

.chat-main {
    width: min(1240px, calc(100% - 44px));
    height: calc(100vh - 78px);
    margin: auto;
    padding: 24px 0;
}

.chat-shell {
    height: 100%;
    border: 1px solid var(--border);
    border-radius: 25px;
    display: grid;
    grid-template-columns: 315px minmax(0, 1fr);
    overflow: hidden;
    background: white;
    box-shadow: 0 18px 50px rgba(20, 53, 40, 0.055);
}

/* =====================================================
   SIDEBAR
===================================================== */

.chat-sidebar {
    min-width: 0;
    padding: 24px 16px 16px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: #f2f2eb;
}

.chat-sidebar-heading {
    padding: 3px 7px 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.chat-sidebar-heading > div:first-child > span {
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.chat-sidebar-heading h1 {
    margin-top: 5px;
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    letter-spacing: -0.045em;
}

.chat-conversation-count {
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 8px;
    font-weight: 900;
}

.chat-conversation-list {
    flex: 1;
    overflow-y: auto;
}

.chat-conversation-item {
    width: 100%;
    padding: 12px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: transparent;
    text-align: left;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.chat-conversation-item:hover {
    background: rgba(255, 255, 255, 0.65);
}

.chat-conversation-item.active {
    background: white;
    box-shadow: 0 8px 22px rgba(20, 53, 40, 0.05);
}

.chat-list-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #dfe9d8;
    color: #4e6959;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.chat-list-avatar i {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border: 2px solid white;
    border-radius: 50%;
    background: var(--green-strong);
}

.chat-list-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.chat-list-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list-copy span {
    margin-top: 3px;
    overflow: hidden;
    color: #8c9891;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list-time {
    align-self: start;
    margin-top: 4px;
    color: #a0a9a3;
    font-size: 7px;
}

.chat-find-more {
    width: 100%;
    min-height: 59px;
    margin-top: 13px;
    padding: 10px;
    border: 1px dashed rgba(20, 53, 40, 0.18);
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    text-align: left;
}

.chat-find-more > span {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 17px;
}

.chat-find-more > div {
    display: flex;
    flex-direction: column;
}

.chat-find-more strong {
    color: var(--ink);
    font-size: 9px;
}

.chat-find-more small {
    margin-top: 2px;
    color: #909b94;
    font-size: 7px;
}

/* =====================================================
   CONVERSATION
===================================================== */

.chat-conversation {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    background: #fbfaf5;
}

/* HEADER */

.chat-conversation-header {
    min-height: 83px;
    padding: 15px 21px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: rgba(255, 255, 255, 0.75);
}

.chat-player-summary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-header-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: #dfe9d8;
    color: #4e6959;
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 800;
}

.chat-header-avatar i {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 11px;
    height: 11px;
    border: 2px solid white;
    border-radius: 50%;
    background: var(--green-strong);
}

.chat-player-name-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-player-name-line h2 {
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    letter-spacing: -0.025em;
}

.chat-connected-badge {
    padding: 4px 6px;
    border-radius: 6px;
    background: #edf5dc;
    color: #64891f;
    font-size: 6px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.chat-player-summary p {
    margin-top: 4px;
    color: #8b9890;
    font-size: 8px;
}

.chat-plan-game-btn {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--green-dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
}

.chat-plan-game-btn span {
    margin-left: 6px;
    color: var(--green);
}

/* MATCH STRIP */

.chat-match-strip {
    margin: 13px 20px 0;
    padding: 10px 13px;
    border: 1px solid #dce9c7;
    border-radius: 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: #f1f7e7;
}

.chat-match-icon {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 10px;
    font-weight: 900;
}

.chat-match-strip > div:nth-child(2) {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.chat-match-strip > div:nth-child(2) strong {
    color: #455a4e;
    font-size: 8px;
}

.chat-match-strip > div:nth-child(2) span {
    margin-top: 2px;
    color: #82917f;
    font-size: 7px;
}

.chat-match-score {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.chat-match-score strong {
    color: var(--green-dark);
    font-family: "Manrope", sans-serif;
    font-size: 12px;
}

.chat-match-score span {
    color: #899783;
    font-size: 6px;
    text-transform: uppercase;
}

/* =====================================================
   MESSAGES
===================================================== */

.chat-messages {
    min-height: 0;
    padding: 25px 22px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.chat-day-divider {
    margin: 7px 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #a1aaa4;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.chat-day-divider::before,
.chat-day-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e8e8e1;
}

.chat-message-row {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.chat-message-row.mine {
    justify-content: flex-end;
}

.chat-message-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #e2e9dc;
    color: #5d7065;
    font-size: 8px;
    font-weight: 900;
}

.chat-message-stack {
    max-width: min(68%, 520px);
    display: flex;
    flex-direction: column;
}

.chat-message-row.mine .chat-message-stack {
    align-items: flex-end;
}

.chat-message-bubble {
    padding: 10px 13px;
    border-radius: 15px 15px 15px 4px;
    background: white;
    color: #405248;
    font-size: 9px;
    line-height: 1.55;
    box-shadow: 0 4px 14px rgba(20, 53, 40, 0.045);
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-message-row.mine .chat-message-bubble {
    border-radius: 15px 15px 4px 15px;
    background: var(--green-dark);
    color: white;
}

.chat-message-time {
    margin-top: 4px;
    color: #a0a8a3;
    font-size: 6px;
}

.chat-welcome-card {
    max-width: 420px;
    margin: 10px auto 25px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: white;
    text-align: center;
}

.chat-welcome-icon {
    width: 42px;
    height: 42px;
    margin: auto;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-weight: 900;
}

.chat-welcome-card strong {
    display: block;
    margin-top: 10px;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
}

.chat-welcome-card p {
    margin-top: 5px;
    color: #89958e;
    font-size: 8px;
    line-height: 1.55;
}

/* =====================================================
   COMPOSER
===================================================== */

.chat-composer-area {
    padding: 12px 20px 15px;
    border-top: 1px solid var(--border);
    background: white;
}

.chat-quick-replies {
    margin-bottom: 9px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
}

.chat-quick-replies button {
    min-height: 29px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    flex-shrink: 0;
    background: #f7f7f1;
    color: #68776f;
    font-size: 7px;
    font-weight: 700;
}

.chat-quick-replies button:hover {
    border-color: var(--green-strong);
    background: #f1f7e7;
}

.chat-composer {
    padding: 6px;
    border: 1px solid #dfe1d9;
    border-radius: 16px;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    background: #fafaf6;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.chat-composer:focus-within {
    border-color: var(--green-strong);
    box-shadow: 0 0 0 3px rgba(184, 239, 80, 0.12);
}

.chat-input-wrap {
    min-width: 0;
    flex: 1;
}

.chat-input-wrap textarea {
    width: 100%;
    max-height: 110px;
    min-height: 38px;
    padding: 10px 9px 7px;
    border: 0;
    outline: 0;
    resize: none;
    overflow-y: auto;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 9px;
    line-height: 1.5;
}

.chat-input-wrap textarea::placeholder {
    color: #a3aba6;
}

.chat-send-btn {
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--green-dark);
    color: var(--green);
    font-size: 16px;
}

.chat-send-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.chat-composer-footer {
    margin-top: 6px;
    padding: 0 4px;
    display: flex;
    justify-content: space-between;
    color: #a3aba6;
    font-size: 6px;
}

/* =====================================================
   NO CONNECTION
===================================================== */

.chat-no-connection {
    position: fixed;
    inset: 78px 0 0;
    z-index: 40;
    padding: 20px;
    display: grid;
    place-items: center;
    background: #f7f6ef;
}

.chat-no-connection.hidden {
    display: none;
}

.chat-no-connection-card {
    width: min(470px, 100%);
    padding: 45px;
    border: 1px solid var(--border);
    border-radius: 27px;
    background: white;
    text-align: center;
    box-shadow: 0 25px 60px rgba(20, 53, 40, 0.07);
}

.chat-no-connection-icon {
    width: 60px;
    height: 60px;
    margin: auto;
    border-radius: 19px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 20px;
}

.chat-no-connection-card > span {
    display: block;
    margin-top: 20px;
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.chat-no-connection-card h2 {
    margin-top: 9px;
    font-family: "Manrope", sans-serif;
    font-size: 34px;
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.chat-no-connection-card p {
    max-width: 350px;
    margin: 12px auto 0;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.65;
}

.chat-no-connection-card button {
    min-height: 47px;
    margin-top: 22px;
    padding: 0 17px;
    border-radius: 13px;
    background: var(--green-dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
}

.chat-no-connection-card button span {
    margin-left: 6px;
    color: var(--green);
}

/* =====================================================
   CHAT RESPONSIVE
===================================================== */

@media (max-width: 850px) {

    .chat-shell {
        grid-template-columns: 1fr;
    }

    .chat-sidebar {
        display: none;
    }

    .chat-main {
        width: min(100% - 24px, 1240px);
        padding: 12px 0;
    }

}

@media (max-width: 600px) {

    .chat-page {
        overflow: auto;
    }

    .chat-main {
        height: calc(100vh - 78px);
        width: 100%;
        padding: 0;
    }

    .chat-shell {
        border: 0;
        border-radius: 0;
    }

    .chat-conversation-header {
        padding: 12px 14px;
    }

    .chat-connected-badge {
        display: none;
    }

    .chat-plan-game-btn {
        padding: 0 10px;
    }

    .chat-match-strip {
        margin: 9px 12px 0;
    }

    .chat-messages {
        padding: 20px 14px;
    }

    .chat-message-stack {
        max-width: 80%;
    }

    .chat-composer-area {
        padding: 10px 12px 12px;
    }

    .chat-composer-footer span:first-child {
        display: none;
    }

    .chat-composer-footer {
        justify-content: flex-end;
    }

}

/* =====================================================
   SEIAURA - PLAN GAME
===================================================== */

.plan-game-page {
    min-height: 100vh;
    background: #f7f6ef;
}

.game-back-chat {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: white;
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 800;
}


/* =====================================================
   MAIN
===================================================== */

.plan-game-main {
    width: min(1100px, calc(100% - 44px));
    margin: auto;
    padding: 38px 0 100px;
}


/* =====================================================
   PROGRESS
===================================================== */

.game-progress {
    max-width: 720px;
    margin: 0 auto 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-progress-item {
    display: flex;
    align-items: center;
    gap: 9px;
    opacity: 0.42;
}

.game-progress-item > span {
    width: 29px;
    height: 29px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: white;
    color: var(--ink-soft);
    font-size: 8px;
    font-weight: 900;
}

.game-progress-item > div {
    display: flex;
    flex-direction: column;
}

.game-progress-item strong {
    font-family: "Manrope", sans-serif;
    font-size: 8px;
}

.game-progress-item small {
    margin-top: 1px;
    color: #8e9992;
    font-size: 6px;
}

.game-progress-item.active {
    opacity: 1;
}

.game-progress-item.active > span {
    border-color: var(--green-dark);
    background: var(--green-dark);
    color: var(--green);
}

.game-progress-line {
    width: 52px;
    height: 1px;
    margin: 0 12px;
    background: #dfe1d9;
}


/* =====================================================
   HERO
===================================================== */

.plan-game-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
}

.plan-game-eyebrow {
    color: var(--green-strong);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.plan-game-hero h1 {
    margin-top: 13px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(50px, 6vw, 75px);
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.plan-game-hero h1 span {
    color: var(--green-strong);
}

.plan-game-hero > div:first-child > p {
    max-width: 500px;
    margin-top: 18px;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.7;
}


/* =====================================================
   BUDDY CARD
===================================================== */

.game-buddy-card {
    min-width: 330px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 19px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    background: white;
}

.game-buddy-avatar {
    position: relative;
    width: 53px;
    height: 53px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #e1eadb;
    color: #536d5e;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 800;
}

.game-buddy-avatar i {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 11px;
    height: 11px;
    border: 2px solid white;
    border-radius: 50%;
    background: var(--green-strong);
}

.game-buddy-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.game-buddy-info > span {
    color: #9aa49e;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.game-buddy-info strong {
    margin-top: 3px;
    overflow: hidden;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-buddy-info small {
    margin-top: 2px;
    color: #87938c;
    font-size: 7px;
}

.game-buddy-match {
    width: 49px;
    height: 49px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #edf5dc;
}

.game-buddy-match strong {
    color: #638821;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
}

.game-buddy-match span {
    color: #819274;
    font-size: 5px;
    font-weight: 800;
    text-transform: uppercase;
}


/* =====================================================
   SCHEDULER
===================================================== */

.game-scheduler {
    margin-top: 55px;
}

.game-schedule-section {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 23px;
    background: white;
}

.game-schedule-section + .game-schedule-section {
    margin-top: 14px;
}

.game-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}

.game-section-number {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--green-dark);
    color: var(--green);
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 900;
}

.game-section-heading h2 {
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    letter-spacing: -0.025em;
}

.game-section-heading p {
    margin-top: 2px;
    color: #909b94;
    font-size: 8px;
}


/* =====================================================
   DATE SELECTOR
===================================================== */

.game-date-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.game-date-option {
    min-height: 95px;
    padding: 11px 6px;
    border: 1px solid var(--border);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fafaf6;
    color: var(--ink);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.game-date-option:hover {
    transform: translateY(-2px);
    border-color: #b8c6ad;
}

.game-date-option .date-day {
    color: #8d9991;
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.game-date-option .date-number {
    margin-top: 5px;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 800;
}

.game-date-option .date-month {
    margin-top: 2px;
    color: #98a29c;
    font-size: 6px;
    font-weight: 700;
    text-transform: uppercase;
}

.game-date-option.active {
    border-color: var(--green-dark);
    background: var(--green-dark);
    color: white;
}

.game-date-option.active .date-day,
.game-date-option.active .date-month {
    color: var(--green);
}


/* =====================================================
   TIME
===================================================== */

.game-time-groups {
    margin-top: 23px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.game-time-label {
    display: block;
    margin-bottom: 8px;
    color: #909b94;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.game-time-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.game-time-option {
    min-height: 47px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fafaf6;
    color: var(--ink-soft);
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 800;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.game-time-option:hover {
    transform: translateY(-2px);
    border-color: #b8c6ad;
}

.game-time-option.active {
    border-color: var(--green);
    background: var(--green);
    color: var(--green-dark);
}


/* =====================================================
   SUMMARY
===================================================== */

.game-selection-summary {
    position: sticky;
    bottom: 18px;
    z-index: 20;
    margin-top: 20px;
    padding: 17px 18px;
    border: 1px solid rgba(20, 53, 40, 0.12);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: rgba(247, 246, 239, 0.94);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 45px rgba(20, 53, 40, 0.1);
}

.game-selection-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 22px;
}

.game-selection-label {
    color: var(--green-strong);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.game-selection-values {
    display: flex;
    align-items: center;
    gap: 19px;
}

.game-selection-values > div:not(.game-selection-divider) {
    display: flex;
    flex-direction: column;
}

.game-selection-values span {
    color: #959f99;
    font-size: 6px;
    font-weight: 700;
    text-transform: uppercase;
}

.game-selection-values strong {
    margin-top: 3px;
    font-family: "Manrope", sans-serif;
    font-size: 9px;
}

.game-selection-divider {
    width: 1px;
    height: 30px;
    background: #dfe1d9;
}

.game-continue-btn {
    min-height: 48px;
    padding: 0 19px;
    border-radius: 13px;
    flex-shrink: 0;
    background: var(--green-dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
}

.game-continue-btn span {
    margin-left: 7px;
    color: var(--green);
}

.game-continue-btn:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}


/* =====================================================
   NO CONNECTION
===================================================== */

.game-no-connection {
    position: fixed;
    inset: 78px 0 0;
    z-index: 45;
    padding: 20px;
    display: grid;
    place-items: center;
    background: #f7f6ef;
}

.game-no-connection.hidden {
    display: none;
}

.game-no-connection-card {
    width: min(470px, 100%);
    padding: 45px;
    border: 1px solid var(--border);
    border-radius: 27px;
    background: white;
    text-align: center;
    box-shadow: 0 25px 60px rgba(20, 53, 40, 0.07);
}

.game-no-connection-icon {
    width: 60px;
    height: 60px;
    margin: auto;
    border-radius: 19px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 20px;
}

.game-no-connection-card > span {
    display: block;
    margin-top: 20px;
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.game-no-connection-card h2 {
    margin-top: 9px;
    font-family: "Manrope", sans-serif;
    font-size: 34px;
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.game-no-connection-card p {
    max-width: 350px;
    margin: 12px auto 0;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.65;
}

.game-no-connection-card button {
    min-height: 47px;
    margin-top: 22px;
    padding: 0 17px;
    border-radius: 13px;
    background: var(--green-dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 850px) {

    .plan-game-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
    }

    .game-buddy-card {
        width: 100%;
        min-width: 0;
    }

    .game-progress-item > div {
        display: none;
    }

    .game-progress-line {
        flex: 1;
    }

    .game-date-grid {
        grid-template-columns: repeat(4, 1fr);
    }

}

@media (max-width: 650px) {

    .plan-game-main {
        width: min(100% - 28px, 1100px);
    }

    .game-back-chat {
        display: none;
    }

    .game-progress {
        margin-bottom: 45px;
    }

    .game-date-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .game-date-option {
        min-height: 82px;
    }

    .game-time-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .game-schedule-section {
        padding: 20px;
    }

    .game-selection-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .game-selection-left {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .game-selection-values {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .game-continue-btn {
        width: 100%;
    }

}

/* =====================================================
   SEIAURA - VENUES
===================================================== */

.venues-page {
    min-height: 100vh;
    background: #f7f6ef;
}

.venue-back-btn {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: white;
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 800;
}

.venues-main {
    width: min(1100px, calc(100% - 44px));
    margin: auto;
    padding: 38px 0 110px;
}


/* PROGRESS COMPLETED */

.game-progress-item.completed {
    opacity: 1;
}

.game-progress-item.completed > span {
    border-color: var(--green);
    background: var(--green);
    color: var(--green-dark);
}

.game-progress-line.completed {
    background: var(--green-strong);
}


/* =====================================================
   HERO
===================================================== */

.venues-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 45px;
}

.venues-eyebrow {
    color: var(--green-strong);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.venues-hero h1 {
    margin-top: 13px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(50px, 6vw, 75px);
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.venues-hero h1 span {
    color: var(--green-strong);
}

.venues-hero > div:first-child > p {
    max-width: 480px;
    margin-top: 18px;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.7;
}


/* =====================================================
   GAME CONTEXT
===================================================== */

.venue-game-context {
    min-width: 390px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: white;
}

.venue-context-label {
    color: var(--green-strong);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.venue-context-row {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.venue-context-row > div {
    min-width: 0;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
}

.venue-context-row > div:first-child {
    padding-left: 0;
}

.venue-context-row > div + div {
    border-left: 1px solid var(--border);
}

.venue-context-row span {
    color: #969f99;
    font-size: 6px;
    font-weight: 700;
    text-transform: uppercase;
}

.venue-context-row strong {
    margin-top: 4px;
    overflow: hidden;
    font-family: "Manrope", sans-serif;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================
   TOOLBAR
===================================================== */

.venue-toolbar {
    margin-top: 55px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.venue-toolbar > div:first-child {
    display: flex;
    flex-direction: column;
}

.venue-toolbar > div:first-child strong {
    font-family: "Manrope", sans-serif;
    font-size: 16px;
}

.venue-toolbar > div:first-child span {
    margin-top: 3px;
    color: #929d96;
    font-size: 8px;
}

.venue-filters {
    display: flex;
    align-items: center;
    gap: 6px;
}

.venue-filter {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 8px;
    font-weight: 800;
}

.venue-filter.active {
    border-color: var(--green-dark);
    background: var(--green-dark);
    color: white;
}


/* =====================================================
   VENUE GRID
===================================================== */

.venue-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.venue-card {
    position: relative;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 21px;
    background: white;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.venue-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(20, 53, 40, 0.06);
}

.venue-card.selected {
    border-color: var(--green-strong);
    box-shadow: 0 0 0 3px rgba(184, 239, 80, 0.12);
}

.venue-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.venue-type {
    padding: 6px 8px;
    border-radius: 8px;
    background: #eef1e8;
    color: #66756d;
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.venue-distance {
    color: #909b94;
    font-size: 8px;
    font-weight: 700;
}

.venue-card-visual {
    position: relative;
    min-height: 135px;
    margin-top: 14px;
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background:
        linear-gradient(
            145deg,
            #e7eddf,
            #f2f3eb
        );
}

.venue-court-lines {
    position: relative;
    width: 110px;
    height: 70px;
    border: 2px solid rgba(55, 88, 68, 0.35);
    border-radius: 3px;
}

.venue-court-lines::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(55, 88, 68, 0.3);
}

.venue-court-lines::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: rgba(55, 88, 68, 0.3);
}

.venue-selected-check {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 29px;
    height: 29px;
    border-radius: 10px;
    display: none;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 10px;
    font-weight: 900;
}

.venue-card.selected .venue-selected-check {
    display: grid;
}

.venue-card-body {
    margin-top: 15px;
}

.venue-card-body h3 {
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    letter-spacing: -0.025em;
}

.venue-location {
    margin-top: 4px;
    color: #87938c;
    font-size: 8px;
}

.venue-features {
    margin-top: 11px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.venue-features span {
    padding: 5px 7px;
    border-radius: 7px;
    background: #f1f2eb;
    color: #68776f;
    font-size: 7px;
    font-weight: 700;
}

.venue-card-bottom {
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.venue-price {
    display: flex;
    flex-direction: column;
}

.venue-price span {
    color: #969f99;
    font-size: 6px;
    text-transform: uppercase;
}

.venue-price strong {
    margin-top: 2px;
    color: var(--ink);
    font-family: "Manrope", sans-serif;
    font-size: 11px;
}

.venue-availability {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #688c29;
    font-size: 7px;
    font-weight: 800;
}

.venue-availability::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-strong);
}


/* =====================================================
   CUSTOM VENUE
===================================================== */

.custom-venue-section {
    margin-top: 13px;
    padding: 16px 18px;
    border: 1px dashed rgba(20, 53, 40, 0.18);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.custom-venue-copy {
    display: flex;
    align-items: center;
    gap: 11px;
}

.custom-venue-icon {
    width: 39px;
    height: 39px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #e9eedf;
    color: var(--green-dark);
    font-size: 16px;
}

.custom-venue-copy > div:last-child {
    display: flex;
    flex-direction: column;
}

.custom-venue-copy strong {
    font-size: 9px;
}

.custom-venue-copy span {
    margin-top: 2px;
    color: #8e9992;
    font-size: 7px;
}

.custom-venue-button {
    min-height: 39px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: white;
    color: var(--ink);
    font-size: 8px;
    font-weight: 800;
}


/* =====================================================
   SELECTION SUMMARY
===================================================== */

.venue-selection-summary {
    position: sticky;
    bottom: 18px;
    z-index: 20;
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid rgba(20, 53, 40, 0.12);
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: rgba(247, 246, 239, 0.95);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 45px rgba(20, 53, 40, 0.1);
}

.venue-selected-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.venue-selected-copy > span {
    color: var(--green-strong);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.venue-selected-copy strong {
    margin-top: 4px;
    overflow: hidden;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.venue-selected-copy small {
    margin-top: 2px;
    color: #8f9a93;
    font-size: 7px;
}

.venue-continue-button {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 13px;
    flex-shrink: 0;
    background: var(--green-dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
}

.venue-continue-button span {
    margin-left: 7px;
    color: var(--green);
}

.venue-continue-button:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}


/* =====================================================
   CUSTOM VENUE MODAL
===================================================== */

.custom-venue-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(13, 34, 26, 0.48);
    backdrop-filter: blur(8px);
}

.custom-venue-modal-backdrop.hidden {
    display: none;
}

.custom-venue-modal {
    position: relative;
    width: min(450px, 100%);
    padding: 35px;
    border-radius: 26px;
    background: #f9f8f2;
    box-shadow: 0 35px 80px rgba(10, 30, 22, 0.23);
}

.custom-venue-close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #e9eae3;
    color: var(--ink-soft);
    font-size: 18px;
}

.custom-modal-eyebrow {
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.custom-venue-modal h2 {
    margin-top: 8px;
    font-family: "Manrope", sans-serif;
    font-size: 31px;
    letter-spacing: -0.05em;
}

.custom-venue-modal h2 span {
    color: var(--green-strong);
}

.custom-venue-modal > p {
    max-width: 340px;
    margin-top: 8px;
    color: var(--ink-soft);
    font-size: 9px;
    line-height: 1.6;
}

#custom-venue-form {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.custom-venue-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.custom-venue-field > span {
    color: #68776f;
    font-size: 8px;
    font-weight: 800;
}

.custom-venue-field input {
    width: 100%;
    height: 48px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    background: white;
    color: var(--ink);
    font-family: inherit;
    font-size: 9px;
}

.custom-venue-field input:focus {
    border-color: var(--green-strong);
    box-shadow: 0 0 0 3px rgba(184, 239, 80, 0.12);
}

.custom-venue-save {
    min-height: 49px;
    margin-top: 5px;
    border-radius: 13px;
    background: var(--green-dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
}

.custom-venue-save span {
    margin-left: 7px;
    color: var(--green);
}


/* =====================================================
   NO GAME
===================================================== */

.venue-no-game {
    position: fixed;
    inset: 78px 0 0;
    z-index: 50;
    padding: 20px;
    display: grid;
    place-items: center;
    background: #f7f6ef;
}

.venue-no-game.hidden {
    display: none;
}

.venue-no-game-card {
    width: min(470px, 100%);
    padding: 45px;
    border: 1px solid var(--border);
    border-radius: 27px;
    background: white;
    text-align: center;
}

.venue-no-game-icon {
    width: 60px;
    height: 60px;
    margin: auto;
    border-radius: 19px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 20px;
}

.venue-no-game-card > span {
    display: block;
    margin-top: 20px;
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.venue-no-game-card h2 {
    margin-top: 9px;
    font-family: "Manrope", sans-serif;
    font-size: 34px;
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.venue-no-game-card p {
    max-width: 350px;
    margin: 12px auto 0;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.65;
}

.venue-no-game-card button {
    min-height: 47px;
    margin-top: 22px;
    padding: 0 17px;
    border-radius: 13px;
    background: var(--green-dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
}


/* RESPONSIVE */

@media (max-width: 850px) {

    .venues-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
    }

    .venue-game-context {
        width: 100%;
        min-width: 0;
    }

}

@media (max-width: 650px) {

    .venues-main {
        width: min(100% - 28px, 1100px);
    }

    .venue-back-btn {
        display: none;
    }

    .venue-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .venue-filters {
        width: 100%;
        overflow-x: auto;
    }

    .venue-filter {
        flex-shrink: 0;
    }

    .venue-grid {
        grid-template-columns: 1fr;
    }

    .venue-context-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .venue-context-row > div {
        padding: 0;
    }

    .venue-context-row > div + div {
        padding-top: 10px;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .custom-venue-section {
        align-items: flex-start;
        flex-direction: column;
    }

    .custom-venue-button {
        width: 100%;
    }

    .venue-selection-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .venue-continue-button {
        width: 100%;
    }

}

/* =====================================================
   SEIAURA - TOSS
===================================================== */

.toss-page {
    min-height: 100vh;
    background: #f7f6ef;
}

.toss-back-btn {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: white;
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 800;
}

.toss-main {
    width: min(1100px, calc(100% - 44px));
    margin: auto;
    padding: 38px 0 100px;
}


/* =====================================================
   HERO
===================================================== */

.toss-hero {
    max-width: 650px;
    margin: auto;
    text-align: center;
}

.toss-eyebrow {
    color: var(--green-strong);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.toss-hero h1 {
    margin-top: 13px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(52px, 7vw, 82px);
    line-height: 0.92;
    letter-spacing: -0.07em;
}

.toss-hero h1 span {
    color: var(--green-strong);
}

.toss-hero p {
    max-width: 480px;
    margin: 18px auto 0;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.7;
}


/* =====================================================
   GAME CONTEXT
===================================================== */

.toss-game-context {
    max-width: 850px;
    margin: 38px auto 0;
    padding: 15px 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: white;
}

.toss-game-context > div {
    min-width: 0;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
}

.toss-game-context > div:first-child {
    padding-left: 0;
}

.toss-game-context > div + div {
    border-left: 1px solid var(--border);
}

.toss-game-context span {
    color: #9aa39d;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.toss-game-context strong {
    margin-top: 4px;
    overflow: hidden;
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================
   TOSS ARENA
===================================================== */

.toss-arena {
    position: relative;
    min-height: 460px;
    margin-top: 18px;
    padding: 40px 45px;
    border: 1px solid var(--border);
    border-radius: 28px;
    display: grid;
    grid-template-columns: 1fr minmax(300px, 1.5fr) 1fr;
    align-items: center;
    gap: 30px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            rgba(184, 239, 80, 0.12),
            transparent 37%
        ),
        white;
}

.toss-arena::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(20, 53, 40, 0.055);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.toss-arena::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    left: 50%;
    top: 50%;
    border: 1px dashed rgba(20, 53, 40, 0.06);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}


/* =====================================================
   PLAYERS
===================================================== */

.toss-player {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.toss-player-avatar {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 23px;
    display: grid;
    place-items: center;
    background: var(--green-dark);
    color: var(--green);
    font-family: "Manrope", sans-serif;
    font-size: 21px;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(20, 53, 40, 0.12);
}

.toss-player-avatar.buddy {
    background: #e0e9da;
    color: #536b5c;
}

.toss-player-avatar.buddy i {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 13px;
    height: 13px;
    border: 3px solid white;
    border-radius: 50%;
    background: var(--green-strong);
}

.toss-player-label {
    margin-top: 13px;
    color: #9aa39e;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.toss-player h3 {
    max-width: 160px;
    margin-top: 4px;
    overflow: hidden;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toss-winner-tag {
    margin-top: 9px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--green);
    color: var(--green-dark);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.07em;
}

.toss-winner-tag.hidden {
    display: none;
}


/* =====================================================
   CENTER
===================================================== */

.toss-center {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.toss-center-label {
    color: #8f9b94;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.14em;
}


/* =====================================================
   3D COIN
===================================================== */

.toss-coin-scene {
    width: 125px;
    height: 125px;
    margin-top: 18px;
    perspective: 900px;
}

.toss-coin {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
}

.toss-coin-face {
    position: absolute;
    inset: 0;
    border: 5px solid #d7dcaa;
    border-radius: 50%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle at 35% 30%,
            #f3ffb8,
            var(--green)
        );
    color: var(--green-dark);
    box-shadow:
        inset 0 0 0 4px rgba(255, 255, 255, 0.25),
        0 15px 30px rgba(20, 53, 40, 0.16);
}

.toss-coin-face > span {
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.toss-coin-face small {
    margin-top: 3px;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.toss-coin-tails {
    transform: rotateY(180deg);
}

.toss-coin.flipping {
    animation: sportsBuddyCoinFlip 1.8s
        cubic-bezier(0.25, 0.7, 0.25, 1);
}

.toss-coin.result-heads {
    transform: rotateY(0deg);
}

.toss-coin.result-tails {
    transform: rotateY(180deg);
}

@keyframes sportsBuddyCoinFlip {

    0% {
        transform:
            translateY(0)
            rotateY(0deg)
            rotateX(0deg);
    }

    20% {
        transform:
            translateY(-75px)
            rotateY(540deg)
            rotateX(120deg);
    }

    50% {
        transform:
            translateY(-105px)
            rotateY(1260deg)
            rotateX(250deg);
    }

    80% {
        transform:
            translateY(-35px)
            rotateY(1980deg)
            rotateX(350deg);
    }

    100% {
        transform:
            translateY(0)
            rotateY(2520deg)
            rotateX(360deg);
    }

}


/* =====================================================
   CHOICE
===================================================== */

.toss-choice-area {
    margin-top: 20px;
    text-align: center;
}

.toss-choice-area > p {
    color: var(--ink-soft);
    font-size: 8px;
}

.toss-choice-buttons {
    margin-top: 8px;
    display: flex;
    gap: 7px;
}

.toss-choice-button {
    min-width: 105px;
    min-height: 44px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #fafaf5;
    color: var(--ink-soft);
    font-size: 8px;
    font-weight: 800;
}

.toss-choice-button.active {
    border-color: var(--green-dark);
    background: var(--green-dark);
    color: white;
}

.toss-mini-coin {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 7px;
    font-weight: 900;
}

.toss-flip-button {
    min-height: 44px;
    margin-top: 12px;
    padding: 0 17px;
    border-radius: 12px;
    background: var(--green);
    color: var(--green-dark);
    font-size: 8px;
    font-weight: 900;
}

.toss-flip-button span {
    margin-left: 6px;
}

.toss-flip-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}


/* =====================================================
   RESULT
===================================================== */

.toss-result {
    margin-top: 20px;
    text-align: center;
    animation: tossResultReveal 0.5s ease both;
}

.toss-result.hidden {
    display: none;
}

.toss-result > span {
    padding: 5px 8px;
    border-radius: 7px;
    background: #edf5dc;
    color: #658522;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.toss-result h2 {
    margin-top: 8px;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    letter-spacing: -0.03em;
}

.toss-result p {
    max-width: 260px;
    margin-top: 4px;
    color: #89958e;
    font-size: 7px;
    line-height: 1.5;
}

@keyframes tossResultReveal {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =====================================================
   BOTTOM
===================================================== */

.toss-bottom-actions {
    position: sticky;
    bottom: 18px;
    z-index: 20;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(20, 53, 40, 0.12);
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: rgba(247, 246, 239, 0.95);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 45px rgba(20, 53, 40, 0.1);
}

.toss-bottom-copy {
    display: flex;
    flex-direction: column;
}

.toss-bottom-copy > span {
    color: var(--green-strong);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.toss-bottom-copy strong {
    margin-top: 4px;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
}

.toss-bottom-copy small {
    margin-top: 2px;
    color: #8e9992;
    font-size: 7px;
}

.toss-bottom-buttons {
    display: flex;
    align-items: center;
    gap: 7px;
}

.toss-skip-button {
    min-height: 46px;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
    color: var(--ink-soft);
    font-size: 8px;
    font-weight: 800;
}

.toss-confirm-button {
    min-height: 46px;
    padding: 0 17px;
    border-radius: 12px;
    background: var(--green-dark);
    color: white;
    font-size: 8px;
    font-weight: 800;
}

.toss-confirm-button span {
    margin-left: 6px;
    color: var(--green);
}


/* =====================================================
   NO GAME
===================================================== */

.toss-no-game {
    position: fixed;
    inset: 78px 0 0;
    z-index: 50;
    padding: 20px;
    display: grid;
    place-items: center;
    background: #f7f6ef;
}

.toss-no-game.hidden {
    display: none;
}

.toss-no-game-card {
    width: min(470px, 100%);
    padding: 45px;
    border: 1px solid var(--border);
    border-radius: 27px;
    background: white;
    text-align: center;
}

.toss-no-game-icon {
    width: 60px;
    height: 60px;
    margin: auto;
    border-radius: 19px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 20px;
}

.toss-no-game-card > span {
    display: block;
    margin-top: 20px;
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.toss-no-game-card h2 {
    margin-top: 9px;
    font-family: "Manrope", sans-serif;
    font-size: 34px;
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.toss-no-game-card p {
    max-width: 350px;
    margin: 12px auto 0;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.65;
}

.toss-no-game-card button {
    min-height: 47px;
    margin-top: 22px;
    padding: 0 17px;
    border-radius: 13px;
    background: var(--green-dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 750px) {

    .toss-game-context {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .toss-game-context > div {
        padding: 0;
        border: 0 !important;
    }

    .toss-arena {
        grid-template-columns: 1fr 1fr;
        padding: 30px 20px;
    }

    .toss-center {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 15px;
    }

    .toss-player-you {
        grid-column: 1;
    }

    .toss-player-buddy {
        grid-column: 2;
    }

}

@media (max-width: 600px) {

    .toss-main {
        width: min(100% - 28px, 1100px);
    }

    .toss-back-btn {
        display: none;
    }

    .toss-game-context {
        grid-template-columns: 1fr;
    }

    .toss-arena {
        min-height: 600px;
    }

    .toss-bottom-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .toss-bottom-buttons {
        width: 100%;
    }

    .toss-skip-button,
    .toss-confirm-button {
        flex: 1;
    }

}

/* =====================================================
   SEIAURA - GAME CONFIRMATION
===================================================== */

.confirmation-page {
    min-height: 100vh;
    background: #f7f6ef;
}

.confirmation-main {
    width: min(920px, calc(100% - 44px));
    margin: auto;
    padding: 38px 0 100px;
}


/* =====================================================
   SUCCESS HERO
===================================================== */

.confirmation-hero {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.confirmation-success-mark {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 0 auto 25px;
    display: grid;
    place-items: center;
}

.confirmation-success-mark > span {
    position: relative;
    z-index: 3;
    width: 58px;
    height: 58px;
    border-radius: 19px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-family: "Manrope", sans-serif;
    font-size: 19px;
    font-weight: 900;
    box-shadow: 0 12px 35px rgba(114, 158, 39, 0.18);
    animation: confirmationCheckIn 0.55s ease both;
}

.confirmation-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(112, 156, 44, 0.16);
    border-radius: 27px;
}

.confirmation-ring.ring-one {
    animation: confirmationRing 2.4s ease-out infinite;
}

.confirmation-ring.ring-two {
    animation: confirmationRing 2.4s 1.2s ease-out infinite;
}

@keyframes confirmationCheckIn {

    from {
        opacity: 0;
        transform: scale(0.7) rotate(-12deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }

}

@keyframes confirmationRing {

    0% {
        opacity: 0.55;
        transform: scale(0.65);
    }

    100% {
        opacity: 0;
        transform: scale(1.4);
    }

}

.confirmation-eyebrow {
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.confirmation-hero h1 {
    margin-top: 10px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(48px, 7vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.confirmation-hero h1 span {
    color: var(--green-strong);
}

.confirmation-hero p {
    max-width: 430px;
    margin: 14px auto 0;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.7;
}


/* =====================================================
   TICKET
===================================================== */

.confirmation-ticket {
    position: relative;
    margin-top: 42px;
    border: 1px solid var(--border);
    border-radius: 27px;
    overflow: hidden;
    background: white;
    box-shadow: 0 22px 60px rgba(20, 53, 40, 0.07);
}

.confirmation-ticket::before,
.confirmation-ticket::after {
    content: "";
    position: absolute;
    top: 245px;
    z-index: 5;
    width: 25px;
    height: 25px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #f7f6ef;
}

.confirmation-ticket::before {
    left: -14px;
}

.confirmation-ticket::after {
    right: -14px;
}


/* TOP */

.confirmation-ticket-top {
    padding: 24px 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.confirmation-ticket-label {
    color: #939e97;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.confirmation-ticket-top h2 {
    margin-top: 4px;
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    letter-spacing: -0.04em;
}

.confirmation-status {
    min-height: 34px;
    padding: 0 11px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #edf5dc;
    color: #638321;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.confirmation-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-strong);
}


/* =====================================================
   PLAYERS
===================================================== */

.confirmation-players {
    padding: 24px 27px 30px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 25px;
    background:
        radial-gradient(
            circle at center,
            rgba(184, 239, 80, 0.13),
            transparent 38%
        );
}

.confirmation-player {
    display: flex;
    align-items: center;
    gap: 12px;
}

.confirmation-player.buddy {
    justify-content: flex-end;
    text-align: right;
}

.confirmation-avatar {
    width: 59px;
    height: 59px;
    flex-shrink: 0;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 900;
}

.confirmation-avatar.you {
    background: var(--green-dark);
    color: var(--green);
}

.confirmation-avatar.buddy {
    background: #e1eadb;
    color: #536d5e;
}

.confirmation-player > div:not(.confirmation-avatar) {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.confirmation-player > div > span {
    color: #99a39d;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.confirmation-player > div > strong {
    max-width: 190px;
    margin-top: 4px;
    overflow: hidden;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.confirmation-versus {
    display: flex;
    align-items: center;
    gap: 8px;
}

.confirmation-versus span {
    width: 30px;
    height: 1px;
    background: #dfe3da;
}

.confirmation-versus strong {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: white;
    color: #78857d;
    font-size: 7px;
}


/* =====================================================
   TICKET DIVIDER
===================================================== */

.confirmation-ticket-divider {
    position: relative;
    height: 1px;
    margin: 0 15px;
    border-top: 1px dashed #d7dcd3;
}

.confirmation-ticket-divider span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    transform: translate(-50%, -50%);
}


/* =====================================================
   DETAILS
===================================================== */

.confirmation-details {
    padding: 28px 27px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.confirmation-detail {
    min-width: 0;
    padding: 15px;
    border: 1px solid #e5e7df;
    border-radius: 15px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: #fafaf6;
}

.confirmation-detail-icon {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #e9eedf;
    color: #657a69;
    font-family: "Manrope", sans-serif;
    font-size: 6px;
    font-weight: 900;
}

.confirmation-detail > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.confirmation-detail > div > span {
    color: #9aa39d;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.confirmation-detail strong {
    margin-top: 4px;
    overflow: hidden;
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    line-height: 1.3;
    text-overflow: ellipsis;
}

.confirmation-detail small {
    margin-top: 3px;
    overflow: hidden;
    color: #929c96;
    font-size: 6px;
    line-height: 1.35;
    text-overflow: ellipsis;
}


/* =====================================================
   TICKET FOOTER
===================================================== */

.confirmation-ticket-footer {
    padding: 15px 27px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f3f5ed;
}

.confirmation-ticket-footer > div {
    display: flex;
    flex-direction: column;
}

.confirmation-ticket-footer > div:last-child {
    text-align: right;
}

.confirmation-ticket-footer span {
    color: #97a199;
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.confirmation-ticket-footer strong {
    margin-top: 3px;
    color: #65756b;
    font-family: "Manrope", sans-serif;
    font-size: 7px;
    letter-spacing: 0.04em;
}


/* =====================================================
   ACTIONS
===================================================== */

.confirmation-actions {
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: white;
}

.confirmation-action-copy {
    display: flex;
    flex-direction: column;
}

.confirmation-action-copy > span {
    color: var(--green-strong);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.confirmation-action-copy strong {
    margin-top: 4px;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
}

.confirmation-action-copy small {
    margin-top: 2px;
    color: #8f9993;
    font-size: 7px;
}

.confirmation-buttons {
    display: flex;
    align-items: center;
    gap: 7px;
}

.confirmation-secondary-button {
    min-height: 45px;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
    color: var(--ink-soft);
    font-size: 8px;
    font-weight: 800;
}

.confirmation-primary-button {
    min-height: 45px;
    padding: 0 16px;
    border-radius: 12px;
    background: var(--green-dark);
    color: white;
    font-size: 8px;
    font-weight: 800;
}

.confirmation-primary-button span {
    margin-left: 6px;
    color: var(--green);
}


/* =====================================================
   NOTE
===================================================== */

.confirmation-note {
    max-width: 650px;
    margin: 20px auto 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

.confirmation-note-mark {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1px solid #d9ddd5;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #8d9891;
    font-family: serif;
    font-size: 8px;
}

.confirmation-note p {
    color: #61756b;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.6;
}


/* =====================================================
   NO GAME
===================================================== */

.confirmation-no-game {
    position: fixed;
    inset: 78px 0 0;
    z-index: 50;
    padding: 20px;
    display: grid;
    place-items: center;
    background: #f7f6ef;
}

.confirmation-no-game.hidden {
    display: none;
}

.confirmation-no-game-card {
    width: min(470px, 100%);
    padding: 45px;
    border: 1px solid var(--border);
    border-radius: 27px;
    background: white;
    text-align: center;
}

.confirmation-no-game-icon {
    width: 60px;
    height: 60px;
    margin: auto;
    border-radius: 19px;
    display: grid;
    place-items: center;
    background: #eef1e7;
    color: var(--green-dark);
    font-size: 19px;
    font-weight: 900;
}

.confirmation-no-game-card > span {
    display: block;
    margin-top: 20px;
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.confirmation-no-game-card h2 {
    margin-top: 9px;
    font-family: "Manrope", sans-serif;
    font-size: 34px;
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.confirmation-no-game-card p {
    max-width: 350px;
    margin: 12px auto 0;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.65;
}

.confirmation-no-game-card button {
    min-height: 47px;
    margin-top: 22px;
    padding: 0 17px;
    border-radius: 13px;
    background: var(--green-dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 750px) {

    .confirmation-details {
        grid-template-columns: repeat(2, 1fr);
    }

    .confirmation-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .confirmation-buttons {
        width: 100%;
    }

    .confirmation-buttons button {
        flex: 1;
    }

}

@media (max-width: 600px) {

    .confirmation-main {
        width: min(100% - 28px, 920px);
    }

    .confirmation-players {
        grid-template-columns: 1fr;
    }

    .confirmation-player,
    .confirmation-player.buddy {
        justify-content: center;
        text-align: left;
    }

    .confirmation-player.buddy {
        flex-direction: row-reverse;
    }

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

    .confirmation-details {
        grid-template-columns: 1fr;
    }

    .confirmation-buttons {
        flex-direction: column;
    }

    .confirmation-buttons button {
        width: 100%;
    }

}

/* =====================================================
   SEIAURA - DASHBOARD UPCOMING GAMES
===================================================== */

.dashboard-games-section {
    width: min(1100px, calc(100% - 44px));
    margin: 65px auto 0;
}


/* =====================================================
   HEADER
===================================================== */

.dashboard-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 20px;
}

.dashboard-section-eyebrow {
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.dashboard-section-header h2 {
    margin-top: 7px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1;
    letter-spacing: -0.05em;
}

.dashboard-section-header p {
    margin-top: 7px;
    color: var(--ink-soft);
    font-size: 9px;
}

.dashboard-new-game-btn {
    min-height: 43px;
    padding: 0 15px;
    border-radius: 12px;
    background: var(--green-dark);
    color: white;
    font-size: 8px;
    font-weight: 800;
}


/* =====================================================
   GRID
===================================================== */

.dashboard-games-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}


/* =====================================================
   GAME CARD
===================================================== */

.dashboard-game-card {
    position: relative;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 21px;
    overflow: hidden;
    background: white;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.dashboard-game-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(20, 53, 40, 0.07);
}

.dashboard-game-card::after {
    content: "";
    position: absolute;
    right: -55px;
    top: -55px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(184, 239, 80, 0.08);
    pointer-events: none;
}


/* TOP */

.dashboard-game-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.dashboard-game-sport {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-game-sport-icon {
    width: 39px;
    height: 39px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--green-dark);
    color: var(--green);
    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 900;
}

.dashboard-game-sport > div {
    display: flex;
    flex-direction: column;
}

.dashboard-game-sport span {
    color: #929d96;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.dashboard-game-sport strong {
    margin-top: 2px;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
}

.dashboard-game-status {
    padding: 6px 8px;
    border-radius: 8px;
    background: #edf5dc;
    color: #658522;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.06em;
}


/* =====================================================
   DATE
===================================================== */

.dashboard-game-main {
    position: relative;
    z-index: 2;
    margin-top: 21px;
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 15px;
}

.dashboard-game-date {
    min-height: 75px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f0f3e9;
}

.dashboard-game-date span {
    color: #7c8a81;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-game-date strong {
    margin-top: 1px;
    color: var(--green-dark);
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    line-height: 1;
}

.dashboard-game-date small {
    margin-top: 3px;
    color: #929c96;
    font-size: 6px;
    font-weight: 700;
}


/* =====================================================
   INFORMATION
===================================================== */

.dashboard-game-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dashboard-game-info > span {
    color: #969f99;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 0.07em;
}

.dashboard-game-info h3 {
    margin-top: 3px;
    overflow: hidden;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-game-info p {
    margin-top: 4px;
    overflow: hidden;
    color: #89958e;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-game-time {
    margin-top: 7px;
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 900;
}


/* =====================================================
   BUDDY
===================================================== */

.dashboard-game-buddy {
    position: relative;
    z-index: 2;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-game-buddy-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.dashboard-game-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #e1eadb;
    color: #536d5e;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 900;
}

.dashboard-game-buddy-left > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dashboard-game-buddy-left span {
    color: #99a29c;
    font-size: 5px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.dashboard-game-buddy-left strong {
    max-width: 180px;
    margin-top: 2px;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================
   CARD ACTIONS
===================================================== */

.dashboard-game-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dashboard-game-message,
.dashboard-game-view {
    min-height: 33px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 7px;
    font-weight: 800;
}

.dashboard-game-message {
    border: 1px solid var(--border);
    background: white;
    color: var(--ink-soft);
}

.dashboard-game-view {
    background: var(--green-dark);
    color: white;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.dashboard-games-empty {
    min-height: 330px;
    padding: 45px 25px;
    border: 1px dashed rgba(20, 53, 40, 0.16);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.45);
    text-align: center;
}

.dashboard-games-empty.hidden {
    display: none;
}

.dashboard-empty-visual {
    position: relative;
    width: 80px;
    height: 65px;
}

.dashboard-empty-ball {
    position: relative;
    z-index: 3;
    width: 49px;
    height: 49px;
    margin: auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 900;
}

.dashboard-empty-line {
    position: absolute;
    height: 1px;
    background: #dce1d6;
}

.dashboard-empty-line.line-one {
    width: 25px;
    left: 0;
    top: 17px;
}

.dashboard-empty-line.line-two {
    width: 25px;
    right: 0;
    bottom: 10px;
}

.dashboard-empty-eyebrow {
    margin-top: 10px;
    color: var(--green-strong);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.dashboard-games-empty h3 {
    margin-top: 8px;
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.dashboard-games-empty h3 span {
    color: var(--green-strong);
}

.dashboard-games-empty p {
    max-width: 350px;
    margin-top: 8px;
    color: var(--ink-soft);
    font-size: 8px;
    line-height: 1.6;
}

.dashboard-games-empty button {
    min-height: 42px;
    margin-top: 17px;
    padding: 0 14px;
    border-radius: 11px;
    background: var(--green-dark);
    color: white;
    font-size: 8px;
    font-weight: 800;
}

.dashboard-games-empty button span {
    margin-left: 5px;
    color: var(--green);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 750px) {

    .dashboard-games-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .dashboard-games-section {
        width: min(100% - 28px, 1100px);
    }

    .dashboard-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-new-game-btn {
        width: 100%;
    }

    .dashboard-game-buddy {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-game-actions {
        width: 100%;
    }

    .dashboard-game-actions button {
        flex: 1;
    }

}

/* =====================================================
   SEIAURA - MATCH DETAILS
===================================================== */

.match-page {
    min-height: 100vh;
    background: #f7f6ef;
}

.match-dashboard-back {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: white;
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 800;
}

.match-main {
    width: min(920px, calc(100% - 44px));
    margin: auto;
    padding: 70px 0 100px;
}


/* HERO */

.match-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.match-eyebrow {
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.match-hero h1 {
    margin-top: 11px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(48px, 6vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.match-hero h1 span {
    color: var(--green-strong);
}

.match-hero p {
    max-width: 430px;
    margin-top: 15px;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.7;
}

.match-status-card {
    min-width: 180px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
}

.match-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green-strong);
    box-shadow: 0 0 0 5px rgba(136, 186, 45, 0.12);
}

.match-status-card > div {
    display: flex;
    flex-direction: column;
}

.match-status-card span {
    color: #99a39d;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.match-status-card strong {
    margin-top: 3px;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
}


/* MATCH CARD */

.match-card {
    margin-top: 38px;
    border: 1px solid var(--border);
    border-radius: 26px;
    overflow: hidden;
    background: white;
    box-shadow: 0 22px 55px rgba(20, 53, 40, 0.07);
}

.match-card-header {
    padding: 22px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.match-sport-block {
    display: flex;
    align-items: center;
    gap: 11px;
}

.match-sport-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--green-dark);
    color: var(--green);
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 900;
}

.match-sport-block > div:last-child {
    display: flex;
    flex-direction: column;
}

.match-sport-block span,
.match-id-block span {
    color: #98a29c;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.09em;
}

.match-sport-block h2 {
    margin-top: 3px;
    font-family: "Manrope", sans-serif;
    font-size: 18px;
}

.match-id-block {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.match-id-block strong {
    margin-top: 4px;
    color: #68776f;
    font-family: "Manrope", sans-serif;
    font-size: 8px;
}


/* PLAYERS */

.match-players-row {
    padding: 28px 25px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 25px;
    background:
        radial-gradient(
            circle at center,
            rgba(184, 239, 80, 0.12),
            transparent 38%
        );
}

.match-player-side {
    display: flex;
    align-items: center;
    gap: 11px;
}

.match-player-side.buddy {
    justify-content: flex-end;
    text-align: right;
}

.match-player-avatar {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 900;
}

.match-player-avatar.you {
    background: var(--green-dark);
    color: var(--green);
}

.match-player-avatar.buddy {
    background: #e1eadb;
    color: #536d5e;
}

.match-player-side > div:not(.match-player-avatar) {
    display: flex;
    flex-direction: column;
}

.match-player-side span {
    color: #99a39d;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.09em;
}

.match-player-side strong {
    margin-top: 4px;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
}

.match-versus {
    display: flex;
    align-items: center;
    gap: 8px;
}

.match-versus span {
    width: 28px;
    height: 1px;
    background: #dfe2da;
}

.match-versus strong {
    width: 35px;
    height: 35px;
    border: 1px solid var(--border);
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: white;
    color: #78857d;
    font-size: 7px;
}


/* DETAILS */

.match-details-grid {
    padding: 24px 25px;
    border-top: 1px dashed #d9ddd5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.match-detail-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e4e6de;
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fafaf6;
}

.match-detail-number {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #e9eedf;
    color: #657a69;
    font-family: "Manrope", sans-serif;
    font-size: 6px;
    font-weight: 900;
}

.match-detail-card > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.match-detail-card > div > span {
    color: #99a39d;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.07em;
}

.match-detail-card strong {
    margin-top: 4px;
    overflow: hidden;
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    line-height: 1.3;
    text-overflow: ellipsis;
}

.match-detail-card small {
    margin-top: 3px;
    overflow: hidden;
    color: #909b94;
    font-size: 6px;
    line-height: 1.35;
    text-overflow: ellipsis;
}


/* BUDDY SECTION */

.match-buddy-section {
    padding: 16px 25px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #f4f5ef;
}

.match-buddy-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.match-buddy-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #dfe9d8;
    color: #536d5e;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 900;
}

.match-buddy-avatar i {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border: 2px solid white;
    border-radius: 50%;
    background: var(--green-strong);
}

.match-buddy-info > div:last-child {
    display: flex;
    flex-direction: column;
}

.match-buddy-info span {
    color: #99a39d;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.match-buddy-info strong {
    margin-top: 3px;
    font-size: 9px;
}

.match-buddy-info small {
    margin-top: 2px;
    color: #8e9992;
    font-size: 7px;
}

.match-message-btn {
    min-height: 41px;
    padding: 0 13px;
    border-radius: 11px;
    background: var(--green-dark);
    color: white;
    font-size: 8px;
    font-weight: 800;
}


/* ACTION PANEL */

.match-action-panel {
    margin-top: 15px;
    padding: 17px 19px;
    border: 1px solid var(--border);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: white;
}

.match-action-panel > div:first-child {
    display: flex;
    flex-direction: column;
}

.match-action-panel > div:first-child > span {
    color: var(--green-strong);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.09em;
}

.match-action-panel strong {
    margin-top: 4px;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
}

.match-action-panel small {
    margin-top: 2px;
    color: #8f9993;
    font-size: 7px;
}

.match-action-buttons {
    display: flex;
    gap: 7px;
}

.match-secondary-btn,
.match-danger-btn {
    min-height: 42px;
    padding: 0 13px;
    border-radius: 11px;
    font-size: 8px;
    font-weight: 800;
}

.match-secondary-btn {
    border: 1px solid var(--border);
    background: white;
    color: var(--ink-soft);
}

.match-danger-btn {
    background: #f5e8e4;
    color: #9a5d52;
}


/* CANCEL MODAL */

.match-cancel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(13, 34, 26, 0.48);
    backdrop-filter: blur(8px);
}

.match-cancel-backdrop.hidden {
    display: none;
}

.match-cancel-modal {
    position: relative;
    width: min(430px, 100%);
    padding: 35px;
    border-radius: 25px;
    background: #f9f8f2;
    text-align: center;
}

.match-cancel-close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #e9eae3;
    color: var(--ink-soft);
    font-size: 18px;
}

.match-cancel-icon {
    width: 58px;
    height: 58px;
    margin: auto;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #f3e5e1;
    color: #9a5d52;
    font-size: 18px;
    font-weight: 900;
}

.match-cancel-eyebrow {
    display: block;
    margin-top: 18px;
    color: #a76d62;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.match-cancel-modal h2 {
    margin-top: 8px;
    font-family: "Manrope", sans-serif;
    font-size: 27px;
}

.match-cancel-modal p {
    max-width: 320px;
    margin: 9px auto 0;
    color: var(--ink-soft);
    font-size: 9px;
    line-height: 1.6;
}

.match-cancel-actions {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.match-cancel-keep,
.match-cancel-confirm {
    min-height: 45px;
    border-radius: 12px;
    font-size: 8px;
    font-weight: 800;
}

.match-cancel-keep {
    border: 1px solid var(--border);
    background: white;
    color: var(--ink);
}

.match-cancel-confirm {
    background: #9a5d52;
    color: white;
}


/* NO GAME */

.match-no-game {
    position: fixed;
    inset: 78px 0 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: #f7f6ef;
}

.match-no-game.hidden {
    display: none;
}

.match-no-game-card {
    width: min(460px, calc(100% - 30px));
    padding: 42px;
    border: 1px solid var(--border);
    border-radius: 26px;
    background: white;
    text-align: center;
}

.match-no-game-icon {
    width: 58px;
    height: 58px;
    margin: auto;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 18px;
}

.match-no-game-card > span {
    display: block;
    margin-top: 18px;
    color: var(--green-strong);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.match-no-game-card h2 {
    margin-top: 8px;
    font-family: "Manrope", sans-serif;
    font-size: 30px;
    line-height: 1.05;
}

.match-no-game-card p {
    max-width: 330px;
    margin: 10px auto 0;
    color: var(--ink-soft);
    font-size: 9px;
    line-height: 1.6;
}

.match-no-game-card button {
    min-height: 45px;
    margin-top: 20px;
    padding: 0 15px;
    border-radius: 12px;
    background: var(--green-dark);
    color: white;
    font-size: 8px;
    font-weight: 800;
}


/* RESPONSIVE */

@media (max-width: 750px) {

    .match-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .match-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .match-action-panel {
        align-items: stretch;
        flex-direction: column;
    }

}

@media (max-width: 600px) {

    .match-main {
        width: min(100% - 28px, 920px);
    }

    .match-dashboard-back {
        display: none;
    }

    .match-players-row {
        grid-template-columns: 1fr;
    }

    .match-player-side,
    .match-player-side.buddy {
        justify-content: center;
        text-align: left;
    }

    .match-player-side.buddy {
        flex-direction: row-reverse;
    }

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

    .match-details-grid {
        grid-template-columns: 1fr;
    }

    .match-buddy-section {
        align-items: stretch;
        flex-direction: column;
    }

    .match-message-btn {
        width: 100%;
    }

    .match-action-buttons {
        flex-direction: column;
    }

    .match-action-buttons button {
        width: 100%;
    }

}

/* =====================================================
   SEIAURA - MY GAMES
===================================================== */

.games-page {
    min-height: 100vh;
    background: #f7f6ef;
}

.games-main {
    width: min(1000px, calc(100% - 44px));
    margin: auto;
    padding: 70px 0 100px;
}


/* HERO */

.games-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.games-eyebrow {
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.games-hero h1 {
    margin-top: 12px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(48px, 6vw, 72px);
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.games-hero h1 span {
    color: var(--green-strong);
}

.games-hero p {
    max-width: 430px;
    margin-top: 16px;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.7;
}

.games-plan-btn,
.games-plan-nav {
    border: 0;
    background: var(--green-dark);
    color: white;
    font-weight: 800;
    cursor: pointer;
}

.games-plan-btn {
    min-height: 50px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 9px;
}

.games-plan-btn span {
    margin-right: 7px;
    color: var(--green);
    font-size: 15px;
}

.games-plan-nav {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 11px;
    font-size: 8px;
}


/* STATS */

.games-stats {
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.games-stat-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    background: white;
}

.games-stat-card span {
    color: #98a29c;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.games-stat-card strong {
    margin-top: 10px;
    font-family: "Manrope", sans-serif;
    font-size: 31px;
    line-height: 1;
}

.games-stat-card small {
    margin-top: 6px;
    color: #909b94;
    font-size: 7px;
}


/* LIST */

.games-list-section {
    margin-top: 48px;
}

.games-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}

.games-section-header > div:first-child {
    display: flex;
    flex-direction: column;
}

.games-section-header > div:first-child > span {
    color: var(--green-strong);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.games-section-header h2 {
    margin-top: 5px;
    font-family: "Manrope", sans-serif;
    font-size: 24px;
}

.games-filter {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #7e8b84;
    font-size: 7px;
    font-weight: 800;
}

.games-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green-strong);
}

.games-list {
    display: grid;
    gap: 11px;
}


/* GENERATED GAME CARD */

.games-item {
    border: 1px solid var(--border);
    border-radius: 21px;
    overflow: hidden;
    background: white;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.games-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(20, 53, 40, 0.07);
}

.games-item-main {
    padding: 21px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr auto;
    align-items: center;
    gap: 25px;
}

.games-item-sport {
    display: flex;
    align-items: center;
    gap: 12px;
}

.games-sport-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--green-dark);
    color: var(--green);
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 900;
}

.games-item-sport > div,
.games-item-detail {
    display: flex;
    flex-direction: column;
}

.games-item-label {
    color: #9ba49f;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.09em;
}

.games-item-sport strong {
    margin-top: 4px;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
}

.games-item-detail strong {
    margin-top: 4px;
    font-family: "Manrope", sans-serif;
    font-size: 9px;
}

.games-item-detail small {
    margin-top: 3px;
    color: #919c95;
    font-size: 7px;
}

.games-open-btn {
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 11px;
    background: var(--green-dark);
    color: white;
    font-size: 8px;
    font-weight: 800;
    cursor: pointer;
}

.games-item-footer {
    padding: 11px 21px;
    border-top: 1px solid #ecece6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #f7f7f2;
}

.games-confirmed {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #65796c;
    font-size: 7px;
    font-weight: 800;
}

.games-confirmed::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green-strong);
}

.games-game-id {
    color: #9ba39e;
    font-size: 6px;
    font-weight: 700;
}


/* EMPTY */

.games-empty {
    padding: 55px 25px;
    border: 1px dashed #d8ddd3;
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.55);
    text-align: center;
}

.games-empty.hidden {
    display: none;
}

.games-empty-icon {
    width: 55px;
    height: 55px;
    margin: auto;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: #e8eedf;
    color: var(--green-strong);
    font-size: 18px;
}

.games-empty > span {
    display: block;
    margin-top: 18px;
    color: var(--green-strong);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.games-empty h3 {
    margin-top: 7px;
    font-family: "Manrope", sans-serif;
    font-size: 27px;
    line-height: 1.05;
}

.games-empty p {
    max-width: 390px;
    margin: 10px auto 0;
    color: var(--ink-soft);
    font-size: 9px;
    line-height: 1.6;
}

.games-empty button {
    min-height: 44px;
    margin-top: 18px;
    padding: 0 15px;
    border: 0;
    border-radius: 12px;
    background: var(--green-dark);
    color: white;
    font-size: 8px;
    font-weight: 800;
    cursor: pointer;
}


/* RESPONSIVE */

@media (max-width: 760px) {

    .games-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .games-plan-btn {
        align-self: flex-start;
    }

    .games-item-main {
        grid-template-columns: 1fr 1fr;
    }

    .games-open-btn {
        width: 100%;
    }

}

@media (max-width: 560px) {

    .games-main {
        width: min(100% - 28px, 1000px);
    }

    .games-stats {
        grid-template-columns: 1fr;
    }

    .games-item-main {
        grid-template-columns: 1fr;
    }

    .games-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .games-plan-nav {
        display: none;
    }

}

/* =====================================================
   SEIAURA - PROFILE
===================================================== */

.profile-page {
    min-height: 100vh;
    background: #f7f6ef;
}

.profile-main {
    width: min(1050px, calc(100% - 44px));
    margin: auto;
    padding: 65px 0 100px;
}

.profile-dashboard-btn {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: white;
    color: var(--ink-soft);
    font-size: 8px;
    font-weight: 800;
}

.profile-nav-avatar {
    width: 41px;
    height: 41px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 900;
}


/* HERO */

.profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.profile-identity {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-main-avatar {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 29px;
    display: grid;
    place-items: center;
    background: var(--green-dark);
    color: var(--green);
    font-family: "Manrope", sans-serif;
    font-size: 30px;
    font-weight: 900;
    box-shadow: 0 18px 38px rgba(20, 53, 40, 0.12);
}

.profile-main-avatar i {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 17px;
    height: 17px;
    border: 4px solid #f7f6ef;
    border-radius: 50%;
    background: var(--green-strong);
}

.profile-identity-copy {
    display: flex;
    flex-direction: column;
}

.profile-eyebrow {
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.profile-identity-copy h1 {
    margin-top: 6px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 5vw, 55px);
    line-height: 1;
    letter-spacing: -0.055em;
}

.profile-identity-copy > p {
    margin-top: 6px;
    color: var(--ink-soft);
    font-size: 9px;
}

.profile-identity-tags {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-identity-tags span {
    padding: 6px 9px;
    border-radius: 8px;
    background: #eaf1df;
    color: #647d45;
    font-size: 7px;
    font-weight: 800;
}

.profile-edit-btn {
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
    color: var(--ink);
    font-size: 8px;
    font-weight: 800;
}

.profile-edit-btn span {
    margin-left: 6px;
}


/* STATS */

.profile-stats {
    margin-top: 45px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.profile-stat {
    min-height: 125px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: white;
}

.profile-stat > span {
    color: #98a29c;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.09em;
}

.profile-stat > strong {
    margin-top: 8px;
    font-family: "Manrope", sans-serif;
    font-size: 27px;
    line-height: 1;
}

.profile-stat > strong.profile-stat-sport {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-stat small {
    margin-top: 6px;
    color: #929c96;
    font-size: 7px;
}


/* CONTENT */

.profile-content-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.profile-panel {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 21px;
    background: white;
}

.profile-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.profile-panel-header > div:first-child {
    display: flex;
    flex-direction: column;
}

.profile-panel-header > div:first-child > span {
    color: var(--green-strong);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.profile-panel-header h2 {
    margin-top: 4px;
    font-family: "Manrope", sans-serif;
    font-size: 18px;
    letter-spacing: -0.03em;
}

.profile-panel-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #eaf1df;
    color: var(--green-dark);
    font-size: 15px;
    font-weight: 900;
}


/* DETAILS */

.profile-detail-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.profile-detail {
    min-height: 73px;
    padding: 13px;
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #f6f7f1;
}

.profile-detail span,
.profile-availability-block > span,
.profile-account-row span {
    color: #99a29d;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.profile-detail strong {
    margin-top: 5px;
    font-family: "Manrope", sans-serif;
    font-size: 9px;
}


/* AVAILABILITY */

.profile-availability-block {
    margin-top: 21px;
}

.profile-days {
    margin-top: 9px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-day {
    padding: 7px 9px;
    border-radius: 8px;
    background: var(--green);
    color: var(--green-dark);
    font-size: 7px;
    font-weight: 900;
}

.profile-availability-block > strong {
    display: block;
    margin-top: 7px;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
}

.profile-availability-note {
    margin-top: 22px;
    padding: 12px;
    border-radius: 13px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: #f0f5e6;
}

.profile-availability-note > div {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 8px;
    font-weight: 900;
}

.profile-availability-note p {
    color: #71806f;
    font-size: 7px;
    line-height: 1.55;
}


/* ACCOUNT */

.profile-account-row {
    min-height: 65px;
    margin-top: 10px;
    padding: 13px;
    border: 1px solid #e7e8e1;
    border-radius: 13px;
    background: #fafaf6;
}

.profile-account-row > div {
    display: flex;
    flex-direction: column;
}

.profile-account-row strong {
    margin-top: 5px;
    font-size: 9px;
}

.profile-account-row .profile-complete {
    color: #688c29;
}


/* QUICK ACTIONS */

.profile-actions-panel {
    display: flex;
    flex-direction: column;
}

.profile-action-card {
    width: 100%;
    min-height: 62px;
    margin-top: 9px;
    padding: 12px 13px;
    border: 1px solid #e4e7dd;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: #fafaf6;
    color: var(--ink);
    text-align: left;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.profile-action-card:hover {
    transform: translateX(3px);
    border-color: var(--green-strong);
}

.profile-action-card > div {
    display: flex;
    flex-direction: column;
}

.profile-action-card strong {
    font-size: 8px;
}

.profile-action-card span {
    margin-top: 3px;
    color: #909b94;
    font-size: 7px;
}

.profile-action-card b {
    color: var(--green-strong);
    font-size: 14px;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 650px) {

    .profile-main {
        width: min(100% - 28px, 1050px);
    }

    .profile-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-edit-btn {
        width: 100%;
    }

    .profile-content-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 450px) {

    .profile-identity {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-stats {
        grid-template-columns: 1fr;
    }

    .profile-detail-grid {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   SEIAURA - GAMES TABS
===================================================== */

.games-tabs {
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: white;
}

.games-tab {
    min-height: 34px;
    padding: 0 11px;
    border: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #89958e;
    font-size: 7px;
    font-weight: 900;
    cursor: pointer;
    transition:
        background 0.18s ease,
        color 0.18s ease;
}

.games-tab span {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: #eef0e9;
    color: #78847d;
    font-size: 6px;
}

.games-tab.active {
    background: var(--green-dark);
    color: white;
}

.games-tab.active span {
    background: var(--green);
    color: var(--green-dark);
}


/* PAST GAME */

.games-item.past-game {
    opacity: 0.82;
}

.games-item.past-game .games-sport-icon {
    background: #e5e9df;
    color: #66766c;
}

.games-item.past-game .games-confirmed::before {
    background: #a5aea8;
}

.games-item.past-game .games-confirmed {
    color: #87918b;
}

/* =====================================================
   SEIAURA - PAST GAME ACTIONS
===================================================== */

.games-past-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.games-rate-btn,
.games-replay-btn {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 11px;
    font-size: 7px;
    font-weight: 800;
    cursor: pointer;
}

.games-rate-btn {
    border: 1px solid var(--border);
    background: white;
    color: var(--ink-soft);
}

.games-replay-btn {
    border: 0;
    background: var(--green);
    color: var(--green-dark);
}


/* =====================================================
   RATING MODAL
===================================================== */

.rating-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(13, 34, 26, 0.5);
    backdrop-filter: blur(8px);
}

.rating-modal-backdrop.hidden {
    display: none;
}

.rating-modal {
    position: relative;
    width: min(430px, 100%);
    padding: 34px;
    border-radius: 25px;
    background: #f9f8f2;
    box-shadow: 0 35px 80px rgba(10, 30, 22, 0.22);
}

.rating-modal-close {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: #e8eae3;
    color: var(--ink-soft);
    font-size: 18px;
    cursor: pointer;
}

.rating-eyebrow {
    color: var(--green-strong);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.rating-modal h2 {
    margin-top: 8px;
    font-family: "Manrope", sans-serif;
    font-size: 27px;
    letter-spacing: -0.04em;
}

.rating-modal > p {
    margin-top: 7px;
    color: var(--ink-soft);
    font-size: 9px;
}

.rating-stars {
    margin-top: 22px;
    display: flex;
    gap: 8px;
}

.rating-stars button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
    color: #c6ccc4;
    font-size: 20px;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        color 0.15s ease,
        background 0.15s ease;
}

.rating-stars button:hover {
    transform: translateY(-2px);
}

.rating-stars button.active {
    background: var(--green);
    color: var(--green-dark);
}

#rating-note {
    width: 100%;
    min-height: 100px;
    margin-top: 18px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    resize: vertical;
    background: white;
    color: var(--ink);
    font-family: inherit;
    font-size: 9px;
}

#rating-note:focus {
    border-color: var(--green-strong);
    box-shadow: 0 0 0 3px rgba(184, 239, 80, 0.12);
}

.rating-submit-btn {
    width: 100%;
    min-height: 47px;
    margin-top: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--green-dark);
    color: white;
    font-size: 8px;
    font-weight: 800;
    cursor: pointer;
}

.rating-submit-btn span {
    margin-left: 6px;
    color: var(--green);
}

.rating-submit-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}


@media (max-width: 760px) {

    .games-past-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .games-past-actions button {
        flex: 1;
    }

}

/* =====================================================
   SEIAURA - NOTIFICATIONS
===================================================== */

.notifications-page {
    min-height: 100vh;
    background: #f7f6ef;
}

.notifications-main {
    width: min(850px, calc(100% - 44px));
    margin: auto;
    padding: 70px 0 100px;
}

.notifications-back-btn {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: white;
    color: var(--ink-soft);
    font-size: 8px;
    font-weight: 800;
}


/* HERO */

.notifications-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.notifications-eyebrow {
    color: var(--green-strong);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.notifications-hero h1 {
    margin-top: 9px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(45px, 6vw, 65px);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.notifications-hero h1 span {
    color: var(--green-strong);
}

.notifications-hero p {
    max-width: 430px;
    margin-top: 13px;
    color: var(--ink-soft);
    font-size: 9px;
    line-height: 1.65;
}

.notifications-read-all {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: white;
    color: var(--ink-soft);
    font-size: 8px;
    font-weight: 800;
}


/* TOOLBAR */

.notifications-toolbar {
    margin-top: 42px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.notifications-tabs {
    display: flex;
    gap: 5px;
}

.notifications-tab {
    min-height: 35px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: white;
    color: #8c9891;
    font-size: 7px;
    font-weight: 900;
}

.notifications-tab span {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: #eef0e9;
    color: #77847d;
    font-size: 6px;
}

.notifications-tab.active {
    border-color: var(--green-dark);
    background: var(--green-dark);
    color: white;
}

.notifications-tab.active span {
    background: var(--green);
    color: var(--green-dark);
}


/* LIST */

.notifications-list {
    margin-top: 15px;
    display: grid;
    gap: 8px;
}

.notification-item {
    position: relative;
    padding: 16px 17px;
    border: 1px solid var(--border);
    border-radius: 17px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    background: white;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.notification-item:hover {
    transform: translateY(-1px);
    border-color: #c9d2c3;
}

.notification-item.unread {
    border-color: rgba(116, 161, 46, 0.28);
    background: #fbfcf5;
}

.notification-icon {
    width: 43px;
    height: 43px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #edf2e5;
    color: var(--green-dark);
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 900;
}

.notification-item.game .notification-icon {
    background: var(--green);
}

.notification-item.connection .notification-icon {
    background: #e5eee5;
}

.notification-item.rating .notification-icon {
    background: #f0ead8;
}

.notification-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.notification-content h3 {
    font-family: "Manrope", sans-serif;
    font-size: 10px;
}

.notification-content p {
    margin-top: 3px;
    color: #849088;
    font-size: 7px;
    line-height: 1.5;
}

.notification-content small {
    margin-top: 5px;
    color: #a0a8a3;
    font-size: 6px;
}

.notification-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notification-open-btn {
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: var(--green-dark);
    color: white;
    font-size: 7px;
    font-weight: 800;
}

.notification-read-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
}

.notification-item.unread .notification-read-dot {
    background: var(--green-strong);
}


/* EMPTY */

.notifications-empty {
    margin-top: 20px;
    padding: 60px 25px;
    border: 1px dashed #d6dcd1;
    border-radius: 23px;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
}

.notifications-empty.hidden {
    display: none;
}

.notifications-empty-icon {
    width: 55px;
    height: 55px;
    margin: auto;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 15px;
    font-weight: 900;
}

.notifications-empty > span {
    display: block;
    margin-top: 17px;
    color: var(--green-strong);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.notifications-empty h2 {
    margin-top: 7px;
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    line-height: 1.05;
}

.notifications-empty p {
    max-width: 350px;
    margin: 9px auto 0;
    color: var(--ink-soft);
    font-size: 8px;
    line-height: 1.6;
}

.notifications-empty button {
    min-height: 43px;
    margin-top: 17px;
    padding: 0 14px;
    border: 0;
    border-radius: 11px;
    background: var(--green-dark);
    color: white;
    font-size: 8px;
    font-weight: 800;
}


/* RESPONSIVE */

@media (max-width: 600px) {

    .notifications-main {
        width: min(100% - 28px, 850px);
    }

    .notifications-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .notification-item {
        grid-template-columns: auto 1fr;
    }

    .notification-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

}

/* =====================================================
   SEIAURA - NOTIFICATION BELL
===================================================== */

.notification-bell-btn {
    position: relative;
    width: 41px;
    height: 41px;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: white;
    color: var(--ink);
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.notification-bell-btn:hover {
    transform: translateY(-1px);
    border-color: #c5d0bf;
    background: #fbfcf7;
}

.notification-bell-icon {
    font-size: 14px;
    line-height: 1;
}

.notification-badge {
    position: absolute;
    right: -5px;
    top: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #f7f6ef;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: var(--green-strong);
    color: var(--green-dark);
    font-family: "Manrope", sans-serif;
    font-size: 6px;
    font-weight: 900;
}

.notification-badge.hidden {
    display: none;
}

/* =====================================================
   SEIAURA - PLAYER PROFILE
===================================================== */

.player-profile-page {
    min-height: 100vh;
    background:
        linear-gradient(
            180deg,
            #f7f8fb 0%,
            #eef1f6 100%
        );
    color: #111827;
}


.player-profile-shell {
    width: min(
        100% - 32px,
        980px
    );
    margin: 0 auto;
    padding:
        24px
        0
        60px;
}


/* =====================================================
   TOP BAR
===================================================== */

.player-profile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}


.player-profile-brand {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
}


.player-profile-back,
.player-profile-more {
    width: 44px;
    height: 44px;
    border: 1px solid #d9dee8;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    font-size: 18px;
    display: grid;
    place-items: center;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}


.player-profile-back:hover,
.player-profile-more:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 24px
        rgba(17, 24, 39, 0.08);
    border-color: #c7ceda;
}


/* =====================================================
   HERO
===================================================== */

.player-profile-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 44px 28px 34px;
    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1f2937 55%,
            #263244 100%
        );
    color: #ffffff;
    text-align: center;
    box-shadow:
        0 24px 60px
        rgba(17, 24, 39, 0.16);
}


.player-profile-hero::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    right: -80px;
    top: -120px;
    background:
        rgba(255, 255, 255, 0.06);
}


.player-profile-avatar-wrap {
    position: relative;
    width: fit-content;
    margin: 0 auto 18px;
}


.player-profile-avatar {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: #111827;
    font-size: 32px;
    font-weight: 800;
    border: 6px solid rgba(255, 255, 255, 0.14);
}


.player-profile-online {
    position: absolute;
    right: 3px;
    bottom: 8px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #22c55e;
    border: 3px solid #111827;
}


.player-profile-sport {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    opacity: 0.62;
}


.player-profile-hero h1 {
    margin: 0;
    font-size:
        clamp(
            32px,
            6vw,
            52px
        );
    line-height: 1;
}


.player-profile-location {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.72);
}


.player-profile-match {
    position: absolute;
    right: 26px;
    top: 26px;
    min-width: 82px;
    padding: 12px 14px;
    border-radius: 16px;
    background:
        rgba(255, 255, 255, 0.1);
    border:
        1px solid
        rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}


.player-profile-match strong {
    display: block;
    font-size: 22px;
}


.player-profile-match span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    opacity: 0.6;
}


/* =====================================================
   STATS
===================================================== */

.player-profile-stats {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
}


.player-profile-stats article {
    min-height: 112px;
    border-radius: 20px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e4e7ee;
    box-shadow:
        0 12px 30px
        rgba(17, 24, 39, 0.05);
}


.player-profile-stats span,
.player-profile-details span {
    display: block;
    margin-bottom: 8px;
    color: #8b95a5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}


.player-profile-stats strong {
    font-size: 17px;
}


/* =====================================================
   SECTIONS
===================================================== */

.player-profile-section {
    margin-top: 30px;
}


.player-profile-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 14px;
}


.player-profile-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #8993a3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}


.player-profile-section h2 {
    margin: 0;
    font-size: 24px;
}


/* =====================================================
   RATING
===================================================== */

.player-profile-rating-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 24px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #e4e7ee;
}


.player-profile-rating-card > div {
    display: flex;
    align-items: center;
    gap: 16px;
}


.player-profile-rating-card strong {
    font-size: 34px;
}


.player-profile-rating-card span {
    font-size: 19px;
    letter-spacing: 3px;
}


.player-profile-rating-card p {
    margin: 0;
    color: #748094;
    font-size: 14px;
}


/* =====================================================
   DETAILS
===================================================== */

.player-profile-details {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 14px;
}


.player-profile-details > div {
    padding: 20px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e4e7ee;
}


.player-profile-details strong {
    font-size: 16px;
}


/* =====================================================
   ACTIONS
===================================================== */

.player-profile-actions {
    position: sticky;
    bottom: 18px;
    display: flex;
    gap: 12px;
    margin-top: 30px;
    padding: 12px;
    border-radius: 20px;
    background:
        rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px);
    border:
        1px solid
        rgba(221, 226, 234, 0.9);
    box-shadow:
        0 18px 40px
        rgba(17, 24, 39, 0.1);
}


.player-profile-primary-btn,
.player-profile-secondary-btn {
    min-height: 52px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        opacity 0.18s ease;
}


.player-profile-primary-btn {
    flex: 1;
    border: 0;
    background: #111827;
    color: #ffffff;
}


.player-profile-secondary-btn {
    min-width: 150px;
    border: 1px solid #dce1e9;
    background: #ffffff;
    color: #111827;
}


.player-profile-primary-btn:hover,
.player-profile-secondary-btn:hover {
    transform: translateY(-2px);
}


.player-profile-primary-btn:disabled {
    cursor: default;
    opacity: 0.6;
    transform: none;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 720px) {

    .player-profile-shell {
        width: min(
            100% - 20px,
            980px
        );
    }


    .player-profile-hero {
        padding:
            38px
            20px
            28px;
    }


    .player-profile-match {
        position: static;
        width: fit-content;
        margin:
            20px
            auto
            0;
    }


    .player-profile-stats,
    .player-profile-details {
        grid-template-columns: 1fr;
    }


    .player-profile-rating-card {
        align-items: flex-start;
        flex-direction: column;
    }


    .player-profile-actions {
        flex-direction: column;
    }


    .player-profile-secondary-btn {
        width: 100%;
    }

}

/* =====================================================
   PLAYER PROFILE - REVIEWS
===================================================== */

.player-profile-reviews {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}


.player-profile-review {
    padding: 18px 20px;
    border: 1px solid #e4e7ee;
    border-radius: 18px;
    background: #ffffff;
}


.player-profile-review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}


.player-profile-review-top strong {
    font-size: 14px;
}


.player-profile-review-top span {
    color: #8b95a5;
    font-size: 11px;
    font-weight: 700;
}


.player-profile-review p {
    margin: 0;
    color: #596579;
    font-size: 14px;
    line-height: 1.6;
}


.player-profile-no-reviews {
    padding: 18px 20px;
    border: 1px dashed #d9dee8;
    border-radius: 18px;
    color: #8b95a5;
    font-size: 13px;
}

/* =====================================================
   PLAYER PROFILE - MORE MENU
===================================================== */

.player-profile-more-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #e2e6ed;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
}

.player-profile-menu {
    position: absolute;
    top: 60px;
    right: 20px;
    width: 180px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #e2e6ed;
    border-radius: 14px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
    z-index: 100;
}

.player-profile-menu.hidden {
    display: none;
}

.player-profile-menu button {
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.player-profile-menu button:hover {
    background: #f5f6f8;
}

.player-profile-menu button.danger {
    color: #c93b3b;
}

/* =====================================================
   PLAYER REPORT MODAL
===================================================== */

.player-report-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(5px);
}

.player-report-overlay.hidden {
    display: none;
}

.player-report-modal {
    width: min(100%, 480px);
    padding: 26px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

.player-report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.player-report-header span {
    color: #8b95a5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.player-report-header h2 {
    margin: 4px 0 0;
}

.player-report-header button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: #f2f4f7;
    cursor: pointer;
    font-size: 22px;
}

.player-report-description {
    margin: 16px 0;
    color: #6b7280;
}

.player-report-options {
    display: grid;
    gap: 8px;
}

.player-report-options label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid #e3e7ed;
    border-radius: 12px;
    cursor: pointer;
}

.player-report-modal textarea {
    width: 100%;
    min-height: 90px;
    margin-top: 14px;
    padding: 13px;
    border: 1px solid #e3e7ed;
    border-radius: 12px;
    resize: vertical;
    font: inherit;
    box-sizing: border-box;
}

.player-report-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    border: 0;
    border-radius: 12px;
    background: #111827;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.player-report-submit:disabled {
    opacity: 0.4;
    cursor: default;
}

/* =====================================================
   PROFILE - BLOCKED PLAYERS
===================================================== */

.profile-blocked-section {
    margin-top: 28px;
}

.profile-section-heading span {
    color: #8b95a5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.profile-section-heading h2 {
    margin: 5px 0 16px;
}

.blocked-players-list {
    display: grid;
    gap: 12px;
}

.blocked-player-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid #e4e7ee;
    border-radius: 18px;
    background: #ffffff;
}

.blocked-player-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blocked-player-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f1f3f6;
    font-weight: 800;
}

.blocked-player-info strong {
    display: block;
    font-size: 14px;
}

.blocked-player-info span {
    display: block;
    margin-top: 3px;
    color: #8b95a5;
    font-size: 12px;
}

.blocked-player-unblock {
    padding: 9px 14px;
    border: 1px solid #dfe3ea;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    font-weight: 700;
}

.blocked-player-unblock:hover {
    background: #f5f6f8;
}

.blocked-empty-state {
    padding: 20px;
    border: 1px dashed #d9dee8;
    border-radius: 16px;
    color: #8b95a5;
    font-size: 13px;
}

/* =====================================================
   PROFILE - MY BUDDIES
===================================================== */

.profile-buddies-section {
    margin-top: 28px;
}

.profile-buddies-description {
    margin-top: -8px;
    margin-bottom: 18px;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.6;
}

.my-buddies-list {
    display: grid;
    gap: 14px;
}

.my-buddy-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    padding: 18px 20px;

    border: 1px solid var(--border);
    border-radius: 20px;

    background: var(--surface);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.my-buddy-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(136, 186, 45, 0.35);

    box-shadow:
        0 14px 30px
        rgba(20, 53, 40, 0.07);
}

.my-buddy-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.my-buddy-avatar {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    border-radius: 15px;

    display: grid;
    place-items: center;

    background: #edf4df;

    color: var(--green-dark);

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 800;
}

.my-buddy-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.my-buddy-info strong {
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    color: var(--ink);
}

.my-buddy-info span {
    margin-top: 3px;

    color: var(--ink-soft);

    font-size: 10px;
    font-weight: 600;
}

.my-buddy-info small {
    margin-top: 5px;

    color: var(--green-strong);

    font-size: 9px;
    font-weight: 800;
}

.my-buddy-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.my-buddy-actions button {
    min-height: 40px;

    padding: 0 14px;

    border-radius: 11px;

    font-size: 10px;
    font-weight: 800;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.my-buddy-view,
.my-buddy-message {
    border: 1px solid var(--border);

    background: #f7f7f1;

    color: var(--ink);
}

.my-buddy-view:hover,
.my-buddy-message:hover {
    background: #eeeeE6;
    transform: translateY(-1px);
}

.my-buddy-plan {
    background: var(--green-dark);
    color: white;
}

.my-buddy-plan:hover {
    transform: translateY(-1px);

    box-shadow:
        0 8px 18px
        rgba(27, 75, 53, 0.15);
}

.my-buddies-empty {
    padding: 20px;

    border: 1px dashed var(--border);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.45);

    color: var(--ink-soft);

    font-size: 11px;
}


/* =====================================================
   MY BUDDIES - RESPONSIVE
===================================================== */

@media (max-width: 760px) {

    .my-buddy-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .my-buddy-actions {
        width: 100%;
    }

    .my-buddy-actions button {
        flex: 1;
    }

}


@media (max-width: 480px) {

    .my-buddy-actions {
        flex-direction: column;
    }

    .my-buddy-actions button {
        width: 100%;
    }

}

/* =====================================================
   MATCHING PREFERENCES / SETTINGS PAGE
===================================================== */

.matching-page {
    min-height: 100vh;
    background: var(--background);
    color: var(--ink);
}

.onboarding-nav {
    width: min(1180px, calc(100% - 40px));
    height: 78px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-logo {
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.auth-logo span {
    color: var(--green-strong);
}

.onboarding-progress-text {
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.onboarding-progress-text span {
    color: var(--green-strong);
}

.progress-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.progress-container .progress-track {
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    background: #e1e4dc;
}

.progress-container .progress-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--green-strong),
        var(--green)
    );
}


.matching-main {
    width: min(940px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 90px;
}

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

.matching-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto;

    border-radius: 18px;

    display: grid;
    place-items: center;

    background: #edf5df;

    font-size: 25px;
}

.auth-eyebrow {
    display: block;
    margin-top: 20px;

    color: var(--green-strong);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.matching-intro h1 {
    margin-top: 13px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(46px, 6vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.matching-intro h1 span {
    color: var(--green-strong);
}

.matching-intro p {
    max-width: 520px;
    margin: 18px auto 0;

    color: var(--ink-soft);

    font-size: 13px;
    line-height: 1.7;
}


/* MAIN CARD */

.matching-card {
    margin-top: 50px;
    padding: 35px;

    border: 1px solid var(--border);
    border-radius: 30px;

    background: var(--surface);

    box-shadow:
        0 24px 60px
        rgba(20, 53, 40, 0.08);
}

.matching-section {
    padding: 32px 0;
    border-bottom: 1px solid var(--border);
}

.matching-section:first-child {
    padding-top: 0;
}

.matching-section:last-of-type {
    border-bottom: 0;
}

.matching-heading {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.matching-number {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

    border-radius: 11px;

    display: grid;
    place-items: center;

    background: var(--green);

    color: var(--green-dark);

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 800;
}

.matching-heading h2 {
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    letter-spacing: -0.03em;
}

.matching-heading p {
    margin-top: 5px;

    color: var(--ink-soft);

    font-size: 10px;
    line-height: 1.55;
}


/* GENERAL CHOICE CARDS */

.match-choice-grid,
.style-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    margin-top: 24px;
}

.match-choice,
.style-choice {
    min-height: 120px;
    padding: 17px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: #fafaf5;

    color: var(--ink);

    text-align: left;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.match-choice:hover,
.style-choice:hover {
    transform: translateY(-2px);

    border-color:
        rgba(136, 186, 45, 0.45);

    box-shadow:
        0 12px 25px
        rgba(20, 53, 40, 0.06);
}

.match-choice.selected,
.style-choice.selected {
    border-color: var(--green-strong);
    background: #f3f9e8;

    box-shadow:
        0 0 0 3px
        rgba(184, 239, 80, 0.11);
}

.match-choice {
    display: flex;
    align-items: center;
    gap: 13px;
}

.match-choice-icon,
.style-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    border-radius: 14px;

    display: grid;
    place-items: center;

    background: #eef1e7;

    font-size: 20px;
}

.match-choice.selected .match-choice-icon,
.style-choice.selected .style-icon {
    background: var(--green);
}

.match-choice strong,
.style-choice strong {
    font-family: "Manrope", sans-serif;
    font-size: 13px;
}

.match-choice small,
.style-choice small {
    display: block;
    margin-top: 4px;

    color: var(--ink-soft);

    font-size: 9px;
    line-height: 1.5;
}

.style-choice-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 15px;
}

.style-check {
    width: 22px;
    height: 22px;

    border: 1px solid #d9ded7;
    border-radius: 50%;

    display: grid;
    place-items: center;

    background: white;

    color: transparent;

    font-size: 9px;
    font-weight: 900;
}

.style-choice.selected .style-check {
    border-color: var(--green-strong);
    background: var(--green);
    color: var(--green-dark);
}


/* AGE + DISTANCE */

.age-range-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;

    margin-top: 24px;
}

.age-option {
    min-height: 48px;

    padding: 0 14px;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: #fafaf5;

    color: var(--ink-soft);

    font-size: 10px;
    font-weight: 800;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.age-option:hover {
    transform: translateY(-1px);
}

.age-option.selected {
    border-color: var(--green-strong);

    background: var(--green);

    color: var(--green-dark);
}


/* CONTACT */

.contact-choice-grid {
    display: grid;
    gap: 10px;

    margin-top: 24px;
}

.contact-choice {
    width: 100%;
    min-height: 78px;

    padding: 15px 17px;

    border: 1px solid var(--border);
    border-radius: 16px;

    display: flex;
    align-items: center;
    gap: 14px;

    background: #fafaf5;

    color: var(--ink);

    text-align: left;
}

.contact-choice.selected {
    border-color: var(--green-strong);
    background: #f3f9e8;
}

.contact-radio {
    width: 27px;
    height: 27px;

    flex-shrink: 0;

    border: 1px solid #d6ddd8;
    border-radius: 50%;

    display: grid;
    place-items: center;

    background: white;

    color: transparent;

    font-size: 10px;
    font-weight: 900;
}

.contact-choice.selected .contact-radio {
    border-color: var(--green-strong);
    background: var(--green);
    color: var(--green-dark);
}

.contact-choice strong {
    font-family: "Manrope", sans-serif;
    font-size: 12px;
}

.contact-choice small {
    display: block;
    margin-top: 4px;

    color: var(--ink-soft);

    font-size: 9px;
    line-height: 1.5;
}


/* TEXT AREA */

.specification-box {
    position: relative;
    margin-top: 24px;
}

.specification-box textarea {
    width: 100%;
    min-height: 125px;

    padding: 16px 17px 34px;

    resize: vertical;

    border: 1px solid var(--border);
    border-radius: 16px;

    outline: none;

    background: #fafaf5;

    color: var(--ink);

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    line-height: 1.6;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.specification-box textarea:focus {
    border-color: var(--green-strong);

    box-shadow:
        0 0 0 4px
        rgba(184, 239, 80, 0.12);
}

.character-count {
    position: absolute;
    right: 13px;
    bottom: 11px;

    color: #929e97;

    font-size: 9px;
}


/* PRIVACY */

.matching-privacy {
    margin-top: 25px;
    padding: 17px;

    border-radius: 17px;

    display: flex;
    align-items: flex-start;
    gap: 13px;

    background: #eef5e3;
}

.matching-privacy > span {
    font-size: 18px;
}

.matching-privacy strong {
    font-size: 10px;
}

.matching-privacy p {
    margin-top: 4px;

    color: var(--ink-soft);

    font-size: 9px;
    line-height: 1.55;
}


/* FINISH BUTTON */

.matching-finish-button {
    width: 100%;
    min-height: 56px;

    margin-top: 26px;
    padding: 0 20px;

    border-radius: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: var(--green-dark);

    color: white;

    font-size: 12px;
    font-weight: 800;

    box-shadow:
        0 14px 30px
        rgba(27, 75, 53, 0.14);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.matching-finish-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 19px 38px
        rgba(27, 75, 53, 0.18);
}

.matching-finish-button strong {
    color: var(--green);
    font-size: 18px;
}

.matching-footer {
    margin-top: 18px;

    color: var(--ink-soft);

    font-size: 9px;
    text-align: center;
}

.matching-footer span {
    color: var(--green-strong);
    font-weight: 900;
}


/* RESPONSIVE */

@media (max-width: 760px) {

    .matching-main {
        width: min(100% - 24px, 940px);
        padding-top: 45px;
    }

    .matching-card {
        padding: 22px;
        border-radius: 22px;
    }

    .match-choice-grid,
    .style-choice-grid {
        grid-template-columns: 1fr;
    }

    .age-range-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 480px) {

    .onboarding-nav,
    .progress-container {
        width: calc(100% - 24px);
    }

    .matching-intro h1 {
        font-size: 42px;
    }

    .age-range-grid {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   AGE VERIFICATION PAGE
===================================================== */

.age-verification-page {
    min-height: 100vh;
    background: var(--background);
    color: var(--ink);
    font-family: "DM Sans", sans-serif;
}

.age-verification-container {
    width: min(920px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0;
}

.age-verification-header {
    margin-bottom: 28px;
}

.age-verification-header > span {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--green-dark);
}

.age-verification-header h1 {
    margin: 0 0 12px;
    font-size: clamp(42px, 7vw, 72px);
    line-height: 0.98;
    font-family: "Manrope", sans-serif;
}

.age-verification-header p {
    max-width: 620px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1.6;
}

.verification-method-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-top: 34px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.verification-method-info {
    max-width: 560px;
}

.verification-method-info > span {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--green-dark);
}

.verification-method-info h2 {
    margin: 0 0 10px;
    font-size: 28px;
    font-family: "Manrope", sans-serif;
}

.verification-method-info p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
}

.verify-age-btn {
    border: 0;
    border-radius: 999px;
    padding: 14px 20px;
    background: var(--green);
    color: var(--green-dark);
    font-weight: 800;
    cursor: pointer;
}

.verification-privacy-note {
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

.verification-privacy-note strong {
    display: block;
    margin-bottom: 6px;
}

.verification-privacy-note p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
}

.age-verification-container .secondary-button {
    margin-top: 24px;
}

@media (max-width: 700px) {
    .verification-method-card {
        flex-direction: column;
        align-items: stretch;
    }

    .verify-age-btn {
        width: 100%;
    }
}

/* =====================================================
   ONBOARDING — AGE VERIFICATION CARD
===================================================== */

.onboarding-page .age-verification-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 28px;
    align-items: stretch;

    margin-top: 24px;
    padding: 26px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfcf7 100%
        );

    border: 1px solid var(--border);
    border-radius: 28px;

    box-shadow:
        0 18px 45px rgba(31, 54, 42, 0.08);
}


/* LEFT SIDE */

.onboarding-page .age-verification-main {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.onboarding-page .age-verification-icon {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #e8f7d6,
            #d6efbd
        );

    color: var(--green-dark);

    font-size: 24px;
    font-weight: 900;
}

.onboarding-page .age-verification-copy {
    min-width: 0;
}

.onboarding-page .age-verification-label {
    display: block;

    margin-bottom: 6px;

    color: var(--green-dark);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.onboarding-page .age-verification-copy h3 {
    margin: 0;

    color: var(--ink);

    font-family: "Manrope", sans-serif;
    font-size: 25px;
    line-height: 1.15;
}

.onboarding-page .age-verification-copy > p {
    max-width: 510px;

    margin: 9px 0 0;

    color: var(--ink-soft);

    font-size: 14px;
    line-height: 1.55;
}


/* BENEFITS */

.onboarding-page .verification-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 20px;
}

.onboarding-page .verification-benefit {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 9px 11px;

    background: var(--surface-soft);

    border-radius: 12px;

    color: var(--ink);
}

.onboarding-page .verification-benefit span {
    color: var(--green-dark);
    font-size: 12px;
}

.onboarding-page .verification-benefit strong {
    font-size: 11px;
    font-weight: 700;
}


/* RIGHT SIDE */

.onboarding-page .age-verification-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 12px;

    padding-left: 26px;

    border-left:
        1px solid var(--border);
}

.onboarding-page .age-verification-status {
    align-self: flex-start;

    padding: 7px 12px;

    border-radius: 999px;

    background: #fff0ee;
    color: #a13a30;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.onboarding-page .age-verification-side .verify-age-btn {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 17px;

    border: 0;
    border-radius: 999px;

    background: var(--green);
    color: var(--green-dark);

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.onboarding-page .age-verification-side .verify-age-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 24px rgba(136, 186, 45, 0.22);
}

.onboarding-page .verify-age-arrow {
    font-size: 20px;
    line-height: 1;
}

.onboarding-page .age-verification-side small {
    text-align: center;

    color: var(--ink-soft);

    font-size: 10px;
}


/* MOBILE */

@media (max-width: 760px) {

    .onboarding-page .age-verification-card {
        grid-template-columns: 1fr;
    }

    .onboarding-page .age-verification-side {
        padding-left: 0;
        padding-top: 20px;

        border-left: 0;
        border-top:
            1px solid var(--border);
    }

}

/* =====================================================
   PREMIUM AGE VERIFICATION PAGE
===================================================== */

.age-verification-page {
    min-height: 100vh;
    margin: 0;

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(184, 239, 80, 0.16),
            transparent 29%
        ),
        radial-gradient(
            circle at 92% 92%,
            rgba(184, 239, 80, 0.13),
            transparent 25%
        ),
        #f8f8f1;

    color: var(--ink);

    font-family:
        "DM Sans",
        sans-serif;
}


.age-verification-screen {
    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin: 0 auto;

    padding:
        34px 0 70px;
}


/* TOP BAR */

.age-verification-topbar {
    display: flex;

    justify-content:
        space-between;

    align-items: center;
}


.verification-top-back {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 0;

    border: 0;

    background: transparent;

    color: var(--ink);

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;
}


.verification-top-back:hover {
    opacity: 0.7;
}


.age-verification-brand {
    display: flex;

    align-items: center;

    gap: 10px;

    color:
        var(--green-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 18px;

    letter-spacing:
        0.02em;
}


.age-brand-icon {
    font-size: 28px;
}


/* HERO */

.age-verification-hero {
    max-width: 780px;

    margin:
        66px auto 48px;

    text-align: center;
}


.age-verification-badge {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        11px 18px;

    border-radius: 999px;

    background:
        rgba(
            184,
            239,
            80,
            0.18
        );

    color:
        var(--green-dark);

    font-size: 12px;

    font-weight: 900;

    letter-spacing:
        0.1em;
}


.age-verification-hero h1 {
    margin:
        24px 0 14px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            54px,
            7vw,
            86px
        );

    line-height: 0.98;

    letter-spacing:
        -0.045em;
}


.age-verification-hero p {
    max-width: 700px;

    margin: 0 auto;

    color:
        var(--ink-soft);

    font-size: 21px;

    line-height: 1.55;
}


/* DIGILOCKER CARD */

.digilocker-card {
    display: grid;

    grid-template-columns:
        160px
        minmax(0, 1fr)
        300px;

    gap: 28px;

    align-items: center;

    padding: 34px;

    border:
        1px solid
        var(--border);

    border-radius: 30px;

    background:
        rgba(
            255,
            255,
            255,
            0.86
        );

    box-shadow:
        0 26px 70px
        rgba(
            31,
            54,
            42,
            0.09
        );

    backdrop-filter:
        blur(12px);
}


.digilocker-logo-box {
    min-height: 150px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 12px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f3f6eb,
            #ecf3df
        );

    color: #6046ff;

    text-align: center;
}


.digilocker-logo-symbol {
    width: 62px;

    height: 62px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            150deg,
            #6449ff,
            #7d56ff
        );

    color: #ffffff;

    font-size: 30px;

    box-shadow:
        0 14px 30px
        rgba(
            100,
            73,
            255,
            0.18
        );
}


.digilocker-logo-box strong {
    font-size: 17px;
}


.digilocker-card-copy > span {
    display: block;

    margin-bottom: 8px;

    color:
        var(--green-dark);

    font-size: 12px;

    font-weight: 900;

    letter-spacing:
        0.09em;
}


.digilocker-card-copy h2 {
    margin:
        0 0 12px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 31px;

    letter-spacing:
        -0.025em;
}


.digilocker-card-copy p {
    margin: 0;

    max-width: 570px;

    color:
        var(--ink-soft);

    font-size: 16px;

    line-height: 1.55;
}


.digilocker-card-action {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 12px;
}


.digilocker-continue-btn {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 14px;

    padding:
        17px 21px;

    border: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #9be83b,
            #b7f24e
        );

    color:
        var(--green-dark);

    font-size: 15px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 12px 28px
        rgba(
            136,
            186,
            45,
            0.18
        );

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.digilocker-continue-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 34px
        rgba(
            136,
            186,
            45,
            0.26
        );
}


.digilocker-card-action small {
    text-align: center;

    color:
        var(--ink-soft);

    font-size: 12px;
}


/* PRIVACY */

.verification-privacy-card {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 25px;

    padding:
        24px 28px;

    border-radius: 24px;

    background:
        linear-gradient(
            90deg,
            rgba(
                184,
                239,
                80,
                0.15
            ),
            rgba(
                184,
                239,
                80,
                0.08
            )
        );
}


.verification-privacy-icon {
    flex: 0 0 58px;

    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(
            184,
            239,
            80,
            0.25
        );

    font-size: 25px;
}


.verification-privacy-card h3 {
    margin:
        0 0 4px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 21px;
}


.verification-privacy-card p {
    margin: 0;

    color:
        var(--ink-soft);

    line-height: 1.5;
}


/* BENEFIT ROW */

.verification-benefit-row {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 24px;

    margin:
        34px 0 38px;
}


.verification-feature {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;
}


.verification-feature-icon {
    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #ffffff;

    color:
        var(--green-dark);

    font-size: 26px;

    box-shadow:
        0 10px 25px
        rgba(
            31,
            54,
            42,
            0.07
        );
}


.verification-feature span {
    color:
        var(--ink-soft);

    font-size: 14px;

    font-weight: 700;

    line-height: 1.4;
}


/* BOTTOM BACK */

.verification-bottom-back {
    min-width: 370px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    margin:
        0 auto;

    padding:
        16px 24px;

    border:
        1px solid
        rgba(
            20,
            53,
            40,
            0.24
        );

    border-radius: 17px;

    background:
        rgba(
            255,
            255,
            255,
            0.3
        );

    color:
        var(--ink);

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.verification-bottom-back:hover {
    background:
        #ffffff;

    transform:
        translateY(-1px);
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .digilocker-card {
        grid-template-columns:
            120px
            1fr;
    }

    .digilocker-card-action {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 650px) {

    .age-verification-screen {
        width:
            min(
                100% - 28px,
                1180px
            );
    }

    .age-verification-brand {
        font-size: 14px;
    }

    .age-verification-hero {
        margin-top: 45px;
    }

    .age-verification-hero p {
        font-size: 17px;
    }

    .digilocker-card {
        grid-template-columns:
            1fr;
    }

    .digilocker-logo-box {
        min-height: 120px;
    }

    .verification-benefit-row {
        grid-template-columns:
            1fr;
    }

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

    .verification-bottom-back {
        min-width: 0;

        width: 100%;
    }

}

.digilocker-logo-symbol svg,
.verification-privacy-icon svg {
    width: 34px;
    height: 34px;
    display: block;
}

.digilocker-logo-symbol {
    color: #ffffff;
}

.verification-privacy-icon {
    color: var(--green-dark);
}

.digilocker-logo-box {
    min-height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f3f7eb,
            #edf3e3
        );

    overflow: hidden;
}

.digilocker-official-logo {
    display: block;

    width: 115px;
    height: 115px;

    object-fit: contain;
}

/* Bigger DigiLocker logo inside the existing square */

.digilocker-logo-box img {
    width: 100%;
    height: 150%;
    object-fit: contain;
    transform: scale(1.95);
    display: block;
}

.digilocker-logo-box {
    overflow: hidden;
}

/* ARJUN TEST — MATCH BADGE ONLY */

.discovery-card:first-child .discovery-match-score {
    position: absolute;

    top: 151px;
    right: 24px;
    bottom: auto;

    width: auto;
    height: auto;
    min-width: 82px;

    padding: 8px 13px;

    border: 0;
    border-radius: 17px;

    background: rgba(73, 84, 77, 0.12);

    box-shadow:
        0 4px 12px rgba(28, 45, 36, 0.08);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #183d32;
}

.discovery-card:first-child .discovery-match-score::before {
    display: none;
}

.discovery-card:first-child .discovery-match-score strong {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;

    color: #183d32;
}

.discovery-card:first-child .discovery-match-score span {
    margin-top: 2px;

    font-size: 7px;
    font-weight: 700;

    color: #66726c;

    letter-spacing: 0.3px;
}

/* ARJUN TEST — MATCH TEXT ONLY */

.discovery-card:first-child .discovery-match-score {
    position: absolute;

    top: 185px;
    right: 35px;
    bottom: auto;
    left: auto;

    width: auto;
    height: auto;
    min-width: 0;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;

    color: #29463d;
}

.discovery-card:first-child .discovery-match-score::before {
    display: none;
}

.discovery-card:first-child .discovery-match-score strong {
    margin: 0;

    font-size: 19px;
    font-weight: 800;
    line-height: 1;

    color: #29463d;
}

.discovery-card:first-child .discovery-match-score span {
    margin-top: 3px;

    font-size: 7px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.4px;

    color: #7b847f;
}

/* ARJUN — MATCH TEXT */

.discovery-card:first-child .discovery-match-score {
    position: absolute;

    top: 185px;
    right: 35px;
    bottom: auto;
    left: auto;

    width: auto;
    height: auto;
    min-width: 0;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    z-index: 3;
}

.discovery-card:first-child .discovery-match-score::before {
    display: none;
}

.discovery-card:first-child .discovery-match-score strong {
    margin: 0;

    font-size: 19px;
    font-weight: 800;
    line-height: 1;

    color: #29463d;
}

.discovery-card:first-child .discovery-match-score span {
    margin-top: 3px;

    font-size: 7px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.4px;

    color: #7b847f;
}

/* SPORT-SPECIFIC PLAYER BACKGROUNDS */

.discovery-card .discovery-card-profile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Keep avatars above the artwork */
.discovery-card .discovery-card-profile .discovery-avatar {
    position: relative;
    z-index: 1;
}

/* Choose the image using the existing sport class */
.discovery-card.sport-badminton {
    --player-sport-image: url("badminton-motion.png");
    --player-art-size: 125% auto;
    --player-art-position: -25% center;
}

.discovery-card.sport-pickleball {
    --player-sport-image: url("pickleball-motion.png");
    --player-art-size: cover;
    --player-art-position: calc(65% - 4px) center;
}

.discovery-card.sport-tennis {
    --player-sport-image: url("tennis-motion.png");
    --player-art-size: cover;
    --player-art-position: center;
}

/* Shared background layer */
.discovery-card.sport-badminton .discovery-card-profile::before,
.discovery-card.sport-pickleball .discovery-card-profile::before,
.discovery-card.sport-tennis .discovery-card-profile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image: var(--player-sport-image);
    background-repeat: no-repeat;
    background-size: var(--player-art-size);
    background-position: var(--player-art-position);

    opacity: 0.5;
    animation: discoverySportDrift 5s ease-in-out infinite alternate;
}

/* Gentle movement of the background image */
@keyframes discoverySportDrift {
    from {
        transform: scale(1.035) translate(-2px, 1px);
    }

    to {
        transform: scale(1.06) translate(3px, -2px);
    }
}

/* Slightly different timing across cards */
.discovery-card:nth-child(2n) .discovery-card-profile::before {
    animation-delay: -2s;
}

.discovery-card:nth-child(3n) .discovery-card-profile::before {
    animation-delay: -3.5s;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .discovery-card .discovery-card-profile::before {
        animation: none;
        transform: none;
    }
}

/* ARJUN TEST — MATCH BESIDE NAME */

.discovery-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.discovery-name-row h3 {
    margin: 0;
}

.discovery-name-block {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.discovery-name-match {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.discovery-name-match strong {
    color: #1d3557;
    font-family: "Manrope", sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-transform: none;
}

/* AGE / LEVEL / EXPERIENCE — open strip, no boxes */

.discovery-card-info .discovery-card-meta {
    margin-top: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: stretch;
    gap: 0;
    font-size: inherit;
}

.meta-stat {
    flex: 1;
    padding: 0 16px;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.meta-stat:first-child {
    flex: 0.6;
    padding-left: 0;
    border-left: 0;
}

.meta-stat span {
    color: #8b9891;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.meta-stat strong {
    color: var(--ink);
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* AGE VERIFIED BADGE */

.age-verified-badge {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    border-radius: 999px;

    background: rgba(117, 176, 77, 0.12);

    color: #49743a;

    font-size: 10px;
    font-weight: 700;

    line-height: 1;
}

/* PLAYER STATUS — PREMIUM */

.player-online {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 11px;

    border-radius: 999px;

    background: rgba(235, 242, 231, 0.92);

    color: #476251;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;

    box-shadow:
        0 4px 12px rgba(30, 55, 42, 0.05);
}

.player-online::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #78bf3b;

    box-shadow:
        0 0 0 3px rgba(120, 191, 59, 0.10);
}

/* DISCOVERY CARD — CLEAN SPORT TAGS */

.discovery-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 13px;
}

.discovery-tags span {
    padding: 6px 10px;

    border: 1px solid rgba(43, 75, 61, 0.10);
    border-radius: 8px;

    background: rgba(247, 249, 246, 0.75);

    color: #52635b;

    font-size: 10px;
    font-weight: 650;
    line-height: 1;

    box-shadow: none;
}

/* DISCOVERY CARD — PREMIUM ACTION BUTTONS */

.discovery-card-actions {
    margin-top: 18px;

    display: grid;
    grid-template-columns: 1fr 48px;
    gap: 9px;
}

.player-request-btn {
    min-height: 48px;

    border: none;
    border-radius: 13px;

    background: #184f3d;

    color: #ffffff;

    font-size: 11px;
    font-weight: 750;

    box-shadow:
        0 7px 18px rgba(24, 79, 61, 0.12);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.player-request-btn:hover {
    transform: translateY(-1px);

    background: #1d5c48;

    box-shadow:
        0 10px 22px rgba(24, 79, 61, 0.16);
}

.player-request-btn.requested {
    background: #e8f2dc;

    color: #587831;

    box-shadow: none;
}

.player-view-btn {
    width: 48px;
    height: 48px;
    min-height: 48px;

    border: 1px solid rgba(30, 70, 54, 0.11);
    border-radius: 13px;

    background: #f8faf7;

    color: #24483b;

    font-size: 18px;

    display: grid;
    place-items: center;

    transition:
        transform 0.18s ease,
        background 0.18s ease;
}

.player-view-btn:hover {
    transform: translate(1px, -1px);

    background: #eef4ef;
}

/* DISCOVERY CARD — SPLIT LOWER SECTION */

.discovery-card-info {
    margin-top: 7;

    padding: 18px 18px 16px;

    border-top: 1px solid rgba(57, 91, 73, 0.14);

    border-radius: 0 0 18px 18px;
}

/* DASHBOARD — HEADER TEST */

.dashboard-page .dashboard-main h1,
.dashboard-page .dashboard-header h1 {
    font-family: "Manrope", sans-serif;

    font-size: clamp(42px, 5vw, 68px);
    font-weight: 750;

    line-height: 0.95;
    letter-spacing: -0.055em;

    color: #173f33;
}

.dashboard-page .dashboard-main > p,
.dashboard-page .dashboard-header p {
    margin-top: 10px;

    font-size: 13px;
    line-height: 1.6;

    color: #7d8a84;
}

#dashboard-new-game-btn {
    min-height: 48px;

    padding: 0 20px;

    border: none;
    border-radius: 14px;

    background: #17634f;

    color: white;

    font-size: 11px;
    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(23, 99, 79, 0.14);
}

/* =====================================================
   UPCOMING GAME — COMPACT PREMIUM CARD
===================================================== */

.dashboard-games-grid {
    gap: 14px;
}

.dashboard-game-card {
    min-height: 0;

    border-radius: 18px;

    background: #fffdfa;

    overflow: hidden;
}


/* TOP ROW */

.dashboard-game-top {
    padding: 12px 16px 8px;
}

.dashboard-game-sport {
    gap: 9px;
}

.dashboard-game-sport-icon {
    width: 34px;
    height: 34px;

    border-radius: 10px;
}

.dashboard-game-sport strong {
    font-size: 14px;
}

.dashboard-game-sport span {
    font-size: 6px;
}

.dashboard-game-status {
    padding: 5px 8px;

    font-size: 6px;
}


/* MAIN INFO */

.dashboard-game-main {
    grid-template-columns: 58px 1fr;

    gap: 13px;

    padding: 6px 16px 12px;
}

.dashboard-game-date {
    min-height: 64px;

    border-radius: 12px;
}

.dashboard-game-date strong {
    font-size: 21px;
}

.dashboard-game-date span,
.dashboard-game-date small {
    font-size: 7px;
}

.dashboard-game-info > span {
    font-size: 6px;
}

.dashboard-game-info h3 {
    margin: 2px 0 1px;

    font-size: 16px;
}

.dashboard-game-info p {
    font-size: 8px;
}

.dashboard-game-time {
    margin-top: 4px;

    font-size: 8px;
}


/* PLAYER ROW */

.dashboard-game-buddy {
    padding: 9px 16px;

    min-height: 52px;
}

.dashboard-game-avatar {
    width: 34px;
    height: 34px;

    border-radius: 10px;

    font-size: 11px;
}

.dashboard-game-buddy-left {
    gap: 9px;
}

.dashboard-game-buddy-left span {
    font-size: 6px;
}

.dashboard-game-buddy-left strong {
    font-size: 10px;
}


/* BUTTONS */

.dashboard-game-actions {
    gap: 6px;
}

.dashboard-game-message,
.dashboard-game-view {
    min-height: 32px;

    padding: 0 10px;

    border-radius: 10px;

    font-size: 8px;
}

/* =====================================================
   PROFILE AVATAR PICKER
===================================================== */

.profile-avatar-section {
    margin-bottom: 24px;

    padding: 24px;

    background: #ffffff;

    border: 1px solid #e5eee8;

    border-radius: 24px;

    box-shadow:
        0 10px 32px rgba(29, 72, 52, 0.05);
}


.profile-avatar-description {
    margin-top: 8px;

    color: #7d8b84;

    font-size: 12px;

    line-height: 1.6;
}


.profile-avatar-options {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 12px;

    margin-top: 20px;
}


.profile-avatar-option {
    position: relative;

    border: 2px solid transparent;

    background: transparent;

    border-radius: 18px;

    padding: 5px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.profile-avatar-option:hover {
    transform: translateY(-3px);

    background: #f5fbf7;
}


.profile-avatar-option.selected {
    border-color: #15b968;

    background: #effaf3;
}


.profile-avatar-option img,
.profile-avatar-preview {
    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 14px;
}


.profile-avatar-preview {
    display: grid;

    place-items: center;

    background:
        linear-gradient(
            145deg,
            #dff6e7,
            #ccebd7
        );

    color: #126941;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 24px;

    font-weight: 700;
}


.profile-avatar-option small {
    display: block;

    margin-top: 5px;

    text-align: center;

    color: #718078;

    font-size: 8px;

    font-weight: 700;
}


@media (max-width: 900px) {

    .profile-avatar-options {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


@media (max-width: 520px) {

    .profile-avatar-options {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}

/* =====================================================
   ACTIVE PROFILE AVATAR
===================================================== */

.profile-main-avatar img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: inherit;
}

.profile-main-avatar {
    overflow: hidden;
}

/* =====================================================
   NAVBAR PROFILE AVATAR
===================================================== */

.app-profile-btn {
    position: relative;
    overflow: hidden;
}

.app-profile-btn .nav-profile-avatar {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: inherit;
}

/* =====================================================
   DISCOVERY PLAYER AVATAR IMAGE
===================================================== */

.discovery-avatar {
    overflow: hidden;
}

.discovery-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: inherit;
}

/* =====================================================
   REQUEST PLAYER AVATAR
===================================================== */

.request-avatar {
    overflow: hidden;
}

.request-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: inherit;
}

/* =====================================================
   MY BUDDIES AVATAR IMAGE
===================================================== */

.my-buddy-avatar {
    overflow: hidden;
}

.my-buddy-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: inherit;
}

/* =====================================================
   FIRST CARD — REFINED CALENDAR TEST
===================================================== */


/* SPORT NAME BIGGER */

.dashboard-game-card
.dashboard-game-sport strong {
    font-size: 18px;
    line-height: 1.1;
}

.dashboard-game-card
.dashboard-game-sport span {
    font-size: 7px;
}


/* =====================================================
   CALENDAR — MORE ACCURATE
===================================================== */

.dashboard-game-card
.dashboard-game-date {
    width: 64px;
    height: 78px;
    min-height: 78px;

    padding: 0;

    border-radius: 11px;

    background: #ffffff;

    border:
        1px solid
        rgba(25, 79, 57, 0.12);

    box-shadow:
        0 5px 12px
        rgba(25, 79, 57, 0.10);

    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}


/* MONTH — GREEN HEADER */

.dashboard-game-card
.dashboard-game-date small {
    order: 1;

    width: 100%;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    margin: 0;

    background: #176b5b;

    color: #ffffff;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* DATE NUMBER */

.dashboard-game-card
.dashboard-game-date strong {
    order: 2;

    margin: 5px 0 0;

    font-size: 25px;
    font-weight: 700;
    line-height: 1;

    color: #173b2e;
}


/* WEEKDAY */

.dashboard-game-card
.dashboard-game-date span {
    order: 3;

    margin-top: 4px;

    font-size: 8px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.04em;

    color: #637a70;

    text-transform: uppercase;
}


/* =====================================================
   CALENDAR + VENUE CLOSER TOGETHER
===================================================== */

.dashboard-game-card
.dashboard-game-main {
    grid-template-columns: 64px 1fr;

    gap: 10px;

    padding:
        6px
        16px
        12px;
}


/* =====================================================
   ARYAN AVATAR BIGGER
===================================================== */

.dashboard-game-card
.dashboard-game-avatar {
    width: 42px;
    height: 42px;

    border-radius: 12px;
}

.dashboard-game-card
.dashboard-game-buddy-left {
    gap: 10px;
}

.dashboard-game-card
.dashboard-game-buddy-left strong {
    font-size: 11px;
}

/* =====================================================
   SPORT IMAGE — UPCOMING GAMES
===================================================== */

.dashboard-game-sport-icon {
    width: 50px;
    height: 50px;

    padding: 0;

    overflow: hidden;

    border-radius: 13px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-game-sport-icon img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

/* =====================================================
   FIRST GAME CARD TEST — PREMIUM UPCOMING DESIGN
===================================================== */

.dashboard-game-card {
    position: relative;
    overflow: hidden;

    min-height: 315px;

    padding-top: 0;

    background:
        linear-gradient(
            135deg,
            #fffefa 0%,
            #fbfdf9 65%,
            #f0faef 100%
        );
}


/* =====================================================
   LARGE BACKGROUND "UPCOMING"
===================================================== */

.dashboard-game-card::before {
    content: "UPCOMING";

    position: absolute;

    top: 3px;
    left: 18px;

    z-index: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 68px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.055em;

    color:
        rgba(39, 130, 84, 0.09);

    pointer-events: none;
}


/* =====================================================
   TOP SECTION
===================================================== */

.dashboard-game-card
.dashboard-game-top {
    position: relative;
    z-index: 2;

    min-height: 112px;

    padding:
        54px
        20px
        10px;

    align-items: flex-end;
}


/* SPORT AREA */

.dashboard-game-card
.dashboard-game-sport {
    display: block;
}


/* Hide old small UPCOMING GAME text */

.dashboard-game-card
.dashboard-game-sport > div:last-child > span {
    display: none;
}


/* BADMINTON GAME TITLE */

.dashboard-game-card
.dashboard-game-sport strong {
    display: block;

    font-size: 27px;
    font-weight: 750;

    line-height: 1;

    letter-spacing: -0.035em;

    color: #15392c;
}


/* Add GAME */

.dashboard-game-card
.dashboard-game-sport strong::after {
    content: " Game";

    font-weight: 650;
}


/* =====================================================
   SHUTTLECOCK HERO
===================================================== */

.dashboard-game-card
.dashboard-game-sport-icon {
    position: absolute;

    top: 18px;
    right: 105px;

    width: 96px;
    height: 96px;

    padding: 0;

    overflow: visible;

    background: transparent;

    border: 0;
    box-shadow: none;

    border-radius: 0;
}


/* IMAGE */

.dashboard-game-card
.dashboard-game-sport-icon img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    display: block;

    transform-origin: center center;

}


/* ROTATE IN SAME POSITION */




/* =====================================================
   CONFIRMED
===================================================== */

.dashboard-game-card
.dashboard-game-status {
    position: absolute;

    top: 22px;
    right: 18px;

    z-index: 4;
}


/* =====================================================
   GAME DETAILS
===================================================== */

.dashboard-game-card
.dashboard-game-main {
    position: relative;
    z-index: 2;

    grid-template-columns:
        66px
        1fr;

    gap: 16px;

    padding:
        4px
        20px
        17px;

    align-items: center;
}


/* =====================================================
   CALENDAR
===================================================== */

.dashboard-game-card
.dashboard-game-date {
    width: 64px;
    height: 82px;
    min-height: 82px;

    padding: 0;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: #ffffff;

    border:
        1px solid
        rgba(21, 77, 55, 0.12);

    border-radius: 12px;

    box-shadow:
        0 5px 15px
        rgba(22, 78, 56, 0.08);
}


/* MONTH */

.dashboard-game-card
.dashboard-game-date small {
    order: 1;

    width: 100%;
    height: 25px;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #12a366,
            #08784e
        );

    color: white;

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
}


/* NUMBER */

.dashboard-game-card
.dashboard-game-date strong {
    order: 2;

    margin-top: 7px;

    font-size: 26px;
    font-weight: 750;

    line-height: 1;

    color: #14372b;
}


/* DAY */

.dashboard-game-card
.dashboard-game-date span {
    order: 3;

    margin-top: 5px;

    font-size: 8px;
    font-weight: 700;

    color: #60786d;

    text-transform: uppercase;
}


/* =====================================================
   VENUE
===================================================== */

.dashboard-game-card
.dashboard-game-info > span {
    font-size: 7px;

    letter-spacing: 0.12em;

    color: #829188;
}

.dashboard-game-card
.dashboard-game-info h3 {
    margin:
        3px
        0
        2px;

    font-size: 19px;
    font-weight: 700;

    color: #193a2f;
}

.dashboard-game-card
.dashboard-game-info p {
    font-size: 9px;
}

.dashboard-game-card
.dashboard-game-time {
    margin-top: 5px;

    font-size: 9px;
    font-weight: 700;

    color: #16905b;
}


/* =====================================================
   BOTTOM PLAYER ROW
===================================================== */

.dashboard-game-card
.dashboard-game-buddy {
    position: relative;
    z-index: 2;

    padding:
        11px
        20px;

    min-height: 66px;
}


/* PLAYER IMAGE */

.dashboard-game-card
.dashboard-game-avatar {
    width: 46px;
    height: 46px;

    border-radius: 50%;
}

.dashboard-game-card
.dashboard-game-buddy-left {
    gap: 11px;
}

.dashboard-game-card
.dashboard-game-buddy-left strong {
    font-size: 12px;
}

/* =====================================================
   FIRST CARD — SHUTTLE FINAL POSITION + FLOAT
===================================================== */

.dashboard-game-card
.dashboard-game-sport-icon {
    position: absolute;

    /* MUCH LOWER THAN BEFORE */
    top: 105px;
    right: 72px;

    width: 112px;
    height: 112px;

    padding: 0;

    overflow: visible;

    background: transparent;
    border: none;
    box-shadow: none;

    z-index: 2;
}


/* =====================================================
   GREEN SWOOSH BEHIND SHUTTLE
===================================================== */

.dashboard-game-card
.dashboard-game-sport-icon::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 76px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-18deg);

    border: 4px solid
        rgba(55, 177, 103, 0.20);

    border-left-color:
        transparent;

    border-bottom-color:
        transparent;

    border-radius: 50%;

    z-index: -2;

    pointer-events: none;
}


/* SECOND SOFTER GREEN CURVE */

.dashboard-game-card
.dashboard-game-sport-icon::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 58px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(18deg);

    border: 2px solid
        rgba(71, 193, 117, 0.14);

    border-right-color:
        transparent;

    border-top-color:
        transparent;

    border-radius: 50%;

    z-index: -1;

    pointer-events: none;
}


/* =====================================================
   SHUTTLE IMAGE
===================================================== */

.dashboard-game-card
.dashboard-game-sport-icon img {
    position: relative;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    z-index: 2;

    transform: none;

    animation:
        sportsBuddyShuttleFloat
        3.6s
        ease-in-out
        infinite;
}


/* ONLY UP / DOWN — NO ROTATION */

@keyframes sportsBuddyShuttleFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}

/* Dashboard - Verify Profile Button */

.verify-profile-btn {
    width: auto;
    height: 42px;
    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 999px;
    border: 1px solid rgba(23, 107, 91, 0.14);

    background: #eef8f2;
    color: #176b5b;

    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;

    cursor: pointer;
    transition: 0.2s ease;
}

.verify-profile-btn:hover {
    background: #e3f3e9;
    transform: translateY(-1px);
}

.verify-check {
    font-size: 13px;
    font-weight: 800;
}

.verify-arrow {
    font-size: 15px;
    transition: transform 0.2s ease;
}

.verify-profile-btn:hover .verify-arrow {
    transform: translateX(2px);
}

/* =====================================================
   DASHBOARD VERIFY PROFILE — FORCE OVERRIDE
===================================================== */

.profile-btn.verify-profile-btn {
    width: auto !important;
    min-width: 138px !important;
    height: 42px !important;

    padding: 0 16px !important;

    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    background: #eef8f2 !important;
    color: #176b5b !important;

    border: 1px solid rgba(23, 107, 91, 0.14) !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    overflow: visible !important;

    white-space: nowrap !important;

    border-radius: 999px !important;

    cursor: pointer !important;
}

.profile-btn.verify-profile-btn:hover {
    background: #e1f2e8 !important;
    transform: translateY(-1px);
}

.profile-btn.verify-profile-btn .verify-check {
    display: inline !important;
    font-size: 13px;
}

.profile-btn.verify-profile-btn .verify-arrow {
    display: inline !important;
    font-size: 15px;
}

/* =====================================================
   SEIAURA HERO — FINAL IMAGE
===================================================== */

.hero-sportsmanship {
    position: relative;
    overflow: hidden;

    width: 100%;
    height: 100%;

    padding: 0;

    border-radius: inherit;
}


/* MAIN IMAGE */

.hero-sportsmanship-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    border-radius: inherit;
}


/* =====================================================
   HIDE "GOOD PLAYERS BETTER PEOPLE"
===================================================== */

.hero-hide-text {
    position: absolute;

    top: 0;
    right: 0;

    width: 22%;
    height: 42%;

    pointer-events: none;

    background:
        linear-gradient(
            105deg,
            rgba(14, 55, 49, 0) 0%,
            rgba(13, 53, 48, 0.76) 42%,
            rgba(11, 48, 44, 0.94) 100%
        );
}


/* subtle blending */

.hero-sportsmanship::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(12, 54, 43, 0.08) 0%,
            transparent 42%,
            rgba(7, 42, 38, 0.05) 100%
        );
}

/* =====================================================
   UPCOMING GAME — EMPTY STATE V2
===================================================== */

.upcoming .match-empty {
    width: 100%;
}


/* WHOLE EMPTY AREA */

.upcoming-empty-v2 {
    min-height: 210px;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            110deg,
            #f8fff9 0%,
            #f4fcf6 43%,
            #edf8ef 100%
        );

    border: 1px solid #e3eee6;
}


/* LEFT TEXT */

.upcoming-empty-copy {
    position: relative;
    z-index: 2;

    padding: 28px 12px 28px 30px;
}


.upcoming-empty-title {
    max-width: 260px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 28px;
    font-weight: 700;

    line-height: 1.03;
    letter-spacing: -1.2px;

    color: #17352a;
}


.upcoming-empty-title span {
    display: block;

    color: #12a958;
}


.upcoming-empty-copy p {
    max-width: 310px;

    margin-top: 12px;

    color: #65776d;

    font-size: 11px;
    line-height: 1.6;
}


/* BUTTON */

.upcoming-find-btn {
    margin-top: 18px;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 12px 18px;

    border: 0;
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #17c968,
            #0aa956
        );

    color: white;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 10px 24px
        rgba(12, 169, 87, 0.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.upcoming-find-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 28px
        rgba(12, 169, 87, 0.25);
}


.upcoming-find-btn span {
    font-size: 16px;
}


/* RIGHT IMAGE */

.upcoming-empty-visual {
    position: relative;

    width: 100%;
    height: 210px;

    overflow: hidden;
}


.upcoming-empty-visual::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            #f4fcf6 0%,
            rgba(244,252,246,.75) 10%,
            rgba(244,252,246,.15) 30%,
            transparent 55%
        );

    pointer-events: none;
}


.upcoming-empty-visual img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1.03);

    transition: transform .7s ease;
}


.upcoming-empty-v2:hover
.upcoming-empty-visual img {
    transform: scale(1.07);
}


/* MOBILE */

@media (max-width: 700px) {

    .upcoming-empty-v2 {
        grid-template-columns: 1fr;
    }

    .upcoming-empty-visual {
        height: 160px;
    }

}

/* Stop animation on dashboard player cards */
.player-card,
.player-card * {
    animation: none !important;
    transform: none;
}

/* Move Arjun–Rohan–Vihaan row upward + keep gap below */

.players {
    margin-top: -5px !important;
    margin-bottom: 21px !important;
}

/* =====================================================
   QUICK ACTIONS — STYLE B / CLEAN MINIMAL
===================================================== */

.quick-actions-premium {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}


/* CARD */

.quick-actions-premium .quick {
    position: relative;

    min-height: 175px;

    padding: 22px 20px;

    text-align: left;

    overflow: hidden;

    border: 1px solid #dfe9e3;
    border-radius: 22px;

    background: #fffefa;

    box-shadow: none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.quick-actions-premium .quick:hover {
    transform: translateY(-4px);

    border-color: #bfdac9;

    box-shadow:
        0 14px 30px
        rgba(30, 68, 50, .07);
}


/* REMOVE OLD GENERATED ARROW */

.quick-actions-premium .quick::after {
    display: none !important;
}


/* ICON CIRCLE */

.quick-premium-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 50%;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.quick-premium-icon svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.quick:hover .quick-premium-icon {
    transform: scale(1.06);
}


/* INDIVIDUAL ACCENTS */

.quick-buddy .quick-premium-icon {
    background: #e4f7ec;
    color: #087a40;
}


.quick-venue .quick-premium-icon {
    background: #e7f2ff;
    color: #2479d8;
}


.quick-games .quick-premium-icon {
    background: #fff0df;
    color: #a85c18;
}


.quick-profile .quick-premium-icon {
    background: #f1e8ff;
    color: #7443cf;
}


/* TEXT */

.quick-actions-premium .quick-title {
    font-family: "Space Grotesk", sans-serif;

    font-size: 15px;
    font-weight: 700;

    color: #15271f;
}


.quick-actions-premium .quick-sub {
    margin-top: 5px;

    font-size: 11px;

    color: #84928b;
}


/* ARROW */

.quick-premium-arrow {
    position: absolute;

    right: 18px;
    bottom: 18px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 18px;
    font-weight: 700;

    transition:
        transform .25s ease,
        background .25s ease;
}


.quick-buddy .quick-premium-arrow {
    background: #e4f7ec;
    color: #087a40;
}


.quick-venue .quick-premium-arrow {
    background: #e7f2ff;
    color: #2479d8;
}


.quick-games .quick-premium-arrow {
    background: #fff0df;
    color: #a85c18;
}


.quick-profile .quick-premium-arrow {
    background: #f1e8ff;
    color: #7443cf;
}


.quick:hover .quick-premium-arrow {
    transform: translateX(3px);
}


/* MOBILE */

@media (max-width: 850px) {

    .quick-actions-premium {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 520px) {

    .quick-actions-premium {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   SEIAURA — CINEMATIC FOOTER
===================================================== */

.sb-footer {
    background:
        linear-gradient(
            90deg,
            rgba(4, 48, 36, 0.72),
            rgba(4, 48, 36, 0.78) 18%,
            rgba(4, 48, 36, 0.58) 32%,
            rgba(4, 48, 36, 0.25) 45%,
            rgba(4, 48, 36, 0.05) 56%,
            rgba(4, 48, 36, 0) 64%
        ),
        url("avatars/footer-sports-scene.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* MAIN CONTENT */

.sb-footer-content {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.35fr
        .8fr
        .8fr
        .8fr;

    gap: 55px;

    width: 58%;

    padding:
        68px
        0
        40px
        54px;
}


/* BRAND */

.sb-footer-logo {
    display: flex;
    align-items: center;

    gap: 13px;
}


.sb-footer-logo-mark {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: #8fe6ae;

    color: #073d2d;

    font-size: 15px;
    font-weight: 800;
}


.sb-footer-name {
    font-size: 22px;
    font-weight: 750;

    letter-spacing: -.4px;
}


.sb-footer-tagline {
    margin-top: 3px;

    color: rgba(255,255,255,.65);

    font-size: 11px;
}


.sb-footer-description {
    margin-top: 31px;

    color: rgba(255,255,255,.73);

    font-size: 13px;
    line-height: 1.8;
}


/* SOCIAL BUTTONS */

.sb-footer-socials {
    display: flex;

    gap: 10px;

    margin-top: 27px;
}


.sb-footer-socials a {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;
    font-weight: 650;

    background: rgba(255,255,255,.035);

    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease;
}


.sb-footer-socials a:hover {
    transform: translateY(-3px);

    background: rgba(255,255,255,.12);

    border-color: rgba(255,255,255,.35);
}


/* LINK COLUMNS */

.sb-footer-column {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
}


.sb-footer-column h4 {
    margin: 5px 0 25px;

    color: rgba(255,255,255,.62);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.4px;
}


.sb-footer-column a {
    position: relative;

    margin-bottom: 18px;

    color: rgba(255,255,255,.88);

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.sb-footer-column a:hover {
    color: #9cf1bb;

    transform: translateX(3px);
}


/* BOTTOM COPYRIGHT */

.sb-footer-bottom {
    position: absolute;

    z-index: 2;

    left: 54px;
    bottom: 30px;

    width: calc(53% - 54px);

    padding-top: 20px;

    border-top:
        1px solid
        rgba(255,255,255,.14);

    color: rgba(255,255,255,.60);

    font-size: 11px;
}


/* TABLET */

@media (max-width: 1100px) {

    .sb-footer {
        min-height: 650px;

        background-position: 65% center;
    }

    .sb-footer-content {
        width: 70%;

        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .sb-footer {
        width: calc(100% - 28px);

        min-height: 780px;

        margin-top: 35px;

        border-radius: 25px;

        background:
            linear-gradient(
                rgba(4,48,36,.94),
                rgba(4,48,36,.86)
            ),
            url("avatars/footer-sports-scene.png");

        background-size: cover;
        background-position: 65% center;
    }


    .sb-footer-content {
        width: auto;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 35px;

        padding:
            42px
            30px
            100px;
    }


    .sb-footer-brand {
        grid-column: 1 / -1;
    }


    .sb-footer-bottom {
        left: 30px;
        bottom: 28px;

        width: calc(100% - 60px);
    }

}

/* ===== FOOTER — WIDER / CLOSER TO EDGES ===== */

.sb-footer {
    width: calc(100% - -150px) !important;
    max-width: none !important;

    margin-left: -77px !important;
    margin-right: 18px !important;
    margin-bottom: 16px !important;

    border-radius: 32px !important;
}

/* ================================
   FOOTER FINAL SPACING + DARK FADE
================================ */

/* Space above footer */
.sb-footer {
    margin-top: 50px !important;

    background:
        linear-gradient(
            90deg,
            rgba(3, 45, 34, 0.88) 0%,
            rgba(3, 45, 34, 0.82) 18%,
            rgba(3, 45, 34, 0.65) 32%,
            rgba(3, 45, 34, 0.35) 45%,
            rgba(3, 45, 34, 0.08) 58%,
            rgba(3, 45, 34, 0) 68%
        ),
        url("avatars/footer-sports-scene.png") !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.sb-footer-name {
    color: #ffffff !important;
}

/* Keep Explore where it is.
   Pull only Support and About closer. */

.sb-footer-column:nth-of-type(3) {
    transform: translateX(-100px);
}

.sb-footer-column:nth-of-type(4) {
    transform: translateX(-148px);
}

.sb-footer-column {
    transform: translateX(-45px);
}

/* =========================================
   GAME CONFIRMATION — AVATARS + TEXT SIZE
========================================= */

#confirmation-my-initial,
#confirmation-buddy-initial {
    overflow: hidden;
}

#confirmation-my-initial .confirmation-avatar-image,
#confirmation-buddy-initial .confirmation-avatar-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: inherit;
}


/* DATE / TIME / VENUE / TOSS VALUES */

#confirmation-date,
#confirmation-time,
#confirmation-venue,
#confirmation-toss {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}


/* SECONDARY DETAILS */

#confirmation-venue-location,
#confirmation-toss-detail {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* =========================================
   GAME CONFIRMATION — FINAL TEXT SIZING
========================================= */

/* DATE / TIME / VENUE / TOSS small labels */
.confirmation-detail > div > span {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
}

/* Main detail values */
#confirmation-date,
#confirmation-time,
#confirmation-venue,
#confirmation-toss {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Venue location + toss detail */
#confirmation-venue-location,
#confirmation-toss-detail {
    font-size: 13px !important;
    margin-top: 4px;
}


/* WHAT'S NEXT? */
.confirmation-action-copy > span {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
}

/* Your game is now saved. */
.confirmation-action-copy > strong {
    display: block;

    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.25;

    margin-top: 5px;
}

/* Description under it */
.confirmation-action-copy > small {
    display: block;

    font-size: 14px !important;
    line-height: 1.5;

    margin-top: 5px;
}

/* =====================================================
   GAME CONFIRMATION — STYLE 4
   ILLUSTRATED / PLAYFUL
===================================================== */

.confirmation-ticket-playful {
    position: relative;

    overflow: hidden;

    border: 1px solid #dfe9e3 !important;
    border-radius: 30px !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fffefa 58%,
            #f4fbf6 100%
        ) !important;

    box-shadow:
        0 24px 60px
        rgba(32, 67, 51, 0.08) !important;
}


/* soft decorative glow */

.confirmation-ticket-playful::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -80px;
    top: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(168, 235, 183, 0.28),
            rgba(168, 235, 183, 0)
        );

    pointer-events: none;
}


.confirmation-ticket-playful::after {
    content: "🏸";

    position: absolute;

    right: 52px;
    top: 55px;

    font-size: 72px;

    opacity: 0.09;

    transform: rotate(-18deg);

    pointer-events: none;
}


/* =====================================================
   TOP
===================================================== */

.confirmation-ticket-playful
.confirmation-ticket-top {
    position: relative;
    z-index: 2;

    padding-bottom: 22px;
}


.confirmation-ticket-playful
.confirmation-ticket-label {
    color: #7c8d84;

    font-size: 10px !important;
    font-weight: 800;

    letter-spacing: 0.18em;
}


.confirmation-ticket-playful
#confirmation-sport {
    margin-top: 8px;

    font-size: 38px !important;
    font-weight: 750 !important;

    color: #12392d;
}


.confirmation-ticket-playful
.confirmation-status {
    padding: 12px 18px;

    border-radius: 15px;

    background: #e9f7df !important;

    color: #4e8216 !important;

    font-size: 11px !important;
    font-weight: 800;
}


/* =====================================================
   PLAYERS
===================================================== */

.confirmation-ticket-playful
.confirmation-players {
    position: relative;
    z-index: 2;

    margin-top: 22px;
    padding: 22px 30px;

    border-radius: 24px;

    background:
        linear-gradient(
            90deg,
            rgba(238, 249, 241, 0.86),
            rgba(255, 255, 255, 0.96),
            rgba(246, 250, 239, 0.86)
        );

    border: 1px solid #e3ede6;
}


.confirmation-ticket-playful
.confirmation-avatar {
    width: 86px !important;
    height: 86px !important;

    border-radius: 22px !important;

    overflow: hidden;

    background: #e8f7ed !important;

    box-shadow:
        0 10px 22px
        rgba(42, 84, 62, 0.08);
}


.confirmation-ticket-playful
.confirmation-avatar-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.confirmation-ticket-playful
.confirmation-player > div:last-child > span,
.confirmation-ticket-playful
.confirmation-player.buddy > div:first-child > span {
    font-size: 10px !important;
    font-weight: 800;

    letter-spacing: 0.1em;

    color: #93a198;
}


.confirmation-ticket-playful
.confirmation-player strong {
    font-size: 18px !important;
    font-weight: 750 !important;

    color: #173c30;
}


/* VS */

.confirmation-ticket-playful
.confirmation-versus strong {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eaf8dc;

    border: none !important;

    color: #2f6a3e;

    font-size: 14px;
    font-weight: 800;
}


.confirmation-ticket-playful
.confirmation-versus span {
    opacity: 0.35;
}


/* =====================================================
   DETAILS
===================================================== */

.confirmation-ticket-playful
.confirmation-details {
    position: relative;
    z-index: 2;

    gap: 14px !important;

    padding-top: 24px;
}


.confirmation-ticket-playful
.confirmation-detail {
    min-height: 118px;

    padding: 20px 18px !important;

    border-radius: 20px !important;

    border: 1px solid #e7ece8 !important;

    background: #fffefa !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}


.confirmation-ticket-playful
.confirmation-detail:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 24px
        rgba(37, 79, 58, 0.07);
}


/* individual icon accents */

.confirmation-ticket-playful
.confirmation-detail:nth-child(1)
.confirmation-detail-icon {
    background: #fff1dc !important;
    color: #dc7d1f !important;
}


.confirmation-ticket-playful
.confirmation-detail:nth-child(2)
.confirmation-detail-icon {
    background: #e8f2ff !important;
    color: #327ed6 !important;
}


.confirmation-ticket-playful
.confirmation-detail:nth-child(3)
.confirmation-detail-icon {
    background: #ffe9e3 !important;
    color: #d15f4f !important;
}


.confirmation-ticket-playful
.confirmation-detail:nth-child(4)
.confirmation-detail-icon {
    background: #e7f6ef !important;
    color: #33866b !important;
}


.confirmation-ticket-playful
.confirmation-detail-icon {
    width: 42px !important;
    height: 42px !important;

    border-radius: 13px !important;

    font-size: 10px !important;
    font-weight: 800;
}


.confirmation-ticket-playful
.confirmation-detail > div > span {
    font-size: 10px !important;
    font-weight: 800 !important;

    letter-spacing: .1em;

    color: #97a29c;
}


.confirmation-ticket-playful
#confirmation-date,
.confirmation-ticket-playful
#confirmation-time,
.confirmation-ticket-playful
#confirmation-venue,
.confirmation-ticket-playful
#confirmation-toss {
    margin-top: 6px;

    font-size: 17px !important;
    font-weight: 750 !important;

    color: #173b2f;
}


.confirmation-ticket-playful
#confirmation-venue-location,
.confirmation-ticket-playful
#confirmation-toss-detail {
    margin-top: 4px;

    font-size: 12px !important;

    color: #8c9992;
}


/* =====================================================
   TICKET FOOTER
===================================================== */

.confirmation-ticket-playful
.confirmation-ticket-footer {
    position: relative;
    z-index: 2;

    margin-top: 24px;

    padding: 22px 26px !important;

    background:
        linear-gradient(
            90deg,
            #f2f8f1,
            #eef8e9
        ) !important;

    border-top: none !important;
}


.confirmation-ticket-playful
.confirmation-ticket-footer span {
    font-size: 9px !important;
    letter-spacing: .1em;

    color: #87958d;
}


.confirmation-ticket-playful
.confirmation-ticket-footer strong {
    font-size: 12px !important;
    color: #426456;
}


/* =====================================================
   ACTIONS / SAVED MESSAGE
===================================================== */

.confirmation-actions-playful {
    margin-top: 18px !important;

    padding: 26px 30px !important;

    border-radius: 24px !important;

    border: 1px solid #dfe9e2 !important;

    background:
        linear-gradient(
            90deg,
            #edf9e8 0%,
            #f7fbf3 45%,
            #ffffff 100%
        ) !important;

    box-shadow:
        0 14px 30px
        rgba(35, 77, 56, 0.05);
}


.confirmation-actions-playful
.confirmation-action-copy {
    position: relative;

    padding-left: 58px;
}


/* little celebration icon */

.confirmation-actions-playful
.confirmation-action-copy::before {
    content: "🎉";

    position: absolute;

    left: 0;
    top: 2px;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #eaf8dc;

    font-size: 21px;
}


.confirmation-actions-playful
.confirmation-action-copy > span {
    color: #5f9b24 !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    letter-spacing: .12em;
}


.confirmation-actions-playful
.confirmation-action-copy > strong {
    margin-top: 4px;

    font-size: 21px !important;
    font-weight: 750 !important;

    color: #173c30;
}


.confirmation-actions-playful
.confirmation-action-copy > small {
    margin-top: 4px;

    font-size: 13px !important;

    color: #7b8982;
}


/* =====================================================
   BUTTONS
===================================================== */

.confirmation-actions-playful
.confirmation-secondary-button,
.confirmation-actions-playful
.confirmation-primary-button {
    min-height: 52px;

    padding: 0 24px !important;

    border-radius: 15px !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}


.confirmation-actions-playful
.confirmation-secondary-button {
    background: #ffffff !important;

    border: 1px solid #d6e3dc !important;

    color: #254d3c !important;
}


.confirmation-actions-playful
.confirmation-primary-button {
    background: #063d2d !important;

    color: #ffffff !important;

    box-shadow:
        0 10px 22px
        rgba(6, 61, 45, 0.15);
}


.confirmation-actions-playful
.confirmation-primary-button:hover {
    transform: translateY(-2px);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {

    .confirmation-ticket-playful
    .confirmation-players {
        padding: 18px;
    }

    .confirmation-ticket-playful
    .confirmation-avatar {
        width: 68px !important;
        height: 68px !important;
    }

    .confirmation-ticket-playful
    .confirmation-details {
        grid-template-columns:
            repeat(2, 1fr) !important;
    }

    .confirmation-actions-playful {
        flex-direction: column;
        gap: 22px;
    }
}

/* GAME CONFIRMATION DETAIL ICONS */

.confirmation-ticket-playful .confirmation-detail-icon {
    width: 46px !important;
    height: 46px !important;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px !important;
}

.confirmation-ticket-playful .confirmation-detail-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* DATE — orange */
.confirmation-ticket-playful
.confirmation-icon-date {
    background: #fff0dc !important;
    color: #df7b1d !important;
}

/* TIME — blue */
.confirmation-ticket-playful
.confirmation-icon-time {
    background: #e7f1ff !important;
    color: #2879db !important;
}

/* VENUE — coral */
.confirmation-ticket-playful
.confirmation-icon-venue {
    background: #ffe8e1 !important;
    color: #dc604e !important;
}

/* TOSS — mint */
.confirmation-ticket-playful
.confirmation-icon-toss {
    background: #e4f6ee !important;
    color: #27866a !important;
}

/* THICKER GAME DETAIL CARD BORDER */

.confirmation-ticket-playful .confirmation-detail {
    border: 2.5px solid #dce8df !important;
}

/* =========================================
   MATCH PAGE — COURT DESIGN
========================================= */

.match-page {
    background: #f7f7f0;
    color: #123c2d;
}

.match-page .match-main {
    width: min(1120px, calc(100% - 40px));
    padding: 44px 0 60px;
}

/* Heading */

.match-page .match-hero {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.match-page .match-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #62816b;
}

.match-page .match-hero h1 {
    margin: 12px 0 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.15;
    letter-spacing: -0.045em;
    color: #123c2d;
}

.match-page .match-hero h1 br {
    display: none;
}

.match-page .match-hero h1 span {
    color: #123c2d;
}

.match-page .match-hero p {
    max-width: none;
    margin-top: 12px;
    color: #64756b;
    font-size: 16px;
    line-height: 1.6;
}

.match-page .match-status-card {
    min-width: 0;
    padding: 10px 20px;
    gap: 12px;
    border: 1px solid #d6e6cf;
    border-radius: 999px;
    background: #eaf3df;
}

.match-page .match-status-card > div > span {
    display: none;
}

.match-page .match-status-card strong {
    margin: 0;
    font-size: 15px;
    color: #215839;
}

.match-page .match-status-dot {
    background: #77ad2b;
}

/* Main layout */

.match-page .match-card {
    margin-top: 28px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.match-page .match-card-header {
    padding: 0 4px 18px;
}

.match-page .match-sport-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #e4eedc;
    color: #205b40;
    font-size: 15px;
}

.match-page .match-sport-block span,
.match-page .match-id-block span {
    font-size: 10px;
    color: #64796c;
}

.match-page .match-sport-block h2 {
    font-size: 23px;
}

.match-page .match-id-block strong {
    font-size: 13px;
    color: #486354;
}

/* Green court */

.match-page .match-players-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 300px;
    padding: 55px 60px;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    gap: 20px;
    border: 1px solid #184b36;
    border-radius: 18px;
    background:
        radial-gradient(
            ellipse at 50% 35%,
            rgba(84, 155, 99, 0.22),
            transparent 70%
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 79px,
            rgba(255, 255, 255, 0.025) 79px,
            rgba(255, 255, 255, 0.025) 80px
        ),
        linear-gradient(135deg, #165e40, #0d4934);
    box-shadow:
        0 16px 30px rgba(16, 65, 44, 0.13),
        inset 0 0 45px rgba(0, 0, 0, 0.08);
}

/* Court boundary, service lines and centre lines */

.match-page .match-players-row::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 22px;
    pointer-events: none;
    border: 2px solid rgba(240, 250, 228, 0.8);
    border-radius: 3px;
    background:
        linear-gradient(
            to bottom,
            transparent calc(50% - 1px),
            rgba(240, 250, 228, 0.55) calc(50% - 1px),
            rgba(240, 250, 228, 0.55) calc(50% + 1px),
            transparent calc(50% + 1px)
        ) left center / 36% 100% no-repeat,
        linear-gradient(
            to bottom,
            transparent calc(50% - 1px),
            rgba(240, 250, 228, 0.55) calc(50% - 1px),
            rgba(240, 250, 228, 0.55) calc(50% + 1px),
            transparent calc(50% + 1px)
        ) right center / 36% 100% no-repeat,
        linear-gradient(
            to right,
            transparent 6%,
            rgba(240, 250, 228, 0.6) 6%,
            rgba(240, 250, 228, 0.6) calc(6% + 2px),
            transparent calc(6% + 2px),
            transparent 36%,
            rgba(240, 250, 228, 0.7) 36%,
            rgba(240, 250, 228, 0.7) calc(36% + 2px),
            transparent calc(36% + 2px),
            transparent 64%,
            rgba(240, 250, 228, 0.7) 64%,
            rgba(240, 250, 228, 0.7) calc(64% + 2px),
            transparent calc(64% + 2px),
            transparent 94%,
            rgba(240, 250, 228, 0.6) 94%,
            rgba(240, 250, 228, 0.6) calc(94% + 2px),
            transparent calc(94% + 2px)
        );
    box-shadow:
        inset 0 18px 0 rgba(240, 250, 228, 0.035),
        inset 0 -18px 0 rgba(240, 250, 228, 0.035);
}

/* Centre net */

.match-page .match-players-row::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 16px;
    bottom: 16px;
    left: calc(50% - 3px);
    width: 6px;
    pointer-events: none;
    border-inline: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 4px;
    background: repeating-linear-gradient(
        to bottom,
        #e0e7d7 0 3px,
        #365d46 3px 7px
    );
    box-shadow: 5px 0 8px rgba(0, 0, 0, 0.2);
}

/* Players */

.match-page .match-player-side,
.match-page .match-player-side.buddy {
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.match-page .match-player-avatar {
    order: -1;
    width: 76px;
    height: 76px;
    border: 3px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: #eef5e7;
    color: #174e36;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.match-page .match-player-avatar span {
    color: #174e36;
    font-size: 28px;
    letter-spacing: 0;
}

.match-page .match-player-side > div:not(.match-player-avatar) {
    max-width: 100%;
    padding: 7px 14px;
    border-radius: 10px;
    background: #15563d;
}

.match-page .match-player-side span {
    color: #cfe1cf;
    font-size: 10px;
    letter-spacing: 0.12em;
}

.match-page .match-player-side strong {
    color: white;
    font-size: 21px;
    overflow-wrap: anywhere;
}

.match-page .match-versus {
    justify-content: center;
}

.match-page .match-versus span {
    display: none;
}

.match-page .match-versus strong {
    width: 54px;
    height: 54px;
    border: 1px solid #a1bca4;
    border-radius: 50%;
    background: #124e37;
    color: white;
    font-size: 18px;
    box-shadow: 0 0 0 7px rgba(16, 73, 51, 0.6);
}

/* Date, time, venue and toss */

.match-page .match-details-grid {
    padding: 22px 0;
    border: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.match-page .match-detail-card {
    padding: 20px 16px;
    min-height: 120px;
    gap: 12px;
    border: 1px solid #e1e7dd;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(25, 64, 42, 0.035);
}

.match-page .match-detail-number {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #eaf3e3;
    color: #346b44;
    font-size: 12px;
}

.match-page .match-detail-card:nth-child(2) .match-detail-number {
    background: #eaf2ff;
    color: #3475b5;
}

.match-page .match-detail-card:nth-child(3) .match-detail-number {
    background: #fff0e7;
    color: #ae6541;
}

.match-page .match-detail-card:nth-child(4) .match-detail-number {
    background: #eeebfa;
    color: #74609b;
}

.match-page .match-detail-card > div > span {
    font-size: 10px;
    color: #65796b;
}

.match-page .match-detail-card strong {
    margin-top: 7px;
    overflow: visible;
    font-size: 17px;
    line-height: 1.4;
    color: #173e2d;
    overflow-wrap: anywhere;
}

.match-page .match-detail-card small {
    margin-top: 5px;
    overflow: visible;
    color: #718076;
    font-size: 13px;
    line-height: 1.5;
}

/* Buddy and actions */

.match-page .match-buddy-section {
    padding: 20px 24px;
    border: 1px solid #dfe7d9;
    border-radius: 16px;
    background: #edf3e7;
}

.match-page .match-buddy-avatar {
    width: 48px;
    height: 48px;
    font-size: 18px;
}

.match-page .match-buddy-info span {
    font-size: 10px;
    color: #637969;
}

.match-page .match-buddy-info strong {
    font-size: 17px;
}

.match-page .match-buddy-info small {
    font-size: 13px;
    line-height: 1.5;
}

.match-page .match-message-btn,
.match-page .match-secondary-btn,
.match-page .match-danger-btn {
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 11px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.match-page .match-message-btn {
    border: 1px solid #15543b;
    background: #15543b;
    color: white;
}

.match-page .match-message-btn:hover:not(:disabled) {
    background: #0e402c;
    box-shadow: 0 5px 14px rgba(18, 71, 47, 0.15);
}

.match-page .match-action-panel {
    margin-top: 18px;
    padding: 22px 24px;
    border: 1px solid #e1e6dc;
    border-radius: 16px;
    background: #fff;
}

.match-page .match-action-panel > div:first-child > span {
    font-size: 10px;
    color: #637969;
}

.match-page .match-action-panel strong {
    font-size: 18px;
}

.match-page .match-action-panel small {
    font-size: 13px;
    line-height: 1.6;
}

.match-page .match-action-buttons {
    gap: 12px;
}

.match-page .match-secondary-btn {
    border: 1px solid #ccd8cf;
    background: white;
    color: #224f39;
}

.match-page .match-secondary-btn:hover:not(:disabled) {
    background: #f1f5ed;
}

.match-page .match-danger-btn {
    border: 1px solid #efd4ce;
    background: #fcf0ed;
    color: #ad493b;
}

.match-page .match-danger-btn:hover:not(:disabled) {
    background: #f7e1dc;
}

.match-page .match-main button:focus-visible {
    outline: 3px solid #81ae39;
    outline-offset: 4px;
}

.match-page .match-main button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Booking information */

.match-page .match-booking-note {
    max-width: 850px;
    margin: 25px auto 0;
    color: #65766b;
    text-align: center;
    font-size: 15px;
    line-height: 1.7;
}

/* Tablet */

@media (max-width: 900px) {
    .match-page .match-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .match-page .match-action-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .match-page .match-action-buttons {
        flex-wrap: wrap;
    }

    .match-page .match-action-buttons button {
        flex: 1;
    }
}

/* Mobile */

@media (max-width: 560px) {
    .match-page .match-main {
        width: calc(100% - 28px);
        padding-top: 30px;
    }

    .match-page .match-hero p {
        font-size: 14px;
    }

    .match-page .match-card-header {
        gap: 12px;
        flex-wrap: wrap;
    }

    .match-page .match-sport-block h2 {
        font-size: 20px;
    }

    .match-page .match-id-block strong {
        font-size: 11px;
    }

    .match-page .match-players-row {
        min-height: 250px;
        padding: 38px 20px;
        grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
        gap: 8px;
    }

    .match-page .match-players-row::before {
        inset: 13px;
    }

    .match-page .match-player-avatar {
        width: 58px;
        height: 58px;
    }

    .match-page .match-player-avatar span {
        font-size: 23px;
    }

    .match-page .match-player-side strong {
        font-size: 16px;
    }

    .match-page .match-player-side > div:not(.match-player-avatar) {
        padding: 6px;
    }

    .match-page .match-player-side span {
        font-size: 9px;
        letter-spacing: 0.05em;
    }

    .match-page .match-versus strong {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .match-page .match-details-grid {
        gap: 10px;
        padding: 16px 0;
    }

    .match-page .match-detail-card {
        flex-direction: column;
        padding: 15px;
    }

    .match-page .match-detail-card strong {
        font-size: 15px;
    }

    .match-page .match-buddy-section {
        flex-direction: column;
        align-items: stretch;
        padding: 18px;
    }

    .match-page .match-message-btn {
        width: 100%;
    }

    .match-page .match-action-panel {
        padding: 18px;
    }

    .match-page .match-action-buttons {
        flex-direction: column;
    }

    .match-page .match-booking-note {
        font-size: 14px;
        text-align: left;
    }
}

/* =====================================
   COURT PAGE — REFERENCE PHOTO LAYOUT
===================================== */

.match-page {
    background: #f8f8f3;
    color: #102d25;
}

.court-layout,
.court-layout * {
    box-sizing: border-box;
}

.court-layout {
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
    padding: 32px 0 36px;
    font-family: "Manrope", Arial, sans-serif;
}

.court-icon-library {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.court-layout svg:not(.court-lines):not(.court-icon-library) {
    width: 23px;
    height: 23px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Heading */

.court-heading {
    text-align: center;
    margin-bottom: 20px;
}

.court-heading h1 {
    margin: 0 0 10px;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #102b24;
}

.court-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: #12603f;
    color: white;
    font-size: 14px;
}

.court-status strong {
    font-weight: 700;
}

.court-heading p {
    margin: 12px 0 0;
    color: #6a7976;
    font-size: 15px;
    line-height: 1.6;
}

/* Court */

.court-surface {
    position: relative;
    isolation: isolate;
    width: 82%;
    min-height: 265px;
    aspect-ratio: 3.5 / 1;
    margin: 0 auto 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    align-items: center;
    padding: 36px 45px;
    overflow: hidden;
    border: 1px solid #2e7755;
    border-radius: 11px;
    background:
        radial-gradient(
            ellipse at center,
            rgba(66, 144, 95, 0.22),
            transparent 75%
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 54px,
            rgba(255, 255, 255, 0.025) 54px 55px
        ),
        linear-gradient(115deg, #155a3e, #0f6040 50%, #145439);
    box-shadow:
        0 9px 18px rgba(24, 67, 44, 0.16),
        inset 0 0 35px rgba(0, 0, 0, 0.1);
}

.court-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: rgba(229, 246, 223, 0.78);
    pointer-events: none;
    z-index: -1;
}

.court-net {
    position: absolute;
    top: 6%;
    bottom: 6%;
    left: calc(50% - 2px);
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, #668975, #c1d5bc, #698d77);
    box-shadow: 4px 0 5px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    z-index: -1;
}

.court-net::before,
.court-net::after {
    content: "";
    position: absolute;
    left: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c6d7be;
}

.court-net::before {
    top: 0;
}

.court-net::after {
    bottom: 0;
}

.court-player {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
}

.court-avatar {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 2px solid #d8edda;
    border-radius: 50%;
    background: #e8f4e7;
    color: #19613f;
    font-size: 26px;
    font-weight: 800;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.09);
}

.court-player > strong {
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 6px;
    background: #155c3f;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.court-vs {
    padding: 10px 0;
    background: #145c3e;
    color: #e0f0df;
    font-size: 21px;
    font-weight: 800;
    text-align: center;
}

/* Four cards */

.court-info-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.05fr)
        minmax(0, 1.12fr)
        minmax(0, 1.12fr);
    gap: 15px;
}

.court-info-card {
    min-width: 0;
    min-height: 205px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 21px;
    border: 1px solid #e2e7e2;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 3px 9px rgba(30, 61, 44, 0.035);
}

.court-info-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
}

.court-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f4ec;
    color: #08623f;
}

.court-info-copy {
    min-width: 0;
    padding-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.court-label {
    color: #708079;
    font-size: 13px;
    line-height: 1.3;
}

.court-info-copy > strong,
.court-player-summary strong {
    color: #102d25;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.court-info-copy small {
    color: #708079;
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.court-info-copy small:empty {
    display: none;
}

.court-player-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.court-player-summary > span {
    font-size: 11px;
    color: #819088;
}

/* Right-hand card */

.court-info-stacked {
    padding-top: 15px;
    padding-bottom: 15px;
    gap: 10px;
}

.court-info-stacked .court-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
}

.court-info-stacked .court-icon svg {
    width: 19px;
    height: 19px;
}

.court-info-stacked .court-info-copy {
    gap: 2px;
    padding-top: 0;
}

.court-info-stacked .court-info-row + .court-info-row {
    padding-top: 9px;
    border-top: 1px solid #edf0eb;
}

.court-info-stacked #match-game-id {
    font-size: 13px;
}

/* Three buttons beneath the cards */

.court-actions {
    width: 82%;
    margin: 25px auto 0;
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 14px;
}

.court-button {
    min-width: 0;
    min-height: 49px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.18s, box-shadow 0.18s;
}

.court-button-primary {
    background: #105e3f;
    border-color: #105e3f;
    color: white;
}

.court-button-secondary {
    background: #fafbf7;
    border-color: #cfd9d1;
    color: #233d32;
}

.court-button-danger {
    background: #fcebea;
    border-color: #f1cfcd;
    color: #c83737;
}

.court-button-primary:hover:not(:disabled) {
    background: #094a30;
}

.court-button-secondary:hover:not(:disabled) {
    background: #edf3e9;
}

.court-button-danger:hover:not(:disabled) {
    background: #f9dedd;
}

.court-button:focus-visible {
    outline: 3px solid #85b34c;
    outline-offset: 4px;
}

.court-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Bottom notice */

.court-note {
    width: 82%;
    margin: 25px auto 0;
    padding-top: 17px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 9px;
    border-top: 1px solid #dbe2d9;
    color: #728078;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
}

.court-note > span {
    flex-shrink: 0;
    font-size: 17px;
}

/* Tablet */

@media (max-width: 960px) {
    .court-surface,
    .court-actions,
    .court-note {
        width: 100%;
    }

    .court-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */

@media (max-width: 560px) {
    .court-layout {
        width: calc(100% - 28px);
        padding-top: 26px;
    }

    .court-heading p {
        font-size: 13px;
    }

    .court-surface {
        min-height: 215px;
        padding: 30px 18px;
        grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    }

    .court-avatar {
        width: 49px;
        height: 49px;
        font-size: 22px;
    }

    .court-player > strong {
        font-size: 15px;
        padding-inline: 5px;
    }

    .court-vs {
        font-size: 17px;
    }

    .court-info-grid {
        gap: 10px;
    }

    .court-info-card {
        min-height: 150px;
        padding: 15px 12px;
    }

    .court-info-row {
        gap: 8px;
    }

    .court-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .court-info-copy > strong,
    .court-player-summary strong {
        font-size: 14px;
    }

    .court-label {
        font-size: 12px;
    }

    .court-actions {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 18px;
    }

    .court-note {
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .court-info-grid {
        grid-template-columns: 1fr;
    }

    .court-info-card {
        min-height: auto;
    }
}

/* Player pictures inside the court */

.court-avatar {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.court-avatar .court-avatar-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

.court-avatar [hidden] {
    display: none !important;
}

/* SPORT AND PLAYERS CARD REDESIGN */

.court-info-card.sport-feature-card,
.court-info-card.players-feature-card {
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px 16px;
    text-align: center;
}

.feature-card-label {
    align-self: flex-start;
    color: #718378;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

/* Sport */

.sport-feature-card {
    background:
        radial-gradient(
            circle at 50% 45%,
            #edf5e5,
            transparent 70%
        ),
        #fff;
}

.sport-racket-mark {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid #d8e7d1;
    border-radius: 24px;
    background: #e8f2df;
    color: #176143;
    transform: rotate(-5deg);
}

.court-layout .sport-racket-mark svg {
    width: 67px;
    height: 67px;
}

.sport-feature-name {
    color: #153f2d;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.sport-feature-caption,
.players-feature-caption {
    color: #76867a;
    font-size: 12px;
    line-height: 1.5;
}

/* Players */

.players-feature-card {
    background:
        linear-gradient(
            145deg,
            #fff 35%,
            #f2f7ee
        );
}

.players-feature-matchup {
    width: 100%;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 12px 0;
}

.players-feature-person {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.players-feature-avatar {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 19px;
}

.player-you {
    color: #fff;
    background: #155b3f;
    box-shadow: 0 6px 12px rgba(21, 91, 63, 0.12);
}

.player-buddy {
    color: #366344;
    background: #e2edd8;
    border: 1px solid #d3e2c9;
}

.court-layout .players-feature-avatar svg {
    width: 29px;
    height: 29px;
}

.players-feature-person strong {
    max-width: 100%;
    color: #173f2e;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.players-feature-vs {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #dde6d7;
    border-radius: 50%;
    background: #fff;
    color: #7b8b75;
    font-size: 10px;
    font-weight: 800;
}

/* Smaller screens */

@media (max-width: 560px) {
    .court-info-card.sport-feature-card,
    .court-info-card.players-feature-card {
        padding: 17px 10px;
        gap: 11px;
    }

    .sport-racket-mark {
        width: 67px;
        height: 67px;
        border-radius: 19px;
    }

    .court-layout .sport-racket-mark svg {
        width: 54px;
        height: 54px;
    }

    .sport-feature-name {
        font-size: 19px;
    }

    .players-feature-matchup {
        grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
        gap: 4px;
    }

    .players-feature-avatar {
        width: 39px;
        height: 39px;
        border-radius: 13px;
    }

    .court-layout .players-feature-avatar svg {
        width: 23px;
        height: 23px;
    }

    .players-feature-person strong {
        font-size: 13px;
    }

    .players-feature-vs {
        width: 24px;
        height: 24px;
        font-size: 9px;
    }

    .sport-feature-caption,
    .players-feature-caption {
        font-size: 11px;
    }
}

/* Buddy avatars in Upcoming and Past games */

.games-buddy-with-avatar {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.games-buddy-picture {
    position: relative;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d6e5d3;
    border-radius: 16px;
    background: #e7f0df;
    color: #20563b;
    font-size: 22px;
    font-weight: 800;
}

.games-buddy-picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.games-buddy-picture [hidden] {
    display: none !important;
}

.games-buddy-with-avatar .games-item-detail {
    min-width: 0;
}

.games-buddy-with-avatar .games-item-detail strong {
    font-size: 15px;
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .games-buddy-picture {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 13px;
    }

    .games-buddy-with-avatar {
        gap: 10px;
    }
}

/* Hide the green box beside the sport */
.games-item .games-sport-icon,
.games-item .games-sport-mark {
    display: none;
}

/* Make the sport name larger */
.games-item .games-item-sport h3,
.games-item .games-sport-block h3 {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    color: #153f2d;
}

/* ========================================
   GAMES — COMPACT MATCH CARDS
======================================== */

#games-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

/* Card */

#games-list .games-item {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #dce5da;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(24, 63, 40, 0.035);
    transition: border-color 0.2s, box-shadow 0.2s;
}

#games-list .games-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    width: 48px;
    height: 4px;
    border-radius: 0 0 5px 5px;
    background: #8cbb43;
}

#games-list .games-item:hover {
    transform: none;
    border-color: #b6cbaa;
    box-shadow: 0 9px 25px rgba(24, 63, 40, 0.08);
}

/* Two-column interior */

#games-list .games-item-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(125px, 0.8fr);
    align-items: center;
    gap: 20px 16px;
    padding: 24px;
}

/* Sport title */

#games-list .games-sport-icon {
    display: none;
}

#games-list .games-item-sport {
    min-width: 0;
    align-self: center;
}

#games-list .games-item-label {
    color: #71816f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

#games-list .games-item-sport strong {
    margin-top: 7px;
    color: #143e2c;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
}

/* Date and time block */

#games-list .games-item-main > .games-item-detail {
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid #e1e9d9;
    border-radius: 13px;
    background: #f1f6e9;
}

#games-list .games-item-main > .games-item-detail strong {
    margin-top: 5px;
    color: #284b32;
    font-size: 14px;
    line-height: 1.4;
}

#games-list .games-item-main > .games-item-detail small {
    margin-top: 5px;
    color: #446d3d;
    font-size: 15px;
    font-weight: 800;
}

/* Buddy row */

#games-list .games-buddy-with-avatar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding-top: 18px;
    border-top: 1px solid #edf0e9;
}

#games-list .games-buddy-picture {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border: 1px solid #dbe7d3;
    border-radius: 17px;
    background: #e9f1e0;
}

#games-list .games-buddy-with-avatar .games-item-detail {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

#games-list .games-buddy-with-avatar strong {
    margin-top: 4px;
    color: #173f2d;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
}

#games-list .games-buddy-with-avatar small {
    margin-top: 5px;
    color: #748071;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* View game button */

#games-list .games-item-main > .games-open-btn {
    grid-column: 1 / -1;
    width: 100%;
}

#games-list .games-open-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 44px;
    padding: 11px 16px;
    border: 1px solid #15573c;
    border-radius: 11px;
    background: #15573c;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

#games-list .games-open-btn::after {
    content: "→";
    font-size: 19px;
    line-height: 1;
}

#games-list .games-open-btn:hover {
    background: #0d432d;
}

/* Slim footer */

#games-list .games-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 11px 24px;
    border-top: 1px solid #e7ecdf;
    background: #f7f9f2;
}

#games-list .games-confirmed {
    gap: 7px;
    color: #527047;
    font-size: 11px;
    font-weight: 700;
}

#games-list .games-confirmed::before {
    width: 7px;
    height: 7px;
}

#games-list .games-game-id {
    color: #7a8974;
    font-size: 10px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Past game actions */

#games-list .games-past-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#games-list .games-past-actions button {
    flex: 1 1 120px;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
}

#games-list .past-game::before {
    background: #b5c2aa;
}

#games-list button:focus-visible {
    outline: 3px solid #8cbb43;
    outline-offset: 3px;
}

#games-list button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Empty state */

#games-list > .games-empty {
    grid-column: 1 / -1;
}

/* Smaller screens */

@media (max-width: 760px) {
    #games-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

@media (max-width: 400px) {
    #games-list .games-item-main {
        grid-template-columns: minmax(0, 1fr) minmax(110px, 0.8fr);
        padding: 18px;
        gap: 17px 10px;
    }

    #games-list .games-item-sport strong {
        font-size: 22px;
    }

    #games-list .games-item-main > .games-item-detail {
        padding: 11px;
    }

    #games-list .games-item-footer {
        padding: 11px 18px;
    }
}

/* READABLE STATS CARDS */

.games-page .games-stats {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.games-page .games-stat-card {
    min-width: 0;
    min-height: 130px;
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    gap: 7px 18px;
    border: 1px solid #dae5d5;
    border-radius: 18px;
    background: #f0f5e9;
    box-shadow: 0 4px 14px rgba(24, 63, 40, 0.035);
}

/* Label */

.games-page .games-stat-card span {
    grid-column: 1;
    grid-row: 1;
    color: #244b35;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* Description */

.games-page .games-stat-card small {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    color: #5c7160;
    font-size: 14px;
    line-height: 1.5;
}

/* Number badge */

.games-page .games-stat-card strong {
    grid-column: 2;
    grid-row: 1 / 3;
    min-width: 68px;
    min-height: 68px;
    margin: 0;
    padding: 10px;
    display: grid;
    place-items: center;
    border: 1px solid #d5e2cb;
    border-radius: 18px;
    background: #fff;
    color: #1a5437;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Subtle colour differences */

.games-page .games-stat-card:nth-child(2) {
    background: #edf4f1;
    border-color: #d9e5df;
}

.games-page .games-stat-card:nth-child(3) {
    background: #faf5e9;
    border-color: #e9e1ce;
}

.games-page .games-stat-card:nth-child(3) strong {
    color: #76602d;
    border-color: #e9e1ce;
}

/* Mobile and tablet */

@media (max-width: 850px) {
    .games-page .games-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .games-page .games-stat-card {
        min-height: 105px;
        padding: 18px 22px;
    }

    .games-page .games-stat-card strong {
        min-width: 60px;
        min-height: 60px;
        font-size: 32px;
    }
}

/* GOLDEN BACKGROUND — GAME PAGE ONLY */

body.games-page {
    position: relative;
    isolation: isolate;
    background: #f7f6ef;
}

/* Decorative background */
body.games-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image: url("avatars/games-golden-breeze.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100vh;

    opacity: 0.38;
    transform-origin: right center;
    animation: games-golden-drift 14s ease-in-out infinite;
}

/* Slow, gentle movement */
@keyframes games-golden-drift {
    0%,
    100% {
        transform: translateY(0) scale(1.02);
    }

    50% {
        transform: translateY(-8px) scale(1.045);
    }
}

/* Keep the background quieter on mobile */
@media (max-width: 700px) {
    body.games-page::before {
        background-position: 80% center;
        opacity: 0.2;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    body.games-page::before {
        animation: none;
        transform: none;
    }
}

/* Games navbar: balanced sizing and running logo */

.games-page .sports-running-mark {
    display: grid;
    place-items: center;
    background: #194f39;
    color: #fff;
}

.games-page .sports-running-mark svg {
    display: block;
    width: 36px;
    height: 36px;
}

.games-page .brand-text strong {
    font-size: 19px;
    line-height: 1.3;
}

.games-page .brand-text span {
    font-size: 12px;
}

.games-page .app-nav-links {
    gap: 18px;
}

.games-page .app-nav-links a {
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.games-page .app-nav-links a.active::before,
.games-page .app-nav-links a.active::after {
    display: none;
}

@media (max-width: 700px) {
    .games-page .app-nav-links {
        gap: 5px;
    }

    .games-page .app-nav-links a {
        padding: 9px 10px;
        font-size: 13px;
    }
}

.games-page .sports-running-mark {
    padding: 0;
    overflow: hidden;
}

.games-page .sports-running-mark .sports-buddy-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Shared Seiaura logo */

.brand-mark.sports-running-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #194f39;
}

.brand-mark.sports-running-mark .sports-buddy-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Dashboard navbar and footer logos */

.brand-icon.dashboard-image-logo,
.sb-footer-logo-mark.dashboard-image-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    background: #194f39;
    box-shadow: none;
}

/* Remove the old diagonal shine */
.dashboard-image-logo::before,
.dashboard-image-logo::after {
    display: none;
}

.dashboard-image-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Same soft avatar look for all sports */
.discovery-card .discovery-avatar img {
    opacity: 0.8;
}

/* Find Players page — saved profile avatar */

#profile-button {
    position: relative;
    overflow: hidden;
    padding: 0;
}

#profile-button .nav-profile-avatar {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.secondary-sports-panel {
    margin-top: 26px;
    padding: 24px;
    background: #f5f8f2;
    border: 1px solid #dce5dc;
    border-radius: 20px;
}

.secondary-sports-panel h3 {
    margin: 0 0 8px;
    color: #173e30;
    font-size: 21px;
    font-weight: 700;
}

.secondary-sports-panel p {
    margin: 0 0 18px;
    color: #586b61;
    font-size: 15px;
    line-height: 1.5;
}

.secondary-sports-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.secondary-sport-option {
    position: relative;
    cursor: pointer;
}

.secondary-sport-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.secondary-sport-option span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 17px;
    box-sizing: border-box;
    border: 1px solid #cbd8ce;
    border-radius: 12px;
    background: #fff;
    color: #244536;
    font-size: 16px;
    font-weight: 600;
    transition: background .18s, border-color .18s;
}

.secondary-sport-option span::before {
    content: "+";
    width: 18px;
    text-align: center;
    font-size: 20px;
}

.secondary-sport-option input:checked + span {
    background: #194d38;
    border-color: #194d38;
    color: #fff;
}

.secondary-sport-option input:checked + span::before {
    content: "✓";
    color: #b9ef69;
}

.secondary-sport-option input:focus-visible + span {
    outline: 3px solid #80b934;
    outline-offset: 3px;
}

/* TABLE TENNIS PLAYER BACKGROUND */

.discovery-card.sport-table-tennis .discovery-card-profile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #edf3e5;
}

.discovery-card.sport-table-tennis .discovery-card-profile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300'%3E%3Cg fill='none' stroke='%238ba68b' stroke-width='2' opacity='.45'%3E%3Cpath d='M-40 265L355 125L650 215M25 305L410 165L650 240M355 125L410 165M180 187L225 231'/%3E%3C/g%3E%3Cg transform='translate(410 133) rotate(32)'%3E%3Crect x='-13' y='57' width='26' height='100' rx='11' fill='%236d8f77'/%3E%3Cellipse rx='62' ry='77' fill='%238ea98d'/%3E%3Cellipse rx='53' ry='67' fill='%23a9bea0'/%3E%3Cpath d='M-43 43Q0 66 43 43' fill='none' stroke='%236d8f77' stroke-width='5'/%3E%3C/g%3E%3Cg fill='none' stroke='%239ab397' stroke-width='4' stroke-linecap='round' opacity='.65'%3E%3Cpath d='M50 105Q145 30 254 54M78 129Q164 63 245 77'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: .55;

    animation: tableTennisDrift 6s ease-in-out infinite alternate;
}

/* Animated ball */
.discovery-card.sport-table-tennis .discovery-card-profile::after {
    content: "";
    position: absolute;
    top: 22%;
    left: 62%;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #fafcf4;
    border: 1px solid #b5c8ad;
    box-shadow: 3px 5px 10px rgb(38 76 47 / 10%);
    opacity: .85;
    z-index: 0;
    pointer-events: none;

    animation: tableTennisBall 3.2s ease-in-out infinite;
}

/* Keep the player's avatar above the artwork */
.discovery-card.sport-table-tennis .discovery-avatar {
    position: relative;
    z-index: 1;
}

@keyframes tableTennisDrift {
    from {
        transform: translateX(-4px) rotate(-1deg) scale(1.04);
    }
    to {
        transform: translateX(4px) rotate(1deg) scale(1.07);
    }
}

@keyframes tableTennisBall {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-48px, 40px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .discovery-card.sport-table-tennis .discovery-card-profile::before,
    .discovery-card.sport-table-tennis .discovery-card-profile::after {
        animation: none;
    }
}

.discovery-card.sport-table-tennis .discovery-card-profile::before {
    background-image: url("avatars/table-tennis-motion.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .8;
    animation: tableTennisBackground 6s ease-in-out infinite alternate;
}

.discovery-card.sport-table-tennis .discovery-card-profile::after {
    content: none;
}

@keyframes tableTennisBackground {
    from {
        transform: scale(1.03) translateX(-3px);
    }
    to {
        transform: scale(1.06) translateX(3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .discovery-card.sport-table-tennis .discovery-card-profile::before {
        animation: none;
    }
}

/* Sport name on discovery cards */
.discovery-sport-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-bottom: 12px;
    padding: 8px 13px;
    border: 1px solid #d7e4d5;
    border-radius: 10px;
    background: #edf4e8;
    color: #235239;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.discovery-sport-label-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #79a936;
}

/* Sport name inside opened profile and request popup */
#player-profile-sport,
#modal-sport {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 9px 15px;
    border: 1px solid #d7e4d5;
    border-radius: 10px;
    background: #edf4e8;
    color: #235239;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

/* FEMALE PLAYER SPORTS BACKGROUNDS */

.discovery-card.player-female.sport-badminton {
    --female-sport-image:
        url("avatars/badminton-female-motion.png");
}

.discovery-card.player-female.sport-tennis {
    --female-sport-image:
        url("avatars/tennis-female-motion.png");
}

.discovery-card.player-female.sport-pickleball {
    --female-sport-image:
        url("avatars/pickleball-female-motion.png");
}

.discovery-card.player-female.sport-table-tennis {
    --female-sport-image:
        url("avatars/table-tennis-female-motion.png");
}

.discovery-card.player-female .discovery-card-profile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #edf3e5;
}

.discovery-card.player-female .discovery-card-profile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image: var(--female-sport-image, none);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    opacity: .75;
    animation: femaleSportDrift 6s ease-in-out infinite alternate;
}

.discovery-card.player-female .discovery-card-profile::after {
    content: none;
}

.discovery-card.player-female .discovery-avatar {
    position: relative;
    z-index: 1;
}

@keyframes femaleSportDrift {
    from {
        transform: scale(1.03) translateX(-3px);
    }
    to {
        transform: scale(1.06) translateX(3px);
    }
}

/* Neutral background when gender is unspecified */
.discovery-card.player-neutral .discovery-card-profile::before {
    background-image: linear-gradient(
        135deg,
        #edf3e5,
        #dce8d7
    );
    animation: none;
}

.discovery-card.player-neutral .discovery-card-profile::after {
    content: none;
}

@media (prefers-reduced-motion: reduce) {
    .discovery-card.player-female .discovery-card-profile::before {
        animation: none;
    }
}

/* SPORT LABEL — CLEAN TEXT WITH GREEN LINE */

.discovery-card .discovery-sport-label {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;

    margin: 0 0 14px;
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;

    color: #194d38;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}

/* Change the existing dot into a short line */
.discovery-card .discovery-sport-label-dot {
    display: block;
    width: 30px;
    height: 3px;
    flex: 0 0 30px;

    background: #89bd32;
    border: none;
    border-radius: 2px;
    box-shadow: none;
}

/* CONSISTENT NAVBAR SIZE ACROSS PAGES */

.app-navbar .brand-text strong,
.discovery-navbar .brand-text strong {
    font-size: 19px;
    line-height: 1.3;
}

.app-navbar .brand-text span,
.discovery-navbar .brand-text span {
    font-size: 12px;
}

.app-navbar .app-nav-links,
.discovery-navbar .discovery-nav-links {
    gap: 18px;
}

.app-navbar .app-nav-links a,
.discovery-navbar .discovery-nav-links a {
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

/* Keep the active-page dot close to the link */
.app-navbar .app-nav-links a.active::after,
.discovery-navbar .discovery-nav-links a.active::after {
    bottom: -5px;
}

@media (max-width: 700px) {
    .app-navbar .app-nav-links,
    .discovery-navbar .discovery-nav-links {
        gap: 5px;
    }

    .app-navbar .app-nav-links a,
    .discovery-navbar .discovery-nav-links a {
        padding: 9px 10px;
        font-size: 13px;
    }
}

/* =====================================================
   DASHBOARD UPCOMING GAME
   MODERN GRADIENT STYLE
===================================================== */

.dashboard-game-card {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            120deg,
            #fffdfa 0%,
            #fffefb 47%,
            #f3fbed 72%,
            #e3f8e9 100%
        );

    border:
        1px solid
        rgba(29, 90, 62, 0.12);

    box-shadow:
        0 18px 45px
        rgba(24, 73, 50, 0.07);
}


/* remove old circular decoration */

.dashboard-game-card::after {
    display: none;
}


/* =====================================================
   ABSTRACT GRADIENT ART
===================================================== */

.dashboard-game-gradient-art {
    position: absolute;

    z-index: 0;

    top: 0;
    right: 0;

    width: 58%;
    height: 72%;

    overflow: hidden;

    pointer-events: none;
}


/* LARGE SOFT GLOW */

.dashboard-game-gradient-art::before {
    content: "";

    position: absolute;

    width: 290px;
    height: 290px;

    right: -60px;
    top: -105px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(93, 224, 139, 0.30) 0%,
            rgba(93, 224, 139, 0.14) 36%,
            rgba(93, 224, 139, 0.04) 58%,
            transparent 72%
        );

    animation:
        dashboardGradientGlow
        6s
        ease-in-out
        infinite;
}


/* FLOWING WAVE */

.dashboard-game-gradient-art::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 145px;

    right: -70px;
    bottom: 10px;

    border-radius:
        50% 10% 50% 20% /
        60% 30% 70% 40%;

    background:
        linear-gradient(
            100deg,
            rgba(89, 221, 140, 0),
            rgba(89, 221, 140, 0.10),
            rgba(39, 190, 108, 0.22),
            rgba(89, 221, 140, 0.06)
        );

    transform:
        rotate(-8deg);

    filter:
        blur(1px);

    animation:
        dashboardWaveFloat
        7s
        ease-in-out
        infinite;
}


/* =====================================================
   CONTENT ABOVE GRADIENT
===================================================== */

.dashboard-game-top,
.dashboard-game-main,
.dashboard-game-buddy {
    position: relative;

    z-index: 2;
}


/* remove spacing left by old sport image */

.dashboard-game-sport {
    gap: 0;
}


/* UPCOMING LABEL */

.dashboard-game-sport span {
    color: #23925a;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.20em;
}


/* SPORT NAME */

.dashboard-game-sport strong {
    margin-top: 5px;

    color: #123c2d;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 23px;

    font-weight: 700;

    letter-spacing: -0.7px;
}


/* CONFIRMED */

.dashboard-game-status {
    background:
        rgba(232, 250, 238, 0.90);

    color: #167a48;

    border:
        1px solid
        rgba(53, 171, 103, 0.15);

    box-shadow:
        0 5px 18px
        rgba(39, 148, 83, 0.08);
}


/* =====================================================
   ANIMATION
===================================================== */

@keyframes dashboardGradientGlow {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-15px, 10px, 0)
            scale(1.07);
    }

}


@keyframes dashboardWaveFloat {

    0%,
    100% {
        transform:
            translateX(0)
            rotate(-8deg);
    }

    50% {
        transform:
            translateX(-25px)
            rotate(-4deg);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px) {

    .dashboard-game-gradient-art {
        width: 75%;
        opacity: 0.75;
    }

    .dashboard-game-sport strong {
        font-size: 19px;
    }

}

/* =====================================================
   UPCOMING GAME — TEXT SIZE FINAL FIX
===================================================== */

/* SPORT NAME — Badminton */
.dashboard-game-card
.dashboard-game-sport strong {
    font-size: 28px !important;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.8px;
}


/* PLAYING AT */
.dashboard-game-card
.dashboard-game-info > span {
    font-size: 12px !important;
    font-weight: 600;
}


/* VENUE NAME — Arena Sports Club */
.dashboard-game-card
.dashboard-game-info h3 {
    margin: 5px 0 3px !important;

    font-size: 24px !important;
    line-height: 1.1;

    font-weight: 700;
    letter-spacing: -0.5px;
}


/* LOCATION — City Centre */
.dashboard-game-card
.dashboard-game-info p {
    font-size: 12px !important;
    line-height: 1.4;
}


/* GAME TIME */
.dashboard-game-card
.dashboard-game-time {
    margin-top: 6px;

    font-size: 12px !important;
    font-weight: 800;
}


/* PLAYING WITH */
.dashboard-game-card
.dashboard-game-buddy-left span {
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 0.1em;
}


/* PLAYER NAME — Kunal */
.dashboard-game-card
.dashboard-game-buddy-left strong {
    margin-top: 3px;

    font-size: 16px !important;
    line-height: 1.1;

    font-weight: 700;
}


/* PLAYER AVATAR */
.dashboard-game-card
.dashboard-game-avatar {
    width: 52px !important;
    height: 52px !important;
}

/* =====================================================
   UPCOMING GAME — VENUE SPACING FINAL FIX
===================================================== */

.dashboard-game-card
.dashboard-game-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0;
}


/* PLAYING AT */
.dashboard-game-card
.dashboard-game-info > span {
    margin: 0 0 7px 0 !important;

    line-height: 1;
}


/* ARENA SPORTS CLUB */
.dashboard-game-card
.dashboard-game-info h3 {
    margin: 0 0 5px 0 !important;

    line-height: 1.1;
}


/* CITY CENTRE */
.dashboard-game-card
.dashboard-game-info p {
    margin: 0 0 7px 0 !important;

    line-height: 1.25;
}


/* 9:00 AM */
.dashboard-game-card
.dashboard-game-time {
    margin: 0 !important;

    line-height: 1.2;
}

/* =====================================================
   FOOTER SOCIAL ICONS
===================================================== */

.sb-footer-socials {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 20px;
}


.sb-footer-socials .sb-social-link {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    border:
        1px solid
        rgba(255,255,255,.11);

    background:
        rgba(255,255,255,.055);

    color:
        rgba(255,255,255,.78);

    text-decoration: none;

    transition:
        transform .22s ease,
        background .22s ease,
        color .22s ease,
        border-color .22s ease;
}


.sb-footer-socials .sb-social-link svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.sb-footer-socials .social-fill {
    fill: currentColor;
    stroke: none;
}


.sb-footer-socials .youtube-play {
    fill: currentColor;
    stroke: none;
}


.sb-footer-socials .sb-social-link:hover {
    transform:
        translateY(-3px);

    background:
        rgba(22,201,107,.13);

    border-color:
        rgba(78,225,137,.28);

    color:
        #65e999;
}

/* =====================================================
   INDEX SPORTS — PHOTO CARDS FINAL
===================================================== */

.sports-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 16px !important;

    margin-top: 55px !important;
}


/* CARD */

.sports-grid .sport-card {
    position: relative !important;

    height: 360px !important;
    min-height: 360px !important;

    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 26px !important;

    border:
        1px solid
        rgba(20, 62, 43, .08) !important;

    background: #173b2c !important;

    color: white !important;

    isolation: isolate;

    cursor: pointer;

    box-shadow:
        0 8px 25px
        rgba(20, 53, 38, .06);

    transition:
        transform .32s cubic-bezier(.2,.8,.2,1),
        box-shadow .32s ease !important;
}


/* REMOVE OLD DECORATION */

.sports-grid .sport-card::before,
.sports-grid .sport-card::after {
    display: none !important;
}


/* PHOTO */

.sport-card-photo {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

    transform: scale(1.01);

    transition:
        transform .55s
        cubic-bezier(.2,.8,.2,1);
}


/* DARK GRADIENT */

.sport-card-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to bottom,
            rgba(5, 27, 20, .05) 20%,
            rgba(6, 27, 20, .17) 48%,
            rgba(5, 24, 18, .88) 100%
        );

    pointer-events: none;
}


/* NUMBER */

.sport-card-number {
    position: absolute;

    top: 22px;
    right: 22px;

    z-index: 3;

    color:
        rgba(255,255,255,.88);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .08em;
}


/* CONTENT */

.sports-grid
.sport-card
.sport-card-content {
    position: absolute !important;

    left: 25px;
    right: 25px;
    bottom: 25px;

    z-index: 3;

    padding: 0 !important;
    margin: 0 !important;
}


/* TITLE */

.sports-grid
.sport-card
.sport-card-content h3 {
    margin: 0 !important;

    color: #ffffff !important;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 25px !important;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -.6px;
}


/* SUBTITLE */

.sports-grid
.sport-card
.sport-card-content p {
    margin-top: 8px !important;

    color:
        rgba(255,255,255,.78) !important;

    font-size: 13px !important;

    line-height: 1.4;
}


/* HOVER */

.sports-grid .sport-card:hover {
    transform:
        translateY(-7px) !important;

    border-color:
        rgba(22, 201, 107, .25) !important;

    box-shadow:
        0 20px 45px
        rgba(19, 53, 37, .16) !important;
}


.sports-grid
.sport-card:hover
.sport-card-photo {
    transform:
        scale(1.055);
}


/* SELECTED SPORT */

.sports-grid .sport-card.active {
    background: transparent !important;

    border-color:
        rgba(120, 235, 148, .65) !important;

    box-shadow:
        0 0 0 2px
        rgba(91, 220, 130, .18),
        0 18px 40px
        rgba(17, 57, 37, .14) !important;
}


/* REMOVE ANY OLD ARROWS */

.sports-grid .sport-arrow {
    display: none !important;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .sports-grid {
        grid-template-columns:
            repeat(2, 1fr) !important;
    }

}


@media (max-width: 600px) {

    .sports-grid {
        grid-template-columns:
            1fr !important;
    }

    .sports-grid .sport-card {
        height: 340px !important;
        min-height: 340px !important;
    }

}

/* =====================================================
   HOW IT WORKS — PREMIUM IMAGE CARDS
===================================================== */

.how-section {
    padding:
        105px
        max(24px, calc((100% - 1380px) / 2))
        115px !important;

    background:
        #f8f6ed !important;
}


.how-section .section-container {
    width: 100% !important;
    max-width: 1380px !important;

    margin: 0 auto !important;
}


/* ================= HEADER ================= */

.how-heading {
    text-align: center;

    max-width: 850px;

    margin: 0 auto 58px;
}


.how-heading .section-eyebrow {
    display: block;

    color: #78b92d;

    font-size: 12px !important;

    font-weight: 800;

    letter-spacing: .22em;

    margin-bottom: 20px;
}


.how-heading h2 {
    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    color: #103b2c;

    font-size:
        clamp(56px, 6vw, 92px) !important;

    line-height: .96;

    font-weight: 800;

    letter-spacing: -.055em;
}


.how-heading h2 span {
    color: #83c128;
}


.how-intro {
    max-width: 760px;

    margin:
        26px auto 0 !important;

    color: #6b7770;

    font-size: 18px !important;

    line-height: 1.65;

    font-weight: 500;
}


/* ================= GRID ================= */

.steps-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 20px !important;

    align-items: stretch;
}


/* ================= CARD ================= */

.step-card {
    position: relative;

    min-height: 480px;

    padding:
        26px 28px
        30px !important;

    overflow: hidden;

    border:
        1px solid
        rgba(36, 75, 51, .11) !important;

    border-radius:
        28px !important;

    background:
        rgba(255,255,255,.82) !important;

    box-shadow:
        0 12px 35px
        rgba(36, 65, 44, .045);

    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease,
        border-color .3s ease;
}


.step-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(126, 189, 48, .32) !important;

    box-shadow:
        0 22px 48px
        rgba(36, 65, 44, .10);
}


/* REMOVE OLD ICON */

.step-card .step-icon {
    display: none !important;
}


/* ================= NUMBER ================= */

.step-number {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin-bottom: 20px;

    border-radius: 50%;

    background:
        #f1f3df;

    color: #183e2f !important;

    font-size: 13px !important;

    font-weight: 800 !important;

    letter-spacing: .02em;
}


/* ================= IMAGE ================= */

.step-image-wrap {
    width: 100%;

    height: 205px;

    margin-bottom: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            #fbfaf3,
            #f1f4e8
        );
}


.step-image {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1);
}


.step-card:hover
.step-image {
    transform:
        scale(1.035);
}


/* ================= TEXT ================= */

.step-card h3 {
    margin: 0 !important;

    color: #103b2c !important;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 24px !important;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing:
        -.035em;
}


.step-card p {
    margin-top:
        12px !important;

    color:
        #66746d !important;

    font-size:
        15px !important;

    line-height:
        1.62 !important;

    font-weight: 500;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 1100px) {

    .steps-grid {
        grid-template-columns:
            repeat(2, 1fr) !important;
    }

}


@media (max-width: 650px) {

    .how-section {
        padding:
            75px 20px
            80px !important;
    }


    .steps-grid {
        grid-template-columns:
            1fr !important;
    }


    .step-card {
        min-height:
            auto;
    }


    .step-image-wrap {
        height:
            230px;
    }


    .how-intro {
        font-size:
            15px !important;
    }

}

/* =====================================================
   WHY SECTION — SEIAURA PLAYER PROOF
===================================================== */

.why-player-proof {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 18px;
}


.why-avatar-stack {
    display: flex;
    align-items: center;
}


.why-avatar-stack img {
    width: 38px;
    height: 38px;

    display: block;

    object-fit: cover;

    border-radius: 50%;

    border: 3px solid #f8f6ed;

    background: #edf5e6;

    box-shadow:
        0 4px 12px
        rgba(20, 60, 42, .08);
}


.why-avatar-stack img:not(:first-child) {
    margin-left: -10px;
}


.why-player-proof > span {
    color: #68786f;

    font-size: 12px;
    font-weight: 600;

    white-space: nowrap;
}


.why-avatar-stack img {
    transition:
        transform .22s ease;
}


.why-avatar-stack img:hover {
    position: relative;

    z-index: 5;

    transform:
        translateY(-3px)
        scale(1.08);
}

/* =====================================================
   WHY SEIAURA — PREMIUM FINAL
===================================================== */

.why-section {
    padding: 105px 0 115px !important;

    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(148, 207, 86, .09),
            transparent 30%
        ),
        #fffefa !important;

    overflow: hidden;
}


/* ================= LAYOUT ================= */

.why-section .why-container {
    width:
        min(1680px, calc(100% - 70px)) !important;

    margin: 0 auto !important;

    display: grid !important;

    grid-template-columns:
        minmax(480px, .86fr)
        minmax(650px, 1.2fr)
        95px !important;

    gap: 54px !important;

    align-items: center;
}


/* =====================================================
   LEFT
===================================================== */

.why-copy {
    align-self: center;
}


.why-copy .section-eyebrow {
    display: block;

    margin-bottom: 27px;

    color: #6eaa2e;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .20em;
}


.why-copy h2 {
    margin: 0;

    max-width: 650px;

    font-family:
        "Manrope",
        sans-serif;

    color: #103b2d;

    font-size:
        clamp(58px, 5.6vw, 92px) !important;

    font-weight: 800;

    line-height: .98 !important;

    letter-spacing: -.06em;
}


.why-copy h2 span {
    color: #84bd2b;
}


.why-copy > p {
    max-width: 620px !important;

    margin-top: 30px !important;

    color: #65756d !important;

    font-size: 17px !important;

    line-height: 1.7 !important;
}


/* =====================================================
   BUTTON
===================================================== */

.why-find-btn {
    width: auto !important;

    min-width: 245px;
    height: 64px;

    margin-top: 34px;

    padding: 0 25px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border: 0;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            #0e5439,
            #176343
        );

    color: white;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 15px 30px
        rgba(16, 76, 51, .14);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}


.why-find-btn span {
    color: #b2ec43;

    font-size: 22px;

    transition:
        transform .22s ease;
}


.why-find-btn:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 20px 38px
        rgba(16, 76, 51, .19);
}


.why-find-btn:hover span {
    transform:
        translateX(4px);
}


/* =====================================================
   PLAYER PROOF
===================================================== */

.why-player-proof {
    display: flex !important;
    align-items: center;

    gap: 16px;

    margin-top: 20px !important;
}


.why-avatar-stack {
    display: flex;
    align-items: center;
}


.why-avatar-stack img {
    width: 43px !important;
    height: 43px !important;

    display: block;

    object-fit: cover;

    border-radius: 50%;

    border:
        3px solid #fffefa;

    background:
        #eef6e1;

    box-shadow:
        0 3px 10px
        rgba(20, 59, 41, .10);
}


.why-avatar-stack img:not(:first-child) {
    margin-left: -10px;
}


.why-player-proof > span {
    color: #687970 !important;

    font-size: 13px !important;

    font-weight: 600;

    white-space: nowrap;
}


/* =====================================================
   RIGHT FEATURE CARDS
===================================================== */

.why-section .feature-stack {
    display: flex;

    flex-direction: column;

    gap: 18px !important;
}


.why-section .feature-card {
    position: relative;

    min-height: 170px !important;

    padding:
        24px
        28px !important;

    display: grid !important;

    grid-template-columns:
        92px
        minmax(0, 1fr)
        72px !important;

    align-items: center;

    gap: 23px !important;

    border:
        1px solid
        rgba(28, 78, 52, .12) !important;

    border-radius:
        28px !important;

    background:
        rgba(255,255,252,.76) !important;

    box-shadow:
        0 7px 25px
        rgba(28, 65, 44, .025);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}


.why-section .feature-card:hover {
    transform:
        translateX(-6px);

    border-color:
        rgba(129, 190, 50, .35) !important;

    box-shadow:
        0 18px 40px
        rgba(24, 67, 44, .07);
}


/* =====================================================
   PROPER FEATURE ICON
===================================================== */

.why-section .feature-icon {
    width: 86px !important;
    height: 86px !important;

    display: grid;
    place-items: center;

    border-radius:
        23px !important;

    background:
        linear-gradient(
            145deg,
            #edf8c9,
            #dff3a2
        ) !important;

    color:
        #0d5a3d !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(92, 145, 47, .05);
}


.why-section .feature-icon svg {
    width: 38px;
    height: 38px;

    display: block;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =====================================================
   CARD TEXT
===================================================== */

.feature-card-copy h3 {
    margin: 0 !important;

    color: #10392c !important;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 20px !important;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing:
        -.025em;
}


.feature-card-copy p {
    max-width: 570px;

    margin-top:
        9px !important;

    color:
        #687970 !important;

    font-size:
        13px !important;

    line-height:
        1.6 !important;
}


/* =====================================================
   01 / 02 / 03
===================================================== */

.feature-number {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 11px;

    align-self:
        start;

    margin-top: 8px;

    color: #659b35;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .04em;
}


.feature-number span {
    width: 20px;
    height: 1px;

    display: block;

    background:
        #78ad42;
}


/* =====================================================
   RIGHT SPORT RAIL
===================================================== */

.why-sport-rail {
    position: relative;

    width: 95px;
    height: 555px;

    display: flex;
    flex-direction: column;

    align-items: center;

    justify-content:
        space-between;
}


.why-rail-line {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    pointer-events: none;
}


.why-rail-line path {
    fill: none;

    stroke:
        rgba(110, 165, 58, .58);

    stroke-width:
        1.2;
}


.why-sport-bubble {
    position: relative;

    z-index: 2;

    width: 78px;
    height: 78px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #f1f7df,
            #e5f0cb
        );

    box-shadow:
        0 7px 20px
        rgba(42, 77, 46, .04);
}


.why-sport-bubble img {
    width: 54px;
    height: 54px;

    display: block;

    object-fit: contain;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1350px) {

    .why-section .why-container {
        grid-template-columns:
            .85fr
            1.15fr !important;
    }


    .why-sport-rail {
        display: none;
    }

}


@media (max-width: 900px) {

    .why-section .why-container {
        grid-template-columns:
            1fr !important;

        gap:
            65px !important;
    }


    .why-copy h2 {
        max-width:
            720px;
    }

}


@media (max-width: 650px) {

    .why-section {
        padding:
            75px 0 !important;
    }


    .why-section .why-container {
        width:
            calc(100% - 36px) !important;
    }


    .why-section .feature-card {
        grid-template-columns:
            68px 1fr !important;

        padding:
            20px !important;
    }


    .why-section .feature-icon {
        width:
            62px !important;

        height:
            62px !important;

        border-radius:
            18px !important;
    }


    .why-section
    .feature-icon svg {
        width:
            29px;

        height:
            29px;
    }


    .feature-number {
        display:
            none;
    }


    .why-player-proof {
        flex-wrap:
            wrap;
    }

}

/* =====================================================
   LANDING PAGE — DASHBOARD STYLE FOOTER
===================================================== */

.landing-footer.sb-footer {
    position: relative;

    width: calc(100% - 40px) !important;
    max-width: 1750px !important;

    min-height: 465px;

    margin:
        48px auto
        20px !important;

    overflow: hidden;

    border-radius: 30px !important;

    background:
        linear-gradient(
            90deg,
            rgba(3, 43, 32, .97) 0%,
            rgba(3, 43, 32, .94) 25%,
            rgba(3, 43, 32, .83) 43%,
            rgba(3, 43, 32, .48) 58%,
            rgba(3, 43, 32, .10) 73%,
            rgba(3, 43, 32, 0) 100%
        ),
        url("avatars/footer-sports-scene.png") !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    box-shadow:
        0 24px 55px
        rgba(11, 52, 36, .12);
}


/* subtle overall shade */

.landing-footer.sb-footer::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(1, 25, 19, .24),
            transparent 43%
        );

    z-index: 0;
}


/* =====================================================
   MAIN CONTENT
===================================================== */

.landing-footer
.sb-footer-content {
    position: relative;

    z-index: 2;

    width: 67%;

    min-height: 390px;

    padding:
        72px
        55px
        45px;

    display: grid;

    grid-template-columns:
        1.45fr
        .8fr
        1fr
        .72fr;

    gap: 44px;

    align-items: start;
}


/* =====================================================
   BRAND
===================================================== */

.landing-footer
.sb-footer-brand {
    min-width: 0;
}


.landing-footer
.sb-footer-logo {
    display: flex;

    align-items: center;

    gap: 13px;

    color: white;

    text-decoration: none;
}


.landing-footer
.sb-footer-logo-mark {
    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 16px;

    background:
        rgba(22, 201, 107, .16);

    border:
        1px solid
        rgba(255,255,255,.12);
}


.landing-footer
.sb-footer-logo-mark img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.landing-footer
.sb-footer-name {
    color: #ffffff !important;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 24px;

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -.035em;
}


.landing-footer
.sb-footer-tagline {
    margin-top: 5px;

    color:
        rgba(255,255,255,.70);

    font-size: 13px;

    font-weight: 500;
}


.landing-footer
.sb-footer-description {
    margin-top: 36px;

    color:
        rgba(255,255,255,.77);

    font-size: 14px;

    line-height: 1.8;
}


/* =====================================================
   LINK COLUMNS
===================================================== */

.landing-footer
.sb-footer-column {
    transform: none !important;
}


.landing-footer
.sb-footer-column h4 {
    margin: 5px 0 23px;

    color:
        rgba(215,239,221,.72);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .20em;
}


.landing-footer
.sb-footer-column a {
    display: block;

    width: fit-content;

    margin-bottom: 17px;

    color:
        rgba(255,255,255,.86);

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition:
        color .2s ease,
        transform .2s ease;
}


.landing-footer
.sb-footer-column a:hover {
    color: #72ec9e;

    transform:
        translateX(4px);
}


/* =====================================================
   SOCIALS
===================================================== */

.landing-footer
.sb-footer-socials {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 30px;
}


.landing-footer
.sb-footer-socials a {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,.18);

    background:
        rgba(255,255,255,.045);

    color:
        rgba(255,255,255,.82);

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}


.landing-footer
.sb-footer-socials a:hover {
    transform:
        translateY(-3px);

    background:
        rgba(34, 211, 112, .18);

    color: #7af0a4;
}


.landing-footer
.sb-footer-socials svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.landing-footer
.footer-social-fill,
.landing-footer
.footer-youtube-play {
    fill:
        currentColor;

    stroke: none;
}


/* =====================================================
   COPYRIGHT
===================================================== */

.landing-footer
.sb-footer-bottom {
    position: relative;

    z-index: 2;

    width: 67%;

    padding:
        18px 55px
        25px;

    border-top:
        1px solid
        rgba(255,255,255,.09);

    color:
        rgba(255,255,255,.55);

    font-size: 11px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1200px) {

    .landing-footer
    .sb-footer-content {
        width: 78%;

        grid-template-columns:
            1.3fr
            repeat(3, .8fr);

        gap: 30px;
    }


    .landing-footer
    .sb-footer-bottom {
        width: 78%;
    }

}


@media (max-width: 900px) {

    .landing-footer.sb-footer {
        background-position:
            65% center !important;
    }


    .landing-footer
    .sb-footer-content {
        width: 100%;

        grid-template-columns:
            repeat(2, 1fr);

        padding:
            55px 35px;

        background:
            rgba(3, 43, 32, .82);
    }


    .landing-footer
    .sb-footer-brand {
        grid-column:
            1 / -1;
    }


    .landing-footer
    .sb-footer-bottom {
        width: 100%;

        padding:
            18px 35px 25px;

        background:
            rgba(3, 43, 32, .82);
    }

}


@media (max-width: 560px) {

    .landing-footer.sb-footer {
        width:
            calc(100% - 20px) !important;

        border-radius:
            22px !important;
    }


    .landing-footer
    .sb-footer-content {
        grid-template-columns:
            1fr;

        padding:
            42px 27px;
    }


    .landing-footer
    .sb-footer-brand {
        grid-column:
            auto;
    }


    .landing-footer
    .sb-footer-bottom {
        padding:
            17px 27px 23px;
    }

}

/* =====================================================
   TEAM SPORTS — INDEX
===================================================== */

.team-sports-section {
    position: relative;

    padding:
        110px
        0
        115px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(157, 215, 79, .11),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 95%,
            rgba(16, 83, 56, .06),
            transparent 28%
        ),
        #fbfaf4;
}


.team-sports-container {
    width:
        min(
            1680px,
            calc(100% - 70px)
        );

    margin:
        0 auto;
}


/* =====================================================
   HEADING
===================================================== */

.team-sports-heading {
    max-width:
        980px;

    margin:
        0 auto 55px;

    text-align:
        center;
}


.team-sports-eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        15px;

    color:
        #579536;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .18em;
}


.team-sports-eyebrow::before,
.team-sports-eyebrow::after {
    content: "";

    width:
        34px;

    height:
        1px;

    background:
        #73ad4a;
}


.team-sports-heading h2 {
    margin:
        19px 0 0;

    color:
        #103c2d;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            54px,
            5.4vw,
            86px
        );

    line-height:
        .98;

    font-weight:
        800;

    letter-spacing:
        -.055em;
}


.team-sports-heading h2 span {
    color:
        #7fbd2d;
}


.team-sports-heading p {
    max-width:
        800px;

    margin:
        25px auto 0;

    color:
        #687970;

    font-size:
        16px;

    line-height:
        1.7;
}


/* =====================================================
   GRID
===================================================== */

.team-sports-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        18px;
}


/* =====================================================
   TEAM CARD
===================================================== */

.team-sport-card {
    position:
        relative;

    overflow:
        hidden;

    min-width:
        0;

    border:
        1px solid
        rgba(18, 66, 44, .11);

    border-radius:
        27px;

    background:
        #103d2c;

    box-shadow:
        0 14px 35px
        rgba(18, 58, 40, .08);

    cursor:
        pointer;

    transition:
        transform .3s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease;
}


.team-sport-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 24px 48px
        rgba(18, 58, 40, .16);
}


/* =====================================================
   MEDIA
===================================================== */

.team-sport-media {
    position:
        relative;

    height:
        315px;

    overflow:
        hidden;

    background:
        #173b2d;
}


.team-sport-media::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            rgba(5, 26, 19, .08),
            rgba(5, 26, 19, .22) 55%,
            rgba(5, 26, 19, .85) 100%
        );

    z-index:
        2;
}


.team-sport-media::after {
    content: "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    top:
        -100px;

    right:
        -85px;

    filter:
        blur(4px);

    opacity:
        .75;

    z-index:
        1;
}


/* temporary image moods */

.team-sport-media-cricket {
    background:
        linear-gradient(
            140deg,
            #182f27,
            #506842 50%,
            #a67743
        );
}


.team-sport-media-cricket::after {
    background:
        rgba(230, 169, 92, .32);
}


.team-sport-media-football {
    background:
        linear-gradient(
            140deg,
            #142f28,
            #365442 48%,
            #9a7448
        );
}


.team-sport-media-football::after {
    background:
        rgba(227, 155, 79, .28);
}


.team-sport-media-basketball {
    background:
        linear-gradient(
            140deg,
            #202b2c,
            #5e4237 55%,
            #ae7047
        );
}


.team-sport-media-basketball::after {
    background:
        rgba(234, 129, 64, .27);
}


.team-sport-media-volleyball {
    background:
        linear-gradient(
            140deg,
            #19362e,
            #48594c 55%,
            #917051
        );
}


.team-sport-media-volleyball::after {
    background:
        rgba(227, 169, 105, .25);
}


/* temporary placeholder text */

.team-image-placeholder {
    position:
        absolute;

    left:
        24px;

    bottom:
        27px;

    z-index:
        3;

    color:
        rgba(255,255,255,.16);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        37px;

    font-weight:
        800;

    letter-spacing:
        -.045em;
}


/* PLAYER COUNT */

.team-player-count {
    position:
        absolute;

    z-index:
        4;

    top:
        18px;

    right:
        18px;

    padding:
        9px 13px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:
        999px;

    background:
        rgba(7, 49, 35, .73);

    backdrop-filter:
        blur(8px);

    color:
        rgba(255,255,255,.92);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .06em;
}


/* =====================================================
   CARD BOTTOM
===================================================== */

.team-sport-card-bottom {
    min-height:
        145px;

    padding:
        23px 22px
        24px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        15px;

    background:
        linear-gradient(
            145deg,
            #103d2c,
            #0a3225
        );

    color:
        white;
}


.team-card-label {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #8add72;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .14em;
}


.team-sport-card h3 {
    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    color:
        white;

    font-size:
        22px;

    font-weight:
        800;

    letter-spacing:
        -.035em;
}


.team-sport-card p {
    max-width:
        190px;

    margin:
        7px 0 0;

    color:
        rgba(255,255,255,.68);

    font-size:
        12px;

    line-height:
        1.5;
}


.team-card-open {
    width:
        47px;

    height:
        47px;

    flex:
        0 0 47px;

    display:
        grid;

    place-items:
        center;

    border:
        0;

    border-radius:
        50%;

    background:
        #dafa9d;

    color:
        #16412f;

    font-size:
        21px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform .22s ease,
        background .22s ease;
}


.team-sport-card:hover
.team-card-open {
    transform:
        translateX(3px);

    background:
        #b6ef4d;
}


/* =====================================================
   TEAM FEATURES
===================================================== */

.team-sports-actions {
    margin-top:
        27px;

    padding:
        27px 30px;

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        0;

    border:
        1px solid
        rgba(26, 76, 51, .09);

    border-radius:
        25px;

    background:
        rgba(241, 247, 225, .78);

    box-shadow:
        0 10px 30px
        rgba(31, 69, 46, .035);
}


.team-flow-item {
    min-width:
        0;

    padding:
        0 24px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}


.team-flow-item +
.team-flow-item {
    border-left:
        1px solid
        rgba(37, 82, 56, .10);
}


.team-flow-icon {
    width:
        55px;

    height:
        55px;

    flex:
        0 0 55px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        17px;

    background:
        #e3f2c5;

    color:
        #135039;
}


.team-flow-icon svg {
    width:
        28px;

    height:
        28px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.team-flow-item strong {
    display:
        block;

    color:
        #123d2e;

    font-size:
        14px;

    font-weight:
        800;
}


.team-flow-item span {
    display:
        block;

    margin-top:
        4px;

    color:
        #6a7972;

    font-size:
        11px;

    line-height:
        1.4;
}


.team-sports-note {
    margin:
        31px 0 0;

    text-align:
        center;

    color:
        #5c9638;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1150px) {

    .team-sports-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .team-sports-actions {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            25px 0;
    }


    .team-flow-item:nth-child(3) {
        border-left:
            0;
    }

}


@media (max-width: 650px) {

    .team-sports-section {
        padding:
            80px 0;
    }


    .team-sports-container {
        width:
            calc(100% - 36px);
    }


    .team-sports-grid {
        grid-template-columns:
            1fr;
    }


    .team-sport-media {
        height:
            280px;
    }


    .team-sports-actions {
        grid-template-columns:
            1fr;

        padding:
            10px 24px;
    }


    .team-flow-item {
        padding:
            20px 0;
    }


    .team-flow-item +
    .team-flow-item {
        border-left:
            0;

        border-top:
            1px solid
            rgba(37, 82, 56, .10);
    }

}

/* =====================================================
   TEAM SPORTS HUB
===================================================== */

.team-hub-page {
    margin: 0;
    background: #f8f7ef;
    color: #123b2d;
}


/* NAV */

.team-hub-nav {
    background: rgba(250,249,242,.96);
    border-bottom: 1px solid rgba(21,70,49,.08);
}

.team-hub-nav-inner {
    width: min(1680px, calc(100% - 70px));
    height: 100px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team-hub-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    text-decoration: none;
    color: #123b2d;
}

.team-hub-brand-mark {
    width: 54px;
    height: 54px;

    overflow: hidden;

    border-radius: 16px;
}

.team-hub-brand-mark img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.team-hub-brand strong {
    display: block;

    font-size: 19px;
    font-weight: 800;
}

.team-hub-brand span {
    display: block;

    margin-top: 3px;

    color: #7b8881;

    font-size: 11px;
}

.team-hub-nav-links {
    display: flex;
    align-items: center;

    gap: 38px;
}

.team-hub-nav-links a {
    color: #63736b;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
}

.team-hub-nav-links a.active {
    color: #16553b;
}

.team-hub-back {
    height: 48px;

    padding: 0 20px;

    border: 1px solid rgba(23,83,58,.12);
    border-radius: 15px;

    background: white;

    color: #164b36;

    font-weight: 800;

    cursor: pointer;
}


/* MAIN */

.team-hub-main {
    width: min(1680px, calc(100% - 70px));

    margin: 0 auto;

    padding: 56px 0 110px;
}


/* HERO */

.team-hub-hero {
    min-height: 390px;

    padding: 58px 62px;

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    gap: 70px;

    align-items: center;

    border-radius: 34px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(163,226,89,.20),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #103d2c,
            #164f37
        );

    color: white;
}

.team-hub-eyebrow {
    color: #a6eb55;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .18em;
}

.team-hub-hero h1 {
    margin: 16px 0 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(58px, 6vw, 92px);

    line-height: .94;

    letter-spacing: -.06em;
}

.team-hub-hero h1 span {
    color: #adf244;
}

.team-hub-hero-copy > p {
    max-width: 610px;

    margin-top: 25px;

    color: rgba(255,255,255,.72);

    font-size: 16px;
    line-height: 1.7;
}

.team-hub-current-sport {
    width: fit-content;

    margin-top: 31px;

    padding: 12px 17px;

    border-radius: 13px;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.10);
}

.team-hub-current-sport span {
    display: block;

    color: rgba(255,255,255,.55);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .14em;
}

.team-hub-current-sport strong {
    display: block;

    margin-top: 4px;

    font-size: 15px;
}


/* HERO AVATARS */

.team-hub-hero-art {
    min-height: 270px;

    padding: 35px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-radius: 29px;

    background:
        rgba(255,255,255,.07);

    border:
        1px solid
        rgba(255,255,255,.10);
}

.team-hub-art-label {
    color: #9fe65c;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .17em;
}

.team-hub-player-row {
    display: flex;

    align-items: center;

    margin: 31px 0 24px;
}

.team-hub-player-row img,
.team-hub-more {
    width: 67px;
    height: 67px;

    border-radius: 50%;

    border: 4px solid #164b36;

    object-fit: cover;
}

.team-hub-player-row img:not(:first-child),
.team-hub-more {
    margin-left: -14px;
}

.team-hub-more {
    display: grid;
    place-items: center;

    background: #b5ef54;

    color: #123d2d;

    font-size: 25px;
    font-weight: 800;
}

.team-hub-hero-art > strong {
    color: white;

    font-size: 25px;
    line-height: 1.18;
}


/* ACTION SECTION */

.team-hub-actions-section {
    margin-top: 75px;
}

.team-hub-section-heading span {
    color: #6ca239;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .17em;
}

.team-hub-section-heading h2 {
    margin: 7px 0 0;

    font-size: 34px;

    letter-spacing: -.04em;
}

.team-hub-actions {
    margin-top: 27px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 17px;
}

.team-hub-action-card {
    min-height: 355px;

    padding: 28px;

    text-align: left;

    border:
        1px solid
        rgba(20,70,48,.10);

    border-radius: 27px;

    background: #fffefa;

    cursor: pointer;

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}

.team-hub-action-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 22px 45px
        rgba(24,66,45,.09);
}

.team-hub-action-featured {
    background:
        linear-gradient(
            145deg,
            #eff7d9,
            #f9faef
        );
}

.team-hub-action-icon {
    width: 65px;
    height: 65px;

    display: grid;
    place-items: center;

    border-radius: 20px;

    background: #e8f5ca;

    color: #14513a;
}

.team-hub-action-icon svg {
    width: 32px;
    height: 32px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.team-hub-action-label {
    display: block;

    margin-top: 25px;

    color: #70a33c;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .15em;
}

.team-hub-action-card h3 {
    margin: 7px 0 0;

    color: #123b2d;

    font-size: 24px;

    letter-spacing: -.035em;
}

.team-hub-action-card > p {
    min-height: 62px;

    margin-top: 10px;

    color: #68786f;

    font-size: 13px;

    line-height: 1.55;
}

.team-hub-action-footer {
    margin-top: 25px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    color: #18543c;

    font-size: 12px;
    font-weight: 800;
}

.team-hub-action-footer strong {
    font-size: 20px;
}


/* TEAM STATS */

.team-hub-team-stats {
    margin-top: 18px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 5px;
}

.team-hub-team-stats div {
    padding: 10px 5px;

    text-align: center;

    border-radius: 11px;

    background: rgba(255,255,255,.62);
}

.team-hub-team-stats strong {
    display: block;

    color: #164e37;

    font-size: 17px;
}

.team-hub-team-stats span {
    display: block;

    margin-top: 2px;

    color: #768279;

    font-size: 8px;
}


/* FLOW */

.team-hub-flow {
    margin-top: 85px;

    padding: 52px;

    display: grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap: 60px;

    border-radius: 31px;

    background: #fffefa;

    border: 1px solid rgba(20,70,48,.09);
}

.team-hub-flow-copy > span {
    color: #71a63e;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .16em;
}

.team-hub-flow-copy h2 {
    margin-top: 12px;

    font-size: 40px;

    line-height: 1.05;

    letter-spacing: -.045em;
}

.team-hub-flow-copy h2 strong {
    color: #81bd2e;
}

.team-hub-flow-steps {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;
}

.team-hub-flow-steps > div {
    padding: 22px;

    border-radius: 19px;

    background: #f5f7eb;
}

.team-hub-flow-steps > div > span {
    color: #72a83d;

    font-size: 9px;

    font-weight: 800;
}

.team-hub-flow-steps strong {
    display: block;

    margin-top: 17px;

    font-size: 15px;
}

.team-hub-flow-steps p {
    margin-top: 7px;

    color: #6b7971;

    font-size: 10px;

    line-height: 1.5;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .team-hub-actions {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .team-hub-flow {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 800px) {

    .team-hub-nav-links {
        display: none;
    }

    .team-hub-hero {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 600px) {

    .team-hub-nav-inner,
    .team-hub-main {
        width:
            calc(100% - 32px);
    }

    .team-hub-actions {
        grid-template-columns:
            1fr;
    }

    .team-hub-flow-steps {
        grid-template-columns:
            repeat(2, 1fr);
    }

}

/* =====================================================
   MY TEAMS PAGE
===================================================== */

.my-teams-page {
    margin: 0;
    background: #f8f7ef;
    color: #123b2d;
}


/* NAVBAR */

.my-teams-nav {
    background: rgba(250,249,242,.97);
    border-bottom: 1px solid rgba(21,70,49,.08);
}

.my-teams-nav-inner {
    width: min(1680px, calc(100% - 70px));
    height: 100px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.my-teams-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    color: #123b2d;
    text-decoration: none;
}

.my-teams-brand-mark {
    width: 54px;
    height: 54px;

    overflow: hidden;

    border-radius: 16px;
}

.my-teams-brand-mark img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.my-teams-brand strong {
    display: block;

    font-size: 19px;
    font-weight: 800;
}

.my-teams-brand span {
    display: block;

    margin-top: 3px;

    color: #7c8881;

    font-size: 11px;
}

.my-teams-nav-links {
    display: flex;
    align-items: center;

    gap: 38px;
}

.my-teams-nav-links a {
    color: #68766f;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
}

.my-teams-nav-links a.active {
    color: #155239;
}

.my-teams-back {
    height: 48px;

    padding: 0 20px;

    border: 1px solid rgba(23,83,58,.12);
    border-radius: 15px;

    background: white;

    color: #164b36;

    font-weight: 800;

    cursor: pointer;
}


/* MAIN */

.my-teams-main {
    width: min(1680px, calc(100% - 70px));

    margin: auto;

    padding: 64px 0 110px;
}


/* HERO */

.my-teams-hero {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;
}

.my-teams-eyebrow {
    color: #6ea03c;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .18em;
}

.my-teams-hero h1 {
    margin: 10px 0 0;

    color: #123b2d;

    font-family: "Manrope", sans-serif;

    font-size: clamp(60px, 6vw, 92px);

    line-height: .96;

    letter-spacing: -.06em;
}

.my-teams-hero h1 span {
    color: #80bd2f;
}

.my-teams-hero p {
    max-width: 600px;

    margin-top: 20px;

    color: #68776f;

    font-size: 16px;

    line-height: 1.65;
}

.my-teams-create-btn {
    min-width: 190px;
    height: 60px;

    padding: 0 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border: 0;

    border-radius: 18px;

    background: #125039;

    color: white;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 14px 30px
        rgba(15,73,49,.12);
}

.my-teams-create-btn span {
    color: #b4ee51;

    font-size: 23px;
}


/* SUMMARY */

.my-teams-summary {
    margin-top: 54px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border:
        1px solid
        rgba(26,74,51,.09);

    border-radius: 25px;

    overflow: hidden;

    background: #fffefa;
}

.my-teams-summary > div {
    padding: 26px 30px;
}

.my-teams-summary > div + div {
    border-left:
        1px solid
        rgba(26,74,51,.08);
}

.my-teams-summary span {
    color: #71a33e;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .15em;
}

.my-teams-summary strong {
    display: block;

    margin-top: 7px;

    color: #113d2d;

    font-size: 28px;
}

.my-teams-summary p {
    margin: 4px 0 0;

    color: #7b8881;

    font-size: 10px;
}


/* TOOLBAR */

.my-teams-toolbar {
    margin-top: 54px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;
}

.my-teams-tabs {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 5px;

    border-radius: 16px;

    background: #eceee4;
}

.my-team-tab {
    min-height: 44px;

    padding: 0 16px;

    display: flex;
    align-items: center;

    gap: 8px;

    border: 0;

    border-radius: 12px;

    background: transparent;

    color: #67766e;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.my-team-tab > span {
    min-width: 21px;
    height: 21px;

    padding: 0 6px;

    display: grid;
    place-items: center;

    border-radius: 999px;

    background: rgba(20,76,53,.07);

    font-size: 9px;
}

.my-team-tab.active {
    background: white;

    color: #154f38;

    box-shadow:
        0 5px 16px
        rgba(27,66,47,.07);
}

.my-teams-search-wrap {
    width: 300px;
    height: 50px;

    padding: 0 16px;

    display: flex;
    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(23,76,52,.11);

    border-radius: 15px;

    background: white;
}

.my-teams-search-wrap svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: #688077;

    stroke-width: 1.8;

    stroke-linecap: round;
}

.my-teams-search-wrap input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #183e30;

    font: inherit;

    font-size: 12px;
}


/* CONTENT */

.my-teams-content {
    margin-top: 55px;
}

.my-teams-section-heading {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 25px;
}

.my-teams-section-heading > div > span {
    color: #71a33e;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .15em;
}

.my-teams-section-heading h2 {
    margin: 7px 0 0;

    color: #123b2d;

    font-size: 32px;

    letter-spacing: -.04em;
}

.my-teams-find-btn {
    height: 46px;

    padding: 0 17px;

    display: flex;
    align-items: center;

    gap: 13px;

    border:
        1px solid
        rgba(22,76,52,.11);

    border-radius: 14px;

    background: white;

    color: #155039;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}


/* GRID */

.my-teams-grid {
    margin-top: 26px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


/* CARD */

.my-team-card {
    overflow: hidden;

    border:
        1px solid
        rgba(23,72,50,.10);

    border-radius: 27px;

    background: #fffefa;

    cursor: pointer;

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}

.my-team-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 22px 45px
        rgba(24,66,45,.09);
}


/* VISUAL */

.my-team-card-visual {
    position: relative;

    height: 180px;

    overflow: hidden;
}

.my-team-card-visual.cricket {
    background:
        linear-gradient(
            145deg,
            #12382b,
            #5f704d,
            #9b7043
        );
}

.my-team-card-visual.football {
    background:
        linear-gradient(
            145deg,
            #15392d,
            #415a45,
            #90714f
        );
}

.my-team-card-visual.basketball {
    background:
        linear-gradient(
            145deg,
            #172f2d,
            #67483b,
            #a36542
        );
}

.my-team-card-visual.volleyball {
    background:
        linear-gradient(
            145deg,
            #15362d,
            #536457,
            #8d7659
        );
}

.my-team-card-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5,29,21,.72),
            transparent 65%
        );
}

.my-team-sport-pill,
.my-team-role {
    position: absolute;

    z-index: 2;

    top: 17px;

    padding: 8px 11px;

    border-radius: 999px;

    background:
        rgba(7,48,34,.65);

    border:
        1px solid
        rgba(255,255,255,.11);

    color: white;

    font-size: 8px;

    font-weight: 800;

    backdrop-filter: blur(7px);
}

.my-team-sport-pill {
    left: 17px;
}

.my-team-role {
    right: 17px;

    color: #c8f58b;
}

.my-team-card-monogram {
    position: absolute;

    z-index: 2;

    left: 25px;

    bottom: 18px;

    color:
        rgba(255,255,255,.94);

    font-size: 58px;

    font-weight: 800;
}


/* CARD CONTENT */

.my-team-card-content {
    padding: 22px;
}

.my-team-card-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.my-team-card-heading > div > span {
    color: #7a8880;

    font-size: 9px;

    font-weight: 600;
}

.my-team-card-heading h3 {
    margin: 4px 0 0;

    color: #123b2d;

    font-size: 22px;

    letter-spacing: -.035em;
}

.my-team-more {
    border: 0;

    background: transparent;

    color: #6f7e76;

    cursor: pointer;
}

.my-team-meta {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 8px;
}

.my-team-meta > div {
    padding: 12px;

    border-radius: 13px;

    background: #f4f6eb;
}

.my-team-meta strong {
    display: block;

    color: #164c37;

    font-size: 13px;
}

.my-team-meta span {
    display: block;

    margin-top: 3px;

    color: #818b85;

    font-size: 8px;
}

.my-team-next-match {
    margin-top: 17px;

    padding: 13px 0;

    border-top:
        1px solid
        rgba(22,71,49,.08);

    border-bottom:
        1px solid
        rgba(22,71,49,.08);
}

.my-team-next-match span {
    display: block;

    color: #7c9e5e;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .14em;
}

.my-team-next-match strong {
    display: block;

    margin-top: 4px;

    color: #52665d;

    font-size: 10px;
}

.my-team-open-btn {
    width: 100%;
    height: 45px;

    margin-top: 17px;

    padding: 0 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 0;

    border-radius: 13px;

    background: #164f38;

    color: white;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;
}

.my-team-open-btn span {
    color: #b4ec55;

    font-size: 17px;
}


/* EMPTY */

.my-teams-empty {
    min-height: 390px;

    margin-top: 26px;

    padding: 55px;

    display: none;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    border:
        1px dashed
        rgba(28,82,56,.17);

    border-radius: 28px;

    background:
        rgba(255,255,251,.70);
}

.my-teams-empty-icon {
    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    border-radius: 22px;

    background: #e9f5ce;

    color: #15523a;
}

.my-teams-empty-icon svg {
    width: 35px;
    height: 35px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
}

.my-teams-empty > span {
    margin-top: 25px;

    color: #73a442;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .16em;
}

.my-teams-empty h3 {
    margin: 8px 0 0;

    color: #123d2e;

    font-size: 29px;

    letter-spacing: -.04em;
}

.my-teams-empty p {
    max-width: 450px;

    margin-top: 10px;

    color: #718078;

    font-size: 12px;

    line-height: 1.6;
}

.my-teams-empty-actions {
    margin-top: 23px;

    display: flex;

    gap: 10px;
}

.my-teams-empty-actions button {
    height: 47px;

    padding: 0 18px;

    border: 0;

    border-radius: 13px;

    background: #155039;

    color: white;

    font-weight: 800;

    cursor: pointer;
}

.my-teams-empty-actions button.secondary {
    border:
        1px solid
        rgba(21,78,54,.12);

    background: white;

    color: #155039;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .my-teams-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 850px) {

    .my-teams-nav-links {
        display: none;
    }

    .my-teams-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .my-teams-search-wrap {
        width: auto;
    }

}


@media (max-width: 650px) {

    .my-teams-nav-inner,
    .my-teams-main {
        width:
            calc(100% - 32px);
    }

    .my-teams-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .my-teams-summary {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .my-teams-summary > div {
        border-left: 0 !important;

        border-bottom:
            1px solid
            rgba(26,74,51,.08);
    }

    .my-teams-tabs {
        overflow-x: auto;
    }

    .my-teams-grid {
        grid-template-columns:
            1fr;
    }

}

/* =====================================================
   CREATE TEAM PAGE
===================================================== */

.create-team-page {
    margin: 0;
    background: #f8f7ef;
    color: #123b2d;
}


/* NAVBAR */

.create-team-nav {
    background: rgba(250,249,242,.97);
    border-bottom: 1px solid rgba(20,70,49,.08);
}

.create-team-nav-inner {
    width: min(1500px, calc(100% - 70px));
    height: 100px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;
}

.create-team-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    color: #123b2d;
    text-decoration: none;
}

.create-team-brand-mark {
    width: 54px;
    height: 54px;

    overflow: hidden;

    border-radius: 16px;
}

.create-team-brand-mark img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.create-team-brand strong {
    display: block;

    font-size: 19px;
    font-weight: 800;
}

.create-team-brand span {
    display: block;

    margin-top: 3px;

    color: #7a8880;

    font-size: 11px;
}

.create-team-nav-step {
    text-align: center;
}

.create-team-nav-step span {
    display: block;

    color: #73a63e;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .16em;
}

.create-team-nav-step strong {
    display: block;

    margin-top: 3px;

    color: #174630;

    font-size: 12px;
}

.create-team-back {
    justify-self: end;

    height: 47px;

    padding: 0 18px;

    border: 1px solid rgba(20,75,51,.11);

    border-radius: 14px;

    background: white;

    color: #155039;

    font-weight: 800;

    cursor: pointer;
}


/* MAIN */

.create-team-main {
    width: min(1500px, calc(100% - 70px));

    margin: auto;

    padding: 62px 0 110px;
}


/* HEADING */

.create-team-heading {
    max-width: 810px;

    margin-bottom: 50px;
}

.create-team-heading > span {
    color: #71a43d;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .18em;
}

.create-team-heading h1 {
    margin: 9px 0 0;

    color: #113b2c;

    font-family: "Manrope", sans-serif;

    font-size: clamp(58px, 6vw, 90px);

    line-height: .96;

    letter-spacing: -.06em;
}

.create-team-heading h1 strong {
    color: #80bd2e;
}

.create-team-heading p {
    max-width: 660px;

    margin-top: 22px;

    color: #6b7972;

    font-size: 15px;

    line-height: 1.7;
}


/* LAYOUT */

.create-team-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, .72fr);

    gap: 55px;

    align-items: start;
}


/* FORM */

.create-team-form {
    padding: 36px;

    border: 1px solid rgba(22,73,49,.09);

    border-radius: 30px;

    background: #fffefa;

    box-shadow:
        0 18px 45px
        rgba(26,67,46,.045);
}

.create-team-field + .create-team-field,
.create-team-row,
.create-team-info,
.create-team-submit {
    margin-top: 30px;
}

.create-team-field label {
    display: block;

    margin-bottom: 10px;

    color: #244b3a;

    font-size: 12px;
    font-weight: 800;
}

.create-team-field label span {
    margin-left: 6px;

    color: #9aa49e;

    font-size: 9px;
    font-weight: 600;
}

.create-team-field input,
.create-team-field textarea {
    width: 100%;

    box-sizing: border-box;

    border:
        1px solid
        rgba(22,75,51,.12);

    outline: none;

    border-radius: 15px;

    background: #fbfcf5;

    color: #143c2e;

    font: inherit;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.create-team-field input {
    height: 55px;

    padding: 0 16px;
}

.create-team-field textarea {
    min-height: 125px;

    padding: 15px 16px;

    resize: vertical;
}

.create-team-field input:focus,
.create-team-field textarea:focus {
    border-color: rgba(105,166,57,.60);

    box-shadow:
        0 0 0 4px
        rgba(131,190,55,.08);
}

.create-team-field-hint {
    display: block;

    margin-top: 8px;

    color: #8a958f;

    font-size: 9px;
}

.create-team-row {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 16px;
}


/* SPORT SELECT */

.create-team-sports {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;
}

.create-sport-choice {
    min-height: 120px;

    padding: 15px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    border:
        1px solid
        rgba(22,73,50,.10);

    border-radius: 18px;

    background: #f7f8ef;

    color: #24493a;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition:
        border-color .2s ease,
        transform .2s ease,
        background .2s ease;
}

.create-sport-choice:hover {
    transform: translateY(-3px);
}

.create-sport-choice > span {
    width: 39px;
    height: 39px;

    margin-bottom: 12px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #e8f3d0;

    color: #155039;

    font-size: 10px;
}

.create-sport-choice small {
    display: block;

    margin-top: 5px;

    color: #89948e;

    font-size: 8px;
    font-weight: 600;
}

.create-sport-choice.active {
    border-color: rgba(103,163,53,.48);

    background:
        linear-gradient(
            145deg,
            #edf7d8,
            #f8faef
        );

    box-shadow:
        0 8px 20px
        rgba(45,90,54,.05);
}


/* TEAM TYPE */

.create-team-type-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;
}

.create-team-type {
    min-height: 100px;

    padding: 18px;

    display: flex;

    align-items: center;

    gap: 15px;

    text-align: left;

    border:
        1px solid
        rgba(22,73,50,.10);

    border-radius: 18px;

    background: #f8f9f1;

    cursor: pointer;
}

.create-team-type.active {
    border-color: rgba(101,162,54,.45);

    background: #eff7dc;
}

.create-team-type-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background: #e5f1ca;

    color: #14513a;
}

.create-team-type-icon svg {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.create-team-type strong {
    display: block;

    color: #194632;

    font-size: 12px;
}

.create-team-type span {
    display: block;

    margin-top: 4px;

    color: #7c8982;

    font-size: 9px;

    line-height: 1.4;
}


/* CHARACTER COUNT */

.create-team-character-count {
    margin-top: 7px;

    text-align: right;

    color: #929d97;

    font-size: 9px;
}


/* INFO */

.create-team-info {
    padding: 18px;

    display: flex;

    gap: 14px;

    border-radius: 17px;

    background: #f0f6df;
}

.create-team-info-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: #dff0be;

    color: #14513a;
}

.create-team-info-icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
}

.create-team-info strong {
    color: #194733;

    font-size: 11px;
}

.create-team-info p {
    margin: 5px 0 0;

    color: #718078;

    font-size: 9px;

    line-height: 1.55;
}


/* SUBMIT */

.create-team-submit {
    width: 100%;
    height: 61px;

    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 0;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #104d37,
            #176044
        );

    color: white;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 14px 30px
        rgba(16,75,51,.13);
}

.create-team-submit span {
    color: #b5ef52;

    font-size: 21px;
}


/* =====================================================
   PREVIEW
===================================================== */

.create-team-preview-wrap {
    position: sticky;

    top: 30px;
}

.create-team-preview-label {
    display: block;

    margin-bottom: 12px;

    color: #72a43e;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .16em;
}

.create-team-preview {
    overflow: hidden;

    border:
        1px solid
        rgba(22,73,50,.10);

    border-radius: 30px;

    background: #fffefa;

    box-shadow:
        0 20px 45px
        rgba(25,66,45,.07);
}

.create-team-preview-cover {
    position: relative;

    height: 270px;

    overflow: hidden;
}

.create-team-preview-cover::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5,30,21,.78),
            transparent 65%
        );
}

.create-team-preview-cover.cricket {
    background:
        linear-gradient(
            145deg,
            #17382d,
            #65724f,
            #a87a47
        );
}

.create-team-preview-cover.football {
    background:
        linear-gradient(
            145deg,
            #16382d,
            #486048,
            #90714d
        );
}

.create-team-preview-cover.basketball {
    background:
        linear-gradient(
            145deg,
            #172e2c,
            #6e4738,
            #ac6841
        );
}

.create-team-preview-cover.volleyball {
    background:
        linear-gradient(
            145deg,
            #17372e,
            #536458,
            #967759
        );
}

.create-team-preview-sport {
    position: absolute;

    z-index: 2;

    top: 20px;
    left: 20px;

    padding: 9px 13px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 999px;

    background:
        rgba(5,47,33,.67);

    color: white;

    font-size: 9px;
    font-weight: 800;
}

.create-team-preview-logo {
    position: absolute;

    z-index: 2;

    left: 25px;
    bottom: 20px;

    width: 82px;
    height: 82px;

    display: grid;
    place-items: center;

    border:
        4px solid
        rgba(255,255,255,.25);

    border-radius: 23px;

    background:
        rgba(228,246,190,.94);

    color: #164a35;

    font-size: 37px;

    font-weight: 800;

    box-shadow:
        0 10px 25px
        rgba(4,34,23,.18);
}

.create-team-preview-content {
    padding: 27px;
}

.create-team-preview-location {
    color: #819087;

    font-size: 10px;
}

.create-team-preview h2 {
    margin: 5px 0 0;

    color: #123b2d;

    font-size: 30px;

    letter-spacing: -.045em;
}

.create-team-preview-tags {
    margin-top: 16px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.create-team-preview-tags span {
    padding: 8px 11px;

    border-radius: 999px;

    background: #edf5dd;

    color: #527541;

    font-size: 9px;

    font-weight: 800;
}

.create-team-preview-captain {
    margin-top: 25px;

    padding-top: 20px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-top:
        1px solid
        rgba(22,72,50,.08);
}

.create-team-captain-avatar {
    width: 50px;
    height: 50px;

    overflow: hidden;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #e6f1ce;

    color: #164f38;

    font-size: 18px;
    font-weight: 800;
}

.create-team-captain-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.create-team-preview-captain span {
    display: block;

    color: #79a250;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .15em;
}

.create-team-preview-captain strong {
    display: block;

    margin-top: 3px;

    color: #173f30;

    font-size: 12px;
}

.create-team-preview-message {
    margin-top: 22px;

    padding: 15px;

    border-radius: 14px;

    background: #f4f6ec;

    color: #738078;

    font-size: 9px;

    line-height: 1.55;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .create-team-layout {
        grid-template-columns:
            1fr;
    }

    .create-team-preview-wrap {
        position: static;
    }

}


@media (max-width: 700px) {

    .create-team-nav-inner,
    .create-team-main {
        width:
            calc(100% - 32px);
    }

    .create-team-nav-step {
        display: none;
    }

    .create-team-nav-inner {
        grid-template-columns:
            1fr auto;
    }

    .create-team-sports {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .create-team-row,
    .create-team-type-grid {
        grid-template-columns:
            1fr;
    }

    .create-team-form {
        padding: 24px;
    }

}

/* =====================================================
   TEAM PAGE / TEAM HQ
===================================================== */

.team-page {
    margin: 0;
    background: #f8f7ef;
    color: #123b2d;
}


/* =====================================================
   NAVBAR
===================================================== */

.team-page-nav {
    background: rgba(250,249,242,.97);
    border-bottom: 1px solid rgba(21,70,49,.08);
}

.team-page-nav-inner {
    width: min(1600px, calc(100% - 70px));
    height: 100px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team-page-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    text-decoration: none;
    color: #123b2d;
}

.team-page-brand-mark {
    width: 54px;
    height: 54px;

    overflow: hidden;

    border-radius: 16px;
}

.team-page-brand-mark img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.team-page-brand strong {
    display: block;

    font-size: 19px;
    font-weight: 800;
}

.team-page-brand span {
    display: block;

    margin-top: 3px;

    color: #7c8982;

    font-size: 11px;
}

.team-page-nav-links {
    display: flex;
    align-items: center;

    gap: 38px;
}

.team-page-nav-links a {
    color: #68766f;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
}

.team-page-nav-links a.active {
    color: #155239;
}

.team-page-back {
    height: 47px;

    padding: 0 18px;

    border:
        1px solid
        rgba(23,83,58,.12);

    border-radius: 14px;

    background: white;

    color: #164b36;

    font-weight: 800;

    cursor: pointer;
}


/* =====================================================
   MAIN
===================================================== */

.team-page-main {
    width:
        min(
            1600px,
            calc(100% - 70px)
        );

    margin: auto;

    padding:
        55px 0 110px;
}


/* =====================================================
   HERO
===================================================== */

.team-page-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(300px, .5fr);

    gap: 18px;
}


/* COVER */

.team-page-cover {
    position: relative;

    min-height: 410px;

    padding: 34px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    border-radius: 31px;
}

.team-page-cover::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(6,32,23,.90),
            rgba(6,32,23,.15) 65%,
            rgba(6,32,23,.08)
        );
}

.team-page-cover::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -180px;
    right: -100px;

    border-radius: 50%;

    background:
        rgba(245,174,85,.19);

    filter: blur(2px);
}

.team-page-cover.cricket {
    background:
        linear-gradient(
            145deg,
            #17392e,
            #5d724f,
            #a77947
        );
}

.team-page-cover.football {
    background:
        linear-gradient(
            145deg,
            #14372d,
            #445d48,
            #98764e
        );
}

.team-page-cover.basketball {
    background:
        linear-gradient(
            145deg,
            #182f2c,
            #69473a,
            #ad6942
        );
}

.team-page-cover.volleyball {
    background:
        linear-gradient(
            145deg,
            #16382f,
            #506357,
            #967759
        );
}


.team-page-cover-top,
.team-page-cover-bottom {
    position: relative;

    z-index: 2;
}


.team-page-cover-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.team-page-sport-pill,
.team-page-status-pill {
    padding: 9px 13px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 999px;

    background:
        rgba(8,48,35,.66);

    backdrop-filter:
        blur(8px);

    color: white;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .07em;
}

.team-page-status-pill {
    color: #c9f58f;
}


.team-page-cover-bottom {
    display: flex;

    align-items: flex-end;

    gap: 24px;
}


.team-page-logo {
    width: 108px;
    height: 108px;

    flex: 0 0 108px;

    display: grid;
    place-items: center;

    border:
        5px solid
        rgba(255,255,255,.20);

    border-radius: 30px;

    background:
        #e5f6bd;

    color: #164b35;

    font-size: 48px;
    font-weight: 800;

    box-shadow:
        0 12px 35px
        rgba(4,30,21,.20);
}


.team-page-title > span {
    color:
        rgba(255,255,255,.69);

    font-size: 11px;
}


.team-page-title h1 {
    margin: 4px 0 0;

    color: white;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            44px,
            5vw,
            76px
        );

    line-height: .98;

    letter-spacing: -.055em;
}


.team-page-title-meta {
    margin-top: 14px;

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(255,255,255,.74);

    font-size: 11px;

    font-weight: 700;
}


.team-page-title-meta i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #b4ec56;
}


/* =====================================================
   ACTION PANEL
===================================================== */

.team-page-actions-panel {
    min-height: 410px;

    padding: 31px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        rgba(22,72,49,.10);

    border-radius: 31px;

    background: #fffefa;
}


.team-page-role-label {
    color: #71a33e;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .16em;
}


.team-page-role {
    margin-top: 7px;

    color: #123d2e;

    font-size: 28px;

    letter-spacing: -.04em;
}


.team-page-actions-panel > p {
    margin:
        12px 0 0;

    color: #718079;

    font-size: 11px;

    line-height: 1.6;
}


.team-page-primary-action {
    width: 100%;
    height: 57px;

    margin-top: auto;

    padding: 0 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    border: 0;

    border-radius: 16px;

    background: #155039;

    color: white;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}


.team-page-primary-action > span {
    color: #b8ef59;

    font-size: 21px;
}


.team-page-secondary-action {
    width: 100%;
    height: 49px;

    margin-top: 9px;

    padding: 0 16px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border:
        1px solid
        rgba(22,74,51,.10);

    border-radius: 14px;

    background: #f7f8f0;

    color: #174b36;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}


.team-page-secondary-action span {
    font-size: 16px;
}


/* =====================================================
   TABS
===================================================== */

.team-page-tabs {
    margin-top: 38px;

    padding-bottom: 10px;

    display: flex;

    align-items: center;

    gap: 8px;

    overflow-x: auto;

    border-bottom:
        1px solid
        rgba(24,73,50,.09);
}


.team-page-tab {
    min-height: 45px;

    padding: 0 16px;

    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    border: 0;

    border-radius: 13px;

    background: transparent;

    color: #738078;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}


.team-page-tab span {
    min-width: 21px;
    height: 21px;

    padding: 0 5px;

    display: grid;
    place-items: center;

    border-radius: 999px;

    background: #edf0e7;

    font-size: 8px;
}


.team-page-tab.active {
    background: #e9f4d2;

    color: #155039;
}


/* =====================================================
   PANELS
===================================================== */

.team-page-panel {
    display: none;

    padding-top: 42px;
}


.team-page-panel.active {
    display: block;
}


/* =====================================================
   OVERVIEW
===================================================== */

.team-overview-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(290px, .7fr);

    gap: 19px;
}


.team-overview-main,
.team-overview-card {
    border:
        1px solid
        rgba(22,73,49,.09);

    border-radius: 25px;

    background: #fffefa;
}


.team-overview-main {
    padding: 30px;
}


.team-page-section-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}


.team-page-section-heading > div > span {
    color: #71a43d;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .16em;
}


.team-page-section-heading h2 {
    margin: 5px 0 0;

    color: #123d2e;

    font-size: 28px;

    letter-spacing: -.04em;
}


.team-page-section-heading > button {
    border: 0;

    background: transparent;

    color: #427058;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}


.team-overview-roster {
    margin-top: 25px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 9px;
}


.team-overview-player {
    padding: 13px;

    display: flex;

    align-items: center;

    gap: 11px;

    border-radius: 16px;

    background: #f5f7ee;
}


.team-overview-player-avatar {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    overflow: hidden;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #e3f0c8;

    color: #164e37;

    font-size: 15px;
    font-weight: 800;
}


.team-overview-player-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.team-overview-player strong {
    display: block;

    color: #1b4734;

    font-size: 11px;
}


.team-overview-player span {
    display: block;

    margin-top: 3px;

    color: #849088;

    font-size: 8px;
}


.team-overview-add-player {
    width: 100%;
    height: 49px;

    margin-top: 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    border:
        1px dashed
        rgba(32,89,60,.20);

    border-radius: 15px;

    background: #fafbf6;

    color: #3d7056;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}


.team-overview-add-player span {
    font-size: 18px;
}


/* SIDE */

.team-overview-side {
    display: grid;

    gap: 18px;
}


.team-overview-card {
    padding: 26px;
}


.team-overview-card-label {
    color: #72a43e;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .15em;
}


/* NEXT MATCH */

.team-next-match-empty {
    min-height: 205px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
    justify-content: center;
}


.team-next-match-icon {
    width: 49px;
    height: 49px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background: #eaf5d3;

    color: #17513a;
}


.team-next-match-icon svg {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.team-next-match-empty strong {
    margin-top: 17px;

    color: #194633;

    font-size: 15px;
}


.team-next-match-empty p {
    max-width: 280px;

    margin: 6px 0 0;

    color: #7a8780;

    font-size: 9px;

    line-height: 1.5;
}


.team-next-match-empty button,
.team-next-match-live button {
    margin-top: 15px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #19543b;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}


.team-next-match-live {
    display: none;

    padding-top: 22px;
}


.team-next-match-live > span {
    color: #7ca25c;

    font-size: 8px;
    font-weight: 800;
}


.team-next-match-live h3 {
    margin: 8px 0 0;

    color: #163f30;

    font-size: 22px;
}


.team-next-match-live p {
    color: #77847d;

    font-size: 10px;
}


/* TEAM DETAILS */

.team-overview-detail {
    padding: 13px 0;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    border-bottom:
        1px solid
        rgba(22,72,49,.07);
}


.team-overview-detail:last-child {
    border-bottom: 0;
}


.team-overview-detail span {
    color: #849087;

    font-size: 9px;
}


.team-overview-detail strong {
    color: #204936;

    font-size: 10px;
}


/* =====================================================
   ROSTER
===================================================== */

.team-roster-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
}


.team-roster-header > div > span {
    color: #71a33e;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .16em;
}


.team-roster-header h2 {
    margin: 5px 0 0;

    color: #123c2d;

    font-size: 32px;

    letter-spacing: -.045em;
}


.team-roster-header p {
    margin: 5px 0 0;

    color: #7c8882;

    font-size: 10px;
}


.team-roster-header > button {
    height: 49px;

    padding: 0 18px;

    border: 0;

    border-radius: 14px;

    background: #155039;

    color: white;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}


.team-roster-grid {
    margin-top: 25px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 12px;
}


.team-roster-player {
    padding: 19px;

    display: flex;

    align-items: center;

    gap: 13px;

    border:
        1px solid
        rgba(22,73,49,.09);

    border-radius: 20px;

    background: #fffefa;
}


.team-roster-player-avatar {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    overflow: hidden;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background: #e5f2ca;

    color: #164f38;

    font-size: 19px;

    font-weight: 800;
}


.team-roster-player-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.team-roster-player-main {
    min-width: 0;

    flex: 1;
}


.team-roster-player-main > span {
    color: #74a246;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .13em;
}


.team-roster-player-main h3 {
    margin: 4px 0 0;

    overflow: hidden;

    color: #174431;

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.team-roster-player-main p {
    margin: 3px 0 0;

    color: #87928c;

    font-size: 8px;
}


.team-roster-message {
    height: 37px;

    padding: 0 11px;

    border:
        1px solid
        rgba(21,78,54,.11);

    border-radius: 11px;

    background: #f5f7ef;

    color: #174e38;

    font-size: 8px;

    font-weight: 800;

    cursor: pointer;
}


/* =====================================================
   GENERIC EMPTY PANEL
===================================================== */

.team-empty-panel {
    min-height: 430px;

    padding: 55px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    border:
        1px dashed
        rgba(30,83,57,.16);

    border-radius: 27px;

    background:
        rgba(255,255,251,.72);
}


.team-empty-panel-icon {
    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    border-radius: 22px;

    background: #e9f5ce;

    color: #15513a;
}


.team-empty-panel-icon svg {
    width: 35px;
    height: 35px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.team-empty-panel > span {
    margin-top: 22px;

    color: #72a53f;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .17em;
}


.team-empty-panel h2 {
    margin: 7px 0 0;

    color: #123d2e;

    font-size: 30px;

    letter-spacing: -.04em;
}


.team-empty-panel p {
    max-width: 440px;

    margin: 9px 0 0;

    color: #748179;

    font-size: 11px;

    line-height: 1.6;
}


.team-empty-panel button {
    height: 47px;

    margin-top: 20px;

    padding: 0 18px;

    border: 0;

    border-radius: 13px;

    background: #155039;

    color: white;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}


/* =====================================================
   ABOUT
===================================================== */

.team-about-layout {
    display: grid;

    grid-template-columns:
        1.4fr .6fr;

    gap: 18px;
}


.team-about-card {
    min-height: 200px;

    padding: 30px;

    border:
        1px solid
        rgba(22,73,49,.09);

    border-radius: 24px;

    background: #fffefa;
}


.team-about-card > span {
    display: block;

    color: #72a53f;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .16em;
}


.team-about-card h2 {
    margin: 8px 0 0;

    color: #153f30;

    font-size: 28px;

    letter-spacing: -.04em;
}


.team-about-card p {
    max-width: 700px;

    color: #748179;

    font-size: 11px;

    line-height: 1.7;
}


.team-about-card > strong {
    display: block;

    margin-top: 7px;

    color: #194633;

    font-size: 15px;
}


.team-about-second-label {
    margin-top: 31px;
}


/* =====================================================
   NOT FOUND
===================================================== */

.team-page-not-found {
    min-height:
        calc(100vh - 100px);

    display: none;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 30px;

    text-align: center;
}


.team-page-not-found-icon {
    width: 78px;
    height: 78px;

    display: grid;
    place-items: center;

    border-radius: 24px;

    background: #e9f5ce;

    color: #155039;
}


.team-page-not-found-icon svg {
    width: 38px;
    height: 38px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;
}


.team-page-not-found > span {
    margin-top: 23px;

    color: #74a443;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .16em;
}


.team-page-not-found h1 {
    margin: 8px 0 0;

    color: #143e2f;

    font-size: 34px;
}


.team-page-not-found p {
    color: #78857e;

    font-size: 11px;
}


.team-page-not-found button {
    height: 48px;

    margin-top: 15px;

    padding: 0 18px;

    border: 0;

    border-radius: 13px;

    background: #155039;

    color: white;

    font-weight: 800;

    cursor: pointer;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1050px) {

    .team-page-hero,
    .team-overview-grid {
        grid-template-columns:
            1fr;
    }


    .team-page-actions-panel {
        min-height: auto;
    }


    .team-page-primary-action {
        margin-top: 25px;
    }


    .team-roster-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media (max-width: 800px) {

    .team-page-nav-links {
        display: none;
    }


    .team-about-layout {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 650px) {

    .team-page-nav-inner,
    .team-page-main {
        width:
            calc(100% - 32px);
    }


    .team-page-cover {
        min-height: 350px;

        padding: 23px;
    }


    .team-page-cover-bottom {
        align-items: flex-start;
        flex-direction: column;
    }


    .team-page-logo {
        width: 80px;
        height: 80px;

        flex-basis: 80px;

        border-radius: 23px;

        font-size: 34px;
    }


    .team-overview-roster,
    .team-roster-grid {
        grid-template-columns:
            1fr;
    }


    .team-roster-header {
        align-items: stretch;
        flex-direction: column;
    }

}

/* =====================================================
   CREATE TEAM — ROLE SELECTION
===================================================== */

.create-team-leadership {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}


.create-leadership-choice {
    min-height: 85px;

    padding: 16px;

    text-align: left;

    border:
        1px solid
        rgba(22,73,50,.10);

    border-radius: 17px;

    background: #f7f8ef;

    cursor: pointer;

    transition:
        .2s ease;
}


.create-leadership-choice:hover {
    transform:
        translateY(-2px);
}


.create-leadership-choice.active {
    border-color:
        rgba(103,163,53,.48);

    background:
        #edf7d8;
}


.create-leadership-choice strong {
    display: block;

    color: #174732;

    font-size: 12px;
}


.create-leadership-choice span {
    display: block;

    margin-top: 5px;

    color: #7c8982;

    font-size: 9px;
}


/* PLAYING ROLE */

.create-playing-role-heading {
    margin-top: 22px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.create-playing-role-heading strong {
    color: #244b3a;

    font-size: 11px;
}


.create-playing-role-heading span {
    color: #8d9891;

    font-size: 8px;
}


.create-playing-roles {
    margin-top: 11px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.create-playing-role {
    min-height: 39px;

    padding: 0 14px;

    border:
        1px solid
        rgba(22,73,50,.11);

    border-radius: 999px;

    background: #f7f8f0;

    color: #51675d;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


.create-playing-role.active {
    border-color:
        rgba(92,153,48,.40);

    background: #dff0bd;

    color: #174d36;
}


@media (max-width: 700px) {

    .create-team-leadership {
        grid-template-columns:
            1fr;
    }

}

/* =====================================================
   TEAM ROLE SYSTEM
===================================================== */

.team-page-role-badges {
    margin-top: 10px;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.team-role-badge {
    padding: 6px 9px;

    border-radius: 999px;

    background: #e6f2ce;

    color: #17513a;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .10em;
}


.team-role-badge.admin {
    background: #174f38;

    color: #c6f27e;
}


.team-role-badge.leadership {
    background: #eef5df;

    color: #53763f;
}


.team-page-playing-roles {
    margin-top: 7px;

    color: #718078;

    font-size: 9px;

    line-height: 1.5;
}


.team-page-change-role {
    width: fit-content;

    margin-top: 15px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #55833d;

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}


/* MINI BADGES */

.mini-role-badges,
.roster-role-badges {
    margin-top: 4px;

    display: flex;
    flex-wrap: wrap;

    gap: 4px;
}


.mini-role-badge,
.roster-role-badge {
    padding: 4px 6px;

    border-radius: 999px;

    background: #e9f2d8;

    color: #547340;

    font-size: 6px;

    font-weight: 900;

    letter-spacing: .07em;
}


.mini-role-badge.admin,
.roster-role-badge.admin {
    background: #174f38;

    color: #c7f082;
}


.team-overview-player-info > span {
    display: block;

    margin-top: 5px;

    color: #849088;

    font-size: 8px;
}


/* ROSTER ACTIONS */

.team-roster-player-actions {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.team-roster-manage {
    height: 37px;

    padding: 0 11px;

    border: 0;

    border-radius: 11px;

    background: #164f38;

    color: white;

    font-size: 8px;

    font-weight: 800;

    cursor: pointer;
}


/* =====================================================
   ROLE MODAL
===================================================== */

.team-role-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 25px;
}


.team-role-modal.open {
    display: flex;
}


.team-role-modal-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(8,29,22,.58);

    backdrop-filter: blur(6px);
}


.team-role-modal-card {
    position: relative;

    z-index: 2;

    width: min(620px, 100%);

    max-height: calc(100vh - 50px);

    overflow-y: auto;

    padding: 30px;

    box-sizing: border-box;

    border-radius: 27px;

    background: #fffefa;

    box-shadow:
        0 30px 80px
        rgba(8,33,23,.25);
}


.team-role-modal-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;
}


.team-role-modal-header span {
    color: #71a43d;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .16em;
}


.team-role-modal-header h2 {
    margin: 5px 0 0;

    color: #123d2e;

    font-size: 28px;

    letter-spacing: -.04em;
}


.team-role-modal-close {
    width: 40px;
    height: 40px;

    border: 0;

    border-radius: 12px;

    background: #f0f2e9;

    color: #395a4a;

    font-size: 23px;

    cursor: pointer;
}


/* ADMIN NOTE */

.team-role-admin-note {
    margin-top: 21px;

    padding: 13px 15px;

    display: none;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-radius: 14px;

    background: #174f38;

    color: white;
}


.team-role-admin-note strong {
    color: #c7f082;

    font-size: 9px;

    letter-spacing: .12em;
}


.team-role-admin-note span {
    color: rgba(255,255,255,.70);

    font-size: 9px;
}


/* MODAL SECTION */

.team-role-modal-section {
    margin-top: 27px;
}


.team-role-modal-section-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.team-role-modal-section-heading strong {
    color: #244b3a;

    font-size: 11px;
}


.team-role-modal-section-heading span {
    color: #8b9790;

    font-size: 8px;
}


/* LEADERSHIP */

.team-role-leadership-grid {
    margin-top: 11px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;
}


.team-role-leadership {
    min-height: 83px;

    padding: 14px;

    text-align: left;

    border:
        1px solid
        rgba(22,73,50,.10);

    border-radius: 15px;

    background: #f6f8ef;

    cursor: pointer;
}


.team-role-leadership strong {
    display: block;

    color: #174733;

    font-size: 10px;
}


.team-role-leadership span {
    display: block;

    margin-top: 4px;

    color: #849087;

    font-size: 8px;
}


.team-role-leadership.active {
    border-color:
        rgba(103,163,53,.50);

    background: #e8f4cf;
}


.team-role-leadership:disabled {
    cursor: not-allowed;

    opacity: .46;
}


.team-role-leadership.active:disabled {
    opacity: .75;
}


/* PLAYING ROLES */

.team-role-playing-grid {
    margin-top: 11px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.team-role-playing-option {
    min-height: 39px;

    padding: 0 14px;

    border:
        1px solid
        rgba(22,73,50,.11);

    border-radius: 999px;

    background: #f7f8f0;

    color: #54695f;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


.team-role-playing-option.active {
    border-color:
        rgba(97,156,51,.43);

    background: #dff0bd;

    color: #174d36;
}


/* SAVE */

.team-role-save {
    width: 100%;
    height: 54px;

    margin-top: 30px;

    padding: 0 17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    border-radius: 15px;

    background: #155039;

    color: white;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;
}


.team-role-save span {
    color: #b6ee55;

    font-size: 18px;
}


@media (max-width: 600px) {

    .team-role-leadership-grid {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   TEAM PLAYER DISCOVERY
===================================================== */

.team-player-page {
    margin: 0;
    background: #f8f7ef;
    color: #123b2d;
}


/* NAVBAR */

.team-player-nav {
    background: rgba(250,249,242,.97);
    border-bottom: 1px solid rgba(21,70,49,.08);
}

.team-player-nav-inner {
    width: min(1600px, calc(100% - 70px));
    height: 100px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team-player-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    text-decoration: none;
    color: #123b2d;
}

.team-player-brand-mark {
    width: 54px;
    height: 54px;

    overflow: hidden;

    border-radius: 16px;
}

.team-player-brand-mark img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.team-player-brand strong {
    display: block;

    font-size: 19px;
    font-weight: 800;
}

.team-player-brand span {
    display: block;

    margin-top: 3px;

    color: #7a8780;

    font-size: 11px;
}

.team-player-nav-links {
    display: flex;
    align-items: center;

    gap: 38px;
}

.team-player-nav-links a {
    color: #68766f;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
}

.team-player-nav-links a.active {
    color: #155239;
}

.team-player-back {
    height: 47px;

    padding: 0 18px;

    border:
        1px solid
        rgba(23,83,58,.12);

    border-radius: 14px;

    background: white;

    color: #164b36;

    font-weight: 800;

    cursor: pointer;
}


/* MAIN */

.team-player-main {
    width: min(1600px, calc(100% - 70px));

    margin: auto;

    padding: 64px 0 110px;
}


/* HERO */

.team-player-hero {
    min-height: 310px;

    padding: 49px 55px;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 50px;

    border-radius: 31px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(172,235,81,.22),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #103d2c,
            #174f38
        );

    color: white;
}

.team-player-eyebrow {
    color: #a9e95d;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .18em;
}

.team-player-hero h1 {
    margin: 12px 0 0;

    font-size: clamp(50px, 5vw, 77px);

    line-height: .95;

    letter-spacing: -.055em;
}

.team-player-hero h1 span {
    color: #b0ef4f;
}

.team-player-hero > div:first-child > p {
    max-width: 640px;

    margin-top: 20px;

    color: rgba(255,255,255,.68);

    font-size: 14px;

    line-height: 1.65;
}

.team-player-context-card {
    min-width: 245px;

    padding: 26px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 22px;

    background: rgba(255,255,255,.07);

    backdrop-filter: blur(8px);
}

.team-player-context-card > span {
    color: #a9e75e;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .15em;
}

.team-player-context-card strong {
    display: block;

    margin-top: 8px;

    font-size: 25px;
}

.team-player-context-card p {
    margin: 6px 0 0;

    color: rgba(255,255,255,.64);

    font-size: 9px;

    line-height: 1.5;
}


/* CONTROLS */

.team-player-controls {
    margin-top: 40px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;
}

.team-player-sports {
    display: flex;

    gap: 7px;

    padding: 5px;

    border-radius: 15px;

    background: #eaede2;
}

.team-player-sport {
    min-height: 43px;

    padding: 0 15px;

    border: 0;

    border-radius: 11px;

    background: transparent;

    color: #718078;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}

.team-player-sport.active {
    background: white;

    color: #165039;

    box-shadow:
        0 5px 15px
        rgba(25,67,46,.06);
}

.team-player-search {
    width: 300px;
    height: 49px;

    padding: 0 15px;

    display: flex;

    align-items: center;

    gap: 10px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(22,73,50,.10);

    border-radius: 14px;

    background: white;
}

.team-player-search svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: #6d8177;

    stroke-width: 1.8;
}

.team-player-search input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    font: inherit;

    font-size: 10px;

    color: #173f30;
}


/* FILTER */

.team-player-filter-row {
    margin-top: 15px;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.team-player-filter {
    height: 36px;

    padding: 0 13px;

    border:
        1px solid
        rgba(23,75,52,.09);

    border-radius: 999px;

    background: #fffefa;

    color: #718078;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}

.team-player-filter.active {
    background: #e5f2cb;

    color: #165039;

    border-color:
        rgba(92,151,50,.20);
}


/* RESULT HEADING */

.team-player-results-heading {
    margin-top: 48px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
}

.team-player-results-heading span {
    color: #71a43e;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .16em;
}

.team-player-results-heading h2 {
    max-width: 520px;

    margin: 6px 0 0;

    color: #123d2e;

    font-size: 31px;

    line-height: 1.08;

    letter-spacing: -.04em;
}

.team-player-results-heading > p {
    color: #78857e;

    font-size: 10px;

    font-weight: 700;
}


/* GRID */

.team-player-grid {
    margin-top: 24px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 15px;
}


/* PLAYER CARD */

.team-player-card {
    padding: 22px;

    border:
        1px solid
        rgba(22,73,49,.09);

    border-radius: 23px;

    background: #fffefa;

    box-shadow:
        0 10px 25px
        rgba(24,65,44,.035);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.team-player-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 20px 38px
        rgba(24,65,44,.08);
}


/* TOP */

.team-player-card-top {
    display: flex;

    align-items: flex-start;

    gap: 13px;
}

.team-player-avatar {
    width: 61px;
    height: 61px;

    flex: 0 0 61px;

    border-radius: 18px;

    object-fit: cover;

    background: #e9f3d2;
}

.team-player-card-identity {
    min-width: 0;

    flex: 1;
}

.team-player-card-identity > span {
    color: #75a445;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .13em;
}

.team-player-card-identity h3 {
    margin: 4px 0 0;

    color: #174330;

    font-size: 18px;

    letter-spacing: -.03em;
}

.team-player-role-tags {
    margin-top: 7px;

    display: flex;

    flex-wrap: wrap;

    gap: 4px;
}

.team-player-role-tags span {
    padding: 5px 7px;

    border-radius: 999px;

    background: #ecf4dc;

    color: #557440;

    font-size: 7px;

    font-weight: 800;
}

.team-player-level {
    padding: 6px 8px;

    border-radius: 999px;

    background: #f0f2e9;

    color: #687a70;

    font-size: 7px;

    font-weight: 800;
}


/* STATS */

.team-player-card-stats {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 6px;
}

.team-player-card-stats div {
    padding: 10px;

    border-radius: 12px;

    background: #f5f7ef;
}

.team-player-card-stats span {
    display: block;

    color: #8a958f;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: .08em;
}

.team-player-card-stats strong {
    display: block;

    margin-top: 4px;

    color: #345545;

    font-size: 9px;
}


/* BIO */

.team-player-bio {
    min-height: 48px;

    margin: 17px 0 0;

    color: #738078;

    font-size: 9px;

    line-height: 1.55;
}


/* ACTIONS */

.team-player-card-actions {
    margin-top: 18px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 7px;
}

.team-player-card-actions button {
    min-height: 41px;

    border-radius: 12px;

    font-size: 8px;

    font-weight: 800;

    cursor: pointer;
}

.team-player-message {
    border:
        1px solid
        rgba(23,78,54,.11);

    background: #f5f7ef;

    color: #185139;
}

.team-player-friend {
    border:
        1px solid
        rgba(23,78,54,.11);

    background: white;

    color: #185139;
}

.team-player-friend.added {
    background: #e8f4cf;

    color: #4d7538;
}

.team-player-add-team {
    grid-column: 1 / -1;

    border: 0;

    background: #155039;

    color: white;
}


/* EMPTY */

.team-player-empty {
    min-height: 280px;

    margin-top: 24px;

    display: none;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border:
        1px dashed
        rgba(23,75,51,.16);

    border-radius: 22px;

    background: #fffefa;
}

.team-player-empty strong {
    color: #174331;

    font-size: 17px;
}

.team-player-empty p {
    color: #7b8881;

    font-size: 10px;
}


/* =====================================================
   ADD TO TEAM MODAL
===================================================== */

.team-add-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 25px;
}

.team-add-modal.open {
    display: flex;
}

.team-add-modal-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(7,29,21,.58);

    backdrop-filter: blur(5px);
}

.team-add-modal-card {
    position: relative;

    z-index: 2;

    width: min(520px, 100%);

    max-height:
        calc(100vh - 50px);

    overflow-y: auto;

    padding: 28px;

    box-sizing: border-box;

    border-radius: 25px;

    background: #fffefa;

    box-shadow:
        0 30px 80px
        rgba(7,31,22,.25);
}

.team-add-modal-header {
    display: flex;

    justify-content: space-between;

    gap: 25px;
}

.team-add-modal-header span {
    color: #72a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .16em;
}

.team-add-modal-header h2 {
    margin: 5px 0 0;

    color: #143f2f;

    font-size: 27px;
}

.team-add-modal-header p {
    margin: 6px 0 0;

    color: #7c8882;

    font-size: 9px;

    line-height: 1.5;
}

.team-add-modal-header > button {
    width: 39px;
    height: 39px;

    border: 0;

    border-radius: 11px;

    background: #f0f2e9;

    color: #456052;

    font-size: 22px;

    cursor: pointer;
}


/* TEAM CHOICES */

.team-add-team-list {
    margin-top: 24px;

    display: grid;

    gap: 8px;
}

.team-add-team-choice {
    min-height: 67px;

    padding: 13px 14px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    text-align: left;

    border:
        1px solid
        rgba(22,73,50,.10);

    border-radius: 15px;

    background: #f7f8f0;

    cursor: pointer;
}

.team-add-team-choice strong {
    display: block;

    color: #174633;

    font-size: 11px;
}

.team-add-team-choice span {
    display: block;

    margin-top: 4px;

    color: #849088;

    font-size: 8px;
}

.team-add-team-choice i {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #e7ecdf;

    color: transparent;

    font-size: 10px;

    font-style: normal;
}

.team-add-team-choice.active {
    border-color:
        rgba(103,162,53,.42);

    background: #edf6da;
}

.team-add-team-choice.active i {
    background: #155039;

    color: #b9ef5d;
}


/* NO TEAM */

.team-add-no-teams {
    display: none;

    margin-top: 24px;

    padding: 24px;

    text-align: center;

    border-radius: 17px;

    background: #f4f6ec;
}

.team-add-no-teams strong {
    color: #174532;

    font-size: 12px;
}

.team-add-no-teams p {
    color: #7c8881;

    font-size: 9px;
}

.team-add-no-teams button {
    height: 42px;

    margin-top: 11px;

    padding: 0 14px;

    border: 0;

    border-radius: 12px;

    background: #155039;

    color: white;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


/* SEND */

.team-send-invite-btn {
    width: 100%;
    height: 53px;

    margin-top: 22px;

    padding: 0 17px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 0;

    border-radius: 15px;

    background: #155039;

    color: white;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}

.team-send-invite-btn span {
    color: #b9ef59;

    font-size: 18px;
}


/* TOAST */

.team-player-toast {
    position: fixed;

    z-index: 10000;

    right: 27px;
    bottom: 27px;

    min-width: 260px;

    padding: 16px 18px;

    box-sizing: border-box;

    border-radius: 15px;

    background: #143f2e;

    color: white;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(15px);

    transition:
        .25s ease;

    box-shadow:
        0 15px 40px
        rgba(10,39,28,.22);
}

.team-player-toast.show {
    opacity: 1;

    transform:
        translateY(0);
}

.team-player-toast strong {
    display: block;

    color: #bef36c;

    font-size: 10px;
}

.team-player-toast span {
    display: block;

    margin-top: 4px;

    color: rgba(255,255,255,.72);

    font-size: 8px;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .team-player-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media (max-width: 850px) {

    .team-player-nav-links {
        display: none;
    }


    .team-player-hero {
        align-items: flex-start;

        flex-direction: column;
    }


    .team-player-controls {
        align-items: stretch;

        flex-direction: column;
    }


    .team-player-search {
        width: 100%;
    }

}


@media (max-width: 620px) {

    .team-player-nav-inner,
    .team-player-main {
        width:
            calc(100% - 32px);
    }


    .team-player-sports {
        overflow-x: auto;
    }


    .team-player-grid {
        grid-template-columns:
            1fr;
    }


    .team-player-card-actions {
        grid-template-columns:
            1fr;
    }


    .team-player-add-team {
        grid-column: auto;
    }

}

/* =====================================================
   TEAM INVITATIONS
===================================================== */

.team-invites-page {
    margin: 0;
    background: #f8f7ef;
    color: #123b2d;
}


/* NAV */

.team-invites-nav {
    background: rgba(250,249,242,.97);

    border-bottom:
        1px solid
        rgba(21,70,49,.08);
}


.team-invites-nav-inner {
    width:
        min(
            1600px,
            calc(100% - 70px)
        );

    height: 100px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.team-invites-brand {
    display: flex;

    align-items: center;

    gap: 13px;

    color: #123b2d;

    text-decoration: none;
}


.team-invites-brand-mark {
    width: 54px;
    height: 54px;

    overflow: hidden;

    border-radius: 16px;
}


.team-invites-brand-mark img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.team-invites-brand strong {
    display: block;

    font-size: 19px;

    font-weight: 800;
}


.team-invites-brand span {
    display: block;

    margin-top: 3px;

    color: #7c8881;

    font-size: 11px;
}


.team-invites-nav-links {
    display: flex;

    gap: 38px;
}


.team-invites-nav-links a {
    color: #68766f;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;
}


.team-invites-nav-links a.active {
    color: #155239;
}


.team-invites-back {
    height: 47px;

    padding: 0 18px;

    border:
        1px solid
        rgba(23,83,58,.12);

    border-radius: 14px;

    background: white;

    color: #164b36;

    font-weight: 800;

    cursor: pointer;
}


/* MAIN */

.team-invites-main {
    width:
        min(
            1500px,
            calc(100% - 70px)
        );

    margin: auto;

    padding: 65px 0 110px;
}


/* HEADING */

.team-invites-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;
}


.team-invites-heading > div > span {
    color: #71a43e;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .17em;
}


.team-invites-heading h1 {
    margin: 9px 0 0;

    color: #123c2d;

    font-size:
        clamp(
            58px,
            6vw,
            90px
        );

    line-height: .96;

    letter-spacing: -.06em;
}


.team-invites-heading h1 strong {
    color: #80bd2e;
}


.team-invites-heading p {
    max-width: 590px;

    margin-top: 19px;

    color: #6f7d75;

    font-size: 14px;

    line-height: 1.65;
}


.team-invites-find-player {
    height: 54px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    gap: 18px;

    border: 0;

    border-radius: 16px;

    background: #155039;

    color: white;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;
}


.team-invites-find-player span {
    color: #baef5c;

    font-size: 18px;
}


/* SUMMARY */

.team-invites-summary {
    margin-top: 52px;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    overflow: hidden;

    border:
        1px solid
        rgba(23,73,50,.09);

    border-radius: 24px;

    background: #fffefa;
}


.team-invites-summary > div {
    padding: 25px 28px;
}


.team-invites-summary > div + div {
    border-left:
        1px solid
        rgba(23,73,50,.08);
}


.team-invites-summary span {
    color: #72a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .14em;
}


.team-invites-summary strong {
    display: block;

    margin-top: 6px;

    color: #143f2f;

    font-size: 27px;
}


.team-invites-summary p {
    margin: 3px 0 0;

    color: #839087;

    font-size: 9px;
}


/* TABS */

.team-invites-tabs {
    margin-top: 45px;

    display: flex;

    gap: 7px;

    padding: 5px;

    width: fit-content;

    border-radius: 15px;

    background: #eaede3;
}


.team-invite-tab {
    min-height: 44px;

    padding: 0 16px;

    display: flex;

    align-items: center;

    gap: 8px;

    border: 0;

    border-radius: 11px;

    background: transparent;

    color: #6d7c74;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}


.team-invite-tab span {
    min-width: 21px;
    height: 21px;

    padding: 0 5px;

    display: grid;

    place-items: center;

    border-radius: 999px;

    background:
        rgba(20,73,50,.07);

    font-size: 8px;
}


.team-invite-tab.active {
    background: white;

    color: #155039;

    box-shadow:
        0 5px 14px
        rgba(22,65,45,.06);
}


/* LIST */

.team-invites-list {
    margin-top: 24px;

    display: grid;

    gap: 11px;
}


/* CARD */

.team-invite-card {
    padding: 20px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border:
        1px solid
        rgba(23,73,50,.09);

    border-radius: 20px;

    background: #fffefa;
}


.team-invite-card-main {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 17px;
}


.team-invite-team-mark {
    width: 67px;
    height: 67px;

    flex: 0 0 67px;

    display: grid;

    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #dff0bd,
            #eef6dc
        );

    color: #175039;

    font-size: 26px;

    font-weight: 800;
}


.team-invite-info {
    min-width: 0;
}


.team-invite-topline {
    display: flex;

    align-items: center;

    gap: 9px;
}


.team-invite-topline > span {
    color: #73a441;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .13em;
}


.team-invite-info h2 {
    margin: 5px 0 0;

    color: #143f2f;

    font-size: 19px;

    letter-spacing: -.025em;
}


.team-invite-info > p {
    margin: 5px 0 0;

    color: #75827b;

    font-size: 9px;
}


.team-invite-meta {
    margin-top: 9px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 7px;

    color: #8a958f;

    font-size: 8px;
}


.team-invite-meta i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #9aa69f;
}


/* STATUS */

.team-invite-status {
    padding: 5px 8px;

    border-radius: 999px;

    font-size: 7px;

    font-weight: 900;
}


.team-invite-status.pending {
    background: #fff2d7;

    color: #9e681e;
}


.team-invite-status.accepted {
    background: #e4f4cb;

    color: #4d7934;
}


.team-invite-status.declined,
.team-invite-status.cancelled {
    background: #f0eee8;

    color: #837a70;
}


/* ACTIONS */

.team-invite-actions {
    flex: 0 0 auto;

    display: flex;

    gap: 7px;
}


.team-invite-actions button {
    min-height: 42px;

    padding: 0 14px;

    border-radius: 12px;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


.team-invite-accept {
    border: 0;

    background: #155039;

    color: white;
}


.team-invite-decline,
.team-invite-cancel {
    border:
        1px solid
        rgba(22,75,51,.10);

    background: #f6f7f0;

    color: #586d62;
}


.team-invite-open-team {
    border: 0;

    background: #e9f4d3;

    color: #175039;
}


/* EMPTY */

.team-invites-empty {
    min-height: 350px;

    margin-top: 24px;

    display: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border:
        1px dashed
        rgba(24,78,53,.16);

    border-radius: 24px;

    background: #fffefa;
}


.team-invites-empty-icon {
    width: 68px;
    height: 68px;

    display: grid;

    place-items: center;

    border-radius: 21px;

    background: #e8f4ce;

    color: #155039;
}


.team-invites-empty-icon svg {
    width: 32px;
    height: 32px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.team-invites-empty > span {
    margin-top: 21px;

    color: #73a441;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .15em;
}


.team-invites-empty h2 {
    margin: 7px 0 0;

    color: #153f30;

    font-size: 26px;
}


.team-invites-empty p {
    max-width: 380px;

    margin: 7px 0 0;

    color: #7a8780;

    font-size: 10px;

    line-height: 1.5;
}


/* TOAST */

.team-invite-toast {
    position: fixed;

    right: 27px;
    bottom: 27px;

    z-index: 10000;

    min-width: 270px;

    padding: 16px 18px;

    border-radius: 15px;

    background: #143f2f;

    color: white;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(15px);

    transition:
        .25s ease;

    box-shadow:
        0 16px 40px
        rgba(8,37,25,.22);
}


.team-invite-toast.show {
    opacity: 1;

    transform:
        translateY(0);
}


.team-invite-toast strong {
    display: block;

    color: #bdf267;

    font-size: 10px;
}


.team-invite-toast span {
    display: block;

    margin-top: 4px;

    color:
        rgba(255,255,255,.70);

    font-size: 8px;
}


/* RESPONSIVE */

@media (max-width: 850px) {

    .team-invites-nav-links {
        display: none;
    }


    .team-invites-heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .team-invites-summary {
        grid-template-columns:
            repeat(2,1fr);
    }


    .team-invites-summary > div {
        border-left: 0 !important;

        border-bottom:
            1px solid
            rgba(23,73,50,.08);
    }


    .team-invite-card {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 600px) {

    .team-invites-nav-inner,
    .team-invites-main {
        width:
            calc(100% - 32px);
    }


    .team-invite-card-main {
        align-items: flex-start;
    }


    .team-invite-actions {
        width: 100%;
    }


    .team-invite-actions button {
        flex: 1;
    }

}

/* =====================================================
   TEAM DISCOVERY
===================================================== */

.team-discovery-page {
    margin: 0;
    background: #f8f7ef;
    color: #123b2d;
}


/* NAV */

.team-discovery-nav {
    background: rgba(250,249,242,.97);
    border-bottom: 1px solid rgba(21,70,49,.08);
}

.team-discovery-nav-inner {
    width: min(1600px, calc(100% - 70px));
    height: 100px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team-discovery-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    text-decoration: none;
    color: #123b2d;
}

.team-discovery-brand-mark {
    width: 54px;
    height: 54px;

    overflow: hidden;

    border-radius: 16px;
}

.team-discovery-brand-mark img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.team-discovery-brand strong {
    display: block;

    font-size: 19px;
    font-weight: 800;
}

.team-discovery-brand span {
    display: block;

    margin-top: 3px;

    color: #7c8881;

    font-size: 11px;
}

.team-discovery-nav-links {
    display: flex;
    gap: 34px;
}

.team-discovery-nav-links a {
    color: #68766f;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}

.team-discovery-nav-links a.active {
    color: #155239;
}

.team-discovery-back {
    height: 47px;

    padding: 0 18px;

    border: 1px solid rgba(23,83,58,.12);
    border-radius: 14px;

    background: white;

    color: #164b36;

    font-weight: 800;

    cursor: pointer;
}


/* MAIN */

.team-discovery-main {
    width: min(1600px, calc(100% - 70px));

    margin: auto;

    padding: 60px 0 110px;
}


/* HERO */

.team-discovery-hero {
    min-height: 330px;

    padding: 50px 56px;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 50px;

    border-radius: 31px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(181,233,97,.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #103d2c,
            #174f38
        );

    color: white;
}

.team-discovery-eyebrow {
    color: #adea61;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .18em;
}

.team-discovery-hero h1 {
    margin: 12px 0 0;

    font-size: clamp(49px, 5vw, 77px);

    line-height: .96;

    letter-spacing: -.055em;
}

.team-discovery-hero h1 span {
    color: #b1ed51;
}

.team-discovery-hero > div:first-child > p {
    max-width: 620px;

    margin-top: 20px;

    color: rgba(255,255,255,.68);

    font-size: 14px;

    line-height: 1.65;
}

.team-discovery-context {
    min-width: 245px;

    padding: 25px;

    border: 1px solid rgba(255,255,255,.11);

    border-radius: 22px;

    background: rgba(255,255,255,.07);
}

.team-discovery-context > span {
    color: #a9e65d;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .15em;
}

.team-discovery-context strong {
    display: block;

    margin-top: 7px;

    font-size: 25px;
}

.team-discovery-context p {
    margin: 6px 0 0;

    color: rgba(255,255,255,.65);

    font-size: 9px;
}


/* CONTROLS */

.team-discovery-controls {
    margin-top: 40px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;
}

.team-discovery-sports {
    padding: 5px;

    display: flex;

    gap: 7px;

    border-radius: 15px;

    background: #eaede3;
}

.team-discovery-sport {
    height: 43px;

    padding: 0 15px;

    border: 0;

    border-radius: 11px;

    background: transparent;

    color: #718078;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}

.team-discovery-sport.active {
    background: white;

    color: #155039;

    box-shadow:
        0 5px 15px
        rgba(25,67,46,.06);
}

.team-discovery-search {
    width: 300px;
    height: 49px;

    padding: 0 15px;

    display: flex;
    align-items: center;

    gap: 10px;

    box-sizing: border-box;

    border: 1px solid rgba(22,73,50,.10);

    border-radius: 14px;

    background: white;
}

.team-discovery-search svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: #708178;

    stroke-width: 1.8;
}

.team-discovery-search input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #173f30;

    font: inherit;

    font-size: 10px;
}


/* FILTER */

.team-discovery-filters {
    margin-top: 14px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.team-discovery-filter {
    height: 36px;

    padding: 0 13px;

    border: 1px solid rgba(23,75,52,.09);

    border-radius: 999px;

    background: #fffefa;

    color: #718078;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}

.team-discovery-filter.active {
    border-color: rgba(92,151,50,.20);

    background: #e5f2cb;

    color: #165039;
}


/* HEADING */

.team-discovery-results-heading {
    margin-top: 48px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;
}

.team-discovery-results-heading span {
    color: #71a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .16em;
}

.team-discovery-results-heading h2 {
    margin: 6px 0 0;

    color: #123d2e;

    font-size: 31px;

    letter-spacing: -.04em;
}

.team-discovery-results-heading p {
    color: #7a8780;

    font-size: 10px;

    font-weight: 700;
}


/* GRID */

.team-discovery-grid {
    margin-top: 24px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 16px;
}


/* TEAM CARD */

.team-discovery-card {
    overflow: hidden;

    border: 1px solid rgba(22,73,49,.09);

    border-radius: 24px;

    background: #fffefa;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.team-discovery-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 40px
        rgba(24,65,44,.08);
}


/* COVER */

.team-discovery-card-cover {
    position: relative;

    height: 180px;

    padding: 18px;

    box-sizing: border-box;

    overflow: hidden;
}

.team-discovery-card-cover::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(6,31,23,.78),
            transparent 65%
        );
}

.team-discovery-card-cover.cricket {
    background:
        linear-gradient(
            145deg,
            #16392d,
            #62724f,
            #a87947
        );
}

.team-discovery-card-cover.football {
    background:
        linear-gradient(
            145deg,
            #15372d,
            #445e49,
            #96734c
        );
}

.team-discovery-card-cover.basketball {
    background:
        linear-gradient(
            145deg,
            #182e2c,
            #68483a,
            #a96642
        );
}

.team-discovery-card-cover.volleyball {
    background:
        linear-gradient(
            145deg,
            #16372e,
            #526357,
            #967759
        );
}

.team-discovery-card-top {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;
}

.team-discovery-card-top span {
    padding: 7px 9px;

    border-radius: 999px;

    background: rgba(7,47,34,.66);

    color: white;

    font-size: 7px;

    font-weight: 800;
}

.team-discovery-team-logo {
    position: absolute;

    z-index: 2;

    left: 20px;
    bottom: 18px;

    width: 63px;
    height: 63px;

    display: grid;
    place-items: center;

    border: 3px solid rgba(255,255,255,.22);

    border-radius: 19px;

    background: #e4f3c2;

    color: #174f38;

    font-size: 26px;

    font-weight: 900;
}


/* CONTENT */

.team-discovery-card-content {
    padding: 22px;
}

.team-discovery-location {
    color: #839087;

    font-size: 8px;
}

.team-discovery-card-content h3 {
    margin: 5px 0 0;

    color: #153f30;

    font-size: 22px;

    letter-spacing: -.035em;
}

.team-discovery-stats {
    margin-top: 17px;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 6px;
}

.team-discovery-stats div {
    padding: 10px;

    border-radius: 12px;

    background: #f4f6ed;
}

.team-discovery-stats span {
    display: block;

    color: #89958e;

    font-size: 6px;

    font-weight: 900;
}

.team-discovery-stats strong {
    display: block;

    margin-top: 4px;

    color: #355646;

    font-size: 9px;
}

.team-discovery-card-content > p {
    min-height: 45px;

    margin: 16px 0 0;

    color: #748179;

    font-size: 9px;

    line-height: 1.55;
}

.team-discovery-captain {
    margin-top: 16px;

    padding-top: 13px;

    border-top: 1px solid rgba(22,72,49,.07);
}

.team-discovery-captain span {
    display: block;

    color: #78a44d;

    font-size: 6px;

    font-weight: 900;

    letter-spacing: .1em;
}

.team-discovery-captain strong {
    display: block;

    margin-top: 3px;

    color: #315443;

    font-size: 9px;
}


/* ACTIONS */

.team-discovery-actions {
    margin-top: 18px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 7px;
}

.team-discovery-actions button {
    min-height: 41px;

    border-radius: 12px;

    font-size: 8px;

    font-weight: 800;

    cursor: pointer;
}

.team-save-team,
.team-open-profile {
    border: 1px solid rgba(22,75,51,.10);

    background: #f6f7f0;

    color: #185039;
}

.team-save-team.saved {
    background: #e6f3ce;

    color: #4e7837;
}

.team-challenge-team {
    grid-column: 1 / -1;

    padding: 0 14px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 0;

    background: #155039;

    color: white;
}

.team-challenge-team span {
    color: #b9ef59;

    font-size: 16px;
}


/* EMPTY */

.team-discovery-empty {
    min-height: 280px;

    margin-top: 24px;

    display: none;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border: 1px dashed rgba(24,78,53,.16);

    border-radius: 23px;

    background: #fffefa;
}

.team-discovery-empty strong {
    color: #174331;

    font-size: 17px;
}

.team-discovery-empty p {
    color: #7c8981;

    font-size: 10px;
}


/* =====================================================
   CHALLENGE MODAL
===================================================== */

.team-challenge-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 25px;
}

.team-challenge-modal.open {
    display: flex;
}

.team-challenge-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(7,29,21,.58);

    backdrop-filter: blur(5px);
}

.team-challenge-card {
    position: relative;

    z-index: 2;

    width: min(540px, 100%);

    max-height: calc(100vh - 50px);

    overflow-y: auto;

    padding: 28px;

    box-sizing: border-box;

    border-radius: 25px;

    background: #fffefa;

    box-shadow:
        0 30px 80px
        rgba(8,34,24,.25);
}

.team-challenge-header {
    display: flex;

    justify-content: space-between;

    gap: 25px;
}

.team-challenge-header span {
    color: #72a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .16em;
}

.team-challenge-header h2 {
    margin: 5px 0 0;

    color: #143f30;

    font-size: 27px;
}

.team-challenge-header p {
    margin: 6px 0 0;

    color: #7c8881;

    font-size: 9px;
}

.team-challenge-header > button {
    width: 39px;
    height: 39px;

    border: 0;

    border-radius: 11px;

    background: #eff1e8;

    color: #476154;

    font-size: 22px;

    cursor: pointer;
}


/* OWN TEAM */

.team-challenge-own-teams {
    margin-top: 24px;

    display: grid;

    gap: 8px;
}

.team-challenge-own-team {
    min-height: 67px;

    padding: 13px 14px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    text-align: left;

    border: 1px solid rgba(22,73,50,.10);

    border-radius: 15px;

    background: #f7f8f0;

    cursor: pointer;
}

.team-challenge-own-team strong {
    display: block;

    color: #174633;

    font-size: 11px;
}

.team-challenge-own-team span {
    display: block;

    margin-top: 4px;

    color: #849088;

    font-size: 8px;
}

.team-challenge-own-team i {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #e7ecdf;

    color: transparent;

    font-size: 10px;

    font-style: normal;
}

.team-challenge-own-team.active {
    border-color: rgba(103,162,53,.42);

    background: #edf6da;
}

.team-challenge-own-team.active i {
    background: #155039;

    color: #b9ef5d;
}


/* NO TEAM */

.team-challenge-no-team {
    display: none;

    margin-top: 24px;

    padding: 22px;

    text-align: center;

    border-radius: 16px;

    background: #f4f6ec;
}

.team-challenge-no-team strong {
    color: #174532;

    font-size: 12px;
}

.team-challenge-no-team p {
    color: #7c8881;

    font-size: 9px;
}

.team-challenge-no-team button {
    height: 42px;

    margin-top: 10px;

    padding: 0 14px;

    border: 0;

    border-radius: 11px;

    background: #155039;

    color: white;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


/* MESSAGE */

.team-challenge-message-wrap {
    margin-top: 23px;
}

.team-challenge-message-wrap label {
    color: #244b3a;

    font-size: 10px;

    font-weight: 800;
}

.team-challenge-message-wrap label span {
    margin-left: 5px;

    color: #929d96;

    font-size: 8px;
}

.team-challenge-message-wrap textarea {
    width: 100%;
    min-height: 95px;

    margin-top: 9px;

    padding: 13px;

    box-sizing: border-box;

    resize: vertical;

    border: 1px solid rgba(22,73,50,.11);

    border-radius: 14px;

    outline: none;

    background: #f8f9f2;

    color: #173f30;

    font: inherit;

    font-size: 10px;
}


/* SEND */

.team-challenge-send {
    width: 100%;
    height: 53px;

    margin-top: 20px;

    padding: 0 17px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 0;

    border-radius: 15px;

    background: #155039;

    color: white;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}

.team-challenge-send span {
    color: #b9ef59;

    font-size: 18px;
}


/* TOAST */

.team-discovery-toast {
    position: fixed;

    z-index: 10000;

    right: 27px;
    bottom: 27px;

    min-width: 270px;

    padding: 16px 18px;

    border-radius: 15px;

    background: #143f2f;

    color: white;

    opacity: 0;

    pointer-events: none;

    transform: translateY(15px);

    transition: .25s ease;

    box-shadow:
        0 16px 40px
        rgba(8,37,25,.22);
}

.team-discovery-toast.show {
    opacity: 1;

    transform: translateY(0);
}

.team-discovery-toast strong {
    display: block;

    color: #bdf267;

    font-size: 10px;
}

.team-discovery-toast span {
    display: block;

    margin-top: 4px;

    color: rgba(255,255,255,.70);

    font-size: 8px;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .team-discovery-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media (max-width: 850px) {

    .team-discovery-nav-links {
        display: none;
    }


    .team-discovery-hero {
        align-items: flex-start;

        flex-direction: column;
    }


    .team-discovery-controls {
        align-items: stretch;

        flex-direction: column;
    }


    .team-discovery-search {
        width: 100%;
    }

}


@media (max-width: 620px) {

    .team-discovery-nav-inner,
    .team-discovery-main {
        width:
            calc(100% - 32px);
    }


    .team-discovery-sports {
        overflow-x: auto;
    }


    .team-discovery-grid {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   PUBLIC TEAM PROFILE
===================================================== */

.public-team-page {
    margin: 0;
    background: #f8f7ef;
    color: #123b2d;
}


/* NAV */

.public-team-nav {
    background: rgba(250,249,242,.97);

    border-bottom:
        1px solid
        rgba(21,70,49,.08);
}

.public-team-nav-inner {
    width: min(1600px, calc(100% - 70px));
    height: 100px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-team-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    text-decoration: none;
    color: #123b2d;
}

.public-team-brand-mark {
    width: 54px;
    height: 54px;

    overflow: hidden;

    border-radius: 16px;
}

.public-team-brand-mark img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.public-team-brand strong {
    display: block;

    font-size: 19px;
    font-weight: 800;
}

.public-team-brand span {
    display: block;

    margin-top: 3px;

    color: #7c8881;

    font-size: 11px;
}

.public-team-nav-links {
    display: flex;

    gap: 35px;
}

.public-team-nav-links a {
    color: #68766f;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;
}

.public-team-nav-links a.active {
    color: #155239;
}

.public-team-back {
    height: 47px;

    padding: 0 18px;

    border:
        1px solid
        rgba(23,83,58,.12);

    border-radius: 14px;

    background: white;

    color: #164b36;

    font-weight: 800;

    cursor: pointer;
}


/* MAIN */

.public-team-main {
    width: min(1600px, calc(100% - 70px));

    margin: auto;

    padding: 55px 0 110px;
}


/* HERO */

.public-team-hero {
    display: grid;

    grid-template-columns:
        minmax(0,1.45fr)
        minmax(300px,.55fr);

    gap: 18px;
}

.public-team-cover {
    position: relative;

    min-height: 410px;

    padding: 32px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    border-radius: 31px;
}

.public-team-cover::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(6,31,23,.88),
            transparent 65%
        );
}

.public-team-cover.cricket {
    background:
        linear-gradient(
            145deg,
            #17392e,
            #607150,
            #a87947
        );
}

.public-team-cover.football {
    background:
        linear-gradient(
            145deg,
            #15372d,
            #445d48,
            #96734c
        );
}

.public-team-cover.basketball {
    background:
        linear-gradient(
            145deg,
            #182f2c,
            #68483a,
            #aa6842
        );
}

.public-team-cover.volleyball {
    background:
        linear-gradient(
            145deg,
            #16372e,
            #526357,
            #957759
        );
}

.public-team-cover-top,
.public-team-cover-bottom {
    position: relative;

    z-index: 2;
}

.public-team-cover-top {
    display: flex;

    justify-content: space-between;
}

.public-team-cover-top span {
    padding: 8px 11px;

    border-radius: 999px;

    background:
        rgba(7,47,34,.66);

    color: white;

    font-size: 8px;

    font-weight: 800;
}

.public-team-cover-bottom {
    display: flex;

    align-items: flex-end;

    gap: 22px;
}

.public-team-logo {
    width: 105px;
    height: 105px;

    flex: 0 0 105px;

    display: grid;
    place-items: center;

    border-radius: 29px;

    border:
        5px solid
        rgba(255,255,255,.20);

    background: #e5f5bf;

    color: #174e37;

    font-size: 45px;

    font-weight: 900;
}

.public-team-location {
    color: rgba(255,255,255,.67);

    font-size: 10px;
}

.public-team-cover-bottom h1 {
    margin: 5px 0 0;

    color: white;

    font-size:
        clamp(
            45px,
            5vw,
            72px
        );

    line-height: .97;

    letter-spacing: -.05em;
}

.public-team-meta {
    margin-top: 13px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    color: rgba(255,255,255,.72);

    font-size: 10px;

    font-weight: 700;
}

.public-team-meta i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #b6ec58;
}


/* ACTIONS */

.public-team-actions {
    padding: 31px;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        rgba(22,73,49,.09);

    border-radius: 31px;

    background: #fffefa;
}

.public-team-actions > span {
    color: #71a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .15em;
}

.public-team-actions h2 {
    margin: 9px 0 0;

    color: #143f2f;

    font-size: 30px;

    letter-spacing: -.04em;
}

.public-team-actions p {
    color: #748179;

    font-size: 10px;

    line-height: 1.6;
}

.public-team-save,
.public-team-challenge {
    width: 100%;
    height: 52px;

    border-radius: 15px;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}

.public-team-save {
    margin-top: auto;

    border:
        1px solid
        rgba(22,74,51,.10);

    background: #f6f7f0;

    color: #174d37;
}

.public-team-save.saved {
    background: #e7f3cf;

    color: #4c7537;
}

.public-team-challenge {
    margin-top: 9px;

    padding: 0 16px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 0;

    background: #155039;

    color: white;
}

.public-team-challenge span {
    color: #b9ef59;

    font-size: 17px;
}


/* CONTENT */

.public-team-content {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(280px,.75fr);

    gap: 18px;
}

.public-team-left,
.public-team-right {
    display: grid;

    gap: 18px;

    align-content: start;
}

.public-team-card {
    padding: 28px;

    border:
        1px solid
        rgba(22,73,49,.09);

    border-radius: 24px;

    background: #fffefa;
}

.public-team-card > span,
.public-team-section-heading span {
    color: #72a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .15em;
}

.public-team-card h2 {
    margin: 7px 0 0;

    color: #143f30;

    font-size: 27px;

    letter-spacing: -.035em;
}

.public-team-card > p {
    max-width: 750px;

    color: #75827b;

    font-size: 10px;

    line-height: 1.7;
}


/* ROSTER */

.public-team-roster {
    margin-top: 22px;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 9px;
}

.public-team-roster-player {
    padding: 13px;

    display: flex;

    align-items: center;

    gap: 10px;

    border-radius: 15px;

    background: #f4f6ed;
}

.public-team-roster-player img {
    width: 44px;
    height: 44px;

    border-radius: 14px;

    object-fit: cover;
}

.public-team-roster-player strong {
    display: block;

    color: #174532;

    font-size: 10px;
}

.public-team-roster-player span {
    display: block;

    margin-top: 3px;

    color: #869188;

    font-size: 7px;
}


/* DETAILS */

.public-team-detail {
    padding: 13px 0;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    border-bottom:
        1px solid
        rgba(22,72,49,.07);
}

.public-team-detail:last-child {
    border-bottom: 0;
}

.public-team-detail span {
    color: #859088;

    font-size: 9px;
}

.public-team-detail strong {
    color: #294f3d;

    font-size: 10px;
}


/* SECOND ACTION CARD */

.public-team-match-card {
    background:
        linear-gradient(
            145deg,
            #edf6d8,
            #fffefa
        );
}

.public-team-match-card h3 {
    margin: 9px 0 0;

    color: #143f2f;

    font-size: 22px;
}

.public-team-match-card button {
    width: 100%;
    height: 47px;

    margin-top: 17px;

    padding: 0 15px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 0;

    border-radius: 13px;

    background: #155039;

    color: white;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}

.public-team-match-card button span {
    color: #b9ef59;

    font-size: 16px;
}


/* =====================================================
   MODAL
===================================================== */

.public-team-challenge-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 25px;
}

.public-team-challenge-modal.open {
    display: flex;
}

.public-team-challenge-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(7,29,21,.58);

    backdrop-filter: blur(5px);
}

.public-team-challenge-card {
    position: relative;

    z-index: 2;

    width: min(540px,100%);

    max-height:
        calc(100vh - 50px);

    overflow-y: auto;

    padding: 28px;

    box-sizing: border-box;

    border-radius: 25px;

    background: #fffefa;
}

.public-team-challenge-header {
    display: flex;

    justify-content: space-between;

    gap: 25px;
}

.public-team-challenge-header span {
    color: #72a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .15em;
}

.public-team-challenge-header h2 {
    margin: 5px 0 0;

    color: #143f30;

    font-size: 27px;
}

.public-team-challenge-header p {
    color: #7b8881;

    font-size: 9px;
}

.public-team-challenge-header > button {
    width: 39px;
    height: 39px;

    border: 0;

    border-radius: 11px;

    background: #eff1e8;

    color: #476154;

    font-size: 22px;

    cursor: pointer;
}


/* OWN TEAM */

.public-team-own-teams {
    margin-top: 23px;

    display: grid;

    gap: 8px;
}

.public-team-own-team {
    min-height: 67px;

    padding: 13px 14px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    text-align: left;

    border:
        1px solid
        rgba(22,73,50,.10);

    border-radius: 15px;

    background: #f7f8f0;

    cursor: pointer;
}

.public-team-own-team strong {
    display: block;

    color: #174633;

    font-size: 11px;
}

.public-team-own-team span {
    display: block;

    margin-top: 4px;

    color: #849088;

    font-size: 8px;
}

.public-team-own-team i {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #e7ecdf;

    color: transparent;

    font-style: normal;

    font-size: 10px;
}

.public-team-own-team.active {
    border-color:
        rgba(103,162,53,.42);

    background: #edf6da;
}

.public-team-own-team.active i {
    background: #155039;

    color: #b9ef5d;
}


/* NO TEAM */

.public-team-no-own-team {
    display: none;

    margin-top: 23px;

    padding: 22px;

    text-align: center;

    border-radius: 16px;

    background: #f4f6ec;
}

.public-team-no-own-team strong {
    color: #174532;

    font-size: 12px;
}

.public-team-no-own-team p {
    color: #7c8881;

    font-size: 9px;
}

.public-team-no-own-team button {
    height: 42px;

    margin-top: 10px;

    padding: 0 14px;

    border: 0;

    border-radius: 11px;

    background: #155039;

    color: white;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


/* MESSAGE */

.public-team-challenge-message {
    margin-top: 22px;
}

.public-team-challenge-message label {
    color: #244b3a;

    font-size: 10px;

    font-weight: 800;
}

.public-team-challenge-message label span {
    margin-left: 5px;

    color: #929d96;

    font-size: 8px;
}

.public-team-challenge-message textarea {
    width: 100%;
    min-height: 95px;

    margin-top: 9px;

    padding: 13px;

    box-sizing: border-box;

    resize: vertical;

    border:
        1px solid
        rgba(22,73,50,.11);

    border-radius: 14px;

    outline: none;

    background: #f8f9f2;

    color: #173f30;

    font: inherit;

    font-size: 10px;
}


/* SEND */

.public-team-send-challenge {
    width: 100%;
    height: 53px;

    margin-top: 20px;

    padding: 0 17px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 0;

    border-radius: 15px;

    background: #155039;

    color: white;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}

.public-team-send-challenge span {
    color: #b9ef59;

    font-size: 18px;
}


/* TOAST */

.public-team-toast {
    position: fixed;

    z-index: 10000;

    right: 27px;
    bottom: 27px;

    min-width: 270px;

    padding: 16px 18px;

    border-radius: 15px;

    background: #143f2f;

    color: white;

    opacity: 0;

    pointer-events: none;

    transform: translateY(15px);

    transition: .25s ease;
}

.public-team-toast.show {
    opacity: 1;

    transform: translateY(0);
}

.public-team-toast strong {
    display: block;

    color: #bdf267;

    font-size: 10px;
}

.public-team-toast span {
    display: block;

    margin-top: 4px;

    color:
        rgba(255,255,255,.70);

    font-size: 8px;
}


/* NOT FOUND */

.public-team-not-found {
    min-height:
        calc(100vh - 100px);

    display: none;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}

.public-team-not-found strong {
    color: #143f30;

    font-size: 25px;
}

.public-team-not-found p {
    color: #78857e;

    font-size: 10px;
}

.public-team-not-found button {
    height: 45px;

    margin-top: 13px;

    padding: 0 16px;

    border: 0;

    border-radius: 12px;

    background: #155039;

    color: white;

    font-weight: 800;

    cursor: pointer;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .public-team-hero,
    .public-team-content {
        grid-template-columns: 1fr;
    }

    .public-team-actions {
        min-height: 280px;
    }

}


@media (max-width: 800px) {

    .public-team-nav-links {
        display: none;
    }

}


@media (max-width: 650px) {

    .public-team-nav-inner,
    .public-team-main {
        width: calc(100% - 32px);
    }


    .public-team-cover-bottom {
        align-items: flex-start;

        flex-direction: column;
    }


    .public-team-roster {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   TEAM CHALLENGES
===================================================== */

.team-challenges-page {
    margin: 0;
    background: #f8f7ef;
    color: #123b2d;
}


/* NAV */

.team-challenges-nav {
    background: rgba(250,249,242,.97);

    border-bottom:
        1px solid
        rgba(21,70,49,.08);
}


.team-challenges-nav-inner {
    width:
        min(
            1600px,
            calc(100% - 70px)
        );

    height: 100px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.team-challenges-brand {
    display: flex;

    align-items: center;

    gap: 13px;

    color: #123b2d;

    text-decoration: none;
}


.team-challenges-brand-mark {
    width: 54px;
    height: 54px;

    overflow: hidden;

    border-radius: 16px;
}


.team-challenges-brand-mark img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.team-challenges-brand strong {
    display: block;

    font-size: 19px;

    font-weight: 800;
}


.team-challenges-brand span {
    display: block;

    margin-top: 3px;

    color: #7c8881;

    font-size: 11px;
}


.team-challenges-nav-links {
    display: flex;

    gap: 34px;
}


.team-challenges-nav-links a {
    color: #68766f;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;
}


.team-challenges-nav-links a.active {
    color: #155239;
}


.team-challenges-back {
    height: 47px;

    padding: 0 18px;

    border:
        1px solid
        rgba(23,83,58,.12);

    border-radius: 14px;

    background: white;

    color: #164b36;

    font-weight: 800;

    cursor: pointer;
}


/* MAIN */

.team-challenges-main {
    width:
        min(
            1500px,
            calc(100% - 70px)
        );

    margin: auto;

    padding: 65px 0 110px;
}


/* HEADER */

.team-challenges-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;
}


.team-challenges-heading > div > span {
    color: #71a43e;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .17em;
}


.team-challenges-heading h1 {
    margin: 9px 0 0;

    color: #123c2d;

    font-size:
        clamp(
            58px,
            6vw,
            90px
        );

    line-height: .96;

    letter-spacing: -.06em;
}


.team-challenges-heading h1 strong {
    color: #80bd2e;
}


.team-challenges-heading p {
    max-width: 620px;

    margin-top: 19px;

    color: #6f7d75;

    font-size: 14px;

    line-height: 1.65;
}


.team-challenges-find {
    height: 54px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    gap: 17px;

    border: 0;

    border-radius: 16px;

    background: #155039;

    color: white;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;
}


.team-challenges-find span {
    color: #baef5c;

    font-size: 18px;
}


/* SUMMARY */

.team-challenges-summary {
    margin-top: 52px;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    overflow: hidden;

    border:
        1px solid
        rgba(23,73,50,.09);

    border-radius: 24px;

    background: #fffefa;
}


.team-challenges-summary > div {
    padding: 25px 28px;
}


.team-challenges-summary > div + div {
    border-left:
        1px solid
        rgba(23,73,50,.08);
}


.team-challenges-summary span {
    color: #72a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .14em;
}


.team-challenges-summary strong {
    display: block;

    margin-top: 6px;

    color: #143f2f;

    font-size: 27px;
}


.team-challenges-summary p {
    margin: 3px 0 0;

    color: #839087;

    font-size: 9px;
}


/* TABS */

.team-challenges-tabs {
    width: fit-content;

    margin-top: 45px;

    padding: 5px;

    display: flex;

    gap: 7px;

    border-radius: 15px;

    background: #eaede3;
}


.team-challenge-tab {
    min-height: 44px;

    padding: 0 16px;

    display: flex;

    align-items: center;

    gap: 8px;

    border: 0;

    border-radius: 11px;

    background: transparent;

    color: #6d7c74;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}


.team-challenge-tab span {
    min-width: 21px;
    height: 21px;

    padding: 0 5px;

    display: grid;

    place-items: center;

    border-radius: 999px;

    background:
        rgba(20,73,50,.07);

    font-size: 8px;
}


.team-challenge-tab.active {
    background: white;

    color: #155039;

    box-shadow:
        0 5px 14px
        rgba(22,65,45,.06);
}


/* LIST */

.team-challenges-list {
    margin-top: 24px;

    display: grid;

    gap: 11px;
}


/* CARD */

.team-challenges-card {
    padding: 21px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border:
        1px solid
        rgba(23,73,50,.09);

    border-radius: 21px;

    background: #fffefa;
}


.team-challenges-card-main {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 19px;
}


/* VS */

.team-challenges-versus {
    display: flex;

    align-items: center;

    gap: 7px;
}


.team-challenges-versus > div {
    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    background: #e6f2cb;

    color: #174f38;

    font-size: 18px;

    font-weight: 900;
}


.team-challenges-versus > div:last-child {
    background: #f0e8d7;

    color: #765d3d;
}


.team-challenges-versus > span {
    color: #94a098;

    font-size: 7px;

    font-weight: 900;
}


/* INFO */

.team-challenges-info {
    min-width: 0;
}


.team-challenges-topline {
    display: flex;

    align-items: center;

    gap: 9px;
}


.team-challenges-topline > span {
    color: #72a43e;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .13em;
}


.team-challenges-info h2 {
    margin: 5px 0 0;

    color: #143f30;

    font-size: 19px;

    letter-spacing: -.025em;
}


.team-challenges-info > p {
    margin: 4px 0 0;

    color: #76837b;

    font-size: 9px;
}


.team-challenges-info blockquote {
    max-width: 600px;

    margin: 10px 0 0;

    padding: 9px 12px;

    border-left:
        2px solid
        #9bc75f;

    border-radius: 0 9px 9px 0;

    background: #f5f7ee;

    color: #68786f;

    font-size: 9px;

    line-height: 1.5;
}


.team-challenges-meta {
    margin-top: 9px;

    display: flex;

    align-items: center;

    gap: 7px;

    color: #89958e;

    font-size: 8px;
}


.team-challenges-meta i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #9ba69f;
}


/* STATUS */

.team-challenges-status {
    padding: 5px 8px;

    border-radius: 999px;

    font-size: 7px;

    font-weight: 900;
}


.team-challenges-status.pending {
    background: #fff2d7;

    color: #9e681e;
}


.team-challenges-status.accepted {
    background: #e4f4cb;

    color: #4c7834;
}


.team-challenges-status.declined,
.team-challenges-status.cancelled {
    background: #efeee8;

    color: #837a70;
}


/* ACTIONS */

.team-challenges-actions {
    flex: 0 0 auto;

    display: flex;

    gap: 7px;
}


.team-challenges-actions button {
    min-height: 43px;

    padding: 0 14px;

    border-radius: 12px;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


.team-challenge-accept-btn {
    border: 0;

    background: #155039;

    color: white;
}


.team-challenge-decline-btn,
.team-challenge-cancel-btn {
    border:
        1px solid
        rgba(22,75,51,.10);

    background: #f6f7f0;

    color: #586d62;
}


.team-challenge-open-match {
    display: flex;

    align-items: center;

    gap: 13px;

    border: 0;

    background: #e7f3cf;

    color: #174f38;
}


.team-challenge-open-match span {
    font-size: 15px;
}


/* EMPTY */

.team-challenges-empty {
    min-height: 370px;

    margin-top: 24px;

    display: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border:
        1px dashed
        rgba(24,78,53,.16);

    border-radius: 24px;

    background: #fffefa;
}


.team-challenges-empty-icon {
    width: 70px;
    height: 70px;

    display: grid;

    place-items: center;

    border-radius: 21px;

    background: #e8f4ce;

    color: #155039;
}


.team-challenges-empty-icon svg {
    width: 33px;
    height: 33px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.team-challenges-empty > span {
    margin-top: 21px;

    color: #73a441;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .15em;
}


.team-challenges-empty h2 {
    max-width: 520px;

    margin: 7px 0 0;

    color: #153f30;

    font-size: 26px;
}


.team-challenges-empty p {
    max-width: 400px;

    margin: 7px 0 0;

    color: #7a8780;

    font-size: 10px;

    line-height: 1.5;
}


.team-challenges-empty > button {
    height: 45px;

    margin-top: 18px;

    padding: 0 16px;

    border: 0;

    border-radius: 13px;

    background: #155039;

    color: white;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


/* TOAST */

.team-challenges-toast {
    position: fixed;

    z-index: 10000;

    right: 27px;
    bottom: 27px;

    min-width: 280px;

    padding: 16px 18px;

    border-radius: 15px;

    background: #143f2f;

    color: white;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(15px);

    transition: .25s ease;

    box-shadow:
        0 16px 40px
        rgba(8,37,25,.22);
}


.team-challenges-toast.show {
    opacity: 1;

    transform:
        translateY(0);
}


.team-challenges-toast strong {
    display: block;

    color: #bdf267;

    font-size: 10px;
}


.team-challenges-toast span {
    display: block;

    margin-top: 4px;

    color:
        rgba(255,255,255,.70);

    font-size: 8px;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .team-challenges-nav-links {
        display: none;
    }


    .team-challenges-heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .team-challenges-summary {
        grid-template-columns:
            repeat(2,1fr);
    }


    .team-challenges-summary > div {
        border-left: 0 !important;

        border-bottom:
            1px solid
            rgba(23,73,50,.08);
    }


    .team-challenges-card {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 600px) {

    .team-challenges-nav-inner,
    .team-challenges-main {
        width:
            calc(100% - 32px);
    }


    .team-challenges-card-main {
        align-items: flex-start;

        flex-direction: column;
    }


    .team-challenges-actions {
        width: 100%;
    }


    .team-challenges-actions button {
        flex: 1;
    }

}

/* =====================================================
   TEAM MATCHES
===================================================== */

.team-matches-page {
    margin: 0;

    background: #f8f7ef;

    color: #123b2d;
}


/* NAV */

.team-matches-nav {
    background:
        rgba(250,249,242,.97);

    border-bottom:
        1px solid
        rgba(21,70,49,.08);
}


.team-matches-nav-inner {
    width:
        min(
            1600px,
            calc(100% - 70px)
        );

    height: 100px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.team-matches-brand {
    display: flex;

    align-items: center;

    gap: 13px;

    color: #123b2d;

    text-decoration: none;
}


.team-matches-brand-mark {
    width: 54px;
    height: 54px;

    overflow: hidden;

    border-radius: 16px;
}


.team-matches-brand-mark img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.team-matches-brand strong {
    display: block;

    font-size: 19px;

    font-weight: 800;
}


.team-matches-brand span {
    display: block;

    margin-top: 3px;

    color: #7c8881;

    font-size: 11px;
}


.team-matches-nav-links {
    display: flex;

    gap: 34px;
}


.team-matches-nav-links a {
    color: #68766f;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;
}


.team-matches-nav-links a.active {
    color: #155239;
}


.team-matches-back {
    height: 47px;

    padding: 0 18px;

    border:
        1px solid
        rgba(23,83,58,.12);

    border-radius: 14px;

    background: white;

    color: #164b36;

    font-weight: 800;

    cursor: pointer;
}


/* MAIN */

.team-matches-main {
    width:
        min(
            1500px,
            calc(100% - 70px)
        );

    margin: auto;

    padding:
        65px 0 110px;
}


/* HEADING */

.team-matches-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;
}


.team-matches-heading > div > span {
    color: #71a43e;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .17em;
}


.team-matches-heading h1 {
    margin:
        9px 0 0;

    color: #123c2d;

    font-size:
        clamp(
            58px,
            6vw,
            90px
        );

    line-height: .94;

    letter-spacing: -.06em;
}


.team-matches-heading h1 strong {
    color: #80bd2e;
}


.team-matches-heading p {
    max-width: 600px;

    margin-top: 20px;

    color: #6f7d75;

    font-size: 14px;

    line-height: 1.65;
}


.team-matches-find-team {
    height: 54px;

    padding:
        0 20px;

    display: flex;

    align-items: center;

    gap: 17px;

    border: 0;

    border-radius: 16px;

    background: #155039;

    color: white;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;
}


.team-matches-find-team span {
    color: #baef5c;

    font-size: 18px;
}


/* SUMMARY */

.team-matches-summary {
    margin-top: 52px;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    overflow: hidden;

    border:
        1px solid
        rgba(23,73,50,.09);

    border-radius: 24px;

    background: #fffefa;
}


.team-matches-summary article {
    padding:
        25px 28px;
}


.team-matches-summary article + article {
    border-left:
        1px solid
        rgba(23,73,50,.08);
}


.team-matches-summary span {
    color: #72a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .14em;
}


.team-matches-summary strong {
    display: block;

    margin-top: 6px;

    color: #143f2f;

    font-size: 27px;
}


.team-matches-summary p {
    margin:
        3px 0 0;

    color: #839087;

    font-size: 9px;
}


/* CONTROLS */

.team-matches-controls {
    margin-top: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


.team-matches-team-filter {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.team-match-team-choice {
    min-height: 39px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(22,73,50,.09);

    border-radius: 999px;

    background: #fffefa;

    color: #718078;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


.team-match-team-choice.active {
    border-color:
        rgba(99,158,52,.22);

    background: #e7f3cf;

    color: #165039;
}


.team-matches-search {
    width: 290px;
    height: 48px;

    padding:
        0 15px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(22,73,50,.10);

    border-radius: 14px;

    background: white;

    box-sizing: border-box;
}


.team-matches-search svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: #718179;

    stroke-width: 1.8;
}


.team-matches-search input {
    width: 100%;

    border: 0;

    outline: 0;

    background:
        transparent;

    color: #173f30;

    font: inherit;

    font-size: 10px;
}


/* TABS */

.team-matches-tabs {
    width: fit-content;

    margin-top: 16px;

    padding: 5px;

    display: flex;

    gap: 7px;

    border-radius: 15px;

    background: #eaede3;
}


.team-match-tab {
    min-height: 43px;

    padding:
        0 15px;

    display: flex;

    align-items: center;

    gap: 8px;

    border: 0;

    border-radius: 11px;

    background:
        transparent;

    color: #6d7c74;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}


.team-match-tab > span {
    min-width: 20px;
    height: 20px;

    padding:
        0 4px;

    display: grid;

    place-items: center;

    border-radius: 999px;

    background:
        rgba(20,73,50,.07);

    font-size: 7px;
}


.team-match-tab.active {
    background: white;

    color: #155039;

    box-shadow:
        0 5px 14px
        rgba(22,65,45,.06);
}


/* RESULTS HEADING */

.team-match-results-heading {
    margin-top: 43px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;
}


.team-match-results-heading > div > span {
    color: #72a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .15em;
}


.team-match-results-heading h2 {
    margin:
        6px 0 0;

    color: #143f30;

    font-size: 30px;

    letter-spacing: -.04em;
}


.team-match-results-heading > p {
    color: #7c8881;

    font-size: 10px;

    font-weight: 700;
}


/* LIST */

.team-match-list {
    margin-top: 23px;

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 15px;
}


/* CARD */

.team-match-card {
    padding: 22px;

    border:
        1px solid
        rgba(22,73,49,.09);

    border-radius: 23px;

    background: #fffefa;

    box-shadow:
        0 10px 25px
        rgba(24,65,44,.035);
}


.team-match-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.team-match-card-top > div {
    display: flex;

    align-items: center;

    gap: 7px;
}


.team-match-sport {
    color: #72a43e;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .13em;
}


.team-match-status {
    padding:
        5px 8px;

    border-radius: 999px;

    font-size: 7px;

    font-weight: 900;
}


.team-match-status.planning {
    background: #fff1d6;

    color: #9f681c;
}


.team-match-status.upcoming {
    background: #e4f3cb;

    color: #507935;
}


.team-match-status.completed {
    background: #e7ece8;

    color: #4e6358;
}


.team-match-created {
    color: #8c9891;

    font-size: 8px;
}


/* VERSUS */

.team-match-versus {
    margin-top: 25px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 17px;
}


.team-match-side {
    min-width: 0;

    text-align: center;
}


.team-match-team-logo {
    width: 68px;
    height: 68px;

    margin:
        0 auto;

    display: grid;

    place-items: center;

    border-radius: 20px;

    background:
        #e3f2c5;

    color: #174f38;

    font-size: 27px;

    font-weight: 900;
}


.team-match-team-logo.opponent {
    background: #f0e7d5;

    color: #785e3c;
}


.team-match-side strong {
    display: block;

    margin-top: 9px;

    overflow: hidden;

    color: #174330;

    font-size: 13px;

    text-overflow:
        ellipsis;

    white-space: nowrap;
}


.team-match-vs {
    width: 37px;
    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #f0f2e9;

    color: #829087;

    font-size: 8px;

    font-weight: 900;
}


/* DETAILS */

.team-match-details {
    margin-top: 25px;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 7px;
}


.team-match-details > div {
    min-width: 0;

    padding: 11px;

    border-radius: 12px;

    background: #f5f7ef;
}


.team-match-details span {
    display: block;

    color: #89958e;

    font-size: 6px;

    font-weight: 900;

    letter-spacing: .08em;
}


.team-match-details strong {
    display: block;

    margin-top: 5px;

    overflow: hidden;

    color: #345545;

    font-size: 9px;

    text-overflow:
        ellipsis;

    white-space: nowrap;
}


/* YOUR TEAM */

.team-match-my-team {
    margin-top: 14px;

    padding-top: 13px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid
        rgba(22,72,49,.07);
}


.team-match-my-team span {
    color: #78a44d;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .10em;
}


.team-match-my-team strong {
    color: #345545;

    font-size: 9px;
}


/* OPEN BUTTON */

.team-match-open {
    width: 100%;
    height: 48px;

    margin-top: 15px;

    padding:
        0 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    border-radius: 13px;

    background: #155039;

    color: white;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


.team-match-open span {
    color: #b9ef59;

    font-size: 17px;
}


/* EMPTY */

.team-match-empty {
    min-height: 360px;

    margin-top: 23px;

    display: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border:
        1px dashed
        rgba(24,78,53,.16);

    border-radius: 24px;

    background: #fffefa;
}


.team-match-empty-icon {
    width: 70px;
    height: 70px;

    display: grid;

    place-items: center;

    border-radius: 21px;

    background: #e8f4ce;

    color: #155039;
}


.team-match-empty-icon svg {
    width: 33px;
    height: 33px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.team-match-empty > span {
    margin-top: 20px;

    color: #73a441;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .15em;
}


.team-match-empty h2 {
    margin:
        7px 0 0;

    color: #153f30;

    font-size: 26px;
}


.team-match-empty p {
    max-width: 420px;

    margin:
        7px 0 0;

    color: #7a8780;

    font-size: 10px;

    line-height: 1.5;
}


.team-match-empty button {
    height: 45px;

    margin-top: 18px;

    padding:
        0 16px;

    border: 0;

    border-radius: 13px;

    background: #155039;

    color: white;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .team-matches-nav-links {
        display: none;
    }


    .team-matches-heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .team-match-list {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 800px) {

    .team-matches-summary {
        grid-template-columns:
            repeat(2,1fr);
    }


    .team-matches-summary article {
        border-left:
            0 !important;

        border-bottom:
            1px solid
            rgba(23,73,50,.08);
    }


    .team-matches-controls {
        align-items: stretch;

        flex-direction: column;
    }


    .team-matches-search {
        width: 100%;
    }

}


@media (max-width: 600px) {

    .team-matches-nav-inner,
    .team-matches-main {
        width:
            calc(100% - 32px);
    }


    .team-matches-team-filter,
    .team-matches-tabs {
        overflow-x: auto;

        flex-wrap: nowrap;
    }


    .team-match-team-choice,
    .team-match-tab {
        flex-shrink: 0;
    }


    .team-match-details {
        grid-template-columns:
            1fr;
    }

}

/* =====================================================
   TEAM MATCH ROOM
===================================================== */

.team-match-room-page {
    margin: 0;

    background: #f8f7ef;

    color: #123b2d;
}


/* NAV */

.team-match-room-nav {
    background: rgba(250,249,242,.97);

    border-bottom:
        1px solid
        rgba(21,70,49,.08);
}


.team-match-room-nav-inner {
    width: min(1600px, calc(100% - 70px));

    height: 100px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.team-match-room-brand {
    display: flex;

    align-items: center;

    gap: 13px;

    color: #123b2d;

    text-decoration: none;
}


.team-match-room-brand-mark {
    width: 54px;
    height: 54px;

    overflow: hidden;

    border-radius: 16px;
}


.team-match-room-brand-mark img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.team-match-room-brand strong {
    display: block;

    font-size: 19px;

    font-weight: 800;
}


.team-match-room-brand span {
    display: block;

    margin-top: 3px;

    color: #7c8881;

    font-size: 11px;
}


.team-match-room-nav-links {
    display: flex;

    gap: 34px;
}


.team-match-room-nav-links a {
    color: #68766f;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;
}


.team-match-room-nav-links a.active {
    color: #155239;
}


.team-match-room-back {
    height: 47px;

    padding: 0 18px;

    border:
        1px solid
        rgba(23,83,58,.12);

    border-radius: 14px;

    background: white;

    color: #164b36;

    font-weight: 800;

    cursor: pointer;
}


/* MAIN */

.team-match-room-main {
    width: min(1500px, calc(100% - 70px));

    margin: auto;

    padding: 55px 0 110px;
}


/* =====================================================
   HERO
===================================================== */

.team-match-room-hero {
    min-height: 420px;

    padding: 33px 45px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-radius: 31px;

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(188,238,93,.18),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #0d3929,
            #174f38
        );

    color: white;
}


.team-match-room-hero-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.team-match-room-hero-top > div {
    display: flex;

    align-items: center;

    gap: 8px;
}


.team-match-room-sport {
    color: #b8ef63;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .16em;
}


.team-match-room-status {
    padding: 6px 9px;

    border-radius: 999px;

    font-size: 7px;

    font-weight: 900;
}


.team-match-room-status.planning {
    background: rgba(255,215,142,.14);

    color: #ffd58d;
}


.team-match-room-status.upcoming {
    background: rgba(185,239,89,.14);

    color: #c2f16d;
}


.team-match-room-status.completed {
    background: rgba(255,255,255,.12);

    color: white;
}


.team-match-room-id {
    color: rgba(255,255,255,.42);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .12em;
}


/* VS */

.team-match-room-versus {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 40px;
}


.team-match-room-team {
    text-align: center;
}


.team-match-room-logo {
    width: 100px;
    height: 100px;

    margin: auto;

    display: grid;

    place-items: center;

    border:
        5px solid
        rgba(255,255,255,.17);

    border-radius: 29px;

    background: #dff1b9;

    color: #174f38;

    font-size: 42px;

    font-weight: 900;
}


.team-match-room-logo.opponent {
    background: #f0dfc0;

    color: #745636;
}


.team-match-room-team > span {
    display: block;

    margin-top: 13px;

    color: rgba(255,255,255,.45);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .13em;
}


.team-match-room-team h2 {
    margin: 5px 0 0;

    color: white;

    font-size:
        clamp(
            25px,
            3vw,
            39px
        );

    letter-spacing: -.04em;
}


.team-match-room-vs {
    width: 54px;
    height: 54px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 50%;

    background:
        rgba(255,255,255,.06);

    color: #b9ed68;

    font-size: 9px;

    font-weight: 900;
}


/* META */

.team-match-room-hero-meta {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 18px;

    background:
        rgba(255,255,255,.055);
}


.team-match-room-hero-meta > div {
    padding: 16px 19px;
}


.team-match-room-hero-meta > div + div {
    border-left:
        1px solid
        rgba(255,255,255,.09);
}


.team-match-room-hero-meta span {
    display: block;

    color: rgba(255,255,255,.43);

    font-size: 6px;

    font-weight: 900;

    letter-spacing: .12em;
}


.team-match-room-hero-meta strong {
    display: block;

    margin-top: 5px;

    overflow: hidden;

    color: white;

    font-size: 10px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =====================================================
   LAYOUT
===================================================== */

.team-match-room-layout {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(300px,.75fr);

    gap: 18px;
}


.team-match-room-left,
.team-match-room-right {
    display: grid;

    align-content: start;

    gap: 18px;
}


.team-match-room-card,
.team-match-room-side-card {
    padding: 28px;

    border:
        1px solid
        rgba(22,73,49,.09);

    border-radius: 24px;

    background: #fffefa;
}


/* SECTION HEADING */

.team-match-room-section-heading {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;
}


.team-match-room-section-heading > div > span,
.team-match-room-side-card > span {
    color: #72a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .15em;
}


.team-match-room-section-heading h2 {
    margin: 6px 0 0;

    color: #143f30;

    font-size: 28px;

    letter-spacing: -.04em;
}


.team-match-schedule-badge {
    padding: 6px 9px;

    border-radius: 999px;

    background: #f0eee8;

    color: #887c70;

    font-size: 7px;

    font-weight: 900;
}


.team-match-schedule-badge.proposed {
    background: #fff1d6;

    color: #9d671c;
}


.team-match-schedule-badge.confirmed {
    background: #e4f3cb;

    color: #4f7835;
}


/* NO SCHEDULE */

.team-match-no-schedule {
    margin-top: 24px;

    padding: 25px;

    border-radius: 18px;

    background: #f6f8f0;
}


.team-match-no-schedule p {
    margin: 0;

    color: #76837b;

    font-size: 10px;
}


.team-match-no-schedule button {
    height: 45px;

    margin-top: 15px;

    padding: 0 15px;

    display: flex;

    align-items: center;

    gap: 18px;

    border: 0;

    border-radius: 12px;

    background: #155039;

    color: white;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


.team-match-no-schedule button span {
    color: #b9ef59;

    font-size: 15px;
}


/* PROPOSAL */

.team-match-proposal {
    display: none;

    margin-top: 23px;
}


.team-match-proposal-banner {
    padding: 15px 17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-radius: 15px;

    background: #fff4df;
}


.team-match-proposal-banner span {
    display: block;

    color: #a16b24;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .12em;
}


.team-match-proposal-banner strong {
    display: block;

    margin-top: 4px;

    color: #604a30;

    font-size: 11px;
}


.team-match-proposal-banner p {
    margin: 0;

    color: #9a7e5b;

    font-size: 8px;
}


.team-match-proposal-details {
    margin-top: 11px;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 7px;
}


.team-match-proposal-details > div {
    padding: 12px;

    border-radius: 12px;

    background: #f5f7ef;
}


.team-match-proposal-details span {
    display: block;

    color: #88948c;

    font-size: 6px;

    font-weight: 900;
}


.team-match-proposal-details strong {
    display: block;

    margin-top: 5px;

    color: #345545;

    font-size: 9px;
}


.team-match-proposal-actions {
    margin-top: 13px;

    display: flex;

    justify-content: flex-end;

    gap: 8px;
}


.team-match-proposal-actions button {
    height: 43px;

    padding: 0 14px;

    border-radius: 12px;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


.team-match-request-change {
    border:
        1px solid
        rgba(22,73,50,.10);

    background: #f5f7ef;

    color: #52685d;
}


.team-match-accept-schedule {
    border: 0;

    background: #155039;

    color: white;
}


/* CONFIRMED */

.team-match-confirmed {
    display: none;

    margin-top: 24px;

    padding: 22px;

    align-items: center;

    gap: 16px;

    border-radius: 17px;

    background: #edf6d9;
}


.team-match-confirmed-icon {
    width: 51px;
    height: 51px;

    flex: 0 0 51px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    background: #155039;

    color: #c1f068;
}


.team-match-confirmed-icon svg {
    width: 26px;
    height: 26px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.team-match-confirmed span {
    color: #669339;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .12em;
}


.team-match-confirmed strong {
    display: block;

    margin-top: 4px;

    color: #244c38;

    font-size: 12px;
}


.team-match-confirmed p {
    margin: 4px 0 0;

    color: #71816f;

    font-size: 8px;
}


/* =====================================================
   NOTES
===================================================== */

.team-match-notes {
    margin-top: 22px;

    display: grid;

    gap: 9px;
}


.team-match-notes-empty {
    padding: 25px;

    text-align: center;

    border-radius: 15px;

    background: #f5f7ef;

    color: #849088;

    font-size: 9px;
}


.team-match-note {
    padding: 14px 16px;

    border-radius: 15px;

    background: #f5f7ef;
}


.team-match-note > div {
    display: flex;

    justify-content: space-between;

    gap: 20px;
}


.team-match-note strong {
    color: #294f3d;

    font-size: 9px;
}


.team-match-note span {
    color: #929c96;

    font-size: 7px;
}


.team-match-note p {
    margin: 7px 0 0;

    color: #66776e;

    font-size: 9px;

    line-height: 1.55;
}


.team-match-note-form {
    margin-top: 12px;

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 8px;
}


.team-match-note-form textarea {
    min-height: 48px;

    padding: 12px;

    resize: vertical;

    border:
        1px solid
        rgba(22,73,50,.10);

    border-radius: 13px;

    outline: none;

    background: #fafbf6;

    color: #173f30;

    font: inherit;

    font-size: 9px;
}


.team-match-note-form button {
    min-width: 110px;

    padding: 0 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border: 0;

    border-radius: 13px;

    background: #155039;

    color: white;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


/* =====================================================
   SIDE CARDS
===================================================== */

.team-match-room-side-card h3 {
    margin: 8px 0 0;

    color: #153f30;

    font-size: 21px;

    letter-spacing: -.03em;
}


.team-match-room-side-card > p {
    color: #78857e;

    font-size: 9px;

    line-height: 1.55;
}


.team-match-room-permission {
    margin-top: 17px;

    padding: 13px;

    border-radius: 13px;

    background: #f4f6ed;
}


.team-match-room-permission span {
    display: block;

    color: #88948d;

    font-size: 6px;

    font-weight: 900;
}


.team-match-room-permission strong {
    display: block;

    margin-top: 4px;

    color: #335544;

    font-size: 9px;
}


/* SCORE */

.match-room-score-card {
    background:
        linear-gradient(
            145deg,
            #edf6da,
            #fffefa
        );
}


.match-room-score-card button {
    width: 100%;
    height: 46px;

    margin-top: 15px;

    padding: 0 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    border-radius: 12px;

    background: #155039;

    color: white;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


.match-room-score-card button span {
    color: #b9ef59;

    font-size: 16px;
}


/* ACTIVITY */

.team-match-activity {
    margin-top: 18px;

    display: grid;

    gap: 13px;
}


.team-match-activity-item {
    display: flex;

    align-items: flex-start;

    gap: 10px;
}


.team-match-activity-item > i {
    width: 7px;
    height: 7px;

    margin-top: 3px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #8fc548;
}


.team-match-activity-item strong {
    display: block;

    color: #395948;

    font-size: 8px;

    line-height: 1.4;
}


.team-match-activity-item span {
    display: block;

    margin-top: 3px;

    color: #929d96;

    font-size: 7px;
}


.team-match-activity-empty {
    margin: 0;

    color: #87938c;

    font-size: 9px;
}


/* =====================================================
   SCHEDULE MODAL
===================================================== */

.team-match-schedule-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 25px;
}


.team-match-schedule-modal.open {
    display: flex;
}


.team-match-schedule-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(7,29,21,.58);

    backdrop-filter: blur(5px);
}


.team-match-schedule-card {
    position: relative;

    z-index: 2;

    width: min(590px,100%);

    max-height: calc(100vh - 50px);

    overflow-y: auto;

    padding: 29px;

    box-sizing: border-box;

    border-radius: 26px;

    background: #fffefa;

    box-shadow:
        0 30px 80px
        rgba(8,34,24,.25);
}


.team-match-schedule-header {
    display: flex;

    justify-content: space-between;

    gap: 25px;
}


.team-match-schedule-header span {
    color: #72a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .15em;
}


.team-match-schedule-header h2 {
    margin: 5px 0 0;

    color: #143f30;

    font-size: 28px;
}


.team-match-schedule-header p {
    color: #7c8881;

    font-size: 9px;
}


.team-match-schedule-header > button {
    width: 39px;
    height: 39px;

    border: 0;

    border-radius: 11px;

    background: #eff1e8;

    color: #476154;

    font-size: 22px;

    cursor: pointer;
}


/* FIELDS */

.team-match-schedule-fields {
    margin-top: 24px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}


.team-match-schedule-field.full {
    grid-column: 1 / -1;
}


.team-match-schedule-field label {
    display: block;

    color: #244b3a;

    font-size: 9px;

    font-weight: 800;
}


.team-match-schedule-field input {
    width: 100%;
    height: 48px;

    margin-top: 7px;

    padding: 0 12px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(22,73,50,.11);

    border-radius: 13px;

    outline: none;

    background: #f8f9f2;

    color: #173f30;

    font: inherit;

    font-size: 10px;
}


/* HOST */

.team-match-host-selection {
    margin-top: 24px;
}


.team-match-host-selection > span {
    color: #244b3a;

    font-size: 9px;

    font-weight: 900;
}


.team-match-host-selection > p {
    margin: 4px 0 0;

    color: #87928c;

    font-size: 8px;
}


.team-match-host-options {
    margin-top: 10px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;
}


.team-match-host-option {
    min-height: 50px;

    padding: 0 13px;

    border:
        1px solid
        rgba(22,73,50,.11);

    border-radius: 13px;

    background: #f6f8ef;

    color: #405f50;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


.team-match-host-option.active {
    border-color:
        rgba(98,157,51,.40);

    background: #e7f3cf;

    color: #155039;
}


/* SUBMIT */

.team-match-submit-schedule {
    width: 100%;
    height: 53px;

    margin-top: 24px;

    padding: 0 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    border-radius: 15px;

    background: #155039;

    color: white;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}


.team-match-submit-schedule span {
    color: #b9ef59;

    font-size: 18px;
}


/* =====================================================
   TOAST
===================================================== */

.team-match-room-toast {
    position: fixed;

    z-index: 10000;

    right: 27px;
    bottom: 27px;

    min-width: 280px;

    padding: 16px 18px;

    border-radius: 15px;

    background: #143f2f;

    color: white;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(15px);

    transition: .25s ease;
}


.team-match-room-toast.show {
    opacity: 1;

    transform: translateY(0);
}


.team-match-room-toast strong {
    display: block;

    color: #bdf267;

    font-size: 10px;
}


.team-match-room-toast span {
    display: block;

    margin-top: 4px;

    color: rgba(255,255,255,.70);

    font-size: 8px;
}


/* =====================================================
   NOT FOUND
===================================================== */

.team-match-room-not-found {
    min-height: calc(100vh - 100px);

    display: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.team-match-room-not-found strong {
    color: #143f30;

    font-size: 25px;
}


.team-match-room-not-found p {
    color: #78857e;

    font-size: 10px;
}


.team-match-room-not-found button {
    height: 45px;

    margin-top: 13px;

    padding: 0 16px;

    border: 0;

    border-radius: 12px;

    background: #155039;

    color: white;

    font-weight: 800;

    cursor: pointer;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .team-match-room-nav-links {
        display: none;
    }


    .team-match-room-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .team-match-room-nav-inner,
    .team-match-room-main {
        width: calc(100% - 32px);
    }


    .team-match-room-hero {
        padding: 27px 22px;
    }


    .team-match-room-versus {
        gap: 14px;
    }


    .team-match-room-logo {
        width: 72px;
        height: 72px;

        border-radius: 21px;

        font-size: 28px;
    }


    .team-match-room-hero-meta {
        grid-template-columns:
            repeat(2,1fr);
    }


    .team-match-room-hero-meta > div {
        border-left: 0 !important;

        border-bottom:
            1px solid
            rgba(255,255,255,.08);
    }


    .team-match-proposal-details {
        grid-template-columns:
            repeat(2,1fr);
    }


    .team-match-note-form {
        grid-template-columns: 1fr;
    }


    .team-match-schedule-fields {
        grid-template-columns: 1fr;
    }


    .team-match-schedule-field.full {
        grid-column: auto;
    }

}

.team-challenges-test-btn {
    height: 43px;

    margin-top: 8px !important;

    padding: 0 15px;

    border:
        1px solid
        rgba(22,73,50,.12) !important;

    border-radius: 12px;

    background: #f4f6ed !important;

    color: #52705f !important;

    font-size: 8px !important;

    font-weight: 800;

    cursor: pointer;
}

/* =====================================================
   TEAM SCORECARD
===================================================== */

.team-scorecard-page {
    margin: 0;
    background: #f8f7ef;
    color: #123b2d;
}


/* NAV */

.team-scorecard-nav {
    background: rgba(250,249,242,.97);
    border-bottom: 1px solid rgba(21,70,49,.08);
}

.team-scorecard-nav-inner {
    width: min(1600px, calc(100% - 70px));
    height: 100px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team-scorecard-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    color: #123b2d;
    text-decoration: none;
}

.team-scorecard-brand-mark {
    width: 54px;
    height: 54px;

    overflow: hidden;

    border-radius: 16px;
}

.team-scorecard-brand-mark img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.team-scorecard-brand strong {
    display: block;

    font-size: 19px;
    font-weight: 800;
}

.team-scorecard-brand span {
    display: block;

    margin-top: 3px;

    color: #7c8881;

    font-size: 11px;
}

.team-scorecard-nav-links {
    display: flex;

    gap: 36px;
}

.team-scorecard-nav-links a {
    color: #68766f;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;
}

.team-scorecard-nav-links a.active {
    color: #155239;
}

.team-scorecard-back {
    height: 47px;

    padding: 0 18px;

    border: 1px solid rgba(23,83,58,.12);

    border-radius: 14px;

    background: white;

    color: #164b36;

    font-weight: 800;

    cursor: pointer;
}


/* MAIN */

.team-scorecard-main {
    width: min(1500px, calc(100% - 70px));

    margin: auto;

    padding: 55px 0 110px;
}


/* =====================================================
   HERO
===================================================== */

.team-scorecard-hero {
    min-height: 410px;

    padding: 34px 45px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    box-sizing: border-box;

    border-radius: 31px;

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(188,238,93,.18),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #0c3829,
            #174f38
        );

    color: white;
}

.team-scorecard-hero-top {
    display: flex;

    align-items: center;
    justify-content: space-between;
}

.team-scorecard-hero-top > div {
    display: flex;

    align-items: center;

    gap: 8px;
}

.team-scorecard-hero-top > div > span {
    color: #b8ef63;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .16em;
}

.team-scorecard-hero-top > span {
    color: rgba(255,255,255,.42);

    font-size: 8px;

    font-weight: 800;
}

.team-scorecard-status {
    padding: 6px 9px;

    border-radius: 999px;

    background: rgba(255,255,255,.09);

    color: rgba(255,255,255,.7);

    font-size: 7px;

    font-weight: 900;
}

.team-scorecard-status.submitted {
    background: rgba(255,211,131,.13);

    color: #ffd587;
}

.team-scorecard-status.disputed {
    background: rgba(255,145,120,.15);

    color: #ffb19d;
}

.team-scorecard-status.confirmed {
    background: rgba(187,239,96,.14);

    color: #c6f371;
}


/* VERSUS */

.team-scorecard-versus {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 35px;
}

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

.team-scorecard-logo {
    width: 95px;
    height: 95px;

    margin: auto;

    display: grid;
    place-items: center;

    border:
        5px solid
        rgba(255,255,255,.16);

    border-radius: 28px;

    background: #dff1b9;

    color: #174f38;

    font-size: 39px;

    font-weight: 900;
}

.team-scorecard-logo.opponent {
    background: #f0dfc0;

    color: #755636;
}

.team-scorecard-team > strong {
    display: block;

    margin-top: 11px;

    color: white;

    font-size: 18px;
}

.team-scorecard-main-score {
    margin-top: 6px;

    color: #bcef63;

    font-size: 35px;

    font-weight: 900;

    letter-spacing: -.04em;
}

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

.team-scorecard-center span {
    display: block;

    color: rgba(255,255,255,.4);

    font-size: 7px;

    font-weight: 900;
}

.team-scorecard-center strong {
    display: block;

    margin-top: 4px;

    color: white;

    font-size: 19px;
}


/* RESULT */

.team-scorecard-result {
    padding: 15px 18px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 17px;

    background: rgba(255,255,255,.055);
}

.team-scorecard-result span {
    display: block;

    color: rgba(255,255,255,.43);

    font-size: 6px;

    font-weight: 900;
}

.team-scorecard-result strong {
    display: block;

    margin-top: 5px;

    color: white;

    font-size: 12px;
}


/* =====================================================
   LAYOUT
===================================================== */

.team-scorecard-layout {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        minmax(0,1.3fr)
        minmax(290px,.7fr);

    gap: 18px;
}

.team-scorecard-left,
.team-scorecard-right {
    display: grid;

    align-content: start;

    gap: 18px;
}

.team-scorecard-card,
.team-scorecard-side-card {
    padding: 28px;

    border:
        1px solid
        rgba(22,73,49,.09);

    border-radius: 24px;

    background: #fffefa;
}


/* HEADING */

.team-scorecard-section-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.team-scorecard-section-heading span,
.team-scorecard-side-card > span {
    color: #72a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .15em;
}

.team-scorecard-section-heading h2 {
    margin: 6px 0 0;

    color: #143f30;

    font-size: 28px;

    letter-spacing: -.04em;
}

.team-scorecard-host-badge {
    padding: 6px 9px;

    border-radius: 999px;

    background: #e8f3d3;

    color: #527737;

    font-size: 7px;

    font-weight: 900;
}

.team-scorecard-helper {
    color: #7b8881;

    font-size: 9px;

    line-height: 1.5;
}


/* =====================================================
   CRICKET FORM
===================================================== */

.score-form-sport {
    display: none;

    margin-top: 22px;
}

#cricket-score-form {
    gap: 11px;
}

.score-team-entry {
    padding: 18px;

    border-radius: 17px;

    background: #f5f7ef;
}

.score-team-entry h3 {
    margin: 0;

    color: #174532;

    font-size: 15px;
}

.cricket-score-fields {
    margin-top: 15px;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 8px;
}

.cricket-score-fields label span,
.simple-score-team label span {
    display: block;

    color: #86928a;

    font-size: 6px;

    font-weight: 900;
}

.cricket-score-fields input {
    width: 100%;
    height: 45px;

    margin-top: 6px;

    padding: 0 10px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(22,73,50,.11);

    border-radius: 11px;

    outline: none;

    background: white;

    color: #173f30;

    font: inherit;

    font-size: 10px;
}


/* =====================================================
   SIMPLE SCORE
===================================================== */

#simple-score-form {
    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 18px;
}

.simple-score-team {
    padding: 20px;

    text-align: center;

    border-radius: 17px;

    background: #f5f7ef;
}

.simple-score-team h3 {
    margin: 0;

    color: #174532;

    font-size: 15px;
}

.simple-score-team label {
    display: block;

    margin-top: 14px;
}

.simple-score-team input {
    width: 100%;
    height: 55px;

    margin-top: 6px;

    text-align: center;

    border:
        1px solid
        rgba(22,73,50,.11);

    border-radius: 13px;

    outline: none;

    background: white;

    color: #174532;

    font-size: 22px;

    font-weight: 800;
}

.simple-score-vs {
    color: #819087;

    font-size: 8px;

    font-weight: 900;
}


/* MVP */

.team-scorecard-mvp {
    margin-top: 21px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 16px;

    border-radius: 15px;

    background: #f5f7ef;
}

.team-scorecard-mvp span {
    display: block;

    color: #6f9f41;

    font-size: 7px;

    font-weight: 900;
}

.team-scorecard-mvp strong {
    display: block;

    margin-top: 3px;

    color: #8a958e;

    font-size: 7px;
}

.team-scorecard-mvp input {
    width: 220px;
    height: 42px;

    padding: 0 11px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(22,73,50,.10);

    border-radius: 11px;

    outline: none;

    background: white;

    font-size: 9px;
}


/* NOTES */

.team-scorecard-result-notes {
    margin-top: 19px;
}

.team-scorecard-result-notes label {
    color: #244b3a;

    font-size: 9px;

    font-weight: 800;
}

.team-scorecard-result-notes label span {
    margin-left: 5px;

    color: #919c95;

    font-size: 7px;
}

.team-scorecard-result-notes textarea {
    width: 100%;
    min-height: 80px;

    margin-top: 7px;

    padding: 12px;

    box-sizing: border-box;

    resize: vertical;

    border:
        1px solid
        rgba(22,73,50,.10);

    border-radius: 13px;

    outline: none;

    background: #f8f9f2;

    color: #173f30;

    font: inherit;

    font-size: 9px;
}


/* SUBMIT */

.team-scorecard-submit {
    width: 100%;
    height: 52px;

    margin-top: 20px;

    padding: 0 16px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 0;

    border-radius: 14px;

    background: #155039;

    color: white;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}

.team-scorecard-submit span {
    color: #b9ef59;

    font-size: 17px;
}


/* =====================================================
   REVIEW
===================================================== */

.score-review-card {
    display: none;
}

.score-review-message {
    margin-top: 20px;

    padding: 20px;

    border-radius: 17px;

    background: #f5f7ef;
}

.score-review-message span {
    color: #72a43e;

    font-size: 7px;

    font-weight: 900;
}

.score-review-message strong {
    display: block;

    margin-top: 5px;

    color: #254e3b;

    font-size: 14px;
}

.score-review-message p {
    margin: 5px 0 0;

    color: #77847c;

    font-size: 9px;
}

.score-review-actions {
    margin-top: 12px;

    display: flex;

    justify-content: flex-end;

    gap: 8px;
}

.score-review-actions button {
    height: 43px;

    padding: 0 14px;

    border-radius: 12px;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}

.score-report-btn {
    border:
        1px solid
        rgba(22,73,50,.10);

    background: #f6f7f0;

    color: #5b6c62;
}

.score-confirm-btn {
    border: 0;

    background: #155039;

    color: white;
}

.score-resubmit-btn,
.score-dev-confirm-btn {
    width: 100%;
    min-height: 43px;

    margin-top: 9px;

    border-radius: 12px;

    font-size: 8px;

    font-weight: 800;

    cursor: pointer;
}

.score-resubmit-btn {
    border: 0;

    background: #155039;

    color: white;
}

.score-dev-confirm-btn {
    border:
        1px dashed
        rgba(22,73,50,.22);

    background: #f5f7ef;

    color: #687c70;
}


/* =====================================================
   SIDE
===================================================== */

.team-scorecard-side-card h3 {
    margin: 8px 0 0;

    color: #153f30;

    font-size: 21px;

    letter-spacing: -.03em;
}

.team-scorecard-side-card > p {
    color: #7a8780;

    font-size: 9px;

    line-height: 1.55;
}

.team-scorecard-detail {
    padding: 13px 0;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    border-bottom:
        1px solid
        rgba(22,72,49,.07);
}

.team-scorecard-detail:last-child {
    border-bottom: 0;
}

.team-scorecard-detail span {
    color: #859088;

    font-size: 9px;
}

.team-scorecard-detail strong {
    color: #294f3d;

    font-size: 10px;
}

.team-scorecard-mvp-card {
    background:
        linear-gradient(
            145deg,
            #edf6d8,
            #fffefa
        );
}


/* =====================================================
   TOAST
===================================================== */

.team-scorecard-toast {
    position: fixed;

    right: 27px;
    bottom: 27px;

    z-index: 10000;

    min-width: 280px;

    padding: 16px 18px;

    border-radius: 15px;

    background: #143f2f;

    color: white;

    opacity: 0;

    pointer-events: none;

    transform: translateY(15px);

    transition: .25s ease;
}

.team-scorecard-toast.show {
    opacity: 1;

    transform: translateY(0);
}

.team-scorecard-toast strong {
    display: block;

    color: #bdf267;

    font-size: 10px;
}

.team-scorecard-toast span {
    display: block;

    margin-top: 4px;

    color: rgba(255,255,255,.70);

    font-size: 8px;
}


/* NOT FOUND */

.team-scorecard-not-found {
    min-height: calc(100vh - 100px);

    display: none;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}

.team-scorecard-not-found strong {
    color: #143f30;

    font-size: 25px;
}

.team-scorecard-not-found p {
    color: #78857e;

    font-size: 10px;
}

.team-scorecard-not-found button {
    height: 45px;

    margin-top: 13px;

    padding: 0 16px;

    border: 0;

    border-radius: 12px;

    background: #155039;

    color: white;

    font-weight: 800;

    cursor: pointer;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .team-scorecard-nav-links {
        display: none;
    }


    .team-scorecard-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .team-scorecard-nav-inner,
    .team-scorecard-main {
        width: calc(100% - 32px);
    }


    .team-scorecard-hero {
        padding: 27px 22px;
    }


    .team-scorecard-versus {
        gap: 12px;
    }


    .team-scorecard-logo {
        width: 69px;
        height: 69px;

        border-radius: 20px;

        font-size: 28px;
    }


    .team-scorecard-main-score {
        font-size: 25px;
    }


    .cricket-score-fields {
        grid-template-columns: 1fr;
    }


    #simple-score-form {
        grid-template-columns: 1fr;
    }


    .simple-score-vs {
        text-align: center;
    }


    .team-scorecard-mvp {
        align-items: stretch;

        flex-direction: column;
    }


    .team-scorecard-mvp input {
        width: 100%;
    }


    .score-review-actions {
        flex-direction: column;
    }

}

/* =====================================================
   TEAM HQ — MATCHES + SCORECARDS
===================================================== */

.team-data-panel-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;
}


.team-data-panel-heading > div > span {
    color: #72a43e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .15em;
}


.team-data-panel-heading h2 {
    margin: 6px 0 0;

    color: #143f30;

    font-size: 29px;

    letter-spacing: -.04em;
}


.team-data-panel-heading p {
    margin: 7px 0 0;

    color: #7b8881;

    font-size: 9px;

    line-height: 1.5;
}


.team-data-panel-action {
    min-height: 45px;

    padding: 0 15px;

    display: flex;

    align-items: center;

    gap: 15px;

    border: 0;

    border-radius: 13px;

    background: #155039;

    color: white;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


.team-data-panel-action span {
    color: #b9ef59;

    font-size: 16px;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.team-tab-data-empty {
    min-height: 240px;

    margin-top: 22px;

    display: none;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    border:
        1px dashed
        rgba(22,73,50,.15);

    border-radius: 20px;

    background: #f9faf4;
}


.team-tab-data-empty strong {
    color: #174532;

    font-size: 15px;
}


.team-tab-data-empty p {
    max-width: 360px;

    margin: 7px 0 0;

    color: #849088;

    font-size: 9px;

    line-height: 1.5;
}


.team-tab-data-empty button {
    min-height: 43px;

    margin-top: 15px;

    padding: 0 14px;

    border: 0;

    border-radius: 12px;

    background: #155039;

    color: white;

    font-size: 8px;

    font-weight: 800;

    cursor: pointer;
}


/* =====================================================
   MATCH LIST
===================================================== */

.team-tab-match-list {
    margin-top: 22px;

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 11px;
}


.team-tab-match-card {
    padding: 19px;

    border:
        1px solid
        rgba(22,73,50,.09);

    border-radius: 18px;

    background: #fdfdf8;
}


.team-tab-match-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.team-tab-match-top > div {
    display: flex;

    align-items: center;

    gap: 7px;
}


.team-tab-match-top > div > span {
    color: #72a43e;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .12em;
}


.team-tab-match-top > span {
    color: #9aa59e;

    font-size: 7px;

    font-weight: 900;
}


.team-tab-match-status {
    padding: 5px 7px;

    border-radius: 999px;

    font-size: 6px;

    font-weight: 900;
}


.team-tab-match-status.planning {
    background: #fff0d3;

    color: #9f681f;
}


.team-tab-match-status.upcoming {
    background: #e6f3cd;

    color: #507837;
}


.team-tab-match-status.completed {
    background: #eaede8;

    color: #597066;
}


/* OPPONENT */

.team-tab-match-opponent {
    margin-top: 17px;

    display: flex;

    align-items: center;

    gap: 12px;
}


.team-tab-match-opponent-logo {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    background: #e7f3cd;

    color: #174f38;

    font-size: 19px;

    font-weight: 900;
}


.team-tab-match-opponent span {
    color: #8b9790;

    font-size: 6px;

    font-weight: 900;
}


.team-tab-match-opponent h3 {
    margin: 3px 0 0;

    color: #174532;

    font-size: 15px;
}


/* MATCH DETAILS */

.team-tab-match-details {
    margin-top: 17px;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 6px;
}


.team-tab-match-details > div {
    min-width: 0;

    padding: 9px;

    border-radius: 10px;

    background: #f2f5eb;
}


.team-tab-match-details span {
    display: block;

    color: #8b9690;

    font-size: 6px;

    font-weight: 900;
}


.team-tab-match-details strong {
    display: block;

    margin-top: 4px;

    overflow: hidden;

    color: #3c5a4b;

    font-size: 8px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.team-tab-open-match {
    width: 100%;
    height: 43px;

    margin-top: 14px;

    padding: 0 13px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 0;

    border-radius: 11px;

    background: #155039;

    color: white;

    font-size: 8px;

    font-weight: 800;

    cursor: pointer;
}


.team-tab-open-match span {
    color: #b9ef59;

    font-size: 15px;
}


/* =====================================================
   SCORECARDS
===================================================== */

.team-tab-scorecard-list {
    margin-top: 22px;

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 11px;
}


.team-tab-scorecard-card {
    padding: 19px;

    border:
        1px solid
        rgba(22,73,50,.09);

    border-radius: 18px;

    background: #fdfdf8;
}


.team-tab-scorecard-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.team-tab-scorecard-top > span {
    color: #72a43e;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .12em;
}


.team-tab-score-status {
    padding: 5px 7px;

    border-radius: 999px;

    font-size: 6px;

    font-weight: 900;
}


.team-tab-score-status.confirmed {
    background: #e4f3cb;

    color: #4e7736;
}


.team-tab-score-status.submitted {
    background: #fff1d6;

    color: #9e681f;
}


.team-tab-score-status.disputed {
    background: #f8dfda;

    color: #a85645;
}


/* SCORE */

.team-tab-score-versus {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 12px;
}


.team-tab-score-versus > div {
    min-width: 0;

    text-align: center;
}


.team-tab-score-versus > div > span {
    display: block;

    overflow: hidden;

    color: #5d7166;

    font-size: 8px;

    font-weight: 800;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.team-tab-score-versus > div > strong {
    display: block;

    margin-top: 6px;

    color: #174632;

    font-size: 25px;

    letter-spacing: -.04em;
}


.team-tab-score-versus > i {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #f0f2e9;

    color: #8a968f;

    font-size: 7px;

    font-style: normal;

    font-weight: 900;
}


/* RESULT */

.team-tab-score-result {
    margin-top: 17px;

    padding: 12px;

    border-radius: 12px;

    background: #edf5dc;
}


.team-tab-score-result span,
.team-tab-score-mvp span {
    display: block;

    color: #72a044;

    font-size: 6px;

    font-weight: 900;

    letter-spacing: .09em;
}


.team-tab-score-result strong,
.team-tab-score-mvp strong {
    display: block;

    margin-top: 4px;

    color: #315542;

    font-size: 9px;
}


.team-tab-score-mvp {
    margin-top: 8px;

    padding: 11px 12px;

    border-radius: 12px;

    background: #f5f7ef;
}


.team-tab-open-scorecard {
    width: 100%;
    height: 43px;

    margin-top: 14px;

    padding: 0 13px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 0;

    border-radius: 11px;

    background: #155039;

    color: white;

    font-size: 8px;

    font-weight: 800;

    cursor: pointer;
}


.team-tab-open-scorecard span {
    color: #b9ef59;

    font-size: 15px;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .team-data-panel-heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .team-tab-match-list,
    .team-tab-scorecard-list {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 500px) {

    .team-tab-match-details {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   TEAM HQ — LIVE OVERVIEW
===================================================== */

.team-overview-record {
    margin-bottom: 24px;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    overflow: hidden;

    border:
        1px solid
        rgba(22,73,50,.09);

    border-radius: 18px;

    background: #fffefa;
}


.team-overview-record > div {
    padding: 18px;
}


.team-overview-record > div + div {
    border-left:
        1px solid
        rgba(22,73,50,.07);
}


.team-overview-record span {
    display: block;

    color: #7fa84c;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .12em;
}


.team-overview-record strong {
    display: block;

    margin-top: 6px;

    color: #174532;

    font-size: 25px;

    letter-spacing: -.04em;
}


/* ACTIVITY */

.team-overview-activity-row {
    padding: 13px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-bottom:
        1px solid
        rgba(22,73,50,.07);
}


.team-overview-activity-row > div > span {
    display: block;

    color: #87938c;

    font-size: 6px;

    font-weight: 900;

    letter-spacing: .10em;
}


.team-overview-activity-row strong {
    display: block;

    margin-top: 3px;

    color: #234d39;

    font-size: 16px;
}


.team-overview-activity-row button {
    min-width: 55px;
    height: 33px;

    padding: 0 10px;

    border:
        1px solid
        rgba(22,73,50,.10);

    border-radius: 9px;

    background: #f4f6ed;

    color: #466555;

    font-size: 7px;

    font-weight: 800;

    cursor: pointer;
}


/* RECENT RESULT */

.team-overview-recent-result {
    margin-top: 16px;

    padding: 14px;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #edf6d8,
            #f8faef
        );
}


.team-overview-recent-result > span {
    color: #76a347;

    font-size: 6px;

    font-weight: 900;

    letter-spacing: .11em;
}


.team-overview-recent-result strong {
    display: block;

    margin-top: 5px;

    color: #244e39;

    font-size: 11px;
}


.team-overview-recent-result p {
    margin: 5px 0 0;

    color: #6e7e74;

    font-size: 8px;

    line-height: 1.5;
}


@media (max-width: 650px) {

    .team-overview-record {
        grid-template-columns:
            repeat(2,1fr);
    }


    .team-overview-record > div {
        border-left: 0 !important;

        border-bottom:
            1px solid
            rgba(22,73,50,.07);
    }

}

/* =====================================================
   TEAM LINEUP
===================================================== */

.team-lineup-page {
    margin: 0;
    background: #f8f7ef;
    color: #143f30;
}


.team-lineup-nav {
    border-bottom:
        1px solid
        rgba(21,70,49,.08);

    background:
        rgba(250,249,242,.97);
}


.team-lineup-nav-inner {
    width:
        min(
            1500px,
            calc(100% - 70px)
        );

    height: 96px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.team-lineup-brand {
    display: flex;
    align-items: center;

    gap: 12px;

    color: #143f30;
    text-decoration: none;
}


.team-lineup-brand-mark {
    width: 52px;
    height: 52px;

    overflow: hidden;

    border-radius: 15px;
}


.team-lineup-brand-mark img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.team-lineup-brand strong {
    display: block;

    font-size: 18px;
}


.team-lineup-brand span {
    display: block;

    margin-top: 3px;

    color: #7d8982;

    font-size: 10px;
}


.team-lineup-back {
    height: 45px;

    padding: 0 16px;

    border:
        1px solid
        rgba(22,73,50,.11);

    border-radius: 13px;

    background: white;

    color: #194b37;

    font-weight: 800;

    cursor: pointer;
}


/* MAIN */

.team-lineup-main {
    width:
        min(
            1450px,
            calc(100% - 70px)
        );

    margin: auto;

    padding: 48px 0 100px;
}


/* HERO */

.team-lineup-hero {
    padding: 34px 39px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #0d3929,
            #174f38
        );

    color: white;
}


.team-lineup-sport {
    color: #b9ef62;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .15em;
}


.team-lineup-hero h1 {
    margin: 8px 0 0;

    font-size:
        clamp(
            30px,
            4vw,
            47px
        );

    letter-spacing: -.045em;
}


.team-lineup-hero p {
    margin: 8px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            .63
        );

    font-size: 10px;
}


.team-lineup-count {
    min-width: 145px;

    padding: 19px;

    text-align: center;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 18px;

    background:
        rgba(255,255,255,.06);
}


.team-lineup-count span {
    display: block;

    color:
        rgba(
            255,
            255,
            255,
            .48
        );

    font-size: 7px;

    font-weight: 900;
}


.team-lineup-count strong {
    display: block;

    margin-top: 4px;

    color: #bff16c;

    font-size: 27px;
}


/* MATCH */

.team-lineup-match {
    margin-top: 15px;

    padding: 18px 25px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 25px;

    border:
        1px solid
        rgba(22,73,50,.08);

    border-radius: 19px;

    background: #fffefa;
}


.team-lineup-match > div:not(
    .team-lineup-vs
) {
    text-align: center;
}


.team-lineup-match span {
    display: block;

    color: #8a968f;

    font-size: 6px;

    font-weight: 900;
}


.team-lineup-match strong {
    display: block;

    margin-top: 4px;

    color: #234d39;

    font-size: 14px;
}


.team-lineup-vs {
    color: #789069;

    font-size: 8px;

    font-weight: 900;
}


/* LAYOUT */

.team-lineup-layout {
    margin-top: 18px;

    display: grid;

    grid-template-columns:
        minmax(0,1.4fr)
        minmax(280px,.6fr);

    gap: 18px;
}


.team-lineup-left,
.team-lineup-summary-card {
    border:
        1px solid
        rgba(22,73,50,.09);

    border-radius: 23px;

    background: #fffefa;
}


.team-lineup-left {
    padding: 27px;
}


.team-lineup-side {
    display: grid;

    align-content: start;

    gap: 12px;
}


.team-lineup-summary-card {
    padding: 22px;
}


/* HEADING */

.team-lineup-section-heading {
    display: flex;

    justify-content: space-between;

    gap: 25px;
}


.team-lineup-section-heading > div > span,
.team-lineup-summary-card > span {
    color: #72a43e;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .13em;
}


.team-lineup-section-heading h2 {
    margin: 6px 0 0;

    color: #143f30;

    font-size: 27px;

    letter-spacing: -.04em;
}


.team-lineup-section-heading p {
    margin: 7px 0 0;

    color: #7c8881;

    font-size: 9px;

    line-height: 1.5;
}


.team-lineup-state {
    height: fit-content;

    padding: 6px 9px;

    border-radius: 999px;

    background: #fff0d3;

    color: #9d681e;

    font-size: 7px;

    font-weight: 900;
}


.team-lineup-state.confirmed {
    background: #e4f3cb;

    color: #4e7835;
}


/* PLAYER GRID */

.team-lineup-player-grid {
    margin-top: 21px;

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 9px;
}


.team-lineup-player-card {
    min-height: 83px;

    padding: 12px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 11px;

    text-align: left;

    border:
        1px solid
        rgba(22,73,50,.09);

    border-radius: 15px;

    background: #f8f9f3;

    cursor: pointer;
}


.team-lineup-player-card.selected {
    border-color:
        rgba(91,143,47,.35);

    background: #edf6d8;
}


.team-lineup-player-avatar {
    width: 49px;
    height: 49px;

    overflow: hidden;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: #dcecbf;

    color: #28563e;

    font-weight: 900;
}


.team-lineup-player-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.team-lineup-player-heading {
    display: flex;

    align-items: center;

    gap: 7px;
}


.team-lineup-player-heading strong {
    color: #264f3c;

    font-size: 10px;
}


.team-lineup-player-heading span {
    padding: 4px 6px;

    border-radius: 999px;

    background: #e3efd0;

    color: #668d42;

    font-size: 6px;

    font-weight: 900;
}


.team-lineup-player-info p {
    margin: 5px 0 0;

    color: #7b8881;

    font-size: 8px;
}


.team-lineup-check {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(22,73,50,.13);

    border-radius: 8px;

    color: transparent;
}


.team-lineup-player-card.selected
.team-lineup-check {
    border-color: #5f9239;

    background: #5f9239;

    color: white;
}


/* EMPTY */

.team-lineup-empty {
    min-height: 220px;

    display: none;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}


.team-lineup-empty strong {
    color: #244c39;

    font-size: 14px;
}


.team-lineup-empty p {
    color: #849088;

    font-size: 9px;
}


/* SIDE */

.team-lineup-summary-card h3 {
    margin: 7px 0 0;

    color: #184733;

    font-size: 21px;
}


.team-lineup-summary-card > p {
    color: #7b8881;

    font-size: 9px;

    line-height: 1.5;
}


.team-lineup-progress {
    height: 8px;

    margin-top: 18px;

    overflow: hidden;

    border-radius: 999px;

    background: #eaede5;
}


.team-lineup-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: #72a843;

    transition: width .25s ease;
}


.team-lineup-selected-list {
    margin-top: 15px;

    display: grid;

    gap: 6px;
}


.team-lineup-selected-row {
    min-height: 35px;

    padding: 0 9px;

    display: flex;

    align-items: center;

    gap: 9px;

    border-radius: 10px;

    background: #f4f6ed;
}


.team-lineup-selected-row span {
    width: 21px;
    height: 21px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background: #dfecc7;

    color: #567c37;

    font-size: 7px;

    font-weight: 900;
}


.team-lineup-selected-row strong {
    color: #3c5b4b;

    font-size: 8px;
}


.team-lineup-selected-empty {
    margin: 0;

    color: #87938c;

    font-size: 9px;
}


/* BUTTONS */

.team-lineup-save-draft,
.team-lineup-confirm,
.team-lineup-edit {
    width: 100%;

    min-height: 44px;

    margin-top: 8px;

    border-radius: 12px;

    font-size: 8px;

    font-weight: 800;

    cursor: pointer;
}


.team-lineup-save-draft,
.team-lineup-edit {
    border:
        1px solid
        rgba(22,73,50,.11);

    background: #f5f7ef;

    color: #4c6658;
}


.team-lineup-confirm {
    padding: 0 13px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 0;

    background: #155039;

    color: white;
}


.team-lineup-confirm span {
    color: #b9ef59;

    font-size: 16px;
}


.team-lineup-confirm:disabled {
    opacity: .42;

    cursor: not-allowed;
}


/* MATCH ROOM LINEUP CARD */

.team-match-lineup-status-row {
    padding: 11px 0;

    border-bottom:
        1px solid
        rgba(22,73,50,.07);
}


.team-match-lineup-status-row span {
    display: block;

    color: #8b9690;

    font-size: 6px;

    font-weight: 900;
}


.team-match-lineup-status-row strong {
    display: block;

    margin-top: 4px;

    color: #335544;

    font-size: 9px;
}


.team-match-open-lineup {
    width: 100%;
    height: 44px;

    margin-top: 14px;

    padding: 0 13px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 0;

    border-radius: 11px;

    background: #155039;

    color: white;

    font-size: 8px;

    font-weight: 800;

    cursor: pointer;
}


.team-match-open-lineup span {
    color: #b9ef59;

    font-size: 15px;
}


/* TOAST */

.team-lineup-toast {
    position: fixed;

    right: 26px;
    bottom: 26px;

    z-index: 10000;

    min-width: 270px;

    padding: 15px 17px;

    border-radius: 14px;

    background: #143f2f;

    color: white;

    opacity: 0;

    pointer-events: none;

    transform: translateY(15px);

    transition: .25s ease;
}


.team-lineup-toast.show {
    opacity: 1;

    transform: translateY(0);
}


.team-lineup-toast strong {
    display: block;

    color: #bdf267;

    font-size: 10px;
}


.team-lineup-toast span {
    display: block;

    margin-top: 4px;

    color:
        rgba(
            255,
            255,
            255,
            .70
        );

    font-size: 8px;
}


/* NOT FOUND */

.team-lineup-not-found {
    min-height:
        calc(
            100vh - 96px
        );

    display: none;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}


@media (max-width: 900px) {

    .team-lineup-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .team-lineup-nav-inner,
    .team-lineup-main {
        width:
            calc(
                100% - 30px
            );
    }


    .team-lineup-hero {
        align-items: flex-start;

        flex-direction: column;
    }


    .team-lineup-count {
        width: 100%;

        box-sizing: border-box;
    }


    .team-lineup-player-grid {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   MATCH LINEUP — LEADERSHIP + BENCH
===================================================== */

.team-lineup-leadership-field {
    margin-top: 15px;
}


.team-lineup-leadership-field label {
    display: block;

    color: #405f50;

    font-size: 8px;

    font-weight: 800;
}


.team-lineup-leadership-field select {
    width: 100%;
    height: 45px;

    margin-top: 7px;

    padding: 0 11px;

    border:
        1px solid
        rgba(22,73,50,.11);

    border-radius: 12px;

    outline: none;

    background: #f7f9f1;

    color: #244c39;

    font: inherit;

    font-size: 9px;
}


.team-lineup-leadership-field select:disabled {
    opacity: .6;
}


/* BENCH */

.team-lineup-bench-list {
    margin-top: 15px;

    display: grid;

    gap: 7px;
}


.team-lineup-bench-player {
    width: 100%;

    min-height: 58px;

    padding: 8px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 9px;

    text-align: left;

    border:
        1px solid
        rgba(22,73,50,.09);

    border-radius: 12px;

    background: #f7f9f1;

    cursor: pointer;
}


.team-lineup-bench-player.selected {
    border-color:
        rgba(91,143,47,.35);

    background: #eaf4d6;
}


.team-lineup-bench-avatar {
    width: 39px;
    height: 39px;

    overflow: hidden;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background: #dfecc8;

    color: #315942;

    font-size: 9px;

    font-weight: 900;
}


.team-lineup-bench-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.team-lineup-bench-player strong {
    display: block;

    color: #345543;

    font-size: 8px;
}


.team-lineup-bench-player span {
    display: block;

    margin-top: 3px;

    color: #849088;

    font-size: 7px;
}


.team-lineup-bench-player i {
    width: 25px;
    height: 25px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    background: #e7ebe1;

    color: #607267;

    font-size: 10px;

    font-style: normal;

    font-weight: 900;
}


.team-lineup-bench-player.selected i {
    background: #61943b;

    color: white;
}


/* MATCH ROOM EXTRA */

.team-match-lineup-extra {
    padding: 9px 0;

    border-bottom:
        1px solid
        rgba(22,73,50,.07);
}


.team-match-lineup-extra span {
    display: block;

    color: #8b9690;

    font-size: 6px;

    font-weight: 900;
}


.team-match-lineup-extra strong {
    display: block;

    margin-top: 4px;

    color: #335544;

    font-size: 9px;
}

/* =====================================================
   TEAM MATCH — LIFECYCLE
===================================================== */

.team-match-lifecycle-card {
    position: relative;
}


.team-match-lifecycle-pill {
    width: fit-content;

    margin-top: 10px;

    padding: 6px 9px;

    border-radius: 999px;

    background: #eef0e9;

    color: #65756c;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .08em;
}


.team-match-lifecycle-pill.upcoming {
    background: #fff0d4;

    color: #99651f;
}


.team-match-lifecycle-pill.ready-to-play {
    background: #e8f4ce;

    color: #567d38;
}


.team-match-lifecycle-pill.live {
    background: #f6ded8;

    color: #aa4c3c;
}


.team-match-lifecycle-pill.awaiting-score {
    background: #e2ecf4;

    color: #4d7188;
}


.team-match-lifecycle-pill.completed {
    background: #def1d1;

    color: #4e7937;
}


.team-match-lifecycle-card h3 {
    margin: 10px 0 0;

    color: #244e3a;

    font-size: 17px;
}


.team-match-lifecycle-card > p {
    margin: 6px 0 0;

    color: #7c8981;

    font-size: 8px;

    line-height: 1.55;
}


/* FLOW */

.team-match-lifecycle-flow {
    margin-top: 18px;

    display: flex;

    align-items: center;

    gap: 5px;
}


.team-match-lifecycle-flow > span {
    min-width: 38px;

    padding: 6px 5px;

    text-align: center;

    border-radius: 8px;

    background: #f0f2eb;

    color: #9aa39d;

    font-size: 5px;

    font-weight: 900;
}


.team-match-lifecycle-flow > span.done {
    background: #e5f0d2;

    color: #668b47;
}


.team-match-lifecycle-flow > span.active {
    background: #155039;

    color: #c1f16d;
}


.team-match-lifecycle-flow > i {
    flex: 1;

    height: 1px;

    background:
        rgba(
            22,
            73,
            50,
            .12
        );
}


/* START */

.team-match-start-btn,
.team-match-score-lifecycle-btn {
    width: 100%;
    height: 44px;

    margin-top: 15px;

    padding: 0 13px;

    display: none;

    align-items: center;
    justify-content: space-between;

    border: 0;

    border-radius: 11px;

    background: #155039;

    color: white;

    font-size: 8px;

    font-weight: 900;

    cursor: pointer;
}


.team-match-start-btn span,
.team-match-score-lifecycle-btn span {
    color: #b9ef59;

    font-size: 15px;
}


/* END */

.team-match-end-btn {
    width: 100%;
    height: 44px;

    margin-top: 15px;

    display: none;

    border:
        1px solid
        rgba(165,70,52,.16);

    border-radius: 11px;

    background: #fbebe7;

    color: #a74b3b;

    font-size: 8px;

    font-weight: 900;

    cursor: pointer;
}

/* =====================================================
   TEAM SCORECARD — MVP SELECT
===================================================== */

.team-scorecard-mvp select {
    width: 100%;
    min-height: 46px;

    padding: 0 14px;

    border:
        1px solid
        rgba(22, 73, 50, .12);

    border-radius: 12px;

    outline: none;

    background: #f7f9f1;

    color: #244c39;

    font: inherit;
    font-size: 9px;

    cursor: pointer;
}


.team-scorecard-mvp select:focus {
    border-color:
        rgba(91, 143, 47, .45);

    box-shadow:
        0 0 0 3px
        rgba(105, 154, 62, .08);
}


.team-scorecard-mvp select:disabled {
    opacity: .60;
    cursor: not-allowed;
}


.team-scorecard-mvp select option,
.team-scorecard-mvp select optgroup {
    color: #244c39;
}

/* =====================================================
   TEAM MATCHES — FULL LIFECYCLE
===================================================== */

.team-matches-summary {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(135px, 1fr)
        );
}


/* STATUS TABS */

.team-matches-tabs {
    overflow-x: auto;

    scrollbar-width: none;
}


.team-matches-tabs::-webkit-scrollbar {
    display: none;
}


.team-match-tab {
    flex-shrink: 0;
}


/* NEW MATCH STATUS COLORS */

.team-match-status.ready-to-play {
    background: #e7f3cf;

    color: #567d38;
}


.team-match-status.live {
    background: #f6ded8;

    color: #aa4b3c;
}


.team-match-status.awaiting-score {
    background: #e2edf4;

    color: #4d7189;
}


/* STATUS DESCRIPTION */

.team-match-stage-copy {
    margin: 10px 0 0;

    color: #7d8982;

    font-size: 8px;

    line-height: 1.5;
}


.team-match-status.live +
.team-match-stage-copy {
    color: #a65b4d;
}


/* SCORE PREVIEW */

.team-match-score-preview {
    margin-top: 15px;

    padding: 13px 15px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 15px;

    border:
        1px solid
        rgba(22, 73, 50, .08);

    border-radius: 14px;

    background: #f5f7ef;
}


.team-match-score-preview > div {
    text-align: center;
}


.team-match-score-preview span {
    display: block;

    color: #859188;

    font-size: 6px;

    font-weight: 900;

    letter-spacing: .06em;
}


.team-match-score-preview strong {
    display: block;

    margin-top: 4px;

    color: #244e3a;

    font-size: 15px;
}


.team-match-score-preview i {
    max-width: 125px;

    color: #668055;

    text-align: center;

    font-size: 7px;

    font-style: normal;

    font-weight: 800;

    line-height: 1.4;
}


/* LIVE CARD */

.team-match-card:has(
    .team-match-status.live
) {
    border-color:
        rgba(176, 77, 59, .20);
}


.team-match-card:has(
    .team-match-status.live
)
.team-match-open {
    background: #a94f3e;
}


/* READY CARD */

.team-match-card:has(
    .team-match-status.ready-to-play
)
.team-match-open {
    background: #466f34;
}


/* AWAITING SCORE */

.team-match-card:has(
    .team-match-status.awaiting-score
)
.team-match-open {
    background: #315e72;
}


@media (max-width: 650px) {

    .team-matches-summary {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .team-match-score-preview {
        gap: 8px;
    }

}

/* =====================================================
   TEAM HQ MATCHES — FULL LIFECYCLE
===================================================== */

.team-tab-match-status.ready-to-play {
    background: #e7f3cf;
    color: #567d38;
}


.team-tab-match-status.live {
    background: #f6ded8;
    color: #a94d3c;
}


.team-tab-match-status.awaiting-score {
    background: #e2edf4;
    color: #4d7189;
}


/* STAGE COPY */

.team-tab-match-stage {
    margin: 12px 0 0;

    color: #7d8982;

    font-size: 8px;

    line-height: 1.5;
}


.team-tab-match-card:has(
    .team-tab-match-status.live
)
.team-tab-match-stage {
    color: #9d5a4e;
}


/* READY */

.team-tab-open-match.ready-to-play {
    background: #466f34;
}


/* LIVE */

.team-tab-open-match.live {
    background: #a94f3e;
}


/* AWAITING SCORE */

.team-tab-open-match.awaiting-score {
    background: #315e72;
}


/* COMPLETED */

.team-tab-open-match.completed {
    background: #254f3b;
}

/* =====================================================
   TEAM OVERVIEW — LIVE NEXT MATCH
===================================================== */

.team-next-match-live[
    data-match-status="ready-to-play"
] {
    background:
        linear-gradient(
            145deg,
            #edf6d8,
            #f8faef
        );
}


.team-next-match-live[
    data-match-status="live"
] {
    background:
        linear-gradient(
            145deg,
            #fae8e3,
            #fff7f3
        );
}


.team-next-match-live[
    data-match-status="live"
]
#next-match-date {
    color: #ad4f3e;
}


.team-next-match-live[
    data-match-status="ready-to-play"
]
#next-match-date {
    color: #618b3d;
}


.team-next-match-live[
    data-match-status="live"
]
#overview-next-match-button {
    background: #a94f3e;
}


.team-next-match-live[
    data-match-status="ready-to-play"
]
#overview-next-match-button {
    background: #466f34;
}

/* =====================================================
   TEAM MATCH — SCHEDULE RESPONSE
===================================================== */

.team-tab-match-status.action-required {
    background: #fff0d2;
    color: #9a5a00;
}

.team-tab-schedule-actions {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 10px;
    margin-top: 18px;
}

.team-tab-schedule-actions button {
    min-height: 52px;
    border-radius: 14px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.team-tab-request-schedule-change {
    border: 1px solid #d9dfd8;
    background: #f5f7f1;
    color: #244e3a;
}

.team-tab-accept-schedule {
    border: 1px solid #155b41;
    background: #155b41;
    color: #fff;
}

.team-tab-request-schedule-change:hover {
    background: #eef2e9;
}

.team-tab-accept-schedule:hover {
    filter: brightness(.96);
}

@media (max-width: 640px) {

    .team-tab-schedule-actions {
        grid-template-columns: 1fr;
    }

}
/* PROFILE MATCH HISTORY */

.profile-history-section {
    margin-top: 48px;
}

.profile-history-tabs {
    margin-top: 18px;
    padding: 5px;
    border-radius: 999px;
    display: inline-flex;
    gap: 4px;
    background: var(--surface-soft);
}

.profile-history-tab {
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease, color 0.2s ease;
}

.profile-history-tab small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    opacity: 0.75;
}

.profile-history-tab.active {
    background: var(--green-dark);
    color: #fff;
}

.profile-history-list {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.profile-history-item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.profile-history-item strong {
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    color: var(--ink);
}

.profile-history-item p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ink-soft);
}

.profile-history-badge {
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef8d9;
    color: var(--green-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.profile-history-empty {
    padding: 26px 4px;
    color: var(--ink-soft);
    font-size: 13px;
}

/* PROFILE ID, SETTINGS & LOCAL SCOREBOARD REGISTERED PLAYERS */

.profile-uid {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 14px;
    border-radius: 999px;
    background: #eef8d9;
    font-size: 11px;
}

.profile-uid span {
    color: var(--ink-soft);
    font-weight: 700;
}

.profile-uid strong {
    color: var(--green-dark);
    font-family: "Manrope", sans-serif;
    letter-spacing: 0.08em;
}

.profile-uid button {
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--green-dark);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.profile-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.profile-settings-btn {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.profile-settings-btn:hover {
    background: #eef8d9;
}

.profile-settings-section {
    margin-top: 32px;
    padding: 26px 28px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: #fff;
}

.profile-settings-note,
.profile-settings-saved {
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-size: 12px;
}

.profile-settings-saved {
    min-height: 16px;
    color: var(--green-strong);
    font-weight: 800;
}

.profile-toggle {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}

.profile-toggle input {
    position: absolute;
    opacity: 0;
}

.profile-toggle-track {
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 999px;
    background: #cfd6cf;
    transition: background 0.2s ease;
}

.profile-toggle-track i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
    background: #fff;
    transition: transform 0.2s ease;
}

.profile-toggle input:checked + .profile-toggle-track {
    background: var(--green-dark);
}

.profile-toggle input:checked + .profile-toggle-track i {
    transform: translateX(18px);
    background: var(--green);
}

.profile-toggle input:focus-visible + .profile-toggle-track {
    outline: 3px solid var(--green);
    outline-offset: 2px;
}

.profile-toggle-copy strong {
    display: block;
    font-size: 14px;
    color: var(--ink);
}

.profile-toggle-copy small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--ink-soft);
}

.profile-history-hidden {
    padding: 10px 14px;
    border-radius: 12px;
    background: #f3f1e6;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
}

/* PROFILE HERO BUTTONS — premium */

.profile-hero-actions {
    min-width: 260px;
    gap: 12px;
}

.profile-hero-actions .profile-edit-btn,
.profile-hero-actions .profile-settings-btn {
    width: 100%;
    min-height: 54px;
    padding: 0 12px 0 22px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.profile-hero-actions .profile-edit-btn {
    border: 0;
    background: var(--green-dark);
    color: #fff;
    box-shadow: 0 14px 28px rgba(27, 75, 53, 0.28);
}

.profile-hero-actions .profile-edit-btn span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green);
    color: var(--green-dark);
    font-size: 15px;
    transition: transform 0.3s ease, background 0.25s ease, color 0.25s ease;
}

.profile-hero-actions .profile-edit-btn:hover {
    transform: translateY(-2px);
    background: var(--green);
    color: var(--green-dark);
    box-shadow: 0 18px 34px rgba(136, 186, 45, 0.4);
}

.profile-hero-actions .profile-edit-btn:hover span {
    background: var(--green-dark);
    color: var(--green);
    transform: translate(2px, -2px) rotate(45deg);
}

.profile-hero-actions .profile-settings-btn {
    padding: 0 22px 0 12px;
    justify-content: flex-start;
    border: 1.5px solid rgba(27, 75, 53, 0.22);
    background: #fff;
    color: var(--green-dark);
}

.profile-settings-gear {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef8d9;
    font-size: 16px;
    transition: transform 0.6s ease, background 0.25s ease;
}

.profile-hero-actions .profile-settings-btn:hover {
    transform: translateY(-2px);
    border-color: var(--green-strong);
    background: #f6fbe9;
    box-shadow: 0 14px 28px rgba(31, 54, 42, 0.1);
}

.profile-settings-btn:hover .profile-settings-gear {
    background: var(--green);
    transform: rotate(180deg);
}

.profile-settings-btn[aria-expanded="true"] .profile-settings-gear {
    background: var(--green-dark);
    color: var(--green);
    transform: rotate(90deg);
}

.profile-hero-actions button:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px;
}

/* Privacy panel opens with a soft slide */
.profile-settings-section {
    animation: profileSettingsIn 0.35s ease;
    border-color: rgba(136, 186, 45, 0.35);
    background: linear-gradient(135deg, #ffffff 0%, #f8fcee 100%);
    box-shadow: 0 18px 40px rgba(31, 54, 42, 0.07);
}

@keyframes profileSettingsIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.profile-toggle-track {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.profile-toggle-track i {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.2s ease;
}

.profile-toggle:hover .profile-toggle-copy strong {
    color: var(--green-strong);
}

@media (max-width: 760px) {
    .profile-hero-actions {
        width: 100%;
        min-width: 0;
    }
}

/* ANY GENDER — LOCKED UNTIL VERIFIED */

.gender-lock-tag {
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f1ede0;
    color: #7a6a3a;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.gender-lock-tag.unlocked {
    background: #e2f5c4;
    color: #2f6b1f;
}

.match-choice.gender-option-locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.gender-unlock {
    margin-top: 16px;
    padding: 18px 22px;
    border: 1px solid rgba(136, 186, 45, 0.4);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f1fadf 100%);
}

.gender-unlock[hidden] {
    display: none;
}

.gender-unlock strong {
    display: block;
    font-size: 15px;
    color: #143528;
}

.gender-unlock p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #617067;
}

.gender-unlock button {
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: #1b4b35;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(27, 75, 53, 0.25);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.gender-unlock button small {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 600;
    opacity: 0.8;
}

.gender-unlock button:hover:not(:disabled) {
    transform: translateY(-2px);
    background: #b8ef50;
    color: #1b4b35;
}

.gender-unlock button:disabled {
    background: #9aa89f;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 700px) {
    .gender-unlock {
        flex-direction: column;
        align-items: stretch;
    }
}

.gender-unlock-benefits {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #1b4b35;
}

.gender-unlock .gender-unlock-refund {
    margin-top: 10px;
    font-size: 11px;
    color: #4d6b3a;
}

/* =====================================================
   UPCOMING GAMES — CLEAN & MINIMAL
===================================================== */

body .dashboard-games-section {
    padding: 8px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body .dashboard-games-section .dashboard-section-header {
    margin-bottom: 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(20, 53, 40, 0.1);
}

body .dashboard-games-section .dashboard-section-eyebrow {
    font-size: 11px;
    color: #5f6f67;
    letter-spacing: 0.12em;
}

body .dashboard-games-section .dashboard-section-header h2 {
    font-size: clamp(38px, 4.4vw, 56px);
    color: #1c2721;
}

body .dashboard-games-section .dashboard-section-header p {
    margin-top: 10px;
    font-size: 16px;
    color: #5f6f67;
}

body .dashboard-games-section .dashboard-new-game-btn,
body .dashboard-games-section #dashboard-new-game-btn {
    min-height: 54px;
    padding: 0 30px;
    border-radius: 12px;
    background: #0b7a4f;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(11, 122, 79, 0.22);
}

body .dashboard-games-section .dashboard-new-game-btn:hover {
    background: #096a44;
}

body .dashboard-games-section .dashboard-games-empty {
    min-height: 420px;
    padding: 48px 24px;
    border: 1px solid rgba(20, 53, 40, 0.14);
    border-radius: 22px;
    background: #fff;
}

.dashboard-games-empty .dashboard-empty-art {
    width: min(300px, 70%);
    height: auto;
}

body .dashboard-games-section .dashboard-games-empty h3 {
    margin-top: 10px;
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #1c2721;
}

body .dashboard-games-section .dashboard-games-empty p {
    max-width: 460px;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.6;
    color: #5f6f67;
}

body .dashboard-games-section .dashboard-games-empty button {
    min-height: 54px;
    margin-top: 22px;
    padding: 0 34px;
    border: 0;
    border-radius: 12px;
    background: #0b7a4f;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(11, 122, 79, 0.22);
    transition: transform 0.2s ease, background 0.2s ease;
}

body .dashboard-games-section .dashboard-games-empty button:hover {
    transform: translateY(-2px);
    background: #096a44;
}

.dashboard-empty-note {
    margin-top: 16px;
    font-size: 14px;
    color: #6d7b74;
}

@media (max-width: 600px) {
    body .dashboard-games-section .dashboard-games-empty {
        min-height: 0;
        padding: 32px 16px;
    }
}

/* =====================================================
   DASHBOARD — FLOATING CLUB BAR
===================================================== */

body .navbar.club-bar {
    position: sticky;
    top: 14px;
    z-index: 60;
    width: min(1400px, 92%);
    height: 72px;
    margin: 14px auto 0;
    padding: 0 14px 0 18px;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #0f1a16;
    backdrop-filter: none;
    box-shadow: 0 18px 40px rgba(10, 25, 20, 0.28);
}

/* soft emerald highlight travelling along the lower edge (6s loop) */
body .navbar.club-bar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22%;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #16c96b, transparent);
    animation: clubBarGlow 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes clubBarGlow {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(355%); }
    100% { transform: translateX(0); }
}

body .navbar.club-bar .brand-name {
    color: #fff;
    font-size: 21px;
}

body .navbar.club-bar .nav-right {
    gap: 6px;
}

body .navbar.club-bar .nav-btn {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #e8efe9;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

body .navbar.club-bar .nav-btn:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

body .navbar.club-bar .nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* divider + round settings button */
body .navbar.club-bar .nav-btn[aria-label="Settings"] {
    position: relative;
    width: 46px;
    height: 46px;
    min-height: 46px;
    margin-left: 16px;
    padding: 0;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
}

body .navbar.club-bar .nav-btn[aria-label="Settings"]::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 50%;
    width: 1px;
    height: 26px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
}

/* white Edit preferences pill */
body .navbar.club-bar .profile-btn.verify-profile-btn {
    min-width: 0 !important;
    height: 48px !important;
    margin-left: 8px;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #0f1a16 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    gap: 9px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, background-color 0.18s ease !important;
}

body .navbar.club-bar .profile-btn.verify-profile-btn:hover {
    background: #e9fbe3 !important;
    transform: translateY(-1px);
}

@media (max-width: 800px) {
    body .navbar.club-bar {
        width: 94%;
        height: 64px;
        padding: 0 10px 0 12px;
        border-radius: 18px;
    }

    body .navbar.club-bar .brand-name {
        font-size: 17px;
    }

    body .navbar.club-bar .nav-btn:not([aria-label]) {
        display: none;
    }

    body .navbar.club-bar .nav-btn[aria-label="Settings"] {
        margin-left: 6px;
    }

    body .navbar.club-bar .nav-btn[aria-label="Settings"]::before {
        display: none;
    }

    body .navbar.club-bar .profile-btn.verify-profile-btn {
        padding: 0 14px !important;
        font-size: 13px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .navbar.club-bar::after {
        animation: none;
    }
}

/* UPCOMING GAMES — compact so the page doesn't feel long */

body .dashboard-games-section {
    margin: 22px auto 26px;
}

body .dashboard-games-section .dashboard-section-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
}

body .dashboard-games-section .dashboard-section-header h2 {
    font-size: clamp(30px, 3.2vw, 40px);
}

body .dashboard-games-section .dashboard-section-header p {
    margin-top: 6px;
    font-size: 14px;
}

body .dashboard-games-section .dashboard-new-game-btn,
body .dashboard-games-section #dashboard-new-game-btn {
    min-height: 46px;
    padding: 0 22px;
    font-size: 14px;
}

body .dashboard-games-section .dashboard-games-empty {
    min-height: 0;
    padding: 24px 20px 26px;
    border-radius: 18px;
}

.dashboard-games-empty .dashboard-empty-art {
    width: min(190px, 60%);
}

body .dashboard-games-section .dashboard-games-empty h3 {
    margin-top: 4px;
    font-size: clamp(22px, 2.4vw, 28px);
}

body .dashboard-games-section .dashboard-games-empty p {
    margin-top: 6px;
    font-size: 14px;
}

body .dashboard-games-section .dashboard-games-empty button {
    min-height: 46px;
    margin-top: 14px;
    padding: 0 26px;
    font-size: 14px;
}

.dashboard-empty-note {
    margin-top: 10px;
    font-size: 13px;
}

/* DASHBOARD BAR — fixed in place above Upcoming games.
   It scrolls away with the page instead of floating. */

body .navbar.club-bar {
    position: relative;
    top: 0;
    width: 92%;
    max-width: 1400px;
}


/* =====================================================
   DASHBOARD — NEARBY VENUES GALLERY
===================================================== */

.venue-gallery {
    margin-bottom: 34px;
}

.venue-gallery-head {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.venue-gallery-eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #5f6f67;
}

.venue-gallery-head h2 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: #111b17;
}

.venue-gallery-head p {
    margin: 6px 0 0;
    font-size: 15px;
    color: #5f6f67;
}

.venue-gallery-all {
    padding: 8px 2px;
    border: 0;
    background: none;
    color: #0b5c3b;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.venue-gallery-all span {
    display: inline-block;
    transition: transform 0.2s ease;
}

.venue-gallery-all:hover span {
    transform: translateX(4px);
}

.venue-carousel {
    position: relative;
}

.venue-slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px 14px;
    margin: -6px -4px -14px;
    outline: none;
}

.venue-slides::-webkit-scrollbar {
    display: none;
}

.venue-slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 0 4px;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 22px;
}

/* card */

.venue-card {
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(31, 54, 42, 0.08);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.venue-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(31, 54, 42, 0.14);
}

.venue-card-photo {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 18px;
    margin: 8px 8px 0;
    background: #dfe6e0;
}

.venue-card-photo img,
.venue-card-photo .venue-art {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.22s ease;
}

.venue-card:hover .venue-card-photo img,
.venue-card:hover .venue-card-photo .venue-art {
    transform: scale(1.03);
}

.venue-card-rating {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(15, 26, 22, 0.78);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(6px);
}

.venue-card-info {
    padding: 16px 20px 20px;
}

.venue-card-info h3 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #111b17;
}

.venue-card-chips {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.venue-card-chips span {
    padding: 6px 14px;
    border: 1px solid rgba(20, 53, 40, 0.16);
    border-radius: 10px;
    font-size: 13px;
    color: #3f4d46;
}

.venue-card-foot {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.venue-card-distance {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: #5f6f67;
}

.venue-card-distance svg {
    width: 18px;
    height: 18px;
}

.venue-card-btn {
    padding: 11px 18px;
    border: 0;
    border-radius: 10px;
    background: #0b5c3b;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.venue-card-btn:hover {
    background: #084a30;
}

/* arrows + dots */

.venue-arrow {
    position: absolute;
    top: 38%;
    z-index: 3;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #0f1a16;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 26, 22, 0.22);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.venue-arrow[hidden] {
    display: none;
}

.venue-arrow.prev { left: -14px; }
.venue-arrow.next { right: -14px; }

.venue-arrow:hover:not(:disabled) {
    transform: scale(1.08);
}

.venue-arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

.venue-dots {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.venue-dots[hidden] {
    display: none;
}

.venue-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #c5cec7;
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}

.venue-dots button.active {
    width: 26px;
    background: #0b5c3b;
}

.venue-empty {
    flex: 0 0 100%;
    padding: 30px 8px;
    color: #5f6f67;
    font-size: 15px;
}

@media (max-width: 900px) {
    .venue-slide {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .venue-arrow.prev { left: 4px; }
    .venue-arrow.next { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .venue-card,
    .venue-card-photo img,
    .venue-card-photo .venue-art {
        transition: none;
    }
}


/* VENUE GALLERY — city picker, 20 km empty state */

.venue-gallery-tools {
    display: flex;
    align-items: center;
    gap: 18px;
}

.venue-city {
    position: relative;
}

.venue-city-btn {
    padding: 11px 16px;
    border: 1.5px solid rgba(27, 75, 53, 0.22);
    border-radius: 999px;
    background: #fff;
    color: #0f1a16;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.venue-city-btn svg {
    width: 17px;
    height: 17px;
    color: #0b7a4f;
}

.venue-city-btn .chev {
    width: 15px;
    height: 15px;
    color: #5f6f67;
    transition: transform 0.2s ease;
}

.venue-city-btn[aria-expanded="true"] .chev {
    transform: rotate(180deg);
}

.venue-city-btn:hover {
    border-color: #0b7a4f;
    background: #f6fbe9;
}

.venue-city-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    width: 280px;
    padding: 8px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 26, 22, 0.2);
    animation: venueMenuIn 0.18s ease;
}

.venue-city-menu[hidden] {
    display: none;
}

@keyframes venueMenuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.venue-city-menu button {
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 12px;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    cursor: pointer;
}

.venue-city-menu button strong {
    font-size: 14px;
    color: #111b17;
}

.venue-city-menu button small {
    font-size: 12px;
    color: #5f6f67;
}

.venue-city-menu button:hover {
    background: #f1f6ea;
}

.venue-city-menu button.selected {
    background: #e6f5d3;
}

.venue-city-divider {
    margin: 6px 14px 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(20, 53, 40, 0.1);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7a8880;
}

.venue-empty {
    flex: 0 0 100%;
    padding: 34px 20px;
    border: 1px dashed rgba(20, 53, 40, 0.2);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: #5f6f67;
    font-size: 15px;
}

.venue-empty strong {
    font-size: 18px;
    color: #111b17;
}

.venue-empty button {
    margin-top: 10px;
    padding: 12px 24px;
    border: 0;
    border-radius: 10px;
    background: #0b5c3b;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 800px) {
    .venue-gallery-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .venue-gallery-tools {
        width: 100%;
        justify-content: space-between;
    }

    .venue-city-menu {
        left: 0;
        right: auto;
    }
}


/* =====================================================
   CITY PICKER (BookMyShow style)
===================================================== */

body.city-modal-open {
    overflow: hidden;
}

.city-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    padding: 6vh 16px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: rgba(10, 20, 16, 0.55);
    backdrop-filter: blur(3px);
    animation: cityFade 0.2s ease;
}

.city-modal[hidden] {
    display: none;
}

@keyframes cityFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.city-panel {
    width: min(560px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    padding: 24px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
    animation: cityRise 0.24s ease;
}

@keyframes cityRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.city-panel-head {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.city-panel-head h3 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 24px;
    letter-spacing: -0.03em;
    color: #111b17;
}

.city-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f1f4ee;
    color: #3f4d46;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.city-close:hover {
    background: #e2e9dc;
}

.city-search {
    padding: 0 16px;
    border: 1.5px solid rgba(27, 75, 53, 0.25);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.city-search:focus-within {
    border-color: #0b7a4f;
    box-shadow: 0 0 0 4px rgba(11, 122, 79, 0.12);
}

.city-search svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #5f6f67;
}

.city-search input {
    width: 100%;
    padding: 15px 0;
    border: 0;
    outline: 0;
    background: none;
    font-size: 16px;
    color: #111b17;
}

.city-detect {
    margin-top: 12px;
    padding: 12px 4px;
    border: 0;
    background: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0b7a4f;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.city-detect svg {
    width: 20px;
    height: 20px;
}

.city-detect:hover:not(:disabled) {
    text-decoration: underline;
}

.city-detect:disabled {
    opacity: 0.6;
    cursor: progress;
}

.city-detect-note {
    margin: 0 0 6px;
    min-height: 0;
    font-size: 13px;
    color: #a4512e;
}

.city-detect-note:empty {
    display: none;
}

.city-results {
    margin-top: 6px;
    border-top: 1px solid rgba(20, 53, 40, 0.1);
    padding-top: 6px;
}

.city-results[hidden],
.city-popular[hidden] {
    display: none;
}

.city-results button {
    width: 100%;
    padding: 12px 10px;
    border: 0;
    border-radius: 12px;
    background: none;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    cursor: pointer;
}

.city-results button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #8b9891;
}

.city-results button strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #3f4d46;
}

.city-results button strong b {
    font-weight: 800;
    color: #111b17;
}

.city-results button small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #7a8880;
}

.city-results button:hover,
.city-results button.active {
    background: #eef6e3;
}

.city-none {
    padding: 22px 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #5f6f67;
}

.city-popular h4 {
    margin: 10px 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a8880;
}

.city-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.city-chips button {
    padding: 10px 18px;
    border: 1px solid rgba(20, 53, 40, 0.16);
    border-radius: 999px;
    background: #fff;
    color: #1f2d26;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.city-chips button:hover {
    border-color: #0b7a4f;
    background: #eef6e3;
    color: #0b5c3b;
}

/* empty / prompt states in the gallery */

.venue-empty-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.venue-empty-actions button {
    margin-top: 0;
}

.venue-empty .ghost,
.venue-empty-actions .ghost {
    border: 1.5px solid rgba(27, 75, 53, 0.3);
    background: #fff;
    color: #0b5c3b;
}

.venue-back-home {
    margin-top: 10px;
    padding: 7px 14px;
    border: 1.5px solid rgba(27, 75, 53, 0.25);
    border-radius: 999px;
    background: #fff;
    color: #0b5c3b;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.venue-back-home[hidden] {
    display: none;
}

.venue-back-home:hover {
    background: #eef6e3;
}

@media (max-width: 600px) {
    .city-modal {
        padding-top: 0;
        align-items: flex-end;
    }

    .city-panel {
        max-height: 92vh;
        border-radius: 24px 24px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .city-modal,
    .city-panel {
        animation: none;
    }
}

/* =====================================================
   LAUNCH REGION — "Coming soon" outside the launch states
===================================================== */

.city-launch-note {
    margin: -6px 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #eef6e3;
    color: #2f6b1f;
    font-size: 13px;
    font-weight: 700;
}

.city-launch-note[hidden],
.city-notice[hidden] {
    display: none;
}

.city-notice {
    margin: 4px 0 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff4e0;
    color: #8a5a12;
    font-size: 14px;
    line-height: 1.5;
}

.city-results button.soon strong,
.city-results button.soon small {
    color: #98a29c;
}

.city-results button.soon svg {
    color: #c3cbc5;
}

.city-soon {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f3efe2;
    color: #8a7a44;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* copyright / trademark lines */

.sb-footer-legal {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.75;
}

.sb-footer-legal a {
    color: inherit;
    text-decoration: underline;
}

.sb-legal-line {
    margin: 0;
    padding: 22px 16px 26px;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: #7a8880;
}

.sb-legal-line a {
    color: inherit;
    text-decoration: underline;
}

/* =====================================================
   LOGIN PAGE — messages, Google button, new-password form
===================================================== */

.auth-message {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.auth-message[hidden] {
    display: none;
}

.auth-message.error {
    background: #fdecea;
    color: #8a2a1c;
}

.auth-message.success {
    background: #e6f5d3;
    color: #2f6b1f;
}

.auth-google {
    margin-bottom: 14px;
}

.auth-google[hidden] {
    display: none;
}

.auth-google-btn {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid rgba(20, 53, 40, 0.2);
    border-radius: 14px;
    background: #fff;
    color: #111b17;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.auth-google-btn:hover {
    background: #f6fbe9;
    border-color: #0b7a4f;
}

.auth-google-btn svg {
    width: 20px;
    height: 20px;
}

.auth-or {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #7a8880;
}

.auth-or::before,
.auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(20, 53, 40, 0.14);
}