.mj {
    --mj-ink: #183c3b;
    --mj-cream: #f5f3ea;
    --mj-gold: #e3bf79;
    background: var(--mj-cream);
    color: var(--mj-ink);
    font-family: "DM Sans", "Microsoft JhengHei", sans-serif;
    margin-top: -40px;
    padding: 68px 20px 64px;
    line-height: 1.6
}

.mj * {
    box-sizing: border-box
}

.mj-wrap {
    max-width: 1180px;
    margin: auto
}

.mj h1,
.mj h2,
.mj p {
    margin: 0
}

.mj-intro {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 28px
}

.mj-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 14px !important
}

.mj-eyebrow span {
    letter-spacing: 0;
    border: 1px solid #c9d4c6;
    border-radius: 30px;
    padding: 3px 9px;
    margin-left: 12px;
    color: #486348
}

.mj h1 {
    font-family: Georgia, "Microsoft JhengHei", serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.4;
    margin-bottom: 12px
}

.mj h1 em {
    font-style: normal;
    color: #568078
}

.mj-intro p:not(.mj-eyebrow) {
    font-size: 14px;
    color: #62726b
}

.mj-rules-link {
    color: var(--mj-ink);
    font-size: 13px;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 5px
}

.mj-game {
    border: 1px solid #d7ddd3;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 40px #183c3b12
}

.mj-toolbar {
    padding: 17px 24px;
    background: #fffef9;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center
}

.mj-toolbar>div {
    display: flex;
    align-items: center;
    gap: 12px
}

.mj-dot {
    width: 8px;
    height: 8px;
    background: #598674;
    border-radius: 50%
}

.mj-toolbar strong {
    font-size: 17px
}

.mj-tag {
    font-size: 11px;
    border: 1px solid #dce3d7;
    padding: 2px 8px;
    border-radius: 5px;
    color: #66806e
}

.mj-speed {
    font-size: 12px;
    margin: 0
}

.mj-speed select {
    border: 0;
    background: transparent;
    color: var(--mj-ink);
    font: inherit;
    padding: 4px
}

.mj button {
    font: inherit;
    cursor: pointer;
    transition: transform .15s, background .15s
}

.mj button:focus-visible,
.mj a:focus-visible,
.mj select:focus-visible,
.mj summary:focus-visible {
    outline: 3px solid #d8a13d;
    outline-offset: 4px
}

.mj-text-button {
    border: 0;
    border-left: 1px solid #dce3d7;
    padding-left: 14px;
    background: transparent;
    font-size: 12px !important;
    color: #62726b
}

.mj-table {
    position: relative;
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr) 145px;
    grid-template-rows: 34px 94px minmax(260px, auto) auto;
    column-gap: 16px;
    padding: 16px 24px 25px;
    background: radial-gradient(ellipse at 50% 40%, #27655a, #17493f 70%);
    color: #f5f4e8;
    border: 7px solid #254d43;
    box-shadow: inset 0 0 0 1px #9cba8b44, inset 0 0 75px #092a2b55
}

.mj-table-top {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    color: #b5c8b5;
    letter-spacing: 1px
}

.mj-opponent {
    font-size: 12px;
    text-align: center;
    align-self: center;
    min-width: 0
}

.mj-north {
    grid-column: 2;
    grid-row: 2
}

.mj-west {
    grid-column: 1;
    grid-row: 3
}

.mj-east {
    grid-column: 3;
    grid-row: 3
}

.mj-player-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 8px
}

.mj-opponent .mj-player-heading {
    justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 5px
}

.mj-opponent .mj-player-heading>span {
    font-size: 11px;
    opacity: .7
}

.mj-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #d4e1c2;
    color: #254c3e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    font-size: 13px
}

.mj-seat {
    border: 1px solid #bed0a95c;
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 5px;
    margin-left: 3px;
    color: #d8d8b5
}

.mj-opponent.is-active .mj-avatar,
.mj-you.is-active .mj-avatar {
    background: var(--mj-gold);
    box-shadow: 0 0 0 3px #e3bf7933
}

