/* ===================================================================
   create-world.css — редизайн экрана «Создание нового мира» (2026-06-25)
   Геральдические SVG-иконки, медальоны, тултипы «?», счётчики символов,
   тёмные карточки ролей/сложности, сетка пресетов, серый Warhammer.
   Грузится ПОСЛЕ style.css — переопределяет нужные правила экрана setup.
   =================================================================== */

/* --- Базовая иконка-эмблема (заменяет эмодзи) --- */
.ui-ico { display: inline-block; width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
.ui-ico-lg { width: 24px; height: 24px; }

/* Кнопка-кубик у поля: единый глиф d20 вместо эмодзи */
.btn-dice { display: inline-flex; align-items: center; justify-content: center; }
.btn-dice .ui-ico { width: 18px; height: 18px; display: block; }
.btn-dice:focus-visible { outline: 2px solid var(--color-accent-bright); outline-offset: 2px; opacity: 1; }
/* кубик прижимаем вправо, «?» остаётся у лейбла */
.label-row .btn-dice { margin-left: auto; }
.btn-generate-all .ui-ico { width: 22px; height: 22px; }
.btn-quick-start .ui-ico { width: 24px; height: 24px; }

/* --- Развилка входа перед формой: быстрый старт / свой мир --- */
.world-entry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}
.entry-card {
    width: 100%;
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    text-align: left;
    white-space: normal;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: transform .2s, border-color .2s, box-shadow .2s, background .2s;
}
.world-entry .btn-quick-start { margin-bottom: 0; }
.entry-card:hover { transform: translateY(-2px); }
.entry-card:focus-visible {
    outline: 2px solid var(--color-accent-bright);
    outline-offset: 3px;
}
.entry-card-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
}
.entry-card .ui-ico { width: 28px; height: 28px; }
.entry-card-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.entry-card-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.15;
}
.entry-card-sub {
    font-family: var(--font-ui);
    font-size: 0.88rem;
    line-height: 1.35;
}
.entry-card-primary {
    color: #1a1208;
    background: linear-gradient(135deg, var(--color-accent-bright) 0%, var(--color-accent) 100%);
    border: 2px solid var(--color-accent-bright);
    box-shadow: 0 8px 20px rgba(139, 105, 20, .18);
}
.entry-card-primary:hover {
    background: linear-gradient(135deg, #d4b878 0%, var(--color-accent-bright) 100%);
    box-shadow: 0 10px 26px rgba(139, 105, 20, .36);
}
.entry-card-primary .entry-card-icon { background: rgba(26, 18, 8, .12); }
.entry-card-primary .entry-card-sub { color: rgba(26, 18, 8, .82); }
.entry-card-outline {
    color: var(--color-accent-bright);
    background: rgba(139, 105, 20, .08);
    border: 1px solid rgba(201, 169, 110, .46);
}
.entry-card-outline:hover {
    background: rgba(139, 105, 20, .16);
    border-color: var(--color-accent-bright);
    box-shadow: 0 0 16px rgba(201, 169, 110, .16);
}
.entry-card-outline .entry-card-icon {
    background: rgba(139, 105, 20, .16);
    box-shadow: inset 0 0 0 1px rgba(201, 169, 110, .35);
}
.entry-card-outline .entry-card-sub { color: var(--color-text-muted-light); }

/* --- Индикатор лимита генераций (цена + остаток) --- */
.gen-quota {
    margin: calc(-1 * var(--spacing-xs)) 0 var(--spacing-sm);
    text-align: right;
    font: 0.76rem/1.4 var(--font-ui);
    color: var(--color-text-muted-light);
    font-variant-numeric: tabular-nums;
}
.gen-quota-empty { color: var(--color-accent-bright); }
/* Кнопки генерации, погашенные исчерпанным лимитом */
.btn-dice.gen-disabled, .btn-generate-all.gen-disabled { opacity: 0.35; cursor: not-allowed; }

/* --- Ряд пресетов: сетка 2×2 + «Сгенерировать всё» во всю ширину --- */
.presets-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}
.presets-row .btn-preset { flex: none; }
.presets-row .btn-generate-all { grid-column: 1 / -1; }

/* --- Недоступный пресет (Warhammer 40K) — серый + «Скоро» --- */
.btn-preset-disabled { opacity: 0.4; filter: grayscale(1); pointer-events: none; cursor: default; }
.btn-preset .coming-soon-badge {
    font-size: 0.62rem; font-style: italic; margin-left: var(--spacing-xs);
    color: var(--color-text-dim-light); letter-spacing: .04em; text-transform: uppercase;
}

/* --- Тёмные карточки ролей и сложности (единый язык с тёмной темой) --- */
.role-card-inner, .difficulty-card-inner {
    background: rgba(139, 105, 20, 0.08);
    border: 1px solid rgba(201, 169, 110, 0.32);
}
.role-card-title, .difficulty-card-title { color: var(--color-accent-bright); }
.role-card-desc, .difficulty-card-desc { color: var(--color-text-muted-light); }
.role-card input[type="radio"]:checked + .role-card-inner {
    background: rgba(139, 105, 20, 0.18);
    border-color: var(--color-accent-bright);
    box-shadow: 0 0 0 2px var(--color-accent), 0 0 14px rgba(201, 169, 110, 0.25);
}
.role-card-inner { min-height: 118px; }

