@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root{color-scheme:dark;--cream:#f7edcf;--muted:#c8c3aa;--gold:#d8b974;--felt:#126742;--line:#bfa16a;font-family:'DM Sans',Arial,sans-serif;background:#180f0b;color:var(--cream)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:linear-gradient(90deg,#1a0c08a6,#1a0c0818 50%,#1a0c08a6),url('/assets/walnut.webp') center/cover fixed}button,a{font:inherit}button{cursor:pointer}a{color:inherit}.hidden{display:none!important}::selection{background:#c79d4e;color:#21130c}:focus-visible{outline:3px solid #edc56d;outline-offset:3px}
.shell{min-height:100vh;max-width:1360px;margin:auto;padding:0 28px;display:flex;flex-direction:column}.site-header{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d1b57a55}.brand{display:flex;align-items:center;gap:13px}.brand-mark{display:grid;place-items:center;width:47px;height:47px;border:1px solid #f4d99c77;border-radius:13px;background:linear-gradient(145deg,#a57439,#5a351e);box-shadow:inset 0 2px 3px #efcf9559,0 8px 18px #1007047d;color:#f7e1a8;font-size:28px}.brand strong{font-family:'Playfair Display',Georgia,serif;display:block;letter-spacing:.06em;font-size:20px}.brand small{display:block;color:#e4cfa6;letter-spacing:.08em;font-size:11px}#account{font-size:13px;color:#e8d5ad}#account a{margin-left:8px;text-underline-offset:4px;color:#e9c885}.site-footer{display:flex;justify-content:space-between;padding:26px 0;color:#bea67c;font-size:12px;margin-top:auto}.primary{display:inline-flex;align-items:center;justify-content:center;gap:28px;border:1px solid #fbe5aa;border-radius:10px;background:linear-gradient(180deg,#f3d989,#cda45b);color:#31200f;text-decoration:none;font-weight:700;padding:15px 23px;box-shadow:inset 0 1px #fff3c4,0 7px 0 #785024,0 16px 24px #0d08056b;transition:transform .2s,box-shadow .2s}.primary:hover{transform:translateY(-3px);box-shadow:inset 0 1px #fff3c4,0 10px 0 #785024,0 20px 28px #0d08058a}.primary:active{transform:translateY(4px);box-shadow:inset 0 1px #fff3c4,0 2px 0 #785024}.login-link{margin-left:13px}.fine-print{font-size:13px;color:#ddcaa6;line-height:1.6;margin-top:25px}.small-label{font-size:12px;letter-spacing:.18em;font-weight:700;color:#e9c684}.login-scene{min-height:calc(100vh - 150px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4vw}.login-panel{max-width:570px;padding:30px 0}.login-panel h1,.lobby h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(48px,6vw,82px);line-height:1.06;letter-spacing:-.025em;margin:20px 0}.login-panel>p:not(.fine-print){font-size:18px;line-height:1.6;color:#ecdbb8;max-width:470px;margin-bottom:35px}.login-art{height:450px;position:relative;perspective:900px;filter:drop-shadow(12px 35px 30px #0e080b)}.art-card{position:absolute;width:190px;height:275px;border-radius:14px;background:#f6eddb;border:7px solid #fff9e9;color:#20241b;font:700 85px 'Playfair Display',Georgia,serif;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 0 2px #ab8757,18px 22px 24px #0908048c;transform-style:preserve-3d}.art-card span{font:normal 90px Georgia}.art-one{top:38px;left:18%;transform:rotate(-18deg) rotateY(13deg);animation:art-in 900ms both}.art-two{top:76px;left:43%;color:#aa392c;transform:rotate(15deg) rotateY(-13deg);animation:art-in-two 1100ms both}.art-chip{position:absolute;bottom:48px;right:11%;width:120px;height:120px;border:9px dashed #ead3a2;border-radius:50%;background:radial-gradient(circle,#446947,#183924);display:grid;place-items:center;color:#ecd9ad;font-size:13px;letter-spacing:.15em;font-weight:700;box-shadow:0 10px 23px #0a08068a}
.lobby{padding:65px 0 90px}.lobby-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:33px}.lobby h1{margin:0 0 8px}.lobby-heading p,.lobby-panel p{color:#ebd7af;line-height:1.6;margin:0}.demo-tag{display:inline-block;white-space:nowrap;background:#4b311e;border:1px solid #d4ae70;border-radius:7px;padding:9px 12px;color:#f3d794;font-size:11px;letter-spacing:.13em;font-weight:700}.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.lobby-panel{background:linear-gradient(145deg,#42291b 0%,#281b14 100%);border:1px solid #b58b5688;border-radius:15px;padding:30px;box-shadow:inset 0 1px #d2aa6d38,0 18px 35px #0b050681}.lobby-panel h2{font-family:'Playfair Display',Georgia,serif;font-size:28px;margin:0 0 10px}.stakes{display:flex;gap:10px;margin:30px 0}.stake{border:1px solid #b58b56;background:#26190f;color:#efddb9;border-radius:9px;padding:12px 18px;transition:transform .2s,background .2s}.stake:hover{transform:translateY(-3px)}.stake.selected{background:#e3c578;color:#241608;box-shadow:inset 0 1px #fff5c7,0 4px 0 #7c592c;font-weight:700}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.text-button{background:transparent;border:0;color:#efcb8b;text-decoration:underline;text-underline-offset:4px}.room{display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-top:1px solid #caa77255;gap:12px}.room:first-child{margin-top:20px}.room small{display:block;color:#cbb691;margin-top:6px}.room button{background:#cfae6d;border:0;border-radius:7px;color:#25180e;font-weight:700;padding:9px 14px}.room button:hover{background:#edd397}.empty{color:#d3bf9b;margin-top:25px}.mygames{margin-top:20px}
body:has(.game:not(.hidden)){background:#110e0b}body:has(.game:not(.hidden)) .site-header,body:has(.game:not(.hidden)) .site-footer{display:none}body:has(.game:not(.hidden)) .shell{max-width:none;padding:0}.game{height:100dvh;min-height:620px;display:flex;flex-direction:column;background:#141411}.game-toolbar{height:62px;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 27px;background:#161716;color:#eee8d8;box-shadow:0 3px 12px #0008;z-index:5}.toolbar-back,.sound-button{border:0;background:transparent;color:#f1eadb;padding:8px 4px;font-size:14px}.toolbar-back span{font-size:28px;vertical-align:-2px;margin-right:7px}.game-title{font-family:'Playfair Display',Georgia,serif;font-size:19px}.toolbar-right{justify-self:end;display:flex;align-items:center;gap:24px}.toolbar-right .demo-tag{font-size:10px;padding:6px 9px}.sound-button:hover,.toolbar-back:hover{color:#f4ca7a}.wood-frame{min-height:0;flex:1;margin:12px;background:linear-gradient(110deg,#6c391c,#ae7441 10%,#462715 28%,#956039 52%,#3a2115 78%,#754522);padding:15px;border-radius:32px;box-shadow:inset 0 2px 3px #e3ad6d9e,inset 0 -4px 7px #160b08,0 6px 20px #000a;position:relative}.wood-frame:before{content:'';position:absolute;inset:4px;border-radius:29px;border:1px solid #d39b5b9e;pointer-events:none}.table{height:100%;min-height:0;position:relative;overflow:hidden;border-radius:22px;border:3px solid #173b29;background:radial-gradient(ellipse at 50% 47%,#198056 0,#126c48 53%,#06452f 100%);box-shadow:inset 0 0 0 2px #d1ad73b5,inset 0 0 0 12px #0c4f37,inset 0 15px 50px #051d1980,inset 0 -30px 60px #06281caa;display:flex;flex-direction:column;justify-content:space-between;padding:32px 44px 22px}.table:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 33% 15%,#ffffff1b,transparent 28%),radial-gradient(circle at 70% 70%,#00000010,transparent 38%);pointer-events:none}.table-edge{position:absolute;inset:16px;border:1px solid #b9a26e61;border-radius:13px;pointer-events:none}.table-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 clamp(130px,21vw,300px) 'Playfair Display',Georgia,serif;color:#f2d9980d;pointer-events:none}.seat{position:relative;z-index:1}.opponent-seat{display:flex;align-items:center;gap:14px;min-height:118px}.player-portrait{width:54px;height:54px;flex:none;border:3px solid #efd3a1;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,#926a3b,#38291c);color:#ffebbc;font-size:27px;box-shadow:0 7px 15px #042217aa}.player-portrait.own{background:linear-gradient(150deg,#5e845a,#213b2a)}.player-info{display:flex;flex-direction:column;gap:3px;min-width:110px}.seat-label{font-size:10px;letter-spacing:.17em;color:#e0d3ad;font-weight:700}.player-info strong{font-size:16px;color:#fff4d9}.card-count{color:#c7d9bd;font-size:12px}.backs{display:flex;align-items:center;margin-left:22px;filter:drop-shadow(5px 8px 5px #071a1288)}.back{width:61px;height:86px;margin-left:-17px;border:5px solid #f5ebd9;border-radius:7px;background:radial-gradient(circle at center,#dbd1ed 0 3px,#4065af 4px 13px,#fff 14px 16px,#38599a 17px),repeating-linear-gradient(45deg,#31539a 0 3px,#b9c5e3 3px 6px);background-size:30px 30px,auto;box-shadow:0 0 0 1px #193765,3px 4px 8px #001a10b5;transform:rotate(calc((var(--i) - 2) * 2deg));animation:deal-back .45s both;animation-delay:calc(var(--i) * 55ms)}.back:first-child{margin-left:0}.board-center{position:relative;z-index:1;flex:1;min-height:120px;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center}.deck-area{display:flex;align-items:center;gap:16px}.trump,.deck{font-size:14px;font-weight:700;color:#eddbb9}.deck{width:67px;height:94px;border:5px solid #f5ebd9;border-radius:7px;background:radial-gradient(circle at center,#dbd1ed 0 3px,#4065af 4px 13px,#fff 14px 16px,#38599a 17px),repeating-linear-gradient(45deg,#31539a 0 3px,#b9c5e3 3px 6px);background-size:30px 30px,auto;box-shadow:6px -5px 0 #f5ebd9,7px -6px 0 #395a9b,8px 9px 15px #072016b3;display:flex;align-items:end;justify-content:center;padding-bottom:4px;color:#2a3246;font-size:11px;text-align:center}.table-cards{display:flex;justify-content:center;align-items:center;min-height:145px}.table-cards .card+ .card{margin-left:-17px;transform:rotate(10deg) translateY(16px)}.table-space{height:1px}.self-seat{display:flex;flex-direction:column;gap:12px}.self-header{display:flex;align-items:center;gap:12px}.status{margin-left:auto;padding:10px 16px;border:1px solid #e9d8a48c;border-radius:8px;background:#073d2db8;color:#fff5d8;font-size:13px;font-weight:700;box-shadow:0 6px 13px #0522177d}.take-button{border:1px solid #f4d48a;border-radius:8px;background:#ecd08e;color:#292014;padding:10px 14px;font-weight:700;box-shadow:0 4px 0 #75502a}.take-button:hover{transform:translateY(-2px)}.hand{display:flex;align-items:end;justify-content:center;min-height:130px;padding-bottom:7px;perspective:1000px}.card{position:relative;flex:none;width:78px;height:112px;border:4px solid #fffaf0;border-radius:8px;background:linear-gradient(140deg,#fffefa,#ede6d8);color:#15221a;box-shadow:0 0 0 1px #bdac8d,5px 8px 12px #0521169e,inset 0 0 0 1px #cfbfa4;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:41px;line-height:1;transform-style:preserve-3d;animation:deal-card .55s both;animation-delay:calc(var(--i) * 65ms)}.card.red{color:#b92d2d}.card .corner{position:absolute;left:6px;top:5px;display:flex;flex-direction:column;align-items:center;font:bold 17px Georgia,serif;line-height:.9}.card .corner small{font-size:15px}.card .corner.bottom{left:auto;top:auto;right:6px;bottom:5px;transform:rotate(180deg)}.card .pip{filter:drop-shadow(1px 2px 1px #0002)}.hand .card{margin-left:-13px;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;animation:deal-hand .55s both;animation-delay:calc(var(--i) * 65ms)}.hand .card:first-child{margin-left:0}.hand .card:hover,.hand .card:focus-visible{transform:translateY(-24px) rotateX(12deg) rotateZ(-2deg);box-shadow:0 0 0 1px #bdac8d,7px 25px 22px #03140e9c;z-index:3}.game-foot{flex:none;padding:0 26px 13px;display:flex;justify-content:space-between;color:#bdc4b6;font-size:12px}
@keyframes deal-hand{from{opacity:.4;transform:translateY(58px) rotateX(-35deg) scale(.9)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}@keyframes deal-card{from{opacity:.2;transform:translateY(-70px) rotateZ(-10deg) scale(.85)}to{opacity:1;transform:translateY(0) rotateZ(0) scale(1)}}@keyframes deal-back{from{opacity:0;transform:translateY(-45px) rotate(-12deg)}to{opacity:1;transform:rotate(calc((var(--i) - 2) * 2deg))}}@keyframes art-in{from{opacity:0;transform:translateY(70px) rotate(-26deg)}to{opacity:1;transform:rotate(-18deg) rotateY(13deg)}}@keyframes art-in-two{from{opacity:0;transform:translateY(90px) rotate(30deg)}to{opacity:1;transform:rotate(15deg) rotateY(-13deg)}}
@media(max-width:800px){.shell{padding:0 18px}.login-scene{grid-template-columns:1fr;min-height:calc(100vh - 140px)}.login-art{display:none}.lobby{padding-top:40px}.lobby-grid{grid-template-columns:1fr}.lobby-heading{align-items:start}.lobby h1{font-size:50px}.game-toolbar{padding:0 14px}.wood-frame{margin:7px;padding:8px;border-radius:22px}.table{padding:23px 16px 18px;border-radius:15px}.table-edge{inset:9px}.back{width:48px;height:71px;margin-left:-16px}.card{width:59px;height:88px;font-size:31px}.hand{min-height:105px}.hand .card{margin-left:-12px}.board-center{grid-template-columns:1fr 2fr}.table-space{display:none}.deck-area{gap:7px}.deck{width:50px;height:73px}.status{font-size:11px}.game-foot{padding:0 12px 8px}}
@media(max-width:520px){.site-header{height:72px}.brand strong{font-size:17px}.brand-mark{width:41px;height:41px}.login-panel h1{font-size:53px}.lobby-heading{display:block}.demo-tag{font-size:10px}.lobby-heading .demo-tag{margin-top:17px}.lobby-panel{padding:22px}.stakes{flex-wrap:wrap}.stake{padding:10px 12px}.game{min-height:530px}.game-toolbar{height:55px;grid-template-columns:1fr auto}.game-title{font-size:13px;grid-column:2;grid-row:1}.toolbar-right{display:none}.toolbar-back{font-size:12px}.toolbar-back span{font-size:21px}.table{padding:18px 10px 13px}.opponent-seat{min-height:100px;gap:7px}.player-portrait{width:39px;height:39px;font-size:19px;border-width:2px}.player-info{min-width:80px}.player-info strong{font-size:12px}.seat-label{font-size:9px}.backs{margin-left:auto}.back{width:36px;height:56px;margin-left:-17px;border-width:3px}.board-center{grid-template-columns:1fr 1fr;min-height:100px}.deck-area{display:block}.trump{font-size:11px;margin-bottom:7px}.deck{width:43px;height:63px;font-size:9px;border-width:3px}.table-cards{min-height:100px}.card{width:48px;height:72px;font-size:26px;border-width:2px}.card .corner{font-size:11px;left:3px;top:3px}.card .corner small{font-size:10px}.card .corner.bottom{right:3px;bottom:3px}.self-header{flex-wrap:wrap;gap:6px}.self-header .player-info{flex:1}.status{order:3;flex-basis:100%;text-align:center;margin-left:0;padding:6px}.take-button{order:4;flex-basis:100%;padding:7px}.hand{min-height:79px;justify-content:center}.hand .card{margin-left:-8px}.hand .card:hover{transform:translateY(-13px)}.game-foot{font-size:10px}.game-foot span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.deck{position:relative;font-size:0}.deck::after{content:attr(data-count);position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);white-space:nowrap;font:600 11px "DM Sans",Arial,sans-serif;color:#f2e1ba;text-shadow:0 1px 2px #062418}.hand .card.unplayable{cursor:default;filter:saturate(.82)}.hand .card.unplayable:hover{transform:none;box-shadow:0 0 0 1px #bdac8d,5px 8px 12px #0521169e,inset 0 0 0 1px #cfbfa4}