html {
    height: 100%;
    overflow: hidden;
}

/* --- 基礎樣式 --- */
body {
    background-color: #1a1a1a;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh; /* Use fixed height */
    margin: 0;
    padding: 10px; /* Add some padding */
    box-sizing: border-box;
    overflow: hidden; /* Prevent scrolling */
}

h1 {
    flex-shrink: 0; /* Prevent h1 from shrinking */
    margin: 10px 0; /* Adjust margin */
    font-weight: 300;
    letter-spacing: 2px;
    font-size: 1.5rem;
}

/* Camera View adjustments */
#camera-view {
    flex-grow: 1;   /* Allow it to grow */
    flex-shrink: 1; /* Allow it to shrink */
    min-height: 0;  /* Crucial for shrinking */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.camera-container {
    position: relative;
    width: 100%;
    max-width: 450px;
    aspect-ratio: 3/4;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    background: #000;
    margin: 0 auto; /* 置中 */
    max-height: 100%; /* Ensure it doesn't exceed parent height */
}

/* 確保影片填滿直式框框 (會自動裁切顯示) */
video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 關鍵：讓影片填滿直式容器，多餘的左右兩邊會被隱藏 */
    transform: scaleX(-1);
}

/* 倒數計時與閃光層 */
#overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem; /* 手機版字體稍微調小 */
    font-weight: bold;
    color: white;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 10;
}

.flash {
    animation: flashAnim 0.15s ease-out; /* 閃光快一點 */
    background-color: white;
}

@keyframes flashAnim {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* --- 結果預覽區塊 --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.canvas-container {
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

canvas {
    /* Let the container handle sizing, this ensures aspect ratio is maintained */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* --- 按鈕群組 --- */
.controls {
    margin-top: 10px; /* Reduced margin-top for controls within result-container */
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    flex-shrink: 0; /* Prevent controls from shrinking */
}

#result-container {
    display: none; /* 預設隱藏 */
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 450px;
    animation: fadeIn 0.5s;
    flex-grow: 1; /* Allow it to grow */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    overflow: hidden; /* Prevent internal scrolling */
    height: auto; /* Allow height to be determined by content, but respect flex container */
    min-height: 0; /* Allow the element to shrink below its content height */
    padding: 10px; /* Add padding to the result container */
}

button {
    padding: 14px 28px; /* 手機按鈕做大一點 */
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.1s;
    font-weight: bold;
    -webkit-tap-highlight-color: transparent; /* 去除手機點擊藍框 */
    touch-action: manipulation;
}

button:active { transform: scale(0.95); }

.btn-primary { background: #ff4757; color: white; box-shadow: 0 4px 10px rgba(255, 71, 87, 0.4); }
.btn-secondary { background: #535c68; color: white; }

.btn-filter, .btn-layout, .btn-border {
    background: #fff;
    color: #333;
    border: 2px solid #ddd;
}
.btn-filter:hover, .btn-layout:hover, .btn-border:hover {
    background: #f1f2f6;
}

/* Style for the active button */
.btn-layout.active, .btn-filter.active, .btn-border.active {
    border-color: #ff4757;
    color: #ff4757;
}

/* 狀態文字 */
#status-text {
    margin-top: 15px;
    color: #ccc;
    font-size: 0.9rem;
    text-align: center;
}