/* Mahjong Solitaire - game-owned styles. Jade felt, ivory tiles with a jade back. */
.mj-howto{text-align:center;font-size:.85rem;color:#475569;margin:.1rem 0 .6rem;line-height:1.4}
.mj-app,.mj-ov,.mj-toast{--jade:#17795a;--jade-hi:#35b58a;--gold:#ffd23f;--ink:var(--color-ink,#1e293b)}
.mj-app{position:relative}
.mj-app button{font-family:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mj-app button:focus-visible,.mj-tile:focus-visible{outline:3px solid var(--color-focus,#2563eb);outline-offset:2px}

/* ---- layout picker ---- */
.mj-picker{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin:0 -2px;scroll-snap-type:x proximity;scrollbar-width:thin}
.mj-chip{flex:0 0 auto;width:76px;min-height:74px;padding:6px 4px 5px;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:3px;font:700 .68rem/1.1 'Plus Jakarta Sans',system-ui,sans-serif;transition:transform .12s,box-shadow .12s}
.mj-chip .th{width:100%;height:36px;border-radius:7px;background:radial-gradient(ellipse at 50% 40%,#1f8a63,#0f5a40);padding:3px}
.mj-chip small{font:500 .58rem/1 'JetBrains Mono',monospace;opacity:.7}
.mj-chip[aria-pressed="true"]{background:var(--gold);box-shadow:0 3px 0 var(--ink);transform:translateY(-2px)}
.mj-chip.daily .th{background:linear-gradient(135deg,#b45309,#f59e0b);display:flex;align-items:center;justify-content:center;color:#fff;font:800 .9rem/1 'JetBrains Mono',monospace}
.mj-chip.done::after{content:"\2713";position:absolute;font-size:.7rem;color:#fff;background:var(--jade);border-radius:50%;width:16px;height:16px;line-height:16px;text-align:center;margin:-4px 0 0 52px}
.mj-chip{position:relative}

/* ---- HUD ---- */
.mj-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 8px;font-family:'JetBrains Mono',monospace;text-align:center}
.mj-hud div{background:#fff;border:2px solid #e2e8f0;border-radius:10px;padding:4px 2px;transition:border-color .2s}
.mj-hud b{display:block;font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.mj-hud span{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.mj-hud .low{border-color:#ef4444}.mj-hud .hot{border-color:var(--jade-hi);animation:mj-pulse .35s ease}

/* ---- stage + board ---- */
.mj-stage{position:relative;border:3px solid var(--ink);border-radius:16px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 38%,#23946b 0,#157050 55%,#0c4a35 100%);
  box-shadow:inset 0 0 46px rgba(0,0,0,.4),0 4px 0 var(--ink);-webkit-overflow-scrolling:touch}
.mj-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 5px)}
.mj-stage.zoomed{overflow:auto;touch-action:pan-x pan-y}
.mj-pad{display:flex;min-width:100%;min-height:100%;width:max-content;box-sizing:border-box;padding:8px}
.mj-board{position:relative;margin:auto;flex:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mj-zoom{display:flex;gap:4px;align-items:center}
.mj-zoom button{min-width:36px;height:36px;padding:0 8px;border-radius:10px;border:2px solid var(--ink);background:#fffbe9;color:var(--ink);font:800 .9rem/1 'JetBrains Mono',monospace;cursor:pointer;box-shadow:0 2px 0 var(--ink)}
.mj-zoom button:active{transform:translateY(2px);box-shadow:none}
.mj-zoom button[disabled]{opacity:.4}
.mj-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- tiles ---- */
.mj-tile{position:absolute;border-radius:calc(var(--tw,24px)*.16);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(150deg,#fffef8 0%,#f7efd9 55%,#e9dec0 100%);
  box-shadow:inset 0 0 0 1px rgba(70,55,20,.3),calc(var(--d)*.5) calc(var(--d)*.5) 0 var(--jade-hi),var(--d) var(--d) 0 var(--jade),calc(var(--d)*1.3) calc(var(--d)*1.7) calc(var(--d)*1.5) rgba(0,0,0,.45);
  transition:transform .13s ease-out,background-color .15s}
.mj-art{position:absolute;left:8%;top:6%;width:84%;height:88%;pointer-events:none;display:block}
.mj-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(10,46,32,.36);opacity:0;transition:opacity .2s;pointer-events:none}
.mj-dim .mj-tile.blocked::after{opacity:1}
.mj-tile.sel{transform:translate(-2px,-5px);background:linear-gradient(150deg,#fff8d0,#ffe99a);outline:3px solid var(--gold);outline-offset:-1px;box-shadow:inset 0 0 0 1px rgba(70,55,20,.3),calc(var(--d)*.5) calc(var(--d)*.5) 0 var(--jade-hi),var(--d) var(--d) 0 var(--jade),0 0 18px 4px rgba(255,210,63,.75)}
.mj-tile.hint{animation:mj-hint .85s ease-in-out infinite;outline:3px solid #fff;outline-offset:-1px;background:linear-gradient(150deg,#e6fff5,#aef0d3);box-shadow:inset 0 0 0 1px rgba(70,55,20,.3),calc(var(--d)*.5) calc(var(--d)*.5) 0 var(--jade-hi),var(--d) var(--d) 0 var(--jade),0 0 16px 5px rgba(255,255,255,.9)}
@media (hover:hover){.mj-tile.free:hover:not(.sel){transform:translateY(-2px)}}
.mj-tile.gone:not(.mj-out){display:none}
.mj-tile.mj-out{pointer-events:none;animation:mj-out .36s cubic-bezier(.5,0,.8,.4) forwards}
.mj-tile.mj-back{animation:mj-back .32s cubic-bezier(.2,.9,.3,1.3)}
.mj-tile.mj-shake{animation:mj-shake .28s}
.mj-tile.mj-flip{animation:mj-flip .34s ease-out}
.mj-spark{position:absolute;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:2px;background:var(--gold);pointer-events:none;z-index:4000;animation:mj-burst .55s ease-out forwards;transform:rotate(45deg)}
@keyframes mj-out{0%{transform:translate(0,0) scale(1)}30%{transform:translate(-2px,-8px) scale(1.1);filter:brightness(1.15)}100%{transform:translate(0,-26px) scale(.55) rotate(8deg);opacity:0}}
@keyframes mj-back{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes mj-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes mj-flip{0%{transform:scaleX(.1)}100%{transform:scaleX(1)}}
@keyframes mj-hint{0%,100%{filter:brightness(1);transform:translateY(0)}50%{filter:brightness(1.18) saturate(1.3);transform:translateY(-4px)}}
@keyframes mj-burst{from{opacity:1;transform:translate(0,0) rotate(45deg) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(225deg) scale(.3)}}
@keyframes mj-pulse{50%{transform:scale(1.07)}}

/* ---- actions ---- */
.mj-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 6px}
.mj-btn{min-height:52px;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;font:800 .72rem/1 'Plus Jakarta Sans',system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.mj-btn svg{width:20px;height:20px}
.mj-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.mj-btn[disabled]{opacity:.45;box-shadow:0 3px 0 #94a3b8;border-color:#94a3b8}
.mj-btn.hintb{background:#fff3c4}.mj-btn.shuf{background:#dbeafe}.mj-btn.newb{background:#c9f5e2}
.mj-sub{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px}
.mj-link{min-height:44px;padding:0 14px;border:0;background:none;color:var(--ink);font:700 .8rem 'Plus Jakarta Sans',system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mj-msg{min-height:1.4em;text-align:center;font:600 .8rem 'Plus Jakarta Sans',system-ui,sans-serif;color:#475569;margin:4px 0}

/* ---- overlays ---- */
.mj-ov{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(8,28,20,.62);backdrop-filter:blur(3px)}
.mj-ov[hidden]{display:none}
.mj-panel{width:min(100%,380px);max-height:92vh;overflow:auto;background:#fffdf6;border:3px solid var(--ink);border-radius:18px;padding:18px 16px 16px;text-align:center;box-shadow:0 8px 0 var(--ink);animation:mj-in .28s cubic-bezier(.2,.9,.3,1.2);font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink)}
.mj-panel h2{font:800 1.45rem/1.1 'Plus Jakarta Sans',system-ui,sans-serif;margin:0 0 4px;letter-spacing:-.02em}
.mj-panel p{font-size:.85rem;color:#475569;margin:4px 0}
.mj-stars{font-size:2rem;letter-spacing:6px;color:#e2e8f0;margin:2px 0 6px}
.mj-stars b{color:#f59e0b;font-weight:400;text-shadow:0 2px 0 #b45309;display:inline-block;animation:mj-star .5s both}
.mj-stars b:nth-child(2){animation-delay:.12s}.mj-stars b:nth-child(3){animation-delay:.24s}
.mj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.mj-grid div{background:#f1f5f9;border-radius:10px;padding:6px 2px;font-family:'JetBrains Mono',monospace}
.mj-grid b{display:block;font-size:1.05rem}.mj-grid span{font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.mj-coins{margin:8px 0;padding:8px;border-radius:12px;background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #b45309;font:700 .85rem 'Plus Jakarta Sans',system-ui,sans-serif;color:#78350f}
.mj-coins .tot{font:800 1.3rem 'JetBrains Mono',monospace;display:block;animation:mj-pulse .5s .1s both}
.mj-coins small{display:block;font-weight:500;opacity:.8;margin-top:2px;font-size:.7rem}
.mj-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.mj-row .mj-btn{flex:1 1 110px;min-height:46px;flex-direction:row;font-size:.82rem;padding:0 10px}
.mj-table{width:100%;border-collapse:collapse;font-size:.78rem;margin:8px 0}
.mj-table th,.mj-table td{padding:5px 3px;border-bottom:1px solid #e2e8f0;text-align:right;font-variant-numeric:tabular-nums}
.mj-table th:first-child,.mj-table td:first-child{text-align:left}
.mj-table th{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.mj-toast{position:fixed;left:50%;top:12%;transform:translateX(-50%);z-index:9500;padding:8px 16px;border-radius:99px;background:#fff3c4;border:2px solid #b45309;color:#78350f;font:800 1rem 'JetBrains Mono',monospace;box-shadow:0 4px 0 #b45309;pointer-events:none;animation:mj-rise 1.7s ease-out forwards}
.mj-confetti{position:fixed;top:-20px;width:10px;height:14px;border-radius:2px;z-index:9400;pointer-events:none;animation:mj-fall linear forwards}
@keyframes mj-in{from{opacity:0;transform:scale(.88) translateY(10px)}to{opacity:1;transform:none}}
@keyframes mj-star{from{opacity:0;transform:scale(2.4) rotate(-30deg)}to{opacity:1;transform:none}}
@keyframes mj-rise{0%{opacity:0;transform:translate(-50%,16px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.08)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-56px)}}
@keyframes mj-fall{to{transform:translateY(110vh) rotate(540deg);opacity:.85}}

/* ---- how-to-play article ---- */
.mj-guide{max-width:720px;margin:0 auto;padding:8px 16px 24px;font:400 1rem/1.65 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--color-ink,#1e293b)}
.mj-guide h2{font:800 1.35rem/1.2 'Plus Jakarta Sans',system-ui,sans-serif;margin:1.6em 0 .5em;letter-spacing:-.015em}
.mj-guide h3{font:700 1.05rem/1.3 'Plus Jakarta Sans',system-ui,sans-serif;margin:1.2em 0 .3em}
.mj-guide p{margin:.6em 0}.mj-guide ul,.mj-guide ol{margin:.6em 0 .6em 1.3em}.mj-guide li{margin:.3em 0}
.mj-guide table{width:100%;border-collapse:collapse;font-size:.9rem;margin:.8em 0}
.mj-guide th,.mj-guide td{border:1px solid #d6dde6;padding:6px 8px;text-align:left}
.mj-guide th{background:#eef7f3}
.mj-guide details{border:2px solid var(--color-ink,#1e293b);border-radius:12px;padding:0 12px;margin:8px 0;background:#fff}
.mj-guide summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.mj-guide details p{margin:0 0 12px}

@media (prefers-reduced-motion:reduce){
  .mj-tile,.mj-tile.mj-out,.mj-tile.mj-back,.mj-tile.mj-shake,.mj-tile.mj-flip,.mj-tile.hint,.mj-panel,.mj-stars b,.mj-coins .tot,.mj-hud .hot{animation:none;transition:none}
  .mj-tile.mj-out{opacity:0}.mj-spark,.mj-confetti{display:none}.mj-toast{animation:none}
}

.mj-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 6px}
.mj-name{font:700 .78rem 'Plus Jakarta Sans',system-ui,sans-serif;color:#334155;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mj-name b{font:600 .65rem 'JetBrains Mono',monospace;background:#17795a22;color:#17795a;padding:2px 7px;border-radius:99px;margin-left:6px}