/* JoinoShell — minimal, framework-free CSS for shared shell widgets.

   We intentionally use generic selectors that don't collide with any
   per-game CSS (mf-*, qz-*, gov-*, btl-*, alc-*, pk-*). All shell
   widgets live in their own DOM under [data-joino-shell]. */

[data-joino-shell] {
  font-family: "Inter", system-ui, sans-serif;
  box-sizing: border-box;
}

[data-joino-shell] * {
  box-sizing: border-box;
}

/* ---------- Modal overlay (confirm exit, help) ---------- */

.shell-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 24, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  animation: shell-fade-in 120ms ease-out;
}

.shell-modal {
  background: #FFFAEC;
  color: #1A1B2A;
  border: 3px solid #0a0a12;
  border-radius: 18px;
  box-shadow: 6px 6px 0 #0a0a12;
  max-width: 420px;
  width: 100%;
  max-height: 90dvh;
  overflow: auto;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shell-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.shell-modal__body {
  font-size: 15px;
  line-height: 1.4;
  color: #222438;
}

.shell-modal__body p {
  margin: 0 0 8px;
}

.shell-modal__body strong {
  color: #0a0a12;
}

.shell-modal__body h4 {
  margin: 10px 0 4px;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #6b5cff;
  text-transform: uppercase;
}

.shell-modal__body ul {
  margin: 0 0 6px;
  padding-left: 18px;
}

.shell-modal__body li {
  margin: 2px 0;
}

.shell-modal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.shell-btn {
  appearance: none;
  border: 3px solid #0a0a12;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: #fff;
  color: #0a0a12;
  box-shadow: 3px 3px 0 #0a0a12;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
  min-height: 44px;
}

.shell-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #0a0a12;
}

.shell-btn--primary {
  background: #FFD23F;
}

.shell-btn--danger {
  background: #FF5C7A;
  color: #fff;
}

.shell-btn--ghost {
  background: #fff;
}

/* ---------- Shared comic CTA (matches Mafia's mf-btn look) ---------- */
/* Used by Quiz / Poker / Govorilka lobbies for "Я готов" / "Старт". The
   Mafia stylesheet defines body.mafia-v2 .mf-btn — that's higher
   specificity, so it wins on Mafia and stays as-is. These rules pick
   up on every OTHER page where the body.mafia-v2 class isn't set. */
.mf-btn {
  display: inline-block;
  position: relative;
  isolation: isolate;
  padding: 14px 28px;
  width: 100%;
  font-family: "Bowlby One", sans-serif;
  font-size: 17px;
  letter-spacing: 1px;
  color: #fff;
  cursor: pointer;
  border: 0;
  background: transparent;
  filter: drop-shadow(4px 4px 0 #000);
  transition: transform 0.05s ease;
  text-align: center;
  text-transform: uppercase;
}
.mf-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.36), transparent 60%),
    #5B2A86;
  clip-path: polygon(2% 14%, 96% 0%, 100% 88%, 6% 100%);
  filter: drop-shadow(1px 1px 0 #000);
}
.mf-btn:hover { transform: translate(-1px, -1px); }
.mf-btn:active { transform: translate(2px, 2px); }
.mf-btn:disabled,
.mf-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: drop-shadow(2px 2px 0 #000);
}
.mf-btn--primary { color: #fff; }
.mf-btn--ghost::before {
  background: #F4E9C8;
}
.mf-btn--ghost { color: #0a0a12; }
.mf-btn.is-done::before {
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.4), transparent 60%),
    #6cf07a;
}
.mf-btn.is-done { color: #0a0a12; }

/* Image cards inside guide modal (e.g. Poker combos). 2 cols on phone,
   3 on tablet+. Each card has an image on top + label/sub below. */
.shell-guide-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 4px 0 12px;
}
@media (min-width: 480px) {
  .shell-guide-cards { grid-template-columns: repeat(3, 1fr); }
}
.shell-guide-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #FFFAEC;
  border: 2.5px solid #0a0a12;
  border-radius: 10px;
  box-shadow: 2px 2px 0 #0a0a12;
  padding: 8px 6px;
  text-align: center;
}
.shell-guide-card-img {
  width: 100%;
  max-width: 110px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 4px;
}
.shell-guide-card-label {
  font-family: "Bowlby One", "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #0a0a12;
  text-transform: uppercase;
  line-height: 1.1;
}
.shell-guide-card-sub {
  display: block;
  font-size: 10px;
  color: #4a4d6b;
  margin-top: 2px;
  font-weight: 600;
}

