/* Secret Word Game (assets/tools/custom-word-game.js). Tile colors use their own variables; everything else uses tokens. */
.tool { --cw-g: #2E8B57; --cw-y: #B8860B; --cw-x: #787C7E; }
.tool.cw-hc { --cw-g: #E8621E; --cw-y: #3B8FD9; }
@media (prefers-color-scheme: dark) { .tool { --cw-g: #3B9E63; --cw-y: #BE9020; --cw-x: #4A4A4E; } .tool.cw-hc { --cw-g: #F5793A; --cw-y: #4A9BE0; } }

.tool .cw-word { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.tool .cw-word .cw-input { text-transform: uppercase; letter-spacing: .12em; font-size: 20px; font-weight: 900; text-align: center; min-height: 52px; }
.tool .cw-preview { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 48px; }
.tool .cw-tile {
  width: 40px; height: 48px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; font-weight: 950; color: rgb(var(--ink));
  box-shadow: inset 0 0 0 2px rgb(var(--ink) / .12); transition: box-shadow .15s ease, transform .2s var(--ease-out);
}
.tool .cw-tile.is-filled { box-shadow: inset 0 0 0 2px rgb(var(--ink) / .5); animation: cw-pop .16s var(--ease-out); }
.tool .cw-tile.is-gap { box-shadow: none; width: 14px; }
.tool .cw-preview.is-hang .cw-tile { border-radius: 0; box-shadow: inset 0 -3px 0 rgb(var(--ink) / .3); width: 30px; }
.tool .cw-preview.is-hang .cw-tile.is-filled { box-shadow: inset 0 -3px 0 rgb(var(--accent)); }
.tool .cw-preview.is-hang .cw-tile.is-gap { box-shadow: none; width: 14px; }
@keyframes cw-pop { from { transform: scale(.9); } to { transform: scale(1); } }
.tool .cw-rule-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tool .cw-rule { font-size: 14px; line-height: 20px; font-weight: 750; color: rgb(var(--ink) / .55); }
.tool .cw-rule.is-ok { color: rgb(var(--ink) / .8); }
.tool .cw-idea { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 20px; font-size: 14px; font-weight: 800; color: var(--link); background: rgb(var(--accent) / .1); -webkit-tap-highlight-color: transparent; }
.tool .cw-idea .tool-icon { width: 18px; height: 18px; }
.tool .cw-idea:active { transform: scale(.96); }

.tool .cw-more { border-radius: 20px; background: var(--surface); }
.tool .cw-more summary { cursor: pointer; padding: 14px 16px; min-height: 48px; font-size: 15px; font-weight: 800; color: var(--link); list-style: none; border-radius: 20px; }
.tool .cw-more summary::-webkit-details-marker { display: none; }
.tool .cw-more summary::before { content: '+'; display: inline-block; width: 20px; font-weight: 900; transition: transform .2s var(--ease-out); }
.tool .cw-more[open] summary::before { transform: rotate(45deg); }
.tool .cw-more-body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }
.tool .cw-more input, .tool .cw-more textarea { background: rgb(var(--ink) / .04); }
.tool .cw-more textarea { min-height: 72px; }

.tool .cw-made { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); position: relative; }
.tool .cw-made.is-new { animation: card-in .45s var(--ease-out) both; }
.tool .cw-made-title { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 24px; font-weight: 900; color: rgb(var(--ink)); position: relative; }
.tool .cw-made-title .tool-icon { color: var(--cw-g); }
.tool .cw-link { font-size: 14px !important; color: rgb(var(--ink) / .7) !important; }
.tool .cw-here { font-size: 15px; text-align: center; }

.tool .cw-sent-wrap { display: flex; flex-direction: column; gap: 8px; }
.tool .cw-sent { display: grid; gap: 6px; }
.tool .cw-sent li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--surface); }
.tool .cw-sent-w { font-weight: 900; letter-spacing: .06em; color: rgb(var(--ink)); }
.tool .cw-sent-m { flex: 1; font-size: 13px; font-weight: 700; color: rgb(var(--ink) / .5); }
.tool .cw-sent-copy { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; color: rgb(var(--ink) / .6); }
.tool .cw-sent-copy:focus-visible, .tool .cw-key:focus-visible, .tool .cw-idea:focus-visible, .tool .cw-hint-btn:focus-visible, .tool .cw-more summary:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }

