/* BUILD: INDEX_VISUAL_DEPTH_V36 | UPDATED: 2026-09-08 */
:root { --f1-black:#15151e;--f1-dark-gray:#1f1f27;--f1-red:#e10600;--f1-white:#ffffff;--f1-light-bg:#f3f3f3;--site-header-height:120px;--site-header-font-size:24px;--sponsor-logo-width:180px;--sponsor-logo-height:92px;--sponsor-grid-columns:5;--sponsor-mobile-grid-columns:2;--site-body-font:'Prompt',sans-serif;--site-heading-font:'Orbitron',sans-serif;--site-body-font-size:16px;--site-body-text:#15151e;--site-content-width:1200px;--site-page-padding:20px;--site-page-spacing:30px;--site-section-gap:20px;--site-header-overlay:.58;--site-header-position:center;--site-header-border:4px;--site-nav-font-size:14px;--site-nav-gap:15px;--site-league-bg:#fff;--site-league-text:#15151e;--site-league-padding:12px;--site-card-bg:#fff;--site-card-text:#15151e;--site-card-radius:8px;--site-card-padding:20px;--site-card-shadow:0 2px 8px rgba(0,0,0,.05);--site-section-font-size:18px;--site-section-transform:uppercase;--site-section-border:4px;--site-button-radius:4px;--site-button-font-size:14px;--site-footer-bg:#15151e;--site-footer-text:#fff;--site-sponsor-gap:14px; }
body { font-family:var(--site-body-font);font-size:var(--site-body-font-size);background-color:var(--f1-light-bg);margin:0;padding:0;color:var(--site-body-text); }
.f1-header { background-color:var(--f1-black);background-size:cover;background-position:var(--site-header-position);color:white;padding:0 var(--site-page-padding);border-bottom:var(--site-header-border) solid var(--f1-red);position:sticky;top:0;z-index:1000; }
.f1-header::before { content:'';position:absolute;inset:0;z-index:0;background:rgba(21,21,30,var(--site-header-overlay));opacity:0;pointer-events:none;transition:opacity .2s; }
.f1-header.has-custom-header::before { opacity:1; }
.nav-container { max-width:var(--site-content-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;height:var(--site-header-height);position:relative;z-index:1; }
.brand-logo { font-family:var(--site-heading-font);font-size:var(--site-header-font-size);font-weight:700;color:var(--f1-white);text-decoration:none; }
#site-brand-logo-text { color:var(--f1-white); }
#site-brand-logo-text > span { color:var(--f1-red); }
.brand-logo-image { display:block;width:auto;max-width:320px;max-height:calc(var(--site-header-height) - 20px);object-fit:contain; }
.brand-logo-image[hidden] { display:none; }
.top-nav-links { display:flex;gap:var(--site-nav-gap);flex-wrap:wrap; }
.top-nav-links a { color:white;text-decoration:none;font-weight:500;font-size:var(--site-nav-font-size);padding:4px 8px;border-radius:var(--site-button-radius);transition:.2s;cursor:pointer; }
.top-nav-links a:hover, .top-nav-links a.active { background: var(--f1-red); }

.league-bar { background:var(--site-league-bg);color:var(--site-league-text);box-shadow:0 2px 4px rgba(0,0,0,.05);padding:var(--site-league-padding) var(--site-page-padding); }
.league-bar-inner { max-width:var(--site-content-width) !important;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px; }
.league-picker { display:flex;align-items:center;gap:12px;min-width:0; }
.league-picker-label { flex:0 0 auto;font-weight:700;font-size:15px; }
.league-buttons { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.league-button { appearance:none;border:2px solid var(--f1-black);background:#fff;color:var(--f1-black);padding:8px 14px;border-radius:var(--site-button-radius);font-family:var(--site-heading-font);font-size:13px;font-weight:700;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s; }
.league-button:hover { border-color:var(--f1-red);color:var(--f1-red);transform:translateY(-1px); }
.league-button.active { border-color:var(--f1-red);background:var(--f1-red);color:#fff;box-shadow:0 2px 7px rgba(0,0,0,.16); }
.league-button:focus-visible,.share-page-button:focus-visible { outline:3px solid rgba(225,6,0,.35);outline-offset:3px; }
.share-page-button { flex:0 0 auto;border:0;background:var(--f1-black);color:#fff;padding:10px 15px;border-radius:var(--site-button-radius);font-family:var(--site-body-font);font-size:var(--site-button-font-size);font-weight:700;cursor:pointer; }
.share-page-button:hover { background:var(--f1-red); }
#league-select[hidden] { display:none !important; }
.main-layout { max-width:var(--site-content-width);margin:var(--site-page-spacing) auto;padding:0 var(--site-page-padding); }

.section-header-f1 { font-family:var(--site-heading-font);border-top:var(--site-section-border) solid var(--f1-black);border-right:var(--site-section-border) solid var(--f1-black);border-radius:0 10px 0 0;padding-top:10px;margin-bottom:var(--site-section-gap);font-size:var(--site-section-font-size);font-weight:bold;text-transform:var(--site-section-transform); }
.card-f1 { background:var(--site-card-bg);color:var(--site-card-text);border-radius:var(--site-card-radius);padding:var(--site-card-padding);box-shadow:var(--site-card-shadow);margin-bottom:var(--site-section-gap); }
.schedule-round-title { font-family:var(--site-heading-font);background:var(--f1-black);color:white;padding:8px 15px;border-radius:4px;font-size:16px;margin-bottom:15px;display:inline-block; }

.home-hero-container { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 30px; }
@media(max-width: 900px) { .home-hero-container { grid-template-columns: 1fr; } .home-bottom-grid { grid-template-columns: 1fr !important; } }
.hero-main-card { position: relative; border-radius: 8px; overflow: hidden; background: #000; color: white; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.hero-main-card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.65; z-index: 1; transition: 0.3s; }
.hero-main-card:hover img { opacity: 0.75; }
.hero-main-content { position: relative; z-index: 2; }
.side-news-list { display: flex; flex-direction: column; gap: 15px; }
.side-news-item { background: white; border-radius: 8px; padding: 12px; display: flex; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); align-items: center; cursor: pointer; transition: 0.2s; border-left: 4px solid var(--f1-red); }
.side-news-item:hover { transform: translateY(-2px); }
.side-news-item img { width: 90px; height: 70px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.news-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.news-card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.06); cursor:pointer; transition:.2s; }
.news-card:hover { transform:translateY(-3px); box-shadow:0 5px 16px rgba(0,0,0,.10); }
.news-card img { width:100%; height:180px; object-fit:cover; display:block; }
.news-card-body { padding:16px; }
.news-card-summary { color:#666; font-size:13px; line-height:1.7; margin:8px 0 0; }
.news-detail { max-width:900px; margin:0 auto; }
.news-detail-cover { width:100%; max-height:480px; object-fit:cover; border-radius:8px; margin-bottom:20px; }
.news-detail-title { font-size:32px; line-height:1.35; margin:8px 0 10px; }
.news-full-content { font-size:16px; line-height:1.9; color:#222; white-space:pre-wrap; overflow-wrap:anywhere; }
.news-full-content img { max-width:100%; height:auto; display:block; margin:18px auto; border-radius:6px; }
.news-back-btn { margin-bottom:18px; background:var(--f1-black); }
@media(max-width:700px) { .news-detail-title { font-size:24px; } .news-full-content { font-size:15px; } }
.home-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }

.match-row { padding: 15px 0; border-bottom: 2px solid #eee; }
.match-header { display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 16px; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
.lineup-grid { display:grid;grid-template-columns:1fr;gap:8px;font-size:14px;background:#f4f5f7;padding:12px;border-radius:8px;margin-top:12px;border:1px solid #e1e3e6; }
.match-board-head { display:grid;grid-template-columns:72px minmax(0,1fr) 42px minmax(0,1fr);gap:8px;align-items:center;padding:0 10px 5px;color:#666;font-size:12px;font-weight:700;text-align:center; }
.board-row { display:grid;grid-template-columns:72px minmax(0,1fr) 42px minmax(0,1fr);gap:8px;align-items:center;padding:9px 10px;background:#fff;border:1px solid #e0e0e0;border-radius:7px; }
.board-number { font-family:var(--site-heading-font);font-weight:800;color:var(--f1-black);font-size:12px; }
.board-player { display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:8px 9px;border-radius:6px;border-left:4px solid var(--player-team-color,#777);background:#fafafa;text-align:center; }
.board-player.winner { background:#eaf8ee;box-shadow:inset 0 0 0 1px #8bd29d; }
.board-player.draw { background:#f0f1f2; }
.board-player-name { min-width:0;overflow-wrap:anywhere;font-weight:700;color:var(--player-team-color,#333); }
.board-vs { text-align:center;color:#777;font-size:11px;font-weight:800; }
.board-result-note { grid-column:2/5;text-align:center;color:#555;font-size:12px;padding-top:1px; }
.winner-tag { background:#28a745;color:white;padding:2px 6px;border-radius:10px;font-size:10px;font-weight:800;white-space:nowrap; }
.draw-tag { background:#6c757d;color:white;padding:2px 6px;border-radius:10px;font-size:10px;font-weight:800;white-space:nowrap; }
.schedule-round-head { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px; }
.schedule-round-head .schedule-round-title { margin-bottom:0; }
.round-lineups-panel { background:#fff;border:2px solid var(--f1-black);border-top:5px solid var(--f1-red);border-radius:8px;padding:15px;margin:0 0 15px; }
.round-lineups-panel[hidden] { display:none; }
.round-lineups-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px; }
.round-lineup-team { background:#fafafa;border-left:5px solid var(--team-color,var(--f1-red));border-radius:6px;padding:12px; }
.round-lineup-team h4 { margin:0 0 8px;color:var(--team-color,var(--f1-red));font-size:16px; }
.round-lineup-team ol { margin:0;padding-left:23px;color:#333;font-size:13px;line-height:1.8; }

.table-standings { width: 100%; border-collapse: collapse; text-align: center; }
.table-standings th { background:var(--f1-black);color:white;padding:12px;font-family:var(--site-heading-font);font-size:13px; }
.table-standings td { padding: 12px; border-bottom: 1px solid #ddd; font-size: 15px; }
.team-name-col { text-align: left; font-weight: bold; }
.pts-col { font-weight: bold; color: var(--f1-red); font-size: 18px; }

.page-zone { display: none; }
.page-zone.active { display: block; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; }
.gallery-item img { width: 100%; height: 200px; object-fit: cover; border-radius: 6px; }
.gallery-album { background:white; border-radius:8px; padding:12px; box-shadow:0 2px 8px rgba(0,0,0,0.05); cursor:pointer; transition:.2s; }
.gallery-album:hover { transform:translateY(-3px); box-shadow:0 5px 16px rgba(0,0,0,.10); }
.gallery-album-cover { width:100%; height:220px; object-fit:cover; border-radius:6px; display:block; }
.gallery-album-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.gallery-album-grid img { width:100%; height:170px; object-fit:cover; border-radius:6px; cursor:zoom-in; }
.gallery-modal { position:fixed; inset:0; background:rgba(0,0,0,.78); display:none; align-items:center; justify-content:center; padding:20px; z-index:3000; }
.gallery-modal.active { display:flex; }
.gallery-modal-card { background:#fff; width:min(1100px,96vw); max-height:92vh; overflow:auto; border-radius:10px; padding:20px; position:relative; }
.gallery-modal-close { position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:50%; padding:0; font-size:22px; background:var(--f1-black); }
.gallery-modal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:15px; }
.gallery-modal-grid img { width:100%; height:190px; object-fit:cover; border-radius:7px; cursor:zoom-in; }
.gallery-slide-shell { margin-top:16px; }
.gallery-slide-stage { position:relative;display:flex;align-items:center;justify-content:center;min-height:min(66vh,680px);padding:12px 64px;background:#11141a;border-radius:10px;overflow:hidden;touch-action:pan-y; }
.gallery-slide-image { display:block;width:100%;height:min(66vh,680px);object-fit:contain;user-select:none;-webkit-user-drag:none; }
.gallery-slide-nav { position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:46px;height:58px;padding:0;border:0;border-radius:8px;background:rgba(0,0,0,.66);color:#fff;font-size:34px;line-height:1;cursor:pointer;z-index:2; }
.gallery-slide-nav:hover { background:var(--f1-red); }
.gallery-slide-nav:disabled { display:none; }
.gallery-slide-prev { left:10px; }
.gallery-slide-next { right:10px; }
.gallery-slide-footer { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;color:#555;font-size:13px; }
.gallery-slide-counter { flex:0 0 auto;padding:5px 11px;border-radius:14px;background:var(--f1-black);color:#fff;font-weight:700; }
.gallery-slide-hint { text-align:right; }
@media(max-width:700px) { .gallery-album-cover { height:180px; } .gallery-modal-grid img { height:150px; } }
@media(max-width:700px) {
    .gallery-slide-stage { min-height:58vh;padding:8px 42px;border-radius:8px; }
    .gallery-slide-image { height:58vh; }
    .gallery-slide-nav { width:38px;height:52px;font-size:28px;border-radius:7px; }
    .gallery-slide-prev { left:4px; }
    .gallery-slide-next { right:4px; }
    .gallery-slide-footer { align-items:flex-start;font-size:11px; }
    .gallery-slide-hint { max-width:70%; }
}

.crew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.crew-card { background: white; padding: 20px; text-align: center; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.crew-card img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--f1-red); margin-bottom: 10px; }
.crew-priority-groups { width:100%; }
.crew-priority-section { width:100%; margin-bottom:28px; }
.crew-priority-grid { display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:24px; }
#page-crew .crew-public-card { flex:0 1 calc((100% - 48px) / 3);max-width:360px;min-width:0;padding:30px 22px;border-top:5px solid var(--f1-red); }
#page-crew .crew-public-card img { width:170px;height:170px;border-width:5px;margin-bottom:16px; }
#page-crew .crew-public-name { font-weight:700;font-size:23px;line-height:1.4;overflow-wrap:anywhere; }
#page-crew .crew-public-role { color:var(--f1-red);font-size:17px;line-height:1.5;margin-top:8px;overflow-wrap:anywhere; }

/* Teams & rosters — larger type and clickable team details */
#page-teams .section-header-f1 { font-size: 24px; }
#teams-roster-container { margin-top:36px; }
.team-roster-card { border-top: 5px solid var(--team-color, var(--f1-red)); }
.team-roster-header { display:flex; align-items:center; gap:15px; margin-bottom:15px; border-bottom:1px solid #eee; padding-bottom:12px; }
.team-roster-logo { width:56px; height:56px; object-fit:contain; flex:0 0 auto; }
.team-title-button { appearance:none; border:0; background:transparent; color:var(--f1-black); cursor:pointer; margin:0; padding:2px 0; text-align:left; font-size:22px; line-height:1.35; font-weight:700; text-decoration:underline; text-decoration-color:var(--team-color, var(--f1-red)); text-decoration-thickness:3px; text-underline-offset:5px; }
.team-title-button:hover { color:var(--f1-red); }
.team-title-button:focus-visible { outline:3px solid var(--team-color, var(--f1-red)); outline-offset:4px; border-radius:3px; }
.team-open-hint { margin-top:7px; color:#666; font-size:14px; font-weight:500; }
.team-player-list { display:flex; flex-direction:column; gap:10px; }
.team-player-row { display:flex; align-items:center; gap:12px; background:#fafafa; padding:10px 12px; border-radius:6px; font-size:16px; }
.team-player-row img { width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.team-empty-roster { color:#888; font-size:15px; }
.team-detail-back { border:0; border-radius:5px; background:var(--f1-black); color:#fff; cursor:pointer; padding:10px 16px; font-size:15px; font-weight:700; margin-bottom:15px; }
.team-detail-back:hover { background:var(--f1-red); }
.team-detail-summary { border-top:6px solid var(--team-color, var(--f1-red)); }
.team-detail-heading { display:flex; align-items:center; gap:20px; border-bottom:1px solid #eee; padding-bottom:16px; margin-bottom:16px; }
.team-detail-heading img { width:90px; height:90px; object-fit:contain; flex:0 0 auto; }
.team-detail-heading h2 { margin:0; font-size:30px; line-height:1.3; }
.team-detail-heading p { margin:7px 0 0; color:#666; font-size:16px; }
.team-stat-grid { display:grid; grid-template-columns:repeat(6, minmax(90px, 1fr)); gap:10px; }
.team-stat { background:#fafafa; border-radius:7px; padding:12px; text-align:center; }
.team-stat strong { display:block; color:var(--f1-red); font-size:23px; line-height:1.2; }
.team-stat span { color:#666; font-size:14px; }
.team-detail-roster-title { font-size:23px; margin:25px 0 15px; }
.team-player-card { border-top:4px solid var(--team-color, var(--f1-red)); }
.team-player-card img { border-color:var(--team-color, var(--f1-red)); }
.team-player-photo-toggle { appearance:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:0;margin:0 auto 10px;border-radius:50%;cursor:pointer;line-height:0; }
.team-player-photo-toggle img { display:block;margin:0;transition:transform .18s,box-shadow .18s; }
.team-player-photo-toggle:hover img { transform:scale(1.04); }
.team-player-photo-toggle:focus-visible { outline:3px solid var(--team-color, var(--f1-red));outline-offset:4px; }
.team-player-photo-toggle[aria-expanded="true"] img { box-shadow:0 0 0 4px color-mix(in srgb,var(--team-color, var(--f1-red)) 30%,transparent); }
.team-player-row .team-player-photo-toggle { flex:0 0 auto;margin:0; }
.team-player-row .team-player-photo-toggle img { margin:0; }
.team-player-name { font-weight:700; font-size:18px; line-height:1.4; }
.team-player-role { color:var(--f1-red); font-size:15px; margin-top:6px; }
.team-player-number { color:#666; font-size:14px; margin-top:5px; }
.team-player-mini-stats { color:#777; font-size:13px; margin-top:3px; line-height:1.5; }
.team-player-personal-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:14px; }
.team-player-personal-stat { background:#f5f5f5; border-radius:6px; padding:8px 5px; text-align:center; }
.team-player-personal-stat strong { display:block; color:var(--f1-red); font-size:18px; line-height:1.2; }
.team-player-personal-stat span { color:#666; font-size:11px; line-height:1.3; }
.team-player-stat-button { appearance:none;border:0;width:100%;font-family:var(--site-body-font);cursor:pointer;transition:.18s; }
.team-player-stat-button:hover { background:#e9e9e9; transform:translateY(-1px); box-shadow:0 2px 7px rgba(0,0,0,.10); }
.team-player-stat-button:focus-visible { outline:3px solid var(--team-color, var(--f1-red)); outline-offset:2px; }
.team-player-win-rate { background:var(--f1-black); }
.team-player-win-rate strong, .team-player-win-rate span { color:#fff; }
.team-player-history-hint { margin-top:9px; color:#777; font-size:11px; line-height:1.45; }
.team-player-personal-stats[hidden], .team-player-mini-stats[hidden], .team-player-history-hint[hidden] { display:none!important; }

.team-manager-panel { border-top:6px solid var(--f1-red); }
.team-manager-panel h2 { margin:0 0 8px;font-size:23px; }
.team-manager-login { display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) auto;gap:10px;align-items:end; }
.team-manager-login input,.team-manager-login button { margin:0; }
.team-manager-team-head { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:15px; }
.team-manager-team-info { display:flex;align-items:center;gap:12px; }
.team-manager-team-info img { width:56px;height:56px;object-fit:contain; }
.manager-round-list { display:flex;flex-direction:column;gap:12px; }
.manager-round-card { border:1px solid #ddd;border-left:5px solid var(--team-color,var(--f1-red));border-radius:7px;padding:14px;background:#fafafa; }
.manager-round-head { display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px; }
.manager-lineup-selects { display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:8px; }
.manager-lineup-selects label { font-size:12px;font-weight:700; }
.manager-lineup-selects select { width:100%;margin-top:5px; }
.manager-round-actions { display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px; }
.manager-round-status { font-size:12px;color:#666; }
@media(max-width:800px) { .team-manager-login{grid-template-columns:1fr}.manager-lineup-selects{grid-template-columns:1fr 1fr} }
@media(max-width:480px) { .manager-lineup-selects{grid-template-columns:1fr} }

.player-history-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.78); z-index:3200; }
.player-history-modal.active { display:flex; }
.player-history-card { width:min(820px,96vw); max-height:92vh; overflow:auto; position:relative; background:#fff; border-radius:10px; padding:22px; box-shadow:0 20px 65px rgba(0,0,0,.35); }
.player-history-close { position:absolute; top:10px; right:10px; width:38px; height:38px; border:0; border-radius:50%; background:var(--f1-black); color:#fff; cursor:pointer; font-size:22px; }
.player-history-header { display:flex; align-items:center; gap:14px; padding-right:48px; margin-bottom:16px; }
.player-history-header img { width:62px; height:62px; border-radius:50%; object-fit:cover; border:3px solid var(--f1-red); }
.player-history-header h2 { margin:0; font-size:24px; line-height:1.35; }
.player-history-header p { margin:4px 0 0; color:#666; font-size:13px; }
.player-history-filters { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:15px; }
.player-history-filter { border:1px solid #ddd;border-radius:18px;padding:7px 12px;background:#f5f5f5;color:#222;cursor:pointer;font-family:var(--site-body-font);font-size:13px;font-weight:700; }
.player-history-filter.active { background:var(--f1-black); border-color:var(--f1-black); color:#fff; }
.player-history-list { display:flex; flex-direction:column; gap:9px; }
.player-history-item { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px; background:#fafafa; border:1px solid #eee; border-radius:8px; }
.player-history-item img { width:52px; height:52px; border-radius:50%; object-fit:cover; }
.player-history-opponent { font-size:16px; font-weight:700; line-height:1.35; }
.player-history-team { color:#666; font-size:12px; margin-top:2px; }
.player-history-meta { color:#777; font-size:11px; margin-top:5px; line-height:1.5; }
.player-history-result { min-width:64px; padding:7px 9px; border-radius:15px; color:#fff; text-align:center; font-size:12px; font-weight:700; }
.player-history-result.win { background:#28a745; }
.player-history-result.draw { background:#6c757d; }
.player-history-result.loss { background:#dc3545; }
.player-history-result.count { background:var(--f1-black); }
.player-history-games { grid-column:1/-1;display:flex;flex-direction:column;gap:8px;margin-top:3px;padding-top:9px;border-top:1px solid #e5e5e5; }
.player-history-game { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:start;background:#fff;border:1px solid #e7e7e7;border-radius:7px;padding:10px; }
.player-history-game-meta { color:#666;font-size:12px;line-height:1.6; }
.player-history-game-result { padding:4px 8px;border-radius:12px;color:#fff;font-size:11px;font-weight:700;white-space:nowrap; }
.player-history-game-result.win { background:#28a745; }
.player-history-game-result.draw { background:#6c757d; }
.player-history-game-result.loss { background:#dc3545; }
.player-history-game-score { color:var(--f1-red);font-size:13px;font-weight:700;margin-top:4px; }
.player-history-board-link { grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;width:max-content;max-width:100%;margin-top:2px;padding:8px 13px;border-radius:6px;background:var(--f1-red);color:#fff;text-decoration:none;font-size:12px;font-weight:700; }
.player-history-board-link:hover { filter:brightness(.9); }
.player-history-board-image { display:block;width:100%;max-height:300px;object-fit:contain;background:#17191c;border-radius:7px;border:1px solid #ddd; }
.player-history-board-caption { display:block;margin-top:5px;color:var(--f1-red);font-size:11px;font-weight:700; }

.site-sponsor-footer { background:var(--site-footer-bg);color:var(--site-footer-text);border-top:var(--site-header-border) solid var(--f1-red);margin-top:40px; }
.site-sponsor-inner { max-width:var(--site-content-width);margin:0 auto;padding:26px var(--site-page-padding) 30px; }
.site-sponsor-title { text-align:center;color:var(--site-footer-text);font-size:14px;font-weight:700;letter-spacing:.5px;margin-bottom:16px; }
.site-sponsor-logos { display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--site-sponsor-gap);margin-left:auto;margin-right:auto; }
button { border-radius:var(--site-button-radius);font-size:var(--site-button-font-size); }
h1,h2,h3,.schedule-round-title { font-family:var(--site-heading-font); }
.site-sponsor-logo { display:flex;flex:0 0 var(--sponsor-logo-width);align-items:center;justify-content:center;width:var(--sponsor-logo-width);max-width:100%;height:var(--sponsor-logo-height);padding:12px;border-radius:8px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18); }
.site-sponsor-logo img { display:block;max-width:100%;max-height:calc(var(--sponsor-logo-height) - 24px);width:auto;height:auto;object-fit:contain; }
    

/* =========================================================
   MOBILE UI REFINEMENT — visual/layout only
   Keeps all existing HTML, JavaScript and API behaviour intact.
   ========================================================= */
* { box-sizing: border-box; }
html, body { width:100%; max-width:100%; overflow-x:hidden; }
img, video, iframe { max-width:100%; }
button, select, input, textarea { font-family:var(--site-body-font); }

@media (max-width: 700px) {
    body { font-size:14px; }
    .f1-header { position:sticky; top:0; padding:0 8px; }
    .nav-container {
min-height:var(--site-header-height);
height:auto;
width:100%;
padding:8px 0 7px;
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
gap:7px;
    }
    .brand-logo {
display:block;
width:100%;
text-align:center;
font-size:var(--site-header-font-size);
line-height:1.25;
white-space:normal;
letter-spacing:.2px;
    }
    .top-nav-links {
width:100%;
display:flex;
flex-wrap:nowrap;
justify-content:flex-start;
gap:5px;
overflow-x:auto;
overflow-y:hidden;
padding:1px 2px 3px;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
    }
    .top-nav-links::-webkit-scrollbar { display:none; }
    .top-nav-links a {
flex:0 0 auto;
font-size:12px;
line-height:1.2;
padding:9px 10px;
min-height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
white-space:nowrap;
    }

    .league-bar { padding:10px; }
    .league-bar > div {
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:1fr;
gap:7px !important;
align-items:stretch !important;
    }
    .league-picker { display:block;min-width:0; }
    .league-picker-label { display:block;margin-bottom:7px;font-size:13px; }
    .league-buttons { flex-wrap:nowrap;overflow-x:auto;padding:1px 1px 7px;-webkit-overflow-scrolling:touch;scrollbar-width:thin; }
    .league-button { flex:0 0 auto;min-height:42px;padding:8px 12px;font-size:12px;white-space:nowrap; }
    .share-page-button { width:100%;min-height:44px; }

    .main-layout { width:100%; max-width:none; margin:14px auto; padding:0 10px; }
    .section-header-f1 {
font-size:16px;
line-height:1.35;
margin-bottom:12px;
padding-top:7px;
overflow-wrap:anywhere;
    }
    .card-f1 { padding:12px; margin-bottom:12px; border-radius:10px; }

    .home-hero-container,
    .home-bottom-grid,
    .news-list-grid,
    .home-video-grid { grid-template-columns:1fr !important; gap:12px !important; }
    .hero-main-card { min-height:250px; padding:18px; }
    .side-news-list { gap:10px; }
    .side-news-item { padding:10px; }
    .side-news-item img { width:76px; height:60px; }

    .match-row { padding:13px 0; }
    .match-header {
display:flex;
flex-direction:column;
align-items:stretch;
gap:7px;
font-size:15px;
line-height:1.5;
    }
    .match-header > div { min-width:0; overflow-wrap:anywhere; }
    .lineup-grid { padding:8px; gap:6px; }
    .match-board-head { display:none; }
    .board-row {
display:grid;
grid-template-columns:1fr 30px 1fr;
gap:6px;
padding:8px 7px;
line-height:1.45;
    }
    .brand-logo-image { max-width:min(240px,85vw);max-height:min(80px,calc(var(--site-header-height) - 16px));margin:0 auto; }
    .board-number { grid-column:1/-1;text-align:center;padding-bottom:2px; }
    .board-player { padding:7px 5px;flex-direction:column;gap:4px; }
    .board-vs { align-self:center; }
    .board-result-note { grid-column:1/-1;padding-top:2px; }
    .board-row span, .board-row strong { min-width:0; overflow-wrap:anywhere; word-break:break-word; }
    .schedule-round-title {
display:block;
width:100%;
font-size:14px;
padding:9px 11px;
margin-bottom:8px;
    }

    .table-standings { min-width:560px; font-size:13px; }
    .table-standings th { padding:9px 7px; font-size:11px; white-space:nowrap; }
    .table-standings td { padding:9px 7px; font-size:13px; white-space:nowrap; }
    #page-standings .card-f1 { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    #home-standings-body + * { max-width:100%; }

    #teams-roster-container { grid-template-columns:1fr !important; gap:12px !important; margin-top:24px; }
    #page-teams .section-header-f1 { font-size:20px; }
    .team-roster-header { gap:12px; }
    .team-roster-logo { width:50px; height:50px; }
    .team-title-button { font-size:20px; }
    .team-open-hint { font-size:13px; }
    .team-player-row { font-size:15px; padding:9px 10px; }
    .team-detail-heading { align-items:flex-start; gap:14px; }
    .team-detail-heading img { width:70px; height:70px; }
    .team-detail-heading h2 { font-size:24px; }
    .team-detail-heading p { font-size:15px; }
    .team-stat-grid { grid-template-columns:repeat(2, 1fr); }
    .team-detail-roster-title { font-size:20px; }
    .player-history-modal { padding:8px; }
    .player-history-card { width:100%; max-height:94vh; padding:15px; }
    .player-history-header h2 { font-size:20px; }
    .player-history-item { grid-template-columns:44px minmax(0,1fr); gap:9px; }
    .player-history-item img { width:44px; height:44px; }
    .player-history-result { grid-column:2; justify-self:start; min-width:58px; margin-top:-2px; }
    .player-history-games { grid-column:1/-1; }
    .player-history-game { grid-template-columns:1fr auto; }
    .player-history-board-link { width:100%; }
    .crew-grid { grid-template-columns:1fr 1fr !important; gap:10px !important; }
    .crew-card { padding:13px 9px; }
    .crew-card img { width:72px; height:72px; }
    .crew-priority-section { margin-bottom:18px; }
    .crew-priority-grid { gap:12px; }
    #page-crew .crew-public-card { flex-basis:calc(50% - 6px);padding:18px 10px; }
    #page-crew .crew-public-card img { width:118px;height:118px;border-width:4px;margin-bottom:12px; }
    #page-crew .crew-public-name { font-size:18px; }
    #page-crew .crew-public-role { font-size:14px; }
    .gallery-grid { grid-template-columns:1fr !important; gap:12px !important; }
    .gallery-album { padding:10px; }
    .gallery-album-cover { height:210px; }
    .gallery-modal { padding:8px; }
    .gallery-modal-card { width:100%; max-height:94vh; padding:12px; border-radius:10px; }
    .gallery-modal-grid { grid-template-columns:1fr 1fr; gap:7px; }
    .gallery-modal-grid img { height:135px; }

    .news-card img { height:190px; }
    .news-card-body { padding:13px; }
    .news-detail { width:100%; }
    .news-detail-cover { max-height:none; margin-bottom:12px; }
    .news-detail-title { font-size:23px !important; line-height:1.35; }
    .news-full-content { font-size:15px !important; line-height:1.8; overflow-wrap:anywhere; }
    .news-full-content table { display:block; width:100%; overflow-x:auto; }

    /* Inline layout blocks generated by the existing renderer */
    #home-gallery-grid { grid-template-columns:1fr 1fr !important; gap:8px !important; }
    #home-gallery-grid img { height:120px !important; }
    #home-video-grid iframe { width:100% !important; height:auto; aspect-ratio:16/9; }
    .site-sponsor-footer { margin-top:24px; }
    .site-sponsor-inner { padding:22px 10px 25px; }
    .site-sponsor-logos { gap:9px; }
    .site-sponsor-logo { width:100%;max-width:var(--sponsor-logo-width);height:var(--sponsor-logo-height);padding:9px; }
    .site-sponsor-logo img { max-height:calc(var(--sponsor-logo-height) - 18px); }
}

@media (max-width: 380px) {
    .brand-logo { font-size:var(--site-header-font-size); }
    .top-nav-links a { font-size:11px; padding:8px 9px; }
    .main-layout { padding:0 8px; }
    .crew-grid { grid-template-columns:1fr !important; }
    #page-crew .crew-public-card { flex-basis:100%;max-width:320px; }
    #page-crew .crew-public-card img { width:140px;height:140px; }
    #home-gallery-grid { grid-template-columns:1fr !important; }
    #home-gallery-grid img { height:150px !important; }
}

/* Keep Admin customization authoritative after mobile refinement rules. */
@media (max-width:700px) {
    .league-bar { padding:var(--site-league-padding) var(--site-page-padding); }
    .main-layout { width:100%;max-width:var(--site-content-width);margin:var(--site-page-spacing) auto;padding:0 var(--site-page-padding); }
    .section-header-f1,#page-teams .section-header-f1 { margin-bottom:var(--site-section-gap);font-size:var(--site-section-font-size);border-top-width:var(--site-section-border);border-right-width:var(--site-section-border); }
    .card-f1 { padding:var(--site-card-padding);margin-bottom:var(--site-section-gap);border-radius:var(--site-card-radius);box-shadow:var(--site-card-shadow); }
    .site-sponsor-inner { padding-left:var(--site-page-padding);padding-right:var(--site-page-padding); }
    .site-sponsor-logos { gap:var(--site-sponsor-gap); }
}

/* =========================================================
   VISUAL DEPTH & SPACING — PC + MOBILE
   A consistent surface system without changing page behavior.
   ========================================================= */
:root {
    --surface-border:rgba(21,21,30,.10);
    --surface-shadow:0 10px 28px rgba(21,21,30,.09),0 2px 7px rgba(21,21,30,.06);
    --surface-shadow-hover:0 16px 38px rgba(21,21,30,.14),0 4px 10px rgba(21,21,30,.08);
    --surface-soft:#f8f9fb;
}

body {
    background-image:radial-gradient(circle at 8% 4%,rgba(255,255,255,.78),transparent 28%),linear-gradient(180deg,rgba(255,255,255,.18),rgba(21,21,30,.025));
    background-attachment:fixed;
}

.f1-header {
    box-shadow:0 8px 26px rgba(0,0,0,.22);
}

.league-bar {
    position:relative;
    z-index:20;
    border-bottom:1px solid var(--surface-border);
    box-shadow:0 5px 18px rgba(21,21,30,.08);
}

.main-layout {
    min-height:55vh;
}

.page-zone.active {
    animation:page-surface-in .22s ease-out;
}

@keyframes page-surface-in {
    from { opacity:.35;transform:translateY(5px); }
    to { opacity:1;transform:none; }
}

.section-header-f1 {
    position:relative;
    overflow:hidden;
    padding:13px 18px 12px;
    border-left:1px solid var(--surface-border);
    border-bottom:1px solid var(--surface-border);
    background:linear-gradient(105deg,rgba(255,255,255,.92),rgba(255,255,255,.45));
    box-shadow:0 6px 18px rgba(21,21,30,.07);
}

.card-f1,
.news-card,
.gallery-album,
.crew-card,
.side-news-item,
.home-gallery-album,
.team-stat,
.team-player-personal-stat,
.manager-round-card,
.player-history-item,
.player-history-game,
.round-lineup-team {
    border:1px solid var(--surface-border);
}

.card-f1 {
    box-shadow:var(--site-card-shadow),var(--surface-shadow);
}

.news-card,
.gallery-album,
.crew-card,
.side-news-item,
.home-gallery-album {
    box-shadow:var(--surface-shadow) !important;
}

.hero-main-card {
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 18px 44px rgba(21,21,30,.24),0 4px 12px rgba(21,21,30,.16);
}

.hero-main-card::after {
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    border-radius:inherit;
}

.match-row {
    margin-bottom:14px;
    padding:18px;
    border:1px solid var(--surface-border);
    border-radius:max(8px,var(--site-card-radius));
    background:linear-gradient(180deg,#fff,var(--surface-soft));
    box-shadow:0 5px 15px rgba(21,21,30,.055);
}

.match-row:last-child { margin-bottom:0; }
.lineup-grid { border:1px solid rgba(21,21,30,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
.board-row { box-shadow:0 2px 7px rgba(21,21,30,.045); }
.round-lineups-panel { box-shadow:var(--surface-shadow); }

.table-standings {
    overflow:hidden;
    border:1px solid var(--surface-border);
    border-radius:8px;
    background:#fff;
}

.table-standings tbody tr { transition:background-color .16s; }
.table-standings tbody tr:nth-child(even) { background:rgba(21,21,30,.025); }
.table-standings tbody tr:hover { background:rgba(225,6,0,.055); }

.team-roster-card,
.team-detail-summary,
.team-player-card,
.team-manager-panel {
    position:relative;
    overflow:hidden;
}

.team-player-row,
.team-stat,
.team-player-personal-stat,
.manager-round-card,
.round-lineup-team {
    background:linear-gradient(180deg,#fff,var(--surface-soft));
    box-shadow:0 3px 10px rgba(21,21,30,.045);
}

.team-player-row { border:1px solid rgba(21,21,30,.07); }
.team-roster-logo,.team-detail-heading img { filter:drop-shadow(0 4px 7px rgba(21,21,30,.13)); }
.crew-card img,.team-player-photo-toggle img { box-shadow:0 7px 16px rgba(21,21,30,.14); }

.gallery-album-cover,
.news-card img,
.side-news-item img {
    box-shadow:0 4px 12px rgba(21,21,30,.12);
}

#schedule-round-filter,
.league-button,
.share-page-button,
.team-detail-back {
    box-shadow:0 3px 9px rgba(21,21,30,.12);
}

.gallery-modal-card,.player-history-card {
    border:1px solid rgba(255,255,255,.32);
    box-shadow:0 26px 75px rgba(0,0,0,.42);
}

.site-sponsor-footer { box-shadow:0 -8px 24px rgba(21,21,30,.12); }
.site-sponsor-logo { border:1px solid rgba(255,255,255,.22);box-shadow:0 8px 20px rgba(0,0,0,.22); }

@media (hover:hover) and (pointer:fine) {
    .news-card,
    .gallery-album,
    .crew-card,
    .side-news-item,
    .home-gallery-album,
    .team-roster-card {
        transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
    }
    .news-card:hover,
    .gallery-album:hover,
    .crew-card:hover,
    .side-news-item:hover,
    .home-gallery-album:hover,
    .team-roster-card:hover {
        transform:translateY(-3px);
        border-color:rgba(225,6,0,.24);
        box-shadow:var(--surface-shadow-hover) !important;
    }
}

@media (max-width:700px) {
    :root {
        --surface-shadow:0 6px 17px rgba(21,21,30,.085),0 1px 4px rgba(21,21,30,.045);
    }
    body { background-attachment:scroll; }
    .f1-header { box-shadow:0 5px 17px rgba(0,0,0,.2); }
    .league-bar { box-shadow:0 4px 12px rgba(21,21,30,.075); }
    .section-header-f1,#page-teams .section-header-f1 {
        padding:11px 12px 10px;
        border-left:1px solid var(--surface-border);
        border-bottom:1px solid var(--surface-border);
        box-shadow:0 4px 12px rgba(21,21,30,.06);
    }
    .card-f1 { box-shadow:var(--site-card-shadow),var(--surface-shadow); }
    .hero-main-card { box-shadow:0 10px 25px rgba(21,21,30,.20); }
    .match-row { margin-bottom:10px;padding:12px 9px;border-radius:8px;box-shadow:0 3px 9px rgba(21,21,30,.05); }
    .news-card,.gallery-album,.crew-card,.side-news-item,.home-gallery-album { box-shadow:var(--surface-shadow) !important; }
    .gallery-modal-card,.player-history-card { box-shadow:0 18px 48px rgba(0,0,0,.34); }
}

@media (prefers-reduced-motion:reduce) {
    .page-zone.active { animation:none; }
    .news-card,.gallery-album,.crew-card,.side-news-item,.home-gallery-album,.team-roster-card { transition:none !important; }
}