/* ════ 暗黑金奢華 · 三區共用主題（純 CSS、附加式美化，不動版面結構）════
   /customer /app /boss 都引入這支，視覺統一成同一個品牌風格。 */

:root{
  --lux-gold:#e8c547; --lux-gold-hi:#f6e08a; --lux-gold-lo:#c9a832;
  --lux-gold-soft:rgba(232,197,71,.16);
  --lux-ink:#0b0b0f; --lux-surface:#16161d; --lux-border:rgba(232,197,71,.16);
}

/* 深黑底 + 細緻金色光暈（固定背景，捲動不跑）*/
body{
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(232,197,71,.07), transparent 60%),
    radial-gradient(820px 460px at -12% 112%, rgba(232,197,71,.05), transparent 55%),
    #0b0b0f !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
}

/* 卡片：玻璃感 + 金色細邊 + 柔和陰影 + 頂端金線 */
.card{
  background: linear-gradient(180deg, rgba(28,28,37,.94), rgba(17,17,23,.94)) !important;
  border: 1px solid var(--lux-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04) !important;
  position: relative;
}

/* 金色主按鈕：漸層金 + 微光 */
.btn-yellow, .btn-primary, button.btn-primary, .cup-type-btn.sel{
  background: linear-gradient(135deg, var(--lux-gold-hi), var(--lux-gold) 45%, var(--lux-gold-lo)) !important;
  color:#1a1400 !important; border:none !important;
  box-shadow: 0 4px 16px rgba(232,197,71,.30) !important;
  font-weight: 800 !important;
  transition: filter .15s, transform .08s, box-shadow .15s;
}
.btn-yellow:hover, .btn-primary:hover{ filter: brightness(1.08); box-shadow:0 6px 22px rgba(232,197,71,.42) !important; }
.btn-yellow:active, .btn-primary:active{ transform: translateY(1px); }

/* 次要小按鈕：暗金描邊 */
.btn-sm{
  border:1px solid rgba(232,197,71,.24) !important;
  background: rgba(232,197,71,.05) !important;
  transition: background .15s, border-color .15s;
}
.btn-sm:hover{ background: rgba(232,197,71,.12) !important; border-color: rgba(232,197,71,.45) !important; }

/* 標題質感 */
.card-title, h1, h2{ letter-spacing:.02em; }

/* 輸入框：聚焦時金色光圈 */
input:focus, select:focus, textarea:focus, .txt-input:focus{
  outline:none !important;
  border-color: rgba(232,197,71,.55) !important;
  box-shadow: 0 0 0 3px rgba(232,197,71,.14) !important;
}

