:root{--ink:#233d3d;--cream:#f7f4e9;--green:#244e4c;--gold:#e4bd71;--line:#dce0d3}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:15px 'DM Sans',system-ui,sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--line);border-radius:10px;padding:10px 15px;background:#fffcf3;color:var(--ink);font-weight:600;min-height:44px}button:hover:not(:disabled){filter:brightness(.96);transform:translateY(-1px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b87929;outline-offset:3px}a{color:inherit}header{max-width:1320px;margin:auto;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:35px;font-weight:800;letter-spacing:-3px;text-decoration:none}.brand>span{color:#bb8758;font-size:23px}.brand small{font-size:9px;letter-spacing:1.8px;line-height:1.8;margin-left:8px}nav,.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}nav>a{font-size:12px;font-weight:700;text-decoration:none;margin-right:10px}main{max-width:1240px;margin:auto;padding:36px 26px}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#828c77}h1{font:clamp(44px,5vw,67px) 'DM Serif Display',Georgia,serif;letter-spacing:-2px;margin:9px 0 8px}h1 em{font-weight:400}h1>span{font-size:.55em;color:#bb9460;padding-left:12px}.intro p{font-size:13px;color:#7b8274}.intro p strong{font-weight:500;color:#465b51}.lesson{text-align:left;background:#ecebdc;border-color:transparent;font-size:12px;padding:16px 22px}.lesson strong{display:block;margin-top:7px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px}.namebox{display:flex;align-items:center;gap:8px}.namebox label{font-size:9px;letter-spacing:1px;max-width:70px}.namebox input{width:120px;min-height:44px;border:1px solid var(--line);border-radius:8px;background:white;padding:8px}.gold{background:var(--gold);color:#302e23;border-color:#d7b16a}.playarea{background:#fffdf6;border:1px solid #d8dfd3;border-radius:24px;overflow:hidden;box-shadow:0 18px 50px #243f3910}.tabletop{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#183d42;color:#f7f3db;padding:16px 24px}.tabletop>div>span{display:block;letter-spacing:1.5px;font-size:9px;color:#becebc;margin-bottom:7px}.tabletop strong{font-size:16px}.tablebuttons{display:flex;gap:6px}.tablebuttons button{background:#ffffff13;color:#f8f1d9;border-color:#ffffff28;font-size:12px}.scorestrip{display:flex;gap:12px;background:#21474b;padding:10px 24px;overflow:auto;color:#dce6d8}.scorepill{display:flex;gap:12px;align-items:center;font-size:12px;min-width:180px;flex:1}.scorepill strong{font-size:24px;color:#eed69f}.scorepill small{color:#b7c8bd}.felt{height:350px;background:radial-gradient(ellipse at center,#3a6968 0,#2a5759 50%,#20464b 100%);position:relative;isolation:isolate;border:12px solid #25474a;box-shadow:inset 0 0 0 1px #d7c09233,inset 0 0 60px #081f3050}.felt:before{content:'';position:absolute;inset:26px;border:1px solid #d8cf9d25;border-radius:48%;pointer-events:none}.feltmark{position:absolute;inset:45px 0;text-align:center;font:90px Georgia;color:#dfd7ad0d;z-index:-1}.feltmark span{display:block;font:8px system-ui;letter-spacing:4px}.seat{position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff9e4;gap:5px;min-width:110px}.seat .avatar{width:34px;height:34px;border-radius:50%;background:#dfc189;color:#29494b;display:grid;place-items:center;border:2px solid #f6ecd4;font:bold 16px Georgia}.seat.active .avatar{box-shadow:0 0 0 4px #e7c17b55}.seat strong{font-size:12px;max-width:170px;overflow-wrap:anywhere}.seat small{font-size:10px;color:#d0d9ca}.seat .bidtag{font-size:10px;background:#0e303c80;padding:5px 8px;border-radius:5px}.north{top:8px;left:50%;transform:translateX(-50%)}.south{bottom:8px;left:50%;transform:translateX(-50%)}.west{left:12px;top:40%;}.east{right:12px;top:40%;}.trick{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:230px;height:150px}.trick .card{position:absolute;width:61px;height:83px;font-size:17px;min-height:0;padding:8px;box-shadow:0 5px 10px #0003}.trick .pos0{bottom:-10px;left:84px;transform:rotate(-5deg)}.trick .pos1{left:16px;top:33px;transform:rotate(-12deg)}.trick .pos2{top:-10px;left:85px;transform:rotate(5deg)}.trick .pos3{right:16px;top:35px;transform:rotate(12deg)}.tablenote{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;color:#eee2bb;text-align:center;max-width:200px;pointer-events:none}.tablenote.hastrick{top:65%;font-size:9px;background:#143c42e8;padding:4px 8px;border-radius:10px;max-width:250px}.decision{padding:18px 24px}.handheading{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:1px;margin-bottom:12px}.handheading small{font-size:10px;letter-spacing:0;margin-left:10px;font-weight:400;color:#7e8a7c}.handheading button{font-size:11px;padding:7px 12px;min-height:38px}.hand{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;padding:10px 0 16px;min-height:114px}.card{background:linear-gradient(140deg,#fffefa,#f0eee2);color:#243e44;border:1px solid #d8d6c9;border-radius:9px;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;font-family:Georgia,serif;font-weight:700;width:64px;height:92px;min-height:0;padding:7px 8px;transition:transform .15s,box-shadow .15s}.card .large{font-size:29px;align-self:center;line-height:1}.card .corner{font-size:16px;line-height:1}.red{color:#ad554a}.card.illegal{opacity:.45}.card.selected{transform:translateY(-10px);box-shadow:0 0 0 3px #c39345,0 6px 10px #0002}.card.hinted{box-shadow:0 0 0 3px #699b9a}.card[disabled]{opacity:.45}.playbar{display:flex;align-items:center;gap:8px}.playbar>span{font-size:12px;flex:1;color:#5f7167}.playbar button{font-size:12px}.bids{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.bids button{width:46px;padding:7px;}.bids .chosen{background:#244e4c;color:white}#bidPanel{background:#f0eddd;border:1px solid #dfdcc8;padding:13px 16px;border-radius:14px;margin-bottom:16px}#bidPanel>span{margin-left:12px;color:#788072;font-size:12px}#bidConfirm{font-size:12px}#roundPanel,#lobbyPanel{padding:16px;border:1px solid #c9d4bf;background:#edf1e4;border-radius:14px;margin-bottom:16px}#roundPanel h2,#lobbyPanel h2{margin:0 0 8px}#roundPanel p,#lobbyPanel p{font-size:13px;line-height:1.7}.roompanel{border-top:1px solid var(--line);padding:12px 24px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.roompanel button{font-size:11px}.below{display:grid;grid-template-columns:1fr 1.5fr;gap:28px;margin-top:28px}.coach,.ledger{padding:24px;border:1px solid var(--line);border-radius:16px}.coach{background:#eceede}.coach h2,.ledger h2{font:24px Georgia;margin:12px 0}.coach p{font-size:13px;line-height:1.8;color:#69766a}.coach button{font-size:12px}.ledger>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px}.ledger button{font-size:11px}.ledger{overflow:auto}.ledger table,dialog table{border-collapse:collapse;width:100%;font-size:12px}td,th{text-align:left;padding:9px;border-bottom:1px solid var(--line)}th{font-size:10px;letter-spacing:.5px;color:#72816f}footer{display:flex;gap:16px;justify-content:space-between;align-items:center;margin-top:30px;font-size:11px;color:#7b8576}footer button{border:0;background:none;font-size:11px}dialog{width:min(650px,94vw);max-height:90dvh;overflow:auto;border:1px solid #c8cebc;border-radius:22px;background:#fffdf4;color:var(--ink);padding:24px;box-shadow:0 20px 90px #0003}dialog::backdrop{background:#142e36a8;backdrop-filter:blur(4px)}.dialoghead{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:10px}.dialoghead h2{font:29px Georgia;margin:0}.dialoghead button{font-size:25px;padding:4px 12px}dialog p,dialog li{font-size:14px;line-height:1.8}dialog label{display:block;margin:14px 0 6px;font-size:12px;font-weight:700}dialog input,dialog select{width:100%;padding:12px;border:1px solid #cbd4c2;background:#f9f7ed;border-radius:9px;min-height:44px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.formgrid label{margin-top:0}.formgrid>div{margin-top:16px}.dialogactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.notice{padding:10px;border-radius:10px;background:#eee9cf;font-size:12px!important}.invitecode{overflow-wrap:anywhere;font:12px monospace;padding:12px;background:#edf1e5;border-radius:9px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#173b40;color:white;padding:14px 22px;border-radius:14px;z-index:9999;max-width:92vw;font-size:13px;box-shadow:0 5px 20px #0003}[hidden]{display:none!important}
body.fullscreen{overflow:hidden}.fullscreen .playarea{position:fixed;inset:0;z-index:1000;height:var(--screen-h,100dvh);width:100%;border:0;border-radius:0;overflow:auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#fffdf6}.fullscreen .felt{height:clamp(230px,42vh,450px)}.fullscreen .decision{padding:12px 18px}.fullscreen .tabletop{padding:10px 18px}.fullscreen .hand{padding-block:8px;min-height:94px}.fullscreen .card{height:80px;width:56px}.fullscreen dialog{z-index:2000}body[data-theme=night]{--cream:#172e34;--ink:#e9ebd9;--line:#405859}body[data-theme=night] .intro p,body[data-theme=night] footer{color:#c1cbbb}body[data-theme=night] .coach,body[data-theme=night] .ledger{background:#203d42}body[data-theme=night] .coach p{color:#c1cbbb}
@media(max-width:800px){header{padding:15px}header .brand small{display:none}nav{gap:5px}nav>a{display:none}nav button{font-size:11px;padding:9px}main{padding:23px 14px}.intro{align-items:flex-start}.intro p{font-size:12px;line-height:1.7}.lesson{font-size:10px;padding:12px;max-width:140px}.toolbar{flex-wrap:wrap}.toolbar .tools{width:100%}.tools button{font-size:12px;padding:9px 12px}.below{grid-template-columns:1fr}.felt{height:330px}.west{left:2px}.east{right:2px}.seat{min-width:75px;max-width:105px}.seat strong{max-width:95px}.seat small{font-size:9px}.trick{width:200px}.trick .pos1{left:10px}.trick .pos3{right:10px}.trick .pos0,.trick .pos2{left:70px}.decision{padding:14px 12px}.hand{gap:5px}.card{width:49px;height:76px;padding:6px}.card .large{font-size:23px}.card .corner{font-size:14px}.handheading small{display:block;margin:4px 0}.playbar{flex-wrap:wrap}.playbar>span{flex-basis:100%}.playbar button{flex:1}.tabletop{padding:12px}.tabletop strong{font-size:13px}.tabletop>div>span{font-size:8px}.tablebuttons button{padding:8px;min-height:40px}.tablebuttons #tableHome{font-size:10px}.scorestrip{padding:8px 12px}.scorepill{min-width:150px;gap:8px}.scorepill strong{font-size:22px}.scorepill small{font-size:9px}.scorepill>span{font-size:10px}.roompanel{flex-wrap:wrap;gap:10px;padding:12px}.bids button{width:39px;min-height:42px;font-size:12px}.formgrid{grid-template-columns:1fr}footer{flex-wrap:wrap;font-size:10px}.tablenote{max-width:150px;font-size:10px}.tablenote.hastrick{top:69%}#bidPanel>span{display:block;margin:8px 0}.fullscreen .felt{height:280px}.fullscreen .hand{gap:4px}.fullscreen .card{width:46px;height:72px}}
@media(max-height:520px) and (orientation:landscape){.fullscreen .felt{height:230px}.fullscreen .tabletop{padding-block:7px}.fullscreen .scorestrip{padding-block:5px}.fullscreen .decision{padding:8px 12px}.fullscreen .hand{padding:4px 0 8px;min-height:70px}.fullscreen .card{height:65px;width:44px}.fullscreen .card .large{font-size:20px}.fullscreen .handheading{margin-bottom:2px}.fullscreen .seat .avatar{width:24px;height:24px;font-size:12px}.fullscreen .seat{gap:2px}.fullscreen .trick{height:100px}.fullscreen .trick .card{height:60px;width:44px}.fullscreen .trick .pos0,.fullscreen .trick .pos2{left:86px}.fullscreen .trick .pos1,.fullscreen .trick .pos3{top:23px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.hand .card:disabled{opacity:1;cursor:default}.hand .card.illegal{opacity:.4}