:root {
    --neon-gold: rgba(255,204,0,.55);
    --neon-green: #00ffcc;
    --neon-blue: #00d4ff;
    --neon-pink: #ff0077;
    --bg-color: #02060a;
    --panel-bg: rgba(7, 15, 25, 0.85);
    --danger-red: #ff3333;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body, html {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    background-color: var(--bg-color);
    color: white;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    overflow: hidden;
    touch-action: manipulation;
    user-select: none; /* 防止連點時選取到文字 */
}

/* 繪圖背景 */
#renderCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
}

/* 主介面佈局 */
#game-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    height: 100vh;
    width: 100vw;
    flex-direction: row;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;              /* iOS: 禁止長按選單 */
    -webkit-tap-highlight-color: transparent; /* 行動端點擊反白 */
}

/* 左側：核心顯示與大按鈕 */
#click-region {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: space-between; /* 上下分開 */
    align-items: center;
    pointer-events: none;
}

.stats-header {
    width: 100%;
    max-width: 400px;
    background: var(--panel-bg);
    padding: 15px;
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    backdrop-filter: blur(10px);
    text-align: center;
    pointer-events: auto;
    margin-top: 10px;
}

#potential-val {
    font-size: clamp(2.5em, 8vw, 4em);
    font-weight: 900;
    color: var(--neon-green);
    text-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
    margin: 5px 0;
}

.cps-info { font-size: 0.9em; color: var(--neon-blue); opacity: 0.8; }

#main-btn-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 讓按鈕稍微往下偏一點，視覺平衡 */
    padding-bottom: 50px;
}

#core-button {
    width: min(70vw, 350px);
    height: min(70vw, 350px);
    padding: 100px;
    border-radius: 50%;
    border: 6px solid var(--neon-green);
    background: radial-gradient(circle, rgba(0,255,204,0.15) 0%, rgba(0,0,0,0.5) 80%);
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.1s;
    box-shadow: 0 0 30px rgba(0,255,204,0.2);
    outline: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    touch-action: none;
}
#core-button:hover { transform: scale(1.03); }
#core-button:active { transform: scale(0.94); }

/* 右側：商店面板 */
#shop-region {
    width: 400px;
    background: var(--panel-bg);
    backdrop-filter: blur(15px);
    border-left: 1px solid rgba(255,255,255,0.1);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto; /* 內容過多時滾動 */
    overflow-x: hidden;
}

.shop-section-title {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--neon-blue);
    margin: 25px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0,212,255,0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* 第一個標題不用 margin-top */
.shop-section-title:first-child { margin-top: 0; }

.item-card {
    background: rgba(255,255,255,0.05);
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid transparent;
    transition: background 0.2s;
}

.item-card:hover { border-color: var(--neon-green); background: rgba(255,255,255,0.08); }
.item-card.purchased{ border-color: var(--neon-gold);background: rgba(255,204,0,.06); }

.item-info { flex: 1; padding-right: 10px; }
.item-info h4 { margin: 0; font-size: 1em; color: var(--neon-green); }
.item-info p { margin: 3px 0; font-size: 0.75em; opacity: 0.7; color: #ddd; }

.buy-btn {
    background: var(--neon-blue);
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.85em;
    cursor: pointer;
    min-width: 80px;
    color: #000;
    transition: all 0.2s;
}
.buy-btn:active { transform: scale(0.95); }
.buy-btn:disabled { background: #333; color: #666; cursor: not-allowed; opacity: 0.7; }

/* 系統按鈕樣式 */
.system-btns {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.sys-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.3);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}
.sys-btn:hover { background: rgba(255,255,255,0.1); }
.sys-btn.danger { border-color: var(--danger-red); color: var(--danger-red); }
.sys-btn.danger:hover { background: rgba(255, 51, 51, 0.2); }


/* RWD 適應：手機版 */
@media (max-width: 768px) {
    #game-wrapper { flex-direction: column; }
    #click-region { height: 55%; flex: none; padding: 10px; justify-content: flex-start;}
    #main-btn-wrap { padding-bottom: 0; align-items: center; } /* 手機版置中 */

    #shop-region {
        width: 100%;
        height: 45%;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.2);
        padding: 15px;
        background: rgba(7, 15, 25, 0.95); /* 手機版背景深一點 */
    }
    #potential-val { font-size: 3em; margin: 0; }
    #core-button { width: 160px; height: 160px; margin-top: 20px; }

    .stats-header { padding: 10px; margin-top: 5px; }
}

/* 特效數字 */
.float-val {
    position: fixed;
    pointer-events: none;
    color: var(--neon-green);
    font-weight: bold;
    font-size: 1.5em;
    animation: float-up 0.8s ease-out forwards;
    z-index: 100;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
}

@keyframes float-up {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-80px); opacity: 0; }
}

.float-val.crit {
    animation: critMove 0.8s ease-out forwards;
    z-index: 101;
    font-size: 2rem;
    color: #ffcc00;
}

@keyframes critMove {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    30% { transform: translate(-50%, -80%) scale(1.4); }
    100% { transform: translate(-50%, -150%) scale(1.2); opacity: 0; }
}

/* --- Toast 通知樣式 --- */
#toast-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    pointer-events: none; /* 讓點擊可以穿透 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.toast-msg {
    min-width: 250px;
    background: rgba(0, 20, 10, 0.95);
    border: 1px solid var(--neon-green);
    color: var(--neon-green);
    padding: 12px 20px;
    border-radius: 4px;
    font-family: 'Courier New', monospace; /* 終端機字體感 */
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.2);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-out;

    /* 裝飾：左邊加一個小色塊 */
    border-left: 4px solid var(--neon-green);
}

/* 顯示時的狀態 */
.toast-msg.show {
    opacity: 1;
    transform: translateY(0);
}

/* 警告類型的樣式 (例如重置失敗或錯誤) */
.toast-msg.warn {
    border-color: var(--neon-pink);
    border-left-color: var(--neon-pink);
    color: var(--neon-pink);
    background: rgba(20, 0, 5, 0.95);
    box-shadow: 0 0 15px rgba(255, 0, 119, 0.2);
}