/* ============================================================================
   TurnamenPadel — shared theme (neo-brutalist light)
   Design system: tokens + chrome (header/footer/nav) + primitives
   (buttons, chips, cards, brutal shadows, sections). Hand-written CSS,
   no framework / no build. Fonts: Plus Jakarta Sans (display), Inter (body),
   Space Grotesk (mono/labels). Icons: Material Symbols Outlined.
   ========================================================================== */

:root{
  /* brand */
  --orange:#FF5722; --orange-hover:#E64A19;
  --blue:#2563EB; --mint:#10B981; --lime:#84CC16; --purple:#7E22CE;
  --amber:#B45309; --amber-bg:#FEF3C7; --amber-bd:#FCD34D;

  /* ink / surfaces */
  --dark:#0F172A;            /* text + all borders */
  --canvas:#F8FAFC;          /* page background */
  --card:#FFFFFF;            /* card background */

  /* slate scale */
  --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0;
  --slate-300:#CBD5E1; --slate-400:#94A3B8; --slate-500:#64748B;
  --slate-600:#475569; --slate-700:#334155; --slate-800:#1E293B;

  /* tint fills */
  --orange-10:rgba(255,87,34,.10); --orange-20:rgba(255,87,34,.20);
  --blue-10:rgba(37,99,235,.10);   --blue-100:#DBEAFE;
  --mint-10:rgba(16,185,129,.10);  --mint-20:rgba(16,185,129,.20);
  --lime-20:rgba(132,204,22,.20);
  --purple-100:#F3E8FF;

  /* type */
  --display:'Plus Jakarta Sans',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'Space Grotesk','SFMono-Regular',ui-monospace,monospace;

  /* neo-brutalist hard shadows */
  --sh-sm:2px 2px 0 0 var(--dark);
  --sh:4px 4px 0 0 var(--dark);
  --sh-lg:6px 6px 0 0 var(--dark);
  --sh-orange:4px 4px 0 0 var(--orange);
  --sh-blue:4px 4px 0 0 var(--blue);
  --sh-soft:0 1px 2px rgba(15,23,42,.06);

  /* borders + radii */
  --bd:2px solid var(--dark);
  --bd-soft:1px solid var(--slate-200);
  --r-lg:.6rem; --r-xl:.75rem; --r-2xl:1rem; --r-3xl:1.5rem; --r-full:999px;

  --w:1280px;   /* max content width (≈ max-w-7xl) */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--canvas); color:var(--dark);
  font-family:var(--sans); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior:none; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--orange);color:#fff}

.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal;font-style:normal;
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
  vertical-align:middle;line-height:1;white-space:nowrap;letter-spacing:normal;
  text-transform:none;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';
}

/* ---- layout ---- */
.container{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:16px}
@media(min-width:640px){.container{padding-inline:24px}}
@media(min-width:1024px){.container{padding-inline:32px}}

.section{padding:64px 0;border-bottom:var(--bd)}
@media(min-width:640px){.section{padding:80px 0}}
.section--canvas{background:var(--canvas)}
.section--white{background:var(--card)}

/* ---- type helpers ---- */
.display{font-family:var(--display);font-weight:900;letter-spacing:-.02em;line-height:1.05}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.eyebrow .dot{width:8px;height:8px;border-radius:var(--r-full);background:currentColor;flex:none}
.mono{font-family:var(--mono)}
.muted{color:var(--slate-600)}

/* ---- announcement bar ---- */
.tp-annc{background:var(--dark);color:#fff;border-bottom:var(--bd);
  padding:8px 16px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em}
