*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Arial,Helvetica,sans-serif;color:#fff;background:#033e3d}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid white;outline-offset:5px}button:disabled{cursor:default;opacity:.35}button:hover:not(:disabled){filter:brightness(1.12)}[hidden]{display:none!important}#table{position:relative;width:100%;height:100%;min-height:480px;overflow:hidden;background:radial-gradient(ellipse at 50% 44%,#078877 0%,#086557 36%,#034342 77%,#023638 100%)}.rim{position:absolute;left:50%;top:50%;width:min(88vw,900px);height:130%;border-radius:50%;border:55px solid #003f3b66;transform:translate(-50%,-50%);box-shadow:inset 0 0 100px #00534455}.rim:after{content:"";position:absolute;inset:24px;border:2px solid #f0ba2922;border-radius:50%}#ornaments{position:absolute;inset:0;pointer-events:none}.ornament{position:absolute;color:#23ae8760;font-family:Georgia,serif;font-size:42px;transform:translate(-50%,-50%)}.topbar{position:absolute;z-index:20;top:20px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between}.icon-button{border:0;background:none;color:#fff;font-size:34px;width:46px;height:46px;border-radius:10px}.wordmark{font-size:14px;letter-spacing:4px;color:#f3ddad99;font-weight:700}.screen{position:absolute;inset:0}.medallion{width:210px;height:210px;border:8px solid #ffcf19;border-radius:50%;background:radial-gradient(circle,#1cbb8f,#005b40 70%);box-shadow:0 0 0 3px #b78309,inset 0 0 30px #002e25,0 15px 30px #002b3d44;position:relative;margin:0 auto;overflow:hidden}.logo-cards{position:absolute;inset:42px 15px -45px}.logo-cards img{position:absolute;width:95px;left:40px;top:0;filter:drop-shadow(0 2px 3px #001c19)}.logo-cards img:first-child{transform:rotate(-23deg);left:0;top:12px}.logo-cards img:last-child{transform:rotate(20deg);left:80px;top:10px}.spark{position:absolute;color:#fff6ba;text-shadow:0 0 9px #fff;font-size:25px}.s1{top:15px;left:30px}.s2{top:30px;right:15px}#start{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:65px 20px 20px}h1{font-family:Georgia,serif;font-size:clamp(32px,5vw,54px);letter-spacing:3px;margin:22px 0 7px;text-shadow:0 3px 0 #063c2c;color:#ffdb70}.tagline{font-size:12px;font-weight:700;letter-spacing:2px;color:#c3dfcd;margin:0 0 27px}.setup{text-align:center}.setup label{display:block;font-size:17px;font-weight:700;margin-bottom:7px}.stepper{display:flex;background:#003d34;border:2px solid #ff9a24;border-radius:5px;overflow:hidden;align-items:center}.stepper button{border:0;background:#ff9a24;color:white;width:46px;height:39px;font-size:23px}.stepper span{width:170px;font-size:19px;font-weight:700}.gold{background:linear-gradient(#fff0b0 0%,#ffd04c 8%,#ffae00 47%,#ffc41e 80%,#ffe284 100%);color:white;border:4px solid #d28e0c;border-radius:50px;box-shadow:0 0 0 3px #ffe08c,inset 0 0 0 3px #ffdd67,0 7px 0 #885408,0 12px 24px #00352e80;text-shadow:0 2px 1px #b47811;font-weight:bold;padding:12px 40px}.big{font:700 43px Georgia,serif;min-width:300px;margin-top:35px;position:relative}.big:before{content:"✦   ✦   ✦   ✦";position:absolute;left:20px;right:20px;top:-15px;font-size:19px;letter-spacing:16px;text-shadow:0 0 9px white}.start-note{font-size:13px;color:#9bc7b4;margin-top:24px}.opponent{position:absolute;left:6%;top:13%;display:flex;gap:12px;align-items:center;background:#012d2ce0;padding:10px 18px 10px 10px;border-radius:6px;min-width:150px}.avatar{display:grid;place-items:center;background:linear-gradient(#adc2c0,#e2e9e2);font-size:49px;color:#fff;width:66px;height:72px;border:4px solid #ded7be}.opponent strong{display:block;font-size:19px}.opponent span{display:block;font-size:12px;color:#b4cbbf;margin-top:5px}.scoreboard{position:absolute;right:6%;top:12%;width:170px;border-radius:5px;overflow:hidden;background:#002d28e6;border-bottom:10px solid #ff9b27;box-shadow:0 5px 20px #00373055}.score-title{background:#ff9b27!important;font-weight:700;justify-content:center!important;gap:7px}.scoreboard>div{display:flex;justify-content:space-between;padding:8px 14px;font-size:17px;border-bottom:1px solid #a58238}.scoreboard b{font-size:23px}.hand{position:absolute;left:50%;display:flex;justify-content:center;width:80%;transform:translateX(-50%)}.ai-hand{top:9%;height:135px}.card{width:112px;aspect-ratio:226/314;position:relative;border:0;padding:0;background:#f7f2df;border-radius:8px;box-shadow:0 3px 7px #002d2780;flex-shrink:0;transition:transform .22s,filter .22s;transform:translateY(var(--y,0px)) rotate(var(--r,0deg));transform-origin:50% 100%;overflow:hidden}.card img{width:100%;height:100%;display:block}.card.back{border:5px solid #fff;outline:1px solid #7197aa;background-color:#418cb7;background-image:conic-gradient(#ffffff55 25%,transparent 0 50%,#ffffff55 0 75%,transparent 0);background-size:15px 15px}.card.back:after{content:"♧";display:grid;place-items:center;position:absolute;inset:30% 16%;border:3px double #d8edf5;border-radius:50%;color:#d8edf5;background:#488bb3;font:38px Georgia,serif}.ai-hand .card{width:88px;margin-left:-29px}.ai-hand .card:first-child{margin-left:0}.my-hand{bottom:89px;height:193px;align-items:flex-end}.my-hand .card{width:138px;margin-left:-29px;border:2px solid #d4c49e}.my-hand .card:first-child{margin-left:0}.my-hand .card:hover:not(:disabled){transform:translateY(calc(var(--y,0px) - 23px)) rotate(var(--r,0deg));filter:brightness(1.05)}.my-hand .card:disabled{opacity:1;filter:brightness(.78)}.my-hand .card.eligible{box-shadow:0 0 0 3px #ffd45f,0 0 24px #ffdc5980}.stock-area{position:absolute;left:17%;top:43%;width:130px;height:140px;transform:translate(-50%,-10%)}#stock-cards .card{position:absolute;width:83px;left:18px;top:0}#stock-cards .turnup{transform:rotate(90deg);left:58px;top:20px}#stock-cards .back{transform:rotate(-7deg);box-shadow:3px 3px 0 #d1e3e4,6px 6px 0 #447b98,8px 8px 0 #d1e3e4}#stock-label{position:absolute;top:134px;left:5px;width:160px;text-align:center;color:#b7d4c4;font-size:13px}.trump-info{position:absolute;right:12%;top:44%;display:flex;flex-direction:column;align-items:center;gap:4px}.trump-info span{font-size:12px;letter-spacing:2px;color:#accaba}.trump-info b{font-size:53px;color:#f7db8d;text-shadow:0 2px 3px #00352c}.trick{position:absolute;top:35%;left:50%;transform:translateX(-50%);width:245px;height:185px}.trick .card{position:absolute;left:22px;top:0;width:112px;animation:deal .25s ease-out}.trick .card+ .card{left:116px;top:28px;transform:rotate(9deg)}@keyframes deal{from{opacity:0;translate:0 -22px}to{opacity:1;translate:0 0}}#message{position:absolute;top:63%;left:50%;transform:translateX(-50%);text-align:center;font-size:16px;color:#f9e8b9;width:70%;text-shadow:0 2px 3px #003c31}.actions{position:absolute;left:50%;bottom:300px;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap}.small-button{border:1px solid #b8b07480;border-radius:5px;background:#003c33c9;color:#f0e5c0;font-size:13px;padding:9px 13px}.small-button.active{background:#d99620;color:#fff;border-color:#ffe099}.player-panel{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;background:#002d29e6;border:1px solid #b0953b66;border-radius:8px;padding:8px 19px 8px 8px;min-width:285px}.avatar.small{width:43px;height:46px;font-size:32px;border-width:2px}.player-panel strong{display:block;font-size:15px}.player-panel span{font-size:12px;color:#b3c8bc}.eyes{margin-left:20px;white-space:nowrap}.eyes b{font-size:30px;color:#ffdc77}.eyes span{font-size:11px}.home{position:absolute;left:22px;bottom:23px;background:#ff9c25}.last{position:absolute;right:24px;bottom:31px}dialog{border:2px solid #d5ad49;background:linear-gradient(140deg,#076757,#003c36);color:white;border-radius:15px;padding:30px;width:min(90vw,480px);box-shadow:0 20px 70px #001d1e;max-height:85vh}dialog::backdrop{background:#001e25bb;backdrop-filter:blur(4px)}dialog h2{font:700 30px Georgia,serif;color:#ffdd86;margin:0 0 17px}dialog p,dialog li{font-size:15px;line-height:1.6;color:#d9e7df}dialog ul{padding-left:20px}dialog .gold{font-size:18px;margin-top:15px;padding:12px 25px}dialog .small-button{margin-left:12px}dialog .result{font-size:42px;color:#ffda69;text-align:center;font-weight:700;margin:20px}dialog .last-cards{display:flex;gap:12px;justify-content:center}dialog .last-cards .card{width:95px}.rules-link{color:#ffdb80} @media(min-height:760px){.my-hand{bottom:115px}.actions{bottom:335px}.player-panel{bottom:27px}#message{top:60%}.medallion{width:245px;height:245px}.logo-cards{top:55px;left:30px}.big{margin-top:45px}.trick{top:37%}}@media(max-height:650px) and (min-width:701px){.medallion{width:165px;height:165px}.logo-cards{inset:32px 2px -60px;transform:scale(.85);transform-origin:top center}h1{font-size:36px;margin-top:15px}.tagline{margin-bottom:17px}.big{margin-top:23px;padding:6px 35px}.start-note{margin-top:19px}.my-hand{height:160px;bottom:75px}.my-hand .card{width:112px}.actions{bottom:245px}.ai-hand .card{width:72px}.trick .card{width:88px}.trick{top:34%;height:135px}.trick .card+.card{left:99px}#message{top:57%}.stock-area{top:37%}.player-panel{bottom:8px}.topbar{top:9px}}@media(max-width:700px){#table{min-height:580px}.rim{width:140%;height:105%;border-width:32px}.topbar{top:10px;left:12px;right:12px}.wordmark{font-size:12px}.opponent{left:15px;top:82px;min-width:0;padding:7px;gap:7px}.opponent .avatar{width:38px;height:44px;font-size:30px;border-width:2px}.opponent strong{font-size:14px}.opponent span{font-size:10px}.scoreboard{right:15px;top:78px;width:111px;border-bottom-width:5px}.scoreboard>div{font-size:12px;padding:5px 9px}.scoreboard b{font-size:17px}.ai-hand{top:180px;width:65%}.ai-hand .card{width:64px;margin-left:-21px}.stock-area{left:12%;top:43%;transform:scale(.73);transform-origin:left center}.trump-info{right:7%;top:44%}.trump-info span{font-size:10px}.trump-info b{font-size:40px}.trick{top:39%;width:170px;height:150px}.trick .card{width:80px;left:5px}.trick .card+.card{left:77px;top:23px}#message{top:auto;bottom:295px;width:92%;font-size:14px}.actions{bottom:251px;gap:5px;width:95%;justify-content:center}.actions .small-button{padding:9px 8px;font-size:11px}.my-hand{bottom:90px;width:100%;height:145px}.my-hand .card{width:94px;margin-left:-28px}.player-panel{min-width:240px;padding-right:10px;gap:7px;bottom:12px}.eyes{margin-left:12px}.home{left:9px;bottom:24px;width:34px;font-size:26px;height:34px}.last{right:7px;bottom:27px;width:49px;white-space:normal;font-size:10px;padding:4px}.medallion{width:195px;height:195px}.logo-cards{left:8px}h1{font-size:35px}.tagline{font-size:10px;letter-spacing:1.6px}.big{font-size:38px;min-width:265px}.ornament{font-size:30px}}@media(max-width:700px) and (max-height:720px){.ai-hand{top:140px}.ai-hand .card{width:53px}.trick{top:35%}.trick .card{width:70px}.stock-area{top:34%}.trump-info{top:37%}#message{bottom:269px}.actions{bottom:227px}.my-hand{bottom:84px}.my-hand .card{width:83px;margin-left:-22px}}
@media(min-width:701px) and (min-height:651px){.my-hand{bottom:86px;height:165px}.my-hand .card{width:118px}.actions{bottom:270px}#message{top:auto;bottom:323px}.trick{top:30%;height:155px}.trick .card{width:94px}.trick .card+.card{left:105px;top:22px}.player-panel{bottom:14px}}