:root{--cream:#f8f7f2;--paper:#fffefa;--ink:#253d35;--muted:#778179;--green:#285749;--line:#e2e5dc;--gold:#b58c47;--sans:'DM Sans',system-ui,sans-serif;--serif:'Libre Caslon Display',Georgia,serif}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:14px}button,input,select{font:inherit}button,.button{cursor:pointer}button,a,input,select,label.button{ -webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,label.button:focus-within{outline:3px solid #cc9d4f;outline-offset:3px}button{color:inherit}a{color:inherit;text-decoration:none}.topbar{height:90px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 40px;gap:38px;background:var(--paper)}.brand{display:flex;align-items:center;gap:13px;font-size:23px;font-weight:700;letter-spacing:-1px}.brand-light{font-weight:400}.brand-mark{font-family:serif;font-size:29px;background:var(--green);color:#fff9df;border-radius:6px;padding:5px 9px;box-shadow:0 3px 0 #b4c4b5}.edition{font-size:10px;letter-spacing:2.5px;color:var(--muted);border-left:1px solid var(--line);padding-left:30px}.topbar>button{margin-left:auto}.quiet{background:none;border:0;padding:10px;color:var(--green)}.app-shell{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 90px)}aside{padding:36px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--muted);margin:0 0 18px}.nav{width:100%;display:flex;gap:13px;align-items:center;text-align:left;border:0;background:none;padding:15px 13px;border-radius:7px;color:#66746a;margin:4px 0;font-size:13px}.nav span{font-size:20px;width:24px;text-align:center}.nav.active{background:#e7eee5;color:var(--green);font-weight:700}.nav:hover{background:#edf0e9}.sidebar-note{margin:55px 10px 35px;border-top:1px solid var(--line);padding-top:29px}.small-flower{color:var(--gold);font-size:29px}.sidebar-note h3{font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.15;margin:15px 0}.sidebar-note p,.sidebar-bottom{color:var(--muted);font-size:12px;line-height:1.8}.sidebar-bottom{margin-top:auto;padding:12px}.sidebar-bottom span{font-size:10px}main{padding:38px 42px 55px;min-width:0;max-width:1500px;width:100%;margin:auto;margin-top:0}h1{font-family:var(--serif);font-size:49px;line-height:1.1;font-weight:400;margin:8px 0 16px;letter-spacing:-.9px}h2{font-size:21px;font-weight:500;margin:0 0 12px}h3{margin:0}p{line-height:1.65}.muted{color:var(--muted)}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:26px}.page-head p{margin:0;color:var(--muted)}.primary,.button{border:1px solid var(--line);padding:12px 19px;border-radius:6px;background:var(--paper);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:500}.primary{background:var(--green);color:white;border-color:var(--green)}.primary:hover{background:#173f33}.button:hover{background:#f0f3eb}.hero{background:#eaf0e5;border:1px solid #dbe4d5;border-radius:10px;padding:28px 30px;display:grid;grid-template-columns:1fr 1.2fr;gap:25px;position:relative;overflow:hidden;margin-bottom:30px}.hero h2{font-family:var(--serif);font-size:34px;margin:0 0 10px}.hero p{color:#6b786c;max-width:320px;font-size:13px;margin:0 0 17px}.hero .eyebrow{color:#71835f;font-size:9px;margin-bottom:12px}.hero-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;background:radial-gradient(ellipse,#dae4cf,transparent 70%)}.hero-art .tile{width:49px;height:68px;transform:rotate(-5deg);font-size:37px;box-shadow:0 5px 0 #ccd5c2,0 8px 10px #738d6630}.hero-art .tile:nth-child(even){transform:rotate(5deg) translateY(-7px)}.art-caption{color:#6b786c;font-size:10px;letter-spacing:2px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px;flex-wrap:wrap}.search{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:11px 14px;min-width:235px;color:var(--ink)}.chips{display:flex;gap:7px;flex-wrap:wrap}.chip{background:none;border:1px solid transparent;padding:8px 13px;border-radius:20px;color:var(--muted);font-size:12px}.chip.active{background:var(--green);color:white}.chip:not(.active):hover{border-color:var(--line)}.section-line{display:flex;justify-content:space-between;align-items:center;margin:5px 0 17px;font-size:12px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.card{background:var(--paper);border:1px solid var(--line);border-radius:9px;overflow:hidden;display:flex;flex-direction:column}.card:hover{border-color:#b3c5ad}.card-art{padding:25px 10px;background:#f0f2e9;border-bottom:1px solid #e8ebdf;display:flex;justify-content:center;gap:4px;min-height:111px;align-items:center}.card:nth-child(3n+2) .card-art{background:#f4f0e7}.card:nth-child(3n+3) .card-art{background:#eaf0eb}.card-body{padding:18px 19px;display:flex;flex-direction:column;flex:1}.tag{font-size:9px;color:#879271;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:9px}.card h3{font-family:var(--serif);font-size:26px;font-weight:400}.card p{color:var(--muted);font-size:12px;margin:9px 0 16px}.card-footer{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;display:flex;align-items:center;justify-content:space-between}.card-footer button{font-size:12px;padding:3px 0}.card-footer span{font-size:10px;color:var(--muted)}.tile{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:43px;height:59px;background:#fffef8;border:1px solid #d8dccc;border-radius:5px;box-shadow:0 3px 0 #d2d9c7;color:#24684b;font-family:serif;font-size:34px;padding:0;line-height:1;vertical-align:middle}.tile[data-suit=c],.tile[data-suit=dr]{color:#a14c3f}.tile[data-suit=d]{color:#315976}.tile .rank{position:absolute;left:3px;top:4px;font:9px var(--sans);color:#5e695d}.tile.small{width:31px;height:44px;font-size:25px}.tile.small .rank{font-size:7px;left:2px;top:3px}.tile:hover:is(button){transform:translateY(-4px);border-color:var(--green)}.tile:disabled{opacity:.3;cursor:not-allowed}.panel{padding:25px;background:var(--paper);border:1px solid var(--line);border-radius:9px;margin-bottom:22px}.rack-area{background:var(--green);border-radius:10px;padding:25px;color:#f8f9ec;margin-bottom:22px}.rack-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.rack-top .eyebrow{color:#c8d7c3;margin:0}.rack-top .quiet{color:#edf4dd;font-size:12px}.rack-tiles{display:flex;gap:5px;flex-wrap:wrap;min-height:88px;align-items:center;margin:15px 0 5px;padding-bottom:16px;border-bottom:5px solid #b09b6d}.rack-tiles .tile{width:46px;height:64px;font-size:36px}.rack-placeholder{opacity:.62;font-family:var(--serif);font-size:25px}.rack-info{font-size:11px;display:flex;justify-content:space-between;color:#d6e4d1;margin-top:12px}.palette{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 18px}.palette-title{font-size:11px;color:var(--muted);letter-spacing:1px}.two-col{display:grid;grid-template-columns:1.15fr 1fr;gap:22px}.match{padding:16px 0;border-bottom:1px solid var(--line)}.match:first-child{padding-top:0}.match:last-child{border:0}.match-top{display:flex;justify-content:space-between;gap:12px;font-size:14px}.match-top strong{font-weight:500}.match-top span{font-size:11px;color:var(--muted);white-space:nowrap}.progress{height:4px;background:#e9eee3;border-radius:4px;margin:12px 0}.progress div{height:100%;background:#8caa78;border-radius:4px}.missing{display:flex;gap:4px;flex-wrap:wrap;align-items:center}.missing-label{font-size:10px;color:var(--muted);margin-right:7px}.empty{padding:35px;text-align:center;color:var(--muted)}.notice{background:#edf3e7;border:1px solid #d6e4cb;border-radius:7px;padding:12px 16px;line-height:1.6;margin:15px 0;color:#425c38;font-size:13px}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.lesson-heading{display:flex;gap:15px;align-items:center;justify-content:space-between;margin-bottom:20px}.lesson-heading select{max-width:100%;padding:10px;border:1px solid var(--line);border-radius:5px;background:white}.reference{max-width:100%;max-height:200px;object-fit:contain;border-radius:6px;background:#f0f1eb;display:block;margin-bottom:15px}.discard-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:12px}.footnote{font-size:11px;color:var(--muted);line-height:1.65;margin-top:18px}.win{background:#dfeccf;color:#234525;font-weight:500}.stats{color:var(--muted);font-size:12px}.helper-link{font-size:12px;text-decoration:underline;cursor:pointer}dialog{border:1px solid var(--line);border-radius:12px;max-width:650px;width:calc(100% - 30px);padding:28px;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#172e2680;backdrop-filter:blur(4px)}.dialog-title{display:flex;justify-content:space-between;align-items:center}.dialog-title button{font-size:25px;background:none;border:0;padding:5px 12px}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}video,#photo{max-width:100%;max-height:350px;border-radius:7px}video:not([srcobject]){min-height:0}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 20px;background:#244e40;color:white;border-radius:7px;box-shadow:0 5px 20px #0002;z-index:5;max-width:90%;font-size:13px}#toast:empty{display:none}[hidden]{display:none!important}.bottom-note{margin-top:25px;border-top:1px solid var(--line);padding-top:16px;font-size:11px;color:var(--muted)}
@media(min-width:1450px){main{padding:45px 65px}.grid{gap:23px}.card-art .tile{width:37px;height:51px;font-size:30px}}
@media(max-width:1150px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-shell{grid-template-columns:205px 1fr}main{padding:28px}.hero{grid-template-columns:1fr}.hero-art{display:none}.two-col{grid-template-columns:1fr}}
@media(max-width:720px){.topbar{height:73px;padding:0 18px}.brand{font-size:20px}.edition{display:none}.topbar>button{font-size:11px}.app-shell{display:block}aside{padding:8px 12px;border-right:0;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--cream);z-index:2}aside>.eyebrow,.sidebar-note,.sidebar-bottom{display:none}nav{display:flex;overflow:auto;gap:4px}.nav{font-size:11px;white-space:nowrap;padding:9px;gap:5px;width:auto}.nav span{font-size:16px;width:auto}main{padding:24px 18px}h1{font-size:40px}.page-head{align-items:flex-start;flex-direction:column;gap:17px}.hero{padding:23px}.grid{gap:12px}.card-body{padding:14px}.card h3{font-size:23px}.card-art{gap:2px;padding:20px 5px;min-height:97px}.card-art .tile.small{width:25px;height:37px;font-size:22px}.card-art .tile:nth-child(n+7){display:none}.search{width:100%}.toolbar{gap:12px}.chip{font-size:11px;padding:7px 10px}.rack-tiles .tile{width:37px;height:53px;font-size:31px}.rack-area,.panel{padding:18px}.lesson-heading{align-items:flex-start;flex-direction:column}.palette .tile{width:35px;height:50px;font-size:29px}.hero h2{font-size:30px}}
@media(prefers-reduced-motion:no-preference){button,.card{transition:background .15s,transform .15s,border-color .15s}}
/* Premium felt-table treatment. Tile artwork is vector, with layered physical edges. */
:root{--cream:#f3f1e9;--paper:#fffdf6;--ink:#263c32;--green:#214f3c;--line:#dddccf;--gold:#c6a56a}
.topbar{height:78px;background:#142e25;color:#eee9d8;border-bottom:1px solid #af955438;padding:0 32px}.brand-mark{background:linear-gradient(145deg,#eee9d6,#d4ccae);color:#294e3b;border:1px solid #fff9df;box-shadow:0 3px 0 #b2a98a}.topbar .quiet{color:#dbd5bd}.edition{color:#a3b3a4;border-color:#a3b3a433}.app-shell{min-height:calc(100vh - 78px);grid-template-columns:210px 1fr}aside{background:#eeede4;padding:32px 17px}.nav.active{background:#dae1d1;color:#26482f}.sidebar-note{margin-top:42px}.sidebar-note h3{font-size:27px}.sidebar-bottom{font-size:11px}main{max-width:1800px;padding:30px 35px 40px}.table-page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}.table-page-head .eyebrow{font-size:9px;margin-bottom:12px;color:#8b876d}.table-page-head h1{font-size:43px;margin:0 0 8px}.table-page-head p{font-size:12px;color:#7f8578;margin:0}.table-mode{font-size:11px;border:1px solid #d9dacd;padding:10px 13px;border-radius:30px;color:#677561;display:flex;align-items:center;gap:8px}.table-mode span{width:6px;height:6px;background:#5f8d5b;border-radius:100%}
.mahjong-table{position:relative;border-radius:30px;background:radial-gradient(ellipse at 45% 25%,#407855 0%,#2d6044 53%,#224c37 100%);border:9px solid #3b3127;box-shadow:0 0 0 2px #766246,0 0 0 4px #c2af83,0 15px 26px #282b2426,inset 0 0 0 2px #b3a4763d,inset 0 0 35px #10271dc2;color:#f2efdd;min-height:575px;padding:24px 30px 20px;overflow:hidden;isolation:isolate}.table-grain{position:absolute;inset:0;z-index:-1;opacity:.22;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.55' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.table-topline{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}.table-inscription{font-size:10px;letter-spacing:3px;color:#dae0bd96}.table-inscription b{font-weight:400;color:#c7bb91}.table-buttons{display:flex;gap:8px}.table-help{background:#123d2c45;color:#e1e6d1;border:1px solid #cfdeb62b;border-radius:6px;padding:9px 13px;font-size:11px}.table-help:hover{background:#11332188}.table-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px;min-height:320px;padding:17px 5px}.wall-square{position:relative;max-width:300px;aspect-ratio:1.2;width:100%;justify-self:center}.wall{position:absolute;display:flex;gap:2px;justify-content:center;filter:drop-shadow(3px 6px 3px #11261975)}.wall-0{left:12%;right:12%;top:8%;transform:rotate(-1deg)}.wall-2{left:12%;right:12%;bottom:8%;transform:rotate(-1deg)}.wall-1{top:50%;left:48%;width:76%;transform:translateY(-50%) rotate(90deg)}.wall-3{top:50%;left:-24%;width:76%;transform:translateY(-50%) rotate(90deg)}.tile-back{display:block;width:11px;height:24px;flex:0 1 11px;border-radius:2px;background:linear-gradient(100deg,#e5debf,#faf1cd 45%,#d5cbab);border:1px solid #ddd4b5;box-shadow:0 3px 0 #ad9d71,0 5px 0 #e2d9bc,0 7px 0 #8f815d;position:relative}.tile-back:after{content:'';position:absolute;inset:3px 2px;border:1px solid #b7aa803d;border-radius:1px}.compass{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);height:110px;width:110px;border:1px solid #d4cd8e36;border-radius:50%;box-shadow:0 0 0 10px #cfce9d06,0 0 0 11px #d4cd8e19;display:grid;place-items:center}.compass-center{font-family:serif;font-size:39px;color:#d8d4a26b;text-shadow:0 1px 0 #173d2b}.compass>span{position:absolute;color:#d2cc9569;font-size:8px;letter-spacing:1px}.compass-n{top:5px}.compass-s{bottom:5px}.compass-e{right:6px}.compass-w{left:6px}.wall-counter{position:absolute;top:72%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap;gap:4px}.wall-counter strong{font-size:16px;font-weight:500;color:#e3dfc2}.wall-counter span{font-size:6px;letter-spacing:2px;color:#bdd1b4}.table-discard-area{min-width:0}.table-section-label{font-size:8px;letter-spacing:2px;color:#b8c6a0;line-height:2}.table-intro{text-align:center}.table-intro h2{font-family:var(--serif);font-size:40px;line-height:1.05;font-weight:400;color:#eeebd3;margin:15px 0}.table-intro p{font-size:11px;color:#b0c6ad;line-height:1.8}.gold-line{height:1px;width:28px;margin:0 auto 14px;background:#c0ac6b}.table-discard-area .discard-row{justify-content:center;gap:8px;max-height:215px;overflow:auto;padding:8px 3px 12px}.table-discard-area .tile.small{transform:rotate(-5deg)}.table-discard-area .tile.small:nth-child(3n){transform:rotate(6deg)}.table-discard-area .tile.small:nth-child(4n){transform:rotate(-1deg)}
.tile{background:linear-gradient(110deg,#fffef2 0%,#f5f1dc 45%,#ebe5cb 100%);border:1px solid #d3c8a8;border-radius:5px 5px 4px 4px;box-shadow:0 1px 0 #ffffed inset,1px 0 0 #ffffe5 inset,0 -2px 2px #c6b99466 inset,0 3px 0 #bbae88,0 5px 0 #e1d5b0,0 7px 0 #59795e,1px 8px 3px #112d224a;overflow:hidden;width:48px;height:66px;padding:2px 4px 1px}.tile-face{width:100%;height:100%;filter:drop-shadow(0 1px 0 #fffff4);display:block}.tile .rank{font-size:8px;top:4px;left:3px;color:#7d795e;z-index:1}.tile.small{width:35px;height:48px;padding:3px}.tile.small .rank{font-size:6px}.tile:hover:is(button){transform:translateY(-8px);box-shadow:0 1px 0 #ffffed inset,0 3px 0 #bbae88,0 5px 0 #e1d5b0,0 7px 0 #59795e,1px 12px 8px #112d2266}.tile:disabled:hover{transform:none}.table-rack-zone{margin:0 auto;width:100%;max-width:1000px}.table-rack-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.6px;color:#bac8a7;margin-bottom:12px;padding:0 10px}.table-rack.rack-tiles{display:flex;flex-wrap:nowrap;gap:6px;justify-content:center;min-height:0;border:0;padding:0 7px 8px;margin:0;overflow:visible}.table-rack .tile{width:clamp(36px,4.2vw,70px);height:auto;aspect-ratio: .70;flex:0 1 70px;min-width:0;padding:3px 5px;transform:perspective(650px) rotateX(5deg);border-radius:6px 6px 4px 4px;box-shadow:0 1px 0 #fffbe8 inset,1px 0 0 #fffbe8 inset,0 -2px 2px #c6b99477 inset,0 4px 0 #bbae88,0 7px 0 #e1d5b0,0 10px 0 #486949,2px 13px 5px #102d2377}.table-rack button.tile:hover{transform:translateY(-12px) rotate(-2deg);box-shadow:0 1px 0 #fffbe8 inset,0 4px 0 #bbae88,0 7px 0 #e1d5b0,0 10px 0 #486949,2px 19px 9px #102d2388}.table-rack .tile .rank{font-size:clamp(6px,.65vw,10px);top:5px;left:4px}.wood-rack{height:22px;background:repeating-linear-gradient(2deg,transparent 0 3px,#7253291a 4px 5px),linear-gradient(#c4a777,#aa8856 40%,#7b5c36 45%,#b29564 65%,#d0b486);border:1px solid #b99b66;border-radius:3px 3px 8px 8px;box-shadow:0 4px 0 #5d4b32,0 9px 10px #142d2370;margin-top:0;display:grid;place-items:center}.wood-rack span{font-size:6px;letter-spacing:3px;color:#573e22a3;text-shadow:0 1px 0 #e9c89466}.table-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:27px;padding:0 4px}.table-status{font-size:11px;color:#ccdbc2;line-height:1.7;max-width:52%}.gold-button{background:linear-gradient(130deg,#ead59c,#d7b568);border:1px solid #f6e6b0;border-radius:6px;color:#293e2c;box-shadow:0 2px 0 #9b824f,0 4px 10px #19372955;padding:11px 19px;font-size:12px;font-weight:700;display:flex;gap:18px;align-items:center;white-space:nowrap}.gold-button:hover{background:linear-gradient(130deg,#f6e4b2,#e4c782)}button:disabled{cursor:not-allowed;opacity:.45}.below-table{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:23px;font-size:11px;color:#7a816f}.below-table>span{display:flex;align-items:center;gap:8px}.below-table i{height:5px;width:5px;background:#78936a;border-radius:100%}.table-hints .hint-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.table-hints .match{border:0}.card-art{min-height:135px;padding-bottom:32px;gap:5px}.card-art .tile.small{width:36px;height:51px}.hero-art .tile{height:77px;width:55px;box-shadow:0 4px 0 #bbae88,0 7px 0 #e1d5b0,0 10px 0 #486949,2px 15px 9px #102d2330}.rack-area{background:radial-gradient(ellipse at top,#3d7653,#234f39);border:3px solid #9e8a5d;box-shadow:0 8px 12px #334c2b12;padding-bottom:24px}.rack-tiles{padding-bottom:22px;border-color:#b29865}.rack-tiles .tile{height:72px;width:51px}.palette{gap:9px;margin-bottom:25px}.panel{box-shadow:0 4px 14px #434d3910}.brand-light{font-family:var(--serif);font-size:26px;letter-spacing:0}.nav{padding:13px 9px;font-size:12px}
@media(min-width:1650px){.mahjong-table{min-height:700px;padding:30px 45px}.table-layout{min-height:400px}.wall-square{max-width:380px}.wall .tile-back{width:14px;flex-basis:14px;height:29px}.table-rack .tile{max-width:80px;flex-basis:80px}.table-intro h2{font-size:53px}.table-status{font-size:13px}.table-page-head h1{font-size:52px}}
@media(max-width:1150px){.app-shell{grid-template-columns:175px 1fr}main{padding:25px}.mahjong-table{padding:20px;border-width:7px;min-height:540px}.table-layout{gap:10px;min-height:310px}.table-rack.rack-tiles{gap:4px;padding-left:0;padding-right:0}.table-rack .tile{padding:4px 2px}.table-intro h2{font-size:34px}.table-status{font-size:10px}.table-bottom .actions{gap:6px}.table-help{padding:8px 10px}.gold-button{padding:11px 12px;gap:7px}.table-inscription{font-size:8px;letter-spacing:2px}.table-hints .hint-grid{grid-template-columns:1fr}.card-art .tile.small{width:32px;height:46px}}
@media(max-width:720px){.topbar{height:66px;padding:0 16px}.brand-light{font-size:24px}.app-shell{display:block}aside{background:#ebece2;padding:7px 10px}.nav{font-size:10px;padding:9px 8px;gap:4px}main{padding:21px 14px}.table-page-head{gap:10px;margin-bottom:20px;align-items:flex-start}.table-page-head h1{font-size:34px;max-width:245px}.table-page-head p{font-size:10px}.table-page-head .eyebrow{font-size:8px;letter-spacing:1.6px;margin-bottom:9px}.table-mode{font-size:8px;padding:7px 8px;white-space:nowrap;gap:5px;margin-top:23px}.mahjong-table{border-radius:21px;border-width:6px;padding:16px 12px;min-height:620px;box-shadow:0 0 0 1px #78633e,0 0 0 3px #c2af83,0 12px 24px #282b242b,inset 0 0 28px #10271da0}.table-inscription{font-size:7px;letter-spacing:1px}.table-help{font-size:10px;padding:8px 9px}.table-topline{gap:8px}.table-buttons{gap:5px}.table-layout{grid-template-columns:1fr;min-height:0;gap:8px;padding:8px 0 18px}.wall-square{max-width:230px;aspect-ratio:1.55;min-height:148px;margin-top:7px}.wall-0{top:5%}.wall-2{bottom:5%}.wall-1,.wall-3{width:53%;}.wall-1{left:62%}.wall-3{left:-15%}.tile-back{height:17px;width:8px;flex-basis:8px}.wall-1 .tile-back:nth-child(n+12),.wall-3 .tile-back:nth-child(n+12){display:none}.compass{width:62px;height:62px;top:43%;box-shadow:0 0 0 7px #cfce9d06,0 0 0 8px #d4cd8e19}.compass-center{font-size:25px}.compass>span{font-size:6px}.wall-counter{top:69%}.wall-counter strong{font-size:12px}.wall-counter span{font-size:5px}.table-intro h2{font-size:30px;margin:8px 0}.table-intro h2 br{display:none}.table-intro p{font-size:10px;margin:8px 0 0}.table-intro p br{display:none}.table-section-label{font-size:7px;letter-spacing:1.5px}.gold-line{display:none}.table-discard-area{min-height:86px;padding:4px 8px}.table-discard-area .discard-row{max-height:106px;gap:5px}.table-discard-area .tile.small{width:25px;height:35px;padding:3px}.table-discard-area .tile.small .rank{font-size:5px}.table-rack.rack-tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px 5px;padding:0 2px 9px;max-width:380px;margin:auto}.table-rack .tile{width:100%;height:auto;max-width:none;aspect-ratio:.70;min-height:0;padding:5px 3px;box-shadow:0 1px 0 #fffbe8 inset,0 3px 0 #bbae88,0 5px 0 #e1d5b0,0 7px 0 #486949,1px 10px 4px #102d2377}.table-rack .tile .rank{font-size:7px;top:4px;left:3px}.table-rack-label{font-size:7px;padding:0 3px;margin-bottom:11px}.wood-rack{height:16px}.wood-rack span{font-size:5px;letter-spacing:2px}.table-bottom{margin-top:19px;flex-direction:column;align-items:stretch;gap:12px;padding:0}.table-status{max-width:none;text-align:center;font-size:10px}.table-bottom .actions{justify-content:center;gap:8px}.gold-button{font-size:11px;padding:11px 17px}.below-table{align-items:flex-start;margin-top:20px;flex-direction:column;gap:3px;font-size:10px}.below-table .quiet{padding:8px 0;font-size:11px}.card-art{padding:21px 6px 27px;gap:4px;min-height:110px}.card-art .tile.small{width:25px;height:37px}.card-art .tile:nth-child(n+6){display:none}.hero-art{display:none}.rack-tiles .tile{width:39px;height:56px}.palette .tile{width:38px;height:54px}.palette{gap:7px}.table-hints .hint-grid{gap:8px}.card-footer{gap:8px}.card-footer span{font-size:9px}.card-footer button{font-size:10px}.brand-mark{font-size:25px}.sidebar-note{display:none}}
@media(max-width:370px){.table-mode{display:none}.table-help{font-size:9px;padding:7px}.table-rack.rack-tiles{gap:14px 4px}.table-rack .tile{padding:5px 2px}.table-bottom .actions{gap:5px}.gold-button{padding:10px 12px}.table-inscription{font-size:6px}.table-rack .rank{font-size:6px}}
@media(min-width:721px) and (max-height:700px){.table-layout{min-height:240px}.mahjong-table{min-height:0}.wall-square{max-width:240px}.table-page-head{margin-bottom:18px}.table-page-head h1{font-size:35px}}
@media(max-width:720px){nav{overflow:visible;gap:3px}.nav{flex:1;min-width:0;white-space:normal;flex-direction:column;justify-content:center;text-align:center;font-size:9px;line-height:1.3;padding:7px 3px;margin:0}.nav span{font-size:17px}.topbar{gap:15px}}
.potential-panel{background:linear-gradient(140deg,#133c2cdd,#173b2be8);border:1px solid #d3bc824a;border-radius:12px;padding:16px 18px;color:#f2edda;box-shadow:0 8px 22px #142d2430;min-width:0}.potential-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.potential-heading h2{font:29px var(--serif);margin:3px 0 0}.potential-heading .table-section-label{font-size:6px}.potential-count{color:#d8c58f;font-size:11px;padding:6px 9px;border:1px solid #d8c58f55;border-radius:20px}.potential-intro{font-size:9px;color:#bccbb0;margin:7px 0 11px}.potential-scroll{max-height:215px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c3af78 #123324;padding-right:9px}.potential-hand{padding:13px 0 15px;border-bottom:1px solid #b9cf9e2a}.potential-hand:first-child{padding-top:0}.potential-hand:last-child{border:0}.potential-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.potential-title h3{font-size:13px;font-weight:600;color:#f1eedb}.potential-title>span{font-size:9px;white-space:nowrap;color:#d4bc7e}.potential-hand>p{font-size:10px;line-height:1.6;color:#c1ceb5;margin:7px 0 10px}.potential-pattern{display:flex;gap:3px;flex-wrap:wrap;padding-bottom:6px}.potential-tile{display:inline-flex}.potential-tile .tile.small{width:22px;height:31px;padding:2px;box-shadow:0 2px 0 #bbae88,0 3px 0 #58704a,0 5px 3px #091e1666;transform:none!important}.potential-tile .tile .rank{display:none}.potential-tile.needed{opacity:.4}.potential-summary{font-size:9px;color:#d4bc7e;margin-top:3px}.potential-legend{border-top:1px solid #b9cf9e2a;display:flex;gap:18px;padding-top:10px;font-size:8px;color:#c0cbae;margin-top:8px}.potential-legend span{display:flex;gap:5px;align-items:center}.potential-legend i{width:7px;height:9px;border-radius:1px;background:#f2ebd3}.potential-legend .needed{opacity:.4}.potential-caveat{font-size:8px;line-height:1.5;color:#b6c5aa;margin:9px 0 0}.table-layout:has(.potential-panel){grid-template-columns:.85fr 1.15fr;min-height:390px}.table-discard-area:has(.potential-panel){padding:0}.play-discards h2{font-size:16px}.play-discards h2 span{font-size:11px;color:var(--muted);margin-left:8px}.play-discards .discard-row{gap:8px;padding-bottom:8px}.table-bottom .table-help{white-space:nowrap}
@media(min-width:1600px){.potential-scroll{max-height:260px}.potential-tile .tile.small{width:27px;height:38px}.potential-title h3{font-size:16px}.potential-hand>p{font-size:12px}.potential-intro,.potential-summary{font-size:10px}}
@media(max-width:1000px) and (min-width:721px){.table-layout:has(.potential-panel){grid-template-columns:.65fr 1.35fr;gap:15px}.potential-panel{padding:14px}.table-bottom{flex-wrap:wrap}.table-bottom .table-status{max-width:100%}}
@media(max-width:720px){.table-layout:has(.potential-panel){grid-template-columns:1fr;min-height:0;gap:12px}.table-layout:has(.potential-panel) .wall-square{display:none}.potential-panel{padding:12px;border-radius:8px}.potential-heading h2{font-size:26px}.potential-scroll{max-height:200px}.potential-title h3{font-size:12px}.potential-pattern{gap:3px;display:grid;grid-template-columns:repeat(14,minmax(0,1fr))}.potential-tile .tile.small{width:100%;height:auto;aspect-ratio:.7;min-width:0;padding:1px;box-shadow:0 2px 0 #a39772}.potential-legend{padding-top:8px}.potential-hand>p{font-size:10px}.potential-caveat{font-size:8px}.table-bottom .table-help{font-size:9px;padding:8px}.table-bottom .actions{flex-wrap:wrap}.table-layout:has(.potential-panel){padding:12px 0 18px}}
/* Four-seat game: real concealed racks, separate locked sets and claim controls. */
.four-seat-table{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,1fr) minmax(0,1fr);grid-template-areas:'. north .' 'west center south';gap:20px;margin:22px 0;color:#fff7db}
.seat-2{grid-area:north}.seat-3{grid-area:west}.seat-1{grid-area:south}.table-center{grid-area:center;text-align:center;align-self:center}
.opponent{min-width:0;padding:12px;border:1px solid #ffffff25;border-radius:12px;background:#133d2b55}.current-seat{border-color:#eed17b;box-shadow:0 0 0 2px #eed17b35}.seat-title{display:flex;flex-direction:column;gap:4px;font-size:13px}.seat-title span{font-size:11px;opacity:.8}.opponent-rack{display:flex;flex-wrap:wrap;gap:2px;margin-top:10px}.mini-back{display:inline-block;width:13px;height:24px;border-radius:3px;background:linear-gradient(110deg,#f2e4bd,#ba9b68);border:1px solid #f2e4bd;box-shadow:0 3px 0 #715233}.table-center>strong{font-size:30px}.table-center>span{display:block;font-size:11px;text-transform:uppercase}.center-dragon{font-size:56px;opacity:.3;padding:18px}.last-discard{display:flex;align-items:center;flex-direction:column;gap:9px;margin-top:12px}.last-discard>span:last-child{font-size:11px}.meld-row{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}.meld-group>span{font-size:11px;text-transform:capitalize;display:block;margin-bottom:6px}.meld-group>div{display:flex;gap:2px}.opponent .tile.small{width:23px;height:32px;min-width:23px}.human-melds{color:#fff7db}.flower-face{font-size:28px;color:#286845;margin:auto}.table-rack button:disabled{opacity:1;cursor:default}.mahjong-table>.potential-panel{margin-top:24px;max-width:100%}.table-bottom .actions{flex-wrap:wrap}.table-status{white-space:normal}.seat-discards{margin:16px 0}.seat-discards h3{font-size:14px}.discard-row{flex-wrap:wrap}.wood-rack{border-top:4px solid #d0a06a;box-shadow:inset 0 3px 5px #46250c66,0 8px 12px #10291e66}
@media(max-width:700px){.four-seat-table{grid-template-columns:minmax(0,1fr) minmax(70px,.6fr) minmax(0,1fr);gap:7px}.opponent{padding:7px}.seat-2{grid-column:1/4;max-width:230px;justify-self:center;width:100%}.mini-back{width:9px;height:20px}.seat-title{font-size:12px}.opponent .tile.small{width:19px;min-width:19px;height:28px}.table-center>strong{font-size:23px}.table-bottom{align-items:stretch}.table-bottom .actions{justify-content:flex-start}.gold-button{white-space:normal}.mahjong-table>.potential-panel{padding:12px}.meld-row{gap:5px}.table-rack-label{font-size:10px}}