@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap";:root{--bg:#15121d;--gold:#e5bc77;--cream:#fff5e3;--muted:#bbb1c8;--line:#ffffff20;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:radial-gradient(ellipse at top right,#40304e,transparent 65%),var(--bg);color:var(--cream);margin:0;font-family:DM Sans,sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}:is(button:focus-visible,a:focus-visible){outline:3px solid var(--gold);outline-offset:4px}a{color:inherit;text-decoration:none}main{max-width:1250px;margin:auto;padding:0 28px}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:90px;display:flex}.brand{letter-spacing:.09em;gap:13px;font:800 23px Outfit;display:flex}.brand small{letter-spacing:.3em;color:var(--gold);font:600 9px DM Sans;display:block}.brandIcon{color:var(--gold);font-size:44px;line-height:1}.headerActions{align-items:center;gap:16px;display:flex}.icon,.text{color:var(--cream);background:0 0;border:0}.icon{place-items:center;padding:9px;display:inline-grid}.text{align-items:center;padding:10px 0;font-size:13px;display:inline-flex}.layout{grid-template-columns:minmax(0,1fr) 340px;gap:42px;padding:40px 0;display:grid}.players{flex-wrap:wrap;gap:10px;margin-bottom:18px;display:flex}.player{border:1px solid var(--line);background:#ffffff08;border-radius:13px;flex:1;align-items:center;gap:9px;min-width:130px;padding:10px 12px;display:flex}.player.playing{border-color:var(--gold);background:#e5bc7712}.avatar{width:34px;height:34px;color:var(--gold);background:#5c426c;border-radius:50%;flex-shrink:0;place-items:center;display:grid}.player b{font-size:12px;display:block}.player small{color:var(--muted);margin-top:3px;font-size:10px;display:block}.player em{color:var(--gold);white-space:nowrap;margin-left:auto;font-size:9px;font-style:normal}.felt{background:radial-gradient(#345b48,#204135 70%);border:11px solid #44332c;border-radius:120px;outline:2px solid #b2874d;flex-direction:column;justify-content:center;align-items:center;min-height:355px;margin:0 5px;padding:48px 24px 30px;display:flex;position:relative;box-shadow:0 14px #211b1a,0 22px 40px #0007,inset 0 0 0 2px #ad9b624c,inset 0 0 55px #0005}.tableLabel{letter-spacing:.2em;color:#e5bc775c;font:800 15px Outfit;position:absolute;top:25px}.tableLabel span{text-align:center;letter-spacing:.23em;margin-top:4px;font:600 7px DM Sans;display:block}.piles{align-items:center;gap:42px;margin:14px 0 24px;display:flex}.deck{width:90px;height:132px;color:var(--gold);background:repeating-linear-gradient(45deg,#493454 0 7px,#604565 7px 8px);border:4px solid #e7d4ae;border-radius:9px;position:relative;box-shadow:2px 3px #aaa393,4px 6px #f3ead9,6px 9px #aaa393,0 14px 18px #0006}.deck>span{font-size:40px;display:block}.deck small{letter-spacing:.14em;font:700 8px Outfit;display:block}.deck b{color:#e2d7c4;font-size:11px;position:absolute;bottom:-24px;left:0;right:0}.card{color:#282333;background:#fff8e9;border:1px solid #decbaa;border-radius:8px;width:80px;height:116px;display:block;position:relative;box-shadow:0 6px 12px #0004}.card.big{width:90px;height:132px;transform:rotate(9deg);box-shadow:0 9px 18px #0006}.corner{font:700 19px Outfit;position:absolute;top:6px;left:7px}.corner small{text-align:center;font-size:16px;display:block}.corner.reverse{inset:auto 7px 6px auto;transform:rotate(180deg)}.pip{place-items:center;height:100%;font-size:43px;display:grid}.red{color:#b72e42}.tableStatus{text-align:center;color:#ffefcd;max-width:90%;font:600 16px Outfit}.suitTag{color:#d6d9ce;align-items:center;gap:10px;margin-top:10px;font-size:11px;display:flex}.suitTag b{color:#f5e8d1;font-size:25px}.suitTag b.red{color:#ff9b9b}.suitTag span{font-size:20px}.handArea{margin-top:34px}.handHeading{justify-content:space-between;align-items:center;gap:15px;font-size:12px;display:flex}.handHeading b span{color:var(--gold);margin-left:7px}.handHeading label{color:var(--gold);align-items:center;gap:6px;font-size:12px;display:flex}input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px}.hand{gap:8px;min-height:140px;padding:18px 8px 12px;display:flex;overflow-x:auto}.handCard{background:0 0;border:0;flex-shrink:0;padding:0;transition:transform .15s;opacity:.65!important}.handCard.valid{transform:translateY(-5px);opacity:1!important}.handCard.valid .card{outline:2px solid #e5bc77;box-shadow:0 4px 20px #e5bc773b}.handCard.valid:hover{transform:translateY(-12px)}.eyebrow{letter-spacing:.21em;color:var(--gold);font-size:10px;font-weight:700}h1{letter-spacing:-.03em;margin:14px 0;font:700 37px/1.08 Outfit}h2{margin:0 0 12px;font:700 18px Outfit}.intro{color:var(--muted);margin-bottom:25px;font-size:13px;line-height:1.7}.setup{gap:15px;display:grid}.modes{gap:8px;display:flex}.modes button{border:1px solid var(--line);color:var(--cream);background:#ffffff07;border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:7px;padding:13px;font-size:12px;display:flex}.modes .chosen{border-color:var(--gold);color:var(--gold);background:#e5bc7710}.setup label{color:#d7cce0;gap:7px;font-size:12px;display:grid}.setup label small{color:var(--muted);font-size:10px}input:not([type=checkbox]),select{color:var(--cream);background:#201a29;border:1px solid #ffffff2a;border-radius:9px;outline:none;width:100%;padding:12px}input:focus,select:focus{border-color:var(--gold)}.primary,.secondary{border-radius:9px;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:11px 15px;font-size:12px;font-weight:700;display:flex}.primary{background:var(--gold);color:#291d25;border:1px solid var(--gold);width:100%}.secondary{color:var(--cream);border:1px solid var(--line);background:#ffffff06}.controls{gap:10px;display:grid}.invitation{border:1px solid var(--line);background:#ffffff05;border-radius:10px;flex-wrap:wrap;align-items:center;gap:6px;padding:12px;font-size:10px;display:flex}.invitation>span{flex:1}.invitation b{color:var(--gold);margin-top:3px;font-size:12px;display:block}.invitation .secondary{min-height:35px;padding:7px;font-size:10px}.hint{color:var(--muted);font-size:11px;line-height:1.6}.events{border-top:1px solid var(--line);margin-top:22px;padding-top:22px}.events p{color:#c2b8cb;border-bottom:1px solid #ffffff08;margin:10px 0;padding-bottom:9px;font-size:11px;line-height:1.5}.chat{border:1px solid var(--line);border-radius:10px;margin-top:18px;padding:12px}.chatToggle{width:100%;color:var(--cream);background:0 0;border:0;align-items:center;gap:9px;padding:0;font-size:12px;display:flex}.chatToggle span{color:var(--gold);margin-left:auto;font-size:10px}.messages{max-height:170px;font-size:11px;overflow-y:auto}.messages b{color:var(--gold);margin-bottom:3px;display:block}.chat form{gap:7px;margin-top:10px;display:flex}.chat input{min-width:0;padding:9px;font-size:11px}.chat .secondary{min-height:36px;padding:7px;font-size:10px}.error{background:#8d293a44;border:1px solid #dc6c6c66;border-radius:9px;padding:12px;font-size:12px}.notice{color:var(--gold);background:#e5bc7722;border:0;border-radius:10px;gap:7px;padding:12px;font-size:11px;display:flex}footer{border-top:1px solid var(--line);color:#94859f;justify-content:space-between;gap:15px;padding:24px 0;font-size:10px;display:flex}.backdrop{z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080610bb;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#292030;border:1px solid #e5bc7750;border-radius:20px;width:min(520px,100%);max-height:85dvh;padding:30px;position:relative;overflow-y:auto;box-shadow:0 30px 80px #0007}.modal h2{font-size:26px}.modal p,.modal li{color:#d7ccdf;font-size:13px;line-height:1.7}.modal ul{padding-left:20px}.close{position:absolute;top:15px;right:15px}.suitChoice{gap:12px;margin:25px 0;display:flex}.suitChoice button{background:var(--cream);color:#282333;border:0;border-radius:9px;flex:1;padding:13px 0;font-size:40px}.suitChoice .red{color:#b72e42}@media (max-width:1000px){.layout{grid-template-columns:minmax(0,1fr) 300px;gap:25px}.felt{border-radius:75px;min-height:330px}.players{gap:6px}.player{min-width:110px;padding:8px}.player em{display:none}h1{font-size:32px}.piles{gap:30px}}@media (max-width:760px){main{padding:0 18px}.layout{grid-template-columns:1fr;gap:24px;padding-top:24px}header{height:70px}.brand{font-size:19px}.brandIcon{font-size:35px}.felt{border-radius:80px;min-height:310px}.players{flex-wrap:nowrap;overflow-x:auto}.player{min-width:125px}.layout:not(:has(.handArea)) .tableArea{order:2}.layout:not(:has(.handArea)) aside{order:1}.layout:not(:has(.handArea)) .felt{min-height:245px}.layout:not(:has(.handArea)) .tableLabel{display:none}.layout:not(:has(.handArea)) .players{display:none}h1{max-width:330px;font-size:35px}.intro{margin:10px 0 18px}.setup{grid-template-columns:1fr 1fr}.setup .modes,.setup .primary,.setup .hint,.setup label:last-of-type{grid-column:1/-1}.setup label:has(select){grid-column:auto}.handArea{margin-top:28px}.hand{gap:7px}.card{width:68px;height:101px}.corner{font-size:16px}.corner small{font-size:13px}.pip{font-size:36px}.hand{min-height:125px}.events{margin-top:18px}.controls{grid-template-columns:1fr}.tableStatus{font-size:15px}.tableArea{min-width:0}footer{font-size:8px}}@media (max-width:400px){main{padding:0 12px}.felt{border-width:8px;border-radius:60px;min-height:290px}.piles{gap:28px}.headerActions{gap:8px}.handHeading,.handHeading label{font-size:11px}.modal{padding:25px 20px}}@media (max-height:520px) and (min-width:760px){.layout{grid-template-columns:1fr 290px;gap:22px;padding-top:20px}.felt{min-height:230px}.tableLabel{display:none}.players{margin-bottom:12px}.handArea{margin-top:20px}header{height:60px}.card{width:64px;height:94px}.card.big,.deck{width:76px;height:110px}.hand{min-height:115px}}[data-slot=dialog-overlay]{z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080610bb;position:fixed;inset:0}[data-slot=dialog-content].modal{z-index:51;display:block;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}[data-slot=dialog-title]{margin:0 0 15px;font:700 26px Outfit}.lastCheck{border:1px solid var(--gold);width:18px;height:18px;color:var(--gold);background:#ffffff10;border-radius:4px;place-items:center;padding:0;display:grid}.lastCheck svg{width:14px;height:14px}.intro{font-size:16px}.setup label,.primary,.secondary,.text,.handHeading,.handHeading label,.chatToggle{font-size:14px}.events p,.hint,.invitation,.player b,.player small{font-size:12px}.modal p,.modal li{font-size:16px}.court{mix-blend-mode:multiply;background-image:url(/hofkaarten.webp);background-repeat:no-repeat;background-size:300% 100%;position:absolute;inset:12% 22%}.courtK{background-position:0%}.courtQ{background-position:50%}.courtJ{background-position:100%}.handCard{opacity:1!important}.handCard:not(.valid){filter:saturate(.72)}