@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}.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}.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}.card{aspect-ratio:5/7;color:#1e2028;background:linear-gradient(115deg,#fffdf4,#fff5e2);border-radius:7px;width:100%;height:auto;overflow:hidden;box-shadow:0 3px 8px #0005,inset 0 0 0 2px #ffffff80}.card.red{color:#b21d36}.corner{z-index:2;letter-spacing:-.05em;font:700 clamp(15px,2vw,20px)/.9 Georgia,Times New Roman,serif;top:5%;left:7%}.corner small{letter-spacing:0;font-family:Georgia,Times New Roman,serif;font-size:.88em;line-height:1.15}.corner.reverse{bottom:5%;right:7%}.pips{font:22px/1 Georgia,Times New Roman,serif;position:absolute;inset:15% 25%}.pips>span{display:block;position:absolute}.pips.ace{font-size:39px}.court{background-size:300% 100%;border-radius:2px;inset:18% 23%}.jokerArt{color:#76509a;flex-direction:column;justify-content:center;align-items:center;font-size:30px;display:flex;position:absolute;inset:24% 20%}.jokerArt small{letter-spacing:.12em;font:600 7px Georgia}.hand{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));align-items:start;gap:12px 9px;min-height:0;padding:14px 2px 8px;display:grid;overflow:visible}.handCard{filter:none;justify-self:center;width:100%;min-width:0;max-width:96px;transition:transform .15s,filter .15s}.handHeading{flex-wrap:wrap;gap:8px}.handHeading label{white-space:nowrap}.handArea{margin-top:26px}.felt{border-radius:85px;min-height:270px;padding:42px 18px 18px}.tableLabel{font-size:12px;top:13px}.tableLabel span{font-size:6px}.piles{gap:38px;margin:6px 0 23px}.deck,.card.big{aspect-ratio:auto;width:78px;height:110px}.deck>span{font:35px Georgia}.deck b{bottom:-20px}.suitTag{margin-top:6px}.tableStatus{font-size:15px}.releaseNotes{color:var(--muted);margin:0 0 20px;font-size:13px}.releaseNotes summary{cursor:pointer;color:var(--gold)}.releaseNotes p{max-width:620px;line-height:1.6}@media (max-width:760px){.layout{padding-top:18px}.felt{border-width:7px;border-radius:58px;min-height:214px;padding:30px 16px 12px}.layout:not(:has(.handArea)) .felt{border-width:7px;border-radius:58px;min-height:214px;padding:30px 16px 12px}.tableLabel{font-size:10px;top:9px}.tableLabel span{display:none}.piles{gap:32px;margin:5px 0 20px}.deck,.card.big{width:64px;height:90px}.deck{border-width:3px}.deck>span{font-size:28px}.deck small{font-size:6px}.deck b{font-size:10px;bottom:-18px}.card.big .corner{font-size:15px}.card.big .pips{font-size:17px}.card.big .pips.ace{font-size:32px}.tableStatus{font-size:14px}.suitTag{margin-top:4px;font-size:12px}.suitTag b{font-size:20px}.suitTag span{font-size:18px}.hand{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}.handCard{max-width:96px}.handArea{margin-top:23px}.corner{font-size:17px}.pips{font-size:20px}.pips.ace{font-size:34px}.players{flex-wrap:wrap;overflow:visible}.player{flex-basis:40%;min-width:0}.player b,.player small{font-size:11px}.player .avatar{width:28px;height:28px}.player{gap:7px;padding:8px}.handHeading,.handHeading label{font-size:12px}}@media (max-width:360px){.hand{gap:10px 6px}.corner{font-size:15px}.pips{font-size:17px}.pips.ace{font-size:30px}.handHeading,.handHeading label{font-size:11px}.player small{font-size:10px}.brand{font-size:17px}}@media (prefers-reduced-motion:reduce){.handCard{transition:none}}.handCard:not(:disabled):hover{transform:translateY(-3px)}.handCard:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:8px}.hand{isolation:isolate;justify-content:center;align-items:flex-start;gap:0;min-height:205px;padding:32px 26px;display:flex;overflow:auto hidden}.handCard{width:clamp(64px,8vw,90px);min-width:clamp(64px,8vw,90px);max-width:none;transform:translateY(var(--fan-drop)) rotate(var(--fan-angle));transform-origin:50% 135%;z-index:calc(var(--fan-index) + 1);flex:none;margin-left:calc(-1*clamp(30px,4vw,52px))}.handCard:first-child{margin-left:0}.handCard:focus-visible{transform:translateY(calc(var(--fan-drop) - 16px)) rotate(var(--fan-angle));z-index:100}.handCard:disabled{opacity:1!important}.lastCall{color:var(--gold);border-color:var(--gold);min-height:44px}.lastBadge{color:var(--gold);margin-top:4px;font-size:12px;display:block}.turnActions{gap:10px;display:grid}.actionPrompt{border:1px solid var(--gold);background:#e5bc7718;border-radius:12px;gap:10px;padding:12px;font-size:14px;display:grid}.actionPrompt .primary,.turnActions>.primary{min-height:48px;font-size:15px}.penaltyTotal{color:var(--gold);margin:0;font-weight:700}.lastNotice{border:1px solid var(--gold);justify-content:space-between;width:100%;min-height:48px;font-size:15px}.deck b{white-space:nowrap;font-size:11px;bottom:-32px;left:50%;right:auto;transform:translate(-50%)}.piles{margin-bottom:38px}.handHeading{min-height:44px}@media (max-width:760px){.hand{justify-content:safe center;min-height:175px;padding:28px 22px 25px}.handCard{width:64px;min-width:64px;margin-left:-36px}.handCard .corner{font-size:16px}.handCard .corner small{font-size:14px}.deck b{font-size:10px;bottom:-30px}.piles{margin-bottom:34px}.turnActions{position:relative}.tableArea{overflow:hidden}.lastCall,.actionPrompt{font-size:13px}}@media (min-width:761px){.hand{justify-content:safe center}}@media (prefers-reduced-motion:reduce){.handCard{transition:none}}.discard{isolation:isolate;width:88px;height:120px;position:relative}.pileCard{transform:translate(var(--pile-x),var(--pile-y)) rotate(var(--pile-rotation));transform-origin:50%;position:absolute;top:5px;left:5px}.pileCard .card.big{transform:none;box-shadow:1px 2px 2px #0005,0 5px 10px #0003}.pileTop{animation:.38s ease-out both lay-card}@keyframes lay-card{0%{opacity:.2;transform:translate(55px,35px) rotate(calc(var(--pile-rotation) + 18deg)) scale(1.12)}to{opacity:1;transform:translate(var(--pile-x),var(--pile-y)) rotate(var(--pile-rotation)) scale(1)}}@media (max-width:760px){.discard{width:74px;height:100px}}@media (prefers-reduced-motion:reduce){.pileTop{animation:none}}.ruleBadge{color:var(--gold);border:1px solid #e5bc7755;border-radius:30px;margin:0 auto 15px;padding:7px 15px;font-size:12px;font-weight:700;display:table}.joinRules{border:1px solid var(--gold);border-radius:10px;grid-column:1/-1;padding:12px;font-size:13px}.joinRules p{margin:8px 0}.sortHand{min-height:38px;margin-left:auto;padding:7px 12px}.handRows{gap:6px;display:grid}.hand{justify-content:center;gap:0;width:100%;min-height:0;padding:24px 12px 22px;overflow:visible}.handCard{width:min(90px,calc((100% - 24px) / (1 + (var(--fan-count) - 1) * .55)));flex-shrink:0;min-width:0;margin-left:0}.handCard:not(:disabled):hover{transform:translateY(var(--fan-drop)) rotate(var(--fan-angle));z-index:calc(var(--fan-index) + 1)}.handCard:focus-visible{transform:translateY(var(--fan-drop)) rotate(var(--fan-angle));z-index:calc(var(--fan-index) + 1)}.handCard.selectedCard,.handCard.selectedCard:hover{transform:translateY(calc(var(--fan-drop) - 14px)) rotate(var(--fan-angle));z-index:100}.handCard.selectedCard:focus-visible{transform:translateY(calc(var(--fan-drop) - 14px)) rotate(var(--fan-angle));z-index:100}.playSelected{max-width:240px;margin:auto}.handCard .corner{font-size:clamp(12px,2.8vw,20px)}.handCard .corner small{font-size:.85em}.tableArea{overflow:visible}.handHeading{flex-wrap:wrap}@media (max-width:760px){.handCard{width:min(68px,calc((100% - 24px) / (1 + (var(--fan-count) - 1) * .55)))}.handCard+.handCard{margin-left:calc(-1 * min(30.6px,(100% - 24px) / (1 + (var(--fan-count) - 1) * .55) * .45))}.handCard .pips{font-size:clamp(12px,3vw,20px)}.handCard .pips.ace{font-size:28px}.handHeading .lastCall{width:100%}.hand{padding-left:8px;padding-right:8px}}.handCard{width:min(90px,calc((100% - 24px) / var(--fan-count) + 24px));margin-left:0}.handCard+.handCard{margin-left:-24px}@media (max-width:760px){.handCard{width:min(68px,calc((100% - 24px) / var(--fan-count) + 24px))}.handCard+.handCard{margin-left:-24px}}.unoCard{aspect-ratio:5/7;color:#fff8e9;border:3px solid #fff6dc;border-radius:9px;width:100%;display:block;position:relative;overflow:hidden;box-shadow:0 4px 10px #0006,inset 0 0 0 1px #fff4}.uno-red{background:linear-gradient(135deg,#c54a61,#9b1d3a)}.uno-yellow{color:#352514;background:linear-gradient(135deg,#ffe2a2,#cf9e37)}.uno-green{background:linear-gradient(135deg,#438b73,#1b5b4a)}.uno-blue{background:linear-gradient(135deg,#478dbd,#244a8b)}.uno-wild{background:conic-gradient(from 35deg,#c54a61,#cf9e37,#438b73,#244a8b,#c54a61)}.unoCard:before{content:"";background:#0002;border:2px solid #fff7df88;border-radius:50%;position:absolute;inset:17% 10%;transform:rotate(24deg)}.unoCenter{text-shadow:0 2px 2px #0004;place-items:center;font:800 clamp(25px,4vw,43px)/1 Outfit;display:grid;position:absolute;inset:0}.unoCorner{font:700 16px Outfit;position:absolute;top:5%;left:7%}.unoCorner.reverse{inset:auto 7% 5% auto;transform:rotate(180deg)}.unoColor{text-align:center;text-transform:uppercase;letter-spacing:.04em;width:100%;font-size:8px;font-weight:700;position:absolute;bottom:15%}.unoCard.big{aspect-ratio:auto;width:78px;height:110px}.unoChoices button{color:#fff8e9;border:1px solid #fff3;font-size:14px!important}.unoChoices .uno-yellow{color:#352514}.suitTag .colorDot{color:#fff;border-radius:20px;padding:4px 10px;font:700 12px DM Sans}.dot-red{background:#ae2746}.dot-yellow{background:#bd8b2c}.dot-green{background:#236c53}.dot-blue{background:#32619b}.dot-wild{background:#5c426c}.unoDeclare{color:var(--gold);justify-content:center;align-items:center;gap:9px;font-size:13px;display:flex}.challengeReveal{color:var(--gold);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:13px}.challengeReveal summary{cursor:pointer}.challengeReveal div{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.challengeReveal span{background:#ffffff10;border-radius:6px;padding:5px 9px}.players .player{flex-basis:30%}.layout{grid-template-columns:minmax(0,1fr) 310px;gap:35px}@media (max-width:760px){.layout{grid-template-columns:1fr}.unoCard.big{width:64px;height:90px}.unoCorner{font-size:12px}.unoCenter{font-size:27px}.unoChoices{flex-wrap:wrap;gap:7px}.unoChoices button{min-width:42%;min-height:48px}.players .player{flex-basis:40%}.handCard .unoColor{font-size:6px}}@media (prefers-reduced-motion:reduce){.pileTop{animation:none}}