.mb-page {
    --mb-ink: #153c36;
    --mb-muted: #66827d;
    --mb-mint: #36cfa5;
    --mb-mint-dark: #17856d;
    --mb-blue: #4b78e8;
    --mb-border: rgba(24, 88, 76, .14);
    color: var(--mb-ink);
}

.mb-hero, .mb-room-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.mb-hero h1, .mb-room-header h1 {
    margin: 2px 0 8px;
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    letter-spacing: -.04em;
}

.mb-hero p { margin: 0; color: var(--mb-muted); }
.mb-eyebrow, .mb-kicker {
    margin: 0 !important;
    color: var(--mb-mint-dark) !important;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.mb-solo-links { display: flex; gap: 8px; flex-wrap: wrap; }
.mb-solo-links a, .mb-back {
    color: var(--mb-mint-dark);
    font-weight: 700;
    text-decoration: none;
}
.mb-solo-links a {
    padding: 9px 12px;
    border: 1px solid var(--mb-border);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
}

.mb-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 14px 18px;
    border: 1px solid rgba(54, 207, 165, .34);
    border-radius: 16px;
    background: rgba(54, 207, 165, .1);
    font-weight: 700;
}

.mb-lobby-layout {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr);
    gap: 18px;
    align-items: start;
}

.mb-panel {
    padding: 20px;
    border: 1px solid var(--mb-border);
    border-radius: 22px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 14px 40px rgba(22, 73, 63, .08);
    backdrop-filter: blur(14px);
}

.mb-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.mb-panel-head h2 { margin: 2px 0 0; font-size: 1.15rem; }
.mb-icon-btn {
    width: 38px; height: 38px;
    border: 1px solid var(--mb-border);
    border-radius: 50%;
    background: #fff;
    color: var(--mb-ink);
    font-size: 1.25rem;
    cursor: pointer;
}
.mb-icon-btn.is-loading { animation: mb-spin .7s linear infinite; }
@keyframes mb-spin { to { transform: rotate(360deg); } }

.mb-form { display: grid; gap: 13px; }
.mb-form label { display: grid; gap: 6px; }
.mb-form label > span { color: var(--mb-muted); font-size: .78rem; font-weight: 750; }
.mb-form input, .mb-form select, .mb-join-form input {
    width: 100%;
    min-height: 43px;
    padding: 9px 11px;
    border: 1px solid var(--mb-border);
    border-radius: 12px;
    background: #fff;
    color: var(--mb-ink);
    font: inherit;
}
.mb-form input:focus, .mb-form select:focus, .mb-join-form input:focus {
    border-color: var(--mb-mint);
    outline: 3px solid rgba(54, 207, 165, .15);
}
.mb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb-lock-switch {
    display: flex !important;
    align-items: center;
    gap: 9px !important;
    padding: 11px 12px;
    border: 1px solid var(--mb-border);
    border-radius: 12px;
    cursor: pointer;
}
.mb-lock-switch input { width: 18px; min-height: 18px; accent-color: var(--mb-mint-dark); }
.mb-lock-switch span { color: var(--mb-ink) !important; }
.mb-submit { justify-self: stretch; }

