:root {
    --deep-wood: #2d1303;
    --panel-brown: #3e1b04;
    --gold: #d4af37;
    --pearl: rgba(255, 255, 255, 0.9);
    --moss: #3a4d1a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: #2a1202; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; font-family: 'Georgia', serif; }

/* 米色波點 */
.random-dots {
    position: fixed; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(245, 245, 220, 0.07) 1.5px, transparent 1.5px), radial-gradient(rgba(245, 245, 220, 0.04) 1px, transparent 1px);
    background-size: 55px 55px, 90px 90px;
    background-position: 0 0, 25px 35px; z-index: -1;
}

.oracle-container { position: relative; display: flex; align-items: center; transition: 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045); }

/* 計算機主體 */
.calculator-frame {
    width: 380px; background: var(--panel-brown); padding: 50px 40px; border-radius: 30px;
    border: 3px solid #522608; box-shadow: 0 50px 100px rgba(0,0,0,0.8), inset 0 0 40px rgba(0,0,0,0.5);
    position: relative; z-index: 10; transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}

/* 檔案壓在計算機上的陰影 */
.drawer-open .calculator-frame { box-shadow: 15px 50px 100px rgba(0,0,0,0.9), inset 0 0 40px rgba(0,0,0,0.5); }


.vine { position: absolute; width: 50px; height: 50px; border: 1.2px solid rgba(212, 175, 55, 0.35); pointer-events: none; }
.tl { top: 20px; left: 20px; border-radius: 40% 0 40% 0; border-right: none; border-bottom: none; }
.tr { top: 20px; right: 20px; border-radius: 0 40% 0 40%; border-left: none; border-bottom: none; }
.bl { bottom: 20px; left: 20px; border-radius: 0 40% 0 40%; border-right: none; border-top: none; }
.br { bottom: 20px; right: 20px; border-radius: 40% 0 40% 0; border-left: none; border-top: none; }

/* 螢幕 */
.moss-display { background: var(--moss); padding: 18px; border-radius: 12px; box-shadow: inset 0 10px 30px rgba(0,0,0,0.8); text-align: right; margin-bottom: 30px; }
.moss-display .label { font-size: 0.7rem; color: var(--gold); letter-spacing: 5px; opacity: 0.5; display: block; }
.moss-display .value { font-size: 3rem; color: #b8cc99; font-family: 'Courier New', monospace; font-weight: bold; }

/* 輸入框 */
.input-field { margin-bottom: 20px; }
.input-field label { display: block; color: var(--gold); font-size: 0.75rem; margin-bottom: 6px; letter-spacing: 2px; }
.input-field input { width: 100%; background: rgba(0,0,0,0.4); border: 1px solid #522608; padding: 12px; color: white; border-radius: 8px; outline: none; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Liquid Glass 按鈕 */
.liquid-btn {
    width: 100%; padding: 18px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--gold); font-weight: bold; letter-spacing: 3px; border-radius: 12px; cursor: pointer;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: 0.4s;
}
.liquid-btn:hover { background: rgba(255,255,255,0.15); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2); }

/* 占卜文字區 (純淨去框) */
.oracle-vision { height: 100px; margin-top: 25px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.status-title { color: var(--gold); font-size: 1.1rem; font-weight: bold; margin-bottom: 8px; opacity: 0; transform: translateY(10px); transition: 1s; text-shadow: 0 0 10px rgba(212,175,55,0.3); }
.pearl-text { color: var(--pearl); font-size: 0.9rem; font-style: italic; opacity: 0; filter: blur(15px); transition: 2.5s cubic-bezier(0.19, 1, 0.22, 1); }
.reveal .status-title { opacity: 1; transform: translateY(0); }
.reveal .pearl-text { opacity: 1; filter: blur(0px); text-shadow: 0 0 8px white; }

/* 懸垂拉環 */
.pull-ring-handle { position: absolute; right: -28px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 15; }
.ring-cord { width: 18px; height: 3px; background: var(--gold); margin-left: 10px; }
.golden-ring {
    width: 38px; height: 38px; border: 4px solid var(--gold); border-radius: 50%;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5), inset 2px 2px 5px rgba(255,255,255,0.3);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pull-ring-handle:hover .golden-ring { animation: ring-sway 0.6s ease-in-out infinite alternate; }
.pull-ring-handle:active { transform: translateY(-50%) translateX(8px); }
@keyframes ring-sway { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

/* 羊皮紙直角抽屜 */
.parchment-drawer {
    position: absolute; right: 0; width: 320px; height: 90%; background: #e2c58a; z-index: 11;
    transform: translateX(0); transition: 0.8s cubic-bezier(0.7, 0, 0.3, 1);
    padding: 40px; color: #4b3621; box-shadow: -15px 0 45px rgba(0,0,0,0.6); overflow: hidden;
}
.parchment-texture {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/parchment.png');
    opacity: 0.4; pointer-events: none;
}
.drawer-open .parchment-drawer { transform: translateX(300px); }
.drawer-open .calculator-frame { transform: translateX(-120px); }

.drawer-inner h3 { border-bottom: 2px solid #4b3621; padding-bottom: 10px; font-size: 0.9rem; letter-spacing: 2px; }
.drawer-inner li { list-style: none; padding: 12px 0; font-size: 0.85rem; display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(75,54,33,0.2); }
.active-range { background: rgba(255,255,255,0.4); font-weight: bold; padding: 12px 8px !important; color: #800000; }