.ui-header {
            flex-shrink: 0; width: 100%;
            padding: env(safe-area-inset-top) 10px 10px 10px;
            background: #0f172a;
            display: flex; flex-direction: column;
            align-items: center; gap: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
            z-index: 20;
        }

        .ui-panel {
            display: flex; align-items: center;
            background: rgba(255, 255, 255, 0.07);
            padding: 8px 20px; border-radius: 14px;
            gap: 20px; border: 1px solid rgba(255,255,255,0.1);
        }
        .full{width:100%;}
        /* 게임 영역 */
        .game-container {
            flex-grow: 1; width: 100%;
            display: flex; align-items: center; justify-content: center;
            position: relative; overflow: hidden;
            padding: 15px; box-sizing: border-box;
        }

        /* 캔버스를 감싸는 래퍼: 중앙 정렬 보장 */
        .canvas-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        canvas {
            background: #1b5e20;
            box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.4);
            border: 8px solid #2d1a12;
            border-radius: 10px;
            display: block; touch-action: none;
        }

        #message-box {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none; color: #fbbf24;
            font-size: 2.5rem; font-weight: 900;
            text-shadow: 0 0 20px rgba(0,0,0,1);
            opacity: 0; transition: opacity 0.3s; z-index: 100;
        }

        #power-bar {
            position: absolute; bottom: 30px; left: 50%;
            transform: translateX(-50%); width: 220px;
            height: 10px; background: rgba(255,255,255,0.15);
            border-radius: 5px; display: none; overflow: hidden;
            border: 1px solid rgba(255,255,255,0.2);
        }
        #power-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #22c55e, #eab308, #ef4444); }

        .active .turn-dot { background: #fbbf24; box-shadow: 0 0 10px #fbbf24; }
        .turn-dot { width: 8px; height: 8px; border-radius: 50%; margin: 4px auto 0; background: transparent; }