:root {
  --h-top: 3.2rem;
  --h-seats-top: 5.2rem;
  --h-turn: 2.4rem;
  --h-own: 5.8rem;
  --h-hand: 13.7rem;
  --w-rail: 3.9rem;
}

/* 滿版：逐邊內縮（1vmin 與瀏海安全區取大值）；rem 基準（min(2vh,4vw)）不變，寬裕寬度由各區自然外擴 */
.app {
  position: relative;
  width: calc(100vw - var(--app-inset-left) - var(--app-inset-right));
  height: calc(100vh - var(--app-inset-top) - var(--app-inset-bottom));
  margin: var(--app-inset-top) var(--app-inset-right) var(--app-inset-bottom) var(--app-inset-left);
  background: var(--c-surface);
  display: grid;
  grid-template-rows: var(--h-top) var(--h-seats-top) var(--h-turn) minmax(0, 1fr) var(--h-own) var(--h-hand);
  overflow: hidden;
  user-select: none;
}

@supports (height: 1dvh) {
  .app {
    height: calc(100dvh - var(--app-inset-top) - var(--app-inset-bottom));
  }
}

.area-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem 0.15rem;
}

.top-banner {
  flex: 1 1 auto;
  height: 100%;
  border: var(--bw) dashed var(--c-border);
  border-radius: var(--radius-m);
  display: grid;
  place-items: center;
}

.top-banner-hint {
  font-size: 0.7rem;
  color: var(--c-mut);
}

.top-actions {
  display: flex;
  gap: var(--top-icon-gap);
}

.icon-btn {
  width: var(--top-icon-size);
  height: var(--top-icon-size);
  border-radius: 50%;
  border: var(--bw) solid var(--c-border-strong);
  background: var(--c-surface-2);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.icon-btn--sound {
  display: grid;
  place-items: center;
}

.icon-btn--sound svg {
  width: 1.2rem;
  height: 1.2rem;
}

.seats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 3.3rem;
}

.seats-row > .seat:only-child {
  margin-inline: auto;
}

.turn-order {
  display: flex;
  justify-content: center;
  align-items: center;
}

.area-mid {
  display: grid;
  grid-template-columns: var(--w-rail) minmax(0, 1fr) var(--w-rail);
  min-height: 0;
}

.right-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}

.own-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.5rem;
}

.hand {
  position: relative;
  z-index: 6;
}

.app--targeting .turn-list,
.app--targeting .table,
.app--targeting .piles,
.app--targeting .seat:not(.seat--targetable):not(.seat--armed),
.app--targeting .id-wrap,
.app--targeting .captured:not(.captured--targetable):not(.captured--armed) {
  opacity: var(--dim-faded);
  transition: opacity var(--t-fast);
}

/* 手牌互相重疊，壓暗一律用亮度濾鏡而非透明度，避免疊影 */
.app--targeting .hand-slot:not(.hand-slot--selected):not(.hand-slot--peek) {
  filter: brightness(var(--dim-faded));
  transition: filter var(--t-fast);
}

.app--armed .seat--targetable,
.app--armed .captured--targetable {
  opacity: var(--dim-faded);
  transition: opacity var(--t-fast);
}

.app--armed .seat--armed,
.app--armed .captured--armed {
  opacity: 1;
}