:root{--bg: #f4efe4;--panel: #fffdf8;--ink: #23201c;--muted: #6b6560;--felt: #2f6f52;--felt-dark: #245a42;--accent: #b8542b;--accent-2: #d98c5f;--tint: #efe3d0;--tint-strong: #d5c7ad;--ring: rgba(184, 84, 43, .22);--tile: #fffdf3;--tile-edge: #d8cfb8;--bam: #1f7a3a;--crak: #b8322b;--dot: #1f4f9f;--heading: Georgia, "Times New Roman", "Songti SC", SimSun, serif}:root[data-skin=monet]{--bg: #f1f6f4;--accent: #c42d6e;--accent-2: #5c9eb6;--tint: #dcedf0;--tint-strong: #a8d8dd;--ring: rgba(196, 45, 110, .2)}:root[data-skin=charleston]{--bg: #f6f3fb;--accent: #8b74d6;--accent-2: #e58aa3;--tint: #ece6fa;--tint-strong: #cfc3f1;--ring: rgba(139, 116, 214, .24)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}h1,h2,h3{font-family:var(--heading);font-weight:600;letter-spacing:.2px}.app{max-width:1320px;margin:0 auto;padding:12px 16px 40px}.app.fit{height:100vh;padding-bottom:10px;overflow:hidden;display:flex;flex-direction:column}.app.fit header.top{flex:none}.app.fit .play{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch}.app.fit .side{height:100%;min-height:0}header.top{display:flex;align-items:center;gap:14px;margin-bottom:12px;padding:8px 16px;border-radius:16px;background:linear-gradient(90deg,var(--tint),#ffffff 55%,var(--tint));border:1px solid var(--tint-strong);box-shadow:0 6px 18px #0000000d}header.top h1{font-size:22px;margin:0;color:var(--accent)}nav.tabs{display:flex;gap:2px;padding:3px;background:#ffffffbf;border:1px solid var(--tint-strong);border-radius:999px}nav.tabs button{background:none;border:none;border-radius:999px;font-size:15px;padding:6px 14px;cursor:pointer;color:var(--muted);transition:background .15s}nav.tabs button:hover{background:var(--tint);color:var(--ink)}nav.tabs button.on{background:var(--accent);color:#fff;box-shadow:0 2px 6px var(--ring)}.small-label{font-size:14px}.small-label input[type=checkbox],.start input[type=checkbox],.form input{accent-color:var(--accent)}button{font:inherit}button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none;border-radius:999px;padding:9px 20px;font-size:16px;cursor:pointer;box-shadow:0 4px 12px var(--ring);transition:transform .1s,filter .15s}button.primary:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}button.secondary{background:#fff;border:1px solid var(--tint-strong);border-radius:999px;padding:8px 16px;cursor:pointer;color:var(--ink);transition:border-color .15s}button.secondary:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}select,input[type=number],.start input,.form input{font:inherit;padding:5px 9px;border:1px solid var(--tint-strong);border-radius:10px;background:#fff;color:var(--ink)}select:focus,input:focus{outline:2px solid var(--ring);border-color:var(--accent)}.muted{color:var(--muted)}.tag{font-size:11px;background:#ffd97a;color:#4a3a00;padding:1px 6px;border-radius:6px;margin-left:4px}.play{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}.table-wrap{display:flex;flex-direction:column;gap:10px;min-width:0}.mat-box{margin:0 auto;flex:none}.mat{position:relative;width:820px;height:820px;transform-origin:top left;transition:transform .25s ease;will-change:transform;contain:layout paint;border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 50%,#1b5a50,#0f3b36 70%);background-size:cover;background-position:center;box-shadow:0 10px 30px #00000047;color:#fff}.rack{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px}.rack .bar{display:flex;gap:2px;padding:4px 6px;background:linear-gradient(180deg,#f1e6d2,#cdbb9c);border-radius:5px;box-shadow:0 2px 4px #0006,inset 0 1px #fff8ea}.rack.active .bar{box-shadow:0 0 0 3px #ffd97a,0 2px 4px #0006}.rack.top{top:2%;left:50%;transform:translate(-50%)}.rack.bottom{bottom:2%;left:50%;transform:translate(-50%);width:94%}.rack.bottom .chip{order:0}.rack.bottom .ledge{order:1}.rack.bottom .bar{order:2;flex-wrap:wrap;justify-content:center;gap:4px;padding:8px 10px;min-height:78px;width:100%;box-sizing:border-box}.rack.left,.rack.right{top:50%;transform:translateY(-50%);flex-direction:row;align-items:flex-start}.rack.left{left:2%}.rack.right{right:2%;flex-direction:row-reverse}.rack.left .bar,.rack.right .bar{flex-direction:column;padding:6px 4px}.rack.left .chip,.rack.right .chip{position:absolute;top:-34px;left:0}.rack.right .chip{left:auto;right:0}.rack .ledge{display:flex;gap:6px}.rack.left .ledge,.rack.right .ledge{flex-direction:column;margin-top:6px}.exposure.vertical{flex-direction:column}.chip{display:inline-flex;gap:6px;align-items:baseline;font-size:12px;background:#00000080;color:#fff;padding:3px 9px;border-radius:8px;white-space:nowrap}.chip .plan{color:#ffd97a}.zoom{display:flex;gap:14px;align-items:center;margin-bottom:10px;min-height:132px}.zoom .who{font-size:15px}.history{display:flex;flex-wrap:wrap;gap:6px}.hist-item{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);cursor:default}.hist-item.on{color:var(--accent);font-weight:700}.plans .plan-row{padding:6px 0;border-top:1px solid #eee5d4;font-size:14px}.plans .plan-row:first-of-type{border-top:none}.center{position:absolute;top:25%;right:22%;bottom:25%;left:22%;display:flex;flex-direction:column;gap:6px;align-items:center}.center .discards{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;align-content:flex-start}.wall{position:absolute;display:flex;gap:2px}.wall.top{top:13.5%;left:50%;transform:translate(-50%)}.wall.bottom{bottom:21%;left:50%;transform:translate(-50%)}.wall.left,.wall.right{top:50%;transform:translateY(-50%);flex-direction:column}.wall.left{left:12.5%}.wall.right{right:12.5%}.stack{position:relative;width:20px;height:32px;flex:none}.stack:before,.stack:after{content:"";position:absolute;left:0;width:20px;height:26px;border-radius:3px;background:var(--back);border:1px solid rgba(0,0,0,.35);box-sizing:border-box}.stack:before{top:6px;filter:brightness(.75)}.stack:after{top:0}.stack.single:before{display:none}.stack.rot{width:32px;height:20px}.stack.rot:before,.stack.rot:after{width:26px;height:20px;top:0}.stack.rot:before{left:6px}.stack.rot:after{left:0}.tile.rot.xs{width:30px;height:22px}.fx{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.fly{position:absolute;transform:translate(-50%,-50%);animation:fly var(--dur) cubic-bezier(.25,.8,.3,1) var(--delay) both}.fly .tile{box-shadow:0 6px 10px #0006}@keyframes fly{0%{left:var(--x0);top:var(--y0);opacity:.6}15%{opacity:1}to{left:var(--x1);top:var(--y1);opacity:1}}.invisible{visibility:hidden}.center .discards>span,.rack.bottom .bar>span{display:inline-flex}.rot-wrap{display:inline-grid;place-items:center;flex:none}.rot-wrap.xs{width:30px;height:22px}.rot-wrap.sm{width:42px;height:30px}.rot-wrap.left .tile{transform:rotate(90deg)}.rot-wrap.right .tile{transform:rotate(-90deg)}.exposure{display:flex;gap:2px;padding:3px;background:#ffffff24;border-radius:6px}.actions{background:var(--panel);color:var(--ink);border:1px solid var(--tint-strong);border-radius:14px;box-shadow:0 4px 14px #0000000a;padding:10px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;height:84px;max-width:820px;width:100%;margin:0 auto;box-sizing:border-box;overflow:hidden}.actions .msg{flex:1 1 auto;height:100%;min-width:0}.actions{flex-wrap:nowrap}.actions button{flex:none;white-space:nowrap}.actions button.call,.m-actions button.call{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;padding:5px 14px}.actions button.call small,.m-actions button.call small{font-size:11px;font-weight:400;opacity:.85}button.ghost{font-size:12px;padding:5px 10px}.roller{position:relative;height:100%;overflow:hidden}.roller .item{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;justify-content:center;height:100%}.roller .item.in{animation:rollIn .38s cubic-bezier(.2,.7,.2,1) both}.roller .item.out{animation:rollOut .38s cubic-bezier(.2,.7,.2,1) forwards;pointer-events:none}@keyframes rollIn{0%{transform:translateY(110%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes rollOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(-110%);opacity:0}}.actions .advice{color:var(--accent);font-size:15px;font-weight:600;margin-top:2px;min-height:22px}.coach-say{margin:0 0 8px;padding:8px 10px;border-radius:10px;background:var(--tint);color:var(--accent);font-weight:600}.actions.muted{color:var(--muted)}.hand{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;padding-top:10px}.side{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;min-height:0}.side.left{grid-template-rows:minmax(0,1fr)}.play.wide{grid-template-columns:300px minmax(0,1fr) 340px}@media (min-width: 1700px){.app.fit{max-width:1800px}}.decide{display:flex;flex-direction:column;gap:10px}.panel.scroll{overflow:auto;min-height:0}.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.panel-head h3{margin:0}.info{display:flex;flex-direction:column;min-height:0;padding:8px 10px 10px}.info .tabs-bar{display:flex;gap:4px;margin-bottom:8px;flex:none}.info .tabs-bar button{border:1px solid transparent;background:none;border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--muted);font-size:14px}.info .tabs-bar button.on{background:var(--tint);color:var(--accent);font-weight:600}.badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;line-height:18px;text-align:center}.info .tab-body{flex:1;min-height:0;overflow:auto}.info .log{max-height:none}.target.compact{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:4px 0;font-size:14px;line-height:1.3}.target.compact .needs{display:inline-flex;gap:5px;margin:0}.plans .plan-row{font-size:14px;padding:4px 0}.small{font-size:12px}.coach .coach-say{font-size:15px}button.ghost{margin-left:auto;font-size:13px;padding:6px 12px}.panel{background:var(--panel);border:1px solid var(--tint-strong);border-radius:14px;padding:12px 14px;box-shadow:0 4px 14px #0000000a}.panel h3{margin:0 0 8px;font-size:17px;color:var(--accent)}.panel h4{margin:12px 0 4px;font-size:14px}.target{padding:8px 0;border-top:1px solid #eee5d4}.target:first-of-type{border-top:none}.needs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.need{display:inline-flex;align-items:center;gap:3px;font-size:13px}.log{max-height:360px;overflow:auto;font-size:13px}.ev{padding:2px 0;border-bottom:1px dashed #efe8da}.ev.mahjong{font-weight:700;color:var(--accent)}.ev.call{color:#8a4b00}.ev.wall,.ev.vote{font-weight:700}.tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:var(--tile);border:1px solid var(--tile-edge);border-bottom-width:3px;border-radius:6px;color:var(--ink);-webkit-user-select:none;user-select:none;position:relative;flex:none;transition:transform .08s}.tile.xl{width:96px;height:132px}.tile.xl .big{font-size:54px}.tile.xl .small{font-size:13px;margin-top:6px}.tile.lg{width:58px;height:80px}.tile.md{width:44px;height:62px}.tile.sm{width:30px;height:42px}.tile.xs{width:22px;height:30px}.tile .big{font-weight:700;line-height:1}.tile .small{font-size:9px;letter-spacing:.5px;opacity:.75;margin-top:3px}.tile.lg .big{font-size:32px}.tile.md .big{font-size:24px}.tile.sm .big{font-size:16px}.tile.sm .small{font-size:7px;margin-top:1px}.tile.xs .big{font-size:13px}.tile.xs .small{display:none}.tile.suit-b .big{color:var(--bam)}.tile.suit-c .big{color:var(--crak)}.tile.suit-d .big{color:var(--dot)}.tile.wind .big{color:#333}.tile.dragon-DR .big{color:var(--crak)}.tile.dragon-DG .big{color:var(--bam)}.tile.dragon-DW .big{color:var(--dot)}.tile.flower .big{color:#c2447a}.tile.joker{background:#fff2c2}.tile.joker .big{color:#8a5a00}.tile.back{background:linear-gradient(135deg,#7fa98f,#557f68);border-color:#3f6650}.tile.clickable{cursor:pointer}.tile.clickable:hover{transform:translateY(-3px)}.tile.selected{transform:translateY(-10px);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.tile.spare:after{content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:#d09a9a}.tile.highlight{box-shadow:0 0 0 3px #ffd97a}.tile.img{background-color:transparent;border:none;border-radius:7%;box-shadow:none}.tile.img.selected{box-shadow:0 0 0 3px var(--accent)}.tile.img.highlight{box-shadow:0 0 0 3px #ffd97a}.tile.img.spare:after{background:#d04a4a;top:2px;right:2px}.tile.back{border:1px solid rgba(0,0,0,.25)}button.lang{padding:6px 10px}header.top select{font:inherit;padding:3px 6px}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10}.modal{background:#fff;border-radius:14px;padding:22px 26px;min-width:360px;max-width:540px}.modal h2{margin-top:0}.start{max-width:600px;margin:40px auto;background:var(--panel);border:1px solid var(--tint-strong);border-radius:18px;padding:24px 28px;box-shadow:0 8px 24px #0000000d}.start h2{color:var(--accent);margin-top:0}.start label{display:block;margin:12px 0}.start input,.start select{font:inherit;padding:4px 8px}.card-page .cat{margin:18px 0 6px}.hand-row{display:grid;grid-template-columns:1fr 70px 130px;gap:8px;padding:8px;border-top:1px solid #eee5d4;align-items:center}.learn{max-width:860px}.learn h2{margin-top:26px;font-size:18px}.legend{display:flex;flex-wrap:wrap;gap:10px}.legend .item{display:flex;flex-direction:column;align-items:center;font-size:12px;gap:4px;width:80px;text-align:center}.lessons{list-style:none;padding:0;margin:0}.lesson-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #eee5d4}.lesson-actions{display:flex;align-items:center;gap:8px;flex:none}.lesson-text{font-size:17px;line-height:1.5}.options{display:flex;flex-wrap:wrap;gap:8px}.hand-option{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px;border:1px solid #eee5d4;border-radius:10px;margin-bottom:8px}.feedback{margin-top:14px;padding:10px 12px;border-radius:10px;background:#eaf5ea;border:1px solid #b7dcb7}.feedback.bad{background:#fbeeea;border-color:#e7b9ae}.lesson-nav{margin-top:14px;display:flex;gap:8px}.palette{display:flex;flex-wrap:wrap;gap:6px}.pal-item{display:flex;flex-direction:column;align-items:center;font-size:12px;min-height:78px}.form label{display:block;margin:8px 0}.form select,.form input[type=text],.form input:not([type]){font:inherit;padding:3px 6px}table.pay{border-collapse:collapse;font-size:17px}table.pay td{padding:6px 14px 6px 0;border-top:1px solid #eee5d4}.plus{color:#1f7a3a;font-weight:700}.minus{color:var(--crak);font-weight:700}.rack{max-width:960px}@media (max-width: 1040px){.play{grid-template-columns:1fr}}@media (max-width: 767px){.app{padding:6px 8px 0}.app.fit{height:100vh;height:100dvh}header.top{padding:6px 10px;gap:8px;margin-bottom:8px;border-radius:12px;flex-wrap:wrap}header.top h1{display:none}header.top .small-label{font-size:0}header.top .small-label select{font-size:13px}header.top button.lang{font-size:13px;padding:5px 8px}nav.tabs{overflow-x:auto;max-width:100%;scrollbar-width:none}nav.tabs button{font-size:14px;padding:5px 10px;white-space:nowrap}.play.mobile{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-height:0}.m-opps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:none}.m-opp{background:var(--panel);border:1px solid var(--tint-strong);border-radius:10px;padding:5px 7px;font-size:12px;min-height:44px}.m-opp.active{box-shadow:0 0 0 2px #ffd97a}.m-opp .row{margin-top:3px;gap:4px}.m-center{flex:1 1 0;min-height:100px;overflow:auto;border-radius:12px;background-size:cover;background-position:center;padding:8px;color:#fff}.m-center .center-chip{margin-bottom:8px;font-size:12px;white-space:normal}.m-center .discards{display:flex;flex-wrap:wrap;gap:3px}.m-center .discards>span{display:inline-flex}.m-bottom{flex:none;background:var(--panel);border:1px solid var(--tint-strong);border-radius:14px;padding:6px 8px 8px;box-shadow:0 -4px 14px #0000000f}.m-bottom.active{box-shadow:0 0 0 2px #ffd97a}.m-bottom .ledge{display:flex;gap:6px;margin-bottom:4px}.m-hand{display:flex;gap:4px;overflow-x:auto;padding:12px 2px 6px;scrollbar-width:none}.m-hand>span{display:inline-flex;flex:none}.m-msg{height:62px;font-size:13px;line-height:1.3}.m-msg .advice{font-size:13px;min-height:0}.m-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}.m-actions button{padding:8px 14px;font-size:15px}.m-tools{display:flex;gap:5px;margin-top:6px}.m-tools button{flex:1;font-size:12px;padding:6px 2px;white-space:nowrap}.sheet-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:20}.sheet{position:fixed;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;background:var(--bg);border-radius:16px 16px 0 0;padding:12px 12px 24px;z-index:21;box-shadow:0 -8px 30px #00000040}.sheet .panel{border:none;box-shadow:none;padding:0;background:transparent}.sheet .log{max-height:60vh}.learn,.rack,.card-page{max-width:none}.palette .tile.md{width:36px;height:50px}.palette .tile.md .big{font-size:18px}.start{margin:12px auto;padding:16px}.modal{min-width:0;width:calc(100vw - 32px)}.hand-row{grid-template-columns:1fr 60px 90px;font-size:14px}}