.mg-kit { --mg-accent:#ef653f; --mg-ink:#272b24; --mg-paper:#faf7ee; --mg-on-accent:#000000; --mg-muted:#5a5e50; --mg-line:#b4b5aa; --mg-soft-line:#deded3; --mg-field:#f4f2e9; --mg-button-radius:13px; --mg-button-height:52px; position:absolute; inset:0; z-index:5; color:var(--mg-ink); font-family:var(--mg-font,"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif); font-synthesis:none; pointer-events:none; }
.mg-kit *, .mg-kit *::before, .mg-kit *::after { box-sizing:border-box; }
.mg-kit [hidden] { display:none !important; }
.mg-kit button, .mg-kit a, .mg-kit textarea, .mg-game-controls button { font:inherit; }
.mg-kit button, .mg-kit a { touch-action:manipulation; }
.mg-kit button { cursor:pointer; border:0; color:inherit; }
.mg-kit button:disabled { opacity:.45; cursor:default; }
.mg-kit :is(button,a,textarea):focus-visible, .mg-game-controls button:focus-visible { outline:3px solid var(--mg-ink); outline-offset:4px; }
.mg-toolbar { position:absolute; inset:22px 26px auto; display:flex; justify-content:space-between; align-items:center; gap:12px; pointer-events:auto; z-index:2; }
.mg-wordmark { font-size:15px; font-weight:900; letter-spacing:-.04em; }
.mg-toolbar>div { display:flex; gap:8px; }
.mg-toolbar button { min-height:42px; min-width:42px; padding:0 14px; background:var(--mg-paper); border:1px solid var(--mg-soft-line); border-radius:25px; font-size:13px; font-weight:700; }
.mg-panel { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:88px 36px; text-align:center; pointer-events:auto; background:var(--mg-paper); overflow:auto; }
.mg-title { background:transparent; }
.mg-eyebrow { font-size:12px; letter-spacing:.12em; font-weight:800; margin:0 0 22px; }
.mg-title h1 { font-size:clamp(32px,5.5vw,66px); letter-spacing:-.055em; line-height:1.3; margin:0 0 18px; max-width:100%; overflow-wrap:anywhere; text-wrap:balance; }
.mg-description { color:var(--mg-muted); font-size:14px; line-height:1.9; max-width:35em; margin:0 0 30px; white-space:pre-line; overflow-wrap:anywhere; }
.mg-primary, .mg-secondary, .mg-x { min-height:var(--mg-button-height,52px); padding:15px 25px; border-radius:var(--mg-button-radius,13px); display:inline-flex; align-items:center; justify-content:center; gap:0; text-align:center; line-height:1.5; text-decoration:none; font-weight:800; font-size:15px; }
.mg-kit .mg-primary, .mg-game-controls .mg-primary { background:var(--mg-accent); color:var(--mg-on-accent); border:1.5px solid var(--mg-ink); box-shadow:0 4px 0 var(--mg-ink); font-size:15px; font-weight:800; }
.mg-primary:hover { transform:translateY(-2px); }
.mg-primary:active { transform:translateY(3px); box-shadow:0 1px 0 var(--mg-ink); }
.mg-kit .mg-secondary { background:transparent; border:1.5px solid var(--mg-line); }
.mg-text-button { background:none; font-size:13px !important; padding:15px; text-decoration:underline; text-underline-offset:4px; }
.mg-title-best { min-height:1em; margin:10px 0 0; font-size:12px; color:var(--mg-muted); }
.mg-credit { position:absolute; bottom:20px; left:26px; right:26px; display:flex; gap:14px; align-items:center; justify-content:space-between; font-size:11px; pointer-events:auto; z-index:2; }
.mg-author { overflow-wrap:anywhere; }
.mg-follow { color:inherit; font-weight:800; padding:8px 0; flex-shrink:0; text-underline-offset:4px; }
.mg-score { margin:0; font-size:clamp(46px,8vw,94px); line-height:1.2; font-weight:900; letter-spacing:-.06em; max-width:100%; overflow-wrap:anywhere; }
.mg-result .mg-eyebrow { margin-bottom:20px; }
.mg-detail { font-size:14px; line-height:1.8; max-width:100%; overflow-wrap:anywhere; margin:16px 0 8px; }
.mg-best { color:var(--mg-muted); font-size:12px; margin:0 0 30px; }
.mg-result-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.mg-dialog { border:1.5px solid var(--mg-ink); border-radius:20px; background:var(--mg-paper); color:var(--mg-ink); width:min(560px,calc(100% - 28px)); max-height:calc(100dvh - 32px); padding:0; pointer-events:auto; box-shadow:0 14px 60px #151c2438; }
.mg-dialog::backdrop { background:#20231cc0; backdrop-filter:blur(5px); }
.mg-dialog-inner { padding:28px; }
.mg-dialog h2 { margin:0 0 20px; font-size:23px; letter-spacing:-.04em; }
.mg-help ol { padding-left:25px; margin:28px 0; font-size:14px; line-height:1.9; }
.mg-help li { padding-left:8px; margin-bottom:12px; overflow-wrap:anywhere; }
.mg-help li::marker { color:var(--mg-ink); font-weight:900; }
.mg-help .mg-primary { width:100%; }
.mg-dialog-heading { display:flex; justify-content:space-between; align-items:start; gap:15px; }
.mg-dialog-heading button { background:none; font-size:25px; width:36px; height:36px; margin-top:-5px; }
.mg-media { border:1px solid var(--mg-soft-line); border-radius:10px; overflow:hidden; margin-bottom:14px; min-height:60px; }
.mg-media :is(img,video) { display:block; width:100%; max-height:300px; object-fit:contain; }
.mg-share-actions { display:flex; gap:10px; margin-bottom:18px; }
.mg-share-actions>* { flex:1; font-size:12px !important; min-width:0; padding:12px 10px; gap:0; text-align:center; }
.mg-post-label { font-size:11px; font-weight:800; }
.mg-post-label textarea { display:block; width:100%; resize:vertical; margin:8px 0 12px; border:1px solid var(--mg-line); border-radius:8px; padding:12px; background:var(--mg-field); color:var(--mg-ink); font-size:12px; line-height:1.7; }
.mg-kit .mg-x { background:#171717; color:white; }
.mg-share-hint, .mg-share-status { font-size:11px; line-height:1.7; margin:9px 0; overflow-wrap:anywhere; }
.mg-share-status { color:var(--mg-muted); min-height:1.7em; }
@media(max-width:520px) {
  .mg-toolbar { inset:17px 17px auto; }
  .mg-wordmark { font-size:13px; }
  .mg-toolbar button { min-height:38px; min-width:38px; padding:0 11px; }
  .mg-panel { padding:85px 20px 74px; }
  .mg-credit { left:17px; right:17px; font-size:10px; bottom:15px; gap:8px; }
  .mg-description { font-size:12px; }
  .mg-result-actions { flex-direction:column; width:min(100%,270px); }
  .mg-dialog-inner { padding:22px 18px; }
  .mg-score { font-size:clamp(38px,12vw,65px); }
}
@media(prefers-reduced-motion:reduce) { .mg-primary:hover,.mg-primary:active { transform:none; } }

.mg-title > .mg-primary, .mg-result-actions > button { min-width:180px; }
