/* 🏆 等級試煉獎勵的儀式（js/trial.js）：全畫面變暗＋金色光芒旋轉＋金光粒子往上飄，中間標題、道具卡一件一件亮出來（光暈）、「收下」。
   電腦版面（4:3 舞台 800×600，stage.js）、手機直式、手機橫式（矮）都排得下：尺寸用 px／%，矮的畫面（max-height 520px）整組縮小。
   z-index 200：蓋過小視窗（120）、強化廣播（140）、新手引導特效（135），在斷線接回（300）底下 */
#trial-rite { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; font-family: "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
  animation: trIn .35s ease-out both; }
#trial-rite.out { animation: trOut .45s ease-in forwards; pointer-events: none; }
#trial-rite .tr-back { position: absolute; inset: 0; pointer-events: none; transition: opacity .35s ease-out; }
#trial-rite .tr-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, rgba(46,32,6,.58) 0%, rgba(10,6,0,.86) 52%, rgba(0,0,0,.94) 100%); }
#trial-rite .tr-glow { position: absolute; left: 50%; top: 46%; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,216,120,.40) 0%, rgba(255,184,60,.16) 34%, rgba(255,170,40,0) 66%); animation: trPulse 2.6s ease-in-out infinite; }
#trial-rite .tr-rays { position: absolute; left: 50%; top: 46%; width: 960px; height: 960px; margin: -480px 0 0 -480px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,224,140,.22) 0 5deg, rgba(255,224,140,0) 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 6%, rgba(0,0,0,.55) 28%, transparent 60%); mask: radial-gradient(circle, #000 6%, rgba(0,0,0,.55) 28%, transparent 60%);
  animation: trSpin 26s linear infinite; }
#trial-rite .tr-sparks { position: absolute; inset: 0; pointer-events: none; }
#trial-rite .tr-sparks i { position: absolute; left: var(--x); bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fffbe0 0%, #ffd060 55%, rgba(255,200,80,0) 72%); box-shadow: 0 0 6px 2px rgba(255,196,70,.65);
  animation: trRise var(--t) linear var(--d) infinite; }

/* 中間那一欄 */
#trial-rite .tr-main { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(560px, calc(100% - 24px)); max-height: 100%;
  padding: max(10px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  box-sizing: border-box; text-align: center; }
/* 一次補好幾級：上面一排等級標記（領過的打勾、正在演的發亮） */
#trial-rite .tr-steps { display: flex; gap: 8px; }
#trial-rite .tr-steps span { min-width: 34px; height: 24px; padding: 0 8px; box-sizing: border-box; border: 1px solid rgba(242,193,78,.45); border-radius: 12px;
  background: rgba(22,15,4,.7); color: #cdb27a; font: 700 13px/22px "Microsoft JhengHei", system-ui, sans-serif; }
#trial-rite .tr-steps span.cur { border-color: #ffd56a; background: linear-gradient(#7c5612, #3e2a06); color: #fff3c4; box-shadow: 0 0 10px rgba(255,200,80,.85); }
#trial-rite .tr-steps span.done { border-color: rgba(150,130,90,.45); color: #8d7f5f; }
#trial-rite .tr-steps span.done::after { content: " ✓"; color: #8fe08a; }
/* 標題「N 級試煉達成」：金色漸層字＋兩邊的金線 */
#trial-rite .tr-title { display: flex; align-items: center; gap: 12px; max-width: 100%; }
#trial-rite .tr-title::before, #trial-rite .tr-title::after { content: ""; flex: 0 1 70px; min-width: 18px; height: 2px; background: linear-gradient(90deg, rgba(242,193,78,0), #f2c14e); }
#trial-rite .tr-title::after { transform: scaleX(-1); }
#trial-rite .tr-title span { white-space: nowrap; font: 900 36px/1.2 "Microsoft JhengHei", "PingFang TC", serif; letter-spacing: 4px; color: #ffe08a;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe38f 38%, #e6a62c 68%, #fff0b4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(255,190,60,.8)) drop-shadow(0 2px 0 #000); }
#trial-rite .tr-hint { color: #f3e6c4; font: 700 16px/1.2 "Microsoft JhengHei", system-ui, sans-serif; letter-spacing: 3px; text-shadow: 0 1px 2px #000, 0 0 6px #000; }

