/**
 * QUIZTREFF - TABLET DAMAGE EASTER EGG
 * ====================================
 * Visuelle Effekte für das kaputte Display
 */

/* ========================================
   OVERLAY CONTAINER - EXAKT ÜBER DEM TABLET
   ======================================== */
.tablet-damage-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px; /* Tablet hat abgerundete Ecken */
}

/* Sichtbar wenn Damage > 0 */
.tablet-damage-overlay.damage-level-1,
.tablet-damage-overlay.damage-level-2,
.tablet-damage-overlay.damage-level-3,
.tablet-damage-overlay.damage-level-4,
.tablet-damage-overlay.damage-level-5,
.tablet-damage-overlay.damage-level-6 {
    opacity: 1;
}

/* ========================================
   SHAKE ANIMATION
   ======================================== */
.tablet-shake {
    animation: tabletShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes tabletShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(calc(-1 * var(--shake-intensity, 5px))); }
    20% { transform: translateX(var(--shake-intensity, 5px)); }
    30% { transform: translateX(calc(-1 * var(--shake-intensity, 5px))); }
    40% { transform: translateX(var(--shake-intensity, 5px)); }
    50% { transform: translateX(calc(-1 * var(--shake-intensity, 5px))); }
    60% { transform: translateX(var(--shake-intensity, 5px)); }
    70% { transform: translateX(calc(-1 * var(--shake-intensity, 5px))); }
    80% { transform: translateX(var(--shake-intensity, 5px)); }
    90% { transform: translateX(calc(-1 * var(--shake-intensity, 5px))); }
}

/* ========================================
   CRACK LAYER (SVG-basierte Risse)
   WICHTIG: Immer OBERSTE Schicht - Risse bleiben sichtbar!
   ======================================== */
.damage-crack-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 100; /* Immer über allen anderen Effekten */
}

.crack-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.crack-line {
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.8)) drop-shadow(0 0 1px rgba(255,255,255,0.3));
}

.crack-shadow {
    opacity: 0.6;
}

.crack-branch {
    opacity: 0.8;
}

.crack-impact {
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.7));
}

/* Risse bei höheren Levels noch besser sichtbar */
.damage-level-4 .damage-crack-layer,
.damage-level-5 .damage-crack-layer,
.damage-level-6 .damage-crack-layer {
    filter: contrast(1.3) brightness(1.2);
}

/* ========================================
   SCANLINES
   ======================================== */
.damage-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 0, 0, 0.03) 1px,
        rgba(0, 0, 0, 0.03) 2px
    );
    opacity: 0;
    pointer-events: none;
}

/* ========================================
   NOISE CANVAS
   ======================================== */
.damage-noise-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* ========================================
   DEAD PIXELS
   ======================================== */
.damage-dead-pixels {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
}

.dead-pixel {
    position: absolute;
    border-radius: 1px;
    box-shadow: 0 0 1px currentColor;
}

/* ========================================
   VIGNETTE
   ======================================== */
.damage-vignette {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
    opacity: 0;
    pointer-events: none;
}

/* ========================================
   BLACKOUT (Level 6)
   ======================================== */
.damage-blackout {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
}

/* ========================================
   RESET FLASH
   ======================================== */
.tablet-reset-flash {
    animation: resetFlash 0.5s ease-out;
}

@keyframes resetFlash {
    0% { filter: brightness(3) contrast(0.5); }
    100% { filter: brightness(1) contrast(1); }
}

/* ========================================
   LEVEL 1: Leichter Shake + minimale Scanlines + erste Risse
   ======================================== */
.damage-level-1 .damage-scanlines {
    opacity: 0.3;
}

.damage-level-1 .damage-crack-layer {
    opacity: 0.7;
}

/* ========================================
   LEVEL 2: Sichtbare Risse + stärkerer Shake
   ======================================== */
.damage-level-2 .damage-scanlines {
    opacity: 0.4;
}

.damage-level-2 .damage-crack-layer {
    opacity: 0.85;
}

/* ========================================
   LEVEL 3: Flimmern/CRT-Flicker + leichte Unschärfe
   ======================================== */
.damage-level-3 .damage-scanlines {
    opacity: 0.5;
    animation: scanlineFlicker 0.1s infinite;
}

