* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    background: #000; color: #fff; font-family: sans-serif; 
    user-select: none; 
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation; 
}
/* 牌組導入圖片：只顯示左側 60%，隱藏右側 40% */
.preview-container.crop-left-60 {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.preview-container.crop-left-60 #preview-img {
    display: block;
    width: 142.8571%;
    max-width: none !important;
    height: auto;
    object-fit: contain;
    object-position: left top;
}
/* printstyle.css */
.main-wrapper {
    max-width: 650px;
    margin: 40px auto; /* 確保 auto 能發揮作用 */
    padding: 20px;
    position: relative; 
    left: 0; /* 確保沒有繼承到奇怪的位移 */
}

html {
    /* 保留捲軸空間，防止佈局跳動 */
    scrollbar-gutter: stable;
}

/* 表單樣式 - 完整保留 */
.submit-content { background: #111; padding: 30px; border-radius: 15px; border: 1px solid #222; }
.section-title { color: #ff4500; margin-bottom: 20px; text-align: center; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; color: #ffa500; }
select, input { width: 100%; padding: 12px; background: #222; border: 1px solid #333; color: #fff; border-radius: 8px; }

textarea {
    width: 100%; padding: 12px; background: #222; border: 1px solid #333; color: #fff; border-radius: 8px;
    resize: none; overflow: hidden; line-height: 1.5; min-height: 100px; transition: height 0.1s ease;
}

.btn-select-axis, .btn-confirm { 
    background: linear-gradient(to right, #ff4500, #ff8c00); 
    color: #fff; border: none; padding: 14px; border-radius: 8px; 
    cursor: pointer; width: 100%; font-weight: bold; margin-bottom: 10px;
    transition: transform 0.2s, filter 0.2s; font-size: 1rem;
}
.btn-select-axis:hover, .btn-confirm:hover { filter: brightness(1.2); transform: translateY(-2px); }

/* 標籤樣式 - 完整保留 */
.tags-container { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.tag {
    background: rgba(255, 69, 0, 0.1); color: #fff; padding: 6px 14px 6px 8px;
    border-radius: 20px; border: 1px solid #ff4500; font-size: 13px;
    display: flex; align-items: center; gap: 12px;
}
.tag-icon {
    width: 28px; aspect-ratio: 344 / 221; border-radius: 2px;
    background-repeat: no-repeat; background-size: 118.6% 258.8%; background-position: 50% 25.07%;
    flex-shrink: 0; border: 0.5px solid rgba(255,255,255,0.3);
}
.tag-remove { cursor: pointer; color: #ff4500; font-weight: bold; font-style: normal; }

/* 3D 木馬核心樣式 - 完整保留 */
.carousel-modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 3000; touch-action: none; }
.scene { width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; perspective: 1400px; }
.carousel { width: 175px; height: 245px; position: relative; transform-style: preserve-3d; will-change: transform; }
.card-item { position: absolute; transform-style: preserve-3d; }
.card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); image-rendering: -webkit-optimize-contrast; }
.card-face img { width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); }
.card-back { transform: rotateY(180deg); }

.carousel-controls-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    z-index: 4000;
}
/* 結束按鈕樣式 */
.btn-finish-selection {
    background: rgba(255, 69, 0, 0.2);
    color: #ff4500;
    border: 1px solid #ff4500;
    padding: 10px 30px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.btn-finish-selection:hover {
    background: #ff4500;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.6);
    transform: scale(1.05);
}

.btn-finish-selection:active {
    transform: scale(0.95);
}
/* --- 僅修改箭頭控制項，完全移除 3D 傾斜與翻轉，確保不跳動 --- */
.arrow-controls {
    display: flex;
    gap: 150px; /* 拉開一點空間給中間的按鈕感 */
    margin-top: 0; 
}
.carousel-arrow {
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #ff4500;
    font-size: 60px; /* 大尺寸箭頭 */
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 讓 < > 符號加粗 */
    -webkit-text-stroke: 2px #ff4500;
    text-shadow: 0 0 15px rgba(255, 69, 0, 0.8);
}

.arrow-left { 
    /* 這裡可以調整左箭頭的角度，目前設為 0deg 平放 */
    transform: rotate(0deg); 
}

.arrow-right { 
    /* 這裡可以調整右箭頭的角度，目前設為 0deg 平放 */
    transform: rotate(0deg); 
}

.carousel-arrow:hover { 
    color: #fff;
    -webkit-text-stroke: 2px #fff;
    transform: scale(1.15); /* Hover 時僅放大 */
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
}

.carousel-arrow:active { 
    transform: scale(0.9); 
}

.carousel-ui { margin-top: 25px; color: #ff4500; font-size: 1.2rem; pointer-events: none; text-shadow: 0 0 10px rgba(255,69,0,0.5); }