/* 由 tools/cat-z3-build.cjs 從 ../redesign-preview/green-all/z3c.css 產生，請改來源後重跑。 */
/* 分類頁「Z3 旋轉走廊」綠色機器人版（搭配 z3c.js） */
html:root body #catalog.zc-on>.section-heading,html:root body #catalog.zc-on>.catalog-back,html:root body #catalog.zc-on>.lesson-note{display:none!important}
html:root body #catalog.zc-on{padding:8px 14px!important;background:#fff!important}
#catalog.zc-on .kid-root{padding:0!important}
.kd-page.zc-page{position:relative;background:#fff!important;padding:0!important;border:0!important;box-shadow:none!important;min-height:0!important;height:calc(100dvh - 124px);display:grid;grid-template-rows:auto 1fr auto;gap:4px;font-family:"Park","GenSenRounded","Microsoft JhengHei",sans-serif;color:#2A4A30}
.zc-head{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:clamp(96px,14vh,130px)}
.zc-head h1{margin:0;font-size:clamp(30px,3vw,40px);font-weight:900;color:#3E9A4A}
.zc-robo{display:flex;align-items:center;gap:10px;height:100%;margin-right:calc(50% - 300px)}
.zc-bot{height:100%;aspect-ratio:505/400}.zc-rs{width:100%;height:100%;overflow:visible}
.zc-say{position:relative;background:#fff;border:3px solid #CFE8C3;border-radius:18px;padding:8px 16px;font-size:clamp(17px,1.6vw,21px);font-weight:900;line-height:1.35;box-shadow:0 3px 0 #E6F2DF}
.zc-say b{color:#F28C28}.zc-say::before{content:"";position:absolute;left:-12px;top:50%;margin-top:-10px;border:10px solid transparent;border-left:0;border-right-color:#CFE8C3}
/* 走廊 */
.zc-stage{position:relative;min-height:0;perspective:1100px;overflow:hidden;border-radius:28px;background:radial-gradient(ellipse at 50% 60%,#F1F9EC,#fff 70%)}
.zc-ring{position:absolute;inset:0;transform-style:preserve-3d}
.zc-card{position:absolute;left:50%;top:50%;width:clamp(150px,13vw,190px);aspect-ratio:9/10;padding:8px;border-radius:22px;background:#fff;border:3px solid #CFE8C3;box-shadow:0 12px 24px rgba(46,125,50,.14);cursor:pointer;transition:transform .6s cubic-bezier(.3,1.25,.5,1),opacity .45s}
.zc-card img{width:100%;height:100%;object-fit:contain}
.zc-zy{position:absolute;left:50%;bottom:-14px;translate:-50% 0;min-width:40px;height:40px;padding:0 8px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(#6BBF59,#3E9A4A);color:#fff;font-size:22px;font-weight:900;box-shadow:0 3px 0 #2E6E33;white-space:nowrap}
.zc-zy.long{height:auto;min-height:36px;width:calc(100% - 8px);box-sizing:border-box;white-space:normal;font-size:14px;line-height:1.15;padding:4px 8px;text-align:center}/* 對對碰側邊卡片的長標題（例如「ㄧㄚ ㄧㄛ ㄧㄝ…」）縮小字、可換兩行，不超出卡片 */
/* 中間那張：大白卡＋綠框，翻進來像翻書 */
.zc-focus{position:absolute;left:50%;top:50%;z-index:30;width:clamp(260px,24vw,340px);translate:-50% -50%;padding:10px 10px 8px;border-radius:26px;background:#fff;border:5px solid #6BBF59;box-shadow:0 0 0 7px rgba(143,203,106,.25),0 20px 40px rgba(31,107,58,.25);cursor:pointer;transform-origin:50% 50%}
.zc-focus.flip{animation:zc-flip .55s cubic-bezier(.3,1.2,.5,1)}
@keyframes zc-flip{0%{transform:perspective(900px) rotateY(-85deg) scale(.9);opacity:.3}100%{transform:none;opacity:1}}
.zc-focus.go{transform:scale(1.05);transition:transform .2s}
.zc-demo{position:relative;height:clamp(220px,34vh,300px);border-radius:16px;overflow:hidden;background:#fff}
.zc-svg{display:block;width:100%;height:100%;overflow:visible}
.zc-trail{fill:none;stroke:#E53935;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.zc-mk path{stroke:#fff;stroke-width:4}.zc-mk.start path{fill:#3E9A4A}.zc-mk.goal path{fill:#F28C28}
.zc-star{font-size:44px;fill:#D5DCD2;text-anchor:middle;dominant-baseline:central;transition:fill .3s}.zc-star.lit{fill:#FFB547;stroke:#C86A12;stroke-width:2}
.zc-walker circle{fill:#fff;stroke:#E53935;stroke-width:5}
.zc-sheet{width:100%;height:100%;object-fit:contain}
.zc-tool{position:absolute;left:30%;top:30%;font-size:58px;line-height:1;transform:translate(-30%,-10%);transition:left .7s cubic-bezier(.45,0,.25,1),top .7s cubic-bezier(.45,0,.25,1);filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));pointer-events:none}
.zc-tool.tap{animation:zc-tap .45s}@keyframes zc-tap{40%{transform:translate(-30%,-10%) scale(.85)}}
.zc-cap{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 4px 0}
.zc-name{font-size:clamp(19px,1.7vw,24px);color:#2A4A30;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:root body .zc-go{flex:none;border:0;border-radius:16px;background:linear-gradient(#FFB547,#F28C28)!important;color:#fff!important;font-family:inherit;font-size:clamp(18px,1.6vw,22px);font-weight:900;padding:8px 18px;box-shadow:0 5px 0 #C86A12;cursor:pointer}
html:root body .zc-nav{position:absolute;top:50%;z-index:40;translate:0 -50%;width:64px;height:64px;padding:0;border:0;border-radius:50%;background:#F28C28!important;color:#fff!important;font-size:26px;box-shadow:0 5px 0 #C86A12,0 8px 16px rgba(0,0,0,.15);cursor:pointer}
.zc-nav.prev{left:12px}.zc-nav.next{right:12px}
/* 下方小格 */
.zc-strip{display:flex;gap:7px;overflow-x:auto;padding:6px 6px 10px;scrollbar-width:thin}
html:root body .zc-chip{flex:none;min-width:44px;height:44px;padding:0 8px;border:0;border-radius:12px;background:#EAF6E4!important;color:#2E7A38!important;font-family:inherit;font-size:21px;font-weight:900;box-shadow:inset 0 -3px 0 #CFE8C3;cursor:pointer}
html:root body .zc-chip.on{background:linear-gradient(#FFB547,#F28C28)!important;color:#fff!important;box-shadow:0 3px 0 #C86A12}
/* 右上裝置列 */
body.zc-dev-on .topbar #nav{display:none!important}
.zc-dev{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:"Park","GenSenRounded","Microsoft JhengHei",sans-serif}
.zc-key,.zc-clock{height:48px;border:0;border-radius:15px;background:linear-gradient(#fff,#F1F6EE);box-shadow:0 4px 0 #A9C99A,0 6px 10px rgba(30,70,30,.15)}
.zc-key{width:52px;padding:0;display:grid;place-items:center;cursor:pointer}.zc-key svg{width:26px;height:26px;stroke:#2A4A30;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.zc-clock{display:flex;align-items:center;gap:10px;padding:0 12px 0 14px;color:#2F6B35;font-weight:900}.zc-clock span{font-size:16px;white-space:nowrap}.zc-clock b{font:800 23px/1 Consolas,monospace}.zc-clock i{width:48px;height:27px;border-radius:14px;background:#CFD8CB}
.zc-key:disabled,.zc-clock.is-off{filter:grayscale(1);opacity:.4;cursor:not-allowed}
@media(max-height:700px),(max-width:1100px){.zc-key,.zc-clock{height:42px}.zc-key{width:46px}.zc-clock b{font-size:20px}.zc-clock span{font-size:14px}
 .kd-page.zc-page{height:calc(100dvh - 96px)}.zc-head{height:84px}.zc-head h1{font-size:26px}.zc-robo{margin-right:calc(50% - 260px)}.zc-say{font-size:15px}.zc-demo{height:clamp(170px,30vh,240px)}.zc-card{width:130px}.zc-chip{height:38px;min-width:38px;font-size:18px}}
.kd-page.zc-page{height:calc(100dvh - 150px)}@media(max-height:700px),(max-width:1100px){.kd-page.zc-page{height:calc(100dvh - 118px)}}
/* 中間那張放大（?zs=10／15／20 → --zs＝1.10／1.15／1.20） */
.kd-page.zc-page{--zs:1}
.zc-focus{width:calc(clamp(260px,24vw,340px)*var(--zs))}
.zc-demo{height:calc(clamp(220px,34vh,300px)*var(--zs))}
.zc-name{font-size:calc(clamp(19px,1.7vw,24px)*var(--zs))}
html:root body .zc-go{font-size:calc(clamp(18px,1.6vw,22px)*var(--zs))}
@media(max-height:700px),(max-width:1100px){.zc-demo{height:calc(clamp(160px,28vh,230px)*var(--zs))}}
/* 迷宮圖載入前：紅線、機器人、箭頭、星星先藏起來（圖本身照常載入顯示），載入後淡入 */
.zc-svg.zc-wait .zc-trail,.zc-svg.zc-wait .zc-walker,.zc-svg.zc-wait .zc-mk,.zc-svg.zc-wait .zc-star{opacity:0!important}
.zc-svg .zc-walker,.zc-svg .zc-mk,.zc-svg .zc-star{transition:opacity .3s}
/* 躲貓貓／對對碰紅線示範：線再粗一點（學習單比較大） */
.zc-trail.sh{stroke-width:12}
.zc-svg.sheet{background:#fff}
/* 躲貓貓小格放遊戲標題（字比較多）：自動變寬，字之間留一點空 */
html:root body .zc-chip{white-space:nowrap;padding:0 12px}

/* 2026-10-11 拖曳翻頁：平板上左右滑交給書架（上下捲動照常），拖曳時不要選到文字或圖片 */
.zc-stage{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.zc-stage.zc-dragging,.zc-stage.zc-dragging *{cursor:grabbing!important}
.zc-stage img{-webkit-user-drag:none}

/* ══ 2026-10-12【預覽】左右滑動卡片（?fx=slide）：卡片和原本中間那張同一個樣子，平的一排、前後兩排 ══ */
.zs-stage{perspective:none}
.zs-front,.zs-back{position:absolute;inset:0}
.zs-back{z-index:1;pointer-events:none}
.zs-front{z-index:5}
.zs-card{position:absolute;left:50%;top:50%;width:calc(clamp(250px,22vw,330px)*var(--zs));padding:10px 10px 8px;border-radius:26px;background:#fff;border:5px solid #CFE8C3;box-shadow:0 14px 28px rgba(31,107,58,.14);cursor:pointer;will-change:transform;transition:border-color .25s,box-shadow .25s}
.zs-card.mid{border-color:#6BBF59;box-shadow:0 0 0 7px rgba(143,203,106,.25),0 20px 40px rgba(31,107,58,.2)}
.zs-card.go{border-color:#F28C28}
.zs-card .zc-demo{height:calc(clamp(210px,32vh,290px)*var(--zs))}
.zs-card:not(.mid) .zc-go{filter:saturate(.85)}
.zs-mini{position:absolute;left:50%;top:15%;width:clamp(110px,9vw,150px);aspect-ratio:9/10;padding:6px;border-radius:16px;background:#fff;border:3px solid #E3F1DA;box-shadow:0 8px 16px rgba(31,107,58,.08);will-change:transform;scale:.8}/* 後排放在上方、比較小，像遠處那一排 */
.zs-mini img{width:100%;height:100%;object-fit:contain;filter:saturate(.7)}
@media(max-height:700px),(max-width:1100px){.zs-card .zc-demo{height:calc(clamp(150px,27vh,220px)*var(--zs))}}