/* Bitter 800 italic, cyrillic-ext */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../bundles/app/fonts/bitter-800i-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Bitter 800 italic, cyrillic */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../bundles/app/fonts/bitter-800i-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Bitter 800 italic, latin */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../bundles/app/fonts/bitter-800i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Bitter 900 italic, cyrillic-ext */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('../bundles/app/fonts/bitter-900i-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Bitter 900 italic, cyrillic */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('../bundles/app/fonts/bitter-900i-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Bitter 900 italic, latin */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('../bundles/app/fonts/bitter-900i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Bitter 700, cyrillic-ext */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../bundles/app/fonts/bitter-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Bitter 700, cyrillic */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../bundles/app/fonts/bitter-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Bitter 700, latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../bundles/app/fonts/bitter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 400, cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../bundles/app/fonts/ibm-plex-mono-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Mono 400, cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../bundles/app/fonts/ibm-plex-mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Mono 400, latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../bundles/app/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 600, cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../bundles/app/fonts/ibm-plex-mono-600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Mono 600, cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../bundles/app/fonts/ibm-plex-mono-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Mono 600, latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../bundles/app/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* PT Sans Narrow 400, cyrillic-ext */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-sans-narrow-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* PT Sans Narrow 400, cyrillic */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-sans-narrow-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* PT Sans Narrow 400, latin */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-sans-narrow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* PT Sans Narrow 700, cyrillic-ext */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-sans-narrow-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* PT Sans Narrow 700, cyrillic */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-sans-narrow-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* PT Sans Narrow 700, latin */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-sans-narrow-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* PT Serif 400 italic, cyrillic-ext */
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-serif-400i-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* PT Serif 400 italic, cyrillic */
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-serif-400i-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* PT Serif 400 italic, latin */
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-serif-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* PT Serif 400, cyrillic-ext */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-serif-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* PT Serif 400, cyrillic */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-serif-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* PT Serif 400, latin */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-serif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* PT Serif 700, cyrillic-ext */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-serif-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* PT Serif 700, cyrillic */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-serif-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* PT Serif 700, latin */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../bundles/app/fonts/pt-serif-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Раздел /1st/ — «Ужас Аркхэма» 1987. Стиль «Коробка 1987»: ночная обложка Тома Салливана снаружи, бумага компонентов
   внутри; плоские цвета, растровые точки, жёсткие смещённые тени. Макеты — .claude/PLAN_1ST.md (04.10.2026) */

:root {
  --night: #0F0C17;
  --dusk: #1B1526;
  --dusk-line: #2C2338;
  --dusk-2: #4A3D5C;
  --logo: #F3E2A0;
  --logo-hi: #FFF1B8;
  --moon: #F2C14E;
  --brick: #B8472A;
  --brick-d: #8E3220;
  --tentacle: #2E7D74;
  --paper: #F1E6CC;
  --card: #E8D7B4;
  --sheet: #FBF6E8;
  --ink: #241B14;
  --sepia: #6B4A2B;
  --muted: #A99FB8;
  --on-night: #E9DDBF;
  --on-night-2: #D9CDB0;
  --dash: #B9A27C;

  /* цвета видов — рубашки колод PnP */
  --t-investigator: #6B4A2B;
  --t-item: #3D3022;
  --t-spell: #541C2E;
  --t-skill: #B85A12;
  --t-support: #4C218F;
  --t-sponsor: #135E22;
  --t-local: #8C7A55;
  --t-gate: #17373D;
  --t-monster: #7A6548;
  --t-location: #8E3220;
  --t-otherworld: #2E7D74;

  --f-logo: 'Bitter', Georgia, serif;
  --f-lbl: 'PT Sans Narrow', 'Arial Narrow', sans-serif;
  --f-text: 'PT Serif', Georgia, serif;
  --f-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.6 var(--f-text); }
img { max-width: 100%; }
a { color: var(--brick); }
a:hover { color: var(--brick-d); }
:focus-visible { outline: 3px solid var(--moon); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.lbl { font-family: var(--f-lbl); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.logo-t { font-family: var(--f-logo); font-weight: 900; font-style: italic; }
.mono { font-family: var(--f-mono); }
.half { background-image: radial-gradient(rgba(36, 27, 20, .11) 1px, transparent 1.7px); background-size: 7px 7px; }
.halfn { background-image: radial-gradient(rgba(243, 226, 160, .07) 1px, transparent 1.7px); background-size: 7px 7px; }
.night { background-color: var(--night); color: var(--on-night); }
.moon { display: inline-block; width: 30px; height: 30px; border-radius: 50%; box-shadow: 8px 4px 0 0 var(--moon); flex: none; }

/* кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 2px solid var(--ink); background: var(--ink); color: var(--logo); font: 700 16px/1 var(--f-lbl); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn:hover { color: var(--logo); box-shadow: 4px 4px 0 var(--brick); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { color: var(--ink); }
.btn.cream { background: var(--logo); border-color: var(--logo); color: var(--night); box-shadow: 5px 5px 0 var(--brick); }
.btn.cream:hover { background: var(--logo-hi); color: var(--night); }
.btn.line { background: transparent; border-color: var(--logo); color: var(--logo); }
.btn.line:hover { color: var(--logo-hi); box-shadow: none; }
.btn.wide { width: 100%; }

/* полоса игр сайта */
.gstrip { background: var(--dusk); border-bottom: 1px solid var(--dusk-line); font: 15px/1.2 var(--f-lbl); }
.gstrip .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.gstrip a { color: var(--muted); text-decoration: none; }
.gstrip a:hover, .gstrip a.on { color: var(--logo); }
.gstrip a.on { font-weight: 700; }
.gstrip .sp { flex: 1; }

/* шапка */
.hd { border-bottom: 3px solid var(--brick); }
.hd .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 36px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand .logo-t { font-size: 34px; line-height: 1; color: var(--logo); text-shadow: 3px 3px 0 var(--brick); }
.brand .yr { font: 700 13px/1 var(--f-lbl); letter-spacing: .12em; color: var(--night); background: var(--moon); padding: 5px 8px; margin-left: 4px; }
.nav { display: flex; flex-wrap: wrap; gap: 8px 26px; font: 700 16px/1.2 var(--f-lbl); letter-spacing: .12em; text-transform: uppercase; }
.nav a { color: var(--on-night); text-decoration: none; padding: 6px 0; border-bottom: 3px solid transparent; }
.nav a:hover { color: var(--moon); }
.nav a.on { color: var(--moon); border-bottom-color: var(--moon); }
.hd-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hsearch { display: flex; }
.hsearch input { width: 230px; min-height: 44px; padding: 0 14px; border: 2px solid var(--dusk-2); border-right: 0; background: var(--dusk); color: var(--logo); font: 16px var(--f-text); }
.hsearch input::placeholder { color: #8C82A0; }
.hsearch button { min-width: 48px; min-height: 44px; border: 2px solid var(--logo); background: var(--logo); color: var(--night); cursor: pointer; }
.menu-btn { display: none; min-height: 44px; padding: 0 16px; border: 2px solid var(--logo); background: var(--logo); color: var(--night); font: 700 15px var(--f-lbl); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }

/* шкала безысходности — как на поле, 1–13 */
.track { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; }
.track span { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 62px; background: var(--night); border: 2px solid var(--dusk-2); color: var(--logo); font: 900 italic 28px/1 var(--f-logo); }
.track .t10 { background: #2A1A22; border-color: var(--brick-d); }
.track .t11 { background: #3A1A1E; border-color: var(--brick-d); }
.track .t12 { background: #5C1322; border-color: var(--brick); }
.track .t13 { background: var(--brick); border-color: var(--logo); color: #fff; font-size: 26px; }
.track .t13 small { font: 700 11px/1.1 var(--f-lbl); letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.track.sm span { height: 44px; font-size: 18px; border-width: 1px; }
.track.sm .t13 { font-size: 18px; }
.trackbar { background: var(--dusk); padding: 30px 0; }
.trackbar p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.trackbox { overflow-x: auto; }
.trackbox .track { min-width: 760px; }

/* главная: первый экран коробкой */
.hero { overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 70px; padding-bottom: 60px; }
.hero .eyebrow { margin: 0 0 18px; font-size: 15px; color: var(--moon); }
.hero h1 { margin: 0; font: 900 italic 120px/.92 var(--f-logo); color: var(--logo); text-shadow: 6px 6px 0 var(--brick); letter-spacing: -.01em; }
.hero .tag { margin: 26px 0 0; font: 700 26px/1.25 var(--f-lbl); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.hero .lead { margin: 22px 0 0; max-width: 540px; font-size: 19px; color: var(--on-night-2); }
.hero .acts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.boxshot { position: relative; padding: 20px 10px 30px; }
.boxshot img { display: block; width: 100%; height: auto; transform: rotate(-3deg); border: 3px solid var(--logo); box-shadow: 14px 14px 0 var(--brick); }
.sticker { position: absolute; right: -6px; top: -4px; width: 118px; height: 118px; border-radius: 50%; background: var(--moon); color: var(--night); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transform: rotate(12deg); box-shadow: 4px 4px 0 var(--night); font: 700 13px/1.15 var(--f-lbl); letter-spacing: .1em; text-transform: uppercase; }
.sticker b { font: 900 italic 34px/1 var(--f-logo); letter-spacing: 0; text-transform: none; }
.credits { background: var(--logo); color: var(--night); }
.credits .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 12px; padding-bottom: 12px; font: 700 16px/1.4 var(--f-lbl); letter-spacing: .1em; text-transform: uppercase; }
.credits a { color: var(--night); text-underline-offset: 3px; }

/* секции */
.sec { padding: 80px 0; }
.sec.card-bg { background: var(--card); border-top: 3px solid var(--ink); }
.sec-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.sec-h .eyebrow { margin: 0 0 8px; font-size: 15px; color: var(--brick); }
.sec-h h2, .ph h1 { margin: 0; font: 900 italic 56px/1 var(--f-logo); color: var(--ink); }
.night .sec-h h2 { color: var(--logo); text-shadow: 4px 4px 0 var(--brick); }
.night .sec-h .eyebrow { color: var(--moon); }
.sec-h .more { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 15px; color: var(--sepia); }
.sec-h .more a.lbl { font-size: 16px; }

/* что лежало в коробке */
.box-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 250px; padding: 20px; text-decoration: none; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--card); color: var(--ink); transition: transform .12s, box-shadow .12s; }
.tile:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); color: var(--ink); }
.tile.big { grid-column: span 2; grid-row: span 2; padding: 14px; }
.tile img.scan { display: block; width: 100%; height: auto; border: 2px solid var(--ink); }
.tile .nm { display: block; font: 900 italic 26px/1.1 var(--f-logo); }
.tile .ct { font-size: 15px; color: var(--sepia); }
.tile.deck { color: var(--logo); background: var(--tc); }
.tile.deck:hover { color: var(--logo); }
.tile.deck img.scan { border-color: var(--paper); }
.tile.deck .ct { color: #E9DDBF; }
.tile.local { color: var(--ink); background: #F3EAD3; }
.tile.local .ct { color: var(--sepia); }
.tile .toks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tile .toks img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* сыщики на главной */
.inv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.inv { display: flex; flex-direction: column; background: var(--card); border: 2px solid var(--ink); text-decoration: none; color: var(--ink); }
.inv:hover { color: var(--ink); box-shadow: 6px 6px 0 var(--brick); }
.inv img { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--ink); }
.inv .nm { padding: 10px 12px 0; font: 900 italic 21px/1.15 var(--f-logo); }
.inv .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px 12px; font: 700 14px/1.3 var(--f-lbl); letter-spacing: .08em; text-transform: uppercase; color: var(--sepia); }
.pawn { width: 16px; height: 16px; border-radius: 50%; background: var(--pc, #888); border: 2px solid var(--ink); flex: none; }

/* Иные миры */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.night .two p { color: var(--on-night-2); }
.worlds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.worlds li a, .worlds li span { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; background: var(--wc); color: var(--ink); border: 2px solid var(--logo); text-decoration: none; font: 700 16px/1.2 var(--f-lbl); letter-spacing: .1em; text-transform: uppercase; }
.worlds li a:hover { box-shadow: 4px 4px 0 var(--brick); }
.w-abyss { --wc: #F3E59A; } .w-dim { --wc: #F2A39B; } .w-yith { --wc: #F6CF6E; } .w-dream { --wc: #E9BD95; }
.w-celaeno { --wc: #C5D3E6; } .w-leng { --wc: #A8DAD8; } .w-rlyeh { --wc: #BCDDAE; } .w-yuggoth { --wc: #C9CBDD; }

/* подвал */
.ft { background: var(--dusk); color: var(--muted); border-top: 3px solid var(--brick); font-size: 15px; }
.ft .wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 24px 40px; padding-top: 40px; padding-bottom: 32px; }
.ft h4 { margin: 0 0 10px; font: 700 15px var(--f-lbl); letter-spacing: .12em; text-transform: uppercase; color: var(--logo); }
.ft .ft-logo { font: 900 italic 26px/1.1 var(--f-logo); color: var(--logo); }
.ft p { margin: 8px 0 0; line-height: 1.6; }
.ft a { color: var(--on-night); text-decoration: none; }
.ft a:hover { color: var(--moon); }
.ft .col a { display: block; padding: 3px 0; }
.ft a.pnp { color: var(--moon); font-weight: 700; }
.ft .end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--dusk-line); }

/* общая шапка страницы */
.page { padding: 44px 0 80px; }
.crumbs { margin-bottom: 14px; font: 700 13px/1.4 var(--f-lbl); letter-spacing: .12em; text-transform: uppercase; color: var(--sepia); }
.crumbs a { color: var(--brick); }
.crumbs span { margin: 0 6px; }
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ph .eyebrow { margin: 0 0 8px; font-size: 15px; color: var(--brick); }
.ph h1 { font-size: 64px; }
.ph p.lead { margin: 14px 0 0; max-width: 640px; font-size: 18px; }
.ph .count { margin: 0; font: 15px var(--f-mono); color: var(--sepia); }
.flashes { padding-top: 18px; }
.flash { padding: 12px 16px; margin-bottom: 8px; border: 2px solid var(--ink); background: var(--sheet); }
.flash-error { border-color: var(--brick); }
.empty { margin-top: 28px; padding: 22px 24px; border: 2px dashed var(--sepia); background: var(--sheet); font-size: 17px; }

/* каталог: вкладки видов */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 2px solid var(--ink); background: var(--tc, var(--ink)); color: var(--logo); font: 700 16px/1 var(--f-lbl); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.tab:hover { color: var(--logo); box-shadow: 4px 4px 0 var(--brick); }
.tab.on { box-shadow: 4px 4px 0 var(--brick); outline: 2px solid var(--moon); outline-offset: -6px; }
.tab small { font: 600 13px var(--f-mono); letter-spacing: 0; opacity: .85; }
.tab.t-local { color: var(--ink); background: #F3EAD3; }
.tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-top: 22px; padding: 18px; background: var(--card); border: 2px solid var(--ink); }
.tools .fld { display: flex; flex-direction: column; gap: 6px; }
.tools .fld.grow { flex: 1 1 280px; }
.tools label.lbl { font-size: 13px; }
.tools input[type=search], .tools select { min-height: 46px; padding: 0 14px; border: 2px solid var(--ink); background: var(--sheet); color: var(--ink); font: 17px var(--f-text); }
.tools .chk { display: flex; align-items: center; gap: 10px; min-height: 46px; font-size: 17px; }
.tools .chk input { width: 22px; height: 22px; accent-color: var(--brick); }
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.cgrid.inv-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ccard { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--sheet); border: 2px solid var(--ink); transition: transform .12s, box-shadow .12s; }
.ccard:hover { color: var(--ink); box-shadow: 6px 6px 0 var(--brick); transform: translate(-2px, -2px); }
.ccard .mat { display: block; padding: 12px; background: var(--tc, var(--ink)); }
.ccard .mat img { display: block; width: 100%; height: auto; }
.ccard .noimg { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; border: 1px solid rgba(243, 226, 160, .6); color: var(--logo); font: 900 italic 22px/1.2 var(--f-logo); text-align: center; padding: 12px; overflow-wrap: anywhere; hyphens: auto; }
.ccard .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 16px 4px; }
.ccard .nm { font: 900 italic 22px/1.15 var(--f-logo); min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.ccard .row2 { padding: 0 16px 14px; font: 700 13px/1.4 var(--f-lbl); letter-spacing: .1em; text-transform: uppercase; color: var(--sepia); }
.cost { font: 600 15px/1 var(--f-mono); white-space: nowrap; }
.cost.tag { padding: 6px 10px; background: var(--moon); color: var(--ink); }
.qty { font: 600 13px var(--f-mono); color: var(--sepia); }

/* страница карты */
.ch-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.nbrs { display: flex; gap: 20px; font: 700 14px/1.4 var(--f-lbl); letter-spacing: .1em; text-transform: uppercase; }
.cardgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.stage .mat { padding: 28px; background: var(--tc, var(--ink)); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.flipbox { perspective: 1600px; cursor: pointer; }
.flipper { position: relative; transition: transform .7s cubic-bezier(.2, .75, .2, 1); transform-style: preserve-3d; }
.flipper img { display: block; width: 100%; height: auto; backface-visibility: hidden; border: 2px solid var(--paper); }
.flipper img.bk { position: absolute; inset: 0; height: 100%; object-fit: cover; transform: rotateY(180deg); }
.flipbox.on .flipper { transform: rotateY(180deg); }
.mat.token .flipper img { border: 0; }
.mat.token .flipper img.bk { object-fit: contain; }
.stage .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.stage .noscan { padding: 40px 24px; background: var(--sheet); border: 2px dashed var(--sepia); text-align: center; color: var(--sepia); }
.card-h .eyebrow { margin: 0 0 8px; font-size: 15px; color: var(--brick); }
.card-h h1 { margin: 0; font: 900 italic 60px/1 var(--f-logo); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chip { padding: 7px 12px; border: 2px solid var(--ink); font: 700 14px/1.2 var(--f-lbl); letter-spacing: .1em; text-transform: uppercase; }
.chip.fill { background: var(--tc, var(--ink)); border-color: var(--tc, var(--ink)); color: var(--logo); }
.ctext { margin-top: 30px; padding: 24px 28px; background: var(--sheet); border: 2px solid var(--ink); }
.ctext p { margin: 0 0 12px; font-size: 20px; line-height: 1.55; }
.ctext p:last-child { margin-bottom: 0; }
.ctext .fl { font-style: italic; color: var(--sepia); }
.ctext h3 { margin: 18px 0 8px; font: 700 15px var(--f-lbl); letter-spacing: .12em; text-transform: uppercase; color: var(--sepia); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 30px 0 0; padding: 22px 0 0; border-top: 2px solid var(--ink); }
.facts dt { font: 700 14px/1.3 var(--f-lbl); letter-spacing: .1em; text-transform: uppercase; color: var(--sepia); }
.facts dd { margin: 0; font: 16px/1.5 var(--f-mono); }
.rel-sec { margin-top: 72px; }
.rel-sec h2 { margin: 0 0 22px; font: 900 italic 36px/1.1 var(--f-logo); }
.rel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.events { width: 100%; border-collapse: collapse; margin-top: 8px; }
.events th, .events td { padding: 10px 12px; border-bottom: 1px dashed var(--dash); text-align: left; vertical-align: top; font-size: 18px; }
.events th { width: 64px; font: 700 18px var(--f-mono); color: var(--brick); }

/* сыщики */
.seg { display: flex; flex-wrap: wrap; }
.seg button { min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); background: var(--sheet); color: var(--ink); font: 700 15px var(--f-lbl); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.seg button + button { border-left: 0; }
.seg button[aria-pressed=true] { background: var(--ink); color: var(--logo); }
.ic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 40px; }
.ic { display: grid; grid-template-columns: 240px minmax(0, 1fr); background: var(--sheet); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); text-decoration: none; color: var(--ink); }
.ic:hover { color: var(--ink); box-shadow: 8px 8px 0 var(--brick); }
.ic img { display: block; width: 100%; height: 100%; object-fit: cover; border-right: 2px solid var(--ink); }
.ic .noimg { min-height: 200px; background: var(--card); border-right: 2px solid var(--ink); }
.ic .body { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.ic .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ic h2 { margin: 0; font: 900 italic 28px/1.1 var(--f-logo); }
.ic .pc { display: flex; align-items: center; gap: 6px; font: 700 12px var(--f-lbl); letter-spacing: .1em; text-transform: uppercase; }
.sk { display: grid; grid-template-columns: 118px repeat(5, minmax(0, 1fr)) 28px; gap: 5px; align-items: center; }
.sk .lbl { font-size: 13px; }
.sk i { height: 16px; border: 2px solid var(--ink); }
.sk i.on { background: var(--brick); }
.sk b { font: 600 16px var(--f-mono); text-align: right; }
.tblbox { overflow-x: auto; background: var(--sheet); border: 2px solid var(--ink); }
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { padding: 12px 14px; border-bottom: 2px solid var(--ink); text-align: left; }
.cmp thead th { background: var(--ink); color: var(--logo); font: 700 14px var(--f-lbl); letter-spacing: .12em; text-transform: uppercase; }
.cmp tbody th { font: 900 italic 19px var(--f-logo); }
.cmp tbody th a { color: var(--ink); text-decoration: none; }
.cmp td { font: 16px var(--f-mono); }
.cmp td.top { font-weight: 600; color: var(--brick); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }

/* поле */
.board-hero { padding: 44px 0 56px; }
.board-hero .ph h1 { color: var(--logo); text-shadow: 5px 5px 0 var(--brick); }
.board-hero .ph .eyebrow { color: var(--moon); }
.board-frame { margin-top: 26px; padding: 14px; background: var(--card); border: 3px solid var(--logo); box-shadow: 12px 12px 0 var(--brick); }
.board-frame img { display: block; width: 100%; height: auto; }
.board-frame a { display: block; }
.board-note { margin: 18px 0 0; font-size: 16px; color: var(--muted); }
.board-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; }
.board-cols h2 { margin: 0 0 6px; font: 900 italic 40px/1.1 var(--f-logo); }
.board-cols .sub { margin: 0 0 20px; font: 15px var(--f-mono); color: var(--sepia); }
.locs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.locs a, .locs span { display: block; padding: 9px 0; border-bottom: 1px dashed var(--dash); color: var(--ink); text-decoration: none; font-size: 17px; }
.locs a:hover { color: var(--brick); }
.ow { display: flex; flex-direction: column; gap: 10px; }
.ow a, .ow span { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 16px; border: 2px solid var(--ink); background: var(--wc); color: var(--ink); text-decoration: none; }
.ow a:hover { box-shadow: 4px 4px 0 var(--ink); }
.ow .nm { font: 900 italic 21px/1.1 var(--f-logo); }
.ow .lbl { font-size: 12px; }
.toks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.toks a, .toks img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.gz { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; margin-top: 44px; padding: 22px; background: var(--sheet); border: 2px solid var(--ink); }
.gz img { display: block; width: 100%; border: 2px solid var(--ink); }
.gz h3 { margin: 0; font: 900 italic 30px/1.1 var(--f-logo); }
.gz p { margin: 12px 0 18px; font-size: 17px; }

/* правила */
.rules-hero { padding: 56px 0; }
.rules-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: end; }
.rules-hero h1 { margin: 0; font: 900 italic 80px/.95 var(--f-logo); color: var(--logo); text-shadow: 5px 5px 0 var(--brick); }
.rules-hero .eyebrow { margin: 0 0 10px; font-size: 15px; color: var(--moon); }
.rules-hero .intro { margin: 24px 0 0; max-width: 680px; font-size: 20px; font-style: italic; color: var(--on-night-2); }
.rules-hero .side { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.rules-hero .side .mono { font-size: 14px; color: var(--muted); }
.rules-hero .side .by { font-size: 15px; color: var(--on-night-2); }
.rules-hero .side .by a { color: var(--moon); font-weight: 700; }
.rules-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: 16px; padding: 20px; background: var(--sheet); border: 2px solid var(--ink); }
.toc p { margin: 0 0 10px; font-size: 14px; color: var(--sepia); }
.toc a { display: block; padding: 7px 0 7px 14px; border-left: 3px solid transparent; color: var(--ink); text-decoration: none; font-size: 17px; line-height: 1.35; }
.toc a:hover, .toc a.on { color: var(--brick); border-left-color: var(--brick); }
.art h2 { margin: 48px 0 12px; font: 900 italic 44px/1.1 var(--f-logo); scroll-margin-top: 16px; }
.art h2:first-child { margin-top: 0; }
.art h3 { margin: 28px 0 8px; font: 900 italic 26px/1.2 var(--f-logo); color: var(--brick); scroll-margin-top: 16px; }
.art p, .art li { font-size: 19px; line-height: 1.65; }
.art p { margin: 0 0 14px; }
.art ul, .art ol { margin: 0 0 14px; padding-left: 24px; }
.step { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 2px dashed var(--dash); }
.step b { font: 900 italic 22px/1.2 var(--f-logo); color: var(--brick); }
.step p { margin: 0; }
.step p + p { margin-top: 10px; }
.turn { margin: 40px 0; padding: 26px 28px; background: var(--ink); color: var(--logo); box-shadow: 8px 8px 0 var(--brick); }
.turn h2 { margin: 0 0 16px; color: var(--logo); }
.turn .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.turn .lbl { margin: 0 0 10px; font-size: 16px; color: var(--moon); }
.turn ol, .turn ul { color: var(--on-night); }
.turn li { font-size: 18px; }
.note-box { margin: 24px 0; padding: 20px 24px; background: var(--sheet); border: 2px solid var(--ink); border-top: 8px solid var(--moon); }
.note-box .lbl { margin: 0 0 8px; font-size: 14px; color: var(--sepia); }
.note-box p:last-child { margin-bottom: 0; }

/* файлы */
.pnp-by { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; padding: 18px 22px; background: var(--moon); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.pnp-by .lbl { font-size: 14px; }
.pnp-by .who { font: 900 italic 28px/1.1 var(--f-logo); }
.pnp-by .who a { color: var(--ink); text-underline-offset: 4px; }
.pnp-by .btn { margin-left: auto; }
.flist { margin-top: 32px; background: var(--sheet); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.flist h2 { margin: 0; padding: 14px 20px; background: var(--ink); color: var(--logo); font: 700 16px var(--f-lbl); letter-spacing: .12em; text-transform: uppercase; }
.flist h2.brick { background: var(--brick); color: #fff; }
.frow { display: grid; grid-template-columns: 64px minmax(0, 1fr) 150px auto; gap: 20px; align-items: center; padding: 16px 20px; border-bottom: 2px solid var(--ink); }
.frow:last-child { border-bottom: 0; }
.frow .no { font: 900 italic 30px/1 var(--f-logo); color: var(--brick); }
.frow .nm { display: block; font: 900 italic 21px/1.2 var(--f-logo); }
.frow .nt { font-size: 15px; color: var(--sepia); }
.frow .sz { font: 15px var(--f-mono); }
.frow .acts { display: flex; gap: 8px; }

/* кабинет в оформлении /1st/ */
.first-account { padding: 44px 32px 80px; }
.acc-head h1 { margin: 0; font: 900 italic 56px/1 var(--f-logo); }
.acc-head p { margin: 12px 0 0; max-width: 640px; font-size: 18px; }
.acc-form { max-width: 560px; margin-top: 28px; padding: 26px 28px; background: var(--sheet); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.fld > span { font: 700 14px var(--f-lbl); letter-spacing: .1em; text-transform: uppercase; }
.fld small { font-size: 14px; color: var(--sepia); }
.fld input, .first-account input[type=text], .first-account input[type=email], .first-account input[type=password], .first-account textarea, .first-account select {
  width: 100%; min-height: 46px; padding: 8px 14px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: 17px var(--f-text); }
.chkl { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 17px; }
.chkl input { width: 22px; height: 22px; accent-color: var(--brick); }
.acc-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 16px; }
.acc-note { font-size: 15px; color: var(--sepia); }
.acc-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-top: 28px; background: var(--card); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.acc-card > div { padding: 24px 26px; }
.acc-card > div + div { border-left: 2px dashed var(--sepia); }
.acc-card .who { font: 900 italic 36px/1.1 var(--f-logo); }
.acc-card .lbl { display: block; font-size: 13px; color: var(--sepia); margin-bottom: 6px; }
.acc-card p { margin: 0 0 10px; }
.acc-actions { display: flex; flex-direction: column; gap: 10px; }
.acc-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.acc-game { padding: 22px 24px; background: var(--sheet); border: 2px solid var(--ink); }
.acc-game.cur { background: var(--night); color: var(--on-night); border-color: var(--night); box-shadow: 6px 6px 0 var(--brick); }
.acc-game.cur h2 { color: var(--logo); }
.acc-game.cur a { color: var(--moon); }
.acc-game h2 { margin: 0 0 10px; font: 900 italic 26px/1.15 var(--f-logo); }
.acc-game ul { margin: 0; padding-left: 20px; }
.acc-game li { padding: 3px 0; }
.acc-oauth { margin-top: 20px; }
/* общие шаблоны кабинета (Bootstrap-классы) в оформлении раздела */
.first-account .form-control, .first-account .form-select { border-radius: 0; }
.first-account .btn-primary, .first-account button[type=submit]:not(.btn) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 2px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--logo); font: 700 16px var(--f-lbl); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.first-account .mb-3 { margin-bottom: 18px; }
.first-account .form-label { display: block; margin-bottom: 6px; font: 700 14px var(--f-lbl); letter-spacing: .1em; text-transform: uppercase; }
.first-account .invalid-feedback, .first-account .form-error-message { color: var(--brick-d); font-size: 15px; }
.first-account .alert { padding: 12px 16px; border: 2px solid var(--ink); background: var(--sheet); margin-bottom: 16px; }

/* адаптив */
@media (max-width: 1100px) {
  .hero h1 { font-size: 96px; }
  .ic-grid, .board-cols { grid-template-columns: minmax(0, 1fr); }
  .cgrid.inv-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .hero .wrap, .two, .cardgrid, .rules-grid, .rules-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .box-grid, .inv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile.big { grid-row: auto; }
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc { position: static; }
  .ft .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft .wrap > div:first-child { grid-column: 1 / -1; }
  .acc-games { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .js .nav { display: none; width: 100%; flex-direction: column; gap: 0; order: 3; }
  .js .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--dusk-line); }
  .hsearch input { width: 170px; }
  .locs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .wrap { padding: 0 16px; }
  .first-account { padding: 32px 16px 64px; }
  .brand .logo-t { font-size: 26px; }
  .hero .wrap { padding-top: 36px; padding-bottom: 40px; gap: 34px; }
  .hero h1 { font-size: 64px; text-shadow: 4px 4px 0 var(--brick); }
  .hero .tag { font-size: 18px; }
  .hero .acts .btn { width: 100%; }
  .sticker { width: 78px; height: 78px; font-size: 10px; right: -4px; top: -10px; }
  .sticker b { font-size: 22px; }
  .sec { padding: 48px 0; }
  .sec-h h2, .ph h1 { font-size: 38px; }
  .card-h h1 { font-size: 40px; }
  .rules-hero h1 { font-size: 52px; }
  .box-grid, .cgrid, .cgrid.inv-list, .inv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tile { min-height: 150px; padding: 12px; box-shadow: 4px 4px 0 var(--ink); }
  .tile.big { grid-column: span 2; }
  .tile .nm { font-size: 20px; overflow-wrap: anywhere; hyphens: auto; }
  .ccard .nm, .ccard .noimg { font-size: 18px; }
  .ccard .row1 { padding: 10px 10px 2px; }
  .ccard .row2 { padding: 0 10px 10px; }
  .ccard .mat { padding: 8px; }
  .worlds { grid-template-columns: minmax(0, 1fr); }
  .ic { grid-template-columns: minmax(0, 1fr); }
  .ic img { border-right: 0; border-bottom: 2px solid var(--ink); }
  .sk { grid-template-columns: 100px repeat(5, minmax(0, 1fr)) 24px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .turn .cols { grid-template-columns: minmax(0, 1fr); }
  .gz { grid-template-columns: minmax(0, 1fr); }
  .frow { grid-template-columns: 44px minmax(0, 1fr); }
  .frow .sz, .frow .acts { grid-column: 2; }
  .locs { grid-template-columns: minmax(0, 1fr); }
  .hd-r { width: 100%; margin-left: 0; }
  .hsearch { flex: 1; }
  .hsearch input { width: 100%; }
  .ft .wrap { grid-template-columns: minmax(0, 1fr); }
  .acc-card { grid-template-columns: minmax(0, 1fr); }
  .acc-card > div + div { border-left: 0; border-top: 2px dashed var(--sepia); }
  .pnp-by .btn { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flipper, .tile, .ccard { transition: none; }
}