.tp-annc .inner{max-width:var(--w);margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.tp-annc .live{display:inline-flex;align-items:center;gap:8px}
.tp-annc .pulse{width:8px;height:8px;border-radius:var(--r-full);background:var(--mint);flex:none;
  animation:tp-ping 1.4s cubic-bezier(0,0,.2,1) infinite}
.tp-annc .k-lime{color:var(--lime)} .tp-annc .k-slate{color:var(--slate-400)}
.tp-annc .k-dim{color:var(--slate-200)}
.tp-annc a{display:inline-flex;align-items:center;gap:4px}
.tp-annc a:hover{color:var(--orange)}
@media(max-width:640px){.tp-annc .hide-sm{display:none}}

@keyframes tp-ping{75%,100%{transform:scale(2.2);opacity:0}}
@keyframes tp-pulse{50%{opacity:.4}}

/* ---- header ---- */
.tp-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);border-bottom:var(--bd)}
.tp-header .inner{max-width:var(--w);margin-inline:auto;padding:0 16px;height:80px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
@media(min-width:640px){.tp-header .inner{padding:0 24px}}
@media(min-width:1024px){.tp-header .inner{padding:0 32px}}

.tp-logo{display:inline-flex;align-items:center;gap:12px}
.tp-logo .glyph{width:40px;height:40px;border-radius:var(--r-xl);background:var(--orange);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:20px;border:var(--bd);box-shadow:var(--sh-sm);
  transition:transform .15s,box-shadow .15s}
.tp-logo:hover .glyph{transform:translate(2px,2px);box-shadow:none}
.tp-logo .name{font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:-.02em;line-height:1}
.tp-logo .name b{color:var(--orange);font-weight:900}
.tp-logo .sub{display:block;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate-500);margin-top:3px}

.tp-nav{display:flex;align-items:center;gap:28px;font-family:var(--display);font-weight:700;font-size:14px}
.tp-nav a{display:inline-flex;align-items:center;gap:6px;color:var(--dark);transition:color .15s}
.tp-nav a:hover{color:var(--orange)}
.tp-nav .dot{width:8px;height:8px;border-radius:var(--r-full);flex:none}
.tp-nav .badge{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--blue);
  background:var(--blue-100);border:1px solid rgba(37,99,235,.3);border-radius:4px;padding:1px 5px}
@media(max-width:900px){.tp-nav{display:none}}

.tp-header-actions{display:flex;align-items:center;gap:8px}
@media(min-width:640px){.tp-header-actions{gap:12px}}

.tp-menu-toggle{display:none;width:42px;height:42px;border:var(--bd);border-radius:var(--r-lg);
  background:#fff;color:var(--dark);align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--sh-sm)}
@media(max-width:900px){.tp-menu-toggle{display:inline-flex}.tp-header-actions .btn{display:none}}
.tp-mobile-nav{display:none;border-bottom:var(--bd);background:#fff}
.tp-mobile-nav.open{display:block}
.tp-mobile-nav .inner{max-width:var(--w);margin-inline:auto;padding:12px 16px;
  display:flex;flex-direction:column;gap:4px}
.tp-mobile-nav a{font-family:var(--display);font-weight:700;font-size:15px;padding:12px 14px;
  border-radius:var(--r-lg)}
.tp-mobile-nav a:hover{background:var(--slate-100)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--display);font-weight:800;font-size:13px;line-height:1;
  padding:12px 18px;border:var(--bd);border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);transition:transform .15s,box-shadow .15s,background .15s,color .15s;
  text-align:center}
.btn:hover{transform:translate(2px,2px);box-shadow:none}
.btn .material-symbols-outlined{font-size:16px}
.btn--sm{padding:9px 14px;font-size:12px}
.btn--lg{padding:15px 22px;font-size:14px}
.btn--block{width:100%}
.btn--upper{text-transform:uppercase;letter-spacing:.05em;font-weight:900}

