/* 由 tools/home-h1-build.cjs 從 ../redesign-preview/home-green/hg.css 產生（固定 H1），請改來源後重跑。 */
/* 首頁綠色機器人風格 H1～H3（搭配 hg.js） */
#catalog.hg-on{--ink:#2A4A30}
#catalog.hg-on .section-heading,#catalog.hg-on>header,#catalog.hg-on .catalog-head{display:none!important}
.hg-page{height:100%;font-family:"Park","GenSenRounded","Microsoft JhengHei",sans-serif;color:#2A4A30;background:#fff}
#catalog.hg-on .kid-root{padding:0!important;height:100%}
.hg{height:calc(100dvh - 140px);max-height:800px;padding:16px 22px;box-sizing:border-box}
/* ── 入口大方塊：純色方塊＋白底學習單縮圖＋大字名稱 */
.hg-tile{position:relative;display:grid;grid-template-rows:1fr auto;gap:8px;padding:12px 12px 10px;border:0;border-radius:24px;background:var(--c);box-shadow:0 7px 0 rgba(0,0,0,.14),inset 0 3px 0 rgba(255,255,255,.3);cursor:pointer;min-height:0;min-width:0;transition:transform .12s;font:inherit}
.hg-tile:hover{transform:translateY(-3px)}
.hg-tile:active,.hg-tile.go{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.14)}
.hg-pic{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;border-radius:14px}
.hg-pic img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:10px;border:4px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.18);display:block}
.hg-tile.story .hg-pic img{object-fit:cover}
.hg-name{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:clamp(20px,2vw,28px);font-weight:900;white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.hg-name i{font-style:normal;width:1.5em;height:1.5em;display:grid;place-items:center;background:#fff;border-radius:10px;font-size:.8em;text-shadow:none;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.hg-tile.locked{filter:grayscale(.75);opacity:.7}
.hg-lock{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;font-style:normal}
.hg-tile.nope{animation:hg-no .35s 2}
@keyframes hg-no{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* ── 機器人格子 */
.hg-robo{display:grid;grid-template-rows:auto 1fr;justify-items:center;min-height:0;background:radial-gradient(ellipse at 50% 70%,#EEF8E8,#fff 70%);border-radius:24px}
.hg-say{position:relative;z-index:1;margin-top:6px;background:#fff;border:3px solid #CFE8C3;border-radius:18px;padding:6px 16px;font-size:clamp(17px,1.6vw,22px);font-weight:900;text-align:center;line-height:1.35;box-shadow:0 3px 0 #E6F2DF}
.hg-say b{color:#F28C28}
.hg-say::after{content:"";position:absolute;bottom:-12px;left:50%;margin-left:-11px;border:11px solid transparent;border-bottom:0;border-top-color:#CFE8C3}
.hg-bot{position:relative;width:100%;min-height:0}
.hg-robot-svg{position:absolute;inset:4px 0 0;width:100%;height:calc(100% - 4px);overflow:visible}
/* H1 九宮格 */
.hg-H1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:18px 26px;padding:16px 70px}
/* H2 左右兩區＋中間大機器人 */
.hg-H2{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(220px,.75fr) minmax(0,1fr);gap:18px}
.hg-side{display:flex;flex-direction:column;gap:10px;min-height:0;background:#F3FAEF;border-radius:26px;padding:10px 12px 14px}
.hg-side.or{background:#FFF6EA}
.hg-side h2{margin:0;align-self:center;display:flex;align-items:center;gap:6px;background:#3E9A4A;color:#fff;font-size:clamp(17px,1.6vw,22px);padding:4px 18px;border-radius:999px}
.hg-side.or h2{background:#E07A12}.hg-side h2 .sep{opacity:.7}
.hg-g{flex:1;display:grid;gap:14px;min-height:0}
.hg-H2 .g5{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.hg-H2 .g3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.hg-H2 .g3 .hg-tile.story{grid-column:1/3}
.hg-H2 .hg-name{font-size:clamp(17px,1.6vw,24px)}
.hg-robo.tall .hg-say{margin-top:20%}
/* H3 上方橫幅＋4×2 */
.hg-H3{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}
.hg-band{display:flex;align-items:center;justify-content:center;gap:28px;height:clamp(120px,17vh,150px)}
.hg-robo.wide{display:flex;flex-direction:row-reverse;align-items:center;gap:14px;height:100%;background:none}
.hg-robo.wide .hg-bot{width:clamp(150px,13vw,190px);height:100%}
.hg-robo.wide .hg-say{margin:0}
.hg-robo.wide .hg-say::after{bottom:auto;top:50%;left:-12px;margin:-11px 0 0;border:11px solid transparent;border-left:0;border-right-color:#CFE8C3}
.hg-legend{display:flex;gap:10px}.hg-legend span{font-size:17px;font-weight:900;padding:4px 14px;border-radius:999px;background:#EAF6E4;color:#3E9A4A}
.hg-legend .z1{background:#FFF1E0;color:#E07A12}.hg-legend .z2{background:#E7F4FB;color:#2F86B5}
.hg-H3 .g8{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:18px 22px;padding:0 20px 8px}
.hg-chip{position:absolute;top:-10px;left:14px;z-index:2;background:#fff;color:var(--c);font-size:14px;font-weight:900;padding:2px 10px;border-radius:999px;box-shadow:0 2px 0 rgba(0,0,0,.1);filter:brightness(.8)}
/* ── 右上裝置列 */
body.hg-dev-on .topbar #nav{display:none!important}
.hg-dev{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:"Park","GenSenRounded","Microsoft JhengHei",sans-serif}
.hg-key,.hg-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)}
.hg-key{width:52px;padding:0;display:grid;place-items:center;cursor:pointer}
.hg-key svg{width:26px;height:26px;stroke:#2A4A30;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hg-key:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #A9C99A}
.hg-clock{display:flex;align-items:center;gap:10px;padding:0 12px 0 14px;color:#2F6B35;font-weight:900}
.hg-clock span{font-size:16px;white-space:nowrap}.hg-clock b{font:800 23px/1 Consolas,"Courier New",monospace;color:#33493A}
.hg-clock i{width:48px;height:27px;border-radius:14px;background:#CFD8CB;position:relative}.hg-clock i::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff}
.hg-key:disabled,.hg-clock.is-off{filter:grayscale(1);opacity:.4;cursor:not-allowed}
@media(max-height:700px),(max-width:1100px){.hg-key,.hg-clock{height:42px}.hg-key{width:46px}.hg-clock b{font-size:20px}.hg-clock span{font-size:14px}
 .hg{height:calc(100dvh - 110px);padding:10px 14px}.hg-H1{gap:12px 18px;padding:10px 40px}.hg-name{font-size:18px}.hg-say{font-size:16px}}
/* 修正：蓋掉紙片森林 .kd-page 的米色紙底；學習單縮圖完整顯示（不裁切） */
.kd-page.hg-page{background:#fff!important;padding:0!important;border:0!important;box-shadow:none!important;min-height:0!important}
#catalog.hg-on{padding:10px 14px!important}
.hg{height:calc(100dvh - 128px)}
.hg-pic img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 4px);max-height:calc(100% - 4px);width:auto;height:auto;box-sizing:border-box}
.hg-tile.story .hg-pic img{width:calc(100% - 4px);height:calc(100% - 4px);object-fit:cover}
.hg-H1{padding:6px 80px 14px}
/* H2：左區加寬、名字縮小不換行；右區標題不換行 */
.hg-H2{grid-template-columns:minmax(0,1.9fr) minmax(190px,.6fr) minmax(0,1.25fr);padding:6px 14px 14px}
.hg-side h2{white-space:nowrap;font-size:clamp(15px,1.35vw,20px)}
.hg-H2 .hg-name{font-size:clamp(15px,1.35vw,21px);gap:5px}
.hg-H2 .hg-tile{padding:10px 8px 8px}
/* H3 圖例不換行 */
.hg-legend span{white-space:nowrap;font-size:16px}
.hg-H3 .g8{padding:6px 20px 12px}
@media(max-height:700px),(max-width:1100px){.hg{height:calc(100dvh - 100px)}.hg-H1{padding:4px 40px 10px}.hg-legend{display:none}.hg-H2 .hg-name{font-size:14px}.hg-name i{display:none}}
html:root body #catalog.hg-on>.section-heading,html:root body #catalog.hg-on>.catalog-back,html:root body #catalog.hg-on>.lesson-note{display:none!important}
.hg-H1{padding:6px clamp(40px,9vw,140px) 14px}
.hg-H2 .hg-pic img{width:calc(100% - 4px);max-height:calc(100% - 4px);object-fit:contain}.hg-H2 .hg-robo .hg-bot{min-height:46%}.hg-H1 .hg-say{font-size:clamp(15px,1.4vw,20px);padding:5px 12px}
/* 2026-10-09：H1 大方塊用 H3 樣式（區色＋左上角區名標籤）；滑鼠移過去／示範小手點到 → 變色效果（變亮＋白色外圈＋區色光暈，微微放大） */
.hg-H1{position:relative;row-gap:24px}
.hg-tile:hover,.hg-tile.demo{transform:translateY(-4px) scale(1.03);filter:brightness(1.12) saturate(1.1);box-shadow:0 0 0 5px #fff,0 0 0 9px var(--c),0 12px 22px rgba(0,0,0,.18);z-index:3}
.hg-tile.locked:hover,.hg-tile.locked.demo{filter:grayscale(.75);transform:none}
/* 示範小手（大一點） */
.hg-hand{position:absolute;left:50%;top:50%;z-index:20;width:0;height:0;pointer-events:none;opacity:0;transition:left .8s cubic-bezier(.45,0,.25,1),top .8s cubic-bezier(.45,0,.25,1),opacity .3s}
.hg-hand.show{opacity:1}
.hg-hand span{position:absolute;left:-30px;top:-6px;display:block;font-size:clamp(64px,6vw,86px);line-height:1;filter:drop-shadow(0 6px 6px rgba(40,60,40,.35));transform-origin:30% 0}
.hg-hand.tap span{animation:hg-tap .45s ease}
@keyframes hg-tap{40%{transform:translateY(-14px) scale(.86)}100%{transform:none}}
.hg-hand.tap::after{content:"";position:absolute;left:-26px;top:-30px;width:52px;height:52px;border-radius:50%;border:4px solid #FFB547;animation:hg-ring .55s ease-out forwards}
@keyframes hg-ring{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}

/* 2026-10-10 使用者：第一列上方被切到（左上角區名標籤＋滑鼠移過去／小手點到時往上浮）→ 大方塊縮小 5%，上下多留空間 */
.hg-H1{padding:30px calc(clamp(40px,9vw,140px) + 2.4%) 20px;row-gap:26px}
@media(max-height:700px),(max-width:1100px){.hg-H1{padding:24px calc(clamp(40px,9vw,140px) + 2.4%) 18px;row-gap:22px}}
/* 滑鼠移過去時不要被入口網站共用的 button:hover 換成米白底（顏色維持該區色） */
html:root body .hg-tile,html:root body .hg-tile:hover,html:root body .hg-tile:focus,html:root body .hg-tile.demo{background:var(--c)!important;color:#fff!important}
/* 2026-10-10：滑鼠移過去／小手點到時不往上浮、不放大（只變色＋外圈），8 個大方塊一直排得整整齊齊 */
html:root body .hg-H1 .hg-tile:hover,html:root body .hg-H1 .hg-tile.demo{transform:none!important}
html:root body .hg-H1 .hg-tile:active,html:root body .hg-H1 .hg-tile.go{transform:translateY(3px)!important}
/* 變色效果改成在方塊裡面加白框（不往外長、保留下方厚度），看起來和其他方塊一樣大、一樣齊 */
html:root body .hg-H1 .hg-tile:hover,html:root body .hg-H1 .hg-tile.demo{box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 9px rgba(255,255,255,.35),0 7px 0 rgba(0,0,0,.14)!important;filter:brightness(1.14) saturate(1.15)!important}
/* 白色內框會和白底混在一起、看起來變小 → 改黃色內框（方塊外形完全不變） */
html:root body .hg-H1 .hg-tile:hover,html:root body .hg-H1 .hg-tile.demo{box-shadow:inset 0 0 0 5px #FFE066,0 7px 0 rgba(0,0,0,.14),inset 0 3px 0 rgba(255,255,255,.3)!important}

/* 2026-10-10 使用者改選 B2「機台按鍵＋底座」、淺灰色底座縮小 20%（原本 B1）：按鈕裝在淺灰色凹槽底座裡（四角小螺絲），按下去往下沉；位置不動（來源 btn.css 的 B5，--bk＝0.8） */
html:root .hg-H1{row-gap:30px!important}
html:root body .hg-H1 .hg-tile{--d:color-mix(in srgb,var(--c),#000 32%);--l:color-mix(in srgb,var(--c),#fff 35%);transition:transform .12s,box-shadow .12s,filter .12s!important}
html:root body .hg-H1 .hg-tile .hg-chip{z-index:3}
/* ── B5＝B2 底座邊框依比例縮小（--bk：0.8／0.75／0.7＝縮小 20%／25%／30%）：每顆按鈕裝在淺灰色的凹槽底座裡（四角有小螺絲），按鈕從底座凸出來 */
html:root body .hg-H1 .hg-tile{border-radius:22px!important;background:linear-gradient(180deg,var(--l),var(--c) 30%,var(--c) 75%,color-mix(in srgb,var(--c),#000 12%))!important;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 2px 0 0 rgba(255,255,255,.2),inset -2px 0 0 rgba(0,0,0,.08),0 9px 0 var(--d),0 9px 0 3px #C9D3C5,0 0 0 calc(9px*0.8) #E7EDE3,0 0 0 calc(11px*0.8) #D2DBCD,0 calc(9px + 5px*0.8) 0 calc(11px*0.8) #BCC7B6,0 calc(14px + 8px*0.8) 20px calc(8px*0.8) rgba(30,60,30,.18)!important;transform:translateY(-4px)!important}
html:root body .hg-H1 .hg-tile::after{content:"";position:absolute;inset:calc(-6px*0.8);border-radius:calc(20px + 6px*0.8);pointer-events:none;background:radial-gradient(circle at calc(6px*0.8) calc(6px*0.8),#A9B5A4 calc(2.5px*0.8),transparent calc(3.2px*0.8)),radial-gradient(circle at calc(100% - calc(6px*0.8)) calc(6px*0.8),#A9B5A4 calc(2.5px*0.8),transparent calc(3.2px*0.8)),radial-gradient(circle at calc(6px*0.8) calc(100% - calc(6px*0.8)),#A9B5A4 calc(2.5px*0.8),transparent calc(3.2px*0.8)),radial-gradient(circle at calc(100% - calc(6px*0.8)) calc(100% - calc(6px*0.8)),#A9B5A4 calc(2.5px*0.8),transparent calc(3.2px*0.8));z-index:-1}
html:root body .hg-H1 .hg-tile:hover,html:root body .hg-H1 .hg-tile.demo{transform:translateY(3px)!important;filter:brightness(1.08)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 0 0 5px #FFE066,0 2px 0 var(--d),0 2px 0 3px #C9D3C5,0 0 0 calc(9px*0.8) #E7EDE3,0 0 0 calc(11px*0.8) #D2DBCD,0 calc(2px + 5px*0.8) 0 calc(11px*0.8) #BCC7B6,0 12px 14px calc(8px*0.8) rgba(30,60,30,.15)!important}
html:root body .hg-H1 .hg-tile:active,html:root body .hg-H1 .hg-tile.go{transform:translateY(5px)!important}
html:root .hg-H1{padding-top:36px!important;column-gap:40px!important}


html:root .hg-H1{row-gap:40px!important;padding-top:34px!important;padding-bottom:30px!important}
@media(max-height:700px){html:root .hg-H1{row-gap:30px!important;padding-top:26px!important}}
/* 2026-10-10 使用者：首頁九宮格自適應。原本 .hg 高度＝100dvh－140px 但最多 800px，全螢幕（螢幕比較高）時九宮格下面空一大塊；
   改成九宮格高度＝白色主畫面的高度（沒有上限），8 個大方塊和中間機器人跟著放大、鋪滿綠外框裡的上下空間；一般視窗（原本沒超過 800px）不變。 */
.hg-page>.hg{height:100%!important;max-height:none!important}
/* 2026-10-11 使用者：沒權限的鎖頭要彩色。原本整個方塊加灰階濾鏡，連鎖頭也變灰 → 方塊不加濾鏡，只把縮圖變灰、方塊換淡灰色，鎖頭保持彩色並放大一點 */
html:root body .hg-H1 .hg-tile.locked,html:root body .hg-H1 .hg-tile.locked:hover,html:root body .hg-H1 .hg-tile.locked.demo{filter:none!important;opacity:1!important;--c:#B9C4B5!important;--d:#8E9B8A!important;--l:#D6DED3!important}
.hg-tile.locked .hg-pic img{filter:grayscale(.85);opacity:.6}
.hg-tile.locked .hg-name{opacity:.8}
.hg-lock{font-size:58px!important;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important;filter:drop-shadow(0 4px 5px rgba(0,0,0,.28));z-index:2}