/* Page chrome belongs to the engine; only gameplay and artwork live here. */
@layer game {
  .chromatika-field, .chromatika-mark, .chromatika-spectrum, .chromatika-rule-example {
    --chromatika-red: #d24440;
    --chromatika-red-depth: #a12d2a;
    --chromatika-blue: #2775c9;
    --chromatika-blue-depth: #185796;
    --chromatika-green: #23865d;
    --chromatika-green-depth: #176543;
    --chromatika-yellow: #f2c84b;
    --chromatika-yellow-depth: #c39c27;
  }

  /* Keep focus rings, shadows and shake effects inside the engine's paint boundary. */
  .chromatika-field { display: grid; gap: clamp(1.6rem, 4vh, 2.4rem); padding: 0.5rem; }
  .chromatika-mark {
    width: 2.85rem;
    height: 2.85rem;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
    border: 0.18rem solid var(--gse-color-surface);
    border-radius: 0.8rem;
    box-shadow: 0 3px 0 var(--gse-color-depth);
    transform: rotate(-4deg);
  }
  .chromatika-mark i:nth-child(1), .chromatika-spectrum i:nth-child(1) { background: var(--chromatika-red); }
  .chromatika-mark i:nth-child(2), .chromatika-spectrum i:nth-child(2) { background: var(--chromatika-blue); }
  .chromatika-mark i:nth-child(3), .chromatika-spectrum i:nth-child(3) { background: var(--chromatika-green); }
  .chromatika-mark i:nth-child(4), .chromatika-spectrum i:nth-child(4) { background: var(--chromatika-yellow); }

  .chromatika-prompt-card {
    min-height: 15rem;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 1.5rem;
    border: 1px solid var(--gse-color-border);
    border-radius: 1.5rem;
    background: var(--gse-color-surface-muted);
    box-shadow: inset 0 0 0 0.35rem rgb(255 255 255 / 25%);
    transition: border-color 140ms, background 140ms, transform 140ms;
  }
  .chromatika-prompt-card > p {
    margin: 0 0 1rem;
    color: var(--gse-color-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .chromatika-prompt-card > strong {
    max-width: 100%;
    font-family: var(--gse-font-display);
    font-size: clamp(2.65rem, 8vw, 5.3rem);
    font-weight: 900;
    letter-spacing: -0.065em;
    line-height: 0.95;
    text-align: center;
    text-wrap: balance;
    text-shadow: 0 3px 0 rgb(35 59 56 / 10%);
  }
  .chromatika-prompt-card > strong[data-ink="red"] { color: var(--chromatika-red); }
  .chromatika-prompt-card > strong[data-ink="blue"] { color: var(--chromatika-blue); }
  .chromatika-prompt-card > strong[data-ink="green"] { color: var(--chromatika-green); }
  .chromatika-prompt-card > strong[data-ink="yellow"] { color: var(--chromatika-yellow-depth); }
  .chromatika-prompt-card.is-entering > strong { animation: chromatika-word-in 180ms var(--gse-ease-out); }
  .chromatika-prompt-card.is-correct { border-color: var(--gse-color-success); background: var(--gse-color-success-soft); }
  .chromatika-prompt-card.is-wrong { border-color: var(--gse-color-error); background: var(--gse-color-error-soft); animation: chromatika-card-shake 170ms ease-in-out; }

  .chromatika-feedback {
    min-height: 1.25rem;
    margin-top: 1rem;
    color: var(--gse-color-text-muted);
    font-size: 0.75rem;
    font-weight: 800;
  }
  .chromatika-feedback[data-state="success"] { color: var(--gse-color-success); }
  .chromatika-feedback[data-state="error"] { color: var(--gse-color-error); }

  .chromatika-answer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }
  .chromatika-color-button {
    position: relative;
    min-height: 5.5rem;
    padding: 0.8rem 0.5rem 1rem;
    display: grid;
    place-content: center;
    gap: 0.55rem;
    border: 0;
    border-radius: 1rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    box-shadow: 0 0.32rem 0 var(--chromatika-button-depth);
    transition: filter 140ms, transform 140ms, box-shadow 140ms;
  }
  .chromatika-color-button:hover { filter: brightness(1.08); transform: translateY(-2px); }
  .chromatika-color-button:active { transform: translateY(0.24rem); box-shadow: 0 0.08rem 0 var(--chromatika-button-depth); }
  .chromatika-color-button[data-color="red"] { --chromatika-button-depth: var(--chromatika-red-depth); background: var(--chromatika-red); }
  .chromatika-color-button[data-color="blue"] { --chromatika-button-depth: var(--chromatika-blue-depth); background: var(--chromatika-blue); }
  .chromatika-color-button[data-color="green"] { --chromatika-button-depth: var(--chromatika-green-depth); background: var(--chromatika-green); }
  .chromatika-color-button[data-color="yellow"] { --chromatika-button-depth: var(--chromatika-yellow-depth); color: #3d351d; background: var(--chromatika-yellow); }
  .chromatika-color-button kbd {
    width: 1.5rem;
    height: 1.5rem;
    margin: auto;
    display: grid;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 0.38rem;
    font: 800 0.58rem var(--gse-font-mono);
    opacity: 0.72;
  }

  .chromatika-spectrum { width: 5.2rem; height: 1rem; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border-radius: 99px; transform: rotate(-3deg); }
  .chromatika-rule-example {
    padding: 1.2rem;
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    border-radius: 1rem;
    color: var(--gse-color-text-muted);
    font-size: 0.7rem;
    background: var(--gse-color-surface-muted);
  }
  .chromatika-rule-example strong { color: var(--chromatika-blue); font-size: 2rem; letter-spacing: -0.04em; }
  .chromatika-rule-example b { color: var(--chromatika-blue); font-size: 0.8rem; }
  @keyframes chromatika-word-in {
    from { opacity: 0; transform: translateY(-0.5rem) scale(0.97); }
    to { opacity: 1; transform: none; }
  }
  @keyframes chromatika-card-shake {
    25% { transform: translateX(-0.35rem); }
    75% { transform: translateX(0.35rem); }
  }
  @media (max-width: 49.375rem) {
    .chromatika-prompt-card { min-height: 11.5rem; }
    .chromatika-answer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chromatika-color-button { min-height: 4.4rem; }
  }
  @media (max-width: 32.5rem) {
    .chromatika-prompt-card > strong { font-size: clamp(2.35rem, 13vw, 3.6rem); }
    .chromatika-prompt-card { min-height: 10.5rem; padding-inline: 0.7rem; }
    .chromatika-color-button { min-height: 4rem; }
  }
}