.mj-backs {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin: 8px auto
}

.mj-back {
    display: block;
    width: 16px;
    height: 25px;
    border: 1px solid #92b9a4;
    border-radius: 3px;
    background: linear-gradient(135deg, #8db499, #426f5a);
    box-shadow: 0 2px 0 #0d302d
}

.mj-west .mj-backs,
.mj-east .mj-backs {
    max-width: 88px;
    flex-wrap: wrap
}

.mj-center {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    align-self: center
}

.mj-welcome {
    text-align: center;
    padding: 5px 0 30px
}

.mj-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 59px;
    height: 66px;
    border: 1px solid #abc5a16b;
    border-radius: 8px;
    font-family: serif;
    font-size: 37px;
    color: #c3d3b3;
    transform: rotate(-8deg);
    margin-bottom: 15px
}

.mj-welcome h2 {
    color: #f8f4df;
    font-family: Georgia, "Microsoft JhengHei", serif;
    font-size: 28px;
    letter-spacing: 3px
}

.mj-welcome p {
    font-size: 12px;
    color: #bdcdbd;
    margin: 8px 0 20px
}

.mj-primary,
.mj-secondary {
    border: 0;
    border-radius: 7px;
    padding: 10px 20px;
    font-weight: 700 !important;
    font-size: 14px !important;
    min-height: 44px
}

.mj-primary {
    background: var(--mj-gold);
    color: #253e30
}

.mj-primary:hover {
    background: #f1d397;
    transform: translateY(-1px)
}

.mj-primary span {
    margin-left: 24px
}

.mj-secondary {
    background: #edf0e5;
    color: #254d43
}

.mj button:disabled {
    cursor: default;
    opacity: .45;
    transform: none
}

.mj-welcome small {
    display: block;
    color: #adc5b5;
    font-size: 10px;
    margin-top: 13px
}

.mj-you {
    grid-column: 1/-1;
    grid-row: 4;
    min-width: 0;
    max-width: 100%;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #b7c3a535
}

.mj-you .mj-player-heading {
    max-width: 780px;
    margin: 0 auto 8px
}

.mj-hand {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: end;
    overflow-x: auto;
    padding: 12px 4px 9px;
    min-height: 88px
}

.mj-tile {
    position: relative;
    flex: 0 0 43px;
    width: 43px;
    height: 62px;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(110deg, #fffef4, #eeecdb);
    border: 1px solid #d7d5bc;
    border-bottom: 5px solid #b3c1a3;
    border-radius: 5px;
    box-shadow: 0 3px 2px #082d2940;
    color: #284c43;
    padding: 3px;
    line-height: 1.05;
    user-select: none
}

.mj-tile .mj-rank {
    font-family: Georgia, "Microsoft JhengHei", serif;
    font-size: 25px;
    font-weight: 700
}

.mj-tile .mj-suit {
    font-size: 18px;
    font-weight: 700;
    color: #a44435;
    margin-top: 3px
}

.mj-tile.mj-honor .mj-rank {
    font-size: 29px
}

.mj-tile.mj-red {
    color: #a44435
}

.mj-tile.mj-green {
    color: #2e7151
}

.mj-tile .mj-flower {
    font-size: 24px;
    color: #806340
}

.mj-tile .mj-flower-number {
    font-size: 10px;
    color: #806340
}

.mj-hand button.mj-tile:hover:not(:disabled) {
    transform: translateY(-5px)
}

.mj-hand .mj-tile.is-selected {
    transform: translateY(-10px);
    outline: 2px solid var(--mj-gold);
    outline-offset: 2px
}

.mj-hand .mj-tile:disabled {
    opacity: 1
}

.mj-tile.is-drawn {
    margin-left: 7px
}

.mj-pips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    width: 30px;
    height: 42px
}

.mj-pip {
    align-self: center;
    justify-self: center;
    width: 8px;
    height: 8px;
    border: 2px solid #356184;
    border-radius: 50%
}

.mj-pip.is-red {
    border-color: #af5043
}

