/* SECTION 01 — HUB TOKENS */
:root{--stage:600px;--headerH:60px;--footerH:20px;--bar:#1e1e1e;}

/* SECTION 02 — RESET */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:Arial,Helvetica,sans-serif;color:#fff;background:#000;overflow-x:hidden;}

/* SECTION 03 — BACKGROUND VIDEO */
#background-video{position:fixed;right:0;bottom:0;min-width:100%;min-height:100%;object-fit:cover;z-index:-1;}

/* SECTION 04 — HUB LAYOUT WRAPPERS */
.scrollArea{min-height:100vh;padding-top:var(--headerH);padding-bottom:var(--footerH);display:flex;justify-content:center;}
.stage{width:min(var(--stage),100%);padding:20px;display:flex;align-items:center;justify-content:center;}

/* SECTION 05 — 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 06 — 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;}
.footerLinkBtn{color:#fff;text-decoration:none;opacity:.95;}
.footerLinkBtn:hover{text-decoration:underline;}

/* SECTION 07 — MODE TOGGLE BUTTONS */
.mode-toggle-btn{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25);color:#fff;padding:6px 12px;border-radius:6px;font-size:14px;cursor:pointer;transition:background 0.2s;}
.mode-toggle-btn:hover{background:rgba(255,255,255,0.2);}
.mode-toggle-btn.is-active{background:rgba(255,255,255,0.35);border-color:#fff;}

/* SECTION 08 — INPUTS + BUTTONS */
input[type="text"]{padding:10px 12px;font-size:16px;border-radius:6px;border:1px solid rgba(255,255,255,0.3);background:rgba(0,0,0,0.5);color:#fff;outline:none;}
input[type="text"]::placeholder{color:#ccc;}
button{cursor:pointer;}

/* SECTION 09 — VISUALLY HIDDEN */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden;}

/* SECTION 10 — DISABLED OVERLAY */
.disabled-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:50;display:none;}

/* SECTION 11 — UTILITY */
.text-center{text-align:center;}
.hidden{display:none;}