:root{color-scheme:dark;--cream:#f6efd9;--gold:#dfbb73;--green:#153f33;--ink:#102d26}*{box-sizing:border-box}body{margin:0;background:linear-gradient(90deg,rgba(9,29,23,.96),rgba(9,29,23,.84)),url('../assets/petra255/cafe.webp') center/cover fixed;color:var(--cream);font:16px/1.5 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}button:disabled{cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #fff1aa;outline-offset:4px}[hidden]{display:none!important}.topbar{height:104px;max-width:1360px;margin:auto;padding:14px 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9b77a30}.brand{text-align:center;text-decoration:none;line-height:1}.brand span{font-size:8px;letter-spacing:2px;display:block}.brand strong{font:700 43px Georgia,serif;letter-spacing:9px}.back{text-decoration:none;font-size:14px;color:var(--gold)}.quiet,.primary{display:inline-flex;justify-content:center;align-items:center;gap:10px;border:1px solid #d9b77a70;border-radius:9px;padding:12px 19px;min-height:46px;background:#153c31;color:var(--cream);text-decoration:none}.primary{background:linear-gradient(#efd098,#d9b46b);color:#243328;font-weight:750;border-color:#eed098;box-shadow:0 4px 15px #0003}.primary:hover{filter:brightness(1.07)}main{max-width:1240px;margin:auto;padding:30px}.welcome{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:center;min-height:calc(100svh - 180px)}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:700;color:var(--gold)}h1,h2{font-family:Georgia,serif;font-weight:400;line-height:1.1}h1{font-size:clamp(38px,5vw,70px);margin:18px 0 24px}h1 em{color:var(--gold);font-weight:400}.intro>p:not(.eyebrow){max-width:400px;color:#d5daca;font-size:18px}.tags{display:flex;gap:10px;flex-wrap:wrap}.tags span{border:1px solid #d9b77a40;border-radius:30px;padding:7px 12px;font-size:12px;color:#dfd9bf}.panel{background:linear-gradient(145deg,#244e3fde,#12372ded);border:1px solid #d9b77a55;border-radius:18px;padding:32px;box-shadow:0 25px 50px #0005}.entry h2{font-size:32px;margin:12px 0 25px}.entry label{display:block;margin-top:18px;font-size:13px;color:#e3decf}input,select{width:100%;background:#0d2b23;color:var(--cream);border:1px solid #78938280;border-radius:8px;padding:13px 14px;margin:7px 0 4px;min-height:48px}input::placeholder{color:#a7b8ab}.entry>button{width:100%;margin-top:18px}.divider{text-align:center;color:#b1c1b3;font-size:12px;margin-top:26px}.preview-cards{height:210px;margin-top:40px;display:flex;padding-left:35px;align-items:center}.preview-cards img{width:115px;filter:drop-shadow(0 8px 8px #0007);transform:rotate(-17deg);margin-left:-24px}.preview-cards img:nth-child(2){transform:rotate(0deg) translateY(-15px)}.preview-cards img:nth-child(3){transform:rotate(17deg)}.room-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.room-heading h1{font-size:32px;margin:6px 0 20px}.room-heading .eyebrow{margin:0}.scorebar{display:flex;max-width:640px;margin:0 auto 10px;justify-content:space-between;text-align:center;gap:24px}.scorebar>div{min-width:90px}.scorebar small{display:block;color:#c3c9b8;font-size:12px}.scorebar strong{font-family:Georgia,serif;font-size:31px}.scorebar .round-label strong{font:600 16px system-ui}.scorebar .round-label{align-self:center}.red{color:#ff998f}.table-wrap{max-width:980px;margin:auto;padding:12px 0}.wood-table{height:420px;border-radius:200px;padding:16px;background:repeating-linear-gradient(4deg,#452b1c 0px,#64442b 4px,#4e311f 8px,#6d4c31 11px);box-shadow:0 18px 30px #0008,inset 0 0 0 3px #b58b5255,inset 0 0 15px #170e07}.felt{position:relative;height:100%;border:2px solid #b08b4f;border-radius:190px;background:radial-gradient(ellipse at 45% 35%,#2c6b50,#164b38 65%,#103327);box-shadow:inset 0 0 45px #09271cd9;overflow:hidden}.felt:before{content:'';position:absolute;inset:13px;border:1px solid #d0b57727;border-radius:180px;pointer-events:none}.table-mark{position:absolute;inset:28% 0 auto;text-align:center;font:700 54px Georgia,serif;color:#c6b88018;letter-spacing:12px;pointer-events:none}.table-mark span{display:block;font:9px system-ui;letter-spacing:4px}.player{position:absolute;display:flex;gap:8px;align-items:center;z-index:3;padding:6px 10px;border:1px solid #c3b27d30;border-radius:13px;background:#0b2a21d9;max-width:230px;box-shadow:0 4px 10px #0003}.player strong{display:block;font-size:13px;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player small{display:block;font-size:9px;color:#bfcbbb}.player.active{border-color:#f3d388;box-shadow:0 0 0 2px #efd09830,0 0 18px #edd28230}.avatar{border-radius:50%;width:32px;height:32px;display:grid;place-items:center;background:#a98b50;color:#122b21;font-family:Georgia,serif;font-size:20px}.player.north{top:17px;left:50%;transform:translateX(-50%)}.player.south{bottom:17px;left:50%;transform:translateX(-50%)}.player.west{top:46%;left:22px}.player.east{top:46%;right:22px}.card-count{font-size:11px;color:#d5c38b}.played-card{position:absolute;width:77px;left:calc(50% - 38px);top:calc(50% - 55px);z-index:2;animation:deal .25s ease-out;filter:drop-shadow(2px 7px 4px #0005)}.played-card img{display:block;width:100%}.played-card.north{transform:translateY(-43px) rotate(-5deg)}.played-card.south{transform:translateY(40px) rotate(4deg)}.played-card.west{transform:translateX(-57px) rotate(-12deg)}.played-card.east{transform:translateX(57px) rotate(12deg)}@keyframes deal{from{opacity:0;margin-top:-18px}to{opacity:1;margin-top:0}}.table-message{position:absolute;bottom:82px;left:18%;right:18%;text-align:center;font-size:13px;font-weight:600;text-shadow:0 2px 3px #000;background:#153c31dd;border-radius:12px;z-index:4;padding:5px}.table-message:empty{display:none}.status{text-align:center;color:#ead8aa;font-size:14px;min-height:26px}.controls{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:12px auto}.controls>p{margin:3px;color:#c7d1bf}.controls .primary{padding:10px 16px}.join-controls{display:flex;gap:12px;align-items:end}.join-controls label{font-size:12px}.join-controls input,.join-controls select{margin:4px 0 0}.hand{display:flex;justify-content:center;align-items:flex-end;min-height:140px;padding:15px 15px 4px;isolation:isolate}.playing-card{flex:0 0 86px;width:86px;border:0;background:none;padding:0;border-radius:7px;box-shadow:1px 4px 10px #0008;transition:transform .15s;position:relative;margin:0 -5px}.playing-card img{display:block;width:100%;pointer-events:none}.playing-card.legal{box-shadow:0 0 0 2px #e1bf72,0 5px 14px #0008}.playing-card.legal:hover,.playing-card.legal:focus-visible{transform:translateY(-14px);z-index:3}.playing-card.unavailable{filter:brightness(.72)}.table-footer{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;margin:18px 0;color:#aabdab;font-size:12px}.textbutton{background:none;border:0;color:var(--gold);padding:8px;font-size:12px;text-decoration:underline}.textbutton:disabled{opacity:.4}.history{max-width:800px;margin:30px auto}.history h2{font-size:24px}.history-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:10px 15px;border-bottom:1px solid #d9b77a25;text-align:left}th{color:var(--gold);font-weight:500}.error{position:sticky;bottom:15px;border:1px solid #e8bb77;background:#593522;color:#fff4dd;padding:15px 22px;border-radius:12px;z-index:10;box-shadow:0 5px 20px #0006}dialog{background:#173d31;color:var(--cream);border:1px solid #c4a66d;border-radius:18px;width:min(640px,92vw);max-height:88svh;padding:30px;box-shadow:0 15px 70px #0009}dialog::backdrop{background:#03120de0}dialog h2{font-size:32px}dialog p,dialog li{font-size:14px;line-height:1.7}dialog li{margin:9px 0}.dialog-close{position:absolute;right:12px;top:10px;border:0;background:none;color:var(--cream);font-size:30px;min-width:44px;min-height:44px}#invite{text-align:center}#invite strong{display:block;margin:12px}#invite .quiet,#invite .primary{margin:10px 4px}#qr img{background:white;padding:8px;border-radius:8px;max-width:100%;height:auto}#qr p{font-size:11px}.last-cards{display:flex;gap:10px}.last-cards figure{margin:0;flex:1;min-width:0}.last-cards img{width:100%}.last-cards figcaption{font-size:11px;overflow-wrap:anywhere}
@media(max-width:760px){main{padding:20px 12px}.topbar{height:80px;padding:10px 15px}.brand span{font-size:6px;letter-spacing:1px}.brand strong{font-size:34px}.back{font-size:11px}.topbar .quiet{font-size:11px;padding:8px;min-height:40px}.welcome{grid-template-columns:1fr;gap:15px;min-height:auto}.intro{text-align:center}.intro>p:not(.eyebrow){margin:0 auto 18px}.intro h1{font-size:44px;margin:12px}.tags{justify-content:center}.preview-cards{height:130px;margin:25px 0 12px;justify-content:center}.preview-cards img{width:79px}.panel{padding:23px}.room-heading h1{font-size:22px;margin-bottom:14px}.room-heading .eyebrow{font-size:8px;letter-spacing:1.2px}.room-heading>.quiet{padding:8px;font-size:11px;max-width:125px}.scorebar{gap:10px}.scorebar strong{font-size:27px}.wood-table{height:390px;padding:9px;border-radius:100px}.felt{border-radius:95px}.felt:before{border-radius:88px;inset:8px}.player{padding:5px;gap:4px;max-width:125px;border-radius:9px}.avatar{display:none}.player strong{font-size:11px;max-width:110px}.player small{font-size:8px;max-width:110px}.card-count{display:none}.player.west{left:8px;top:31%}.player.east{right:8px;top:31%}.player.north{top:15px}.player.south{bottom:13px}.played-card{width:63px;left:calc(50% - 31px);top:calc(54% - 45px)}.played-card.west{transform:translateX(-43px) rotate(-12deg)}.played-card.east{transform:translateX(43px) rotate(12deg)}.played-card.north{transform:translateY(-33px) rotate(-5deg)}.played-card.south{transform:translateY(32px) rotate(4deg)}.table-message{bottom:61px;left:10%;right:10%;font-size:11px}.status{font-size:12px}.controls{gap:6px}.controls .primary{font-size:12px;padding:9px;min-height:44px}.controls>span{width:100%;text-align:center;font-size:13px}.hand{min-height:106px;padding:10px 0 2px}.playing-card{flex:0 0 clamp(45px,13.5vw,72px);width:clamp(45px,13.5vw,72px);margin:0 -5px}.join-controls{flex-wrap:wrap;gap:8px;justify-content:center}.join-controls label{flex:1;min-width:110px}.join-controls .primary{width:100%}.table-footer{gap:4px;margin:10px 0}.table-footer>span{width:100%;text-align:center;font-size:10px}dialog{padding:25px 20px}.history{margin:25px 0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{body{background:white!important;color:black!important}body>*{display:none!important}body>#invite[open]{display:block!important;position:static;width:100%;max-height:none;color:black;background:white;border:2px solid #173d31;box-shadow:none;margin:0;padding:30px}#invite button{display:none!important}#invite input{background:white;color:black;border:0;font-size:12px}#invite .eyebrow{color:#173d31}#qr img{width:260px;height:260px}}
#qr svg{width:220px;max-width:100%;height:auto;background:#fff;border:8px solid white;border-radius:8px;color-scheme:light}@media print{#qr svg{width:280px}}
/* V258: logo, readable cards, compact mobile table and open-card lessons. */
.table-mark{inset:16% 0 auto;letter-spacing:0;opacity:.17}.table-mark img{width:180px;height:180px;border-radius:50%;object-fit:contain;mix-blend-mode:screen}.trump-maker{text-align:center;margin:2px 0 12px;color:#efd098;font-size:13px;font-weight:650}.brand img{border-radius:50%;object-fit:contain}.teacher-panel{background:#204a3c;border:1px solid #baa16a;border-radius:16px;padding:20px;position:relative}.teacher-panel #teaching{font-size:17px;line-height:1.7;min-height:60px}.teacher-panel .controls{justify-content:flex-start}.open-hands{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.open-seat{padding:15px;border:1px solid #83957c70;border-radius:14px;background:#102f27;min-width:0}.open-seat h2{font-size:18px;margin:0 0 5px}.open-seat p{font-size:11px;margin:0 0 10px;color:#c3cbb6}.open-active{border-color:#f4d28c;box-shadow:0 0 0 1px #f4d28c}.your-open-hand{background:#23523f}.open-cards{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;min-height:90px}.open-card{border:0;background:none;padding:0;border-radius:5px;min-width:0}.open-card img{width:100%;display:block}.open-card:disabled{opacity:1}.your-open-hand .open-card:disabled{filter:brightness(.65)}.your-open-hand .open-card:not(:disabled){outline:2px solid #ebc574;outline-offset:1px}.hint-card{box-shadow:0 0 0 4px #83ecbe;transform:translateY(-5px)}.lesson-trick{position:relative;max-width:650px;background:#24523c;border:8px solid #674429;border-radius:25px;padding:20px;margin:20px auto;min-height:180px}.lesson-trick h2{font-size:23px}.lesson-trick .last-cards{max-width:400px;position:relative;z-index:1}.lesson-trick figure{max-width:85px}.lesson-logo{position:absolute;width:135px;height:135px;border-radius:50%;opacity:.12;right:15px;top:15px}.lesson-reference{background:#173e31;padding:20px;border-radius:12px}.lesson-reference summary{cursor:pointer;color:var(--gold)}.lesson-reference table{max-width:550px}.lesson-page main{max-width:1100px}.lesson-page .room-heading h1{font-size:30px}
@media(max-width:760px){.table-mark{inset:20% 0 auto}.table-mark img{width:135px;height:135px}.trump-maker{font-size:12px;margin-bottom:4px}.open-hands{gap:10px}.open-seat{padding:10px}.open-seat h2{font-size:15px}.open-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.teacher-panel{padding:16px}.teacher-panel #teaching{font-size:15px}.lesson-page .room-heading h1{font-size:24px}.lesson-page .room-heading{align-items:flex-start}.lesson-page .room-heading .quiet{flex-shrink:0}.wood-table{height:clamp(275px,39svh,350px)}.player.west,.player.east{top:25%}.player small{max-width:100px}.played-card{width:60px}.played-card.north{transform:translateY(-23px) rotate(-5deg)}.played-card.south{transform:translateY(25px) rotate(4deg)}.table-message{bottom:53px;font-size:10px}.hand{display:grid;grid-template-columns:repeat(4,minmax(0,78px));justify-content:center;gap:9px 8px;min-height:0;padding:12px 5px}.playing-card{width:100%;margin:0;flex:none}.playing-card.unavailable{filter:brightness(.88)}.playing-card.legal:hover{transform:none}.playing-card.legal:active{transform:translateY(-5px)}.room-heading h1{font-size:20px}.topbar{height:70px}}
@media(max-width:420px){.open-hands{grid-template-columns:1fr}.open-cards{grid-template-columns:repeat(8,minmax(0,1fr))}.your-open-hand .open-cards{grid-template-columns:repeat(4,minmax(0,1fr));max-width:320px}.open-seat:not(.your-open-hand) .open-cards{overflow-x:auto;grid-template-columns:repeat(8,52px);padding-bottom:5px}.lesson-page .room-heading{flex-wrap:wrap}.hand{grid-template-columns:repeat(4,minmax(0,72px))}.topbar .brand strong{font-size:28px}}
@media(max-height:500px) and (orientation:landscape){.topbar{height:54px}.room-heading h1{margin:0;font-size:20px}.room-heading .eyebrow{display:none}.scorebar{margin:0 auto;max-width:420px}.scorebar strong{font-size:22px}.table-wrap{max-width:640px}.wood-table{height:255px}.hand{display:flex;gap:7px;padding:8px}.playing-card{width:65px;flex:0 0 65px;margin:0}.trump-maker{margin:0}.table-message{bottom:53px}}
/* V259: a complete table inside the visible screen, with no stacked tricks. */
:root{--play-height:100vh}@supports(height:100dvh){:root{--play-height:100dvh}}
#trick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:absolute;inset:28% 10% 24%;align-items:stretch}
#trick .played-card{position:static;inset:auto;transform:none!important;margin:0;width:100%;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 17px;filter:none;animation:none}
#trick .played-card img{width:100%;height:100%;object-fit:contain;min-height:0;filter:drop-shadow(0 2px 3px #0005)}#trick .played-card small{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:#fff5dc}.empty-card{border:1px dashed #cab57730;border-radius:6px;min-height:0}
body.table-playing,body.lesson-page{height:var(--play-height);overflow:hidden;min-height:0}
body.table-playing .topbar,body.lesson-page .topbar{height:40px;padding:3px 10px;max-width:1200px}.table-playing .brand span{display:none}.table-playing .brand strong{font-size:24px;letter-spacing:4px}.table-playing .topbar .quiet{min-height:30px;padding:3px 8px;font-size:11px}.table-playing .topbar .back{font-size:11px}
.table-playing main{height:calc(var(--play-height) - 40px);padding:4px 8px;margin:auto;max-width:1100px;min-height:0}
.table-playing #room{display:grid;height:100%;min-height:0;grid-template-rows:36px 18px minmax(0,1fr) 22px auto clamp(120px,30dvh,224px) 26px;gap:2px}
.table-playing .room-heading,.table-playing #history{display:none}.table-playing #scorebar{margin:0 auto;width:min(500px,100%);gap:8px;align-items:center}.table-playing .scorebar>div{min-width:70px}.table-playing .scorebar small{font-size:10px;line-height:1.1}.table-playing .scorebar strong{font-size:20px;line-height:1.1}.table-playing .scorebar .round-label strong{font-size:12px}.table-playing .trump-maker{margin:0;font-size:11px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table-playing .table-wrap{width:100%;padding:0;min-height:0;height:100%}.table-playing .wood-table{height:100%;min-height:0;border-radius:22px;padding:7px}.table-playing .felt{border-radius:17px;display:grid;grid-template-rows:36px minmax(0,1fr) 23px;gap:3px;padding:6px;min-height:0}.table-playing .felt:before{border-radius:14px;inset:3px}.table-playing .table-mark{inset:18% 0 auto}.table-playing .table-mark img{width:min(120px,20dvh);height:auto}
.table-playing #players{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;z-index:3}.table-playing .player{position:static;transform:none;max-width:none;min-width:0;padding:2px 4px;border-radius:6px;justify-content:center}.table-playing .player .avatar,.table-playing .player .card-count{display:none}.table-playing .player strong{font-size:10px;max-width:100%;line-height:1.2}.table-playing .player small{font-size:8px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:1.2}.table-playing .player>div{min-width:0}.table-playing #trick{position:relative;inset:auto;min-height:0;height:100%;width:min(440px,100%);margin:0 auto;gap:7px;z-index:2}.table-playing .table-message{position:static;min-height:0;margin:0;padding:1px 4px;background:transparent;font-size:10px;line-height:19px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-playing .table-message:empty{display:block}
.table-playing .status{font-size:11px;min-height:0;line-height:22px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.table-playing .controls{margin:0;gap:3px;font-size:11px;min-height:0}.table-playing .controls>span{font-size:11px}.table-playing .controls .primary{min-height:30px;padding:4px 10px;font-size:11px}.table-playing .controls p{font-size:11px;margin:0}
.table-playing .hand{display:grid;grid-template-columns:repeat(4,minmax(0,80px));grid-template-rows:repeat(2,minmax(0,1fr));gap:5px;min-height:0;height:100%;padding:4px;align-items:stretch;justify-items:center;justify-content:center}.table-playing .playing-card{height:100%;width:auto;max-width:100%;aspect-ratio:7/10;flex:none;margin:0;min-height:0;box-shadow:none}.table-playing .playing-card img{width:100%;height:100%;object-fit:contain}.table-playing .playing-card.legal{outline:2px solid #efd080;outline-offset:0}.table-playing .playing-card.legal:hover{transform:none}.table-playing .table-footer{margin:0;gap:3px;flex-wrap:nowrap;overflow:hidden}.table-playing .table-footer>span{display:none}.table-playing .textbutton{font-size:10px;padding:4px;white-space:nowrap}.table-playing .error,.lesson-page .error{position:fixed;bottom:12px;left:12px;right:12px;margin:0}
/* Practice: open bot hands, trick, short explanation, then your hand. */
.lesson-page .brand img{width:32px;height:32px}.lesson-page .topbar .eyebrow{font-size:9px}.lesson-page main.practice-screen{height:calc(var(--play-height) - 40px);display:grid;grid-template-rows:20px minmax(80px,.85fr) minmax(90px,1fr) 94px minmax(125px,1.1fr) 26px;gap:4px;padding:4px 8px;min-height:0;max-width:1080px}.practice-screen .trump-maker{margin:0;font-size:11px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bot-hands{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:3px;min-height:0}.bot-hands .open-seat{display:grid;grid-template-columns:68px minmax(0,1fr);padding:2px 4px;gap:3px;min-height:0;border-radius:5px}.bot-hands .open-seat h2{font:9px/1.1 system-ui;margin:0;align-self:center;overflow:hidden}.bot-hands .open-cards{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:2px;min-height:0;height:100%;padding:0;overflow:visible}.bot-hands .open-card{height:100%;min-height:0;width:100%;display:flex;justify-content:center}.bot-hands .open-card img{height:100%;width:auto;max-width:100%;object-fit:contain}.practice-screen .lesson-trick{min-height:0;max-width:none;width:100%;margin:0;border-width:5px;padding:4px 7px;border-radius:12px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:2px;overflow:hidden}.practice-screen .lesson-logo{height:70px;width:70px;top:8px;right:10px}.practice-screen .last-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:440px;width:100%;height:100%;min-height:0;margin:auto}.practice-screen .last-cards figure{max-width:none;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 12px}.practice-screen .last-cards img{height:100%;width:100%;object-fit:contain;min-height:0}.practice-screen .last-cards figcaption{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.practice-screen #lessonResult{margin:0;font-size:10px;line-height:1.2}.practice-screen #lessonResult:empty{display:none}.practice-screen .teacher-panel{min-height:0;padding:6px 10px;border-radius:9px;display:grid;grid-template-columns:1fr auto;grid-template-rows:minmax(0,1fr) 30px;gap:2px 6px}.practice-screen .teacher-panel>.eyebrow{display:none}.practice-screen #teaching{grid-column:1/-1;font-size:12px;line-height:1.3;margin:0;min-height:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.practice-screen .teacher-panel .controls{margin:0;min-height:0;justify-content:flex-start}.practice-screen .teacher-panel .controls p{font-size:10px;line-height:1.1;margin:0}.practice-screen .teacher-panel button{font-size:11px;padding:3px 8px;min-height:28px}.practice-screen .open-hands{display:block;margin:0;min-height:0;height:100%}.practice-screen .your-open-hand{height:100%;padding:3px 6px;display:grid;grid-template-rows:14px minmax(0,1fr);gap:2px;border-radius:8px}.practice-screen .your-open-hand h2{font:11px/14px system-ui;margin:0}.practice-screen .your-open-hand .open-cards{display:grid;grid-template-columns:repeat(4,minmax(0,82px));grid-template-rows:repeat(2,minmax(0,1fr));justify-content:center;justify-items:center;gap:4px;min-height:0;height:100%;max-width:none}.practice-screen .your-open-hand .open-card{height:100%;width:auto;max-width:100%;aspect-ratio:7/10;min-height:0}.practice-screen .your-open-hand .open-card img{height:100%;width:100%;object-fit:contain}.practice-screen .practice-footer{display:flex;justify-content:center;align-items:center;gap:12px;min-height:0}.practice-footer .textbutton{font-size:11px;padding:3px}.example-list{display:grid;gap:12px}.practice-screen dialog{position:fixed}.practice-screen .hint-card{transform:none}
@media(min-width:700px){.table-playing #room{grid-template-rows:38px 20px minmax(0,1fr) 22px auto clamp(95px,24dvh,170px) 26px}.table-playing .hand{grid-template-columns:repeat(8,minmax(0,95px));grid-template-rows:minmax(0,1fr)}.lesson-page main.practice-screen{grid-template-rows:22px minmax(65px,.7fr) minmax(110px,1.3fr) 90px minmax(100px,.8fr) 26px}.bot-hands{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}.bot-hands .open-seat{display:grid;grid-template-columns:1fr;grid-template-rows:16px minmax(0,1fr)}.bot-hands .open-seat h2{font-size:11px}.practice-screen .your-open-hand .open-cards{grid-template-columns:repeat(8,minmax(0,90px));grid-template-rows:minmax(0,1fr)}}
@media(max-height:510px){.table-playing .topbar,.lesson-page .topbar{height:32px}.table-playing main,.lesson-page main.practice-screen{height:calc(var(--play-height) - 32px)}.table-playing #room{grid-template-rows:28px 16px minmax(0,1fr) 18px auto 86px 22px;gap:1px}.table-playing .hand{grid-template-columns:repeat(8,minmax(0,68px));grid-template-rows:minmax(0,1fr)}.table-playing .scorebar strong{font-size:16px}.table-playing .felt{grid-template-rows:26px minmax(0,1fr) 17px;padding:3px;gap:1px}.table-playing .player small{display:none}.table-playing .table-message{line-height:16px;font-size:9px}.table-playing .status{font-size:10px;line-height:18px}.lesson-page main.practice-screen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:18px minmax(0,1fr) 88px 22px}.practice-screen #lessonScore{grid-column:1/-1}.practice-screen .bot-hands{grid-column:1;grid-row:2}.practice-screen .lesson-trick{grid-column:2;grid-row:2}.practice-screen .teacher-panel{grid-column:1;grid-row:3;height:88px}.practice-screen #openHands{grid-column:2;grid-row:3}.practice-screen .practice-footer{grid-column:1/-1}.practice-screen .your-open-hand .open-cards{grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}.practice-screen .bot-hands{grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr))}.practice-screen .bot-hands .open-seat{grid-template-columns:65px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}}
.teacher-actions{display:flex;gap:4px;align-items:center}.table-playing .table-footer a{font-size:0}.table-playing .table-footer a:after{content:'Leren ↗';font-size:10px}
.practice-screen .teacher-panel{grid-template-rows:30px minmax(0,1fr) 28px;gap:1px 4px}.practice-task{grid-column:1/-1;margin:0;font-size:11px;line-height:1.25;color:#ffe4a9;font-weight:700;overflow:hidden}.practice-screen #teaching{font-size:11px;line-height:1.2;-webkit-line-clamp:2}.practice-screen .your-open-hand .inspect-card{filter:brightness(.65);outline:0}.practice-screen .teacher-panel .controls p{font-size:9px}
.lesson-page main.practice-screen{grid-template-rows:20px minmax(80px,.85fr) minmax(90px,1fr) 110px minmax(125px,1.1fr) 26px}@media(min-width:700px){.lesson-page main.practice-screen{grid-template-rows:22px minmax(65px,.7fr) minmax(110px,1.3fr) 110px minmax(100px,.8fr) 26px}}@media(max-height:510px){.lesson-page main.practice-screen{grid-template-rows:18px minmax(0,1fr) 100px 22px}.practice-screen .teacher-panel{height:100px}}
/* V260: seated around the table; cards occupy four separate compass positions. */
.table-playing #room{grid-template-rows:36px 18px minmax(0,1fr) 22px auto clamp(110px,26dvh,190px) 26px}
.table-playing .wood-table{border-radius:65px}.table-playing .felt{display:block;padding:0;border-radius:58px}.table-playing .felt:before{border-radius:53px}
.table-playing #players{position:absolute;inset:0;display:block;pointer-events:none}
.table-playing .player{position:absolute;width:auto;max-width:140px;min-width:0;padding:3px 6px;border-radius:9px;display:flex;transform:none}
.table-playing .player.north{top:5px;bottom:auto;left:50%;right:auto;transform:translateX(-50%)}
.table-playing .player.south{bottom:5px;top:auto;left:50%;right:auto;transform:translateX(-50%)}
.table-playing .player.west{left:5px;right:auto;top:50%;bottom:auto;transform:translateY(-50%);max-width:57px}
.table-playing .player.east{right:5px;left:auto;top:50%;bottom:auto;transform:translateY(-50%);max-width:57px}
.table-playing .player.west small,.table-playing .player.east small{display:none}.table-playing .player strong{font-size:10px}
.table-playing #trick{position:absolute;inset:38px 66px 42px;display:block;width:auto;height:auto;max-width:none;margin:0;min-height:0}
#trick .played-card{position:absolute;display:grid;grid-template-rows:minmax(0,1fr) 13px;transform:none!important;max-width:none}
#trick .played-card small{font-size:8px;line-height:13px}.table-playing .table-message{position:absolute;left:12%;right:12%;bottom:27px;top:auto;font-size:9px;line-height:12px;min-height:12px;padding:0}.table-playing .table-mark{inset:30% 0 auto}
@media(min-width:700px){.table-playing #room{grid-template-rows:38px 20px minmax(0,1fr) 22px auto clamp(90px,22dvh,150px) 26px}.table-playing .player.west,.table-playing .player.east{max-width:120px}.table-playing #trick{left:132px;right:132px}.table-playing .player.west small,.table-playing .player.east small{display:block}}
@media(max-height:510px){.table-playing #room{grid-template-rows:28px 16px minmax(0,1fr) 18px auto 76px 22px;gap:1px}.table-playing #trick{top:25px;bottom:28px}.table-playing .player.north{top:2px}.table-playing .player.south{bottom:2px}.table-playing .table-message{bottom:19px;font-size:8px;line-height:10px}.table-playing .player small{display:none}}
.lesson-page main.lesson-welcome{height:calc(var(--play-height) - 40px);max-width:700px;padding:clamp(8px,3dvh,24px) 16px;display:flex;flex-direction:column;justify-content:center;gap:8px;overflow:hidden}.lesson-welcome h1{font-size:28px;margin:0}.lesson-welcome>p{font-size:13px;line-height:1.35;margin:0}.lesson-welcome .example-list{gap:8px;margin:8px 0}.lesson-welcome .primary{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:9px 13px;font-size:14px;min-height:54px;text-align:left}.lesson-welcome .primary span{font-weight:400;font-size:11px;line-height:1.2}.lesson-welcome .welcome-note{font-size:11px;color:#d8d1b8}@media(max-height:510px){.lesson-page main.lesson-welcome{height:calc(var(--play-height) - 32px);padding:8px 12px;gap:5px}.lesson-welcome .example-list{grid-template-columns:1fr 1fr;gap:6px}.lesson-welcome h1{font-size:22px}.lesson-welcome .primary{min-height:48px;padding:6px 10px;font-size:12px}}
.rank-order{padding:10px;border:1px solid #d4b573;border-radius:8px;color:#ffe9b2;font-size:15px!important;font-weight:700;line-height:1.7!important}.rank-cards{display:flex;gap:14px;max-width:340px;margin:15px auto}.rank-cards figure{flex:1;min-width:0;margin:0;text-align:center}.rank-cards img{width:100%;max-height:130px;object-fit:contain}.rank-cards figcaption{font-size:11px;color:#f3d397}.lesson-reference h3{margin-bottom:8px;color:#f3d397}@media(max-height:650px){.lesson-page main.lesson-welcome{padding:8px 12px;gap:5px}.lesson-welcome .example-list{gap:5px;margin:5px 0}.lesson-welcome .primary{min-height:46px;padding:6px 10px}.lesson-welcome>p{font-size:12px}}
/* Explanations stay in the viewport and scroll inside their own panel. */
#whyDialog,#reference,#examplesDialog{width:min(650px,calc(100vw - 24px));max-height:calc(100dvh - 20px);overflow-y:auto;overscroll-behavior:contain}#whyText{font-size:16px;line-height:1.65;white-space:pre-line;margin:0 0 8px}.lesson-reference{font-size:14px;line-height:1.45}.lesson-reference p{margin:9px 0}.lesson-reference table{font-size:12px}.lesson-reference h2{font-size:27px;margin:4px 0 12px}.lesson-reference .rank-order{font-size:14px!important;line-height:1.45!important}.lesson-reference .rank-cards{max-width:300px;margin:10px auto}.lesson-reference .rank-cards img{max-height:110px}

/* V267: één naam op pagina, tafel, uitnodiging en oefentafel. */
body.brand-other{background:radial-gradient(ellipse at top,#1d5141,#091d17 85%)}
.topbar .brand{min-width:0;max-width:50%;text-align:center}
.topbar .brand strong{display:block;font-size:clamp(14px,3.5vw,26px);line-height:1.12;overflow-wrap:anywhere;max-height:3.4em;overflow:hidden}
.room-heading [data-brand-name]{overflow-wrap:anywhere}
.table-mark{pointer-events:none}
.table-mark .name-logo{display:flex;align-items:center;justify-content:center;margin:auto;width:min(180px,36vw);min-height:65px;padding:12px;border:2px solid #d0b477;border-radius:50%;font:700 clamp(12px,3vw,21px)/1.15 Georgia,serif;color:#ebd49f;overflow-wrap:anywhere}
.table-mark .table-brand-name{display:block;margin:3px auto 0;max-width:60%;font:600 11px/1.2 system-ui;overflow-wrap:anywhere}
.brand-other .table-brand-name{display:none}
.lesson-logo{pointer-events:none;display:flex;align-items:center;justify-content:center}
.lesson-logo img{width:100%;height:100%;object-fit:contain}
.lesson-logo .name-logo{font:700 12px/1.15 Georgia,serif;overflow-wrap:anywhere;text-align:center;color:#ebd49f;padding:5px;border:1px solid #d0b477;border-radius:10px;max-width:100%}
@media(max-width:600px){.room-heading .eyebrow{font-size:9px;max-width:220px}.topbar .brand span{font-size:8px}}

/* Compact sound toggle fits beside existing mobile navigation. */
.topbar{gap:8px}.topbar #soundToggle{flex:0 0 auto;font-size:12px;padding:6px 9px;min-height:36px;white-space:nowrap}.topbar .brand{flex:1 1 auto}
@media(max-width:600px){.topbar{padding-left:8px;padding-right:8px;gap:5px}.topbar .back{font-size:11px;max-width:90px;line-height:1.2}.topbar #helpButton{font-size:11px;padding:6px}.topbar #soundToggle{font-size:11px;padding:6px}.topbar .brand strong{font-size:13px}.topbar .brand>span{display:none}}

@media(max-width:600px){.lesson-page .topbar>.eyebrow{display:none}.topbar .brand strong{max-height:2.3em}}