:root{--ink:#203d35;--line:#d8ddcf;--green:#194f40;--red:#bd4c45}*{box-sizing:border-box}body{margin:0;background:#f3f1eb;color:var(--ink);font:15px system-ui,sans-serif}header{height:82px;padding:0 4vw;display:flex;gap:25px;align-items:center;border-bottom:1px solid var(--line)}header strong{font:27px Georgia}header span{font-size:12px;color:#677b6b}header span:last-child{margin-left:auto}main{max-width:1500px;padding:28px 3vw;margin:auto}h1{font:32px Georgia;margin:0 0 10px}h2{font:24px Georgia}p{line-height:1.6}button,input{font:inherit}button{padding:9px 13px;background:#fffef9;color:var(--ink);border:1px solid var(--line);border-radius:6px;cursor:pointer}button:disabled{opacity:.35;cursor:default}button.primary{background:var(--green);color:white}button.active,.alerted{background:#e0e9df!important;box-shadow:inset 0 0 0 1px #648b72}button:hover:enabled{border-color:#648b72}.red{color:var(--red)}[hidden]{display:none!important}.heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.layout{display:grid;grid-template-columns:minmax(750px,1fr) 300px;gap:22px}.layout>div{overflow:auto}#felt{position:relative;min-width:750px;min-height:710px;background:#e1e9df;border:1px solid #ccd7c8;border-radius:12px;display:grid;grid-template-columns:minmax(210px,1fr) 250px minmax(210px,1fr);grid-template-rows:190px 230px minmax(210px,auto);gap:16px;padding:20px}#players{display:contents}.player{text-align:center;align-self:center;justify-self:center}.player .name{display:table;margin:5px auto 8px;padding:5px 13px;border-radius:6px;font-weight:600}.player .turn{background:#d9d39c;box-shadow:0 0 0 1px #b5ae6d}.seat{font-size:12px}.hand{min-width:210px;max-width:250px;background:#fffef9;padding:10px;border-radius:8px;border:1px solid #ccd7c8;text-align:left}.suitrow{font-size:23px;line-height:32px;white-space:nowrap}.suitrow>span{display:inline-block;width:26px}.card{font-size:22px;padding:0 3px;border:0;background:none}.card:disabled{opacity:1}.card:enabled{background:#e0e9df}.count{font-size:12px;color:#6c7d6a}.bottom{grid-area:3/2;align-self:end}.left{grid-area:2/1}.top{grid-area:1/2}.right{grid-area:2/3}#contract{grid-area:1/1;align-self:start;font-size:19px;line-height:1.7}#trick{grid-area:2/2;position:relative;height:190px;width:250px}#trick>span{position:absolute;border:1px solid #bdcdb6;border-radius:7px;background:#fffef9;padding:9px 14px;font-size:25px}.played-bottom{bottom:0;left:95px}.played-top{top:0;left:95px}.played-left{top:70px;left:0}.played-right{top:70px;right:0}#auctionwrap{grid-area:3/1;align-self:end;background:#fffef9;border-radius:8px;overflow:visible}table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:14px}th{background:#d1dfcf;font-size:12px;font-weight:500;padding:5px}th.vulnerable{background:#ac4944;color:#fff}td{height:27px;padding:2px;text-align:center}td button{font-size:14px;padding:2px 5px;border:0;background:none}#bidding{grid-area:2/2;text-align:center;z-index:1}#bidding>div{display:flex;justify-content:center;gap:4px;margin:7px 0}#bidding button{padding:7px 9px}#felt.auction #trick{display:none}#felt.auction #auctionwrap{grid-area:1/3;align-self:start}aside{padding:22px;background:#fffef9;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;min-height:710px}#presence{padding:0;list-style:none;font-size:12px;color:#62735f}#presence li{margin:6px 0}#messages{flex:1;min-height:160px;max-height:330px;overflow:auto;overflow-wrap:anywhere}.msg{margin:14px 0;line-height:1.5}.msg small{display:block;color:#77877d;font-size:11px}.editor{padding:11px;background:#fffef9;border:1px solid var(--line);border-radius:6px;min-height:45px;white-space:pre-wrap;overflow-wrap:anywhere}.editor:empty:before{content:attr(data-placeholder);color:#879187;pointer-events:none}.editor:focus{outline:2px solid #648b72}.tools{display:flex;gap:6px;align-items:center;margin:10px 0}.tools span{font-size:12px;color:#62735f;white-space:nowrap}.tools button{font-size:23px;padding:3px 9px}#chatform>.primary{width:100%}.toolbar{display:flex;gap:15px;align-items:center;margin:15px 0}.note{font-size:12px;color:#6e806e}#login{max-width:550px;margin:25px auto}label{display:block;margin:15px 0}input{width:100%;display:block;padding:12px;margin:7px 0;border:1px solid var(--line);border-radius:6px}#error{color:#a73535}dialog{max-width:480px;min-width:340px;padding:28px;border:1px solid var(--line);border-radius:12px;background:#f3f1eb;color:var(--ink)}dialog::backdrop{background:#17382c55}#dextra{margin:15px 0}.actions{display:flex;gap:10px}.tip{position:fixed;z-index:10000;background:#fffef9;color:var(--ink);padding:10px 14px;border:1px solid #8ca58a;border-radius:8px;max-width:340px;pointer-events:none;white-space:pre-wrap}button:focus-visible{outline:2px solid #648b72}@media(max-width:1150px){.layout{display:block}aside{margin-top:20px;min-height:320px}.heading{align-items:flex-start}header>span:nth-child(2){display:none}}

/* Maamerkki on oman painikkeensa keskellä; maatekstin sisäinen span ei muuta väriä. */
.tools button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;padding:0;border-radius:8px;font-size:28px;line-height:1}.tools button span{font-size:inherit;color:inherit}.tools button span.red{color:var(--red)}.tools button>span:not(.red){color:var(--ink)}.tools>span{font-size:12px;color:#62735f}.contractcounts{padding-left:12px;white-space:pre}#dummyviews{display:flex;gap:18px;flex-wrap:wrap}#dummyviews label{display:flex;gap:7px;align-items:center;margin:0}#dummyviews input{width:auto;margin:0;accent-color:var(--green)}

#dummyviews{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:12px;text-align:left;font-size:13px}#dummyviews label{white-space:nowrap}#contract .boardnumber{font:25px Georgia,serif;margin-bottom:8px}#felt{grid-template-rows:210px 230px minmax(250px,auto)}#setup{display:flex;gap:12px;align-items:center}.boardcount{display:flex;align-items:center;gap:8px;margin:0}.boardcount select{font:inherit;padding:9px;border:1px solid var(--line);border-radius:6px;background:#fffef9;color:var(--ink)}

#auctioncenter{display:contents}#felt.auction{grid-template-rows:210px minmax(230px,auto) minmax(250px,auto)}#felt.auction #auctioncenter{display:flex;flex-direction:column;gap:12px;grid-area:2/2;align-self:center;justify-self:center;width:100%;min-width:250px}#felt.auction #auctionwrap{grid-area:auto;align-self:stretch;width:100%}#felt.auction #bidding{grid-area:auto;width:100%}

.playactions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:15px}.playactions span{font-size:13px}#approval,#results{background:#fffef9;border:1px solid var(--line);border-radius:9px;padding:18px;margin-top:15px}#approval button{margin-right:10px}#approval h2,#results h2{margin:0 0 10px}#results p{margin:6px 0}.boardresult{font-size:16px;font-weight:600}#dextra select{font:inherit;padding:10px;margin-right:10px}

