* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-touch-callout: none; }

/* ▼▼ フォントをポップに変更 ▼▼ */
body { overflow: hidden; font-family: 'M PLUS Rounded 1c', sans-serif; }

#game-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; }

/* ===== スプラッシュスクリーン ===== */
#splash-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #ffffff;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    z-index: 1000; cursor: pointer;
    transition: opacity 0.5s ease;
}
#splash-screen.hidden { opacity: 0; pointer-events: none; }
#splash-wrapper {
    position: relative;
    display: inline-block;
}
#splash-img {
    max-width: 92vw; max-height: 72vh;
    object-fit: contain;
    display: block;
}
#splash-title {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(28px, 8vw, 56px);
    font-weight: bold;
    color: #fff;
    letter-spacing: 4px;
    text-shadow:
        0 0 12px rgba(0,0,0,0.8),
        3px 3px 0 #111,
        -1px -1px 0 #111;
    white-space: nowrap;
}
#tap-hint {
    margin-top: 28px;
    font-size: 22px; font-weight: bold; color: #111;
    letter-spacing: 2px;
    animation: tap-pulse 1.4s ease-in-out infinite;
}
@keyframes tap-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}

#damage-flash {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(255, 0, 0, 0);
    pointer-events: none; z-index: 50;
    transition: opacity 0.3s ease-out;
}

/* ===== エンディング動画 ===== */
#ending-screen {
    display: none;
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000; z-index: 900;
    justify-content: center; align-items: center;
}
#ending-screen.active { display: flex; }
#ending-video {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* ===== サンクス画面 ===== */
#thanks-screen {
    display: none;
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000; z-index: 910;
    flex-direction: column;
    justify-content: center; align-items: center;
    cursor: pointer;
    gap: 32px;
}
#thanks-screen.active { display: flex; }
#thanks-text {
    color: #fff;
    font-size: clamp(20px, 5vw, 32px);
    font-weight: bold;
    text-align: center;
    line-height: 1.9;
    letter-spacing: 1px;
}
#thanks-hint {
    color: rgba(255,255,255,0.55);
    font-size: 16px;
    animation: tap-pulse 1.4s ease-in-out infinite;
}

/* ===== 設定ボタン ===== */
#settings-btn {
    position: fixed; top: 14px; right: 14px; z-index: 200;
    width: 48px; height: 48px;
    background: #fff;
    border: 3px solid #111;
    border-radius: 12px;
    box-shadow: 0 4px 0 #111;
    font-size: 24px; line-height: 1;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    -webkit-tap-highlight-color: transparent;
}
#settings-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #111;
}

/* ===== 設定パネル ===== */
#settings-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 300;
    background: rgba(0,0,0,0.35);
}
#settings-overlay.show { display: block; }

#settings-panel {
    display: none;
    position: fixed; top: 70px; right: 14px; z-index: 310;
    width: min(300px, 85vw);
    background: #fff;
    border: 3px solid #111;
    border-radius: 16px;
    box-shadow: 0 6px 0 #111;
    overflow: hidden;
}
#settings-panel.show { display: block; }

#settings-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px;
    background: #111;
    color: #fff;
    font-size: 16px; font-weight: bold;
}
#settings-close {
    background: none; border: none; color: #fff;
    font-size: 20px; cursor: pointer; padding: 0 4px;
    -webkit-tap-highlight-color: transparent;
}
.settings-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 2px solid #eee;
}
.settings-row:last-child { border-bottom: none; }
.settings-row label {
    font-size: 15px; font-weight: bold; color: #111;
    white-space: nowrap;
}
#bgm-volume {
    flex: 1; height: 28px; /* タッチしやすい高さ */
    accent-color: #4285F4;
    cursor: pointer;
    user-select: auto; /* グローバルのuser-select:noneを上書き */
    touch-action: manipulation;
}

/* トグルスイッチのスタイル */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border: 2px solid #111;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border: 2px solid #111;
}
input:checked + .slider {
  background-color: #4285F4;
}
input:focus + .slider {
  box-shadow: 0 0 1px #4285F4;
}
input:checked + .slider:before {
  transform: translateX(22px);
}
.slider.round {
  border-radius: 28px;
}
.slider.round:before {
  border-radius: 50%;
}