.damage-level-3 .damage-crack-layer {
    opacity: 1;
}

.damage-level-3 {
    filter: blur(0.5px) contrast(0.95);
    animation: crtFlicker 0.15s infinite;
}

@keyframes scanlineFlicker {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.3; }
}

@keyframes crtFlicker {
    0% { filter: blur(0.5px) contrast(0.95) brightness(1); }
    25% { filter: blur(0.5px) contrast(0.95) brightness(0.98); }
    50% { filter: blur(0.5px) contrast(0.95) brightness(1.02); }
    75% { filter: blur(0.5px) contrast(0.95) brightness(0.97); }
    100% { filter: blur(0.5px) contrast(0.95) brightness(1); }
}

/* ========================================
   LEVEL 4: Dead Pixels / Noise + stärkere Unschärfe
   ======================================== */
.damage-level-4 .damage-scanlines {
    opacity: 0.6;
    animation: scanlineFlicker 0.08s infinite;
}

.damage-level-4 .damage-crack-layer {
    opacity: 1;
}

.damage-level-4 .damage-noise-canvas {
    opacity: 0.3;
}

.damage-level-4 .damage-dead-pixels {
    opacity: 1;
}

.damage-level-4 .damage-vignette {
    opacity: 0.3;
}

.damage-level-4 {
    filter: blur(1px) contrast(0.9) saturate(0.8);
    animation: crtFlicker 0.1s infinite, colorShift 2s infinite;
}

@keyframes colorShift {
    0%, 100% { filter: blur(1px) contrast(0.9) saturate(0.8) hue-rotate(0deg); }
    25% { filter: blur(1px) contrast(0.9) saturate(0.8) hue-rotate(2deg); }
    50% { filter: blur(1px) contrast(0.9) saturate(0.8) hue-rotate(-1deg); }
    75% { filter: blur(1px) contrast(0.9) saturate(0.8) hue-rotate(1deg); }
}

/* ========================================
   LEVEL 5: Fast unlesbar (viel Noise, dunkle Vignette)
   ======================================== */
.damage-level-5 .damage-scanlines {
    opacity: 0.8;
    animation: scanlineFlicker 0.05s infinite;
}

.damage-level-5 .damage-crack-layer {
    opacity: 1;
}

.damage-level-5 .damage-noise-canvas {
    opacity: 0.5;
}

.damage-level-5 .damage-dead-pixels {
    opacity: 1;
}

.damage-level-5 .damage-vignette {
    opacity: 0.6;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 30%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

.damage-level-5 {
    filter: blur(1.5px) contrast(0.7) saturate(0.5) brightness(0.8);
    animation: heavyFlicker 0.08s infinite, colorShift 1s infinite;
}

@keyframes heavyFlicker {
    0% { opacity: 1; transform: translateX(0); }
    20% { opacity: 0.95; transform: translateX(-1px); }
    40% { opacity: 1; transform: translateX(1px); }
    60% { opacity: 0.9; transform: translateX(0); }
    80% { opacity: 1; transform: translateX(-1px); }
    100% { opacity: 0.95; transform: translateX(0); }
}

/* ========================================
   LEVEL 6: Display "tot" - fast komplett schwarz
   ======================================== */
.damage-level-6 .damage-scanlines {
    opacity: 0.9;
    animation: scanlineFlicker 0.03s infinite;
}

.damage-level-6 .damage-crack-layer {
    opacity: 1;
}

.damage-level-6 .damage-noise-canvas {
    opacity: 0.7;
}

.damage-level-6 .damage-dead-pixels {
    opacity: 1;
}

.damage-level-6 .damage-vignette {
    opacity: 0.8;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 10%,
        rgba(0, 0, 0, 0.9) 100%
    );
}

.damage-level-6 .damage-blackout {
    opacity: 0.85;
    animation: blackoutGlitch 0.5s infinite;
}

.damage-level-6 {
    filter: blur(2px) contrast(0.5) saturate(0) brightness(0.3);
    animation: terminalFlicker 0.1s infinite;
}

@keyframes blackoutGlitch {
    0%, 90%, 100% { opacity: 0.85; }
    91% { opacity: 0.7; }
    92% { opacity: 0.9; }
    93% { opacity: 0.6; }
    94% { opacity: 0.85; }
}

