/*
  Styles for the pre-game bottom sheet (js/pregame-sheet.js, Standalone App
  01_SCREENS.md §3), opened from a guardian's card on Voktere, its page, and
  "Spill igjen". Depends on tokens.css + shell.css (bottom-sheet base classes
  .sheet-backdrop / .sheet / .grabber).
*/

.pregame-sheet {
  padding-top: 20px;
}

.pregame-close {
  position: absolute;
  /* Fully INSIDE on mobile: the bottom sheet scrolls (overflow-y auto in
     shell.css), and a scroll container clips anything hanging outside. */
  top: 8px;
  right: 8px;
  z-index: 2;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  display: grid;
  place-items: center;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--muted);
}
.pregame-close:active { transform: scale(var(--press-scale)); }

.pregame-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.pregame-portrait {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg);
  border: var(--card-border-width) solid var(--card-border-color);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-heading);
  color: var(--muted);
}
.pregame-portrait { background: #fff; }
.pregame-portrait img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pregame-head h3 { font-size: var(--text-lg); font-weight: var(--font-weight-heading); }

.pregame-style {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 14px;
}

.pregame-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: #eee9f0;
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 14px;
}
.pregame-seg button {
  min-height: var(--tap-min);
  border-radius: 9px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-heading);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: transform .1s;
}
.pregame-seg button:active { transform: scale(var(--press-scale)); }
.pregame-seg button.on {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 4px #958f8f8a;
}

.pregame-mode-desc {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  margin: -6px 0 14px;
}

.pregame-q {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-heading);
  margin-bottom: 10px;
}

/*
  The colour as chess sites draw it (owner, 2026-09-11; Standalone App
  drafts/app-drafts.html frame 3): three tiles, a white king, a split king for
  random, a black king, and no words (the names are the aria-labels).
*/
.pregame-colors {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.pregame-colors.locked {
  grid-template-columns: 1fr;
  max-width: 120px;
  margin-left: auto;
  margin-right: auto;
}
.pregame-fixed-color {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-heading);
  color: var(--muted);
  margin: 0 0 16px;
}
.ccard:disabled { cursor: default; }
.ccard:disabled:active { transform: none; }
.ccard[hidden] { display: none; }
.ccard {
  position: relative;
  display: grid;
  place-items: center;
  height: 64px;
  padding: 0;
  background: var(--card);
  border: 2px solid #e4dbe8;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .15s, border-color .15s, background-color .15s;
}
.ccard:active { transform: scale(.96); }
.ccard img { width: 44px; height: 44px; display: block; max-width: none; }
/* Random: one king, white on the left half and black on the right, with a
   thin line where they meet. */
.ccard-split { position: relative; width: 44px; height: 44px; display: block; }
.ccard-split img { position: absolute; inset: 0; }
.ccard-split img.is-black-half { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
/* No line down the middle (Fleur, 2026-09-16): the king is simply half
   white, half black. */
.ccard.sel {
  border-color: var(--royal);
  background: #eef1ff;
  box-shadow: inset 0 0 0 1px var(--royal);
}

/* Spill: full width, the size of Hjem's "Velg en vokter". */
.pregame-play {
  min-height: 56px;
  font-size: 19px;
}

/* The kept game's question (SA-10): the line, then Fortsett and Nytt parti. */
.pregame-resume[hidden],
.pregame-main[hidden] { display: none; }
.pregame-resume { display: grid; gap: 10px; margin-top: 6px; }
.pregame-resume-q {
  font-size: var(--text-md);
  font-weight: var(--font-weight-heading);
  color: var(--ink);
  margin: 4px 0 6px;
}
.pregame-new { min-height: 52px; }

.pregame-play.btn-ekte {
  background: var(--orange-ink);
  color: #fff;
  box-shadow: 0 2px 6px rgba(194, 106, 0, .4);
}

/* Prevent background scroll while the sheet is open. */
body.sheet-open-lock {
  overflow: hidden;
}

@media (min-width: 768px) {
  .pregame-sheet {
    /* Centered dialog: content fits, so no scrolling. Overflow visible lets
       the close button straddle the corner (owner screenshot: it was being
       clipped), kills the stray horizontal scrollbar, and the radius applies
       to ALL four corners since this is no longer a bottom sheet. */
    overflow: visible;
    max-height: none;
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: 100%;
    max-width: 440px;
    transform: translate(-50%, -46%) scale(.98);
    opacity: 0;
    border-radius: var(--radius-lg);
    transition: transform .2s ease, opacity .2s ease;
    pointer-events: none;
  }
  .pregame-sheet.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
  }
  .pregame-close {
    /* On the corner, hanging over it. */
    top: -16px;
    right: -16px;
  }
  .pregame-sheet .grabber { display: none; }
}