/* TactixBoard website - glass on a dark stage: the same look as the board app (loaded after style.css by every page of the site).
   The page is a warm dark stage with soft coloured light; the bar, the sports list, the cards and the panels are translucent glass. */
:root{
  color-scheme:dark;
  --stage:#251810;
  --fg:#F4F1E8; --fg-dim:#cbc2b0; --fg-mute:#a29986;
  --amber:#E3A857; --amber-deep:#A6640F;
  --glass:rgba(255,246,230,.085);
  --glass-hi:rgba(255,246,230,.15);
  --glass-strong:rgba(30,21,13,.80);
  --glass-edge:rgba(255,255,255,.17);
  --glass-shadow:0 14px 40px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.10);
  --glass-blur:blur(18px) saturate(1.45);
  --soft:rgba(255,246,230,.06); --line:rgba(255,255,255,.14); --hover-fill:rgba(255,246,230,.115);
  --light-a:rgba(227,168,87,.24); --light-b:rgba(48,124,84,.20); --light-c:rgba(198,83,43,.17);
  --bg-top:#2c1e13; --bg-mid:#21160d; --bg-bot:#1a1109;
}
html{background:var(--stage);}
body{
  color:var(--fg);
  background:
    radial-gradient(900px 620px at 88% -6%, var(--light-a), transparent 62%),
    radial-gradient(820px 720px at -12% 38%, var(--light-b), transparent 62%),
    radial-gradient(900px 720px at 104% 78%, var(--light-c), transparent 62%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 58%, var(--bg-bot) 100%);
  background-attachment:fixed;
  min-height:100vh;
}
/* a faint court drawn on the stage */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' fill='none' stroke='white' stroke-width='3'%3E%3Crect x='40' y='40' width='920' height='520'/%3E%3Cpath d='M500 40v520'/%3E%3Ccircle cx='500' cy='300' r='80'/%3E%3Crect x='40' y='190' width='170' height='220'/%3E%3Crect x='790' y='190' width='170' height='220'/%3E%3Cpath d='M210 230a80 80 0 0 1 0 140M790 230a80 80 0 0 0 0 140'/%3E%3C/svg%3E") center/cover no-repeat;
}
::selection{background:rgba(227,168,87,.45); color:#fff;}
h1,h2,h3,.display{color:var(--fg);}
a{color:var(--amber);}
a:focus-visible, button:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}

/* ---------- the top bar: a floating glass bar ---------- */
body > nav{
  position:sticky; top:10px; z-index:50;
  margin:10px 3vw 0; padding:8px 18px;
  border:0; background:none;
}
/* (the glass is a layer behind the bar, not the bar itself: the lists that open from the bar then blur the page, not just the bar) */
body > nav::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border:1px solid var(--glass-edge); border-radius:20px;
  background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
}
nav .logo img{height:44px;}
@media (max-width:600px){
  body > nav{margin:8px 10px 0; padding:6px 10px; top:8px;}
  body > nav::before{border-radius:16px;}
  nav .logo img{height:30px;}
}
.sport-current, .lang-current{
  background:var(--glass-hi); color:var(--fg);
  border:1px solid var(--glass-edge); border-radius:12px; padding:7px 14px;
  transition:border-color .15s ease, background .15s ease;
}
.lang-current{padding:7px 11px;}
.sport-current:hover, .lang-current:hover{border-color:var(--amber); background:var(--hover-fill);}
@media (max-width:600px){ .sport-current{padding:5px 10px;} .lang-current{padding:5px 9px;} }
.sport-list, .lang-list{
  background:var(--glass-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge); border-radius:16px; padding:6px;
  box-shadow:0 18px 44px -10px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
}
.sport-list{min-width:210px;}
.sport-list-header{color:var(--fg-mute); padding:8px 12px 6px; font-size:.72rem;}
.sport-list li[role="option"]{display:flex; align-items:center; min-height:40px; padding:7px 12px; border-radius:10px; color:var(--fg); font-weight:700;}
.sport-list li[role="option"].sport-sub{padding-inline-start:28px; font-weight:600; color:var(--fg-dim);}
.sport-list li[role="option"]:hover, .sport-list li[role="option"].sport-sub:hover{background:var(--glass-hi); color:var(--fg);}
.lang-list li{color:var(--fg); min-height:38px; border-radius:10px;}
.lang-list li:hover{background:var(--glass-hi);}
.lang-list li[aria-selected="true"]{background:rgba(227,168,87,.22);}
@media (max-width:600px){ .sport-list{min-width:180px;} .sport-list li[role="option"]{padding:6px 10px;} }