/* 道具卡：方框（金邊）＋後面的光暈、亮出來那一下的閃光、名字 */
#trial-rite .tr-cards { display: flex; align-items: flex-start; justify-content: center; gap: 22px; max-width: 100%; }
#trial-rite .tr-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 132px; margin: 0; padding: 6px 4px; box-sizing: border-box;
  border: 0; background: none; color: inherit; font: inherit; }
#trial-rite .tr-ic { position: relative; display: block; width: 88px; height: 88px; }
#trial-rite .tr-halo { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,228,140,.58) 0%, rgba(255,190,60,.2) 38%, rgba(255,180,50,0) 66%); animation: trHalo 2.2s ease-in-out infinite; }
#trial-rite .tr-box { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; border: 2px solid #f2c14e; border-radius: 14px;
  background: radial-gradient(circle at 50% 38%, #533b10 0%, #221707 72%); box-shadow: 0 0 18px rgba(255,200,80,.75), inset 0 0 14px rgba(255,214,110,.35); }
#trial-rite .tr-box img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 4px rgba(255,230,160,.6)); }
#trial-rite .tr-box img.ic35 { image-rendering: pixelated; }
#trial-rite .tr-flash { position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0%, rgba(255,240,170,.9) 16%, rgba(255,200,80,0) 58%); }
#trial-rite .tr-name { max-width: 100%; color: #fff3c4; font: 700 17px/1.25 "Microsoft JhengHei", system-ui, sans-serif; text-shadow: 0 0 8px rgba(255,190,60,.85), 0 2px 0 #000; word-break: keep-all; overflow-wrap: anywhere; }
/* 二選一：兩張卡片可以點，選中的發亮浮起、另一張變暗；中間一個「或」 */
#trial-rite .tr-card.pick { cursor: pointer; padding: 12px 6px 12px; border: 2px solid rgba(242,193,78,.35); border-radius: 16px; background: rgba(26,18,6,.6);
  transition: transform .2s, border-color .2s, box-shadow .2s, opacity .2s, filter .2s; }
#trial-rite .tr-card.pick:hover { border-color: rgba(255,214,110,.8); }
#trial-rite .tr-card.pick.sel { border-color: #ffd56a; background: rgba(66,46,10,.8); box-shadow: 0 0 22px rgba(255,200,80,.85); transform: translateY(-4px) scale(1.04); }
#trial-rite .tr-card.pick.dim { opacity: .42; filter: grayscale(.55); }
#trial-rite .tr-or { align-self: center; margin-top: -26px; color: #e9d18f; font: 700 17px/1 "Microsoft JhengHei", system-ui, sans-serif; text-shadow: 0 1px 2px #000; }

#trial-rite .tr-msg { color: #ffb8a2; font: 700 15px/1.3 "Microsoft JhengHei", system-ui, sans-serif; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
#trial-rite .tr-msg:empty { display: none; }
/* 第 448 項：獎勵寄信箱時，卡片下面一行寫去哪裡領（trial.js cb.mailOn） */
#trial-rite .tr-mail { color: #f3e6c4; font: 700 14px/1.3 "Microsoft JhengHei", system-ui, sans-serif; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
/* 「收下」道具亮完才出現；「稍後」一開始就在（標題落下時跟著淡入），隨時可以先收起來 */
#trial-rite .tr-btns { display: flex; gap: 12px; justify-content: center; }
#trial-rite .tr-main:not(.ready) .tr-go { opacity: 0; pointer-events: none; }
#trial-rite .tr-go { min-width: 172px; min-height: 52px; padding: 0 26px 0 34px; border: 2px solid #f2c14e; border-radius: 10px; cursor: pointer;
  background: linear-gradient(#a87c20, #5a3e0b); color: #fff6d8; font: 900 21px/1 "Microsoft JhengHei", system-ui, sans-serif; letter-spacing: 8px; text-shadow: 0 1px 0 #000;
  box-shadow: 0 0 16px rgba(242,193,78,.6), inset 0 1px 0 rgba(255,240,190,.5); animation: trBtn 1.8s ease-in-out infinite; transition: opacity .35s; }
