/* Marriage Online (2026-11-10). Colours come from the site tokens so dark mode follows; the playing cards themselves stay cream coloured like real cards. */
.mo-hero { margin-bottom: 1rem; }
.mo-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .mo-grid { grid-template-columns: 1fr 1fr; } }
.mo-card { background: var(--card); border: 1px solid var(--border); border-radius: .9rem; padding: 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.mo-label { display: block; font-size: .8rem; color: var(--muted-foreground); margin-bottom: .2rem; }
.mo-open { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--border); font-size: .9rem; }
.mo-open:first-of-type { border-top: 0; }

/* lobby */
.mo-lobby { max-width: 34rem; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 1.2rem; }
.mo-invite { background: var(--secondary); border-radius: .7rem; padding: .8rem; margin-bottom: 1rem; }
.mo-invite-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.mo-invite-row input { flex: 1 1 14rem; min-width: 0; font-size: .85rem; }
.mo-seats { list-style: none; margin: 0; padding: 0; }
.mo-seats li { display: flex; align-items: center; gap: .6rem; padding: .5rem .2rem; border-top: 1px solid var(--border); }
.mo-seats li.mo-empty { color: var(--muted-foreground); font-style: italic; }
.mo-seat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-seat-name em { font-style: normal; font-size: .75rem; color: var(--muted-foreground); }
.mo-tag { font-size: .7rem; padding: .1rem .5rem; border-radius: 1rem; background: var(--secondary); color: var(--muted-foreground); }
.mo-host-row { display: flex; gap: .5rem; align-items: center; margin-top: .8rem; flex-wrap: wrap; }