/* 0.6: pöydän toiminnot veralla, tulokset ja chat sen sivuilla. */
main{max-width:1900px;padding:22px 20px}.layout{grid-template-columns:260px minmax(750px,1fr) 280px;gap:16px}.layout>.tablecolumn{overflow:visible}#results{margin:0;align-self:start;max-height:790px;overflow:auto;padding:14px}#results h2{font-size:23px}#results table{font-size:12px;table-layout:auto}#results td{padding:6px 3px}#results th{position:sticky;top:0;padding:6px 3px}#results th:nth-child(2){width:42%}#felt:not(.auction) #auctionwrap{grid-area:1/3;align-self:start;max-height:none;overflow:visible}#felt:not(.auction){grid-template-rows:minmax(210px,auto) 230px minmax(250px,auto)}.playactions{grid-area:3/1;display:flex;flex-direction:column;align-items:flex-start;justify-content:end;gap:8px;margin:0;align-self:end;z-index:2}.playactions button{min-width:85px}.playactions span{max-width:200px}#approval,#resultoverlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,90%);background:#fffef9;border:1px solid #8ca58a;border-radius:12px;padding:24px;box-shadow:0 6px 28px #203d3533;z-index:5;margin:0;text-align:center}#approval h2,#resultoverlay h2{font:25px Georgia;margin:0 0 14px}#approval p,#resultoverlay p{margin:10px 0}#approval button{margin:6px}#resultoverlay{pointer-events:none}#resultoverlay p:last-child{font-size:21px;font-weight:600}@media(max-width:1250px){.layout{grid-template-columns:240px minmax(750px,1fr)}aside{grid-column:1/-1;min-height:280px;margin-top:0}}@media(max-width:1050px){.layout{display:flex;flex-direction:column}.tablecolumn{order:0;overflow:auto!important}#results{order:1;max-height:320px}aside{order:2}}