/* Real playing-card combos for Poker help. Each row = label + 5 cards. */
.shell-guide-combos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 12px;
}
.shell-guide-combo {
  background: #FFFAEC;
  border: 2.5px solid #0a0a12;
  border-radius: 10px;
  box-shadow: 2px 2px 0 #0a0a12;
  padding: 8px 10px;
}
.shell-guide-combo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.shell-guide-combo-label {
  font-family: "Bowlby One", "Inter", sans-serif;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: #5B2A86;
  text-transform: uppercase;
}
.shell-guide-combo-sub {
  font-size: 10px;
  color: #4a4d6b;
  font-weight: 600;
  text-align: right;
}
.shell-guide-combo-cards {
  display: flex;
  gap: 3px;
  justify-content: center;
}
.shell-card-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid #0a0a12;
  border-radius: 4px;
  width: 38px;
  height: 50px;
  box-shadow: 1.5px 1.5px 0 #0a0a12;
  color: #0a0a12;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1;
  padding: 4px 2px;
}
.shell-card-chip--red { color: #d6173a; }
.shell-card-chip-rank {
  font-size: 14px;
  letter-spacing: -0.5px;
}
.shell-card-chip-suit {
  font-size: 16px;
  margin-top: 2px;
}
/* Cards that form the combo — yellow ring + lifted forward. */
.shell-card-chip--win {
  background: #FFFAEC;
  border-color: #5B2A86;
  box-shadow: 2px 2px 0 #5B2A86, 0 0 0 2.5px #FFD23F;
  transform: translateY(-3px) scale(1.04);
  z-index: 1;
}
/* Kicker cards — visible but faded, makes the combo cards pop. */
.shell-card-chip--dim {
  opacity: 0.45;
  filter: grayscale(0.5);
}

/* ---------- Floating "?" help button ---------- */

.shell-help-btn {
  position: fixed;
  /* Respect the iOS notch / status bar on viewport-fit=cover pages
     (spot, timer). On non-cover pages env() resolves to 0px, so this is
     identical to the old top:12px — no change for the other games. */
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid #0a0a12;
  background: #FFD23F;
  color: #0a0a12;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 3px 3px 0 #0a0a12;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.shell-help-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #0a0a12;
}

/* ---------- Floating "←" exit button (same primitive as help) ---------- */

.shell-exit-btn {
  position: fixed;
  /* See .shell-help-btn — clear the iOS status bar on cover pages;
     no-op (0px) on non-cover pages. */
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid #0a0a12;
  background: #FFFAEC;
  color: #0a0a12;
  cursor: pointer;
  box-shadow: 3px 3px 0 #0a0a12;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.shell-exit-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #0a0a12;
}

/* ---------- Floating "Пригласить друга" pill ---------- */
.shell-invite-btn {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFD23F;
  color: #0a0a12;
  border: 3px solid #0a0a12;
  border-radius: 999px;
  box-shadow: 3px 3px 0 #0a0a12;
  padding: 10px 18px;
  font-family: "Bowlby One", "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 850;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shell-invite-btn:active {
  transform: translateX(-50%) translate(2px, 2px);
  box-shadow: 1px 1px 0 #0a0a12;
}

/* Inline "Пригласить друга" — sits in the lobby content flow (NOT
   fixed). Used by every game's guest lobby. */
.shell-invite-inline-btn {
  display: block;
  margin: 12px auto 16px;
  width: min(360px, 90%);
  background: #FFD23F;
  color: #0a0a12;
  border: 3px solid #0a0a12;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #0a0a12;
  padding: 14px 18px;
  font-family: "Bowlby One", "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shell-invite-inline-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #0a0a12;
}

/* ---------- Full-screen invite overlay (QR + room code) ---------- */
.shell-invite-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 4, 20, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 16px;
  animation: shell-fade-in 120ms ease-out;
}
.shell-invite-modal {
  background: #FFFAEC;
  border: 4px solid #0a0a12;
  border-radius: 18px;
  box-shadow: 8px 8px 0 #0a0a12;
  padding: 18px 18px 22px;
  max-width: min(94vw, 420px);
  width: 100%;
  position: relative;
  text-align: center;
  font-family: "Inter", sans-serif;
}
.shell-invite-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  color: #0a0a12;
  cursor: pointer;
  font-weight: 800;
}
.shell-invite-title {
  font-family: "Bowlby One", "Inter", sans-serif;
  font-size: 22px;
  margin: 0 0 14px;
  color: #0a0a12;
}
.shell-invite-qr {
  width: min(72vw, 320px);
  height: min(72vw, 320px);
  display: block;
  margin: 0 auto;
  border: 3px solid #0a0a12;
  border-radius: 8px;
  background: #fff;
}
.shell-invite-hint {
  margin: 10px 0 14px;
  font-size: 13px;
  color: #4a4d6b;
  font-weight: 600;
}
.shell-invite-or {
  font-size: 12px;
  color: #4a4d6b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 4px 0 6px;
}
.shell-invite-code {
  font-family: "Bowlby One", "Inter", sans-serif;
  font-size: 28px;
  letter-spacing: 0.18em;
  color: #5B2A86;
  background: #F4E9C8;
  border: 3px solid #0a0a12;
  border-radius: 10px;
  padding: 8px 16px;
  display: inline-block;
}
.shell-invite-share {
  margin: 14px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 3px solid #0a0a12;
  border-radius: 10px;
  background: #5B2A86;
  color: #fff;
  font-family: "Bowlby One", "Inter", sans-serif;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.shell-invite-share:hover { background: #6c34a0; }
.shell-invite-share:active { transform: translateY(1px); }
.shell-invite-share-icon { font-size: 18px; line-height: 1; }
.shell-invite-share-fallback {
  margin-top: 10px;
  font-size: 13px;
  color: #4a4d6b;
  font-weight: 600;
  word-break: break-all;
}

/* Inline host-side share button — mounted next to the QR/code in every
   game's lobby. Universal styling that reads clearly on BOTH dark
   purple game backgrounds AND on cream paper QR cards. Solid purple
   button with chunky black 3D shadow (matches Joino's comic theme). */
.shell-host-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  margin-top: 14px;
  border: 3px solid #000;
  border-radius: 14px;
  background: #7E40FF;
  background-image: linear-gradient(180deg, #8B53FF 0%, #6B2BF0 100%);
  color: #fff;
  font-family: "Inter", -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 5px 0 #000, 0 7px 12px rgba(0, 0, 0, 0.28);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.shell-host-share-btn:hover { filter: brightness(1.08); }
.shell-host-share-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #000, 0 2px 4px rgba(0, 0, 0, 0.28);
}

/* When a per-game topbar already has a help slot, games can mount the
   button inside it; the inline variant has no fixed-positioning. */
.shell-help-btn--inline {
  position: static;
  width: 36px;
  height: 36px;
  font-size: 18px;
}

/* ---------- Name form (replaces fatal() join dead-ends) ---------- */

.shell-name-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #FFFAEC;
  color: #1A1B2A;
  border: 3px solid #0a0a12;
  border-radius: 18px;
  box-shadow: 6px 6px 0 #0a0a12;
  padding: 18px 18px 16px;
  margin: 16px auto;
  max-width: 380px;
  width: calc(100% - 32px);
}

.shell-name-form__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.shell-name-form__hint {
  margin: 0;
  font-size: 14px;
  color: #4a4d6b;
}

.shell-name-form__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b5cff;
}