.mj-bamboo .mj-pip {
    width: 4px;
    height: 11px;
    border-radius: 2px;
    border: 0;
    background: linear-gradient(#347056 40%, #9ac49a 40%, #9ac49a 53%, #347056 53%)
}

.mj-bamboo .mj-pip.is-red {
    background: #ae5145
}

.mj-mini {
    width: 23px;
    height: 32px;
    flex-basis: 23px;
    border-bottom-width: 3px;
    border-radius: 3px;
    padding: 1px;
    box-shadow: none
}

.mj-mini .mj-rank,
.mj-mini.mj-honor .mj-rank {
    font-size: 15px
}

.mj-mini .mj-suit {
    font-size: 10px;
    margin: 0
}

.mj-mini .mj-flower {
    font-size: 15px
}

.mj-mini .mj-flower-number {
    font-size: 8px
}

.mj-mini .mj-pips {
    width: 17px;
    height: 24px;
    gap: 1px
}

.mj-mini .mj-pip {
    width: 4px;
    height: 4px;
    border-width: 1px
}

.mj-mini.mj-bamboo .mj-pip {
    width: 3px;
    height: 6px
}

.mj-pools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 220px;
    padding: 10px 0
}

.mj-pool {
    min-width: 0;
    background: #0e3a312b;
    border: 1px solid #a9c0a220;
    border-radius: 8px;
    padding: 8px
}

.mj-pool-label {
    font-size: 10px;
    color: #b6c6ad;
    display: block;
    margin-bottom: 5px
}

.mj-pool-tiles {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    align-content: start
}

.mj-pool .mj-tile.is-latest {
    outline: 2px solid var(--mj-gold);
    outline-offset: 1px
}

.mj-exposed {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    min-height: 0
}

.mj-opponent .mj-exposed {
    margin-top: 6px
}

.mj-meld {
    display: inline-flex;
    gap: 1px;
    border-bottom: 2px solid #b7c8a566;
    padding-bottom: 2px
}

.mj-concealed {
    border-bottom-style: dashed
}

.mj-controls {
    background: #fffef9;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 83px
}

.mj-controls p {
    font-size: 13px;
    color: #526658
}

.mj-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: end;
    flex-shrink: 0
}

.mj-actions button {
    min-height: 43px
}

.mj-action-tiles {
    font-size: 10px;
    display: block;
    font-weight: 400
}

.mj-result {
    background: #fff9e9;
    color: #26473b;
    border: 1px solid #d3c799;
    border-radius: 12px;
    padding: 22px;
    text-align: center;
    margin: 8px 0 20px;
    box-shadow: 0 8px 30px #082c2930
}

.mj-result h2 {
    font-size: 24px;
    color: #26473b;
    margin-bottom: 8px
}

.mj-result p {
    font-size: 12px;
    line-height: 1.8;
    margin: 8px 0
}

.mj-result .mj-winning-hand {
    display: flex;
    gap: 2px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px
}

.mj-below {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 25px 4px
}

.mj-small-label {
    font-size: 11px;
    color: #798477;
    letter-spacing: 1px
}

.mj-below p {
    font-size: 13px;
    margin: 5px 0
}

.mj-below small {
    font-size: 11px;
    color: #7f877a
}

.mj-note {
    display: flex;
    align-items: center;
    gap: 14px
}

.mj-note>span {
    font: 25px Georgia, serif;
    color: #81937c;
    border: 1px solid #ced7c6;
    border-radius: 50%;
    height: 43px;
    width: 43px;
    text-align: center;
    line-height: 43px
}

.mj-note p {
    font-size: 11px;
    color: #798477
}

.mj-note strong {
    color: #49624f;
    font-weight: 500
}

.mj-note a {
    font-size: 12px;
    color: #254d43;
    margin-left: 12px;
    text-decoration: underline;
    text-underline-offset: 4px
}

.mj-rules {
    border-top: 1px solid #d9ddcf;
    padding-top: 18px;
    scroll-margin-top: 30px
}

.mj-rules summary {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    list-style: none
}

.mj-rules summary::-webkit-details-marker {
    display: none
}

.mj-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    padding-top: 24px
}

