/* 「注音躲貓貓」分類頁：H2 放大鏡尋寶＋S5 魔法星環（搭配 cat-hide.js；綠色主視覺共用樣式在 home-e.css；不畫任何連線） */
.h2-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:26px;align-items:start;padding:0 6px 8px}
.h2-main{display:flex;flex-direction:column;gap:12px}
.h2-view{position:relative;border-radius:22px;overflow:hidden;background:#fff;border:7px solid #fff;box-shadow:0 0 0 2px #CFE6B6,0 14px 30px rgba(46,90,30,.16);cursor:zoom-in;aspect-ratio:4/3}
.h2-sheet{display:block;width:100%;height:100%;object-fit:cover}
.h2-view.swap .h2-sheet{animation:h2-swap .5s ease}@keyframes h2-swap{from{opacity:.2;transform:scale(1.04)}}
.h2-lens{position:absolute;width:0;height:0;pointer-events:none;z-index:2}
.h2-glass{position:absolute;left:-90px;top:-90px;width:180px;height:180px;border-radius:50%;background-repeat:no-repeat;background-color:#fff;border:10px solid transparent;background-clip:padding-box;box-shadow:0 0 0 10px #3E9A4A,0 0 0 13px #C9E6A9,0 12px 26px rgba(30,70,20,.35),inset 0 0 0 3px rgba(255,255,255,.8)}
.h2-glass::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.6) 0 12%,transparent 30%)}
.h2-handle{position:absolute;left:62px;top:62px;width:26px;height:96px;border-radius:13px;background:linear-gradient(90deg,#4CA64C,#1F6B3A);transform-origin:50% 0;rotate:-45deg;box-shadow:0 6px 12px rgba(30,70,20,.3)}
.h2-handle::after{content:'';position:absolute;left:50%;top:60%;width:16px;height:16px;translate:-50% -50%;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.h2-info{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:18px;background:#F4FAEE;border:2px solid #E3F0D6}
.h2-info>div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.h2-name{font-size:20px;color:#1F6B3A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.h2-desc{font-size:14px;font-weight:700;color:#5C7A5E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h2-prog{font-size:13px;font-weight:800;color:#6b726d;white-space:nowrap}
html body.fun-portal .ch-root .h2-go{flex:none;display:inline-flex;align-items:center;padding:9px 18px!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:16px!important;box-shadow:0 4px 0 #1B5E30!important;white-space:nowrap;text-decoration:none}
.h2-zy,.h2-zyw{display:flex;gap:4px;flex-wrap:nowrap}.h2-zy span,.h2-zyw span{min-width:24px;padding:0 6px;border-radius:8px;background:#fff;border:2px solid #ABD08B;color:#1F6B3A;font-weight:900;font-size:15px;text-align:center;white-space:nowrap}
.h2-zyw span{font-size:18px;min-width:30px}
.h2-side{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
.h2-bot{position:absolute;right:0;bottom:calc(100% + 2px);z-index:9;display:flex;align-items:center;gap:8px}
html body.fun-portal .ch-root .h2-bot .h2-robot{width:104px;flex:none;cursor:pointer;animation:g-bob 3.4s ease-in-out infinite}
html body.fun-portal .ch-root .h2-bot .h2-robot.h2-fire{animation:h2-fire .45s cubic-bezier(.34,1.56,.64,1)}@keyframes h2-fire{30%{transform:translate(-6px,-8px) rotate(-8deg) scale(1.06)}}
.h2-bubble{position:relative;white-space:nowrap;padding:9px 16px;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}
.h2-bubble b{color:#3E9A4A;letter-spacing:.08em}
.h2-bubble::after{content:'';position:absolute;right:-10px;top:50%;width:16px;height:16px;translate:0 -50%;rotate:45deg;background:#fff;border-right:2px solid var(--g-line);border-top:2px solid var(--g-line)}
.h2-list{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 22px;padding:8px 8px 6px}
html body.fun-portal .ch-root .h2-chip.lesson-card{position:relative;z-index:2;display:flex!important;flex-direction:column!important;gap:0;padding:6px!important;min-height:0!important;border-radius:16px!important;border:2px solid #E3F0D6!important;background:#fff!important;box-shadow:0 4px 0 #E3F0D6!important;cursor:pointer;text-align:left;color:inherit!important;outline:none;transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s}
html body.fun-portal .ch-root .h2-chip.lesson-card:not(.locked):is(:hover,:focus-visible,.on){transform:translateY(-4px);border-color:#4CA64C!important;box-shadow:0 0 0 4px rgba(143,203,106,.35),0 10px 20px rgba(46,125,50,.15)!important}
html body.fun-portal .ch-root .h2-chip.lesson-card.on{background:#F4FAEE!important}
.h2-chip.h2-hit{animation:h2-hit .5s cubic-bezier(.34,1.56,.64,1)}@keyframes h2-hit{35%{transform:translateY(-8px) scale(1.06)}}
html body.fun-portal .ch-root .h2-chip.locked{cursor:default;background:#F7FAF3!important}
.h2-chip.locked .h2-ct{opacity:.6}.h2-chip.locked small{position:absolute;right:12px;top:10px;font-size:11px;font-weight:900;color:#8a918c}
.h2-thumb{display:block;width:100%;aspect-ratio:16/5.4;object-fit:cover;object-position:30% 50%;border-radius:10px}
.h2-lock{display:grid;place-items:center;font-size:24px;background:repeating-linear-gradient(-45deg,#F2F8EB 0 12px,#E9F3DF 12px 24px)}
.h2-ct{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;max-width:calc(100% - 20px);padding:3px 8px 3px 3px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 2px 6px rgba(31,80,20,.18)}
.h2-no{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#4CA64C,#1F6B3A);color:#fff;font-weight:900;font-size:13px;flex:none}
@media(max-width:1300px){.h2-glass{left:-70px;top:-70px;width:140px;height:140px}.h2-handle{left:48px;top:48px;height:74px}.h2-desc,.h2-prog{display:none}.h2-list{gap:20px 16px}html body.fun-portal .ch-root .h2-bot .h2-robot{width:92px}}
@media(max-height:700px){.h2-list{gap:16px 14px;padding-top:6px}html body.fun-portal .ch-root .h2-bot .h2-robot{width:80px}.h2-thumb{aspect-ratio:16/4.2}.h2-bubble{font-size:13px;padding:6px 12px}.h2-view{aspect-ratio:16/10.4}}
@media(max-width:1100px){.h2-wrap{gap:16px}.h2-zyw{display:none}.h2-zy span{font-size:13px;min-width:20px;padding:0 4px}html body.fun-portal .ch-root .h2-bot .h2-robot{width:88px}}

html body.fun-portal #catalog.ch-on{background:#fff!important}
html body.fun-portal #catalog.ch-on .section-heading>img{display:none!important}
html body.fun-portal #catalog.ch-on .section-heading{padding-left:0!important}
#catalog.ch-on .section-heading h1{color:#1F6B3A!important}#catalog.ch-on .section-heading p{color:#5C7A5E!important}
html body.fun-portal #catalog.ch-on .lesson-note{display:none!important}
#game-cards.ch-root{display:block!important}
html body.fun-portal #catalog.ch-on .gs-layer{display:block!important}
@media(prefers-reduced-motion:reduce){.h2-robot,.h2-chip.h2-hit,.h2-view.swap .h2-sheet{animation:none!important;transition:none!important}}

/* 2026-10-04：移除左下角提醒列；放大左邊大學習單、右邊 8 張與大圖同高（1440 寬 740×555、1280×650 517×388、1024×768 532×399） */
html body.fun-portal .ch-root{--hv:min(740px,calc((100vh - 300px) * 4 / 3),52vw)}
@media(max-height:700px){html body.fun-portal .ch-root{--hv:min(740px,calc((100vh - 262px) * 4 / 3),52vw)}}
html body.fun-portal .ch-root .h2-wrap{grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start}
html body.fun-portal .ch-root .h2-main{width:var(--hv)}
html body.fun-portal .ch-root .h2-view{aspect-ratio:4/3}
html body.fun-portal .ch-root .h2-list{height:calc(var(--hv) * .75);grid-template-rows:repeat(4,minmax(0,1fr));gap:14px 16px;padding:0 6px}
html body.fun-portal .ch-root .h2-chip.lesson-card{height:100%;overflow:visible}
html body.fun-portal .ch-root .h2-thumb{flex:1 1 auto;height:0;min-height:0;aspect-ratio:auto;object-fit:cover}
html body.fun-portal .ch-root .h2-glass{left:-100px;top:-100px;width:200px;height:200px}html body.fun-portal .ch-root .h2-handle{left:70px;top:70px;height:104px}
@media(max-height:700px),(max-width:1100px){html body.fun-portal .ch-root .h2-glass{left:-72px;top:-72px;width:144px;height:144px}html body.fun-portal .ch-root .h2-handle{left:50px;top:50px;height:76px}html body.fun-portal .ch-root .h2-list{gap:10px 12px}}
/* K1 點我小手：選到的那張上有小手一直點（每點一下冒水波）＋「點一下就開始！」標籤 */
.h2-cue{position:absolute;inset:0;pointer-events:none;z-index:5}
.h2-hand{position:absolute;left:58%;top:52%;width:0;height:0}
.h2-hand b{position:absolute;left:-6px;top:4px;font-size:46px;line-height:1;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));animation:h2-tap 1.1s ease-in-out infinite;transform-origin:30% 0}
@keyframes h2-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)}}
.h2-rip{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:4px solid #FFD23F;opacity:0;animation:h2-rip 1.1s ease-out infinite .45s}
.h2-rip.r2{border-color:#FF6B9A;animation-delay:.6s}
@keyframes h2-rip{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.6);opacity:0}}
.h2-tag{position:absolute;right:8px;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:h2-tag .9s cubic-bezier(.34,1.56,.64,1) both,h2-bob 1.6s ease-in-out .9s infinite}
@keyframes h2-tag{from{transform:scale(0) rotate(-20deg)}}@keyframes h2-bob{50%{transform:translateY(-5px) rotate(-3deg)}}
html body.fun-portal .ch-root .h2-chip.lesson-card.on{border-color:#FF9F43!important;box-shadow:0 0 0 4px rgba(255,159,67,.35),0 10px 20px rgba(46,125,50,.15)!important}
@media(max-height:700px),(max-width:1100px){.h2-hand b{font-size:36px}.h2-tag{font-size:12px;padding:4px 9px;top:-12px}}
/* K5 人浪：每 6 秒 8 張一張接一張跳起來，帶一顆彩色星星 */
html body.fun-portal .ch-root .h2-chip.lesson-card.h2-hop{animation:h2-hop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes h2-hop{40%{transform:translateY(-14px) rotate(-2deg) scale(1.04)}}
.h2-spark{position:absolute;left:50%;top:0;z-index:6;font-style:normal;font-size:20px;text-shadow:0 0 4px #fff;pointer-events:none;animation:h2-spark .9s ease-out forwards}
@keyframes h2-spark{0%{transform:translate(-50%,0) scale(.4);opacity:1}100%{transform:translate(-50%,-38px) scale(1.3) rotate(90deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.h2-hand b,.h2-rip,.h2-tag,.h2-chip.h2-hop,.h2-spark{animation:none!important}.h2-rip{opacity:0}}
/* 2026-10-04：機器人往上移，第一列右方那張被選到時，「點一下就開始！」標籤（含浮動、人浪跳起）不再碰到機器人下半身 */
/* 同日使用者：移太高，往下移「書本最下方到第一列右方那張上邊線」距離的一半（54→27、56→28）；第一列兩張的標籤改放卡片上緣內側，避免碰到機器人 */
html body.fun-portal .ch-root .h2-bot{bottom:calc(100% + 27px)}
@media(min-width:1301px) and (min-height:701px){html body.fun-portal .ch-root .h2-bot .h2-robot{width:98px}}
@media(max-height:700px),(max-width:1100px){html body.fun-portal .ch-root .h2-bot{bottom:calc(100% + 28px)}}
html body.fun-portal .ch-root .h2-chip:is([data-i="0"],[data-i="1"]) .h2-tag{top:6px}