.puzzle-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.puzzle-setting select{min-height:44px;max-width:65%;padding:8px 12px;border:1px solid #626773;border-radius:8px;background:#151a20;color:#fff;font:inherit}
.puzzle-board{width:100%;max-width:540px;margin:12px auto;touch-action:manipulation;user-select:none}
.puzzle-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.puzzle-tools button{flex:1 1 auto;min-height:44px}.puzzle-tools button[aria-pressed=true]{outline:2px solid #e8c76d;background:#665327}
.sudoku-board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));aspect-ratio:1;border:5px solid #8e7044;border-radius:8px;overflow:hidden;background:#f6efdf;box-shadow:0 10px 28px #0005}
.sudoku-cell{position:relative;display:grid;place-items:center;padding:0;min-width:0;min-height:0;border:0;border-right:1px solid #c6baa3;border-bottom:1px solid #c6baa3;border-radius:0;background:#fbf5e9;color:#1f638d;font:500 clamp(18px,4.8vw,32px) Arial;cursor:pointer;transition:background .25s,color .25s}
.sudoku-cell:nth-child(3n){border-right:2px solid #887556}.sudoku-cell:nth-child(9n){border-right:0}.sudoku-cell[data-row="2"],.sudoku-cell[data-row="5"]{border-bottom:2px solid #887556}
.sudoku-cell.given{color:#403b31;font-weight:700}.sudoku-cell.related{background:#eae3cf}.sudoku-cell.same{background:#dfeddd}.sudoku-cell.selected{background:#f7d784;box-shadow:inset 0 0 0 2px #a97c1d;z-index:1}.sudoku-cell.wrong{color:#b52525;background:#ffddd2}
.sudoku-notes{display:grid;grid-template-columns:repeat(3,1fr);position:absolute;inset:2px;font:500 clamp(8px,1.6vw,13px) Arial;color:#546373}.sudoku-notes span{display:grid;place-items:center}
.number-pad{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;width:100%;max-width:540px;margin:auto}.number-pad button{min-height:46px;padding:0;border:1px solid #807051;border-radius:7px;background:#f3e7c9;color:#443c2c;font:600 clamp(18px,5vw,26px) Arial;box-shadow:0 3px 0 #6b5836}
.mahjong-board{position:relative;aspect-ratio:var(--cols)/calc(var(--rows)*1.3);max-width:650px;border:8px solid #8a663c;border-radius:15px;background:radial-gradient(ellipse,#286356,#133c34);box-shadow:inset 0 0 30px #001b18,0 10px 25px #0006;isolation:isolate}
.mahjong-tile{position:absolute;left:calc(var(--x)*100%/var(--cols));top:calc(var(--y)*100%/var(--rows));width:calc(100%/var(--cols) - 3px);height:calc(100%/var(--rows) - 5px);transform:translate(calc(var(--z)*-2px),calc(var(--z)*-3px));z-index:var(--z);display:grid;place-items:center;padding:3px;border:1px solid #d1c49e;border-radius:6px;background:linear-gradient(140deg,#fffdf0,#e9dcb9);box-shadow:2px 4px 0 #b2a17c,3px 5px 3px #001d1b99;cursor:pointer;transition:filter .25s,box-shadow .25s}
.mahjong-tile svg{width:100%;height:100%;pointer-events:none}.mahjong-tile.blocked{filter:brightness(.8)}.mahjong-tile.chosen{outline:3px solid #f8ca4d;outline-offset:-2px;box-shadow:0 0 15px #ffd55c,2px 4px 0 #b2a17c}.mahjong-tile.hinted{outline:3px solid #93f4d4;outline-offset:-2px}.mahjong-tile:focus-visible{outline:3px solid #59caff;outline-offset:-2px}
.puzzle-summary{color:#c5cfcb;font-size:14px;line-height:1.5}.puzzle-best{margin-top:14px;padding:12px;border:1px solid #424a4c;border-radius:8px;color:#e0d3ac;font-size:14px}.puzzle-empty{padding:30px;text-align:center;color:#f5e7bb}
.mahjong-tile{transform:translate(calc(var(--z)*-6px),calc(var(--z)*-9px));box-shadow:0 5px 0 #b4a076,2px 8px 0 #75613e,4px 11px 7px #001810b3}
.mahjong-tile:not(.blocked){outline:2px solid #72f2ce;outline-offset:-2px;background:linear-gradient(140deg,#fffef7,#fff0c8)}
.mahjong-tile.blocked{filter:brightness(.52) saturate(.35);outline:none}
.mahjong-tile.chosen{outline:3px solid #ffd044;box-shadow:0 0 16px #ffd55c,0 5px 0 #aa8545,3px 9px 6px #001810}
.mahjong-tile.hinted{outline:3px solid #fff;box-shadow:0 0 20px #81ffd9,0 5px 0 #b4a076}
.mahjong-legend{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 14px;font-size:13px;color:#d6e6df}.mahjong-legend span::before{content:'';display:inline-block;width:12px;height:15px;vertical-align:-3px;margin-right:7px;border-radius:2px;background:#fff2cf;border:2px solid #72f2ce}.mahjong-legend span+span::before{background:#827967;border-color:#55554b}
.mahjong-viewport{width:100%;min-width:0;overflow:auto;padding:8px 4px 14px;overscroll-behavior-x:contain}.mahjong-board.expanded{width:calc(var(--cols)*58px);max-width:none;min-width:100%;margin-left:0}.mahjong-board.expanded .mahjong-tile{touch-action:pan-x pan-y}
[data-game=mahjong] .layout__board{min-width:0;max-width:100%}.mahjong-viewport{contain:inline-size}
@media(max-width:640px){.puzzle-setting{font-size:14px}.puzzle-board{margin:10px auto}.number-pad{gap:3px}.number-pad button{min-height:44px}.mahjong-board{border-width:6px}.mahjong-tile{padding:1px;border-radius:4px}.puzzle-tools .button{padding:9px;font-size:14px}.sudoku-board{border-width:3px}}