.mj-rule-grid h2 {
    font-size: 15px;
    margin-bottom: 12px
}

.mj-rule-grid p,
.mj-rule-grid a {
    font-size: 12px;
    color: #607063;
    margin-bottom: 12px;
    line-height: 1.9
}

.mj-dialog {
    border: 0;
    border-radius: 14px;
    padding: 28px;
    max-width: min(430px, 90vw);
    color: #26473b;
    background: #fffdf2
}

.mj-dialog::backdrop {
    background: #092c2ac4
}

.mj-dialog h2 {
    font-size: 22px;
    margin-bottom: 14px
}

.mj-dialog p {
    font-size: 14px;
    margin-bottom: 24px
}

.mj-dialog form>div {
    display: flex;
    gap: 12px;
    justify-content: end
}

.mj-noscript {
    padding: 20px;
    background: #fff0cc
}

.mj [hidden] {
    display: none !important
}

@media(min-width:1000px) {
    .mj-table {
        min-height: 590px
    }

    .mj-hand {
        gap: 7px
    }

    .mj-hand .mj-tile {
        width: 47px;
        flex-basis: 47px;
        height: 65px
    }
}

@media(max-width:760px) {
    .mj {
        padding: 58px 12px 40px
    }

    .mj-intro {
        display: block
    }

    .mj-intro p:not(.mj-eyebrow) {
        /* max-width: 330px; */
        font-size: 13px
    }

    .mj-rules-link {
        display: inline-block;
        margin-top: 14px
    }

    .mj-toolbar {
        padding: 13px 14px
    }

    .mj-toolbar>div {
        gap: 7px
    }

    .mj-toolbar strong {
        font-size: 15px
    }

    .mj-tag {
        display: none
    }

    .mj-table {
        padding: 12px 10px 16px;
        grid-template-columns: 55px minmax(0, 1fr) 55px;
        column-gap: 5px;
        grid-template-rows: 35px 83px minmax(255px, auto) auto;
        border-width: 4px
    }

    .mj-table-top {
        font-size: 9px;
        letter-spacing: 0
    }

    .mj-table-top span:nth-child(2) {
        display: none
    }

    .mj-opponent .mj-player-heading {
        flex-direction: column;
        gap: 3px
    }

    .mj-opponent .mj-player-heading strong {
        font-size: 10px
    }

    .mj-opponent .mj-avatar {
        display: none
    }

    .mj-opponent .mj-seat {
        margin: 0
    }

    .mj-north .mj-player-heading {
        flex-direction: row
    }

    .mj-north .mj-avatar {
        display: inline-flex
    }

    .mj-north .mj-backs {
        max-width: none
    }

    .mj-back {
        width: 11px;
        height: 19px
    }

    .mj-west .mj-backs,
    .mj-east .mj-backs {
        max-width: 42px;
        gap: 2px
    }

    .mj-west .mj-back,
    .mj-east .mj-back {
        height: 14px;
        width: 8px
    }

    .mj-west .mj-exposed .mj-mini,
    .mj-east .mj-exposed .mj-mini {
        width: 16px;
        flex-basis: 16px;
        height: 25px
    }

    .mj-west .mj-exposed,
    .mj-east .mj-exposed {
        gap: 3px
    }

    .mj-west .mj-meld,
    .mj-east .mj-meld {
        flex-wrap: wrap;
        max-width: 35px
    }

    .mj-pools {
        gap: 5px;
        padding: 0;
        min-height: 220px
    }

    .mj-pool {
        padding: 5px;
        min-height: 110px
    }

    .mj-pool-tiles {
        gap: 2px
    }

    .mj-pool .mj-mini {
        width: 18px;
        flex-basis: 18px;
        height: 27px
    }

    .mj-pool .mj-mini .mj-rank {
        font-size: 12px
    }

    .mj-pool .mj-mini .mj-suit {
        font-size: 9px
    }

    .mj-pool .mj-mini .mj-pips {
        width: 14px;
        height: 21px
    }

    .mj-pool .mj-mini .mj-pip {
        width: 3px;
        height: 3px
    }

    .mj-pool .mj-mini.mj-bamboo .mj-pip {
        width: 2px;
        height: 5px
    }

    .mj-hand {
        justify-content: flex-start;
        gap: 4px;
        min-height: 78px;
        padding-bottom: 8px
    }

    .mj-hand .mj-tile {
        width: 35px;
        flex-basis: 35px;
        height: 54px
    }

    .mj-hand .mj-tile .mj-rank {
        font-size: 22px
    }

    .mj-hand .mj-tile .mj-suit {
        font-size: 15px
    }

    .mj-hand .mj-tile .mj-pips {
        width: 26px;
        height: 37px
    }

    .mj-hand .mj-tile .mj-pip {
        width: 7px;
        height: 7px
    }

    .mj-hand .mj-tile.mj-bamboo .mj-pip {
        width: 4px;
        height: 10px
    }

    .mj-controls {
        padding: 14px;
        display: block
    }

    .mj-controls p {
        min-height: 24px;
        font-size: 12px
    }

    .mj-actions {
        justify-content: start;
        margin-top: 10px;
        gap: 6px
    }

    .mj-actions:empty {
        margin: 0
    }

    .mj-primary,
    .mj-secondary {
        padding: 9px 14px;
        font-size: 13px !important
    }

    .mj-welcome h2 {
        font-size: 20px;
        letter-spacing: 1px
    }

    .mj-welcome p {
        font-size: 11px
    }

    .mj-welcome small {
        font-size: 9px
    }

    .mj-welcome .mj-primary {
        padding: 10px 14px
    }

    .mj-welcome .mj-primary span {
        margin-left: 8px
    }

    .mj-seal {
        width: 45px;
        height: 52px;
        font-size: 30px
    }

    .mj-you {
        margin-top: 16px
    }

    .mj-result {
        padding: 14px 8px
    }

    .mj-result h2 {
        font-size: 20px
    }

    .mj-below {
        display: block;
        padding: 20px 4px
    }

    .mj-note {
        border-top: 1px solid #d9ddcf;
        margin-top: 18px;
        padding-top: 18px;
        gap: 10px
    }

    .mj-note a {
        margin-left: auto;
        white-space: nowrap;
        font-size: 11px
    }

    .mj-rule-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }
}

