.card-mode-picker{display:flex;gap:9px;max-width:1100px;margin:0 auto 18px}.card-mode-picker button{display:grid;gap:3px;text-align:left;flex:1;padding:11px 14px;border:2px solid #c5aa76;background:#f6e9ca;color:#715b3e;box-shadow:2px 3px #d9c296;font-weight:800}.card-mode-picker button>span{font-size:19px;color:#617e52}.card-mode-picker button>b{font-size:13px}.card-mode-picker button small{font-size:11px;font-weight:400;color:#876e4c}.card-mode-picker button.active{border-color:#5d805a;background:#e7edce;box-shadow:2px 3px #9bad7c}.card-mode-picker button:focus-visible{outline:3px solid #de7a44;outline-offset:3px}
.tl-lobby{min-height:365px;max-width:1000px;margin:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px 20px;background:repeating-linear-gradient(90deg,#edf0d4 0 24px,#e8eccf 24px 48px);border:3px solid #bca16b;color:#765f42}.tl-lobby-suits{font:700 46px Georgia,serif;letter-spacing:5px;color:#324839}.tl-lobby-suits i{font-style:normal;color:#bb5249}.tl-lobby h2{margin:14px 0 8px;font-size:26px}.tl-lobby p{max-width:490px;font-size:13px;line-height:1.65;margin-bottom:14px}.tl-lobby label{display:flex;align-items:center;gap:9px;margin:8px 0 14px}.tl-lobby select{border:1px solid #b59a6d;background:#fff9e9;min-height:38px;min-width:75px;padding:7px}.tl-lobby .primary{min-height:44px;min-width:145px}.tl-lobby #tl-lobby-status{font-size:12px;max-width:480px;margin:16px 0 0}
.tl-game{max-width:1100px;margin:auto}.tl-felt{padding:18px 24px 17px;background:radial-gradient(ellipse at 50% 30%,#658767,#3c604d 90%);border:9px solid #a47b4c;outline:2px solid #785835;box-shadow:inset 0 0 0 3px #8aa16b,3px 5px #ddc699;border-radius:9px;color:#f8efd6}.tl-players{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-width:750px;margin:auto}.tl-player{display:grid;gap:5px;text-align:center;background:#e8dcbb;color:#715f42;padding:10px 9px;border:2px solid #a58854;box-shadow:2px 3px #2e4935;min-width:0;border-radius:3px}.tl-player b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tl-player span{font-size:11px}.tl-player small{font-size:10px;min-height:12px;color:#8b7252;font-weight:700}.tl-player.turn{outline:3px solid #f4cc69;outline-offset:1px;background:#fbefc8}.tl-player.turn small{color:#88632e}.tl-player.mine b::after{content:' ●';color:#528256}.tl-turn{display:flex;justify-content:center;align-items:center;gap:12px;margin:17px 0 0;font-size:13px;text-align:center;min-height:28px}.tl-turn span{background:#274c3f;padding:5px 8px;border:1px solid #93a780;color:#eadfbb;font-size:11px;white-space:nowrap}.tl-turn span:empty{display:none}.tl-center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:179px;padding:9px 0 12px;gap:7px}.tl-center>small{font-size:10px;letter-spacing:1px;color:#dce2c2;text-align:center;font-weight:700}.tl-top{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:100%;min-height:97px;align-items:center}.tl-top .tl-card{width:55px;height:80px;flex:0 0 55px;box-shadow:2px 3px #264231;border-color:#fff4d8}.tl-top .tl-card .tl-card-corner{font-size:11px}.tl-top .tl-card .tl-card-symbol{font-size:31px}.tl-empty-trick{display:grid;place-items:center;min-height:90px;font:34px Georgia,serif;color:#aab795;letter-spacing:10px;opacity:.65}.tl-center>p{font-size:11px;text-align:center;color:#dde4c4;margin:0;min-height:16px;line-height:1.5}.tl-hand-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:10px;border-top:1px solid #9db084;padding:11px 0 2px;letter-spacing:.8px;color:#e3e5c6}.tl-hand-heading>small{font-size:11px;letter-spacing:0;text-align:right;color:#d1ddbd}
.tl-hand{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:7px;padding:16px 1px 7px;width:100%;max-width:980px;margin:auto;align-items:start}.tl-card{display:block;position:relative;width:100%;aspect-ratio:5/7;border:2px solid #eadfc6;background:#fffbec;color:#253b34;border-radius:5px;padding:0;font-family:"Segoe UI",Arial,sans-serif;box-shadow:3px 4px #263f30;min-width:0;touch-action:manipulation}.tl-card.red{color:#b63d37}.tl-card-corner{position:absolute;left:4px;top:4px;font-size:13px;font-weight:800;letter-spacing:-.5px;line-height:1}.tl-card-corner.bottom{left:auto;top:auto;right:4px;bottom:4px;transform:rotate(180deg)}.tl-card-symbol{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(23px,3.7vw,44px);line-height:1;pointer-events:none}.tl-hand .tl-card{cursor:pointer;min-height:80px;max-height:126px}.tl-hand .tl-card:hover:not(:disabled){border-color:#efc475}.tl-hand .tl-card.selected{transform:translateY(-10px);border-color:#f4ce76;outline:3px solid #f4ce76;outline-offset:1px;box-shadow:3px 9px #294435}.tl-hand .tl-card.selected::after{content:'✓';position:absolute;right:-6px;top:-8px;background:#f4ce76;color:#314b38;border:1px solid #e1b760;width:17px;height:17px;border-radius:50%;font-size:12px;font-weight:900;display:grid;place-items:center}.tl-hand .tl-card.opening:not(.selected){outline:2px dashed #e8c979;outline-offset:1px}.tl-card:disabled{cursor:default;opacity:.7}.tl-card:focus-visible{outline:3px solid #f1b863;outline-offset:3px}.tl-actions{position:sticky;bottom:0;z-index:3;background:#fff3d8f5;padding:10px 14px 12px;margin-top:12px;border-top:1px solid #c4ad80;box-shadow:0 -3px 14px #7753281c}.tl-actions>p{font-size:12px;line-height:1.5;text-align:center;color:#775f41;min-height:18px;margin:0 0 9px}.tl-actions>p.legal{color:#487044;font-weight:700}.tl-actions .error,.tl-lobby .error{color:#a84c34}.tl-action-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.tl-action-buttons>button{min-height:43px;padding:9px 18px;background:#efe1bd;color:#715638;border:1px solid #b69b6a;border-radius:2px;font-size:12px;font-weight:800}.tl-action-buttons>button.primary{background:#e46c40;border:2px solid #543a27;color:#fff8ed;box-shadow:2px 3px #94734f;min-width:147px}.tl-action-buttons>button:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.tl-action-buttons>button:focus-visible{outline:3px solid #77945e;outline-offset:3px}.tl-rules{max-width:1000px;margin:17px auto 5px;padding:12px 14px;background:#f2e8ce;border:1px solid #cbb78a;color:#806749;font-size:12px;line-height:1.7}.tl-rules summary{font-weight:800;cursor:pointer}.tl-rules p{margin:11px 0 0}.tl-top [hidden],.tl-actions [hidden],.tl-game[hidden],.tl-lobby[hidden]{display:none!important}
@media(max-width:900px){.card-mode-picker{gap:7px;margin-bottom:14px}.card-mode-picker button{font-size:12px;padding:10px 9px}.card-mode-picker button small{font-size:10px}.tl-lobby{min-height:320px;padding:25px 14px}.tl-lobby h2{font-size:22px}.tl-felt{border-width:6px;padding:12px 10px 11px}.tl-player{padding:8px 5px;gap:3px;border-width:1px}.tl-player b{font-size:10px}.tl-player span,.tl-player small{font-size:9px}.tl-players{gap:6px}.tl-turn{margin-top:14px;font-size:12px;gap:9px}.tl-turn span{font-size:10px}.tl-center{min-height:152px;padding:7px 0}.tl-center>small{font-size:9px;letter-spacing:.6px}.tl-center>p{font-size:10px}.tl-top{gap:4px;min-height:80px}.tl-top .tl-card{width:43px;height:63px;flex-basis:43px}.tl-top .tl-card .tl-card-corner{font-size:9px;left:3px;top:3px}.tl-top .tl-card .tl-card-corner.bottom{right:3px;bottom:3px;left:auto;top:auto}.tl-top .tl-card .tl-card-symbol{font-size:25px}.tl-hand{grid-template-columns:repeat(7,minmax(0,1fr));gap:15px 7px;padding-top:19px;max-width:660px}.tl-hand .tl-card{min-height:0;max-height:105px}.tl-hand .tl-card-symbol{font-size:32px}.tl-hand .tl-card-corner{font-size:12px}.tl-hand-heading{font-size:9px;letter-spacing:.5px;gap:6px}.tl-hand-heading>small{font-size:10px;max-width:75%}.tl-actions{padding:9px 4px 11px;margin-top:10px}.tl-actions>p{font-size:11px;margin-bottom:8px}.tl-action-buttons{gap:7px}.tl-action-buttons>button{padding:9px 12px;font-size:11px;min-height:42px}.tl-action-buttons>button.primary{min-width:128px}.tl-rules{font-size:11px;margin-top:14px;padding:10px 12px}}
@media(max-width:380px){.tl-hand{gap:15px 6px}.tl-hand .tl-card-symbol{font-size:28px}.tl-hand .tl-card-corner{font-size:10px;left:3px;top:3px}.tl-hand .tl-card-corner.bottom{right:3px;bottom:3px;left:auto;top:auto}.tl-action-buttons>button{padding:8px 10px}.tl-action-buttons>button.primary{min-width:111px}}
@media(prefers-reduced-motion:reduce){.tl-card{transition:none}}
@media(min-width:901px) and (max-height:950px){
  .play-mode:has(.cards-view.active #tienlen-mode:not([hidden]) #tl-game:not([hidden])) .panel-tabs button{padding:8px 4px 7px}
  .play-mode .cards-view .game-page-heading{margin-bottom:10px}
  .play-mode .cards-view .game-page-heading small{display:none}
  .card-mode-picker{margin-bottom:10px}
  .card-mode-picker button{padding:8px 14px}
  .tl-felt{padding:12px 18px}
  .tl-turn{margin-top:9px}
  .tl-center{min-height:130px}
  .tl-actions{padding:7px 14px 9px;margin-top:7px}
}
.tl-actions{position:static;background:#fff3d8;box-shadow:none}
.card-mode-picker button{grid-template-columns:auto 1fr;align-items:center;gap:8px;padding:10px 14px}
.play-mode .cards-view .game-page-heading{margin-bottom:12px}.play-mode .cards-view .game-page-heading h2{font-size:23px}
.tl-players{grid-template-columns:repeat(4,minmax(0,1fr))}.tl-player{padding:8px 9px;gap:4px}.tl-turn{margin-top:13px}.tl-center{min-height:151px;padding:7px 0}.tl-hand{padding-top:14px}
@media(min-width:901px){.play-mode .cards-view{padding:17px 26px}.play-mode .cards-view .game-page-heading small{font-size:8px}.tl-felt{padding-top:13px}.tl-actions{padding-top:8px;padding-bottom:10px;margin-top:8px}.tl-actions>p{margin-bottom:7px}.tl-center{min-height:145px}}
@media(max-width:900px){.play-mode .cards-view .game-page-heading h2{font-size:20px}.tl-hand{padding-top:18px}.tl-player{padding:7px 5px;gap:3px}.tl-center{min-height:144px}.tl-actions{padding-top:9px;padding-bottom:11px}.card-mode-picker button{padding:9px 8px;gap:6px}.card-mode-picker button>b{font-size:12px}.card-mode-picker button>span{font-size:17px}}