/* ============================================================
   CROSSOVER X — snake.css
   Vault Snake — gleicher Neon-Pixel-Look wie The Smuggler
   ============================================================ */

.snk-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 80px;
    background: rgba(0,0,0,0.92);
    border-bottom: 1px solid rgba(0,229,255,0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    backdrop-filter: blur(8px);
}
.snk-topbar-logo { height: 44px; width: auto; opacity: 0.95; }
.snk-topbar-title {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(11px, 1.6vw, 14px);
    color: rgba(0,229,255,0.75);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.snk-topbar-back {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(11px, 1.2vw, 14px); font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(0,229,255,0.85);
    text-decoration: none;
    border: 2px solid rgba(0,229,255,0.35);
    padding: 10px 20px; border-radius: 5px;
    background: rgba(0,229,255,0.06);
    transition: all 0.2s;
}
.snk-topbar-back:hover { color:#00e5ff; border-color:rgba(0,229,255,0.8); background:rgba(0,229,255,0.14); }
.snk-topbar-back img { width:24px; height:24px; image-rendering: pixelated; }

.snk-page {
    background: #000;
    background-image: radial-gradient(ellipse at 50% 50%, rgba(0,30,50,0.8) 0%, #000 70%);
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 96px 16px 24px;
    box-sizing: border-box;
}

.snk-frame {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    width: 100%; max-width: 640px;
}
.snk-frame::before, .snk-frame::after {
    content:''; position:absolute; width:20px; height:20px;
    border-color: rgba(0,229,255,0.5); border-style: solid;
    z-index:5; pointer-events:none;
}
.snk-frame::before { top:-4px; left:-4px; border-width:2px 0 0 2px; }
.snk-frame::after  { top:-4px; right:-4px; border-width:2px 2px 0 0; }
.snk-frame-inner { position: relative; width: 100%; }
.snk-frame-inner::before, .snk-frame-inner::after {
    content:''; position:absolute; width:20px; height:20px;
    border-color: rgba(0,229,255,0.5); border-style: solid;
    z-index:5; pointer-events:none;
}
.snk-frame-inner::before { bottom:-4px; left:-4px; border-width:0 0 2px 2px; }
.snk-frame-inner::after  { bottom:-4px; right:-4px; border-width:0 2px 2px 0; }

.snk-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #000;
    border: 1px solid rgba(0,229,255,0.25);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.8),
        0 0 24px rgba(0,229,255,0.12),
        0 0 60px rgba(0,0,0,0.9),
        inset 0 0 40px rgba(0,0,0,0.5);
    overflow: hidden;
}
.snk-wrap::after {
    content:''; position:absolute; inset:0;
    background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.12) 3px, rgba(0,0,0,0.12) 4px);
    pointer-events:none; z-index:50;
}
.snk-canvas {
    display:block; width:100%; height:100%;
    image-rendering: pixelated; image-rendering: crisp-edges;
}

@media (max-width: 768px) {
    .snk-page { padding: 90px 0 0; justify-content: flex-start; }
    .snk-frame { max-width: 100vw; padding: 0 8px; box-sizing: border-box; }
    .snk-wrap { border-left:none; border-right:none; }
    .snk-frame::before, .snk-frame::after,
    .snk-frame-inner::before, .snk-frame-inner::after { display:none; }
    .snk-topbar-title { display:none; }
    .snk-topbar-logo { height:28px; }
    .snk-topbar-back { font-size:10px; padding:8px 12px; }
    .snk-topbar-back img { width:16px; height:16px; }
    .snk-topbar { height:60px; }
}