@media(prefers-reduced-motion:reduce) {
    .mj button {
        transition: none
    }
}

.mj-hand-hint {
    display: none;
    font-size: 10px !important;
    color: #b5c8b5;
    text-align: center;
    margin-top: 3px !important
}

@media(max-width:760px) {
    .mj-hand-hint {
        display: block
    }
}

/* Ivory and jade tiles with vector engravings. */
.mj-tile {
    background: linear-gradient(115deg, #fffef5 0%, #f8f3df 58%, #e5dec6 100%);
    border: 1px solid #d1c4a0;
    border-top-color: #fffef2;
    border-bottom: 5px solid #41856c;
    border-radius: 6px;
    padding: 3px 4px 4px;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px 0 0 #c7ba9645,
        0 2px 0 #205442, 0 4px 5px #082d2959;
    isolation: isolate;
}

.mj-tile::before {
    content: '';
    position: absolute;
    inset: 2px 2px 3px;
    border: 1px solid #c5b68b35;
    border-radius: 3px;
    pointer-events: none;
    z-index: -1;
}

.mj-tile .mj-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 1px 0 #ffffffb3);
}

.mj-hand .mj-tile.is-selected {
    outline: 2px solid #f2ce7e;
    background: linear-gradient(115deg, #fffef8, #fff1c9);
    box-shadow: inset 1px 1px 0 #fff, 0 2px 0 #205442, 0 8px 16px #071e2666, 0 0 14px #e4bb5e40;
}

.mj-hand button.mj-tile:hover:not(:disabled) {
    border-top-color: #fff;
    box-shadow: inset 1px 1px 0 #fff, 0 2px 0 #205442, 0 7px 10px #082d2970;
}

.mj-mini {
    padding: 1px 2px;
    border-bottom-width: 3px;
    border-radius: 3px;
    box-shadow: inset 1px 1px 0 #fff, 0 1px 1px #082d294d;
}

.mj-mini::before {
    display: none;
}

.mj-back {
    position: relative;
    background: repeating-linear-gradient(45deg, transparent 0 3px, #d8c78a20 3px 4px),
        repeating-linear-gradient(-45deg, transparent 0 3px, #d8c78a20 3px 4px),
        linear-gradient(135deg, #477c68, #174f43);
    border-color: #b4bd8d;
    border-bottom: 3px solid #d5d6b8;
    box-shadow: inset 0 0 0 1px #184d40, 0 2px 2px #092b2a70;
}

.mj-back::after {
    content: '';
    position: absolute;
    inset: 4px 3px;
    border: 1px solid #d4cc985e;
    border-radius: 45%;
}

.mj-table {
    background: repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, #00000004 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at 50% 35%, #2e7061, #153f38 85%);
    border-color: #254e43;
    box-shadow: inset 0 0 0 1px #d4ba7659, inset 0 0 0 5px #163e3470, inset 0 0 80px #071e2459;
}

.mj-table::after {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid #d4ba7629;
    border-radius: 10px;
    pointer-events: none;
}

.mj-pool {
    background: #0a302a24;
    border-color: #c9c39a26;
    box-shadow: inset 0 1px 7px #0b302c14;
}

.mj-avatar {
    border: 1px solid #d6ca914d;
    background: linear-gradient(140deg, #ece7c7, #afc2a0);
    box-shadow: 0 2px 5px #082d2940;
}

.mj-seal {
    background: linear-gradient(125deg, #fff9e6, #ded7ba);
    border: 1px solid #efdfa9;
    border-bottom: 5px solid #458166;
    color: #28644c;
    font-family: KaiTi, DFKai-SB, STKaiti, serif;
    text-shadow: 0 1px #fff;
    box-shadow: inset 0 0 0 3px #fff9e661, 3px 6px 0 #103d3373, 0 12px 24px #082d294d;
}

.mj-welcome h2 {
    text-shadow: 0 2px 8px #082d2940;
}

@media (min-width:1000px) {
    .mj-hand .mj-tile {
        width: 49px;
        flex-basis: 49px;
        height: 69px;
    }
}

@media (max-width:760px) {
    .mj-hand .mj-tile {
        padding: 2px 3px 3px;
    }

    .mj-back {
        border-bottom-width: 2px;
    }

    .mj-back::after {
        inset: 3px 2px;
    }

    .mj-table::after {
        inset: 5px;
        border-radius: 6px;
    }

    .mj-pool .mj-mini {
        padding: 1px;
    }

    .mj-west .mj-exposed .mj-mini,
    .mj-east .mj-exposed .mj-mini {
        padding: 1px;
    }
}

/* Larger public tiles and opponents; phones give the rivers their own full row. */
.mj-table {
    --mj-shown-width: 34px;
    --mj-shown-height: 48px;
    grid-template-columns: 180px minmax(0, 1fr) 180px;
    grid-template-rows: 34px minmax(128px, auto) minmax(320px, auto) auto;
}

.mj-pool .mj-mini,
.mj-exposed .mj-mini,
.mj-winning-hand .mj-mini {
    width: var(--mj-shown-width, 34px);
    flex-basis: var(--mj-shown-width, 34px);
    height: var(--mj-shown-height, 48px);
    padding: 2px;
    border-radius: 4px;
}

.mj-pool-tiles {
    gap: 5px;
}

.mj-pool-label {
    font-size: 12px;
    margin-bottom: 9px;
}

.mj-pools {
    min-height: 290px;
    gap: 14px;
}

.mj-pool {
    padding: 10px;
}

.mj-exposed {
    gap: 9px;
}

.mj-opponent .mj-backs {
    flex-wrap: wrap;
    gap: 3px;
}

.mj-opponent .mj-back {
    width: 25px;
    height: 37px;
}

.mj-west .mj-backs,
.mj-east .mj-backs {
    max-width: 140px;
}

.mj-opponent .mj-player-heading {
    font-size: 14px;
    gap: 7px;
}

.mj-opponent .mj-player-heading>span {
    font-size: 12px;
}

.mj-opponent .mj-exposed {
    margin-top: 10px;
}

.mj-opponent .mj-meld {
    max-width: 100%;
}

@media (min-width:761px) and (max-width:1050px) {
    .mj-table {
        grid-template-columns: 145px minmax(0, 1fr) 145px;
        column-gap: 12px;
        padding-inline: 16px;
    }

    .mj-north .mj-backs {
        max-width: 300px;
    }
}

@media (max-width:760px) {
    .mj-table {
        --mj-shown-width: 28px;
        --mj-shown-height: 41px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto auto minmax(290px, auto) auto;
        column-gap: 8px;
        row-gap: 12px;
    }

    .mj-table-top {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .mj-north {
        grid-column: 2;
        grid-row: 2;
    }

    .mj-west {
        grid-column: 1;
        grid-row: 2;
    }

    .mj-east {
        grid-column: 3;
        grid-row: 2;
    }

    .mj-opponent {
        align-self: start;
    }

    .mj-center {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .mj-you {
        grid-row: 4;
        margin-top: 0;
    }

    .mj-opponent .mj-player-heading {
        flex-direction: column;
        gap: 4px;
    }

    .mj-opponent .mj-player-heading strong {
        font-size: 11px;
    }

    .mj-opponent .mj-player-heading>span {
        font-size: 11px;
    }

    .mj-opponent .mj-avatar {
        display: inline-flex;
        width: 23px;
        height: 23px;
        font-size: 12px;
        margin-right: 3px;
    }

    .mj-opponent .mj-backs {
        max-width: 100px;
        gap: 3px;
        margin-block: 8px;
    }

    .mj-opponent .mj-back {
        width: 18px;
        height: 27px;
    }

    .mj-opponent .mj-exposed {
        gap: 5px;
        margin-top: 8px;
    }

    .mj-opponent .mj-exposed .mj-mini {
        width: 26px;
        flex-basis: 26px;
        height: 38px;
        padding: 1px;
    }

    .mj-opponent .mj-meld {
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .mj-opponent .mj-meld:has(> .mj-tile:nth-child(4)) {
        max-width: 56px;
    }

    .mj-pools {
        min-height: 290px;
        gap: 8px;
        padding-block: 0;
    }

    .mj-pool {
        padding: 8px;
    }

    .mj-pool-label {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .mj-pool-tiles {
        gap: 4px;
    }
}
/* Catalogue entry stays visible, with larger product cards below the table. */
.mj-shop-teaser { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; background:#171945; color:#fff7de; border-top:1px solid #d5bb71; }
.mj-shop-teaser small { display:block; color:#dfc58a; font-size:10px; letter-spacing:1.5px; margin-bottom:3px; }
.mj-shop-teaser strong { color:#fff7de; font-size:16px; }
.mj-shop-teaser-cta { flex-shrink:0; color:#171945; background:#e5c77d; border-radius:7px; padding:10px 15px; font-size:12px; font-weight:700; }
.mj-shop-teaser:hover { color:#fff; background:#22254f; }
.mj-shop { scroll-margin-top:24px; margin-top:20px; padding:28px; border:1px solid #d8cda9; border-top:5px solid #d8b76c; border-radius:16px; background:linear-gradient(125deg,#fbf3df,#fffdf7 65%); box-shadow:0 14px 36px #183c3b10; }
.mj-shop-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 22px; }
.mj-shop-eyebrow { font-size:10px; font-weight:700; letter-spacing:1.5px; color:#846127; margin-bottom:8px!important; }
.mj-shop h2 { font-family:Georgia,"Microsoft JhengHei",serif; font-size:30px; font-weight:700; line-height:1.4; color:#171945; margin-bottom:8px; }
.mj-shop-heading p:not(.mj-shop-eyebrow) { color: #77816f; font-size: 12px; }
.mj-shop-parcels { flex-shrink: 0; border: 1px solid #b9c7ad; border-radius: 9px; padding: 11px 16px; color: #274d3e; font-size: 13px; font-weight: 700; background: #eff3e7; }
.mj-shop-parcels small { display: block; font-size: 10px; font-weight: 400; color: #65755e; margin-top: 3px; }
.mj-shop-parcels:hover { background: #e3ebd8; color: #183c3b; }
.mj-shop-products { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.mj-shop-carousel { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:16px; color:#657459; font-size:12px; }
.mj-shop-carousel[hidden] { display:none; }
.mj-shop-rotation { display:block; font-size:10px; margin-top:4px; color:#7a806c; }
.mj-shop-carousel>div { display:flex; gap:7px; }
.mj-shop-carousel button { border:1px solid #c4ccb7; border-radius:7px; min-width:44px; min-height:44px; padding:8px 12px; background:#fffdf6; color:#243f37; font-size:12px; }
.mj-shop-carousel button:hover:not(:disabled) { background:#ede5c9; border-color:#b29657; }
.mj-shop-carousel button:focus-visible { outline:3px solid #b18b3d; outline-offset:3px; }
.mj-product { display:flex; flex-direction:column; gap:16px; padding:14px; min-width:0; color:#244a3c; border:1px solid #e2d9c5; border-radius:12px; background:#fff; transition:border-color .15s,box-shadow .15s; }
.mj-product:hover { color:#244a3c; border-color:#b28b40; box-shadow:0 8px 22px #183c3b18; }
.mj-product-picture { position:relative; display:grid; grid-template-areas:'image'; place-items:center; width:100%; height:190px; background:#f7f6ef; border-radius:8px; overflow:hidden; }
.mj-product-picture > * { grid-area: image; }
.mj-product-picture img { position:absolute; inset:0; display:block; width:100%; height:100%; min-width:0; min-height:0; max-width:100%; max-height:100%; padding:10px; box-sizing:border-box; object-fit:contain; object-position:center; background:#f7f6ef; }
.mj-product-placeholder { font-size:12px; letter-spacing:1px; color:#737966; }
.mj-product-picture.is-missing { height:120px; background:linear-gradient(135deg,#f7efd9,#f0f2e9); border:1px dashed #d7caa8; }
.mj-product-picture.is-missing .mj-product-placeholder::before { content:'JAPAN SELECTS'; display:block; text-align:center; color:#97733c; font:700 13px Georgia,serif; letter-spacing:3px; margin-bottom:12px; }
.mj-product-copy { display:flex; flex:1; flex-direction:column; align-items:start; min-width:0; }
.mj-product-badge { color:#735422; background:#faf0d6; border-radius:4px; padding:4px 8px; font-size:10px; margin-bottom:9px; }
.mj-product-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.55; }
.mj-product-price { font-size:18px; font-weight:700; color:#171945; margin:12px 0 16px; }
.mj-product-link { display:block; width:100%; font-size:12px; font-weight:700; text-align:center; color:#272343; background:#e5c77d; border-radius:7px; margin-top:auto; padding:11px 8px; }
.mj-shop-status { padding: 22px 0; color: #687962; font-size: 13px; }
.mj-shop-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.mj-shop-footer small { color: #818775; font-size: 10px; }
.mj-shop-footer a { color: #355d43; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width:760px) {
    .mj-shop-teaser { padding:14px; gap:10px; }
    .mj-shop-teaser strong { font-size:13px; }
    .mj-shop-teaser-cta { padding:9px 10px; font-size:11px; }
    .mj-shop { padding: 18px; margin-top: 18px; }
    .mj-shop-heading { display: block; margin-bottom: 18px; }
    .mj-shop h2 { font-size: 21px; }
    .mj-shop-parcels { display: inline-block; margin-top: 16px; }
    .mj-shop-products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; touch-action:pan-y; }
    .mj-product { gap:12px; padding:12px; }
    .mj-product-picture { height:170px; }
    .mj-product-copy strong { font-size: 13px; }
}
@media (prefers-reduced-motion:reduce) { .mj-product { transition: none; } }