/* 自己区域：副露分列手牌两侧，用户名/定缺/计时在左下方 */
.hand-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 0;
}

.self-left-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  flex: 0 0 112px;
  max-width: 112px;
  min-width: 0;
}

.self-left-stack .self-info {
  width: 100%;
  min-height: 0;
  padding: 3px 5px;
  gap: 3px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  border-radius: 9px;
  border: 1px solid rgba(231, 209, 154, 0.13);
  background: rgba(5, 27, 20, 0.55);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

.self-left-stack .self-avatar {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.self-left-stack .self-avatar .avatar {
  width: 15px;
  height: 15px;
  font-size: 7px;
}

.self-left-stack .self-void,
.self-left-stack .self-status {
  max-width: 100%;
  height: 17px;
  padding: 0 5px;
  font-size: 7px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.self-left-stack .self-void b {
  font-size: 9px;
}

.self-left-stack .turn-timer {
  width: 27px;
  height: 27px;
  font-size: 10px;
}

.own-melds {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 auto;
  max-width: 64px;
  min-height: 1px;
}

.own-melds-left {
  align-items: flex-start;
}

.own-melds-right {
  align-items: flex-end;
}

.own-melds .meld-group {
  display: flex;
  gap: 0;
  padding: 1px;
  border-radius: 3px;
  background: rgba(4, 24, 18, 0.5);
}

.own-melds .tile {
  width: 15px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.hand-row .hand-wrap {
  width: auto;
  flex: 0 1 auto;
  padding: 0;
  min-width: 0;
}

.hand-row .hand {
  justify-content: center;
}

/* 页面横屏下保持与竖屏一致的并排结构：用户名、副露、手牌各按内容宽度占位，
   不再压缩左侧堆叠，否则两组副露会被挤到手牌下面看不见。 */
#app.force-landscape .self-left-stack {
  flex-basis: auto;
  max-width: none;
}

#app.force-landscape .self-left-stack .self-info {
  padding: 2px 4px;
  gap: 2px;
}

#app.force-landscape .self-left-stack .self-avatar {
  font-size: 7px;
}

#app.force-landscape .self-left-stack .self-void,
#app.force-landscape .self-left-stack .self-status {
  height: 14px;
  font-size: 6px;
}

#app.force-landscape .own-melds {
  max-width: none;
}

@media (max-width: 360px) {
  .self-left-stack {
    flex-basis: 88px;
    max-width: 88px;
  }

  .own-melds {
    max-width: 46px;
  }

  .own-melds .tile {
    width: 12px;
  }
}