/* HUD */
.snk-hud {
    position:absolute; top:0; left:0; right:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 14px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
    pointer-events:none;
}
.snk-hud-left, .snk-hud-right { display:flex; align-items:center; gap:10px; pointer-events:auto; }
.snk-score-label {
    font-family:'Orbitron', sans-serif; font-size:clamp(7px,1vw,9px); font-weight:700;
    letter-spacing:0.2em; color:rgba(0,229,255,0.6);
}
.snk-score-val {
    font-family:'Press Start 2P', monospace; font-size:clamp(12px,2.2vw,18px);
    color:#ffaa00; text-shadow:0 0 8px rgba(255,170,0,0.6); line-height:1;
}
.snk-icon-btn {
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; background:rgba(0,0,0,0.55);
    border:1px solid rgba(0,229,255,0.25); border-radius:4px;
    cursor:pointer; transition:border-color .15s, background .15s;
    padding:0;
}
.snk-icon-btn img { width:22px; height:22px; image-rendering:pixelated; }
.snk-icon-btn:hover { border-color:rgba(0,229,255,0.7); background:rgba(0,229,255,0.1); }
.snk-icon-btn.muted img { opacity:0.35; }

/* Overlays */
.snk-overlay {
    position:absolute; inset:0; z-index:30;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.86); backdrop-filter: blur(2px);
}
.snk-overlay--hidden { display:none; }
.snk-overlay-inner {
    display:flex; flex-direction:column; align-items:center;
    gap:clamp(10px,2vh,18px); padding:20px; text-align:center;
}
.snk-pixel-title {
    font-family:'Press Start 2P', monospace; font-size:clamp(15px,4.5vw,28px);
    color:#00e5ff;
    text-shadow:0 0 20px rgba(0,229,255,0.7), 0 0 40px rgba(0,229,255,0.3), 3px 3px 0 rgba(0,0,0,0.8);
    line-height:1.3; animation: snkTitlePulse 3s ease-in-out infinite;
}
.snk-pixel-title--red { color:#ff2244; text-shadow:0 0 20px rgba(255,34,68,0.7), 3px 3px 0 rgba(0,0,0,0.8); }
@keyframes snkTitlePulse { 0%,100%{opacity:1;} 50%{opacity:0.85;} }
.snk-pixel-sub {
    font-family:'Orbitron', sans-serif; font-size:clamp(8px,1.6vw,12px); font-weight:700;
    letter-spacing:0.25em; color:rgba(255,170,0,0.8); text-transform:uppercase;
}
.snk-hiscore-wrap {
    display:flex; align-items:center; gap:10px;
    background:rgba(0,0,0,0.5); border:1px solid rgba(255,170,0,0.3);
    padding:6px 14px; border-radius:3px;
}
.snk-hi-label { font-family:'Orbitron', sans-serif; font-size:clamp(7px,1vw,9px); font-weight:700; letter-spacing:0.2em; color:rgba(255,170,0,0.5); }
.snk-hi-val   { font-family:'Press Start 2P', monospace; font-size:clamp(10px,1.8vw,14px); color:#ffaa00; text-shadow:0 0 6px rgba(255,170,0,0.5); }

.snk-controls-info { display:flex; flex-direction:column; gap:6px; }
.snk-ctrl-row { display:flex; align-items:center; gap:10px; justify-content:center; }
.snk-ctrl-key {
    font-family:'Press Start 2P', monospace; font-size:clamp(6px,1vw,8px);
    color:rgba(0,229,255,0.8); border:1px solid rgba(0,229,255,0.3);
    padding:3px 7px; border-radius:2px; background:rgba(0,229,255,0.06);
    min-width:90px; text-align:center;
}
.snk-ctrl-desc { font-family:'Orbitron', sans-serif; font-size:clamp(7px,1vw,9px); font-weight:700; letter-spacing:0.1em; color:rgba(255,255,255,0.4); }

.snk-big-btn {
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Press Start 2P', monospace; font-size:clamp(9px,1.6vw,12px);
    color:#00e5ff; background:rgba(0,229,255,0.08);
    border:2px solid rgba(0,229,255,0.5); border-radius:4px;
    padding:clamp(10px,1.5vh,16px) clamp(18px,3vw,32px);
    cursor:pointer; transition:all .2s; text-decoration:none; letter-spacing:0.08em;
    animation: snkBtnPulse 2s ease-in-out infinite;
}
.snk-big-btn:hover { background:rgba(0,229,255,0.18); border-color:#00e5ff; box-shadow:0 0 20px rgba(0,229,255,0.3); animation:none; }
.snk-big-btn--secondary { color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.15); animation:none; }
.snk-big-btn--secondary:hover { color:#fff; border-color:rgba(255,255,255,0.4); box-shadow:none; }
.snk-btn-icon { width:28px; height:28px; image-rendering:pixelated; flex-shrink:0; }
.snk-btn-row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
@keyframes snkBtnPulse { 0%,100%{border-color:rgba(0,229,255,0.5);} 50%{border-color:rgba(0,229,255,0.9); box-shadow:0 0 12px rgba(0,229,255,0.25);} }

.snk-link-back {
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Orbitron', sans-serif; font-size:clamp(7px,1vw,9px); font-weight:700;
    letter-spacing:0.15em; color:rgba(255,255,255,0.3); text-decoration:none; transition:color .2s;
}
.snk-link-back:hover { color:rgba(255,255,255,0.7); }
.snk-link-icon { width:16px; height:16px; image-rendering:pixelated; opacity:0.4; }

.snk-pause-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; max-width:260px; }
.snk-pause-btn {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    background:rgba(0,0,0,0.5); border:1px solid rgba(0,229,255,0.2); border-radius:6px;
    padding:12px 8px; cursor:pointer; transition:all .2s; text-decoration:none; color:rgba(255,255,255,0.6);
}
.snk-pause-btn:hover { border-color:rgba(0,229,255,0.6); background:rgba(0,229,255,0.08); color:#fff; }
.snk-pause-icon { width:28px; height:28px; image-rendering:pixelated; }
.snk-pause-btn span { font-family:'Orbitron', sans-serif; font-size:clamp(7px,1vw,9px); font-weight:700; letter-spacing:0.12em; text-transform:uppercase; }

.snk-overlay-icon { width:22px; height:22px; image-rendering:pixelated; opacity:0.7; }
.snk-summary-icon { width:16px; height:16px; image-rendering:pixelated; opacity:0.6; }
.snk-score-summary {
    display:flex; flex-direction:column; gap:8px;
    background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.1);
    padding:14px 22px; border-radius:4px; min-width:190px;
}
.snk-summary-row { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.snk-summary-label { font-family:'Orbitron', sans-serif; font-size:clamp(7px,1vw,9px); font-weight:700; letter-spacing:0.2em; color:rgba(255,255,255,0.4); }
.snk-summary-val { font-family:'Press Start 2P', monospace; font-size:clamp(10px,1.6vw,13px); color:#fff; }
.snk-summary-val--gold { color:#ffaa00; text-shadow:0 0 8px rgba(255,170,0,0.5); }
.snk-new-record {
    font-family:'Press Start 2P', monospace; font-size:clamp(8px,1.2vw,10px); color:#ffaa00;
    text-shadow:0 0 10px rgba(255,170,0,0.7); display:none;
    animation: snkBlink 0.8s step-end infinite; margin-top:4px; text-align:center;
}
.snk-new-record.visible { display:block; }
@keyframes snkBlink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

/* ============================================================
   D-PAD — 4-Wege-Steuerung für Mobile (Wischen geht zusätzlich)
   ============================================================ */
.snk-dpad {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: rgba(0,0,0,0.92);
    border-top: 1px solid rgba(0,229,255,0.15);
    padding: 14px 20px 22px;
    box-sizing: border-box;
}
@media (max-width: 768px) { .snk-dpad { display: flex; } }
.snk-dpad-row { display:flex; gap:8px; align-items:center; }
.snk-dpad-btn {
    width: 58px; height: 58px;
    background: rgba(0,229,255,0.08);
    border: 2px solid rgba(0,229,255,0.35);
    border-radius: 8px;
    color: rgba(0,229,255,0.9);
    font-size: 20px;
    display:flex; align-items:center; justify-content:center;
    -webkit-tap-highlight-color: transparent;
    user-select: none; touch-action: manipulation;
    transition: background .08s, border-color .08s;
}
.snk-dpad-btn:active, .snk-dpad-btn.pressed {
    background: rgba(0,229,255,0.22);
    border-color: rgba(0,229,255,0.8);
}

/* Grundgerüst für Buttons ohne CSS-Konflikt mit main.css Buttons */
.snk-icon-btn, .snk-big-btn, .snk-pause-btn, .snk-dpad-btn { background-clip: padding-box; }