/* moksha.css (build 1) — Moksha Patam board and controls. Uses the site's colour tokens from site.css. */
.l3-hi,.l3-mr{display:none}
html[data-l3="hi"] .l3-en,html[data-l3="mr"] .l3-en,html[data-l3="mr"] .l3-hi{display:none}
html[data-l3="hi"] .l3-hi,html[data-l3="mr"] .l3-mr{display:block}
html[data-l3="mr"] .jl-en{display:none} html[data-l3="mr"] .jl-hi{display:inline}

.mp-app{margin:22px 0 0}
.mp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px}
.mp-bar label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.mp-bar select{font:inherit;font-size:14px;color:var(--chalk);background:var(--slab);border:1px solid var(--line-2);border-radius:var(--r);padding:8px 10px}
.mp-ghost{font-family:var(--body);font-size:14px;color:var(--brass-lt);background:transparent;border:1px solid var(--brass-dk);border-radius:var(--r);padding:8px 16px;cursor:pointer}
.mp-ghost:hover{border-color:var(--brass)}
.mp-ghost:focus-visible,.mp-cell:focus-visible{outline:2px solid var(--brass-lt);outline-offset:2px}

.mp-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
@media(max-width:860px){.mp-layout{grid-template-columns:1fr}}

.mp-board{position:relative;width:100%;max-width:640px;aspect-ratio:1/1;border:2px solid var(--brass-dk);border-radius:6px;overflow:hidden;background:var(--slab);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.mp-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr)}
.mp-cell{position:relative;border:0;border-right:1px solid rgba(51,66,95,.45);border-bottom:1px solid rgba(51,66,95,.45);background:#111A2C;color:var(--muted);padding:0;margin:0;font:inherit;text-align:left;cursor:default;overflow:hidden}
.mp-cell.alt{background:#152038}
.mp-cell b{position:absolute;top:2px;left:4px;font-family:var(--mono);font-size:clamp(8px,1.5vw,11px);font-weight:500;color:var(--dim)}
.mp-labels{position:absolute;inset:0;pointer-events:none;z-index:1}
.mp-labels .nm{position:absolute;width:10%;padding:0 2px;font-size:clamp(7px,1.2vw,10px);line-height:1.2;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-labels .nm::before{content:'';position:absolute;inset:0 6%;background:rgba(11,18,32,.78);border-radius:3px;z-index:-1}
.mp-cell.v{background:rgba(63,154,110,.22);cursor:pointer}
.mp-labels .nm.v{color:#8FD9B2}
.mp-cell.s{background:rgba(220,58,32,.18);cursor:pointer}
.mp-labels .nm.s{color:#F7A493}
.mp-cell.top{background:linear-gradient(160deg,#7A5716,#C08A2E);cursor:pointer}
.mp-cell.top b{color:#1A1206}
.mp-labels .nm.w{color:#1A1206}.mp-labels .nm.w::before{display:none}
@media(max-width:520px){.mp-labels{display:none}}

.mp-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mp-ladder line{stroke:#D8A03E;stroke-width:.6;stroke-linecap:round;opacity:.95}
.mp-ladder line.rung{stroke-width:.45;opacity:.8}
.mp-snake .body-o{fill:none;stroke:rgba(0,0,0,.5);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mp-snake .body{fill:none;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.mp-snake.a .body,.mp-snake.a .head{stroke:#DC3A20;fill:#DC3A20}
.mp-snake.b .body,.mp-snake.b .head{stroke:#B0469A;fill:#B0469A}
.mp-snake .body{fill:none!important}
.mp-snake .head{stroke:rgba(0,0,0,.55)!important;stroke-width:.4}
.mp-snake .eye{fill:#FFF3D6}

.mp-tokens{position:absolute;inset:0;pointer-events:none}
.mp-tok{position:absolute;width:5.4%;height:5.4%;margin:-2.7% 0 0 -2.7%;border-radius:50%;border:2px solid #0B1220;box-shadow:0 2px 6px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;transition:left .16s ease,top .16s ease;z-index:2}
.mp-tok span{font-family:var(--mono);font-size:clamp(7px,1.3vw,11px);font-weight:600;color:#0B1220;font-style:normal}
.mp-tok.cur{z-index:3;box-shadow:0 0 0 2px var(--chalk),0 2px 8px rgba(0,0,0,.6)}
.mp-tok.climb{transition:left .7s cubic-bezier(.3,.1,.3,1),top .7s cubic-bezier(.3,.1,.3,1)}
.mp-tok.slide{transition:left .7s cubic-bezier(.5,0,.7,.4),top .7s cubic-bezier(.5,0,.7,.4)}
.mp-tok[hidden]{display:none}

.mp-side{display:flex;flex-direction:column;gap:14px}
.mp-turn{margin:0;padding:8px 12px;border-left:4px solid transparent;background:var(--slab);border-radius:var(--r);font-weight:600;min-height:1.6em}
.mp-turn:empty{display:none}
.mp-rollrow{display:flex;align-items:center;gap:14px}
.mp-roll{font-size:16px;padding:13px 26px}
.mp-roll:disabled{opacity:.45;cursor:default;filter:none}
.mp-die{width:58px;height:58px;flex:none;background:#F4EEDD;border-radius:10px;padding:8px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 3px 10px rgba(0,0,0,.4)}
.mp-die i{display:block;border-radius:50%;margin:2px}
.mp-die i.on{background:#7E1B0C}
.mp-die.spin{animation:mpspin .45s linear infinite}
@keyframes mpspin{0%{transform:rotate(0)}50%{transform:rotate(12deg) scale(.95)}100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.mp-die.spin{animation:none}.mp-tok,.mp-tok.climb,.mp-tok.slide{transition:none}}

.mp-msg p,.mp-info p{margin:0 0 8px;padding:9px 12px;background:var(--slab);border-left:3px solid var(--line-2);border-radius:var(--r);font-size:14px}
.mp-msg p span,.mp-info p b{display:block}
.mp-msg p span{margin-top:3px;color:var(--muted);font-size:13px;font-style:italic}
.mp-msg p.v,.mp-info p.v{border-left-color:var(--ok)}
.mp-msg p.s,.mp-info p.s{border-left-color:var(--sindoor)}
.mp-msg p.w,.mp-info p.w{border-left-color:var(--brass-lt);font-weight:600}
.mp-info p em{display:block;margin-top:3px;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--dim)}

.mp-players{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mp-players li{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:14px}
.mp-players li.cur{border-color:var(--brass)}
.mp-players li i{width:20px;height:20px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;color:#0B1220}
.mp-players li span{margin-left:auto;color:var(--muted);font-family:var(--mono);font-size:12px}

.mp-end{border:1px solid var(--brass);background:linear-gradient(180deg,rgba(192,138,46,.14),rgba(192,138,46,.04));border-radius:6px;padding:14px 16px}
.mp-end h3{margin:0 0 10px;font-family:var(--disp);font-size:20px;color:var(--brass-lt)}
.mp-j{margin:0 0 10px}
.mp-j h4{margin:0 0 4px;font-size:14px;display:flex;align-items:center;gap:8px}
.mp-j h4 i{width:12px;height:12px;border-radius:50%;display:inline-block}
.mp-j h4 small{color:var(--dim);font-weight:400;font-family:var(--mono);font-size:11px}
.mp-j p{margin:0 0 3px;font-size:13.5px}
.mp-j p.v b{color:#8FD9B2}.mp-j p.s b{color:#F7A493}
.mp-endbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.mp-hint{margin:0;color:var(--dim);font-size:12.5px}

.mp-t tr.v td:first-child{border-left:3px solid var(--ok)}
.mp-t tr.s td:first-child{border-left:3px solid var(--sindoor)}
.mp-t td:last-child,.mp-t th:last-child{text-align:right;white-space:nowrap}
.mp-steps{padding-left:22px}.mp-steps li{margin:0 0 8px}

/* three language buttons fit on a phone */
@media(max-width:420px){.lang button{padding:6px 8px;font-size:12px}}