/* ==========================================
   1. 全体リセット & 画面固定
   ========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-align: center;     
    background-color: #121212; 
    color: #ffffff;            
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh; 
}

.ui-container {
    width: min(720px, 95vw);
    margin: 0 auto;
    position: relative; 
    padding: 20px 0; 
}

/* ==========================================
   2. タイトルエリア
   ========================================== */
.title-area h1 {
    font-size: 1.25rem;     
    font-weight: bold;      
    letter-spacing: 2px;    
    padding: 8px 0;        
    background-color: rgba(0, 32, 16, 0.85); 
    color: #00ffcc; 
    border-radius: 9999px;    
    text-shadow: 0 0 10px rgba(0, 255, 204, 0.6); 
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(0, 255, 204, 0.2); 
    border: 1px solid #00bfa5; 
}

/* ==========================================
   3. メーターUI & ボタン制御
   ========================================== */
.status-area {
    display: grid;
    grid-template-columns: 1fr auto; 
    align-items: center; 
    gap: 12px;
    margin: 12px 0;
}

.status-info {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
    font-weight: bold;
    color: #e0e0e0;
    text-align: left; 
    padding-left: 4px;
    white-space: pre-line;  
}

.btn-group {
    display: flex;
    gap: 6px; 
    align-items: center; 
}

.reset-btn, .manual-btn {
    width: 100px;           
    padding: 8px 0;        
    font-size: 0.85rem;        
    font-weight: bold;      
    border: none; 
    border-radius: 9999px;    
    cursor: pointer;        
    transition: all 0.2s ease, transform 0.1s ease;
}

.reset-btn:active, .manual-btn:active {
    transform: scale(0.95);
}

.reset-btn { 
    background-color: rgba(211, 47, 47, 0.2); 
    border: 1px solid #ff8a80; 
    color: #ff8a80; 
}
.reset-btn:hover { 
    background-color: #b71c1c; 
    color: #ffffff;
}

.manual-btn {
    background-color: rgba(0, 150, 136, 0.2); 
    border: 1px solid #4db6ac; 
    color: #4db6ac; 
}
.manual-btn:hover {
    background-color: #00796b; 
    color: #ffffff;
}

/* ==========================================
   4. フィールドエリア & 5層クラスレイヤー構造
   ========================================== */
.field-area {
    position: relative;
    width: min(720px, 90vw);            
    aspect-ratio: 1 / 1; 
    margin: 0 auto;
    border-radius: 0;    
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8); 
    border: 6px solid #37474f; 
    overflow: hidden; 
}

/* 全レイヤー共通の絶対配置化 */
.bg-layer, .line-layer, .stage-panel-layer, .canvas-ball-layer, .card-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

/* 【第1層】背景 */
.bg-layer {
    z-index: 1;
    background-color: #1a1a1a; 
}

/* 【【第2層】グリッドライン */
.line-layer {
    z-index: 2;
    pointer-events: none;
    background: 
        linear-gradient(to right, rgba(0, 255, 204, 0.06) 1px, transparent 1px) 50% 50% / 100% 12.5%,
        linear-gradient(to bottom, rgba(0, 255, 204, 0.06) 1px, transparent 1px) 50% 50% / 12.5% 100%,
        #0b130e; 
}

/* 🟢【第3層】ブロック（DOMグリッド：盤面そのもの） */
.stage-panel-layer {
    z-index: 3;
    display: grid;          
    grid-template-rows: repeat(var(--rows, 8), 1fr);
    grid-template-columns: repeat(var(--cols, 8), 1fr); 
    padding: 8px;   /* 📥 大きないれものの外周8px */
    gap: 2px;       /* 📥 隣同士のすきま2px */
}

/* 🟢【第4層】キャンバス玉（球専用Canvas） */
.canvas-ball-layer {
    z-index: 4;
    pointer-events: none; /* 玉の描画板はすり抜けさせて、下の第3層（盤面）でマウスを拾えるようにする */
}
.game-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* 【第5層】マニュアルカード */
.card-layer {
    z-index: 5;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(11, 15, 25, 0.9); 
}

/* ==========================================
   5. パネル（セル）のネオンデザイン
   ========================================== */
.cell {
    display: flex;          
    justify-content: center; 
    align-items: center;    
    border-radius: 2px;     
    font-size: clamp(1rem, 4.5vw, 1.8rem);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    
    background: radial-gradient(circle at 35% 35%, #004d40 0%, #001a14 100%);
    color: #00ffcc;
    border: 1px solid #00bfa5;
    box-shadow: 0 3px 6px rgba(0,0,0,0.5), inset 0 0 8px rgba(0, 255, 204, 0.1);
}

.cell.selected {
    background: radial-gradient(circle at 35% 35%, #00bfa5 0%, #004d40 100%);
    color: #ffffff;
    border-color: #ffffff;
    animation: neon-pulse 0.6s infinite alternate; /* ⚡ 項目9番の明滅を発動 */
}

.cell.empty {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.02);
    box-shadow: none;
}

/* パドル表現用の特別クラス */
.cell.paddle {
    background: radial-gradient(circle at 35% 35%, #5a3d28 0%, #2b1a0e 100%) !important;
    border-color: #e5b36a !important;
    box-shadow: 0 0 10px rgba(229, 179, 106, 0.4) !important;
    animation: none !important;
}

/* ==========================================
   9. アニメーション制御（パルスエフェクト）
   ========================================== */
@keyframes neon-pulse {
    0% { box-shadow: 0 0 4px rgba(0, 255, 204, 0.4), inset 0 0 4px rgba(0, 255, 204, 0.2); }
    100% { box-shadow: 0 0 16px rgba(0, 255, 204, 0.8), inset 0 0 12px rgba(0, 255, 204, 0.4); }
}