/* Daily Word: length switch, guess grid, keyboard, results and stats. Our colours:
   cobalt = right spot, tangerine = wrong spot, slate = not in the word. */
.dw-page { --dw-c: #2d63d8; --dw-p: #f08a24; --dw-a: #878c99; --dw-empty: #e9dfd2; --dw-key: #efe6da; }
.dw-page [hidden] { display: none !important; }

.dw-lens { display: flex; gap: 6px; margin: 0 0 10px; background: var(--cbx-soft); padding: 4px; border-radius: 14px; }
.dw-lens button { flex: 1; border: 0; background: transparent; padding: 10px 6px; border-radius: 11px; font: 900 15px var(--cbx-body); color: var(--cbx-muted); cursor: pointer; white-space: nowrap; }
.dw-lens button[aria-selected="true"] { background: #fff; color: var(--cbx-ink); box-shadow: 0 2px 6px rgba(42, 29, 23, .12); }
.dw-tick { color: var(--dw-c); }

.dw-card { padding: 12px 12px 16px; }
.dw-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.dw-top-r { display: flex; align-items: center; gap: 8px; }
.dw-pill { font: 900 13px var(--cbx-body); background: color-mix(in srgb, var(--cbx-accent) 12%, #fff); color: color-mix(in srgb, var(--cbx-accent) 70%, #000); padding: 6px 11px; border-radius: 999px; }
.dw-icon { border: 0; background: var(--cbx-soft); width: 36px; height: 34px; border-radius: 10px; font-size: 17px; cursor: pointer; }
.dw-hard { display: inline-flex; align-items: center; gap: 6px; font: 900 13px var(--cbx-body); color: var(--cbx-ink-2); cursor: pointer; user-select: none; }
.dw-hard input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dw-switch { width: 34px; height: 20px; border-radius: 999px; background: #d9cfc4; position: relative; transition: background .15s; }
.dw-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.dw-hard input:checked + .dw-switch { background: var(--dw-c); }
.dw-hard input:checked + .dw-switch::after { transform: translateX(14px); }
.dw-hard input:focus-visible + .dw-switch { outline: 3px solid color-mix(in srgb, var(--dw-c) 45%, transparent); outline-offset: 2px; }
.dw-hard.locked { opacity: .55; }

.dw-stage { position: relative; margin: 12px 0 10px; }
.dw-board { --n: 5; display: grid; gap: 6px; width: min(100%, calc(var(--n) * 62px)); margin: 0 auto; }
.dw-row { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; }
.dw-tile { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px var(--dw-empty); font: 900 min(30px, calc(52vw / var(--n)))/1 var(--cbx-body); color: var(--cbx-ink); text-transform: uppercase; user-select: none; }
.dw-tile.full { box-shadow: inset 0 0 0 2px #b9a898; }
.dw-tile.c, .dw-tile.p, .dw-tile.a { color: #fff; box-shadow: none; }
.dw-tile.c { background: var(--dw-c); }
.dw-tile.p { background: var(--dw-p); }
.dw-tile.a { background: var(--dw-a); }
.dw-tile.pop { animation: dw-pop .12s ease-out; }
.dw-tile.flip { animation: dw-flip .36s ease-in-out both; }
.dw-row.shake { animation: dw-shake .4s; }
.dw-row.win .dw-tile { animation: dw-hop .5s ease-out both; }
.dw-row.win .dw-tile:nth-child(2) { animation-delay: .06s; } .dw-row.win .dw-tile:nth-child(3) { animation-delay: .12s; }
.dw-row.win .dw-tile:nth-child(4) { animation-delay: .18s; } .dw-row.win .dw-tile:nth-child(5) { animation-delay: .24s; }
.dw-row.win .dw-tile:nth-child(6) { animation-delay: .3s; } .dw-row.win .dw-tile:nth-child(7) { animation-delay: .36s; }
@keyframes dw-pop { 50% { transform: scale(1.1); } }
@keyframes dw-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes dw-shake { 15%, 55% { transform: translateX(-7px); } 35%, 75% { transform: translateX(7px); } }
@keyframes dw-hop { 40% { transform: translateY(-12px); } 70% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .dw-tile.pop, .dw-tile.flip, .dw-row.shake, .dw-row.win .dw-tile { animation: none; } }

.dw-card .dw-toast { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -6px); max-width: 90%; padding: 9px 14px; border-radius: 12px; background: #1f2a44; color: #fff; font: 900 15px/1.3 var(--cbx-body); text-align: center; box-shadow: 0 10px 24px rgba(20, 25, 45, .3); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; }
.dw-card .dw-toast.on { opacity: 1; transform: translate(-50%, 0); }

.dw-keys { display: grid; gap: 6px; margin-top: 4px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.dw-krow { display: flex; gap: 5px; justify-content: center; }
.dw-key { flex: 1 1 0; min-width: 0; max-width: 46px; height: 54px; border: 0; border-radius: 9px; padding: 0; background: var(--dw-key); color: var(--cbx-ink); font: 900 17px var(--cbx-body); cursor: pointer; box-shadow: 0 2px 0 #dccdbb; -webkit-tap-highlight-color: transparent; }
.dw-key.wide { flex: 1.55 1 0; max-width: 74px; font-size: 13px; }
.dw-key[data-k="Backspace"] { font-size: 20px; }
.dw-key:active { transform: translateY(1px); box-shadow: none; }
.dw-key.c, .dw-key.p, .dw-key.a { color: #fff; box-shadow: none; }
.dw-key.c { background: var(--dw-c); }
.dw-key.p { background: var(--dw-p); }
.dw-key.a { background: var(--dw-a); opacity: .75; }
@media (max-width: 380px) { .dw-krow { gap: 4px; } .dw-key { height: 50px; font-size: 15px; } .dw-key.wide { font-size: 11px; } }

.dw-result { margin-top: 16px; padding-top: 14px; border-top: 2px dashed var(--cbx-line); }
.dw-result .cbx-big small { font-size: .45em; }
.dw-card .dw-answer { margin: 6px 0 12px; font: 800 16px/1.4 var(--cbx-body); color: var(--cbx-ink-2); }
.dw-card .dw-answer b { color: var(--dw-c); letter-spacing: .06em; }
.dw-mini, .dw-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 14px; }
.dw-mini div, .dw-nums div { background: var(--cbx-soft); border-radius: 12px; padding: 8px 4px; text-align: center; }
.dw-mini b, .dw-nums b { display: block; font: 900 22px var(--cbx-body); color: var(--cbx-ink); font-variant-numeric: tabular-nums; }
.dw-mini span, .dw-nums span { display: block; font: 800 11px var(--cbx-body); color: var(--cbx-muted); text-transform: uppercase; letter-spacing: .04em; }
.dw-link { display: block; margin: 8px auto 0; border: 0; background: none; padding: 8px; font: 900 15px var(--cbx-body); color: var(--dw-c); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.dw-dlg { border: 0; padding: 0; border-radius: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.dw-dlg::backdrop { background: rgba(31, 42, 68, .45); }
.dw-dlg-card { padding: 20px; }
.dw-dlg h2 { margin: 0 0 2px; font: 900 22px var(--cbx-display); color: var(--cbx-ink); }
.dw-dlg h3 { margin: 4px 0 8px; font: 900 15px var(--cbx-body); color: var(--cbx-ink); }
.dw-dlg .dw-dlg-sub { margin: 0 0 12px; font: 800 14px var(--cbx-body); color: var(--cbx-muted); }
.dw-dist { display: grid; gap: 5px; }
.dw-bar { display: flex; align-items: center; gap: 8px; font: 900 13px var(--cbx-body); }
.dw-bar .k { width: 12px; color: var(--cbx-ink-2); text-align: right; }
.dw-bar .v { display: block; min-width: 24px; padding: 3px 8px; border-radius: 6px; background: var(--dw-a); color: #fff; text-align: right; box-sizing: border-box; }
.dw-bar.me .v { background: var(--dw-c); }
.dw-dlg-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

.dw-sw { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: #fff; font: 900 13px var(--cbx-body); vertical-align: -5px; }
.dw-sw.c { background: var(--dw-c); } .dw-sw.p { background: var(--dw-p); } .dw-sw.a { background: var(--dw-a); }