@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

.portal{background:#d9bf98 url('/assets/landing/puzzle-pattern.svg') repeat;background-size:540px 360px;animation:piecesDrift 48s linear infinite;color:#322418;font-family:Nunito,"Trebuchet MS",sans-serif}
@keyframes piecesDrift{to{background-position:540px 360px}}
@media(prefers-reduced-motion:reduce){.portal{animation:none}}
.tablesArea{margin-top:0!important;border-radius:0 0 13px 13px!important;background:#fff9ed!important;box-shadow:0 6px 0 #a47d4c!important}
.tablesArea .sectionTitle{padding:22px 27px 14px;border-bottom:0}
.tableTabs{display:flex;gap:5px;align-items:flex-end;padding:0 26px;border-bottom:2px solid #d9bc84}
.tableTabs button{padding:10px 16px 11px;border:0;border-bottom:3px solid transparent;background:transparent;color:#816a52;font-size:13px;font-weight:900;cursor:pointer}
.tableTabs button:hover{color:#38271a}.tableTabs button.active{color:#38271a;border-bottom-color:#bd7236}
.tablesArea .portalGrid{display:block;padding:0!important}
.tablesArea [data-table-panel]{padding:22px 27px 27px!important;min-height:124px;border:0!important;background:transparent!important}
.tablesArea [data-table-panel][hidden]{display:none!important}
.tablesArea .filters{max-width:720px}.tablesArea #friendForm{max-width:500px}
.tablesArea #openRooms,.tablesArea #myRooms,.tablesArea #friends{font-size:13px;min-height:34px;color:#6d5843}
.tablesArea .roomCard{max-width:850px}
@media(max-width:620px){.tableTabs{padding:0 14px}.tableTabs button{padding:10px 11px;font-size:11px}.tablesArea [data-table-panel]{padding:18px!important}}
.portal button,.portal input,.portal select{font-family:inherit}
.siteWrap{max-width:1240px;padding:0 24px}
.siteNav{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;height:132px;border:0}
.siteNav .siteBrand{grid-column:2;color:#36261b;font-size:40px;letter-spacing:-.065em;font-weight:900}
.siteNav .siteBrand img{width:41px;height:41px;filter:brightness(.72) sepia(.25)}
.navExplore{grid-column:1;grid-row:1;justify-self:start;color:#59412e;text-decoration:none;font-size:14px;font-weight:800}
.navExplore:hover{text-decoration:underline}
.siteNav #accountArea{grid-column:3;grid-row:1;justify-self:end;color:#3c2a1c;font-size:11px}
.siteNav button{background:#fff4de;color:#3b281b;border:2px solid #49321f;border-radius:7px;box-shadow:0 3px 0 #49321f;padding:9px 13px;font-size:12px;font-weight:900}
.siteNav button:hover{background:#ffe4a8}
.playPanel{background:#fffaf0;border:2px solid #4b3422;border-bottom:0;border-radius:15px 15px 0 0;overflow:hidden}
.playHeading{display:flex;align-items:center;justify-content:center;gap:20px;min-height:155px;padding:20px;background:#f8e5bb;border-bottom:2px solid #d9bc84;text-align:left}
.playPuzzle{width:88px;height:88px;transform:rotate(-14deg);filter:drop-shadow(3px 4px 0 #876a4c44)}
.playHeading span{display:block;font-size:12px;letter-spacing:.09em;font-weight:900;color:#8a4d31}
.playHeading h1{margin:-5px 0 0;font-size:64px;font-weight:900;letter-spacing:-.07em;line-height:1.05;color:#38271a}
.playChoices{display:grid;grid-template-columns:1fr 1fr;padding:30px 55px 24px}
.playChoice{text-align:center;padding:15px 52px 25px}
.playChoice+.playChoice{border-left:2px solid #e3d7c5}
.choiceIcon{display:block;width:54px;height:54px;padding:12px;margin:0 auto 14px;border:2px solid #4f3828;border-radius:50%;background:#ffcf65;filter:none}
.playChoice+.playChoice .choiceIcon{background:#b6d9c3}
.playChoice h2{font-size:26px;font-weight:900;letter-spacing:-.04em;margin:0 0 9px}
.playChoice p{max-width:310px;min-height:68px;margin:0 auto 23px;color:#625747;font-size:14px;line-height:1.5}
.playChoice button{display:flex;justify-content:space-between;align-items:center;gap:20px;width:min(100%,320px);min-height:53px;margin:auto;padding:10px 19px;color:#302318;border:2px solid #3e2d20!important;border-radius:8px;box-shadow:0 4px 0 #3e2d20;font-size:16px;font-weight:900;text-align:left}
.playChoice button:hover{transform:translateY(2px);box-shadow:0 2px 0 #3e2d20}
.playChoice button:active{transform:translateY(4px);box-shadow:none}
.playChoice button span{font-size:22px;line-height:1}
.primaryAction{background:#ffc84f}.primaryAction:hover{background:#ffda83}
.secondaryAction{background:#b7ddc5}.secondaryAction:hover{background:#d2ebd9}
.playFacts{display:flex;align-items:center;justify-content:center;gap:28px;padding:18px;border-top:1px solid #e8dfd0;color:#776951;font-size:12px;font-weight:800}
.playFacts span+span:before{content:"•";position:relative;left:-14px;color:#b98655}
#portalError{color:#a33124;font-weight:800;margin:0}
#portalError:not(:empty){background:#fff3e0;padding:12px 16px;border:2px solid #a33124}
.tablesArea{background:#fffaf0;border:2px solid #4b3422;border-top:2px solid #d9bc84;border-radius:0 0 15px 15px;box-shadow:0 8px 0 #a47d4c;margin:0 0 50px;overflow:hidden}
.sectionTitle{margin:0;padding:21px 28px 15px;border-bottom:2px solid #e1ceb0}
.sectionTitle span{color:#985d37;letter-spacing:.08em;font-size:11px;font-weight:900}
.sectionTitle h2{font-size:29px;font-weight:900;letter-spacing:-.05em;margin:0;line-height:1.1}
.sectionTitle button{background:none;color:#684930;font-size:13px;font-weight:900}
.portalGrid{grid-template-columns:1.25fr .85fr;gap:0;padding:0}
.lobbySection,.personalSection{background:transparent;border:0;padding:24px 28px 32px}
.personalSection{border-left:2px solid #e1ceb0;background:#fff7e9}
.sectionHead h2{color:#352518;font-size:23px;letter-spacing:-.04em;font-weight:900}
.sectionHead p{color:#766b5c;font-size:13px;margin:4px 0 19px}
.searchField,.filters select,#friendForm input{background:#fff;border:2px solid #cdbda4;border-radius:6px}
.searchField{min-height:44px}.searchField img{opacity:.55}
.filters input{font-size:13px}
.filters select{font-size:12px;font-weight:800}
.roomCard{border-top:1px solid #ded1be}
.roomCard strong{color:#382719}.roomCard span,#myRooms,#friends{color:#6f6252}
.roomCard button,#friendForm button{background:#e8aa4e;color:#342417;border:2px solid #4b3422;border-radius:5px;font-weight:900}
.roomCard button:hover,#friendForm button:hover{background:#f5c77f}
.personalSection h3{color:#985d37;font-size:12px;font-weight:900}
.friend{border-color:#ded1be}
.siteFooter{border-top:1px solid #84644180;margin-top:0;padding:24px 0 40px}
.siteFooter .siteBrand{color:#36261b;font-size:22px}
.siteFooter .siteBrand img{filter:brightness(.72) sepia(.25)}
.siteFooter p,.siteFooter small,.siteFooter a:not(.siteBrand){color:#5b4431;font-size:12px}
dialog{font-family:Nunito,"Trebuchet MS",sans-serif;border:2px solid #4b3422;border-radius:10px;background:#fff9ef;box-shadow:0 7px 0 #6b4c32,0 25px 70px #160d06aa}
.dialogHead h2{font-weight:900}
.socialButton{border:2px solid #d2c2a8;border-radius:5px;font-size:13px;font-weight:800}
.socialButton img{display:block;width:20px;height:20px;object-fit:contain;flex:none}
.socialButton:hover{background:#fff2d8}
@media(max-width:900px){.siteNav{height:105px}.playChoices{padding:25px 20px}.playChoice{padding:12px 22px 24px}.portalGrid{grid-template-columns:1fr}.personalSection{border-left:0;border-top:2px solid #e1ceb0}.siteFooter{grid-template-columns:1fr auto}.siteFooter p{display:none}}
@media(max-width:620px){.siteWrap{padding:0 13px}.siteNav{height:83px;grid-template-columns:auto 1fr;gap:8px}.siteNav .siteBrand{grid-column:1;font-size:27px}.siteNav .siteBrand img{width:29px;height:29px}.navExplore{display:none}.siteNav #accountArea{grid-column:2}.siteNav button{padding:8px;font-size:10px}.playHeading{min-height:110px;gap:12px}.playPuzzle{width:58px;height:58px}.playHeading span{font-size:8px}.playHeading h1{font-size:43px}.playChoices{grid-template-columns:1fr;padding:8px 20px 14px}.playChoice{padding:22px 0 27px}.playChoice+.playChoice{border-left:0;border-top:2px solid #e3d7c5}.choiceIcon{width:45px;height:45px;padding:10px;margin-bottom:8px}.playChoice h2{font-size:22px}.playChoice p{font-size:12px;min-height:0;margin-bottom:17px}.playChoice button{width:min(100%,280px);min-height:48px;font-size:14px}.playFacts{flex-wrap:wrap;gap:7px 17px;font-size:10px;padding:13px}.playFacts span+span:before{left:-8px}.tablesArea{margin:0 0 35px}.sectionTitle{padding:16px 18px}.sectionTitle h2{font-size:24px}.lobbySection,.personalSection{padding:20px 18px}.siteFooter{grid-template-columns:1fr auto;gap:10px}.siteFooter div{grid-column:1/-1;grid-row:2}.siteFooter small{grid-column:2;grid-row:1}}