:root{color-scheme:dark;--ink:#f4f0e4;--muted:#9baea3;--gold:#d7c28a;--gold-light:#f2dda3;--line:#d9c68b44;--felt:#1b4035;--felt-deep:#102b24;--surface:#152923;font:15px/1.6 'DM Sans','Noto Sans SC',system-ui,sans-serif;color:var(--ink);background:#0c1716;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{min-height:100%;background:#0c1716}body{margin:0;min-height:100vh;min-height:100svh;background:radial-gradient(ellipse at 50% -20%,#345447 0,#172b27 42%,#0d1918 78%);background-attachment:fixed}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(#e3d7ad 0.55px,transparent 0.55px);background-size:24px 24px;mask-image:linear-gradient(#000,transparent 88%)}body[data-theme=vermilion]{--gold:#e5a184;--gold-light:#ffd0a5;--felt:#713a31;--felt-deep:#46241f;--surface:#301e1b;background:radial-gradient(ellipse at 50% -20%,#76463a 0,#32231f 44%,#181414 80%)}body[data-theme=snow]{--gold:#a9c5ce;--gold-light:#d6edf1;--felt:#315b68;--felt-deep:#1e3945;--surface:#172930;background:radial-gradient(ellipse at 50% -20%,#446c78 0,#21363d 44%,#101a1f 80%)}body[data-theme=vermilion] .table{background:radial-gradient(ellipse at 50% 44%,#985848,#693a31 58%,#4d2a25)}body[data-theme=snow] .table{background:radial-gradient(ellipse at 50% 44%,#56808a,#355c66 58%,#284751)}body[data-motion=off] *,body[data-motion=off] *:before,body[data-motion=off] *:after{animation:none!important;transition:none!important}body[data-large=on] #actions button{min-height:54px;padding:13px 19px;font-size:15px}body[data-large=on] #actions .primary{font-size:16px}button,input,select{font:inherit}a{color:inherit;text-decoration:none}button{border:1px solid #fff2;border-radius:12px;background:#ffffff0a;color:inherit;padding:10px 15px;cursor:pointer;touch-action:manipulation;transition:transform .18s,border-color .18s,background .18s,color .18s}button:hover{background:#ffffff15;border-color:#ffffff40}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default;transform:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.tile:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}header{height:82px;position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1180px)/2));border-bottom:1px solid #ffffff12;background:#0d1918a8;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.brand{display:inline-flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border:1px solid #d7c28a66;border-radius:15px;background:linear-gradient(145deg,#284a3e,#142c25);color:var(--gold-light);font-size:21px;box-shadow:inset 0 0 14px #f4dd9a0d,0 8px 24px #0002}.brand-copy{display:grid;line-height:1.25}.brand-copy strong{font-size:15px;letter-spacing:.08em;font-weight:600}.brand-copy small{margin-top:4px;color:#96a99d;font-size:11px;letter-spacing:.04em}.site-nav{display:flex;align-items:center;gap:12px}.site-nav>a{padding:8px 10px;color:#c6d1c8;font-size:13px}.site-nav>a:hover{color:#fff}.message-link{border:1px solid #d7c28a33;border-radius:999px;color:#e0d1a3!important}.message-link:hover{background:#d7c28a14}.rules-button{border-color:transparent;background:transparent;color:#e8dfc7}.rules-button span{color:var(--gold);font-size:19px;vertical-align:-1px}.rules-button:hover{border-color:#fff2;background:#ffffff0a}main{width:min(1180px,100%);margin:36px auto 0;padding:0 22px 54px;position:relative}#lobby{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);min-height:590px;overflow:hidden;margin:5vh 0 0;border:1px solid #d7c28a25;border-radius:28px;background:linear-gradient(130deg,#172b25f2,#11231fef);box-shadow:0 34px 100px #020c0a75,inset 0 1px #ffffff0b}.lobby-visual{position:relative;min-height:590px;overflow:hidden;background:#132721}.lobby-visual:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(0deg,#11231fda,transparent)}.lobby-visual img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;opacity:.92}.visual-caption{position:absolute;z-index:1;left:34px;bottom:26px;color:#efe4c5;font-size:11px;letter-spacing:.12em}.live-dot{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#b8d98e;box-shadow:0 0 10px #b8d98e}.lobby-content{align-self:center;padding:46px clamp(30px,5vw,70px) 40px}.eyebrow{display:flex;align-items:center;gap:11px;color:#c3bd9b;font-size:12px;letter-spacing:.13em}.eyebrow-line{width:26px;height:1px;background:var(--gold)}h1{margin:19px 0 13px;font-size:clamp(38px,4.6vw,60px);font-weight:500;line-height:1.25;letter-spacing:.025em}h1 em{color:var(--gold-light);font-style:normal}.lobby-intro{margin:0 0 24px;color:#acbcb0;font-size:14px;line-height:1.9}#entry{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}#entry>label:first-child,#entry>#createFields,#entry>label:nth-of-type(2),.enter-button{grid-column:1/-1}label{display:block;margin:8px 0 11px;color:#d5ddcf;font-size:12px;font-weight:500;letter-spacing:.035em}.optional{float:right;color:#83988c;font-weight:400}input,select{display:block;width:100%;height:47px;margin-top:7px;padding:0 14px;border:1px solid #d5d3b51e;border-radius:12px;background:#0b1b17;color:#f2f0e7;outline:none;transition:border-color .18s,box-shadow .18s}input::placeholder{color:#6f8379}input:focus,select:focus{border-color:#c9b777a8;box-shadow:0 0 0 3px #d7c28a14}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='m3 5 4 4 4-4' stroke='%23d7c28a' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}.enter-button{height:50px;display:flex;align-items:center;justify-content:space-between;margin-top:11px;padding:0 18px;border:1px solid #ead7a4;background:linear-gradient(135deg,#e4d09c,#b99b59);color:#1e3028;font-weight:700;box-shadow:0 8px 24px #c8ae6b1c}.enter-button:hover{background:linear-gradient(135deg,#f0dfa9,#c9ac68);border-color:#f5e5b8}.enter-button span:last-child{font-size:20px}#resume{margin-top:10px}#resume button{width:100%;border-color:#d5c28b55;color:#e9dab2}.lobby-foot{margin:18px 0 0;color:#8fa298;font-size:11px}.lobby-foot span{color:#c7b578;margin-right:5px;font-size:9px}#room[hidden],#lobby[hidden]{display:none!important}.roomline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 15px;color:#c7d2c9;font-size:13px}.soft-button{padding:8px 12px;border-color:#ffffff20;color:#cbd5cc;font-size:12px}.panel{border:1px solid #d9c68b27;border-radius:17px;background:linear-gradient(135deg,#172d27,#12241f);box-shadow:0 14px 36px #020a0833}.invite-panel,.seats-panel{padding:16px 19px;margin:12px 0}.invite-panel>p,.seats-panel>p{margin:0 0 10px;color:#adb9aa;font-size:12px}.inviterow{display:flex;align-items:center;gap:9px;margin:8px 0}.inviterow input{height:40px;margin:0;min-width:0;font-size:11px}.inviterow button{height:40px;padding:0 13px;color:#e5d5a7;border-color:#d7c28a44}.seatrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;padding:10px 12px;border:1px solid #ffffff0d;border-radius:11px;background:#0b1b17a3}.seatrow span{color:#e4e6d9;font-size:13px}.seatrow select{width:128px;height:39px;margin:0;padding:0 11px;font-size:12px}.alert{margin:12px 0;padding:12px 15px;border:1px solid #dfbc7357;border-radius:12px;background:#715b222b;color:#f1dba1;font-size:13px}.table{position:relative;isolation:isolate;min-height:405px;margin:17px 0 0;padding:22px 25px 24px;border:2px solid #bca56d;border-radius:36px;background:radial-gradient(ellipse at 50% 44%,#2f6751 0,#214c3e 55%,#183b31 100%);box-shadow:inset 0 0 0 7px #18372d,inset 0 0 0 8px #d3bd8066,inset 0 0 65px #09231c9c,0 20px 55px #0005;overflow:hidden}.table:before{content:"";position:absolute;z-index:-1;inset:10px;border:1px solid #e6d29930;border-radius:26px;background:url("assets/moon-salon.svg") center 53%/cover no-repeat;opacity:.10;mix-blend-mode:screen;pointer-events:none}.table:after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at center,#264f4110 25%,#091b1680 100%);pointer-events:none}.table-frame{position:absolute;z-index:-1;inset:0;border-radius:inherit;background:repeating-linear-gradient(135deg,#f3e6c403 0 2px,transparent 2px 6px)}#opponents{display:flex;justify-content:space-between;gap:12px}.player{position:relative;min-width:0;flex:1;max-width:31%;padding:10px 12px 8px;text-align:center;border:1px solid #f5e8c21c;border-radius:14px;background:linear-gradient(145deg,#10271f99,#10241f44);font-size:12px;color:#d8e1d5;box-shadow:inset 0 1px #ffffff08}.player strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;color:#f1eddd}.player.active{border-color:#e5ce8d88;background:linear-gradient(145deg,#e6d29b24,#10241f75);box-shadow:0 0 25px #e5ce8d12,inset 0 1px #fff2}.player.active strong{color:#f6d991}.player>div:not(.backs):not(.meld){margin-top:2px;color:#b5c5b5;font-size:10px}.backs{display:flex;justify-content:center;gap:2px;overflow:hidden;margin-top:7px;white-space:nowrap}.center{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:158px;margin:5px auto 8px;text-align:center;color:#d8e4d5}.center-seal{display:grid;place-items:center;width:43px;height:43px;margin-bottom:8px;border:1px solid #dfcb8b71;border-radius:50%;color:#ead59b;font-family:'Noto Serif SC','Songti SC',serif;font-size:18px;box-shadow:0 0 25px #f0d88b12,inset 0 0 15px #f0d88b0b}.center #turn{font-size:16px;color:#f1dc9d;letter-spacing:.03em}.center #wall{margin-top:3px;color:#bdd0c0;font-size:11px}.center #last{display:flex;align-items:center;gap:5px;margin-top:6px;color:#cad7c7;font-size:11px}.center #bao{display:flex;align-items:center;gap:6px;margin-top:4px;color:#e6d49b;font-size:11px}#river{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:12px 14px;border:1px solid #d4c1852c;border-radius:14px;background:#0a251d48}#river>div{display:flex;align-items:center;flex-wrap:wrap;gap:1px;min-height:30px;color:#d7e0d1;font-size:10px}#river>div>span:first-child{margin-right:5px;color:#c6d4c6}.handpanel{margin:20px 0 0;padding:18px 19px 16px;border:1px solid #d9c68b23;border-radius:19px;background:linear-gradient(145deg,#182c26,#12231f);box-shadow:0 16px 45px #0209074d}.hand-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}#me{color:#e0e5d9;font-size:13px;font-weight:600}#melds{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:4px}.meld{display:inline-flex;gap:2px;align-items:center;margin-right:8px}.meld>small{margin-left:3px;color:#9eb1a1;font-size:9px}#hand{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;align-items:flex-end;min-height:92px;margin:17px 0 10px;padding:10px 8px 14px;border-bottom:1px solid #d7c28a20}.tile{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-direction:column;flex:none;width:45px;height:65px;padding:3px;border:1px solid #e5dec9;border-bottom:4px solid #b9ad86;border-radius:7px;background:linear-gradient(145deg,#fffef4,#e9e1ca);color:var(--tile-color,#24362d);font-family:'Noto Sans SC','PingFang SC',sans-serif;line-height:1;box-shadow:0 3px 0 #15261f,0 6px 9px #00140e44,inset 0 1px #fff;transition:transform .16s,box-shadow .16s;user-select:none}.tile.suit0{--tile-color:#b43c36}.tile.suit1{--tile-color:#376fa5}.tile.suit2{--tile-color:#2e7953}.tile.suit3{--tile-color:#b43c36}.tile strong{font-size:24px;font-weight:700}.tile .tile-label{margin-top:3px;font-size:10px;font-weight:600;letter-spacing:.08em}.tile .pip-grid{display:grid;width:100%;height:100%;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;padding:3px}.tile .pip{width:8px;height:8px;border:1.5px solid currentColor;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,currentColor 25% 100%);box-shadow:0 1px 1px #25382c30}.tile .pip.off{visibility:hidden}.tile .pip.bamboo{width:5px;height:12px;border:1px solid currentColor;border-radius:4px;background:linear-gradient(90deg,#eaf1d6,currentColor 35% 70%,#eaf1d6);transform:rotate(25deg)}.tile.suit2 .pip.bamboo:nth-child(3n+1){transform:rotate(-25deg)}.tile.mini{width:28px;height:39px;padding:2px;border-bottom-width:3px;border-radius:5px;font-size:11px;box-shadow:0 2px 0 #15261f,0 3px 5px #00140e3b,inset 0 1px #fff}.tile.mini strong{font-size:13px}.tile.mini .tile-label{margin-top:2px;font-size:7px;letter-spacing:0}.tile.mini .pip-grid{padding:1px}.tile.mini .pip{width:4px;height:4px;border-width:1px}.tile.mini .pip.bamboo{width:3px;height:6px}.tile.back{border:1px solid #d7c58b;border-bottom:4px solid #a78f58;background:#285345 url("assets/tile-back.svg") center/100% 100% no-repeat;color:#efdfae}.tile.back .back-mark{font-size:20px}.tile.mini.back .back-mark{font-size:13px}.tile.selected{z-index:2;transform:translateY(-9px);outline:2px solid #ead392;outline-offset:1px;box-shadow:0 7px 0 #15261f,0 12px 16px #00140e66}.tile[role=button]{cursor:pointer}.tile[role=button]:hover{transform:translateY(-4px)}.tile[role=button].selected:hover{transform:translateY(-9px)}#actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}#actions button{min-height:43px;padding:8px 14px;border-color:#e4d29544;background:#ffffff08;color:#e8e3d5;font-size:12px}#actions button:hover{background:#ffffff14;border-color:#e4d2957a}#actions .primary{background:linear-gradient(135deg,#e4d09c,#b99b59);border-color:#e4d09c;color:#1e3028;font-weight:700}#actions .primary:hover{background:linear-gradient(135deg,#f0dfa9,#c9ac68)}#hint{min-height:22px;margin:11px 0 0;color:#9daf9f;font-size:12px}.settlement-panel{margin:18px 0;padding:22px}.settlement-panel h2{margin:0;color:#eed89b;font-size:20px;font-weight:500}.settlement-panel>p{color:#bdc9b9;font-size:13px}.history-panel{margin:17px 0;color:#b9c7bb;font-size:13px}.history-panel summary{cursor:pointer;padding:11px 2px}.history-panel #log{max-height:210px;overflow:auto;padding:10px 13px;border-left:1px solid #d7c28a45;color:#91a59a;font-size:12px}.history-panel #log>div{padding:4px 0}#error{position:fixed;z-index:10;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(92vw,500px);padding:12px 18px;border:1px solid #e2aa7766;border-radius:14px;background:#402723ee;color:#ffe3cf;text-align:center;box-shadow:0 12px 35px #0005}#error:empty{display:none}table{width:100%;margin:12px 0;border-collapse:collapse}td,th{padding:9px 8px;border-bottom:1px solid #ffffff12;text-align:left}th{color:#d7c28a;font-size:12px;font-weight:500}.positive{color:#ddcf94}dialog{max-width:680px;width:min(92vw,680px);max-height:86vh;overflow:auto;padding:30px;border:1px solid #d7c28a66;border-radius:22px;background:linear-gradient(145deg,#172d27,#10221e);color:#edf0e5;box-shadow:0 30px 90px #0008}dialog::backdrop{background:#030908bf;backdrop-filter:blur(5px)}.rules-dialog .dialog-kicker{color:#d7c28a;font-size:11px;letter-spacing:.16em}.rules-dialog h2{margin:7px 0 18px;color:#f1dfa9;font-size:27px;font-weight:500}.rules-dialog p{padding:12px 14px;border:1px solid #ffffff0e;border-radius:12px;background:#ffffff05;color:#c8d2c8;font-size:13px;line-height:1.85}.rules-dialog p.muted{border:0;background:transparent;color:#8fa398;font-size:11px}.rules-dialog button{width:100%;margin-top:5px}.muted{color:#9baea3;font-size:13px}[hidden]{display:none!important}
@media(max-width:780px){header{height:72px;padding:0 20px}main{margin-top:23px;padding:0 16px 40px}#lobby{grid-template-columns:minmax(0,.88fr) minmax(340px,1.12fr);min-height:550px;margin-top:2vh}.lobby-visual{min-height:550px}.lobby-content{padding:35px 26px}h1{font-size:45px}.table{min-height:390px;padding:18px 16px 19px}.player{padding:9px 6px}.tile{width:41px;height:59px}#hand{min-height:84px;gap:3px}}
@media(max-width:620px){header{height:64px;padding:0 13px}.brand{gap:8px}.brand-mark{width:36px;height:36px;border-radius:12px;font-size:18px}.brand-copy strong{font-size:13px}.brand-copy small{font-size:9px}.site-nav{gap:3px}.site-nav>a{padding:7px 7px;font-size:11px}.rules-button{padding:7px 8px;font-size:12px}.rules-button span{font-size:16px}main{margin:15px auto 0;padding:0 10px 30px}#lobby{display:flex;flex-direction:column;min-height:0;margin:0;border-radius:21px}.lobby-visual{height:220px;min-height:220px}.lobby-visual img{object-position:center 48%}.visual-caption{left:18px;bottom:15px;font-size:9px}.lobby-content{width:100%;padding:23px 19px 20px}.eyebrow{font-size:10px}h1{margin:12px 0 9px;font-size:38px}.lobby-intro{margin-bottom:15px;font-size:12px;line-height:1.7}#entry{grid-template-columns:1fr 1fr;gap:0 10px}label{margin:6px 0 9px;font-size:11px}input,select{height:43px;padding:0 11px;font-size:12px}.enter-button{height:46px;margin-top:8px}.lobby-foot{margin-top:12px;font-size:10px}.roomline{font-size:11px}.soft-button{padding:7px 9px;font-size:11px}.table{min-height:355px;margin-top:12px;padding:13px 8px 12px;border-width:2px;border-radius:25px;box-shadow:inset 0 0 0 5px #18372d,inset 0 0 0 6px #d3bd8066,inset 0 0 45px #09231c9c,0 12px 28px #0005}.table:before{inset:8px;border-radius:17px;background-position:center;background-size:auto 115%}#opponents{gap:4px}.player{max-width:32%;padding:7px 3px 5px;border-radius:10px;font-size:10px}.player strong{font-size:11px}.player>div:not(.backs):not(.meld){font-size:9px!important}.backs{gap:1px;margin-top:5px}.center{min-height:142px;margin:3px auto 6px}.center-seal{width:35px;height:35px;margin-bottom:5px;font-size:15px}.center #turn{font-size:13px}.center #wall,.center #last,.center #bao{font-size:9px}#river{gap:5px;padding:7px 5px;border-radius:10px}#river>div{min-height:25px;font-size:8px}#river>div>span:first-child{margin-right:2px}.tile.mini{width:21px;height:30px;padding:1px;border-bottom-width:2px;font-size:9px}.tile.mini strong{font-size:10px}.tile.mini .tile-label{font-size:6px}.tile.mini .pip-grid{padding:0}.tile.mini .pip{width:3px;height:3px}.tile.mini .pip.bamboo{width:2px;height:5px}.handpanel{margin-top:12px;padding:13px 9px 12px;border-radius:15px}.hand-heading{display:block}#me{font-size:11px}#melds{justify-content:flex-start;margin-top:5px}.meld{margin-right:4px}#hand{justify-content:center;gap:2px;min-height:67px;margin:11px 0 7px;padding:7px 0 10px}.tile{width:calc((100vw - 66px)/14);max-width:39px;height:51px;padding:2px;border-bottom-width:3px;border-radius:6px}.tile strong{font-size:19px}.tile .tile-label{font-size:8px}.tile .pip-grid{padding:1px}.tile .pip{width:5px;height:5px}.tile .pip.bamboo{width:4px;height:9px}.tile.selected{transform:translateY(-6px)}#actions{gap:6px;margin-top:8px}#actions button{min-height:39px;padding:7px 10px;font-size:11px}#hint{min-height:20px;margin-top:8px;font-size:10px}.invite-panel,.seats-panel{padding:12px;margin:9px 0}.invite-panel>p,.seats-panel>p{font-size:10px}.seatrow{margin:6px 0;padding:8px}.seatrow span{font-size:11px}.seatrow select{width:100px;height:35px;font-size:10px}.inviterow input{font-size:9px}.inviterow button{height:36px;padding:0 9px;font-size:10px}.settlement-panel{padding:16px}.history-panel{margin:12px 0;font-size:12px}dialog{padding:22px 17px;border-radius:18px}.rules-dialog h2{font-size:23px}.rules-dialog p{padding:10px;font-size:11px}}
@media(max-width:390px){.brand-copy small{display:none}.site-nav>a{padding:6px 5px}.rules-button{padding:6px}.lobby-visual{height:185px;min-height:185px}.lobby-content{padding:20px 15px}.tile{width:calc((100vw - 66px)/14);max-width:36px}.center{min-height:132px}#actions{gap:5px}#actions button{padding:6px 8px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.room-tools{display:flex;gap:8px}.invite-card>strong{min-width:45px;color:var(--gold-light);font-size:12px}.invite-card{padding:8px 10px;border:1px solid #d7c28a22;border-radius:12px;background:#ffffff05}.replay-open{margin:8px 0}.replay-dialog label,.settings-dialog>label{margin:14px 0}.setting-toggle{display:flex;align-items:center;gap:10px}.setting-toggle input{width:20px;height:20px;margin:0;accent-color:var(--gold)}.replay-list{max-height:52vh;overflow:auto;margin:14px 0;padding:10px;border:1px solid #ffffff12;border-radius:12px}.replay-event{padding:9px;border-bottom:1px solid #ffffff10;color:#dce3d8}.replay-event:first-child{color:var(--gold-light)}.replay-dialog select,.settings-dialog select{background-color:#0b1b17}.replay-open:disabled{opacity:.45}.roomline{padding-top:env(safe-area-inset-top)}#actions button{min-height:48px;padding:10px 16px;font-size:13px}.table .player.active{animation:seat-pulse 1.7s ease-in-out infinite}.tile.new-tile{animation:tile-in .2s ease-out}@keyframes seat-pulse{50%{box-shadow:0 0 27px #e5ce8d35,inset 0 1px #fff3}}@keyframes tile-in{from{transform:translateY(-9px);opacity:.7}to{transform:translateY(0);opacity:1}}
@media(max-width:620px){#hand{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:10px 8px 14px}.tile{width:40px;min-width:40px;height:54px}.room-tools{gap:5px}.soft-button{font-size:10px}.invite-card{gap:6px}.invite-card>strong{min-width:34px;font-size:10px}.invite-card input{font-size:8px}.replay-open{width:100%}#actions button{min-height:50px;padding:10px 12px;font-size:12px}}
@media(max-width:620px) and (orientation:landscape){header{height:52px}main{margin-top:8px;padding-bottom:18px}.table{min-height:300px}.center{min-height:95px}#hand{min-height:65px}.handpanel{margin-top:8px;padding-top:9px}.lobby-visual{height:150px;min-height:150px}}

/* Sculpted porcelain tile faces */
.tile:not(.mini){isolation:isolate;overflow:hidden;border:1px solid #d7d4c3;border-bottom:5px solid #aaa58f;border-radius:9px;background:linear-gradient(118deg,#fffef7 0%,#f5f2e6 28%,#e8e4d5 100%);box-shadow:0 2px 0 #9f9a82,0 5px 0 #33453b,0 9px 14px #00140e55,inset 0 1px 0 #fff,inset -2px -3px 5px #b4ad9633}
.tile:not(.mini):before{content:"";position:absolute;z-index:-1;inset:3px;border:1px solid #d2cdbb;border-radius:6px;box-shadow:inset 0 0 0 1px #fff8;background:linear-gradient(145deg,#fffdf6,#f2eedf 72%,#e9e4d3)}
.tile:not(.mini):after{content:"";position:absolute;z-index:2;inset:0 0 auto;height:35%;pointer-events:none;background:linear-gradient(180deg,#fff9,transparent);opacity:.6}
.tile:not(.mini) strong{position:relative;z-index:1;font-family:"Songti SC","Noto Serif SC",serif;text-shadow:0 1px #fff9}
.tile.suit0:not(.mini){--tile-color:#a93834}.tile.suit1:not(.mini){--tile-color:#2969a1}.tile.suit2:not(.mini){--tile-color:#28734c}.tile.suit3:not(.mini){--tile-color:#b12f32}
.tile.suit0:not(.mini) strong{margin-top:6px;font-size:29px;line-height:1.1}.tile.suit0:not(.mini) .tile-stamp:first-child{position:absolute;top:6px;left:6px;color:#9c8d6d;font:600 8px/1 serif;letter-spacing:.14em}.tile.suit0:not(.mini) .tile-label{margin-top:4px;color:#796f5e;font:600 8px/1 sans-serif;letter-spacing:.12em}
.tile.suit3:not(.mini) strong{display:grid;place-items:center;width:31px;height:34px;margin-top:6px;border:2px solid #bf3838;border-radius:4px;color:#c83336;font:700 28px/1 "Songti SC","Noto Serif SC",serif;box-shadow:inset 0 0 0 1px #d7564b55}.tile.suit3:not(.mini) .tile-stamp{position:absolute;top:6px;right:6px;color:#bb403c;font:600 7px/1 serif;letter-spacing:.08em}.tile.suit3:not(.mini) .tile-label{margin-top:4px;color:#a34a41;font:600 7px/1 sans-serif;letter-spacing:.18em}
.tile:not(.mini) .porcelain-art{display:grid;width:100%;height:76%;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;padding:7px 6px 13px}.tile:not(.mini) .pip{position:relative;display:grid;place-items:center;width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 12%,currentColor 30% 78%,#25382d 100%);box-shadow:0 1px 2px #25382c55,inset 0 1px #fff9}.tile:not(.mini) .pip b{width:3px;height:3px;border-radius:50%;background:#fff9;box-shadow:0 0 2px #fff}
.tile:not(.mini) .tile-stamp:not(:first-child){position:absolute;right:5px;bottom:5px;color:#978b70;font:600 7px/1 sans-serif;letter-spacing:.16em}.tile.suit2:not(.mini) .tile-stamp{color:#4d795c!important}
.tile:not(.mini) .bamboo-art{display:grid;width:100%;height:76%;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;padding:6px 7px 13px}.tile:not(.mini) .bamboo-stalk{position:relative;width:7px;height:15px;border:1px solid #397b4e;border-radius:4px;background:linear-gradient(90deg,#d8e8c6 0%,#589265 32%,#2b7148 63%,#bfd9a9 100%);box-shadow:0 1px 1px #526a4e55}.tile:not(.mini) .bamboo-stalk b{position:absolute;left:-1px;width:7px;height:1px;background:#e7f1d8;box-shadow:0 0 1px #fff}.tile:not(.mini) .bamboo-stalk b:nth-child(1){top:4px}.tile:not(.mini) .bamboo-stalk b:nth-child(2){top:9px}.tile:not(.mini) .bamboo-stalk b:nth-child(3){top:13px}
.tile.suit1:not(.mini) .pip:nth-child(3n+2){color:#28689b}.tile.suit1:not(.mini) .pip:nth-child(3n){color:#b03b37}.tile.suit1:not(.mini) .pip:nth-child(4n){color:#33774c}.tile:not(.mini).selected{transform:translateY(-10px);box-shadow:0 3px 0 #a69f84,0 6px 0 #33453b,0 13px 19px #00140e77,0 0 0 2px #d9ba68,inset 0 1px #fff}
.tile.back:not(.mini){border-color:#d5c18c;border-bottom-color:#8f7544;background:linear-gradient(145deg,#1f5143,#12372d);box-shadow:0 2px 0 #806c43,0 5px 0 #33453b,0 8px 12px #00140e55,inset 0 1px #fff7}.tile.back:not(.mini):before{inset:4px;border:1px solid #d7c28b88;background:repeating-linear-gradient(45deg,#d7c28b18 0 2px,transparent 2px 6px),linear-gradient(145deg,#28624f,#174335)}.tile.back:not(.mini) .back-mark{z-index:3;color:#e7d59e;text-shadow:0 1px #15372d;font-size:24px}
.alert#pause{position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;margin:14px 0;padding:16px 18px;border:1px solid #f0956d99;border-radius:16px;background:linear-gradient(110deg,#512d29,#38231f);color:#ffe6d4;box-shadow:0 10px 34px #19090666,inset 4px 0 #f07d62;animation:pause-glow 1.8s ease-in-out infinite}.pause-title{font-size:15px;color:#ffd0ae}.pause-copy{grid-column:1/-1;color:#d9b4a3;font-size:11px}.pause-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:7px;margin-top:6px}.pause-player{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid #f1a48635;border-radius:10px;background:#200f0c55;color:#f6d5c3;font-size:12px}.pause-player strong{color:#ffd095;font:700 16px/1.2 ui-monospace,monospace;font-variant-numeric:tabular-nums}.alert#pause.recovered{display:flex;align-items:center;gap:12px;border-color:#8dcb9b88;background:linear-gradient(110deg,#234735,#1c352d);color:#dff2df;box-shadow:inset 4px 0 #7ccc91}.recovery-title{font-size:14px;color:#c9f0cb}.recovered .pause-copy{color:#a9cbb0}@keyframes pause-glow{50%{box-shadow:0 10px 38px #19090688,inset 4px 0 #ffad77}}
@media(max-width:620px){.tile:not(.mini){border-radius:8px}.tile.suit0:not(.mini) strong{font-size:25px}.tile:not(.mini) .pip{width:9px;height:9px}.tile:not(.mini) .bamboo-stalk{width:6px;height:13px}.tile.suit3:not(.mini) strong{width:27px;height:30px;font-size:24px}.alert#pause{padding:13px}.pause-title{font-size:13px}.pause-player{font-size:11px}.pause-player strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.alert#pause{animation:none}}
.tile-preview{display:flex;align-items:center;gap:13px;margin:0 0 15px;padding:10px 12px;border:1px solid #d7c28a27;border-radius:14px;background:#0b1b1766}.tile-preview>span{flex:none;color:#d5c591;font-size:10px;letter-spacing:.12em}.tile-preview #tilePreview{display:flex;align-items:center;gap:7px}.tile-preview .tile{width:42px;height:59px}.tile-preview .tile.suit0:not(.mini) strong{font-size:24px}.tile-preview .tile.suit3:not(.mini) strong{width:25px;height:28px;font-size:22px}.tile-preview .tile:not(.mini) .pip{width:8px;height:8px}.tile-preview .tile:not(.mini) .bamboo-stalk{width:6px;height:12px}
@media(max-width:620px){.tile-preview{margin:0 0 12px;padding:8px 10px}.tile-preview .tile{width:37px;height:53px}.tile-preview .tile.suit0:not(.mini) strong{font-size:21px}.tile-preview .tile.suit3:not(.mini) strong{width:23px;height:26px;font-size:19px}}
/* Clean, classic mahjong faces: crisp ink on ivory porcelain */
.tile:not(.mini){position:relative;isolation:isolate;overflow:hidden;width:49px;height:70px;padding:1px;border:1px solid #d8d3c3;border-bottom:4px solid #aaa38e;border-radius:8px;background:linear-gradient(135deg,#fffef9,#e9e5d9);box-shadow:0 2px 0 #a49d85,0 5px 0 #30473b,0 8px 12px #00140e44,inset 0 1px #fff}
.tile:not(.mini):before,.tile:not(.mini):after{display:none}.tile-art{position:relative;z-index:1;display:block;width:100%;height:100%;overflow:visible}
.tile:not(.mini).selected{transform:translateY(-9px);box-shadow:0 2px 0 #a49d85,0 5px 0 #30473b,0 10px 16px #00140e66,0 0 0 2px #d9ba68,inset 0 1px #fff}
.tile.back:not(.mini){background:#1e5141 url("assets/tile-back.svg") center/100% 100% no-repeat;border-color:#d5c18c;border-bottom-color:#8f7544}
.tile-preview .tile:not(.mini){width:40px;height:58px}
@media(max-width:620px){.tile:not(.mini){width:40px;height:56px}.tile-preview .tile:not(.mini){width:36px;height:52px}}
.tile-preview{gap:11px;padding:11px 13px;background:linear-gradient(110deg,#0b1b17c9,#162d25a8)}
.tile-preview #tilePreview{gap:9px}
.tile-preview .tile:not(.mini){width:47px;height:67px;border-radius:8px;box-shadow:0 2px 0 #a49d85,0 5px 0 #30473b,0 9px 12px #00140e55,inset 0 1px #fff}
.tile-preview .tile-art{filter:drop-shadow(0 1px 1px #b8b09c55)}
@media(max-width:620px){.tile-preview{gap:9px;padding:9px 10px}.tile-preview #tilePreview{gap:6px}.tile-preview .tile:not(.mini){width:39px;height:56px}}
.tile:not(.mini){background:transparent;border-color:#e4dcc8;border-bottom-color:#b4a990;box-shadow:0 2px 0 #a49d85,0 5px 0 #30473b,0 8px 12px #00140e44}
.tile-preview .tile:not(.mini){width:49px;height:70px}
@media(max-width:620px){.tile-preview .tile:not(.mini){width:41px;height:58px}}

@font-face{font-family:'Tile Serif';src:url('assets/tile-serif-glyphs.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}