:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#f5efd9;background:#091f18}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at center,#1b503a,#091f18 85%);min-height:100vh}main{max-width:1700px;margin:auto;padding:clamp(20px,3vw,58px)}header{display:flex;align-items:center;gap:20px;border-bottom:1px solid #d9bd7250;padding-bottom:18px}h1{font:clamp(22px,2.8vw,44px) Georgia,serif;margin:4px 0}.eyebrow{letter-spacing:.16em;font-size:12px;color:#dbc78f}header button{margin-left:auto}button,input{font:inherit;font-size:18px;min-height:48px;border-radius:10px;padding:10px 18px;border:1px solid #bba96a}button{background:#ead39a;color:#122c20;font-weight:700;cursor:pointer}input{background:#102b21;color:#fff;max-width:220px;text-transform:uppercase;letter-spacing:.15em}a{color:#ead39a}#entry{max-width:750px;margin:8vh auto;font-size:21px;line-height:1.6}#entry h2{font:42px Georgia}form{display:flex;align-items:end;flex-wrap:wrap;gap:14px}label{display:grid;gap:8px}.muted{font-size:16px;color:#bbcabc}#status{color:#ead39a;min-height:24px}.roomline{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.roomline strong{font-size:clamp(22px,2.3vw,36px);letter-spacing:.14em}.roomline span{flex:1;color:#cfdbcc}.roomline button{font-size:15px}.score{display:flex;justify-content:center;gap:5vw;font-size:clamp(20px,2.5vw,40px);margin:20px 0}.score b{color:#ead39a}.felt{display:grid;grid-template-columns:minmax(120px,1fr) minmax(230px,3fr) minmax(120px,1fr);grid-template-areas:'. north .' 'west center east' '. south .';gap:18px;align-items:center;min-height:48vh;border:1px solid #d4b87355;border-radius:60px;padding:24px;background:#123d2e80}.seat{text-align:center;padding:14px;border-radius:16px;background:#061c1466;overflow-wrap:anywhere;border:2px solid transparent}.seat.active{border-color:#ead39a;box-shadow:0 0 22px #ead39a25}.seat strong{display:block;font-size:clamp(18px,1.8vw,30px)}.seat small{display:block;color:#c0cdbf;margin-top:6px}.north{grid-area:north}.south{grid-area:south}.west{grid-area:west}.east{grid-area:east}.center{grid-area:center;text-align:center;min-height:220px}.center h2{font:clamp(24px,2.8vw,42px) Georgia;margin:14px 0;color:#ead39a}#contract{font-size:clamp(16px,1.6vw,24px);margin:0}.cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.played span{display:block;font-size:14px;margin:6px}.card{display:grid;place-items:center;width:clamp(60px,6.5vw,110px);height:clamp(86px,9vw,150px);background:#fff8e8;color:#123426;border-radius:12px;border-bottom:5px solid #c7bfa8;font:bold clamp(23px,2.8vw,44px) Georgia}.card.red{color:#ad2934}footer{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;margin-top:24px;font-size:clamp(16px,1.5vw,23px);color:#ccd7c8}footer strong{color:#ead39a}[hidden]{display:none!important}@media(max-width:650px){header{gap:10px}header img{width:50px;height:50px}header button{font-size:14px;padding:8px}.felt{padding:12px;border-radius:24px;gap:8px;grid-template-columns:1fr 1fr;grid-template-areas:'north east' 'center center' 'west south'}.center{padding:15px 0}.score{gap:18px;font-size:18px}.roomline span{font-size:13px}}
/* Readable at viewing distance; retain clear keyboard focus. */
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #fff3c7;outline-offset:5px}.seat.active small{color:#fff0bf}.played span{font-size:clamp(16px,1.4vw,22px)}#status{font-size:15px}#display .roomline{padding-bottom:10px;border-bottom:1px solid #d4b87333}.seat.active::after{content:'TAKING TURN';display:block;font-size:12px;font-weight:750;letter-spacing:.12em;color:#f1d493;margin-top:8px}input:focus{border-color:#f3d58c}
.qr-invite{border:1px solid #d4b87355;border-radius:16px;padding:12px 18px;margin-top:16px;background:#0b291f}.qr-invite summary{cursor:pointer;color:#ead39a;font-weight:650;min-height:40px;padding:10px 0}.qr-invite>div{display:flex;align-items:center;gap:24px;font-size:19px;line-height:1.7}.qr-invite canvas{width:180px;height:180px;max-width:40vw;background:white;border:8px solid white;image-rendering:pixelated}.qr-invite a{display:inline-block;padding:10px 0;min-height:44px}@media(max-width:650px){.qr-invite>div{font-size:15px;gap:14px}.qr-invite canvas{width:128px;height:128px}}