/* Only board mechanics and artwork; page chrome belongs to the engine. */
@layer game {
  .kvartaly-field, .kvartaly-city-mark, .kvartaly-result-map, .kvartaly-share-preview {
    --kvartaly-coral: #e77a61;
    --kvartaly-mint: #9fcdb3;
    --kvartaly-gold: #e5c66f;
    --kvartaly-blue: #8bb9c5;
    --kvartaly-lilac: #b7a9ca;
    --kvartaly-rose: #d9a1a6;
    --kvartaly-error: #b93d38;
  }

  .kvartaly-city-mark {
    width: 2.9rem;
    height: 2.9rem;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.16rem;
    padding: 0.22rem;
    border: 0.14rem solid var(--gse-color-text);
    border-radius: 0.75rem;
    background: var(--gse-color-text);
    box-shadow: 0 3px 0 var(--gse-color-depth);
    transform: rotate(-3deg);
  }
  .kvartaly-city-mark i { display: block; border-radius: 0.18rem; }
  .kvartaly-city-mark i:nth-child(1) { grid-row: 1 / 3; background: var(--kvartaly-coral); }
  .kvartaly-city-mark i:nth-child(2) { background: var(--kvartaly-mint); }
  .kvartaly-city-mark i:nth-child(3) { background: var(--kvartaly-gold); }

  .kvartaly-field { display: grid; place-items: center; padding: 0.5rem 1rem 1.2rem; }
  .kvartaly-board {
    --kvartaly-board-gap: 0.22rem;
    --kvartaly-board-size: 5;
    width: min(100%, 26rem);
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(var(--kvartaly-board-size), minmax(0, 1fr));
    grid-template-rows: repeat(var(--kvartaly-board-size), minmax(0, 1fr));
    gap: var(--kvartaly-board-gap);
    padding: 0.38rem;
    border: 0.13rem solid var(--gse-color-text);
    border-radius: 1.15rem;
    background: var(--gse-color-text);
    box-shadow: 0 0.4rem 0 var(--gse-color-depth), 0 0.55rem 0.8rem rgb(35 59 56 / 10%);
    touch-action: none;
    user-select: none;
  }
  .kvartaly-board[data-size="7"] {
    --kvartaly-board-size: 7;
    --kvartaly-board-gap: 0.17rem;
    width: min(100%, 30rem);
  }
  .kvartaly-district-cell {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 0.48rem;
    color: var(--gse-color-text);
    background: #efe9d9;
    box-shadow: inset 0 0 0 1px rgb(56 113 92 / 10%);
    transition: background 140ms, box-shadow 140ms, transform 140ms, filter 140ms;
  }
  .kvartaly-district-cell::before {
    content: "";
    position: absolute;
    inset: 0.32rem;
    border: 1px dashed rgb(35 59 56 / 10%);
    border-radius: 0.28rem;
    pointer-events: none;
  }
  .kvartaly-district-cell:hover { filter: brightness(1.035); }
  .kvartaly-district-cell:active { transform: scale(0.97); }
  .kvartaly-district-cell[data-filled="true"] { box-shadow: inset 0 0 0 1px rgb(35 59 56 / 20%); }
  .kvartaly-district-cell[data-color="0"] { background: color-mix(in srgb, var(--kvartaly-coral) 72%, white); }
  .kvartaly-district-cell[data-color="1"] { background: color-mix(in srgb, var(--kvartaly-mint) 78%, white); }
  .kvartaly-district-cell[data-color="2"] { background: color-mix(in srgb, var(--kvartaly-gold) 74%, white); }
  .kvartaly-district-cell[data-color="3"] { background: color-mix(in srgb, var(--kvartaly-blue) 72%, white); }
  .kvartaly-district-cell[data-color="4"] { background: color-mix(in srgb, var(--kvartaly-lilac) 67%, white); }
  .kvartaly-district-cell[data-color="5"] { background: color-mix(in srgb, var(--kvartaly-rose) 67%, white); }
  .kvartaly-district-cell[data-preview="true"] {
    background: var(--gse-color-bonus-soft);
    box-shadow: inset 0 0 0 0.2rem var(--gse-color-bonus-strong);
  }
  .kvartaly-district-cell[data-anchor="true"] {
    box-shadow: inset 0 0 0 0.24rem var(--gse-color-text);
  }
  .kvartaly-district-cell[data-selected="true"] {
    box-shadow: inset 0 0 0 0.2rem white, inset 0 0 0 0.34rem var(--gse-color-text);
  }
  .kvartaly-district-cell[data-error="true"] {
    background:
      repeating-linear-gradient(135deg, rgb(185 61 56 / 20%) 0 0.45rem, rgb(255 255 255 / 25%) 0.45rem 0.9rem),
      var(--gse-color-error-soft);
    box-shadow: inset 0 0 0 0.18rem var(--kvartaly-error);
  }
  .kvartaly-district-cell[data-error="true"]::after {
    content: "×";
    position: absolute;
    top: 0.18rem;
    right: 0.32rem;
    color: var(--kvartaly-error);
    font-size: 0.85rem;
    font-weight: 900;
  }
  .kvartaly-cell-clue {
    position: relative;
    z-index: 1;
    width: clamp(1.65rem, 48%, 2.7rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--gse-color-text);
    font-size: clamp(0.78rem, 2.4vw, 1.22rem);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    background: rgb(252 247 236 / 92%);
    box-shadow: 0 2px 0 rgb(35 59 56 / 18%);
  }
  .kvartaly-region-label {
    position: absolute;
    z-index: 1;
    left: 0.32rem;
    bottom: 0.24rem;
    min-width: 1.2rem;
    height: 1.2rem;
    padding-inline: 0.25rem;
    display: grid;
    place-items: center;
    border-radius: 99px;
    color: var(--gse-color-text);
    font-size: 0.52rem;
    font-weight: 900;
    background: rgb(252 247 236 / 84%);
  }
  .kvartaly-result-map { width: 14rem; max-width: 100%; height: 5rem; display: grid; grid-template-columns: 1fr 1.4fr 0.8fr; grid-template-rows: 1fr 1fr; gap: 0.3rem; padding: 0.3rem; border-radius: 0.8rem; background: var(--gse-color-text); }
  .kvartaly-result-map i { border-radius: 0.25rem; }
  .kvartaly-result-map i:nth-child(1) { grid-row: 1 / 3; background: var(--kvartaly-coral); }
  .kvartaly-result-map i:nth-child(2) { background: var(--kvartaly-mint); }
  .kvartaly-result-map i:nth-child(3) { background: var(--kvartaly-gold); }
  .kvartaly-result-map i:nth-child(4) { grid-column: 2 / 3; background: var(--kvartaly-blue); }
  .kvartaly-result-map i:nth-child(5) { background: var(--kvartaly-lilac); }
  .kvartaly-share-preview {
    width: min(18rem, calc(100vw - 7rem));
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(7, minmax(0, 1fr));
    gap: 0.16rem;
    margin: 0.75rem auto;
    padding: 0.38rem;
    border: 0.13rem solid var(--gse-color-text);
    border-radius: 1rem;
    background: var(--gse-color-text);
  }
  .kvartaly-share-preview span {
    min-width: 0;
    display: grid;
    place-items: center;
    border-radius: 0.38rem;
    color: var(--gse-color-text-muted);
    font-size: clamp(0.68rem, 2.7vw, 1rem);
    font-weight: 800;
    background: #efe9d9;
    box-shadow: inset 0 0 0 1px rgb(56 113 92 / 10%);
  }
  .kvartaly-share-preview span[data-clue="true"] {
    color: var(--gse-color-text);
    background: color-mix(in srgb, var(--kvartaly-gold) 42%, white);
  }
  @media (max-width: 35rem) {
    .kvartaly-board { --kvartaly-board-gap: 0.17rem; padding: 0.28rem; border-radius: 0.8rem; }
    .kvartaly-board[data-size="7"] { --kvartaly-board-gap: 0.12rem; }
    .kvartaly-district-cell { border-radius: 0.32rem; }
    .kvartaly-district-cell::before { inset: 0.22rem; }
    .kvartaly-cell-clue { font-size: clamp(0.8rem, 4.4vw, 1.1rem); }
    .kvartaly-board[data-size="7"] .kvartaly-cell-clue { width: clamp(1.5rem, 62%, 2rem); font-size: clamp(0.72rem, 3.6vw, 0.95rem); }
    .kvartaly-board[data-size="7"] .kvartaly-region-label { left: 0.15rem; bottom: 0.12rem; min-width: 1rem; height: 1rem; font-size: 0.46rem; }
    .kvartaly-share-preview { width: min(18rem, calc(100vw - 4.5rem)); gap: 0.12rem; padding: 0.28rem; }
  }
}