/* v382 載入畫面：跟視窗同一套主題（白紙、深藍框、粉藍紫斜色塊、網點、四角星、軌道環），
   讀取條改成分段式掃描條＋百分比跳字。吉祥物為繪師 PSD 原圖。放在 <head> 載入，避免一開頁先閃舊畫面。 */
@property --tt-ld{syntax:'<integer>';initial-value:0;inherits:false}
#loadscr{
  background:
    radial-gradient(circle,rgba(94,196,240,.45) 1.3px,transparent 1.7px) 0 0/10px 10px,
    linear-gradient(118deg,transparent 0 58%,rgba(111,208,245,.28) 58% 66%,rgba(255,255,255,.7) 66% 67.5%,rgba(255,150,190,.24) 67.5% 80%,rgba(180,156,255,.22) 80%),
    linear-gradient(118deg,rgba(255,170,205,.3) 0 14%,rgba(255,255,255,.7) 14% 15.5%,rgba(111,208,245,.22) 15.5% 24%,transparent 24%),
    #F7F8FF!important;
  color:#1C2156!important;gap:0!important;overflow:hidden}
#loadscr::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0C21.8 12.6 27.4 18.2 40 20 27.4 21.8 21.8 27.4 20 40 18.2 27.4 12.6 21.8 0 20 12.6 18.2 18.2 12.6 20 0Z' fill='%23FF4F8B'/%3E%3C/svg%3E") 22% 26%/30px 30px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0C21.8 12.6 27.4 18.2 40 20 27.4 21.8 21.8 27.4 20 40 18.2 27.4 12.6 21.8 0 20 12.6 18.2 18.2 12.6 20 0Z' fill='%233CB9EC'/%3E%3C/svg%3E") 78% 70%/34px 34px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0C21.8 12.6 27.4 18.2 40 20 27.4 21.8 21.8 27.4 20 40 18.2 27.4 12.6 21.8 0 20 12.6 18.2 18.2 12.6 20 0Z' fill='%23C46CF2'/%3E%3C/svg%3E") 70% 22%/18px 18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0C21.8 12.6 27.4 18.2 40 20 27.4 21.8 21.8 27.4 20 40 18.2 27.4 12.6 21.8 0 20 12.6 18.2 18.2 12.6 20 0Z' fill='%23FFA9C9'/%3E%3C/svg%3E") 30% 76%/20px 20px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='9' y='9' width='22' height='22' fill='none' stroke='%2337B6E3' stroke-width='2.4' transform='rotate(45 20 20)'/%3E%3C/svg%3E") 84% 34%/46px 46px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M22 3C23.6 15 29 20.4 41 22 29 23.6 23.6 29 22 41 20.4 29 15 23.6 3 22 15 20.4 20.4 15 22 3Z' fill='%23fff' stroke='%231C2156' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 14% 62%/40px 40px no-repeat;
  animation:ttLdTw 2.4s ease-in-out infinite}
@keyframes ttLdTw{0%,100%{opacity:1}50%{opacity:.5}}
#loadscr>*{position:relative;z-index:1}

/* 吉祥物卡：深藍框白紙＋網點，外圈軌道環 */
#loadscr .ldbrand{width:132px!important;height:132px!important;border-radius:26px!important;
  background:url('assets/theme/mascot-color.png') 50% 62%/112px auto no-repeat,radial-gradient(circle,rgba(255,141,181,.35) 1.2px,transparent 1.6px) 0 0/9px 9px,linear-gradient(160deg,#fff,#FFF1F8)!important;
  border:3px solid #1C2156;box-shadow:6px 7px 0 #FF8DB5,0 18px 40px rgba(28,33,86,.22)!important;
  animation:ldpop .6s cubic-bezier(.34,1.56,.64,1),ttLdBob 2.2s ease-in-out .6s infinite!important;overflow:visible}
