/* skins.css */
/* --- SKIN-AUSWAHL BUTTONS --- */
.skin-btn { padding: 8px 16px; font-size: 14px; margin: 5px; border: 2px solid #555; border-radius: 6px; background: #1a1a1e; color: white; cursor: pointer; }
.skin-btn.active { border-color: #f1c40f; background: #2c2c35; color: #f1c40f; }
.diff-btn { padding: 8px 16px; font-size: 14px; margin: 5px; border: 2px solid #555; border-radius: 6px; background: #1a1a1e; color: white; cursor: pointer; font-weight: bold; }
.diff-btn.active { border-color: #2ecc71; background: #1e3a27; color: #2ecc71; }

/* --- SKIN: RETRO WOOD --- */
body.skin-retro .cell.filled, body.skin-retro .preview-cell {
    border: 3px solid rgba(0,0,0,0.15); border-radius: 2px !important;
    box-shadow: inset 2px 2px 0 rgba(255,255,255,0.2), inset -2px -2px 0 rgba(0,0,0,0.2) !important;
}

/* --- SKIN: CYBERPUNK --- */
body.skin-cyber { background-color: #0b0813; }
body.skin-cyber #grid { background-color: #130f22; border: 2px solid #00f0ff; box-shadow: 0 0 20px rgba(0, 240, 255, 0.2); }
body.skin-cyber .cell { background-color: #1a1530; border-radius: 2px; }
body.skin-cyber .cell.filled, body.skin-cyber .preview-cell {
    border: 1px solid #fff; box-shadow: 0 0 8px currentColor, inset 0 0 4px rgba(255,255,255,0.5) !important;
}

/* --- AMIGA-STYLE SCHRAFFIERTER EIS-BLOCK --- */
.cell.ice, .preview-cell.ice {
    border: 2px solid #dfe6e9 !important; box-sizing: border-box;
    box-shadow: 0 0 10px rgba(116, 185, 255, 0.6), inset 0 0 8px rgba(255,255,255,0.8) !important;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0px, rgba(255, 255, 255, 0.5) 2px, transparent 2px, transparent 7px), linear-gradient(135deg, #74b9ff 0%, #a29bfe 100%) !important;
}

/* Eis Splitter Partikel-Effekt */
.ice-shard { position: fixed; z-index: 1550; background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%); border: 1px solid #ffffff; box-shadow: 0 0 6px rgba(128, 222, 234, 0.6); pointer-events: none; }

/* --- ARCADE STERNEN-BOMBE (SPIELFELD) --- */
.cell.bomb {
    border: 2px solid #b02515 !important; box-sizing: border-box;
    box-shadow: 0 0 12px #e74c3c, inset 0 0 8px rgba(255,255,255,0.6) !important;
    animation: pulseBomb 0.8s infinite alternate ease-in-out; position: relative !important; display: flex !important;
    background: 
        linear-gradient(to right, transparent 41%, #111 41%, #fff 43%, #111 45%, transparent 45%) no-repeat top / 100% 50%,
        linear-gradient(to right, transparent 55%, #111 55%, #fff 57%, #111 59%, transparent 59%) no-repeat bottom / 100% 50%,
        linear-gradient(to bottom, transparent 45%, #111 45%, #fff 47%, #111 49%, transparent 49%),
        linear-gradient(45deg, transparent 47%, #111 47%, #fff 49%, #111 51%, transparent 51%),
        linear-gradient(135deg, transparent 47%, #111 47%, #fff 49%, #111 51%, transparent 51%),
        radial-gradient(circle, #ff4d4d 20%, #c0392b 80%) !important;
}

/* --- ARCADE STERNEN-BOMBE (VORSCHAU-DOCK) --- */
.preview-cell.bomb {
    border: 2px solid #b02515 !important; box-sizing: border-box;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.7), inset 0 0 4px rgba(255,255,255,0.5) !important;
    position: absolute !important; display: block !important;
    background: 
        linear-gradient(to right, transparent 41%, #111 41%, #fff 43%, #111 45%, transparent 45%) no-repeat top / 100% 50%,
        linear-gradient(to right, transparent 55%, #111 55%, #fff 57%, #111 59%, transparent 59%) no-repeat bottom / 100% 50%,
        linear-gradient(to bottom, transparent 45%, #111 45%, #fff 47%, #111 49%, transparent 49%),
        linear-gradient(45deg, transparent 47%, #111 47%, #fff 49%, #111 51%, transparent 51%),
        linear-gradient(135deg, transparent 47%, #111 47%, #fff 49%, #111 51%, transparent 51%),
        radial-gradient(circle, #ff4d4d 20%, #c0392b 80%) !important;
}

/* --- ANIMATIONEN --- */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(0px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(2px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(0deg); }
}
.shake { animation: shake 0.4s ease-in-out; }

@keyframes pulseRotateHint {
    0% { filter: drop-shadow(0 0 2px #f1c40f) brightness(1); }
    100% { filter: drop-shadow(0 0 12px #f1c40f) brightness(1.3); }
}
.rotate-hint { animation: pulseRotateHint 0.8s infinite alternate ease-in-out; }

@keyframes pulseBomb { 
    0% { transform: scale(1); } 
    100% { transform: scale(0.95); } 
}

/* Animierter Sternen-Block auf dem Spielfeld */
.cell.star-block {
    position: relative;
}
.cell.star-block::after {
    content: '⭐';
    position: absolute;
    font-size: 16px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: pulseStar 1s infinite alternate ease-in-out;
    z-index: 5;
}
@keyframes pulseStar {
    0% { transform: translate(-50%, -50%) scale(0.85); filter: drop-shadow(0 0 2px #fff); }
    100% { transform: translate(-50%, -50%) scale(1.15); filter: drop-shadow(0 0 8px #f1c40f); }
}