@font-face  {
  font-family:Oswald;
  src:url('/fonts/oswald.ttf') format('truetype');
  font-weight:200 700;
  font-display:swap
}
@font-face  {
  font-family:Golos;
  src:url('/fonts/golos-text.ttf') format('truetype');
  font-weight:400 900;
  font-display:swap
}
:root  {
  color-scheme:dark;
  --bg:#111515;
  --surface:#1a1e1e;
  --raised:#242828;
  --text:#f4ebdc;
  --muted:#b1b5b2;
  --rule:#383e3d;
  --focus:#ff6954;
  --red:#d93624;
  --green:#27834b;
  --blue:#1973b0;
  --card-back:url('/cards/back-classic-red.svg');
  --back-tone:#802d23;
  --hand-card-width:90px
}
*  {
  box-sizing:border-box
}
html  {
  scrollbar-color:#5a605c var(--bg);
  scroll-behavior:smooth
}
body  {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.55 Golos,Arial,sans-serif
}
body:has(dialog[open])  {
  overflow:hidden
}
button,.account-form input:not([type="checkbox"]):not([type="radio"]):focus-visible {
  outline-offset: -2px;
}
input,select,textarea  {
  font:inherit
}
a  {
  color:inherit;
  text-underline-offset:4px
}
button,a,input,textarea,select  {
  -webkit-tap-highlight-color:transparent
}
button,.primary,.secondary  {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:42px;
  padding:10px 20px;
  border:1px solid #49504c;
  border-radius:6px;
  background:var(--surface);
  color:var(--text);
  font-weight:600;
  line-height:1.4;
  cursor:pointer;
  text-decoration:none
}
button:not(:disabled):hover,.secondary:not(:disabled):hover  {
  background:#2b302e
}
button:disabled  {
  color:#92958f;
  cursor:default;
  opacity:.65
}
button.primary,a.primary  {
  background:var(--red);
  border-color:transparent;
  color:#fff;
  font-family:Oswald,Golos,sans-serif;
  font-size:18px;
  letter-spacing:.01em
}
button.primary:not(:disabled):hover,a.primary:hover  {
  background:#d92f20
}
.quiet,.link  {
  padding:6px 8px;
  background:transparent;
  border-color:transparent;
  color:var(--muted)
}
.link  {
  text-decoration:underline
}
.quiet:hover,.link:hover  {
  background:transparent;
  color:var(--text)
}
.full  {
  width:100%
}
[hidden]  {
  display:none!important
}
h1,h2,h3,p,ul,ol  {
  margin:0
}
h1,h2,h3  {
  font-family:Oswald,Golos,sans-serif;
  font-weight:650;
  line-height:1.17;
  letter-spacing:0
}
h1  {
  font-size:44px;
  text-transform:uppercase
}
h2  {
  font-size:28px
}
h3  {
  font-size:21px
}
p  {
  margin:10px 0;
  color:var(--muted)
}
li  {
  margin:7px 0
}
ul,ol  {
  padding-left:23px
}
::selection  {
  background:#843027;
  color:white
}
:focus-visible  {
  outline:2px solid var(--focus);
  outline-offset:4px
}
input,select,textarea  {
  width:100%;
  min-height:42px;
  background:#1c2222;
  border:1px solid #515957;
  border-radius:6px;
  color:var(--text);
  padding:10px 12px;
  caret-color:var(--red)
}
textarea  {
  resize:vertical
}
input::placeholder,textarea::placeholder  {
  color:#9ca4a0
}
input[type=checkbox],input[type=radio]  {
  width:17px;
  min-height:17px;
  height:17px;
  padding:0;
  accent-color:var(--red);
  flex:none
}
input[type=range]  {
  padding:0;
  accent-color:var(--red)
}
label  {
  display:block;
  margin:0 0 14px
}
label input:not([type=checkbox]):not([type=radio]),label select,label textarea  {
  display:block;
  margin-top:6px
}
fieldset  {
  border:0;
  padding:0;
  margin:0 0 20px;
  min-width:0
}
legend  {
  font-family:Oswald;
  font-size:18px;
  font-weight:500;
  margin-bottom:12px
}
.check  {
  display:flex;
  align-items:center;
  gap:10px
}
.hint,small  {
  color:var(--muted);
  font-size:12px
}
.loading  {
  padding:80px 0
}
.skip  {
  position:fixed;
  top:-100px;
  left:16px;
  z-index:200
}
.skip:focus  {
  top:12px;
  background:var(--red);
  padding:12px
}
.site-header  {
  height:72px;
  max-width:1440px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:48px;
  padding:0 32px;
  border-bottom:1px solid #2f3533
}
.brand  {
  display:flex;
  align-items:center;
  white-space:nowrap;
  font-family:Oswald;
  font-size:24px;
  font-weight:650;
  text-decoration:none
}
.brand svg  {
  width:19px;
  height:29px;
  color:var(--red);
  margin:0 1px
}
.main-nav  {
  display:flex;
  align-items:center;
  gap:28px;
  flex:1;
  min-width:0
}
.main-nav>a:not(.settings-link)  {
  font-size:13px;
  text-decoration:none;
  white-space:nowrap;
  position:relative;
  padding:24px 0
}
.main-nav>a[aria-current=page]:after  {
  content:'';
  height:3px;
  position:absolute;
  bottom:12px;
  left:0;
  right:0;
  background:var(--red);
  border-radius:3px
}
.nav-spacer  {
  flex:1
}
.main-nav .header-register  {
  color:#fa513c
}
.session-avatar,.avatar,.contact-avatar  {
  border:1px solid #d8b570;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  flex:none;
  background:#1d2323;
  color:var(--text);
  font-family:Oswald;
  font-size:22px;
  width:48px;
  height:48px
}
.session-avatar  {
  width:34px;
  height:34px;
  font-size:15px;
  border-color:#4a5350
}
.settings-link  {
  display:flex;
  align-items:center
}
.settings-link svg  {
  width:20px;
  height:20px
}
.signed-in .header-login,.signed-in .header-register  {
  display:none
}
.main-nav .connection,.main-nav #rules-open,.main-nav .header-display,.main-nav .header-logout  {
  display:none!important
}
.menu-toggle  {
  display:none;
  padding:8px;
  border:0;
  background:transparent
}
.menu-toggle svg  {
  width:24px;
  height:24px
}
.mobile-menu  {
  padding:16px;
  background:var(--surface);
  border-bottom:1px solid var(--rule)
}
.mobile-menu a  {
  display:inline-block;
  padding:12px
}
main  {
  max-width:1380px;
  margin:auto;
  padding:32px;
  min-height:65vh
}
.site-info  {
  max-width:1380px;
  margin:0 auto;
  padding:28px 32px;
  display:flex;
  gap:24px;
  justify-content:space-between;
  border-top:1px solid var(--rule);
  font-size:12px;
  color:var(--muted)
}
.document-nav  {
  display:flex;
  gap:14px;
  flex-wrap:wrap
}
.document-nav a  {
  text-decoration:none
}
.site-info #footer-rules  {
  font-size:12px;
  min-height:0;
  padding:0;
  white-space:nowrap
}
.panel  {
  padding:24px;
  border:1px solid var(--rule);
  border-radius:7px;
  background:#151919
}
.page-head  {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  gap:24px
}
.page-head h1  {
  font-size:36px
}
.page-head p  {
  margin-bottom:0
}
.stats  {
  display:flex;
  gap:24px
}
.stats span  {
  color:var(--muted);
  font-size:12px
}
.stats b  {
  display:block;
  font-family:Oswald;
  font-size:25px;
  color:var(--text)
}
#notice,#account-notice,#active-game-note,.community-note  {
  padding:14px 18px;
  background:#2a2822;
  border:1px solid #66584a;
  border-radius:6px;
  margin-bottom:20px;
  overflow-wrap:anywhere
}
.welcome  {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:650px;
  padding:64px 40px 32px
}
.welcome-art  {
  position:absolute;
  z-index:-1;
  inset:0;
  background:url('/template/king.jpg') right center/cover no-repeat;
  pointer-events:none
}
.welcome-copy  {
  width:52%;
  max-width:550px
}
.welcome h1  {
  font-size:clamp(64px,6vw,92px);
  line-height:1.04;
  max-width:7ch;
  font-weight:700;
  margin-bottom:24px
}
.welcome h1 em  {
  font-style:normal;
  color:var(--red)
}
.intro  {
  font-size:17px;
  max-width:370px;
  color:var(--text);
  line-height:1.55;
  margin-bottom:28px
}
.welcome-actions .primary  {
  min-width:300px;
  min-height:62px;
  justify-content:space-between;
  font-size:23px
}
.welcome-actions svg  {
  width:22px;
  height:22px
}
.welcome-stats  {
  display:flex;
  gap:36px;
  margin-top:64px
}
.welcome-stats b  {
  display:block;
  font-family:Oswald;
  font-size:21px
}
.welcome-stats span  {
  color:var(--muted);
  font-size:12px
}
.guest-entry  {
  margin-top:24px;
  max-width:400px
}
.guest-entry h2  {
  font-size:21px;
  margin-bottom:14px
}
.name-row  {
  display:flex;
  gap:10px
}
.name-row input  {
  min-width:0
}
.name-row button  {
  white-space:nowrap
}
.welcome-bottom  {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  padding:32px 40px;
  border-top:1px solid var(--rule)
}
.welcome-bottom h2  {
  font-size:24px
}
.welcome-bottom p  {
  font-size:13px
}
.welcome-features  {
  display:none
}
.home-guide  {
  border-top:1px solid var(--rule);
  padding-top:32px;
  max-width:1000px;
  margin:32px auto
}
.home-guide h2  {
  font-size:25px;
  margin:24px 0 12px
}
.home-guide p  {
  max-width:75ch
}
body[data-screen]:not([data-screen=guest]) .home-guide  {
  display:none
}
.mode-links  {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin:24px 0
}
.auth-layout  {
  position:relative;
  isolation:isolate;
  min-height:710px;
  padding:52px 5%;
  overflow:hidden
}
.auth-layout:before  {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:url('/template/king.jpg') right center/cover no-repeat;
  pointer-events:none
}
.auth-layout[data-mode=register]:before  {
  background-image:url('/template/queen.jpg'),url('/template/king.jpg')
}
.auth-layout[data-mode=recover]:before  {
  background:none
}
.auth-layout[data-mode=recover]:after  {
  content:'';
  position:absolute;
  z-index:-1;
  right:-5%;
  top:40px;
  width:45%;
  height:800px;
  background:url('/cards/back-classic-red.svg') center/cover;
  border:18px solid #dac7a9;
  border-radius:24px;
  transform:rotate(-13deg)
}
.account-wrap  {
  max-width:430px;
  width:43%;
  padding:0;
  border:0;
  background:none
}
/* Keep the artwork outside the text column, including on portrait tablets. */
@media (min-width:761px) {
  .auth-layout:before {
    left:calc(5% + min(38.7%, 430px) + 20px);
    background-position:right center;
  }
}
.account-wrap h1  {
  font-size:42px;
  margin-bottom:12px
}
.account-wrap>p  {
  margin-bottom:28px
}
.account-form  {
  margin-top:26px
}
.account-form label  {
  font-size:13px
}
.account-form .primary  {
  width:100%;
  margin-top:16px;
  min-height:50px
}
.auth-switch  {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:24px;
  font-size:13px
}
.auth-switch button,.auth-forgot  {
  color:var(--red);
  background:none;
  border:0;
  padding:0;
  min-height:24px;
  text-decoration:underline;
  font-size:13px
}
.auth-options  {
  display:flex;
  justify-content:flex-end
}
.password-control  {
  position:relative;
  margin-top:6px
}
.password-control input  {
  padding-right:76px
}
.password-toggle  {
  position:absolute;
  right:2px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:0;
  min-height:36px;
  padding:6px 10px;
  font-size:12px
}
.password-toggle:hover  {
  background:none
}
.account-form>p,.account-form .hint  {
  font-size:12px
}
.account-wrap .account-tabs  {
  display:none
}
.history-title  {
  font-size:28px;
  margin-bottom:20px
}
.history-scroll  {
  overflow:auto;
  border:1px solid var(--rule);
  border-radius:6px
}
.history-mobile  {
  display:none
}
.history-table,table  {
  width:100%;
  border-collapse:collapse;
  text-align:left
}
th  {
  font-size:12px;
  color:var(--muted);
  font-weight:400;
  border-bottom:1px solid var(--rule);
  padding:12px
}
td  {
  padding:14px 12px;
  border-bottom:1px solid #303633;
  font-size:13px
}
tr:last-child td  {
  border-bottom:0
}
.result-win  {
  color:#8ad589
}
.result-loss  {
  color:#ff6b57
}
.account-actions  {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:24px 0
}
.password-block  {
  max-width:430px
}
.empty-table,.community-empty,.club-empty  {
  padding:28px 0;
  color:var(--muted)
}
.empty-table h3,.club-empty h3  {
  color:var(--text)
}
.lobby-frame  {
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:32px
}
.lobby-art  {
  position:relative;
  min-height:720px;
  background:url('/template/king.jpg') 76% top/auto 720px no-repeat;
  overflow:hidden;
  padding:370px 24px 24px;
  isolation:isolate
}
.lobby-art:after  {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(transparent 35%,#111515 75%)
}
.lobby-art h2  {
  font-size:58px;
  line-height:1.05;
  max-width:5ch
}
.lobby-art p  {
  font-size:17px;
  color:var(--text);
  text-transform:uppercase
}
.lobby-main  {
  min-width:0
}
.lobby-main>h1  {
  font-size:36px;
  margin:4px 0 24px
}
.lobby-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:28px
}
.create  {
  padding:0;
  border:0;
  background:none
}
.create>h2,.create-preset  {
  display:none
}
.create-buttons  {
  display:flex;
  gap:12px;
  margin-top:18px;
  order:2
}
.create-buttons button  {
  flex:1;
  min-height:48px
}
.create form  {
  display:flex;
  flex-direction:column
}
.create-options-body  {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}
.create fieldset  {
  border:1px solid var(--rule);
  padding:16px;
  border-radius:6px;
  margin:0
}
.create legend  {
  float:left;
  width:100%;
  font-size:17px
}
.create fieldset:after  {
  content:'';
  display:table;
  clear:both
}
.mode-options  {
  clear:both;
  display:grid;
  gap:8px
}
.mode-options label  {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:13px
}
.create>.hint  {
  margin-top:16px
}
.check  {
  font-size:13px
}
.create-options-body>.check  {
  margin:0;
  padding:14px;
  border:1px solid var(--rule);
  border-radius:6px
}
.segmented-options  {
  display:flex;
  gap:6px;
  clear:both
}
.segmented-options label  {
  margin:0;
  flex:1;
  position:relative
}
.segmented-options input  {
  position:absolute;
  opacity:0;
  inset:0;
  pointer-events:none
}
.segmented-options span  {
  display:block;
  padding:7px 12px;
  background:#1d2220;
  border:1px solid var(--rule);
  border-radius:4px;
  text-align:center;
  white-space:nowrap
}
.segmented-options input:checked+span  {
  background:var(--red);
  border-color:var(--red);
  color:#fff
}
.segmented-options input:focus-visible+span  {
  outline:2px solid var(--focus);
  outline-offset:3px
}
.segmented-options input:disabled+span  {
  opacity:.5
}
.section-heading  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px
}
.section-heading h2  {
  font-size:26px
}
.count  {
  font-size:14px;
  font-family:Golos;
  color:var(--muted)
}
.table-filters  {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px
}
.filter-block p  {
  font-size:11px;
  margin:0 0 5px
}
.filter-options  {
  display:flex;
  gap:3px
}
.filter-options button  {
  font-size:11px;
  min-height:30px;
  padding:5px 9px;
  border-radius:4px
}
.filter-options button[aria-pressed=true]  {
  background:#652d25;
  border-color:#a04939
}
.room-list  {
  border:1px solid var(--rule);
  border-radius:6px;
  overflow:hidden
}
.room-row  {
  display:grid;
  grid-template-columns:1.2fr 1fr auto;
  gap:12px;
  padding:12px;
  align-items:center;
  border-bottom:1px solid var(--rule);
  position:relative
}
.room-row:last-child  {
  border:0
}
.room-title-line  {
  display:flex;
  gap:10px;
  align-items:center
}
.room-title-line h3  {
  font:500 13px Golos
}
.room-filled  {
  font-size:12px;
  color:var(--muted)
}
.room-rules  {
  font-size:11px;
  margin:4px 0 0
}
.room-seats  {
  display:flex;
  gap:4px
}
.room-seat  {
  border:0;
  background:none;
  padding:0;
  min-height:30px;
  display:flex;
  flex-direction:column;
  min-width:0
}
.room-seat-name  {
  display:none
}
.room-avatar  {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#3b403b;
  color:#eee;
  font-size:11px
}
.vacant .room-avatar  {
  border:1px dashed #737a70;
  background:none;
  color:#a6ada5
}
.room-avatar svg  {
  width:20px;
  height:20px
}
.room-search-footer  {
  display:flex;
  align-items:center;
  gap:10px
}
.room-search-status  {
  font-size:11px;
  color:var(--muted)
}
.join  {
  min-height:34px;
  font-size:12px;
  padding:6px 12px;
  background:var(--red);
  border-color:var(--red)
}
.room-name-popover  {
  position:absolute;
  z-index:8;
  bottom:100%;
  background:#343b35;
  padding:8px;
  border:1px solid var(--rule)
}
.lobby-mobile-tabs  {
  display:none
}
.lobby-company,.company-details  {
  border-top:1px solid var(--rule);
  padding-top:18px
}
.company-heading  {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.company-heading h2  {
  font-size:23px
}
.company-details a  {
  font-size:12px
}
.company-empty  {
  color:var(--muted);
  font-size:12px
}
.company-links  {
  display:flex;
  gap:12px
}
.company-mini-list  {
  display:flex;
  gap:12px;
  list-style:none;
  padding:0
}
.company-mini-list li  {
  margin:0
}
.company-count  {
  font-size:13px
}
.back  {
  width:30px;
  height:45px;
  display:inline-block;
  flex:none;
  background:var(--card-back) center/cover;
  border:1px solid #eee;
  border-radius:3px
}
.card  {
  position:relative;
  display:block;
  padding:0;
  flex:none;
  width:90px;
  height:135px;
  background:#f7f0df;
  color:#111;
  border:1px solid #d1c8b8;
  border-radius:6px;
  box-shadow:0 3px 4px #00120a55;
  overflow:hidden;
  min-height:0
}
.card:not(:disabled):hover  {
  background:#fff9e9
}
.card:disabled  {
  opacity:1;
  filter:none;
  cursor:default
}
.card .classic-face  {
  position:absolute;
  inset:0;
  display:none;
  width:100%;
  height:100%;
  pointer-events:none;
  border-radius:inherit
}
.classic-deck .card .classic-face,.classic-preview .card .classic-face  {
  display:block
}
.classic-deck .card .corner,.classic-deck .card .pip,.classic-deck .card .bottom-corner,.classic-preview .card .corner,.classic-preview .card .pip,.classic-preview .card .bottom-corner  {
  display:none
}
.card .corner  {
  position:absolute;
  top:5px;
  left:5px;
  font-size:22px;
  line-height:1;
  font-weight:700
}
.card .corner small  {
  display:block
}
.card .corner svg  {
  width:17px;
  height:19px
}
.card .pip  {
  position:absolute;
  left:25%;
  top:35%;
  width:50%
}
.card .pip svg  {
  width:100%;
  height:auto
}
.card .bottom-corner  {
  position:absolute;
  bottom:4px;
  right:5px;
  transform:rotate(180deg)
}
.card .suit  {
  fill:currentColor
}
.suit-h  {
  color:#d92a3d
}
.suit-d  {
  color:#1973b0
}
.suit-c  {
  color:#27834b
}
.suit-s  {
  color:#131714
}
.two-colors .suit-d  {
  color:#d92a3d
}
.two-colors .suit-c  {
  color:#131714
}
.large-cards  {
  --hand-card-width:104px
}
.drag-card,.motion-card  {
  position:fixed!important;
  z-index:100!important;
  pointer-events:none!important;
  margin:0!important
}
.motion-card  {
  contain:layout paint
}
.drag-card  {
  touch-action:none
}
.drop-ready  {
  outline:2px solid var(--focus);
  outline-offset:4px
}
.community-page  {
  max-width:1280px
}
.community-heading  {
  display:none
}
.community-layout  {
  display:block
}
.community-tabs  {
  display:flex;
  gap:18px;
  border-bottom:1px solid var(--rule);
  margin-bottom:28px
}
.community-tabs a  {
  padding:9px 0;
  text-decoration:none;
  color:var(--muted);
  font-size:12px
}
.community-tabs a[aria-current=page]  {
  color:var(--text);
  border-bottom:3px solid var(--red)
}
.community-workspace  {
  position:relative;
  min-width:0
}
.community-content>h2  {
  font-size:36px;
  text-transform:uppercase;
  margin:8px 0 24px
}
.community-status:empty  {
  display:none
}
.community-status  {
  color:#f1ba82;
  padding:12px 0
}
.community-row  {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--rule);
  padding:14px 0;
  margin:0
}
.community-row>div:first-child  {
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  column-gap:12px;
  align-items:center;
  min-width:0
}
.community-row .contact-avatar  {
  grid-row:1/3;
  width:36px;
  height:36px;
  font-size:17px;
  border-color:#c85a44;
  background:#472a26
}
.community-row strong  {
  font-size:13px;
  font-weight:500
}
.community-row small  {
  font-size:11px;
  overflow-wrap:anywhere
}
.community-list  {
  list-style:none;
  padding:0
}
.row-actions  {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap
}
.row-actions button,.row-actions a  {
  font-size:12px;
  min-height:34px;
  padding:6px 12px
}
.row-actions button[data-action=invite],.row-actions button[data-action=invite-partner],.row-actions a.secondary  {
  background:var(--red);
  color:white;
  border-color:transparent
}
.friend-management  {
  display:flex;
  gap:8px
}
.friend-management button  {
  background:none;
  border:0;
  padding:4px;
  color:var(--muted);
  font-size:11px
}
.friend-code,.friend-code code  {
  font-size:12px;
  color:var(--muted)
}
.friend-code  {
  display:flex;
  gap:14px;
  align-items:center;
  margin:18px 0
}
.community-search  {
  display:flex;
  align-items:flex-end;
  gap:12px;
  max-width:620px;
  margin:20px 0
}
.community-search label  {
  margin:0;
  flex:1
}
.community-filters  {
  display:flex;
  gap:20px;
  align-items:flex-start;
  margin:24px 0
}
.community-filters legend  {
  font-size:15px
}
.section-intro  {
  max-width:70ch
}
.rank-score  {
  text-align:right
}
.community-rules  {
  max-width:850px;
  margin-top:32px
}
.community-rules p  {
  font-size:12px
}
.community-settings  {
  max-width:700px
}
.community-settings>label  {
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 0;
  border-bottom:1px solid var(--rule);
  margin:0
}
.community-settings strong  {
  display:block;
  font-size:14px;
  font-weight:500
}
.community-settings small  {
  display:block
}
.achievement-list  {
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px
}
.achievement-list li  {
  padding:20px;
  border:1px solid var(--rule);
  border-radius:6px;
  display:flex;
  justify-content:space-between;
  gap:20px
}
.achievement-list progress  {
  display:block;
  margin-top:12px;
  width:100%;
  height:5px;
  accent-color:var(--red)
}
.achievement-list strong  {
  font-family:Oswald;
  font-size:21px
}
.achievement-list .achieved  {
  border-color:#6f8657
}
.messenger-layout  {
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  height:min(680px,calc(100svh - 190px));
  border:1px solid var(--rule);
  border-radius:7px;
  overflow:hidden
}
.messenger-list  {
  border-right:1px solid var(--rule);
  padding:20px 12px;
  overflow:auto
}
.messenger-list h2  {
  font-size:26px;
  margin:0 0 16px
}
.messenger-list a  {
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px 10px;
  text-decoration:none;
  border-radius:6px
}
.messenger-list a[aria-current=page]  {
  background:#682d24
}
.messenger-list a .avatar  {
  width:36px;
  height:36px;
  font-size:16px;
  background:#39422f;
  border-color:#6b7960
}
.messenger-list strong  {
  font-size:13px;
  font-weight:500
}
.messenger-list small  {
  display:block;
  font-size:11px
}
.messenger-dialogue  {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  padding:0 20px
}
.dialogue-head  {
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 0;
  border-bottom:1px solid var(--rule)
}
.dialogue-head h2  {
  font:500 17px Oswald
}
.dialogue-head .avatar  {
  width:34px;
  height:34px;
  font-size:16px;
  background:#39422f
}
.dialogue-head small  {
  font-size:11px;
  display:block
}
.community-chat,#community-chat  {
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1
}
.chat-connection  {
  font-size:11px;
  margin:9px 0;
  color:#a9baa3
}
.chat-connection.offline  {
  color:#efb18d
}
.chat-feed  {
  overflow-y:auto;
  min-height:0;
  flex:1;
  padding:10px 0;
  overscroll-behavior:contain
}
.chat-message  {
  width:fit-content;
  min-width:200px;
  max-width:78%;
  padding:12px 14px;
  background:#252c29;
  border-radius:8px;
  margin:0 auto 14px 0;
  overflow-wrap:anywhere
}
.chat-message.own-message  {
  margin-left:auto;
  margin-right:0;
  background:#c83727;
  color:white
}
.chat-message p  {
  color:inherit;
  margin:5px 0;
  font-size:14px;
  white-space:pre-wrap
}
.chat-message .message-meta  {
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:11px;
  color:#d7ded4
}
.chat-message.own-message .message-meta  {
  color:#ffe2d7
}
.chat-message button  {
  min-height:28px;
  padding:2px 4px;
  border:0;
  background:none;
  color:inherit;
  font-size:11px
}
.message-footer  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px
}
.message-actions  {
  display:flex;
  justify-content:flex-end;
  gap:10px
}
.chat-message small  {
  font-size:11px;
  color:inherit
}
.chat-compose  {
  border-top:1px solid var(--rule);
  padding:12px 0 18px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 45px;
  gap:8px;
  align-items:end
}
.chat-compose label  {
  margin:0;
  font-size:0
}
.chat-compose textarea  {
  display:block;
  min-height:45px;
  height:45px;
  resize:none;
  font-size:13px;
  margin:0!important
}
.chat-compose>div  {
  display:contents
}
.chat-compose .hint  {
  display:none
}
.chat-compose button  {
  position:relative;
  display:block;
  height:45px;
  max-height:45px;
  align-self:end;
  line-height:1;
  font-size:0;
  min-width:45px;
  min-height:45px;
  width:45px;
  padding:0;
  border-radius:50%;
  background:var(--red);
  border:0
}
.chat-compose button:after  {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:block;
  width:20px;
  height:20px;
  background:currentColor;
  clip-path:none;
  background:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4 20-7Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat
}
.chat-status  {
  font-size:11px;
  margin:0
}
.chat-status:empty  {
  display:none
}
.chat-new-messages  {
  align-self:center;
  font-size:11px;
  min-height:30px;
  padding:5px 12px;
  margin:4px 0
}
.table-chat-panel  {
  position:fixed;
  z-index:45;
  right:0;
  top:72px;
  bottom:0;
  width:340px;
  background:#111817;
  border-left:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  padding:20px
}
.table-chat-head  {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.table-chat-head h2  {
  font-size:24px
}
.table-chat-head button  {
  font-size:11px;
  min-height:30px;
  padding:5px;
  background:none;
  border:0
}
.table-chat-head button svg  {
  width:16px
}
.table-chat-content  {
  display:flex;
  flex:1;
  min-height:0;
  flex-direction:column
}
.chat-turn  {
  padding:10px 0;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:11px
}
.table-chat-panel:empty  {
  display:none
}
.settings-layout  {
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  min-height:min(680px,calc(100svh - 190px));
  border:1px solid var(--rule);
  border-radius:7px;
  overflow:hidden
}
.settings-sidebar  {
  border-right:1px solid var(--rule);
  padding:24px 16px;
  display:flex;
  flex-direction:column;
  gap:6px
}
.settings-sidebar a  {
  padding:10px 12px;
  text-decoration:none;
  font-family:Oswald;
  font-size:17px;
  border-radius:5px
}
.settings-sidebar a[aria-current=page]  {
  background:var(--red);
  color:white
}
.settings-sidebar hr  {
  border:0;
  border-top:1px solid var(--rule);
  margin:18px 0;
  width:100%
}
.settings-section  {
  border-bottom:1px solid var(--rule);
  padding:0 0 24px;
  margin:0 0 24px;
  max-width:800px
}
.settings-section h2  {
  font-size:22px;
  margin-bottom:14px
}
.settings-section>p  {
  font-size:12px
}
.settings-columns  {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px
}
.settings-preview  {
  display:flex;
  gap:12px;
  margin:18px 0
}
.settings-preview .card  {
  width:72px;
  height:108px
}
.back-swatch  {
  display:inline-block;
  flex:none;
  width:40px;
  height:60px;
  border-radius:4px;
  background:var(--card-back) center/cover
}
.back-classic-red  {
  background-image:url('/cards/back-classic-red.svg')
}
.back-classic-blue  {
  background-image:url('/cards/back-classic-blue.svg')
}
.back-graphite  {
  background-image:url('/cards/back.svg')
}
.back-forest  {
  background-image:url('/cards/back-forest.svg')
}
.back-wine  {
  background-image:url('/cards/back-wine.svg')
}
.display-choices  {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.display-choices label  {
  display:flex;
  gap:8px;
  align-items:center;
  border:1px solid var(--rule);
  border-radius:5px;
  padding:10px 12px;
  margin:0;
  font-size:12px
}
.display-choices label:has(input:checked)  {
  border-color:#e2674f
}
.settings-row  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:17px 0;
  border-bottom:1px solid var(--rule)
}
.settings-row>span  {
  display:block
}
.settings-row strong  {
  display:block;
  font-weight:500;
  font-size:14px
}
.settings-row small  {
  display:block;
  font-size:11px
}
.switch  {
  appearance:none!important;
  width:38px!important;
  height:22px!important;
  min-height:22px!important;
  border:0!important;
  border-radius:12px;
  background:#6c716c;
  padding:0!important;
  position:relative;
  cursor:pointer;
  margin:0!important;
  flex:none
}
.switch:before  {
  content:'';
  display:block;
  position:absolute;
  top:3px;
  left:3px;
  background:#e2e6dc;
  width:16px;
  height:16px;
  border-radius:50%;
  transition:left .12s
}
.switch:checked  {
  background:var(--red)
}
.switch:checked:before  {
  left:19px
}
.sound-row  {
  display:grid;
  grid-template-columns:160px minmax(80px,1fr) 45px;
  gap:18px;
  align-items:center;
  margin:18px 0;
  max-width:580px
}
.settings-save  {
  display:flex;
  gap:20px;
  align-items:center;
  margin-top:24px
}
.settings-save .primary  {
  min-width:240px
}
.profile-edit-grid  {
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  gap:32px
}
.profile-edit-avatar  {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:24px
}
.profile-edit-avatar .avatar  {
  width:72px;
  height:72px;
  font-size:36px
}
.profile-edit-grid aside  {
  background:var(--surface);
  padding:20px;
  border-radius:6px;
  height:max-content
}
.profile-edit-grid aside h2  {
  font-size:22px
}
.profile-edit-grid aside p  {
  display:flex;
  justify-content:space-between;
  font-size:12px
}
.settings-notice  {
  color:#e0be82;
  font-size:12px
}
.admin-layout  {
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  border:1px solid var(--rule);
  min-height:420px
}
.admin-tabs  {
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--rule);
  padding:24px 16px;
  gap:8px
}
.admin-tabs button  {
  justify-content:flex-start;
  border:0;
  background:none;
  padding:10px 12px;
  font-family:Oswald;
  font-size:17px
}
.admin-tabs button[aria-current=page]  {
  background:var(--red)
}
#workspace  {
  min-width:0;
  padding:24px
}
.admin-heading  {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px
}
.admin-heading h1  {
  font-size:36px
}
.admin-heading p  {
  font-size:11px
}
.toolbar  {
  display:flex;
  gap:12px;
  align-items:end;
  flex-wrap:wrap;
  margin-bottom:18px
}
.toolbar label  {
  font-size:11px;
  margin:0
}
.toolbar .search-label  {
  flex:1;
  min-width:180px
}
.toolbar select  {
  font-size:12px;
  min-height:38px
}
.toolbar input  {
  min-height:38px
}
.toolbar button  {
  min-height:38px;
  font-size:12px
}
#list-status  {
  font-size:11px
}
.scroll  {
  overflow:auto
}
.responsive-table  {
  border:1px solid var(--rule);
  border-radius:5px
}
.responsive-table th,.responsive-table td  {
  font-size:11px;
  padding:10px 8px
}
.subline  {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
  overflow-wrap:anywhere
}
.name  {
  font-weight:600
}
.numeric  {
  text-align:right
}
.mobile-label  {
  display:none
}
.online  {
  color:#91cf86
}
.blocked  {
  color:#ff7964
}
#pagination  {
  display:flex;
  gap:6px;
  align-items:center;
  margin-top:18px;
  flex-wrap:wrap
}
#pagination button  {
  font-size:12px;
  min-height:32px;
  padding:5px 12px
}
#pagination button[aria-current=page]  {
  background:var(--red)
}
#feedback  {
  font-size:12px;
  color:#e7bf86
}
.article  {
  max-width:950px;
  margin:24px auto;
  padding:24px
}
.article h1  {
  font-size:44px;
  max-width:22ch;
  margin:24px 0
}
.article h2  {
  font-size:26px;
  margin:28px 0 14px
}
.article p,.article li  {
  font-size:15px;
  max-width:75ch;
  line-height:1.75
}
.contact-email  {
  display:inline-block;
  font:500 clamp(20px,4vw,34px) Oswald;
  margin:20px 0;
  overflow-wrap:anywhere
}
.info-play  {
  min-height:48px;
  margin:18px 0
}
.document-back  {
  color:var(--muted);
  font-size:12px
}
.article .download  {
  margin-top:20px
}
.article-meta  {
  font-size:12px
}
.download  {
  display:inline-flex
}
.missing-page  {
  text-align:center
}
dialog  {
  border:1px solid #59625d;
  border-radius:8px;
  background:#171d1a;
  color:var(--text);
  padding:32px;
  max-width:min(780px,calc(100vw - 24px));
  max-height:90dvh;
  overflow:auto
}
dialog::backdrop  {
  background:#000c
}
dialog h2  {
  font-size:30px;
  margin:0 32px 20px 0
}
dialog p  {
  margin:16px 0
}
dialog button  {
  margin-top:12px
}
dialog .close  {
  position:absolute;
  top:12px;
  right:12px;
  background:none;
  border:0;
  width:36px;
  height:36px;
  min-height:36px;
  padding:8px;
  margin:0
}
dialog .close svg  {
  width:20px;
  height:20px
}
.dialog-actions,.logout-actions  {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px
}
.display-grid  {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px
}
.display-preview  {
  display:flex;
  gap:8px;
  margin:14px 0
}
.display-card.card  {
  width:65px;
  height:98px
}
.card-credit  {
  font-size:11px;
  margin:10px 0
}
.display-save  {
  border-top:1px solid var(--rule);
  margin-top:24px;
  padding-top:12px
}
.suit  {
  fill:currentColor
}
.display-choices .back-swatch  {
  width:28px;
  height:42px
}
.reduce-motion *,.reduce-motion *:before  {
  animation:none!important;
  transition:none!important
}
body[data-card-back=classic-red]  {
  --card-back:url('/cards/back-classic-red.svg')
}
body[data-card-back=classic-blue]  {
  --card-back:url('/cards/back-classic-blue.svg')
}
body[data-card-back=graphite]  {
  --card-back:url('/cards/back.svg')
}
body[data-card-back=forest]  {
  --card-back:url('/cards/back-forest.svg')
}
body[data-card-back=wine]  {
  --card-back:url('/cards/back-wine.svg')
}
@media(max-width:1100px)  {
  .site-header  {
    gap:28px;
    padding-inline:24px
  }
  .main-nav  {
    gap:20px
  }
  .header-login,.header-register  {
    font-size:11px!important
  }
  .main-nav #table-chat-open  {
    font-size:11px;
    padding:5px
  }
  .lobby-frame  {
    grid-template-columns:240px minmax(0,1fr);
    gap:24px
  }
  .lobby-art  {
    padding-inline:16px
  }
  .lobby-art h2  {
    font-size:50px
  }
  .settings-layout  {
    grid-template-columns:180px 1fr
  }
  .settings-preview .card  {
    width:55px;
    height:83px
  }
  .profile-edit-grid  {
    grid-template-columns:1fr 180px
  }
  .welcome  {
    min-height:590px
  }
  .welcome-actions .primary  {
    min-width:250px
  }
  .main-nav .settings-link  {
    display:none
  }
}
@media(max-width:760px)  {
  h1  {
    font-size:32px
  }
  h2  {
    font-size:24px
  }
  body  {
    font-size:13px
  }
  .site-header  {
    height:64px;
    padding:0 18px;
    gap:18px
  }
  .brand  {
    font-size:23px
  }
  .main-nav  {
    display:none
  }
  .menu-toggle  {
    display:inline-flex;
    margin-left:auto
  }
  .mobile-menu  {
    position:absolute;
    top:64px;
    left:0;
    right:0;
    z-index:60
  }
  .mobile-menu a  {
    display:block;
    font-size:15px;
    padding:11px 16px
  }
  .site-info  {
    padding:22px 16px;
    flex-direction:column;
    gap:16px
  }
  .document-nav  {
    gap:12px 16px
  }
  main  {
    padding:20px 16px;
    min-height:70vh
  }
  .welcome  {
    min-height:0;
    padding:245px 4px 12px;
    margin:-20px -2px 0
  }
  .welcome-art  {
    background-position:80% top;
    background-size:auto 700px;
    mask-image:linear-gradient(#000 50%,transparent 90%)
  }
  .welcome-copy  {
    width:100%;
    max-width:none
  }
  .welcome h1  {
    font-size:50px;
    line-height:1.06;
    margin-bottom:14px
  }
  .intro  {
    font-size:14px;
    max-width:240px;
    line-height:1.4;
    margin-bottom:22px;
    text-shadow:0 1px 2px #000
  }
  .welcome-actions .primary  {
    width:100%;
    min-height:52px;
    font-size:21px;
    padding:10px 20px
  }
  .welcome-stats  {
    margin-top:26px;
    gap:20px;
    justify-content:space-between
  }
  .welcome-stats b  {
    font-size:17px
  }
  .welcome-stats span  {
    font-size:11px
  }
  .guest-entry  {
    background:#131916;
    padding:18px 12px;
    border:1px solid var(--rule);
    border-radius:6px
  }
  .name-row  {
    flex-wrap:wrap
  }
  .name-row>*  {
    width:100%
  }
  .welcome-bottom  {
    grid-template-columns:1fr;
    padding:26px 0;
    gap:22px
  }
  .welcome-bottom h2  {
    font-size:24px
  }
  .home-guide  {
    padding-top:16px;
    margin-top:12px
  }
  .auth-layout  {
    padding:24px 0;
    min-height:0
  }
  .auth-layout:before  {
    display:none
  }
  .account-wrap  {
    width:100%;
    max-width:420px;
    margin:0 auto
  }
  .account-wrap h1  {
    font-size:34px
  }
  .account-wrap>p  {
    font-size:13px;
    margin-bottom:22px
  }
  .account-form  {
    margin-top:22px
  }
  .account-form input  {
    min-height:44px
  }
  .account-wrap .auth-switch  {
    font-size:12px
  }
  .history-scroll  {
    display:none
  }
  .history-mobile  {
    display:block;
    list-style:none;
    padding:0
  }
  .history-mobile li  {
    padding:14px 0;
    border-bottom:1px solid var(--rule)
  }
  .history-mobile li>div  {
    display:flex;
    justify-content:space-between
  }
  .history-mobile time  {
    font-size:11px;
    color:var(--muted)
  }
  .history-mobile p  {
    font-size:12px;
    margin:6px 0
  }
  .account-actions  {
    gap:8px
  }
  .account-actions a,.account-actions button  {
    font-size:12px;
    padding:9px 12px
  }
  .lobby-frame  {
    display:block
  }
  .lobby-art  {
    display:none
  }
  .lobby-main>h1  {
    font-size:30px;
    margin-bottom:20px
  }
  .lobby-mobile-tabs  {
    display:flex;
    gap:6px;
    margin-bottom:20px
  }
  .lobby-mobile-tabs button  {
    flex:1;
    font-size:12px;
    padding:8px;
    min-height:40px
  }
  .lobby-mobile-tabs button[aria-selected=true]  {
    background:var(--red);
    border-color:var(--red)
  }
  .create-options-body  {
    gap:10px
  }
  .create fieldset  {
    padding:12px
  }
  .create legend  {
    font-size:15px
  }
  .mode-options label  {
    font-size:12px
  }
  .segmented-options span  {
    font-size:12px;
    padding:7px 8px
  }
  .create-buttons  {
    flex-direction:column
  }
  .room-row  {
    grid-template-columns:1fr auto;
    gap:8px;
    padding:10px
  }
  .room-seats  {
    grid-row:2;
    grid-column:1
  }
  .room-search-footer  {
    grid-column:2;
    grid-row:1/3;
    flex-direction:column;
    gap:8px
  }
  .room-rules  {
    font-size:11px
  }
  .room-search-status  {
    font-size:11px
  }
  .room-avatar  {
    width:25px;
    height:25px
  }
  .table-filters  {
    gap:9px
  }
  .filter-options button  {
    padding:4px 7px;
    font-size:11px
  }
  .page-head  {
    align-items:flex-start;
    gap:12px;
    margin-bottom:20px
  }
  .page-head h1  {
    font-size:29px
  }
  .page-head p  {
    font-size:12px
  }
  .page-head>.quiet  {
    font-size:11px;
    white-space:nowrap
  }
  .community-tabs  {
    gap:16px;
    overflow:auto;
    white-space:nowrap;
    margin-bottom:22px
  }
  .community-tabs a  {
    font-size:11px
  }
  .community-content>h2  {
    font-size:30px;
    margin-bottom:18px
  }
  .community-row  {
    gap:10px;
    padding:12px 0
  }
  .community-row>div:first-child  {
    grid-template-columns:34px 1fr;
    gap:4px 9px
  }
  .community-row .contact-avatar  {
    width:31px;
    height:31px;
    font-size:15px
  }
  .community-row strong  {
    font-size:12px
  }
  .community-row small  {
    font-size:11px;
    max-width:145px
  }
  .row-actions  {
    justify-content:flex-end;
    gap:5px
  }
  .row-actions button,.row-actions a  {
    font-size:11px;
    min-height:32px;
    padding:6px 9px
  }
  .friend-management button  {
    font-size:11px;
    min-height:22px
  }
  .friend-code  {
    font-size:11px;
    flex-wrap:wrap;
    gap:8px
  }
  .community-search  {
    gap:8px
  }
  .community-search label  {
    font-size:11px
  }
  .community-search button  {
    padding:10px 14px;
    font-size:12px
  }
  .community-filters  {
    gap:14px;
    flex-wrap:wrap;
    margin:20px 0
  }
  .achievement-list  {
    grid-template-columns:1fr
  }
  .messenger-layout  {
    display:block;
    height:calc(var(--dialogue-height,100dvh) - 180px);
    min-height:410px;
    border:0
  }
  .messenger-list  {
    padding:0;
    border:0
  }
  .messenger-layout.has-dialogue .messenger-list  {
    display:none
  }
  .messenger-dialogue  {
    height:100%;
    padding:0
  }
  .dialogue-head  {
    padding-top:0
  }
  .dialogue-head .community-back  {
    display:inline-flex;
    font-size:11px
  }
  .chat-compose  {
    padding-bottom:8px
  }
  .chat-message  {
    max-width:85%;
    margin-bottom:12px;
    padding:10px 12px
  }
  .chat-message p  {
    font-size:13px
  }
  .community-dialogue .site-info,.community-dialogue .community-tabs,.community-dialogue .community-heading  {
    display:none
  }
  .community-dialogue main  {
    padding-top:18px;
    padding-bottom:0
  }
  .community-dialogue .community-note  {
    font-size:11px;
    padding:8px;
    margin-bottom:15px
  }
  .table-chat-panel  {
    top:64px;
    bottom:0;
    width:100%;
    border-left:0;
    padding:16px
  }
  .table-chat-panel .chat-compose  {
    padding-bottom:max(12px,env(safe-area-inset-bottom))
  }
  .settings-layout  {
    grid-template-columns:1fr;
    border:0
  }
  .settings-sidebar  {
    flex-direction:row;
    overflow:auto;
    border-right:0;
    border-bottom:1px solid var(--rule);
    padding:0 0 18px;
    gap:8px
  }
  .settings-sidebar a  {
    font-family:Golos;
    font-size:11px;
    padding:8px 11px;
    white-space:nowrap
  }
  .settings-sidebar hr  {
    display:none
  }
  .settings-columns  {
    grid-template-columns:1fr;
    gap:22px
  }
  .settings-section  {
    margin-bottom:22px;
    padding-bottom:22px
  }
  .settings-preview  {
    gap:8px
  }
  .settings-preview .card  {
    width:55px;
    height:83px
  }
  .settings-row  {
    gap:16px;
    padding:15px 0
  }
  .settings-row strong  {
    font-size:13px
  }
  .sound-row  {
    grid-template-columns:100px minmax(60px,1fr) 35px;
    gap:12px
  }
  .settings-save  {
    flex-direction:column;
    align-items:stretch
  }
  .settings-save .primary  {
    width:100%;
    min-width:0
  }
  .profile-edit-grid  {
    grid-template-columns:1fr
  }
  .profile-edit-grid aside  {
    order:2
  }
  .admin-layout  {
    grid-template-columns:1fr
  }
  .admin-tabs  {
    flex-direction:row;
    overflow:auto;
    white-space:nowrap;
    padding:10px;
    border-right:0;
    border-bottom:1px solid var(--rule);
    gap:4px
  }
  .admin-tabs button  {
    font-family:Golos;
    font-size:11px;
    padding:8px 10px;
    min-height:36px
  }
  #workspace  {
    padding:14px
  }
  .admin-heading  {
    gap:12px;
    align-items:flex-start
  }
  .admin-heading h1  {
    font-size:29px
  }
  .admin-heading button  {
    font-size:11px;
    padding:8px;
    min-height:36px
  }
  .toolbar  {
    gap:10px
  }
  .toolbar .search-label  {
    flex-basis:100%
  }
  .toolbar input,.toolbar select  {
    font-size:12px
  }
  .responsive-table  {
    overflow:auto
  }
  .responsive-table table  {
    min-width:650px
  }
  .article  {
    padding:8px 16px;
    margin:0
  }
  .article h1  {
    font-size:34px
  }
  .article h2  {
    font-size:24px
  }
  .article p,.article li  {
    font-size:13px
  }
  .mode-links  {
    gap:12px 20px
  }
  .display-grid  {
    grid-template-columns:1fr
  }
  .display-choices  {
    gap:8px
  }
  .display-choices label  {
    padding:8px;
    font-size:11px
  }
  .display-card.card  {
    width:52px;
    height:78px
  }
  dialog  {
    padding:24px 18px
  }
  dialog h2  {
    font-size:26px
  }
  .table-chat-panel .table-chat-head h2  {
    font-size:24px
  }
  .profile-edit-avatar .avatar  {
    width:60px;
    height:60px;
    font-size:30px
  }
}
@media(prefers-reduced-motion:reduce)  {
  *,*:before,*:after  {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
  .motion-card  {
    display:none
  }
}
/* Route-specific structures from the four reference sheets. */
.lobby-state-head  {
  display:none
}
.friend-tabs  {
  display:flex;
  gap:6px;
  border-bottom:1px solid var(--rule);
  padding-bottom:12px;
  margin-bottom:20px
}
.friend-tabs button  {
  font-size:12px;
  min-height:36px;
  padding:7px 14px;
  background:none;
  border-color:transparent
}
.friend-tabs button[aria-pressed=true]  {
  background:var(--red)
}
.dialogue-head .community-back  {
  display:none
}
.small-cards  {
  --hand-card-width:78px
}
.settings-notice  {
  padding:12px 0
}
.community-stat  {
  display:grid;
  grid-template-columns:1fr repeat(4,80px);
  gap:10px;
  padding:8px;
  border-bottom:1px solid var(--rule)
}
.group-head  {
  margin-top:20px
}
.classic-preview .card .classic-face  {
  display:block
}
.card-backs  {
  margin-top:20px
}
.back-classic-red,.back-classic-blue  {
  background-color:#e9e1ce
}
.verify-note  {
  padding:16px;
  border:1px solid #8c6644;
  display:flex;
  justify-content:space-between;
  gap:16px
}
.article code  {
  overflow-wrap:anywhere
}
@media(max-width:760px)  {
  .friend-tabs  {
    gap:4px
  }
  .friend-tabs button  {
    font-size:11px;
    padding:6px 10px
  }
  .dialogue-head .community-back  {
    display:inline-flex
  }
  .community-stat  {
    grid-template-columns:1fr repeat(4,34px);
    font-size:11px;
    gap:5px
  }
  .verify-note  {
    flex-direction:column
  }
  .settings-preview  {
    overflow:auto
  }
}
.welcome h1  {
  max-width:none;
  white-space:nowrap
}
.friends-head  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:6px 0 24px;
  gap:20px
}
.friends-head h2  {
  font-size:36px;
  text-transform:uppercase
}
.friends-head .primary  {
  font-size:15px;
  min-height:38px;
  padding:8px 16px
}
.friend-code  {
  font-size:11px
}
.friend-code p  {
  overflow-wrap:anywhere
}
.friend-code .quiet  {
  font-size:11px
}
.lobby-main .create-options-body>.pair-form-note  {
  font-size:11px;
  margin:0
}
.back-swatch.back-classic-red  {
  background-image:url('/cards/back-classic-red.svg')
}
.back-swatch.back-classic-blue  {
  background-image:url('/cards/back-classic-blue.svg')
}
@media(max-width:760px)  {
  .friends-head h2  {
    font-size:30px
  }
  .friends-head .primary  {
    font-size:13px;
    padding:8px 12px
  }
  .welcome h1  {
    font-size:50px
  }
  .main-nav .header-login  {
    display:none
  }
}
.create .lobby-rules-box,.create .lobby-players-box  {
  border:1px solid var(--rule);
  border-radius:6px;
  padding:16px
}
.create .lobby-rules-box fieldset,.create .lobby-players-box fieldset  {
  padding:0;
  border:0;
  margin-bottom:18px
}
.create .lobby-rules-box fieldset:last-child,.create .lobby-players-box fieldset:last-child  {
  margin-bottom:0
}
.create .lobby-rules-box .mode-options  {
  padding:4px 0 14px
}
.create .lobby-rules-box legend,.create .lobby-players-box legend  {
  font-size:16px
}
.create-options-body>label.check  {
  grid-column:1/-1;
  border:0;
  padding:0;
  font-size:12px
}
.lobby-main>h1  {
  font-size:34px
}
.lobby-art  {
  min-height:680px
}
.create-options-body  {
  align-items:stretch
}
.lobby-main .table-filters  {
  gap:12px 18px
}
.lobby-main .tables  {
  min-width:0
}
.lobby-main .company-details  {
  font-size:12px
}
@media(max-width:760px)  {
  .create .lobby-rules-box,.create .lobby-players-box  {
    padding:12px
  }
  .create .lobby-rules-box legend,.create .lobby-players-box legend  {
    font-size:14px
  }
  .create .lobby-players-box .segmented-options span  {
    font-size:11px;
    padding:6px 5px
  }
  .lobby-main>h1  {
    font-size:30px
  }
}
.mobile-bottom-nav  {
  display:none
}
#table-chat-open svg  {
  flex:none
}
#table-chat-open  {
  gap:8px
}
@media(max-width:760px)  {
  body.signed-in  {
    padding-bottom:66px
  }
  .signed-in .mobile-bottom-nav  {
    display:flex;
    position:fixed;
    z-index:40;
    bottom:0;
    left:0;
    right:0;
    justify-content:space-around;
    align-items:center;
    background:#151c18;
    border-top:1px solid var(--rule);
    padding:8px 8px max(8px,env(safe-area-inset-bottom))
  }
  .mobile-bottom-nav a  {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    color:var(--muted);
    font-size:11px;
    text-decoration:none
  }
  .mobile-bottom-nav svg  {
    width:21px;
    height:21px
  }
  .mobile-bottom-nav a[aria-current=page]  {
    color:var(--red)
  }
  body.community-dialogue  {
    padding-bottom:0
  }
  .community-dialogue .mobile-bottom-nav  {
    display:none
  }
  .auth-layout[data-mode=recover]:after  {
    display:none
  }
}
.quick-phrases  {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:12px 0
}
.quick-phrases button  {
  font-size:11px;
  min-height:27px;
  padding:4px 7px;
  border-color:#455044;
  background:#1c2820
}
#quick-phrase-error  {
  font-size:11px;
  color:#f2ae8d
}
#quick-phrase-error:empty  {
  display:none
}
.avatar[data-tone=red]  {
  background:#6c2c24
}
html  {
  scroll-behavior:auto
}
.create legend  {
  float:none;
  width:auto
}
.lobby-main .lobby-rules-box .mode-options  {
  padding-top:0
}
.lobby-main .lobby-players-box .check  {
  clear:both
}
.table-chat-panel .chat-feed  {
  max-height:none
}
.community-page .community-content .friends-head  {
  margin-top:6px
}
.settings-preview.preview-minimal .classic-face  {
  display:none!important
}
.settings-preview.preview-minimal .corner,.settings-preview.preview-minimal .pip  {
  display:block!important
}
.settings-preview.preview-minimal .bottom-corner  {
  display:none!important
}
.size-choices  {
  display:flex;
  gap:18px;
  align-items:flex-end;
  min-height:130px
}
.size-choices label  {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  cursor:pointer;
  margin:0
}
.size-choices input  {
  position:absolute;
  opacity:0
}
.size-sample  {
  display:block;
  background:#f2e6ce;
  border-radius:4px;
  box-shadow:0 2px 3px #0003
}
.size-small  {
  width:25px;
  height:38px
}
.size-normal  {
  width:34px;
  height:51px
}
.size-large  {
  width:44px;
  height:66px
}
.size-choices input:checked+.size-sample  {
  outline:2px solid #f36a4b;
  outline-offset:5px
}
.size-choices input:focus-visible+.size-sample  {
  outline:2px solid var(--focus);
  outline-offset:6px
}
.size-choices b  {
  font-size:11px;
  font-weight:400
}
.settings-columns>div:first-child .display-choices  {
  flex-direction:column;
  gap:12px
}
.settings-columns>div:first-child .display-choices label  {
  border:0;
  padding:0
}
@media(max-width:760px)  {
  .size-choices  {
    min-height:110px
  }
}
.auth-options  {
  justify-content:space-between;
  align-items:center;
  margin-top:18px
}
.auth-options label  {
  margin:0;
  font-size:12px
}
.auth-options input[type=checkbox]  {
  width:15px;
  height:15px;
  min-height:15px
}
.account-form .primary  {
  justify-content:center;
  position:relative
}
.password-control+small  {
  display:block;
  margin-top:8px
}
.password-control input  {
  padding-right:80px
}
.auth-layout h1,.admin-heading h1  {
  text-transform:none
}
.auth-layout h1  {
  font-size:46px
}
.friend-tabs  {
  align-items:center
}
.auth-layout[data-mode=register]:before  {
  background-image:url('/template/queen.jpg')
}
@media(max-width:760px)  {
  .auth-layout h1  {
    font-size:32px
  }
}
.settings-sidebar a[aria-current=page],.friend-tabs button[aria-pressed=true],.admin-tabs button[aria-current=page],.segmented-options input:checked+span  {
  background:#d93624;
  border-color:#d93624;
  color:#fff
}
.friends-head .primary,.row-actions button[data-action=invite],.row-actions button[data-action=invite-partner],.row-actions a.secondary  {
  background:#d93624;
  color:#fff
}
.row-actions a.secondary  {
  border-color:transparent
}
.friend-tabs button[aria-pressed=true]:hover  {
  background:#be2d1d
}
.settings-sidebar a[aria-current=page]:hover  {
  background:#c83220
}
.settings-section .card-credit  {
  font-size:11px
}
.friend-tabs+.community-note  {
  margin:16px 0
}
.friend-tabs button  {
  white-space:nowrap
}
.community-back  {
  color:var(--muted);
  font-size:12px
}
.classic-preview .card  {
  background:#f4ebdc
}
.auth-layout[data-mode=recover]:before  {
  background-image:url("/template/card-back.jpg");
  background-position:center
}
.auth-layout[data-mode=recover]:after  {
  display:none
}
.lobby-art  {
  background-position:100% top
}
.room-row  {
  padding:8px 12px
}
.room-row h3  {
  font-size:12px;
  line-height:1.3
}
.room-row .room-rules  {
  font-size:11px;
  line-height:1.2;
  margin-top:3px
}
.room-row .avatar  {
  width:26px;
  height:26px
}
.messenger-list h1  {
  font-size:30px
}
.community-content>h1,.friends-head h1  {
  font-size:38px
}
.community-row small  {
  display:grid;
  gap:2px
}
.contact-code  {
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%
}
.unread-badge  {
  display:inline-block;
  background:#d93624;
  color:#fff;
  border-radius:10px;
  padding:0 5px;
  font-size:11px
}
.community-row strong  {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
@media(max-width:760px)  {
  .settings-sidebar  {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:visible;
    gap:6px
  }
  .settings-sidebar a  {
    white-space:normal;
    text-align:center;
    font-size:11px;
    padding:8px 4px
  }
  .welcome-art  {
    mask-image:linear-gradient(#000 8%,#0007 30%,transparent 65%)
  }
  .community-row>div:first-child  {
    flex:1;
    grid-template-columns:31px minmax(0,1fr);
    gap:4px 7px
  }
  .community-row .row-actions  {
    flex:0 0 151px
  }
  .community-row small  {
    max-width:100%
  }
  .community-row .friend-management  {
    gap:0
  }
  .community-row .friend-management button  {
    padding:2px 3px
  }
  .community-row strong  {
    font-size:12px
  }
}
@media(max-width:760px)  {
  .table-chat-panel  {
    z-index:70
  }
  body:has(.table-chat-panel:not([hidden]))  {
    overflow:hidden
  }
}
.create-buttons>[hidden]  {
  display:none
}
.create-buttons:has(>[hidden])  {
  grid-template-columns:1fr
}
.inbox-note  {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 20px
}
.inbox-note a  {
  font-size:12px;
  text-decoration:none;
  border:1px solid var(--rule);
  border-radius:4px;
  padding:7px 10px
}
.inbox-note a:hover  {
  background:#292f2b
}
.online-friends  {
  list-style:none;
  padding:0;
  margin:12px 0
}
.online-friends li  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--rule);
  padding:12px 0
}
.online-friends li>span  {
  display:grid;
  gap:2px
}
.online-friends small  {
  color:var(--muted);
  font-size:11px
}
.online-friends a  {
  font-size:12px
}
.company-links  {
  display:flex;
  gap:20px;
  font-size:12px;
  margin-top:20px
}
/* Playing table: composition from reference sheet 2. One component,responsive states below. */
body[data-screen=table] main  {
  max-width:1240px;
  padding:20px 28px 16px;
  min-height:0
}
body[data-screen=table] .site-info,body[data-screen=table] .home-guide,body[data-screen=table] .mobile-bottom-nav  {
  display:none
}
.game-layout  {
  width:100%;
  min-width:0
}
.felt  {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-rows:110px minmax(140px,1fr) 42px calc(var(--hand-card-width)*1.5 + 32px);
  height:clamp(550px,calc(100svh - 130px),720px);
  padding:20px 26px 16px;
  border:1px solid var(--rule);
  border-radius:8px;
  overflow:hidden;
  background:#101512;
  min-width:0
}
.felt::before  {
  content:'';
  position:absolute;
  inset:42px 0 0;
  z-index:-1;
  pointer-events:none;
  background:url('/template/table-cutout.webp') center/100% 100% no-repeat;
  opacity:.88
}
.game-head  {
  position:absolute;
  top:18px;
  left:20px;
  right:20px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  pointer-events:none;
  z-index:4
}
.game-head>div:first-child  {
  padding:9px 12px;
  border:1px solid #4b5149;
  border-radius:5px;
  background:#111815;
  max-width:210px
}
.game-kind  {
  font-size:12px;
  color:#dfe4d9;
  margin:0
}
.game-head h1  {
  font:500 13px/1.35 Golos,Arial,sans-serif;
  text-transform:none;
  margin-top:5px;
  color:var(--text)
}
.game-meta  {
  display:flex;
  align-items:flex-start
}
.turn-clock  {
  width:132px;
  padding:9px 12px;
  background:#111815;
  border:1px solid #4b5149;
  border-radius:5px
}
.turn-clock small  {
  display:block;
  color:#e1dfd4;
  font-size:12px;
  line-height:1.3
}
.timer  {
  display:block;
  font:600 27px/1.2 Oswald,sans-serif;
  color:#fff;
  font-variant-numeric:tabular-nums;
  text-align:left;
  margin:2px 0 7px
}
.timer.urgent  {
  color:#ff927f
}
#turn-progress  {
  display:block;
  appearance:none;
  width:100%;
  height:5px;
  border:0;
  border-radius:8px;
  overflow:hidden;
  background:#4d554c;
  accent-color:#df3925
}
#turn-progress::-webkit-progress-bar  {
  background:#4d554c;
  border-radius:8px
}
#turn-progress::-webkit-progress-value  {
  background:#df3925;
  border-radius:8px;
  transition:width .2s linear
}
#turn-progress::-moz-progress-bar  {
  background:#df3925;
  border-radius:8px
}
.opponents  {
  grid-row:1;
  position:relative;
  min-width:0;
  z-index:3;
  pointer-events:none
}
.opponent  {
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:150px;
  max-width:150px;
  text-align:center;
  color:#fff
}
.opponent-id  {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0
}
.opponent .avatar  {
  width:38px;
  height:38px;
  font-size:18px;
  flex:none;
  background:#17291d;
  border:1px solid #d2c5a0
}
.opponent b  {
  font-size:13px;
  line-height:1.3;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100px
}
.opponent small  {
  display:block;
  font-size:11px;
  line-height:1.3;
  color:#e0e5d5;
  margin:3px 0
}
.opponent.defending .avatar  {
  outline:2px solid #e0c189;
  outline-offset:2px
}
.opponent .backs  {
  position:relative;
  display:flex;
  justify-content:center;
  height:47px;
  margin-top:5px
}
.backs .back  {
  width:31px;
  height:46px
}
.backs .back+.back  {
  margin-left:-12px
}
.backs em  {
  position:absolute;
  right:0;
  bottom:0;
  font-size:11px;
  font-style:normal;
  padding:0 4px;
  background:#17291d;
  border-radius:3px
}
.teammate-label  {
  display:block;
  font:600 12px/1.3 Golos,sans-serif;
  color:#ffb098;
  margin-top:4px
}
.opponents-2 [data-seat="0"]  {
  left:35%
}
.opponents-2 [data-seat="1"]  {
  left:65%
}
.opponents-3:not(.paired-opponents) [data-seat="0"]  {
  left:9%;
  top:150px
}
.opponents-3:not(.paired-opponents) [data-seat="1"]  {
  left:50%
}
.opponents-3:not(.paired-opponents) [data-seat="2"]  {
  left:91%;
  top:150px
}
.paired-opponents [data-seat=partner]  {
  left:8%;
  top:170px
}
.paired-opponents [data-seat="0"]  {
  left:42%
}
.paired-opponents [data-seat="1"]  {
  left:66%
}
.table-middle  {
  grid-row:2;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 112px;
  align-items:center;
  gap:24px;
  min-width:0;
  width:100%;
  padding:0 12px
}
.battle  {
  grid-column:2;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-content:center;
  align-items:center;
  gap:20px 30px;
  min-width:0;
  max-height:100%;
  overflow:auto;
  padding:12px
}
.pair  {
  position:relative;
  flex:none;
  width:88px;
  height:130px
}
.pair .card  {
  width:76px;
  height:114px
}
.pair .cover  {
  position:absolute;
  left:12px;
  top:16px;
  transform:rotate(6deg)
}
.pair.target  {
  outline:2px dashed #f2d3a0;
  outline-offset:4px;
  border-radius:6px
}
.table-empty  {
  text-align:center;
  color:#d6dfc5;
  font-size:12px
}
.table-empty svg  {
  width:32px;
  height:34px;
  fill:currentColor;
  opacity:.6
}
.table-empty p  {
  margin:8px 0
}
.discard  {
  font-size:11px;
  color:#e3e7d7;
  text-align:center;
  align-self:end;
  margin-bottom:14px
}
.discard svg  {
  width:22px;
  height:24px;
  fill:currentColor
}
.stock  {
  grid-column:3;
  position:relative;
  width:110px;
  height:156px;
  color:#fff
}
.stock .trump-card-face  {
  position:absolute;
  left:28px;
  top:28px
}
.stock .stock-trump  {
  width:76px;
  height:114px;
  transform:rotate(90deg)
}
.stock .deck-back  {
  position:absolute;
  left:0;
  top:6px;
  width:76px;
  height:114px;
  z-index:1
}
.stock b  {
  position:absolute;
  left:5px;
  top:10px;
  z-index:2;
  font-size:12px;
  padding:0 4px;
  background:#17291d
}
.stock>small:last-child  {
  position:absolute;
  left:0;
  right:0;
  bottom:5px;
  text-align:center;
  font-size:12px
}
.trump-symbol  {
  display:block;
  text-align:center;
  margin-top:35px
}
.trump-symbol svg  {
  width:30px;
  height:32px;
  fill:#f5e9cc
}
.stock>small  {
  font-size:11px
}
.transfer-zone  {
  min-height:44px;
  padding:10px 14px;
  border:1px dashed #e4d7aa;
  background:#173a25;
  color:#fff;
  font-size:12px;
  align-self:center
}
.transfer-zone small  {
  display:block;
  font-size:11px
}
.your-label  {
  grid-row:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  line-height:1.3;
  color:#fff;
  width:calc(100% - 210px);
  min-width:0
}
.your-label .avatar  {
  width:34px;
  height:34px;
  flex:none;
  font-size:17px;
  background:#17291d;
  border:1px solid #d2c5a0
}
.your-label b  {
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.your-label b>span  {
  font-weight:400
}
.your-label small  {
  font-size:11px;
  color:#e1e7d9
}
.hand  {
  grid-row:4;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  min-width:0;
  width:calc(100% - 210px);
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:20px 10px 12px;
  scroll-padding-inline:12px;
  overscroll-behavior-x:contain;
  scrollbar-width:thin
}
.hand .card  {
  position:relative;
  flex:none;
  width:var(--hand-card-width);
  height:calc(var(--hand-card-width)*1.5);
  margin-left:calc(var(--hand-step,70px) - var(--hand-card-width));
  transform:translateY(var(--fan-drop,0px)) rotate(var(--fan-angle,0deg));
  transform-origin:50% 100%;
  z-index:auto;
  transition:transform .15s ease-out,filter .15s ease-out
}
.hand .card:first-child  {
  margin-left:auto
}
.hand .card:last-child  {
  margin-right:auto
}
.hand.spread .card  {
  transform:none
}
.hand.spread .card:not(:first-child)  {
  margin-left:8px
}
.hand .card.selected,.hand .card:focus-visible  {
  transform:translateY(-12px) rotate(var(--fan-angle,0deg));
  outline:2px solid #f5d491;
  outline-offset:-2px
}
.hand .card.legal-card  {
  outline:1px solid #e3d8b4;
  outline-offset:-1px
}
.hand .unplayable-card:not(.selected)  {
  filter:brightness(.82)
}
.hand [data-card]  {
  touch-action:pan-x;
  cursor:grab
}
.hand .is-dragging  {
  opacity:.25
}
.hand-spread  {
  position:absolute;
  left:calc((100% - 210px)/2);
  transform:translateX(-50%);
  bottom:1px;
  background:none;
  border:0;
  padding:2px 8px;
  min-height:26px;
  font-size:11px;
  color:#e3e7d7;
  z-index:4
}
#hand-scroll-hint  {
  position:absolute;
  left:20px;
  bottom:3px;
  font-size:11px;
  color:#e3e7d7;
  pointer-events:none
}
.game-controls  {
  position:absolute;
  right:20px;
  bottom:22px;
  width:180px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0;
  border:0;
  background:none;
  z-index:4
}
.game-controls h3  {
  font:500 14px/1.3 Golos,sans-serif;
  color:#fff;
  margin:0
}
.game-controls .move-hint  {
  font-size:11px;
  line-height:1.4;
  color:#e2e7d8;
  margin:0
}
.game-controls button.full  {
  min-height:44px;
  font:600 14px/1.3 Golos,sans-serif
}
.game-controls .round-note  {
  display:none
}
.table-help  {
  display:flex;
  justify-content:space-between;
  gap:6px
}
.table-help button  {
  font-size:11px;
  min-height:28px;
  padding:3px 6px;
  color:#e1e6d7
}
body:has(.table-chat-panel:not([hidden])) main:has(.game-layout)  {
  margin-right:340px;
  width:calc(100% - 340px);
  padding-inline:16px
}
@media(hover:hover) and (pointer:fine)  {
  .hand .card:not(:disabled):hover  {
    transform:translateY(-9px) rotate(var(--fan-angle,0deg))
  }
}
@media(max-width:1100px) and (min-width:761px)  {
  .opponent  {
    width:126px
  }
  .opponent b  {
    max-width:85px
  }
  .game-head>div:first-child  {
    max-width:160px
  }
  .turn-clock  {
    width:106px
  }
  .your-label,.hand  {
    width:calc(100% - 165px)
  }
  .game-controls  {
    width:145px
  }
  .hand-spread  {
    left:calc((100% - 165px)/2)
  }
}
@media(max-width:760px)  {
  body[data-screen=table]  {
    padding-bottom:0;
    overflow:hidden
  }
  body[data-screen=table] main  {
    padding:6px;
    max-width:none;
    width:100%;
    margin:0
  }
  body[data-screen=table] .site-header  {
    height:56px;
    padding-inline:12px
  }
  body[data-screen=table] .menu-toggle  {
    display:none
  }
  body[data-screen=table] .main-nav  {
    display:flex;
    margin-left:auto;
    gap:10px;
    flex:0 0 auto
  }
  body[data-screen=table] .main-nav>*  {
    display:none
  }
  body[data-screen=table] .main-nav .settings-link,body[data-screen=table] #table-chat-open:not([hidden])  {
    display:inline-flex;
    width:36px;
    height:36px;
    padding:6px
  }
  .felt  {
    --hand-card-width:70px;
    height:calc(100svh - 68px);
    min-height:460px;
    max-height:760px;
    padding:10px 8px 8px;
    grid-template-rows:112px minmax(80px,1fr) 32px calc(var(--hand-card-width)*1.5 + 24px) 90px
  }
  .small-cards .felt  {
    --hand-card-width:60px
  }
  .large-cards .felt  {
    --hand-card-width:82px
  }
  .felt::before  {
    inset:64px -24% 64px
  }
  .game-head  {
    top:9px;
    left:8px;
    right:8px;
    gap:8px
  }
  .game-head>div:first-child  {
    max-width:135px;
    padding:5px 7px;
    background:#111815e8
  }
  .game-kind  {
    font-size:11px
  }
  .game-head h1  {
    font-size:11px;
    line-height:1.25;
    margin-top:3px
  }
  .turn-clock  {
    width:84px;
    padding:5px 7px;
    background:#111815e8
  }
  .turn-clock small  {
    font-size:11px
  }
  .timer  {
    font-size:22px;
    margin:1px 0 4px
  }
  .opponents  {
    margin-top:57px
  }
  .opponent  {
    width:110px;
    max-width:110px
  }
  .opponent-id  {
    gap:5px
  }
  .opponent .avatar  {
    width:28px;
    height:28px;
    font-size:13px
  }
  .opponent b  {
    font-size:11px;
    max-width:75px
  }
  .opponent small  {
    font-size:11px;
    margin:1px 0
  }
  .opponent .backs  {
    height:28px;
    margin-top:3px
  }
  .backs .back  {
    width:21px;
    height:30px
  }
  .backs .back+.back  {
    margin-left:-9px
  }
  .backs em  {
    font-size:11px;
    right:9px
  }
  .opponents-2 [data-seat="0"]  {
    left:30%
  }
  .opponents-2 [data-seat="1"]  {
    left:70%
  }
  .opponents-3:not(.paired-opponents) [data-seat="0"]  {
    left:13%;
    top:90px
  }
  .opponents-3:not(.paired-opponents) [data-seat="1"]  {
    left:50%
  }
  .opponents-3:not(.paired-opponents) [data-seat="2"]  {
    left:87%;
    top:90px
  }
  .paired-opponents [data-seat=partner]  {
    left:12%;
    top:97px;
    width:86px
  }
  .paired-opponents [data-seat="0"]  {
    left:35%
  }
  .paired-opponents [data-seat="1"]  {
    left:72%
  }
  .teammate-label  {
    font-size:11px
  }
  .table-middle  {
    position:relative;
    padding:0;
    grid-template-columns:22px minmax(0,1fr) 65px;
    gap:5px
  }
  .battle  {
    padding:5px;
    gap:8px 12px;
    max-height:100%;
    align-content:center
  }
  .pair  {
    width:56px;
    height:86px
  }
  .pair .card  {
    width:49px;
    height:74px
  }
  .pair .cover  {
    left:7px;
    top:12px
  }
  .discard  {
    position:absolute;
    right:0;
    bottom:0;
    width:65px;
    font-size:11px;
    margin:0
  }
  .discard svg  {
    display:none;
    width:16px;
    height:18px
  }
  .stock  {
    width:65px;
    height:105px
  }
  .stock .deck-back  {
    width:48px;
    height:72px;
    top:3px;
    left:0
  }
  .stock .stock-trump  {
    width:48px;
    height:72px
  }
  .stock .trump-card-face  {
    top:13px;
    left:14px
  }
  .stock b  {
    font-size:11px;
    left:3px;
    top:5px
  }
  .stock>small:last-child  {
    font-size:11px;
    bottom:9px
  }
  .stock>small  {
    font-size:11px
  }
  .table-empty  {
    font-size:11px
  }
  .table-empty svg  {
    width:23px;
    height:25px
  }
  .table-empty p  {
    margin:4px 0
  }
  .your-label  {
    width:100%;
    gap:6px;
    font-size:11px
  }
  .your-label .avatar  {
    width:27px;
    height:27px;
    font-size:13px
  }
  .your-label b  {
    max-width:150px
  }
  .your-label small  {
    max-width:90px;
    font-size:11px
  }
  .hand  {
    width:100%;
    padding:17px 8px 7px;
    align-self:stretch
  }
  .hand-spread  {
    bottom:86px;
    left:50%;
    min-height:24px;
    font-size:11px;
    padding:2px 7px
  }
  #hand-scroll-hint  {
    display:none
  }
  .game-controls  {
    position:relative;
    grid-row:5;
    right:auto;
    bottom:auto;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:20px 42px 22px;
    gap:4px 8px;
    align-content:end;
    align-self:stretch;
    padding:0 3px;
    background:#111815;
    border-radius:5px
  }
  .game-controls h3  {
    display:none
  }
  .game-controls .move-hint  {
    grid-column:1/-1;
    font-size:11px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    align-self:center
  }
  .game-controls button.full  {
    font-size:12px;
    min-height:42px;
    padding:6px 8px
  }
  .game-controls:has(#play[hidden]) #take,.game-controls:has(#play[hidden]) #pass  {
    grid-column:1/-1
  }
  .table-help  {
    grid-column:1/-1;
    justify-content:space-between
  }
  .table-help button  {
    min-height:24px;
    font-size:11px;
    padding:2px 6px
  }
  body:has(.table-chat-panel:not([hidden])) main:has(.game-layout)  {
    width:100%;
    margin:0;
    padding:6px
  }
  body.chat-modal-open  {
    overflow:hidden
  }
  .table-chat-panel  {
    z-index:70;
    top:56px
  }
}
@media(max-width:760px) and (max-height:700px)  {
  .felt  {
    --hand-card-width:58px;
    min-height:0;
    grid-template-rows:106px minmax(60px,1fr) 28px calc(var(--hand-card-width)*1.5 + 22px) 84px
  }
  .small-cards .felt  {
    --hand-card-width:52px
  }
  .large-cards .felt  {
    --hand-card-width:66px
  }
  .game-controls  {
    grid-template-rows:18px 40px 20px
  }
  .game-controls button.full  {
    min-height:40px
  }
  .hand-spread  {
    bottom:81px
  }
  .pair  {
    height:76px;
    width:49px
  }
  .pair .card  {
    width:44px;
    height:66px
  }
  .battle  {
    gap:6px 10px
  }
}
@media(max-height:500px) and (min-width:761px)  {
  body[data-screen=table] .site-header  {
    height:48px
  }
  body[data-screen=table] main  {
    padding:5px 12px
  }
  .felt  {
    --hand-card-width:64px;
    height:calc(100svh - 58px);
    min-height:0;
    padding:8px 15px;
    grid-template-rows:66px minmax(60px,1fr) 24px 108px
  }
  .game-head  {
    top:8px;
    left:10px;
    right:10px
  }
  .game-head>div:first-child  {
    max-width:190px;
    padding:5px 7px
  }
  .game-kind,.game-head h1  {
    font-size:11px
  }
  .turn-clock  {
    padding:5px 8px;
    width:90px
  }
  .timer  {
    font-size:20px;
    margin:0 0 3px
  }
  .opponent .avatar  {
    width:25px;
    height:25px;
    font-size:12px
  }
  .opponent b  {
    font-size:11px
  }
  .opponent small  {
    font-size:11px
  }
  .opponent .backs  {
    height:28px
  }
  .backs .back  {
    width:20px;
    height:30px
  }
  .backs .back+.back  {
    margin-left:-10px
  }
  .table-middle  {
    position:relative;
    grid-template-columns:30px minmax(0,1fr) 85px;
    gap:10px
  }
  .pair  {
    width:48px;
    height:73px
  }
  .pair .card  {
    width:43px;
    height:65px
  }
  .pair .cover  {
    left:6px;
    top:9px
  }
  .battle  {
    gap:7px 12px;
    padding:4px
  }
  .stock  {
    transform:none;
    width:80px;
    height:90px
  }
  .stock .stock-trump  {
    width:44px;
    height:66px
  }
  .stock .deck-back  {
    width:44px;
    height:66px;
    top:0;
    left:0
  }
  .stock .trump-card-face  {
    left:16px;
    top:15px
  }
  .stock b  {
    left:3px;
    top:3px;
    font-size:11px
  }
  .stock>small:last-child  {
    font-size:11px;
    bottom:0
  }
  .discard  {
    position:absolute;
    right:95px;
    bottom:2px;
    width:45px;
    font-size:11px;
    margin:0
  }
  .discard svg  {
    display:none
  }
  .your-label .avatar  {
    width:25px;
    height:25px;
    font-size:12px
  }
  .your-label,.your-label small  {
    font-size:11px
  }
  .game-controls  {
    right:12px;
    bottom:14px;
    width:155px;
    gap:6px
  }
  .game-controls h3  {
    display:none
  }
  .game-controls .move-hint  {
    display:none
  }
  .game-controls button.full  {
    min-height:36px;
    font-size:12px
  }
  .paired-opponents [data-seat=partner]  {
    top:75px
  }
  .opponents-3:not(.paired-opponents) [data-seat="0"],.opponents-3:not(.paired-opponents) [data-seat="2"]  {
    top:80px
  }
}
/* Profile and settings: reference sheets 3 and 4. */
.account-profile  {
  max-width:1160px;
  margin:0 auto
}
.profile-title  {
  font-size:34px;
  margin-bottom:22px
}
.profile-head  {
  position:relative;
  isolation:isolate;
  min-height:170px;
  padding:4px 0 24px
}
.profile-head::before  {
  content:'';
  position:absolute;
  z-index:-1;
  right:0;
  top:-48px;
  width:390px;
  height:220px;
  background:url('/template/king.jpg') right center/auto 330px no-repeat;
  mask-image:linear-gradient(90deg,transparent,#000 55%);
  opacity:.8;
  pointer-events:none
}
.profile-identity  {
  display:flex;
  align-items:center;
  gap:22px;
  max-width:65%;
  min-width:0
}
.profile-identity>div  {
  min-width:0
}
.profile-identity h2  {
  font:600 28px/1.2 Oswald,sans-serif;
  overflow-wrap:anywhere
}
.profile-identity p  {
  font-size:12px;
  color:var(--muted);
  margin-top:7px
}
.profile-edit  {
  font-size:12px;
  padding:6px 12px;
  min-height:34px;
  margin-top:10px
}
.profile-avatar  {
  display:grid;
  place-items:center;
  width:94px;
  height:94px;
  flex:none;
  border:1px solid #d8634d;
  background:#39221f;
  border-radius:50%;
  font:500 40px Oswald
}
.profile-avatar[data-tone=gold]  {
  background:#463d24;
  border-color:#a68d4d
}
.profile-avatar[data-tone=green]  {
  background:#263c31;
  border-color:#61886b
}
.profile-avatar[data-tone=neutral]  {
  background:#303532;
  border-color:#777f78
}
.profile-stats  {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding:22px 0;
  margin-bottom:16px;
  border-block:1px solid var(--rule)
}
.profile-stats article  {
  padding:0 24px;
  border-right:1px solid var(--rule);
  min-width:0
}
.profile-stats article:first-child  {
  padding-left:0
}
.profile-stats article:last-child  {
  border:0
}
.profile-stats b  {
  display:block;
  font:600 34px/1.2 Oswald;
  font-variant-numeric:tabular-nums
}
.profile-stats span  {
  font-size:12px;
  color:var(--muted);
  display:block;
  margin-top:7px
}
.profile-history  {
  margin-top:26px
}
.history-heading  {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px
}
.history-heading h2  {
  font-size:25px;
  margin:0
}
.history-heading>a  {
  font-size:12px;
  color:#ff9c89;
  white-space:nowrap
}
.account-profile>.account-actions  {
  margin:18px 0
}
.account-profile>.account-actions a,.account-profile>.account-actions button  {
  font:500 12px/1.4 Golos;
  min-height:36px;
  padding:8px 12px
}
.account-profile>.hint  {
  font-size:12px
}
.profile-code  {
  overflow-wrap:anywhere
}
.settings-workspace  {
  padding:28px 32px;
  position:relative;
  isolation:isolate;
  min-width:0
}
.settings-workspace::before  {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0 0 0 auto;
  width:260px;
  background:url('/template/king.jpg') right top/auto 100% no-repeat;
  opacity:.28;
  mask-image:linear-gradient(90deg,transparent,#000 75%);
  pointer-events:none
}
.settings-workspace[data-section=appearance]::before,.settings-workspace[data-section=profile]::before  {
  background-image:url('/template/queen.jpg')
}
.settings-workspace h1  {
  font-size:32px;
  margin-bottom:24px
}
.settings-workspace form  {
  max-width:800px
}
.settings-workspace .profile-edit-grid form  {
  max-width:none
}
.deck-preview-grid  {
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(200px,.8fr);
  gap:24px;
  align-items:start
}
.deck-backs h3  {
  font:500 14px Golos;
  margin:18px 0 12px
}
.deck-backs .display-choices  {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.deck-backs .display-choices label  {
  font-size:11px;
  min-height:62px;
  padding:7px;
  gap:7px
}
.deck-backs .back-swatch  {
  width:35px;
  height:53px
}
.settings-workspace .card-credit  {
  font-size:11px
}
.settings-workspace .settings-section  {
  position:relative
}
.profile-edit-grid small  {
  overflow-wrap:anywhere
}
.password-control input  {
  padding-right:52px
}
.password-toggle  {
  width:44px;
  height:42px;
  min-height:42px;
  padding:10px
}
.password-toggle svg  {
  width:20px;
  height:20px;
  flex:none
}
.rank-table  {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  margin:22px 0;
  font-variant-numeric:tabular-nums
}
.rank-table caption  {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}
.rank-table th,.rank-table td  {
  padding:12px 10px;
  border-bottom:1px solid var(--rule);
  text-align:right;
  font-size:13px;
  font-weight:400
}
.rank-table thead th  {
  font-size:12px;
  color:var(--muted);
  font-weight:400
}
.rank-table th:first-child,.rank-table td:first-child  {
  width:42px;
  text-align:center
}
.rank-table th:nth-child(2)  {
  width:40%;
  text-align:left
}
.rank-table tbody th  {
  font-weight:500
}
.rank-table .rank-avatar  {
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-right:10px;
  border:1px solid #a65b49;
  border-radius:50%;
  background:#3c2923;
  font-size:11px;
  vertical-align:middle
}
.rank-name  {
  display:inline-block;
  vertical-align:middle;
  max-width:calc(100% - 44px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.rank-table .own-rank  {
  background:#4a241f
}
.rank-table .rank-empty  {
  font-size:13px;
  text-align:left;
  padding:22px 12px;
  line-height:1.5;
  color:var(--muted)
}
@media(max-width:1100px)  {
  .deck-preview-grid  {
    grid-template-columns:1fr
  }
  .deck-backs .display-choices  {
    grid-template-columns:repeat(4,1fr)
  }
  .deck-backs h3  {
    margin-top:0
  }
  .settings-workspace  {
    padding:24px
  }
}
@media(max-width:760px)  {
  .profile-title  {
    font-size:30px;
    margin-bottom:18px
  }
  .profile-head  {
    min-height:142px;
    padding-bottom:22px
  }
  .profile-head::before  {
    display:none
  }
  .profile-identity  {
    max-width:100%;
    gap:16px
  }
  .profile-identity h2  {
    font-size:25px
  }
  .profile-avatar  {
    width:76px;
    height:76px;
    font-size:34px
  }
  .profile-stats  {
    padding:18px 0;
    gap:0
  }
  .profile-stats article  {
    padding:0 10px
  }
  .profile-stats b  {
    font-size:29px
  }
  .profile-stats span  {
    font-size:11px;
    line-height:1.35
  }
  .history-heading h2  {
    font-size:23px
  }
  .account-profile>.account-actions  {
    gap:8px
  }
  .account-profile>.hint  {
    font-size:11px;
    line-height:1.5
  }
  .settings-workspace  {
    padding:22px 0
  }
  .settings-workspace::before  {
    display:none
  }
  .settings-workspace h1  {
    font-size:29px
  }
  .deck-preview-grid  {
    gap:16px
  }
  .deck-backs .display-choices  {
    grid-template-columns:1fr 1fr
  }
  .deck-backs .back-swatch  {
    width:36px;
    height:54px
  }
  .rank-table th,.rank-table td  {
    padding:10px 3px;
    font-size:11px
  }
  .rank-table thead th  {
    font-size:11px;
    overflow-wrap:anywhere
  }
  .rank-table th:first-child,.rank-table td:first-child  {
    width:20px
  }
  .rank-table th:nth-child(2)  {
    width:33%
  }
  .rank-table .rank-avatar  {
    width:23px;
    height:23px;
    margin-right:5px;
    font-size:11px
  }
  .rank-name  {
    max-width:calc(100% - 30px)
  }
  .community-row small  {
    font-size:11px
  }
  .friend-management button  {
    font-size:11px;
    min-height:30px;
    padding:4px 6px
  }
  .community-row .row-actions  {
    flex-basis:162px
  }
  .community-row .friend-management  {
    width:100%;
    gap:4px;
    justify-content:flex-end
  }
  .community-row .friend-management button  {
    font-size:11px;
    min-height:30px;
    padding:4px
  }
  .row-actions a.secondary  {
    background:transparent;
    border:1px solid var(--rule);
    color:var(--text)
  }
}
.history-pagination  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:20px;
  font-size:12px
}
.history-pagination>div  {
  display:flex;
  gap:8px
}
.history-pagination a  {
  font-size:12px;
  min-height:36px;
  padding:7px 12px
}
.profile-edit-avatar small  {
  display:block;
  overflow-wrap:anywhere
}
/* Waiting and result: the second approved sheet,with live player data. */
body[data-screen=waiting] main,body[data-screen=finished] main  {
  max-width:1180px
}
body[data-screen=waiting] .page-head  {
  margin-bottom:18px;
  align-items:center
}
body[data-screen=waiting] .page-head h1  {
  font-size:34px;
  margin-bottom:4px
}
body[data-screen=waiting] .page-head p  {
  font-size:13px
}
.waiting-progress  {
  display:block;
  width:100%;
  height:5px;
  border:0;
  border-radius:3px;
  overflow:hidden;
  accent-color:var(--red);
  background:#3d4440
}
.waiting-progress::-webkit-progress-bar  {
  background:#3d4440
}
.waiting-progress::-webkit-progress-value  {
  background:var(--red)
}
.waiting-progress::-moz-progress-bar  {
  background:var(--red)
}
.waiting-friends  {
  font-size:12px;
  display:inline-block;
  margin-bottom:5px
}
#invite-mate  {
  width:100%;
  margin-bottom:14px;
  font-size:12px
}
.result  {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  max-width:1000px;
  margin:0 auto;
  padding:38px 22% 28px;
  min-height:660px;
  text-align:center;
  border:0;
  background:none
}
.result::before,.result::after  {
  content:'';
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  width:28%;
  pointer-events:none;
  background:url('/template/king.jpg') 80% center/auto 100% no-repeat;
  mask-image:linear-gradient(90deg,#000 50%,transparent);
  opacity:.9
}
.result::before  {
  left:-5%
}
.result::after  {
  right:-5%;
  background-image:url('/template/queen.jpg');
  mask-image:linear-gradient(90deg,transparent,#000 50%)
}
.result-heading h1  {
  font-size:68px;
  line-height:1.05;
  margin:0 0 12px;
  text-wrap:balance
}
.result-reason  {
  color:#e9cf9f;
  font-size:16px;
  margin:0 0 24px
}
.result-players  {
  margin:0 auto 24px;
  max-width:460px
}
.result-teams  {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.result-team h2  {
  font:600 12px/1.4 Golos,Arial,sans-serif;
  margin:0 0 12px;
  color:#e2cba4
}
.result-person  {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:10px 0
}
.result-person .avatar  {
  width:38px;
  height:38px;
  font-size:18px
}
.result-person b  {
  font-size:11px;
  line-height:1.35;
  font-weight:500;
  overflow-wrap:anywhere
}
.result-team  {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0 10px;
  align-content:start
}
.result-team h2  {
  flex:0 0 100%
}
.result-team .result-person  {
  flex:1 1 0;
  min-width:0
}
.results-list>div  {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:5px 0;
  border-bottom:1px solid var(--rule);
  gap:18px;
  font-size:12px
}
.results-list .result-person  {
  flex-direction:row;
  text-align:left;
  gap:9px
}
.result-actions  {
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:340px;
  margin:0 auto 12px
}
.result-actions button  {
  min-height:44px
}
.result-actions .result-lobby {
  background: #44382b;
  border-color: #867052;
  color: #fff1d9;
}
.result-actions .result-lobby:hover {
  background: #554534;
}
.result-detail  {
  max-width:460px;
  margin:22px auto 0
}
.result-explanation  {
  font-size:12px;
  color:var(--muted);
  margin:0 0 10px
}
.result-reward  {
  font-size:11px
}
.result-reward p  {
  margin:8px 0
}
.rematch-details  {
  margin-top:20px
}
.rematch-details h2  {
  font:600 13px/1.4 Golos,Arial,sans-serif;
  margin:0 0 8px
}
.rematch-status  {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 12px;
  text-align:left;
  color:var(--muted);
  font-size:11px
}
.result-links  {
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:18px;
  font-size:11px
}
@media(max-width:760px)  {
  body[data-screen=waiting] main  {
    padding:18px 12px 80px
  }
  body[data-screen=waiting] .page-head  {
    align-items:start;
    gap:10px;
    margin-bottom:12px
  }
  body[data-screen=waiting] .page-head h1  {
    font-size:28px
  }
  body[data-screen=waiting] .page-head p  {
    font-size:11px;
    max-width:230px
  }
  body[data-screen=waiting] .page-head>.quiet  {
    font-size:11px;
    padding:5px 2px;
    min-height:32px;
    text-align:right
  }
  .result  {
    padding:28px 14px 22px;
    min-height:0;
    margin:0;
    max-width:560px
  }
  .result::before,.result::after  {
    width:37%;
    opacity:.22;
    top:0;
    bottom:auto;
    height:440px
  }
  .result::before  {
    left:-18%
  }
  .result::after  {
    right:-18%
  }
  .result-heading h1  {
    font-size:52px
  }
  .result-reason  {
    font-size:14px;
    margin-bottom:20px
  }
  .result-players  {
    max-width:340px;
    margin-bottom:20px
  }
  .result-team h2  {
    font-size:11px
  }
  .result-person b  {
    font-size:11px
  }
  .result-actions  {
    max-width:340px
  }
  .result-detail  {
    margin-top:18px;
    max-width:360px
  }
  .rematch-status  {
    font-size:11px
  }
}
@media(min-width:761px) and (max-height:600px)  {
  .result  {
    padding-top:20px
  }
  .result-heading h1  {
    font-size:52px
  }
}
@media(max-width:760px)  {
  body[data-screen=table] #table-chat-open  {
    position:relative;
    width:42px;
    min-width:42px;
    padding:8px
  }
  body[data-screen=table] #table-chat-open span  {
    display:none
  }
  body[data-screen=table] #table-chat-open[aria-label*="новое"]::after  {
    content:'';
    position:absolute;
    right:7px;
    top:7px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--red)
  }
}
@media(max-width:360px)  {
  .team-table .table-empty  {
    max-width:84px;
    margin-left:24px;
    font-size:11px
  }
  .team-table .table-empty svg  {
    display:none
  }
}
/* Visual acceptance: shared data surfaces and waiting composition. */
.metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px 28px;
  padding:20px 24px;
  margin:0 0 28px;
  background:var(--surface);
  border-radius:6px
}
.metrics p {
  margin:0;
  font-size:12px;
  line-height:1.4;
  color:var(--muted)
}
.metrics strong {
  display:block;
  margin-top:7px;
  font:600 28px/1.15 Oswald;
  letter-spacing:0;
  color:var(--text);
  font-variant-numeric:tabular-nums
}
.waiting-table {
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:36px;
  align-items:center;
  max-width:1080px;
  margin:0 auto;
  min-height:520px
}
.waiting-seats {
  position:relative;
  width:100%;
  height:520px;
  background:url('/template/table-cutout.webp') center/100% 100% no-repeat;
  min-width:0
}
.waiting-seats>.player,.waiting-seats>.pair-seat {
  position:absolute;
  transform:translate(-50%,-50%);
  text-align:center;
  width:154px;
  min-width:0
}
.waiting-seats>div:nth-of-type(1) {
  left:50%;
  top:23%
}
.waiting-seats>div:nth-of-type(2) {
  left:78%;
  top:50%
}
.waiting-seats>div:nth-of-type(3) {
  left:50%;
  top:77%
}
.waiting-seats>div:nth-of-type(4) {
  left:22%;
  top:50%
}
.waiting-seats:not(.paired-seats):has(>.player:nth-of-type(2):last-child)>div:nth-of-type(2) {
  left:50%;
  top:77%
}
.waiting-seats:not(.paired-seats):has(>.player:nth-of-type(3):last-child)>div:nth-of-type(2) {
  left:75%;
  top:67%
}
.waiting-seats:not(.paired-seats):has(>.player:nth-of-type(3):last-child)>div:nth-of-type(3) {
  left:25%;
  top:67%
}
.waiting-seats .pair-seat .player {
  position:static;
  transform:none;
  width:auto
}
.waiting-seats .avatar {
  position:relative;
  display:flex;
  width:52px;
  height:52px;
  margin:0 auto 7px;
  background:#23392c;
  border-color:#b7a479;
  font-size:23px;
  overflow:visible
}
.waiting-seats .avatar>svg {
  width:24px;
  height:24px
}
.waiting-seats .avatar>.host-crown {
  position:absolute;
  width:19px;
  height:16px;
  left:calc(50% - 9.5px);
  top:-20px;
  color:#e7c489
}
.waiting-seats b,.waiting-seats small {
  display:block
}
.waiting-seats b {
  font-size:14px;
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.waiting-seats small {
  font-size:11px;
  color:#e1e8dc;
  line-height:1.35;
  max-width:150px;
  margin:3px auto 0
}
.waiting-seats .team-label {
  font-size:11px;
  color:#e7d1a7;
  line-height:1.3;
  margin:5px 0 0
}
.waiting-seats .choose-seat {
  font-size:11px;
  min-height:30px;
  padding:4px 9px;
  margin-top:8px;
  background:#18291e
}
.waiting-seats .vacant-player .avatar {
  background:transparent;
  border:1.5px dashed #cad8bd
}
.waiting-center {
  padding:24px 0;
  background:none;
  align-self:center
}
.waiting-center h2 {
  font-size:28px;
  margin:0 0 18px
}
.waiting-center p {
  font-size:14px;
  line-height:1.55;
  margin:16px 0
}
.waiting-center .seat-counter {
  font:600 14px/1.4 Golos;
  margin:0 0 10px;
  color:var(--text)
}
.waiting-progress {
  display:block;
  width:100%;
  height:4px;
  overflow:hidden;
  border:0;
  border-radius:2px;
  background:#3d4440;
  accent-color:var(--red)
}
.waiting-progress::-webkit-progress-bar {
  background:#3d4440
}
.waiting-progress::-webkit-progress-value {
  background:var(--red)
}
.waiting-progress::-moz-progress-bar {
  background:var(--red)
}
.invite-row {
  position:relative;
  display:grid;
  gap:12px;
  margin:22px 0 16px
}
.invite-row textarea {
  width:100%;
  min-height:66px;
  height:66px;
  resize:none;
  font-size:12px;
  line-height:1.6;
  padding:10px 12px;
  overflow-wrap:anywhere;
  white-space:pre-wrap
}
.invite-row .invite-address {
  display:block;
  overflow-wrap:anywhere;
  font-size:12px;
  line-height:1.5;
  padding:10px 12px;
  background:var(--surface);
  border-radius:5px;
  user-select:all
}
.invite-row button {
  width:100%;
  min-width:0;
  min-height:44px
}
.waiting-friends {
  font-size:13px;
  display:inline-block;
  margin:6px 0
}
#invite-mate {
  width:100%;
  font-size:13px;
  min-height:42px;
  margin-bottom:12px
}
.waiting-center .hint {
  font-size:12px;
  color:var(--muted);
  margin:14px 0
}
/* Supporting text and controls share one readable rhythm. */
.profile-edit-grid aside {
  position:relative;
  background:var(--surface)
}
.profile-edit-grid aside p {
  font-size:13px;
  gap:14px
}
.profile-edit-grid aside hr {
  border:0;
  border-top:1px solid var(--rule);
  margin:20px 0
}
.contact-code {
  display:none
}
.community-row strong {
  font-size:14px
}
.community-row small {
  font-size:12px
}
.community-row .row-actions button,.community-row .row-actions a {
  font-size:12px
}
.community-row .friend-management button {
  font-size:11px;
  min-height:32px
}
.chat-message .message-meta {
  font-size:12px
}
.chat-message small {
  font-size:11px
}
.chat-message button {
  font-size:11px;
  min-height:28px
}
.settings-row small {
  font-size:12px;
  line-height:1.5;
  margin-top:4px
}
.settings-row {
  padding:16px 0
}
.settings-row>span {
  min-width:0
}
.settings-row strong {
  font-size:14px
}
.responsive-table th,.responsive-table td {
  font-size:12px;
  padding:12px 10px;
  vertical-align:top
}
.subline {
  font-size:11px
}
.responsive-table .row-actions {
  gap:7px
}
.responsive-table .row-actions button {
  font-size:11px;
  min-height:34px;
  padding:6px 9px
}
.admin-heading p,#list-status {
  font-size:12px
}
.toolbar label {
  font-size:12px
}
.admin-heading h1 {
  font-size:32px
}
@media(max-width:1100px) {
  .waiting-table {
    grid-template-columns:minmax(0,1fr) 280px;
    gap:24px
  }
  .waiting-seats {
    height:470px
  }
  .waiting-seats>.player,.waiting-seats>.pair-seat {
    width:126px
  }
  .waiting-seats>div:nth-of-type(2) {
    left:80%
  }
  .waiting-seats>div:nth-of-type(4) {
    left:20%
  }
}
@media(max-width:760px) {
  .metrics {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    padding:18px;
    margin-bottom:22px
  }
  .metrics p {
    font-size:12px
  }
  .metrics strong {
    font-size:26px
  }
  .waiting-table {
    display:flex;
    flex-direction:column;
    gap:20px;
    min-height:0
  }
  .waiting-seats {
    height:340px;
    width:100%;
    max-width:440px;
    background-size:100% 100%
  }
  .waiting-seats>.player,.waiting-seats>.pair-seat {
    width:100px
  }
  .waiting-seats>div:nth-of-type(1) {
    top:27%
  }
  .waiting-seats>div:nth-of-type(2) {
    left:81%;
    top:50%;
    width:100px
  }
  .waiting-seats>div:nth-of-type(3) {
    top:77%
  }
  .waiting-seats>div:nth-of-type(4) {
    left:19%;
    top:50%;
    width:100px
  }
  .waiting-seats .avatar {
    width:42px;
    height:42px;
    font-size:20px;
    margin-bottom:5px
  }
  .waiting-seats b {
    font-size:12px
  }
  .waiting-seats small {
    font-size:11px;
    max-width:100px
  }
  .waiting-seats .team-label {
    font-size:11px
  }
  .waiting-seats .team-label>span {
    display:none
  }
  .waiting-seats .choose-seat {
    font-size:11px;
    min-height:32px;
    padding:4px 7px
  }
  .waiting-center {
    width:100%;
    padding:0 4px
  }
  .waiting-center h2 {
    font-size:27px;
    margin-bottom:14px
  }
  .waiting-center p {
    font-size:13px
  }
  .waiting-center .hint {
    font-size:12px
  }
  .invite-row .invite-address {
    font-size:12px
  }
  .settings-sidebar a {
    font-size:12px;
    min-height:36px;
    padding:8px 5px
  }
  .community-row .row-actions {
    flex-basis:168px
  }
  .community-row .row-actions button,.community-row .row-actions a {
    font-size:12px
  }
  .community-row .friend-management button {
    font-size:11px;
    padding:3px 5px
  }
  .rank-table th,.rank-table td {
    font-size:12px
  }
  .rank-table thead th {
    font-size:11px;
    word-break:normal;
    overflow-wrap:normal
  }
  .responsive-table {
    overflow:visible;
    border:0
  }
  .responsive-table table {
    display:block;
    min-width:0;
    width:100%
  }
  .responsive-table thead {
    display:none
  }
  .responsive-table tbody {
    display:grid;
    gap:14px
  }
  .responsive-table tr {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px 16px;
    background:var(--surface);
    border-radius:6px;
    padding:16px
  }
  .responsive-table td {
    display:block;
    border:0;
    padding:0;
    min-width:0;
    font-size:12px;
    overflow-wrap:anywhere;
    text-align:left
  }
  .responsive-table td:first-child,.responsive-table td:last-child,.responsive-table td[colspan] {
    grid-column:1/-1
  }
  .responsive-table .mobile-label {
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-bottom:4px
  }
  .responsive-table .mobile-label:empty {
    display:none
  }
  .responsive-table .name {
    font-size:14px
  }
  .responsive-table .row-actions {
    justify-content:flex-start
  }
  .responsive-table .row-actions button {
    min-height:36px;
    font-size:12px
  }
  .admin-layout {
    border:0
  }
  .admin-tabs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:visible;
    white-space:normal;
    padding:8px 0
  }
  .admin-tabs button {
    font-size:12px
  }
  .admin-heading h1 {
    font-size:28px
  }
  #workspace {
    padding:18px 0
  }
  .toolbar label {
    font-size:12px
  }
  .toolbar input,.toolbar select {
    font-size:14px
  }
}
@media(max-width:360px) {
  .waiting-seats {
    height:360px;
    background-size:112% 100%
  }
  .waiting-seats>div:nth-of-type(2) {
    left:83%;
    width:90px
  }
  .waiting-seats>div:nth-of-type(4) {
    left:17%;
    width:90px
  }
  .waiting-seats .team-label {
    font-size:11px
  }
  .waiting-seats b {
    font-size:12px
  }
  .waiting-seats small {
    font-size:11px
  }
}
.settings-primary,.settings-secondary {
  display:flex;
  flex-direction:column;
  gap:6px
}
.settings-secondary {
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--rule)
}
.rank-label-short {
  display:none;
  text-decoration:none
}
.achievement-list li>div {
  flex:1;
  min-width:0
}
.achievement-list progress {
  width:100%;
  max-width:240px
}
.achievement-list li>span {
  flex:none;
  font-size:13px
}
.community-stat>span:not(:first-child) {
  text-align:right;
  font-variant-numeric:tabular-nums
}
@media(max-width:760px) {
  .settings-sidebar {
    display:block;
    padding-bottom:14px
  }
  .settings-primary {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px
  }
  .settings-primary a {
    font-size:12px;
    min-height:38px;
    padding:8px 4px;
    white-space:nowrap
  }
  .settings-secondary {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:4px;
    margin-top:12px;
    padding-top:10px
  }
  .settings-secondary a {
    font:500 12px/1.4 Golos;
    min-height:32px;
    padding:6px 3px;
    white-space:nowrap
  }
  .community-row .row-actions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    flex:0 0 180px;
    gap:6px;
    align-content:center
  }
  .community-row .row-actions>button,.community-row .row-actions>a {
    width:100%;
    min-width:0;
    min-height:36px;
    font-size:12px;
    padding:5px 6px
  }
  .community-row .row-actions>button[data-action=invite-partner] {
    grid-column:1/-1;
    background:none;
    border-color:var(--rule);
    color:var(--text);
    min-height:30px
  }
  .community-row .friend-management {
    grid-column:1/-1;
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:6px
  }
  .community-row .friend-management button {
    font-size:11px;
    padding:3px 2px;
    min-height:30px
  }
  .rank-label-short {
    display:inline
  }
  .rank-label-full {
    display:none
  }
  .rank-table thead th {
    font-size:11px;
    padding:10px 4px
  }
  .rank-table th:nth-child(2) {
    width:30%
  }
  .rank-table td,.rank-table tbody th {
    padding:12px 4px
  }
}
@media(max-width:360px) {
  .community-row .row-actions {
    flex-basis:154px
  }
  .community-row .row-actions>button,.community-row .row-actions>a {
    font-size:11px
  }
  .community-row .friend-management button {
    font-size:11px
  }
}
.setting-row {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 0;
  border-bottom:1px solid var(--rule);
  margin:0 0 12px
}
.setting-row>input {
  flex:none;
  width:20px;
  height:20px;
  margin:2px 0 0
}
.setting-row strong {
  font-size:14px;
  font-weight:600
}
.setting-row p {
  font-size:13px;
  line-height:1.6;
  margin:6px 0 0;
  max-width:70ch
}
.settings-form>button {
  margin-top:14px
}
.admin-layout:has(.settings-form) {
  min-height:420px
}
/* All mobile seats occupy one reserved strip; the battle never shares it. */
@media(max-width:760px) {
  .felt {
    grid-template-rows:130px minmax(80px,1fr) 32px calc(var(--hand-card-width)*1.5 + 24px) 90px
  }
  .game-head>div:first-child {
    max-width:calc(100% - 96px);
    padding:5px 7px
  }
  .game-kind {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .game-head h1 {
    line-height:1.3;
    max-width:100%;
    margin-top:3px
  }
  .opponents {
    margin-top:64px
  }
  .opponent {
    width:90px;
    max-width:90px
  }
  .opponent-id {
    gap:4px
  }
  .opponent .avatar {
    width:24px;
    height:24px;
    font-size:12px
  }
  .opponent b {
    font-size:11px;
    max-width:58px
  }
  .opponent small {
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .opponent .backs {
    height:24px;
    margin-top:2px
  }
  .backs .back {
    width:16px;
    height:24px
  }
  .backs .back+.back {
    margin-left:-8px
  }
  .backs em {
    right:0;
    font-size:11px;
    top:1px
  }
  .paired-opponents [data-seat=partner] {
    left:18%;
    top:0;
    width:90px
  }
  .paired-opponents [data-seat="0"] {
    left:50%;
    top:0
  }
  .paired-opponents [data-seat="1"] {
    left:82%;
    top:0
  }
  .paired-opponents .teammate>small {
    display:none
  }
  .teammate-label {
    font-size:11px;
    line-height:1.3;
    white-space:nowrap;
    margin-top:1px
  }
  .opponents-3:not(.paired-opponents) [data-seat="0"] {
    left:18%;
    top:0
  }
  .opponents-3:not(.paired-opponents) [data-seat="1"] {
    left:50%;
    top:0
  }
  .opponents-3:not(.paired-opponents) [data-seat="2"] {
    left:82%;
    top:0
  }
  .battle-many {
    gap:4px 8px;
    padding:2px;
    align-content:center
  }
  .battle-many .pair {
    width:52px;
    height:60px
  }
  .battle-many .pair .card {
    width:36px;
    height:54px
  }
  .battle-many .pair .cover {
    left:15px;
    top:5px;
    transform:rotate(3deg)
  }
  .classic-deck .battle-many .card .corner {
    display:block;
    left:1px;
    top:1px;
    font:600 11px/1 Golos;
    background:#fff;
    padding:1px;
    min-width:12px;
    color:#131714
  }
  .classic-deck .battle-many .suit-d .corner,.classic-deck .battle-many .suit-h .corner {
    color:#c52436
  }
  .classic-deck .battle-many .card .corner small {
    font-size:8px;
    line-height:1
  }
  .classic-deck .battle-many .card .corner svg {
    width:8px;
    height:9px
  }
}
@media(max-width:760px) and (max-height:700px) {
  .felt {
    grid-template-rows:130px minmax(60px,1fr) 28px calc(var(--hand-card-width)*1.5 + 22px) 84px
  }
}
@media(max-width:760px) {
  .discard {
    left:-4px;
    right:auto;
    bottom:0;
    width:30px
  }
  .game-head .game-kind {
    max-width:100%
  }
}
.lobby-art {
  height:640px;
  min-height:0;
  align-self:start;
  padding:350px 24px 24px;
  background-image:linear-gradient(transparent 20%,#111515 84%),url('/template/king.jpg');
  background-position:center,100% top;
  background-size:100% 100%,auto 640px;
  background-repeat:no-repeat
}
.lobby-art:after {
  display:none
}
.lobby-art h2 {
  font-size:54px
}
.lobby-art p {
  font-size:15px;
  line-height:1.5
}
@media(min-width:761px) {
  .create .lobby-rules-box,.create .lobby-players-box {
    padding:14px
  }
  .create .lobby-players-box {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:14px;
    align-content:start
  }
  .create .lobby-players-box fieldset {
    min-width:0;
    margin:0
  }
  .create .lobby-players-box fieldset:first-child {
    grid-column:1/-1
  }
  .create .lobby-players-box .hint {
    font-size:11px;
    line-height:1.4;
    margin:5px 0 0
  }
  .create .lobby-rules-box .mode-options {
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding-bottom:0
  }
  .create .lobby-rules-box fieldset {
    margin-bottom:18px
  }
  .create .lobby-rules-box legend,.create .lobby-players-box legend {
    font-size:15px;
    margin-bottom:8px
  }
  .create .lobby-players-box .segmented-options span {
    font-size:12px;
    padding:7px 5px
  }
  .lobby-grid {
    gap:20px
  }
  .create-options-body {
    gap:12px
  }
  .lobby-main>h1 {
    margin-bottom:18px
  }
}
@media(min-width:761px) and (max-width:1100px) {
  .lobby-frame {
    grid-template-columns:1fr
  }
  .lobby-art {
    display:none
  }
}
.room-pagination {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
  font-size:12px
}
.room-pagination>span:first-child {
  margin-right:auto
}
.room-pagination button {
  min-height:36px;
  padding:6px 12px;
  font-size:12px
}
.create fieldset,.create .lobby-rules-box,.create .lobby-players-box {
  min-width:0
}
.option-unit {
  font:inherit
}
@media(max-width:760px) {
  .create .option-unit {
    display:none
  }
  .create .segmented-options {
    gap:4px
  }
  .create .segmented-options span {
    padding:7px 5px
  }
  .create-options-body {
    grid-template-columns:repeat(2,minmax(0,1fr));
    min-width:0
  }
  .create legend {
    max-width:100%
  }
  .lobby-grid>section {
    min-width:0
  }
}

.felt::before{content:none}.table-surface{position:absolute;inset:42px 0 0;width:100%;height:calc(100% - 42px);object-fit:fill;z-index:-1;pointer-events:none;opacity:.88}
.waiting-seats{background:none;isolation:isolate}.waiting-surface{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1;pointer-events:none}
@media(max-width:760px){.table-surface{inset:64px -24% 64px;width:148%;height:calc(100% - 128px)}}
/* Keep the optional fan control in the hand row, above the move instruction. */
@media(max-width:760px) {
  .hand { padding-top:5px; padding-bottom:25px; }
  .hand-spread {
    position:relative;
    grid-row:4;
    grid-column:1;
    align-self:end;
    justify-self:center;
    left:auto;
    bottom:auto;
    transform:none;
    min-height:22px;
    margin:0;
    z-index:4;
  }
  .game-controls .move-hint { margin:0; }
}
@media(max-width:760px) {
  .felt { grid-template-columns:minmax(0,1fr); }
  .felt>.game-head { grid-column:1; grid-row:1; }
  .felt>.table-middle { grid-column:1; grid-row:2; }
  .felt>.your-label { grid-column:1; grid-row:3; }
  .felt>.hand { grid-column:1; grid-row:4; }
  .felt>.game-controls { grid-column:1; grid-row:5; }
}
@media(max-width:760px) {
  .felt>.game-head { grid-area:auto; top:9px; }
}
.waiting-seats .avatar { align-items:center; justify-content:center; }

/* Durak GO wordmark: one shared geometry on every screen. */
.brand{gap:8px;letter-spacing:0;font-weight:600}.brand svg.brand-mark{width:30px;height:34px;margin:0;flex:none}.brand-go{color:#ed725b;margin-left:5px}
@media(max-width:760px){.brand svg.brand-mark{width:26px;height:30px}}

body:not(.signed-in) .site-header [data-nav="friends"],
body:not(.signed-in) .site-header [data-nav="profile"],
body:not(.signed-in) #main-menu a[href="/account.html"],
body:not(.signed-in) #main-menu a[href="/community.html#friends"],
body:not(.signed-in) #main-menu a[href="/community.html#chat"],
.signed-in #main-menu .anonymous-entry { display:none; }


/* Shared account navigation. Personal destinations live under the avatar. */
.site-header [data-nav="friends"],.site-header [data-nav="profile"],.site-header .settings-link,.community-tabs,
.mobile-bottom-nav [data-nav="friends"],.mobile-bottom-nav [data-nav="profile"] {display:none!important}
.account-menu {position:relative;flex:none;margin-left:auto}
.account-menu[hidden],.account-dropdown[hidden] {display:none!important}
.account-menu .session-avatar {cursor:pointer;padding:0;line-height:1;width:42px;height:42px;min-width:42px;min-height:42px;aspect-ratio:1;box-sizing:border-box;flex-shrink:0;border-radius:50%}
.account-menu .session-avatar:hover {border-color:var(--text)}
.account-menu .session-avatar[aria-expanded="true"] {border-color:var(--red)}
.account-dropdown {position:absolute;right:0;top:calc(100% + 12px);z-index:100;width:260px;max-width:calc(100vw - 32px);padding:10px;background:#222827;border:1px solid #414a47;border-radius:8px;box-shadow:0 12px 32px #0006}
.account-menu-name {display:block;padding:10px 12px 14px;overflow-wrap:anywhere}
.account-dropdown a,.account-dropdown button {display:block;width:100%;padding:11px 12px;text-align:left;font:inherit;color:var(--text);text-decoration:none;background:transparent;border:0;border-radius:4px}
.account-dropdown a:hover,.account-dropdown button:hover {background:#343c39}
.account-dropdown .account-menu-logout {color:#ff9988;margin-top:8px}
.account-menu-error {padding:8px 12px;margin:0;color:#ffb3a5;font-size:13px}
.mobile-bottom-nav {grid-template-columns:repeat(2,1fr)}
@media(max-width:760px) {
 .account-menu {margin-left:auto}
 .account-menu:not([hidden]) + .menu-toggle {margin-left:0}
 .account-dropdown {position:absolute;top:calc(100% + 14px)}
}

.room-shortcuts {display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:12px 0}
.room-shortcuts .filter-block>p {display:none}
.table-quick-settings {padding:4px 12px 10px;border-bottom:1px solid var(--rule)}
.table-quick-settings label {display:flex;gap:10px;align-items:center;min-height:42px;cursor:pointer}
#hand-feedback:empty {display:none}
#hand-feedback {grid-column:1/-1;text-align:center;color:var(--text)}

.dialog-actions,.logout-actions {align-items:stretch;gap:12px}
dialog :is(.dialog-actions,.logout-actions)>:is(button,a) {min-height:44px;margin:0;padding:9px 16px;font:600 15px/1.35 Golos,sans-serif;letter-spacing:0}
.room-shortcuts {display:inline-grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;max-width:100%;align-items:stretch}
.room-shortcuts .filter-block,.room-shortcuts .filter-options {display:contents}
.room-shortcuts .filter-options button,.room-shortcuts #more-filters {min-height:32px;margin:0;padding:5px 8px;font:600 12px/1.3 Golos,sans-serif;border-radius:4px;gap:5px}
.room-shortcuts #more-filters {border-color:#867b70}
.room-shortcuts #more-filters svg {flex:none;color:#ef957e}
.room-shortcuts #more-filters[aria-expanded=true] {border-color:#cd795f}
@media(max-width:400px){.room-shortcuts {width:100%}.room-shortcuts .filter-options button,.room-shortcuts #more-filters {padding-inline:3px;font-size:11px}}

:is(.avatar,.profile-avatar,.contact-avatar,.room-avatar,.rank-avatar):has(>.player-photo){position:relative;overflow:hidden}
.player-photo{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover}


.stock.stock-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:auto;
  min-height:90px;
  text-align:center;
}
.stock-empty .trump-symbol {
  margin:0;
  order:0;
}
.stock.stock-empty>small {
  position:static;
  width:100%;
  line-height:1.35;
}
.stock-empty>small:last-child {
  order:1;
}
.stock-empty>small:not(:last-child) {
  order:2;
}

@media(max-width:760px){.home-guide>h2:first-child{margin-top:0}}

.search-status {
  padding:14px 16px;
  margin:0 0 16px;
  border:1px solid var(--rule);
  border-radius:8px;
  background:var(--surface);
}
.search-status>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
#search-elapsed {
  font-variant-numeric:tabular-nums;
  font-size:20px;
  font-weight:700;
  flex-shrink:0;
}
.search-status .hint {
  margin:8px 0 0;
}