/* Marble Sudoku mode pages: animated boards for each game mode. Builds on marble-lab.css. */
.mm-stage { display:grid; gap:.9rem; }
.mm-board { width:100%; max-width:440px; }
.mm-under { display:grid; gap:.7rem; }
.mm-caps { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; counter-reset:mm; }
.mm-caps li { position:relative; padding:.55rem .75rem .55rem 2.4rem; border-radius:10px; border:1px solid var(--ns-line); background:rgba(255,255,255,.02); color:var(--text-muted,#b9bfcc); line-height:1.55; font-size:.95rem; transition:background .3s ease,border-color .3s ease,color .3s ease,opacity .3s ease; counter-increment:mm; }
.mm-caps li::before { content:counter(mm); position:absolute; left:.7rem; top:.6rem; display:grid; place-items:center; width:1.25rem; height:1.25rem; border-radius:50%; background:rgba(255,174,55,.18); color:#ffd28a; font-size:.75rem; font-weight:800; }
.mm-caps li.is-now { border-color:rgba(255,196,99,.85); background:rgba(255,174,55,.12); color:var(--ns-ink,#fff); }
.mm-caps li.is-past { opacity:.8; }
.mm-replay { justify-self:center; }

/* Layers drawn over the wood */
.mm-svg { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible; }

/* Mosaic: region walls and a glow on the shape being looked at */
.mm-walls line { stroke:#2d1207; stroke-width:8; stroke-linecap:round; }
.mm-region rect { fill:rgba(255,196,99,0); transition:fill .3s ease; }
.mm-region.is-on rect { fill:rgba(255,196,99,.3); }

/* Rainbow Bridge */
.mm-bridge line { stroke-width:46; stroke-linecap:round; opacity:.55; transition:opacity .3s ease,stroke-width .3s ease; }
.mm-bridge .mm-ring { fill:none; stroke:#fff3d6; stroke-width:6; opacity:.9; }
.mm-bridge.is-start .mm-ring { animation:mm-ring 0.9s ease-in-out infinite; }
.mm-bridge.is-focus line { opacity:.85; }
.mm-bridge.is-full line { opacity:.95; stroke-width:50; filter:drop-shadow(0 0 10px rgba(255,236,170,.9)); }
@keyframes mm-ring { 50% { stroke-width:12; stroke:#ffd28a; } }
.mm-tray { display:grid; grid-template-columns:repeat(9,1fr); gap:3%; padding:.45rem .6rem; border-radius:12px; background:rgba(8,10,18,.45); border:1px solid var(--ns-line); container-type:inline-size; }
.mm-tray > span { position:relative; display:block; aspect-ratio:1; transition:transform .2s ease,opacity .2s ease,filter .2s ease; }
.mm-tray img { display:block; width:100%; height:100%; }
.mm-tray .ns-num { font-size:4.6cqw; }
.mm-tray > span.is-pick { transform:translateY(-14%) scale(1.15); filter:drop-shadow(0 0 6px rgba(255,226,150,.95)); }
.mm-tray > span.is-skip { opacity:.35; }
.mm-tray > span.is-skip::after { content:""; position:absolute; left:-6%; right:-6%; top:50%; height:10%; border-radius:4px; background:#e2553f; transform:rotate(-35deg); }

/* Morning Mist */
.mm-cloud { position:absolute; z-index:3; left:var(--x); top:var(--y); width:17%; aspect-ratio:1; transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scaleX(var(--flip,1)); border-radius:50%; background:radial-gradient(circle at 42% 40%,rgba(255,255,255,.98) 0 22%,rgba(244,247,255,.94) 38%,rgba(226,233,248,.7) 55%,rgba(226,233,248,0) 70%); pointer-events:none; animation:mm-drift var(--drift,4s) ease-in-out infinite alternate; transition:opacity .7s ease var(--ld,0ms),translate .9s ease var(--ld,0ms),scale .9s ease var(--ld,0ms); }
.mm-cloud::after { content:""; position:absolute; inset:18%; background:url(/assets/images/modes/cloud.png) center/contain no-repeat; opacity:.16; filter:invert(.35) sepia(.4) hue-rotate(190deg); }
.mm-cloud.is-lift { opacity:0; translate:0 -40%; scale:1.4; }
.mm-cloud.is-wobble { animation:mm-wobble .6s ease; }
@keyframes mm-drift { to { translate:3% -2%; } }
@keyframes mm-wobble { 25% { rotate:-8deg; } 50% { rotate:6deg; } 75% { rotate:-4deg; } }
.ns-marble.mm-wrong img { filter:drop-shadow(0 0 1.6cqw rgba(255,80,60,.95)); }
.ns-marble.mm-wrong { animation:ns-shake .45s ease .2s both, ns-pop .25s ease reverse 1s both; }

/* Boulder Garden */
.mm-boulder { position:absolute; z-index:3; left:var(--x); top:var(--y); width:calc(8.4% + var(--size,1) * 1.5%); aspect-ratio:1; transform:translate(-50%,-52%); pointer-events:none; }
.mm-boulder[data-size="1"] { --size:1; } .mm-boulder[data-size="2"] { --size:2; } .mm-boulder[data-size="3"] { --size:3; }
.mm-boulder img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 .6cqw .6cqw rgba(27,14,5,.55)); }
.mm-boulder.is-nudge { animation:ns-bump .6s ease var(--ld,0ms); }
.mm-boulder.is-hit { animation:ns-shake .4s ease; }
.mm-boulder.is-break { animation:mm-break .75s ease-out forwards; }
.mm-boulder.is-break img { scale:1.3; }
@keyframes mm-break { 0% { opacity:1; scale:1; } 40% { opacity:1; scale:1.15; } 100% { opacity:0; scale:1.35; } }

/* Duel */
.mm-duel { position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.6rem; }
.mm-side { display:grid; gap:.35rem; text-align:center; }
.mm-side__name { margin:0; font-family:var(--font-heading); font-weight:800; color:var(--ns-ink,#fff); }
.mm-side--rival .mm-side__name { color:#ffb3a8; }
.mm-board--duel { max-width:none; }
.mm-bar { height:8px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.mm-bar span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#f9a84a,#f1c94e); transition:width .25s ease; }
.mm-side--rival .mm-bar span { background:linear-gradient(90deg,#ee677c,#ce3a2c); }
.mm-side__pct { margin:0; font-size:.85rem; color:var(--text-muted,#b9bfcc); font-variant-numeric:tabular-nums; }
.mm-vs { width:clamp(44px,9vw,72px); height:auto; }
.mm-stun { position:absolute; inset:0; z-index:4; display:none; place-items:center; border-radius:4%; background:rgba(20,24,40,.55); }
.mm-stun b { font-family:var(--font-heading); font-size:7cqw; color:#ffe08a; text-shadow:0 2px 6px rgba(0,0,0,.6); }
.mm-stun span { position:absolute; left:50%; top:30%; color:#ffe08a; font-size:7cqw; animation:mm-orbit 1.2s linear infinite; }
.mm-stun span:nth-child(2) { animation-delay:-.4s; } .mm-stun span:nth-child(3) { animation-delay:-.8s; }
@keyframes mm-orbit { from { transform:translate(-50%,-50%) rotate(0) translateX(14cqw) rotate(0); } to { transform:translate(-50%,-50%) rotate(360deg) translateX(14cqw) rotate(-360deg); } }
.ns-board.is-stunned .mm-stun { display:grid; }
.ns-board.is-stunned { animation:ns-shake .45s ease; }
.mm-side.is-winner .ns-board { box-shadow:0 0 0 3px rgba(255,211,124,.9),0 0 30px rgba(255,190,90,.6); border-radius:4%; }
.mm-banner { position:absolute; left:22%; top:40%; z-index:5; margin:0; padding:.4rem 1.1rem; transform:translate(-50%,-50%); border-radius:99px; background:linear-gradient(135deg,#ffcf6b,#f39a2e); color:#2a1405; font-family:var(--font-heading); font-weight:900; font-size:clamp(1.1rem,3vw,1.6rem); box-shadow:0 8px 30px rgba(0,0,0,.4); animation:ns-pop .35s cubic-bezier(.3,1.6,.5,1); }

/* Mode page layout */
.mm-answer .ns-answer__steps { display:grid; gap:.9rem; align-content:start; }
.mm-answer--wide { grid-template-columns:1fr; }
.mm-answer--wide .mm-duel { max-width:640px; margin:0 auto; width:100%; }
.mm-facts { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 0; padding:0; list-style:none; }
.mm-facts li { padding:.3rem .7rem; border-radius:99px; border:1px solid var(--border-gold); font-size:.85rem; color:#ffd28a; }
.mm-answer .ns-answer__text h3 { margin:1.5rem 0 .8rem; color:var(--ns-ink,#fff); font-family:var(--font-heading); font-size:1.15rem; }

/* Modes overview */
.mm-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.1rem; margin:0 0 2.5rem; padding:0; list-style:none; }
.mm-card { display:grid; gap:.7rem; align-content:start; padding:1rem; border-radius:16px; border:1px solid var(--ns-line); background:rgba(8,10,18,.4); color:inherit; text-decoration:none; transition:transform .2s ease,border-color .2s ease; }
.mm-card:hover,.mm-card:focus-visible { transform:translateY(-3px); border-color:rgba(255,196,99,.7); }
.mm-card h2,.mm-card h3 { margin:0; font-size:1.2rem; color:var(--ns-ink,#fff); }
.mm-card p { margin:0; line-height:1.6; color:var(--text-muted,#b9bfcc); }
.mm-card small { color:#ffd28a; font-weight:700; letter-spacing:.02em; }
.mm-card .mm-board { max-width:none; pointer-events:none; }
.mm-card .mm-duel { pointer-events:none; }
.mm-card .mm-side__pct, .mm-card .mm-side__name { font-size:.75rem; }

@media (max-width:560px) {
  .mm-caps li { font-size:.9rem; }
  .mm-duel { gap:.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-cloud,.mm-bridge.is-start .mm-ring,.mm-stun span { animation:none; }
}