/* 由 tools/cat-memory-c1-build.cjs 從 ../redesign-preview/memory-cat2/mc.css 產生，請改來源後重跑。 */
/* 注音翻翻樂分類頁 C1：M1 機器人發牌主視覺＋登入頁綠橘星機器人＋O3 大翻牌（搭配 mc.js） */
#catalog.mc-on .cm-root{display:block!important;padding:0!important;margin:0!important}
.mc-stage{--g:#3E9A4A;--g4:#CFE8C3;--o:#F28C28;--o2:#FFB547;--ink:#2A4A30;position:relative;display:grid;grid-template-rows:auto 1fr;justify-items:center;height:clamp(520px,calc(100dvh - 300px),640px);font-family:"Park","GenSenRounded","Microsoft JhengHei",sans-serif;color:var(--ink)}
/* 機器人＋說話泡泡（機器人中線對齊中間那張牌） */
.mc-dealer{position:relative;z-index:30;display:flex;align-items:center;justify-content:center;height:clamp(140px,21vh,190px);margin-top:-8px}
.mc-robot{height:100%;aspect-ratio:505/400;transition:transform .35s;transform-origin:50% 85%}
.mc-robot.lean{transform:rotate(var(--lean,0deg))}
.mc-robot svg{width:100%;height:100%;overflow:visible}
.mc-bubble{position:absolute;left:calc(50% + clamp(100px,10vw,140px));top:50%;transform:translateY(-55%);background:#fff;border:3px solid var(--g4);border-radius:22px;padding:10px 20px;box-shadow:0 4px 0 #E6F2DF;white-space:nowrap}
.mc-bubble::before{content:"";position:absolute;left:-14px;top:50%;margin-top:-11px;border:11px solid transparent;border-left:0;border-right-color:var(--g4)}
.mc-bubble::after{content:"";position:absolute;left:-9px;top:50%;margin-top:-8px;border:8px solid transparent;border-left:0;border-right-color:#fff}
.mc-bubble span{display:block;font-size:clamp(19px,1.8vw,24px);font-weight:900;line-height:1.4;text-align:center}
.mc-bubble b{color:var(--o)}
/* 牌桌：淡綠橢圓、虛線星軌；三張大牌排成扇形 */
.mc-table{position:relative;width:min(100%,1080px);min-height:0}
.mc-felt{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mc-felt:not(.mc-top){background:radial-gradient(ellipse 46% 40% at 50% 55%,#F1F9EC,rgba(241,249,236,0) 72%)}
.mc-top{z-index:25}
.mc-fan{position:relative;z-index:10;height:100%;display:flex;justify-content:center;align-items:center;gap:clamp(18px,3vw,44px);padding-bottom:6px}
.mc-card{--cw:clamp(200px,20vw,280px);width:var(--cw);height:min(calc(var(--cw)*1.47),100%);perspective:1200px;transform:rotate(calc(var(--o)*7deg)) translateY(calc(var(--o)*var(--o)*18px));transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.mc-card.dealing{transform:translate(var(--fx),var(--fy)) scale(.25) rotate(-20deg);opacity:0;transition:none}
.mc-card.dealt{transition:transform .6s cubic-bezier(.25,1.2,.4,1),opacity .3s}
.mc-card:hover,.mc-card.open{transform:rotate(0) translateY(-10px) scale(1.04);z-index:30!important}
.mc-card.wig .mc-in{animation:mc-wig .6s}
@keyframes mc-wig{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.mc-card.nope .mc-in{animation:mc-wig .4s 2}
.mc-in{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.mc-card.open .mc-in{transform:rotateY(180deg)}
.mc-back,.mc-front{position:absolute;inset:0;backface-visibility:hidden;border-radius:26px}
.mc-back{padding:0;border:0;overflow:hidden;cursor:pointer;background:#8D9BE0;box-shadow:0 0 0 4px #fff,0 0 0 7px #B9C3EA,0 12px 20px rgba(40,50,120,.18)}
.mc-back img{width:100%;height:100%;object-fit:cover;display:block}
.mc-tap{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:#fff;color:var(--o);font:900 clamp(18px,1.6vw,22px)/1 inherit;padding:8px 16px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 0 #FFD9AE;animation:mc-pulse 1.3s infinite}
.mc-card.locked .mc-tap{color:#7C8A7E;box-shadow:0 4px 0 #DDE3DB;animation:none}
.mc-card.locked .mc-back img{filter:grayscale(.7) brightness(1.05)}
@keyframes mc-pulse{50%{transform:translateX(-50%) scale(1.07)}}
.mc-front{transform:rotateY(180deg);background:#fff;display:grid;grid-template-rows:1fr auto auto;gap:10px;padding:14px;box-shadow:0 0 0 4px var(--g4),0 12px 20px rgba(40,90,40,.16)}
.mc-pic{min-height:0;border-radius:18px;overflow:hidden;background:#EAF6E4}
.mc-pic img{width:100%;height:100%;object-fit:cover;display:block}
.mc-name{font-size:clamp(20px,2vw,28px);font-weight:900;text-align:center;white-space:nowrap}
.mc-play{display:block;text-align:center;text-decoration:none;background:linear-gradient(#FFB547,#F28C28);color:#fff;font-size:clamp(21px,2vw,28px);font-weight:900;border-radius:18px;padding:10px;box-shadow:0 6px 0 #C86A12;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.mc-play:active{transform:translateY(4px);box-shadow:0 2px 0 #C86A12}
.mc-wait{text-align:center;font-size:18px;font-weight:800;color:#7C8A7E}
.mc-card.chosen{transform:translateY(-24px) scale(1.08)!important}
@media(prefers-reduced-motion:reduce){.mc-tap,.mc-card.wig .mc-in{animation:none}}
@media(max-height:700px){.mc-stage{height:calc(100dvh - 230px)}.mc-dealer{height:118px}.mc-card{--cw:clamp(170px,16vw,220px)}}
/* 版面：機器人往上移到標題右邊的空白處（標題、回上一頁在左邊），整個舞台剛好塞滿白色主畫面，不捲動 */
.mc-stage{margin-top:-150px;height:calc(100dvh - 160px);max-height:780px}
.mc-dealer{margin-top:0}
.mc-card{--cw:clamp(190px,18vw,262px)}
.mc-fan{align-items:center;padding-bottom:18px}
@media(max-height:700px){.mc-stage{margin-top:-128px;height:calc(100dvh - 118px)}.mc-dealer{height:122px}.mc-card{--cw:clamp(150px,14.5vw,200px)}.mc-tap{font-size:16px;padding:6px 12px}.mc-name{font-size:19px}.mc-play{font-size:20px;padding:7px}}
@media(max-width:1100px) and (min-height:701px){.mc-stage{margin-top:-120px;height:calc(100dvh - 140px)}.mc-card{--cw:clamp(170px,22vw,230px)}.mc-bubble{left:calc(50% + 92px)}.mc-bubble span{font-size:18px}}
/* 示範小手（大一點）：移動用 left/top 慢慢滑過去，點一下用 transform 往下壓 */
.mc-card.demo .mc-in{transform:rotateY(180deg)}
.mc-card.demo{transform:rotate(0) translateY(-10px) scale(1.04);z-index:30!important}
.mc-hand{position:absolute;left:50%;top:60%;z-index:40;width:0;height:0;pointer-events:none;opacity:0;transition:left .85s cubic-bezier(.45,0,.25,1),top .85s cubic-bezier(.45,0,.25,1),opacity .3s}
.mc-hand.show{opacity:1}
.mc-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}
.mc-hand.tap span{animation:mc-tap .45s ease}
@keyframes mc-tap{40%{transform:translateY(-14px) scale(.86)}100%{transform:none}}
.mc-hand.tap::after{content:"";position:absolute;left:-26px;top:-30px;width:52px;height:52px;border-radius:50%;border:4px solid #FFB547;animation:mc-ring .55s ease-out forwards}
@keyframes mc-ring{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
/* 2026-10-09 使用者修改：牌正面的內容在綠框裡上下左右置中（名字依牌寬自動縮放，不會把內容擠到右邊）；拿掉「點我翻開」白色標籤（未開放的牌仍顯示 🔒）；拿掉重複的「回上一頁」 */
.mc-front{grid-template-columns:minmax(0,1fr);justify-items:stretch;align-content:center}
.mc-name{font-size:calc(var(--cw)*.083);min-width:0;overflow:hidden;text-overflow:clip}
.mc-play{font-size:calc(var(--cw)*.095)}
.mc-card:not(.locked) .mc-tap{display:none}
#catalog.mc-on #category-back{display:none!important}
/* 拿掉「回上一頁」後標題區變矮，舞台少往上移一些，機器人不被上框切到 */
.mc-stage{margin-top:-88px}
@media(max-height:700px){.mc-stage{margin-top:-70px}}
@media(max-width:1100px) and (min-height:701px){.mc-stage{margin-top:-62px}}
@media(max-height:700px){.mc-stage{height:calc(100dvh - 178px)}}
@media(max-width:1100px) and (min-height:701px){.mc-stage{height:calc(100dvh - 200px)}}
/* ── 右上裝置列（翻翻樂分類頁時取代原本的導覽鍵；和遊戲頁 O1 一樣的白底圓角、深綠線條圖示） */
body.mc-dev-on .topbar #nav{display:none!important}
.mc-dev{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:"Park","GenSenRounded","Microsoft JhengHei",sans-serif}
.mc-key,.mc-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)}
.mc-key{width:52px;padding:0;display:grid;place-items:center;cursor:pointer}
.mc-key svg{width:26px;height:26px;stroke:#2A4A30;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mc-key:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #A9C99A}
.mc-clock{display:flex;align-items:center;gap:10px;padding:0 12px 0 14px;color:#2F6B35;font-weight:900}
.mc-clock span{font-size:16px;white-space:nowrap}.mc-clock b{font:800 23px/1 Consolas,"Courier New",monospace;color:#33493A}
.mc-clock i{width:48px;height:27px;border-radius:14px;background:#CFD8CB;position:relative}.mc-clock i::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff}
.mc-key:disabled,.mc-clock.is-off{filter:grayscale(1);opacity:.4;cursor:not-allowed}
@media(max-height:700px),(max-width:1100px){.mc-key,.mc-clock{height:42px}.mc-key{width:46px}.mc-clock b{font-size:20px}.mc-clock span{font-size:14px}}

.mc-card:not(.locked) .mc-front{cursor:pointer}/* 翻開的牌，點牌面任何一處都能進遊戲 */
/* 2026-10-11 鎖頭彩色：「🔒 還沒開放」的鎖頭用彩色表情字型 */
.mc-card.locked .mc-tap{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Park",sans-serif!important;filter:none!important}