.matgo-app{--mg-gold:#f4c96b;--mg-ink:#172b37;margin:24px 0 40px;font-family:inherit}.matgo-app *{box-sizing:border-box}.matgo-app button,.matgo-app select{font:inherit}.mg-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}.mg-kicker{font-size:11px;letter-spacing:2px;color:var(--mute);font-weight:800;text-transform:uppercase}.mg-heading h1{font-size:clamp(30px,4vw,46px);letter-spacing:-1.8px;margin:3px 0}.mg-heading p{color:var(--mute);margin:0;font-size:14px}.mg-controls{display:flex;flex-wrap:wrap;gap:8px}.mg-controls button,.mg-controls select,.mg-guide button{border:1px solid var(--line,#ccd5da);background:var(--card,#fff);color:var(--text,inherit);border-radius:9px;padding:10px 13px;cursor:pointer}.mg-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:start}.mg-board{position:relative;overflow:hidden;border-radius:22px;background:radial-gradient(ellipse at 50% 35%,#23665c,#113f39 75%);border:5px solid #243d3b;box-shadow:0 14px 36px #082d2920;color:#fff;padding:20px}.mg-board:before{content:'花';position:absolute;right:10%;top:28%;font-size:230px;font-family:serif;opacity:.025;pointer-events:none}.mg-playerline{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}.mg-playerline strong{font-size:16px}.mg-score{color:var(--mg-gold);font-weight:850;font-size:24px}.mg-hidden{display:flex;gap:5px;margin:12px 0}.mg-back{width:28px;height:42px;background:repeating-linear-gradient(45deg,#8c2435 0 3px,#ab3644 3px 5px);border:2px solid #eadfca;border-radius:4px;box-shadow:0 2px 4px #0003}.mg-coach{background:#ffffff12;border:1px solid #ffffff23;border-radius:10px;padding:12px 14px;margin:14px 0;font-size:13px;min-height:60px;line-height:1.6}.mg-coach strong{color:var(--mg-gold)}.mg-center{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;min-height:230px;align-items:center;padding:10px 0 18px;border-bottom:1px solid #ffffff22}.mg-pile{align-self:start;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;color:#c6ddd5}.mg-pile .mg-back{width:50px;height:74px}.mg-field{display:flex;flex-wrap:wrap;gap:8px;align-content:center;min-height:200px}.mg-card{padding:0;border:0;border-radius:6px;background:#f7f1e3;width:60px;aspect-ratio:2/3;flex:0 0 auto;position:relative;cursor:pointer;box-shadow:0 3px 6px #0004;transition:transform .16s,box-shadow .16s;overflow:visible}.mg-card img{width:100%;height:100%;display:block;border-radius:6px;pointer-events:none}.mg-card:disabled{cursor:default;opacity:1}.mg-card:not(:disabled):hover,.mg-card:focus-visible{transform:translateY(-7px);outline:3px solid #fff;outline-offset:2px;z-index:2}.mg-card.mg-recommended{outline:3px solid var(--mg-gold);outline-offset:3px;animation:mg-glow 1.6s ease-in-out infinite}.mg-card.mg-recommended:after{content:'★';position:absolute;top:-10px;right:-7px;background:var(--mg-gold);color:#50370a;border-radius:50%;width:20px;height:20px;font-size:13px;line-height:20px}.mg-card.mg-match{outline:3px solid #8ee8cd;outline-offset:2px}.mg-hand{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;padding:19px 0 12px;min-height:125px}.mg-hand .mg-card{width:calc((100% - 81px)/10);max-width:76px;min-width:40px}.mg-capture{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.mg-capture button{background:#ffffff10;border:1px solid #ffffff24;border-radius:7px;color:#dceee8;font-size:11px;padding:6px 8px;cursor:pointer}.mg-guide{background:var(--card,#fff);border:1px solid var(--line,#dfe5e8);border-radius:16px;padding:20px;line-height:1.65;font-size:13px}.mg-guide h2{font-size:18px;margin:0 0 12px}.mg-guide h3{font-size:13px;margin:20px 0 8px}.mg-guide ol{padding-left:20px;margin:0}.mg-guide li{margin:10px 0}.mg-guide p{margin:8px 0;color:var(--mute)}.mg-scoretable{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px}.mg-scoretable b{color:#a46c15}.mg-guide details{border-top:1px solid var(--line,#ddd);padding-top:12px;margin-top:18px}.mg-guide summary{cursor:pointer;font-weight:700}.mg-log{font-size:11px;color:var(--mute);margin:0;padding-left:17px}.mg-banner{background:#f4c96b;color:#253b32;border-radius:12px;padding:17px;margin:12px 0;line-height:1.6}.mg-banner h2{margin:0;font-size:23px}.mg-banner button{border:0;border-radius:8px;background:#153e37;color:#fff;padding:10px 20px;margin:10px 8px 0 0;font-weight:800;cursor:pointer}.mg-banner button:last-child{background:#fff;color:#153e37}.mg-dialog{border:1px solid #ddd;border-radius:16px;max-width:650px;width:90%;padding:22px;background:var(--card,#fff);color:var(--text,inherit)}.mg-dialog::backdrop{background:#001e26aa}.mg-dialog .mg-card{display:inline-block;margin:5px;width:65px}.mg-dialog header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.mg-dialog button{cursor:pointer}.mg-footnote{font-size:11px;color:var(--mute);margin-top:14px}.mg-last{width:42px;border-radius:4px}.mg-statusdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#a4eac9;margin-right:6px}@keyframes mg-glow{50%{box-shadow:0 0 8px 5px #f4c96b99;transform:translateY(-5px)}}@media(prefers-reduced-motion:reduce){.mg-card.mg-recommended{animation:none}.mg-card{transition:none}}@media(max-width:1100px){.mg-layout{grid-template-columns:minmax(0,1fr) 250px}.mg-board{padding:14px}.mg-hand{gap:6px}.mg-hand .mg-card{width:calc((100% - 54px)/10);min-width:32px}.mg-field{gap:6px}.mg-card{width:53px}}@media(max-width:820px){.mg-layout{grid-template-columns:1fr}.mg-guide{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.mg-guide>h2{grid-column:1/-1}.mg-heading{align-items:flex-start;flex-direction:column}.mg-hand .mg-card{min-width:40px}.mg-center{min-height:205px}.mg-field{min-height:180px}}@media(max-width:480px){.matgo-app{margin-top:16px}.mg-board{border-width:3px;padding:12px;border-radius:15px}.mg-hand{gap:9px;max-width:330px;margin:auto}.mg-hand .mg-card{width:calc((100% - 36px)/5);max-width:52px;min-width:0}.mg-card{width:45px}.mg-center{grid-template-columns:43px 1fr;gap:10px}.mg-pile .mg-back{width:38px;height:57px}.mg-guide{display:block}.mg-hidden{gap:4px}.mg-back{width:21px;height:32px}.mg-controls button,.mg-controls select{padding:8px;font-size:12px}.mg-heading h1{font-size:34px}}
/* Korean Hwatu deck: keep original artwork intact; teaching labels sit outside it. */
.matgo-app .mg-card{aspect-ratio:103.2/168.2;border-radius:3px;background:#090b09;box-shadow:1px 3px 0 #7b191d,2px 5px 7px #0006}
.matgo-app .mg-card img{border-radius:3px;object-fit:fill}
.matgo-app .mg-month{position:absolute;top:-6px;left:-6px;width:18px;height:18px;line-height:18px;border-radius:4px;background:#fbf0d3;color:#263c30;font:800 11px/18px Arial,sans-serif;box-shadow:0 1px 3px #0005;pointer-events:none}
.matgo-app .mg-board{padding:18px;background:radial-gradient(ellipse at 50% 45%,#315f42,#1d452f 78%);border-color:#684c35;border-width:6px;box-shadow:inset 0 0 40px #081f2266,0 14px 36px #082d2920}
.matgo-app .mg-board:before{display:none}
.matgo-app .mg-hidden{position:absolute;top:20px;left:160px;margin:0;gap:4px}
.matgo-app .mg-hidden .mg-back{width:20px;height:30px;background:#af272b;border:1px solid #ebd5ad;border-radius:2px;box-shadow:1px 2px 0 #5d1517}
.matgo-app .mg-back{background:#ab292b;border-color:#d7b784;border-radius:3px;box-shadow:2px 3px 0 #611c21,3px 5px 0 #d7b784}
.matgo-app .mg-capture-piles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.matgo-app .mg-capture-piles>button{min-width:0;text-align:left;border:1px solid #ffffff16;background:#09231725;padding:5px 7px;border-radius:5px;overflow:hidden}
.matgo-app .mg-pile-label{display:flex;justify-content:space-between;gap:8px;line-height:15px;color:#d5e5d7;font-size:10px}
.matgo-app .mg-pile-label b{color:#f4d57c}
.matgo-app .mg-mini-cards{display:flex;position:relative;align-items:start;height:42px;margin-top:5px;padding-left:1px}
.matgo-app .mg-mini-cards img{width:25px;height:41px;flex:0 0 25px;border-radius:1px;box-shadow:0 1px 2px #0008;pointer-events:none}
.matgo-app .mg-mini-cards img+img{margin-left:calc(var(--overlap) - 25px)}
.matgo-app .mg-empty-pile{width:25px;height:41px;border:1px dashed #a6bf9d38;border-radius:2px}
.matgo-app .mg-coach{min-height:44px;padding:9px 12px;margin:11px 0 6px;border-radius:6px}
.matgo-app .mg-center{min-height:208px;gap:22px;padding:14px 0;grid-template-columns:60px minmax(0,1fr)}
.matgo-app .mg-pile{align-self:center}
.matgo-app .mg-field{min-height:176px;gap:17px 13px;max-width:510px;justify-content:center;margin:auto;width:100%}
.matgo-app .mg-field .mg-card{width:58px}
.matgo-app .mg-hand{padding:20px 4px 12px;min-height:133px;gap:10px}
.matgo-app .mg-hand .mg-card{width:calc((100% - 90px)/10);max-width:70px;min-width:35px}
.matgo-app .mg-art-credit{font-size:10px;color:var(--mute);margin:7px 0;line-height:1.7}
.matgo-app .mg-art-credit a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:1100px){.matgo-app .mg-field .mg-card{width:51px}.matgo-app .mg-field{max-width:390px;gap:15px 11px}.matgo-app .mg-hand{gap:7px}.matgo-app .mg-hand .mg-card{width:calc((100% - 63px)/10);min-width:30px}.matgo-app .mg-hidden{left:135px}.matgo-app .mg-hidden .mg-back{width:17px;height:27px}}
@media(max-width:820px){.matgo-app .mg-field .mg-card{width:58px}.matgo-app .mg-field{max-width:480px}.matgo-app .mg-center{min-height:220px}.matgo-app .mg-hand .mg-card{min-width:32px}.matgo-app .mg-hidden .mg-back{width:19px;height:29px}}
@media(max-width:480px){.matgo-app .mg-board{padding:12px;border-width:4px}.matgo-app .mg-hidden{top:15px;left:99px;gap:3px}.matgo-app .mg-hidden .mg-back{width:12px;height:21px}.matgo-app .mg-playerline strong{font-size:13px}.matgo-app .mg-score{font-size:22px}.matgo-app .mg-capture-piles{gap:5px;margin-top:10px}.matgo-app .mg-capture-piles>button{padding:4px}.matgo-app .mg-mini-cards{height:33px}.matgo-app .mg-mini-cards img{width:20px;height:33px;flex-basis:20px}.matgo-app .mg-mini-cards img+img{margin-left:calc(var(--overlap) - 20px)}.matgo-app .mg-empty-pile{width:20px;height:33px}.matgo-app .mg-center{grid-template-columns:36px minmax(0,1fr);gap:12px;min-height:205px}.matgo-app .mg-field{gap:14px 10px;min-height:170px}.matgo-app .mg-field .mg-card{width:42px}.matgo-app .mg-hand{gap:14px 12px;max-width:330px;padding-top:19px}.matgo-app .mg-hand .mg-card{width:calc((100% - 48px)/5);min-width:0;max-width:49px}.matgo-app .mg-heading h1{font-size:32px}.matgo-app .mg-coach{font-size:12px}.matgo-app .mg-month{width:16px;height:16px;font-size:10px;line-height:16px}}
.matgo-app .mg-field{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:490px;gap:17px 20px;align-content:center;justify-items:center}
.matgo-app .mg-month-group{display:flex;align-items:center;justify-content:center;min-width:0}
.matgo-app .mg-month-group .mg-card+.mg-card{margin-left:-25px}
.matgo-app .mg-month-group .mg-card:focus-visible,.matgo-app .mg-month-group .mg-card:not(:disabled):hover{z-index:3}
.matgo-app .mg-new-capture{animation:mg-capture-in .35s ease-out}
@keyframes mg-capture-in{from{transform:translateY(-16px);opacity:.3}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.matgo-app .mg-new-capture{animation:none}}
@media(max-width:480px){.matgo-app .mg-field{gap:16px 8px}.matgo-app .mg-month-group .mg-card+.mg-card{margin-left:-24px}}

/* Long localized labels must wrap without obscuring cards or controls. */
.matgo-app .mg-controls{flex-wrap:wrap}.matgo-app .mg-controls select{max-width:100%;min-width:0}.matgo-app .mg-controls button{white-space:normal}.matgo-app .mg-scene-card h2,.matgo-app .mg-manual-grid h3,.matgo-app .mg-guide h3{overflow-wrap:anywhere}.matgo-app .mg-map button span{min-width:0}.matgo-app .mg-map button b,.matgo-app .mg-map button small{white-space:normal}.matgo-app:lang(th){line-height:1.65}.matgo-app:lang(vi){line-height:1.55}.matgo-app #mg-language{max-width:165px}