.shell-name-form__input {
  appearance: none;
  -webkit-appearance: none;
  border: 3px solid #0a0a12;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 18px;
  font-weight: 600;
  background: #fff;
  color: #0a0a12;
  width: 100%;
  min-height: 50px;
}

.shell-name-form__input:focus {
  outline: 3px solid #6b5cff;
  outline-offset: 2px;
}

.shell-name-form__submit {
  appearance: none;
  border: 3px solid #0a0a12;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: #FFD23F;
  color: #0a0a12;
  box-shadow: 4px 4px 0 #0a0a12;
  min-height: 54px;
}

.shell-name-form__submit:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #0a0a12;
}

.shell-name-form__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.shell-name-form__error {
  margin: 0;
  font-size: 14px;
  color: #d32f2f;
  font-weight: 600;
  min-height: 18px;
}

.shell-name-form__error:empty {
  display: none;
}

.shell-name-form__exit {
  margin: 0;
  font-size: 13px;
  color: #4a4d6b;
  text-align: center;
}

.shell-name-form__exit a {
  color: #6b5cff;
  text-decoration: underline;
}

@keyframes shell-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* #25 — pre-join overlay. When the guest has not yet entered a name,
   hide the legacy "Приглашение / Игроки / Ход игры / Лог" cards and
   the room header. Only the controlsBlock card (containing the name
   form) is visible, centered. */
