/* =============================================================================
 * textStyleCrossyCrab — crossword ticket layout + DOM-side theming
 *
 * Applied to .play-area-display, .your-letters-display, .bonus-letters-display
 * simultaneously by the page when ticket.textStyleName === "textStyleCrossyCrab".
 *
 * Selector matters: prefix each block with the textStyle class AND target the
 * specific region (.play-area-display, .your-letters-display, etc.), since the
 * same class lands on all three elements.
 *
 * The canvas elements (play grid cover, cell colors, hatch, outline) are
 * painted directly via JS and pull their palette from the ticket JSON's
 * crosswordConfig.colors block — not from CSS.
 * ============================================================================= */

/* -- Play grid region (the crossword puzzle) ---------------------------------- */
.play-area-display.textStyleCrossyCrab {
    /* Position + size of the play grid as percentages of the ticket frame. */
    top:    35%;
    left:   24.5%;
    width:  72%;
    /* Height auto-derives from aspect-ratio (square by default). To force
       a non-square grid bounding box, override aspect-ratio OR set height. */
    /* aspect-ratio: 1 / 1; */
    /* height: 60%; */
}

/* -- Letters inside the grid -------------------------------------------------- */
/* The font-size is computed from --letter-cqw (set by JS based on grid width).
   Override the multiplier here to make letters bigger/smaller relative to cells. */
.play-area-display.textStyleCrossyCrab .lettersGrid .cell {
    /* Tweak the 0.6 multiplier — higher = fatter letters per cell. JS sets the
       default ratio via --letter-cqw; override by computing your own here. */
    /* font-size: calc(var(--letter-cqw, 5.5) * 1cqw); */
    font-family: Arial, sans-serif;
    font-weight: 700;
    color: #000;
}

/* Bonus symbol cells (where a star/crab/etc. lives instead of a letter). */
.play-area-display.textStyleCrossyCrab .lettersGrid .cell.symbol {
    color: #b06a00;
    font-size: calc(var(--letter-cqw, 5.5) * 1.1cqw);  /* slight bump for emphasis */
}

.play-area-display.textStyleCrossyCrab .lettersGrid .cell[data-symbol-type="crab"] {
    color: #000;
}
.play-area-display.textStyleCrossyCrab .lettersGrid .cell[data-symbol-type="crab"] img {
    /* If the symbol uses imageHref instead of displayChar, this styles the img */
    max-width: 70% !important;
}

/* -- Your Letters region ------------------------------------------------------ */
.your-letters-display.textStyleCrossyCrab {
    top: 89.5%;
    left: 21%;
    width: 54%;
    height: 10%;
}
.your-letters-display.textStyleCrossyCrab .letters-row {
    /* 7 columns of equal width — change this number to choose row length */
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    font-family: Arial, sans-serif;
	 font-size: 4.5cqw;
    gap: 0.2em 0.3em;          /* row-gap   column-gap */
    align-content: center;     /* vertical centering when rows take less height than container */
    justify-items: center;     /* center each chip inside its grid cell */
    align-items: center;
}

.your-letters-display.textStyleCrossyCrab .letter-chip {
    /* Optional: make chips share a stable size so they don't shift per-letter */
    text-align: center;
    min-width: 1em;
}

/* -- Bonus Letters region ----------------------------------------------------- */
.bonus-letters-display.textStyleCrossyCrab {
    top: 82%;
    left: 6%;
    width: 9%;
    height: 16%;
}
.bonus-letters-display.textStyleCrossyCrab .letters-row {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    font-family: Arial, sans-serif;
	 font-size: 4.5cqw;
    gap: 2.2em;
    align-content: center;
    justify-items: center;
    align-items: center;
}
.bonus-letters-display.textStyleCrossyCrab .letter-chip {
    color: #000;  /* override the default secondary-color binding */
    background-color: #ffc4db;
    font-weight: 700;
}

#receiptPlayAgainBtn {
    color: var(--text-on-secondary, #000);
}
#receiptHomeBtn {
    /* Home button has a light grey background (#f1f1f1) per scratchoff.css.
       Black text reads cleanly on that — no need to compute contrast. */
    color: #000;
}