#loadscr .ldbrand::before{content:"";position:absolute;left:50%;top:50%;width:250px;height:110px;margin:-55px 0 0 -125px;pointer-events:none;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 110'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23FF6FA3'/%3E%3Cstop offset='.55' stop-color='%23C08CFF'/%3E%3Cstop offset='1' stop-color='%236FD0F5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='125' cy='55' rx='118' ry='34' fill='none' stroke='url(%23g)' stroke-width='3.4'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:ttLdOrbit 6s linear infinite}
#loadscr .ldbrand::after{content:"";position:absolute;right:-14px;top:-14px;width:30px;height:30px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0C21.8 12.6 27.4 18.2 40 20 27.4 21.8 21.8 27.4 20 40 18.2 27.4 12.6 21.8 0 20 12.6 18.2 18.2 12.6 20 0Z' fill='%23FF4F8B'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:ttLdTw 1.6s ease-in-out infinite}
@keyframes ttLdBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ttLdOrbit{0%{transform:rotate(-16deg)}50%{transform:rotate(-8deg) scale(1.04)}100%{transform:rotate(-16deg)}}
#loadscr #ldmug{display:none!important}

/* 店名：斜白卡 */
#loadscr .ldname{margin-top:34px!important;padding:6px 26px 8px!important;font-size:28px!important;font-weight:900!important;letter-spacing:5px!important;color:#1C2156!important;text-shadow:none!important;
  background:linear-gradient(100deg,#fff 0 66%,#FFDCEA);border:3px solid #1C2156;transform:skewX(-10deg);box-shadow:5px 5px 0 #FF8DB5}
#loadscr .ldsub{margin-top:14px!important;font-size:12px!important;font-weight:900;letter-spacing:6px!important;color:#FF4F8B!important;text-transform:uppercase}
#loadscr .ldsub::after{content:" ／ LOADING " counter(ttld) "%";counter-reset:ttld var(--tt-ld);color:#8C70F0;animation:ttLdCount 2.3s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes ttLdCount{to{--tt-ld:100}}

/* 讀取條：深藍外框、分段刻度、粉→紫→藍填滿、斜紋流動、掃描光 */
#loadscr .ldbar{margin-top:12px!important;width:300px!important;height:20px!important;border-radius:999px!important;overflow:hidden;
  border:3px solid #1C2156;box-shadow:0 4px 0 rgba(28,33,86,.18)!important;
  background:repeating-linear-gradient(90deg,#fff 0 13px,#E7ECFB 13px 15px)!important}
#loadscr .ldbar i{position:relative!important;display:block!important;height:100%!important;width:100%!important;border-radius:0!important;transform-origin:0 50%;
  background:
    repeating-linear-gradient(90deg,transparent 0 13px,rgba(28,33,86,.18) 13px 15px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px),
    linear-gradient(90deg,#FF4F8B,#C46CF2 55%,#3CB9EC)!important;
  background-size:auto,24px 24px,auto!important;
  animation:ttLdFill 2.3s cubic-bezier(.3,.7,.2,1) forwards,ttLdStripe .6s linear infinite!important;
  clip-path:inset(0 100% 0 0)}
#loadscr .ldbar i::after{content:""!important;position:absolute!important;top:0;bottom:0;left:0;width:60px!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)!important;transform:none!important;animation:ttLdScan 1.1s ease-in-out infinite!important}
@keyframes ttLdFill{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes ttLdStripe{to{background-position:0 0,24px 0,0 0}}
@keyframes ttLdScan{0%{transform:translateX(-80px)}100%{transform:translateX(320px)}}
@media (prefers-reduced-motion:reduce){#loadscr *,#loadscr::before{animation:none!important}#loadscr .ldbar i{clip-path:none}}
@media(max-width:600px){#loadscr::before{background-position:22% 18%,80% 76%,74% 14%,24% 80%,88% 30%,8% 88%}#loadscr .ldbar{width:240px!important}}