/* ===== 휴대폰 배치 =====
   body.compact  : 가로 700 미만 또는 세로 500 미만(main.js가 layout.js와 같은 기준으로 붙인다)
   body.portrait : 그중 세로 화면 / body.landscape : 그중 가로 화면
   같은 디자인을 그대로 작게 줄이고, 손가락으로 누르는 버튼은 높이 40px 이상을 지킨다. */

/* 아래로 뜨는 말풍선(세로 화면에서 위쪽 상대 셋) */
.bubble.down { transform: translate(-50%, 0); }
.bubble.down .bubble-in { transform-origin: center top; }
.bubble.down .bubble-in::before { bottom: 100%; left: 50%; margin-left: -9px; border-width: 0 9px 11px; border-bottom-color: var(--line); }
.bubble.down .bubble-in::after { bottom: calc(100% - 3px); left: 50%; margin-left: -6px; border-width: 0 6px 8px; border-bottom-color: #fff; }

/* ----- 게임판 ----- */
.compact .board {
  inset: 8px;
  border-width: 6px;
  border-radius: 26px;
  box-shadow: 0 6px 0 var(--beige), 0 10px 18px rgb(90 62 43 / 35%);
}
.compact .board::before { border-radius: 20px; }
.compact .board::after { inset: 8px; border-width: 3px; border-radius: 14px; }

/* ----- 오른쪽 위 버튼 줄 ----- */
.compact .topbar { top: 20px; right: 20px; gap: 6px; }
.compact .topbar .btn { min-height: 40px; padding: 5px 12px; font-size: 14px; }
.compact .topbar .pill { padding: 4px 11px; font-size: 13px; }
.compact .icon-btn { width: 40px; height: 40px; }
.compact .icon-btn svg { width: 22px; height: 22px; }

/* ----- 이름표 ----- */
.compact .plate { gap: 6px; padding: 0 10px 0 4px; }
.compact .plate .avatar { width: 34px; height: 34px; }
.compact .pinfo { line-height: 1.2; }
.compact .pname { font-size: 14px; }
.compact .pcount { font-size: 11px; }
.compact .pname, .compact .pcount { overflow: hidden; text-overflow: ellipsis; }
.compact .turn-arrow { top: -22px; width: 20px; height: 15px; margin-left: -10px; }
.compact .badge { padding: 0 8px; font-size: 10px; }
.portrait .plate { gap: 4px; padding: 0 8px 0 3px; }
.portrait .plate .avatar { width: 32px; height: 32px; }
.portrait .pname { font-size: 13px; }

/* ----- 가운데 ----- */
.compact .slot { border-width: 3px; border-radius: 16px; }
.compact .slot-label { padding: 1px 10px; font-size: 11px; }
.compact .present-label { gap: 6px; padding: 2px 12px 2px 3px; font-size: 13px; }
.compact .present-label .avatar.small { width: 24px; height: 24px; }
/* 기록은 최신 한 줄만 */
.compact .log-line:not(.latest) { display: none; }
.compact .log-line.latest { padding: 2px 12px; font-size: 13px; line-height: 1.35; text-align: center; }

/* ----- 행동 바 ----- */
.compact .actionbar { min-height: 44px; gap: 8px; padding: 4px 16px; }
.compact .actionbar.has-btns { padding-right: 4px; }
.compact .actionbar .hint { font-size: 14px; }
.compact .actionbar .btn { min-height: 40px; padding: 5px 14px; font-size: 14px; }
/* 세로 화면은 내 이름표 옆에 놓여 폭이 좁으니 글을 두 줄로 접는다 */
.portrait .actionbar { width: max-content; max-width: var(--bar-max); min-height: 52px; padding-left: 18px; white-space: normal; }
.portrait .actionbar .hint { font-size: 13px; line-height: 1.3; }
.portrait .actionbar .btn { white-space: nowrap; }

/* ----- 말풍선·배너·쪽지 ----- */
.compact .bubble { width: max-content; }
.compact .bubble-in { padding: 5px 10px; border-radius: 14px; font-size: 13px; white-space: normal; }
.compact .banner .sticker { font-size: 40px; }
.compact .sticker::before, .compact .sticker::after { -webkit-text-stroke-width: 5px; }
.compact .banner .sticker::after { transform: translateY(4px); }
.compact .tip { width: min(300px, calc(100vw - 24px)); }
.landscape .tip { width: min(400px, calc(100vw - 24px)); }
.compact .tip-in > p { margin-bottom: 8px; font-size: 14px; line-height: 1.5; }
.compact .btn.small { min-height: 40px; }

/* ----- 패널 ----- */
.compact .overlay { padding: 10px; }
.compact .panel {
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  padding: 16px 18px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.6;
}
.landscape .panel { width: min(600px, 100%); }
.compact .panel h2 { margin-bottom: 6px; font-size: 21px; }
.compact .panel h3 { margin-top: 12px; font-size: 15px; }
.compact .panel-btns { margin-top: 14px; gap: 10px; }
.compact .setting-row { flex-wrap: wrap; gap: 6px 12px; padding: 10px 0; }
.compact .segmented button { padding: 6px 12px; }
.compact .welcome-steps li { padding: 6px 12px 6px 6px; font-size: 15px; }
.compact .result-lead { font-size: 15px; }
.compact .result-row { gap: 10px; padding: 6px 10px; }
.compact .result-who { font-size: 15px; }
.compact .ana-row { grid-template-columns: 1.2fr 1.6fr .8fr .9fr; padding: 6px 8px; font-size: 12px; }
.compact .ana-who { font-size: 13px; }
.compact .ana-num { font-size: 14px; }

/* ----- 타이틀 ----- */
/* PC 배치라도 세로가 낮은 창은 상자를 조금 납작하게 */
@media (max-height: 680px) {
  .lid { padding: 46px 32px 24px; }
  .title .sticker { font-size: 50px; }
  .title-sub { margin-bottom: 16px; }
  .modes { gap: 10px; }
  .mode-btn { padding: 7px 20px; }
}
.compact .title { padding: 12px; overflow-y: auto; place-items: safe center; }
/* 세로 화면은 오른쪽 위 버튼과 캐릭터들이 겹치지 않게 상자를 조금 내린다 */
.portrait .title { padding-top: 72px; }
/* 가로 화면도 오른쪽 위 버튼이 상자 테두리에 걸치지 않게 내리되, 화면이 낮으면 넘치지 않을 만큼만(316 ≈ 상자 높이+아래 여백) */
.landscape .title { padding-top: clamp(12px, calc(100dvh - 316px), 66px); }
.compact .lid { padding: 40px 20px 22px; border-width: 8px; border-radius: 28px; }
.compact .lid::after { inset: 8px; border-width: 3px; border-radius: 18px; }
.compact .lid-chars { gap: 8px; }
.compact .lid-chars .avatar { width: 50px; height: 50px; }
.compact .title .sticker { font-size: 42px; }
.compact .title-sub { margin: 4px 0 16px; font-size: 14px; }
.compact .modes { gap: 10px; }
.compact .mode-btn { padding: 7px 16px; border-radius: 22px; }
.compact .mode-btn b { font-size: 18px; }
.compact .mode-btn small { font-size: 12px; }

/* 가로 화면: 왼쪽에 제목, 오른쪽에 모드 버튼 */
.landscape .lid {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 24px;
  align-items: center;
  padding: 34px 24px 20px;
}
.landscape .lid > .dash-badge { grid-column: 1; grid-row: 1; justify-self: center; align-self: end; }
.landscape .lid > .sticker { grid-column: 1; grid-row: 2; }
.landscape .lid > .title-sub { grid-column: 1; grid-row: 3; align-self: start; margin-bottom: 0; }
.landscape .modes { grid-column: 2; grid-row: 1 / 4; gap: 8px; }
.landscape .mode-btn { padding: 5px 14px; }
.landscape .mode-btn b { font-size: 17px; }

/* 룰북 버튼은 좁은 화면에서 아이콘만 */
.compact .book-btn span { display: none; }
.compact .topbar .book-btn { width: 40px; padding: 0; justify-content: center; }
.compact .rules-book { top: 14px; right: 14px; width: 38px; min-height: 38px; padding: 0; justify-content: center; }
.compact .rules-panel h2 { padding: 0 44px; }