.tabletop-window[hidden] {
  display:none!important
}
.tabletop-window {
  --tt-paper:var(--surface,#f7f3ec);
  --tt-card:var(--card,#fffcf5);
  --tt-ink:var(--text,#514d47);
  --tt-muted:var(--text3,#918a80);
  --tt-line:var(--border,rgba(98,87,73,.14));
  position:fixed;
  z-index:907;
  top:max(16px,var(--safe-top,0px));
  right:12px;
  width:min(640px,calc(100vw - 24px));
  max-height:calc(var(--app-height,100dvh) - max(16px,var(--safe-top,0px)) - max(12px,env(safe-area-inset-bottom,0px)));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:color-mix(in srgb,var(--tt-paper) 94%,transparent);
  color:var(--tt-ink);
  border:1px solid var(--tt-line);
  border-radius:24px;
  box-shadow:0 18px 55px rgba(50,45,38,.18);
  backdrop-filter:blur(22px);
  font-family:'CustomUserFont',-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}
.tt-dealing .ddz-card {
  animation:tt-deal .25s ease both;
  animation-delay:var(--deal-delay,0ms)
}
.tt-play-enter,.tt-quip-enter {
  animation:tt-deal .22s ease
}
.ddz-table.is-rocket {
  animation:tt-rocket .45s ease
}
.ddz-result.tt-spring {
  animation:tt-spring .5s ease
}
@keyframes tt-rocket {
  50% {
    transform:translateY(-4px);
    box-shadow:0 0 24px var(--accent-dim)
  }
}
@keyframes tt-spring {
  50% {
    box-shadow:0 0 0 4px var(--accent-dim);
    transform:scale(1.015)
  }
}
.tt-head {
  min-height:60px;
  flex-shrink:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 14px;
  border-bottom:1px solid var(--tt-line);
  touch-action:none;
  cursor:grab;
  user-select:none
}
.tt-head>div:first-child {
  display:grid;
  min-width:0;
  gap:4px
}
.tt-head>div:last-child { display:flex; flex-shrink:0; }
.tt-head strong,.tt-head small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tt-head strong {
  font-size:14px;
  font-weight:650
}
.tt-head small {
  font-size:10px;
  color:var(--tt-muted)
}
.tt-head button {
  width:44px;
  height:44px;
  font-size:20px;
  color:var(--tt-muted)
}
.tt-body {
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:16px
}
.tt-body h2 {
  font-size:17px;
  margin:10px 0 18px
}
.tt-lobby-note {
  font-size:12px;
  color:var(--tt-muted);
  margin-bottom:18px
}
.tt-game-list button {
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  background:var(--tt-card);
  padding:22px 18px;
  border:1px solid var(--tt-line);
  border-radius:16px
}
.tt-game-list button>span {
  font-size:30px
}
.tt-game-list strong {
  font-size:15px;
  flex:1;
  text-align:left
}
.tt-game-list small {
  font-size:11px;
  color:var(--tt-muted)
}
.tt-invite-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 4px
}
.tt-invite-row input {
  accent-color:var(--accent)
}
.tt-invite-row>span:last-child {
  display:grid;
  gap:5px
}
.tt-invite-row strong {
  font-size:13px
}
.tt-invite-row small {
  font-size:10px;
  color:var(--tt-muted)
}
.tt-avatar {
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border:1px solid var(--tt-line);
  border-radius:50%;
  overflow:hidden;
  background:var(--surface2);
  font-size:15px
}
.tt-avatar img {
  width:100%;
  height:100%;
  object-fit:cover
}
.tt-primary {
  background:var(--text)!important;
  color:var(--bg)!important;
  border-radius:12px;
  padding:11px 16px;
  font-size:12px
}
#tabletop-start {
  width:100%;
  margin-top:14px
}
#tabletop-choose-again {
  display:block;
  margin:12px auto;
  color:var(--tt-muted);
  font-size:11px
}
#tabletop-feedback {
  font-size:10px;
  color:var(--tt-muted);
  min-height:12px;
  line-height:1.6;
  margin-top:8px
}
.tt-mini {
  display:none;
  align-items:center;
  gap:10px;
  padding:12px 15px;
  text-align:left;
  width:100%
}
.tt-mini>span:first-child {
  font-size:28px
}
.tt-mini>span:last-child {
  display:grid;
  gap:4px
}
.tt-mini strong {
  font-size:12px
}
.tt-mini small {
  font-size:10px;
  color:var(--tt-muted)
}
.tabletop-window.minimized {
  width:170px;
  border-radius:17px
}
.tabletop-window.minimized .tt-head,.tabletop-window.minimized .tt-body {
  display:none
}
.tabletop-window.minimized .tt-mini {
  display:flex
}
.tt-quip {
  margin:8px 0 0;
  padding:8px 10px;
  background:var(--tt-card);
  border-radius:12px;
  font-size:11px;
  font-weight:400;
  line-height:1.5;
  overflow-wrap:anywhere
}
.tt-quip-input summary {
  font-size:10px;
  color:var(--tt-muted);
  cursor:pointer;
  padding:7px 2px
}
.tt-quip-input input,.tt-quip-input textarea {
  width:100%;
  min-width:0;
  padding:9px 10px;
  background:var(--tt-card);
  border:1px solid var(--tt-line);
  border-radius:10px;
  color:var(--tt-ink);
  font-size:12px;
  outline:none
}
.ddz-opponents {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.ddz-seat {
  display:flex;
  align-items:center;
  flex-direction:column;
  min-width:0;
  text-align:center
}
.ddz-seat strong {
  font-size:12px;
  margin-top:7px
}
.ddz-seat small {
  font-size:12px;
  color:var(--tt-muted);
  margin-top:3px
}
.ddz-seat.active .tt-avatar {
  box-shadow:0 0 0 3px var(--accent-dim);
  animation:tt-breathe 1.8s ease-in-out infinite
}
.ddz-table {
  min-height:126px;
  margin:14px 0;
  border-radius:18px;
  background:color-mix(in srgb,var(--accent) 6%,var(--surface2));
  border:1px solid var(--tt-line);
  padding:12px 10px
}
.ddz-bottom {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px
}
.ddz-bottom>span {
  font-size:12px;
  color:var(--tt-muted);
  margin-right:8px
}
.ddz-bottom>i {
  width:36px;
  height:50px;
  border-radius:5px;
  border:2px solid var(--tt-card);
  background:var(--text3);
  opacity:.6
}
.ddz-card {
  flex:0 0 42px;
  position:relative;
  width:42px;
  height:62px;
  background:var(--tt-card);
  color:var(--tt-ink);
  border:1px solid var(--tt-line);
  border-radius:6px;
  box-shadow:0 2px 4px rgba(0,0,0,.06);
  padding:5px;
  text-align:left;
  transition:transform .15s ease
}
.ddz-card b {
  display:block;
  font-size:14px;
  font-weight:650
}
.ddz-card>span {
  font-size:13px
}
.ddz-card.red {
  color:#a15f58
}
.ddz-card:disabled {
  opacity:1
}
.ddz-bottom .ddz-card {
  width:36px;
  height:50px;
  flex-basis:36px;
  padding:4px
}
.ddz-bottom .ddz-card b {
  font-size:16px
}
.ddz-bottom .ddz-card span {
  font-size:14px
}
.ddz-last {
  min-height:59px;
  text-align:center;
  margin-top:10px
}
.ddz-last>small {
  font-size:12px;
  color:var(--tt-muted)
}
.ddz-last>div {
  display:flex;
  justify-content:safe center;
  overflow-x:auto;
  padding:6px 0
}
.ddz-last .ddz-card {
  width:44px;
  height:62px;
  flex-basis:44px
}
.ddz-last .ddz-card+.ddz-card {
  margin-left:-18px
}
.ddz-last .ddz-card b {
  font-size:18px
}
.ddz-last .ddz-card span {
  font-size:16px
}
.ddz-user-line {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px
}
.ddz-user-line strong {
  font-size:14px
}
.ddz-user-line>.tt-avatar {
  width:24px;
  height:24px;
  flex:0 0 24px;
  font-size:10px
}
.ddz-user-line>strong {
  flex:1
}
.ddz-user-line.active>.tt-avatar {
  box-shadow:0 0 0 3px var(--accent-dim);
  animation:tt-breathe 1.8s ease-in-out infinite
}
.ddz-user-line>span {
  font-size:12px;
  color:var(--tt-muted)
}
.ddz-user-line .tt-quip {
  flex-basis:100%
}
.ddz-hand {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(52px,1fr));
  gap:8px;
  padding:12px 2px;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none
}
.ddz-hand .ddz-card {
  width:100%;
  height:80px;
  min-width:0;
  padding:7px;
  border-radius:9px;
  border-width:2px;
  touch-action:pan-y
}
.ddz-hand .ddz-card b {
  font-size:23px;
  line-height:1.1
}
.ddz-hand .ddz-card>span {
  font-size:23px;
  line-height:1.2
}
.ddz-hand .ddz-card.selected {
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--tt-card));
  box-shadow:0 0 0 1px var(--accent)
}
.ddz-hand .ddz-card.selected::after {
  content:'✓';
  position:absolute;
  right:3px;
  bottom:3px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  background:var(--tt-ink);
  color:var(--tt-card);
  border-radius:50%;
  font:700 12px/1 sans-serif
}
.ddz-turn {
  text-align:center;
  font-size:13px;
  color:var(--tt-muted);
  margin:6px 0
}
.ddz-actions {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:8px
}
.ddz-actions button {
  min-height:48px;
  padding:8px 4px;
  border:1px solid var(--tt-line);
  border-radius:11px;
  font-size:14px;
  background:var(--tt-card);
  color:var(--tt-ink)
}
.ddz-actions button:disabled {
  opacity:.35
}
.ddz-selection-note {
  font-size:12px;
  color:var(--tt-muted);
  text-align:center;
  min-height:18px;
  margin:0 0 6px;
  overflow-wrap:anywhere
}
.ddz-controls {
  position:sticky;
  bottom:-16px;
  z-index:3;
  padding:12px 0 16px;
  background:var(--tt-paper);
  border-top:1px solid var(--tt-line)
}
.ddz-controls .ddz-actions { margin-top:0; }
.ddz-hand-help {
  font-size:12px;
  color:var(--tt-muted);
  margin:10px 0 0
}
.ddz-result {
  text-align:center;
  margin-top:12px;
  padding:20px 12px;
  border:1px solid var(--tt-line);
  border-radius:16px;
  background:var(--tt-card);
  animation:tt-deal .3s ease
}
.ddz-result strong {
  font-size:18px
}
.ddz-result p {
  font-size:11px;
  color:var(--tt-muted);
  margin:10px 0 16px
}
.ddz-reveals,.ddz-postgame { margin-top:18px; text-align:left; border-top:1px solid var(--tt-line); padding-top:14px; }
.ddz-reveals h3,.ddz-postgame h3 { font-size:12px; margin:10px 0; font-weight:600; }
.ddz-reveal-cards { display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
.ddz-reveal-cards > span { color:var(--tt-muted); font-size:11px; }
.ddz-reveal-cards .ddz-card { width:42px; min-width:42px; height:62px; padding:5px; border-radius:6px; }
.ddz-reveal-cards .ddz-card b,.ddz-reveal-cards .ddz-card span { font-size:18px; }
.ddz-postgame-list { max-height:240px; overflow-y:auto; overflow-wrap:anywhere; }
.ddz-result .ddz-remark { display:grid; gap:4px; margin:8px 0; padding:10px; border-radius:10px; background:var(--tt-bg); white-space:pre-wrap; line-height:1.6; color:var(--tt-ink); }
.ddz-remark b { font-size:11px; color:var(--tt-muted); }
.ddz-result .ddz-remark-status { font-size:11px; margin:8px 0; }
.ddz-postgame .tt-quip-input { margin:12px 0; }
.ddz-postgame .tt-quip-input textarea { display:block; resize:vertical; line-height:1.6; }
.ddz-postgame .tt-quip-input button { margin-top:8px; }
.ddz-pass {
  margin:6px 0;
  font-size:11px;
  color:var(--tt-muted);
  overflow-wrap:anywhere
}
.ddz-user-line .ddz-pass {
  flex-basis:100%
}
.ddz-scores {
  width:100%;
  margin:0 0 16px;
  border-collapse:collapse;
  font-size:11px;
  table-layout:fixed
}
.ddz-scores th,.ddz-scores td {
  padding:8px 3px;
  border-bottom:1px solid var(--tt-line);
  overflow-wrap:anywhere
}
.ddz-scores th:first-child {
  width:40%
}
.ddz-scores small {
  display:block;
  color:var(--tt-muted);
  margin-top:3px
}
.ddz-table.is-bomb {
  animation:tt-bomb .35s ease
}
.tabletop-window button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px
}
@keyframes tt-breathe {
  50% {
    box-shadow:0 0 0 5px var(--accent-dim)
  }
}
@keyframes tt-deal {
  from {
    transform:translateY(8px);
    opacity:0
  }
}
@keyframes tt-bomb {
  50% {
    transform:scale(1.02);
    box-shadow:0 0 22px var(--accent-dim)
  }
}
@media(max-width:680px) {
  .tabletop-window:not(.minimized) {
    top:max(8px,var(--safe-top,0px))!important;
    left:8px!important;
    right:8px!important;
    width:auto;
    max-height:calc(var(--app-height,100dvh) - max(8px,var(--safe-top,0px)) - max(8px,env(safe-area-inset-bottom,0px)));
    border-radius:20px
  }
  .tabletop-window:not(.minimized) .tt-head { cursor:default; }
  .tt-body {
    padding:12px
  }
  .ddz-controls { bottom:-12px; padding-bottom:12px; }
  .ddz-opponents {
    gap:12px
  }
}
@media(prefers-reduced-motion:reduce) {
  .tabletop-window * {
    animation:none!important;
    transition:none!important
  }
}