/* Shared reading rhythm. Keep Thai marks clear and let labels determine height. */
body { font-family:var(--font-ui); line-height:1.65; }
button, input, select, textarea, summary { font-family:var(--font-ui); }
button, summary { line-height:1.5; }
h1, h2, h3, h4 { line-height:1.45; }
html:lang(th) :is(h1,h2,h3,h4,.game-copy strong) { letter-spacing:0; }
.welcome h1 { font-weight:700; }
.game-copy strong, .section-header h2 { font-weight:600; }
.logo { letter-spacing:-.035em; }
.room-page>header .logo { letter-spacing:0; min-width:0; }
.room-page>header .logo .logo-text { min-width:0; max-width:320px; overflow:visible; white-space:normal; line-height:1.5; }
.room-page>header #roomName { display:block; max-width:none; font-size:17px; font-weight:650; line-height:1.5; letter-spacing:0; white-space:normal; overflow:visible; overflow-wrap:anywhere; }
.room-page>header #roomGameTypeLabel { line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.room-page .role-badge { max-width:100%; white-space:normal; overflow-wrap:anywhere; line-height:1.5; }

/* A result can be longer than a turn label. Never force it outside its pill. */
.room-page .players-bar { grid-template-columns:minmax(0,1fr) minmax(120px,1.2fr) minmax(0,1fr); align-items:center; }
.room-page .players-bar .player-info { min-width:0; padding:4px; }
.room-page .players-bar .player-meta { min-width:0; width:100%; }
.room-page .players-bar .player-name { display:block; max-width:none; width:100%; font-size:14px; line-height:1.6; white-space:normal; overflow:visible; overflow-wrap:anywhere; text-overflow:clip; }
.room-page .players-bar .status-pill { min-width:0; max-width:none; width:100%; font-size:13px; line-height:1.6; padding:8px 10px; border-radius:14px; white-space:normal; overflow-wrap:anywhere; }
.room-page .clock { letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.room-page .immersive-camera .camera-presets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.room-page .immersive-camera .camera-presets button { min-width:0; min-height:44px; font-size:12px; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.room-page .game-controls { flex-wrap:wrap; }
.room-page .game-controls :is(button,summary) { white-space:normal; overflow-wrap:anywhere; }
.room-page :is(.msg-user,.msg-text,.viewers-card,.draw-controls small) { overflow-wrap:anywhere; }
.room-card-v2 :is(.room-name,.room-player-name) { white-space:normal; overflow:visible; overflow-wrap:anywhere; }
.profile-dialog h2 { padding-right:32px; }
.guide-nav { flex-wrap:wrap; }
.guide-content :is(h2,dd),.guide-notes { overflow-wrap:anywhere; }

@media(max-width:600px) {
  .room-page>header { display:grid; grid-template-columns:56px minmax(0,1fr) 38px 38px; gap:7px; padding:12px; }
  .room-page>header .back-btn { grid-row:1; grid-column:1; padding:6px 4px; font-size:12px; white-space:nowrap; }
  .room-page>header .logo { grid-row:1; grid-column:2; gap:7px; }
  .room-page>header .logo-mark { width:32px; min-width:32px; height:36px; font-size:20px; }
  .room-page>header .header-spacer { display:none; }
  .room-page>header #langToggleBtn { grid-row:1; grid-column:3; }
  .room-page>header #darkToggleBtn { grid-row:1; grid-column:4; }
  .room-page>header .role-badge { grid-row:2; grid-column:2/-1; justify-self:end; }
  /* Two readable player columns, then one shared status row. */
  .room-page .players-bar { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; padding:12px; }
  .room-page .players-bar #playerW { grid-row:1; grid-column:1; }
  .room-page .players-bar #playerB { grid-row:1; grid-column:2; }
  .room-page .players-bar .player-info { flex-direction:row; align-items:center; gap:8px; text-align:left; }
  .room-page .players-bar .player-meta { text-align:left; }
  .room-page .players-bar .player-name { font-size:13px; }
  .room-page .players-bar .status-pill { grid-row:2; grid-column:1/-1; padding:6px 10px; }
  .room-page>header #roomName { font-size:14px; }
  .room-page>header #roomGameTypeLabel { font-size:11px; }
  .room-page>header .role-badge { font-size:12px; }
  .room-page .immersive-camera .camera-presets button { padding:7px 4px; }
  .room-page #themeOptions button,.room-page #pieceOptions button { font-size:12px; }
  .guide-nav { gap:10px; }
  .guide-nav .guide-brand { font-size:21px; }
}