body.room-needs-name #leaveRoomBtn,
body.room-needs-name #roomGameBadge,
body.room-needs-name #roomTitle,
body.room-needs-name #inviteBlock,
body.room-needs-name #playersList,
body.room-needs-name #logList,
body.room-needs-name #myRoleText,
body.room-needs-name .hero.compact,
body.room-needs-name .card:has(#inviteBlock),
body.room-needs-name .card:has(#playersList),
body.room-needs-name .card:has(#logList) {
  display: none !important;
}
body.room-needs-name .card:has(#controlsBlock) > h2 {
  display: none;
}
body.room-needs-name .card:has(#controlsBlock) {
  margin-top: 20vh;
  border: none;
  box-shadow: none;
  background: transparent;
}

/* ---------- Fatal room-connection error overlay ----------
   Used by room.js showFatalRoomError() when join times out or a fatal
   socket error occurs. position:fixed so it sits ABOVE the legacy
   <section class="card"> layout (which stays hidden behind it via the
   body.room-bootstrap rule kept in place). */
.room-fatal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #0b1020;
  display: grid;
  place-items: center;
  padding: 14px;
}
.room-fatal-card {
  width: min(420px, 100%);
  background: linear-gradient(180deg, #151d33 0%, #101629 100%);
  border: 1px solid #2a3658;
  border-radius: 16px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}
.room-fatal-title {
  margin: 0 0 12px;
  font-size: 22px;
  color: #f4f4f8;
}
.room-fatal-msg {
  margin: 0 0 20px;
  font-size: 15px;
  color: #a9b3c7;
  line-height: 1.4;
}
.room-fatal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.room-fatal-actions .btn { width: 100%; }

/* ---------- Finale-actions button row ----------
   Shared component mounted by JoinoShell.renderFinaleActions().
   Used by every game's finale screen to show two CTAs side-by-side
   (or stacked on narrow phones). */
.shell-finale-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 0;
}
.shell-finale-btn {
  width: 100%;
  border: 3px solid #0a0a12;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: "Bowlby One", "Inter", sans-serif;
  font-size: 17px;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease, background 0.12s ease;
}
.shell-finale-btn:active { transform: translateY(1px); }
.shell-finale-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.shell-finale-btn--primary { background: #5B2A86; color: #fff; }
.shell-finale-btn--primary:hover:not(:disabled) { background: #6c34a0; }
.shell-finale-btn--ghost { background: #F4E9C8; color: #0a0a12; }
.shell-finale-btn--ghost:hover:not(:disabled) { background: #f7eed2; }

/* ---------- Change-game overlay (host action) ---------- */
.shell-changegame-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0, 0, 0, 0.7);
  display: grid;
  place-items: center;
  padding: 14px;
}
.shell-changegame-modal {
  width: min(560px, 100%);
  background: #F4E9C8;
  border: 3px solid #0a0a12;
  border-radius: 16px;
  padding: 22px 18px 18px;
  position: relative;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}
.shell-changegame-title {
  font-family: "Bowlby One", "Inter", sans-serif;
  font-size: 22px;
  margin: 0 0 6px;
  color: #0a0a12;
  text-align: center;
}
.shell-changegame-hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: #4a4d6b;
  text-align: center;
  font-weight: 600;
}
.shell-changegame-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.shell-changegame-tile {
  border: 3px solid #0a0a12;
  border-radius: 12px;
  padding: 18px 12px;
  background: #fff;
  cursor: pointer;
  font-family: "Bowlby One", "Inter", sans-serif;
  font-size: 15px;
  color: #0a0a12;
  text-align: center;
  transition: transform 0.12s ease, background 0.12s ease;
}
.shell-changegame-tile:hover:not(:disabled) { background: #5B2A86; color: #fff; }
.shell-changegame-tile:active { transform: translateY(1px); }
.shell-changegame-tile:disabled { opacity: 0.5; cursor: not-allowed; }
.shell-changegame-tile__title { display: block; }