/* Связи v3: compact, game-first interface.
   All puzzle state, difficulty and streak logic remain in app.js. */
:root {
  --bg: #f6f5f9;
  --surface: #ffffff;
  --ink: #232539;
  --muted: #75788a;
  --line: #e8e6ef;
  --tile: #f1f0f7;
  --tile-hover: #e9e5f6;
  --selected: #55458e;
  --yellow: #f7e4a1;
  --green: #b9e5bd;
  --blue: #bcdaf4;
  --purple: #dbc7f3;
}
body { background: var(--bg); }
.site-header { border-bottom-color: #eae8f0; }
.header-inner { max-width: 850px; height: 59px; }
.brand { color: #25243b; }
.brand-dot { color: #b36e75; }
.help-button { color: #5a5075; border-color: #e6e1ee; }
.help-button:hover { background: #f3effa; }
.app { width: min(810px, calc(100% - 34px)); }
.game {
  margin-top: 20px;
  padding: 25px 27px 13px;
  background: #fff;
  border: 1px solid #ebe9f2;
  border-radius: 22px;
  box-shadow: 0 9px 35px rgba(57, 47, 96, .045);
}
.game-heading { margin-bottom: 17px; }
.overline { color: #8973a9; letter-spacing: .13em; margin-bottom: 5px; }
.game-heading h1 { color: #25243b; font-size: clamp(1.38rem, 3vw, 1.7rem); }
.game-prompt { margin-top: 5px; }
.streak {
  border-color: #f4dfca;
  background: #fff7ed;
  color: #79502d;
  padding: 8px 13px;
  font-weight: 700;
}
.streak strong { font-size: 1.05rem; }
.streak-text { color: #98785f; }
.game-controls { margin-bottom: 12px; }
.difficulty-control {
  gap: 4px;
  padding: 4px;
  background: #f2f0f7;
  border: 1px solid #e9e6f1;
  border-radius: 13px;
}
.mode-button {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  padding: 10px 24px;
  color: #656376;
  min-height: 40px;
  transition: background .16s, box-shadow .16s, color .16s;
}
.mode-button::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
}
#easyMode::before { background: #6eae73; }
#hardMode::before { background: #a181d1; }
#easyMode.active {
  background: #d7f0d5;
  color: #265a34;
  box-shadow: 0 2px 8px rgba(69, 129, 76, .12);
}
#hardMode.active {
  background: #e3d6fa;
  color: #5a3987;
  box-shadow: 0 2px 8px rgba(107, 76, 152, .12);
}
#easyMode.active::before { background: #3b904c; }
#hardMode.active::before { background: #8655be; }
.archive-wrap select {
  border-color: #e5e2ec;
  background: #fff;
  border-radius: 11px;
  min-height: 46px;
  color: #424258;
}
.word-help { margin: 0 0 12px; gap: 8px; }
.word-help-label { font-size: .74rem; color: #888598; }
.word-help-note { color: #aaa3bb; }
.mini-toggle {
  min-height: 31px;
  padding: 7px 12px;
  background: #f8f7fb;
  color: #59596e;
  border-color: #ebe8f2;
}
.mini-toggle:has(input:checked) { background: #ede5fb; border-color: #c8b2ea; color: #624487; }
.mini-toggle input { accent-color: #7d5db1; }
.instruction { margin-bottom: 11px; color: #858395; }
.tile-grid { gap: 8px; }
.word-tile {
  min-height: 82px;
  border: 1px solid #eceaf4;
  border-radius: 11px;
  background: var(--tile);
  color: #302d47;
  transition: transform .12s, background .12s, box-shadow .12s;
}
.word-tile:hover:not(:disabled) { background: #e9e5f6; }
.word-tile.selected, .word-tile.selected:hover {
  background: #55458e;
  color: #fff;
  border-color: #55458e;
  box-shadow: 0 0 0 2px #ddd3f4;
}
.tile-russian { font-weight: 820; letter-spacing: -.012em; }
.tile-english, .tile-latin { color: #777389; }
.word-tile.selected .tile-english, .word-tile.selected .tile-latin { color: #f0eafa; }
.solved-stack { gap: 8px; margin-bottom: 10px; }
.solved-group { padding: 10px 8px; border-radius: 11px; }
.group-words { margin-top: 4px; }
.group-en { margin-top: 2px; }
.learning-panel { border-color: #ebe7f1; border-radius: 10px; margin-top: 4px; }
.learning-panel summary { padding: 10px 12px; }
.guess-status { margin: 14px 0 11px; color: #77738b; }
.mistake-dot { background: #6e5ba1; }
.mistake-dot.used { background: #e4e0ec; }
.action-row {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  gap: 8px;
}
.action-row .btn.btn-hint {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  width: max-content;
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 11px;
  background: #f8f6fd;
  border-color: #eee8f8;
  color: #6c548c;
  font-size: .72rem;
  line-height: 1.1;
  box-shadow: none;
}
.action-row .btn-hint .hint-icon {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.action-row .btn { border-color: #e3dfea; padding: 11px 15px; color: #514a67; }
.action-row .btn:not(.btn-primary):hover:not(:disabled) { background: #f4effb; }
.action-row .btn-primary {
  background: #55458e;
  color: #fff;
  border-color: #55458e;
  padding-left: 25px;
  padding-right: 25px;
  box-shadow: 0 4px 12px rgba(84, 69, 142, .16);
}
.action-row .btn-primary:hover:not(:disabled) { background: #473876; }
.action-row .btn:disabled { opacity: .42; }
.btn-subtle { background: #f8f6fd; }
.toast { color: #665482; }
.game-footer { margin-top: 17px; padding-top: 11px; }
.below-game { margin-top: 14px; border-top: 0; }
.simple-details { border-color: #e6e3ed; }
.simple-details summary { padding: 15px 4px; }
.footer { color: #9591a0; }
.rules-dialog { border-radius: 18px; }

@media (max-width: 580px) {
  .header-inner { height: 49px; padding: 0 15px; }
  .brand { font-size: 1.35rem; }
  .brand-mark { width: 23px; height: 23px; }
  .header-subtitle { display: none; }
  .help-button { width: 31px; height: 31px; }
  .app { width: calc(100% - 14px); }
  .game { margin-top: 8px; padding: 12px 10px 9px; border-radius: 18px; }
  .game-heading { margin-bottom: 11px; gap: 6px; }
  .overline, .game-prompt { display: none; }
  .game-heading h1 { font-size: 1.14rem; letter-spacing: -.035em; }
  .streak { padding: 6px 10px; font-size: .75rem; gap: 4px; }
  .streak strong { font-size: .97rem; }
  .streak-text { display: none; }
  .game-controls { gap: 8px; margin-bottom: 10px; }
  .difficulty-control { display: grid; grid-template-columns: 1fr 1fr; width: 53%; min-width: 0; gap: 3px; padding: 3px; }
  .mode-button { min-height: 37px; padding: 7px 3px; font-size: .78rem; gap: 5px; }
  .mode-button::before { width: 6px; height: 6px; }
  .archive-wrap { flex: 1; min-width: 0; }
  .archive-wrap select { max-width: none; width: 100%; min-height: 45px; font-size: .76rem; padding-left: 10px; padding-right: 24px; }
  .archive-wrap::after { right: 10px; }
  .word-help { min-height: 31px; gap: 7px; margin-bottom: 10px; }
  .word-help-label, .word-help-note { display: none; }
  .mini-toggle { min-height: 29px; font-size: .74rem; padding: 6px 10px; }
  .game-content > .instruction:first-child { display: none; }
  .game-content > .instruction:not(:first-child) { display: block; background: #f5f0fc; color: #624d82; padding: 9px 11px; border-radius: 9px; margin: 9px 0 1px; font-size: .76rem; }
  .tile-grid { gap: 6px; }
  .word-tile { min-height: clamp(61px, 9.2dvh, 77px); padding: 7px 2px; border-radius: 10px; gap: 3px; }
  .word-tile.has-help { min-height: clamp(72px, 10.4dvh, 88px); }
  .word-tile.has-two-helpers { min-height: clamp(83px, 12dvh, 100px); }
  .tile-russian { font-size: clamp(.65rem, 2.75vw, .84rem); font-weight: 830; letter-spacing: -.026em; }
  .tile-english, .tile-latin { font-size: clamp(.55rem, 2.33vw, .68rem); line-height: 1.15; }
  .solved-group { padding: 9px 6px; }
  .group-name { font-size: .77rem; }
  .group-words { font-size: .72rem; margin-top: 3px; }
  .group-en { font-size: .7rem; }
  .learning-panel summary { padding: 8px 11px; font-size: .75rem; }
  .guess-status { margin: 10px 0 7px; gap: 8px; font-size: .74rem; }
  .mistake-dot { width: 9px; height: 9px; }
  .action-row {
    display: grid;
    grid-template-columns: .95fr .8fr 1.25fr;
    gap: 5px;
    position: sticky;
    bottom: max(5px, env(safe-area-inset-bottom));
    z-index: 8;
    padding: 6px;
    border: 1px solid #e9e3f3;
    border-radius: 13px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 5px 22px rgba(53, 43, 91, .12);
    backdrop-filter: blur(12px);
  }
  .action-row .btn { min-width: 0; min-height: 42px; padding: 9px 3px; font-size: clamp(.68rem, 2.9vw, .78rem); white-space: nowrap; }
  .action-row .btn-primary { padding: 9px 3px; }
  .action-row .btn.btn-hint {
    min-height: 29px;
    min-width: 0;
    width: max-content;
    padding: 5px 11px;
    font-size: .7rem;
  }
  .toast:not(:empty) {
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: calc(79px + env(safe-area-inset-bottom));
    width: max-content;
    max-width: calc(100vw - 30px);
    transform: translateX(-50%);
    margin: 0;
    padding: 12px 15px;
    border-radius: 12px;
    background: #342950;
    color: white;
    box-shadow: 0 8px 25px #23203b36;
    font-size: .77rem;
  }
  .toast:empty { min-height: 0; margin: 0; }
  .game-footer { margin-top: 9px; padding-top: 9px; font-size: .67rem; }
  .game-footer span:last-child { display: none; }
  .below-game { margin-top: 9px; }
  .simple-details summary { padding: 13px 7px; }
  .summary-meta { display: none; }
  .footer { padding: 17px 0 23px; }
}
@media (max-width: 350px) {
  .game-heading h1 { font-size: 1.02rem; }
  .mode-button { font-size: .73rem; }
  .tile-russian { font-size: .62rem; }
  .action-row .btn { font-size: .67rem; }
}
@media (max-height: 690px) and (max-width: 580px) {
  .word-tile { min-height: 59px; }
  .word-tile.has-help { min-height: 72px; }
  .word-tile.has-two-helpers { min-height: 84px; }
  .game { padding-top: 10px; }
  .game-heading, .game-controls { margin-bottom: 8px; }
  .word-help { margin-bottom: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}