#trial-rite .tr-go:disabled { cursor: default; filter: grayscale(.55) brightness(.75); animation: none; }
#trial-rite .tr-later { min-height: 52px; padding: 0 18px; border: 1px solid #8a7040; border-radius: 10px; cursor: pointer; background: rgba(22,15,6,.88); color: #dccdaa;
  font: 700 17px/1 "Microsoft JhengHei", system-ui, sans-serif; letter-spacing: 2px; }

/* 亮出來：標題落下、道具一件一件彈出來（每件 .65 秒，同 trial.js REVEAL_MS）＋閃光；按鈕最後才出現 */
#trial-rite .tr-main.reveal .tr-steps { animation: trFade .4s ease-out both; }
#trial-rite .tr-main.reveal .tr-title { animation: trTitle .75s cubic-bezier(.2, 1.3, .4, 1) .08s both; }
#trial-rite .tr-main.reveal .tr-hint { animation: trFade .4s ease-out .45s both; }
#trial-rite .tr-main.reveal .tr-card { animation: trCard .62s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(.7s + var(--i) * .65s); }
#trial-rite .tr-main.reveal .tr-flash { animation: trFlash .9s ease-out both; animation-delay: calc(.7s + var(--i) * .65s); }
#trial-rite .tr-main.reveal .tr-or { animation: trFade .3s ease-out 1.2s both; }
#trial-rite .tr-main.reveal .tr-later { animation: trFade .4s ease-out .45s both; }
/* 收下了：卡片閃一下（飛進角色見下面 .lift） */
#trial-rite .tr-main.got .tr-flash { animation: trFlash .7s ease-out both; }
/* 領到了（trial.js lift）：變暗的背景、光芒、金光粒子先退掉（.35 秒），標題、等級標記、按鈕淡掉，收下的道具卡縮小飛進角色（--dx／--dy）、
   沒挑的那張淡掉 → 露出角色身上的煙火；四周留一點暗、角色那裡亮著（--mx／--my＝角色的位置，焦點在角色身上），煙火放完（.end）再退。
   整層不擋點擊（點地圖、拖曳照常）；一次補好幾級時拿掉 .lift＝背景淡回來、演下一級 */
#trial-rite.lift { pointer-events: none; }
#trial-rite.lift .tr-back { opacity: 0; }
#trial-rite .tr-focus { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease-in;
  background: radial-gradient(circle at var(--mx, 50%) calc(var(--my, 46%) - 40px), rgba(0,0,0,0) 0, rgba(0,0,0,0) 120px, rgba(6,4,0,.34) 240px, rgba(6,4,0,.5) 390px); }   /* 圓心往上一點：煙火在頭上 */
#trial-rite.lift .tr-focus { opacity: 1; transition: opacity .35s ease-out; }
#trial-rite.lift.end .tr-focus { opacity: 0; transition: opacity .6s ease-in; }
#trial-rite.lift .tr-main > :not(.tr-cards), #trial-rite.lift .tr-main .tr-or, #trial-rite.lift .tr-main .tr-card.dim { animation: trOut .3s ease-in forwards; }
#trial-rite.lift .tr-main .tr-card:not(.dim) { animation: trInto .55s ease-in-out forwards; animation-delay: calc(var(--i) * .06s); }
#trial-rite.still.lift .tr-main { visibility: hidden; }
#trial-rite.still *, #trial-rite.still { animation: none !important; transition: none !important; }
/* 儀式開著：新手引導的閃爍框、標籤、周圍調暗（z-index 比誰都高）先藏起來，不然會蓋在儀式上面（窄條上「領取獎勵」那種目標不看有沒有被擋住）；收起來就回來 */
body.trial-on #tut-ring, body.trial-on #tut-tag, body.trial-on #tut-dim { visibility: hidden !important; }
#trial-rite.still .tr-go { opacity: 1; }

