:root{
  --bg:#fff;--sidebar:#f7f7f5;--panel:#fff;--text:#171717;--muted:#73736f;--hair:#e8e7e3;
  --soft:#f2f2ef;--soft2:#ecece8;--green:#10a37f;--red:#df4b4b;--gold:#c2a04c;
  --shadow:0 20px 70px rgba(0,0,0,.10);--sidebar-w:268px;--topbar-h:58px;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:#fff;color:var(--text);overflow:hidden}button,input,select{font:inherit}button{color:inherit}.app-shell{height:100%;display:flex;background:#fff}
.sidebar{width:var(--sidebar-w);height:100%;background:var(--sidebar);border-right:1px solid rgba(0,0,0,.025);display:flex;flex-direction:column;justify-content:space-between;padding:10px 10px 8px;z-index:40;transition:transform .25s ease}.sidebar-top{min-height:0}.brand-row{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 3px 5px}.brand-mark{width:34px;height:34px;border:0;background:transparent;border-radius:9px;cursor:pointer;display:grid;place-items:center}.brand-mark:hover,.icon-btn:hover{background:#ecece8}.brand-glyph{width:21px;height:21px;display:block;position:relative}.brand-glyph i{position:absolute;left:9px;top:1px;width:3px;height:19px;border-radius:3px;background:#222;transform-origin:50% 50%}.brand-glyph i:nth-child(2){transform:rotate(60deg)}.brand-glyph i:nth-child(3){transform:rotate(120deg)}.mobile-close{display:none!important}.primary-nav{display:flex;flex-direction:column;gap:2px}.nav-item,.table-link,.profile-row{width:100%;border:0;background:transparent;display:flex;align-items:center;border-radius:9px;cursor:pointer;text-align:left}.nav-item{height:40px;padding:0 10px;gap:10px;font-size:14px}.nav-item:hover,.nav-item.active{background:#ecece8}.nav-icon{width:20px;color:#4d4d49;display:grid;place-items:center}.nav-icon svg,.icon-btn svg,.chev svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.nav-item kbd{margin-left:auto;color:#9a9994;font-size:10px;font-weight:500;background:transparent}.nav-divider{height:1px;background:#e7e6e1;margin:8px 6px 12px}.sidebar-section-title{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;color:#76756f;font-size:12px;font-weight:600}.mini-plus{border:0;background:transparent;color:#99958e;font-size:14px;cursor:pointer}.section-gap{margin-top:12px}.table-list{display:flex;flex-direction:column;gap:2px}.table-link{padding:8px 9px;gap:9px;min-height:48px}.table-link:hover,.table-link.selected{background:#ecece8}.dot,.status-dot{width:8px;height:8px;border-radius:50%;background:#c7c7c2;flex:0 0 auto}.dot.live,.status-dot{background:#19aa7d;box-shadow:0 0 0 3px rgba(25,170,125,.12)}.table-copy,.profile-copy{display:flex;flex-direction:column;min-width:0}.table-copy b,.profile-copy b{font-size:13px;font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-copy small,.profile-copy small{font-size:11px;color:#8b8a84;margin-top:2px}.recent-hands{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;padding:0 4px 8px;overscroll-behavior:contain}.empty-mini{font-size:11px;color:#aaa69e;padding:9px 6px}.recent-item{border:0;background:transparent;width:100%;min-height:44px;flex:0 0 auto;padding:7px 6px;border-radius:7px;text-align:left;cursor:pointer}.recent-item:hover{background:#ecece8}.recent-item b{display:block;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-item small{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;line-height:1.25;color:#99958f;margin-top:3px;white-space:nowrap;overflow:hidden}.recent-item small span{min-width:0;overflow:hidden;text-overflow:ellipsis}.recent-item small time{flex:0 0 auto;font-variant-numeric:tabular-nums;color:#aaa79f}.sidebar-bottom{border-top:1px solid #ebeae5;padding-top:7px}.profile-row{padding:7px 7px;gap:9px}.profile-row:hover{background:#ecece8}.avatar{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:11px;color:white;background:linear-gradient(145deg,#786d64,#282727);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.profile-copy{flex:1}.profile-copy small{display:flex;align-items:center;gap:3px}.more{font-size:12px;color:#99958f}
.main-area{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff}.topbar{height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(0,0,0,.055);position:relative;z-index:15;background:rgba(255,255,255,.92);backdrop-filter:blur(12px)}.game-title{border:0;background:transparent;border-radius:8px;display:flex;align-items:baseline;gap:7px;padding:7px 9px;cursor:pointer;font-weight:580}.game-title:hover{background:#f4f4f1}.game-title small{font-weight:450;color:#8e8c86;font-size:12px}.chev{color:#8f8d87;font-size:12px}.chev svg{width:14px;height:14px}.top-actions{display:flex;align-items:center;gap:5px}.hand-no{font-size:12px;color:#8e8d87;margin-right:7px}.icon-btn{width:34px;height:34px;border:0;background:transparent;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:#595852}.leave-btn{height:34px;border:1px solid #dddcd7;background:#fff;border-radius:8px;padding:0 12px;font-size:12px;cursor:pointer}.leave-btn:hover{background:#f5f5f2}.menu-btn{display:none}.ai-engine-badge{height:22px;padding:0 7px;border-radius:7px;display:inline-flex;align-items:center;font-size:8px;font-weight:750;letter-spacing:.08em;border:1px solid #cfe7e1;background:#eef7f5;color:#17745f}.view-host{flex:1;min-height:0;position:relative;overflow:hidden}
/* Shared table language from token-poker */
.game-stage{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 35%,#fff 0,#fff 40%,#fafaf8 100%)}.ambient{position:absolute;width:360px;height:360px;border-radius:50%;filter:blur(100px);opacity:.12;pointer-events:none}.ambient-a{background:#79d4be;left:10%;top:18%}.ambient-b{background:#8b9de8;right:8%;bottom:13%}.table-wrap{position:absolute;inset:34px 36px 154px;display:grid;place-items:center}.ddz-table{width:min(900px,82vw);height:min(525px,57vh);min-height:410px;border-radius:47% / 46%;position:relative;background:linear-gradient(180deg,#fbfbf9 0%,#f5f5f1 100%);border:1px solid #e5e4df;box-shadow:0 22px 80px rgba(44,44,36,.08),inset 0 0 0 14px rgba(255,255,255,.62),inset 0 0 60px rgba(0,0,0,.018)}.felt-ring{position:absolute;inset:23px;border-radius:inherit;border:1px solid rgba(0,0,0,.045);box-shadow:inset 0 0 50px rgba(255,255,255,.5)}.table-caption{position:absolute;left:50%;top:18px;transform:translateX(-50%);font-size:9px;letter-spacing:.18em;color:#bbb8b0;font-weight:650;z-index:2;white-space:nowrap}.table-center{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;width:62%;z-index:3}.round-label{font-size:11px;color:#7e7d77;background:rgba(255,255,255,.88);border:1px solid #e9e8e3;border-radius:7px;padding:5px 10px;box-shadow:0 4px 18px rgba(0,0,0,.035);margin-bottom:13px;white-space:nowrap}.action-cards{display:flex;gap:4px;min-height:78px;align-items:center;justify-content:center}.street-label{height:24px;margin-top:8px;color:#aaa7a0;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.pass-space{font-size:12px;color:#aaa79f;letter-spacing:.12em}.card{width:49px;height:70px;background:#fff;border:1px solid #deddd8;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.07);position:relative;padding:6px;display:flex;flex-direction:column;justify-content:flex-start;line-height:1;transition:transform .16s ease,box-shadow .16s ease}.card .rank{font-size:17px;font-weight:650}.card .suit{font-size:15px;margin-top:3px}.card.red{color:#d94747}.card.black{color:#1e1e1d}.card.joker .rank{font-size:12px;writing-mode:vertical-rl;letter-spacing:.05em}.card.back{background:linear-gradient(135deg,#232323,#4b4b48);border:2px solid white;box-shadow:0 5px 14px rgba(0,0,0,.16),inset 0 0 0 1px #696965}.card.back:before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.14);border-radius:4px}.card.back:after{content:"";position:absolute;width:13px;height:13px;left:50%;top:50%;margin:-7px 0 0 -7px;border:1.5px solid #f2f2ee;border-radius:2px;transform:rotate(45deg)}.card.mini{width:34px;height:48px;border-radius:6px;padding:4px}.card.mini .rank{font-size:13px}.card.mini .suit{font-size:12px}.seats{position:absolute;inset:0}.seat{position:absolute;z-index:6;display:flex;flex-direction:column;align-items:center;min-width:132px}.seat[data-seat="0"]{left:50%;bottom:-58px;transform:translateX(-50%)}.seat[data-seat="1"]{left:-58px;top:102px}.seat[data-seat="2"]{right:-58px;top:102px}.seat-main{height:53px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.94);border:1px solid #e7e6e1;border-radius:16px;padding:6px 9px 6px 6px;box-shadow:0 5px 20px rgba(0,0,0,.065);backdrop-filter:blur(8px);min-width:128px;position:relative;transition:.18s ease}.seat.active .seat-main{border-color:#74b9ac;box-shadow:0 0 0 3px rgba(16,163,127,.12),0 7px 22px rgba(0,0,0,.07);transform:translateY(-1px)}.seat-info{display:flex;flex-direction:column;min-width:0}.seat-name{font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px}.seat-stack{font-size:10px;color:#8b8982;margin-top:2px;white-space:nowrap}.role-badge,.human-badge{height:17px;border-radius:999px;padding:0 6px;font-size:8px;font-weight:720;display:inline-flex;align-items:center}.role-badge{background:#f4ead0;color:#8e6819}.human-badge{background:#e8f5f1;color:#08785c}.thinking{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);font-size:10px;color:#8f8d87;white-space:nowrap}.thinking:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#85847f;margin-right:4px;animation:pulse 1s infinite}.speech{position:absolute;left:50%;bottom:67px;transform:translateX(-50%);background:#262625;color:#fff;border-radius:11px 11px 11px 4px;padding:7px 9px;font-size:10px;line-height:1.35;max-width:200px;white-space:normal;box-shadow:0 7px 22px rgba(0,0,0,.14);z-index:16;animation:chatIn .2s ease both}.speech:after{content:"";position:absolute;bottom:-4px;left:18px;width:8px;height:8px;background:#262625;transform:rotate(45deg)}.seat[data-seat="1"] .speech{left:78px;transform:none}.seat[data-seat="2"] .speech{left:auto;right:78px;transform:none}.opp-fan{display:flex;height:38px;margin-top:5px;justify-content:center}.opp-fan .card{width:27px;height:38px;margin-left:-17px;border-radius:5px;padding:2px;box-shadow:0 2px 7px rgba(0,0,0,.08)}.opp-fan .card:first-child{margin-left:0}.opp-fan .card .rank{font-size:8px}.opp-fan .card .suit{font-size:7px}.kitty{position:absolute;left:50%;top:64px;transform:translateX(-50%);display:flex;align-items:center;gap:3px;z-index:4}.kitty:before{content:"底牌";font-size:8px;color:#aaa79f;letter-spacing:.08em;margin-right:5px}.kitty .card{width:29px;height:41px;padding:3px}.kitty .card .rank{font-size:10px}.kitty .card .suit{font-size:9px}.hero-hand{position:absolute;left:50%;bottom:71px;transform:translateX(-50%);display:flex;justify-content:center;z-index:11;max-width:min(850px,calc(100vw - var(--sidebar-w) - 50px));padding:0 30px}.hero-hand .card{width:47px;height:68px;margin-left:-21px;cursor:default;user-select:none}.hero-hand .card:first-child{margin-left:0}.hero-hand.can-pick .card{cursor:pointer}.hero-hand.can-pick .card:hover{transform:translateY(-6px);box-shadow:0 9px 20px rgba(0,0,0,.11)}.hero-hand .card.selected{transform:translateY(-15px);box-shadow:0 0 0 2px rgba(16,163,127,.25),0 10px 24px rgba(0,0,0,.11)}.control-dock{position:absolute;left:50%;bottom:17px;transform:translateX(-50%);width:min(720px,calc(100vw - var(--sidebar-w) - 50px));z-index:12}.hero-hud{height:24px;margin:0 auto 7px;width:max-content;max-width:100%;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 9px;border:1px solid #e7e6e1;border-radius:999px;background:rgba(255,255,255,.92);font-size:9px;color:#8f8d87;box-shadow:0 3px 14px rgba(0,0,0,.035)}.hero-hud b{color:#4e4d48}.hero-hud i{width:2px;height:2px;border-radius:50%;background:#c3c1ba}.action-row{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:7px}.action-row.four{grid-template-columns:repeat(4,1fr)}.action-btn{height:48px;border-radius:12px;border:1px solid #deddd8;background:#fff;font-size:13px;font-weight:580;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.045);display:flex;align-items:center;justify-content:center;gap:9px;transition:.15s}.action-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 7px 22px rgba(0,0,0,.075)}.action-btn:disabled{opacity:.38;cursor:default}.action-btn.primary{background:#222;color:#fff;border-color:#222}.action-btn.danger{color:#b84c4c}.waiting-row{height:48px;border-radius:12px;border:1px solid #e5e4df;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;color:#88867f;font-size:12px;box-shadow:0 5px 18px rgba(0,0,0,.04)}.thinking-dot{width:7px;height:7px;border-radius:50%;background:#63625e;margin-right:7px;animation:pulse 1s infinite}.feed-peek{position:absolute;right:18px;bottom:19px;height:34px;border:1px solid #deddd8;background:rgba(255,255,255,.94);border-radius:9px;padding:0 10px;display:flex;align-items:center;gap:7px;font-size:10px;color:#77756f;box-shadow:0 5px 18px rgba(0,0,0,.05);z-index:13}.feed-live-dot{width:6px;height:6px;border-radius:50%;background:#18a77d}.game-toast{position:absolute;left:50%;top:22px;transform:translate(-50%,-8px);opacity:0;z-index:30;background:#222;color:#fff;padding:8px 13px;border-radius:9px;font-size:12px;box-shadow:0 8px 25px rgba(0,0,0,.18);transition:.22s;pointer-events:none}.game-toast.show{opacity:1;transform:translate(-50%,0)}.result-banner{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);z-index:25;width:310px;background:rgba(255,255,255,.96);border:1px solid #e4e3de;border-radius:17px;padding:18px;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.12);backdrop-filter:blur(12px)}.result-banner small{font-size:9px;letter-spacing:.18em;color:#99968e}.result-banner b{display:block;font-size:25px;margin:5px 0}.result-banner span{font-size:11px;color:#7f7c75}.result-banner button{display:block;width:100%;height:36px;margin-top:13px;border:0;border-radius:9px;background:#222;color:#fff;font-weight:600;cursor:pointer}
/* Lobby: same table-first composition as token-poker welcome */
.lobby-stage .table-wrap{inset:30px 34px 70px}.lobby-stage .ddz-table{opacity:.84}.lobby-stage .seat{opacity:.72}.lobby-stage .fake-hand{display:flex;margin-top:5px}.lobby-stage .fake-hand .card{width:24px;height:35px;margin-left:-14px}.lobby-stage .welcome-backdrop{position:absolute;inset:0;background:rgba(245,245,242,.64);backdrop-filter:blur(2px);z-index:20}.welcome-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(500px,calc(100vw - 32px));background:#fff;border:1px solid #e7e6e1;border-radius:20px;box-shadow:var(--shadow);z-index:25;padding:28px;text-align:center}.welcome-mark{width:48px;height:48px;border-radius:14px;background:#222;color:#fff;display:grid;place-items:center;margin:0 auto 16px}.welcome-card h1{font-size:22px;margin:0 0 8px;letter-spacing:-.02em}.welcome-card>p{font-size:13px;line-height:1.65;color:#77756e;margin:0 auto 18px;max-width:400px}.welcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}.welcome-grid div{background:#f6f6f3;border-radius:11px;padding:11px 7px}.welcome-grid b{display:block;font-size:13px}.welcome-grid span{display:block;font-size:9px;color:#8d8b85;margin-top:3px}.mode-switch{display:grid;grid-template-columns:1fr 1fr;background:#f0f0ed;border-radius:9px;padding:3px;margin-bottom:10px}.mode-switch button{border:0;background:transparent;height:31px;border-radius:7px;font-size:11px;color:#77756f;cursor:pointer}.mode-switch button.active{background:#fff;color:#222;box-shadow:0 1px 5px rgba(0,0,0,.08);font-weight:600}.setup-fields{display:grid;grid-template-columns:1fr 1fr;gap:6px;text-align:left}.setup-fields.three{grid-template-columns:repeat(3,1fr)}.setup-fields select,.setup-fields input{height:36px;border:1px solid #deddd8;background:#fafaf8;border-radius:9px;padding:0 9px;font-size:10px;min-width:0}.budget-line{display:flex;justify-content:space-between;align-items:center;margin:8px 0;background:#f7f7f4;border-radius:9px;padding:7px 9px;font-size:9px;color:#88867f}.budget-line select{height:27px;border:1px solid #dddcd7;border-radius:7px;background:#fff;font-size:9px}.welcome-start{height:42px;width:100%;background:#222;color:#fff;border:0;border-radius:10px;font-weight:600;cursor:pointer}.welcome-start:hover{background:#111}.welcome-card>small{display:block;color:#aaa79f;margin-top:9px;font-size:9px}.lobby-watch-link{border:0;background:transparent;color:#77756f;font-size:10px;margin-top:7px;cursor:pointer}.lobby-watch-link:hover{color:#222;text-decoration:underline}
/* Drawer-like content views */
.content-stage{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,#fff,#fafaf8)}.content-underlay{position:absolute;inset:0;opacity:.35;filter:blur(.2px)}.content-underlay .ddz-table{transform:scale(.94)}.content-sheet{position:absolute;right:0;top:0;height:100%;width:min(455px,94vw);background:#fff;border-left:1px solid #ecebe6;box-shadow:-20px 0 60px rgba(0,0,0,.08);z-index:5;display:flex;flex-direction:column}.sheet-head{height:85px;padding:18px 20px;border-bottom:1px solid #edede8;display:flex;align-items:center;justify-content:space-between}.sheet-head small{font-size:9px;letter-spacing:.12em;color:#9a9790}.sheet-head h2{font-size:20px;margin:2px 0 0;font-weight:620}.sheet-body{flex:1;overflow:auto;padding:18px 20px}.panel-section-title{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#9a978f;font-weight:700;margin:4px 0 9px}.persona-row{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #ecebe6}.persona-row .avatar{width:38px;height:38px}.persona-copy b{display:block;font-size:13px}.persona-copy small{display:block;color:#8d8b84;font-size:10px;margin-top:3px;line-height:1.4}.style-pill{font-size:9px;background:#f2f2ef;color:#6f6d67;border-radius:999px;padding:5px 7px;white-space:nowrap}.trait-bars{grid-column:2/4;display:grid;grid-template-columns:44px 1fr 26px;gap:6px;align-items:center}.trait-bars span,.trait-bars b{font-size:8px;color:#96938c;font-weight:500}.trait-track{height:4px;background:#eeede8;border-radius:3px;overflow:hidden}.trait-fill{height:100%;background:#777570;border-radius:3px}.persona-hook{grid-column:2/4;font-size:9px;line-height:1.45;color:#77746d;margin-top:-2px}.replay-item{border:0;background:transparent;width:100%;padding:10px 9px;border-radius:9px;text-align:left;cursor:pointer}.replay-item:hover,.replay-item.active{background:#f1f1ed}.replay-item b{display:block;font-size:11px}.replay-item small{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:9px;color:#918e87;margin-top:3px;white-space:nowrap}.replay-item small span{min-width:0;overflow:hidden;text-overflow:ellipsis}.replay-item small time{flex:0 0 auto;font-variant-numeric:tabular-nums;color:#aaa79f}.replay-launch{width:100%;height:34px;border:1px solid #e2e1dc;background:#f8f8f5;border-radius:9px;margin-top:5px;font-size:10px;font-weight:600;cursor:pointer}.replay-launch:hover{background:#f0f0ec}
/* Replay is a token-poker-like mini table, not a separate dark app */
.replay-layout{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 385px;background:#fff}.replay-main{position:relative;background:radial-gradient(circle at 50% 40%,#fff,#f8f8f5)}.replay-wrap{position:absolute;inset:20px 24px 74px;display:grid;place-items:center}.replay-table{width:min(820px,75vw);height:min(500px,60vh);min-height:390px}.replay-controls{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:min(720px,calc(100% - 50px));display:grid;grid-template-columns:108px 1fr auto;gap:8px;align-items:center}.transport{display:grid;grid-template-columns:32px 40px 32px;gap:4px}.transport button,.speed-btn{height:32px;border:1px solid #dfded9;background:#fff;border-radius:8px;cursor:pointer;font-size:10px}.transport button:hover,.speed-btn:hover{background:#f5f5f2}.speed-btn.active{background:#222;color:#fff;border-color:#222}.timeline input{width:100%;accent-color:#393936}.timeline-meta{font-size:8px;color:#9a978f;text-align:center;margin-top:3px}.speed-group{display:flex;gap:4px}.replay-side{border-left:1px solid #ecebe6;background:#fff;display:flex;flex-direction:column;min-width:0}.replay-side-head{padding:15px 16px;border-bottom:1px solid #ecebe6}.replay-side-head b{font-size:12px}.replay-side-head span{display:block;font-size:9px;color:#97948c;margin-top:2px}.replay-list{padding:8px;max-height:40%;overflow:auto;border-bottom:1px solid #ecebe6}.trace-panel{padding:14px 16px;overflow:auto;flex:1}.trace-panel h4{font-size:11px;margin:0 0 9px}.trace-line{font-size:9px;line-height:1.5;color:#65635d;margin-bottom:8px}.candidate{border:1px solid #ecebe6;background:#fafaf8;border-radius:8px;padding:7px 8px;margin:5px 0;font-size:8px}.candidate b{float:right}.candidate small{display:block;color:#8e8b84;margin-top:3px;line-height:1.35}.trace-empty{font-size:10px;color:#aaa79f;line-height:1.6}.replay-hero{bottom:-45px;position:absolute;left:50%;transform:translateX(-50%);display:flex;z-index:8}.replay-hero .card{width:35px;height:50px;margin-left:-15px}.replay-hero .card:first-child{margin-left:0}
.toast-host{position:fixed;right:20px;bottom:20px;display:grid;gap:8px;z-index:99}.toast{background:#222;color:#fff;padding:10px 13px;border-radius:10px;font-size:11px;box-shadow:var(--shadow);animation:toastin .2s ease}.toast.error{background:#7c322d}@keyframes toastin{from{transform:translateY(8px);opacity:0}}@keyframes pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.05)}}@keyframes chatIn{from{opacity:0;transform:translateX(-50%) translateY(8px) scale(.96)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}@keyframes dealIn{from{opacity:0;transform:translateY(-16px) scale(.92) rotate(-2deg)}to{opacity:1;transform:none}}
.card.dealt{animation:dealIn .28s cubic-bezier(.2,.8,.3,1) both}.action-cards.cards-enter .card{animation:dealIn .24s ease both}.seat.action-pop .seat-main{animation:seatPop .22s ease}@keyframes seatPop{50%{transform:translateY(-2px) scale(1.015)}}
@media(max-width:1000px){:root{--sidebar-w:235px}.ddz-table{width:min(760px,80vw)}.seat[data-seat="1"]{left:-48px}.seat[data-seat="2"]{right:-48px}.hero-hand{max-width:calc(100vw - var(--sidebar-w) - 20px)}.replay-layout{grid-template-columns:1fr}.replay-side{display:none}.replay-table{width:82vw}}
@media(max-width:760px){:root{--sidebar-w:270px}.sidebar{position:fixed;left:0;top:0;transform:translateX(-102%);box-shadow:18px 0 50px rgba(0,0,0,.12)}.sidebar.open{transform:none}.mobile-close{display:grid!important}.menu-btn{display:grid}.topbar{padding:0 10px}.game-title small,.hand-no,.top-actions .icon-btn,.ai-engine-badge{display:none}.table-wrap{inset:20px 12px 165px}.ddz-table{width:88vw;height:52vh;min-height:365px}.seat{transform:scale(.88)}.seat[data-seat="0"]{transform:translateX(-50%) scale(.9);bottom:-57px}.seat[data-seat="1"]{left:-49px;top:72px}.seat[data-seat="2"]{right:-49px;top:72px}.hero-hand{bottom:70px;max-width:calc(100vw - 10px);padding:0 5px}.hero-hand .card{width:39px;height:58px;margin-left:-19px}.control-dock{width:calc(100vw - 20px);bottom:12px}.action-btn{height:46px}.feed-peek{display:none}.welcome-card{width:min(460px,calc(100vw - 22px));padding:20px}.welcome-grid{gap:5px}.content-sheet{width:100%}.replay-wrap{inset:16px 10px 74px}.replay-table{width:91vw;height:52vh}.replay-controls{width:calc(100% - 20px)}.speed-group .speed-btn:nth-child(1),.speed-group .speed-btn:nth-child(4),.speed-group .speed-btn:nth-child(5){display:none}}
@media(prefers-reduced-motion:reduce){.card.dealt,.action-cards.cards-enter .card,.speech,.thinking{animation:none!important}.seat-main,.card{transition:none!important}}
.activity-popover{position:absolute;right:18px;bottom:60px;width:310px;max-height:420px;background:rgba(255,255,255,.97);border:1px solid #e5e4df;border-radius:14px;box-shadow:0 16px 45px rgba(0,0,0,.10);z-index:30;backdrop-filter:blur(12px);overflow:hidden}.activity-head{height:42px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ecebe6}.activity-head b{font-size:11px}.activity-head button{width:27px;height:27px;border:0;background:#f2f2ef;border-radius:7px;cursor:pointer}.activity-body{max-height:320px;overflow:auto;padding:6px 12px}.activity-line{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #f0efeb;font-size:9px}.activity-line b{font-weight:600}.activity-line span{color:#88857e;text-align:right}.activity-foot{padding:9px 12px;background:#f7f7f4;color:#99968e;font-size:8px;line-height:1.45}
/* replay geometry tuned for the token-poker drawer proportions */
.replay-main{min-width:0;overflow:hidden}.replay-wrap{inset:26px 22px 86px}.replay-table{width:min(690px,calc(100% - 92px));height:min(430px,55vh);min-height:380px}.replay-table .seat[data-seat="1"]{left:-46px;top:92px}.replay-table .seat[data-seat="2"]{right:-46px;top:92px}.replay-table .opp-fan .card{width:23px;height:34px;margin-left:-15px}.replay-table .opp-fan .card .rank{font-size:7px}.replay-table .opp-fan .card .suit{font-size:6px}.replay-hero{bottom:-34px}.replay-hero .card{width:31px;height:46px;margin-left:-14px}.replay-controls{bottom:18px}
.replay-controls{z-index:30;background:rgba(255,255,255,.97);padding:6px;border:1px solid #e5e4df;border-radius:12px;box-shadow:0 7px 24px rgba(0,0,0,.055);backdrop-filter:blur(10px)}.replay-hero{bottom:-24px}
.replay-side>.replay-controls{position:relative;left:auto;bottom:auto;transform:none;width:auto;margin:10px 10px 4px;grid-template-columns:108px 1fr;grid-template-areas:"transport speed" "timeline timeline";flex:0 0 auto}.replay-side>.replay-controls .transport{grid-area:transport}.replay-side>.replay-controls .timeline{grid-area:timeline}.replay-side>.replay-controls .speed-group{grid-area:speed;justify-content:flex-end}.replay-side>.replay-controls .timeline-meta{text-align:left;padding-left:2px}

/* v0.4 — token-poker level table choreography */
.fan-slot{display:block;flex:0 0 auto;position:relative;z-index:var(--fan-z);transform:translateY(var(--fan-y)) rotate(var(--fan-r));transform-origin:50% 115%;transition:transform .16s ease}.hero-hand{align-items:flex-start;height:84px}.hero-hand .fan-slot{width:26px}.hero-hand .fan-slot .card{margin-left:0}.hero-hand.can-pick .fan-slot:hover{z-index:40}.hero-hand.can-pick .fan-slot:hover .card:not(.selected){transform:translateY(-7px);box-shadow:0 10px 24px rgba(0,0,0,.12)}.hero-hand .fan-slot:has(.card.selected){z-index:45}.hero-hand .fan-slot .card.selected{transform:translateY(-17px);box-shadow:0 0 0 2px rgba(16,163,127,.22),0 12px 28px rgba(0,0,0,.12)}
.opp-fan{align-items:flex-start;overflow:visible}.opp-fan .fan-slot{width:10px;transform-origin:50% 65px}.opp-fan .fan-slot .card{margin-left:0}.replay-hero{align-items:flex-start;height:56px}.replay-hero .fan-slot{width:16px;transform-origin:50% 80px}.replay-hero .fan-slot .card{margin-left:0}.replay-table .opp-fan .fan-slot{width:8px}.replay-table .opp-fan .fan-slot .card{margin-left:0}
.deck-shoe{position:absolute;left:50%;top:47%;width:42px;height:59px;z-index:12;transform:translate(-50%,-50%) rotate(-3deg);pointer-events:none;animation:deckFade 1.15s ease both}.deck-shoe i{position:absolute;inset:0;border-radius:7px;background:linear-gradient(135deg,#252524,#4a4a47);border:2px solid #fff;box-shadow:0 5px 15px rgba(0,0,0,.13),inset 0 0 0 1px rgba(255,255,255,.15)}.deck-shoe i:nth-child(2){transform:translate(-2px,-2px) rotate(-1deg)}.deck-shoe i:nth-child(3){transform:translate(-4px,-4px) rotate(-2deg)}.deck-shoe i:nth-child(4){transform:translate(-6px,-6px) rotate(-3deg)}
.hero-hand .fan-slot.dealing .card{animation:dealHero .56s cubic-bezier(.18,.78,.25,1) both;animation-delay:var(--deal-delay)}.seat[data-seat="1"] .fan-slot.dealing .card{animation:dealLeft .53s cubic-bezier(.18,.78,.25,1) both;animation-delay:var(--deal-delay)}.seat[data-seat="2"] .fan-slot.dealing .card{animation:dealRight .53s cubic-bezier(.18,.78,.25,1) both;animation-delay:var(--deal-delay)}
@keyframes deckFade{0%{opacity:0;transform:translate(-50%,-50%) scale(.88) rotate(-7deg)}18%,68%{opacity:.94;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.96) rotate(2deg)}}
@keyframes dealHero{0%{opacity:0;transform:translate(0,-210px) scale(.62) rotate(-10deg)}70%{opacity:1;transform:translate(0,3px) scale(1.025) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes dealLeft{0%{opacity:0;transform:translate(250px,105px) scale(.65) rotate(14deg)}72%{opacity:1;transform:translate(-2px,1px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes dealRight{0%{opacity:0;transform:translate(-250px,105px) scale(.65) rotate(-14deg)}72%{opacity:1;transform:translate(2px,1px) scale(1.02)}100%{opacity:1;transform:none}}
.kitty.kitty-reveal>span>.card.dealt{animation:kittyFlip .48s cubic-bezier(.2,.8,.3,1) both;animation-delay:var(--kitty-delay)}@keyframes kittyFlip{0%{opacity:0;transform:translateY(-12px) rotateY(90deg) scale(.86)}60%{opacity:1;transform:translateY(2px) rotateY(-7deg) scale(1.03)}100%{opacity:1;transform:none}}
.seat.landlord-reveal .seat-main{animation:landlordReveal .72s ease both}@keyframes landlordReveal{0%,100%{box-shadow:0 5px 20px rgba(0,0,0,.065)}45%{border-color:#d1b15b;box-shadow:0 0 0 5px rgba(194,160,76,.14),0 8px 25px rgba(0,0,0,.08)}}
.action-cards>span{display:block}.action-cards.play-from-0>span{animation:playFromHero .4s cubic-bezier(.18,.78,.25,1) both;animation-delay:var(--play-delay)}.action-cards.play-from-1>span{animation:playFromLeft .4s cubic-bezier(.18,.78,.25,1) both;animation-delay:var(--play-delay)}.action-cards.play-from-2>span{animation:playFromRight .4s cubic-bezier(.18,.78,.25,1) both;animation-delay:var(--play-delay)}
@keyframes playFromHero{0%{opacity:.1;transform:translateY(170px) scale(.83) rotate(-3deg)}75%{opacity:1;transform:translateY(-3px) scale(1.02)}100%{transform:none}}
@keyframes playFromLeft{0%{opacity:.1;transform:translate(-210px,-25px) scale(.83) rotate(-8deg)}75%{opacity:1;transform:translate(3px,0) scale(1.02)}100%{transform:none}}
@keyframes playFromRight{0%{opacity:.1;transform:translate(210px,-25px) scale(.83) rotate(8deg)}75%{opacity:1;transform:translate(-3px,0) scale(1.02)}100%{transform:none}}
.turn-effect{position:absolute;z-index:22;pointer-events:none;min-width:68px;text-align:center;background:rgba(255,255,255,.96);border:1px solid #e2e1dc;border-radius:11px;padding:7px 9px;box-shadow:0 9px 27px rgba(0,0,0,.09);animation:turnEffect 1.5s cubic-bezier(.2,.8,.3,1) both}.turn-effect b{display:block;font-size:12px}.turn-effect span{display:block;font-size:7px;color:#9a978f;letter-spacing:.11em;margin-top:2px}.effect-seat-0{left:50%;bottom:48px;transform:translateX(-50%)}.effect-seat-1{left:57px;top:172px}.effect-seat-2{right:57px;top:172px}.pass-effect{background:rgba(247,247,244,.96);color:#77746e}.pass-effect b{font-size:10px;letter-spacing:.11em}.bid-effect b{color:#4a4944}.bid-effect:has(b){border-color:#ddd8c8}
@keyframes turnEffect{0%{opacity:0;scale:.88;translate:0 8px}15%,68%{opacity:1;scale:1;translate:0 0}100%{opacity:0;scale:.98;translate:0 -8px}}
.impact-effect{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);z-index:24;width:150px;height:150px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;animation:impactLabel 1.55s ease both}.impact-effect:before,.impact-effect:after{content:"";position:absolute;border:1px solid rgba(177,145,67,.28);border-radius:50%;inset:18px;animation:impactRing 1.25s ease-out both}.impact-effect:after{inset:1px;animation-delay:.09s}.impact-effect small{font-size:7px;letter-spacing:.18em;color:#a68b4e}.impact-effect b{font-size:22px;letter-spacing:-.04em;margin:2px 0}.impact-effect span{font-size:9px;color:#77746d}.impact-effect.rocket{background:radial-gradient(circle,rgba(38,38,36,.08),rgba(255,255,255,0) 68%)}.impact-effect.rocket b{font-size:25px}.impact-effect.rocket:before,.impact-effect.rocket:after{border-color:rgba(39,39,37,.24)}.game-stage .ddz-table.table-impact{animation:tableImpact .5s cubic-bezier(.2,.8,.3,1)}
@keyframes impactLabel{0%{opacity:0;scale:.72}18%,62%{opacity:1;scale:1}100%{opacity:0;scale:1.06}}@keyframes impactRing{0%{opacity:.8;scale:.45}100%{opacity:0;scale:1.18}}@keyframes tableImpact{0%,100%{transform:none}24%{transform:translateX(-2px) rotate(-.13deg)}48%{transform:translateX(2px) rotate(.12deg)}72%{transform:translateX(-1px)}}
.thinking:before{display:none}.thinking{height:18px;bottom:-24px;display:flex;align-items:center;gap:3px;background:rgba(255,255,255,.9);border:1px solid #ebeae5;border-radius:999px;padding:0 6px;box-shadow:0 3px 10px rgba(0,0,0,.035)}.thinking i{display:block;width:3px;height:3px;border-radius:50%;background:#77756f;animation:thinkDot 1s ease-in-out infinite}.thinking i:nth-child(2){animation-delay:.12s}.thinking i:nth-child(3){animation-delay:.24s}.thinking em{font-size:7px;font-style:normal;color:#aaa79f;margin-left:2px;text-transform:uppercase;letter-spacing:.05em}@keyframes thinkDot{0%,70%,100%{opacity:.28;transform:translateY(0)}35%{opacity:1;transform:translateY(-2px)}}
.speech{animation:chatIn .24s cubic-bezier(.2,.8,.3,1) both;max-width:220px}.speech:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);pointer-events:none}
.hero-hud{transition:.16s}.hero-hand.can-pick~.control-dock .hero-hud{border-color:#d8e6e1;box-shadow:0 4px 16px rgba(16,163,127,.055)}
@media(max-width:1000px){.hero-hand .fan-slot{width:23px}.opp-fan .fan-slot{width:9px}.impact-effect{width:130px;height:130px}}
@media(max-width:760px){.hero-hand{height:72px}.hero-hand .fan-slot{width:19px;transform-origin:50% 95px}.hero-hand .fan-slot .card{width:39px;height:58px}.opp-fan .fan-slot{width:7px}.turn-effect{min-width:54px;padding:5px 7px}.effect-seat-1{left:28px;top:145px}.effect-seat-2{right:28px;top:145px}.impact-effect{width:112px;height:112px}.impact-effect b{font-size:18px}.thinking em{display:none}}
@media(prefers-reduced-motion:reduce){.fan-slot.dealing .card,.kitty.kitty-reveal .card,.action-cards>span,.turn-effect,.impact-effect,.impact-effect:before,.impact-effect:after,.ddz-table.table-impact,.seat.landlord-reveal .seat-main,.deck-shoe{animation:none!important}.deck-shoe{display:none}.fan-slot{transform:none!important}}
/* replay viewport anchor: keep the table optically centered regardless of drawer height */
.replay-wrap{left:50%;top:50%;right:auto;bottom:auto;inset:auto;width:calc(100% - 96px);height:auto;transform:translate(-50%,-50%);display:grid;place-items:center}.replay-table{width:min(690px,100%);height:min(430px,55vh);min-height:380px}
@media(max-width:760px){.replay-wrap{width:calc(100% - 24px);top:48%}.replay-table{width:100%;height:52vh;min-height:360px}}
/* replay grid must never inherit the intrinsic height of the history/trace column */
.replay-layout{grid-template-rows:minmax(0,1fr);overflow:hidden}.replay-main,.replay-side{height:100%;min-height:0;overflow:hidden}.replay-side{display:flex}.replay-list{min-height:0}.trace-panel{min-height:0}
.replay-wrap{inset:auto;left:50%;top:50%}
.action-btn kbd{font-size:8px;font-weight:550;line-height:1;border:1px solid rgba(0,0,0,.08);background:#f5f5f2;color:#9a978f;border-radius:5px;padding:3px 5px;box-shadow:0 1px 0 rgba(0,0,0,.04)}.action-btn.primary kbd{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.62)}.action-btn.danger kbd{color:#b84c4c;background:#fff8f7}
.replay-table .action-cards>span{animation-duration:var(--replay-motion,.4s)!important}.replay-fx{animation-duration:calc(var(--replay-motion,.4s) * 3.2)!important}.trace-selected{display:flex;align-items:center;gap:7px;border:1px solid #d9e7e2;background:#f3f8f6;border-radius:9px;padding:8px 9px;margin-bottom:10px}.trace-selected span{font-size:7px;font-weight:750;letter-spacing:.12em;color:#168166}.trace-selected b{font-size:10px;flex:1}.trace-selected small{font-size:7px;color:#918e87}.candidate.selected{border-color:#bcd8cf;background:#f1f7f5;box-shadow:inset 3px 0 0 #389b7e}.candidate.selected>b{color:#168166}

/* v0.5 — illustrated jokers, legal-combo helper, bidding rail, live trace, finish cinema */
.card.joker{padding:0;overflow:hidden;background:linear-gradient(160deg,#fff,#f8f7f2 72%,#f0efe9);isolation:isolate}
.card.joker:after{content:"";position:absolute;inset:4px;border:1px solid rgba(0,0,0,.045);border-radius:5px;pointer-events:none}
.joker-art{position:absolute;inset:4px;display:grid;place-items:center;color:#272725}
.joker-art svg{width:88%;height:88%;overflow:visible}.joker-art .joker-rays{fill:currentColor;opacity:.12}.joker-art .joker-crown{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round}.joker-art .joker-face{fill:rgba(255,255,255,.86);stroke:currentColor;stroke-width:2}.joker-art .joker-smile{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.joker-art .joker-tail{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.joker-art>i{position:absolute;width:5px;height:5px;border-radius:50%;right:4px;top:4px;background:currentColor;box-shadow:-8px 3px 0 -1px currentColor,2px 9px 0 -1px currentColor}
.card.red-joker .joker-art{color:#d34747}.card.red-joker{box-shadow:0 5px 15px rgba(184,56,56,.075)}.card.black-joker .joker-art{color:#272725}
.card.mini .joker-art{inset:2px}.card.mini .joker-art svg{width:92%;height:92%}.card.mini .joker-art>i{width:3px;height:3px;right:2px;top:2px;box-shadow:-5px 2px 0 -1px currentColor,1px 6px 0 -1px currentColor}
.hero-hand .card.joker{background:linear-gradient(160deg,#fff,#faf8f2)}

.combo-helper{height:34px;margin:0 auto 7px;max-width:680px;display:flex;align-items:center;gap:5px;padding:4px 6px;border:1px solid #e7e6e1;background:rgba(255,255,255,.94);border-radius:10px;box-shadow:0 4px 17px rgba(0,0,0,.035);overflow-x:auto;scrollbar-width:none}.combo-helper::-webkit-scrollbar{display:none}.combo-helper>span{font-size:8px;color:#9a978f;letter-spacing:.07em;white-space:nowrap;padding:0 4px}.combo-helper button{height:24px;flex:0 0 auto;border:0;background:#f3f3ef;border-radius:7px;padding:0 8px;display:flex;align-items:center;gap:5px;cursor:pointer;color:#5f5d57}.combo-helper button:hover{background:#e9eeeB;color:#245f50}.combo-helper b{font-size:9px;font-weight:620}.combo-helper small{font-size:7px;color:#9b9890}

.bidding-rail{position:absolute;left:50%;top:43px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;z-index:8;padding:4px;background:rgba(255,255,255,.88);border:1px solid #e9e8e3;border-radius:11px;box-shadow:0 4px 16px rgba(0,0,0,.035);backdrop-filter:blur(8px)}.bid-node{min-width:70px;height:31px;padding:4px 7px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:7px;color:#8f8c84;transition:.18s}.bid-node span{font-size:8px;max-width:43px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bid-node b{font-size:9px;font-weight:650}.bid-node.current{background:#eef6f3;color:#246b59;box-shadow:inset 0 0 0 1px #d8ebe5}.bid-node.current:after{content:"";width:5px;height:5px;border-radius:50%;background:#10a37f;animation:pulse 1s ease infinite}.bid-node.max{background:#f7f0df;color:#866719}

.seat[data-inspect-seat]{cursor:default}.game-stage.spectator-mode .seat[data-inspect-seat]{cursor:pointer}.seat.inspected .seat-main{border-color:#a6c8bd;box-shadow:0 0 0 3px rgba(16,163,127,.09),0 7px 22px rgba(0,0,0,.07)}
.live-trace-drawer{position:absolute;right:16px;top:16px;bottom:66px;width:320px;z-index:35;background:rgba(255,255,255,.97);border:1px solid #e4e3de;border-radius:16px;box-shadow:0 18px 55px rgba(0,0,0,.10);backdrop-filter:blur(14px);display:flex;flex-direction:column;overflow:hidden;animation:drawerIn .22s cubic-bezier(.2,.8,.3,1) both}.live-trace-head{min-height:58px;padding:10px 11px;border-bottom:1px solid #ecebe6;display:flex;align-items:center;justify-content:space-between}.live-trace-head>div{display:flex;align-items:center;gap:8px}.live-trace-head b{display:block;font-size:11px}.live-trace-head small{display:block;font-size:8px;color:#99968e;margin-top:2px}.live-trace-head button{width:29px;height:29px;border:0;background:#f3f3ef;border-radius:8px;cursor:pointer}.live-trace-body{padding:12px;overflow:auto;min-height:0}.live-trace-empty{padding:18px 14px;color:#99968e;font-size:10px;line-height:1.6}@keyframes drawerIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

.winner-seat .seat-main{border-color:#cbb36e;box-shadow:0 0 0 4px rgba(194,160,76,.11),0 8px 25px rgba(0,0,0,.08);animation:winnerSeat 1.8s ease-in-out infinite}.winner-seat .avatar{box-shadow:0 0 0 2px rgba(194,160,76,.18),inset 0 0 0 1px rgba(255,255,255,.25)}@keyframes winnerSeat{0%,100%{transform:none}50%{transform:translateY(-2px)}}
.result-cinema{position:absolute;inset:0;z-index:24;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.62),rgba(255,255,255,0) 55%);animation:resultFade .34s ease both}.result-cinema .result-banner{position:relative;left:auto;top:auto;transform:none;pointer-events:auto;animation:resultRise .42s cubic-bezier(.2,.8,.3,1) both}.result-cinema .result-banner em{display:inline-flex;margin:3px auto 0;padding:4px 7px;border-radius:999px;background:#f3e9cb;color:#89691c;font-size:9px;font-style:normal;font-weight:700}.result-halo{position:absolute;width:380px;height:380px;border-radius:50%;border:1px solid rgba(194,160,76,.16);animation:resultHalo 2s ease-out infinite}.result-halo:after{content:"";position:absolute;inset:35px;border:1px solid rgba(194,160,76,.12);border-radius:50%}@keyframes resultFade{from{opacity:0}to{opacity:1}}@keyframes resultRise{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}@keyframes resultHalo{0%{opacity:.65;scale:.72}100%{opacity:0;scale:1.12}}

@media(max-width:1000px){.live-trace-drawer{width:285px}.bidding-rail{top:39px}.bid-node{min-width:60px}.combo-helper{max-width:610px}}
@media(max-width:760px){.card.joker .joker-art{inset:3px}.combo-helper{height:32px;width:100%;margin-bottom:5px}.combo-helper button{height:23px;padding:0 6px}.bidding-rail{top:38px;gap:2px}.bid-node{min-width:51px;height:28px;padding:3px 5px}.bid-node span{max-width:30px}.live-trace-drawer{left:8px;right:8px;top:auto;bottom:68px;width:auto;max-height:48vh}.result-halo{width:290px;height:290px}}
@media(prefers-reduced-motion:reduce){.bid-node.current:after,.winner-seat .seat-main,.result-cinema,.result-cinema .result-banner,.result-halo,.live-trace-drawer{animation:none!important}}
.lang-toggle{height:30px;min-width:38px;border:1px solid #dddcd7;background:#fff;border-radius:8px;padding:0 9px;font-size:10px;font-weight:650;letter-spacing:.04em;cursor:pointer;color:#55534e}.lang-toggle:hover{background:#f4f4f1}.lang-toggle:focus-visible{outline:2px solid rgba(16,163,127,.28);outline-offset:2px}@media(max-width:760px){.lang-toggle{display:inline-flex;align-items:center;justify-content:center}.top-actions{gap:3px}}

/* v0.6.2 — Tencent-style descending hand order + unmistakable turn focus */
/* Reserve an independent hand lane above the complete control dock. */
.table-wrap{inset:30px 36px 220px}
.hero-hand{bottom:154px;height:88px;z-index:14}
.control-dock{bottom:16px;z-index:20}
.combo-helper{margin-bottom:7px}
/* Selection never changes horizontal order: only lift the card in its original slot. */
.hero-hand .fan-slot:has(.card.selected){z-index:45}
.hero-hand .fan-slot .card.selected{transform:translateY(-16px)!important}
/* Make the acting seat impossible to miss without turning the table into a casino UI. */
.seat.active{z-index:18}
.seat.active .seat-main{border-color:#20a07e;box-shadow:0 0 0 4px rgba(16,163,127,.13),0 0 30px rgba(16,163,127,.16),0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px) scale(1.025)}
.seat.active .avatar{box-shadow:0 0 0 3px rgba(16,163,127,.16),inset 0 0 0 1px rgba(255,255,255,.28)}
.seat.active:after{content:"";position:absolute;inset:-8px -10px auto;height:70px;border:1px solid rgba(16,163,127,.22);border-radius:23px;pointer-events:none;animation:turnHalo 1.5s ease-in-out infinite}
.turn-chip{position:absolute;left:50%;top:-31px;transform:translateX(-50%);height:23px;padding:0 9px;border-radius:999px;background:#182c27;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;gap:5px;white-space:nowrap;box-shadow:0 6px 18px rgba(16,92,72,.18);z-index:21;animation:turnChipIn .2s ease both}
.turn-chip i,.turn-round i{width:6px;height:6px;border-radius:50%;background:#31d0a2;box-shadow:0 0 0 3px rgba(49,208,162,.13);animation:turnDot 1.1s ease-in-out infinite}
.seat[data-seat="1"] .turn-chip{left:72px;top:-28px}.seat[data-seat="2"] .turn-chip{left:auto;right:72px;top:-28px;transform:none}
.turn-round{display:flex;align-items:center;gap:7px;border-color:#d5e8e2;color:#315f53;background:rgba(248,253,251,.94);font-weight:650}
@keyframes turnHalo{0%,100%{opacity:.45;transform:scale(.985)}50%{opacity:1;transform:scale(1.02)}}
@keyframes turnDot{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.08)}}
@keyframes turnChipIn{from{opacity:0;transform:translateX(-50%) translateY(5px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* A slightly flatter fan reads more like Tencent DDZ and keeps 17/20 cards legible. */
.hero-hand .fan-slot{width:29px}
@media(max-width:1000px){.table-wrap{inset:26px 24px 214px}.hero-hand{bottom:150px}.hero-hand .fan-slot{width:25px}}
@media(max-width:760px){.table-wrap{inset:18px 10px 205px}.hero-hand{bottom:142px;height:76px}.hero-hand .fan-slot{width:20px}.control-dock{bottom:10px}.turn-chip{top:-27px;height:21px;font-size:8px}.seat[data-seat="1"] .turn-chip,.seat[data-seat="2"] .turn-chip{top:-24px}.seat.active:after{height:64px}}
@media(prefers-reduced-motion:reduce){.seat.active:after,.turn-chip i,.turn-round i{animation:none!important}}
/* Short desktop windows (common when browser devtools/taskbars consume height). */
@media (max-height:620px) and (min-width:761px){
  .table-wrap{inset:8px 34px 178px}
  .ddz-table{height:300px;min-height:300px;width:min(800px,76vw)}
  .seat[data-seat="0"]{bottom:-42px}
  .seat[data-seat="1"],.seat[data-seat="2"]{top:68px}
  .seat[data-seat="1"]{left:-50px}.seat[data-seat="2"]{right:-50px}
  .table-center{top:46%}.kitty{top:48px}.table-caption{top:11px}
  .hero-hand{bottom:132px;height:72px}
  .hero-hand .fan-slot{width:27px;transform-origin:50% 92px}
  .hero-hand .fan-slot .card{width:43px;height:62px}
  .control-dock{bottom:8px}
  .hero-hud{height:21px;margin-bottom:5px}
  .combo-helper{height:30px;margin-bottom:5px}.combo-helper button{height:22px}
  .action-btn,.waiting-row{height:42px}
  .round-label{margin-bottom:7px}.action-cards{min-height:62px}.action-cards .card{width:42px;height:60px}
  .turn-chip{top:-25px;height:20px;font-size:8px}
  .seat.active:after{height:62px;inset:-6px -8px auto}
}


/* v0.6.3 — explicit tested viewport profiles. We intentionally do not try to
   stretch the game table into every possible browser shape. */
.viewport-guard{position:fixed;inset:0;z-index:1000;display:none;place-items:center;background:rgba(248,248,245,.96);backdrop-filter:blur(18px);padding:24px}.viewport-guard.show{display:grid}.viewport-guard-card{width:min(520px,calc(100vw - 32px));background:#fff;border:1px solid #e5e4df;border-radius:20px;box-shadow:0 22px 80px rgba(0,0,0,.10);padding:26px;text-align:center}.viewport-guard-mark{width:46px;height:46px;border-radius:14px;background:#222;color:#fff;display:grid;place-items:center;margin:0 auto 13px;font-size:11px;font-weight:800;letter-spacing:.08em}.viewport-guard-card>small{font-size:8px;letter-spacing:.16em;color:#99968e;font-weight:750}.viewport-guard-card h2{font-size:20px;margin:5px 0 8px}.viewport-guard-card p{font-size:11px;line-height:1.65;color:#77756f;margin:0 auto 13px;max-width:400px}.viewport-presets{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:0 auto 12px}.viewport-presets span{font-size:8px;color:#65635d;background:#f3f3ef;border-radius:999px;padding:5px 8px}.viewport-guard-card>b{display:block;font-size:10px;color:#3e7567}

/* Large/standard desktop: persistent 268px sidebar and full table hierarchy. */
body[data-viewport="desktop"] .table-wrap{inset:30px 36px 220px}
body[data-viewport="desktop"] .hero-hand{bottom:154px}
body[data-viewport="desktop"] .control-dock{bottom:16px}

/* Half-screen desktop: reclaim the sidebar width and use a compact full-height table.
   This covers common 720×900 and 960×1080 split-screen windows. */
body[data-viewport="half"]{--sidebar-w:0px}
body[data-viewport="half"] .sidebar{position:fixed;left:0;top:0;width:268px;transform:translateX(-102%);box-shadow:18px 0 50px rgba(0,0,0,.12)}
body[data-viewport="half"] .sidebar.open{transform:none}
body[data-viewport="half"] .mobile-close{display:grid!important}
body[data-viewport="half"] .menu-btn{display:grid}
body[data-viewport="half"] .topbar{height:54px;padding:0 12px}
body[data-viewport="half"] .game-title small,body[data-viewport="half"] .hand-no,body[data-viewport="half"] .ai-engine-badge{display:none}
body[data-viewport="half"] .table-wrap{inset:20px 28px 226px}
body[data-viewport="half"] .ddz-table{width:min(760px,calc(100vw - 92px));height:min(500px,54vh);min-height:380px}
body[data-viewport="half"] .seat[data-seat="1"]{left:-46px;top:88px}
body[data-viewport="half"] .seat[data-seat="2"]{right:-46px;top:88px}
body[data-viewport="half"] .seat[data-seat="0"]{bottom:-54px}
body[data-viewport="half"] .hero-hand{bottom:151px;height:82px;max-width:calc(100vw - 24px);padding:0 12px}
body[data-viewport="half"] .hero-hand .fan-slot{width:24px}
body[data-viewport="half"] .hero-hand .fan-slot .card{width:44px;height:64px}
body[data-viewport="half"] .control-dock{width:min(680px,calc(100vw - 24px));bottom:12px}
body[data-viewport="half"] .combo-helper{max-width:100%}
body[data-viewport="half"] .feed-peek{display:none}
body[data-viewport="half"] .live-trace-drawer{left:12px;right:12px;top:auto;bottom:72px;width:auto;max-height:48vh}
body[data-viewport="half"] .content-sheet{width:min(455px,100vw)}
body[data-viewport="half"] .replay-layout{grid-template-columns:1fr}
body[data-viewport="half"] .replay-main{grid-column:1;grid-row:1}
body[data-viewport="half"] .replay-wrap{width:calc(100% - 72px);top:43%}
body[data-viewport="half"] .replay-table{width:min(690px,100%);height:min(430px,51vh);min-height:360px}
body[data-viewport="half"] .replay-side{position:absolute;left:10px;right:10px;bottom:8px;height:auto;border:0;background:transparent;display:block;pointer-events:none;z-index:30}
body[data-viewport="half"] .replay-side-head,body[data-viewport="half"] .replay-list,body[data-viewport="half"] .trace-panel{display:none}
body[data-viewport="half"] .replay-side>.replay-controls{pointer-events:auto;margin:0 auto;width:min(680px,100%);background:rgba(255,255,255,.97)}

/* Mainstream iPhone portrait widths: 375/390/393/430 class devices. */
body[data-viewport="iphone"]{--sidebar-w:0px}
body[data-viewport="iphone"] .sidebar{position:fixed;left:0;top:0;width:min(286px,82vw);transform:translateX(-102%);box-shadow:18px 0 50px rgba(0,0,0,.12)}
body[data-viewport="iphone"] .sidebar.open{transform:none}
body[data-viewport="iphone"] .mobile-close{display:grid!important}
body[data-viewport="iphone"] .menu-btn{display:grid}
body[data-viewport="iphone"] .topbar{height:50px;padding:0 max(8px,env(safe-area-inset-left))}
body[data-viewport="iphone"] .game-title{min-width:0;max-width:190px}
body[data-viewport="iphone"] .game-title>span:first-child{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-viewport="iphone"] .game-title small,body[data-viewport="iphone"] .hand-no,body[data-viewport="iphone"] .top-actions .icon-btn,body[data-viewport="iphone"] .ai-engine-badge,body[data-viewport="iphone"] .leave-btn{display:none}
body[data-viewport="iphone"] .table-wrap{inset:10px 8px 218px}
body[data-viewport="iphone"] .ddz-table{width:calc(100vw - 42px);height:min(430px,50vh);min-height:330px;border-radius:44% / 43%}
body[data-viewport="iphone"] .table-caption{top:9px;font-size:7px;max-width:72%;overflow:hidden;text-overflow:ellipsis}
body[data-viewport="iphone"] .bidding-rail{top:30px;gap:1px;padding:3px}
body[data-viewport="iphone"] .bid-node{min-width:48px;height:27px;padding:2px 4px}
body[data-viewport="iphone"] .bid-node span{max-width:27px}
body[data-viewport="iphone"] .kitty{top:57px}
body[data-viewport="iphone"] .table-center{top:47%;width:70%}
body[data-viewport="iphone"] .round-label{font-size:8px;padding:4px 7px;margin-bottom:7px}
body[data-viewport="iphone"] .action-cards{min-height:58px;gap:2px}
body[data-viewport="iphone"] .action-cards .card{width:36px;height:52px;padding:4px}
body[data-viewport="iphone"] .seat{min-width:104px;transform:scale(.78)}
body[data-viewport="iphone"] .seat[data-seat="0"]{bottom:-48px;transform:translateX(-50%) scale(.8)}
body[data-viewport="iphone"] .seat[data-seat="1"]{left:-45px;top:68px}
body[data-viewport="iphone"] .seat[data-seat="2"]{right:-45px;top:68px}
body[data-viewport="iphone"] .seat-main{min-width:112px}
body[data-viewport="iphone"] .speech{max-width:150px}
body[data-viewport="iphone"] .hero-hand{bottom:143px;height:70px;max-width:100vw;padding:0 3px}
body[data-viewport="iphone"] .hero-hand .fan-slot{width:16px;transform-origin:50% 92px}
body[data-viewport="iphone"] .hero-hand .fan-slot .card{width:37px;height:56px;border-radius:6px;padding:4px}
body[data-viewport="iphone"] .hero-hand .card .rank{font-size:14px}
body[data-viewport="iphone"] .hero-hand .card .suit{font-size:12px}
body[data-viewport="iphone"] .control-dock{width:calc(100vw - 12px);bottom:max(6px,env(safe-area-inset-bottom))}
body[data-viewport="iphone"] .hero-hud{height:21px;max-width:calc(100vw - 14px);gap:4px;padding:0 6px;font-size:7px;overflow:hidden;white-space:nowrap}
body[data-viewport="iphone"] .hero-hud span:nth-of-type(3),body[data-viewport="iphone"] .hero-hud span:nth-of-type(3)+i{display:none}
body[data-viewport="iphone"] .combo-helper{height:29px;width:100%;margin-bottom:4px;padding:3px 4px}
body[data-viewport="iphone"] .combo-helper>span{font-size:7px}
body[data-viewport="iphone"] .combo-helper button{height:21px;padding:0 6px}
body[data-viewport="iphone"] .action-row{gap:4px}
body[data-viewport="iphone"] .action-btn,body[data-viewport="iphone"] .waiting-row{height:42px;border-radius:10px;font-size:11px;gap:5px}
body[data-viewport="iphone"] .action-btn kbd{display:none}
body[data-viewport="iphone"] .turn-chip{top:-24px;height:19px;padding:0 7px;font-size:7px}
body[data-viewport="iphone"] .seat[data-seat="1"] .turn-chip,body[data-viewport="iphone"] .seat[data-seat="2"] .turn-chip{top:-21px}
body[data-viewport="iphone"] .feed-peek{display:none}
body[data-viewport="iphone"] .activity-popover{left:7px;right:7px;bottom:64px;width:auto;max-height:48vh}
body[data-viewport="iphone"] .live-trace-drawer{left:7px;right:7px;top:auto;bottom:64px;width:auto;max-height:52vh}
body[data-viewport="iphone"] .welcome-card{width:calc(100vw - 20px);padding:18px 14px;border-radius:16px}
body[data-viewport="iphone"] .welcome-card h1{font-size:19px}
body[data-viewport="iphone"] .welcome-card>p{font-size:11px;margin-bottom:12px}
body[data-viewport="iphone"] .welcome-grid{gap:4px;margin-bottom:10px}
body[data-viewport="iphone"] .welcome-grid div{padding:8px 4px}
body[data-viewport="iphone"] .setup-fields,body[data-viewport="iphone"] .setup-fields.three{grid-template-columns:1fr}
body[data-viewport="iphone"] .content-sheet{width:100%}
body[data-viewport="iphone"] .replay-layout{grid-template-columns:1fr}
body[data-viewport="iphone"] .replay-main{grid-column:1;grid-row:1}
body[data-viewport="iphone"] .replay-wrap{width:calc(100% - 18px);top:42%}
body[data-viewport="iphone"] .replay-table{width:100%;height:min(430px,50vh);min-height:330px}
body[data-viewport="iphone"] .replay-table .seat[data-seat="1"]{left:-38px;top:68px}
body[data-viewport="iphone"] .replay-table .seat[data-seat="2"]{right:-38px;top:68px}
body[data-viewport="iphone"] .replay-side{position:absolute;left:6px;right:6px;bottom:max(5px,env(safe-area-inset-bottom));height:auto;border:0;background:transparent;display:block;pointer-events:none;z-index:30}
body[data-viewport="iphone"] .replay-side-head,body[data-viewport="iphone"] .replay-list,body[data-viewport="iphone"] .trace-panel{display:none}
body[data-viewport="iphone"] .replay-side>.replay-controls{pointer-events:auto;margin:0;width:100%;grid-template-columns:100px 1fr;grid-template-areas:"transport speed" "timeline timeline";padding:5px}
body[data-viewport="iphone"] .speed-group .speed-btn:nth-child(1),body[data-viewport="iphone"] .speed-group .speed-btn:nth-child(4),body[data-viewport="iphone"] .speed-group .speed-btn:nth-child(5){display:none}

@media(prefers-reduced-motion:reduce){.viewport-guard{backdrop-filter:none}}

/* Final per-profile optical corrections after screenshot review. */
@media (max-width:1500px) and (min-width:1180px) and (min-height:620px){
  body[data-viewport="desktop"] .seat[data-seat="0"]{bottom:10px}
}
@media (max-width:799px) and (min-width:700px) and (min-height:700px){
  body[data-viewport="half"] .seat[data-seat="1"]{left:-24px}
  body[data-viewport="half"] .seat[data-seat="2"]{right:-24px}
}
body[data-viewport="iphone"] .seat[data-seat="1"]{left:-24px}
body[data-viewport="iphone"] .seat[data-seat="2"]{right:-24px}

/* iPhone replay: keep both opponent cards and active halos fully inside viewport. */
body[data-viewport="iphone"] .replay-table .seat[data-seat="1"]{left:-10px}
body[data-viewport="iphone"] .replay-table .seat[data-seat="2"]{right:-10px}

/* v0.7 mixed-controller lobby */
.agent-setup-card{width:min(720px,calc(100vw - 32px));padding:22px 26px}
.agent-setup-card>p{margin-bottom:12px}
.agent-setup-card .welcome-grid{margin-bottom:10px}
.seat-config-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;text-align:left}
.seat-config-card{border:1px solid #e5e4df;background:#fafaf8;border-radius:11px;padding:8px;min-width:0}
.seat-config-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;color:#77756f;font-size:9px;font-weight:650}
.agent-kind-badge{font-size:7px;letter-spacing:.08em;border-radius:999px;padding:3px 6px;background:#ecece8;color:#6f6d66}
.agent-kind-badge.kind-llm{background:#eaf5f1;color:#16765d}.agent-kind-badge.kind-douzero{background:#f1ecfb;color:#66509b}.agent-kind-badge.kind-human{background:#f5eee5;color:#8d6536}
.seat-config-fields{display:grid;grid-template-columns:1fr;gap:5px}
.seat-config-fields select,.seat-config-fields input{height:31px;min-width:0;width:100%;border:1px solid #deddd8;background:#fff;border-radius:7px;padding:0 7px;font-size:9px;color:#393834}
.seat-config-fields select:disabled{background:#f0f0ed;color:#a3a19a;opacity:1}
.setup-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:7px 0 0;padding:6px 9px;border-radius:8px;background:#f7f7f4;color:#99968f;font-size:8px;text-align:left}
.setup-summary b{color:#66645e;font-size:8px;font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat-model{font-size:8px;font-weight:700}.seat-model.model-douzero{color:#7159a7}.seat-model.model-llm{color:#168166}.seat-model.model-human{color:#9a6b34}

body[data-viewport="half"] .agent-setup-card{width:min(690px,calc(100vw - 24px));padding:18px 20px}
body[data-viewport="iphone"] .agent-setup-card{width:calc(100vw - 16px);padding:13px 11px;top:50%}
body[data-viewport="iphone"] .agent-setup-card .welcome-mark{width:36px;height:36px;margin-bottom:8px;border-radius:10px}
body[data-viewport="iphone"] .agent-setup-card>p{font-size:10px;line-height:1.45;margin-bottom:8px}
body[data-viewport="iphone"] .agent-setup-card .welcome-grid{display:none}
body[data-viewport="iphone"] .agent-setup-card .mode-switch{margin-bottom:6px}
body[data-viewport="iphone"] .seat-config-list{grid-template-columns:1fr;gap:4px}
body[data-viewport="iphone"] .seat-config-card{padding:6px 7px}
body[data-viewport="iphone"] .seat-config-head{margin-bottom:4px}
body[data-viewport="iphone"] .seat-config-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
body[data-viewport="iphone"] .seat-config-fields select,body[data-viewport="iphone"] .seat-config-fields input{height:28px;padding:0 4px;font-size:8px}
body[data-viewport="iphone"] .setup-summary{margin-top:5px;padding:5px 7px}
body[data-viewport="iphone"] .agent-setup-card .budget-line{margin:5px 0;padding:5px 7px}
body[data-viewport="iphone"] .agent-setup-card .welcome-start{height:37px}

/* v0.7.2 mobile shell: pin the runtime footer inside the visible dynamic viewport. */
html,body,.app-shell{height:100%;height:100dvh;min-height:0}
.sidebar{height:100%;height:100dvh;max-height:100dvh;overflow:hidden;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.sidebar-top{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;overflow:hidden;scrollbar-width:thin}
.sidebar-bottom{flex:0 0 auto;position:relative;z-index:2;background:var(--sidebar);padding-bottom:max(0px,env(safe-area-inset-bottom))}
body[data-viewport="iphone"] .sidebar{top:0;bottom:0;height:auto;min-height:100dvh;max-height:100dvh;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
body[data-viewport="iphone"] .sidebar-top{padding-bottom:8px}
.sidebar-top>.brand-row,.sidebar-top>.primary-nav,.sidebar-top>.nav-divider,.sidebar-top>.sidebar-section-title,.sidebar-top>.table-list{flex:0 0 auto}
.sidebar-top>.recent-hands{flex:1 1 auto;min-height:0}

/* v0.7.4 trick memory: keep every seat's latest action visible until the trick closes. */
.trick-history{position:absolute;inset:0;z-index:5;pointer-events:none}
.trick-action{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;max-width:42%;min-width:38px;filter:drop-shadow(0 4px 9px rgba(0,0,0,.035))}
.trick-seat-0{left:50%;bottom:72px;transform:translateX(-50%)}
.trick-seat-1{left:22%;top:53%;transform:translate(-50%,-50%)}
.trick-seat-2{right:22%;top:53%;transform:translate(50%,-50%)}
.trick-cards{display:flex;align-items:center;justify-content:center;max-width:100%;min-height:48px}
.trick-cards>span{display:block;flex:0 0 auto;margin-left:var(--trick-overlap,-10px)}
.trick-cards>span:first-child{margin-left:0}
.trick-cards .card.mini{box-shadow:0 4px 12px rgba(0,0,0,.075)}
.trick-meta{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7px;line-height:1.2;color:#918e87;background:rgba(255,255,255,.82);border-radius:999px;padding:2px 6px;backdrop-filter:blur(5px)}
.trick-pass-chip{height:24px;display:inline-flex;align-items:center;padding:0 9px;border:1px solid #e2e1dc;border-radius:999px;background:rgba(247,247,244,.94);color:#88857e;font-size:9px;font-weight:650;letter-spacing:.06em;box-shadow:0 4px 12px rgba(0,0,0,.04)}
.trick-action.recent .trick-cards>span{animation:trickCardIn .24s cubic-bezier(.2,.8,.3,1) both;animation-delay:var(--trick-delay)}
.trick-action.recent .trick-pass-chip{animation:trickPassIn .24s ease both}
.trick-center-space{min-height:62px}
@keyframes trickCardIn{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@keyframes trickPassIn{from{opacity:0;transform:translateY(5px) scale(.94)}to{opacity:1;transform:none}}
body[data-viewport="half"] .trick-seat-1{left:24%}
body[data-viewport="half"] .trick-seat-2{right:24%}
body[data-viewport="iphone"] .trick-seat-0{bottom:62px}
body[data-viewport="iphone"] .trick-seat-1{left:26%;top:54%}
body[data-viewport="iphone"] .trick-seat-2{right:26%;top:54%}
body[data-viewport="iphone"] .trick-action{max-width:46%}
body[data-viewport="iphone"] .trick-cards{min-height:40px}
body[data-viewport="iphone"] .trick-cards .card.mini{width:28px;height:40px;padding:3px;border-radius:5px}
body[data-viewport="iphone"] .trick-cards .card.mini .rank{font-size:11px}
body[data-viewport="iphone"] .trick-cards .card.mini .suit{font-size:9px}
body[data-viewport="iphone"] .trick-meta{max-width:108px;font-size:6px;padding:2px 5px}
body[data-viewport="iphone"] .trick-pass-chip{height:21px;padding:0 7px;font-size:8px}
body[data-viewport="iphone"] .trick-center-space{min-height:48px}
@media(prefers-reduced-motion:reduce){.trick-action.recent .trick-cards>span,.trick-action.recent .trick-pass-chip{animation:none!important}}

/* v0.7.5: PASS keeps the seat's latest actual cards as a dimmed memory cue. */
.trick-action.pass-with-history{gap:2px}
.trick-action.pass-with-history .previous-cards{opacity:.42;filter:saturate(.55);transform:scale(.92);transform-origin:center bottom}
.trick-action.pass-with-history .trick-pass-chip{position:relative;z-index:2;margin-top:-7px;background:rgba(247,247,244,.97)}
.trick-action.pass-with-history .previous-meta{opacity:.72}
body[data-viewport="iphone"] .trick-action.pass-with-history .trick-pass-chip{margin-top:-6px}