@keyframes terminalFlicker {
    0% { filter: blur(2px) contrast(0.5) saturate(0) brightness(0.3); }
    10% { filter: blur(2px) contrast(0.5) saturate(0) brightness(0.35); }
    20% { filter: blur(3px) contrast(0.4) saturate(0) brightness(0.2); }
    30% { filter: blur(2px) contrast(0.5) saturate(0) brightness(0.3); }
    40% { filter: blur(2px) contrast(0.5) saturate(0) brightness(0.25); }
    50% { filter: blur(2px) contrast(0.6) saturate(0) brightness(0.35); }
    60% { filter: blur(2px) contrast(0.5) saturate(0) brightness(0.3); }
    70% { filter: blur(3px) contrast(0.4) saturate(0) brightness(0.2); }
    80% { filter: blur(2px) contrast(0.5) saturate(0) brightness(0.32); }
    90% { filter: blur(2px) contrast(0.5) saturate(0) brightness(0.28); }
    100% { filter: blur(2px) contrast(0.5) saturate(0) brightness(0.3); }
}

/* ========================================
   HORIZONTAL TEAR (Horizontaler Riss-Effekt bei hohen Levels)
   ======================================== */
.damage-level-5::before,
.damage-level-6::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 45%,
            rgba(255, 255, 255, 0.1) 45%,
            rgba(255, 255, 255, 0.1) 55%,
            transparent 55%,
            transparent 100%
        );
    background-position: 0 30%;
    background-size: 100% 3px;
    background-repeat: no-repeat;
    animation: tearMove 0.1s steps(2) infinite;
    pointer-events: none;
}

@keyframes tearMove {
    0% { background-position: 0 30%; }
    50% { background-position: 0 50%; }
    100% { background-position: 0 70%; }
}

/* ========================================
   SHATTERED STATE - GLAS KOMPLETT ZERSTÖRT
   Realistisches Tablet-Innenleben
   ======================================== */
.damage-internals-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow: visible; /* Wichtig für Notfall-Handy rechts! */
    border-radius: 12px;
}

.damage-shattered .damage-internals-layer {
    opacity: 1;
    pointer-events: auto;
}

/* Hintergrund - Aluminium Gehäuse */
.internals-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 30%, #0d0d0d 100%);
    overflow: hidden;
}

/* Metallrahmen */
.internals-frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 4px solid #3a3a3a;
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

/* ========== LED BACKLIGHT STRIPS ========== */
.led-strip {
    position: absolute;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: rgba(20,20,20,0.9);
    z-index: 5;
}

/* Horizontale Strips */
.led-strip-top {
    top: 3%;
    left: 5%;
    right: 5%;
    height: 10px;
    border-radius: 2px;
}

.led-strip-bottom {
    bottom: 3%;
    left: 5%;
    right: 5%;
    height: 10px;
    border-radius: 2px;
}

.led-strip-middle-1 {
    top: 35%;
    left: 8%;
    right: 8%;
    height: 8px;
    border-radius: 2px;
}

.led-strip-middle-2 {
    top: 65%;
    left: 8%;
    right: 8%;
    height: 8px;
    border-radius: 2px;
}

/* Vertikale Strips */
.led-strip-left {
    top: 8%;
    bottom: 8%;
    left: 2%;
    width: 10px;
    flex-direction: column;
    border-radius: 2px;
}

.led-strip-right {
    top: 8%;
    bottom: 8%;
    right: 2%;
    width: 10px;
    flex-direction: column;
    border-radius: 2px;
}

/* LEDs - kontinuierlich leuchtend */
.led {
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
        0 0 6px 3px rgba(255,255,255,1),
        0 0 12px 5px rgba(200,220,255,0.9),
        0 0 25px 10px rgba(150,180,255,0.5);
}

