/* 由 tools/trial-brand-build.cjs 從 ../redesign-preview/trial-logo/trial.css 產生，請改來源後重跑。 */
/* 申請商標中的 LOGO 與 FUN學奇機 字圖：一開始就先藏起來（新 LOGO 換上前也不會閃一下） */
.ajie-link .hzl,.ajie-link .hz-logo,img.fun-mark,img[src*="logo-mix"],img[src*="logo-fun"],img[src*="fun-mark"],image[href*="login-word"],image[href*="login-u"],.logo-wrap ellipse[cx="162.5"]{visibility:hidden!important}
/* 公測版暫時 LOGO「阿桀老師的注音遊戲」三種風格（搭配 trial.js；html[data-trial=T1|T2|T3]） */
.tl{position:relative;display:inline-flex;align-items:center;gap:6px;font-family:"Park","GenSenRounded","Microsoft JhengHei",sans-serif;font-weight:900;line-height:1;white-space:nowrap;vertical-align:middle}
.tl *{box-sizing:border-box}
.tl-bot{flex:none;width:58px;height:62px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(20,60,30,.3));animation:tl-wave 2.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes tl-wave{0%,100%{rotate:-6deg}50%{rotate:6deg}}
.tl-txt{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.tl-row{display:flex;gap:3px}
/* ── T1 彩虹積木字 ── */
.tl-T1 .tl-blk{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--c);color:#fff;font-size:20px;text-shadow:0 2px 0 rgba(0,0,0,.18);box-shadow:inset 0 -4px 0 rgba(0,0,0,.16),inset 0 2px 0 rgba(255,255,255,.45),0 3px 0 rgba(0,0,0,.12);animation:tl-hop 2.4s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}
.tl-T1 .tl-row.s .tl-blk{width:20px;height:20px;border-radius:6px;font-size:13px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.16),0 2px 0 rgba(0,0,0,.12)}
@keyframes tl-hop{0%,60%,100%{transform:none}70%{transform:translateY(-7px) rotate(-6deg)}80%{transform:translateY(0) scale(1.08,.92)}90%{transform:none}}
/* ── T2 糖果泡泡字 ── */
.tl-T2 .tl-rib{display:inline-block;padding:3px 10px 4px;border-radius:999px;background:linear-gradient(90deg,#FF8FB1,#FFB86B);color:#fff;font-size:12px;letter-spacing:.08em;box-shadow:0 2px 0 rgba(180,60,90,.35);transform:rotate(-3deg)}
.tl-T2 .tl-cd{display:inline-block;font-size:30px;background:linear-gradient(180deg,var(--c),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0;filter:drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 2px rgba(80,40,90,.35));animation:tl-float 2.8s ease-in-out infinite;animation-delay:calc(var(--i)*-.4s)}
@keyframes tl-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
.tl-T2 .tl-sp{position:absolute;font-style:normal;color:#FFE066;text-shadow:0 0 6px #fff;animation:tl-tw 1.6s ease-in-out infinite}
.tl-T2 .tl-sp.s1{left:56px;top:-4px;font-size:14px}.tl-T2 .tl-sp.s2{right:-12px;top:6px;font-size:16px;animation-delay:.5s;color:#FFB0D0}.tl-T2 .tl-sp.s3{right:40px;bottom:-6px;font-size:12px;animation-delay:1s;color:#A5E8FF}
@keyframes tl-tw{0%,100%{opacity:.25;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(25deg)}}
/* ── T3 注音小火車 ── */
.tl-T3{flex-direction:column;align-items:flex-start;gap:0}
.tl-T3 .tl-train{display:flex;align-items:flex-end;gap:3px;animation:tl-chug .5s ease-in-out infinite alternate}
@keyframes tl-chug{to{transform:translateY(-1.5px)}}
.tl-T3 .tl-loco{position:relative;width:46px;height:44px;flex:none;border-radius:10px 10px 6px 6px;background:linear-gradient(#6BBF59,#3E9A4A);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.tl-T3 .tl-loco .tl-bot{position:absolute;left:2px;bottom:10px;width:42px;height:44px;animation:tl-wave 2.6s ease-in-out infinite}
.tl-T3 .tl-smoke{position:absolute;left:-4px;top:-14px}
.tl-T3 .tl-smoke i{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff;opacity:0;animation:tl-puff 1.8s ease-out infinite}
.tl-T3 .tl-smoke i:nth-child(2){animation-delay:.6s}.tl-T3 .tl-smoke i:nth-child(3){animation-delay:1.2s}
@keyframes tl-puff{0%{opacity:.9;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(-14px,-12px) scale(1.6)}}
.tl-T3 .tl-car{position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:7px 7px 4px 4px;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.16),inset 0 2px 0 rgba(255,255,255,.4);margin-bottom:6px}
.tl-T3 .tl-car b{font-size:16px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.2);animation:tl-bob 1s ease-in-out infinite;animation-delay:calc(var(--i)*.1s)}
@keyframes tl-bob{50%{transform:translateY(-2px)}}
.tl-T3 .tl-car i{position:absolute;bottom:-6px;width:9px;height:9px;border-radius:50%;background:#46505A;border:2px solid #fff;animation:tl-spin 1s linear infinite}
.tl-T3 .tl-car i:nth-of-type(1){left:2px}.tl-T3 .tl-car i:nth-of-type(2){right:2px}
@keyframes tl-spin{to{rotate:360deg}}
.tl-T3 .tl-rail{display:block;width:100%;height:4px;margin-top:2px;border-radius:2px;background:repeating-linear-gradient(90deg,#fff 0 8px,rgba(255,255,255,.4) 8px 12px)}
/* ── 左上角大小（綠外框上方） ── */
.ajie-link .tl-hd{transform-origin:left center}
.ajie-link .tl-T3.tl-hd{scale:.95}
/* ── 登入頁大圖：機器人下面放大版 ── */
.logo-wrap{position:relative}
.tl-bigwrap{position:absolute;left:50%;bottom:1%;translate:-50% 0;display:flex;justify-content:center;pointer-events:none}
.tl-big{scale:2.1;transform-origin:center bottom}
.tl-big .tl-bot{display:none}/* 大圖上方本來就有大機器人 */
.tl-T3.tl-big .tl-loco{display:none}
.tl-T1.tl-big .tl-txt,.tl-T2.tl-big .tl-txt{align-items:center}
/* ── 綠外框下緣文字 ── */
.tl-foot{display:inline-block;font-family:"Park","GenSenRounded",sans-serif;font-weight:900;font-size:15px;letter-spacing:.35em;color:#fff;text-shadow:0 1px 2px rgba(30,70,30,.35)}
@media(prefers-reduced-motion:reduce){.tl *,.tl{animation:none!important}}

/* 左上角：網站原本把 LOGO 裡的圖片固定成 33px 高，新 LOGO 要大一點、清楚一點 */
html:root body .ajie-link.ajie-link:has(.tl){line-height:1!important;padding:0 6px!important;overflow:visible}
html:root body .ajie-link .tl-hd .tl-bot{height:58px!important;width:54px!important;animation:tl-wave 2.6s ease-in-out infinite!important}
html:root body .ajie-link .tl-T3.tl-hd .tl-loco .tl-bot{height:42px!important;width:40px!important}
.ajie-link .tl-hd{scale:1.08}
.ajie-link .tl-T1.tl-hd .tl-blk{width:32px;height:32px;font-size:21px}
.ajie-link .tl-T1.tl-hd .tl-row.s .tl-blk{width:21px;height:21px;font-size:14px}
.ajie-link .tl-T2.tl-hd .tl-cd{font-size:33px}
.ajie-link .tl-T3.tl-hd .tl-car{width:28px;height:28px}.ajie-link .tl-T3.tl-hd .tl-car b{font-size:17px}
@media(max-height:700px),(max-width:1100px){.ajie-link .tl-hd{scale:.9}}
/* 登入框標題比較長：縮小一點、可以換行 */
html[data-trial] #login-title{font-size:clamp(22px,2vw,28px)!important;white-space:normal!important;line-height:1.3!important}