/* Shared browser and packaged Android layout. One frame owns avatar sizing. */
.profile-avatar-preview,
.profile-avatar-preview.jester-image-avatar,
.profile-avatar-preview.premium-atlas-avatar,
.profile-avatar-preview.photo-avatar,
.game-player-avatar {
  box-sizing: border-box;
  position: relative;
  overflow: hidden !important;
  padding: 0;
  border-radius: 50%;
  border: 0 !important;
  box-shadow: none !important;
  background: var(--panel-2) !important;
  aspect-ratio: 1;
  isolation: isolate;
}
/* Photos and SVG icons use one visible outline. Image avatars already have
   their own gold frame, so preserve it and give hats/crowns breathing room. */
.profile-avatar-preview::after,
.game-player-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 2px solid rgba(225,185,78,.9);
  border-radius: 50%;
  pointer-events: none;
}
.profile-avatar-preview.jester-image-avatar,
.profile-avatar-preview.premium-atlas-avatar,
.game-player-avatar.jester-image-avatar,
.game-player-avatar.premium-atlas-avatar {
  background: transparent !important;
}
.profile-avatar-preview.jester-image-avatar::after,
.profile-avatar-preview.premium-atlas-avatar::after,
.game-player-avatar.jester-image-avatar::after,
.game-player-avatar.premium-atlas-avatar::after {
  content: none;
  border: 0;
}
.profile-avatar-preview.jester-image-avatar > img,
.profile-avatar-preview.premium-atlas-avatar > .wtc-atlas-avatar,
.profile-avatar-preview.premium-atlas-avatar > .wtc-standalone-avatar,
.game-player-avatar.jester-image-avatar > img,
.game-player-avatar.premium-atlas-avatar > .wtc-atlas-avatar,
.game-player-avatar.premium-atlas-avatar > .wtc-standalone-avatar {
  transform: none;
  transform-origin: center;
}
.profile-avatar-preview > svg,
.profile-avatar-preview > img,
.profile-avatar-preview.jester-image-avatar > img,
.profile-avatar-preview > .wtc-atlas-avatar,
.profile-avatar-preview > .wtc-standalone-avatar,
.profile-avatar-preview.photo-avatar > .wtc-photo-avatar,
.game-player-avatar > svg,
.game-player-avatar > img,
.game-player-avatar > .wtc-atlas-avatar,
.game-player-avatar > .wtc-standalone-avatar {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: cover;
}
/* Isolated artwork already includes headroom. Plain icons keep their single
   CSS frame and a padded silhouette; uploaded photos intentionally fill it. */
