/* 深淺綠主視覺共用（來自首頁預覽 D／E／F 的 green.css） */
/* D／E／F 共用：與登入頁一致的乾淨白底＋深淺綠配色。 */
:root{--g-deep:#1F6B3A;--g-dark:#2E7D32;--g-mid:#4CA64C;--g-leaf:#6FB04F;--g-light:#ABD08B;--g-pale:#E9F6D6;--g-mist:#F4FAEE;--g-line:#CFE6B6;--g-ink:#2C3E2D}
html body.fun-portal #catalog.g-on{background:#fff!important;position:relative;isolation:isolate}
#catalog.g-on .section-heading h1{color:var(--g-deep)!important}
#catalog.g-on .section-heading p{color:#5C7A5E!important}
.g-robot{position:relative;display:block}
.g-robot img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(46,125,50,.16))}
.g-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--g-pale);color:var(--g-deep);font-weight:900;font-size:15px}
.g-go{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,#8FCB6A,#3E9A4A 60%,#21713A);color:#fff;font-weight:900;box-shadow:0 3px 0 #1B5E30,0 0 0 3px #fff;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.g-count{font-size:14px;font-weight:900;color:var(--g-dark);background:var(--g-pale);padding:2px 9px;border-radius:999px;white-space:nowrap}
@keyframes g-bob{50%{transform:translateY(-7px)}}
@keyframes g-hop{40%{transform:translateY(-22px) rotate(-8deg) scale(1.08)}}
@keyframes g-in{from{transform:translateY(34px) scale(.94);opacity:0}}
/* 綠色線條圖示動畫 */
.g-icon{display:block;width:100%;height:100%;overflow:visible;font-family:"GenSen Rounded TW","Microsoft JhengHei",sans-serif}
.g-icon .ic-star{animation:ic-tw 2.2s ease-in-out infinite}.g-icon .ic-star:nth-of-type(2n){animation-delay:-1.1s}
@keyframes ic-tw{50%{transform:scale(.55) rotate(45deg);opacity:.6}}
.g-icon .ic-flip{animation:ic-flip 4s ease-in-out infinite}@keyframes ic-flip{0%,60%,100%{transform:scaleX(1)}68%{transform:scaleX(.05)}76%{transform:scaleX(1) translateY(-5px)}}
.g-icon .ic-tilt{animation:ic-bob 3s ease-in-out infinite}
.g-icon .ic-lens{animation:ic-lens 5s ease-in-out infinite}@keyframes ic-lens{0%,100%{transform:translate(0,0)}30%{transform:translate(42px,4px)}60%{transform:translate(18px,30px)}}
.g-icon .ic-dash{animation:ic-dash 1.2s linear infinite}@keyframes ic-dash{to{stroke-dashoffset:-26}}
.g-icon .ic-bob{animation:ic-bob 2.4s ease-in-out infinite}.g-icon .ic-bob2{animation:ic-bob 2.4s ease-in-out -1.2s infinite}@keyframes ic-bob{50%{transform:translateY(-5px)}}
.g-icon .ic-ring{animation:ic-ring 2.2s ease-in-out infinite}@keyframes ic-ring{50%{transform:scale(1.08);opacity:.7}}
.g-icon .ic-odd{animation:ic-odd 2.6s ease-in-out infinite}@keyframes ic-odd{60%{transform:rotate(-10deg) scale(1.1)}66%{transform:rotate(9deg) scale(1.1)}74%{transform:none}}
.g-icon .ic-path{animation:ic-dash 1.4s linear infinite}
.g-icon .ic-draw{stroke-dasharray:150;animation:ic-draw 3.4s ease-in-out infinite}@keyframes ic-draw{0%{stroke-dashoffset:150}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-150}}
.g-icon .ic-book{animation:ic-bob 3.2s ease-in-out infinite}.g-icon .ic-rise{animation:ic-rise 3s ease-in-out infinite}@keyframes ic-rise{50%{transform:translateY(-8px)}}
.g-icon *{transform-box:fill-box}
.g-icon .ic-flip,.g-icon .ic-ring,.g-icon .ic-odd,.g-icon .ic-star{transform-box:view-box}
.g-stagebox{position:relative;display:block;background:radial-gradient(circle at 50% 115%,#E9F6D6,#FAFDF7 70%)}
.g-star{display:inline-block;width:17px;height:17px;margin-right:7px;vertical-align:-2px;background:linear-gradient(135deg,#fff,#C9E6A9);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:ic-tw 2.4s ease-in-out infinite}

/* 首頁：機器人指揮中心（使用者 2026-10-02 選定預覽 E）。只作用在首頁三區（#catalog.ge-on）。 */
html body.fun-portal #catalog.ge-on .section-heading{display:none!important}
.ge-hub{position:relative;box-sizing:border-box;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 330px minmax(0,1fr);gap:20px;align-items:start;padding:8px 6px 6px}
.ge-col{display:flex;flex-direction:column;gap:18px;position:relative}
.ge-zone{position:relative;background:#fff;border:2px solid var(--g-line);border-radius:28px;padding:14px 14px 16px;box-shadow:0 10px 24px rgba(46,125,50,.07);animation:g-in .7s cubic-bezier(.22,1.2,.36,1) backwards}
.ge-col.right .ge-zone:nth-child(2){animation-delay:.12s}
.ge-title{display:flex;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap}
.ge-title b{font-size:20px;color:#fff;padding:5px 15px;border-radius:999px;background:linear-gradient(135deg,#4CA64C,#1F6B3A);box-shadow:0 3px 0 #17502B}
.ge-title small{font-size:14px;font-weight:900;color:var(--g-deep);background:var(--g-pale);padding:3px 10px;border-radius:999px}
.ge-list{display:flex;flex-direction:column;gap:9px}
.ge-pill{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:20px;background:#fff;border:2px solid #E3F0D6;text-decoration:none;color:var(--g-ink);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,border-color .22s}
.ge-col.right .ge-pill{flex-direction:row-reverse;padding:8px 8px 8px 12px}
.ge-pill:hover,.ge-pill:focus-visible{transform:scale(1.03);border-color:#8FCB6A;box-shadow:0 10px 22px rgba(46,125,50,.18)}
.ge-pill:hover .g-go{transform:scale(1.18) rotate(360deg)}
.ge-win{position:relative;flex:none;width:140px;height:86px;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 120%,#E9F6D6,#F8FCF4 70%)}
.ge-win .g-icon{padding:6px;box-sizing:border-box}
.ge-zone.read .ge-pill{flex-direction:column;align-items:stretch;padding:8px}
.ge-zone.read .ge-win{width:auto;height:180px}
.ge-zone.read .ge-txt{flex-direction:row;align-items:center;gap:8px;padding:2px 4px}.ge-zone.read .g-go{position:absolute;right:16px;bottom:12px}
.ge-txt{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;flex:1}
.ge-col.right .ge-zone.think .ge-txt{align-items:flex-end}
.ge-txt b{font-size:19px;color:var(--g-deep);white-space:nowrap}
.ge-dot{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#fff;border:3px solid #ABD08B}
.ge-col.left .ge-dot{right:-9px}.ge-col.right .ge-dot{left:-9px}
.ge-zone.read .ge-dot{top:110px}
.ge-pill.ge-hit .ge-dot{animation:ge-dot .8s ease-out}
.ge-pill.ge-hit{animation:ge-hit .8s ease-out}
@keyframes ge-dot{30%{background:#8FCB6A;border-color:#3E9A4A;transform:scale(1.6)}}
@keyframes ge-hit{0%{box-shadow:0 0 0 0 rgba(143,203,106,.5)}100%{box-shadow:0 0 0 14px rgba(143,203,106,0)}}
/* 星光線 */
.ge-beam{fill:none;stroke:#DDEFCB;stroke-width:3;stroke-linecap:round;transition:stroke .3s,stroke-width .3s}
.ge-beam.on{stroke:#8FCB6A;stroke-width:4}
.ge-flow{fill:none;stroke:#ABD08B;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 14;animation:ge-flow 1.1s linear infinite}
@keyframes ge-flow{to{stroke-dashoffset:-32}}
/* 中央機器人 */
.ge-center{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:36px;z-index:3}
.ge-robot{width:270px;transition:transform .4s cubic-bezier(.34,1.56,.64,1);animation:g-bob 3.4s ease-in-out infinite}
.ge-robot.lean{transform:rotate(var(--lean,0deg)) scale(1.04)}
.ge-bubble{position:relative;margin-bottom:12px;padding:12px 20px;border-radius:22px;background:#fff;border:2px solid var(--g-line);box-shadow:0 6px 16px rgba(46,125,50,.1);font-size:21px;font-weight:900;line-height:1.35;color:var(--g-deep);text-align:center;min-width:220px}
.ge-bubble b{color:#3E9A4A}
.ge-bubble::after{content:'';position:absolute;left:50%;bottom:-11px;width:18px;height:18px;translate:-50% 0;rotate:45deg;background:#fff;border-right:2px solid var(--g-line);border-bottom:2px solid var(--g-line)}
.ge-bubble.talk{animation:ge-talk .45s cubic-bezier(.34,1.56,.64,1)}@keyframes ge-talk{from{transform:scale(.7);opacity:0}}
.ge-tip{margin:14px 0 6px;font-weight:900;color:#5C7A5E;font-size:16px}
.ge-crew{display:flex;align-items:flex-end;gap:10px;margin-top:10px}
.ge-crew img{height:62px;animation:g-bob 2.2s ease-in-out infinite}.ge-crew img:nth-child(2){animation-delay:-.5s;height:56px}.ge-crew img:nth-child(3){animation-delay:-1s;height:70px}.ge-crew img:nth-child(4){animation-delay:-1.5s}
@media(max-width:1300px){.ge-hub{grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr)}.ge-robot{width:200px}.ge-win{width:118px;height:80px}.ge-win .fp-stage{scale:.54}.ge-txt b{font-size:16px}.ge-bubble{font-size:17px;min-width:0}.ge-crew img{height:48px}}
@media(max-width:1100px),(max-height:700px){.ge-hub{grid-template-columns:1fr 1fr;grid-template-areas:'c c' 'l r'}.ge-center{grid-area:c;flex-direction:row;justify-content:center;gap:18px;padding-top:0}.ge-col.left{grid-area:l}.ge-col.right{grid-area:r}.ge-robot{width:150px}.ge-crew,.ge-tip{display:none}.ge-bubble{margin:0}.ge-bubble::after{left:auto;right:-11px;top:50%;bottom:auto;translate:0 -50%;rotate:-45deg}.gs-layer{display:none}.ge-zone.read .ge-win{height:140px}}

@media(min-width:1301px) and (min-height:701px){.ge-center{padding-top:56px}.ge-robot{width:290px}.ge-tip{margin-top:22px;font-size:17px}}
@media(min-width:1301px) and (min-height:860px){.ge-list{gap:12px}.ge-win{width:156px;height:100px}.ge-zone.read .ge-win{height:200px}}

#game-cards.ge-root{display:block!important}
html body.fun-portal #catalog.ge-on .lesson-note{display:none!important}
.ge-pill .g-icon{pointer-events:none}
/* 正式首頁：入口仍保有 .category-tile（測試與舊樣式依賴），蓋掉舊的卡片樣式 */
html body.fun-portal #catalog .ge-pill.category-tile{display:flex!important;flex-direction:row;align-items:center;gap:12px;min-height:0!important;grid-column:auto!important;padding:8px 12px 8px 8px!important;border:2px solid #E3F0D6!important;background:#fff!important;border-radius:20px!important;box-shadow:none}
html body.fun-portal #catalog .ge-col.right .ge-pill.category-tile{flex-direction:row-reverse;padding:8px 8px 8px 12px!important}
html body.fun-portal #catalog .ge-zone.read .ge-pill.category-tile{flex-direction:column;align-items:stretch;padding:8px!important}
html body.fun-portal #catalog .ge-pill.category-tile:hover,html body.fun-portal #catalog .ge-pill.category-tile:focus-visible{transform:scale(1.03);border-color:#8FCB6A!important;box-shadow:0 10px 22px rgba(46,125,50,.18)}
html body.fun-portal #catalog .ge-pill.ge-hit{animation:ge-hit .8s ease-out}
html body.fun-portal #catalog .ge-pill.ge-go-now{transform:scale(.96);border-color:#3E9A4A!important}
@media(max-width:1100px),(max-height:700px){.ge-robot{width:150px!important}.ge-center{padding:4px 0 6px}}
/* 2026-10-05 入口小截圖（M1 圓角卡片，透明度 20%）：home-e.js 的 htPlace() 算位置；播放鍵永遠在上面 */
html body.fun-portal #catalog .ge-pill .ht-layer{position:absolute;z-index:1;pointer-events:none;border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(30,70,40,.08)}
html body.fun-portal #catalog .ge-pill .ht-layer::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.95),inset 0 0 0 2.5px rgba(62,154,74,.14)}
html body.fun-portal #catalog .ge-pill .ht-img{position:absolute;inset:0;background-position:50% 40%;background-size:cover;background-repeat:no-repeat;opacity:.2;transition:opacity .25s}
html body.fun-portal #catalog .ge-pill:hover .ht-img{opacity:.3}
html body.fun-portal #catalog .ge-pill .g-go{z-index:3}
.ht-memory{background-image:url(/shared/funpad/home-thumbs/memory.jpg)}.ht-hide{background-image:url(/shared/funpad/home-thumbs/hide.jpg)}.ht-connect{background-image:url(/shared/funpad/home-thumbs/connect.jpg)}.ht-twins{background-image:url(/shared/funpad/home-thumbs/twins.jpg)}.ht-different{background-image:url(/shared/funpad/home-thumbs/different.jpg)}.ht-maze{background-image:url(/shared/funpad/home-thumbs/maze.jpg)}.ht-focus{background-image:url(/shared/funpad/home-thumbs/focus.jpg)}.ht-storybook{background-image:url(/shared/funpad/home-thumbs/storybook.jpg)}