/* ---------- the start page ---------- */
.hero{background:none; border:0; padding:90px 5vw 70px;}
@media (max-width:900px){ .hero{padding:50px 5vw 40px;} }
.hero-kicker{color:var(--amber); letter-spacing:.8px;}
.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.35);}
.hero p{color:var(--fg-dim);}
.hero-free{color:var(--amber);}
.hero-howto a{color:var(--amber);}
.btn{border-radius:14px; padding:14px 28px;}
.btn-primary{background:linear-gradient(180deg, #c27a1a, #A6640F); color:#fff; box-shadow:0 10px 28px -10px rgba(227,168,87,.65), inset 0 1px 0 rgba(255,255,255,.28); border-color:rgba(255,255,255,.18);}
.btn-primary:hover{box-shadow:0 14px 34px -10px rgba(227,168,87,.85), inset 0 1px 0 rgba(255,255,255,.32);}
.btn-ghost{background:var(--glass); color:var(--fg); border:1px solid var(--glass-edge); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);}
.btn-ghost:hover{border-color:var(--amber);}

/* the demo: a glass frame, no wooden board */
.clipboard{
  padding:16px; border-radius:28px; transform:rotate(-2deg);
  background:var(--glass); background-image:none;
  border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow), 0 46px 90px -34px rgba(227,168,87,.30);
}
.clipboard:hover{transform:rotate(-.6deg);}
.clipboard-carousel{border-radius:18px; box-shadow:0 0 0 1px var(--line);}
.clipboard-footer{margin-top:14px; padding:6px 8px 2px;}
.clipboard-logo-small{height:30px;}
.carousel-nav{padding:3px 6px; border-radius:999px; background:var(--soft); border:1px solid var(--glass-edge);}
.carousel-arrow{background:var(--soft); border:1px solid var(--glass-edge); color:var(--fg);}
.carousel-arrow:hover{border-color:var(--amber); color:var(--amber);}
.carousel-label{color:var(--fg);}

/* the sports: a glass card for every family */
.sports-dir{border:0; padding:30px 5vw 70px;}
.sports-dir h2{color:var(--fg);}
.sport-count{display:inline-block; padding:4px 14px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-edge); color:var(--amber);}
.sport-family{
  background:var(--glass); border:1px solid var(--glass-edge); border-radius:20px; padding:14px;
  box-shadow:var(--glass-shadow);
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.sport-family:hover{border-color:rgba(227,168,87,.65); background:var(--hover-fill); transform:translateY(-2px);}
.sport-main:hover .sport-card-title{color:var(--amber);}
.sport-card-title{color:var(--fg);}
.sport-card-icon{filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));}
.sport-variants{border-top:1px solid var(--line);}
.sport-variant{background:var(--soft); border:1px solid var(--line); color:var(--fg);}
.sport-variant:hover{border-color:var(--amber); color:var(--amber); background:rgba(227,168,87,.12);}

