/* FF-145 Phase 3 — the "play surface" skin. PROTOTYPE: tweak freely.
 *
 * Design contract (docs/design/claude-design-briefing/01_DESIGN_BRIEF.md):
 * calm, non-addictive, predictable — craft, not spectacle. Muted blues/greens
 * on quiet surfaces; incorrect is the informational blue, NEVER red; motion
 * minimal and guarded. Every visual decision below is a custom property on
 * .cg-play, so Claude Design can retheme by editing this token block alone —
 * markup classes are the stable contract (03_COMPONENT_INVENTORY.md posture).
 *
 * The skin is scoped: without .cg-play on the page root (the "Game look"
 * toggle, games-look.js, client-side preference only — D-G26) everything
 * falls back to plain Bootstrap.
 */

/* Design-retouch (feat-design-retouches): the --cg-p-* token block + the
   .cg-play base (background/radius/padding) moved to lc-play-skin.css, which
   re-points these names at the shared --lc-* palette and loads globally AFTER
   this file. Class names are preserved so the skin can still be lifted whole. */

.cg-play .cg-p-panel {
    background: var(--cg-p-card);
    border: 1px solid var(--cg-p-border);
    border-radius: var(--cg-p-radius);
    box-shadow: var(--cg-p-shadow);
    padding: 1.5rem;
    max-width: 640px;
    margin: 1rem auto;
}

.cg-play .cg-p-chip {
    display: inline-block;
    background: var(--cg-p-info-tint);
    color: var(--cg-p-info-ink);
    border-radius: 20px;
    padding: .15rem .75rem;
    font-weight: 500;
    font-size: .9rem;
}