/* 關掉儀式（稍後）以後：頭像列下面一顆入口；位置由 trial.js placePill 量版面排（讓開線上名單、新手引導窄條、小地圖、有新版本那顆）；
   z-index 58：在介面（50、下方工具列 55）上面、彈出視窗（60 起）底下——開著視窗時不蓋住視窗標題 */
#trial-pill { position: fixed; top: calc(var(--orig-bar-h, 0px) + 104px); left: 40%; z-index: 58; padding: 8px 16px; border: 1px solid #f2c14e; border-radius: 18px;
  background: linear-gradient(#6e4f14, #3a2808); color: #fff1c4; font: 700 15px/1.1 "Microsoft JhengHei", system-ui, sans-serif; white-space: nowrap; cursor: pointer;
  text-shadow: 0 1px 0 #000; box-shadow: 0 0 12px rgba(242,193,78,.7); animation: trBtn 1.8s ease-in-out infinite; }

/* 矮的畫面（手機橫放、視窗很矮）：整組縮小 */
@media (max-height: 520px) {
  #trial-rite .tr-main { gap: 7px; }
  #trial-rite .tr-steps span { height: 20px; min-width: 30px; font-size: 12px; line-height: 18px; }
  #trial-rite .tr-title span { font-size: 26px; letter-spacing: 3px; }
  #trial-rite .tr-hint { font-size: 14px; }
  #trial-rite .tr-card { width: 118px; gap: 6px; padding: 4px; }
  #trial-rite .tr-card.pick { padding: 8px 4px; }
  #trial-rite .tr-ic { width: 62px; height: 62px; }
  #trial-rite .tr-box img { width: 46px; height: 46px; }
  #trial-rite .tr-halo { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  #trial-rite .tr-name { font-size: 15px; }
  #trial-rite .tr-or { margin-top: -18px; }
  #trial-rite .tr-go, #trial-rite .tr-later { min-height: 42px; }
  #trial-rite .tr-go { font-size: 19px; }
}
/* 窄的手機（320 寬）：卡片窄一點，二選一兩張＋「或」才排得下 */
@media (max-width: 370px) {
  #trial-rite .tr-card { width: 112px; }
  #trial-rite .tr-cards { gap: 12px; }
  #trial-rite .tr-title span { font-size: 30px; letter-spacing: 2px; }
}

@keyframes trIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes trOut { to { opacity: 0; } }
@keyframes trSpin { to { transform: rotate(360deg); } }
@keyframes trPulse { 0%, 100% { opacity: .75; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes trHalo { 0%, 100% { opacity: .7; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes trRise { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: .95; } 80% { opacity: .7; } 100% { opacity: 0; transform: translateY(calc(var(--vh1, 1vh) * -105)); } }
@keyframes trFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes trTitle { 0% { opacity: 0; transform: translateY(-26px) scale(1.25); } 100% { opacity: 1; transform: none; } }
@keyframes trCard { 0% { opacity: 0; transform: translateY(18px) scale(.25); } 100% { opacity: 1; transform: none; } }
@keyframes trFlash { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes trInto { 0% { opacity: 1; transform: none; } 18% { transform: scale(1.12); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.1); } }
@keyframes trBtn { 0%, 100% { box-shadow: 0 0 10px rgba(242,193,78,.5), inset 0 1px 0 rgba(255,240,190,.5); } 50% { box-shadow: 0 0 22px 3px rgba(242,193,78,.95), inset 0 1px 0 rgba(255,240,190,.5); } }
@media (prefers-reduced-motion: reduce) { #trial-rite *, #trial-rite, #trial-pill { animation: none !important; } #trial-rite .tr-go { opacity: 1; } }

/* ⊞ 選單開著（hud.js 加 body.lmui-fn-open）：浮鈕在 z-index 58、選單所在的下方介面只有 7，手機直式會蓋住選單的「排行榜」那幾項 → 開著時先藏起來，關掉就回來 */
body.lmui-fn-open #trial-pill { visibility: hidden; }