:root{--color-primary: #F5A623;--color-primary-light: #FFCC66;--color-primary-dark: #D4891A;--color-primary-surface: #FFF8E7;--color-bg: #FAF5EB;--color-bg-surface: #FFFFFF;--color-bg-card: #FFFFFF;--color-bg-card-variant: #F2EDE3;--color-text: #3D2E1E;--color-text-secondary: #7A6B5D;--color-text-muted: #AA9E92;--color-text-inverse: #FFFFFF;--color-text-on-primary: #FFFFFF;--color-border: #E8D5B8;--color-accent: #E8734A;--color-accent-light: #FFF0EB;--color-success: #5CB85C;--color-success-light: #EAF6EA;--color-warning: #F0AD4E;--color-warning-light: #FFF7E6;--color-error: #D9534F;--color-error-light: #FDECEB;--color-info: #5BC0DE;--color-info-light: #E8F7FC;--shadow-sm: 0 1px 3px rgba(61, 46, 30, .08);--shadow-md: 0 4px 12px rgba(61, 46, 30, .1);--shadow-lg: 0 8px 24px rgba(61, 46, 30, .14);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-xxl: 32px;--space-3xl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 999px;--font-xs: 12px;--font-sm: 14px;--font-md: 16px;--font-lg: 20px;--font-xl: 24px;--font-xxl: 32px;--font-display: 48px;--font-hero: 80px;--font-mega: 120px;--anim-micro: .12s;--anim-fast: .25s;--anim-normal: .4s;--anim-dramatic: .8s;--anim-ceremony: 1.2s;--transition-theme: background-color .8s cubic-bezier(.65, 0, .35, 1), color .8s cubic-bezier(.65, 0, .35, 1), border-color .8s cubic-bezier(.65, 0, .35, 1), box-shadow .8s cubic-bezier(.65, 0, .35, 1)}[data-phase=night]{--color-primary: #6B7FBF;--color-primary-light: #8E9FD6;--color-primary-dark: #4A5A8F;--color-primary-surface: #1E2340;--color-bg: #141829;--color-bg-surface: #1E2340;--color-bg-card: #1E2340;--color-bg-card-variant: #262D4A;--color-text: #E8E6F0;--color-text-secondary: #A0A0B8;--color-text-muted: #6B6B82;--color-text-inverse: #141829;--color-text-on-primary: #FFFFFF;--color-border: #3A3F5C;--color-accent: #E8D44D;--color-accent-light: rgba(232, 212, 77, .2);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--color-night-gold: #E8D44D;--color-night-gold-dim: rgba(232, 212, 77, .3);--color-candle-glow: #FF9F43}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:Noto Sans TC,-apple-system,BlinkMacSystemFont,PingFang TC,Microsoft JhengHei,sans-serif;background-color:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh;min-height:100dvh;overflow-x:hidden;transition:var(--transition-theme)}#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}a{color:var(--color-primary);text-decoration:none}button{cursor:pointer;border:none;outline:none;font-family:inherit;font-size:inherit;background:none;color:inherit;-webkit-tap-highlight-color:transparent}input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--color-border);border-radius:var(--radius-full);outline:none}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--radius-full)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:3px solid var(--color-bg-surface);box-shadow:0 2px 6px #00000026;margin-top:-9px}input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:3px solid var(--color-bg-surface);box-shadow:0 2px 6px #00000026}input[type=range]::-moz-range-track{height:6px;background:var(--color-border);border-radius:var(--radius-full)}.page{flex:1;display:flex;flex-direction:column;padding:var(--space-lg);padding-top:calc(var(--space-lg) + env(safe-area-inset-top,0px));padding-bottom:calc(var(--space-lg) + env(safe-area-inset-bottom,0px));transition:var(--transition-theme);max-width:600px;margin:0 auto;width:100%}.page-title{font-size:var(--font-xl);font-weight:700;margin-bottom:var(--space-xl);color:var(--color-text)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-md) var(--space-xl);border-radius:var(--radius-md);font-weight:600;font-size:var(--font-md);transition:all var(--anim-micro) ease;min-height:48px;gap:var(--space-sm)}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary) 50%,var(--color-primary-dark) 100%);color:var(--color-text-on-primary);box-shadow:0 4px 12px #f5a6234d}.btn-primary:active{box-shadow:0 2px 6px #f5a62333}.btn-outline{border:2px solid var(--color-primary);color:var(--color-primary);background:transparent}.btn-outline:active{background:var(--color-primary-surface)}.btn-lg{padding:var(--space-lg) var(--space-xxl);font-size:var(--font-lg);border-radius:var(--radius-full);min-height:56px;font-weight:700}.btn-block{display:flex;width:100%}.btn-icon{width:48px;height:48px;padding:0;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}.btn-icon-lg{width:64px;height:64px;font-size:var(--font-xl)}.card{background:var(--color-bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);border:1px solid var(--color-border);transition:var(--transition-theme)}.text-muted{color:var(--color-text-muted)}.text-secondary{color:var(--color-text-secondary)}.text-center{text-align:center}.font-mono{font-family:Space Grotesk,monospace}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.flex-col{display:flex;flex-direction:column}button:disabled{opacity:.35;pointer-events:none}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.page-enter-active,.page-leave-active{transition:opacity .3s ease,transform .3s ease}.page-enter-from{opacity:0;transform:translate(20px)}.page-leave-to{opacity:0;transform:translate(-20px)}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}.scale-enter-active,.scale-leave-active{transition:opacity .3s ease,transform .3s ease}.scale-enter-from,.scale-leave-to{opacity:0;transform:scale(.9)}.slide-up-enter-active,.slide-up-leave-active{transition:opacity .3s ease,transform .3s ease}.slide-up-enter-from{opacity:0;transform:translateY(30px)}.slide-up-leave-to{opacity:0;transform:translateY(-30px)}.phase-switch-enter-active{transition:opacity .8s cubic-bezier(.65,0,.35,1)}.phase-switch-leave-active{transition:opacity .6s ease}.phase-switch-enter-from,.phase-switch-leave-to{opacity:0}@keyframes dice-pop{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.dice-pop{animation:dice-pop .4s cubic-bezier(.175,.885,.32,1.275) both}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.pulse{animation:pulse 2s ease-in-out infinite}@keyframes progress-glow{0%,to{box-shadow:0 0 8px var(--color-primary)}50%{box-shadow:0 0 16px var(--color-primary)}}.progress-glow{animation:progress-glow 2s ease-in-out infinite}@keyframes urgency-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.urgency{animation:urgency-shake .2s ease-in-out infinite;color:var(--color-error)}@keyframes glow-ring{0%,to{box-shadow:0 0 30px #e8d44d4d,0 0 60px #e8d44d26}50%{box-shadow:0 0 40px #e8d44d80,0 0 80px #e8d44d40}}.glow-ring{animation:glow-ring 3s ease-in-out infinite}@keyframes star-twinkle{0%,to{opacity:.3}50%{opacity:1}}.star-twinkle{animation:star-twinkle 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.float{animation:float 3s ease-in-out infinite}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin-slow{animation:spin-slow 20s linear infinite}