/* ---- hangman ---- */
.cg-play .cg-hm-clue { text-align: center; color: var(--cg-p-muted); margin: .5rem 0 0; }
.cg-play .cg-hm-mask {
    font-size: 2rem;
    letter-spacing: .35em;
    text-align: center;
    margin: .75rem 0 .25rem;
    word-break: break-all;
    color: var(--cg-p-ink);
}
.cg-play .cg-hm-lives {
    text-align: center;
    color: var(--cg-p-accent);
    letter-spacing: .3em;
    font-size: 1.1rem;
}
.cg-hm-keys { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; max-width: 540px; margin: 1rem auto; }
.cg-hm-key {
    min-width: 2.5rem;
    padding: .45rem 0;
    border: 1px solid var(--cg-p-border, #dee2e6);
    border-radius: 8px;
    background: var(--cg-p-card, #fff);
    font-weight: 600;
}
.cg-play .cg-hm-key:hover:not(:disabled) { border-color: var(--cg-p-accent); }
.cg-hm-key:disabled { color: #6c757d; background: #f4f6f9; }
.cg-hm-key.cg-hit { background: var(--cg-p-good-tint, #e8f5e9); border-color: var(--cg-p-good, #198754); color: var(--cg-p-good-ink, #2e7d32); }
.cg-hm-key.cg-miss { background: var(--cg-p-info-tint, #e3f2fd); border-color: var(--cg-p-info, #0d6efd); color: var(--cg-p-info-ink, #1565c0); }

/* ---- memory ---- */
.cg-mem-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(70px, 1fr));
    gap: .6rem;
    max-width: 560px;
    margin: 1rem auto;
}
.cg-mem-tile {
    min-height: 64px;
    border: 1px solid var(--cg-p-border, #dee2e6);
    border-radius: var(--cg-p-radius, 12px);
    background: var(--cg-p-accent, #2563eb);
    color: var(--cg-p-accent-ink, #fff);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .4rem;
    text-align: center;
    font-size: .95rem;
    overflow-wrap: anywhere;
    transition: background-color .15s ease, transform .15s ease;
}
.cg-mem-tile.cg-up { background: var(--cg-p-card, #fff); color: var(--cg-p-ink, #212529); }
.cg-mem-tile.cg-done {
    background: var(--cg-p-good-tint, #e8f5e9);
    color: var(--cg-p-good-ink, #2e7d32);
    border-color: var(--cg-p-good, #198754);
}
.cg-play .cg-mem-tile:not(:disabled):not(.cg-up):not(.cg-done):hover { transform: translateY(-2px); }

/* ---- crossword ---- */
.cg-cw-board { overflow-x: auto; padding-bottom: .25rem; }
.cg-cw-grid {
    --cg-cw-size: 2.25rem;
    display: grid;
    gap: 2px;
    width: max-content;
    margin: 1rem auto;
}
@media (max-width: 420px) {
    .cg-cw-grid { --cg-cw-size: 1.9rem; }
}
.cg-cw-cell { position: relative; width: var(--cg-cw-size); height: var(--cg-cw-size); }
.cg-cw-cell input {
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid var(--cg-p-border, #dee2e6);
    border-radius: 4px;
    background: var(--cg-p-card, #fff);
    color: var(--cg-p-ink, #212529);
    caret-color: var(--cg-p-accent, #2563eb);
}
.cg-cw-cell input:focus {
    outline: none;
    border-color: var(--cg-p-accent, #2563eb);
    box-shadow: 0 0 0 2px var(--cg-p-info-tint, #e3f2fd);
}
.cg-cw-num {
    position: absolute;
    top: 1px;
    left: 3px;
    font-size: .55rem;
    line-height: 1;
    color: var(--cg-p-muted, #6c757d);
    pointer-events: none;
}
.cg-cw-cell.cg-active input { background: var(--cg-p-info-tint, #e3f2fd); }
/* Completed entries: revealed is informational blue (never red, D-G26);
   solved wins on shared squares by coming last. */
.cg-cw-cell.cg-revealed input {
    background: var(--cg-p-info-tint, #e3f2fd);
    color: var(--cg-p-info-ink, #1565c0);
    border-color: var(--cg-p-info, #0d6efd);
}
.cg-cw-cell.cg-solved input {
    background: var(--cg-p-good-tint, #e8f5e9);
    color: var(--cg-p-good-ink, #2e7d32);
    border-color: var(--cg-p-good, #198754);
}
.cg-play .cg-cw-cluebar { margin: .5rem auto 0; max-width: 480px; }
.cg-play .cg-cw-clue-text { text-align: center; color: var(--cg-p-ink); min-height: 1.5rem; margin: .25rem 0 .5rem; }
.cg-cw-clues {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .25rem 1.25rem;
    margin-top: 1rem;
}
.cg-cw-clues-h { font-size: .95rem; font-weight: 700; margin: .5rem 0 .25rem; }
.cg-cw-clue-list { list-style: none; margin: 0; padding: 0; }
.cg-cw-clue {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    border-radius: 6px;
    padding: .2rem .4rem;
    font-size: .9rem;
    color: var(--cg-p-ink, #212529);
}
.cg-play .cg-cw-clue:hover { background: var(--cg-p-info-tint); }
.cg-cw-clue.cg-selected { background: var(--cg-p-info-tint, #e3f2fd); color: var(--cg-p-info-ink, #1565c0); }
.cg-cw-clue.cg-done { color: var(--cg-p-muted, #6c757d); text-decoration: line-through; }
.cg-cw-clue-num { font-weight: 700; }
.cg-cw-note { font-size: .85rem; margin: .75rem 0 0; }

/* ---- accessibility guards (hard contracts, 02_CURRENT_VISUAL_SYSTEM §5) ---- */
@media (prefers-reduced-motion: reduce) {
    .cg-mem-tile { transition: none; }
    .cg-play .cg-mem-tile:hover { transform: none; }
}
@media (prefers-contrast: high) {
    .cg-play .cg-p-panel, .cg-mem-tile, .cg-hm-key, .cg-cw-cell input { border-width: 2px; }
}