/* install as an app / the Android test: glass panels */
.install-pwa, .android-beta{background:none; border:0; padding:30px 5vw;}
.install-pwa-inner, .android-beta-inner{
  max-width:1280px; margin:0 auto; padding:clamp(24px, 4vw, 52px);
  background:var(--glass); border:1px solid var(--glass-edge); border-radius:28px;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
}
.install-pwa h2, .android-beta h2{color:var(--fg);}
.install-pwa .sub, .android-beta .sub{color:var(--fg-dim);}
.install-col h3{color:var(--fg);}
.install-col li{color:var(--fg-dim);}
.install-col li::before{background:linear-gradient(180deg, #c27a1a, #A6640F); color:#fff;}
.android-beta .hint, .hint{color:var(--fg-mute);}
.hint a{color:var(--amber);}

/* the footer: one glass bar */
footer{
  margin:20px 3vw 22px; padding:22px 28px;
  background:var(--glass); border:1px solid var(--glass-edge); border-radius:22px;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow); color:var(--fg-dim);
}
footer a{color:var(--fg-dim); text-decoration:none;}
footer a:hover{color:var(--amber);}
footer .footer-links, footer nav.footer-links{
  position:static; display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  margin:0; padding:0; background:none; border:0; border-radius:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
}
@media (max-width:600px){ footer{margin:16px 10px 16px; padding:18px 18px;} }

/* ---------- the other pages: features, install, the Android app, the tutorials, privacy ---------- */
.content-hero{background:none; border:0; padding:70px 5vw 36px;}
.content-hero .kicker{color:var(--amber);}
.content-hero p{color:var(--fg-dim);}
.features-grid{padding:36px 5vw 60px;}
.feature-card, .faq-item, .howto-card{
  background:var(--glass); border:1px solid var(--glass-edge); border-radius:20px;
  box-shadow:var(--glass-shadow);
}
.feature-card h3, .faq-item h3, .howto-card h3{color:var(--fg); line-height:1.25;}
.feature-card p, .faq-item p, .howto-card p{color:var(--fg-dim);}
.faq-list{padding:36px 5vw 70px; gap:14px;}
.faq-item{padding:20px 24px;}
.content-cta{padding:10px 5vw 70px;}
.content-cta h2{color:var(--fg);}
.howto{padding-top:30px;}
.howto-group h2{color:var(--fg);}
.howto-card{padding:12px 12px 18px;}
.howto-video{border-radius:14px; box-shadow:0 0 0 1px var(--line);}
.back-link{color:var(--amber);}
.board-controls .hint, .board-hero .sub{color:var(--fg-dim);}

@media (prefers-reduced-motion:reduce){
  .sport-family, .clipboard, .btn{transition:none !important;}
  .sport-family:hover{transform:none;}
}

/* ---------- hidden things stay hidden (the display of the rows would win over the attribute) ---------- */
.sport-list li[hidden], .sport-family[hidden], .sport-variant[hidden], .sport-none[hidden]{display:none !important;}

/* ---------- the search of a sport ---------- */
.sport-q{
  width:100%; box-sizing:border-box; padding:9px 12px 9px 36px; border-radius:12px;
  border:1px solid var(--line); background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a29986' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 11px center/16px no-repeat;
  color:var(--fg); font:inherit; font-size:16px; min-height:42px; outline:none; -webkit-appearance:none; appearance:none;
}
.sport-q::placeholder{color:var(--fg-mute); opacity:1;}
.sport-q:focus{border-color:var(--amber); box-shadow:0 0 0 3px rgba(227,168,87,.22);}
.sport-q::-webkit-search-cancel-button{opacity:.6; cursor:pointer;}
.sport-search{position:sticky; top:-6px; z-index:2; margin:-6px -6px 4px; padding:10px 8px 8px; background:var(--glass-strong); border-radius:16px 16px 0 0; list-style:none;}
.sport-none{padding:14px 12px; color:var(--fg-mute); font-size:.9rem; list-style:none;}
.sport-list.searching li[role="option"].sport-sub{padding-inline-start:12px;}
.sport-find{margin:0 0 14px; max-width:460px;}
.sport-cards > .sport-none{padding:18px 4px;}

/* ---------- the look button of the bar ---------- */
.theme-toggle{
  display:flex; align-items:center; justify-content:center; width:36px; height:34px; padding:0; cursor:pointer;
  background:var(--glass-hi); color:var(--fg); border:1px solid var(--glass-edge); border-radius:12px;
  transition:border-color .15s ease, background .15s ease;
}
.theme-toggle:hover{border-color:var(--amber); background:var(--hover-fill);}
@media (max-width:600px){ .theme-toggle{width:30px; height:28px; border-radius:10px;} .theme-toggle svg{width:16px; height:16px;} }

/* ---------- the light look: a warm paper stage with white glass (by the system, by hand or by the hour) ---------- */
html[data-theme="light"]{
  color-scheme:light;
  --stage:#f4ecdc;
  --fg:#2a1d12; --fg-dim:#5a4936; --fg-mute:#7b6a56;
  --amber:#9a5a08; --amber-deep:#A6640F;
  --glass:rgba(255,255,255,.58); --glass-hi:rgba(255,255,255,.80); --glass-strong:rgba(255,252,246,.92);
  --glass-edge:rgba(70,45,15,.15);
  --glass-shadow:0 14px 36px -16px rgba(90,58,18,.38), inset 0 1px 0 rgba(255,255,255,.95);
  --glass-blur:blur(18px) saturate(1.25);
  --soft:rgba(70,45,15,.06); --line:rgba(70,45,15,.14); --hover-fill:rgba(255,255,255,.86);
  --light-a:rgba(227,168,87,.38); --light-b:rgba(110,175,135,.24); --light-c:rgba(214,120,80,.18);
  --bg-top:#f8f1e3; --bg-mid:#f2e8d4; --bg-bot:#ebdec5;
}
html[data-theme="light"] body::before{opacity:.10; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' fill='none' stroke='%237a4a10' stroke-width='3'%3E%3Crect x='40' y='40' width='920' height='520'/%3E%3Cpath d='M500 40v520'/%3E%3Ccircle cx='500' cy='300' r='80'/%3E%3Crect x='40' y='190' width='170' height='220'/%3E%3Crect x='790' y='190' width='170' height='220'/%3E%3Cpath d='M210 230a80 80 0 0 1 0 140M790 230a80 80 0 0 0 0 140'/%3E%3C/svg%3E");}
html[data-theme="light"] ::selection{background:rgba(166,100,15,.28); color:#2a1d12;}
html[data-theme="light"] .hero h1{text-shadow:none;}
html[data-theme="light"] .sport-card-icon{filter:drop-shadow(0 3px 5px rgba(60,35,10,.25));}
html[data-theme="light"] .sport-list, html[data-theme="light"] .lang-list{box-shadow:0 18px 44px -14px rgba(90,58,18,.45), inset 0 1px 0 rgba(255,255,255,.9);}
html[data-theme="light"] .btn-ghost{background:var(--glass-hi);}
html[data-theme="light"] .clipboard{box-shadow:var(--glass-shadow), 0 46px 90px -40px rgba(166,100,15,.38);}
html[data-theme="light"] .sport-q{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b6a56' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");}
/* (without scripts the system decides) */
@media (prefers-color-scheme: light){
  html:not([data-theme]){
    color-scheme:light; --stage:#f4ecdc; --fg:#2a1d12; --fg-dim:#5a4936; --fg-mute:#7b6a56; --amber:#9a5a08;
    --glass:rgba(255,255,255,.58); --glass-hi:rgba(255,255,255,.80); --glass-strong:rgba(255,252,246,.92); --glass-edge:rgba(70,45,15,.15);
    --glass-shadow:0 14px 36px -16px rgba(90,58,18,.38), inset 0 1px 0 rgba(255,255,255,.95);
    --soft:rgba(70,45,15,.06); --line:rgba(70,45,15,.14); --hover-fill:rgba(255,255,255,.86);
    --light-a:rgba(227,168,87,.38); --light-b:rgba(110,175,135,.24); --light-c:rgba(214,120,80,.18); --bg-top:#f8f1e3; --bg-mid:#f2e8d4; --bg-bot:#ebdec5;
  }
}