/* 「注音對對碰」分類頁：C2 連連看星圖（搭配 cat-connect.js；綠色主視覺共用樣式在 home-e.css） */
.c2-map{position:relative;display:flex;flex-direction:column;gap:14px;padding:0 4px 8px}
.c2-top{position:relative;align-self:center;z-index:5;margin:-74px 0 -6px}
.c2-robot{width:120px;animation:g-bob 3.4s ease-in-out infinite}
.c2-bubble{position:absolute;left:calc(100% + 12px);top:46%;translate:0 -50%;padding:8px 14px;border-radius:18px;background:#fff;border:2px solid var(--g-line);box-shadow:0 6px 16px rgba(46,125,50,.1);font-size:15px;font-weight:900;line-height:1.4;color:var(--g-deep);text-align:center;white-space:nowrap}
.c2-bubble b{color:#3E9A4A}
.c2-bubble::after{content:'';position:absolute;left:-10px;top:50%;width:16px;height:16px;translate:0 -50%;rotate:45deg;background:#fff;border-left:2px solid var(--g-line);border-bottom:2px solid var(--g-line)}
.c2-band{position:relative;z-index:2}
.c2-title{display:flex;align-items:center;gap:10px;margin:0 0 18px}
.c2-title b{font-size:19px;color:#fff;padding:4px 15px;border-radius:999px;background:linear-gradient(135deg,#4CA64C,#1F6B3A);box-shadow:0 3px 0 #17502B}.c2-title .g-star{width:14px;height:14px}
.c2-title small{font-size:14px;font-weight:900;color:var(--g-deep);background:var(--g-pale);padding:3px 10px;border-radius:999px}
.c2-row{display:grid;grid-template-columns:repeat(max(var(--n),8),minmax(0,1fr));gap:12px}

.c2-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px 6px 8px;border-radius:16px;background:#fff;border:2px solid #E3F0D6;text-decoration:none;color:inherit;transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s}
.c2-card:hover{transform:translateY(-6px);border-color:#4CA64C;box-shadow:0 12px 22px rgba(46,125,50,.16)}
.c2-card.hit{animation:c2-hit .6s cubic-bezier(.34,1.56,.64,1)}@keyframes c2-hit{40%{transform:translateY(-12px) scale(1.04);border-color:#4CA64C}}
.c2-dot{position:absolute;left:50%;top:-15px;translate:-50% 0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid #8FCB6A;font-style:normal;z-index:3}
.c2-dot b{font-size:14px;color:#1F6B3A}
.c2-card.c .c2-dot{border-color:#3E9A4A}
.c2-card.hit .c2-dot,.c2-card:hover .c2-dot{background:#3E9A4A;border-color:#1F6B3A}.c2-card.hit .c2-dot b,.c2-card:hover .c2-dot b{color:#fff}
.c2-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:38% 50%;border-radius:10px;box-shadow:0 0 0 1px #E3F0D6}
.c2-sub{font-size:13px;font-weight:900;color:#1F6B3A;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c2-road{fill:none;stroke:#E4F2D6;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.c2-dots{fill:none;stroke:#8FCB6A;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 12;animation:c2-flow 1.3s linear infinite}@keyframes c2-flow{to{stroke-dashoffset:-26}}
@media(max-width:1100px),(max-height:700px){.c2-top{margin-top:-20px}.c2-row,.c2-band.p .c2-row{grid-template-columns:repeat(5,minmax(0,1fr));padding:0;row-gap:24px}.gs-layer{display:none}}
@media(min-width:1101px) and (min-height:701px){.c2-map{gap:30px}.c2-img{aspect-ratio:4/3.2}.c2-title{margin-bottom:22px}}

html body.fun-portal #catalog.cc-on{background:#fff!important}
html body.fun-portal #catalog.cc-on .section-heading>img{display:none!important}
html body.fun-portal #catalog.cc-on .section-heading{padding-left:0!important}
#catalog.cc-on .section-heading h1{color:#1F6B3A!important}#catalog.cc-on .section-heading p{color:#5C7A5E!important}
html body.fun-portal #catalog.cc-on .lesson-note{display:none!important}
#game-cards.cc-root{display:block!important}
html body.fun-portal .cc-root .c2-card.lesson-card{display:flex!important;flex-direction:column;gap:6px;padding:8px 6px!important;border:2px solid #E3F0D6!important;border-radius:16px!important;background:#fff!important;box-shadow:none!important;min-height:0!important;cursor:pointer;outline:none}
html body.fun-portal .cc-root .c2-card.lesson-card:hover,html body.fun-portal .cc-root .c2-card.lesson-card:focus-visible{border-color:#4CA64C!important;box-shadow:0 12px 22px rgba(46,125,50,.16)!important}
.c2-row2{display:flex;align-items:center;justify-content:space-between;gap:4px}
.c2-prog{font-size:11px;font-weight:800;color:#6b726d;white-space:nowrap}
html body.fun-portal .cc-root .c2-play{display:inline-flex;align-items:center;padding:3px 10px!important;min-height:0!important;border-radius:999px!important;background:linear-gradient(145deg,#8FCB6A,#3E9A4A 60%,#21713A)!important;color:#fff!important;font-weight:900;font-size:12px!important;box-shadow:0 2px 0 #1B5E30!important;white-space:nowrap;text-decoration:none}
@media(max-width:1300px){.c2-prog{display:none}.c2-row2{justify-content:center}}
@media(prefers-reduced-motion:reduce){.c2-card,.c2-robot{animation:none!important}}
/* ══ 2026-10-05 新版：L1 棋盤賽道＋S3 煙火星星＋K1 點我小手（cat-connect.js 產生 .cx-*；上面舊的 .c2-* 已不使用） ══ */
html body.fun-portal #catalog.cx-on .lesson-note{display:none!important}
.cx-stage{position:relative;width:100%;min-height:300px;overflow:visible}
/* 卡片：注音對對碰＝綠框、結合韻對對碰＝橘框（呼應 LOGO 的 U） */
html body.fun-portal .cx-stage .cx-card{position:absolute;display:block;box-sizing:border-box;padding:0!important;margin:0!important;min-height:0!important;border-radius:14px!important;background:#fff!important;overflow:hidden;text-decoration:none!important;color:#1F543C!important;
 border:3px solid #8FCB6A!important;box-shadow:0 4px 0 #CFE3BC,0 6px 14px rgba(30,70,40,.12)!important;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;z-index:2;cursor:pointer}
html body.fun-portal .cx-stage .cx-card.c{border-color:#FFB547!important;box-shadow:0 4px 0 #FFE0B0,0 6px 14px rgba(120,70,20,.12)!important}
.cx-card .cx-img{position:absolute;left:0;right:0;top:0;height:72%;width:100%;object-fit:cover;object-position:50% 30%;display:block}
.cx-card .cx-lb{position:absolute;left:0;right:0;bottom:0;height:28%;display:flex;align-items:center;justify-content:center;padding:0 4px;background:#F4FAEE;font-weight:900;font-size:clamp(10px,calc(var(--ch,90px) * .15),16px);white-space:nowrap;overflow:hidden;letter-spacing:1px}
.cx-card.c .cx-lb{background:#FFF6E8;color:#8A4B10}
.cx-card .cx-no{position:absolute;left:5px;top:5px;min-width:calc(var(--ch,90px) * .24);height:calc(var(--ch,90px) * .24);max-width:30px;max-height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:clamp(10px,calc(var(--ch,90px) * .14),15px);color:#fff;background:linear-gradient(135deg,#6FBF4A,#2E7D45);box-shadow:0 0 0 2px #fff}
.cx-card.c .cx-no{background:linear-gradient(135deg,#FFC24D,#F08A1C)}
.cx-card .cx-done{position:absolute;right:5px;top:4px;font-style:normal;color:#FFC107;font-size:16px;text-shadow:0 0 0 #fff,0 1px 2px rgba(0,0,0,.25)}
html body.fun-portal .cx-stage .cx-card:hover,html body.fun-portal .cx-stage .cx-card.on{transform:translateY(-5px) scale(1.04);z-index:4}
html body.fun-portal .cx-stage .cx-card.on{box-shadow:0 0 0 4px rgba(143,203,106,.45),0 10px 20px rgba(30,70,40,.18)!important}
html body.fun-portal .cx-stage .cx-card.c.on{box-shadow:0 0 0 4px rgba(255,181,71,.45),0 10px 20px rgba(120,70,20,.18)!important}
.cx-card.hit{animation:cx-hit .6s cubic-bezier(.34,1.56,.64,1)}@keyframes cx-hit{35%{transform:translateY(-10px) scale(1.09) rotate(-2deg)}}
/* 機器人、說話泡泡、系列標題 */
.cx-robot{position:absolute;z-index:3;transition:none}.cx-robot img{width:100%;display:block;user-select:none}
.cx-robot.cx-fire{animation:cx-fire .45s cubic-bezier(.34,1.56,.64,1)}@keyframes cx-fire{30%{transform:translateY(-8px) rotate(-6deg) scale(1.05)}}
.cx-bubble{position:absolute;z-index:5;max-width:220px;padding:8px 14px;border-radius:16px;background:#fff;border:2px solid #CFE3BC;box-shadow:0 6px 16px rgba(46,125,50,.1);font-size:14px;font-weight:900;line-height:1.45;color:#1F543C;white-space:nowrap;pointer-events:none}
.cx-bubble b{color:#3E9A4A;letter-spacing:.08em}
.cx-bubble[data-side=c]{translate:-50% -100%}.cx-bubble[data-side=r]{translate:0 -50%}
.cx-title{position:absolute;z-index:1;display:flex;flex-direction:column;gap:1px;pointer-events:none}
.cx-title b{align-self:flex-start;padding:4px 12px;border-radius:999px;color:#fff;font-size:15px;background:linear-gradient(135deg,#6FBF4A,#2E7D45);box-shadow:0 3px 0 #1F6B3A}
.cx-title.c b{background:linear-gradient(135deg,#FFC24D,#F08A1C);box-shadow:0 3px 0 #C2701E}
.cx-title small{font-size:12px;font-weight:800;color:#5C7A5E;padding-left:4px}
@media(max-height:700px),(max-width:1100px){.cx-bubble{font-size:12px;padding:6px 10px}.cx-title b{font-size:13px;padding:3px 10px}.cx-title small{display:none}}
@media(prefers-reduced-motion:reduce){.cx-card.hit,.cx-robot.cx-fire{animation:none}}

/* K1 點我小手（同注音躲貓貓分類頁 K1）：選到的那張上有小手一直點（每點一下冒兩圈水波）＋「點一下就開始！」標籤；跟著卡片的上浮放大 */
.cx-cue{position:absolute;z-index:6;pointer-events:none;transform:translateY(-5px) scale(1.04);opacity:0;transition:left .25s,top .25s}
.cx-cue.show{opacity:1;transition:opacity .2s}
.cx-hand{position:absolute;left:58%;top:52%;width:0;height:0}
.cx-hand b{position:absolute;left:-6px;top:4px;font-size:clamp(30px,calc(var(--chh,100px) * .34),46px);line-height:1;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));animation:cx-tap 1.1s ease-in-out infinite;transform-origin:30% 0}
@keyframes cx-tap{0%,100%{transform:translate(10px,18px) rotate(-12deg)}40%{transform:translate(0,0) rotate(-12deg) scale(.92)}55%{transform:translate(0,0) rotate(-12deg) scale(.86)}}
.cx-rip{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:4px solid #FFD23F;opacity:0;animation:cx-rip 1.1s ease-out infinite .45s}
.cx-rip.r2{border-color:#FF6B9A;animation-delay:.6s}
@keyframes cx-rip{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.6);opacity:0}}
.cx-tag{position:absolute;right:6px;top:-14px;padding:5px 12px;border-radius:999px;background:linear-gradient(135deg,#FF6B9A,#FF9F43);color:#fff;font-weight:900;font-size:14px;white-space:nowrap;box-shadow:0 4px 0 #C2456A,0 6px 14px rgba(0,0,0,.18);animation:cx-tagin .9s cubic-bezier(.34,1.56,.64,1) both,cx-bob 1.6s ease-in-out .9s infinite}
@keyframes cx-tagin{from{transform:scale(0) rotate(-20deg)}}@keyframes cx-bob{50%{transform:translateY(-5px) rotate(-3deg)}}
html body.fun-portal .cx-stage .cx-card.on{border-color:#FF9F43!important}
@media(max-height:700px),(max-width:1100px){.cx-hand b{font-size:32px}.cx-tag{font-size:12px;padding:4px 9px;top:-12px}}
@media(prefers-reduced-motion:reduce){.cx-hand b,.cx-rip,.cx-tag{animation:none!important}.cx-rip{opacity:0}}

/* 棋盤卡片間距小：標籤一律放進卡片上緣內側，不蓋到上方的卡片或「回上一頁」 */
.cx-cue.inside .cx-tag{top:6px}

/* 卡片連結也帶 play-link（舊版測試與入口網站共用的「進入遊戲」連結名稱）；擋掉 play-link 的通用字型與行高 */
html body.fun-portal .cx-stage .cx-card.play-link{display:block!important;font-size:inherit;line-height:normal;text-align:left;min-height:0!important}