/* One ordinary-gate group template for all games; colors remain readable in both themes. */
#startGate:not(.is-already-played) {
  --start-section-gap: 16px;
  --start-group-gap: 10px;
  --start-action-height: 56px;
  --start-copper: #e9c29e;
  --start-gold: #efc269;
  --start-sand: #e5d8cf;
  --start-focus: #946526;
}
#startGate:not(.is-already-played) .start-card .start-account-note {
  margin: var(--start-section-gap) 0 0;
  line-height: 1.35;
}
#startGate:not(.is-already-played) .start-account-copy { display: block; }
/* Shared ordinary gate controls. Replay keeps its existing presentation. */
#startGate:not(.is-already-played) .start-card .start-actions,
#startGate:not(.is-already-played) .start-card .start-account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--start-group-gap);
  align-items: stretch;
}
#startGate:not(.is-already-played) .start-account-actions { margin-top: var(--start-section-gap); }

/* The Play triangle and the longer translated Start label need more space
   than Cancel. Reserve that space without changing account/unlock gates. */
#startGate:not(.is-already-played) .start-card .start-actions:not(:has(> [data-game-action="unlock"])) {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
}
#startGate:not(.is-already-played) .start-card .start-actions:has(> [data-game-action="unlock"]) {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.82fr);
}
#startGate:not(.is-already-played) .start-card #startGateBtn:not([data-game-action="unlock"]) {
  padding-inline: 6px;
  gap: 6px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
/* On very narrow screens, keep both labels readable rather than splitting
   a word inside the green action button. */
@media (max-width: 359px) {
  #startGate:not(.is-already-played) .start-card .start-actions:not(:has(> [data-game-action="unlock"])) {
    grid-template-columns: minmax(0, 1fr);
  }
}
#startGate:not(.is-already-played) :is(.start-actions, .start-account-actions) > :is(button, a) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: var(--start-action-height) !important;
  height: var(--start-action-height);
  margin: 0;
  padding: 8px;
  border: 0 !important;
  outline: 0;
  border-radius: var(--game-action-radius, 8px);
  background: var(--start-action-bg, var(--start-sand)) !important;
  color: var(--start-action-ink, #382414) !important;
  font: inherit;
  font-size: var(--game-action-font-size, .95rem);
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
  box-shadow: none !important;
}
#startGate:not(.is-already-played) #startGateBtn {
  --start-action-bg: var(--game-action-bg, var(--game-play-bg, #187B40));
  --start-action-hover: var(--game-action-bg-hover, var(--game-play-bg-hover, #146635));
  --start-action-ink: var(--game-action-ink, #fff);
  font-weight: 800;
}
#startGate:not(.is-already-played) #startGateBtn:not([data-game-action="unlock"])::before {
  content: '';
  width: 12px;
  height: 14px;
  flex: 0 0 12px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#startGate:not(.is-already-played) #startGateCancel { --start-action-bg: var(--start-copper); }
#startGate:not(.is-already-played) [data-start-action="register"] { --start-action-bg: var(--start-gold); }
#startGate:not(.is-already-played) [data-start-action="login"] { --start-action-bg: var(--start-sand); }
#startGate:not(.is-already-played) :is(.start-actions, .start-account-actions) > :not(:disabled):hover {
  background: var(--start-action-hover, color-mix(in srgb, var(--start-action-bg, var(--start-sand)) 90%, #53351f)) !important;
}
#startGate:not(.is-already-played) :is(.start-actions, .start-account-actions) > :not(:disabled):active { transform: translateY(1px); }

#startGate:not(.is-already-played) #startDuel { grid-column: 1 / -1; }
#startGate:not(.is-already-played) #startDuel::before {
  content: '';
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 2 8 8-2 2-8-8V2h2Zm16 0h2v2l-8 8-2-2 8-8ZM8 14l2 2-5 5-2-2 5-5Zm8 0 5 5-2 2-5-5 2-2ZM3 12l9 9-2 2-9-9 2-2Zm18 0 2 2-9 9-2-2 9-9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#startGate:not(.is-already-played) :is(.start-actions, .start-account-actions) > :focus-visible {
  outline: 2px solid var(--start-focus);
  outline-offset: 2px;
}
#startGate:not(.is-already-played) :is(.start-actions, .start-account-actions) > :disabled {
  opacity: .55;
  cursor: wait;
}
#startGate:not(.is-already-played) :is(.start-actions, .start-account-actions) > [hidden] { display: none; }
#startGate .start-account-note:empty { display: none; }
@media (max-width: 279px) {
  #startGate:not(.is-already-played) :is(.start-actions, .start-account-actions) { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  #startGate:not(.is-already-played) :is(.start-actions, .start-account-actions) > :is(button, a) {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    height: auto;
    min-height: 44px;
    padding: 8px 10px;
    font-size: clamp(.82rem, 3.5vw, .95rem);
  }
  #startGate:not(.is-already-played) #startGateCancel {
    white-space: nowrap;
    padding-inline: 10px;
  }
}
/* 360–430 keeps Cancel on one line. Below 360 the existing single column already fits the word. */
@media (min-width: 360px) and (max-width: 430px) {
  #startGate:not(.is-already-played) .start-card .start-actions:not(:has(> [data-game-action="unlock"])) {
    grid-template-columns: minmax(0, 1fr) max-content;
  }
}

