.mj-board{position:relative;margin:var(--space-4) auto;width:100%;--mj-unit: clamp(11px, 3.2vw, 24px);--mj-depth: clamp(2px, .5vw, 4px)}.mj-tile{position:absolute;width:calc(var(--mj-unit) * 2 - 2px);height:calc(var(--mj-unit) * 2.4);border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(.55rem,1.4vw,.95rem);font-weight:700;line-height:1.1;user-select:none;cursor:default;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--mj-depth) var(--mj-depth) 0 var(--color-border-mid),calc(var(--mj-depth) + 1px) calc(var(--mj-depth) + 1px) 0 var(--color-border);transition:box-shadow .15s,transform .15s,opacity .3s;overflow:hidden}.mj-tile .tile-top{font-size:clamp(.65rem,1.6vw,1.1rem)}.mj-tile .tile-bottom{font-size:clamp(.4rem,1vw,.65rem);opacity:.7}.mj-tile.dots{color:#1d4ed8}.mj-tile.bamboo{color:#16a34a}.mj-tile.characters{color:#dc2626}.mj-tile.winds{color:#6d28d9}.mj-tile.dragon-red{color:#dc2626}.mj-tile.dragon-green{color:#16a34a}.mj-tile.dragon-white{color:var(--color-text);border-style:dashed}.mj-tile.seasons{background:linear-gradient(135deg,#fef3c7,var(--color-surface))}.mj-tile.emoji-tile{font-size:clamp(.9rem,2.4vw,1.6rem);line-height:1}.mj-tile.emoji-tile .tile-top{font-size:inherit}.theme-select{padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:.8rem;cursor:pointer}.mj-tile.flowers{background:linear-gradient(135deg,#dbeafe,var(--color-surface))}.mj-tile.free{cursor:pointer}.mj-tile.free:hover{transform:translateY(-1px);box-shadow:var(--mj-depth) calc(var(--mj-depth) + 1px) 0 var(--color-border-mid),calc(var(--mj-depth) + 1px) calc(var(--mj-depth) + 2px) 0 var(--color-border)}.mj-tile.blocked{opacity:.6}.mj-tile.selected{outline:2px solid var(--color-amber, #f59e0b);outline-offset:-1px;transform:translateY(-2px);z-index:9999!important}.mj-tile.hint-highlight{animation:mj-hint-pulse .6s ease-in-out 3}@keyframes mj-hint-pulse{0%,to{outline:2px solid transparent}50%{outline:2px solid var(--color-amber, #f59e0b)}}.mj-tile.matched{animation:mj-match-remove .35s ease-out forwards}@keyframes mj-match-remove{0%{transform:scale(1);opacity:1}to{transform:scale(.5);opacity:0}}.mj-tile.mismatch{animation:mj-mismatch-shake .3s ease-in-out}@keyframes mj-mismatch-shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.game-title-bar,.instructions{max-width:720px}.overlay-actions{display:flex;gap:var(--space-3);justify-content:center;margin-top:var(--space-3)}@media(max-width:600px){.game-title-bar{max-width:calc(100vw - 2 * var(--space-3))}}.mj-stat-list{display:grid;gap:var(--space-2);margin:0;padding:0}.mj-stat-list>div{display:flex;justify-content:space-between;gap:var(--space-4)}.mj-stat-list dt{color:var(--color-text-muted);font-size:.85rem}.mj-stat-list dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}.mj-stats-actions{margin-top:var(--space-3);text-align:center}.mj-legend{width:100%;margin-top:var(--space-3);border-collapse:collapse;font-size:.9rem}.mj-legend th,.mj-legend td{padding:var(--space-2) var(--space-3);text-align:left;border-bottom:1px solid var(--color-border)}.mj-legend th{color:var(--color-text-muted);font-weight:600;font-size:.82rem}.mj-legend td:nth-child(2),.mj-legend td:nth-child(3){font-size:1.15rem;letter-spacing:.15em}.mj-game-number{font-size:.8rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums;background:none;border:1px dashed transparent;border-radius:var(--radius-sm);padding:2px 6px;cursor:pointer;transition:border-color .15s,color .15s}.mj-game-number:hover{border-color:var(--color-border-mid);color:var(--color-text)}@media(max-width:767px){.mj-game-number{font-size:.65rem}}.mj-toast{position:fixed;bottom:var(--space-6);left:50%;transform:translate(-50%);background:var(--color-navy);color:var(--color-btn-text);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:.85rem;z-index:100;box-shadow:var(--shadow-lg);animation:mj-toast-in .2s ease-out}.mj-toast.error{background:var(--color-red, #c0392b)}@keyframes mj-toast-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}