/* Play */
.tool .cw-play { gap: 14px; }
.tool .cw-hint-row { display: flex; }
.tool .cw-hint-btn { min-height: 40px; padding: 0 14px; border-radius: 20px; font-size: 14px; font-weight: 800; color: var(--link); background: rgb(var(--accent) / .1); }
.tool .cw-hint { padding: 10px 14px; border-radius: 16px; background: rgb(var(--accent) / .1); font-size: 15px; font-weight: 750; outline: 0; }
.tool .cw-board { display: grid; gap: 6px; align-self: center; width: min(100%, calc(var(--n) * 62px)); }
.tool .cw-row { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; }
.tool .cw-row.is-shake { animation: cw-shake .4s ease; }
.tool .cw-cell {
  aspect-ratio: 1; max-height: 58px; border-radius: 10px; display: grid; place-items: center; font-size: clamp(18px, 6vw, 28px); font-weight: 950;
  color: rgb(var(--ink)); background: var(--surface); box-shadow: inset 0 0 0 2px rgb(var(--ink) / .1); text-transform: uppercase;
}
.tool .cw-cell.is-typed { box-shadow: inset 0 0 0 2px rgb(var(--ink) / .45); animation: cw-pop .12s var(--ease-out); }
.tool .cw-cell[data-s] { color: #fff; box-shadow: none; }
.tool .cw-cell[data-s="g"] { background: var(--cw-g); }
.tool .cw-cell[data-s="y"] { background: var(--cw-y); }
.tool .cw-cell[data-s="x"] { background: var(--cw-x); }
.tool .cw-cell.is-flip { animation: cw-flip .45s ease both; }
@keyframes cw-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes cw-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.tool .cw-kb { display: flex; flex-direction: column; gap: 6px; user-select: none; -webkit-user-select: none; }
.tool .cw-kb-row { display: flex; gap: 5px; justify-content: center; }
.tool .cw-key {
  flex: 1 1 0; max-width: 44px; min-width: 0; height: 52px; border-radius: 8px; font-size: 16px; font-weight: 850; color: rgb(var(--ink));
  background: var(--surface); box-shadow: 0 1px 0 rgb(var(--ink) / .12); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, transform .1s ease; display: grid; place-items: center;
}
.tool .cw-key.is-wide { flex: 1.6 1 0; max-width: 68px; font-size: 13px; }
.tool .cw-key .tool-icon { width: 20px; height: 20px; }
.tool .cw-key:active { transform: scale(.94); }
.tool .cw-key[data-s] { color: #fff; }
.tool .cw-key[data-s="g"] { background: var(--cw-g); }
.tool .cw-key[data-s="y"] { background: var(--cw-y); }
.tool .cw-key[data-s="x"] { background: var(--cw-x); }
.tool .cw-key:disabled { cursor: default; }

.tool .cw-hearts { display: flex; justify-content: center; gap: 6px; }
.tool .cw-heart { width: 28px; height: 28px; color: rgb(var(--ink) / .25); transition: color .3s ease, transform .3s var(--ease-out); }
.tool .cw-heart.is-full { color: #E2407F; fill: currentColor; }
.tool .cw-hearts.is-shake { animation: cw-shake .4s ease; }
.tool .cw-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; min-height: 52px; margin: 4px 0; }
.tool .cw-slot-word { display: flex; gap: 6px; }
.tool .cw-slot { width: 30px; height: 44px; display: grid; place-items: end center; padding-bottom: 6px; box-shadow: inset 0 -3px 0 rgb(var(--ink) / .3); font-size: 26px; font-weight: 950; color: rgb(var(--ink)); }
.tool .cw-slot.is-hit { box-shadow: inset 0 -3px 0 rgb(var(--accent)); animation: cw-pop .2s var(--ease-out); }
.tool .cw-slot.is-missed { color: #E2407F; }
.tool .cw-wrong { text-align: center; font-size: 14px; font-weight: 750; color: rgb(var(--ink) / .55); letter-spacing: .04em; }

.tool .cw-result { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); text-align: center; position: relative; }
.tool .cw-result.is-new { animation: card-in .45s var(--ease-out) both; }
.tool .cw-result-title { font-size: 22px; line-height: 28px; font-weight: 950; position: relative; }
.tool .cw-answer { font-size: 34px; line-height: 40px; font-weight: 950; letter-spacing: .1em; color: var(--link); overflow-wrap: anywhere; }
.tool .cw-note { padding: 14px; border-radius: 18px; background: rgb(var(--accent) / .1); text-align: left; display: flex; flex-direction: column; gap: 4px; }
.tool .cw-note-text { font-size: 18px; line-height: 26px; font-weight: 800; color: rgb(var(--ink)); overflow-wrap: anywhere; }

@media (max-width: 380px) { .tool .cw-key { height: 48px; font-size: 15px; } .tool .cw-kb-row { gap: 4px; } }
@media (prefers-reduced-motion: reduce) {
  .tool .cw-cell.is-flip, .tool .cw-row.is-shake, .tool .cw-hearts.is-shake, .tool .cw-tile.is-filled, .tool .cw-cell.is-typed, .tool .cw-slot.is-hit, .tool .cw-result.is-new, .tool .cw-made.is-new { animation: none; }
}
/* The real text field sits invisibly over the tiles: tap the tiles to type, the tiles show what you type. */
.tool .cw-tilebox { position: relative; display: block; cursor: text; padding: 8px 0; }
.tool .cw-tilebox .cw-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; color: transparent; caret-color: transparent; z-index: 1; }
.tool .cw-tilebox .cw-preview { position: relative; min-height: 56px; }
.tool .cw-tilebox:focus-within .cw-tile.is-caret { box-shadow: inset 0 0 0 2px rgb(var(--accent)); animation: cw-caret 1s steps(2) infinite; }
.tool .cw-preview.is-hang .cw-tile.is-caret { box-shadow: inset 0 -3px 0 rgb(var(--accent)); }
.tool .cw-placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: rgb(var(--ink) / .45); background: var(--surface); pointer-events: none; }
.tool .cw-tilebox:focus-within .cw-placeholder { display: none; }
.tool .cw-tilebox:focus-within { outline: 0; }
@keyframes cw-caret { 50% { box-shadow: inset 0 0 0 2px rgb(var(--ink) / .12); } }
@media (prefers-reduced-motion: reduce) { .tool .cw-tilebox:focus-within .cw-tile.is-caret { animation: none; } }

