:root{--bg:#f3f0e8;--ink:#19352e;--muted:#758079;--jade:#235c49;--jade-light:#dce7da;--red:#ad442e;--line:#d9ddd2;--tile:#fff9e8;--shadow:0 16px 45px #1a372c0c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,a:focus-visible{outline:3px solid #cf9b4c;outline-offset:4px}button{transition:background .16s,transform .16s}button:not(:disabled):active{transform:translateY(1px)}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.topbar{height:100px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;font-family:serif;font-size:23px;font-weight:700;letter-spacing:3px}.brand small{display:block;font:9px/1.5 sans-serif;letter-spacing:3px;color:var(--muted)}.seal{display:grid;place-items:center;width:43px;height:46px;border:1px solid #b74c36;color:#b74c36;font-size:28px;border-radius:3px;transform:rotate(-4deg)}.top-actions{display:flex;gap:28px;align-items:center}.connection{font-size:12px;color:var(--muted)}.connection:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#4e8062;margin-right:8px}.connection.offline:before{background:var(--red)}.text-button{border:0;background:none;padding:9px 0;color:var(--ink);font-size:13px}.text-button span{padding-left:12px}main{max-width:1380px;margin:auto;padding:0 6%}.welcome{min-height:calc(100vh - 178px);display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:10%;padding:58px 0 60px}.eyebrow,.card-kicker{font-size:11px;letter-spacing:3px;color:var(--muted)}.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow span{height:1px;width:25px;background:#a4754c}.intro h1{font-family:"Songti SC","Noto Serif CJK SC",serif;font-size:clamp(48px,5.5vw,76px);line-height:1.25;letter-spacing:5px;font-weight:500;margin:25px 0}.intro h1 span{color:var(--red)}.lead{color:var(--muted);font-size:15px;line-height:2}.hero-tiles{display:flex;gap:12px;padding:26px 0 18px 7px;perspective:500px}.hero-tile{width:67px;height:91px;background:var(--tile);border:1px solid #ded6ba;border-radius:7px;box-shadow:0 5px 0 #c1b899,0 8px 0 #285440,4px 15px 20px #17362a16;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-9deg);font:25px serif;color:#23483c}.hero-tile b{font-size:28px}.hero-tile.red{transform:rotate(1deg) translateY(-8px);color:var(--red)}.hero-tile.jade{transform:rotate(11deg);color:var(--jade)}.hero-tile>span:only-child,.hero-tile.red>span,.hero-tile.jade>span{font-size:43px}.hero-tile small{font:8px sans-serif;letter-spacing:3px}.intro-foot{display:flex;gap:15px;font-size:10px;letter-spacing:1px;color:var(--muted);margin-top:26px}.intro-foot i{font-style:normal}.lobby-card{background:#fbfaf5;border:1px solid #e0e1d5;border-radius:8px;padding:40px;box-shadow:var(--shadow);position:relative}.lobby-card:before{content:"";position:absolute;top:0;left:40px;width:32px;height:3px;background:var(--red)}h2{font:500 29px/1.4 "Songti SC",serif;letter-spacing:1px;margin:12px 0}p{margin:10px 0}.muted{color:var(--muted);font-size:13px}.lobby-card form{margin-top:30px}label{display:block;font-size:12px;margin-bottom:8px}input:not([type=checkbox]){width:100%;background:#f8f7f1;border:1px solid var(--line);border-radius:4px;color:var(--ink);height:49px;padding:12px 15px;outline:none}input:focus{border-color:var(--jade);box-shadow:0 0 0 3px #235c4910}input::placeholder{color:#a1a69b;font-size:12px}.primary,.secondary{border-radius:4px;padding:12px 20px;border:1px solid var(--jade);font-size:13px;white-space:nowrap}.primary{background:var(--jade);color:#fff9e8}.primary:hover:not(:disabled){background:#164735}.secondary{background:transparent;color:var(--jade)}.secondary:hover:not(:disabled){background:#e6ebdf}#create-room{margin-top:20px;width:100%;display:flex;justify-content:space-between}.divider{border-top:1px solid var(--line);text-align:center;position:relative;margin:34px 0 -6px}.divider span{position:relative;top:-12px;background:#fbfaf5;padding:0 12px;font-size:11px;color:#91988b}.join-form{display:flex;gap:10px}.privacy-note{font-size:10px;color:#939b8d;margin-top:26px;text-align:center}.site-footer{min-height:78px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:20px 6%;color:#9a9f92;font-size:10px;letter-spacing:1px}.site-footer>span:first-child{color:#6c7c6d;font-family:serif;font-size:14px;letter-spacing:3px}.room-heading{display:flex;justify-content:space-between;align-items:center;padding:30px 0 22px}.room-heading h1{font-size:23px;letter-spacing:2px;font-weight:500;margin:4px 0}.room-heading h1 span{font-family:monospace;font-weight:600}.room-tools{display:flex;gap:22px;align-items:center}.waiting{background:#fbfaf5;border:1px solid var(--line);border-radius:8px;min-height:460px;padding:40px;margin-bottom:45px}.waiting-intro{text-align:center}.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:35px 0}.roster-player{border:1px solid var(--line);border-radius:6px;padding:25px 10px;text-align:center;min-width:0}.roster-player.empty{border-style:dashed;background:#f5f5ed;color:#a1aa9c}.avatar{background:#e3e9dc;color:var(--jade);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;font:22px serif;margin:0 auto 10px}.roster-player .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.roster-player small{color:var(--muted);font-size:10px}.waiting-footer{display:flex;justify-content:center;align-items:center;gap:35px}.toggle{display:flex;align-items:center;gap:8px;color:var(--muted);margin:0}.toggle input{accent-color:var(--jade)}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:22px;margin-bottom:32px}.table-wrap{min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fcfaf2}.table-topline{display:flex;justify-content:space-between;background:#143e32;color:#c6d5c5;padding:11px 20px;font-size:11px}.mahjong-table{height:390px;background:radial-gradient(ellipse at 50% 42%,#2a6954,#174735 80%);position:relative;overflow:hidden;border:7px solid #173d30;box-shadow:inset 0 0 0 1px #8ca07635}.table-decoration{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-family:serif;font-size:110px;letter-spacing:15px;color:#e4ead105;white-space:nowrap}.seat{position:absolute;z-index:2;text-align:center;color:#e6eddd;max-width:125px;font-size:11px}.seat-top{left:50%;top:16px;transform:translateX(-50%)}.seat-left{left:14px;top:100px}.seat-right{right:14px;top:100px}.seat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px;margin:auto}.seat .role-badge{margin-top:4px}.seat.active .seat-name{color:#ffdb91}.seat.active .seat-name:before{content:"● ";font-size:8px}.backs{display:flex;gap:2px;justify-content:center;margin-top:8px;max-width:120px;flex-wrap:wrap}.back{width:12px;height:19px;background:#89ac83;border:1px solid #b2c4a0;border-bottom:3px solid #d6d7b6;border-radius:2px}.seat-left .backs,.seat-right .backs{max-width:56px;margin-left:auto;margin-right:auto}.table-center{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);text-align:center;color:#e6e8cf;max-width:52%;width:280px}.center-kicker{font:11px serif;letter-spacing:5px;color:#a4baa0}#turn-label{font-size:14px;margin-top:8px}#table-note{font-size:10px;color:#b7cdb6;margin-top:4px}#last-tile{display:flex;justify-content:center;gap:6px;margin-top:8px}.discard-area{position:absolute;bottom:15px;left:16%;right:16%;display:flex;gap:4px;justify-content:center;flex-wrap:wrap;max-height:102px;overflow:auto}.tile{border:1px solid #ded6bb;border-radius:4px;background:linear-gradient(#fffcef,#f4edd5);color:#253f39;box-shadow:0 3px 0 #b7b191;min-width:36px;width:39px;height:55px;padding:3px 2px;display:inline-flex;align-items:center;justify-content:center;flex-direction:column;line-height:1.05;position:relative;font-family:serif;flex-shrink:0}.tile .value{font-size:23px}.tile .suit{font-size:13px;margin-top:3px}.tile.red{color:#b54532}.tile.green{color:#28724e}.tile.wild:after{content:"★";position:absolute;top:1px;right:2px;color:#b7832d;font:8px sans-serif}.tile.mini{width:24px;min-width:24px;height:32px;box-shadow:0 2px 0 #b7b191;border-radius:2px}.tile.mini .value{font-size:15px}.tile.mini .suit{font-size:9px;margin-top:0}.tile.selected{transform:translateY(-11px);outline:2px solid #ad6c38;outline-offset:2px}.tile:disabled{opacity:1}.own-area{padding:16px 16px 20px}.own-player{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;margin-bottom:19px}.role-badge{display:inline-block;background:#e8eadc;border:1px solid #d2d7c3;color:#56754f;border-radius:3px;font-size:10px;line-height:1.5;padding:2px 7px}.seat .role-badge{background:#173f32;border-color:#67876866;color:#b8c9a9}.hand{display:flex;gap:4px;justify-content:center;min-height:62px;overflow-x:auto;padding:12px 4px 7px;scrollbar-width:thin}.action-hint{text-align:center;color:var(--muted);font-size:11px;min-height:24px;margin:9px 0}.actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.actions button{padding:8px 17px;font-size:12px}.actions .danger{border-color:var(--red);color:var(--red)}.game-sidebar{display:flex;flex-direction:column;gap:16px}.info-card{background:#fbfaf5;border:1px solid var(--line);border-radius:6px;padding:21px}.info-card h3{font-family:serif;font-size:25px;font-weight:500;margin:9px 0}.info-card p{line-height:1.8}.info-card .skill-line{font-size:11px;border-top:1px solid var(--line);padding-top:10px;margin-top:12px;color:#687b65}.log-card{flex:1;max-height:355px;overflow:auto}#game-log{list-style:none;padding:0;margin:14px 0 0;font-size:11px;color:#71816b}#game-log li{padding:8px 0;border-bottom:1px solid #e8e9df}#game-log li:first-child{color:var(--ink)}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#193c30;color:#faf7e9;border:1px solid #55715b;padding:12px 23px;border-radius:6px;font-size:13px;z-index:20;max-width:90vw;text-align:center;box-shadow:0 5px 30px #0002}dialog{max-width:570px;width:calc(100% - 30px);border:1px solid var(--line);border-radius:10px;padding:28px 35px;background:#faf8ef;color:var(--ink);max-height:85vh}dialog::backdrop{background:#0e271f99;backdrop-filter:blur(3px)}dialog p,dialog li{font-size:13px;color:#6c7c6c}dialog h3{font-size:15px;margin:21px 0 8px}dialog ul{padding-left:20px}.modal-heading{display:flex;align-items:center;justify-content:space-between}.icon-button{border:0;background:none;color:var(--ink);font-size:25px;padding:0 6px}dialog .primary{margin-top:20px;width:100%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1400px){.welcome{gap:100px}}@media(max-width:1050px){main{padding:0 4%}.game-layout{grid-template-columns:minmax(0,1fr) 190px;gap:14px}.info-card{padding:15px}.tile{width:34px;min-width:32px;height:49px}.hand{gap:3px}.welcome{gap:6%}.lobby-card{padding:30px}.mahjong-table{height:360px}}@media(max-width:780px){.topbar{height:82px;padding:0 5%}.brand{font-size:20px}.brand small{font-size:8px}.top-actions{gap:12px}.top-actions .connection{display:none}.welcome{grid-template-columns:1fr;gap:36px;padding:35px 2% 45px}.intro h1{font-size:50px;margin:18px 0}.intro .lead{font-size:13px}.hero-tiles{float:right;margin-top:-136px;padding-right:20px;transform:scale(.8);transform-origin:right center}.intro-foot{margin-top:20px;font-size:9px}.lobby-card{padding:28px}.site-footer>span:last-child{display:none}.game-layout{grid-template-columns:1fr}.game-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}.log-card{max-height:230px}.room-heading{padding:22px 0 15px}.room-heading h1{font-size:19px}.room-heading .eyebrow{font-size:9px}.room-tools{gap:12px}.room-tools .secondary{font-size:11px;padding:8px 10px}.mahjong-table{height:350px}.waiting{padding:25px 18px;min-height:0}.roster{gap:10px;grid-template-columns:repeat(2,1fr);margin:25px 0}.waiting-footer{gap:20px;flex-wrap:wrap}.roster-player{padding:16px 8px}.own-area{padding:13px 8px 16px}.tile{min-width:28px;width:31px;height:44px}.tile .value{font-size:20px}.tile .suit{font-size:11px}.hand{gap:3px;justify-content:flex-start}.hand:before,.hand:after{content:"";margin:auto}.actions button{font-size:11px;padding:8px 12px}.table-topline{padding:9px 12px}.seat-left{left:9px}.seat-right{right:9px}.discard-area{left:17%;right:17%}.table-center{max-width:55%}.game-sidebar .info-card{padding:16px}.site-footer{padding:18px 5%;min-height:65px}}@media(max-width:390px){.hero-tiles{transform:scale(.64);padding-right:0}.intro h1{font-size:43px}.intro-foot{gap:9px}.brand{font-size:18px}.seal{width:35px;height:39px}.tile{min-width:25px;width:26px;height:40px}.tile .value{font-size:18px}.hand{gap:2px}.game-sidebar{grid-template-columns:1fr}.log-card{max-height:160px}.room-tools{gap:8px}}
.tile-picker{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%;max-width:420px;padding:4px 0 10px}.tile-picker .tile.mini{width:30px;height:41px;min-width:30px}.tile-picker .tile:disabled{opacity:.25}.tile-picker .tile:hover:not(:disabled){outline:2px solid #ad6c38;outline-offset:2px}
/* Original ink, bronze and carved-ivory table edition. */
:root{--bg:#e9e0ce;--ink:#292e28;--muted:#737362;--jade:#284c3d;--line:#bbae91;--tile:#fff6dc;--red:#963d30}.topbar{background:linear-gradient(110deg,#182a25,#263f33);color:#f2e4c4;border-bottom:3px solid #a8874e}.topbar .text-button,.topbar .connection{color:#d4c8ab}.brand small{color:#b3ad92}.seal{border-color:#b5784b;color:#e0b474}.lobby-card,.info-card,.waiting{background:linear-gradient(125deg,#fff8e8ed,#e9dfcbed);box-shadow:0 12px 35px #2f211c10,inset 0 0 0 4px #fff8e840}.intro h1{color:#263c31}.room-heading .eyebrow{color:#8f6039}.table-wrap{border:2px solid #51432e;box-shadow:0 12px 34px #342a292b}.table-topline{background:#242f27;border-bottom:1px solid #b69a59;color:#dfcf9e;letter-spacing:1px}.mahjong-table{height:430px;border:9px solid #393d2a;background:repeating-linear-gradient(45deg,#ffffff02 0px,#ffffff02 1px,transparent 1px,transparent 4px),radial-gradient(ellipse at 50% 40%,#37644f,#1b3d32 85%);box-shadow:inset 0 0 0 2px #b09b5c60,inset 0 0 75px #0005}.table-decoration{color:#c1ba9b0a;font-weight:900;font-size:140px}.table-center{top:43%;padding:14px 5px;border-top:1px solid #a1935a50;border-bottom:1px solid #a1935a50}.seat{max-width:145px}.seat-top{top:13px}.seat-left,.seat-right{top:115px}.seat-name{font-family:serif;font-size:13px}.seat.active .seat-name{text-shadow:0 0 16px #f4cf7a}.backs{gap:3px}.back{background:linear-gradient(110deg,#7e9d65,#36634b);border:1px solid #c2c998;border-bottom:3px solid #f4e8c4;box-shadow:1px 2px 1px #09291b;border-radius:3px}.tile{width:43px;min-width:43px;height:62px;border-radius:6px 6px 5px 5px;border:1px solid #c9bd97;border-top-color:#fffdf0;background:linear-gradient(115deg,#fffef3 0%,#f8f0da 58%,#e9dbb8 100%);box-shadow:inset 2px 2px 1px #fff,inset -2px -2px 2px #c8b98b,0 3px 0 #c7b992,0 6px 0 #31634a,0 7px 0 #163c2d,1px 10px 9px #182c3038;transition:transform .16s,box-shadow .16s;color:#183b42}.tile svg{width:100%;height:100%;filter:drop-shadow(0 1px 0 #fff)}.tile .value{text-shadow:0 1px 0 #fff,0 -1px 0 #0002;font-size:26px;font-weight:700}.tile .suit{font-size:20px;font-weight:bold;letter-spacing:1px;margin-top:3px}.tile.selected,.tile.selected:active{transform:translateY(-13px) rotate(-1deg);outline:2px solid #bd8a42;outline-offset:2px;box-shadow:inset 2px 2px 1px #fff,0 4px 0 #c7b992,0 7px 0 #31634a,0 15px 16px #172b3a40}.tile.wild:after{content:'百';background:#b98a37;color:#fff8db;border-radius:3px;padding:1px 2px;font-size:8px;top:-4px;right:-3px;box-shadow:0 0 8px #d7b047}.tile.mini{width:25px;min-width:25px;height:35px;border-radius:3px;box-shadow:inset 1px 1px 0 white,0 2px 0 #b7aa81,0 4px 0 #2c6147,0 5px 3px #08271e55}.tile.mini .value{font-size:17px}.tile.mini .suit{font-size:12px}.own-area{background:linear-gradient(#e9dfc8,#f6efde);border-top:4px solid #8e7848;padding:17px 14px 22px}.hand{gap:5px;padding:20px 8px 16px;min-height:96px;justify-content:flex-start}.hand:before,.hand:after{content:'';margin:auto}.own-player{margin-bottom:0}.scroll-hint{text-align:center;font-size:10px;color:#85816b;letter-spacing:1px}.actions button{min-height:44px}.primary{background:linear-gradient(#365a44,#243f32);border-color:#40523a;box-shadow:inset 0 0 0 1px #a6a46a4a}.primary:hover:not(:disabled){background:#365a44}.tile-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;padding:10px}.tile-picker .tile{min-width:34px;width:34px;height:48px}.discard-area{left:20%;right:20%;bottom:19px;gap:5px 4px;max-height:105px;padding-bottom:6px}.own-melds,.seat-melds{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.own-melds{margin:12px 0 0}.meld{display:inline-flex;gap:2px;position:relative;padding:5px 0 12px}.meld-label{position:absolute;bottom:-4px;left:0;width:100%;text-align:center;font-size:8px;color:#bba579}.own-melds .meld-label{color:#736142}.seat-melds{gap:5px;margin-top:8px;max-width:145px}.seat-melds .tile.mini{width:17px;min-width:17px;height:25px}.seat-melds .tile .value{font-size:12px}.seat-melds .tile .suit{font-size:8px}.seat-left .seat-melds,.seat-right .seat-melds{max-width:85px}.identity-stage{padding:32px 20px 35px;background:radial-gradient(ellipse at center,#4b4937,#172b26 80%);text-align:center;color:#eedfc0;border-bottom:4px solid #a7894b}.identity-stage .card-kicker{color:#c8ad73}.identity-stage h2{font-size:31px;letter-spacing:4px}.identity-stage p{font-size:12px;color:#c5b998}.identity-cards{display:flex;justify-content:center;gap:14px;margin:24px auto 18px;perspective:900px}.identity-card{width:124px;height:182px;position:relative;border:1px solid #bba16e;border-radius:8px;box-shadow:0 9px 0 #111d19,0 15px 25px #0005,inset 0 0 0 5px #34362a,inset 0 0 0 6px #bca16b66;background:repeating-linear-gradient(45deg,#b7985e0b 0 1px,transparent 1px 8px),linear-gradient(140deg,#3e4734,#12281f);color:#dbc390;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;transition:transform .3s,filter .3s}.identity-card:not(:disabled):hover{transform:translateY(-9px) rotate(1deg);filter:brightness(1.2)}.identity-card:disabled{opacity:.65}.identity-card .sigil{font:52px/1 serif;border:1px solid #b4945b;border-radius:50%;width:73px;height:73px;display:grid;place-items:center}.identity-card .identity-number{font-size:10px;letter-spacing:3px}.identity-card.revealed{background:linear-gradient(125deg,#f4e6be,#c4ab75);color:#55362a;opacity:1;animation:cardReveal .7s ease-out}.identity-card.revealed .sigil{border-color:#8d6234}.identity-card.revealed.lord{color:#8d2f22}.identity-card.revealed .identity-number{letter-spacing:1px}.identity-reveal{max-width:470px;margin:auto;color:#f4e2b6;font:15px/1.8 serif;min-height:28px}.identity-stage:not([hidden])~.mahjong-table,.identity-stage:not([hidden])~.own-area{display:none}.skill-effects{position:fixed;inset:0;pointer-events:none;z-index:18;display:grid;place-items:center;overflow:hidden}.skill-flash{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;width:min(80vw,460px);height:260px;border-radius:50%;background:radial-gradient(ellipse,#17251eeb,transparent 70%);color:#f4d793;animation:skillBloom 1.8s both;text-shadow:0 2px 3px #000}.skill-flash:before{content:'';position:absolute;inset:35px 0;border-top:2px solid #d6b271;border-bottom:2px solid #d6b271;border-radius:50%;animation:ripple 1.7s both}.skill-flash .effect-mark{font:62px/1.2 serif;letter-spacing:10px}.skill-flash .effect-caption{font-size:14px;letter-spacing:3px;margin-top:12px}.skill-flash.bomb{color:#f1a276}.skill-flash.bomb:before{border-color:#d6673d;border-style:dashed}.skill-flash.exchange:before{transform:rotate(-15deg);border-left:12px solid #bfc791;border-right:12px solid #bfc791}.skill-flash.reroll:before{border-radius:10% 90%;border-color:#afd1c1}.skill-flash.hu{color:#ffdf91;background:radial-gradient(ellipse,#6e5028de,transparent 70%)}.draw-in{animation:drawTile .35s ease-out}.score-row{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding:10px 0;font-size:13px}.score-notes{padding:12px;background:#e7ddc4;font-size:12px}.result-roles{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.claim-choice{display:flex;align-items:center;gap:4px}.claim-choice .tile.mini{pointer-events:none;min-width:22px;width:22px;height:31px}.claim-choice b{margin-right:4px;font-size:12px}@keyframes cardReveal{from{transform:rotateY(90deg) translateY(-12px);filter:brightness(2)}to{transform:rotateY(0)}}@keyframes drawTile{from{transform:translateY(-24px) rotate(6deg);opacity:.2}to{transform:translateY(0);opacity:1}}@keyframes skillBloom{0%{opacity:0;transform:scale(.65)}20%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}@keyframes ripple{0%{opacity:0;scale:.4}25%{opacity:1}100%{opacity:0;scale:1.4}}
@media(min-width:1450px){main{max-width:1500px}.tile{width:47px;min-width:47px;height:67px}}@media(max-width:1100px){.game-layout{grid-template-columns:minmax(0,1fr) 190px}.tile{width:38px;min-width:38px;height:56px}}@media(max-width:780px){.game-layout{grid-template-columns:1fr}.tile{width:36px;min-width:36px;height:53px}.mahjong-table{height:380px}.hand{padding-left:5px;padding-right:5px}.identity-cards{gap:9px}.identity-card{width:105px;height:155px}.identity-stage{padding:27px 12px}.seat-left,.seat-right{top:110px}.seat{max-width:100px}.seat-name{max-width:85px;font-size:11px}.discard-area{left:23%;right:23%;max-height:93px}.table-center{max-width:48%;font-size:12px}.table-center #turn-label{font-size:12px}.seat-melds .tile.mini{width:14px;min-width:14px;height:21px}.own-area{padding:14px 7px 18px}.actions{gap:7px}.actions button{font-size:12px;padding:9px 12px}.game-sidebar{grid-template-columns:1fr 1fr}.identity-card .sigil{font-size:42px;width:62px;height:62px}}
@media(max-width:480px){.topbar{padding:0 4%;height:75px}.topbar .text-button{font-size:11px}main{padding:0 3%}.identity-cards{gap:6px}.identity-card{width:22%;height:135px}.identity-card .sigil{width:48px;height:48px;font-size:34px}.identity-card .identity-number{font-size:9px;letter-spacing:1px}.identity-stage h2{font-size:25px}.identity-reveal{font-size:13px}.mahjong-table{height:370px}.table-center{top:42%}.seat-left{left:5px}.seat-right{right:5px}.tile{width:34px;min-width:34px;height:51px}.tile .value{font-size:23px}.tile .suit{font-size:18px}.hand{gap:4px}.room-tools{gap:8px}.room-heading h1{font-size:16px}.game-sidebar{grid-template-columns:1fr}.log-card{max-height:180px}.seat-melds{max-width:76px}.seat-left .seat-melds,.seat-right .seat-melds{max-width:65px}.discard-area{left:25%;right:25%}.discard-area .tile.mini{width:21px;min-width:21px;height:30px}.scroll-hint{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.skill-flash{opacity:1}.identity-card:not(:disabled):hover{transform:none}}
.hidden-tile{background:repeating-linear-gradient(45deg,#9eb77b20 0 1px,transparent 1px 4px),linear-gradient(120deg,#538461,#224b38);border-color:#afbd8c;box-shadow:0 3px 0 #ece1bd!important}.effect-tiles{display:flex;gap:16px;position:absolute;top:10px;opacity:.8}.effect-tile{display:block;width:24px;height:35px;border:2px solid currentColor;border-radius:4px;background:#2a4d3a}.exchange .effect-tile,.exchangeComplete .effect-tile{animation:secretExchange 1.5s both}.bomb .effect-tile{animation:shatterTile 1.3s both}.reroll .effect-tile{animation:windTile 1.5s both}.effect-tile:nth-child(2){animation-delay:.12s}.effect-tile:nth-child(3){animation-delay:.24s}.discard-in{animation:discardSettle .3s ease-out}.wildcard .tile{margin-top:12px;box-shadow:0 0 30px #ffcc5a,0 5px 0 #31634a}@keyframes secretExchange{0%{transform:translateX(-80px) rotate(-15deg);opacity:0}40%{opacity:1}100%{transform:translateX(80px) rotate(15deg);opacity:0}}@keyframes shatterTile{0%{transform:scale(1);opacity:1}100%{transform:translate(70px,-45px) rotate(100deg) scale(.25);opacity:0}}@keyframes windTile{0%{transform:translateX(-45px) rotate(-20deg);opacity:0}40%{opacity:1}100%{transform:translateX(45px) rotate(20deg);opacity:0}}@keyframes discardSettle{0%{transform:translateY(-20px) rotate(8deg)}70%{transform:translateY(3px) rotate(-2deg)}100%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.effect-tile{animation:none!important}.skill-flash:before{display:none}}
.role-reveal-overlay{width:min(88vw,480px);min-height:390px;padding:26px 30px;text-align:center;color:#f5dfae;background:radial-gradient(ellipse,#10271af2 15%,#15251be8 45%,transparent 72%);display:flex;align-items:center;flex-direction:column;animation:roleUnveil 2.8s both;pointer-events:none;text-shadow:0 2px 5px #071b14}.reveal-kicker{font:11px/1.5 serif;letter-spacing:6px;color:#d7ba7d}.reveal-card{margin:15px 0 12px;width:148px;height:208px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:12px;border:2px solid #bc9652;border-radius:7px;background:repeating-linear-gradient(45deg,#3d432a0a 0 1px,transparent 1px 8px),linear-gradient(125deg,#f6e9c5,#c2a36a);box-shadow:inset 0 0 0 5px #ddc594,inset 0 0 0 6px #866435,0 15px 30px #0007;color:#563c27;text-shadow:0 1px 0 #fff5;animation:roleFlip .75s ease-out;transform-style:preserve-3d}.reveal-emblem{font:66px/1.1 serif;border:1px solid #936c38;border-radius:50%;width:88px;height:88px;display:grid;place-items:center}.reveal-role{font:28px/1.2 serif;letter-spacing:8px;padding-left:8px}.reveal-seal{font-size:9px;letter-spacing:4px}.reveal-goal{font:13px/1.8 serif;max-width:360px;margin:4px 0 0}.role-reveal-overlay.lord .reveal-card{color:#8a2f22}.role-reveal-overlay.spy .reveal-card{color:#303956}.role-reveal-overlay.rebel .reveal-card{color:#613127}@keyframes roleFlip{from{transform:perspective(600px) rotateY(110deg) translateY(-25px);filter:brightness(1.7)}to{transform:perspective(600px) rotateY(0);filter:brightness(1)}}@keyframes roleUnveil{0%{opacity:0}12%,82%{opacity:1}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.role-reveal-overlay,.reveal-card{animation:none!important}}