@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&display=swap');

* { box-sizing: border-box; }

body, html {
    height: 100%;
    margin: 0;
    font-family: "Chakra Petch", sans-serif;
    background-color: transparent;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background-image {
    background: radial-gradient(circle at 22% 18%, rgba(249,104,0,.20), transparent 34%), radial-gradient(circle at 76% 62%, rgba(55,125,255,.14), transparent 36%), linear-gradient(135deg, #05070a 0%, #101922 52%, #030405 100%);
    position: fixed;
    inset: 0;
    z-index: -1;
}

.header {
    position: absolute;
    top: 20px;
    width: 100%;
    text-align: center;
    z-index: 2;
}

.header h1 {
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 10px;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.nav-link {
    color: #ccc;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
}

.nav-link:hover { color: #f96800; }

.game-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 100px;
}

.game-grid {
    display: flex;
    justify-content: center;
    background: transparent;
    gap: 20px;
}

.game-card {
    position: relative;
    width: 400px;
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.3s, transform 0.3s;
}

.game-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.game-card:hover .game-card-image { transform: scale(1.05); }
.game-card:hover { box-shadow: 0 0 20px 10px rgba(180, 211, 204, 0.4); }

.game-title-overlay {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

.game-hover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    transition: opacity 0.3s, background-color 0.3s;
    opacity: 1;
}

#remainingInfo {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 8px;
}

.download-button, .cancel-button {
    margin-top: 8px;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.download-button { background-color: #007bff; color: white; }
.download-button:hover { background-color: #0056b3; transform: translateY(-1px); }
.cancel-button { background-color: #ff4444; color: white; display: none; }
.cancel-button:hover { background-color: #cc0000; transform: translateY(-1px); }

.play-text {
    display: none;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 8px;
}

.custom-context-menu {
    position: absolute;
    background-color: #333;
    color: white;
    border: 1px solid #666;
    border-radius: 9px;
    width: 120px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.context-menu-option { padding: 6px; cursor: pointer; }
.context-menu-option:hover { background-color: #f96800; border-radius: 5px; }

.hq-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(0,0,0,0.82);
    border: 1px solid rgba(249,104,0,0.45);
    color: #fff;
    padding: 12px 16px;
    border-radius: 6px;
    opacity: 0;
    transform: translateY(10px);
    transition: 0.25s;
    z-index: 2000;
    font-size: 14px;
}

.hq-toast.show { opacity: 1; transform: translateY(0); }


/* V8 finalised HQ presentation */
body::before { content:""; position: fixed; inset:0; background: radial-gradient(circle at 18% 22%, rgba(249,104,0,.20), transparent 32%), linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.18)); z-index:-1; pointer-events:none; }
.final-header { top: 34px; left: 42px; width: auto; text-align:left; display:flex; align-items:flex-start; gap:48px; }
.brand-kicker { display:block; color:#f96800; font-size:12px; letter-spacing:3px; font-weight:700; }
.final-header h1 { font-size: 54px; line-height:.9; margin:6px 0 8px; text-transform:uppercase; letter-spacing:2px; }
.final-header p { margin:0; color: rgba(255,255,255,.70); max-width:430px; }
.final-header .nav-links { justify-content:flex-start; margin-top: 10px; gap:10px; }
.final-header .nav-link { padding:9px 14px; background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.10); border-radius:0; text-transform:uppercase; letter-spacing:1.2px; font-size:13px; }
.final-header .nav-link.active, .final-header .nav-link:hover { background:#f96800; color:#111; }
.final-dashboard { position: absolute; left: 42px; bottom: 64px; margin:0; align-items:flex-start; }
.status-rail { display:flex; gap:10px; margin-bottom:16px; }
.status-rail div { width:130px; padding:12px; background:rgba(0,0,0,.52); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(5px); }
.status-rail span { display:block; color:rgba(255,255,255,.54); font-size:11px; letter-spacing:1.8px; }
.status-rail strong { display:block; color:#fff; font-size:22px; margin-top:3px; }
.final-game-card { width: 560px; height: 320px; border-radius:0; border:1px solid rgba(255,255,255,.16); box-shadow:0 28px 70px rgba(0,0,0,.56); }
.final-game-card:hover { box-shadow: 0 0 0 1px rgba(249,104,0,.88), 0 28px 80px rgba(0,0,0,.68); }
.final-game-card .game-title-overlay { top:auto; bottom:70px; left:22px; width:auto; text-align:left; font-size:38px; line-height:1; }
.final-game-card .game-title-overlay span { display:block; color:#f96800; font-size:12px; letter-spacing:3px; margin-bottom:7px; }
.final-game-card .game-hover-overlay { background:linear-gradient(0deg, rgba(0,0,0,.86), rgba(0,0,0,.12)); padding:18px 22px; }
.final-game-card .download-button, .final-game-card .cancel-button { border-radius:0; background:#f96800; color:#111; letter-spacing:1.4px; }
.final-game-card .play-text { font-size:22px; color:#fff; padding:8px 0; letter-spacing:2px; }
@media (max-width: 900px) { .final-header { left:20px; right:20px; flex-direction:column; gap:10px;} .final-dashboard{left:20px; right:20px;} .final-game-card{width:calc(100vw - 40px); height:260px;} .status-rail{display:none;} }


/* V42 Launch Edition polish: CSS-built panels, no image key art */
.css-hq-keyart { background: linear-gradient(145deg, rgba(18,30,38,.95), rgba(3,5,8,.94)); position: relative; overflow: hidden; }
.css-hq-keyart::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 72% 22%, rgba(249,104,0,.40), transparent 24%), linear-gradient(115deg, transparent 0 22%, rgba(255,255,255,.08) 22% 23%, transparent 23% 31%, rgba(249,104,0,.18) 31% 32%, transparent 32%), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px); }
.css-hq-keyart::after { content:"ONLINE"; position:absolute; right:24px; bottom:24px; font-size:72px; font-weight:900; letter-spacing:.10em; color:rgba(255,255,255,.08); }
.css-hq-keyart span { position:absolute; left:26px; top:24px; width:120px; height:120px; border:1px solid rgba(249,104,0,.55); box-shadow:0 0 42px rgba(249,104,0,.16), inset 0 0 22px rgba(249,104,0,.10); transform:skewX(-10deg); }
.css-hq-keyart i { position:absolute; left:70px; top:70px; width:170px; height:3px; background:#f96800; box-shadow:0 18px 0 rgba(249,104,0,.45),0 36px 0 rgba(249,104,0,.20); transform:rotate(-16deg); }
.final-header, .final-dashboard { max-width: calc(100vw - 40px); }
@media (max-width: 720px){ .final-header h1{font-size:38px;} .final-header p{max-width:calc(100vw - 40px);} .final-dashboard{bottom:32px;} }

/* V43 — launcher copy polish */
html, body { overflow:hidden !important; }

/* V44 — safe overflow fix
   Restores vertical scrolling only when content genuinely exceeds the viewport.
   Keeps horizontal bleed locked so menus do not get sideways page movement. */
html {
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body {
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
@media (max-height: 720px), (max-width: 760px) {
  .final-header { position: relative !important; top: auto !important; left: auto !important; padding: 24px 20px 0 !important; }
  .final-dashboard { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; padding: 22px 20px 42px !important; }
}

/* V44.1 — mobile/short launcher flow correction */
@media (max-height: 720px), (max-width: 760px) {
  body { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; }
}