/* table */
.mo-table { max-width: 640px; margin: 0 auto; }
.mo-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.mo-totals { display: flex; gap: .3rem; flex-wrap: wrap; }
.mo-chip { font-size: .75rem; padding: .15rem .55rem; border-radius: 1rem; background: var(--secondary); color: var(--foreground); }
.mo-chip.me { background: var(--primary-solid); color: #fff; }
.mo-status { text-align: center; font-weight: 700; padding: .45rem; border-radius: .6rem; background: var(--secondary); margin-bottom: .6rem; }
.mo-status.mine { background: #d7f3de; color: #14532d; }
:root[data-bs-theme="dark"] .mo-status.mine { background: #17452a; color: #d7f3de; }
.mo-opps { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr)); gap: .5rem; margin-bottom: .7rem; }
.mo-opp { background: var(--card); border: 2px solid var(--border); border-radius: .7rem; padding: .45rem .6rem; min-height: 4.2rem; }
.mo-opp.turn { border-color: #2e9b4f; box-shadow: 0 0 0 2px rgba(46,155,79,.25); }
.mo-opp-head { display: flex; align-items: center; justify-content: space-between; gap: .3rem; }
.mo-opp-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-eye { color: var(--muted-foreground); flex: 0 0 auto; vertical-align: middle; }
.mo-eye.on { color: #2e9b4f; }
.mo-hand-over { font-size: .7rem; }
.mo-center { display: flex; gap: 1rem; justify-content: center; align-items: flex-start; flex-wrap: wrap; padding: .5rem 0; }
.mo-pile-box { text-align: center; min-width: 4.2rem; }
.mo-lbl { font-size: .72rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; }
.mo-stock { width: 3.1rem; height: 4.3rem; border-radius: 7px; border: 2px solid #1d3f7a; background: repeating-linear-gradient(45deg, #2f6fd6, #2f6fd6 5px, #3b7fe6 5px, #3b7fe6 10px); color: #fff; font-weight: 800; font-size: .9rem; cursor: pointer; box-shadow: 1px 2px 3px rgba(0,0,0,.25); }
.mo-stock span { background: rgba(0,0,0,.45); border-radius: .6rem; padding: .05rem .4rem; }
.mo-stock:disabled { filter: grayscale(.6); cursor: default; opacity: .75; }
.mo-pilebtn { background: none; border: 0; padding: 0; cursor: pointer; }
.mo-pilebtn:disabled { cursor: default; opacity: .8; }
.mo-none { color: var(--muted-foreground); }
.mo-hidden { width: 5.2rem; min-height: 4.3rem; border: 2px dashed var(--border); border-radius: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .2rem; line-height: 1.1; color: var(--muted-foreground); }
.mo-hidden small { font-size: .62rem; text-align: center; }

/* playing cards */
.mo-card-face { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 2.9rem; height: 4.1rem; border-radius: 7px; border: 1px solid #9aa3ad; background: linear-gradient(#fffdf6, #f1ead8); color: #1f2430; font-family: Georgia, 'Times New Roman', serif; line-height: 1; padding: 0; box-shadow: 1px 2px 3px rgba(0,0,0,.2); }
.mo-card-face b { font-size: 1.15rem; }
.mo-card-face i { font-style: normal; font-size: 1.3rem; }
.mo-card-face.red { color: #c0262d; }
.mo-card-face.joker { color: #6b2fa8; background: linear-gradient(#fbf4ff, #ecdcf8); }
.mo-card-face.joker i { font-size: .62rem; letter-spacing: .02em; font-family: system-ui, sans-serif; }
.mo-card-face.maal { border: 2px solid #d4a017; box-shadow: 0 0 0 1px rgba(212,160,23,.4), 1px 2px 3px rgba(0,0,0,.2); }
.mo-card-face u { position: absolute; top: -.45rem; right: -.35rem; text-decoration: none; background: #d4a017; color: #2b1d00; font: 700 .62rem/1 system-ui, sans-serif; border-radius: 1rem; min-width: 1rem; height: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.mo-card-face.small { width: 1.9rem; height: 2.7rem; border-radius: 5px; }
.mo-card-face.small b { font-size: .75rem; }
.mo-card-face.small i { font-size: .85rem; }
.mo-card-face.small u { top: -.4rem; right: -.3rem; transform: scale(.85); }
button.mo-card-face { cursor: pointer; transition: transform .1s; }
button.mo-card-face:hover { transform: translateY(-3px); }
.mo-card-face.sel { transform: translateY(-10px); border-color: #2f6fd6; box-shadow: 0 0 0 3px rgba(47,111,214,.45), 1px 4px 6px rgba(0,0,0,.3); }
.mo-card-face.taken { outline: 2px dashed #e0702a; outline-offset: 2px; }
.mo-hand { display: flex; flex-wrap: wrap; gap: .3rem .25rem; justify-content: center; padding-top: .7rem; min-height: 4.6rem; }
.mo-melds { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.mo-meld { display: inline-flex; gap: 1px; padding: .15rem; border-radius: 6px; background: var(--secondary); }
.mo-mymelds { margin-top: .4rem; }
.mo-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: .8rem; min-height: 2.4rem; }
.mo-toast { margin-top: .6rem; text-align: center; font-weight: 600; color: #b3261e; }
:root[data-bs-theme="dark"] .mo-toast { color: #ff9b94; }
.mo-log { margin-top: .8rem; font-size: .8rem; color: var(--muted-foreground); border-top: 1px solid var(--border); padding-top: .5rem; }
.mo-log .now { color: var(--foreground); font-weight: 600; }
.mo-legend { margin-top: .6rem; }

/* result */
.mo-result { background: var(--card); border: 2px solid var(--primary-solid); border-radius: .9rem; padding: 1rem; margin-bottom: .8rem; }
.mo-table-res { width: 100%; border-collapse: collapse; }
.mo-table-res th, .mo-table-res td { padding: .4rem .35rem; border-top: 1px solid var(--border); vertical-align: top; }
.mo-table-res th { font-size: .75rem; color: var(--muted-foreground); text-align: left; border-top: 0; }
.mo-table-res .r { text-align: right; white-space: nowrap; }
.mo-table-res tr.me { background: color-mix(in srgb, var(--primary-solid) 9%, transparent); }
.mo-table-res .pos { color: #2e9b4f; font-weight: 700; }
.mo-table-res .neg { color: #d6342f; font-weight: 700; }
.mo-busy { position: fixed; inset: 0; cursor: progress; background: transparent; z-index: 5; }
@media (max-width: 575.98px) {
    .mo-card-face { width: 2.55rem; height: 3.7rem; }
    .mo-card-face b { font-size: 1rem; }
    .mo-card-face i { font-size: 1.15rem; }
    .mo-opps { grid-template-columns: repeat(2, 1fr); }
}