@layer game {
  .mozaika-mark { display: grid; grid-template-columns: 1fr 1fr; gap: 0.18rem; width: 2.8rem; height: 2.8rem; padding: 0.3rem; border-radius: 0.65rem; background: #233b37; transform: rotate(-4deg); }
  .mozaika-mark i { border-radius: 0.15rem; background: #e7a95a; }
  .mozaika-mark i:nth-child(2) { background: #82bcb3; }
  .mozaika-mark i:nth-child(3) { background: #a5aacb; }
  .mozaika-mark i:nth-child(4) { background: #d58184; }
  .mozaika-field { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem; align-items: center; gap: 1.2rem; width: 100%; max-width: 36rem; margin: 0.8rem auto; padding: 0.25rem; }
  .mozaika-frame { min-width: 0; }
  .mozaika-columns { display: grid; grid-template-columns: repeat(6, 1fr); padding: 0 0.55rem 0.4rem 1.75rem; }
  .mozaika-columns span, .mozaika-rows span { font: 800 0.65rem var(--gse-font-mono); color: var(--gse-color-text-muted); text-align: center; }
  .mozaika-board-row { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.2rem; }
  .mozaika-rows { display: grid; grid-template-rows: repeat(6, 1fr); align-items: center; padding-block: 0.55rem; }
  .mozaika-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.22rem; width: 100%; aspect-ratio: 1; padding: 0.55rem; border-radius: 0.8rem; background: #283f3b; box-shadow: 0 0.3rem 0 #172d29, inset 0 0 0 1px #172d29; }
  .mozaika-cell { position: relative; aspect-ratio: 1; min-width: 0; min-height: 0; padding: 0; display: grid; place-items: center; border: 1px solid #78928b; border-radius: 0.25rem; background: #d6dfd2; box-shadow: inset 0 2px 3px rgb(18 41 34 / 12%); color: #223833; font: 900 clamp(0.65rem, 1.4vw, 0.9rem) var(--gse-font-mono); touch-action: manipulation; }
  .mozaika-cell[data-blocked="true"] { color: #eee6d4; background: repeating-linear-gradient(135deg, #415650 0 4px, #3b4f49 4px 8px); border-color: #71847c; box-shadow: inset 0 0 0 2px #2c4039; }
  .mozaika-cell[data-piece], .mozaika-mini-cell { background: var(--mozaika-color); border-color: rgb(20 42 35 / 30%); box-shadow: inset 0 2px 0 rgb(255 255 255 / 35%), inset 0 -3px 0 rgb(20 42 35 / 16%); }
  .mozaika-cell[data-piece="0"], .mozaika-piece[data-piece="0"] { --mozaika-color: #9fadd5; }
  .mozaika-cell[data-piece="1"], .mozaika-piece[data-piece="1"] { --mozaika-color: #dfa978; }
  .mozaika-cell[data-piece="2"], .mozaika-piece[data-piece="2"] { --mozaika-color: #e5ba50; }
  .mozaika-cell[data-piece="3"], .mozaika-piece[data-piece="3"] { --mozaika-color: #b897c8; }
  .mozaika-cell[data-piece="4"], .mozaika-piece[data-piece="4"] { --mozaika-color: #96bc8c; }
  .mozaika-cell[data-piece="5"], .mozaika-piece[data-piece="5"] { --mozaika-color: #83bdb6; }
  .mozaika-cell[data-piece="6"], .mozaika-piece[data-piece="6"] { --mozaika-color: #82b6d4; }
  .mozaika-cell[data-piece="7"], .mozaika-piece[data-piece="7"] { --mozaika-color: #e4957a; }
  .mozaika-cell[data-piece="8"], .mozaika-piece[data-piece="8"] { --mozaika-color: #d58d9c; }
  .mozaika-cell.is-preview { box-shadow: inset 0 0 0 3px #fff9e9, inset 0 0 0 6px #315c49; }
  .mozaika-cell.is-invalid { box-shadow: inset 0 0 0 3px #b34034; }
  .mozaika-cell:focus-visible { outline: 3px solid #e7b95e; outline-offset: 1px; z-index: 1; }
  .mozaika-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .mozaika-piece { position: relative; min-width: 0; min-height: 4.6rem; padding: 0.45rem 0.2rem 0.2rem; border: 1px solid #cebf9f; border-radius: 0.55rem; background: #fff8e7; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.2rem; touch-action: manipulation; }
  .mozaika-piece[data-selected="true"] { border-color: #2b5344; outline: 2px solid #2b5344; outline-offset: 1px; background: #edf1dc; }
  .mozaika-piece:disabled { opacity: 0.3; background: transparent; }
  .mozaika-piece:focus-visible { outline: 3px solid #2b5344; outline-offset: 2px; }
  .mozaika-mini { display: grid; grid-template-columns: repeat(4, 0.55rem); grid-template-rows: repeat(4, 0.55rem); gap: 1px; width: max-content; height: 2.4rem; }
  .mozaika-mini-cell { border: 1px solid rgb(20 42 35 / 20%); border-radius: 0.1rem; }
  .mozaika-mini-cell[data-x="0"] { grid-column: 1; }
  .mozaika-mini-cell[data-x="1"] { grid-column: 2; }
  .mozaika-mini-cell[data-x="2"] { grid-column: 3; }
  .mozaika-mini-cell[data-x="3"] { grid-column: 4; }
  .mozaika-mini-cell[data-y="0"] { grid-row: 1; }
  .mozaika-mini-cell[data-y="1"] { grid-row: 2; }
  .mozaika-mini-cell[data-y="2"] { grid-row: 3; }
  .mozaika-mini-cell[data-y="3"] { grid-row: 4; }
  .mozaika-piece-label { color: var(--gse-color-text-muted); font: 800 0.6rem var(--gse-font-mono); }
  @media (max-width: 35rem) {
    .mozaika-field { grid-template-columns: minmax(0, 1fr); max-width: 25rem; gap: 1rem; padding-inline: 0.3rem; }
    .mozaika-tray { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-left: 1.2rem; gap: 0.45rem; }
    .mozaika-piece { min-height: 4.2rem; }
    .mozaika-cell { font-size: 0.8rem; }
  }
}