@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');
:root{color-scheme:dark;--bg:#0c211d;--panel:#16332b;--text:#f1eee1;--muted:#a5b4a5;--gold:#eac578;--line:#ffffff19}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 30%,#204a3b55,transparent 60%),var(--bg);color:var(--text);font-family:'DM Sans',sans-serif}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:12px 18px;background:#ffffff0a;color:var(--text);font-weight:600;transition:.2s}button:hover{background:#ffffff18;transform:translateY(-1px)}button:disabled{opacity:.35;cursor:default;transform:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}header{max-width:1440px;margin:auto;height:100px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--text);font-size:13px;letter-spacing:2px;display:flex;gap:14px;align-items:center}.brand strong{font-size:21px;letter-spacing:0;font-family:'Playfair Display',serif}.mark{border:1px solid var(--gold);color:var(--gold);padding:7px 10px;font-family:serif;font-size:22px}.divider{color:#7e917e;margin:0 7px}.quiet{background:transparent;border-color:transparent;font-size:13px}.quiet span{margin-left:20px}main{max-width:1320px;padding:0 42px;margin:auto}#lobby{min-height:calc(100vh - 174px);display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center;padding:55px 0}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold);font-weight:700}h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(48px,5.7vw,80px);line-height:1.13;letter-spacing:-2px;margin:24px 0}h1 em{color:var(--gold);font-weight:600}.intro p{color:var(--muted);font-size:17px;line-height:1.8;max-width:410px}.features{display:flex;gap:25px;margin-top:35px;font-size:12px;color:#d9dece}.features span:before{content:'✦';color:var(--gold);margin-right:8px}.lobby-card{max-width:450px;width:100%;border:1px solid #eac57830;background:linear-gradient(145deg,#204335,#132e26);border-radius:18px;padding:32px 38px;box-shadow:0 30px 70px #0003;justify-self:end}.mini-cards{height:110px;display:flex;justify-content:center;margin:0 0 25px}.mini-cards div{background:#f3edde;color:#a14637;border-radius:7px;width:65px;height:95px;font-family:Georgia;font-size:25px;padding:9px;box-shadow:0 4px 12px #0004;transform:rotate(-17deg) translateY(10px)}.mini-cards div:nth-child(2){transform:rotate(0);color:#264c58;z-index:1}.mini-cards div:nth-child(3){transform:rotate(17deg) translateY(10px);color:#a37b25}h2{font-family:'Playfair Display',serif;font-size:30px;margin:12px 0 25px}label{display:block;font-size:12px;margin-bottom:9px;color:#d6ddcd}input{background:#0a211b80;border:1px solid #ffffff20;border-radius:8px;color:var(--text);padding:14px;width:100%;min-width:0}input::placeholder{color:#8c9e8f;font-size:13px}.primary{background:var(--gold);color:#1d3326;border-color:var(--gold);width:100%;margin-top:14px;display:flex;justify-content:space-between}.primary:hover{background:#f4d593}.join{display:flex;gap:8px;margin-top:14px}.join input{text-transform:uppercase}.or{text-align:center;font-size:9px;letter-spacing:2px;color:var(--muted);margin:26px 0 12px}.wide{width:100%;border:1px solid var(--line)}small{display:block;font-size:10px;color:var(--muted);text-align:center;margin-top:21px}footer{display:flex;justify-content:space-between;padding:23px 5%;font-size:11px;color:#839a88;border-top:1px solid var(--line)}footer i{color:var(--gold);font-size:7px;letter-spacing:3px;margin-left:10px}#error{color:#ffb2a0;font-size:14px;text-align:center;min-height:18px}#error:empty{margin:0;min-height:0}#game{padding:24px 0}.game-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.game-top .quiet{margin-left:15px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px}.arena{min-width:0}.opponent{display:flex;align-items:center;justify-content:center;gap:14px;font-size:14px;height:58px}.avatar{background:#365744;padding:7px 11px;border-radius:50%;color:var(--gold)}#opponentCards{font-size:23px;letter-spacing:-8px;color:#8ca392}.felt{position:relative;min-height:275px;border:8px solid #6d5232;border-radius:120px;background:radial-gradient(ellipse,#32664b,#1a4936);box-shadow:inset 0 0 0 2px #c49d563b,inset 0 0 60px #0004,0 12px 30px #0002}.felt-brand{position:absolute;top:22px;left:50%;transform:translateX(-50%);letter-spacing:5px;color:#e0cf9b3a;font-size:14px;text-align:center}.felt-brand span{display:block;font-size:7px;letter-spacing:3px;margin-top:6px}.vira{position:absolute;left:28px;top:65px;text-align:center}.vira>span{font-size:8px;letter-spacing:2px;color:#d0c397}.card{width:87px;height:128px;background:#f4eedc;color:#8e6d22;border:1px solid #d5c9ad;border-radius:8px;position:relative;display:inline-flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 5px 12px #0003;padding:5px;vertical-align:middle}.card .corner{position:absolute;left:7px;top:5px;font-size:18px;font-weight:700}.card .suit{font-size:43px;line-height:1.1}.card .suitname{font-size:9px;text-transform:uppercase;letter-spacing:1px;margin-top:8px}.card.s1{color:#ae4437}.card.s2{color:#345b77}.card.s3{color:#32633d}.card .piece{position:absolute;bottom:4px;font-size:8px;color:#203d30;background:#e5c677;padding:2px 5px;border-radius:4px}.vira .card{width:57px;height:84px}.vira .suit{font-size:26px}.vira .suitname{font-size:6px}.vira .corner{font-size:12px}.played{display:flex;justify-content:center;gap:20px;position:absolute;left:120px;right:75px;top:75px}.played>div{text-align:center}.played small{margin:6px 0 0;font-size:9px}#status{position:absolute;bottom:18px;left:90px;right:90px;text-align:center;font-size:12px;color:#f2e4bb}.your-side{padding:20px 0 10px}.your-label{display:flex;align-items:center;justify-content:center;gap:20px;font-size:13px}.your-label span{font-size:11px;color:var(--muted)}.hand{display:flex;justify-content:center;gap:12px;margin-top:14px;min-height:128px}.hand .card{cursor:pointer}.hand .card:hover:enabled{transform:translateY(-9px);background:#fff8e9}.hand .card:disabled{opacity:.75}.actions{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:12px 0}.actions button{font-size:12px;padding:11px}.actions .accept{background:var(--gold);color:#203a2a}.score-panel,.history{border:1px solid var(--line);background:#16332b80;border-radius:12px;padding:22px}.score-row{display:flex;justify-content:space-between;margin-top:23px;align-items:center;font-size:13px}.score-row b{font-size:30px;font-family:'Playfair Display',serif;color:var(--gold)}.bar{height:3px;background:#ffffff12;margin-top:8px}.bar i{display:block;height:3px;background:var(--gold)}.stake{border-top:1px solid var(--line);margin-top:20px;padding-top:17px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.stake strong{color:var(--text)}.tricks{font-size:11px;margin-top:15px;color:var(--muted)}.history{margin-top:18px}.history ol{padding:0;list-style:none;max-height:230px;overflow:auto;font-size:11px;color:#bbc6b6;line-height:1.7}.history li{padding:8px 0;border-bottom:1px solid var(--line)}dialog{background:#18382c;color:var(--text);border:1px solid #eac57850;border-radius:14px;padding:35px;max-width:640px;max-height:85vh}dialog::backdrop{background:#04130fdc;backdrop-filter:blur(6px)}dialog p{color:#c3cebd;line-height:1.7;font-size:14px}dialog h3{font-size:15px;color:var(--gold)}dialog a{color:var(--gold);font-size:12px}.close{float:right}.rule-note{padding:15px;background:#ffffff08;border-radius:7px} [hidden]{display:none!important}@media(max-width:850px){#lobby{gap:30px}.lobby-card{padding:25px}.game-layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.history{margin-top:0}.history ol{max-height:150px}}@media(max-width:620px){header{height:76px;padding:0 20px}.brand{font-size:10px;gap:8px;letter-spacing:1px}.brand strong{font-size:19px}.mark{padding:4px 7px}.divider{margin:0}header .quiet{font-size:11px;padding:8px}main{padding:0 18px}#lobby{grid-template-columns:1fr;padding:38px 0;gap:35px}.intro{text-align:center}h1{font-size:49px;margin:16px 0}.intro p{font-size:14px;margin:0 auto}.features{justify-content:center;margin-top:22px;gap:17px}.lobby-card{justify-self:center;max-width:410px}.mini-cards{height:85px;margin-bottom:20px}.mini-cards div{height:76px;width:54px;font-size:20px}footer{font-size:9px;gap:20px;padding:20px}.game-top{align-items:flex-start}.game-top .eyebrow{font-size:8px}.game-top .quiet{margin:0;padding:7px;font-size:11px}.game-top>div{display:flex;flex-direction:column;align-items:flex-start;gap:7px}.felt{min-height:260px;border-radius:75px;border-width:5px}.vira{left:12px;top:75px}.played{left:80px;right:20px;gap:12px;top:78px}.played .card{width:67px;height:100px}.played .suit{font-size:32px}.played .corner{font-size:15px}.felt-brand{font-size:10px;letter-spacing:3px;width:100%;top:25px}#status{left:30px;right:30px;font-size:11px;bottom:20px}.your-label{gap:12px}.your-label span{font-size:10px}.score-panel,.history{padding:16px}.eyebrow{font-size:9px;letter-spacing:1.3px}dialog{padding:22px;margin:auto 15px}.your-side{padding-top:17px}.actions button{font-size:11px}}