/* 基本重設 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #000;
}

/* 開始畫面 */
#start-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 999;
    display: flex; justify-content: center; align-items: center;
}
.start-card { background: white; padding: 30px; border-radius: 15px; text-align: center; max-width: 85%; }
#start-btn { background: #0070f3; color: white; border: none; padding: 12px 30px; font-size: 16px; border-radius: 25px; font-weight: bold; cursor: pointer;}

/* 相機 */
#camera-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
#video { width: 100%; height: 100%; object-fit: cover; }

/* UI 對話框 */
#ui-container {
    position: absolute;
    bottom: 25%; left: 50%; transform: translateX(-50%);
    width: 90%; z-index: 2;
    transition: opacity 0.5s;
}
#dialog-box { background: rgba(255, 255, 255, 0.9); border: 3px solid #333; border-radius: 15px; padding: 15px; }
#dialog-text { font-size: 16px; color: #333; line-weight: 1.4; font-weight: bold; }

/* 角色容器設定 */
#character-container {
    position: absolute;
    z-index: 3;
    transition: all 1s ease-in-out; /* 平滑位移動畫 */
}

/* 精靈圖本體（核心邏輯） */
#character-sprite {
    width: 320px;   /* 你的單格寬度 */
    height: 480px;  /* 你的單格高度 */
    background-size: 1024px 1024px; /* 整個畫布的原始總尺寸 */
    background-repeat: no-repeat;
    
    /* 手機螢幕通常較小，320x480 可能太滿，我們預設縮放成 0.6 倍，你可以自由調整 */
    transform: scale(0.65);
    transform-origin: center center;
}

/* 狀態控制 */
.hidden { display: none !important; }

/* 位置：前 3 秒置中 */
.position-center {
    top: 35%; left: 50%;
    transform: translate(-50%, -50%);
}

/* 位置：3 秒後移到右下角探頭 */
.position-edge {
    bottom: -60px; /* 微調讓它像從底部探頭 */
    right: -40px;
    transform: translate(0, 0);
}

/* 當手機橫放時的微調 */
@media (orientation: landscape) {
    #character-sprite { transform: scale(0.45); } /* 橫向時縮小點 */
    #ui-container { bottom: 8%; width: 50%; left: 35%; }
}