@media(min-width:1251px){.layout{grid-template-columns:210px minmax(750px,1fr) 230px}.layout>.tablecolumn{grid-column:2}.layout>#results{grid-column:1;grid-row:1}.layout>aside{grid-column:3;grid-row:1;padding:16px}}

.tools{flex-wrap:wrap}#chattools>span{flex-basis:100%}

/* 0.7: tiivis tarjoushistoria ja toiminnot oman käden vieressä. */
#auctionwrap,#felt.auction #auctionwrap{width:232px;justify-self:end;align-self:flex-end}#auctionwrap th{padding:5px 8px}#felt.auction #auctionwrap{align-self:center}.playactions{justify-self:end;margin-right:2px;max-width:130px}#felt{column-gap:12px}.claimdemand{display:flex;align-items:center;gap:6px;font-size:20px}.claimdemand select{margin:0!important}textarea{width:100%;font:inherit;padding:10px;border:1px solid var(--line);border-radius:6px;resize:vertical;margin-bottom:18px;background:#fffef9;color:var(--ink)}.claimexplanation{white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}.claimforecast{font-weight:600}#dialog .actions{justify-content:space-between}

.playactions{grid-area:3/2;justify-self:start;transform:translateX(calc(-100% - 14px));margin-right:0;align-items:stretch}.playactions span{overflow-wrap:anywhere}

/* 0.8: valmiit jakorivit, piste- ja IMP-sarakkeet. */
.claimauthor{color:var(--red);font-weight:700}#results table{table-layout:fixed;font-size:12px}#results th,#results td{padding:5px 2px;white-space:nowrap}#results th{position:static}#results thead{position:sticky;top:0;z-index:1}#results th:nth-child(2){width:auto}#results th:first-child,#results td:first-child{width:30px}#results th:nth-child(2),#results td:nth-child(2){width:90px;text-align:left}#results td:nth-child(3),#results th:nth-child(3),#results td:nth-child(5),#results th:nth-child(5){border-left:1px solid var(--line)}#results tbody tr:nth-child(even){background:#f2f3eb}#results .currentboard{box-shadow:inset 3px 0 #648b72}#results thead tr:first-child th{font-size:10px;text-align:center}#results{max-height:790px}@media(min-width:1251px){.layout{grid-template-columns:270px minmax(750px,1fr) 230px}}

#results th:first-child,#results th:nth-child(2),#results td:first-child,#results td:nth-child(2){width:auto}#results col:nth-child(1){width:12%}#results col:nth-child(2){width:34%}#results col:nth-child(n+3){width:13.5%}#results thead tr:last-child th:nth-child(2){text-align:left}#results thead tr:first-child th{border:0;text-align:center}

/* 0.9: jaon tiedot, vaaravärit ja hyppytarjouksen tauko. */
.player .seat{display:table;min-width:58px;margin:0 auto;padding:5px 8px;background:#d1dfcf;border-radius:3px;color:var(--ink)}.player .seat.vulnerable{background:#ac4944;color:white}#contract .boardmeta{font-size:16px;line-height:1.6}#contract .boardmeta:last-child{margin-bottom:8px}#felt.auction{grid-template-rows:minmax(210px,auto) minmax(230px,auto) minmax(250px,auto)}#stop{background:#b33e38;color:#fff;font-weight:700;letter-spacing:1px;padding:9px 20px;border-radius:4px;text-align:center;align-self:center;min-width:100px}#special button.double{background:#b33e38;color:white;border-color:#b33e38}#special button.redouble{background:#3563a0;color:white;border-color:#3563a0}#levels button.active:disabled{box-shadow:none;background:#fffef9!important}#claimexplanation{resize:none}#results td:nth-child(2),#results th:nth-child(2){border-left:1px solid var(--line)}#results col:nth-child(1){width:12%}#results col:nth-child(2){width:30%}#results col:nth-child(n+3){width:14.5%}#results thead tr:first-child th{font-size:12px}#results thead tr:first-child th:nth-child(2){text-align:left;border-left:1px solid var(--line)}#felt.matchfinished .hand,#felt.matchfinished .count,#felt.matchfinished #trick,#felt.matchfinished #auctioncenter,#felt.matchfinished .playactions{display:none}#felt.matchfinished #resultoverlay{pointer-events:auto}

.heading{flex-wrap:wrap}#setup{flex-wrap:wrap}#start{white-space:nowrap}

/* 0.11: tarjoussarja kasvaa alaspäin kiinteästä otsikkokorkeudesta. */
#felt.auction{grid-template-rows:210px minmax(230px,auto) minmax(250px,auto)}#felt.auction #auctioncenter{align-self:start;margin-top:-36px}#stop{margin-top:14px;background:transparent;color:var(--ink);padding:0;letter-spacing:normal;font-weight:400;min-width:100px}.stopbadge{background:#b33e38;color:#fff;font-weight:700;letter-spacing:1px;padding:9px 20px;border-radius:4px}.stopnote{margin-top:8px;font-size:14px}.claimforecast{white-space:pre-wrap}

/* Joukkueottelu */
#setup{justify-content:flex-end}.teamfield{font-size:11px;margin:0}.teamfield input{width:190px;padding:8px;margin:4px 0 0}.barometer{display:flex;align-items:center;gap:7px;font-size:13px;margin:0}.barometer input{width:auto;margin:0;accent-color:var(--green)}#teamstatus{padding:10px 0 16px;font-size:14px;font-weight:500}#viewtools{display:flex;gap:12px;margin-bottom:12px}#viewtools:has(button:not([hidden])){padding-bottom:6px}.scoretabs{display:flex;gap:4px;margin:0 0 12px}.scoretabs button{flex:1;padding:7px 3px;font-size:12px}.chattarget{display:flex;align-items:center;gap:8px;font-size:12px;margin:12px 0}.chattarget select{font:inherit;padding:6px;background:#fffef9;border:1px solid var(--line);border-radius:5px}#presence{max-height:190px;overflow:auto}#approval .claimforecast{font-size:14px}

/* 0.14: tulokset ja katsojan rauhallinen pöytänäkymä. */
#felt.auction #stop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:3}
#felt.spectator.auction #auctioncenter{margin-top:40px}
#felt.spectator .playactions{display:none}
#contract .boardresult{white-space:pre-wrap}
.finalscore{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:start;margin-top:18px;font-size:21px}
.scoreteam{display:flex;flex-direction:column;gap:8px;overflow-wrap:anywhere}.scoreteam span{font-size:25px;font-weight:600}.scoredash{font-weight:600}
#results tfoot .imptotalblank{background:transparent;border:0;padding:0;box-shadow:none}
#results tfoot .imptotal{background:#e4e5cc;font-weight:700;border:1px solid #d4d7bd}
#results tfoot td:nth-child(2){width:auto;text-align:center}
aside{padding-top:20px!important}aside h2{margin:0 0 18px;font-size:25px;line-height:29px}
#messages{max-height:none;flex:1 1 0;min-height:160px}#messages .spectatorname{color:#3563a0}

/* DingDongin kerhohuone */
header{height:auto;min-height:82px;flex-wrap:wrap;padding-top:15px;padding-bottom:15px}header strong{white-space:nowrap}header button{font-size:13px;padding:8px 12px}#clubroom{max-width:1100px;margin:20px auto}#login details{margin-top:25px}summary{cursor:pointer}label small{display:block;font-size:12px;line-height:1.5;color:#62735f}.gatheringtables{display:grid;grid-template-columns:1fr 1fr;gap:24px}.gatheringtable{background:#e1e9df;border:1px solid #ccd7c8;border-radius:12px;padding:24px;text-align:center}.gatheringtable h2{margin:0 0 14px}.gatherseats{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:110px 110px 110px;gap:8px;margin-top:20px}.gatherseat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;padding:8px;overflow-wrap:anywhere}.gatherseat:disabled{opacity:1;cursor:default}.gatherseat span:last-child{font-size:12px;color:#62735f}.gatherseat.north{grid-area:1/2}.gatherseat.west{grid-area:2/1}.gatherseat.east{grid-area:2/3}.gatherseat.south{grid-area:3/2}.gatherseat.ownseat{box-shadow:inset 0 0 0 2px #648b72}.gatherseat.isready{background:#d0dfc8}.clubready,#cluboptions,#membertools{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:20px 0}.clubready button{min-width:85px}#cluboptions label{display:flex;gap:8px;align-items:center;margin:0}#cluboptions input{width:auto;margin:0}#cluboptions select{font:inherit;padding:9px}#allready{font-weight:600}.dimmed{opacity:.3}#lobbymatch button{margin:0 12px 8px 0}#clubpeople{list-style:none;padding:0;columns:3;line-height:2}#disconnectnotice{border:1px solid #bd4c45;border-radius:8px;padding:14px 18px;margin:12px 0;font-weight:600;background:#f7e3dd}#disconnectnotice.rejoined{border-color:#648b72;background:#e0e9df}.memberrow{border-top:1px solid var(--line);padding:14px 0;display:flex;flex-wrap:wrap;gap:8px}.memberrow>span{width:100%;overflow-wrap:anywhere}#dialog:has(.memberrow){max-width:700px;width:90%}@media(max-width:850px){.gatheringtables{grid-template-columns:1fr}#clubpeople{columns:2}}

.gatheringtable{position:relative}.gatheringtable>button{position:absolute;top:65px;left:50%;transform:translateX(-50%);white-space:nowrap}.gatherseats{margin-top:70px}#modalerror{color:#a73535}#error:not(:empty){position:fixed;left:50%;top:90px;transform:translateX(-50%);z-index:50;max-width:90%;padding:12px 18px;border:1px solid #bd4c45;border-radius:8px;background:#fffef9;box-shadow:0 4px 18px #203d3522}

/* 0.16: kokoontumisjoukkueet, omat kuittaukset ja tiiviit jäsenrivit. */
.clubready{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px 14px;align-items:center;margin:18px 0 0}.clubready #readybutton{grid-area:1/1}.clubready #readyhint{grid-area:1/2;font-size:13px}.clubready #standbutton{grid-area:2/1}.gatherseat.offline{background:#eee9db;border-style:dashed}.gatherseat.offline span:last-child{color:#8a6344}
.memberrow{flex-wrap:nowrap;align-items:center}.memberrow>span{width:auto;flex:1;min-width:0}.memberrow button{flex:0 0 auto}#dialog:has(.memberrow){max-width:1000px}
#setup{max-width:760px}#restarthint{flex-basis:100%;font-size:12px;line-height:1.5;margin:0 0 8px;max-width:650px;color:#62735f}#resultoverlay button{font-size:16px;margin-top:16px}#cluboptions{gap:12px}#cluboptions input{accent-color:var(--green)}
@media(max-width:700px){.memberrow{flex-wrap:wrap}.memberrow>span{flex-basis:100%}}

.clubready{grid-template-columns:150px minmax(0,1fr)}#standbutton{white-space:nowrap}

/* 0.17: kerhohuone ja pöytään kohdistetut yhteysilmoitukset */
.gatherteamname{display:block;font-size:22px;margin-top:7px}.gatheringtable>button{top:92px}.gatherseats{margin-top:70px}
#setup{justify-content:flex-start;width:max-content;max-width:100%}.heading{align-items:flex-start}#restarthint{max-width:620px;margin-left:0;margin-right:0}
.player .disconnectedname{background:#f7e3dd;box-shadow:0 0 0 1px #bd4c45}.seatdisconnect{background:#f7e3dd;border:1px solid #bd4c45;border-radius:6px;padding:7px 10px;font-size:12px;font-weight:600;max-width:230px;margin:0 auto 8px}
#lobbychat{background:#fffef9;border:1px solid var(--line);border-radius:12px;padding:22px;margin-top:24px;max-width:720px}#lobbychat h2{margin-top:0}#lobbymessages{max-height:260px;overflow:auto;overflow-wrap:anywhere;min-height:60px}#lobbychat form>.primary{min-width:150px}
#setup{width:620px;max-width:100%;flex-shrink:0}#restarthint{flex:0 0 100%;width:100%;max-width:none}#lobbychat .tools>span{flex-basis:100%}

/* 0.18: kerhohuoneen chat joukkueiden rinnalla, pelin yläpalkki */
#clubroom{max-width:1400px}#club-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px;align-items:start}#club-layout .gatheringtables{min-width:0;gap:20px}#club-layout .gatheringtable{padding:24px 14px}#club-layout .gatherseats{grid-template-rows:110px 110px 110px}#club-layout #lobbychat{margin:0;max-width:none;height:527px;min-height:527px;display:flex;flex-direction:column}#lobbymessages{flex:1;max-height:none;min-height:0}#lobbychat form{margin-top:15px}#lobbychat form>.primary{width:100%;margin-top:12px}#club-layout.matchrunning{grid-template-columns:1fr}#club-layout.matchrunning #lobbychat{max-width:300px;justify-self:end}#club-layout.matchrunning{float:right;width:300px;margin-left:24px}#clubpeople{min-height:70px}#clubroom::after{content:'';display:block;clear:both}
body.membertable header{padding-left:var(--table-left,4vw);gap:14px}body.membertable header>strong{font-size:25px}body.membertable header>span:nth-child(2){display:none}body.membertable #membertools{margin:0;gap:12px;flex-wrap:nowrap}body.membertable #membertools button{white-space:nowrap}body.membertable header #connection{margin-left:auto}body.membertable header>strong{white-space:nowrap}
@media(max-width:1150px){#club-layout{grid-template-columns:minmax(0,1fr) 250px}.gatheringtables{grid-template-columns:1fr 1fr}#club-layout .gatherseats{grid-template-rows:100px 100px 100px}#club-layout #lobbychat{height:497px;min-height:497px}.gatherseat{font-size:13px}body.membertable header{padding-left:3vw;gap:10px}body.membertable header>strong{font-size:22px}}
@media(max-width:950px){#club-layout{grid-template-columns:1fr}#club-layout #lobbychat{height:380px;min-height:380px}.gatherseat{font-size:15px}#club-layout.matchrunning{float:none;width:auto;margin-left:0}#club-layout.matchrunning #lobbychat{max-width:none;justify-self:stretch}body.membertable header{flex-wrap:wrap}}
@media(max-width:650px){.gatheringtables{grid-template-columns:1fr}}