.vd-game-mex { --game-color:#ee7a5b; }
.mex-game,.mex-board { --mex-ink:#3a2418; color:var(--mex-ink); width:100%; min-width:0; }
.mex-game { max-width:900px; margin:0 auto; }
.mex-heading { margin:1rem 0 1.1rem; color:var(--vd-ink); }
.mex-heading h1 { font-size:clamp(1.65rem,2.8vw,2.6rem); line-height:1.12; font-weight:750; letter-spacing:-.035em; margin:.35rem 0 0; overflow-wrap:anywhere; }
.mex-heading .vd-eyebrow { font-size:.67rem; letter-spacing:.13em; font-weight:800; }
.mex-table { display:flex; align-items:center; justify-content:center; gap:1.4rem; min-height:11rem; padding:1.2rem; margin-bottom:1rem; border-radius:1.6rem; background:radial-gradient(ellipse at 50% 30%,#7a4a2c,#4e2e1a); color:#fff3dc; }
.mex-claim { display:grid; gap:.1rem; text-align:center; }
.mex-claim small { font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.mex-claim strong { font-size:clamp(3rem,9vw,5rem); line-height:1; font-weight:850; letter-spacing:-.04em; }
.mex-claim.is-empty { opacity:.7; }
.mex-reveal { display:grid; gap:.7rem; justify-items:center; text-align:center; max-width:26rem; }
.mex-reveal p { margin:0; font-size:.95rem; line-height:1.4; font-weight:650; }
.mex-dice { display:inline-flex; gap:.6rem; }
.mex-die { width:3.4rem; height:3.4rem; }
.mex-dice-big .mex-die { width:4.6rem; height:4.6rem; }
.mex-yours { display:grid; gap:1rem; justify-items:center; margin-bottom:1rem; padding:1.1rem; border-radius:1.4rem; background:#fbf1d6; box-shadow:var(--lc-shadow,0 4px 14px #3a241810); }
.mex-claims { display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; }
.mex-claim-form { margin:0; }
.mex-chip { min-width:3.3rem; min-height:2.9rem; padding:0 .8rem; border:0; border-radius:.9rem; background:#fff; color:var(--mex-ink); font:inherit; font-size:1.1rem; font-weight:800; cursor:pointer; box-shadow:0 3px 0 #d8cfb4; -webkit-tap-highlight-color:transparent; }
.mex-chip.is-pair { background:#ffe4a8; box-shadow:0 3px 0 #e0b95c; }
.mex-chip.is-true { outline:3px solid #2f8f5b; outline-offset:1px; }
.mex-chip:active { transform:translateY(3px); box-shadow:none; }
.mex-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.6rem; margin-bottom:1rem; }
.mex-action-form { margin:0; }
.mex-actions .vd-button,.mex-action-form .vd-button { width:100%; min-height:54px; border-radius:999px; justify-content:center; font-size:1.02rem; }
.mex-doubt { background:#cf4a38; color:#fff; border:0; }
.mex-players { display:grid; grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); gap:.6rem; }
.mex-player { display:grid; grid-template-columns:auto 1fr; gap:.2rem .55rem; align-items:center; padding:.65rem .8rem; border-radius:1rem; background:var(--vd-panel,#fffefa); box-shadow:var(--lc-shadow,0 4px 14px #3a241810); min-width:0; }
.mex-player.is-current { box-shadow:inset 0 0 0 2px var(--game-color), var(--lc-shadow,0 4px 14px #3a241810); }
.mex-player.is-out { opacity:.45; }
.mex-avatar { grid-row:span 2; width:2.3rem; height:2.3rem; }
.mex-avatar .pr-character { width:100%; height:100%; display:block; }
.mex-player strong { font-size:.85rem; overflow-wrap:anywhere; min-width:0; }
.mex-lives { display:flex; gap:.2rem; }
.mex-mug { width:.7rem; height:.85rem; border-radius:.15rem .15rem .3rem .3rem; background:#e0a22b; box-shadow:inset 0 -.25rem 0 #fff3c0; }
.mex-mug.is-lost { background:#e3dfcf; box-shadow:none; }
@media(max-width:560px){ .mex-table { gap:.8rem; min-height:9rem; padding:1rem; } .mex-die { width:3rem; height:3rem; } .mex-dice-big .mex-die { width:4rem; height:4rem; } }
@media(min-width:900px){ .mex-board-tv .mex-claim strong { font-size:7rem; } }

.mex-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.mex-throws { display:flex; align-items:center; gap:.35rem; padding-top:.6rem; }
.mex-throws i { width:.9rem; height:.9rem; border-radius:50%; background:#e0a22b; box-shadow:inset 0 -2px 0 #b9811c; }
.mex-throws i.is-used { background:#e3dfcf; box-shadow:none; }
.mex-throws small { margin-left:.4rem; font-size:.6rem; font-weight:900; letter-spacing:.1em; color:#9a6b3a; }
.mex-table { flex-direction:column; }
.mex-player.is-lost-round { box-shadow:inset 0 0 0 2px #cf4a38, var(--lc-shadow,0 4px 14px #3a241810); }
.mex-table.is-shaking { animation:mex-shake .7s ease-in-out; }
@keyframes mex-shake { 0%,100% { transform:none; } 15% { transform:translate(-5px,2px) rotate(-1.5deg); } 30% { transform:translate(5px,-2px) rotate(1.5deg); } 45% { transform:translate(-4px,1px) rotate(-1deg); } 60% { transform:translate(4px,-1px) rotate(1deg); } 80% { transform:translate(-2px,0); } }
@media (prefers-reduced-motion: reduce) { .mex-table.is-shaking { animation:none; } }

/* Round result: every roll, lowest first, and who paid */
.mex-result { display: grid; gap: .9rem; width: 100%; max-width: 30rem; padding: .25rem; color: #fff7e8; }
.mex-result-title { margin: 0; text-align: center; font-size: 1.05rem; font-weight: 750; }
.mex-result-rows { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mex-result-rows li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto auto; align-items: center; gap: .6rem; padding: .45rem .7rem .45rem .5rem; border-radius: 1.1rem; background: #ffffff1c; }
.mex-result-rows li.is-loser { background: #fff7e8; color: #3a2414; box-shadow: 0 0 0 2px #e0614a; }
.mex-result-rows b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.mex-result-avatar svg { width: 2rem; height: 2rem; display: block; }
.mex-dice-small { display: inline-flex; gap: .3rem; }
.mex-dice-small .fd-die { width: 2rem; height: 2rem; padding: .3rem; border-radius: .55rem; box-shadow: 0 2px 0 #cfccb8; }
.mex-dice-small .fd-pip { width: .3rem; height: .3rem; }
.mex-result-score { min-width: 2.2rem; text-align: right; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.mex-result-cost { padding: .2rem .6rem; border-radius: 999px; background: #e0614a; color: #fff; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.mex-result-safe { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #ffffff33; }
.mex-result-safe svg { width: 1rem; height: 1rem; stroke-width: 2.6; }
@media (max-width: 420px) { .mex-result-rows li { grid-template-columns: 2rem minmax(0, 1fr) auto auto; } .mex-result-rows li .mex-dice-small { display: none; } }

.mex-result-eyebrow { margin: 0; text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #f1cfa0; }


/* Round in progress: same rows as the result, the roller highlighted, the rest still to come */
.mex-round-rows { width: 100%; max-width: 30rem; }
.mex-round-rows li { grid-template-columns: 2rem minmax(0, 1fr) auto auto; }
.mex-round-rows li.is-current { background: #fff7e8; color: #3a2414; box-shadow: 0 0 0 2px #e0a22b; }
.mex-round-rows li.is-waiting { opacity: .55; }
.mex-result-pending { width: 4.4rem; height: 2rem; border-radius: .55rem; border: 2px dashed #ffffff55; }
.mex-round-rows li.is-current .mex-result-pending { border-color: #b9811c88; }


/* One steady layout: the tray and the round rows never appear or vanish, they fill in */
.mex-roll { display: grid; justify-items: center; gap: 1rem; }
.mex-roll .fd-die { will-change: transform; }
.mex-roll .fd-dice-empty .fd-die { background: #ffffff1f; border: 2px dashed #ffffff40; box-shadow: none; }
.mex-claim strong:empty::before { content: "\200b"; }
.mex-round-rows li { transition: background .25s ease, opacity .25s ease, box-shadow .25s ease; }
.mex-round-rows li.is-last { opacity: .6; }
.mex-round-rows li.is-last.is-loser { opacity: 1; }
.mex-round-rows li.is-fresh .mex-dice-small, .mex-round-rows li.is-fresh .mex-result-score { animation: mex-row-in .35s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes mex-row-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mex-round-rows li.is-fresh .mex-dice-small, .mex-round-rows li.is-fresh .mex-result-score { animation: none; } }
.mex-round-rows li { grid-template-columns: 2rem minmax(0, 1fr) auto auto auto; }
.mex-roll-owner { display: flex; align-items: center; gap: .5rem; min-height: 2rem; font-weight: 700; color: #f1cfa0; }
.mex-roll-owner svg { width: 2rem; height: 2rem; display: block; }
.mex-tray-throws { padding: 0; gap: .5rem; }
.mex-tray-throws i { width: 1.05rem; height: 1.05rem; }
.mex-tray-throws i.is-used { background: #ffffff2e; }