@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Press+Start+2P&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#e6ede8;background:#101d1b;font-size:16px;color-scheme:dark;--gold:#e4c788;--muted:#9bafa8;--line:#30423d}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{border:1px solid #42544e;border-radius:6px;padding:10px 16px;background:transparent;color:inherit;cursor:pointer;transition:background .15s,transform .15s}button:hover{background:#2a443b}button:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button:disabled{opacity:.4;cursor:default}header{height:98px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;color:#f2e8cb;text-decoration:none;font-family:'Libre Baskerville',serif;font-size:27px}.brand small{font:10px 'DM Sans',sans-serif;letter-spacing:3px;display:block;margin-top:6px}.seal{border:1px solid #b19a69;color:var(--gold);font-size:29px;padding:5px 8px;border-radius:3px}.header-right{display:flex;align-items:center;gap:12px}.rule-label{font-size:11px;letter-spacing:1.8px;color:var(--muted);margin-right:22px}main{max-width:1500px;margin:auto;padding:25px 4vw 0}.game-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600;color:var(--gold)}h1{font-family:'Libre Baskerville',serif;font-size:23px;font-weight:400;margin:9px 0 0}h1 span{font:14px 'DM Sans',sans-serif;color:var(--muted);margin-left:9px}.speed{font-size:14px;color:var(--muted);display:flex;gap:12px;align-items:center}select{padding:8px;border:1px solid var(--line);border-radius:5px;background:#172823;color:#dfebe5}.layout{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:26px}.table{height:455px;position:relative;border:10px solid #33413b;border-radius:20px;background:radial-gradient(ellipse at center,#24594e,#123b33);box-shadow:0 0 0 1px #4d5b4c,inset 0 0 0 2px #68846b55,inset 0 0 80px #082e28;overflow:hidden}.table:before{content:'';position:absolute;inset:14px;border:1px solid #a4be8c20;border-radius:8px;pointer-events:none}.opponent{position:absolute;text-align:center;z-index:2}.north{top:15px;left:50%;transform:translateX(-50%)}.west{left:18px;top:150px;max-width:135px}.east{right:18px;top:150px;max-width:135px}.player-title{font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;white-space:nowrap}.wind-badge{font-family:serif;color:var(--gold);border:1px solid #b8c89850;border-radius:50%;width:26px;height:26px;display:inline-grid;place-items:center}.backs{display:flex;justify-content:center;gap:3px}.back{width:18px;height:28px;background:linear-gradient(100deg,#467d67,#306451);border:1px solid #81a389;border-radius:3px;box-shadow:0 3px 0 #0a3329}.west .backs,.east .backs{max-width:100px;flex-wrap:wrap;margin:auto}.center{position:absolute;top:120px;left:50%;transform:translateX(-50%);text-align:center;min-width:160px}.wind-rose{display:grid;grid-template-columns:28px 40px 28px;grid-template-rows:24px 40px 24px;align-items:center;justify-content:center;color:#b8c7a380;font-family:serif}.wind-rose span:first-child{grid-column:2}.wind-rose span:nth-child(2){grid-row:2}.wind-rose b{grid-row:2;grid-column:2;border:1px solid #d4c89175;font-size:25px;color:var(--gold);padding:4px}.wind-rose span:nth-child(4){grid-row:2;grid-column:3}.wind-rose span:last-child{grid-row:3;grid-column:2}#wall-count{font-size:13px;color:#bed0b8;margin-top:10px}.table-line{width:35px;height:1px;background:#aec2a355;margin:13px auto}.self-label{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-size:14px;color:#d6dfc9}.discards{position:absolute;bottom:53px;left:16%;right:16%;display:flex;justify-content:center;gap:8px;max-height:98px;overflow:auto}.river{display:flex;flex-wrap:wrap;align-content:flex-start;gap:3px;width:24%;max-width:120px}.river-label{width:100%;font-size:10px;color:#b1c5b7;margin-bottom:2px}.tile{display:inline-flex;position:relative;flex-shrink:0;flex-direction:column;align-items:center;justify-content:center;width:49px;height:68px;background:linear-gradient(110deg,#fffef1,#e4e3d5);color:#263c36;border:1px solid #d5d7bc;border-radius:5px;box-shadow:0 4px 0 #8eab8e,0 6px 8px #0005;padding:3px;vertical-align:middle;user-select:none;font-family:serif}.tile .face{font-size:28px;font-weight:600;line-height:1.1}.tile .tile-caption{font:10px 'DM Sans',sans-serif;line-height:1.2;margin-top:4px;color:#596e65}.tile.chars .face,.tile.red .face{color:#a93532}.tile.bamboo .face,.tile.green .face{color:#256849}.tile.dots .face{color:#304e7c}.tile.small-tile{width:22px;height:30px;border-radius:3px;box-shadow:0 2px 0 #94a68c;padding:1px}.small-tile .face{font-size:16px}.small-tile .tile-caption{display:none}.tile.selected{transform:translateY(-12px);outline:2px solid var(--gold);background:#fff9d8}.tile.recommended{outline:3px solid #e5c17a}.hand .tile:hover{background:#fffce8;transform:translateY(-7px)}.hand .tile.selected:hover{transform:translateY(-12px)}.hand .drawn{margin-left:13px}.dots-grid{display:grid;grid-template-columns:repeat(3,5px);gap:3px;place-content:center;min-height:35px}.dot{width:5px;height:5px;border:1.5px solid #355d7c;border-radius:50%}.dot:nth-child(3n+1){border-color:#a13c35}.dot:nth-child(3n+2){border-color:#25694d}.bamboo-grid{display:grid;grid-template-columns:repeat(3,5px);gap:3px;min-height:35px;align-content:center}.stick{height:10px;width:4px;background:#27754c;border-radius:3px;box-shadow:inset 0 -3px #175c3a}.small-tile .dots-grid{grid-template-columns:repeat(3,3px);gap:1px;min-height:20px}.small-tile .dot{width:3px;height:3px;border-width:1px}.small-tile .bamboo-grid{grid-template-columns:repeat(3,3px);gap:1px;min-height:20px}.small-tile .stick{width:3px;height:5px}aside{padding:5px 0}.aside-head{display:flex;flex-direction:column;gap:9px}.small{font-size:13px;color:var(--muted)}.score-row{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px}.score-row.active .avatar{border-color:var(--gold);color:var(--gold)}.avatar{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;font-family:serif;color:#9db8a5}.score-name{flex:1}.score-row strong{font-variant-numeric:tabular-nums;font-weight:500}.aside-rule{height:1px;background:var(--line);margin:24px 0}#log{list-style:none;padding:0;margin:12px 0;height:95px;overflow:auto}#log li{font-size:13px;color:var(--muted);margin:9px 0;line-height:1.4}#log li:first-child{color:#e1e9dc}.tip{border-top:1px solid var(--line);padding-top:14px;margin-top:8px}.tip>span{font-size:10px;letter-spacing:2px;color:var(--gold)}.tip p{font-size:14px;color:#b7c6ba;line-height:1.6;margin:8px 0}.tip button{font-size:12px;border:0;padding:0;color:var(--gold);text-decoration:underline;text-underline-offset:4px}.rack{margin-top:24px}.rack-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.rack-heading>div{display:flex;align-items:center;gap:18px}#hand-info{font-size:13px;color:var(--muted)}#hint{font-size:13px;padding:7px 12px}.hand{display:flex;gap:5px;justify-content:center;padding:10px 0 13px;min-height:92px}.melds{display:flex;gap:12px;justify-content:center;margin:0 0 8px}.meld-group{display:inline-flex;gap:3px;align-items:center}.meld-group small{font-size:10px;color:var(--muted)}.opponent .melds{margin-top:9px}.action-row{min-height:57px;display:flex;align-items:center;justify-content:space-between;gap:16px}#status{font-size:14px;color:#c4d1c6;line-height:1.5}#actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}#actions button{font-size:14px;white-space:nowrap}.primary{background:var(--gold);color:#172c24;border-color:var(--gold);font-weight:600}.primary:hover{background:#f2dba9}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:15px;padding:17px 0;font-size:11px;letter-spacing:.5px;color:#80978c}dialog{position:fixed;background:#182e28;color:#e7ede4;border:1px solid #5a7261;border-radius:14px;padding:32px;width:min(740px,92vw);max-height:86vh;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#061410bb;backdrop-filter:blur(4px)}dialog .close{float:right;font-size:25px;border:0;padding:0 8px}dialog h2{font:27px 'Libre Baskerville',serif;color:#efdfb5;margin:12px 0 24px}dialog h3{font-size:17px;color:#e8cf9b;margin-top:25px}dialog p,dialog li{font-size:15px;line-height:1.7;color:#c5d1c6}dialog a{color:var(--gold)}.fan-list{display:grid;grid-template-columns:1fr 1fr;gap:7px 22px}.fan-item{display:flex;justify-content:space-between;gap:15px;font-size:14px;border-bottom:1px solid var(--line);padding:9px 0}.fan-item b{color:var(--gold);white-space:nowrap}.result-hand{display:flex;gap:3px;flex-wrap:wrap;margin:20px 0}.flower-count{font-size:11px;color:#c9c88f;margin:7px}.search{width:100%;padding:11px;background:#0e221d;border:1px solid #506a57;color:#eee;border-radius:5px;margin-bottom:16px}.result-score{font:44px 'Libre Baskerville',serif;color:var(--gold)}
@media(min-width:1500px){.table{height:500px}.center{top:145px}.west,.east{top:175px}}
@media(max-width:1000px){.layout{grid-template-columns:1fr}aside{display:none}.table{height:420px}.rule-label{display:none}.hand{gap:4px}.tile{width:44px;height:63px}}
@media(max-width:650px){header{height:78px;padding:0 16px}.brand{font-size:21px;gap:8px}.brand small{font-size:8px;letter-spacing:2px}.seal{font-size:23px}.header-right{gap:6px}.header-right button{font-size:12px;padding:8px}.header-right #new-game{display:none}main{padding:20px 12px 0}h1{font-size:20px}h1 span{display:block;margin:8px 0 0;font-size:12px}.speed{font-size:12px;gap:5px}.table{height:405px;border-width:6px}.north{top:15px}.west{left:9px;top:133px;max-width:77px}.east{right:9px;top:133px;max-width:77px}.player-title{font-size:12px;gap:4px}.wind-badge{width:23px;height:23px}.back{width:12px;height:20px}.west .backs,.east .backs{max-width:58px;gap:2px}.center{top:105px;min-width:100px}.discards{left:8%;right:8%;bottom:47px;max-height:91px;gap:5px}.river .tile{width:17px;height:24px}.river .tile .face{font-size:13px}.river .dots-grid,.river .bamboo-grid{transform:scale(.8)}.tile{width:clamp(21px,5.95vw,38px);height:53px;padding:2px;border-radius:4px}.tile .face{font-size:22px}.tile .tile-caption{font-size:8px}.hand{gap:2px;justify-content:center}.hand .drawn{margin-left:5px}.dots-grid{grid-template-columns:repeat(3,4px);gap:2px}.dot{width:4px;height:4px}.bamboo-grid{grid-template-columns:repeat(3,3px);gap:2px}.stick{width:3px;height:9px}.rack{margin-top:20px}.rack-heading{margin-bottom:9px}.rack-heading>div{gap:9px;flex-wrap:wrap}#hand-info{font-size:11px}.eyebrow{font-size:10px}#hint{font-size:11px;padding:6px 8px}.action-row{align-items:flex-start;flex-direction:column;gap:3px}#status{margin:0 0 10px;font-size:13px}#actions{width:100%;justify-content:flex-end}footer{font-size:9px;gap:12px}.fan-list{grid-template-columns:1fr}dialog{padding:22px}.opponent .meld-group .tile{width:15px;height:22px}.opponent .meld-group .face{font-size:11px}.opponent .melds{flex-wrap:wrap;gap:5px}.opponent .meld-group .dots-grid,.opponent .meld-group .bamboo-grid{transform:scale(.65)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.suit-char{font-size:17px;color:#a93532;line-height:1}.chars .tile-caption{position:absolute;right:3px;top:0;font-size:8px}.small-tile .suit-char{font-size:10px}.small-tile.chars .face{font-size:12px}.last-label{display:block;font-size:11px;color:#bbceba;margin-top:6px}.hand button:disabled{opacity:1;cursor:default}.hand button:disabled:hover{transform:none}.hand button.selected{color:#263c36}.result-hand .tile{margin-bottom:7px}#last-discard{min-height:43px}.tile:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.meld-group{max-width:100%}
@media(max-width:650px){.suit-char{font-size:15px}.chars .tile-caption{font-size:7px}.small-tile .suit-char{font-size:9px}.small-tile.chars .face{font-size:11px}}
.compact-scores{display:none}@media(max-width:1000px){.compact-scores{display:flex;gap:16px;justify-content:space-between;padding:0 5px 16px;color:var(--muted);font-size:13px}.compact-scores b{color:#e4d4b0;font-weight:500;margin-left:5px}}
@media(max-width:360px){.hand .tile{width:calc((100vw - 58px)/14);height:50px;padding:1px}.hand .tile .face{font-size:18px}.hand .dots-grid{grid-template-columns:repeat(3,3px);gap:2px}.hand .dot{width:3px;height:3px;border-width:1px}.hand .bamboo-grid{grid-template-columns:repeat(3,3px);gap:1px}.hand .tile-caption{font-size:7px}}
/* Ningbo tile artwork: retain the supplied photograph and reveal one grid cell. */
.tile{background:#f8f8fc;border-color:#cfd3d2;padding:0;isolation:isolate;box-shadow:0 3px 0 #bfcac4,0 5px 0 #387864,0 7px 8px #0005}
.tile-art{position:absolute;inset:0;border-radius:inherit;background-image:url('./assets/ningbo-tiles.jpg');background-size:900% 500%;background-repeat:no-repeat;pointer-events:none}
.tile.selected{outline:3px solid var(--gold);outline-offset:2px}
.tile.recommended{outline:3px solid #e5c17a;outline-offset:2px}
.tile.small-tile{padding:0;box-shadow:0 2px 0 #749b87}
.back{background:#20b789 url('./assets/ningbo-tiles.jpg') 87.5% 75% / 900% 500% no-repeat;border-color:#81b7a5;box-shadow:0 2px 0 #a8bfb1,0 4px 0 #124d3e}
.flower-tiles{display:inline-flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:3px;margin:7px 0 3px}
#melds .flower-tiles{margin:0 0 0 10px}
@media(max-width:650px){.opponent .flower-tiles .tile{width:15px;height:22px}.flower-tiles{gap:2px}.hand .tile{padding:0}}