.btn--primary{background:var(--orange);color:#fff}
.btn--dark{background:var(--dark);color:#fff}
.btn--dark:hover{background:var(--slate-800)}
.btn--mint{background:var(--mint);color:var(--dark)}
.btn--lime{background:var(--lime);color:var(--dark)}
.btn--white{background:#fff;color:var(--dark)}
.btn--white:hover{background:var(--slate-100)}
.btn--ghost{background:var(--slate-100);color:var(--dark)}
.btn--ghost:hover{background:var(--slate-200)}
.btn--canvas{background:var(--canvas);color:var(--dark)}
.btn--canvas:hover{background:var(--slate-100)}
/* keep hover press even where we override background */
.btn--dark:hover,.btn--white:hover,.btn--ghost:hover,.btn--canvas:hover{transform:translate(2px,2px);box-shadow:none}

/* elevated CTA that starts with full shadow */
.btn--pop{box-shadow:var(--sh)}
.btn--pop:hover{box-shadow:var(--sh-sm);transform:translate(2px,2px)}

/* ---- chips / pills / badges ---- */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  font-weight:700;padding:4px 10px;border-radius:var(--r-lg);border:1px solid var(--slate-300);
  background:#fff}
.chip--pill{border-radius:var(--r-full)}
.chip--brutal{border:var(--bd);box-shadow:var(--sh-sm)}
.chip .dot{width:8px;height:8px;border-radius:var(--r-full);flex:none}
.chip .ping{animation:tp-ping 1.4s cubic-bezier(0,0,.2,1) infinite}
.chip--mint{background:var(--mint-20);color:var(--mint);border-color:var(--mint)}
.chip--blue{background:var(--blue-100);color:var(--blue);border-color:var(--blue)}
.chip--lime{background:var(--lime-20);color:var(--dark);border-color:var(--dark)}
.chip--amber{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-bd)}
.chip--orange{background:var(--orange-10);color:var(--orange);border-color:rgba(255,87,34,.3)}
.chip--dark{background:var(--dark);color:#fff;border-color:var(--dark)}

/* ---- cards ---- */
.card{background:var(--card);border:var(--bd);border-radius:var(--r-3xl);padding:24px;
  box-shadow:var(--sh);transition:box-shadow .15s,transform .15s,background .15s}
.card--lg{box-shadow:var(--sh-lg)}
.card--flat{box-shadow:var(--sh-sm)}
.card--canvas{background:var(--canvas)}
.card--hover:hover{box-shadow:var(--sh-lg)}
.card--pressable:hover{transform:translate(2px,2px);box-shadow:var(--sh-sm)}

/* icon tile inside cards */
.ico-tile{width:48px;height:48px;border-radius:var(--r-2xl);border:var(--bd);box-shadow:var(--sh-sm);
  display:flex;align-items:center;justify-content:center}
.ico-tile .material-symbols-outlined{font-size:26px}
.ico-tile--orange{background:var(--orange-10);color:var(--orange)}
.ico-tile--blue{background:var(--blue-10);color:var(--blue)}
.ico-tile--mint{background:var(--mint-10);color:var(--mint)}
.ico-tile--purple{background:var(--purple-100);color:var(--purple)}

/* dot-grid decorative background */
.dotgrid{background-image:radial-gradient(var(--dark) 1.5px,transparent 1.5px);
  background-size:24px 24px}

/* ---- footer ---- */
.tp-footer{background:var(--card);border-top:var(--bd);padding:48px 0}
.tp-footer .row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
  padding-bottom:28px;border-bottom:var(--bd-soft)}
.tp-footer .brand{display:inline-flex;align-items:center;gap:12px}
.tp-footer .brand .glyph{width:32px;height:32px;border-radius:var(--r-lg);background:var(--orange);
  color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-weight:900;font-size:14px;border:var(--bd)}
.tp-footer .brand .name{font-family:var(--display);font-weight:900;font-size:18px;letter-spacing:-.01em}
.tp-footer .brand .name b{color:var(--orange)}
.tp-footer .brand .eco{font-family:var(--mono);font-size:12px;color:var(--slate-400)}
.tp-footer .links{display:flex;flex-wrap:wrap;gap:24px;font-family:var(--display);font-weight:700;
  font-size:14px;color:var(--slate-600)}
.tp-footer .links a:hover{color:var(--dark)}
.tp-footer .legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-top:28px;font-family:var(--mono);font-size:12px;color:var(--slate-500)}
.tp-footer .legal .set{display:flex;flex-wrap:wrap;gap:16px}
.tp-footer .legal a:hover{color:var(--dark)}

/* ---- small utilities used across pages ---- */
.grid{display:grid;gap:24px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.g-2,.g-3{grid-template-columns:1fr}.g-4{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column}
.center{text-align:center}
.hide{display:none!important}