/* ── 🎮 養成小人/寵物 會動的動畫 ── */
@keyframes avatarBob   { 0%,100%{ transform:translateY(0) rotate(-1.5deg); } 50%{ transform:translateY(-8px) rotate(1.5deg); } }
@keyframes avatarTwinkle{ 0%,100%{ transform:scale(1);   opacity:.8; } 50%{ transform:scale(1.3); opacity:1; } }
@keyframes avatarSway  { 0%,100%{ transform:rotate(-8deg); } 50%{ transform:rotate(8deg); } }
@keyframes hatTilt     { 0%,100%{ transform:translateX(-50%) rotate(-6deg); } 50%{ transform:translateX(-50%) rotate(6deg); } }
@keyframes petFloat    { 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-5px) rotate(2deg); } }
@keyframes auraPulse   { 0%,100%{ opacity:.35; transform:scale(1); } 50%{ opacity:.7; transform:scale(1.08); } }
.av-bob{ animation:avatarBob 2.2s ease-in-out infinite; }
.av-twinkle{ animation:avatarTwinkle 1.3s ease-in-out infinite; }
.av-sway{ animation:avatarSway 2.6s ease-in-out infinite; transform-origin:center bottom; }
.av-hat{ animation:hatTilt 3s ease-in-out infinite; transform-origin:center bottom; }
.pet-float{ animation:petFloat 2.4s ease-in-out infinite; }
@keyframes petJump { 0%{transform:translateY(0) scale(1);} 30%{transform:translateY(-18px) scale(1.12);} 55%{transform:translateY(0) scale(.95);} 75%{transform:translateY(-6px) scale(1.04);} 100%{transform:translateY(0) scale(1);} }
.pet-react{ animation:petJump .6s ease-out !important; }
@keyframes heartFloat { 0%{ transform:translateY(0) scale(.5); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateY(-62px) scale(1.2); opacity:0; } }
/* 🎰 抽卡炫泡動畫 */
@keyframes gachaShake { 0%,100%{ transform:rotate(-8deg);} 25%{ transform:rotate(9deg) scale(1.06);} 50%{ transform:rotate(-11deg);} 75%{ transform:rotate(11deg);} }
.gacha-shake{ animation:gachaShake .5s ease-in-out infinite; display:inline-block; }
@keyframes gachaFlash { 0%{ opacity:0; transform:scale(.4);} 40%{ opacity:1; transform:scale(1.3);} 100%{ opacity:0; transform:scale(2.2);} }
@keyframes cardPop { 0%{ opacity:0; transform:scale(.4) rotate(-12deg);} 70%{ transform:scale(1.08) rotate(3deg);} 100%{ opacity:1; transform:scale(1) rotate(0);} }
.card-pop{ animation:cardPop .5s cubic-bezier(.2,1.2,.3,1) both; }
/* ✨ 超稀有炫彩光環＋星芒 */
@keyframes rainbowSpin { to { transform: rotate(360deg); } }
.rainbow-aura{ position:absolute; inset:-45%; border-radius:50%; z-index:0;
  background:conic-gradient(#ff4d4d,#ffb24d,#ffe24d,#4dff88,#4dd2ff,#7a5af0,#ff4ddb,#ff4d4d);
  filter:blur(34px); opacity:.6; animation:rainbowSpin 3s linear infinite; pointer-events:none; }
@keyframes sparkUp { 0%{ transform:translateY(0) scale(.4); opacity:0; } 18%{ opacity:1; } 100%{ transform:translateY(-130px) scale(1.4); opacity:0; } }
/* 🎴 一張一張開卡：閃亮登場 + 像素小寵物持續呼吸 */
@keyframes cardReveal { 0%{ opacity:0; transform:scale(.55) rotateY(70deg); } 55%{ opacity:1; transform:scale(1.07) rotateY(-8deg); } 100%{ opacity:1; transform:scale(1) rotateY(0); } }
.card-reveal{ animation:cardReveal .55s cubic-bezier(.2,1.1,.3,1) both; }
@keyframes breathe { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.13); } }
.pet-breathe{ animation:breathe 1.8s ease-in-out infinite; transform-origin:center bottom; }
@media (prefers-reduced-motion: reduce){ .rainbow-aura,.card-reveal,.pet-breathe{ animation:none; } }
/* 🏠 個人空間：寵物在裡面漫步＋呼吸＋睡覺 */
@keyframes petWander { 0%{ transform:translateX(0) scaleX(1);} 24%{ transform:translateX(34px) scaleX(1);} 25%{ transform:translateX(34px) scaleX(-1);} 49%{ transform:translateX(-30px) scaleX(-1);} 50%{ transform:translateX(-30px) scaleX(1);} 74%{ transform:translateX(22px) scaleX(1);} 75%{ transform:translateX(22px) scaleX(-1);} 100%{ transform:translateX(0) scaleX(-1);} }
.sp-wander{ animation:petWander 9s linear infinite; }
@keyframes spBreathe { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }
.sp-breathe{ animation:spBreathe 2.4s ease-in-out infinite; transform-origin:center bottom; }
@keyframes spSleep { 0%,100%{ transform:scale(1) rotate(0);} 50%{ transform:scale(1.05) rotate(-3deg);} }
.sp-sleep{ animation:spSleep 3.6s ease-in-out infinite; opacity:.82; }
@keyframes zzFloat { 0%{ transform:translateY(0) scale(.7); opacity:0;} 25%{ opacity:.9;} 100%{ transform:translateY(-34px) scale(1.2); opacity:0;} }
/* 開心彈跳 */
@keyframes spHop { 0%,100%{ transform:translateY(0);} 30%{ transform:translateY(-13px);} 45%{ transform:translateY(0);} 62%{ transform:translateY(-6px);} 78%{ transform:translateY(0);} }
.sp-hop{ animation:spHop 1.7s ease-in-out infinite; }
/* 走路擺擺（像企鵝走路，左右晃+上下顛） */
@keyframes spWaddle { 0%,100%{ transform:translateY(0) rotate(-4.5deg);} 25%{ transform:translateY(-3px) rotate(0deg);} 50%{ transform:translateY(0) rotate(4.5deg);} 75%{ transform:translateY(-3px) rotate(0deg);} }
.sp-waddle{ animation:spWaddle .9s ease-in-out infinite; transform-origin:center bottom; }
/* 開心冒音符/愛心，慢慢飄上來 */
@keyframes spEmote { 0%,70%{ opacity:0; transform:translateY(0) scale(.6);} 80%{ opacity:1;} 100%{ opacity:0; transform:translateY(-22px) scale(1.1);} }
.sp-emote{ animation:spEmote 5s ease-in-out infinite; }
/* 🕊️ 會飛的寵物：在空中上下盤旋飛舞（往上飛、來回轉向） */
@keyframes spFly { 0%{ transform:translate(0,0) scaleX(1);} 16%{ transform:translate(36px,-38px) scaleX(1);} 30%{ transform:translate(66px,-16px) scaleX(-1);} 48%{ transform:translate(20px,-66px) scaleX(-1);} 64%{ transform:translate(-36px,-28px) scaleX(-1);} 80%{ transform:translate(-18px,-58px) scaleX(1);} 100%{ transform:translate(0,0) scaleX(1);} }
.sp-fly{ animation:spFly 10s ease-in-out infinite; }
/* 翅膀拍動（會飛的內層輕微上下，增加飛行感） */
@keyframes spFlap { 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-5px) scale(1.04);} }
.sp-flap{ animation:spFlap .5s ease-in-out infinite; }
/* 地上寵物的影子：增加立體感、不像紙片；隨呼吸縮放 */
.sp-shadow{ position:absolute; left:50%; bottom:-6px; width:48px; height:10px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.4),transparent 72%); animation:spShadow 2.2s ease-in-out infinite; z-index:0; pointer-events:none; }
@keyframes spShadow { 0%,100%{ transform:translateX(-50%) scale(1); opacity:.5;} 50%{ transform:translateX(-50%) scale(.82); opacity:.33;} }
/* 🧬 融合演出：發光顫動→升空縮小→白光爆閃→進化型炫彩登場 */
@keyframes fuseGlow { 0%,100%{ filter:brightness(1) drop-shadow(0 0 2px #e8c547); transform:scale(1) rotate(-3deg);} 50%{ filter:brightness(1.6) drop-shadow(0 0 26px #ffe88a); transform:scale(1.14) rotate(3deg);} }
.fuse-glow{ animation:fuseGlow .6s ease-in-out infinite; }
@keyframes fuseRise { 0%{ transform:translateY(0) scale(1) rotate(0); opacity:1;} 55%{ transform:translateY(-26px) scale(1.25) rotate(10deg); opacity:1;} 100%{ transform:translateY(-54px) scale(.15) rotate(50deg); opacity:0;} }
.fuse-rise{ animation:fuseRise .8s cubic-bezier(.5,0,.9,.4) forwards; }
@keyframes fuseFlash { 0%{ opacity:0; transform:scale(.3);} 45%{ opacity:1; transform:scale(1.5);} 100%{ opacity:0; transform:scale(2.6);} }
@keyframes fuseRing { 0%{ opacity:.9; transform:scale(.2);} 100%{ opacity:0; transform:scale(2.4);} }
.fuse-ring{ position:absolute; inset:0; margin:auto; width:160px; height:160px; border-radius:50%; border:3px solid #ffe88a; animation:fuseRing .7s ease-out forwards; pointer-events:none; }
/* 🎆 高星抽中：全螢幕史詩演出（噴火/飛天/能量爆發） */
@keyframes epicShake { 0%,100%{transform:translate(0,0);} 20%{transform:translate(-7px,5px);} 40%{transform:translate(8px,-6px);} 60%{transform:translate(-6px,-5px);} 80%{transform:translate(6px,6px);} }
.epic-shake{ animation:epicShake .5s ease-in-out 3; }
@keyframes epicFlame { 0%{transform:translateY(35vh) scale(1.2);opacity:0;} 25%{opacity:.95;} 100%{transform:translateY(-15vh) scale(2.3);opacity:0;} }
.epic-flame{ animation:epicFlame 1.8s ease-out infinite; }
@keyframes epicFly { 0%{transform:translate(-65vw,55vh) scale(.45) rotate(-14deg);opacity:0;} 18%{opacity:1;} 82%{opacity:1;} 100%{transform:translate(65vw,-52vh) scale(1.25) rotate(10deg);opacity:0;} }
.epic-fly{ animation:epicFly 2.2s ease-in-out; }
@keyframes epicPulse2 { 0%{transform:translate(-50%,-50%) scale(.25);opacity:0;} 35%{opacity:1;} 65%{transform:translate(-50%,-50%) scale(1.18);} 100%{transform:translate(-50%,-50%) scale(1);opacity:1;} }
.epic-pulse{ animation:epicPulse2 1.2s ease-out; }
@keyframes epicTextPop { 0%{opacity:0;transform:translateX(-50%) scale(.4);} 50%{opacity:1;transform:translateX(-50%) scale(1.15);} 100%{opacity:1;transform:translateX(-50%) scale(1);} }
.epic-text{ animation:epicTextPop 1s ease-out; }
@media (prefers-reduced-motion: reduce){ .epic-shake,.epic-flame,.epic-fly,.epic-pulse,.epic-text{ animation:none!important; } }
@media (prefers-reduced-motion: reduce){ .sp-wander,.sp-breathe,.sp-sleep,.sp-hop,.sp-waddle,.sp-emote,.sp-fly,.sp-flap,.sp-shadow,.fuse-glow,.fuse-rise{ animation:none; } }
@media (prefers-reduced-motion: reduce){ .av-bob,.av-twinkle,.av-sway,.av-hat,.pet-float,.pet-react{ animation:none; } }

/* 金色捲軸 */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background: linear-gradient(#3a3320,#2a2a35); border-radius:6px; }
*::-webkit-scrollbar-thumb:hover{ background:#4a4020; }
::selection{ background: rgba(232,197,71,.32); color:#fff; }