/* ========== BATTERIE ========== */
.internals-battery {
    position: absolute;
    top: 42%;
    left: 5%;
    width: 42%;
    height: 50%;
    background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
    border: 2px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

.battery-cell {
    position: absolute;
    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 50%, #252525 100%);
    border: 1px solid #444;
    border-radius: 4px;
}

.battery-cell.cell-1 {
    top: 5%;
    left: 3%;
    right: 52%;
    bottom: 25%;
}

.battery-cell.cell-2 {
    top: 5%;
    left: 52%;
    right: 3%;
    bottom: 25%;
}

.battery-connector {
    position: absolute;
    bottom: 8%;
    right: 10%;
    width: 25%;
    height: 12%;
    background: #222;
    border: 1px solid #555;
    border-radius: 3px;
}

.battery-label {
    position: absolute;
    bottom: 22%;
    left: 5%;
    color: #666;
    font-size: 7px;
    font-family: 'Courier New', monospace;
}

.battery-warning {
    position: absolute;
    bottom: 5%;
    left: 5%;
    color: #ff6600;
    font-size: 5px;
    font-family: 'Courier New', monospace;
}

/* ========== LOGIC BOARD ========== */
.logic-board {
    position: absolute;
    top: 42%;
    right: 5%;
    width: 45%;
    height: 50%;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(0,60,0,0.15) 8px, rgba(0,60,0,0.15) 9px),
        repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(0,60,0,0.15) 8px, rgba(0,60,0,0.15) 9px),
        linear-gradient(135deg, #0a4a0a 0%, #063006 50%, #0a4a0a 100%);
    border: 1px solid #1a5a1a;
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.5);
}

