/* 「注音翻翻樂」分類頁：M1 機器人發牌（搭配 cat-memory.js；綠色主視覺共用樣式在 home-e.css） */
html body.fun-portal #catalog.cm-on{background:#fff!important}
html body.fun-portal #catalog.cm-on .section-heading>img{display:none!important}
html body.fun-portal #catalog.cm-on .section-heading{padding-left:0!important}
#catalog.cm-on .section-heading h1{color:#1F6B3A!important}#catalog.cm-on .section-heading p{color:#5C7A5E!important}
html body.fun-portal #catalog.cm-on .lesson-note{display:none!important}
#game-cards.cm-root{display:block!important}
.cm-root .mm-prog{font-size:13px;font-weight:800;color:#6b726d}
.cm-root .mm-start{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;background:linear-gradient(145deg,#8FCB6A,#3E9A4A 60%,#21713A);color:#fff!important;font-weight:900;font-size:16px;box-shadow:0 4px 0 #1B5E30;white-space:nowrap;text-decoration:none;min-height:0}
.m1-stage{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 0 10px}
/* 機器人置中（中線＝中間那張牌的中線），對話框放在機器人右邊、不佔置中位置 */
.m1-dealer{position:relative;z-index:30;margin-top:-58px;margin-bottom:-26px}
.m1-robot{width:170px;transition:transform .4s cubic-bezier(.34,1.56,.64,1);animation:g-bob 3.4s ease-in-out infinite}
.m1-robot.lean{transform:rotate(var(--lean,0deg)) scale(1.04)}
.m1-bubble{position:absolute;left:calc(100% + 16px);top:50%;translate:0 -50%;padding:10px 18px;border-radius:20px;background:#fff;border:2px solid var(--g-line);box-shadow:0 6px 16px rgba(46,125,50,.1);font-size:18px;font-weight:900;line-height:1.35;color:var(--g-deep);text-align:center;white-space:nowrap}
.m1-bubble b{color:#3E9A4A}
.m1-bubble::after{content:'';position:absolute;left:-11px;top:50%;width:18px;height:18px;translate:0 -50%;rotate:45deg;background:#fff;border-left:2px solid var(--g-line);border-bottom:2px solid var(--g-line)}
.m1-table{position:relative;width:min(1000px,100%);height:470px}
.m1-felt{position:absolute;left:4%;right:4%;top:14%;bottom:4%;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#F4FAEE 0,#EAF5DD 55%,rgba(234,245,221,0) 72%)}
.m1-fan{position:absolute;inset:0;z-index:2;perspective:1300px}
.m1-card{--w:220px;--h:311px;--gap:268px;--dx:calc(var(--o) * var(--gap));--rot:calc(var(--o) * 9deg);--dy:calc(max(var(--o), calc(var(--o) * -1)) * 26px);position:absolute;left:50%;top:40px;width:var(--w);height:var(--h);margin-left:calc(var(--w) / -2);color:inherit;cursor:pointer;outline:none;transform:translate(var(--dx),var(--dy)) rotate(var(--rot));transform-origin:50% 120%;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.m1-card.dealing{transform:translate(var(--fx),var(--fy)) rotate(-200deg) scale(.25);opacity:0;transition:none}
.m1-card.dealt{transition:transform .75s cubic-bezier(.22,1.25,.36,1),opacity .2s}
.m1-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.34,1.3,.64,1)}
.m1-face{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.m1-back{background-size:cover;background-position:center;border:7px solid #fff;box-shadow:0 0 0 2px #CFE6B6,0 16px 30px rgba(46,90,30,.22)}
.m1-sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 58%);background-size:250% 100%;background-position:120% 0;animation:m1-sheen 4.5s ease-in-out infinite}
@keyframes m1-sheen{0%,55%{background-position:120% 0}85%,100%{background-position:-30% 0}}
.m1-front{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;padding:16px 14px;background:#fff;border:7px solid transparent;background-clip:padding-box;box-shadow:0 0 0 4px #4CA64C,inset 0 0 0 2px #E3F0D6,0 16px 30px rgba(46,90,30,.22);text-align:center}
.m1-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 12px;border-radius:999px;background:linear-gradient(135deg,#4CA64C,#1F6B3A);color:#fff;font-weight:900;font-size:14px}
.m1-tag .g-star{width:13px;height:13px;margin-right:2px}
.m1-big{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.m1-big b{display:grid;place-items:center;min-width:52px;height:60px;padding:0 6px;border-radius:14px;background:radial-gradient(circle at 50% 120%,#E9F6D6,#F8FCF4 70%);border:3px solid #ABD08B;font-size:30px;color:#1F6B3A}
.m1-name{font-size:19px;font-weight:900;color:#1F6B3A}.m1-desc{font-size:13px;font-weight:700;color:#5C7A5E;line-height:1.45}
.m1-wait{font-weight:900;color:#8a918c}
.m1-plate{position:absolute;left:50%;top:calc(100% + 14px);translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 16px;border-radius:16px;background:#fff;border:2px solid #E3F0D6;box-shadow:0 4px 10px rgba(46,125,50,.08);white-space:nowrap;transition:transform .3s}
.m1-plate b{font-size:17px;color:#1F6B3A}
.m1-card.peek .m1-flip,.m1-card:hover .m1-flip,.m1-card:focus-visible .m1-flip{transform:rotateY(180deg)}
.m1-card:hover,.m1-card:focus-visible{transform:translate(var(--dx),calc(var(--dy) - 28px)) rotate(0deg) scale(1.06);z-index:30!important}
.m1-card:hover .m1-plate{transform:translateY(28px)}
.m1-card.chosen .m1-flip{animation:m1-chosen .7s ease}
@keyframes m1-chosen{40%{transform:rotateY(180deg) scale(1.08)}}
.m1-card.locked{cursor:default}.m1-card.locked .m1-back{filter:grayscale(.85);opacity:.75}
.m1-lock{position:absolute;inset:0;display:grid;place-items:center;font-size:54px;font-style:normal;background:rgba(255,255,255,.35)}
@media(max-width:1300px){.m1-card{--w:190px;--h:269px;--gap:228px}.m1-table{height:420px}.m1-big b{min-width:44px;height:50px;font-size:25px}.m1-desc{display:none}}
@media(max-width:1100px),(max-height:700px){.m1-dealer{margin-top:-20px}.m1-robot{width:120px}.m1-bubble{font-size:15px}.m1-card{--w:170px;--h:240px;--gap:200px}.m1-table{height:380px}.m1-name{font-size:16px}}
@media(prefers-reduced-motion:reduce){.m1-card,.m1-flip,.m1-robot,.m1-sheen{animation:none!important;transition:none!important}}