.profile-avatar-preview > svg,
.profile-avatar-preview > .wtc-plain-avatar,
.game-player-avatar > .wtc-plain-avatar { box-sizing: border-box; padding: 8%; }
.premium-avatar-choice .wtc-standalone-avatar { object-fit: contain; }
.game-player-strip.active-turn .game-player-avatar { box-shadow:none; }
.app-dialog.friend-invite-dialog {
  box-sizing:border-box;
  width:min(620px,calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 24px);
  margin:auto;
  padding:clamp(16px,4vw,24px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
  color:var(--ink);
}
.friend-invite-dialog *, .friend-invite-dialog *::before,
.friend-invite-dialog *::after { box-sizing:border-box; }
.friend-invite-dialog .dialog-heading {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 40px;
  gap:8px;
  width:100%;
  margin:0 0 20px;
}
.friend-invite-dialog .dialog-heading h3 { grid-column:2; text-align:center; overflow-wrap:anywhere; }
.friend-invite-dialog .dialog-close { grid-column:3; margin:0; }
.friend-invite-dialog fieldset { min-width:0; margin:12px 0; padding:0; border:0; }
.friend-invite-dialog legend { max-width:100%; padding:0 0 8px; font-weight:800; }
.friend-invite-colors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.friend-invite-colors label { display:flex; align-items:center; gap:8px; min-width:0; padding:12px; border:1px solid var(--border); border-radius:12px; }
.friend-invite-colors input { flex:0 0 auto; margin:0; }
.friend-invite-dialog select { width:100%; min-width:0; min-height:44px; padding:8px; margin:8px 0; background:var(--panel-2); color:var(--ink); border:1px solid var(--border); border-radius:10px; }
.friend-invite-dialog .mode-grid { width:100%; max-width:none; margin:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.friend-invite-dialog .mode-card { width:100%; min-width:0; min-height:68px; padding:12px 8px; }
.friend-invite-dialog .mode-card strong { overflow-wrap:anywhere; line-height:1.3; }
.friend-invite-dialog .invite-detail { width:100%; min-width:0; margin:16px 0; line-height:1.5; overflow-wrap:anywhere; }
.friend-invite-dialog .visual-pair-picker { width:100%; min-width:0; max-height:none; margin:12px 0; padding:2px; overflow:visible; }
.friend-invite-dialog .pair-picker-option { min-width:0; }
.friend-invite-dialog .formation-side-label { max-width:100%; flex-wrap:wrap; }
.friend-invite-dialog .formation-strip { max-width:100%; }
.friend-invite-dialog [data-invite-submit] { display:block; width:100%; min-width:0; margin-top:16px; white-space:normal; }
.friend-invite-dialog .invite-error { color:#ffd2d2; }
.friend-invite-dialog .invite-error:empty { display:none; }
@media (max-width:350px) {
  .friend-invite-dialog .mode-grid { grid-template-columns:minmax(0,1fr); }
  .friend-invite-dialog .dialog-heading { grid-template-columns:32px minmax(0,1fr) 32px; gap:4px; }
  .friend-invite-dialog .dialog-close { width:32px; }
}

/* Explicit grid placement prevents banners from creating extra implicit rows.
   Dynamic viewport height follows browser chrome and Android system insets. */
@media (orientation:landscape) and (max-height:620px) and (min-width:560px) {
  body.game-active { overflow:hidden; }
  body.game-active .app-shell,
  body.game-active main { min-height:0; height:100dvh; max-width:none; }
  body.game-active .app-header { display:none; }
  body.game-active #gameScreen.game-screen.active {
    --landscape-controls:clamp(180px,27vw,260px);
    display:grid;
    box-sizing:border-box;
    grid-template-columns:minmax(0,1fr) var(--landscape-controls);
    grid-template-rows:auto auto minmax(0,1fr) auto;
    gap:6px 10px;
    width:100%; height:100dvh; min-height:0;
    padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    overflow:hidden; align-items:start;
  }
  body.game-active #gameScreen .board-frame {
    grid-column:1; grid-row:1 / -1; align-self:center; justify-self:center;
    box-sizing:border-box; padding:4px; margin:0;
    width:min(100%,calc((100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.25));
    height:auto; aspect-ratio:10 / 8; max-width:100%; max-height:100%;
  }
  body.game-active #gameBoard { width:100%; height:100%; min-height:0; max-width:none; aspect-ratio:10 / 8; }
  body.game-active #gameScreen .game-player-strip.top { grid-column:2; grid-row:1; }
  body.game-active #gameScreen .game-player-strip.bottom { grid-column:2; grid-row:2; }
  body.game-active #gameScreen .game-player-strip {
    box-sizing:border-box; width:100%; min-width:0; margin:0; padding:5px; gap:5px; min-height:44px;
    display:grid; grid-template-columns:30px minmax(0,1fr) auto;
  }
  body.game-active #gameScreen .game-player-avatar { width:30px; height:30px; }
  body.game-active #gameScreen .online-player-turn { display:none; }
  body.game-active #gameScreen .online-player-name { font-size:.8rem; }
  body.game-active #gameScreen .online-player-meta { font-size:.65rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.game-active #gameScreen .player-decision-clock { min-width:42px; padding:4px; font-size:.7rem; }
  body.game-active #gameCheckBanner {
    grid-column:2; grid-row:3; align-self:start; width:100%; min-width:0; margin:0;
    box-sizing:border-box; padding:6px; font-size:.8rem; flex-wrap:wrap;
  }
  body.game-active #gameCheckBanner button { min-height:36px; padding:5px 10px; }
  body.game-active #gameScreen #gameToolbar,
  body.game-active #gameScreen #gameToolbar.four-controls,
  body.game-active #gameScreen #gameToolbar.six-controls {
    grid-column:2; grid-row:4; align-self:end; position:static;
    width:100%; min-width:0; min-height:0; margin:0; padding:4px; transform:none;
    grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; box-sizing:border-box;
  }
  body.game-active #gameToolbar button { min-width:0; min-height:44px; padding:4px; }
  body.game-active #gameToolbar span { font-size:1rem; }
  body.game-active #gameToolbar small { font-size:.62rem; }
  .app-dialog { box-sizing:border-box; max-height:calc(100dvh - 16px); overflow:auto; }
  .friend-invite-dialog { padding:14px; }
}