/* ================================================
   QUEER SPORTS DB — Shared Stylesheet
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;700&family=VT323&display=swap');

/* --- RESET ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.scroll-smooth { scroll-behavior: smooth; }

/* --- DESIGN TOKENS -------------------------------- */
:root {
    --bg:     #0a0c0f;
    --bg2:    #111418;
    --amber:  #FF5200;
    --adim:   #7a8088;
    --afaint: #1e2228;
    --green:  #BEFF00;
    --gold:   #FFD000;
    --w:      #ffffff;
    --wd:     rgba(255,255,255,0.72);
    --wf:     rgba(255,255,255,0.3);
    --fhead:  'Bebas Neue', 'Arial Black', Impact, sans-serif;
    --fbody:  'Inter', 'Helvetica Neue', Arial, sans-serif;
    --fterm:  'IBM Plex Mono', 'Courier New', monospace;
    --fvt:    'VT323', 'Courier New', monospace;
}

/* --- BASE ----------------------------------------- */
body { background: var(--bg); color: var(--w); font-family: var(--fbody); min-height: 100vh; }
a { color: var(--amber); }
code { background: rgba(255,82,0,0.08); color: var(--amber); padding: 1px 5px; font-family: var(--fterm); font-size: 0.88em; }

/* --- NAV ------------------------------------------ */
nav {
    position: sticky; top: 0; z-index: 100; height: 52px;
    background: rgba(10,12,15,0.97);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--afaint);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; gap: 12px;
}
nav.nav-fixed { position: fixed; left: 0; right: 0; }
.logo { font-family: var(--fhead); font-size: 22px; letter-spacing: 3px; color: var(--amber); text-decoration: none; flex-shrink: 0; line-height: 1; }
.logo .bolt { color: var(--w); }
.nav-links { display: flex; align-items: center; gap: 0; list-style: none; }
.nav-links a { font-family: var(--fbody); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--adim); text-decoration: none; padding: 6px 10px; white-space: nowrap; transition: color 0.15s; }
.nav-links a:hover { color: var(--w); }
.nav-links .active { color: var(--amber); }
.nav-links .pill { border: 1px solid var(--amber); color: var(--amber) !important; margin-left: 6px; }
.nav-links .pill:hover { background: rgba(255,82,0,0.08); }
.hamburger { display: none; background: none; border: none; color: var(--w); cursor: pointer; font-size: 20px; padding: 6px 4px; }
@media (max-width: 580px) {
    nav { height: auto; flex-wrap: wrap; }
    .hamburger { display: block; }
    .nav-links { display: none; width: 100%; flex-direction: column; gap: 0; padding: 8px 0; }
    .nav-links.active { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a { display: block; padding: 10px 20px; white-space: normal; }
    .nav-links .pill { margin-left: 0; margin-top: 8px; }
}

/* --- FOOTER --------------------------------------- */
footer {
    border-top: 1px solid var(--afaint); background: var(--bg2);
    padding: 28px 24px; display: flex; flex-wrap: wrap;
    justify-content: space-between; align-items: center;
    gap: 16px; margin-top: 60px;
}
.footer-logo { font-family: var(--fhead); font-size: 20px; letter-spacing: 3px; color: var(--amber); line-height: 1; }
.footer-right { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 1px; color: var(--adim); flex-wrap: wrap; }
.footer-right a { color: var(--adim); text-decoration: none; transition: color 0.15s; }
.footer-right a:hover { color: var(--w); }
.footer-sep { color: var(--afaint); }
@media (max-width: 500px) { footer { flex-direction: column; align-items: flex-start; } }

/* --- BUTTONS -------------------------------------- */
.btn {
    font-family: var(--fbody); font-size: 13px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    text-decoration: none; padding: 14px 22px; text-align: center;
    display: inline-block;
    transition: filter 0.15s, transform 0.15s; white-space: nowrap;
}
body.page-index .btn { padding: 16px 28px; }
.btn:hover  { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary   { background: var(--amber); color: var(--w); }
.btn-outline,
.btn-secondary { background: transparent; color: var(--w); border: 2px solid var(--w); }
.btn-outline:hover,
.btn-secondary:hover { background: rgba(255,255,255,0.07); }

/* --- ANIMATIONS ----------------------------------- */
@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,82,0,0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(255,82,0,0); }
}
@keyframes blink  { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes fadein { to { opacity: 1; } }
@keyframes spin   { to { transform: rotate(360deg); } }

/* --- COMMON UTILITIES ----------------------------- */
.eyebrow { font-size: 11px; letter-spacing: 2px; color: var(--amber); text-transform: uppercase; margin-bottom: 14px; }
.eyebrow::before { content: "✦ "; }
.dot, .status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--amber); flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: pulse 2s ease-in-out infinite; }