/* Round 2: name field, note ideas, legend, result return trip, tally */
.tool .cw-from { padding: 0 4px; }
.tool .cw-note-ideas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -4px -16px 0; padding: 0 16px 2px; }
.tool .cw-note-ideas::-webkit-scrollbar { display: none; }
.tool .cw-note-ideas button { flex: none; min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: 13px; font-weight: 800; color: var(--link); background: rgb(var(--accent) / .1); -webkit-tap-highlight-color: transparent; }
.tool .cw-note-ideas button:active { transform: scale(.96); }
.tool .cw-make[hidden] { display: none; }
.tool .cw-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; font-size: 13px; line-height: 18px; font-weight: 800; color: rgb(var(--ink) / .7); }
.tool .cw-lg { display: inline-flex; align-items: center; gap: 6px; }
.tool .cw-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.tool .cw-sw[data-s="g"] { background: var(--cw-g); } .tool .cw-sw[data-s="y"] { background: var(--cw-y); } .tool .cw-sw[data-s="x"] { background: var(--cw-x); }
.tool .cw-legend .u23-switch { font-size: 13px; min-height: 36px; }
.tool .cw-time { font-size: 15px; font-weight: 800; color: rgb(var(--ink) / .6); }
.tool .cw-note { padding: 18px; gap: 6px; text-align: center; background: linear-gradient(135deg, rgb(var(--accent) / .16), rgb(var(--accent) / .06)); box-shadow: inset 0 0 0 1.5px rgb(var(--accent) / .35); position: relative; }
.tool .cw-note-from { font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
.tool .cw-note-text { font-size: 22px; line-height: 30px; font-weight: 900; }
.tool .cw-me { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.tool .cw-me input { min-height: 44px; font-size: 16px; }
.tool .cw-tally { font-size: 14px; line-height: 20px; font-weight: 750; color: rgb(var(--ink) / .7); }
.tool .cw-board.is-small { width: min(100%, calc(var(--n) * 36px)); gap: 4px; }
.tool .cw-board.is-small .cw-row { gap: 4px; }
.tool .cw-board.is-small .cw-cell { height: 30px; border-radius: 6px; }
/* Round 3: fit board + keyboard on one phone screen, compact hint, single next action */
.tool .cw-cell { max-height: clamp(38px, calc((100svh - 470px) / 6), 58px); }
.tool .cw-board { width: min(100%, calc(var(--n) * clamp(44px, calc((100svh - 470px) / 6 + 6px), 62px))); }
.tool .cw-play .tool-title { font-size: 19px; line-height: 24px; }
.tool .cw-play .tool-sub { font-size: 14px; line-height: 19px; }
.tool .cw-hint-btn { min-height: 32px; padding: 0 12px; font-size: 13px; }
.tool .cw-hint-row { display: flex; justify-content: center; }
.tool .cw-key { height: clamp(42px, 6svh, 52px); }
.tool .cw-hc-row { display: flex; justify-content: center; }
.tool .cw-hc-row .u23-switch { font-size: 13px; }
.tool .cw-next { align-self: center; }
.tool .cw-me[hidden] { display: none; }
.tool .cw-more[open] summary::before { content: '\2212'; transform: none; }
.tool .cw-note-ideas { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
/* Round 4 */
.tool .cw-next { align-self: stretch; width: 100%; }
.tool .cw-hint-btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
.tool .cw-as { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; font-size: 14px; font-weight: 750; color: rgb(var(--ink) / .7); }
.tool .cw-as[hidden], .tool .cw-from[hidden] { display: none; }
.tool .cw-as-edit { min-height: 40px; padding: 0 10px; font-weight: 850; color: var(--link); }
.tool .cw-locked { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--link); }
.tool .cw-locked .tool-icon { width: 16px; height: 16px; }
.tool .cw-clock { text-align: center; font-size: 14px; font-weight: 850; color: rgb(var(--ink) / .55); font-variant-numeric: tabular-nums; margin: -6px 0; }
.tool .cw-hearts { position: relative; }
.tool .cw-hearts::after { content: attr(data-left); margin-left: 8px; font-size: 13px; font-weight: 850; color: rgb(var(--ink) / .6); align-self: center; }
.tool .cw-next { min-height: 52px; }
.tool .cw-hint-row { align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.tool .cw-hint-row .cw-clock { margin: 0; min-width: 40px; }
.tool .cw-clock[hidden] { display: none; }
.tool .cw-hint { text-align: center; }
/* Round 5 */
.tool .cw-idea-note { font-size: 13px; line-height: 18px; font-weight: 750; color: rgb(var(--ink) / .6); text-align: center; }
.tool .cw-idea-note:empty { display: none; }
.tool .cw-back-title, .tool .cw-center { text-align: center; }
.tool .cw-result .tool-actions .btn { min-width: 9.5em; }
@media (prefers-color-scheme: dark) {
  .tool .cw-word, .tool .cw-more, .tool .cw-made { box-shadow: var(--shadow), inset 0 0 0 1px rgb(var(--ink) / .14); }
  .tool .cw-input, .tool .cw-more input, .tool .cw-more textarea, .tool .cw-from input { box-shadow: inset 0 0 0 1px rgb(var(--ink) / .22) !important; }
  .tool .cw-cell { box-shadow: inset 0 0 0 2px rgb(var(--ink) / .22); }
}
.tool .cw-play > .cw-answer, .tool .cw-play > .cw-tally { text-align: center; }