/* Chips */
.chip {
    position: absolute;
    background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.chip-text {
    color: #555;
    font-size: 5px;
    font-family: 'Arial', sans-serif;
    text-align: center;
    line-height: 1.2;
}

.soc-chip {
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 35%;
    height: 25%;
    border-radius: 4px;
}

.ram-chip {
    width: 20%;
    height: 12%;
    border-radius: 2px;
}

.ram-chip.chip-1 {
    top: 50%;
    left: 10%;
}

.ram-chip.chip-2 {
    top: 50%;
    right: 10%;
}

.storage-chip {
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 15%;
    border-radius: 3px;
}

.pmic-chip {
    top: 50%;
    left: 38%;
    width: 12%;
    height: 10%;
    border-radius: 2px;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
}

.wifi-chip {
    top: 8%;
    right: 8%;
    width: 18%;
    height: 12%;
    border-radius: 2px;
}

/* SMD Komponenten */
.smd-components {
    position: absolute;
    top: 70%;
    left: 5%;
    right: 5%;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.smd {
    width: 4px;
    height: 2px;
    border-radius: 0.5px;
}

.smd.cap {
    background: linear-gradient(90deg, #8B4513, #D2691E, #8B4513);
}

.smd.res {
    background: linear-gradient(90deg, #222, #444, #222);
}

.smd.inductor {
    background: linear-gradient(90deg, #333, #666, #333);
    width: 6px;
}

/* ========== FLEXKABEL ========== */
.flex-cable {
    position: absolute;
    background: linear-gradient(180deg, #d4a84b, #c9973a, #d4a84b);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 10;
}

.display-cable {
    top: 38%;
    left: 48%;
    width: 20%;
    height: 4px;
    border-radius: 1px;
}

.touch-cable {
    top: 40%;
    left: 50%;
    width: 18%;
    height: 3px;
    border-radius: 1px;
}

.battery-cable {
    top: 60%;
    left: 46%;
    width: 8%;
    height: 3px;
    border-radius: 1px;
}

.cable-connector {
    position: absolute;
    right: -3px;
    top: -2px;
    width: 8px;
    height: 8px;
    background: #222;
    border: 1px solid #444;
    border-radius: 2px;
}

/* ========== LAUTSPRECHER ========== */
.speaker {
    position: absolute;
    width: 12%;
    height: 5%;
    background: #111;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
}

.speaker-top-left { top: 5%; left: 15%; }
.speaker-top-right { top: 5%; right: 15%; }
.speaker-bottom-left { bottom: 5%; left: 15%; }
.speaker-bottom-right { bottom: 5%; right: 15%; }

.speaker-membrane {
    position: absolute;
    top: 20%;
    left: 10%;
    right: 10%;
    bottom: 20%;
    background: radial-gradient(ellipse, #222 0%, #111 100%);
    border-radius: 2px;
}

.speaker-magnet {
    position: absolute;
    top: 35%;
    left: 35%;
    right: 35%;
    bottom: 35%;
    background: #444;
    border-radius: 50%;
}

/* ========== SIM TRAY ========== */
.sim-tray {
    position: absolute;
    top: 15%;
    left: 6%;
    width: 15%;
    height: 8%;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 3px;
    padding: 2px;
}

.sim-card {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    border-radius: 2px;
    position: relative;
}

.sim-chip-gold {
    position: absolute;
    top: 15%;
    left: 10%;
    width: 40%;
    height: 60%;
    background: linear-gradient(135deg, #d4af37, #f4d03f, #d4af37);
    border-radius: 2px;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
}

.sim-label {
    position: absolute;
    bottom: -12px;
    left: 0;
    color: #555;
    font-size: 5px;
    font-family: 'Courier New', monospace;
}

/* ========== KAMERAS ========== */
.camera-module {
    position: absolute;
    top: 8%;
    right: 6%;
    width: 12%;
    height: 18%;
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 3px;
}

.camera {
    position: absolute;
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-camera {
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    aspect-ratio: 1;
}

.ultra-wide {
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    aspect-ratio: 1;
}

.camera .lens {
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, #1a1a4a 0%, #0a0a2a 50%, #050510 100%);
    border-radius: 50%;
    border: 1px solid #333;
}

.camera .sensor {
    position: absolute;
    width: 30%;
    height: 30%;
    background: #2a2a5a;
    border-radius: 2px;
}

.flash-led {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    aspect-ratio: 1;
    background: radial-gradient(circle, #ffffcc, #ffff99);
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255,255,200,0.5);
}

/* Front Kamera */
.front-camera {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 4%;
    aspect-ratio: 1;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.front-camera .lens {
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, #1a1a3a, #050515);
    border-radius: 50%;
}

/* ========== ANTENNEN ========== */
.antenna {
    position: absolute;
    background: linear-gradient(90deg, #666, #888, #666);
    height: 2px;
    z-index: 3;
}

.antenna-top {
    top: 2%;
    left: 30%;
    width: 40%;
}

.antenna-bottom {
    bottom: 2%;
    left: 25%;
    width: 50%;
}

.antenna-side {
    top: 30%;
    right: 1%;
    width: 2%;
    height: 20%;
    background: linear-gradient(180deg, #666, #888, #666);
}

/* ========== VIBRATIONSMOTOR ========== */
.vibration-motor {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 6%;
    height: 4%;
    background: #222;
    border: 1px solid #444;
    border-radius: 3px;
}

.motor-weight {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: #888;
    border-radius: 50% 50% 50% 0;
}

/* ========== USB-C PORT ========== */
.usb-port {
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
    width: 8%;
    height: 3%;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 2px;
}

.usb-connector {
    position: absolute;
    top: 20%;
    left: 15%;
    right: 15%;
    bottom: 20%;
    background: #333;
    border-radius: 1px;
}

/* ========== SCHRAUBEN ========== */
.screw {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at 30% 30%, #888, #333);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.5);
}

.screw::after {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #222;
    font-size: 5px;
    font-weight: bold;
}

.screw-1 { top: 5%; left: 5%; }
.screw-2 { top: 5%; right: 5%; }
.screw-3 { bottom: 5%; left: 5%; }
.screw-4 { bottom: 5%; right: 5%; }
.screw-5 { top: 50%; left: 3%; }
.screw-6 { top: 50%; right: 3%; }

/* ========== WARNUNG ========== */
.internals-warning {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
}

.warning-box {
    background: rgba(0,0,0,0.9);
    padding: 10px 20px;
    border-radius: 8px;
    border: 3px solid #ff0000;
    box-shadow:
        0 0 20px rgba(255,0,0,0.6),
        0 0 40px rgba(255,0,0,0.3),
        inset 0 0 20px rgba(255,0,0,0.1);
    text-align: center;
    animation: warningPulse 0.5s infinite alternate;
}

.warning-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 5px;
    animation: shake 0.1s infinite;
}

@keyframes shake {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.warning-text {
    color: #ff0000;
    font-size: 14px;
    font-weight: bold;
    display: block;
    text-shadow: 0 0 10px rgba(255,0,0,0.8);
    letter-spacing: 2px;
}

.warning-subtext {
    color: #ff6666;
    font-size: 10px;
    font-weight: bold;
    display: block;
    margin-top: 5px;
}

.warning-hint {
    color: #666;
    font-size: 8px;
    display: block;
    margin-top: 8px;
    font-style: italic;
}

@keyframes warningPulse {
    0% {
        box-shadow: 0 0 20px rgba(255,0,0,0.6), 0 0 40px rgba(255,0,0,0.3), inset 0 0 20px rgba(255,0,0,0.1);
        border-color: #ff0000;
    }
    100% {
        box-shadow: 0 0 30px rgba(255,0,0,0.9), 0 0 60px rgba(255,0,0,0.5), inset 0 0 30px rgba(255,0,0,0.2);
        border-color: #ff3333;
    }
}

/* Shattered State - ALLES überschreiben! */
.damage-shattered {
    /* Level 6 Filter komplett entfernen! */
    filter: none !important;
    animation: none !important;
    overflow: visible !important; /* Für Notfall-Handy rechts */
}

.damage-shattered .damage-blackout,
.damage-shattered .damage-vignette,
.damage-shattered .damage-noise-canvas,
.damage-shattered .damage-scanlines,
.damage-shattered .damage-dead-pixels,
.damage-shattered .damage-crack-layer {
    opacity: 0 !important;
    display: none !important;
}

/* Shattered ::before Pseudo-Element ausblenden */
.damage-shattered::before {
    display: none !important;
}

/* ========================================
   NOTFALL-HANDY (Emergency Phone) - 3x größer!
   ======================================== */
.emergency-phone {
    position: absolute;
    right: -230px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 300;
    animation: phoneSlideIn 0.5s ease-out 0.3s both;
}

@keyframes phoneSlideIn {
    from {
        right: -280px;
        opacity: 0;
    }
    to {
        right: -230px;
        opacity: 1;
    }
}

.phone-body {
    width: 200px;
    height: 380px;
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 50%, #222 100%);
    border-radius: 24px;
    border: 3px solid #444;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.6),
        inset 0 2px 0 rgba(255,255,255,0.1);
    padding: 15px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.phone-speaker {
    width: 60px;
    height: 5px;
    background: #333;
    border-radius: 3px;
}

.phone-screen {
    width: 176px;
    height: 290px;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 8px;
    border: 2px solid #333;
    overflow: hidden;
    position: relative;
}

.phone-home-btn {
    width: 45px;
    height: 45px;
    background: linear-gradient(180deg, #444, #333);
    border-radius: 50%;
    border: 2px solid #555;
    cursor: pointer;
    transition: transform 0.1s;
}

.phone-home-btn:hover {
    transform: scale(0.95);
}

.phone-home-btn:active {
    transform: scale(0.9);
    background: linear-gradient(180deg, #333, #222);
}

/* Phone Menu */
.phone-menu {
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.phone-title {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.phone-btn {
    background: linear-gradient(180deg, #3a3a5a, #2a2a4a);
    border: 2px solid #4a4a6a;
    border-radius: 12px;
    padding: 15px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
}

.phone-btn:hover {
    background: linear-gradient(180deg, #4a4a6a, #3a3a5a);
    transform: scale(1.02);
}

.phone-btn:active {
    transform: scale(0.98);
}

.btn-icon {
    font-size: 28px;
}

.btn-text {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

/* Calling Screen */
.phone-calling {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
}

.calling-icon {
    font-size: 60px;
    animation: callPulse 1s infinite;
}

@keyframes callPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.calling-text {
    color: #4ade80;
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
    text-align: center;
    line-height: 1.4;
}

.calling-dots {
    color: #4ade80;
    font-size: 28px;
    margin-top: 10px;
}

.calling-dots span {
    animation: dotBlink 1s infinite;
}

.calling-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.calling-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotBlink {
    0%, 50%, 100% { opacity: 0; }
    25% { opacity: 1; }
}

/* Janitor Angry Message */
.janitor-angry {
    color: #ff4444 !important;
    animation: angryShake 0.1s infinite;
}

@keyframes angryShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* Snake Canvas */
.phone-snake {
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: block;
}

/* Snake Highscore Display */
.snake-highscore {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #ffd700;
    font-size: 12px;
    font-family: monospace;
    text-shadow: 0 0 5px rgba(255,215,0,0.5);
}

/* Hidden class */
.hidden {
    display: none !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .tablet-shake {
        --shake-intensity: 3px !important;
    }

    .dead-pixel {
        width: 1px !important;
        height: 1px !important;
    }
}