:root{--cardMargin: 4px}html,body,#app{height:100%}body{margin:0;font-family:Open Sans,sans-serif;color:#1c2025;background:#e9ebee}h1,h2{font-family:Acme,sans-serif;color:#1e331d}h1{font-size:1.6em;margin:.5em 0}h2{font-size:1.2em;margin:.5em 0}button,input,select{font:inherit}button{background:#5d975e;color:#fff;border:none;border-radius:4px;padding:4px .8em 5px;margin:.1em .3em;cursor:pointer}button:hover{box-shadow:0 0 5px #00000080}button:disabled{background:#89bf82;cursor:default;box-shadow:none}button.caution{background:#993e4a}button.notUsual,button.warning{background:#d2691e}button.other,button.icon{background:#fff;color:#333;box-shadow:inset 0 0 2px 1px #5d975e}button.on{background:#3e4a99;color:#fff}a{color:#1e4d8c}.panel{background:#fff;box-shadow:0 2px 5px #00000029,0 2px 10px #0000001f;border-radius:5px;padding:10px 2ch 20px;margin:10px auto 20px;max-width:70ch}.public img.main{display:block;margin:0 auto;height:40vh;min-height:220px;max-height:420px}.FAQ li>span{font-weight:700}.FAQ .goBack{float:right}.CreateGame,.ClaimName,.Admin{text-align:left;padding:0 10px}.nameInput{display:flex;align-items:center;gap:1em;margin-bottom:1em}.nameInput input{width:8em}.warning{color:#993e4a}.banner{margin:0;padding:6px 12px;background:#fff3cd;text-align:center}.banner.warn{background:#f8d0d4}.createNav{background:#000;color:#fff;padding:8px 16px;font-family:Acme,sans-serif}.gameShell{height:100%;display:flex;flex-direction:column;text-align:center}.gameBody{flex:1;min-height:0;overflow:auto}#nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#000;color:#fff;min-height:40px;box-shadow:0 2px 5px #00000029}#nav a{color:#fff;margin:0 .6em;text-decoration:none}#nav .image,#nav .myName,#nav .middle{display:flex;align-items:center;justify-content:center;gap:8px}.logoSymbolUrl{height:20px}.logo-c,.logo-s{filter:invert(1)}.MemberStatus{box-shadow:0 -2px 5px #00000029;background:#d2d2d2;border-top:1px solid #5d6560}.MemberStatus .top{display:flex;justify-content:space-between;align-items:center;padding:3px 5px;gap:8px}.MemberStatus .people{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.MemberStatus .activeMember,.MemberStatus .inactiveMember{padding:1px 6px;border:2px solid #aaa;border-radius:2px;background:#efc3c3;position:relative}.MemberStatus .connected{background:#9fef93}.MemberStatus .inactiveMember{background:#6464641a;border-color:transparent}.MemberStatus .inactiveMember.connected{background:#cbe6b9}.MemberStatus .isNext{border-color:#de2626}.MemberStatus .isMe{box-shadow:0 0 4px #00000080}.MemberStatus .isAdmin:after,.MemberStatus .isDealer:after{content:"A";position:absolute;right:-8px;bottom:-6px;font-size:60%}.MemberStatus .isDealer:after{content:"D"}.MemberStatus .isAdmin.isDealer:after{content:"D A"}.MemberStatus .guest{font-style:italic;background:#e1dfc2;padding:0 5px}.MemberStatus .guest.connected{background:#f0eab1}.MemberStatus .dealerBtns,.MemberStatus .buttonsR{display:flex;align-items:center}.highlight{animation:pulse .3s infinite}@keyframes pulse{50%{background:#4a993e}}.choices{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.questions{text-align:left;display:flex;flex-direction:column;gap:8px;margin-top:1em}.BooleanSwitch{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.itemHolder,.guest{display:flex;gap:8px;align-items:center;margin:6px 0;flex-wrap:wrap}.itemHolder input[type=text],.itemHolder input:not([type=checkbox]),.guest input{width:8em}.itemHolder.active{background:#f4fff2}.itemHolder.inactive{opacity:.75}.itemHolder.dropTarget{outline:2px dashed #5d975e}.dragHandle{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:2px}.dragHandle:active{cursor:grabbing}.itemHolder.dragging{opacity:.65}.joinQr{margin-top:12px}.joinQr img{display:block;background:#fff;border:1px solid #ddd;border-radius:4px}.joinQr p{margin:8px 0 0}.supportLinks{margin:.4em 0}#nav button.round{width:32px;height:32px;min-width:32px;border-radius:50%;padding:0;margin:0;border:none;box-shadow:none;color:#fff;display:inline-flex;align-items:center;justify-content:center}#nav button.round.info{background:#909399}#nav button.round.warning{background:#e6a23c}#nav button.round:hover{box-shadow:0 0 5px #00000073}.missing{outline:1px solid #c66}.isDup{color:#993e4a;font-size:.85em}.Stage2{height:100%}.seatingWithTable{height:100%;display:grid;grid-template-columns:minmax(140px,.7fr) minmax(320px,2fr) minmax(140px,.7fr);grid-template-rows:auto minmax(260px,1fr) 230px;gap:3px;grid-template-areas:"topLeft . topRight" ". table ." "myArea myArea myArea"}.players_4 .seatingWithTable{grid-template-areas:"topLeft seatT1 topRight" "seatL1 table seatR1" "myArea myArea myArea"}.players_3 .seatingWithTable{grid-template-areas:"topLeft . topRight" "seatL1 table seatR1" "myArea myArea myArea"}.players_2 .seatingWithTable{grid-template-areas:"topLeft seatT1 topRight" ". table ." "myArea myArea myArea"}.players_5 .seatingWithTable,.players_6 .seatingWithTable{grid-template-rows:auto minmax(120px,1fr) minmax(120px,1fr) 210px;grid-template-areas:"topLeft seatT1 topRight" "seatL1 table seatR1" "seatL2 table seatR2" "myArea myArea myArea"}.topLeft{grid-area:topLeft;text-align:left;padding:4px}.topRight{grid-area:topRight;padding:4px;font-size:1.1em;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.totalBids span{white-space:nowrap}.seatT1{grid-area:seatT1}.seatL1{grid-area:seatL1}.seatR1{grid-area:seatR1}.seatL2{grid-area:seatL2}.seatR2{grid-area:seatR2}.seatB1{grid-area:myArea}.table{grid-area:table;position:relative;display:grid;grid-template-columns:1fr 120px 1fr;grid-template-rows:1.2fr auto 1.3fr auto;grid-template-areas:"tableL1 tableT1 tableR1" "tableL1 . tableR1" "tableL1 myPlay tableR1" "trumpSuit tableButtons leadSuit";background:#e8f9e6;border:5px solid darkgreen;border-radius:25px;min-height:280px}.tableT1{grid-area:tableT1}.tableL1{grid-area:tableL1}.tableR1{grid-area:tableR1}.tableL2{grid-area:tableL1;align-self:end}.tableR2{grid-area:tableR1;align-self:end}.myPlay{grid-area:myPlay;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.tableButtons{grid-area:tableButtons;display:flex;flex-direction:column;align-items:center;justify-content:center}.trumpSuit{grid-area:trumpSuit;display:flex;align-items:flex-end;justify-content:center;gap:6px}.leadSuit{grid-area:leadSuit;display:flex;align-items:flex-end;justify-content:center}.trumpInfo img,.suitIcon{height:28px}.red{color:#b00}.tableCenter{position:absolute;left:22%;right:22%;top:28%;background:#fff;border:2px solid grey;border-radius:5px;padding:.4em .6em;z-index:2;font-size:1.4em;box-shadow:0 2px 8px #00000040}.YourTurn{color:#de2626;font-weight:700}.bidNum{font-weight:700;background:#fff;border-radius:8px;padding:4px 8px;margin:4px auto}.seatArea{display:flex;flex-direction:column;justify-content:space-between;border:6px solid lightblue;background:#fbfbf9;border-radius:5px;padding:4px}.seatArea.next,.myArea.next{border-color:#de2626}.seatArea .name{font-weight:700;text-align:left}.dealer{display:inline-block;margin-left:8px;font-size:.85em}.myArea{grid-area:myArea;display:flex;flex-direction:column;justify-content:flex-end;border:6px solid lightblue;background:#fbfbf9;border-radius:5px}.myButtons{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;min-height:36px;padding:0 10px;gap:8px}.myCenterButtons{display:flex;justify-content:center;align-items:center;gap:8px;white-space:nowrap}.myInfo{display:flex;align-items:center;justify-content:flex-end;gap:8px}.myBid{display:inline-flex;align-items:center;gap:8px}.myBidLabel{font-weight:600}.stepper{display:inline-flex;align-items:stretch;height:32px;border:1px solid #dcdfe6;border-radius:4px;overflow:hidden;background:#fff}.stepper .step{width:32px;margin:0;padding:0;border-radius:0;background:#f5f7fa;color:#606266;box-shadow:none}.stepper .step:first-child{border-right:1px solid #dcdfe6}.stepper .step:last-child{border-left:1px solid #dcdfe6}.stepper .step:disabled{background:#f5f7fa;color:#c0c4cc}.stepper input{width:48px;border:none;text-align:center;font-size:14px;color:#606266}.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.stepper input{-moz-appearance:textfield;appearance:textfield}.setBid{display:inline-flex;align-items:center;gap:4px}.setBid svg{display:block}.chimeFile{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.chimeSet{display:flex;align-items:center;gap:6px;background:#4a983e;color:#fff;border-radius:5px;margin-left:.6em;padding:2px 8px;min-height:28px}.chimeSet input[type=checkbox]{width:16px;height:16px;accent-color:#006400;margin:0}.chimeSet select{background:#4a983e;color:#fff;border:1px solid rgba(255,255,255,.75);border-radius:3px;padding:0 2px;height:22px}.chimeVolumeHolder{position:relative;display:flex;align-items:center}.chimeSet .phone{background:transparent;color:#fff;box-shadow:none;border-radius:0;margin:0;padding:0 2px;line-height:0}.chimeSet .phone:hover{box-shadow:none}.chimeVolume{display:none;position:absolute;right:-6px;bottom:22px;height:120px;writing-mode:vertical-lr;direction:rtl;background:#fff;padding:8px 4px;box-shadow:0 0 3px 1px #000;accent-color:#4a983e}.chimeVolumeHolder:hover .chimeVolume,.chimeVolumeHolder.open .chimeVolume,.chimeVolumeHolder:focus-within .chimeVolume{display:block}.cardArea{display:flex;justify-content:center;align-items:flex-end;min-height:150px;padding:0 8px 8px}.CardHolder{background:#fff;padding:0;margin:0 var(--cardMargin);box-shadow:none;border-radius:6px;line-height:0}.CardHolder .Card{height:132px;width:auto;border-radius:6px;border:1px solid #666;box-shadow:0 0 0 1px #c0c4cc;display:block;background:#fff}.myArea .CardHolder .Card{height:148px}.CardHolder.small .Card{height:46px}.CardHolder.focused{transform:translateY(-16px)}.CardHolder.notPlayable{opacity:1}.Stage2.play .cardArea .CardHolder.notPlayable .Card{filter:brightness(.75)}.CardHolder.tookTrick .Card{box-shadow:0 0 0 3px #e6b800}.suitBreak{margin-left:10px}.miniCards{display:flex;flex-wrap:wrap;gap:2px}.miniCards i{width:12px;height:16px;background:#1d6b32;border-radius:2px;display:inline-block}.BidDisplay{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px}.BidDisplay .need{color:#e0e0e0}.BidDisplay .got{color:#4a993e}.BidDisplay .over{color:#d40600;font-weight:700}.dialog{position:fixed;inset:0;background:#00000073;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px}.dialogBody{background:#fff;max-width:800px;max-height:90vh;overflow:auto;padding:16px 20px 24px;border-radius:8px;text-align:left}.dialogBody.wide{max-width:1100px}.rules h1,.rules h2{margin:.6em 0 .2em}.scores{border-collapse:collapse;font-size:.9em}.scores th,.scores td{border:1px solid #ddd;padding:3px 6px;text-align:center}.scores .ok{background:#e5f6e0}.scores .missed{background:#fde8e8}.scores .topScore,.scores .rank1{font-weight:700}.trumpPick{display:flex;gap:4px;justify-content:center;align-items:center}.trumpPick img{height:22px}.previousGames td{padding:4px 8px 4px 0;vertical-align:top}.age{color:#666;font-size:.85em}@media(max-width:800px){.seatingWithTable{grid-template-columns:minmax(70px,.4fr) 1fr minmax(70px,.4fr);grid-template-rows:auto minmax(200px,1fr) 180px}.CardHolder .Card,.myArea .CardHolder .Card{height:96px}}
