:root{--ink:#293d4b;--cream:#fff8e9;--gold:#ffc967;--pink:#f3a5a4;--green:#245d57;--muted:#6c7779}*{box-sizing:border-box}body{margin:0;background:#f8f1e1;color:var(--ink);font-family:Trebuchet MS,Arial,sans-serif;background-image:radial-gradient(#ccbda438 .8px,transparent .8px);background-size:9px 9px}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #d0c9b9;background:#fffaf0;color:var(--ink);border-radius:12px;padding:11px 16px;font-weight:bold;transition:transform .15s,box-shadow .15s}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 0 #253b4920}button:disabled{cursor:default;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #dd5c58;outline-offset:3px}[hidden]{display:none!important}.mast{display:flex;justify-content:space-between;align-items:center;padding:22px 4vw;border-bottom:1px solid #d7cdb9}.brand{font-size:17px;letter-spacing:3px;text-decoration:none;font-weight:bold;color:var(--ink)}.brand span{display:block;font-size:9px;letter-spacing:4px;margin-top:6px;color:var(--muted)}nav{display:flex;gap:8px}nav button{font-size:12px;background:transparent}main{max-width:1180px;margin:auto;padding:25px}.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;min-height:350px}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:bold;color:#6d7774;margin:0 0 10px}h1,h2,p{margin-top:0}h1{font-family:Georgia,serif;font-size:90px;letter-spacing:-4px;line-height:.9;margin-bottom:22px}h1>span{color:#c9544e;font-style:italic}.spark{font-size:40px;vertical-align:top;color:#e3a741;margin-left:5px}.intro{font-size:18px;line-height:1.5}.tags{display:flex;gap:8px;margin-bottom:10px}.tags span,.pill{padding:6px 10px;border:1px solid #d6cbb8;border-radius:20px;font-size:11px;font-weight:bold}small{font-size:10px;color:var(--muted)}.clubArt{position:relative;height:330px}.clubArt img{width:140px;border:6px solid #fff7e6;border-radius:35px;box-shadow:0 12px 18px #3332;position:absolute;transform:rotate(-12deg);left:8%;top:20px}.clubArt img:nth-child(2){left:58%;top:5px;transform:rotate(14deg)}.clubArt img:last-child{left:60%;top:174px;transform:rotate(10deg);width:130px}.heroCard{position:absolute;left:30%;top:82px;width:154px;height:216px;background:#fffaf0;border:7px double #e2bf83;border-radius:18px;transform:rotate(-10deg);box-shadow:0 15px 30px #3333;color:#ce5552;font: bold 60px Georgia;padding:10px}.heroCard span{display:block;text-align:center}.heroCard small{font:7px Trebuchet MS;letter-spacing:1px;color:#bb6a51;display:block}.setupPanel{border:1px solid #d9cdb6;background:#fffbf2;border-radius:24px;padding:26px;box-shadow:0 9px 0 #e8deca}.sectionTop{display:flex;align-items:center;justify-content:space-between}h2{font-family:Georgia,serif;font-size:25px;letter-spacing:-.4px;margin-bottom:14px}.options{display:flex;align-items:center;gap:20px;margin:14px 0 20px}label{font-size:12px;font-weight:bold;display:block}input,select{display:block;border:1px solid #d6cebc;border-radius:9px;background:#fffdf7;color:var(--ink);padding:10px;margin-top:6px;max-width:100%}.check{display:flex;align-items:center;gap:8px}.check input{margin:0}.seats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.seat{border:1px solid #ded6c5;padding:14px;border-radius:16px;background:#f6f0e4}.seat img{width:62px;height:62px;border-radius:18px;float:left;margin:0 10px 8px 0}.seat .seatNo{display:block;font-size:10px;letter-spacing:1px;margin:5px 0}.seat input,.seat select{width:100%;font-size:12px}.seat label{clear:both}.seat .characterName{font-family:Georgia,serif;font-size:14px;min-height:45px}.launch{display:flex;gap:24px;align-items:center;margin-top:22px}.launch p{margin:0;font-size:12px;color:var(--muted)}.primary{background:#cf5d52;border-color:#b44d44;color:white;box-shadow:0 4px 0 #a9453d;padding:14px 25px}#joinPanel{border-top:1px solid #ddd;padding-top:18px;margin-top:20px;display:flex;gap:12px;align-items:end}footer{text-align:center;font-size:11px;color:#788080;padding:25px}#notice{text-align:center;min-height:20px;color:#9b403c;font-size:14px;margin-top:18px}.gameHeading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.gameHeading h1{font-size:40px;letter-spacing:-2px;margin:0}.opponents{display:flex;justify-content:center;gap:12px;margin-bottom:15px}.opponent{background:#fffaf0;border:2px solid #dfd5c0;border-radius:17px;padding:10px;display:flex;gap:10px;align-items:center;max-width:300px;flex:1}.opponent img{width:55px;border-radius:13px}.opponent strong{font-size:13px;display:block}.opponent small{display:block;margin-top:5px}.opponent.current{border-color:#d35e51;box-shadow:0 3px 0 #d35e51}.table{border:9px solid #b17f55;outline:1px solid #815737;border-radius:80px;background:radial-gradient(ellipse at 50% 10%,#3b8071,#235b55);box-shadow:inset 0 0 0 3px #e5bf78,inset 0 5px 25px #152f4055,0 12px 20px #47432919;color:#fff5db;padding:18px 24px;text-align:center;position:relative}.tableDoodle{font-size:8px;letter-spacing:2px;opacity:.45;margin-bottom:12px}#turn{font-weight:bold;font-size:18px;margin:4px 0 12px}.centerPlay{display:flex;gap:25px;justify-content:center;align-items:center}.card{width:94px;height:132px;border-radius:12px;background:#fffdf3;color:#273f4b;box-shadow:0 3px 0 #cec6b0,0 7px 9px #173b4233;border:1px solid #ddceb0;position:relative;flex-shrink:0;text-align:left;font: bold 24px Georgia;padding:8px}.card.red{color:#c34c4a}.card .symbol{display:block;text-align:center;font-size:46px;line-height:1.1}.card .corner{font-size:15px;position:absolute;right:8px;bottom:5px;transform:rotate(180deg)}.card.wild:after{content:'WILD';font:7px Trebuchet MS;letter-spacing:2px;position:absolute;bottom:8px;left:8px;color:#b28b44}.back{background:repeating-linear-gradient(45deg,#d46357 0px,#d46357 6px,#cf5a50 6px,#cf5a50 12px);border:5px solid #fff0d5;text-align:center;color:#fff2d2}.back span{font-size:65px;border:1px solid #f4ca9b;border-radius:50%;display:block;line-height:1.2}.back small{color:#fff3d6;font:9px Trebuchet MS;display:block;margin-top:4px}.activeSuit{background:#ffefd4;color:#293d4b;min-width:115px;border-radius:15px;padding:12px;box-shadow:0 4px 0 #173c39}.activeSuit small{font-size:9px;letter-spacing:1px}.activeSuit b{display:block;font:40px Georgia}.activeSuit span{display:block;font-size:12px;font-weight:bold}.speech{font-family:Georgia,serif;font-style:italic;font-size:14px;min-height:35px;margin:18px auto 0;max-width:520px;line-height:1.4}.handHeading{display:flex;justify-content:space-between;font-size:13px;margin:20px 0 10px}.handHeading span{font-size:11px;color:#677774}.hand{display:flex;gap:9px;overflow-x:auto;padding:8px 7px 14px;min-height:160px;scrollbar-color:#bd9580 #eee4d0}.hand .card{width:86px;height:120px;opacity:.68}.hand .card.legal{opacity:1;border:3px solid #e3aa3f;box-shadow:0 4px 0 #b58a3e}.hand .card:disabled{opacity:.65}.hand .card.legal:hover{transform:translateY(-6px)}.overlay{position:fixed;inset:0;background:#233c49fa;display:grid;place-items:center;z-index:20}.modal,dialog{padding:30px;border-radius:24px;background:#fff8e9;color:var(--ink);border:1px solid #d8c9b0;max-width:650px;width:calc(100% - 28px);text-align:center;box-shadow:0 25px 100px #0004}.modal p{line-height:1.6}dialog::backdrop{background:#18323ccc;backdrop-filter:blur(3px)}dialog{max-height:85dvh;overflow:auto}.privacyIcon{font:50px Georgia;color:#d0665b;margin:10px}.close{float:right}#infoContent{text-align:left;line-height:1.6;clear:both}#infoContent h2{padding-top:10px}#infoContent label{padding:8px 0}#suitButtons{display:grid;grid-template-columns:1fr 1fr;gap:12px}#suitButtons button{font-size:22px;padding:20px}#result{padding:15px;background:#fff2dc;color:#263e49;border-radius:20px;margin:12px auto;max-width:600px}#result p{margin:8px 0}.scoreTable{width:100%;border-collapse:collapse;font-size:13px}.scoreTable td,.scoreTable th{padding:6px;border-bottom:1px solid #dacdb5}#onlineControls{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}#lobby{padding:20px;background:#fff5dd;border-radius:16px;margin-bottom:14px}#guide{margin:10px auto;font-size:12px;max-width:500px;padding:8px;border:1px dashed #c9d6b7;border-radius:10px}.burst{animation:wild .6s ease-out}.pill{display:inline-block;margin-left:5px}#replaceControls{width:100%;font-size:12px}#replaceControls button{font-size:11px}.settingsGrid{display:grid;gap:8px}.settingsGrid label{display:flex;gap:12px;align-items:center}.settingsGrid input{margin:0}#inviteBtn{background:#ffe4a9}@keyframes wild{0%{transform:scale(.8) rotate(-15deg);filter:drop-shadow(0 0 0 #ffda79)}60%{transform:scale(1.25) rotate(8deg);filter:drop-shadow(0 0 22px #ffda79)}100%{transform:scale(1)}}
@media(max-width:750px){.mast{padding:13px 16px;align-items:start}.brand{font-size:12px}.brand span{font-size:7px;letter-spacing:2px}nav{gap:4px;flex-wrap:wrap;justify-content:end;max-width:245px}nav button{padding:7px 9px;font-size:10px}main{padding:16px}.hero{min-height:260px}.hero h1{font-size:63px}.intro{font-size:14px}.clubArt{height:240px}.clubArt img{width:85px;border-width:3px;left:0}.clubArt img:nth-child(2){left:57%}.clubArt img:last-child{left:58%;top:136px;width:85px}.heroCard{width:110px;height:152px;left:17%;top:60px;font-size:42px}.heroCard small{font-size:5px}.tags{gap:3px;flex-wrap:wrap}.tags span{font-size:9px;padding:4px 7px}.seats{grid-template-columns:repeat(2,1fr)}.setupPanel{padding:18px}.sectionTop{align-items:start;gap:12px}.sectionTop h2{font-size:21px}.options{gap:12px;flex-wrap:wrap}.launch{gap:14px}.launch p{font-size:10px}.gameHeading{margin-bottom:12px}.gameHeading h1{font-size:30px}.gameHeading .eyebrow{font-size:8px;letter-spacing:1px}.pill{font-size:9px}.opponents{gap:6px;margin-bottom:10px}.opponent{padding:7px;gap:5px;flex-direction:column;text-align:center}.opponent img{width:40px}.opponent strong{font-size:10px}.opponent small{font-size:9px;margin-top:3px}.table{border-width:6px;border-radius:35px;padding:12px 10px}.tableDoodle{font-size:6px;letter-spacing:1px}.centerPlay{gap:17px}.centerPlay .card{width:76px;height:108px;font-size:21px}.card .symbol{font-size:38px}.back span{font-size:47px}.activeSuit{min-width:92px;padding:9px}.activeSuit b{font-size:34px}#turn{font-size:14px}.speech{font-size:12px;margin-top:14px;min-height:34px}.handHeading{margin-top:15px}.hand{min-height:137px}.hand .card{width:77px;height:109px;font-size:22px;min-width:77px}#joinPanel{flex-wrap:wrap}footer{padding:10px;font-size:9px}#notice{font-size:12px;margin:9px 0}.handHeading span{font-size:9px}.handHeading strong{font-size:12px}}
@media(max-width:430px){.hero{grid-template-columns:1fr .75fr}.hero h1{font-size:51px}.hero .eyebrow{font-size:8px;letter-spacing:1px}.clubArt img:nth-child(2){left:48%;width:68px}.clubArt img:last-child{left:47%;width:72px}.heroCard{width:93px;height:139px;left:9%}.tags span:last-child{display:none}.hero .intro{font-size:12px}.clubArt{height:230px}.sectionTop{display:block}.sectionTop>label{margin-bottom:10px}.launch{flex-direction:column;align-items:stretch}.launch p{text-align:center}.options{gap:10px}.check{font-size:10px}.gameHeading{gap:8px}.gameHeading>div:last-child{max-width:170px;text-align:right}.opponent strong{max-width:95px}.handHeading{gap:8px}.card .corner{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.dealt .card{animation:dealIn .35s ease-out}.reaction img{animation:reaction .45s ease-out}@keyframes dealIn{from{transform:translateY(16px);opacity:0}to{transform:translateY(0)}}@keyframes reaction{50%{transform:rotate(-6deg) scale(1.08)}}