/* 寶藏挖掘（js/treasure.js；伺服器第 210 項）：羊皮紙木框盤面、泥土格、咪牌掀開、大寶藏光芒 */
#treasure .bd { gap: 10px; padding: 10px; }
#treasure .tr-top { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(226,189,107,.8); border-radius: 10px;
  background: radial-gradient(ellipse 80% 140% at 0 0, rgba(226,189,107,.22), transparent 60%), linear-gradient(180deg, #2e2414, #140f08); box-shadow: inset 0 1px 0 rgba(255,230,160,.25), 0 2px 8px rgba(0,0,0,.6); }
#treasure .tr-map { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #c9a463; border-radius: 8px; background: radial-gradient(circle, rgba(255,214,120,.35), #1a120a 70%); }
#treasure .tr-map img { width: 34px; image-rendering: pixelated; }
#treasure .tr-tt { flex: 1; min-width: 0; }
#treasure .tr-tt b { display: block; color: #f6dc8c; font-size: 17px; letter-spacing: .1em; text-shadow: 0 1px 2px #000; }
#treasure .tr-tt small { color: #a8997a; font-size: 11px; }
#treasure .tr-chip { display: flex; flex-direction: column; align-items: center; min-width: 50px; padding: 3px 6px; border: 1px solid rgba(201,164,99,.55); border-radius: 8px; background: rgba(0,0,0,.35); }
#treasure .tr-chip em { font-style: normal; color: #a8997a; font-size: 11px; }
#treasure .tr-chip b { color: #f2d77f; font-size: 15px; }
#treasure .tr-board { position: relative; padding: 12px; border-radius: 12px;
  background: radial-gradient(circle at 30% 20%, rgba(255,240,200,.25), transparent 40%), radial-gradient(circle at 70% 80%, rgba(120,80,30,.35), transparent 50%), linear-gradient(135deg, #d9bf8a, #b8965c 55%, #a07c45);
  border: 3px solid #5a3d1c; box-shadow: inset 0 0 0 2px #c9a463, inset 0 0 30px rgba(80,50,15,.6), 0 4px 14px rgba(0,0,0,.7); }
#treasure .tr-board::before { content: ""; position: absolute; inset: 6px; border: 1px dashed rgba(90,60,25,.55); border-radius: 8px; pointer-events: none; }
#treasure .tr-grid { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
#treasure .tr-c { position: relative; aspect-ratio: 1; border-radius: 8px; }
#treasure .tr-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 8px;
  background: radial-gradient(circle, #3a2a14, #1c140a 75%); box-shadow: inset 0 0 0 2px var(--r, #7a6040), inset 0 0 12px rgba(0,0,0,.8); }
#treasure .tr-in img { max-width: 58%; max-height: 50%; image-rendering: pixelated; filter: drop-shadow(0 0 4px var(--rg, transparent)); }
#treasure .tr-in s { text-decoration: none; font-size: 10px; font-weight: 700; color: var(--r, #e8dcc0); text-shadow: 0 1px 1px #000; white-space: nowrap; }
#treasure .r1 { --r: #b9ad98; } #treasure .r2 { --r: #8fd18b; --rg: rgba(143,209,139,.6); } #treasure .r3 { --r: #6fb6ff; --rg: rgba(111,182,255,.8); } #treasure .r4 { --r: #e08bff; --rg: rgba(224,139,255,.9); } #treasure .r5 { --r: #ffd64a; --rg: rgba(255,214,74,1); }
#treasure .tr-cv { position: absolute; inset: 0; border-radius: 8px; display: grid; place-items: center;
  background: radial-gradient(circle at 20% 70%, rgba(40,25,10,.5) 0 2px, transparent 3px), radial-gradient(circle at 70% 25%, rgba(40,25,10,.45) 0 1.5px, transparent 2.5px), radial-gradient(circle at 60% 75%, rgba(255,230,180,.25) 0 1.5px, transparent 2.5px), radial-gradient(circle at 35% 30%, #8a6a3a, #5c4220 70%);
  box-shadow: inset 0 2px 0 rgba(255,230,170,.35), inset 0 -3px 4px rgba(0,0,0,.5); }
#treasure .tr-cv i { width: 38%; height: 38%; opacity: .5; border-radius: 50%; background: radial-gradient(circle, rgba(255,230,160,.6), transparent 70%); }
#treasure .tr-c.sel .tr-cv { box-shadow: 0 0 0 2px #fff1c4, 0 0 14px rgba(255,214,120,.9), inset 0 2px 0 rgba(255,230,170,.35); }
#treasure .tr-c.near:not(.sel) .tr-cv { box-shadow: 0 0 10px 2px rgba(255,214,120,.65), inset 0 2px 0 rgba(255,230,170,.35); }
/* 咪牌：先抖，再從右下角慢慢掀開，縫裡透出稀有度的光 */
#treasure .tr-c.peel .tr-cv { animation: trShake .45s ease-in-out, trPeel 1.6s .45s cubic-bezier(.55,0,.35,1) forwards; }
#treasure .tr-c.peel::after { content: ""; position: absolute; inset: -2px; border-radius: 9px; pointer-events: none; animation: trLeak 1.6s .45s ease-in forwards; }
@keyframes trShake { 20% { transform: translate(-2px, 1px) rotate(-2deg); } 40% { transform: translate(2px, -1px) rotate(2deg); } 60% { transform: translate(-1px, 1px) rotate(-1deg); } 80% { transform: translate(1px, 0) rotate(1deg); } }
@keyframes trPeel { 0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%); } 55% { clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%); } 80% { clip-path: polygon(0 0, 100% 0, 100% 35%, 35% 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0); } }
@keyframes trLeak { 0% { box-shadow: 0 0 0 0 var(--rg); } 70% { box-shadow: 0 0 18px 5px var(--rg); } 100% { box-shadow: 0 0 6px 1px var(--rg); } }
#treasure .tr-hint { text-align: center; color: #ffd27a; font-size: 13px; font-weight: 700; text-shadow: 0 0 8px rgba(255,180,60,.6); }
#treasure .tr-bag { padding: 8px 10px; border: 1px solid rgba(201,164,99,.45); border-radius: 10px; background: linear-gradient(180deg, rgba(30,24,16,.95), rgba(14,11,8,.95)); }
#treasure .tr-bag > em { display: block; font-style: normal; color: #a8997a; font-size: 12px; margin-bottom: 6px; }
#treasure .tr-bag div { display: flex; flex-wrap: wrap; gap: 6px; }
#treasure .tr-bag span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border: 1px solid var(--r); border-radius: 12px; background: rgba(0,0,0,.4); color: var(--r); font-size: 12px; }
#treasure .tr-bag img { width: 20px; height: 20px; image-rendering: pixelated; }
#treasure .tr-btns { display: flex; gap: 8px; }
#treasure .tr-btns button { flex: 1; padding: 9px 6px; border-radius: 8px; font-weight: 700; font-size: 15px; letter-spacing: .1em; }
#treasure .tr-stop { border: 1px solid #6b5636; background: linear-gradient(#2a2117, #17110b); color: #d8c8a2; }
#treasure .tr-go { border: 1px solid #e2bd6b; background: linear-gradient(#d8ae54, #8a6424); color: #1c1306; box-shadow: 0 0 10px rgba(226,189,107,.4); }
#treasure .tr-go[disabled] { filter: grayscale(.6) brightness(.7); }
#treasure .tr-go small { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0; }
#treasure .tr-jack { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle, rgba(60,40,10,.78), rgba(10,6,2,.93)); z-index: 3; }
#treasure .tr-jack::before { content: ""; position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; background: repeating-conic-gradient(from 0deg, rgba(255,214,120,.5) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000, transparent 65%); mask: radial-gradient(circle, #000, transparent 65%); animation: trSpin 12s linear infinite; }
@keyframes trSpin { to { transform: rotate(360deg); } }
#treasure .tr-jack .ic { position: relative; width: 84px; height: 84px; display: grid; place-items: center; border: 2px solid #ffd64a; border-radius: 14px; background: radial-gradient(circle, rgba(255,230,140,.5), #2a1c08 70%); box-shadow: 0 0 24px rgba(255,214,74,.9); }
#treasure .tr-jack .ic img { width: 56px; image-rendering: pixelated; }
#treasure .tr-jack b { position: relative; color: #fff1c4; font-size: 26px; letter-spacing: .15em; text-shadow: 0 0 12px rgba(255,200,90,1), 0 2px 0 #000; }
#treasure .tr-jack span { position: relative; color: #ffd64a; font-size: 17px; font-weight: 700; text-shadow: 0 1px 2px #000; }
#treasure .tr-jack small { position: relative; color: #c9b98f; font-size: 12px; }
#treasure .tr-c[data-cell] { cursor: pointer; }
#treasure .tr-none { padding: 30px 0; text-align: center; color: #a8997a; }
#treasure .tr-empty { min-height: 240px; display: grid; place-items: center; }
#treasure .tr-intro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #3a2208; }
#treasure .tr-intro img { width: 64px; image-rendering: pixelated; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
#treasure .tr-intro b { font-size: 17px; letter-spacing: .1em; }
#treasure .tr-intro small { font-size: 13px; color: #5a3d1c; }
#treasure .tr-jack { cursor: pointer; }
#treasure .tr-go[disabled], #treasure .tr-stop[disabled] { filter: grayscale(.6) brightness(.7); cursor: not-allowed; }
#treasure .tr-btns button { cursor: pointer; font-family: inherit; }
@media (prefers-reduced-motion: reduce) { #treasure .tr-c.peel .tr-cv { animation: none; display: none; } #treasure .tr-jack::before { animation: none; } }

/* 遊樂場（hud.js openFun）：小遊戲卡片，同圖鑑卡的金框暗底 */
#lmui-fun .bd { gap: 10px; }
#lmui-fun .fun-g { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid rgba(214,170,80,.75); border-radius: 8px; overflow: hidden; text-align: left; font: inherit; color: #e8dcc0; cursor: pointer;
  background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(214,170,80,.18), transparent 70%), linear-gradient(180deg, rgba(48,38,22,.96), rgba(18,13,8,.96)); box-shadow: inset 0 1px 0 rgba(255,230,160,.25), 0 2px 8px rgba(0,0,0,.55); }