/* --- PAGE CONTAINER ------------------------------- */
.page { max-width: 640px; margin: 0 auto; padding: 32px 16px 64px; }
body.page-stats .page     { max-width: 900px; }
body.page-contributor .page { display: flex; flex-direction: column; gap: 0; }

/* ================================================
   INDEX PAGE
   ================================================ */
body.page-index { overflow-x: hidden; }
.hero {
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 80px 24px 60px;
    max-width: 680px; margin: 0 auto; width: 100%;
}
.hero-tag {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; letter-spacing: 2px; color: var(--amber);
    text-transform: uppercase; margin-bottom: 22px;
}
.hero-tag::before { content: "✦ "; }
body.page-index h1 {
    font-family: var(--fhead);
    font-size: clamp(60px, 16vw, 140px);
    line-height: 0.86; letter-spacing: 1px; color: var(--w);
    margin-bottom: 32px;
}
.tagline {
    font-size: 16px; line-height: 1.95; color: var(--wd);
    border-left: 2px solid var(--afaint); padding-left: 18px;
    margin-bottom: 48px; max-width: 500px;
}
.buttons { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 400px) { .buttons { flex-direction: column; } .btn { width: 100%; } }

/* ================================================
   ABOUT PAGE
   ================================================ */
h1 {
    font-family: var(--fhead);
    font-size: clamp(44px, 11vw, 80px);
    color: var(--amber); letter-spacing: 3px; line-height: 0.88;
    margin-bottom: 40px;
}
body.page-format h1 { margin-bottom: 28px; }
.section { margin-bottom: 52px; border-left: 2px solid var(--afaint); padding-left: 20px; }
body.page-format .section { border-left: none; padding-left: 0; margin-bottom: 56px; }
.section-label { font-size: 11px; letter-spacing: 2px; color: var(--amber); text-transform: uppercase; margin-bottom: 8px; }
.section-label::before { content: "✦ "; }
.section-title { font-family: var(--fhead); font-size: 24px; letter-spacing: 2px; color: var(--w); margin-bottom: 16px; line-height: 1; }
body.page-format .section-title { font-size: 28px; margin-bottom: 12px; }
body.page-stats  .section-title { font-size: 22px; letter-spacing: 3px; margin-top: 48px; }
.body { font-size: 16px; line-height: 1.95; color: rgba(255,255,255,0.88); }
.body p { margin-bottom: 16px; }
.body p:last-child { margin-bottom: 0; }
.body em { color: var(--amber); font-style: normal; }
.body strong { color: var(--w); font-weight: 700; }
.body a { color: var(--amber); text-decoration: none; }
.body a:hover { text-decoration: underline; }
.principles { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.principle {
    background: var(--bg2); border: 1px solid var(--afaint);
    padding: 14px 18px;
    display: grid; grid-template-columns: 28px 1fr;
    gap: 12px; align-items: start;
}
.principle-num { font-family: var(--fhead); font-size: 18px; color: var(--amber); line-height: 1.2; }
.principle-body { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.88); }
.principle-body strong { color: var(--w); }
.compare { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.compare-row {
    background: var(--bg2); border: 1px solid var(--afaint);
    display: grid; grid-template-columns: 1fr 1fr;
}
.compare-cell { padding: 12px 16px; font-size: 14px; line-height: 1.7; }
.compare-cell:first-child { border-right: 1px solid var(--afaint); color: #E87868; }
.compare-cell:last-child { color: rgba(255,255,255,0.92); }
.compare-head { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 2px; }
.compare-head-cell { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 6px 16px; color: #C86050; }
.compare-head-cell:last-child { color: var(--green); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

/* ================================================
   FORMAT PAGE
   ================================================ */
.intro { font-size: 16px; line-height: 1.9; color: rgba(255,255,255,0.88); border-left: 2px solid var(--afaint); padding-left: 16px; margin-bottom: 56px; max-width: 480px; }
.intro em { color: var(--amber); font-style: normal; }
.section-desc { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.72); margin-bottom: 20px; border-left: 2px solid var(--afaint); padding-left: 12px; }
.section-desc em { color: var(--amber); font-style: normal; }
.rating-rows { display: flex; flex-direction: column; gap: 2px; }
.rating-row {
    background: var(--bg2); border: 1px solid var(--afaint);
    display: grid; grid-template-columns: 100px 1fr;
    align-items: stretch;
}
.rr-left {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 20px 16px; border-right: 1px solid var(--afaint); gap: 6px;
}
.rr-stars { font-size: 16px; line-height: 1; letter-spacing: 2px; }
.rr-name { font-family: var(--fhead); font-size: 15px; letter-spacing: 2px; text-align: center; line-height: 1.1; }
.rr-right { padding: 18px 20px; display: flex; align-items: center; }
.rr-desc { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.88); }
.r5 .rr-name { color: #39FF14; }
.r4 .rr-name { color: #C8FF00; }
.r3 .rr-name { color: #FFD000; }
.r2 .rr-name { color: #FF7A00; }
.r1 .rr-name { color: #FF3B5C; }
.r0 .rr-name { color: #888; }
.r0 .rr-stars { color: #666; }
.copy-block { background: var(--bg2); border: 1px solid var(--afaint); margin-top: 12px; }
.block-bar {
    background: #0d1015; border-bottom: 1px solid var(--afaint);
    padding: 9px 16px; display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
}
.block-bar-left { font-family: var(--fterm); font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,0.7); }
.copy-btn {
    font-family: var(--fbody); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    background: rgba(255,82,0,0.1); border: 1px solid rgba(255,82,0,0.3);
    color: var(--amber); padding: 5px 14px; cursor: pointer;
    transition: background 0.15s; white-space: nowrap;
}
.copy-btn:hover { background: rgba(255,82,0,0.2); }
.copy-body { padding: 24px; font-family: var(--fterm); font-size: 16px; line-height: 2.1; color: rgba(255,255,255,0.82); }
.copy-body .tag { color: var(--amber); font-weight: 700; }
.format-table { width: 100%; border-collapse: collapse; }
.format-table tr { border-bottom: 1px solid var(--afaint); }
.format-table tr:last-child { border-bottom: none; }
.format-table td { padding: 13px 16px; background: var(--bg2); font-size: 15px; vertical-align: middle; }
.format-table td:first-child { width: 36px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.58); border-right: 1px solid var(--afaint); padding: 13px 8px; }
.format-table td:nth-child(2) { width: 40%; color: var(--w); font-weight: 700; border-right: 1px solid var(--afaint); }
.format-table td:nth-child(3) { color: rgba(255,255,255,0.72); font-size: 14px; }
.row-blank td { padding: 7px 16px; background: rgba(255,255,255,0.04); border-bottom: 1px dashed rgba(255,255,255,0.1); }
.row-blank td:first-child { border-right: 1px solid var(--afaint); color: rgba(255,255,255,0.5); font-size: 14px; }
.row-blank td:nth-child(2) { color: rgba(255,255,255,0.6); font-size: 13px; letter-spacing: 2px; font-style: italic; font-weight: 400; }
.row-blank td:nth-child(3) { color: rgba(255,255,255,0.45); font-size: 13px; font-style: italic; }
@media (max-width: 500px) {
    .format-table td:nth-child(3) { display: none; }
    .format-table td:nth-child(2) { border-right: none; }
}
.footer-note { margin-top: 56px; border-left: 2px solid var(--afaint); padding-left: 16px; font-size: 16px; line-height: 1.9; color: rgba(255,255,255,0.88); }
.footer-note a { color: var(--amber); text-decoration: none; }
.footer-note a:hover { text-decoration: underline; }

/* ================================================
   STATS PAGE
   ================================================ */
.section-eyebrow { font-size: 11px; letter-spacing: 2px; color: var(--amber); text-transform: uppercase; margin-bottom: 6px; margin-top: 48px; }
.section-eyebrow::before { content: "✦ "; }
.numbers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px; margin-bottom: 48px;
}
@media (max-width: 640px) { .numbers { grid-template-columns: repeat(2, 1fr); } }
.num-card {
    background: var(--bg2); border: 1px solid var(--afaint);
    padding: 24px 20px; display: flex; flex-direction: column; gap: 6px;
}
.num-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--w); }
.num-value {
    font-family: var(--fhead); font-size: clamp(36px, 7vw, 60px);
    line-height: 1; letter-spacing: 2px; color: var(--w);
}
.num-value.loading { color: var(--afaint); animation: blink 1s ease-in-out infinite; }
.rating-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 48px; }
.rbar { display: grid; grid-template-columns: 140px 1fr 40px; align-items: center; gap: 14px; }
.rbar-label { font-size: 14px; letter-spacing: 1px; color: rgba(255,255,255,0.88); white-space: nowrap; }
.rbar-track { height: 6px; background: var(--afaint); position: relative; }
.rbar-fill { height: 100%; width: 0%; transition: width 1s ease; }
.r5-fill { background: #39FF14; }
.r4-fill { background: #C8FF00; }
.r3-fill { background: #FFD000; }
.r2-fill { background: #FF7A00; }
.r1-fill { background: #FF3B5C; }
.r0-fill { background: #555; }
.rbar-count { font-size: 13px; color: rgba(255,255,255,0.58); text-align: right; }
.city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2px; margin-bottom: 48px;
}
.city-row {
    background: var(--bg2); border: 1px solid var(--afaint);
    padding: 12px 16px; display: flex; justify-content: space-between; align-items: center;
}
.city-name { font-size: 15px; color: var(--w); }
.city-count { font-family: var(--fhead); font-size: 18px; letter-spacing: 1px; color: var(--amber); }
.contrib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px; margin-bottom: 48px;
}
.contrib-row {
    background: var(--bg2); border: 1px solid var(--afaint);
    padding: 12px 16px; display: flex; justify-content: space-between; align-items: center;
}
.contrib-handle { font-family: var(--fterm); font-size: 13px; color: var(--amber); }
.contrib-count  { font-size: 13px; color: rgba(255,255,255,0.58); }
.loading-state  { padding: 40px 0; color: var(--adim); font-size: 13px; letter-spacing: 2px; }

/* ================================================
   APPLICATION PAGE
   ================================================ */
body.page-application {
    display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start;
    padding: 40px 24px;
}
body.page-application h1 {
    color: var(--w); letter-spacing: 2px; margin-bottom: 32px;
}
.wrap {
    max-width: 560px; width: 100%; margin: 0 auto;
    opacity: 0; animation: fadein 0.5s 0.1s forwards;
}
.status {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; letter-spacing: 2px; color: var(--amber);
    text-transform: uppercase; margin-bottom: 24px;
}
.body-text {
    font-size: 16px; line-height: 1.95; color: var(--wd);
    border-left: 2px solid var(--afaint); padding-left: 18px;
    margin-bottom: 48px; max-width: 420px;
}
.body-text em { color: var(--amber); font-style: normal; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.footnote {
    margin-top: 60px; font-size: 12px; letter-spacing: 1px;
    color: var(--adim); line-height: 1.8;
    border-top: 1px solid var(--afaint); padding-top: 20px;
}
.footnote a { color: var(--adim); text-decoration: none; }
.footnote a:hover { color: var(--w); }

/* ================================================
   DATABASE PAGE
   ================================================ */
.page-head {
    padding: 32px 20px 24px; max-width: 1100px; margin: 0 auto;
    border-bottom: 1px solid var(--afaint);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.page-title { font-family: var(--fhead); font-size: clamp(36px, 8vw, 60px); color: var(--amber); letter-spacing: 3px; line-height: 1; }
.live-badge {
    display: flex; align-items: center; gap: 6px;
    font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--amber);
    padding-bottom: 4px;
}
.filter-bar {
    padding: 12px 20px; max-width: 1100px; margin: 0 auto;
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
    border-bottom: 1px solid var(--afaint);
}
.filter-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-right: 2px; white-space: nowrap; }
.fbtn {
    font-family: var(--fbody); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    background: transparent; border: 1px solid var(--afaint); color: rgba(255,255,255,0.55);
    padding: 5px 11px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.fbtn:hover { border-color: rgba(255,255,255,0.3); color: var(--w); }
.fbtn.on { font-weight: 700; }
.fall.on { background: var(--amber); border-color: var(--amber); color: var(--w); }
.f5.on { background: #39FF14; border-color: #39FF14; color: var(--bg); }
.f4.on { background: #C8FF00; border-color: #C8FF00; color: var(--bg); }
.f3.on { background: #FFD000; border-color: #FFD000; color: var(--bg); }
.f2.on { background: #FF7A00; border-color: #FF7A00; color: var(--bg); }
.f1.on { background: #FF3B5C; border-color: #FF3B5C; color: var(--w); }
.f0.on { background: #444; border-color: #555; color: #ccc; }
.filter-sep { width: 1px; height: 20px; background: var(--afaint); flex-shrink: 0; }
.fcity.on { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); color: var(--w); }
/* Skill level filter colors */
.fbtn[data-filter="skill"][data-val="comp"].on { bbackground: #FF5200; border-color: #FF5200; color: var(--bg); }
.fbtn[data-filter="skill"][data-val="rec"].on { background: #BEFF00; border-color: #BEFF00; color: var(--bg); }
/* Play type filter colors */
.fbtn[data-filter="play"][data-val="pickup"].on { background: #FFD000; border-color: #FFD000;  color: var(--w); }
.fbtn[data-filter="play"][data-val="league"].on { background: #c084fc; border-color: #c084fc; color: var(--w); }
.fbtn[data-filter="play"][data-val="tournament"].on { background: #FF3B5C; border-color: #FF3B5C; color: var(--bg); }
.fbtn[data-filter="play"][data-val="travel"].on { background: #39FF14; border-color: #39FF14; color: var(--bg); }
.grid-wrap { padding: 20px; max-width: 1100px; margin: 0 auto; }
.result-count { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 840px) { .grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } }
.card {
    background: var(--bg2); border: 1px solid var(--afaint);
    display: flex; flex-direction: column; overflow: hidden;
    transition: transform 0.18s, border-color 0.18s;
}
.card:hover { transform: translateY(-2px); border-color: #444; }
.card-img {
    height: 240px; background: #0d1015;
    display: flex; align-items: center; justify-content: center;
    font-size: 48px; position: relative; overflow: hidden; flex-shrink: 0;
}
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stamp {
    position: absolute; top: 0; left: 0;
    font-family: var(--fhead); font-size: 12px; letter-spacing: 2px;
    padding: 5px 12px; z-index: 1; line-height: 1.3; text-transform: uppercase;
}
.stamp.r5, .s5 { background: #39FF14; color: #060606; }
.stamp.r4, .s4 { background: #C8FF00; color: #060606; }
.stamp.r3, .s3 { background: #FFD000; color: #060606; }
.stamp.r2, .s2 { background: #FF7A00; color: #060606; }
.stamp.r1, .s1 { background: #FF3B5C; color: #fff; }
.stamp.r0, .s0 { background: #1a1a1a; color: #666; border-bottom: 1px solid #2a2a2a; border-right: 1px solid #2a2a2a; }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.card-name { font-family: var(--fhead); font-size: 20px; letter-spacing: 2px; line-height: 1; margin-bottom: 3px; color: var(--w); }
.card-loc { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 12px; }
.card-sep { border: none; border-top: 1px solid var(--afaint); margin-bottom: 12px; }
.card-text { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.88); flex: 1; margin-bottom: 14px; }
.card-foot {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; letter-spacing: 1px;
    padding-top: 10px; border-top: 1px solid var(--afaint); gap: 6px;
}
.card-handle { font-family: var(--fterm); color: var(--amber); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; text-decoration: none; }
.card-handle:hover { text-decoration: underline; }
.card-price { border: 1px solid var(--afaint); color: rgba(255,255,255,0.5); padding: 2px 6px; font-size: 10px; letter-spacing: 2px; flex-shrink: 0; }
.card-date { color: rgba(255,255,255,0.5); flex-shrink: 0; }
.state {
    grid-column: 1 / -1; padding: 60px 20px;
    text-align: center; font-size: 12px; letter-spacing: 2px;
}
.state-icon { font-size: 40px; margin-bottom: 16px; line-height: 1; }
.state-title { font-family: var(--fhead); font-size: 20px; letter-spacing: 3px; color: var(--amber); margin-bottom: 8px; }
.state-body { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.58); }
.state-body a { color: var(--amber); text-decoration: none; }
.state-body a:hover { text-decoration: underline; }
.spinner {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 60px 20px; font-size: 13px; letter-spacing: 2px; color: rgba(255,255,255,0.4);
}
.spinner-ring {
    width: 32px; height: 32px;
    border: 2px solid var(--afaint); border-top-color: var(--amber);
    border-radius: 50%; animation: spin 0.8s linear infinite;
}

/* --- CLUB LIST VIEW ------------------------------- */
.club-list { display: flex; flex-direction: column; gap: 2px; }
.club-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg2); border: 1px solid var(--afaint);
    padding: 14px 16px; text-decoration: none; color: var(--w);
    transition: border-color 0.15s, background 0.15s;
}
.club-row:hover { border-color: #444; background: #141820; }
.club-row-emoji { font-size: 28px; flex-shrink: 0; width: 40px; text-align: center; line-height: 1; }
.club-row-body { flex: 1; min-width: 0; }
.club-row-name { font-family: var(--fhead); font-size: 18px; letter-spacing: 1.5px; line-height: 1; margin-bottom: 6px; color: var(--w); }
.club-row-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.row-tag {
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    border: 1px solid var(--afaint); color: rgba(255,255,255,0.45);
    padding: 2px 7px;
}
.row-tag-sport      { background: #00D9FF; color: #060606; border-color: #00D9FF; }
.row-tag-city       { color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.18); }
.row-tag-comp       { background: #FF5200; color: #fff;    border-color: #FF5200; }
.row-tag-rec        { background: #BEFF00; color: #060606; border-color: #BEFF00; }
.row-tag-pickup     { background: #FFD000; color: #060606; border-color: #FFD000; }
.row-tag-league     { background: #c084fc; color: #060606; border-color: #c084fc; }
.row-tag-tournament { background: #FF3B5C; color: #fff;    border-color: #FF3B5C; }
.row-tag-travel     { background: #39FF14; color: #060606; border-color: #39FF14; }
.club-row-arrow { font-size: 16px; color: var(--adim); flex-shrink: 0; transition: color 0.15s, transform 0.15s; }
.club-row:hover .club-row-arrow { color: var(--amber); transform: translateX(3px); }
@media (max-width: 500px) {
    .club-row-emoji { font-size: 22px; width: 30px; }
    .club-row-name  { font-size: 15px; }
}

/* ================================================
   CONTRIBUTOR PAGE
   ================================================ */
.page-intro {
    font-size: 16px; line-height: 1.95; color: var(--wd);
    border-left: 2px solid var(--afaint); padding-left: 16px;
    margin-bottom: 48px; max-width: 500px;
}
.page-intro em { color: var(--amber); font-style: normal; }
.steps { display: flex; flex-direction: column; gap: 2px; margin-bottom: 48px; }
.step {
    background: var(--bg2); border: 1px solid var(--afaint);
    padding: 18px 20px; display: flex; gap: 18px; align-items: flex-start;
}
.step-n {
    font-family: var(--fhead); font-size: 26px; color: var(--adim);
    line-height: 1; flex-shrink: 0; width: 26px; transition: color 0.15s;
}
.step:hover .step-n { color: var(--amber); }
.step-title { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--amber); text-transform: uppercase; margin-bottom: 5px; }
.step-body  { font-size: 15px; line-height: 1.8; color: var(--wd); }
.step-body a { color: var(--amber); text-decoration: none; }
.step-body a:hover { text-decoration: underline; }
.cta-block {
    background: var(--bg2); border: 1px solid var(--afaint);
    padding: 36px 32px; display: flex; flex-direction: column;
    align-items: flex-start; gap: 20px; margin-bottom: 32px;
}
.cta-heading { font-family: var(--fvt); font-size: clamp(22px, 5vw, 28px); line-height: 1.5; color: var(--wd); }
.cta-heading strong { color: var(--amber); font-weight: normal; }
.apply-btn {
    display: inline-block; font-family: var(--fbody);
    font-size: 15px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
    background: var(--amber); color: var(--w);
    text-decoration: none; padding: 16px 32px;
    transition: background 0.15s; width: 100%; text-align: center;
}
.apply-btn:hover { background: #ff7a00; }
.cta-note { font-size: 12px; letter-spacing: 1px; color: var(--adim); line-height: 1.8; }
.disclaimer {
    font-size: 14px; line-height: 1.85; color: var(--adim);
    border-left: 2px solid var(--afaint); padding-left: 16px;
}
.disclaimer em { color: var(--wf); font-style: normal; }

/* ================================================
   BURGER DATABASE (Vintage Mac OS)
   ================================================ */
@font-face {
    font-family: 'ChicagoFLF';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/Chicago-Font/1.0.0/ChicagoFLF.ttf') format('truetype');
}

body.page-burger {
    font-family: 'ChicagoFLF', 'Chicago', monospace;
    background: #BDBDBD;
    min-height: 100vh;
    padding: 20px;
    color: #000;
}

body.page-burger::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: -1;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    opacity: 0.15;
}

.container { max-width: 1000px; margin: 0 auto; }

.menu-bar {
    background: #FFF; border-bottom: 2px solid #000;
    padding: 5px 10px; margin-bottom: 20px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}

.menu-left { display: flex; align-items: center; gap: 15px; font-size: 12px; }
.logo-text  { font-size: 16px; font-weight: bold; }
.menu-right { font-size: 10px; color: #666; }

.desktop { display: none; }
.desktop.active { display: block; }
.desktop-title {
    text-align: center; font-size: 16px; margin-bottom: 25px;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.5); color: #333;
}

.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 20px; padding: 20px; max-width: 700px; margin: 0 auto;
}

.folder-icon {
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer; transition: transform 0.1s; user-select: none;
}
.folder-icon:hover  { transform: translateY(-2px); }
.folder-icon:active { transform: scale(0.98); }

.folder-image {
    width: 64px; height: 64px;
    background: linear-gradient(145deg, #F0E68C, #DAA520);
    border: 1px solid #B8860B; border-radius: 5px 5px 0 0;
    position: relative; display: flex;
    justify-content: center; align-items: center;
    margin-bottom: 8px; box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.folder-image::before {
    content: '';
    position: absolute; top: -6px; left: 10px; width: 20px; height: 6px;
    background: linear-gradient(145deg, #F0E68C, #DAA520);
    border: 1px solid #B8860B; border-bottom: none; border-radius: 2px 2px 0 0;
}
.folder-emoji { font-size: 28px; }
.folder-label {
    text-align: center; font-size: 11px; max-width: 100px;
    overflow: hidden; text-overflow: ellipsis;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

.list-view { display: none; background: #FFF; border: 2px solid #000; box-shadow: 4px 4px 0 rgba(0,0,0,0.3); }
.list-view.active { display: block; }

.window-title-bar {
    background: #000; color: #FFF; padding: 5px 10px; font-size: 12px;
    display: flex; justify-content: space-between; align-items: center;
}
.window-controls { display: flex; gap: 5px; }
.window-btn { width: 14px; height: 14px; background: #FFF; border: 1px solid #000; cursor: pointer; }
.window-body { padding: 20px; max-height: 70vh; overflow-y: auto; }

.back-button {
    background: linear-gradient(to bottom, #FFFFFF, #D0D0D0);
    border: 2px outset #CCC; padding: 6px 15px;
    font-family: 'ChicagoFLF', monospace; font-size: 11px;
    cursor: pointer; margin-bottom: 15px; box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}
.back-button:active { border-style: inset; transform: translateY(1px); }

.index-cards { display: grid; grid-template-columns: 1fr; gap: 10px; }

.index-card {
    background: #FFFEF0; border: 1px solid #DDD0A0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    padding: 12px; display: flex; cursor: pointer;
    transition: transform 0.1s, background-color 0.1s;
}
.index-card:hover { background: #FFF8D0; transform: translateY(-2px); }

.card-image {
    width: 80px; height: 80px; background: #E0E0E0;
    border: 1px solid #A0A0A0; margin-right: 12px;
    flex-shrink: 0; overflow: hidden;
}
.card-image img { width: 100%; height: 100%; object-fit: contain; background: #f5f5f5; }
.card-content { flex: 1; }
.card-title   { font-weight: bold; font-size: 13px; margin-bottom: 5px; text-decoration: underline; }
.card-detail  { font-size: 11px; margin-bottom: 3px; }
.card-price   {
    display: inline-block; background: #4a90e2; color: white;
    padding: 2px 6px; border-radius: 3px; font-size: 10px; margin-top: 5px;
}

.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); z-index: 200; backdrop-filter: blur(2px);
}
.modal-overlay.active { display: block; }

.burger-detail {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    max-width: 500px; width: 90%; background: #C0C0C0;
    border: 2px outset #FFFFFF; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    z-index: 300; display: none;
}
.burger-detail.active { display: block; }

.detail-title-bar {
    background: linear-gradient(to right, #000080, #1084d0);
    color: white; padding: 5px 10px; font-size: 12px;
    display: flex; justify-content: space-between; align-items: center;
}
.close-button {
    width: 16px; height: 16px; background: #C0C0C0;
    border: 1px outset #FFFFFF; font-size: 11px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.detail-content { padding: 15px; background: #FFFEF0; max-height: 70vh; overflow-y: auto; }

.detail-image {
    width: 100%; height: 200px; background: #E0E0E0;
    border: 1px inset #808080; margin-bottom: 15px;
    overflow: hidden; cursor: pointer; position: relative;
}
.detail-image:hover::after {
    content: '🔍 Click to view full size';
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.7); color: white;
    padding: 8px; font-size: 10px; text-align: center;
}
.detail-image img { width: 100%; height: 100%; object-fit: contain; background: #f5f5f5; }

.fullsize-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.9); z-index: 500; cursor: pointer; padding: 20px;
}
.fullsize-overlay.active { display: flex; justify-content: center; align-items: center; }
.fullsize-image { max-width: 90%; max-height: 90%; object-fit: contain; box-shadow: 0 0 50px rgba(0,0,0,0.8); }
.fullsize-close {
    position: absolute; top: 20px; right: 20px;
    background: white; border: 2px solid #000;
    padding: 8px 15px; font-size: 14px; cursor: pointer;
    font-family: 'ChicagoFLF', monospace;
}

.detail-section { margin-bottom: 10px; font-size: 12px; }
.detail-label   { font-weight: bold; margin-bottom: 3px; }

@media (max-width: 768px) {
    body.page-burger { padding: 10px; }
    .menu-bar { flex-direction: column; gap: 10px; padding: 8px; }
    .menu-left { width: 100%; justify-content: center; }
    .menu-right { width: 100%; text-align: center; }
    .folder-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 15px; }
    .folder-image { width: 56px; height: 56px; }
    .folder-emoji { font-size: 24px; }
    .folder-label { font-size: 10px; }
    .desktop-title { font-size: 14px; margin-bottom: 20px; }
    .window-body { padding: 15px; }
    .index-card { flex-direction: column; }
    .card-image { width: 100%; height: 150px; margin-right: 0; margin-bottom: 10px; }
    .burger-detail { width: 95%; }
    .detail-content { padding: 12px; }
}

@media (max-width: 480px) {
    .folder-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .folder-image { width: 60px; height: 60px; }
    .folder-emoji { font-size: 26px; }
    .folder-label { font-size: 11px; }
}