/* ============================================================================
   轉場層樣式（遊戲畫面與編輯器試看共用）
   ---------------------------------------------------------------------------
   .tr-layer  轉場容器，蓋在 host（.ge-viewport / 試看舞台）之上、吃掉點擊
   .tr-cover  遮罩式效果的色層／格子容器
   .tr-snap   雙畫面式的畫面快照（cloneNode 副本）
   .tr-hide-live 轉場期間暫時隱藏「真正的畫面」，只顯示快照
   ============================================================================ */
.tr-layer {
    position: absolute;
    inset: 0;
    z-index: 200;
    overflow: hidden;
    pointer-events: auto;   /* 轉場中不讓玩家點穿到底下的畫面 */
}
.tr-cover, .tr-snap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.tr-snap {
    backface-visibility: hidden;   /* 3D 翻轉時背面不透出 */
    transform-origin: center;
}
.tr-cover > div { box-sizing: border-box; }
.tr-hide-live > *:not(.tr-layer) { visibility: hidden; }

/* 試看舞台（設定視窗內）：兩張示意畫面，不依賴專案素材 */
.tr-demo-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid #3a3a4a;
    border-radius: 6px;
    background: #07070f;
}
.tr-demo-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 2px;
}
.tr-demo-a { background: linear-gradient(135deg, #24406b 0%, #47286b 100%); }
.tr-demo-b { background: linear-gradient(135deg, #6b4a24 0%, #2b6b3f 100%); }
.tr-demo-face .tr-demo-sub { font-size: 14px; font-weight: normal; opacity: 0.75; letter-spacing: 1px; }
.tr-demo-face .tr-demo-box {
    width: 62%; height: 74px; border-radius: 8px;
    background: rgba(10,10,30,0.75); border: 1px solid rgba(160,190,255,0.35);
}

/* ── 設定欄位 ── */
.tr-field .tr-note { font-size: 11px; color: #c9a227; margin-top: 6px; display: none; }
.tr-params { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.tr-p { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #9ab; white-space: nowrap; }
.tr-p select { width: auto; min-width: 92px; }
.tr-p input[type="color"] { width: 40px; height: 24px; padding: 2px; }
.tr-hint { font-size: 11px; color: #888; margin: 6px 0 10px; line-height: 1.5; }

/* ── 效果總覽視窗 ── */
.res-popup.tr-gal-popup { max-width: min(1000px, 95vw); min-width: 0; width: min(1000px, 95vw); }
.tr-gal { display: flex; gap: 16px; align-items: flex-start; }
.tr-gal-left { flex: 1 1 auto; min-width: 0; }
.tr-gal-right { flex: 0 0 220px; width: 220px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.tr-gal-group { font-size: 11px; color: #9ab; font-weight: bold; margin: 10px 0 4px; }
.tr-gal-group:first-child { margin-top: 0; }
.tr-gal-item {
    display: block; width: 100%; text-align: left; margin-bottom: 4px;
    padding: 6px 10px; font-size: 12px; cursor: pointer;
    background: #1e1e2f; border: 1px solid #3a3a4a; color: #ddd; border-radius: 4px;
}
.tr-gal-item:hover { background: #2a2a44; border-color: #6a9eff; }
.tr-gal-item.tr-gal-active { background: #2c3f66; border-color: #6a9eff; color: #fff; }
.tr-p-thumb { width: 34px; height: 22px; object-fit: cover; border: 1px solid #4a4a5a; border-radius: 3px; }
.tr-p-name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ccc; }

/* 嵌在既有面板裡的轉場區塊（主選單按鈕／節點面板／框面板…） */
.tr-sec { border: 1px solid #3a3a4a; border-radius: 6px; margin-top: 6px; background: #16161f; }
.tr-sec > summary { padding: 6px 10px; cursor: pointer; font-size: 12px; color: #cfe2ff; user-select: none; }
.tr-sec[open] > summary { border-bottom: 1px solid #3a3a4a; }
.tr-sec > .tr-field { margin: 8px 10px 10px; }
.tr-sec-tip { font-size: 11px; color: #888; margin-left: 8px; }