#lmui-fun .fun-g:hover { border-color: #f2d77f; filter: brightness(1.08); }
#lmui-fun .fun-g::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(100deg, rgba(255,240,200,0), rgba(255,255,255,.4) 50%, rgba(255,240,200,0)); animation: funSheen 4s ease-in-out infinite; }
@keyframes funSheen { 0% { left: -40%; } 35%, 100% { left: 120%; } }
#lmui-fun .fun-ic { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(214,170,80,.8); border-radius: 6px; background: radial-gradient(circle, rgba(255,214,120,.28), rgba(30,22,12,.95) 70%); }
#lmui-fun .fun-ic img { max-width: 42px; max-height: 42px; image-rendering: pixelated; }
#lmui-fun .fun-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#lmui-fun .fun-tx b { color: #f6dc8c; font-size: 16px; letter-spacing: .12em; }
#lmui-fun .fun-tx small { color: #c9b98f; font-size: 12px; }
#lmui-fun .fun-g > i { font-style: normal; color: #f2d77f; font-size: 22px; }
@media (prefers-reduced-motion: reduce) { #lmui-fun .fun-g::after { animation: none; } }
#treasure .tr-bag > em { display: flex; align-items: center; }
#treasure .tr-spent { margin-left: auto; color: #f2d77f; font-size: 13px; }
#treasure .tr-nil { color: #7d7364; font-size: 12px; }