:root {
    /* デフォルトのカラー設定 */
    --color-btn: #ff0055;
    --color-text: #ffffff;
    --color-timer: #00f2fe;
    --bg-overlay: rgba(15, 15, 25, 0.8);
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #0f0f19;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    overflow: hidden;
    color: var(--color-text);
    transition: background-image 0.5s ease;
}

.container {
    width: 100%;
    flex: 1;
    min-height: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(2px);
    position: relative; /* ドラッグ要素の基準点 */
}

/* 右上のボタン */
.top-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

.icon-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.3s ease;
}

.icon-btn:hover { background: rgba(255, 255, 255, 0.25); }

/* --- ドラッグ可能な要素のベース設定 --- */
.draggable-item {
    position: absolute;
    /* デフォルトは画面中央ベース */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* 各要素の初期Y座標 */
#status-text { top: 20%; font-size: 2.2rem; text-shadow: 0 0 10px rgba(0,0,0,0.5); color: var(--color-text); }
#action-btn { top: 50%; }
#timer-display { top: 80%; }

/* デカいボタン */
.huge-button {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: none;
    background: var(--color-btn);
    color: white;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    box-shadow: 0 0 40px var(--color-btn), inset 0 0 20px rgba(255,255,255,0.3);
    transition: transform 0.2s;
    line-height: 1.4;
}

.huge-button:hover { transform: translate(-50%, -50%) scale(1.06); }
.huge-button:active { transform: translate(-50%, -50%) scale(0.95); }

/* カウントダウン中のボタン（クールダウン） */
.huge-button.active {
    background: transparent;
    border: 4px solid var(--color-btn);
    box-shadow: 0 0 30px var(--color-btn) inset;
}

/* タイマー */
.timer {
    font-size: 4.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: var(--color-timer);
    text-shadow: 0 0 20px var(--color-timer);
    transition: opacity 0.5s;
}

.timer.hidden { opacity: 0; pointer-events: none; }

/* --- 配置編集モード時のスタイル --- */
body.edit-mode .draggable-item {
    outline: 2px dashed rgba(255, 255, 255, 0.8);
    cursor: grab;
}
body.edit-mode .draggable-item:active { cursor: grabbing; }
body.edit-mode .timer.hidden { opacity: 0.3; pointer-events: auto; } /* 非表示時も編集可能に */
/* body.edit-mode .huge-button { pointer-events: none; } ボタンを誤爆させない */

/* --- 設定モーダル --- */
.modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    color: white;
}
.modal.hidden { display: none; }

.modal-content {
    background: #1a1a24;
    padding: 30px;
    border-radius: 15px;
    width: 350px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

.modal-content h2 { margin-top: 0; font-size: 1.2rem; text-align: center; margin-bottom: 20px;}

.setting-group { margin-bottom: 15px; display: flex; flex-direction: column; gap: 5px; }
.setting-group label { font-size: 0.9rem; color: #ccc; }
.setting-group input[type="color"] { width: 100%; height: 40px; border: none; cursor: pointer; background: transparent; }
.time-inputs input { width: 60px; padding: 5px; background: #2a2a35; border: 1px solid #444; color: white; border-radius: 5px;}

.setting-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 25px; }
.setting-actions button { padding: 12px; border-radius: 8px; cursor: pointer; font-weight: bold; border: none; }
.outline-btn { background: transparent; border: 1px solid var(--color-btn) !important; color: white; }
.primary-btn { background: var(--color-btn); color: white; }

/* --- 広告（Web 版のみ表示。Electron 版は ads.js が web-ads を付与せず非表示） --- */
/* 画面下部の横長バナー。ads.js が描画したときだけ表示する。 */
.ad-bottom {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    box-sizing: border-box;
    background: rgba(10, 10, 18, 0.92);
    border-top: 1px solid var(--color-btn);
    overflow: hidden;
}
body.web-ads .ad-bottom { display: flex; }

/* 設定モーダル内の広告枠。モーダルの padding(30px) を打ち消して全幅に収める。 */
.ad-settings {
    display: none;
    justify-content: center;
    margin: 20px -30px 0;
    padding: 16px 15px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
body.web-ads .ad-settings { display: flex; }

/* 横長固定サイズバナー。auto 形式だと大きな矩形になり画面を占有するため、
   ブレークポイントごとに横長サイズを明示する。 */
.ad-unit {
    width: 320px;
    height: 50px;
}
@media (min-width: 480px) {
    .ad-unit { width: 468px; height: 60px; }
}
@media (min-width: 768px) {
    .ad-unit { width: 728px; height: 90px; }
}

/* 設定モーダル（幅 350px 固定）内に収める小さめ固定バナー。 */
.ad-unit-sm {
    width: 320px;
    height: 50px;
}