/* Override legacy game-shell and game-action focus layers only inside this gate. */
#startGate:not(.is-already-played) :is(.start-actions, .start-account-actions) > :focus:not(:focus-visible),
#startGate:not(.is-already-played) #startGateBtn[data-start-autofocus] { outline: 0; }
#startGate:not(.is-already-played) .start-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--start-group-gap);
}
/* Canonical difficulty classes/geometry from public puzzle chrome. */
#startGate .difficulty-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.4rem;
  padding: 0 .55rem;
  border: 0;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .02em;
  line-height: 1.2;
}
#startGate .difficulty-easy { background: #d8f0dc; color: #1f6b3a; }
#startGate .difficulty-medium { background: #d9e8f7; color: #1f4f8a; }
#startGate .difficulty-hard { background: #fde0dc; color: #9b3d38; }
#startGate .difficulty-expert { background: #ebe0f4; color: #4a2d6b; }

@media (max-width: 359px) {
  #startGate:not(.is-already-played) { --start-action-height: 72px; }
  #startGate:not(.is-already-played) #startGateBtn {
    font-size: 14px;
    padding: 8px;
    gap: 6px;
    letter-spacing: normal;
  }
}

/* Paid Unlock uses the same Play green as free Start. Label + DIG chip on one row. */
#startGate:not(.is-already-played) #startGateBtn[data-game-action="unlock"] {
  --start-action-bg: var(--game-unlock-bg, var(--game-play-bg, var(--play-cta-bg, #187B40)));
  --start-action-hover: var(--game-unlock-bg-hover, var(--game-play-bg-hover, var(--play-cta-hover, #146635)));
  --start-action-ink: var(--play-cta-ink, #fff);
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
  height: var(--start-action-height);
  min-height: var(--start-action-height) !important;
  min-width: 0;
  padding-inline: 8px;
  white-space: nowrap;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  background: var(--start-action-bg) !important;
  color: var(--start-action-ink) !important;
}
#startGate:not(.is-already-played) #startGateBtn[data-game-action="unlock"] .start-unlock-main {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  flex: 0 1 auto;
  min-width: 0;
  font-size: clamp(0.82rem, 3.4vw, 0.95rem);
}
#startGate:not(.is-already-played) #startGateBtn[data-game-action="unlock"] .puzzle-cost-badge {
  margin: 0;
  flex: 0 0 auto;
  padding: 2px 7px;
  font-size: 0.8rem;
  gap: 4px;
}
#startGate:not(.is-already-played) #startGateBtn[data-game-action="unlock"] .puzzle-cost-coin,
#startGate:not(.is-already-played) #startGateBtn[data-game-action="unlock"] .dig-amount-coin {
  width: 1.15em;
  height: 1.15em;
}
#startGate:not(.is-already-played) .start-actions:has(> [data-game-action="unlock"]) #startGateCancel {
  font-size: clamp(0.82rem, 3.2vw, 0.92rem);
  padding-inline: 8px;
}
/* Keep disabled amount contrast instead of fading the entire pale chip. */
#startGate:not(.is-already-played) #startGateBtn[data-game-action="unlock"]:disabled {
  opacity: 1;
}
#startGate:not(.is-already-played) #startGateBtn[data-game-action="play"]:disabled {
  opacity: 1;
  --start-action-bg: var(--play-cta-disabled, #0F5A2E);
  color: #fff !important;
}
@media (max-width: 359px) {
  /* .start-card matches the base two-column rule so this single column actually wins. */
  #startGate:not(.is-already-played) .start-card .start-actions:has(> [data-game-action="unlock"]) {
    grid-template-columns: 1fr;
  }
}
/* Beats #startGate.is-already-played #startGateActions { margin: 0 } in replay-gate.css. */
#startGate.is-already-played.is-challenge-mode #replayChallenge {
  margin-bottom: 10px;
}
#startGate.is-already-played.is-challenge-mode #startGateActions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}