:root {
  --h-top: 3.7rem;
  --h-seats-top: 6.4rem;
  --h-turn: 2.8rem;
  --h-own: 6.5rem;
  --h-hand: 13.7rem;
  --w-rail: 4.6rem;
}

/* 滿版：逐邊內縮（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;
}

@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);
}

/* 高於浮層根（z=50）：角色選擇等面板開啟期間，右上三鈕（ⓘ／音效／☰）仍可操作 */
.top-actions {
  display: flex;
  gap: var(--top-icon-gap);
  position: relative;
  z-index: 51;
}

/* 呆滯提醒箭頭：量測制定位——中心座標（--stall-arrow-x/y，rem）由 JS 依「☰」按鈕矩形
   沿左下對角線外推而得，箭頭恆指向 ☰（允許輕微覆蓋；純提示、不攔截點擊） */
.area-top {
  position: relative;
}

.stall-hint {
  position: fixed;
  left: var(--stall-arrow-x, 90vw);
  top: var(--stall-arrow-y, 3rem);
  translate: -50% -50%;
  z-index: 51;
  pointer-events: none;
}

.stall-hint-arrow {
  display: inline-block;
  color: var(--c-danger-ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 0.4rem var(--c-danger-glow);
  animation: stall-hint-nudge 1.1s ease-in-out infinite;
}

@keyframes stall-hint-nudge {
  0% { transform: translate(-0.5rem, 0.5rem); opacity: 0.55; }
  60% { transform: translate(0, 0); opacity: 1; }
  80% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(-0.5rem, 0.5rem); opacity: 0.55; }
}

.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;
}

/* 語言切換列：運作中語言以淡藍點亮、未運作者灰色（大廳與遊戲內設定面板共用） */
.lang-toggle {
  display: inline-flex;
  align-items: stretch;
  border: var(--bw) solid var(--c-border-strong);
  border-radius: 0.55rem;
  overflow: hidden;
  background: var(--c-surface-2);
}

.lang-toggle-opt {
  border: 0;
  background: transparent;
  color: var(--c-mut);
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
}

.lang-toggle-opt--active {
  background: var(--c-lang-active-soft);
  color: var(--c-lang-active);
}

.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;
}