/* ==========================================================================
   ОБУЧЕНИЕ И СТАРТОВОЕ ОКНО СЕЗОНА — в стиле полевого набора
   ========================================================================== */

/* Подсветка элемента: золотая рамка, вокруг затемнение */
.tutorial-highlight {
  position: fixed;
  z-index: 9999;
  border: 3px solid #ffd36a;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(10, 6, 3, 0.55), 0 0 26px rgba(255, 200, 80, 0.7);
  pointer-events: none;
  animation: tutorial-pulse 1.8s ease-in-out infinite;
}
.tutorial-highlight.no-dim-board {
  box-shadow: 0 0 26px rgba(255, 200, 80, 0.7);
}

@keyframes tutorial-pulse {
  50% { border-color: #fff0b8; }
}

.tutorial-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 380px;
  padding: 18px 18px 14px;
  border: 3px solid #2c190b;
  border-radius: 14px;
  background: linear-gradient(180deg, #f6e9c8, #ead7a8);
  box-shadow: inset 0 0 0 2px #a9874f, 0 12px 34px rgba(0, 0, 0, 0.6);
  color: #3b2614;
  animation: tutorial-in 0.2s ease-out;
}

@keyframes tutorial-in { from { opacity: 0; } }

.tutorial-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 11px solid transparent;
}
.tutorial-tooltip-arrow.top { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: #2c190b; }
.tutorial-tooltip-arrow.bottom { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: #2c190b; }
.tutorial-tooltip-arrow.left { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: #2c190b; }
.tutorial-tooltip-arrow.right { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: #2c190b; }

.tutorial-content { margin-bottom: 14px; }

.tutorial-title {
  margin-bottom: 8px;
  font: 400 22px/1.15 "Kelly Slab", Georgia, serif;
  color: #7a4a0d;
}

.tutorial-text {
  font: 500 15px/1.5 "Rubik", system-ui, sans-serif;
  color: #3b2614;
}

.tutorial-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Кнопки обучения — те же игровые кнопки */
.tutorial-btn {
  position: relative;
  min-height: 42px;
  padding: 0 16px 4px;
  border: 2px solid #2a160a;
  border-radius: 12px;
  font: 800 14px "Rubik", system-ui, sans-serif;
  cursor: pointer;
  transition: filter 0.12s, box-shadow 0.12s, background 0.12s;
}

.tutorial-btn-primary {
  border-color: #5c3205;
  background: linear-gradient(180deg, #ffd877, #e59a24);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -5px 0 #a8600f, 0 3px 0 rgba(0, 0, 0, 0.5);
  color: #3d2104;
}

.tutorial-btn-skip {
  background: linear-gradient(180deg, #9c6a3f, #6e4524);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -5px 0 #3f2410, 0 3px 0 rgba(0, 0, 0, 0.5);
  color: #fff1d6;
}

.tutorial-btn:hover { filter: brightness(1.1); }
.tutorial-btn:active {
  filter: brightness(0.9);
  box-shadow: inset 0 5px 8px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.5);
}
.tutorial-btn:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
.tutorial-btn:disabled { filter: grayscale(0.7); opacity: 0.7; cursor: not-allowed; }

.tutorial-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.tutorial-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(59, 38, 20, 0.25);
  transition: background 0.2s;
}
.tutorial-dot.active { background: #e59a24; box-shadow: 0 0 0 2px rgba(229, 154, 36, 0.3); }

/* ==========================================================================
   СТАРТОВОЕ ОКНО СЕЗОНА — карта-приглашение
   ========================================================================== */

.season-legend-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(10, 6, 3, 0.8);
  backdrop-filter: blur(4px);
  animation: legend-fade 0.25s ease;
}

@keyframes legend-fade { from { opacity: 0; } }

.season-legend-content {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  padding: 26px 24px 20px;
  border: 4px solid #2c190b;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(180deg, #f6e9c8, #e3cc97);
  box-shadow: inset 0 0 0 3px #a9874f, inset 0 0 60px rgba(130, 90, 40, 0.35), 0 24px 70px rgba(0, 0, 0, 0.7);
  color: #3b2614;
  text-align: center;
}

.season-legend-icon {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 8px;
  border: 3px solid #5c3205;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1b6, #e8a93a 60%, #8a5714);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  font-size: 46px;
}

.season-legend-title {
  margin-bottom: 8px;
  font: 400 34px/1.1 "Kelly Slab", Georgia, serif;
  color: #5c3205;
}

.season-legend-text {
  margin-bottom: 16px;
  font: 500 15px/1.5 "Rubik", system-ui, sans-serif;
  color: #5a3e22;
}

.season-legend-story,
.season-prizes,
.season-dates,
.season-agreement {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 2px dashed rgba(92, 50, 5, 0.35);
  border-radius: 12px;
  background: rgba(255, 250, 235, 0.45);
}

.season-legend-story h3,
.season-prizes h3,
.season-dates h3 {
  margin: 0 0 6px;
  font: 400 19px "Kelly Slab", Georgia, serif;
  color: #7a4a0d;
}

.season-legend-story p {
  margin: 0;
  font: 600 20px/1.35 "Caveat", cursive;
  color: #3b2614;
}

.season-dates p { margin: 0; font-weight: 700; }

.prizes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.prize-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid #b9761c;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff2c4, #f5cf6a);
  transition: filter 0.12s;
}
.prize-item:hover { filter: brightness(1.05); }
.prize-icon { font-size: 22px; }
.prize-text { font: 800 13px "Rubik", system-ui, sans-serif; color: #4a2a06; text-align: left; }

.season-agreement { text-align: left; }
.checkbox-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.checkbox-label input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; accent-color: #b9761c; flex: none; }
.checkbox-label a { color: #8a3a12; font-weight: 700; }
.checkbox-label a:hover { color: #b24a12; }

.season-legend-btn {
  position: relative;
  width: 100%;
  min-height: 54px;
  padding: 0 18px 5px;
  border: 2px solid #5c3205;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffd877, #e59a24);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -6px 0 #a8600f, 0 4px 0 rgba(0, 0, 0, 0.5), 0 8px 20px rgba(229, 154, 36, 0.35);
  color: #3d2104;
  font: 900 18px "Rubik", system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.12s, box-shadow 0.12s, background 0.12s;
}
.season-legend-btn:not(:disabled):hover { filter: brightness(1.08); }
.season-legend-btn:not(:disabled):active {
  background: linear-gradient(180deg, #e59a24, #ffd877);
  box-shadow: inset 0 5px 8px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.5);
}
.season-legend-btn:focus-visible { outline: 3px solid #fff0b8; outline-offset: 3px; }
.season-legend-btn:disabled { filter: grayscale(0.8); opacity: 0.6; cursor: not-allowed; }

.season-footer { margin: 12px 0 0; font-size: 12px; color: #7a5a38; }

@media (max-width: 480px) {
  .season-legend-content { padding: 20px 16px 16px; }
  .season-legend-title { font-size: 28px; }
  .prizes-grid { grid-template-columns: 1fr; }
  .tutorial-tooltip { max-width: calc(100vw - 24px); }
}