/* Медальон под иконкой роли (как сургучная печать) */
.role-card-icon {
    width: 48px; height: 48px; display: grid; place-items: center;
    margin: 2px auto var(--spacing-xs);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #2c2416 0%, #1a140c 100%);
    box-shadow: inset 0 0 0 1px #8a744f, inset 0 0 0 3px #14100a, inset 0 0 0 4px rgba(201, 169, 110, .6), 0 1px 5px rgba(0, 0, 0, .45);
    font-size: 0; /* гасим старый emoji-размер */
}
.role-card-icon .ui-ico { width: 33px; height: 33px; transition: filter .2s; }
.role-card input[type="radio"]:checked + .role-card-inner .role-card-icon .ui-ico {
    filter: drop-shadow(0 0 5px rgba(201, 169, 110, .6));
}

/* Шаг 3: в бете показываем один доступный режим, без стены disabled-плиток. */
.difficulty-cards {
    grid-template-columns: minmax(0, 440px);
    justify-content: start;
}
.difficulty-card.disabled { display: none; }
.difficulty-normal input[type="radio"]:checked + .difficulty-card-inner {
    background: rgba(139, 105, 20, 0.18);
    border-color: var(--color-accent-bright);
    box-shadow: 0 0 0 2px var(--color-accent), 0 0 14px rgba(201, 169, 110, 0.25);
}
.difficulty-normal .difficulty-card-title { color: var(--color-accent-bright); }
.difficulty-soon-note {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--color-text-muted-light);
    font: italic 0.86rem/1.4 var(--font-ui);
}

/* --- Счётчик символов --- */
.char-counter {
    align-self: flex-end; font-size: 0.72rem; color: var(--color-text-muted-light);
    font-family: var(--font-ui); font-variant-numeric: tabular-nums; margin-top: 2px; transition: color .2s;
}
.char-counter-warn { color: var(--color-accent-bright); }   /* >= 85% */
.char-counter-full { color: var(--color-danger-bright); }   /* == максимум */

/* --- Подсказки «?» у полей --- */
.field-help {
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--color-accent);
    background: rgba(139, 105, 20, .14); color: var(--color-accent-bright);
    font: 600 11px/1 var(--font-ui); cursor: pointer; padding: 0; margin-left: 2px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background .2s;
}
.field-help:hover, .field-help:focus-visible { background: rgba(139, 105, 20, .3); outline: none; }
.field-hint {
    position: relative;
    z-index: 40;
    margin: var(--spacing-xs) 0; padding: var(--spacing-sm) var(--spacing-md);
    max-width: 460px; background: #231e18; border: 1px solid var(--color-accent);
    border-left: 3px solid var(--color-accent-bright); border-radius: var(--border-radius);
    color: var(--color-text-light); font: 0.84rem/1.45 var(--font-ui);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
    animation: fadeIn 0.18s ease;
}

@media (max-width: 600px) {
    .world-entry { grid-template-columns: 1fr; }
    .entry-card { min-height: 96px; padding: var(--spacing-md); }
    .entry-card-title { font-size: 1.1rem; }
    .entry-card-sub { font-size: 0.84rem; }

    /* пресеты в одну колонку на мобайле */
    .presets-row { grid-template-columns: 1fr; }
    .field-hint { max-width: 100%; }
    .btn-preset .ui-ico,
    .btn-dice .ui-ico { width: 24px; height: 24px; }
    .difficulty-cards { grid-template-columns: 1fr; }
    .setup-form { padding-bottom: 120px; }
}

/* Вайб игры — опциональные селекты (story_type / rhythm / mood) */
.vibe-selects {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.vibe-select {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--color-text-light);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(200, 180, 140, 0.2);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.vibe-select:focus {
    outline: none;
    border-color: var(--color-accent-bright);
    box-shadow: 0 0 8px rgba(201, 169, 110, 0.15);
}
/* Опции рендерятся системно — задаём тёмный фон, чтобы не было белого на белом */
.vibe-select option {
    background-color: #1a1410;
    color: var(--color-text-light);
}

/* ===================================================================
   Фикс счётчиков символов + постоянные подсказки полей (2026-07-06)
   =================================================================== */

/* БАГ: style.css задаёт .char-counter { position:absolute } для счётчика поля
   ввода в чате. В форме создания мира этот же класс делал ВСЕ счётчики
   абсолютными → они слипались в правом углу, оторванные от полей (это и есть
   «лишние цифры справа», которые видел Тимур). Сбрасываем в нормальный поток,
   строго под своим полем и справа. Скоуп по #game-setup-form — чтобы НЕ задеть
   абсолютный счётчик поля ввода в чате (#char-counter). */
#game-setup-form .char-counter {
    position: static;
    display: block;
    width: 100%;
    text-align: right;
    margin-top: 2px;
}

/* Подсказки полей — постоянно видимые (без hidden), компактные и приглушённые,
   а не всплывающий тёмный тултип. Кнопки «?» больше не нужны (тоггл отключён в
   game-setup.js) → скрыты. Вернуть тултипы = откатить этот блок + убрать ранний
   return в initFieldHelp. */
.field-help { display: none !important; }
.field-hint {
    display: block;
    position: static;
    z-index: auto;
    max-width: 100%;
    margin: 3px 0 0;
    padding: 0 0 0 var(--spacing-sm);
    background: none;
    border: none;
    border-left: 2px solid rgba(201, 169, 110, .32);
    border-radius: 0;
    color: var(--color-text-muted-light);
    font: 0.78rem/1.4 var(--font-ui);
    box-shadow: none;
    animation: none;
}