@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#183f39;background:#f4f5ed;font-synthesis:none;--red:#ec4c48;--blue:#3894d2;--green:#41966e;--yellow:#efbd3f}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #eaaa28;outline-offset:5px}button{color:inherit}button[hidden]{display:none!important}.topbar{height:86px;background:#193e38;color:#fff;display:flex;align-items:center;padding:0 5%;gap:26px}.brand{font-family:'Outfit',sans-serif;font-size:43px;font-weight:900;color:#f8cf52;text-decoration:none;letter-spacing:-3px;font-style:italic;transform:rotate(-8deg);position:relative;text-shadow:2px 2px #0b2622}.brand-dot{font:10px 'DM Sans',sans-serif;position:absolute;top:5px;right:-9px}.header-divider{height:24px;width:1px;background:#ffffff24}.edition{font-size:12px;letter-spacing:2.3px;font-weight:600;color:#d7e4dc}.header-actions{margin-left:auto;display:flex;align-items:center;gap:19px}.offline{font-size:13px;color:#d3ded9;display:flex;align-items:center;gap:8px}.offline i{height:6px;width:6px;border-radius:50%;background:#a9c38f}.icon-button{position:relative;border:1px solid #ffffff20;border-radius:50%;height:36px;width:36px;background:transparent;color:#e9eee8;font-size:20px}.sound-slash{position:absolute;left:15px;top:5px}.sound-on .sound-slash{display:none}main{max-width:1440px;padding:42px 5% 20px;margin:auto}.game-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#768379;margin-bottom:7px}h1{font-family:'Outfit',sans-serif;font-size:42px;letter-spacing:-1.7px;margin:0;font-weight:600}.heading-actions{display:flex;align-items:center;gap:24px}.text-button{background:none;border:0;font-size:14px;display:flex;align-items:center;gap:8px}.help-icon{border:1.5px solid;border-radius:50%;width:17px;height:17px;font-size:12px;font-weight:bold}.outline-button{background:transparent;border:1px solid #c5cec2;border-radius:8px;padding:12px 17px;font-size:14px;display:flex;gap:8px;align-items:center}.outline-button:hover{background:#e5eade}.game{height:660px;min-height:630px;background:#e8eddf;border:1px solid #d3ddca;border-radius:20px;position:relative;overflow:hidden;box-shadow:0 7px 20px #243f2710;background-image:radial-gradient(ellipse at 50% 40%,#f4f5e970,transparent 68%)}.table-topline{position:absolute;top:25px;left:28px;right:28px;display:flex;justify-content:space-between}.mode{display:flex;gap:7px;align-items:center;background:#dce4d3;padding:7px 10px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:1.5px}.mode i{width:5px;height:5px;background:#3c6750;border-radius:50%}.round-label{font-size:11px;letter-spacing:1.4px;color:#7c8e75;padding:7px 0}.round-label b{font-weight:600;color:#36503e;margin-left:7px}.felt{position:absolute;width:65%;height:310px;left:17.5%;top:140px;border-radius:48%;background:#3d7962;border:8px solid #f0f1df;box-shadow:0 0 0 1px #c4d0b8,0 9px 0 #c7d3bc,0 13px 18px #26432616,inset 0 0 45px #1d50364a}.felt-line{position:absolute;inset:15px;border:1px dashed #ffffff23;border-radius:50%}.table-brand{position:absolute;top:27px;left:0;right:0;text-align:center;color:#ffffff12;font-size:50px;font-style:italic;font-weight:900;font-family:'Outfit',sans-serif;letter-spacing:-3px}.direction-track{position:absolute;inset:12px 12%;display:flex;align-items:center;justify-content:center;pointer-events:none}.direction-track span{font-size:270px;font-family:Arial,sans-serif;line-height:1;color:#a5ceb329;transform:scaleX(1.36);font-weight:100}.piles{position:absolute;display:flex;gap:36px;top:89px;left:50%;transform:translateX(-50%)}.pile-group{display:flex;flex-direction:column;align-items:center;gap:12px}.pile-caption{font-size:9px;letter-spacing:1.6px;color:#d4e6d3b0;font-weight:600}.card{width:86px;height:127px;border:5px solid #fffbed;border-radius:10px;position:relative;box-shadow:0 3px 5px #14382338;display:block;overflow:hidden;padding:0;color:#fff7e6;background:var(--card-color,#173e38);flex-shrink:0;font-family:'Outfit',sans-serif;user-select:none}.red{--card-color:var(--red)}.blue{--card-color:var(--blue)}.green{--card-color:var(--green)}.yellow{--card-color:var(--yellow)}.wild{--card-color:#253e3c}.card .oval{position:absolute;width:72%;height:94%;border-radius:50%;background:#fff8e5;transform:rotate(31deg);left:14%;top:3%;display:flex;align-items:center;justify-content:center}.card .value{color:var(--card-color);font-weight:800;font-size:51px;transform:rotate(-31deg);text-shadow:1px 2px #00000016}.card .corner{position:absolute;top:1px;left:4px;font-size:17px;font-weight:700;line-height:1.2}.card .corner.bottom{top:auto;left:auto;bottom:1px;right:4px;transform:rotate(180deg)}.card .wild-wheel{width:43px;height:63px;border-radius:50%;background:conic-gradient(var(--red) 0 25%,var(--blue) 25% 50%,var(--green) 50% 75%,var(--yellow) 75%);transform:rotate(-31deg);border:2px solid #fff}.card .wild-plus{position:absolute;font-size:29px;color:#fff;transform:rotate(-31deg);text-shadow:2px 2px #173e38;font-weight:800}.card-back{background:#234d42}.back-oval{position:absolute;inset:11% 7%;border-radius:50%;background:#e9c453;transform:rotate(31deg);border:3px solid #f4e8b5;display:flex;align-items:center;justify-content:center}.back-oval b{color:#214536;transform:rotate(-57deg);font-size:30px;font-family:'Outfit',sans-serif;font-weight:900;letter-spacing:-2px}.draw-pile{box-shadow:2px 2px 0 #e7e8d7,4px 4px 0 #778d72,6px 6px 0 #f2f2e2,8px 8px 10px #173e3860;transform:rotate(-7deg);transition:transform .2s}.draw-pile:not(:disabled):hover{transform:rotate(-7deg) translateY(-8px)}.current-color{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:7px;font-size:11px;color:#e4eee0}.current-color i{font-style:normal;opacity:.4;margin:0 3px}#color-dot{width:8px;height:8px;border:1px solid #ffffff60;border-radius:50%}.opponent{position:absolute;z-index:2;display:flex;align-items:center;flex-direction:column}.north{top:31px;left:50%;transform:translateX(-50%)}.west{top:211px;left:5.3%}.east{top:211px;right:5.3%}.player-heading{display:flex;align-items:center;gap:9px}.avatar{width:42px;height:42px;border-radius:50%;background:#d4bfdf;border:3px solid #f9f9eb;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-size:19px;font-weight:600;position:relative;color:#61456c;box-shadow:0 2px 3px #0000000d}.west .avatar{background:#edbd85;color:#785129}.east .avatar{background:#a7c5da;color:#3e5d75}.opponent.active .avatar{outline:2px solid #46735b;outline-offset:3px}.player-details strong{font-size:14px;display:block}.player-details span{font-size:11px;color:#778472;display:block;margin-top:3px}.ai-badge{font-size:9px!important;color:#73826d!important;display:inline!important;border:1px solid #bfcbb4;border-radius:3px;padding:1px 3px;margin-left:4px}.mini-hand{display:flex;margin-top:11px;padding-right:15px;height:54px}.mini-card{width:35px;height:50px;border:2px solid #f9f8e8;border-radius:4px;background:#345a48;margin-right:-16px;box-shadow:1px 1px 2px #21492e40;transform:rotate(var(--rot));transform-origin:center 100%;position:relative}.mini-card:after{content:'U';font-family:'Outfit',sans-serif;font-weight:800;font-size:16px;color:#e8c65c;position:absolute;inset:7px 4px;border:1px solid #e8c65c70;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:italic}.west .mini-hand,.east .mini-hand{margin-top:16px}.uno-badge{color:#b6572d;font-size:12px;font-weight:800;margin-top:8px}.turn-notice{position:absolute;top:464px;left:0;right:0;display:flex;justify-content:center;gap:8px;align-items:center;font-size:13px;min-height:20px}.turn-notice i{height:6px;width:6px;background:#487857;border-radius:50%}.your-area{position:absolute;bottom:50px;left:30px;right:30px;height:134px;display:flex;align-items:center;justify-content:space-between;gap:15px}.your-info{display:flex;gap:10px;align-items:center;min-width:125px;z-index:3}.your-info strong{font-size:14px}.your-info #hand-count{display:block;font-size:12px;color:#75806b;margin-top:5px}.you-avatar{background:#f0d684;color:#74602a;width:44px;height:44px}.online-dot{position:absolute;bottom:-1px;right:0;background:#518755;border-radius:50%;height:11px;width:11px;border:2px solid #e8eddf}.you-tag{font-size:8px;letter-spacing:1px;color:#72826a;margin-left:4px}.hand{display:flex;justify-content:center;align-items:flex-end;flex:1;min-width:0;padding:18px 0 6px;height:150px;isolation:isolate}.hand .card{margin-left:var(--overlap,-16px);transform:translateY(var(--y)) rotate(var(--r));transition:transform .18s,filter .18s,box-shadow .18s;z-index:var(--z);border-width:4px}.hand .card:first-child{margin-left:0}.hand .card:not(:disabled){box-shadow:0 0 0 2px #f3db91,0 5px 7px #173e3830}.hand .card:disabled{filter:saturate(.8) brightness(.94)}.hand .card:not(:disabled):hover,.hand .card:focus-visible{transform:translateY(-24px) rotate(0);z-index:100;box-shadow:0 0 0 3px #efc84f,0 8px 15px #173e3840}.uno-area{min-width:105px;text-align:center;z-index:3}.uno-button{background:#edc650;border:1px solid #d2ac40;border-bottom:4px solid #c09f38;border-radius:13px;box-shadow:0 4px 8px #8d853314;color:#284c3a;font-family:'Outfit',sans-serif;font-size:27px;font-style:italic;font-weight:900;width:100px;height:60px;transform:rotate(-4deg);transition:transform .2s}.uno-button:not(:disabled):hover{transform:rotate(0) scale(1.06)}.uno-button:disabled{opacity:.58}.uno-button.ready{animation:pulse 1s infinite}.uno-area>span{display:block;font-size:10px;color:#839074;margin-top:11px}.table-bottom{position:absolute;bottom:0;left:0;right:0;height:41px;border-top:1px solid #d5deca;display:flex;align-items:center;justify-content:space-between;padding:0 27px;font-size:11px;color:#7c896e;background:#e5ebdb80}.table-bottom-right{font-size:9px;letter-spacing:1.3px;flex-shrink:0}.pass-button{border:0;border-radius:4px;background:#315f48;color:white;padding:5px 9px;font-size:11px}.table-bottom:has(.pass-button:not([hidden])) .table-bottom-right{display:none}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;color:#7e887a;margin-top:21px}footer button{font:inherit;background:none;border:0;color:inherit}footer b{font-weight:500;color:#52694e}.keyboard-icon{font-size:17px;margin-right:7px}.fan-note{text-align:center;font-size:10px;color:#9aa290;margin:26px 0 0}dialog{width:min(460px,calc(100% - 32px));border:1px solid #c5d1b9;border-radius:20px;background:#f5f6ec;color:#244838;box-shadow:0 24px 80px #0b2e3850;padding:34px}dialog::backdrop{background:#102e285c;backdrop-filter:blur(5px)}.modal-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:27px;color:#788773}dialog h2{font-family:'Outfit',sans-serif;font-size:29px;letter-spacing:-.8px;margin:0 0 13px}dialog p,dialog li{font-size:14px;line-height:1.7;color:#6b7b62}dialog ul{padding-left:19px}dialog .eyebrow{margin-bottom:10px}.rule-option{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid #dce2d2}.rule-option strong{font-size:14px}.rule-option small{display:block;font-size:12px;color:#7c8b70;margin-top:5px;line-height:1.5}.rule-option input{accent-color:#3d795c;width:19px;height:19px}.primary{display:block;width:100%;background:#234f3d;color:#fff;border:0;border-radius:8px;padding:13px 16px;font-weight:600;font-size:14px;margin-top:23px}.secondary{display:block;width:100%;background:none;border:1px solid #c4cfba;border-radius:8px;padding:12px;margin-top:10px}.color-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.color-option{height:72px;border:3px solid #fff;border-radius:10px;color:#fff;font-weight:700;font-size:16px;box-shadow:0 2px 6px #173e3820}.color-option.yellow{color:#5d4915}.win-symbol{font-size:50px;color:#cea839;margin-bottom:15px}.result-score{font-size:40px;font-family:'Outfit',sans-serif;font-weight:700;margin-top:20px}.result-score small{font-size:14px;font-weight:400;color:#7a8870}.called-toast{color:#946d1c!important;font-weight:600}@keyframes pulse{50%{box-shadow:0 0 0 7px #edc65030}}@media(min-width:1450px){main{padding-top:49px}.game{height:710px}.felt{top:150px;height:330px}.piles{top:100px}.turn-notice{top:500px}.your-area{bottom:55px}}@media(max-width:1050px){main{padding:30px 3% 20px}.topbar{padding:0 3%}.game{height:640px}.felt{width:66%;left:17%;height:285px}.west{left:3%}.east{right:3%}.your-area{left:20px;right:20px;gap:5px}.your-info{min-width:100px}.uno-area{min-width:90px}.uno-button{width:83px;height:55px}.hand .card{width:76px;height:114px}.card .value{font-size:45px}.felt .card{width:79px;height:117px}.piles{top:78px}.turn-notice{top:441px}.your-area{bottom:48px}.hand{height:139px}footer{font-size:11px;gap:8px}}@media(max-width:700px){.topbar{height:68px;padding:0 20px;gap:18px}.brand{font-size:35px}.edition{font-size:9px;letter-spacing:1.6px}.header-actions{gap:10px}.offline{display:none}main{padding:25px 14px 15px}.game-heading{margin-bottom:20px}h1{font-size:34px}.eyebrow{font-size:9px;letter-spacing:1.5px}.heading-actions{gap:9px}.text-button{font-size:0;gap:0}.help-icon{font-size:13px;width:24px;height:24px;line-height:22px}.outline-button{padding:9px 11px;font-size:12px}.game{height:700px;border-radius:15px}.table-topline{left:15px;right:15px;top:18px}.north{top:27px}.player-heading{gap:6px}.avatar{height:35px;width:35px;font-size:16px}.player-details strong{font-size:12px}.player-details span{font-size:10px}.ai-badge{font-size:8px!important}.west{top:210px;left:12px}.east{top:210px;right:12px}.west .player-heading,.east .player-heading{flex-direction:column;text-align:center}.west .mini-hand,.east .mini-hand{display:none}.felt{width:calc(100% - 128px);left:64px;height:318px;top:145px;border-width:5px;border-radius:45%}.felt-line{inset:10px}.piles{gap:14px;top:115px}.felt .card{width:62px;height:94px;border-width:3px;border-radius:7px}.felt .card .value{font-size:35px}.felt .card .corner{font-size:12px}.back-oval b{font-size:24px}.pile-caption{font-size:7px;letter-spacing:.7px}.current-color{font-size:9px;bottom:35px;gap:4px}.direction-track span{font-size:200px;transform:scaleX(.8)}.table-brand{top:49px;font-size:39px}.turn-notice{top:480px;font-size:12px;padding:0 8px}.your-area{bottom:56px;height:132px;left:11px;right:11px;display:block}.your-info{position:absolute;bottom:139px;left:5px}.your-info .avatar{height:31px;width:31px;font-size:13px}.your-info strong{font-size:12px}.your-info #hand-count{font-size:10px;margin-top:2px}.uno-area{position:absolute;right:1px;bottom:139px;min-width:70px}.uno-button{width:70px;height:42px;font-size:22px;border-radius:9px}.uno-area>span{display:none}.hand{width:100%;height:142px;padding:17px 4px 2px}.hand .card{width:66px;height:101px;border-width:3px;border-radius:8px}.hand .card .value{font-size:39px}.hand .card .corner{font-size:14px}.hand .card .wild-wheel{height:53px;width:34px}.table-bottom{padding:0 14px;height:44px;font-size:10px;gap:8px}.table-bottom-right{display:none}footer{align-items:flex-start;font-size:11px;line-height:1.6}footer>span{max-width:62%}footer button{max-width:34%;text-align:right}footer button b{display:block}.fan-note{font-size:9px;margin-top:22px}.your-info{bottom:131px}.uno-area{bottom:133px}.turn-notice{top:495px}.hand{padding-top:29px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.player-details strong,.your-info strong{font-size:14px}.player-details span,.your-info #hand-count{font-size:12px}.turn-notice{font-size:14px}.pile-caption,.round-label,.mode,.table-bottom-right{font-size:12px;letter-spacing:1px}.current-color,.table-bottom,footer{font-size:12px}.uno-area>span{font-size:12px}.hand.large-hand{overflow-x:auto;overflow-y:hidden;justify-content:flex-start;padding-left:6px;padding-right:10px;scrollbar-width:thin;scrollbar-color:#96ac87 transparent}.hand.large-hand .card{margin-left:-36px;transform:none}.hand.large-hand .card:first-child{margin-left:0}.hand.large-hand .card:not(:disabled):hover{transform:translateY(-12px)}
@media(max-width:700px){.turn-notice{top:466px;font-size:12px}.your-info{bottom:111px}.uno-area{bottom:109px}.pile-caption{font-size:9px;letter-spacing:.3px}.mode,.round-label{font-size:10px}.player-details strong{font-size:12px}.player-details span{font-size:11px}.current-color{font-size:10px}.table-bottom{font-size:11px}.your-info #hand-count{font-size:11px}.table-topline{left:12px;right:12px}}

/* A real, stable discard stack, plus the card traveling into it. */
.piles{z-index:4}
#discard{position:relative;width:86px;height:127px;overflow:visible;isolation:isolate}
#discard .discard-card,#discard .flying-card{position:absolute;inset:0;transform-origin:center;animation:none;pointer-events:none}
#discard .flying-card{z-index:100;will-change:transform;filter:none}
.card-in-flight{opacity:0!important}
.game[aria-busy="true"] .hand .card:not(.card-in-flight){filter:none}
@media(max-width:1050px){#discard{width:79px;height:117px}}
@media(max-width:700px){#discard{width:62px;height:94px}}

/* Smooth, contextual invitation to draw; no layout movement when it appears. */
.draw-card-slot{position:relative;isolation:isolate}
.draw-card-slot::before{content:'';position:absolute;inset:-11px;border:2px solid #f3d36c;border-radius:17px;background:#f3d36c10;box-shadow:0 0 18px 5px #f3d36c35;transform:rotate(-7deg);opacity:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1);pointer-events:none;z-index:-1}
.draw-card-slot.draw-attention::before{opacity:1;animation:draw-halo 1.8s ease-in-out infinite}
.draw-cue{position:absolute;top:-48px;left:50%;margin-left:-16px;width:32px;height:32px;display:grid;place-items:center;background:#efd16b;color:#214c3b;border:1px solid #fff1ac;border-radius:50%;box-shadow:0 3px 10px #173e3830;opacity:0;transform:translateY(-6px);transition:opacity .4s cubic-bezier(.25,.8,.25,1),transform .4s cubic-bezier(.25,.8,.25,1);pointer-events:none;z-index:2}
.draw-cue>span{font-size:24px;line-height:1;font-weight:700;animation:draw-arrow 1.8s ease-in-out infinite}
.draw-attention .draw-cue{opacity:1;transform:translateY(0)}
.draw-flight-layer{position:absolute;inset:0;pointer-events:none;z-index:50;overflow:visible}
.drawn-card-flight{position:absolute;left:0;top:0;margin:0;transform-origin:center;will-change:transform;pointer-events:none;filter:none}
@keyframes draw-arrow{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes draw-halo{0%,100%{box-shadow:0 0 14px 3px #f3d36c28}50%{box-shadow:0 0 25px 7px #f3d36c50}}
@media(max-width:700px){.draw-cue{top:-43px;width:28px;height:28px;margin-left:-14px}.draw-cue>span{font-size:22px}.draw-card-slot::before{inset:-8px;border-radius:13px}}
@media(prefers-reduced-motion:reduce){.draw-cue,.draw-card-slot::before{transition:none}.draw-cue>span,.draw-card-slot.draw-attention::before{animation:none}}

/* Dealer at the upper-left rail; only the discard pile occupies the felt. */
.game{height:780px}
.felt{top:195px;height:330px}
.north{top:35px}
.west,.east{top:315px}
.player-details{min-width:76px}
.opponent.active .avatar{outline:none}
.piles{top:98px;gap:0}
.table-brand{top:43px;font-size:40px}
.turn-notice{top:553px;font-size:15px}
.dealer-station{position:absolute;top:65px;left:48px;display:flex;align-items:center;gap:25px;z-index:6}
.dealer-character{position:relative;width:120px;text-align:center}
.dealer-character img{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 5px #183f3925);transform-origin:65% 85%}
.dealer-tag{display:block;margin-top:5px;font-size:12px;letter-spacing:1.8px;font-weight:700;color:#63735b}
.dealer-deck{padding-top:24px}
.dealer-deck .pile-caption{color:#466346;font-size:12px;font-weight:600}
.dealer-deck .draw-pile{width:76px;height:112px}
.dealer-deck .draw-pile:not(:disabled):hover{transform:rotate(-7deg) translateY(-3px)}
.dealer-deck .draw-card-slot::before{inset:-9px -13px -13px -9px}

/* Arrowheads remain the same readable size at every aspect ratio. */
.table-direction{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.route-track{stroke:#dae8cc;stroke-width:1.5;opacity:.18}
.route-flow{stroke:#eed081;stroke-width:2.5;stroke-dasharray:9 22;stroke-linecap:round;opacity:.48;animation:turn-flow 1.4s linear infinite}
.route-arrow{stroke:#f6d77c;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
@keyframes turn-flow{to{stroke-dashoffset:-31}}
.current-color{bottom:37px;font-size:14px;gap:9px;color:#f5f6e9}
#color-dot{width:13px;height:13px;box-shadow:0 0 0 3px #ffffff15}
#color-label{font-weight:600}
#direction-label{font-size:14px;font-weight:600;letter-spacing:.2px}
.turn-ring{position:absolute;left:0;top:0;width:54px;height:54px;border:3px solid #e7b947;border-radius:50%;box-shadow:0 0 0 3px #f5d47925,0 0 15px #ddb74b35;pointer-events:none;z-index:12;opacity:0;will-change:transform}

/* The selected wild color rises into view, holds, then fades away. */
.color-announcement-position{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:20}
.color-announcement{display:flex;align-items:center;flex-direction:column;padding:15px 23px 13px;border:1px solid #ffffff70;border-radius:22px;background:#173f39ed;box-shadow:0 14px 35px #153b3860;color:#fff9e8;min-width:146px;backdrop-filter:blur(6px)}
.color-announcement[hidden]{display:none}
.color-orb{display:block;width:75px;height:75px;background:var(--chosen-color);border:5px solid #fff7e9;border-radius:50%;box-shadow:0 0 26px color-mix(in srgb,var(--chosen-color),transparent 45%),inset 0 0 14px #ffffff20;margin-bottom:12px}
.color-announcement strong{font-family:'Outfit',sans-serif;font-size:22px;letter-spacing:1.2px}
.color-picked{font-size:11px;letter-spacing:1.2px;margin-top:5px;color:#c4d7c5}
.hand.hand-layout .card{transition:none!important}
@media(min-width:1450px){.game{height:800px}.felt{top:200px;height:350px}.piles{top:108px}.turn-notice{top:573px}.dealer-station{left:65px;top:70px}.dealer-character{width:132px}}
@media(max-width:1050px){.game{height:780px}.felt{top:200px;height:325px}.piles{top:94px}.turn-notice{top:553px}.dealer-station{top:67px;left:26px;gap:20px}.dealer-character{width:108px}.west,.east{top:321px}}
@media(max-width:700px){
 .game{height:860px}
 .north{top:55px;right:17px;left:auto;transform:none}
 .north .player-details{min-width:59px}
 .dealer-station{top:76px;left:14px;gap:17px}
 .dealer-character{width:83px}
 .dealer-tag{font-size:10px;letter-spacing:1.2px;margin-top:7px}
 .dealer-deck{padding-top:20px;gap:12px}
 .dealer-deck .draw-pile{width:59px;height:89px;border-width:3px;border-radius:7px}
 .dealer-deck .back-oval b{font-size:23px}
 .dealer-deck .pile-caption{font-size:10px}
 .dealer-deck .draw-cue{top:-38px}
 .felt{top:235px;left:56px;width:calc(100% - 112px);height:360px}
 .west,.east{top:373px}
 .west{left:7px}.east{right:7px}
 .west .player-details,.east .player-details{min-width:63px}
 .piles{top:126px}
 .table-brand{top:52px;font-size:34px}
 .current-color{bottom:42px;flex-wrap:wrap;gap:5px 7px;padding:0 12px;font-size:13px}
 .current-color i{display:none}
 #direction-label{flex-basis:100%;font-size:12px;text-align:center;margin-top:4px}
 #color-dot{width:11px;height:11px}
 .turn-notice{top:622px;font-size:13px}
 .color-announcement{min-width:119px;padding:12px 15px;border-radius:18px}
 .color-orb{width:62px;height:62px;border-width:4px}
 .color-announcement strong{font-size:19px}
 .color-picked{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.route-flow{animation:none}.turn-ring{will-change:auto}}
@media(max-width:700px){.north .mini-hand{height:42px;padding-right:13px}.north .mini-card{width:24px;height:38px;margin-right:-13px}.north .mini-card:after{font-size:12px;inset:5px 3px}}

/* Playable cards use violet and white instead of blending into the gold/green table. */
.hand .card.is-playable{border-color:#f3edff;box-shadow:0 0 0 3px #7748e9,0 0 0 5px #fdf9ffb3,0 8px 17px #43227945;filter:none;opacity:1}
.hand .card.is-playable:not(:disabled):hover,.hand .card.is-playable:focus-visible{box-shadow:0 0 0 4px #9766ff,0 0 0 7px #fff8,0 10px 23px #53249855;outline-color:#7748e9}
.hand .card:disabled:not(.card-in-flight){filter:saturate(.55) brightness(.88)}
.game[aria-busy="true"] .hand .card.is-playable{box-shadow:0 3px 5px #14382338}
.game.is-opening .hand .card:not(.card-in-flight){filter:none}
.game.is-opening .current-color,.game.is-opening .table-direction,.game.is-opening #turn-ring{opacity:0}
.current-color,.table-direction{transition:opacity .4s ease}

/* The original illustration is articulated as individual SVG clipping layers. */
.dealer-rig{position:relative;width:100%;aspect-ratio:1;filter:drop-shadow(0 5px 5px #183f3925)}
.dealer-character .dealer-part{position:absolute;inset:0;width:100%;height:100%;filter:none;animation:none;pointer-events:none}
.dealer-head-group,.dealer-dealing-arm{position:absolute;inset:0;transform-origin:45% 38%}
.dealer-dealing-arm{transform-origin:18% 54%}
.dealer-character .dealer-holding-arm{transform-origin:84% 61%}
.dealer-character .dealer-jaw{transform-origin:51% 27%}
#dealer-release{position:absolute;left:29%;top:66%;width:23%;height:18%;transform:rotate(-18deg);opacity:0;pointer-events:none;border:2px solid #fffbed;border-radius:4px}
.dealer-laugh{position:absolute;right:-30px;top:-8px;background:#fff6d8;border:1px solid #e0c786;border-radius:12px 12px 12px 2px;padding:6px 9px;font-size:14px;font-weight:800;opacity:0;transform:translateY(8px) scale(.8);transition:opacity .25s ease,transform .3s ease;pointer-events:none}
.is-laughing .dealer-laugh{opacity:1;transform:translateY(0) scale(1)}
.is-laughing .dealer-head-group{animation:dealer-head-laugh .45s ease-in-out infinite}
.dealer-character.is-laughing .dealer-jaw{animation:dealer-jaw-laugh .225s ease-in-out infinite}
.dealer-character.is-laughing .dealer-holding-arm{animation:dealer-hand-laugh .45s ease-in-out infinite}
@keyframes dealer-head-laugh{0%,100%{transform:rotate(-3deg) translateY(-1%)}50%{transform:rotate(3deg) translateY(-3%)}}
@keyframes dealer-jaw-laugh{0%,100%{transform:translateY(0)}50%{transform:translateY(3.3%) rotate(2deg)}}
@keyframes dealer-hand-laugh{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
.route-flow{animation:none}
.skip-announcement{position:absolute;left:0;top:0;z-index:70;display:flex;align-items:center;flex-direction:column;gap:10px;pointer-events:none;transform-origin:center;color:#fff9ee;will-change:transform,opacity}
.skip-orb{display:grid;place-items:center;width:84px;height:84px;background:#e64c64;border:5px solid #fff8ee;border-radius:50%;box-shadow:0 0 0 8px #e64c6425,0 10px 35px #46222e66}
.skip-orb svg{width:64px;height:64px;fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round}
.skip-announcement strong{white-space:nowrap;font-size:14px;letter-spacing:.8px;background:#3e2631ed;border:1px solid #ffffff45;border-radius:8px;padding:7px 10px;box-shadow:0 5px 12px #172e2b20}
@media(prefers-reduced-motion:reduce){.is-laughing .dealer-head-group,.dealer-character.is-laughing .dealer-jaw,.dealer-character.is-laughing .dealer-holding-arm{animation:none}.dealer-laugh{transition:none}}

.mode-link{color:#f3d778;font-size:14px;text-decoration:none}