#settings-reset {
    width: 100%;
    padding: 12px;
    background: #EA4335;
    color: #fff;
    border: 3px solid #111;
    border-radius: 10px;
    box-shadow: 0 4px 0 #111;
    font-size: 15px; font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
#settings-reset:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #111;
}

/* ▼▼ 左上の高度表記を非表示に ▼▼ */
#score-display {
    display: none;
}

#hp-display {
    position: absolute; top: 16px; right: 16px;
    display: flex; gap: 4px; z-index: 10;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}

#ui-layer {
    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 10;
    pointer-events: none;
}

.control-pad, .dpad-btn, .rot-btn {
    pointer-events: auto;
}

.control-pad {
    display: flex; align-items: center; gap: 20px;
}

/* ===== 十字キー ===== */
#dpad {
    display: grid;
    grid-template-columns: repeat(3, 60px);
    grid-template-rows: repeat(3, 60px);
    gap: 4px; touch-action: none;
}

.dpad-btn {
    width: 60px; height: 60px;
    border-radius: 14px;
    border: 3px solid #111;
    background: #ffffff;
    font-size: 26px; font-weight: 900;
    cursor: pointer; color: #111;
    box-shadow: 0 5px 0 #111;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.06s, box-shadow 0.06s;
    -webkit-tap-highlight-color: transparent;
}
.dpad-btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #111;
    background: #f0f0f0;
}

#btn-fwd    { grid-column: 2; grid-row: 1; }
#btn-turn-l { grid-column: 1; grid-row: 2; }
#btn-turn-r { grid-column: 3; grid-row: 2; }
#btn-bwd    { grid-column: 2; grid-row: 3; }

/* ドロップボタン（中央・黄色） */
.dpad-center {
    grid-column: 2; grid-row: 2;
    width: 60px; height: 60px;
    background: #FBBC05;
    border-radius: 14px;
    border: 3px solid #111;
    box-shadow: 0 5px 0 #111;
    cursor: pointer; pointer-events: auto; user-select: none;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; line-height: 1;
    font-size: 11px; font-weight: 900; color: #111;
    transition: transform 0.06s, box-shadow 0.06s;
    -webkit-tap-highlight-color: transparent;
}
.drop-icon { font-size: 16px; font-weight: 900; }
.dpad-center:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #111;
    background: #f0a800;
}

/* ===== 回転ボタン ===== */
.rot-group { display: flex; flex-direction: column; gap: 8px; }

.rot-btn {
    width: 62px; height: 62px;
    border-radius: 50%;
    border: 3px solid #111;
    font-weight: bold;
    cursor: pointer; color: #fff;
    box-shadow: 0 5px 0 #111;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.06s, box-shadow 0.06s;
    -webkit-tap-highlight-color: transparent;
}
.rot-btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #111;
    filter: brightness(0.9);
}

/* 各回転ボタンの個別色（Google カラー） */
#btn-rot-y { background: #4285F4; box-shadow: 0 5px 0 #1a5fb4; }
#btn-rot-y:active { box-shadow: 0 1px 0 #1a5fb4; }

#btn-rot-x { background: #34A853; box-shadow: 0 5px 0 #1e7a38; }
#btn-rot-x:active { box-shadow: 0 1px 0 #1e7a38; }

#btn-rot-z { background: #EA4335; box-shadow: 0 5px 0 #a82b20; }
#btn-rot-z:active { box-shadow: 0 1px 0 #a82b20; }

/* ===== ゲームオーバー画面 ===== */
#game-over-screen {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(255, 255, 255, 0.92);
    display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 100;
}
#game-over-screen h1 {
    font-size: 56px; color: #FF4136; margin-bottom: 20px; letter-spacing: 2px;
    text-shadow: -2px -2px 0 #111, 2px -2px 0 #111, -2px 2px 0 #111, 2px 2px 0 #111, 0px 4px 0 #111;
}
#final-score {
    font-size: 28px; color: #111; margin-bottom: 40px; font-weight: bold;
}
#retry-btn {
    padding: 15px 40px; font-size: 22px; font-weight: bold; border-radius: 30px;
    border: 3px solid #111; background: #FBBC05; color: #111; cursor: pointer;
    box-shadow: 0 6px 0px #111;
    transition: transform 0.06s, box-shadow 0.06s;
}
#retry-btn:active { transform: translateY(4px); box-shadow: 0 2px 0px #111; }