:root{color-scheme:dark;font:15px system-ui;background:#0b1518;color:#f4e7c7}*{box-sizing:border-box}body{margin:0}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer;border:1px solid #b59c65;border-radius:8px;padding:9px 13px;background:#213c41;color:inherit}button:disabled{opacity:.45;cursor:default}a{color:#f7d993}.app{height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}header{display:flex;align-items:center;gap:20px;padding:12px 20px;background:#101b20;border-bottom:1px solid #9b8050}header h1{font:25px Georgia;margin:0}header .identity{flex:1}header small{color:#d1c3a5}.hud{padding:10px 20px;display:flex;gap:15px;justify-content:space-between;background:#1d3034}.hud span{font-size:12px}main{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:16px;padding:16px;background:linear-gradient(#06231cda,#071d19ed),var(--room) center/cover;min-height:0}aside{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;border:1px solid #aa915c;border-radius:16px;background:#0b1d22;padding:10px;overflow:auto}.opponent-picture{width:100%;max-height:230px}aside small{font-size:12px}aside #details{font-size:12px}aside p{margin:6px 0}.felt{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;min-height:0;gap:12px;padding:16px;background:radial-gradient(ellipse,var(--felt,#245844),#102e28);border:3px solid #ad8a4c;border-radius:30px}.felt h2{margin:0;font-size:16px}.cards{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.table{align-content:center;overflow:auto}.card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(50px,6vw,82px);height:clamp(72px,10vh,118px);padding:4px;background:#faf7ec;color:#1e282f;border:2px solid #d9c8a1;border-radius:8px;box-shadow:0 3px 7px #0006;opacity:1!important}.card b{position:absolute;left:5px;top:3px;font:700 17px Georgia}.card span{font-size:31px}.card small{font-size:9px}.card.red{color:#a12730}.card.selected{outline:3px solid #ffdc71;transform:translateY(-5px)}.hand .card:disabled{filter:brightness(.72)}.actions{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}.actions label{font-size:12px}.actions #play,.actions #continue{background:#b78e40;color:#151b1b;font-weight:bold}footer{padding:10px 16px;display:flex;gap:10px;align-items:center;background:#111c1e;border-top:1px solid #a9915f}footer small{flex:1}dialog{color:inherit;background:#14292c;border:1px solid #c7ab72;border-radius:15px;max-width:650px;max-height:85dvh;line-height:1.6}dialog::backdrop{background:#000b}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.dialog-head h2{margin:0}.empty{color:#e2d6b9}#score{font-size:13px}#saved{font-size:11px}
@media(max-width:650px){header{padding:8px;gap:8px}header h1{font-size:19px}header small{font-size:10px}.hud{flex-direction:column;gap:3px;padding:7px}main{grid-template-columns:1fr;padding:7px;gap:7px}aside{flex-direction:row;justify-content:center;padding:5px;max-height:65px;border-radius:10px}#opponent{display:flex;align-items:center;gap:8px}.opponent-picture{width:50px;height:55px}#opponent b{font-size:12px}#opponent small{font-size:10px;max-width:95px}#details{display:none}.felt{padding:10px;border-radius:18px;gap:7px}.card{width:54px;height:76px}.table{gap:6px}.actions button{padding:7px;font-size:12px}footer{padding:7px;flex-wrap:wrap}footer small{min-width:160px}.hud strong{font-size:12px}#metrics{font-size:10px}.app main{grid-template-rows:auto minmax(0,1fr)}}
@media(max-height:500px){header{padding:5px 10px}header h1{font-size:17px}.hud{padding:5px 10px}main{padding:6px;gap:7px;grid-template-columns:140px 1fr}.felt{padding:8px;gap:4px;border-radius:15px}.card{width:45px;height:60px}.card span{font-size:23px}.card b{font-size:12px}.card small{font-size:8px}.opponent-picture{max-height:110px}.actions button,footer button{padding:5px 9px;font-size:11px}footer{padding:5px 9px}.felt h2,#score{font-size:11px}}

.actions label{display:flex;align-items:center;gap:6px;min-height:30px}.actions label[hidden]{display:none}.actions input{width:18px;height:18px}.actions button{min-height:40px}@media(max-width:650px){aside{max-height:72px;padding:3px;overflow:hidden}.opponent-picture{flex:0 0 50px}#opponent{width:100%;justify-content:center}}