/* Стили «Кузницы»: префикс forge-, цвета из shared/theme.css. */
.forge-body { margin: 0; min-height: 100vh; background: var(--body-bg, #12335c); color: var(--text-primary, #f2f6fa); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.forge-main { max-width: 1000px; margin: 0 auto; padding: 12px; box-sizing: border-box; }
.forge-nav { display: flex; gap: 16px; flex-wrap: wrap; } .forge-nav a { color: var(--accent-info, #3ba7ff); }
.forge-lead, .forge-hint, .forge-card-desc, .forge-card-meta { color: var(--text-secondary, #dbe4ee); }
.forge-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.forge-board { display: grid; grid-template-columns: repeat(var(--forge-files, 8), 1fr); width: 100%; max-width: 520px; border: 2px solid var(--border-color); border-radius: 8px; overflow: hidden; touch-action: manipulation; }
.forge-sq { position: relative; border: 0; padding: 0; margin: 0; aspect-ratio: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 0; }
.forge-sq-l { background: #eeeed2; } .forge-sq-d { background: #769656; }
.forge-sq-sel { box-shadow: inset 0 0 0 4px var(--accent-gold, #ffd23f); }
.forge-sq-last { box-shadow: inset 0 0 0 4px rgba(247, 247, 105, .7); }
.forge-sq-target::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(0, 0, 0, .35); }
.forge-icon { width: 90%; height: 90%; }
.forge-icon-w { fill: #fff; stroke: #000; stroke-width: 1.2; paint-order: stroke; } .forge-icon-b { fill: #111; }
.forge-icon-mark { fill: currentColor; stroke: none; }
.forge-palette { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.forge-tool { width: 46px; height: 46px; padding: 2px; border-radius: 8px; border: 1px solid var(--border-color); background: #b9b9a0; cursor: pointer; font-size: 22px; }
.forge-tool[aria-pressed="true"] { outline: 3px solid var(--accent-gold, #ffd23f); background: #fff6c9; }
.forge-label { display: block; margin: 10px 0 4px; font-weight: 600; }
.forge-input { width: 100%; box-sizing: border-box; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); color: inherit; font: inherit; }
.forge-input[aria-invalid="true"] { border-color: var(--accent-danger, #ff6e7c); }
.forge-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.forge-fieldset { border: 1px solid var(--border-color); border-radius: 8px; margin: 12px 0; }
.forge-check { display: block; padding: 6px 0; }
.forge-err { color: var(--accent-danger, #ff6e7c); margin: 2px 0; font-size: 14px; } .forge-err[hidden], [hidden] { display: none; }
.forge-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.forge-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--card-bg); color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
.forge-btn[aria-pressed="true"] { background: var(--accent-active, #39ff7a); color: var(--on-active, #04210f); }
.forge-btn-main { background: var(--accent-gold, #ffd23f); color: var(--on-gold, #2b2100); font-weight: 700; border-color: transparent; }
.forge-btn:focus-visible, .forge-tool:focus-visible, .forge-sq:focus-visible, .forge-input:focus-visible { outline: 3px solid var(--accent-gold, #ffd23f); outline-offset: 2px; }
.forge-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.forge-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; }
.forge-card-title { margin: 0 0 4px; overflow-wrap: anywhere; } .forge-card-desc, .forge-card-meta { overflow-wrap: anywhere; }
.forge-turn { font-weight: 700; font-size: 18px; }
.forge-promo { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; gap: 10px; align-items: center; justify-content: center; z-index: 10; }
.forge-promo[hidden] { display: none; }
@media (max-width: 760px) { .forge-grid { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .forge-main { padding: 8px; } .forge-tool { width: 40px; height: 40px; } }