/* =============================================================================
   Захват территории — стили (ученик, ведущий, вход по PIN)
   Палитра совпадает со страницами викторин: Nunito Sans, кремовый фон, тёмно-синий.
   ============================================================================= */
.tg {
    --tg-ink: #1a1612;
    --tg-ink-soft: #4a423a;
    --tg-mute: #8a7f72;
    --tg-line: #e6dcc2;
    --tg-cream: #fdf6e8;
    --tg-cream-deep: #f5ead0;
    --tg-navy: #2f5578;
    --tg-navy-dark: #24425e;
    --tg-accent: #3f8eff;
    --tg-danger: #a23b2b;
    --tg-ok: #1e7a46;
    --tg-warn: #9a6a00;
    --tg-free: #fffdf8;
    font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--tg-ink);
    line-height: 1.45;
}
.tg *, .tg *::before, .tg *::after { box-sizing: border-box; }
.tg-page { max-width: 1240px; margin: 0 auto; padding: 16px 16px 48px; }
.tg-muted { color: var(--tg-mute); font-size: 13.5px; margin: 6px 0 0; }
.tg-loading { padding: 40px; text-align: center; color: var(--tg-mute); }

/* ---------- кнопки ---------- */
.tg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; font: 700 15px/1.2 "Nunito Sans", system-ui, sans-serif;
    border: 1px solid transparent; border-radius: 8px; cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, transform .1s;
}
.tg-btn:active { transform: translateY(1px); }
.tg-btn:disabled { opacity: .6; cursor: default; }
.tg-btn-primary { background: var(--tg-navy); color: #fff; }
.tg-btn-primary:hover { background: var(--tg-navy-dark); color: #fff; text-decoration: none; }
.tg-btn-ghost { background: #fff; border-color: var(--tg-line); color: var(--tg-ink); }
.tg-btn-ghost:hover { border-color: var(--tg-accent); }
.tg-btn-danger { background: var(--tg-danger); color: #fff; }
.tg-btn-danger:hover { background: #87301f; color: #fff; }
.tg-btn-block { width: 100%; margin-top: 18px; }

/* ---------- верхняя строка ---------- */
.tg-top {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
    padding: 0 0 14px; border-bottom: 1px solid var(--tg-line); margin-bottom: 14px;
}
.tg-top-main { flex: 1 1 260px; min-width: 0; }
.tg-title { font: 800 22px/1.2 "Nunito Sans", system-ui, sans-serif; letter-spacing: -.01em; }
.tg-badge {
    display: inline-block; margin-top: 4px; padding: 2px 10px; font-size: 12.5px; font-weight: 700;
    color: var(--tg-navy); background: #e9f0f8; border-radius: 999px;
}
.tg-timer {
    font: 600 26px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--tg-navy);
    padding: 6px 12px; border: 1px solid var(--tg-line); border-radius: 8px; background: #fff;
}
.tg-timer-low { color: var(--tg-danger); border-color: #f0c2b9; animation: tg-blink 1s steps(2) infinite; }
.tg-me { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tg-me-team { font-weight: 600; color: var(--tg-mute); }
.tg-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

/* ---------- статус ---------- */
.tg-status {
    display: none; margin: 0 0 14px; padding: 10px 14px; border-left: 4px solid var(--tg-navy);
    background: #eef4fb; font-weight: 600; font-size: 14.5px;
}
.tg-status-warn { border-color: #e3a224; background: #fdf5e2; }
.tg-status-bad { display: block; border-color: var(--tg-danger); background: #fdecea; }
.tg-status-done { border-color: var(--tg-ok); background: #e8f5ec; }
.tg-status a { font-weight: 800; margin-left: 4px; }
/* Статус при загрузке не скрываем: если первый опрос не удался, ошибка должна быть видна. */
.tg-booting .tg-main, .tg-booting .tg-lobby, .tg-booting .tg-end { display: none !important; }
.tg-app:not(.tg-booting) .tg-boot { display: none; }
.tg-stopped .tg-board { opacity: .45; }

/* ---------- основная сетка ---------- */
.tg-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.tg-host .tg-main { grid-template-columns: minmax(0, 1fr) 340px; }
.tg-board-wrap { min-width: 0; }

/* ---------- поле ---------- */
.tg-board {
    display: grid; gap: 6px; width: 100%; max-width: min(100%, 76vh); margin: 0 auto;
    --tg-cols: 5;
}
.tg-host .tg-board { max-width: min(100%, 82vh); }
[data-status="0"] .tg-board { opacity: .55; }
.tg-offline .tg-board { opacity: .7; }

.tg-cell {
    position: relative; aspect-ratio: 1 / 1; width: 100%; padding: 0; margin: 0;
    border: 1px solid var(--tg-line); border-radius: 6px; background: var(--tg-free);
    color: var(--tg-ink-soft); cursor: pointer; overflow: hidden;
    font-size: clamp(9px, calc(46vw / var(--tg-cols)), 15px);
    transition: transform .12s, box-shadow .12s, background-color .25s;
}
@supports not (aspect-ratio: 1 / 1) {
    .tg-cell { height: 0; padding-bottom: 100%; }
}
.tg-cell:disabled { cursor: default; }
.tg-cell.tg-owned {
    background: var(--tg-owner); border-color: rgba(0, 0, 0, .12); color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.tg-cell.tg-mine { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85); }
.tg-cell.tg-target:not(:disabled) { outline: 2px dashed var(--tg-navy); outline-offset: -5px; }
.tg-cell.tg-owned.tg-target:not(:disabled) { outline-color: #fff; }
.tg-cell.tg-target:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(26, 22, 18, .18); }
.tg-cell.tg-duel { animation: tg-pulse 1s ease-in-out infinite; }
.tg-cell.tg-cool { filter: grayscale(.6); opacity: .6; }
.tg-cell-lbl { position: absolute; top: 4px; left: 6px; font-size: .78em; font-weight: 700; opacity: .7; }
.tg-cell-ico {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    text-align: center; font-size: 1.6em; line-height: 1;
}
.tg-cell-cd {
    position: absolute; right: 5px; bottom: 4px; font: 600 .85em/1 "IBM Plex Mono", ui-monospace, monospace;
}
.tg-flash-ok { animation: tg-flash-ok .9s ease-out; }
.tg-flash-bad { animation: tg-flash-bad .6s ease-out; }

.tg-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin-top: 12px; font-size: 12.5px; color: var(--tg-mute); }
.tg-legend span { display: inline-flex; align-items: center; gap: 4px; }
.tg-lg-target { display: inline-block; width: 14px; height: 14px; border: 2px dashed var(--tg-navy); border-radius: 3px; }

/* ---------- боковая панель ---------- */
.tg-side { min-width: 0; }
.tg-hint { padding: 12px 14px; background: var(--tg-cream); border: 1px solid var(--tg-line); font-size: 13.5px; color: var(--tg-ink-soft); margin-bottom: 16px; }
.tg-score h3 { font: 800 13px/1 "Nunito Sans", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--tg-mute); margin: 16px 0 6px; }
.tg-rank { list-style: none; margin: 0; padding: 0; }
.tg-rank-row {
    display: grid; grid-template-columns: 22px 14px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 8px;
    padding: 6px 4px; border-bottom: 1px solid var(--tg-line); font-size: 14px;
}
.tg-rank-me { background: #eef4fb; }
.tg-rank-place { font-weight: 800; color: var(--tg-mute); text-align: right; }
.tg-rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-rank-val { font: 600 13px/1 "IBM Plex Mono", ui-monospace, monospace; }
.tg-rank-empty, .tg-rank-more { padding: 8px 4px; color: var(--tg-mute); font-size: 13px; }
.tg-bar { grid-column: 1 / -1; display: block; height: 4px; background: #efe8d6; border-radius: 2px; overflow: hidden; }
.tg-bar-fill { display: block; height: 100%; transition: width .4s; }
.tg-offline-dot { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #c9bfae; vertical-align: middle; }
.tg-kick { border: 0; background: none; color: var(--tg-mute); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.tg-kick:hover { color: var(--tg-danger); }

/* ---------- лобби ---------- */
.tg-lobby { padding: 16px; margin-bottom: 16px; background: #fff; border: 1px solid var(--tg-line); }
.tg-lobby-count { font-size: 16px; margin-bottom: 10px; }
.tg-lobby-count b { font-size: 22px; color: var(--tg-navy); }
.tg-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.tg-team {
    display: block; width: 100%; text-align: left; padding: 12px; background: #fff;
    border: 2px solid var(--tg-team, var(--tg-line)); border-radius: 8px; font: inherit; color: inherit;
}
.tg-team-pick { cursor: pointer; }
.tg-team-pick:hover { background: #fbf7ee; }
.tg-team-me { box-shadow: 0 0 0 3px rgba(47, 85, 120, .18); }
.tg-team-head { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.tg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tg-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 13.5px;
    background: #fff; border: 1px solid var(--tg-line); border-radius: 999px;
}
.tg-chip-me { border-color: var(--tg-navy); font-weight: 700; }
.tg-chip-sel { font-size: 12px; padding: 1px 2px; border: 1px solid var(--tg-line); border-radius: 4px; background: #fff; }

/* ---------- итог ---------- */
.tg-end-box { text-align: center; padding: 26px 18px; margin-bottom: 16px; background: #fff; border: 1px solid var(--tg-line); }
.tg-end-box h2 { font: 800 24px/1.25 "Nunito Sans", sans-serif; margin: 6px 0 4px; }
.tg-end-icon { font-size: 44px; color: #e3a224; }
.tg-end-me { font-weight: 700; margin: 10px 0 14px; }

/* ---------- окно вопроса ---------- */
.tg-modal {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(26, 22, 18, .55);
}
.tg-modal[hidden] { display: none !important; }
body.tg-modal-open { overflow: hidden; }
.tg-m-dialog {
    width: 100%; max-width: 720px; max-height: calc(100vh - 32px); max-height: 100%; overflow: auto;
    background: #fff; border-radius: 10px; box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
    font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: #1a1612;
}
.tg-m-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e6dcc2; }
.tg-m-headtext { flex: 1 1 auto; min-width: 0; }
.tg-m-title { font: 800 20px/1.2 "Nunito Sans", sans-serif; }
.tg-m-sub { margin-top: 2px; font-size: 13.5px; color: #8a7f72; }
.tg-m-duel {
    padding: 4px 10px; border-radius: 6px; white-space: nowrap;
    font: 600 18px/1.2 "IBM Plex Mono", ui-monospace, monospace; color: #a23b2b; background: #fdecea;
}
.tg-m-close { border: 0; background: none; font-size: 28px; line-height: 1; color: #8a7f72; cursor: pointer; }
.tg-m-body { padding: 18px 20px; }
.tg-m-body img { max-width: 100%; height: auto; }
.tg-q-body { font-size: 16px; overflow-wrap: anywhere; }
.tg-q-hint { margin: 16px 0 8px; font-size: 13px; color: #8a7f72; }
.tg-q-hint i { margin-right: 4px; }
.tg-m-feedback { min-height: 24px; padding: 0 20px 6px; font-weight: 800; font-size: 15px; }
.tg-fb-ok { color: #1e7a46; }
.tg-fb-bad { color: #a23b2b; }
.tg-fb-warn { color: #9a6a00; }
.tg-fb-info { color: #8a7f72; }
.tg-m-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #e6dcc2; }
.tg-m-foot .tg-btn { padding: 10px 18px; font: 700 15px/1.2 "Nunito Sans", sans-serif; border-radius: 8px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; }
.tg-m-foot .tg-btn-primary { background: #2f5578; color: #fff; }
.tg-m-foot .tg-btn-primary:hover { background: #24425e; }
.tg-m-foot .tg-btn-ghost { background: #fff; border-color: #e6dcc2; color: #1a1612; }
.tg-m-foot .tg-btn:disabled { opacity: .6; cursor: default; }

/* выбор варианта */
.tg-a-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-a-opt {
    min-width: 56px; height: 56px; padding: 0 12px; font: 800 20px/1 "Nunito Sans", sans-serif;
    color: #1a1612; background: #fff; border: 2px solid #e6dcc2; border-radius: 8px; cursor: pointer;
}
.tg-a-opt:hover { border-color: #3f8eff; }
.tg-a-opt.sel { background: #2f5578; border-color: #2f5578; color: #fff; }
/* ввод */
.tg-b-input { width: 100%; font-size: 18px; padding: 10px 12px; border: 2px solid #e6dcc2; border-radius: 8px; }
.tg-b-input:focus { outline: none; border-color: #3f8eff; }
/* сортировка */
.tg-s-list { list-style: none; margin: 0; padding: 0; counter-reset: tgs; }
.tg-s-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px;
    background: #fffdf8; border: 1px solid #e6dcc2; border-radius: 6px; counter-increment: tgs;
}
.tg-s-item::before { content: counter(tgs); font-weight: 800; color: #8a7f72; min-width: 18px; }
.tg-s-text { flex: 1 1 auto; min-width: 0; }
.tg-s-btns { display: flex; gap: 4px; }
.tg-s-btns button {
    width: 34px; height: 34px; border: 1px solid #e6dcc2; border-radius: 6px; background: #fff;
    color: #2f5578; font-size: 13px; cursor: pointer;
}
.tg-s-btns button:hover { border-color: #3f8eff; }
/* сопоставление */
.tg-m-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tg-m-opt { padding: 6px 10px; border: 1px dashed #c9bfae; border-radius: 6px; background: #fffdf8; }
.tg-m-opt b { color: #2f5578; margin-right: 4px; }
.tg-m-rows { border-top: 1px solid #e6dcc2; }
.tg-m-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #e6dcc2; }
.tg-m-sel { font-size: 16px; }
/* интерактивный */
.tg-iq { margin-top: 12px; }

/* ---------- уведомления ---------- */
.tg-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 10060; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.tg-toast {
    padding: 10px 14px; border-radius: 8px; border-left: 4px solid #3f8eff;
    background: #1a1612; color: #fff; font: 600 14px/1.35 "Nunito Sans", system-ui, sans-serif;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: tg-in .2s ease-out;
}
/* Контейнер уведомлений не перехватывает клики по полю и окну вопроса; кликабельны только тревоги. */
.tg-toasts { pointer-events: none; }
.tg-toast[role] { pointer-events: auto; }
body.tg-modal-open .tg-toasts { top: 16px; bottom: auto; }
.tg-toast-ok { border-color: #2fa86a; }
.tg-toast-warn { border-color: #e3a224; }
.tg-toast-bad { border-color: #e0503a; }
.tg-toast-alert { background: #a23b2b; border-color: #fff; cursor: pointer; animation: tg-in .2s ease-out, tg-shake .5s .2s; }

/* ---------- вход по PIN ---------- */
.tg-join { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 32px 16px; }
.tg-join-card { width: 100%; max-width: 400px; padding: 28px 24px; text-align: center; background: #fff; border: 1px solid var(--tg-line); }
.tg-join-card h1 { font: 800 26px/1.2 "Nunito Sans", sans-serif; margin: 0 0 4px; }
.tg-join-sub { color: var(--tg-mute); margin: 0 0 8px; }
.tg-join-mark { display: grid; grid-template-columns: repeat(3, 18px); gap: 4px; justify-content: center; margin: 0 auto 14px; }
.tg-join-mark span { width: 18px; height: 18px; border-radius: 4px; background: #efe6cf; }
.tg-label { display: block; text-align: left; font-weight: 700; font-size: 13px; margin: 16px 0 6px; }
.tg-pin-input { font: 600 30px/1.2 "IBM Plex Mono", ui-monospace, monospace !important; text-align: center; letter-spacing: .3em; height: auto !important; }
.tg-join-as { margin-top: 14px; font-size: 14px; text-align: left; }
.tg-join-error { display: block; margin-top: 12px; text-align: left; color: var(--tg-danger); font-weight: 600; }

/* ---------- экран ведущего ---------- */
.tg-hostbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px;
    padding: 16px; margin-bottom: 16px; background: #fff; border: 1px solid var(--tg-line);
}
.tg-pinbox { display: flex; align-items: center; gap: 18px; }
.tg-pin-label { font-size: 13px; font-weight: 700; color: var(--tg-mute); text-transform: uppercase; letter-spacing: .06em; }
.tg-pin-big { font: 700 56px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .06em; color: var(--tg-navy); }
.tg-join-url { font-size: 13.5px; color: var(--tg-ink-soft); margin-top: 6px; }
.tg-qr img { width: 150px; height: 150px; display: block; }
.tg-pinbox-compact .tg-pin-big { font-size: 30px; }
.tg-pinbox-compact .tg-qr img { width: 72px; height: 72px; }
.tg-host-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- анимации ---------- */
@keyframes tg-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 80, 58, .7); } 50% { box-shadow: 0 0 0 5px rgba(224, 80, 58, 0); } }
@keyframes tg-flash-ok { 0% { transform: scale(1); } 35% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(47, 168, 106, .45); } 100% { transform: scale(1); } }
@keyframes tg-flash-bad { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes tg-blink { 50% { opacity: .55; } }
@keyframes tg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tg-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
    .tg-cell, .tg-toast, .tg-cell.tg-duel, .tg-timer-low { animation: none !important; transition: none !important; }
}

/* ---------- адаптив ---------- */
@media (max-width: 920px) {
    .tg-main, .tg-host .tg-main { grid-template-columns: minmax(0, 1fr); }
    .tg-board { max-width: 100%; }
}
@media (max-width: 520px) {
    .tg-dense .tg-cell-lbl { display: none; }
    .tg-dense .tg-cell.tg-target:not(:disabled) { outline-width: 1px; outline-offset: -3px; }
    .tg-dense .tg-cell-cd { right: 2px; bottom: 2px; font-size: .7em; }
    .tg-page { padding: 10px 8px 40px; }
    .tg-board { gap: 4px; }
    .tg-title { font-size: 19px; }
    .tg-timer { font-size: 20px; }
    .tg-modal { padding: 0; align-items: flex-end; }
    .tg-m-dialog { max-height: 92vh; max-height: 100%; border-radius: 12px 12px 0 0; }
    .tg-pin-big { font-size: 40px; }
    .tg-qr img { width: 110px; height: 110px; }
    .tg-host-actions { margin-left: 0; width: 100%; }
}

/* =============================================================================
   Страницы учителя: список игр, конструктор, итоги
   ============================================================================= */
.tgd { max-width: 1120px; margin: 0 auto; padding: 8px 16px 48px; }
.tgd-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; margin: 0 0 18px; }
.tgd-head-t { flex: 1 1 240px; min-width: 0; }
.tgd-head h1 { margin: 0; font: 800 23px/1.15 "Nunito Sans", system-ui, sans-serif; letter-spacing: -.01em; color: var(--tg-ink); }
.tgd-head p { margin: 3px 0 0; font: 500 13.5px "Nunito Sans", system-ui, sans-serif; color: #867752; }
.tgd-back { display: inline-block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--tg-navy); }
.tgd-card { background: #fff; border: 1px solid var(--tg-line); padding: 18px; margin-bottom: 16px; }
.tgd-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 800 17px/1.2 "Nunito Sans", system-ui, sans-serif; }
.tgd-card h2 small { font-weight: 600; font-size: 13px; color: var(--tg-mute); }
.tgd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px; }
.tgd-field label, .tgd-label { display: block; margin-bottom: 4px; font-weight: 700; font-size: 13px; }
.tgd-note { margin-top: 4px; font-size: 12.5px; color: var(--tg-mute); }
.tgd-note-warn { color: var(--tg-warn); font-weight: 600; }
.tgd-section-title { margin: 18px 0 8px; font: 800 12.5px/1 "Nunito Sans", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--tg-mute); }

.tgd-mechs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.tgd-mech {
    position: relative; display: block; margin: 0; padding: 14px 14px 14px 42px; cursor: pointer;
    font-weight: 400; background: #fff; border: 2px solid var(--tg-line); border-radius: 8px;
}
.tgd-mech input { position: absolute; left: 15px; top: 17px; }
.tgd-mech b { display: block; margin-bottom: 4px; font-size: 15px; }
.tgd-mech-hint { display: block; font-size: 13px; color: var(--tg-ink-soft); }
.tgd-mech:hover { border-color: #b9c9da; }
.tgd-mech:has(input:checked) { border-color: var(--tg-navy); background: #f3f7fb; }
.tgd-check { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 6px; }
.tgd-check input { margin: 0; }
.tgd-check label { margin: 0; font-weight: 600; }

.tgd-msg { padding: 10px 14px; margin-bottom: 14px; border-left: 4px solid var(--tg-ok); background: #e8f5ec; font-weight: 600; }
.tgd-msg-err { border-color: var(--tg-danger); background: #fdecea; }
.tgd-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.tgd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--tg-line); margin-bottom: 14px; }
.tgd-tab { padding: 9px 14px; margin-bottom: -1px; font-weight: 700; color: var(--tg-ink-soft); border-bottom: 3px solid transparent; text-decoration: none; }
.tgd-tab:hover { color: var(--tg-navy); text-decoration: none; }
.tgd-tab.active { color: var(--tg-navy); border-color: var(--tg-navy); }
.tgd-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.tgd-toolbar .form-control { flex: 1 1 240px; max-width: 420px; }
.tgd-create { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.tgd-create .tgd-field { flex: 1 1 280px; }

.tgd-list { border-top: 1px solid var(--tg-line); }
.tgd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 18px; align-items: center; padding: 14px 6px; border-bottom: 1px solid var(--tg-line); }
.tgd-row-name { margin: 0; font: 800 16px/1.25 "Nunito Sans", system-ui, sans-serif; color: var(--tg-ink); }
.tgd-row-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; font-size: 12.5px; color: var(--tg-mute); }
.tgd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tgd-chip { padding: 3px 9px; font-size: 12.5px; white-space: nowrap; background: #fffdf8; border: 1px solid var(--tg-line); border-radius: 999px; }
.tgd-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.tgd-act {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; font-weight: 700; font-size: 13px;
    color: var(--tg-navy); background: #fff; border: 1px solid var(--tg-line); border-radius: 6px; text-decoration: none; cursor: pointer;
}
.tgd-act:hover { border-color: var(--tg-accent); background: #f3f7fb; text-decoration: none; color: var(--tg-navy); }
.tgd-act-start { color: #fff; background: var(--tg-navy); border-color: var(--tg-navy); }
.tgd-act-start:hover { color: #fff; background: var(--tg-navy-dark); }
.tgd-act-danger:hover { color: var(--tg-danger); border-color: #e9b7ad; background: #fff; }
.tgd-empty { padding: 40px 16px; text-align: center; color: var(--tg-mute); }
.tgd-empty i { display: block; margin-bottom: 10px; font-size: 40px; color: #ddd0b0; }

.tgd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tgd-table th { padding: 8px 6px; text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--tg-mute); border-bottom: 2px solid var(--tg-line); }
.tgd-table td { padding: 8px 6px; vertical-align: middle; border-bottom: 1px solid var(--tg-line); }
.tgd-num { text-align: right; font-family: "IBM Plex Mono", ui-monospace, monospace; white-space: nowrap; }
.tgd-table-wrap { overflow-x: auto; }
.tgd-qtype { display: inline-block; padding: 2px 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--tg-navy); background: #e9f0f8; border-radius: 999px; }
.tgd-qname { font-weight: 700; }
.tgd-qsub { font-size: 12.5px; color: var(--tg-mute); }
.tgd-missing { color: var(--tg-danger); font-weight: 700; }
.tgd-pct { display: inline-block; width: 90px; height: 6px; margin-right: 8px; vertical-align: middle; background: #efe8d6; border-radius: 3px; overflow: hidden; }
.tgd-pct i { display: block; height: 100%; background: var(--tg-ok); }

.tgd-bank-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.tgd-inline { display: flex; gap: 6px; }
.tgd-inline .form-control { flex: 1 1 auto; min-width: 0; }
.tgd-bank-list { max-height: 480px; overflow: auto; border: 1px solid var(--tg-line); }
.tgd-bank-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: start; margin: 0; padding: 10px 12px; font-weight: 400; cursor: pointer; border-bottom: 1px solid var(--tg-line); }
.tgd-bank-item:hover { background: #fbf7ee; }
.tgd-bank-item input { margin-top: 4px; }
.tgd-bank-item.tgd-added { cursor: default; opacity: .55; }

.tgd-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.tgd-stat { flex: 1 1 150px; padding: 12px 14px; background: #fff; border: 1px solid var(--tg-line); }
.tgd-stat b { display: block; font: 800 24px/1.1 "Nunito Sans", sans-serif; color: var(--tg-navy); }
.tgd-stat span { font-size: 12.5px; color: var(--tg-mute); }
.tgd-result { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
.tgd-result .tg-board { max-width: 360px; margin: 0; }
.tgd-result .tg-cell { cursor: default; }
.tgd-status { display: inline-block; padding: 2px 9px; font-size: 12px; font-weight: 700; border-radius: 999px; background: #efe8d6; }
.tgd-status-1 { background: #e8f5ec; color: var(--tg-ok); }
.tgd-status-0 { background: #e9f0f8; color: var(--tg-navy); }

@media (max-width: 760px) {
    .tgd-row { grid-template-columns: minmax(0, 1fr); }
    .tgd-result { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   Викторина в свободном режиме (ученик и учитель)
   ============================================================================= */
.qf { max-width: 820px; margin: 0 auto; padding: 16px 16px 48px; }
.qf-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 10px; }
.qf-title { flex: 1 1 240px; min-width: 0; font: 800 22px/1.2 "Nunito Sans", system-ui, sans-serif; }
.qf-score { padding: 6px 12px; font: 600 15px/1.2 "IBM Plex Mono", ui-monospace, monospace; color: var(--tg-navy); background: #fff; border: 1px solid var(--tg-line); border-radius: 8px; }
.qf-count { margin-bottom: 6px; font-size: 13.5px; font-weight: 700; color: var(--tg-mute); }
.qf-progress { height: 8px; margin-bottom: 16px; overflow: hidden; background: #efe8d6; border-radius: 4px; }
.qf-progress i { display: block; height: 100%; width: 0; background: var(--tg-navy); transition: width .4s; }
.qf-card { background: #fff; border: 1px solid var(--tg-line); border-radius: 10px; }
.qf-body { padding: 20px; }
.qf-body img { max-width: 100%; height: auto; }
.qf-feedback { padding: 0 20px 8px; }
.qf-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--tg-line); }
.qf-foot-right { display: flex; gap: 10px; }
.qf-done { padding: 32px 18px; text-align: center; background: #fff; border: 1px solid var(--tg-line); border-radius: 10px; }
.qf-done h2 { font: 800 24px/1.25 "Nunito Sans", sans-serif; margin: 6px 0; }
.tg-o-opts { display: flex; flex-direction: column; gap: 8px; }
.tg-o-opt {
    padding: 12px 14px; text-align: left; font: 600 15px/1.35 "Nunito Sans", system-ui, sans-serif; color: #1a1612;
    background: #fff; border: 2px solid #e6dcc2; border-radius: 8px; cursor: pointer;
}
.tg-o-opt:hover { border-color: #3f8eff; }
.tg-o-opt.sel { border-color: #2f5578; background: #eef4fb; }
.qf-host-pin { font: 700 34px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--tg-navy); letter-spacing: .05em; }
.qf-idle { color: var(--tg-mute); font-size: 12.5px; }

/* =============================================================================
   Захват территории 2: шестиугольники, вырезанные клетки, замки и осада, щиты,
   огонь и потоп, монеты и магазин, хроника, заморозка, окно «что под клеткой».
   Значки и иллюстрации — js/tgame-fx.js (тёмный «чернильный» контур #2c2420).
   ============================================================================= */
.tg { --tg-ink2: #2c2420; --tg-gold: #f2b632; --tg-gold-soft: #fff3c4; --tg-ember: #ff6a1a; --tg-sea: #2f7fd8; }
.tg-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; vertical-align: -.25em; flex: 0 0 auto; }
.tg-ico svg { width: 100%; height: 100%; display: block; }
.tg-ico-wide { width: 1.9em; }

/* ---------- поле: квадраты на своих местах (пустоты остаются пустыми) ---------- */
.tg-board.tg-sq { grid-auto-rows: minmax(0, 1fr); }
.tg-board.tg-sq .tg-cell { aspect-ratio: auto; height: 100%; }
.tg-board-box { position: relative; }
.tg-fx-layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 5; overflow: visible; }

/* ---------- шестиугольники (pointy-top, нечётные ряды сдвинуты вправо) ---------- */
.tg-board.tg-hex { display: block; position: relative; gap: 0; }
.tg-hex .tg-cell {
    position: absolute; aspect-ratio: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none;
    background: var(--tg-hex-frame); --tg-hex-frame: #d8ccae;
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    transform: scale(.96); transition: transform .12s, background-color .25s, filter .2s;
}
.tg-hex .tg-cell::before {
    content: ""; position: absolute; left: 2px; top: 2px; right: 2px; bottom: 2px;
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--tg-free); transition: background-color .25s;
}
.tg-hex .tg-cell.tg-owned::before { background: var(--tg-owner); }
.tg-hex .tg-cell > span { z-index: 1; }
.tg-hex .tg-cell.tg-mine { --tg-hex-frame: #fff; box-shadow: none; }
.tg-hex .tg-cell.tg-mine::before { left: 3.5px; top: 3.5px; right: 3.5px; bottom: 3.5px; }
.tg-hex .tg-cell.tg-target:not(:disabled) { outline: none; --tg-hex-frame: var(--tg-navy); }
.tg-hex .tg-cell.tg-owned.tg-target:not(:disabled) { --tg-hex-frame: var(--tg-ink2); }
.tg-hex .tg-cell.tg-target:not(:disabled):hover { transform: scale(1.02); box-shadow: none; z-index: 2; }
.tg-hex .tg-cell.tg-duel { animation: tg-hexpulse 1s ease-in-out infinite; }
.tg-hex .tg-cell-lbl { top: 17%; left: 0; right: 0; text-align: center; }
.tg-hex .tg-cell-cd { left: 0; right: 0; bottom: 13%; text-align: center; }
.tg-hex .tg-cell-mark { right: 18%; top: auto; bottom: 23%; margin-top: 0; }
.tg-hex .tg-cell-fort { left: 50%; bottom: 7%; transform: translateX(-50%); }
.tg-hex .tg-cell-pips { top: 27%; left: 0; right: 0; justify-content: center; }
.tg-hex .tg-cell.tg-fort { --tg-hex-frame: #8b7355; }
.tg-hex .tg-cell.tg-sieged { --tg-hex-frame: var(--tg-siege); animation: tg-hexsiege 1.1s ease-in-out infinite; }
.tg-hex .tg-cell.tg-burning::before { background: radial-gradient(circle at 50% 80%, #6b3a1f, #2e211b 70%); }
.tg-hex .tg-cell.tg-flooded::before { background: linear-gradient(180deg, #9ad5ff, #2f7fd8); }
.tg-hex .tg-cell.tg-buy-target { --tg-hex-frame: var(--tg-gold); outline: none; }

/* Светлые цвета владельца (жёлтые, бирюзовые): тёмный текст и тёмные обводки целей. */
.tg-cell.tg-owned.tg-on-light { color: #1a1612; text-shadow: none; }
.tg-cell.tg-on-light .tg-cell-lbl { opacity: 1; }
.tg-cell.tg-on-light.tg-target:not(:disabled), .tg-cell.tg-on-light.tg-buy-target:not(:disabled) { outline-color: #2c2420; }
.tg-hex .tg-cell.tg-on-light.tg-target:not(:disabled), .tg-hex .tg-cell.tg-on-light.tg-buy-target { --tg-hex-frame: #2c2420; }

/* Фокус с клавиатуры виден на любой клетке, в том числе на целях и шестиугольниках. */
.tg-cell:focus-visible { outline: 3px solid #ffd34d !important; outline-offset: -4px; z-index: 4; }
.tg-hex .tg-cell:focus-visible { outline: none !important; --tg-hex-frame: #ffd34d; transform: scale(1.03); z-index: 4; }
@keyframes tg-hexpulse { 0%, 100% { background-color: var(--tg-hex-frame); } 50% { background-color: #e0503a; } }
@keyframes tg-hexsiege { 0%, 100% { background-color: var(--tg-siege); } 50% { background-color: #ffd9cf; } }

/* ---------- элементы клетки ---------- */
.tg-cell-ico .tgfx-castle { width: 2.35em; height: 2.35em; display: inline-block; vertical-align: middle; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25)); }
.tg-cell-ico .tgfx-castle.tgfx-capital { width: 2.7em; height: 2.7em; }
.tg-cell.tg-castle .tg-cell-ico { text-shadow: none; }
.tg-cell-mark { position: absolute; right: 4px; top: 50%; margin-top: -.65em; width: 1.3em; height: 1.3em; z-index: 2; pointer-events: none; }
.tg-board.tg-sq .tg-cell, .tg-board.tg-hex .tg-cell { font-size: var(--tg-cell-fs, clamp(9px, calc(46vw / var(--tg-cols)), 15px)); }
.tg-cell-mark > span { display: block; width: 100%; height: 100%; }
.tg-cell-mark svg { width: 100%; height: 100%; display: block; }
.tg-mark-rev { opacity: .32; filter: grayscale(.6); transition: opacity .6s, filter .6s; }
.tg-mark-rev.tg-mark-fresh { opacity: 1; filter: none; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 2px var(--tg-gold); animation: tg-known 1.8s ease-in-out infinite; }
.tg-mark-known { border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--tg-navy); animation: tg-known 1.8s ease-in-out infinite; }
.tg-mark-known svg { transform: scale(.82); }
.tg-mark-shield svg { filter: drop-shadow(0 0 3px rgba(120, 180, 255, .9)); }
.tg-cell-fort { display: none; position: absolute; left: 4px; bottom: 3px; width: 1.7em; height: .85em; pointer-events: none; }
.tg-cell-fort svg { width: 100%; height: 100%; display: block; }
.tg-cell.tg-fort .tg-cell-fort { display: block; }
.tg-board:not(.tg-hex) .tg-cell.tg-fort { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), inset 0 0 0 4px rgba(44, 36, 32, .22); }
.tg-board:not(.tg-hex) .tg-cell.tg-fort.tg-mine { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85), inset 0 0 0 5px rgba(44, 36, 32, .25); }
.tg-cell-pips { position: absolute; top: 4px; right: 5px; display: flex; gap: 2px; z-index: 2; pointer-events: none; }
.tg-pip { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1.5px var(--tg-ink2); }
.tg-pip-on { background: #e0503a; }
.tg-board.tg-sq .tg-cell.tg-sieged, .tg-board:not(.tg-hex) .tg-cell.tg-sieged {
    box-shadow: inset 0 0 0 3px var(--tg-siege), 0 0 0 2px rgba(224, 80, 58, .35);
    animation: tg-siege-sq 1.1s ease-in-out infinite;
}
@keyframes tg-siege-sq { 50% { box-shadow: inset 0 0 0 3px var(--tg-siege), 0 0 0 5px rgba(224, 80, 58, .15); } }

/* щит: купол поверх клетки */
.tg-cell.tg-shielded::after {
    content: ""; position: absolute; left: 13%; top: 13%; right: 13%; bottom: 13%; border-radius: 50%; z-index: 1; pointer-events: none;
    background: radial-gradient(circle at 42% 28%, rgba(255, 255, 255, .75), rgba(255, 255, 255, .14) 34%, rgba(255, 255, 255, 0) 62%);
    box-shadow: 0 0 0 2px rgba(160, 205, 255, .95), 0 0 12px rgba(90, 160, 255, .75), inset 0 0 10px rgba(130, 185, 255, .7);
    animation: tg-dome 2.4s ease-in-out infinite;
}
.tg-hex .tg-cell.tg-shielded::after { left: 16%; right: 16%; top: 21%; bottom: 21%; }
@keyframes tg-dome { 0%, 100% { opacity: .85; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.02); } }

/* огонь и потоп */
.tg-cell.tg-burning { background: radial-gradient(circle at 50% 80%, #6b3a1f, #2e211b 70%); border-color: #2e211b; color: #ffd9a8; }
.tg-cell.tg-flooded { background: linear-gradient(180deg, #9ad5ff, #2f7fd8); border-color: #2a6ad6; color: #fff; }
.tg-cell.tg-burning .tg-cell-lbl, .tg-cell.tg-flooded .tg-cell-lbl { opacity: .85; }
.tg-flames { position: absolute; left: 10%; right: 10%; bottom: 8%; height: 72%; display: block; }
.tg-flames .tgfx-ico { position: absolute; bottom: 0; transform-origin: 50% 100%; animation: tg-flick .8s ease-in-out infinite; }
.tg-flames .tg-fl1 { left: 0; width: 44%; height: 70%; animation-delay: -.2s; }
.tg-flames .tg-fl2 { left: 24%; width: 52%; height: 100%; }
.tg-flames .tg-fl3 { right: 0; width: 40%; height: 62%; animation-delay: -.45s; }
@keyframes tg-flick { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.92, 1.08) skewX(3deg); } 60% { transform: scale(1.06, .94) skewX(-2deg); } }
.tg-cell-ico .tg-flames { top: auto; transform: none; }
.tg-waves {
    position: absolute; left: -40%; right: -40%; top: 34%; height: 34%;
    background: radial-gradient(circle at 10px -3px, transparent 8px, rgba(255, 255, 255, .7) 9px, transparent 11px) 0 0 / 20px 12px repeat-x,
                radial-gradient(circle at 10px -3px, transparent 8px, rgba(255, 255, 255, .45) 9px, transparent 11px) 10px 12px / 20px 12px repeat-x;
    animation: tg-waves 1.6s linear infinite;
}
.tg-cell-ico .tg-drop { position: relative; width: 1.35em; height: 1.35em; display: inline-block; animation: tg-bob 1.6s ease-in-out infinite; }
@keyframes tg-waves { from { transform: translateX(0); } to { transform: translateX(20px); } }
@keyframes tg-bob { 50% { transform: translateY(-3px); } }
@keyframes tg-known { 0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--tg-navy); } 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(47, 85, 120, .45); } }

/* защита своей клетки, выбор клетки для покупки, подсветка из хроники */
.tg-cell.tg-defend:not(:disabled) { outline-color: #e0503a; outline-style: solid; }
.tg-hex .tg-cell.tg-defend:not(:disabled) { --tg-hex-frame: #e0503a; }
.tg-targeting .tg-cell.tg-buy-off { opacity: .38; filter: grayscale(.5); }
.tg-cell.tg-buy-target:not(:disabled) { outline: 3px solid var(--tg-gold); outline-offset: -4px; cursor: copy; animation: tg-buy 1.2s ease-in-out infinite; }
@keyframes tg-buy { 50% { outline-color: #ffe08a; } }
.tg-cell.tg-hilite { transform: translateY(-2px) scale(1.05); z-index: 3; }

/* ---------- кошелёк ---------- */
.tg-wallet {
    position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 7px;
    background: #fff; border: 1px solid var(--tg-line); border-radius: 999px;
    font: 600 20px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--tg-ink);
}
.tg-wallet .tg-ico { width: 24px; height: 24px; }
.tg-wallet.tg-bump { animation: tg-bump .45s cubic-bezier(.2, 1.6, .4, 1); }
.tg-wallet-delta {
    position: absolute; right: 6px; top: -4px; font: 800 15px/1 "Nunito Sans", system-ui, sans-serif; color: #1e7a46;
    animation: tg-float 1.4s ease-out forwards; pointer-events: none;
}
.tg-wallet-delta.tg-minus { color: var(--tg-danger); }
@keyframes tg-bump { 40% { transform: scale(1.14); } }
@keyframes tg-float { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }

/* ---------- магазин ---------- */
.tg-shop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.tg-shop-label { font-weight: 800; font-size: 13.5px; color: var(--tg-mute); margin-right: 2px; }
.tg-shop-items { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-shop-item {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; cursor: pointer;
    font: 700 14px/1.2 "Nunito Sans", system-ui, sans-serif; color: var(--tg-ink);
    background: #fff; border: 1.5px solid var(--tg-line); border-radius: 10px; transition: border-color .15s, background .15s, transform .1s;
}
.tg-shop-item .tg-ico { width: 26px; height: 26px; }
.tg-shop-item:hover:not(:disabled) { border-color: var(--tg-navy); }
.tg-shop-item:active:not(:disabled) { transform: translateY(1px); }
.tg-shop-item:disabled { opacity: .45; cursor: default; }
.tg-shop-item.tg-shop-on { background: var(--tg-gold-soft); border-color: var(--tg-ink2); box-shadow: 0 0 0 2px var(--tg-gold); }
.tg-shop-cost { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 3px; border-radius: 999px; background: var(--tg-cream); font: 600 13px/1 "IBM Plex Mono", ui-monospace, monospace; }
.tg-shop-cost .tg-ico { width: 16px; height: 16px; }
.tg-shop-target {
    flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 8px 12px; background: var(--tg-gold-soft); border-left: 4px solid var(--tg-gold); font-weight: 600; font-size: 14px;
}
.tg-btn-sm { padding: 6px 12px; font-size: 13.5px; }

/* ---------- рейтинг ---------- */
.tg-rank-coins { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; color: #9a6a00; }
.tg-rank-coins .tg-ico { width: 14px; height: 14px; }
.tg-rank-castles { display: inline-flex; align-items: center; margin-left: 5px; vertical-align: -2px; }
.tg-rank-castles svg { width: 15px; height: 15px; }
.tg-rank-castles b { font-size: 11px; margin-left: 1px; }
.tg-rank-frozen { display: inline-flex; margin-left: 4px; vertical-align: -2px; }
.tg-rank-frozen svg { width: 14px; height: 14px; }

/* ---------- хроника ---------- */
.tg-feed { margin-bottom: 6px; }
.tg-feed h3 { font: 800 13px/1 "Nunito Sans", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--tg-mute); margin: 4px 0 6px; }
.tg-feed-list { list-style: none; margin: 0; padding: 0; }
.tg-feed-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 2px; border-bottom: 1px solid var(--tg-line); font-size: 13px; line-height: 1.3; }
.tg-feed-row.tg-feed-new { animation: tg-in .3s ease-out; }
.tg-feed-ico { width: 22px; height: 22px; display: inline-flex; }
.tg-feed-ico svg { width: 100%; height: 100%; }
.tg-feed-text { min-width: 0; overflow-wrap: anywhere; }
.tg-feed-trap .tg-feed-text { color: #7a2f22; }
.tg-feed-ago { font: 500 11.5px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--tg-mute); white-space: nowrap; }

/* ---------- окно вопроса: удары осады ---------- */
.tg-m-pips { display: flex; gap: 6px; margin-top: 8px; }
.tg-m-pips .tg-pip { width: 14px; height: 14px; background: #fff; box-shadow: 0 0 0 2px #2c2420; }
.tg-m-pips .tg-pip-on { background: #f2b632; }
.tg-m-pips.tg-m-pips-def .tg-pip-on { background: #e0503a; }

/* ---------- заморозка ---------- */
.tg-frost {
    position: absolute; left: -6px; top: -6px; right: -6px; bottom: -6px; z-index: 6; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .55), rgba(170, 225, 255, .55) 60%, rgba(120, 200, 255, .6));
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85), inset 0 0 50px rgba(110, 195, 255, .9);
    -webkit-backdrop-filter: blur(2px) saturate(.6); backdrop-filter: blur(2px) saturate(.6);
    animation: tgfx-fade .3s ease-out;
}
.tg-frost-card { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 2px var(--tg-ink2), 0 10px 26px rgba(30, 90, 140, .25); font-size: 16px; }
.tg-frost-ico { width: 36px; height: 36px; animation: tgfx-spin 7s linear infinite; }
.tg-frost-left { font: 600 15px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--tg-navy); }
.tg-lobby-notes { margin-top: 10px; }

/* =============================================================================
   Окно «что оказалось под клеткой»
   ============================================================================= */
.tgfx-pop {
    position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10070; display: flex; align-items: center; justify-content: center;
    padding: 56px 16px 16px; background: rgba(26, 22, 18, .55); cursor: pointer; animation: tgfx-fade .2s ease-out;
    font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.tgfx-pop.tgfx-out { animation: tgfx-fadeout .22s ease-in forwards; }
.tgfx-card {
    position: relative; width: 100%; max-width: 380px; padding: 6px 22px 20px; text-align: center; color: #1a1612;
    background: #fffaf0; border-radius: 20px; box-shadow: 0 0 0 3px #2c2420, 0 22px 60px rgba(0, 0, 0, .35);
    animation: tgfx-card .5s cubic-bezier(.2, 1.45, .4, 1);
}
.tgfx-art { width: 240px; max-width: 86%; margin: -62px auto 2px; }
.tgfx-art svg { width: 100%; height: auto; display: block; overflow: visible; }
.tgfx-kicker { font-weight: 800; font-size: 14px; color: #1e7a46; }
.tgfx-trap .tgfx-kicker { color: #a23b2b; }
.tgfx-title { font-weight: 900; font-size: 32px; line-height: 1.05; letter-spacing: -.015em; margin: 2px 0 8px; }
.tgfx-text { font-size: 15.5px; line-height: 1.4; color: #4a423a; }
.tgfx-amount {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 16px 6px 8px; border-radius: 999px;
    background: var(--tg-gold-soft, #fff3c4); box-shadow: 0 0 0 2px #2c2420; font: 700 24px/1 "IBM Plex Mono", ui-monospace, monospace;
    animation: tgfx-amount .6s .55s cubic-bezier(.2, 1.6, .4, 1) both;
}
.tgfx-amount .tgfx-ico { width: 28px; height: 28px; }
.tgfx-amount.tgfx-minus { background: #fde2dd; }
.tgfx-card .tgfx-ok { display: flex; margin: 16px auto 0; min-width: 150px; background: #2f5578; color: #fff; }
.tgfx-card .tgfx-ok:hover { background: #24425e; color: #fff; }
.tgfx-card .tgfx-ok:focus-visible { outline: 3px solid #f2b632; outline-offset: 2px; }
.tgfx-pop-fire .tgfx-card { background: linear-gradient(180deg, #ffe9d6, #fffaf0 56%); }
.tgfx-pop-flood .tgfx-card { background: linear-gradient(180deg, #dcefff, #fffaf0 56%); }
.tgfx-pop-ice .tgfx-card { background: linear-gradient(180deg, #e3f7ff, #fffaf0 56%); }
.tgfx-pop-bomb .tgfx-card { background: linear-gradient(180deg, #ffe4d9, #fffaf0 56%); }
.tgfx-pop-chest .tgfx-card { background: linear-gradient(180deg, #fff2c7, #fffaf0 56%); }
.tgfx-pop-shield .tgfx-card { background: linear-gradient(180deg, #e0ecff, #fffaf0 56%); }
.tgfx-pop-scout .tgfx-card { background: linear-gradient(180deg, #e2f5e9, #fffaf0 56%); }
.tgfx-pop-lightning { animation: tgfx-fade .2s ease-out, tgfx-flicker .5s .15s 2; }
.tgfx-pop-lightning .tgfx-card { background: linear-gradient(180deg, #fff6c9, #fffaf0 56%); }
.tgfx-pop-ice .tgfx-card { animation: tgfx-card .5s cubic-bezier(.2, 1.45, .4, 1), tgfx-shiver .42s .75s 2; }

@keyframes tgfx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tgfx-fadeout { to { opacity: 0; } }
@keyframes tgfx-card { 0% { transform: translateY(30px) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tgfx-amount { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tgfx-flicker { 0%, 100% { background: rgba(26, 22, 18, .55); } 20% { background: rgba(255, 252, 230, .85); } 40% { background: rgba(26, 22, 18, .6); } 60% { background: rgba(255, 252, 230, .6); } }
@keyframes tgfx-shiver { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes tgfx-spin { to { transform: rotate(360deg); } }

/* огонь */
.tgfx-ill .tgfx-grow { transform-origin: 100px 140px; animation: tgfx-grow .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.tgfx-ill .tgfx-flame { transform-origin: 100px 140px; animation: tgfx-flick .9s ease-in-out infinite; }
.tgfx-ill .tgfx-f2 { animation-duration: .7s; animation-delay: -.2s; }
.tgfx-ill .tgfx-f3 { animation-duration: .55s; animation-delay: -.35s; }
.tgfx-ill .tgfx-glow { transform-origin: 100px 122px; animation: tgfx-glow 1.2s ease-in-out infinite; }
.tgfx-ill .tgfx-ember { animation: tgfx-ember 1.9s ease-out infinite both; }
@keyframes tgfx-grow { 0% { transform: translateY(26px) scale(.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tgfx-flick { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(.95, 1.05) skewX(2deg); } 50% { transform: scale(1.04, .96); } 75% { transform: scale(.97, 1.04) skewX(-2deg); } }
@keyframes tgfx-glow { 50% { transform: scale(1.08); opacity: .8; } }
@keyframes tgfx-ember { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--x, 0), -92px); opacity: 0; } }

/* потоп */
.tgfx-ill .tgfx-water { animation: tgfx-rise 1.7s cubic-bezier(.3, .9, .4, 1) both; }
.tgfx-ill .tgfx-w1 { animation: tgfx-wave 1.6s linear infinite; }
.tgfx-ill .tgfx-w2 { animation: tgfx-wave 2.4s linear infinite reverse; }
.tgfx-ill .tgfx-sinkflag { transform-origin: 100px 98px; animation: tgfx-sink 2.2s .3s ease-in both; }
.tgfx-ill .tgfx-bubble { animation: tgfx-bubble 2.1s ease-in infinite both; }
@keyframes tgfx-rise { 0% { transform: translateY(96px); } 100% { transform: translateY(0); } }
@keyframes tgfx-wave { from { transform: translateX(0); } to { transform: translateX(-40px); } }
@keyframes tgfx-sink { 0% { transform: none; } 100% { transform: translateY(34px) rotate(-14deg); } }
@keyframes tgfx-bubble { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-80px); opacity: 0; } }

/* лёд */
.tgfx-ill .tgfx-flake { transform-origin: 100px 80px; animation: tgfx-flake .8s cubic-bezier(.2, 1.3, .4, 1) both; }
.tgfx-ill .tgfx-crystal { animation: tgfx-crystal .45s ease-out both; }
@keyframes tgfx-flake { 0% { transform: scale(0) rotate(-120deg); } 100% { transform: none; } }
@keyframes tgfx-crystal { 0% { transform: scale(0); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* бомба */
.tgfx-ill .tgfx-bomb { transform-origin: 94px 96px; animation: tgfx-bombgo 1.25s ease-in both; }
.tgfx-ill .tgfx-fuse { transform-box: fill-box; transform-origin: center; animation: tgfx-fuse .22s ease-in-out infinite alternate; }
.tgfx-ill .tgfx-boom { transform-origin: 100px 88px; animation: tgfx-boom .5s 1.15s cubic-bezier(.2, 1.6, .4, 1) both; }
.tgfx-ill .tgfx-shock { transform-origin: 100px 88px; animation: tgfx-shock .8s 1.15s ease-out both; }
@keyframes tgfx-bombgo {
    0% { transform: none; opacity: 1; } 15% { transform: rotate(-5deg); } 30% { transform: rotate(5deg); } 45% { transform: rotate(-6deg) scale(1.03); }
    60% { transform: rotate(6deg) scale(1.06); } 85% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; }
}
@keyframes tgfx-fuse { from { transform: scale(.6); } to { transform: scale(1.25); } }
@keyframes tgfx-boom { 0% { transform: scale(.15); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tgfx-shock { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.3); opacity: 0; } }

/* сундук */
.tgfx-ill .tgfx-lid { transform-origin: 48px 92px; animation: tgfx-lid .55s .25s cubic-bezier(.2, 1.5, .4, 1) both; }
.tgfx-ill .tgfx-coinfly { animation: tgfx-coin .75s cubic-bezier(.2, 1.1, .4, 1) both; }
.tgfx-ill .tgfx-shine { transform-origin: 100px 86px; animation: tgfx-shine 1.6s .4s ease-in-out infinite both; }
.tgfx-ill .tgfx-spark { transform-box: fill-box; transform-origin: center; animation: tgfx-spark 1.3s ease-in-out infinite both; }
@keyframes tgfx-lid { 0% { transform: none; } 100% { transform: translateY(-16px) rotate(-16deg); } }
@keyframes tgfx-coin { 0% { transform: translate(0, 12px) scale(.4); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--x, 0), var(--y, -70px)) scale(1); opacity: 1; } }
@keyframes tgfx-shine { 0%, 100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes tgfx-spark { 0%, 100% { transform: scale(0); opacity: 0; } 50% { transform: scale(1); opacity: 1; } }

/* щит */
.tgfx-ill .tgfx-pop-in { transform-origin: 100px 80px; animation: tgfx-grow .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.tgfx-ill .tgfx-check { stroke-dasharray: 64; stroke-dashoffset: 64; animation: tgfx-draw .4s .5s ease-out forwards; }
.tgfx-ill .tgfx-dome { transform-origin: 100px 82px; animation: tgfx-dome 1.8s ease-out infinite; }
.tgfx-ill .tgfx-dome2 { animation-delay: .9s; }
@keyframes tgfx-draw { to { stroke-dashoffset: 0; } }
@keyframes tgfx-dome { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.32); opacity: 0; } }

/* подзорная труба */
.tgfx-ill .tgfx-scope { transform-origin: 96px 86px; animation: tgfx-grow .5s cubic-bezier(.2, 1.4, .4, 1) both, tgfx-sweep 2.6s .5s ease-in-out infinite; }
.tgfx-ill .tgfx-glint { animation: tgfx-glint 1.4s .6s ease-in-out infinite; }
.tgfx-ill .tgfx-radar { transform-origin: 100px 80px; animation: tgfx-radar 2s ease-out infinite; }
.tgfx-ill .tgfx-radar2 { animation-delay: 1s; }
.tgfx-ill .tgfx-found { transform-origin: 154px 38px; animation: tgfx-boom .45s .9s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes tgfx-sweep { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes tgfx-glint { 0%, 100% { opacity: 0; } 50% { opacity: .95; } }
@keyframes tgfx-radar { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.7); opacity: 0; } }

/* молния */
.tgfx-ill .tgfx-bolt { animation: tgfx-bolt .8s ease-out both; }
.tgfx-ill .tgfx-cloud { transform-origin: 96px 46px; animation: tgfx-cloud .5s ease-out both; }
.tgfx-ill .tgfx-zap { animation: tgfx-glint .5s .5s ease-in-out 3 both; }
@keyframes tgfx-bolt { 0% { opacity: 0; } 12% { opacity: 1; } 22% { opacity: .15; } 34% { opacity: 1; } 46% { opacity: .4; } 58%, 100% { opacity: 1; } }
@keyframes tgfx-cloud { 0% { transform: translateY(-18px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- короткие эффекты на клетках ---------- */
.tgfx-burst { position: absolute; pointer-events: none; z-index: 5; }
.tgfx-ring { position: absolute; left: 18%; top: 18%; right: 18%; bottom: 18%; border-radius: 50%; border: 3px solid var(--fx); animation: tgfx-bring .9s ease-out forwards; }
.tgfx-bicon { position: absolute; left: 29%; top: 29%; width: 42%; height: 42%; animation: tgfx-bicon 1.6s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.tgfx-bicon svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 0 rgba(44, 36, 32, .25)); }
.tgfx-p { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--fx); box-shadow: 0 0 0 1px rgba(44, 36, 32, .35); animation: tgfx-p .95s ease-out forwards; }
.tgfx-b-fire .tgfx-p { border-radius: 50% 50% 50% 0; background: #ffb347; }
.tgfx-b-flood .tgfx-p { border-radius: 50% 0 50% 50%; background: #8fd0ff; }
.tgfx-b-ice .tgfx-p { border-radius: 2px; transform: rotate(45deg); background: #dff6ff; }
.tgfx-b-chest .tgfx-p { background: #ffd45e; width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.tgfx-b-lightning .tgfx-p { background: #fff3a0; }
.tgfx-b-siege .tgfx-bicon, .tgfx-b-conquer .tgfx-bicon { animation-name: tgfx-clash; }
.tgfx-b-castle .tgfx-bicon { left: 22%; top: 22%; width: 56%; height: 56%; animation-name: tgfx-raise; }
.tgfx-strike {
    position: absolute; left: 40%; top: -110%; width: 22%; height: 165%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff7b0 40%, #ffd12b);
    clip-path: polygon(55% 0, 30% 48%, 52% 48%, 20% 100%, 80% 40%, 56% 40%, 78% 0);
    animation: tgfx-strike .55s ease-out forwards;
}
@keyframes tgfx-bring { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes tgfx-bicon { 0% { transform: scale(.2); opacity: 0; } 22% { transform: scale(1.35); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: translateY(-34%) scale(.9); opacity: 0; } }
@keyframes tgfx-p { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.3); opacity: 0; } }
@keyframes tgfx-clash { 0% { transform: scale(.2) rotate(-40deg); opacity: 0; } 25% { transform: scale(1.3) rotate(10deg); opacity: 1; } 40% { transform: rotate(-8deg); } 55% { transform: rotate(6deg); } 80% { transform: none; opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }
@keyframes tgfx-raise { 0% { transform: translateY(40%) scale(.5); opacity: 0; } 30% { transform: translateY(-8%) scale(1.1); opacity: 1; } 80% { transform: none; opacity: 1; } 100% { transform: translateY(-20%); opacity: 0; } }
@keyframes tgfx-strike { 0% { opacity: 0; transform: translateY(-20%); } 20% { opacity: 1; transform: none; } 50% { opacity: .3; } 65% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .tgfx-pop, .tgfx-pop *, .tgfx-burst *, .tg-flames *, .tg-waves, .tg-cell-ico .tg-drop, .tg-mark-known,
    .tg-cell.tg-shielded::after, .tg-hex .tg-cell, .tg-cell.tg-sieged, .tg-cell.tg-buy-target, .tg-wallet, .tg-wallet-delta, .tg-frost-ico,
    .tg-feed-row.tg-feed-new, .tg-mark-rev.tg-mark-fresh {
        animation: none !important; transition: none !important;
    }
    .tgfx-ill .tgfx-bomb { opacity: 0; }
    .tgfx-ill .tgfx-check { stroke-dashoffset: 0; }
    .tgfx-ill .tgfx-lid { transform: translateY(-16px) rotate(-16deg); }
    .tgfx-ill .tgfx-coinfly { transform: translate(var(--x, 0), var(--y, -70px)); }
    .tgfx-ill .tgfx-ember, .tgfx-ill .tgfx-bubble, .tgfx-ill .tgfx-spark, .tgfx-ill .tgfx-dome2, .tgfx-ill .tgfx-radar2 { opacity: 0; }
    .tgfx-burst { display: none; }
}

@media (max-width: 520px) {
    .tg-shop { gap: 6px; margin-bottom: 10px; }
    .tg-shop-label { display: none; }
    .tg-shop-items { gap: 6px; }
    .tg-shop-item { gap: 5px; padding: 4px 7px 4px 5px; font-size: 12.5px; }
    .tg-shop-item .tg-ico { width: 20px; height: 20px; }
    .tg-shop-cost { padding: 1px 5px 1px 2px; font-size: 12px; }
    .tg-wallet { font-size: 17px; }
    .tg-dense .tg-cell-fort, .tg-dense .tg-cell-mark { width: 1em; height: 1em; }
    .tg-dense .tg-cell-fort { width: 1.3em; height: .65em; }
    .tgfx-title { font-size: 27px; }
}

/* =============================================================================
   Захват территории 2 — страницы учителя: конструктор (форма поля, монеты, сюрпризы,
   «Королевства»), редактор поля (.tgb-*), итоги (поле с замками и сюрпризами, хроника).
   Геометрия поля совпадает с игрой: квадраты — grid с явными координатами,
   шестиугольники — остроконечные, нечётные ряды сдвинуты вправо (odd-r).
   ============================================================================= */

/* ---------- конструктор: новые карточки и блоки ---------- */
.tgd-badge-new {
    display: inline-block; margin-left: 4px; padding: 1px 7px; vertical-align: 2px;
    font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #fff; background: #e0503a; border-radius: 999px;
}
.tgd-mech-new b i { color: #8a4fd0; }
.tgd-shapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 12px; margin-bottom: 14px; }
.tgd-shape { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.tgd-shape .tgd-shape-pic { grid-row: 1 / span 2; display: block; line-height: 0; }
.tgd-shape b, .tgd-shape .tgd-mech-hint { grid-column: 2; }
.tgd-note-kingdoms { display: none; font-weight: 700; color: #6a3f9e; }
.tgd-is-kingdoms .tgd-note-kingdoms { display: inline; }
.tgd-kinds { display: block; margin-top: 3px; }
.tgd-kinds i { width: 1.1em; text-align: center; }

.tgd-plan {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; padding: 12px 14px;
    background: #fffdf8; border: 1px dashed #ddd0b0; border-radius: 8px;
}
.tgd-plan-text { flex: 1 1 280px; min-width: 0; font-size: 13.5px; color: #4a423a; }
.tgd-plan-text b { display: block; margin-bottom: 2px; font-size: 14.5px; color: #1a1612; }
.tgd-plan .tgd-act { white-space: nowrap; }

/* ---------- цвета сюрпризов (конструктор, редактор, итоги) ---------- */
.tgd-k-fire, .tgb-k-fire { color: #e0503a; }
.tgd-k-flood, .tgb-k-flood { color: #2f7fd8; }
.tgd-k-ice, .tgb-k-ice { color: #2a9fcf; }
.tgd-k-bomb, .tgb-k-bomb { color: #3a3a3a; }
.tgd-k-chest, .tgb-k-chest { color: #c8890f; }
.tgd-k-shield, .tgb-k-shield { color: #2fa86a; }
.tgd-k-scout, .tgb-k-scout { color: #8a4fd0; }
.tgd-k-lightning, .tgb-k-lightning { color: #c99a06; }
.tgb-k-none { color: #8a7f72; }

/* =============================================================================
   Поле (редактор и итоги)
   ============================================================================= */
.tgb-board {
    --tgb-edge: #e6dcc2;
    --tgb-fill: #fffdf8;
    position: relative; width: 100%; margin: 0 auto; user-select: none; -webkit-user-select: none;
}
.tgb-sq { display: grid; gap: 4px; }
.tgb-hex { display: block; }

.tgb-cell {
    --tgb-fill-cell: var(--tgb-fill);
    position: relative; display: block; margin: 0; padding: 0; overflow: hidden;
    font: 700 11px/1 "Nunito Sans", system-ui, sans-serif; color: #4a423a; text-align: center;
    background: var(--tgb-fill-cell); border: 1px solid var(--tgb-edge); border-radius: 6px;
}
.tgb-sq .tgb-cell { aspect-ratio: 1 / 1; min-height: 34px; }
@supports not (aspect-ratio: 1 / 1) {
    .tgb-sq .tgb-cell { height: 0; padding-bottom: 100%; }
}
button.tgb-cell { cursor: pointer; transition: transform .1s, box-shadow .1s; touch-action: manipulation; }
button.tgb-cell:focus-visible { outline: 3px solid rgba(47, 85, 120, .45); outline-offset: 1px; z-index: 3; }
.tgb-sq button.tgb-cell:hover { box-shadow: 0 0 0 2px #3f8eff inset; }

/* шестиугольник: «рамка» — фон клетки, заливка — внутренний слой той же формы */
.tgb-hex .tgb-cell {
    position: absolute; border: 0; border-radius: 0; background: var(--tgb-edge);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.tgb-hex .tgb-cell::before {
    content: ""; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; background: var(--tgb-fill-cell);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.tgb-hex button.tgb-cell:hover { --tgb-edge: #3f8eff; }
.tgb-hex .tgb-cell > span { z-index: 1; }

.tgb-lbl { position: absolute; top: 4px; left: 0; right: 0; font-size: 9.5px; font-weight: 700; opacity: .6; }
.tgb-sq .tgb-lbl { left: 5px; right: auto; text-align: left; }
.tgb-hex .tgb-lbl { top: 18%; }
.tgb-q {
    position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
    padding: 2px 5px; border-radius: 5px; font: 800 11px/1.1 "IBM Plex Mono", ui-monospace, monospace;
    color: #fff; background: #2f5578; white-space: nowrap;
}
.tgb-has-k .tgb-q { top: 40%; }
.tgb-q-bad { background: #a23b2b; }
.tgb-k { position: absolute; left: 0; right: 0; bottom: 14%; font-size: 15px; line-height: 1; }
.tgb-sq .tgb-k { bottom: 5px; }
.tgb-cell:not(.tgb-has-q) .tgb-k { bottom: auto; top: 50%; transform: translateY(-40%); font-size: 18px; }
.tgb-void-mark { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-40%); font-size: 14px; color: #b5aa98; }

/* состояния клеток редактора */
.tgb-set { --tgb-fill-cell: #f3f7fb; }
.tgb-cell-fire { --tgb-fill-cell: #fdecea; }
.tgb-cell-flood { --tgb-fill-cell: #e9f2fd; }
.tgb-cell-ice { --tgb-fill-cell: #e8f6fb; }
.tgb-cell-bomb { --tgb-fill-cell: #eeebe6; }
.tgb-cell-chest { --tgb-fill-cell: #fdf3d6; }
.tgb-cell-shield { --tgb-fill-cell: #e8f5ec; }
.tgb-cell-scout { --tgb-fill-cell: #f1e9fa; }
.tgb-cell-lightning { --tgb-fill-cell: #fdf6d8; }
.tgb-sq .tgb-void { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(201, 191, 174, .25) 6px 12px); border-style: dashed; border-color: #c9bfae; }
.tgb-hex .tgb-void { --tgb-edge: #e9e2d0; --tgb-fill-cell: #f7f2e6; opacity: .65; }

/* ---------- итоги: занятые клетки, замки, отметки сюрпризов ---------- */
.tgb-static .tgb-cell { cursor: default; }
.tgb-owned { --tgb-fill-cell: var(--tgb-owner, #8a8a8a); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.tgb-sq .tgb-owned { border-color: rgba(0, 0, 0, .12); }
.tgb-hex .tgb-owned { --tgb-edge: rgba(0, 0, 0, .18); }
.tgb-burning { --tgb-fill-cell: #f6d5cc; }
.tgb-flooded { --tgb-fill-cell: #d6e6f8; }
.tgb-ico { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-38%); font-size: 1.45em; line-height: 1; }
.tgb-static .tgb-cell { font-size: clamp(9px, calc(40vw / var(--tgb-cols, 6)), 13px); }
.tgb-castle .tgb-ico { font-size: 1.7em; }
.tgb-mark {
    position: absolute; right: 3px; bottom: 3px; display: inline-flex; align-items: center; justify-content: center;
    width: 1.6em; height: 1.6em; font-size: .85em; border-radius: 50%; background: rgba(255, 255, 255, .92);
    text-shadow: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.tgb-hex .tgb-mark { right: 50%; bottom: 9%; transform: translateX(50%); }
.tgb-legend-line { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: #8a7f72; }
.tgb-legend-line > span { display: inline-flex; align-items: center; gap: 5px; }
.tgb-mark-inline { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid #e6dcc2; font-size: 10px; }
.tgb-mark-void { border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(201, 191, 174, .4) 3px 6px); border-radius: 3px; }
.tgd-result .tgb-board { max-width: 360px; margin: 0; }
/* итоги: узкие поля в колонке — квадраты не вытягиваются в высоту */
.tgb-static.tgb-sq { gap: 2px; }
.tgb-static.tgb-sq .tgb-cell { min-height: 0; }
/* браузеры без aspect-ratio: высоту сот задаёт padding-top (--tgb-pad считает сервер) */
@supports not (aspect-ratio: 1 / 1) {
    .tgb-hex.tgb-static { height: 0; padding-top: var(--tgb-pad, 90%); }
}
/* недоступные кнопки WebForms (LinkButton с Enabled = false) */
.tgd a.aspNetDisabled, .tgd .tg-btn.aspNetDisabled { opacity: .55; pointer-events: none; cursor: default; }

/* ---------- хроника ---------- */
.tgd-chronicle { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; border-top: 1px solid #e6dcc2; }
.tgd-chronicle li { display: grid; grid-template-columns: minmax(64px, max-content) 26px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid #e6dcc2; font-size: 14px; }
.tgd-ev-time { font: 500 12px/1 "IBM Plex Mono", ui-monospace, monospace; color: #8a7f72; }
.tgd-ev-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #fffdf8; border: 1px solid #e6dcc2; font-size: 12px; }
.tgd-ev-text { min-width: 0; overflow-wrap: anywhere; }
.tgd-ev-build { color: #2f5578; }
.tgd-ev-take { color: #a23b2b; }
.tgd-ev-siege { color: #9a6a00; }
.tgd-ev-hold { color: #1e7a46; }

/* =============================================================================
   Редактор поля
   ============================================================================= */
.tgb-page .tgd-head .tgd-acts { align-items: center; }
.tgb-intro { margin: 0 0 14px; padding: 10px 12px; background: #fffdf8; border: 1px solid #e6dcc2; border-radius: 8px; font-size: 13px; }
.tgb-app { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.tgb-main { min-width: 0; }
.tgb-board-wrap { overflow-x: auto; padding: 14px; background: #fff; border: 1px solid #e6dcc2; border-radius: 10px; }
.tgb-board-wrap .tgb-board { max-width: 760px; }
.tgb-status { min-height: 22px; margin: 8px 2px 4px; font-size: 13px; color: #4a423a; overflow-wrap: anywhere; }
.tgb-status-warn { color: #9a6a00; font-weight: 700; }
.tgb-status-ok { color: #1e7a46; font-weight: 700; }
.tgb-counters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.tgb-stat { flex: 1 1 150px; }
.tgb-stat b { font-size: 20px; }

.tgb-side { position: sticky; top: 90px; min-width: 0; max-height: calc(100vh - 100px); overflow-y: auto; padding: 14px; background: #fff; border: 1px solid #e6dcc2; border-radius: 10px; }
.tgb-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.tgb-tool {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px;
    font: 700 13.5px/1.2 "Nunito Sans", system-ui, sans-serif; color: #2f5578; background: #fff;
    border: 1px solid #e6dcc2; border-radius: 8px; cursor: pointer;
}
.tgb-tool:hover { border-color: #3f8eff; }
.tgb-tool-on { color: #fff; background: #2f5578; border-color: #2f5578; }
.tgb-panel { min-height: 120px; }
.tgb-help { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: #8a7f72; }
.tgb-help-warn { color: #9a6a00; font-weight: 600; }
.tgb-search { margin-bottom: 8px; }
.tgb-qlist { max-height: 360px; overflow-y: auto; border: 1px solid #e6dcc2; border-radius: 8px; }
.tgb-qitem {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; width: 100%; padding: 8px 10px; text-align: left;
    font: 500 13px/1.3 "Nunito Sans", system-ui, sans-serif; color: #1a1612; background: #fff;
    border: 0; border-bottom: 1px solid #efe8d6; cursor: pointer;
}
.tgb-qitem:last-child { border-bottom: 0; }
.tgb-qitem:hover { background: #fbf7ee; }
.tgb-qitem-on { background: #eef4fb; box-shadow: inset 3px 0 0 #2f5578; }
.tgb-qitem-bad { opacity: .55; cursor: not-allowed; }
.tgb-qnum { grid-row: 1 / span 2; align-self: start; padding: 2px 6px; border-radius: 5px; font: 800 12px/1.2 "IBM Plex Mono", ui-monospace, monospace; color: #fff; background: #2f5578; }
.tgb-qtitle { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 600; }
.tgb-qmeta { font-size: 11.5px; color: #8a7f72; }
.tgb-quse { font-weight: 700; color: #2f5578; }

.tgb-kinds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.tgb-kind {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; width: 100%; padding: 7px 9px; text-align: left;
    font: 500 12.5px/1.3 "Nunito Sans", system-ui, sans-serif; color: #1a1612; background: #fff;
    border: 1px solid #e6dcc2; border-radius: 8px; cursor: pointer;
}
.tgb-kind:hover { border-color: #3f8eff; }
.tgb-kind-on { border-color: #2f5578; background: #eef4fb; box-shadow: 0 0 0 1px #2f5578 inset; }
.tgb-kind-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 17px; background: #fffdf8; border: 1px solid #efe8d6; border-radius: 8px; }
.tgb-kind-text b { display: block; font-size: 13.5px; }
.tgb-kind-text small { display: block; color: #8a7f72; }
.tgb-kind-text .tgb-kind-note { color: #9a6a00; font-weight: 600; }

.tgb-bulk { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e6dcc2; }
.tgb-bulk .tgd-act { justify-content: flex-start; }
.tgb-legend { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e6dcc2; font-size: 12.5px; color: #4a423a; }
.tgb-legend > div { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.tgb-lg { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 26px; height: 22px; padding: 0 4px; border-radius: 5px; font-size: 11px; border: 1px solid #e6dcc2; background: #fffdf8; }
.tgb-lg-q { color: #fff; background: #2f5578; border-color: #2f5578; font: 800 11px/1 "IBM Plex Mono", ui-monospace, monospace; }
.tgb-lg-none { color: #8a7f72; }
.tgb-lg-void { border-style: dashed; border-color: #c9bfae; background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(201, 191, 174, .35) 4px 8px); }

@media (max-width: 920px) {
    .tgb-app { grid-template-columns: minmax(0, 1fr); }
    .tgb-side { position: static; max-height: none; overflow: visible; }
    .tgb-kinds { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
}
@media (max-width: 520px) {
    .tgb-board-wrap { padding: 8px; }
    .tgd-chronicle li { grid-template-columns: minmax(56px, max-content) 24px minmax(0, 1fr); font-size: 13px; }
}

/* ---------- Сколько вопросов нужно для поля без повторов (конструктор, редактор поля, список игр) ---------- */
.tgd-need { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 2px; padding: 10px 12px; font-size: 13.5px;
    line-height: 1.45; border-left: 4px solid var(--tg-ok, #1e7a46); background: #e8f5ec; border-radius: 0 6px 6px 0; }
.tgd-need i { margin-top: 3px; color: var(--tg-ok, #1e7a46); }
.tgd-need b { font-size: 15px; }
.tgd-need-warn { border-left-color: #e3a224; background: #fdf5e2; }
.tgd-need-warn i { color: #9a6a00; }
.tgd-chip-warn { color: #7b5a00; background: #fdf3d6; border-color: #ecd28b; font-weight: 700; }
.tgb-stat-warn { border-color: #ecd28b; background: #fdf5e2; }
.tgb-stat-warn b { color: #9a6a00; }

/* ---------- задачи на программирование (TGameCode) ---------- */
.tg-m-dialog.tg-m-code { max-width: 980px; }
.tg-code-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 8px; }
.tg-code-langlabel { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: 14px; }
.tg-code-lang { width: auto; min-width: 170px; height: auto; padding: 4px 8px; }
/* Программа на тестах — как CourseTask_C: тема CodeMirror ученика (мастер-страница), вид из /dist/css/index.css. */
.tg-code[data-kind="C"] .CodeMirror { height: 300px; border-radius: 14px; padding: 8px; font-size: 18px; }
/* Без CodeMirror — обычные поля. */
.tg-code-src, .tg-code-field {
    display: block; width: 100%; resize: vertical; padding: 4px 6px; border: 1px solid #ccc; background: #fff; color: #27292d;
    font-family: "JetBrains Mono NL", Consolas, 'Lucida Console', monospace;
}
/* Вставка кода — как CourseTask: рамка .border-radius и таблица .table-code из main.css, светлые редакторы. */
.tg-code-tpl.border-radius { margin: 4px 0 0; border-radius: 8px; overflow: hidden; }
.tg-code-scroll { width: 100%; overflow-x: auto; background: #fefefe; }
.tg-code-tpl .table-code { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.tg-code-tpl .table-code > tbody > tr > td {
    border: 0; border-bottom: 1px solid #eee; padding: 3px 5px; background-color: #fefefe; vertical-align: middle;
}
.tg-code-tpl .table-code > tbody > tr:last-child > td { border-bottom: 0; }
.tg-code-tpl .table-code > tbody > tr > td.codeline {
    width: 1%; white-space: nowrap; text-align: right; border-right: 1px solid #ddd; background-color: #f7f7f7; color: #8e9094;
}
.tg-code-tpl .table-code > tbody > tr > td.blockcode { padding: 0; max-width: none; }
.tg-code-block td.codestr > pre { background-color: #fcfcfc; padding: 10px 0 10px 5px; }
.tg-code-tpl pre.tg-code-hidden { color: #8e9094; }
.tg-code-tpl .CodeMirror {
    border: none; border-radius: 0; height: auto; padding: 0; margin: 0 0 0 -3px; background: white;
    font-family: "JetBrains Mono NL", Consolas, 'Lucida Console', monospace; font-size: 18px;
}
.tg-code-lines .CodeMirror { border-bottom: 1px solid #888888; }
.tg-code-tpl .CodeMirror pre.CodeMirror-placeholder { color: #999; }
.tg-code-block .CodeMirror-linenumber { font-size: 85%; }
.tg-code-locked .CodeMirror { opacity: .7; }
.tg-code-log {
    margin: 10px 0 0; padding: 8px 10px; max-height: 220px; overflow: auto; border-radius: 6px; background: #2b2723; color: #f3e9d2;
    font: 12.5px/1.4 "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.tg-code-forbid { margin: 6px 0; padding: 6px 10px; border-left: 4px solid #c0392b; background: #fbecea; border-radius: 0 6px 6px 0; font-size: 13.5px; }
.tg-code-forbid code { padding: 0 4px; border-radius: 3px; background: #fff; font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; }
.tg-code-samples { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.tg-code-sample { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tg-code-sample b { display: block; margin-bottom: 2px; font-size: 13px; }
.tg-code-sample pre {
    margin: 0; padding: 6px 10px; max-height: 160px; overflow: auto; border: 1px solid #e6dcc2; border-radius: 6px; background: #f6f1e4;
    font: 13px/1.4 "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
@media (max-width: 640px) {
    .tg-code[data-kind="C"] .CodeMirror { height: 260px; font-size: 15px; }
    .tg-code-tpl .CodeMirror { font-size: 15px; }
    .tg-code-sample { grid-template-columns: 1fr; }
}

/* ---------- правила игры: страница GameRules.aspx и окно «Правила» (App_Code/TGameRules.cs) ---------- */
.tg-rules-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--tg-line); border-radius: 8px;
    background: #fff; color: var(--tg-navy); font: 700 14px/1.2 "Nunito Sans", system-ui, sans-serif; cursor: pointer;
}
.tg-rules-btn:hover { border-color: var(--tg-accent); }
.tg-lobby-rules { margin: 14px 0 0; }
.tg-join-rules { margin: 14px 0 0; text-align: center; font-size: 14px; }
.tg-join-rules a, .tgd-rules-link { color: var(--tg-navy); font-weight: 700; text-decoration: none; }
.tgd-rules-link { margin-left: 8px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.tg-m-dialog.tg-m-rules { max-width: 900px; display: flex; flex-direction: column; overflow: hidden; }
.tg-m-rules .tgr-modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; background: #fbf8f1; }
.tg-m-rules .tg-m-foot { justify-content: space-between; }

.tgr {
    --tgr-ink: #1a1612; --tgr-soft: #4a423a; --tgr-mute: #8a7f72; --tgr-line: #e6dcc2; --tgr-cream: #fdf6e8; --tgr-navy: #2f5578;
    font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tgr-ink); font-size: 15.5px; line-height: 1.55;
}
.tgr-page { max-width: 980px; margin: 0 auto; padding: 16px 16px 48px; }
.tgr h1 { margin: 0 0 8px; font: 800 28px/1.2 "Nunito Sans", system-ui, sans-serif; letter-spacing: -.01em; color: var(--tgr-ink); }
.tgr h1 i, .tgr h2 i { color: var(--tgr-navy); }
.tgr h2 { margin: 0; font: 800 19px/1.25 "Nunito Sans", system-ui, sans-serif; color: var(--tgr-ink); }
.tgr h3 { margin: 14px 0 4px; font: 800 15.5px/1.3 "Nunito Sans", system-ui, sans-serif; color: var(--tgr-navy); }
.tgr p { margin: 4px 0 8px; }
.tgr ul { margin: 4px 0 8px; padding-left: 1.3em; }
.tgr li { margin: 3px 0; }
.tgr b { font-weight: 800; }
.tgr-lead { margin: 0 0 14px; font-size: 16.5px; color: var(--tgr-soft); }
.tgr-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.tgr-nav a {
    padding: 5px 12px; border: 1px solid var(--tgr-line); border-radius: 999px; background: #fff;
    color: var(--tgr-navy); font-weight: 700; font-size: 13.5px; text-decoration: none;
}
.tgr-nav a:hover { border-color: #3f8eff; text-decoration: none; }
.tgr-tablewrap { width: 100%; overflow-x: auto; margin: 8px 0 12px; }
.tgr-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; }
.tgr-table caption { caption-side: top; padding: 0 0 6px; text-align: left; font-weight: 800; color: var(--tgr-ink); }
.tgr-table th, .tgr-table td { padding: 8px 10px; border: 1px solid var(--tgr-line); text-align: left; vertical-align: top; }
.tgr-table thead th { background: var(--tgr-cream); font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--tgr-soft); }
.tgr-table tbody th { font-weight: 800; }
.tgr-compare tbody th { white-space: nowrap; }
.tgr-table a { color: var(--tgr-navy); text-decoration: none; }
.tgr-trap th { color: #a23b2b; }
.tgr-bonus th { color: #1e7a46; }
.tgr-hidden tbody th { white-space: nowrap; }
.tgr-sec { margin: 0 0 12px; border: 1px solid var(--tgr-line); border-radius: 10px; background: #fff; scroll-margin-top: 90px; }
.tgr-sec > summary {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 40px 12px 16px;
    list-style: none; cursor: pointer; position: relative;
}
.tgr-sec > summary::-webkit-details-marker { display: none; }
.tgr-sec > summary::after {
    content: ""; position: absolute; right: 16px; top: 19px; width: 9px; height: 9px;
    border-right: 2px solid var(--tgr-mute); border-bottom: 2px solid var(--tgr-mute); transform: rotate(45deg); transition: transform .15s;
}
.tgr-sec[open] > summary::after { transform: rotate(-135deg); top: 23px; }
.tgr-sec[open] > summary { border-bottom: 1px solid var(--tgr-line); }
.tgr-sec > summary:hover h2 { color: var(--tgr-navy); }
.tgr-sum { color: var(--tgr-mute); font-size: 14px; }
.tgr-body { padding: 4px 16px 14px; }
.tgr-note { margin: 12px 0 2px; padding: 10px 12px; border-left: 4px solid var(--tgr-navy); background: #eef4fa; border-radius: 0 8px 8px 0; font-size: 14.5px; }
.tgr-note-tip { border-left-color: #1e7a46; background: #e8f5ec; }
.tgr-game { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--tgr-line); border-radius: 10px; background: var(--tgr-cream); }
.tgr-game h2 { margin: 0 0 6px; }
.tgr-game .tgr-lead { margin: 0; font-size: 15.5px; }
.tgr-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; margin: 12px 0 0; }
.tgr-facts dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--tgr-mute); }
.tgr-facts dd { margin: 0; font-weight: 700; }
.tgr-more { margin: 14px 0 0; text-align: center; }
.tgr-more a { color: var(--tgr-navy); font-weight: 700; }
@media (max-width: 520px) {
    .tg-rules-btn span { display: none; }
    .tg-rules-btn { padding: 7px 10px; }
    .tgr { font-size: 15px; }
    .tgr h1 { font-size: 23px; }
    .tgr-page { padding: 10px 8px 40px; }
    .tgr-sec > summary { padding: 10px 36px 10px 12px; }
    .tgr-body { padding: 2px 12px 12px; }
    .tg-m-rules .tg-m-foot .tg-btn { padding: 9px 12px; }
}