@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root{--felt:#0b4035;--felt-deep:#062b25;--gold:#d7b872;--cream:#f5f0e6;--ink:#111916;--muted:#9aa9a3;--red:#c84347;--panel:#faf8f2;--shadow:0 18px 50px #001b1670;--safe-bottom:max(14px,env(safe-area-inset-bottom))}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#051b17;color:var(--cream);font-family:'DM Sans',system-ui,sans-serif}body{overflow-x:hidden}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:#061f1b;border-bottom:1px solid #ffffff12;position:relative;z-index:20}.icon-btn{border:0;background:#ffffff0a;color:var(--cream);border-radius:12px;width:42px;height:42px;font-size:20px;cursor:pointer}.header-actions{display:flex;gap:7px}.brand{display:flex;align-items:center;gap:7px;letter-spacing:.19em;font:600 16px 'Playfair Display',serif}.brand-mark{width:29px;height:29px;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;transform:rotate(45deg);border-radius:7px}.brand-mark::first-letter{transform:rotate(-45deg)}.brand small{font:500 8px 'DM Sans';letter-spacing:.28em;color:var(--gold);align-self:flex-end;margin:0 0 2px -2px}.game-shell{max-width:1180px;margin:auto;min-height:calc(100vh - 64px);display:grid;grid-template-rows:auto minmax(350px,56vh) auto auto;background:var(--felt-deep)}.status-strip{height:54px;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #ffffff12;background:#082923;padding:7px 8px}.status-strip>div{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #ffffff12}.status-strip>div:last-child{border:0}.status-label{font-size:8px;letter-spacing:.16em;color:#8eaaa2}.status-strip b{font:600 12px 'DM Sans';color:#f7f1e6}.table{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 46%,#196858 0,var(--felt) 46%,var(--felt-deep) 100%);isolation:isolate}.table:after{content:"";position:absolute;inset:10px;border:1px solid #d7b8722e;border-radius:44%/10%;pointer-events:none}.table-glow{position:absolute;width:75%;height:50%;left:12.5%;top:25%;border-radius:50%;box-shadow:0 0 100px #72c7ab18;background:#72c7ab08}.player{position:absolute;display:flex;align-items:center;gap:8px;z-index:2}.player.north{top:20px;left:50%;transform:translateX(-50%)}.player.west{left:16px;top:45%;transform:translateY(-50%);flex-direction:column}.player.east{right:16px;top:45%;transform:translateY(-50%);flex-direction:column}.avatar{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#e4c78c,#856832);border:2px solid #eedcae;color:#173029;font-size:11px;font-weight:700;box-shadow:0 5px 15px #00181280}.player-copy{display:flex;flex-direction:column}.west .player-copy,.east .player-copy{text-align:center}.player-copy b{font:600 11px 'Playfair Display'}.player-copy span{font-size:7px;letter-spacing:.16em;color:#b7cbc5}.thinking{display:none;gap:3px}.thinking.active{display:flex}.thinking i{width:4px;height:4px;background:var(--gold);border-radius:50%;animation:pulse 1s infinite}.thinking i:nth-child(2){animation-delay:.2s}.thinking i:nth-child(3){animation-delay:.4s}@keyframes pulse{50%{opacity:.2;transform:translateY(-3px)}}.hand-count{position:absolute;background:#041d19;border:1px solid #ffffff20;border-radius:5px;padding:3px 7px;font-size:9px;color:#bbccc7}.north-count{top:68px;left:50%;transform:translateX(-50%)}.west-count{left:23px;top:57%}.east-count{right:23px;top:57%}.center-message{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);text-align:center;transition:.3s}.center-message small{display:block;font-size:8px;letter-spacing:.18em;color:#abc4bd}.center-message strong{display:block;margin-top:5px;font:600 21px 'Playfair Display';color:#fff}.trick-area{position:absolute;left:50%;top:48%;width:170px;height:160px;transform:translate(-50%,-50%);z-index:5}.played-card{position:absolute;width:55px;height:78px;background:#fff;border-radius:6px;padding:5px;color:#111;box-shadow:0 6px 15px #00151070;animation:playCard .35s cubic-bezier(.2,.8,.3,1)}.played-card.red{color:var(--red)}.played-card[data-seat="N"]{left:58px;top:0}.played-card[data-seat="S"]{left:58px;bottom:0}.played-card[data-seat="W"]{left:5px;top:40px}.played-card[data-seat="E"]{right:5px;top:40px}.played-card b{display:block;font-size:14px}.played-card span{font-size:20px}@keyframes playCard{from{opacity:0;transform:scale(.65) translateY(20px)}}.last-trick{position:absolute;right:12px;bottom:12px;font-size:9px;color:#a9bdb7}.auction-panel{background:var(--panel);color:var(--ink);padding:16px 14px 14px;z-index:8;box-shadow:0 -12px 35px #001c1640}.auction-head{display:flex;justify-content:space-between;align-items:center}.auction-head small{display:block;font-size:8px;letter-spacing:.18em;color:#998051}.auction-head b{font:600 17px 'Playfair Display'}.history-btn{border:0;background:transparent;color:#69736f;font-size:10px}.auction-log{display:flex;gap:7px;min-height:0;max-height:0;overflow:hidden;transition:.3s;margin:0}.auction-log.open{max-height:80px;margin:10px 0}.bid-chip{padding:5px 8px;border-radius:6px;background:#e9e5dc;font-size:10px}.level-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}.level-grid button,.suit-grid button,.bid-actions button{border:1px solid #ddd8cd;background:#fff;border-radius:9px;height:42px;font-weight:700;color:#17201c;box-shadow:0 2px 4px #13251c0c;cursor:pointer}.level-grid button.selected,.suit-grid button.selected{background:#123d34;color:white;border-color:#123d34;box-shadow:0 0 0 2px #d2b878}.level-grid button:disabled,.suit-grid button:disabled{opacity:.25}.suit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:7px}.suit-grid button{font-size:19px}.suit-grid button small{display:block;font-size:6px;letter-spacing:.05em;color:#87918d}.suit-grid button.red{color:var(--red)}.bid-actions{display:grid;grid-template-columns:.8fr .8fr 1.4fr;gap:7px;margin-top:9px}.bid-actions button{height:43px;font-size:10px;letter-spacing:.06em}.bid-actions button:disabled{opacity:.35}.bid-actions .primary{background:#123d34;color:#fff;border-color:#123d34}.pass-btn{color:#59635f!important}.hand-zone{background:#f1ede5;color:#131b18;padding:10px 8px var(--safe-bottom);border-top:1px solid #d9d4cb}.hand-title{display:flex;align-items:center;justify-content:space-between;padding:0 7px 9px}.hand-title>div{display:flex;align-items:center;gap:8px}.hand-title>div>span{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#153e35;color:#fff}.hand-title b,.hand-title small{display:block}.hand-title b{font-size:10px}.hand-title small,.hand-title>span{font-size:8px;color:#75807b;letter-spacing:.08em}.hand{height:112px;position:relative;max-width:720px;margin:auto}.card{position:absolute;top:0;width:60px;height:91px;border:0;border-radius:7px;background:linear-gradient(145deg,#fff,#f2f0ec);box-shadow:0 3px 7px #13221c30;border:1px solid #d8d5ce;color:#111;padding:6px;text-align:left;transform-origin:50% 130%;transition:.18s;cursor:pointer}.card.red{color:var(--red)}.card b{display:block;font-size:15px;line-height:14px}.card span{font-size:20px}.card:hover,.card:focus,.card.selected{transform:translateY(-13px)!important;box-shadow:0 9px 14px #10231d40}.card.illegal{filter:brightness(.75);opacity:.6}.drawer{position:fixed;z-index:50;left:0;top:0;bottom:0;width:min(85vw,350px);background:#092a24;padding:18px;transform:translateX(-102%);transition:.3s;box-shadow:20px 0 60px #00100dc0}.drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.drawer>button{display:flex;align-items:center;text-align:left;gap:14px;width:100%;padding:14px 10px;background:transparent;border:0;border-bottom:1px solid #ffffff10;color:#fff;font-size:22px}.drawer>button span{display:flex;flex-direction:column}.drawer>button b{font-size:13px}.drawer>button small{font-size:9px;color:#98aea8;margin-top:3px}.drawer>p{position:absolute;bottom:20px;color:#78918a;font-size:9px}.theme-picker{margin-top:28px}.theme-picker>small{color:#8ca39d;font-size:8px;letter-spacing:.15em}.theme-picker>div{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}.theme-picker button{border:1px solid #ffffff20;background:#ffffff08;color:#d8e2df;border-radius:12px;padding:7px 10px;font-size:9px}.theme-picker button.active{border-color:var(--gold);color:var(--gold)}.scrim{position:fixed;inset:0;z-index:40;background:#001510a0;opacity:0;visibility:hidden;transition:.3s}.scrim.open{opacity:1;visibility:visible}dialog{border:1px solid #d8c28e;border-radius:18px;background:#faf8f2;color:#16201c;width:min(90vw,480px);padding:26px;box-shadow:var(--shadow)}dialog::backdrop{background:#001510a8;backdrop-filter:blur(5px)}.modal-close{position:absolute;right:12px;top:12px;border:0;background:#eee9df;border-radius:50%;width:30px;height:30px}.modal-title{font:700 26px 'Playfair Display';color:#153e35;margin:0 0 10px}.modal-copy{font-size:13px;line-height:1.6;color:#58635f}.score-grid{display:grid;grid-template-columns:1fr 1fr;text-align:center;margin:20px 0}.score-grid div{padding:15px;background:#eeeae1}.score-grid b{display:block;font:700 28px 'Playfair Display';color:#153e35}.modal-primary{width:100%;border:0;border-radius:10px;padding:13px;background:#153e35;color:#fff}.toast{position:fixed;z-index:70;left:50%;bottom:20px;transform:translate(-50%,20px);background:#071f1b;color:#fff;padding:10px 16px;border-radius:20px;opacity:0;transition:.25s;font-size:11px;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
body[data-theme="velvet"]{--felt:#572735;--felt-deep:#281019}body[data-theme="midnight"]{--felt:#17243b;--felt-deep:#080e1a;--gold:#a6bde0}body[data-theme="pastel"]{--felt:#729d92;--felt-deep:#466a62;--gold:#ffe0a8}
@media(min-width:760px){.topbar{padding:8px 24px}.game-shell{grid-template-columns:minmax(0,1fr) 350px;grid-template-rows:auto minmax(550px,calc(100vh - 118px))}.status-strip{grid-column:1/3}.table{grid-column:1;grid-row:2}.auction-panel{grid-column:2;grid-row:2;padding:24px 18px;box-shadow:-12px 0 30px #001c1625}.hand-zone{position:absolute;z-index:10;bottom:12px;left:50%;transform:translateX(-50%);width:min(64vw,650px);background:transparent;border:0;color:#fff}.hand-title small,.hand-title>span{color:#b9cbc5}.hand{height:120px}.card{width:68px;height:100px}.table .player.north{top:30px}.table .player.west{left:28px}.table .player.east{right:28px}.center-message strong{font-size:27px}.level-grid{margin-top:22px}.auction-log.open{max-height:150px;flex-wrap:wrap}.suit-grid{grid-template-columns:repeat(2,1fr)}.suit-grid button:last-child{grid-column:1/3}.bid-actions{grid-template-columns:1fr 1fr}.bid-actions .primary{grid-column:1/3}.status-strip{height:54px}}
@media(max-height:700px) and (max-width:759px){.game-shell{grid-template-rows:auto minmax(270px,45vh) auto auto}.table{min-height:270px}.auction-panel{padding-top:10px}.hand{height:88px}.card{height:78px;width:52px}.hand-title{padding-bottom:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}