/* Négyesek (connections) — prefix cn- */
.cn-frame {
  width: min(560px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 12px;
  touch-action: manipulation;
  /* Group colours: yellow, green, blue, purple — light fills with dark ink… */
  --cn-l1: #fbd44f; --cn-l2: #8ed99a; --cn-l3: #93b8fb; --cn-l4: #c8a6ff;
  --cn-ink: #1c1847;
  --cn-tile: color-mix(in srgb, var(--text) 7%, var(--surface));
  --cn-gap: 8px;
}
@media (prefers-color-scheme: dark) {
  /* …and deeper fills in dark mode (still dark ink for contrast). */
  .cn-frame { --cn-l1: #e9bd2f; --cn-l2: #5cc77a; --cn-l3: #6f9cf5; --cn-l4: #a985f5; --cn-tile: color-mix(in srgb, var(--text) 10%, var(--surface)); }
}

.cn-hint { margin: 0; text-align: center; font-weight: 700; color: var(--muted); min-height: 1.55em; }

.cn-board {
  display: flex; flex-direction: column; gap: var(--cn-gap);
  padding: 10px; border-radius: var(--r-tile);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 14px 34px -22px rgba(40, 30, 120, .45);
}
.cn-bars { display: flex; flex-direction: column; gap: var(--cn-gap); }
.cn-bars:empty { display: none; }
.cn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cn-gap); }

.cn-tile {
  position: relative; min-width: 0; aspect-ratio: 1.25; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--cn-tile); color: var(--text);
  font: inherit; font-family: var(--display); font-weight: 700; letter-spacing: .01em;
  transition: background-color .12s, color .12s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.cn-tile > span {
  display: inline-block; max-width: 100%; white-space: nowrap; line-height: 1.1;
  font-size: clamp(11px, 3.4vw, 17px);
}
.cn-tile.cn-wrap > span { white-space: normal; overflow-wrap: anywhere; text-align: center; font-size: 9px; }
@media (hover: hover) { .cn-tile:not(:disabled):not(.cn-sel):hover { background: color-mix(in srgb, var(--game) 14%, var(--cn-tile)); } }
.cn-tile:active:not(:disabled) { transform: scale(.96); }
.cn-tile.cn-sel { background: var(--game); color: #fff; }
.cn-tile:disabled { cursor: default; }
.cn-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cn-tile.cn-hop { animation: cn-hop .35s ease-out; }
.cn-tile.cn-shake { animation: cn-shake .4s ease-in-out; }
@keyframes cn-hop { 40% { transform: translateY(-6px); } }
@keyframes cn-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

.cn-bar {
  min-height: calc((min(560px, 100vw - 32px) - 20px - 3 * var(--cn-gap)) / 4 / 1.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 8px 12px; border-radius: 12px; text-align: center;
  background: var(--cn-col); color: var(--cn-ink);
}
.cn-bar strong { font-family: var(--display); font-weight: 800; font-size: clamp(13px, 3.6vw, 17px); letter-spacing: .02em; text-transform: uppercase; }
.cn-bar span { font-weight: 650; font-size: clamp(12px, 3.3vw, 15px); overflow-wrap: anywhere; }
.cn-l1 { --cn-col: var(--cn-l1); } .cn-l2 { --cn-col: var(--cn-l2); } .cn-l3 { --cn-col: var(--cn-l3); } .cn-l4 { --cn-col: var(--cn-l4); }
.cn-bar.cn-pop { animation: cn-pop .45s cubic-bezier(.2, .9, .3, 1.3); }
.cn-bar.cn-revealed { opacity: .8; background: repeating-linear-gradient(135deg, var(--cn-col) 0 10px, color-mix(in srgb, var(--cn-col) 82%, white) 10px 20px); }
@keyframes cn-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.cn-mistakes { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; color: var(--muted); }
.cn-dots { display: inline-flex; gap: 7px; }
.cn-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--text); transition: transform .2s, opacity .2s; }
.cn-dot-used { opacity: .15; transform: scale(.8); }

.cn-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cn-actions .btn { padding: 10px 16px; font-size: .92rem; }
@media (max-width: 400px) {
  .cn-frame { --cn-gap: 6px; }
  .cn-board { padding: 8px; }
  .cn-actions .btn { padding: 9px 12px; font-size: .86rem; }
}