.mg-page {
    --mg-green:#214f3e;
    --mg-muted:#67746a;
    --mg-line:#dfe6dc;
    --mg-paper:#fff;
    max-width:1180px;
    margin:0 auto;
    padding:clamp(20px,3vw,44px);
    color:#243d30
}
.mg-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:32px
}
.mg-heading h1 {
    font-size:clamp(38px,7vw,66px);
    letter-spacing:-.06em;
    font-weight:800;
    line-height:1.04;
    margin:8px 0 14px;
    color:var(--mg-green)
}
.mg-title-dot {
    color:#ba8834
}
.mg-heading p {
    font-size:1.05rem;
    line-height:1.7;
    max-width:620px;
    color:var(--mg-muted);
    margin:0
}
.mg-eyebrow {
    display:block;
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:750;
    color:#637760
}
.mg-back {
    display:block;
    color:var(--mg-muted);
    font-size:.85rem;
    margin-bottom:18px;
    text-decoration:none
}
.mg-page .btn-primary,.mg-page .btn-primary:visited {
    color:#fff!important;
    background:#275a43;
    border-color:#275a43
}
.mg-page .btn-primary:hover {
    background:#1c4633;
    border-color:#1c4633
}
.mg-page .btn {
    min-height:44px;
    border-radius:12px;
    padding:10px 17px;
    font-size:.88rem;
    font-weight:650;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px
}
.mg-page a:focus-visible,.mg-page button:focus-visible {
    outline:3px solid #ac7b28;
    outline-offset:4px
}
.mg-tags,.mg-actions {
    display:flex;
    gap:9px;
    align-items:center;
    flex-wrap:wrap
}
.mg-tags>span,.mg-tag {
    font-size:.74rem;
    font-weight:650;
    border:1px solid #dce4d7;
    background:#f5f7f0;
    border-radius:50px;
    padding:6px 11px
}
.mg-daily-card {
    display:grid;
    grid-template-columns:1fr 240px;
    gap:32px;
    align-items:center;
    padding:clamp(24px,5vw,48px);
    border-radius:26px;
    background:linear-gradient(125deg,#edf3e6,#f7f4e8);
    border:1px solid #dce5d4
}
.mg-daily-card h2 {
    font-size:clamp(25px,3vw,36px);
    font-weight:750;
    letter-spacing:-.035em;
    margin:14px 0
}
.mg-daily-card p {
    max-width:520px;
    line-height:1.8;
    color:#53634e
}
.mg-daily-card .btn {
    margin-top:24px
}
.mg-art {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    transform:rotate(6deg);
    padding:16px;
    border-radius:22px;
    background:#dce4d3;
    max-width:220px
}
.mg-art span {
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1;
    border-radius:12px;
    font-size:2.5rem;
    font-weight:800;
    background:#f5f1df;
    color:#4f5d39
}
.mg-art span:nth-child(2) {
    background:#e6cd8e
}
.mg-art span:nth-child(3) {
    background:#c99a4c;
    color:#fff
}
.mg-art span:last-child {
    background:#2d5e44;
    color:white;
    font-size:1.9rem
}
.mg-library {
    margin-top:46px
}
.mg-section-heading h2 {
    font-size:1.65rem;
    font-weight:750;
    letter-spacing:-.03em;
    margin:8px 0
}
.mg-section-heading p {
    color:var(--mg-muted);
    font-size:.88rem;
    line-height:1.7
}
.mg-join {
    border:1px solid var(--mg-line);
    border-radius:20px;
    padding:28px;
    background:#fff;
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center
}
.mg-join h3 {
    font-size:1.2rem
}
.mg-join p {
    color:var(--mg-muted);
    margin:8px 0 0;
    line-height:1.7;
    max-width:530px
}
.mg-filters {
    display:flex;
    align-items:end;
    gap:14px;
    margin:24px 0;
    flex-wrap:wrap
}
.mg-page label {
    display:flex;
    flex-direction:column;
    gap:8px;
    font-weight:650;
    font-size:.82rem
}
.mg-filters label {
    flex:1;
    min-width:150px;
    max-width:300px
}
.mg-page .form-control,.mg-page .form-select {
    border-color:#d7dfd3;
    border-radius:10px;
    min-height:44px;
    color:#243d30;
    font-size:.95rem;
    font-weight:400;
    background-color:#fff
}
.mg-library-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px
}
.mg-challenge {
    background:white;
    border:1px solid var(--mg-line);
    border-radius:20px;
    padding:24px;
    min-width:0
}
.mg-target-number {
    display:block;
    font-size:3.5rem;
    letter-spacing:-.06em;
    color:#315b3d;
    font-weight:800;
    margin:20px 0 10px
}
.mg-challenge h3 {
    font-size:1.1rem;
    font-weight:700;
    line-height:1.6;
    overflow-wrap:anywhere
}
.mg-challenge p {
    font-size:.8rem;
    color:var(--mg-muted)
}
.mg-challenge-bottom {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:24px;
    padding-top:16px;
    border-top:1px solid var(--mg-line);
    font-size:.8rem
}
.mg-challenge-bottom a {
    color:#24563e;
    font-weight:700
}
.mg-empty {
    color:var(--mg-muted);
    padding:30px;
    border:1px dashed var(--mg-line);
    border-radius:16px
}
.mg-player-heading {
    margin-bottom:24px
}
.mg-player-heading h1 {
    font-size:56px
}
.mg-player-heading p {
    font-size:.9rem
}
.mg-play-layout {
    display:grid;
    grid-template-columns:minmax(0,510px) minmax(220px,1fr);
    gap:clamp(24px,5vw,70px);
    align-items:start
}
.mg-play-main {
    min-width:0
}
.mg-score-strip {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px;
    margin-bottom:18px
}
.mg-score {
    display:flex;
    flex-direction:column;
    gap:4px;
    border:1px solid #e0e6da;
    background:#fff;
    border-radius:14px;
    padding:14px 18px;
    min-width:0
}
.mg-score>span {
    white-space:nowrap;
    font-size:.65rem;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#6a7966
}
.mg-score>strong {
    font-size:clamp(19px,3vw,28px);
    line-height:1.2;
    letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere
}
.mg-score-target {
    background:#2c563c;
    border-color:#2c563c;
    color:#fff
}
.mg-score-target>span {
    color:#e0eadc
}
.mg-board-wrap {
    max-width:510px
}
.mg-board {
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    padding:12px;
    border:1px solid #cbd6c4;
    border-radius:21px;
    background:#ccd7c2;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
    outline:none;
    box-shadow:0 12px 40px #26452d08
}
.mg-board:focus-visible {
    outline:3px solid #a87a25;
    outline-offset:5px
}
.mg-cell {
    position:relative;
    aspect-ratio:1;
    background:#e2e9da;
    border-radius:12px;
    min-width:0
}
.mg-tile {
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    inset:0;
    border-radius:12px;
    background:#eee9d7;
    color:#4b553b;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.045em;
    font-size:clamp(26px,4vw,48px);
    line-height:1
}
.mg-tile[data-value="4"] {
    background:#e8ddb9;
    color:#555134
}
.mg-tile[data-value="8"] {
    background:#deb96e;
    color:#443c27
}
.mg-tile[data-value="16"] {
    background:#c99649;
    color:#302e20
}
.mg-tile[data-value="32"] {
    background:#b57d36;
    color:#fff
}
.mg-tile[data-value="64"] {
    background:#98602e;
    color:#fff
}
.mg-tile[data-value="128"] {
    background:#6c853d;
    color:#fff;
    font-size:clamp(23px,3.4vw,40px)
}
.mg-tile[data-value="256"] {
    background:#567236;
    color:#fff;
    font-size:clamp(23px,3.4vw,40px)
}
.mg-tile[data-value="512"] {
    background:#39613d;
    color:#fff;
    font-size:clamp(23px,3.4vw,40px)
}
.mg-tile[data-value="1024"],.mg-tile[data-value="2048"] {
    background:#234e37;
    color:#fff;
    font-size:clamp(18px,2.9vw,33px)
}
.mg-tile[data-value="2048"] {
    background:#b38327;
    color:#202a1b;
    box-shadow:inset 0 0 0 2px #e3c16d
}
.mg-tile[data-value="4096"],.mg-tile[data-value="8192"],.mg-tile[data-value="16384"],.mg-tile[data-value="32768"],.mg-tile[data-value="65536"] {
    background:#203d31;
    color:#fff;
    font-size:clamp(16px,2.4vw,29px)
}
.mg-motion {
    inset:auto;
    z-index:3;
    pointer-events:none
}
.mg-input-help {
    text-align:center;
    color:#697561;
    font-size:.75rem;
    margin:14px 0;
    line-height:1.7
}
.mg-direction-pad {
    display:grid;
    grid-template-columns:repeat(3,46px);
    grid-template-rows:44px 44px;
    gap:6px;
    justify-content:center;
    margin:14px auto 18px
}
.mg-direction-pad button {
    border:1px solid #d6dfcf;
    border-radius:11px;
    background:#fff;
    color:#30533b;
    font-size:1.3rem
}
.mg-direction-pad button:hover {
    background:#edf2e7
}
.mg-direction-pad button:disabled {
    opacity:.45
}
.mg-direction-pad .mg-up {
    grid-column:2;
    grid-row:1
}
.mg-direction-pad button:nth-child(2) {
    grid-column:1;
    grid-row:2
}
.mg-direction-pad button:nth-child(3) {
    grid-column:2;
    grid-row:2
}
.mg-direction-pad button:nth-child(4) {
    grid-column:3;
    grid-row:2
}
.mg-play-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top:18px;
    border-top:1px solid var(--mg-line)
}
.mg-save-state {
    color:#5d7158;
    font-size:.75rem;
    white-space:nowrap
}
.mg-save-state small {
    display:block;
    margin-top:6px;
    color:#7b8575;
    font-size:.7rem
}
.mg-save-dot {
    display:inline-block;
    width:6px;
    height:6px;
    background:#5b8750;
    border-radius:50%;
    margin-right:7px
}
.mg-save-dot.pending {
    background:#bb8732
}
.mg-play-toolbar .btn {
    font-size:.76rem;
    padding:8px 12px
}
.mg-play-aside {
    display:grid;
    gap:22px;
    padding-top:0
}
.mg-how-card,.mg-tip-card {
    background:#fff;
    border:1px solid var(--mg-line);
    border-radius:20px;
    padding:26px
}
.mg-how-card h2,.mg-tip-card h2 {
    font-size:1.25rem;
    line-height:1.5;
    letter-spacing:-.025em;
    font-weight:750;
    margin:12px 0 18px
}
.mg-merge-example {
    display:flex;
    gap:12px;
    align-items:center;
    margin:24px 0
}
.mg-merge-example span {
    display:flex;
    width:54px;
    height:54px;
    border-radius:11px;
    align-items:center;
    justify-content:center;
    background:#eee9d7;
    font-size:1.7rem;
    font-weight:750;
    color:#4b553b
}
.mg-merge-example span:last-child {
    background:#e8ddb9
}
.mg-merge-example b {
    font-weight:500;
    color:#819075
}
.mg-how-card ol {
    padding-left:20px;
    line-height:1.85;
    font-size:.87rem;
    color:#5a6b52
}
.mg-how-card li {
    padding-left:5px;
    margin-bottom:12px
}
.mg-rule-note {
    border-top:1px solid var(--mg-line);
    padding-top:16px;
    margin-bottom:0;
    color:#6c7863;
    font-size:.8rem;
    line-height:1.8
}
.mg-tip-card {
    background:#f1f4e9
}
.mg-tip-card p {
    font-size:.88rem;
    line-height:1.85;
    color:#5b6c50;
    margin-bottom:0
}
.mg-fair-note {
    color:#6d7b62;
    font-size:.77rem;
    line-height:1.8;
    padding:0 5px
}
.mg-outcome {
    border:1px solid #d3deca;
    border-radius:18px;
    padding:24px;
    margin:0 0 22px;
    background:#f0f4e9
}
.mg-outcome h2 {
    font-weight:750;
    font-size:1.5rem;
    margin:8px 0 12px
}
.mg-outcome p {
    color:#5f7154;
    font-size:.88rem;
    line-height:1.8
}
.mg-won {
    background:#edf3df;
    border-color:#b6c89d
}
.mg-move-message {
    font-size:.82rem;
    color:#5c6b53;
    margin:18px 0
}
.mg-error,.mg-notice {
    padding:22px;
    border:1px solid #ddc5b9;
    background:#fff6ef;
    border-radius:16px;
    margin:24px 0;
    line-height:1.8
}
.mg-notice {
    background:#eff5e7;
    border-color:#cfddc1
}
.mg-loading {
    padding:80px 20px;
    text-align:center;
    color:#63775b
}
.mg-studio-note {
    padding:20px 24px;
    border-radius:16px;
    border:1px solid var(--mg-line);
    background:#f0f4e9;
    line-height:1.8;
    font-size:.88rem
}
.mg-table-scroll {
    overflow-x:auto
}
.mg-admin-table {
    width:100%;
    background:#fff;
    font-size:.88rem
}
.mg-admin-table th,.mg-admin-table td {
    padding:18px;
    border-bottom:1px solid var(--mg-line);
    vertical-align:middle
}
.mg-admin-table thead th {
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#66765d;
    background:#eef3e7
}
.mg-admin-table a {
    color:#28563d
}
.mg-admin-table small {
    display:block;
    font-weight:400;
    color:#75826b;
    margin-top:6px
}
.mg-pagination {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:24px
}
.mg-editor .mg-heading h1,.mg-admin .mg-heading h1 {
    font-size:clamp(28px,4vw,42px);
    letter-spacing:-.04em
}
.mg-editor-fieldset {
    border:0;
    margin:0;
    padding:0;
    min-width:0
}
.mg-editor-layout {
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);
    gap:24px;
    align-items:start
}
.mg-editor-panel {
    border:1px solid var(--mg-line);
    border-radius:20px;
    padding:24px;
    background:#fff;
    margin-bottom:22px;
    min-width:0
}
.mg-editor-panel h2 {
    font-size:1.2rem;
    font-weight:750;
    margin-bottom:22px;
    letter-spacing:-.02em
}
.mg-editor-panel label {
    margin-bottom:18px
}
.mg-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
.mg-field-help {
    font-size:.8rem;
    color:#66765b;
    line-height:1.85
}
.mg-examples {
    margin-top:26px;
    border-top:1px solid var(--mg-line);
    padding-top:20px
}
.mg-examples>strong {
    display:block;
    font-size:.8rem;
    margin-bottom:14px
}
.mg-preview-panel {
    position:sticky;
    top:20px
}
.mg-preview-panel .mg-board {
    gap:7px;
    padding:9px;
    border-radius:16px
}
.mg-preview-panel .mg-cell,.mg-preview-panel .mg-tile {
    border-radius:8px
}
.mg-preview-score {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin:18px 0;
    font-size:.85rem
}
.mg-preview-score strong {
    margin-left:8px
}
.mg-preview-score .btn {
    font-size:.7rem;
    padding:8px 11px
}
.mg-editor-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    border:1px solid var(--mg-line);
    padding:22px;
    border-radius:18px;
    background:#fff
}
.mg-editor-toolbar>div>small {
    display:block;
    color:#6b7962;
    font-size:.75rem;
    margin-top:6px
}
.mg-editor-toolbar .btn {
    font-size:.78rem
}
@media(max-width:1000px) {
    .mg-play-layout {
        grid-template-columns:minmax(0,1fr);
        max-width:510px;
        margin:auto
    }
    .mg-play-aside {
        grid-template-columns:1fr
    }
    .mg-library-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .mg-daily-card {
        grid-template-columns:1fr 160px
    }
    .mg-art span {
        font-size:1.8rem
    }
    .mg-art span:last-child {
        font-size:1.25rem
    }
    .mg-join {
        align-items:start;
        flex-direction:column
    }
    .mg-editor-layout {
        grid-template-columns:1fr
    }
    .mg-preview-panel {
        max-width:510px;
        margin-inline:auto
    }
    .mg-editor-toolbar {
        align-items:start;
        flex-direction:column
    }
}
@media(max-width:600px) {
    .mg-page {
        padding:24px 16px
    }
    .mg-heading {
        gap:16px;
        align-items:start;
        flex-direction:column
    }
    .mg-player-heading {
        flex-direction:row;
        align-items:center
    }
    .mg-player-heading h1 {
        font-size:48px
    }
    .mg-player-heading>.mg-tags {
        align-items:end;
        flex-direction:column
    }
    .mg-heading p {
        font-size:.95rem
    }
    .mg-daily-card {
        grid-template-columns:1fr;
        gap:0;
        padding:26px
    }
    .mg-art {
        display:none
    }
    .mg-daily-card h2 {
        font-size:28px
    }
    .mg-library-grid {
        grid-template-columns:1fr
    }
    .mg-library {
        margin-top:32px
    }
    .mg-board {
        gap:8px;
        padding:10px;
        border-radius:17px
    }
    .mg-cell,.mg-tile {
        border-radius:9px
    }
    .mg-score {
        padding:12px
    }
    .mg-score-strip {
        gap:8px
    }
    .mg-score>strong {
        font-size:23px
    }
    .mg-play-toolbar {
        align-items:start
    }
    .mg-play-toolbar>.mg-actions {
        justify-content:end;
        gap:6px
    }
    .mg-how-card,.mg-tip-card {
        padding:24px
    }
    .mg-fields {
        grid-template-columns:1fr
    }
    .mg-editor-panel {
        padding:20px
    }
    .mg-admin-table th,.mg-admin-table td {
        padding:14px
    }
    .mg-join {
        padding:24px
    }
    .mg-section-heading h2 {
        font-size:1.5rem
    }
    .mg-tags>span {
        font-size:.65rem;
        padding:5px 9px
    }
}
@media(prefers-reduced-motion:reduce) {
    .mg-page * {
        animation:none!important;
        transition:none!important
    }
}