/* ===== M8Gaming — Styles ===== */

html, body {
    margin: 0; padding: 0; height: 100%;
    font-family: 'Inter', Arial, sans-serif;
    background: #0b0b0e; overflow: hidden; color: #fff;
    overscroll-behavior: none; touch-action: none;
}

canvas#bg { position: fixed; inset: 0; z-index: 0; }

/* ---------- Linktree ---------- */
.wrapper {
    position: relative; z-index: 2; height: 100%;
    display: flex; justify-content: center; align-items: center;
    transition: opacity .7s ease, transform .7s cubic-bezier(.6,.05,.28,.91);
}
.wrapper.gone { opacity: 0; transform: translateY(-90px) scale(.94); pointer-events: none; }

.panel {
    background: rgba(15,15,20,.75); backdrop-filter: blur(10px);
    border-radius: 20px; padding: 40px; width: 320px;
    box-shadow: 0 0 40px rgba(255,80,0,.25); text-align: center;
}
.logo { font-size: 32px; font-weight: 800; margin-bottom: 25px; letter-spacing: 2px; }
.logo span { color: #ff4d00; }

.action {
    margin: 15px 0; padding: 16px; border-radius: 14px;
    background: linear-gradient(135deg, #ff4d00, #ff9100);
    color: #000; font-weight: 700; cursor: pointer; transition: .2s; user-select: none;
}
.action.secondary { background: #121217; color: #fff; border: 1px solid #ff4d00; }
.action.discord   { background: linear-gradient(135deg, #5865F2, #404EED); color: #fff; }
.action:hover { transform: scale(1.05); }

/* Besucherzähler */
.counter {
    margin-top: 22px; padding-top: 16px;
    border-top: 1px solid rgba(255,80,0,.18);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px; letter-spacing: 1px; color: #8b8b95;
}
.counter #visitCount { color: #ff9100; font-weight: 700; }
.counter .eye { opacity: .8; }

/* ---------- Toast ---------- */
.toast {
    position: fixed; bottom: 30px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #ff4d00; color: #000; padding: 12px 22px; border-radius: 14px;
    font-weight: 700; opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s; z-index: 30;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Easter Egg: Space Invaders ---------- */
#arcade {
    position: fixed; inset: 0; z-index: 5;
    opacity: 0; transform: translateY(90px);
    transition: opacity .8s ease, transform .9s cubic-bezier(.6,.05,.28,.91);
    pointer-events: none;
}
#arcade.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#stage { position: fixed; inset: 0; touch-action: none; }

.hud {
    position: fixed; top: 16px; right: 16px; left: auto; transform: none;
    font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 1px;
    color: #9aa0aa; display: flex; gap: 10px; z-index: 6;
    text-shadow: 0 2px 8px #000; align-items: center;
}
.hud-best {
    color: #ff9100; white-space: nowrap; font-weight: 800; font-size: 15px;
    letter-spacing: 1px; padding: 6px 12px; border-radius: 10px;
    background: #121217; border: 1.5px solid #ff4d00;
    box-shadow: 0 0 14px rgba(255,80,0,.35);
}
.hud-best b { color: #fff; font-weight: 800; }
.hud-score { color: #8b8b95; white-space: nowrap; font-weight: 700; font-size: 14px; letter-spacing: .5px; }
.hud-score b { color: #ff9100; font-weight: 800; }
.hud .close {
    background: #121217; border: 1px solid #ff4d00; color: #fff;
    width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
    font-size: 15px; line-height: 1; transition: .15s;
}
.hud .close:hover { background: #ff4d00; color: #000; }

/* ---------- Touch-Steuerung ---------- */

/* Sichtbarkeit nach Eingabegerät */
.hud-mobile { display: none; }          /* Hamburger nur auf Mobil */
#hudMenu { display: none; }

@media (pointer: coarse), (max-width: 720px) {
    /* Mobile HUD: BEST + Hamburger zusammen oben rechts (Leben sind links) */
    #arcade.show .hud .hud-best { font-size: 12px; padding: 4px 9px; }
    #arcade.show .hud .hud-score { font-size: 12px; }
    /* Einzel-Buttons verstecken, Hamburger zeigen */
    #btnBoard, #btnHelp, #btnMute, #btnClose { display: none !important; }
    #arcade.show .hud-mobile { display: grid; }
    /* Wischleiste im Spiel zeigen (nicht während Overlay/Game-Over) */
    #arcade.over }

/* ---------- Game Over / Bestenliste ---------- */
#gameover {
    position: fixed; inset: 0; z-index: 8; display: none;
    align-items: center; justify-content: center;
    background: rgba(11,11,14,.55); backdrop-filter: blur(4px);
    padding: 20px;
}
#gameover.show { display: flex; }

.ov-card {
    width: min(420px, 94vw);
    max-height: 90vh; max-height: 90dvh; overflow-y: auto;
    background: rgba(15,15,20,.92);
    border: 1px solid rgba(255,80,0,.4);
    border-radius: 20px; padding: 26px 24px;
    box-shadow: 0 0 50px rgba(255,80,0,.28); text-align: center;
}
.ov-card h2 { margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: 2px; }
.ov-score { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: #9aa0aa; margin-bottom: 18px; }
.ov-score b { color: #ff9100; }

.ov-entry { display: flex; gap: 8px; margin-bottom: 16px; }
.ov-entry input {
    flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px;
    background: #121217; border: 1px solid #ff4d00; color: #fff;
    font-family: 'JetBrains Mono', monospace; font-size: 15px; letter-spacing: 2px;
    text-transform: uppercase;
}
.ov-entry input:focus { outline: 2px solid #ff9100; }
.ov-entry button {
    padding: 12px 16px; border-radius: 12px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #ff4d00, #ff9100); color: #000; font-weight: 700;
}
.ov-entry button:disabled { opacity: .5; cursor: default; }

.ov-list {
    list-style: none; margin: 0 0 8px; padding: 0; text-align: left;
    max-height: 210px; overflow-y: auto;
}
.ov-list li {
    display: flex; align-items: center; gap: 10px;
    font-family: 'JetBrains Mono', monospace; font-size: 14px;
    padding: 7px 10px; border-radius: 8px;
}
.ov-list li:nth-child(odd) { background: rgba(255,255,255,.03); }
.ov-list .rk { color: #6a6a74; width: 26px; }
.ov-list .nm { color: #fff; flex: 1; letter-spacing: 1px; }
.ov-list .sc { color: #ff9100; font-weight: 700; }
.ov-list li:first-child .nm { color: #ff9100; }

.ov-note { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6a6a74; min-height: 16px; margin-bottom: 12px; }

.ov-actions { display: flex; gap: 10px; }
.ov-btn {
    flex: 1; padding: 13px; border-radius: 12px; cursor: pointer;
    background: #121217; border: 1px solid #ff4d00; color: #fff; font-weight: 700;
}
.ov-btn.primary { background: linear-gradient(135deg, #ff4d00, #ff9100); color: #000; border: none; }

/* ---------- Responsive Feinschliff (Flex/Clamp für alle Geräte) ---------- */
.wrapper { padding: 16px; }
.panel {
    width: min(340px, 92vw);
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    padding: clamp(22px, 6vw, 40px) clamp(18px, 5vw, 40px);
    display: flex;
    flex-direction: column;
}
.logo   { font-size: clamp(26px, 8vw, 32px); margin-bottom: clamp(16px, 4vw, 25px); }
.action { margin: clamp(9px, 2.4vw, 15px) 0; padding: clamp(13px, 3.6vw, 16px); font-size: clamp(14px, 3.8vw, 16px); }
.counter{ margin-top: clamp(14px, 4vw, 22px); }

/* flache Handys im Querformat / kleine Höhen */
@media (max-height: 700px) {
    .panel  { padding-top: 16px; padding-bottom: 16px; }
    .action { margin: 7px 0; padding: 11px; }
    .logo   { margin-bottom: 12px; }
}

/* HUD & Game-Over auf schmalen Screens */
@media (max-width: 520px) {
    .hud { font-size: 12px; gap: 8px; }
    .hud .close { width: 30px; height: 30px; font-size: 14px; }
    .ov-card { padding: 20px 16px; }
    .ov-card h2 { font-size: clamp(22px, 7vw, 30px); }
    .ov-list { max-height: min(200px, 30vh); max-height: min(200px, 30dvh); }
}

/* Touch-Buttons: skalierende Größe + Safe-Area (iPhone-Balken) */

/* ---------- Status-Zeile im Linktree (MC links / visitors / CS2 rechts) ---------- */
.statusbar {
    margin-top: clamp(14px, 4vw, 22px);
    padding-top: 14px;
    border-top: 1px solid rgba(255,80,0,.18);
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.statusbar .counter {
    margin: 0; padding: 0; border: 0;
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: #8b8b95; white-space: nowrap;
}
.statusbar .counter #visitCount { color: #ff9100; font-weight: 700; }

.status-lamp {
    display: flex; align-items: center; gap: 7px;
    cursor: pointer; user-select: none; flex: 1; min-width: 0;
    transition: transform .1s;
    justify-content: flex-start;    /* MC: am linken Rand */
}
.status-lamp.status-r { justify-content: flex-end; }   /* CS2: am rechten Rand */
.status-lamp:active { transform: scale(.96); }
.status-lamp.copied .st-name { color: #3fb950; }

.st-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: #5c6773; }
.st-dot.on  { background: #3fb950; box-shadow: 0 0 8px #3fb950; animation: stpulse 2.2s infinite; }
.st-dot.off { background: #d0555a; box-shadow: 0 0 6px #d0555a; }
.st-dot.unknown { background: #5c6773; }
@keyframes stpulse {
    0%   { box-shadow: 0 0 0 0 rgba(63,185,80,.5); }
    70%  { box-shadow: 0 0 0 6px rgba(63,185,80,0); }
    100% { box-shadow: 0 0 0 0 rgba(63,185,80,0); }
}
.st-name { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .5px; }



/* ---------- Controls-Overlay ---------- */
#controls {
    position: fixed; inset: 0; z-index: 9; display: none;
    align-items: center; justify-content: center;
    background: rgba(11,11,14,.6); backdrop-filter: blur(4px); padding: 20px;
}
#controls.show { display: flex; }
.ctrl-card {
    width: min(360px, 92vw);
    background: rgba(15,15,20,.94);
    border: 1px solid rgba(255,80,0,.4); border-radius: 18px;
    box-shadow: 0 0 40px rgba(255,80,0,.25); padding: 24px;
    text-align: center;
}
.ctrl-card h3 { margin: 0 0 16px; font-size: 20px; font-weight: 800; letter-spacing: 3px; }
.ctrl-grid {
    display: grid; grid-template-columns: auto 1fr; gap: 9px 14px;
    text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #cfcfd6;
}
.ctrl-grid .k {
    color: #ff9100; font-weight: 700; white-space: nowrap;
    background: #121217; border: 1px solid #2a2a33; border-radius: 6px;
    padding: 3px 8px; text-align: center;
}
.ctrl-mobile {
    margin: 16px 0 18px; font-family: 'JetBrains Mono', monospace;
    font-size: 12px; color: #8b8b95;
}
.ctrl-close {
    width: 100%; padding: 12px; border-radius: 12px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #ff4d00, #ff9100); color: #000; font-weight: 700;
}

/* ---------- Controls: Power-up-Liste ---------- */
.ctrl-h4 {
    margin: 18px 0 10px; font-size: 13px; font-weight: 800; letter-spacing: 2px;
    color: #ff9100; text-align: left; border-top: 1px solid rgba(255,80,0,.18); padding-top: 14px;
}
.ctrl-pu {
    display: grid; grid-template-columns: auto auto 1fr; gap: 8px 10px;
    text-align: left; align-items: center;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #cfcfd6;
}
.ctrl-pu .pu-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 6px rgba(255,255,255,.35); }
.ctrl-pu b { color: #fff; font-weight: 700; white-space: nowrap; }
.ctrl-pu span:not(.pu-dot) { color: #8b8b95; }
.ctrl-note {
    margin: 14px 0 18px; font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: #6a6a74; text-align: left; line-height: 1.5;
}
.ctrl-card { max-height: 90vh; max-height: 90dvh; overflow-y: auto; }

/* ---------- Leaderboard-Overlay (Button 🏆) ---------- */
#board {
    position: fixed; inset: 0; z-index: 9; display: none;
    align-items: center; justify-content: center;
    background: rgba(11,11,14,.6); backdrop-filter: blur(4px); padding: 20px;
}
#board.show { display: flex; }
.board-card {
    width: min(360px, 92vw); max-height: 90vh; max-height: 90dvh; overflow-y: auto;
    background: rgba(15,15,20,.94);
    border: 1px solid rgba(255,80,0,.4); border-radius: 18px;
    box-shadow: 0 0 40px rgba(255,80,0,.25); padding: 24px; text-align: center;
}
.board-card h3 { margin: 0 0 14px; font-size: 18px; font-weight: 800; letter-spacing: 2px; }

/* ---------- Leaderboard-Tabs (Woche / All-Time) ---------- */
.board-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.bt-tab {
    flex: 1; padding: 8px; border-radius: 10px; cursor: pointer;
    background: #121217; border: 1px solid #2a2a33; color: #8b8b95;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
    transition: .15s;
}
.bt-tab.active { border-color: #ff4d00; color: #ff9100; box-shadow: 0 0 12px rgba(255,80,0,.25); }
.ov-list .medal { font-size: 14px; }

/* ---------- New-High-Score-Feier ---------- */
#confetti {
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: 30; pointer-events: none; display: none;
}
#confetti.show { display: block; }
.record-banner {
    display: none;
    margin: -4px 0 12px; padding: 8px 14px; border-radius: 12px;
    font-weight: 800; letter-spacing: 1px; font-size: 15px; color: #0b0b0e;
    background: linear-gradient(135deg, #ffd27f, #ff9100, #ff4d00);
    box-shadow: 0 0 24px rgba(255,145,0,.5);
    animation: recordPop .5s ease-out both, recordGlow 1.4s ease-in-out infinite;
}
.record-banner.show { display: block; }
@keyframes recordPop {
    0%   { transform: scale(.6); opacity: 0; }
    70%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes recordGlow {
    0%,100% { box-shadow: 0 0 18px rgba(255,145,0,.4); }
    50%     { box-shadow: 0 0 34px rgba(255,145,0,.75); }
}


/* ---------- Mobile: Hamburger-Menü ---------- */
#btnMenu { font-size: 18px; }
#hudMenu {
    position: fixed; top: 54px; right: 16px; z-index: 9;
    background: rgba(15,15,20,.96); border: 1px solid rgba(255,80,0,.4);
    border-radius: 14px; padding: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.5);
    flex-direction: column; gap: 4px; min-width: 168px;
}
#hudMenu.show { display: flex; }
#hudMenu button {
    display: flex; align-items: center; gap: 10px;
    background: transparent; border: none; color: #eaeaea;
    font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600;
    padding: 11px 12px; border-radius: 10px; cursor: pointer; text-align: left; width: 100%;
}
#hudMenu button:active { background: rgba(255,80,0,.22); }
#hudMenu #mExit { color: #ff7a7a; }