:root{color-scheme:dark;--bg:#071018;--line:#2e4552;--gold:#e6b64c;--felt:#0b684d}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(circle at top,#17394c,#071018 55%);color:#f6fbff;font-family:Inter,system-ui,sans-serif}button,a{font:inherit}.top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line);background:#071018e8}.top a{color:white;text-decoration:none;font-weight:800}.top nav{display:flex;gap:8px}.top nav a,.top button,.actions button{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#10232f;color:white}.shell{width:min(1200px,100%);margin:auto;padding:clamp(8px,2vw,22px)}.intro{display:flex;justify-content:space-between;gap:14px;align-items:end}.intro span{color:var(--gold);font-size:11px;letter-spacing:.16em}.intro h1{font-size:clamp(34px,6vw,68px);margin:4px 0}.intro p{color:#98afbc}.primary{background:var(--gold)!important;color:#111!important;border:0;border-radius:10px;padding:13px 18px;font-weight:900}.table{position:relative;margin-top:14px;min-height:clamp(520px,72vh,760px);border:12px solid #704a28;border-radius:42%/26%;background:radial-gradient(ellipse,#167d5d,var(--felt) 62%,#064333);box-shadow:inset 0 0 0 4px #ad7d40,0 18px 50px #0009;padding:18px}.player{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:9px;align-items:center;background:#071018d8;border:1px solid #ffffff25;border-radius:12px;padding:7px 10px;z-index:3}.opponent{top:14px}.you{bottom:148px}.avatar{width:38px;height:38px;border-radius:50%;background:#142b38;display:grid;place-items:center;font-size:12px;font-weight:900}.player small{display:block;color:#a7bac4}.backs{display:flex}.backs img{width:22px;margin-left:-9px}.center{position:absolute;inset:30% 20% 35%;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:10px}.trump,.talon{text-align:center}.trump img,.talon img,.trick img{height:clamp(80px,12vw,125px);border-radius:7px}.trick{display:flex;justify-content:center;gap:10px;min-height:130px}.talon{position:relative}.talon b{position:absolute;right:10%;top:0;background:#071018;padding:3px 6px;border-radius:8px}.status{position:absolute;left:50%;top:24%;transform:translateX(-50%);text-align:center;background:#071018cc;border-radius:10px;padding:8px 12px}.status span{display:block;color:#a7bac4}.actions{position:absolute;bottom:108px;left:8%;right:8%;display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.hand{position:absolute;bottom:12px;left:5%;right:5%;height:100px;display:flex;justify-content:center;align-items:end;overflow-x:auto}.hand img{height:clamp(84px,13vw,125px);margin-left:-28px;border-radius:7px;cursor:pointer;transition:.15s}.hand img:first-child{margin-left:0}.hand img.legal:hover{transform:translateY(-10px)}.rules{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}.rules>*{background:#0d1b25;border:1px solid var(--line);border-radius:9px;padding:8px 10px}@media(max-width:650px){.intro{align-items:flex-start;flex-direction:column}.table{min-height:570px;border-width:7px;border-radius:25px}.center{inset:30% 5% 40%}.you{bottom:142px}.actions{bottom:103px;left:2%;right:2%}.actions button{font-size:11px;padding:7px}.hand{justify-content:flex-start;left:2%;right:2%}.hand img{height:105px;margin-left:-24px}.top{align-items:flex-start;flex-direction:column}}:fullscreen .shell{width:100%;max-width:none}:fullscreen .top{display:none}:fullscreen .table{min-height:88dvh}