.mb-room-list { display: grid; gap: 11px; }
.mb-room-card {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(190px, auto) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--mb-border);
    border-radius: 16px;
    background: #fff;
}
.mb-room-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mb-room-title h3 { overflow: hidden; margin: 0; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.mb-room-title p { margin: 2px 0 0; color: var(--mb-muted); font-size: .75rem; }
.mb-lock { font-size: 1.25rem; }
.mb-room-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.mb-room-tags span {
    padding: 4px 7px;
    border-radius: 999px;
    background: #edf7f4;
    color: #3d6b62;
    font-size: .68rem;
    font-weight: 700;
}
.mb-join-form { display: flex; align-items: center; gap: 7px; }
.mb-join-form input { width: 130px; min-height: 37px; }
.mb-empty { padding: 28px; color: var(--mb-muted); text-align: center; }

.mb-room-header { align-items: center; }
.mb-back { display: inline-block; margin-bottom: 7px; font-size: .82rem; }
.mb-room-heading { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mb-room-heading h1 { margin: 0; font-size: 1.7rem; }
.mb-status, .mb-access {
    padding: 5px 9px;
    border-radius: 999px;
    background: #e8f8f3;
    color: var(--mb-mint-dark);
    font-size: .72rem;
    font-weight: 800;
}
.mb-access { background: #eef2ff; color: #536cb5; }

.mb-game-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}
.mb-arena {
    min-height: 650px;
    overflow: hidden;
    border: 1px solid rgba(50, 110, 98, .18);
    border-radius: 24px;
    background: radial-gradient(circle at 50% 20%, #f9fffd, #e5f4ef 70%, #d8ebe5);
    box-shadow: 0 18px 50px rgba(25, 69, 61, .12);
}
.mb-hud {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--mb-border);
    background: rgba(255,255,255,.82);
}
.mb-hud > div { display: grid; gap: 2px; padding: 14px 16px; border-right: 1px solid var(--mb-border); }
.mb-hud > div:last-child { border-right: 0; }
.mb-hud span { color: var(--mb-muted); font-size: .7rem; font-weight: 700; }
.mb-hud strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
#mbBonusState.is-live { color: var(--mb-mint-dark); }

.mb-waiting, .mb-result {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 540px;
    padding: 30px;
    text-align: center;
}
.mb-waiting h2 { margin: 22px 0 5px; }
.mb-waiting p, .mb-result p { color: var(--mb-muted); }
.mb-wait-orbit {
    position: relative;
    width: 150px;
    height: 150px;
    border: 1px dashed rgba(23, 133, 109, .4);
    border-radius: 50%;
    animation: mb-spin 16s linear infinite;
}
.mb-wait-orbit span {
    position: absolute;
    display: grid;
    width: 46px; height: 46px;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(25,70,60,.12);
    color: var(--mb-mint-dark);
    font-size: 1.4rem;
    font-weight: 800;
}
.mb-wait-orbit span:nth-child(1) { top: -10px; left: 50px; }
.mb-wait-orbit span:nth-child(2) { right: -10px; bottom: 18px; }
.mb-wait-orbit span:nth-child(3) { left: -10px; bottom: 18px; }

.mb-puzzle { padding: clamp(15px, 3vw, 30px); }
.mb-prompt { display: grid; justify-items: center; gap: 4px; margin-bottom: 12px; text-align: center; }
.mb-prompt p { margin: 0; color: var(--mb-muted); font-weight: 700; }
.mb-prompt strong {
    display: grid;
    min-width: 86px;
    min-height: 72px;
    place-items: center;
    color: var(--mb-ink);
    font-family: "Yu Gothic UI", "Meiryo", sans-serif;
    font-size: 3.25rem;
    line-height: 1;
}
.mb-prompt strong.is-odd-mode { font-size: 1.4rem; }
.mb-prompt span { color: var(--mb-muted); font-size: .72rem; }
.mb-feedback { height: 24px; margin-bottom: 7px; text-align: center; font-weight: 800; }
.mb-feedback.is-correct { color: var(--mb-mint-dark); }
.mb-feedback.is-wrong { color: #d64e5e; }
.mb-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: clamp(3px, .6vw, 7px);
    width: min(100%, 840px);
    margin: auto;
}
.mb-grid.is-scattered {
    position: relative;
    display: block;
    width: min(100%, 840px);
    height: 405px;
    overflow: hidden;
    border: 1px solid rgba(44, 105, 92, .12);
    border-radius: 18px;
    background:
        radial-gradient(circle at 18% 20%, rgba(54,207,165,.1), transparent 25%),
        radial-gradient(circle at 82% 75%, rgba(75,120,232,.09), transparent 28%),
        rgba(255,255,255,.72);
}
.mb-cell {
    aspect-ratio: 1;
    min-width: 0;
    border: 1px solid rgba(44, 105, 92, .14);
    border-radius: clamp(5px, .8vw, 10px);
    background: rgba(255,255,255,.93);
    color: #183f38;
    font-family: "Yu Gothic UI", "Meiryo", sans-serif;
    font-size: clamp(.72rem, 1.85vw, 1.35rem);
    font-weight: 750;
    cursor: pointer;
    transition: transform .1s ease, background .1s ease, box-shadow .1s ease;
}
.mb-grid.is-scattered .mb-cell {
    --mb-x: 50%;
    --mb-y: 50%;
    --mb-rotation: 0deg;
    --mb-font-size: 22px;
    --mb-hit: 38px;
    --mb-zoom: 1;
    position: absolute;
    left: var(--mb-x);
    top: var(--mb-y);
    display: grid;
    width: var(--mb-hit);
    height: var(--mb-hit);
    place-items: center;
    aspect-ratio: auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: var(--mb-font-size);
    transform: translate(-50%, -50%) rotate(var(--mb-rotation)) scale(var(--mb-zoom));
}
.mb-grid.is-scattered .mb-cell:hover {
    --mb-zoom: 1;
    transform: translate(-50%, -50%) rotate(var(--mb-rotation)) scale(var(--mb-zoom));
    background: transparent;
    text-shadow: 0 5px 13px rgba(27,86,73,.2);
}
.mb-grid.is-scattered .mb-cell.is-picked { color: #078264; background: transparent; text-shadow: 0 0 13px rgba(54,207,165,.7); }
.mb-grid.is-scattered .mb-cell.is-wrong { color: #d64e5e; background: transparent; animation: mb-scatter-wrong .25s ease; }
.mb-cell:hover { z-index: 1; transform: translateY(-1px) scale(1.05); box-shadow: 0 7px 15px rgba(27,86,73,.15); }
.mb-cell:focus-visible { outline: 3px solid rgba(75,120,232,.45); }
.mb-cell.is-picked { background: #dff8f0; }
.mb-cell.is-wrong { background: #ffe3e7; animation: mb-shake .25s ease; }
@keyframes mb-shake { 30% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }
@keyframes mb-scatter-wrong { 50% { opacity: .45; filter: blur(.7px); } }

.mb-side { display: grid; gap: 14px; }
.mb-scoreboard { display: grid; gap: 7px; }
.mb-player {
    display: grid;
    grid-template-columns: 24px 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px;
    border-radius: 12px;
    background: #f5faf8;
}
.mb-player.is-me { box-shadow: inset 0 0 0 2px rgba(54,207,165,.45); }
.mb-rank { color: var(--mb-muted); font-size: .76rem; font-weight: 800; text-align: center; }
.mb-avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--avatar); color: #fff; font-weight: 800; }
.mb-player-name { overflow: hidden; font-size: .82rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mb-player-name small { color: var(--mb-mint-dark); font-size: .55rem; }
.mb-player-score { font-weight: 850; font-variant-numeric: tabular-nums; }
.mb-player-score small { margin-left: 2px; color: var(--mb-muted); font-size: .6rem; }
.mb-host-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mb-notice { min-height: 20px; margin: 0; color: var(--mb-mint-dark); font-size: .8rem; text-align: center; }
.mb-notice.is-error { color: #cf4558; }

.mb-result-list { display: grid; gap: 8px; width: min(100%, 520px); margin: 18px 0 24px; }
.mb-result-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(24,78,67,.08);
}
.mb-result-list span { color: var(--mb-muted); font-size: .78rem; }

@media (max-width: 980px) {
    .mb-lobby-layout, .mb-game-layout { grid-template-columns: 1fr; }
    .mb-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mb-notice { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .mb-hero, .mb-room-header { align-items: flex-start; flex-direction: column; }
    .mb-room-card { grid-template-columns: 1fr; }
    .mb-form-grid, .mb-side { grid-template-columns: 1fr; }
    .mb-hud { grid-template-columns: 1fr 1fr; }
    .mb-hud > div:nth-child(2) { border-right: 0; }
    .mb-hud > div:nth-child(-n+2) { border-bottom: 1px solid var(--mb-border); }
    .mb-arena { min-height: 540px; border-radius: 18px; }
    .mb-grid { gap: 2px; }
    .mb-grid.is-scattered { height: 390px; }
    .mb-cell { border-radius: 4px; }
    .mb-join-form { align-items: stretch; flex-direction: column; }
    .mb-join-form input { width: 100%; }
}