/* SECTION 01 — ROOT VARIABLES */
:root{--stage:600px;--headerH:60px;--footerH:20px;--bar:#1e1e1e;--bg:#ffffff;--band:#4f86f7;--panel:#ffffff;--ink:#111;--muted:#6b6b6b;--line:rgba(0,0,0,.10);--radius:12px;--shadow:0 10px 18px rgba(0,0,0,.14);--shadow2:0 14px 24px rgba(0,0,0,.16);--dissolve:.22s;}

/* SECTION 02 — BASE RESET */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);}

/* SECTION 03 — FIXED HEADER */
.gameHeader{position:fixed;top:0;left:0;width:100%;height:var(--headerH);z-index:1000;display:flex;justify-content:center;pointer-events:none;}
.gameHeader .bar{width:min(var(--stage),100%);height:var(--headerH);background:var(--bar);display:flex;align-items:center;pointer-events:auto;}
.gameHeader .barGrid{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 14px;}
.gameHeader .barLeft{justify-self:start;font-weight:800;font-size:12px;letter-spacing:.14em;color:#fff;}
.gameHeader .barTitle{justify-self:center;font-weight:900;font-size:16px;letter-spacing:.20em;color:#fff;}
.gameHeader .barRight{justify-self:end;min-width:36px;}

/* SECTION 04 — FIXED FOOTER */
.gameFooter{position:fixed;bottom:0;left:0;width:100%;height:var(--footerH);z-index:900;display:flex;justify-content:center;pointer-events:none;}
.gameFooter .bar{width:min(var(--stage),100%);height:var(--footerH);background:var(--bar);display:flex;align-items:center;justify-content:center;pointer-events:auto;}
.gameFooter .footerLabel{font-size:10px;font-weight:800;letter-spacing:.12em;color:#fff;opacity:.95;}

/* SECTION 05 — SCROLL AREA */
.scrollArea{min-height:100vh;padding-top:var(--headerH);padding-bottom:var(--footerH);overflow-x:hidden;}
.stage{width:min(var(--stage),100%);margin:0 auto;}

/* SECTION 06 — FEATURED BAND */
.featured{background:var(--band);padding:28px 0 30px;}
.featuredRow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 10px;align-items:stretch;}

/* SECTION 06.1 — FEATURED TITLE */
.featuredTitle{text-align:center;font-size:20px;font-weight:900;color:#fff;letter-spacing:.02em;margin-top:-20px;margin-bottom:10px;}

/* SECTION 06.2 — FEATURED NOTE TEXT */
.featured-note{margin-top:10px;margin-bottom:-20px;text-align:center;}
.featured-note p{color:#ffffff;font-size:12px;font-style:italic;line-height:1.3;opacity:.9;max-width:520px;margin:0 auto;}


/* SECTION 07 — COLUMNS AREA */
.columns{padding:26px 10px 34px;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:-160px;}
.col{display:flex;flex-direction:column;gap:14px;}
.colTitle{text-align:center;font-size:18px;font-weight:900;margin:2px 0 2px;letter-spacing:.02em;}

/* SECTION 08 — CARD BASE */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;box-shadow:var(--shadow);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow2);}

/* SECTION 09 — FEATURED CARD LAYOUT */
.cardFeatured{display:flex;flex-direction:column;align-items:center;padding-bottom:10px;text-align:center;min-height:240px;}
.cardFeatured .cardText{padding:10px 10px 12px;}
.cardFeatured .cardTitle{font-size:18px;font-weight:900;letter-spacing:.01em;margin-top:2px;}
.cardFeatured .cardDesc{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.2;}

/* SECTION 10 — LIST CARD LAYOUT */
.cardList{display:flex;flex-direction:column;}
.cardBottom{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 12px 14px;}
.cardTitleSm{font-size:14px;font-weight:900;letter-spacing:.01em;}

/* SECTION 10.3 — CARD DESC IN LIST CARDS */
.cardBottom .cardDesc{font-size:11px;color:var(--muted);text-align:center;line-height:1.25;max-width:92%;}


/* SECTION 11 — MEDIA DISSOLVE */
.media{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#f2f2f2;}
.media img{width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity var(--dissolve) ease;}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity var(--dissolve) ease;}
.card:hover .media video{opacity:1;}
.card:hover .media img{opacity:0;}

/* SECTION 12 — PLAY BUTTON */
.playBtn{appearance:none;border:1px solid rgba(0,0,0,.22);background:#fff;border-radius:999px;padding:8px 26px;font-weight:800;font-size:12px;cursor:pointer;transition:background .12s ease,transform .12s ease;}
.playBtn:hover{background:#f3f3f3;}
.playBtn:active{transform:translateY(1px);}

/* SECTION 13 — FOCUS STATES */
.card:focus-visible{outline:3px solid var(--band);outline-offset:3px;}
.playBtn:focus-visible{outline:3px solid var(--band);outline-offset:3px;}

/* SECTION 14 — SMALL SCREENS */
@media (max-width:660px){
.featuredRow{grid-template-columns:1fr;gap:14px;padding:0 12px;}
.columns{grid-template-columns:1fr;gap:20px;padding:20px 12px 28px;}
}


/* SECTION 100 — PRIVACY MODAL (OVERLAY + PANEL) */
#privacyOverlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px;}
#privacyOverlay[hidden]{display:none;}
#privacyModal{width:90%;max-width:720px;max-height:calc(100vh - 120px);overflow:auto;background:#0f1115;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px 22px;color:#fff;position:relative;}

/* SECTION 101 — PRIVACY MODAL (TEXT + CLOSE + FOOTER LINK) */
#privacyClose{position:absolute;top:10px;right:12px;background:none;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;}
#privacyModal h2{margin:0 0 10px;font-size:20px;letter-spacing:.08em;}
#privacyModal h3{margin:14px 0 6px;font-size:14px;letter-spacing:.06em;}
#privacyModal p{margin:0 0 10px;font-size:13px;line-height:1.45;}
.footerLinkBtn{margin-left:12px;background:none;border:0;color:#fff;font-weight:800;font-size:12px;letter-spacing:.06em;text-decoration:underline;cursor:pointer;}
.footerLinkBtn:hover{opacity:.9;}
.privacyEmail{font-weight:900;}