body {
    background: #050505;
    color: #00ff41;
    font-family: 'Courier New', monospace;
    margin: 0;
    /* 背景画像設定（背景.pngを配置してください） */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('背景.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

#os-container { max-width: 900px; margin: 0 auto; padding: 60px 20px; }

.card {
    border: 1px solid #00ff41;
    padding: 30px;
    margin: 25px 0;
    background: rgba(0, 20, 0, 0.7);
    backdrop-filter: blur(5px);
    text-align: center; /* 中身の文字を中央に */
    transition: 0.3s;
}

.card:hover { border-color: #ff0000; box-shadow: 0 0 15px #ff0000; transform: scale(1.01); }

button {
    background: #ff0000;
    color: #fff;
    border: none;
    padding: 20px;
    width: 100%;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
}
/* style.css の末尾に追加 */

/* 衝撃を受けた時の画面の割れ（グリッチ）演出 */
.shotgun-impact {
    animation: shake-hard 0.5s cubic-bezier(.36,.07,.19,.97) both;
    filter: invert(1) contrast(3) brightness(1.5) !important;
    border: 5px solid #ff0000 !important;
}

@keyframes shake {
  0% { transform: translate(5px, 5px); }
  25% { transform: translate(-5px, -5px); }
  50% { transform: translate(5px, -5px); }
  75% { transform: translate(-5px, 5px); }
  100% { transform: translate(0, 0); }
}