/* ============================================================
   Guess the Painter — Redesign 2026-05 · Game mode picker modal
   Triggered by the START PLAYING CTA via 'gtp:open-mode-picker'.
   ============================================================ */

.gtp-mode-picker {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  font-family: var(--sans);
  color: var(--ink);
}
.gtp-mode-picker[hidden] { display: none; }

.gtp-mp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28,26,23,0.55);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.gtp-mp-modal {
  position: relative;
  z-index: 1;
  width: min(100%, 1080px);
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  background: var(--paper);
  border-radius: 6px;
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gtp-mp-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms;
}
.gtp-mp-close:hover { background: var(--rule); }

.gtp-mp-header {
  padding: 28px 40px 22px;
  border-bottom: 1px solid var(--rule);
}
.gtp-mp-header .gtp-eyebrow { margin-bottom: 6px; }
.gtp-mp-h2 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

/* ----- 3-column grid (taller paintings, responsive) ----- */
.gtp-mp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  flex: 1;
  min-height: min(82vh, 720px);
}
.gtp-mp-col {
  position: relative;
  display: block;
  overflow: hidden;
  border: 0;
  background-color: var(--mp-fallback, var(--ink));
  background-size: cover;
  background-position: center;
  cursor: pointer;
  text-align: left;
  color: var(--paper);
  padding: 0;
  transition: filter 240ms;
}

/* Per-mode tokens. --mp-tint is the colored veil over the painting.
   --mp-fallback is the solid background when the image fails to load.
   --mp-accent drives the top stripe and the CTA color. */
.gtp-mp-col[data-mode="solo"] {
  --mp-fallback: #5a3d1f;
  --mp-accent:   #b8893a;   /* ochre */
  --mp-accent-2: #8a6422;   /* ochre-deep, used on CTA hover */
  --mp-tint:     rgba(184,137,58,0.42);
}
.gtp-mp-col[data-mode="duo"] {
  --mp-fallback: #2c3850;
  --mp-accent:   #3a5d8f;   /* indigo */
  --mp-accent-2: #26426b;   /* indigo-deep */
  --mp-tint:     rgba(58,93,143,0.45);
}
.gtp-mp-col[data-mode="learn"] {
  --mp-fallback: #4a3b2a;
  --mp-accent:   #d4ac5c;   /* gold */
  --mp-accent-2: #a5832f;
  --mp-tint:     rgba(212,172,92,0.40);
}

.gtp-mp-col + .gtp-mp-col { border-left: 1px solid rgba(184,137,58,0.4); }

/* Top stripe = mode accent */
.gtp-mp-col::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--mp-accent);
  z-index: 3;
}

/* Layered overlay over the painting:
   1) per-mode color tint (semi-transparent — paints the column its mode color)
   2) dark gradient at bottom for text legibility */
.gtp-mp-col::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28,26,23,0.05) 0%, rgba(28,26,23,0.30) 50%, rgba(28,26,23,0.88) 100%),
    var(--mp-tint);
  transition: background 240ms, backdrop-filter 240ms;
  z-index: 1;
}
.gtp-mp-col:hover::before {
  background:
    linear-gradient(180deg, rgba(28,26,23,0.0) 0%, rgba(28,26,23,0.18) 35%, rgba(28,26,23,0.92) 100%),
    var(--mp-tint);
}
.gtp-mp-col:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: -4px; }

.gtp-mp-col-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 36px 32px 32px;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.gtp-mp-ord {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: rgba(245,240,230,0.95);
  margin-bottom: auto;
}
.gtp-mp-title {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 500;
  font-style: italic;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.01em;
}
.gtp-mp-title em { font-style: italic; }
.gtp-mp-tagline {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  color: var(--ochre);
  margin: 8px 0 0;
  line-height: 1.3;
}
.gtp-mp-desc {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(245,240,230,0.97);
  margin: 14px 0 22px;
  max-width: 36ch;
}
.gtp-mp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(0,0,0,0.18);
  transition: background 200ms, transform 160ms, box-shadow 160ms, color 200ms;
  text-shadow: none;
}
.gtp-mp-col:hover .gtp-mp-cta {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0,0,0,0.30);
}
.gtp-mp-arrow { font-family: var(--mono); font-weight: 500; font-size: 18px; }

/* ----- Mobile / narrow ----- */
@media (max-width: 900px) {
  .gtp-mode-picker { padding: 12px; }
  /* Fill the screen so the three flex:1 columns have a real height to share
     (a content-driven modal collapses them to 0). */
  .gtp-mp-modal { height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
  .gtp-mp-header { padding: 20px 24px 16px; flex: 0 0 auto; }
  .gtp-mp-h2 { font-size: 26px; }
  /* Stack the three columns and have them SHARE the modal height equally so
     all three are visible without scrolling. The long description is dropped
     on mobile (the tagline carries the gist) — that's what made each card too
     tall to fit three on screen. */
  .gtp-mp-cols {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .gtp-mp-col { display: flex; flex: 1 1 0; min-height: 0; }
  .gtp-mp-col + .gtp-mp-col { border-left: 0; border-top: 1px solid rgba(184,137,58,0.4); }
  .gtp-mp-col-inner {
    min-height: 0;
    width: 100%;
    height: 100%;
    padding: 14px 22px;
    gap: 4px;
    justify-content: flex-end;
  }
  .gtp-mp-ord { font-size: 11px; }
  .gtp-mp-title { font-size: clamp(26px, 7.5vw, 38px); }
  .gtp-mp-tagline { font-size: 13px; margin-top: 2px; }
  .gtp-mp-desc { display: none; }
  .gtp-mp-cta { width: 100%; justify-content: space-between; font-size: 13px; padding: 11px 16px; margin-top: 8px; }
}