:root { --purple: #6c45c5; --pink: #f0478a; --ink: #21183b; --muted: #746b84; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; font-family: Inter, ui-rounded, "Segoe UI", sans-serif; }
button, a { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.words-body { min-height: 100dvh; overflow: hidden; color: var(--ink); background: radial-gradient(circle at 10% 6%, #f6c8e4 0, transparent 29%), radial-gradient(circle at 90% 88%, #c8bef8 0, transparent 30%), linear-gradient(155deg, #fff8fc, #f1edff); overscroll-behavior: none; }
.words-app { position: relative; display: grid; width: min(100%, 560px); height: 100dvh; min-height: 0; grid-template-rows: auto 5px minmax(0, 1fr); margin: auto; padding: max(11px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom)); }
.words-topbar { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; min-height: 55px; }
.words-topbar > a { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid #6c45c524; border-radius: 50%; color: #4c337e; background: #fff9; font-size: 1.65rem; line-height: 1; text-decoration: none; }
.words-topbar > div { display: grid; min-width: 0; }.words-topbar strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }.words-topbar small { overflow: hidden; color: var(--muted); font-size: .56rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.words-topbar .words-top-stats { display: flex; flex-direction: row; gap: 5px; align-items: center; }.words-top-stats > span { display: flex; gap: 4px; align-items: center; padding: 7px 9px; border-radius: 13px; color: #865c08; background: #ffe780; font-size: .72rem; font-weight: 900; }.words-top-stats #words-timer { color: #fff; background: #6e48c5; font-variant-numeric: tabular-nums; transition: background .2s ease, transform .2s ease; }.words-top-stats #words-timer.is-danger { background: #e73773; animation: timer-pulse .75s ease-in-out infinite; }
.words-progress { height: 5px; overflow: hidden; border-radius: 99px; background: #6e4bbb18; }.words-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--purple)); transition: width .3s ease; }
.words-game { display: grid; min-height: 0; overflow-x: hidden; overflow-y: auto; grid-template-rows: auto auto auto; align-content: start; gap: 8px; padding: 9px 0 max(8px, env(safe-area-inset-bottom)); scrollbar-width: none; }.words-game::-webkit-scrollbar { display: none; }
.words-mission { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 3px; }.words-mission > div { display: grid; flex: 0 0 auto; gap: 1px; }.words-mission p { margin: 0; color: #b52c68; font-size: .68rem; font-weight: 950; }.words-mission small { color: #7d7090; font-size: .51rem; font-weight: 800; }.words-mission strong { max-width: 280px; color: #645b72; font-size: .58rem; line-height: 1.3; text-align: right; }
.word-grid { display: grid; width: min(100%, 430px, calc(100dvh - 205px)); aspect-ratio: 1; grid-template-columns: repeat(var(--grid-size, 6), 1fr); gap: clamp(3px, 1vw, 7px); align-self: start; justify-self: center; padding: clamp(8px, 2.4vw, 14px); border: 1px solid #fff; border-radius: 25px; background: #ffffffc9; box-shadow: 0 18px 45px #3a245223; touch-action: none; user-select: none; }
.word-cell { display: grid; min-width: 0; min-height: 0; place-items: center; padding: 0; border: 0; border-radius: 13px; color: #2c2141; background: #f3eff9; font-size: clamp(1rem, 6vw, 1.45rem); font-weight: 950; transition: transform .1s ease, background .12s ease, color .12s ease; }.word-cell.is-selecting { color: #fff; background: #a36bd8; transform: scale(1.06); }.word-cell.is-found { color: #fff; background: linear-gradient(145deg, #f04a8c, #7650ce); box-shadow: 0 5px 11px #bd3a7a35; }.word-cell.is-bonus:not(.is-found) { color: #513f0d; background: linear-gradient(145deg, #fff0a6, #ffc858); box-shadow: 0 5px 11px #d8932435; }.word-cell.is-anchor { outline: 3px solid #f3a5c5; outline-offset: 1px; }
.word-grid[data-size="8"] { gap: clamp(2px, .7vw, 5px); }.word-grid[data-size="8"] .word-cell { border-radius: 9px; font-size: clamp(.76rem, 4.2vw, 1.08rem); }.word-grid[data-size="10"] { gap: 2px; padding: clamp(6px, 1.8vw, 10px); }.word-grid[data-size="10"] .word-cell { border-radius: 6px; font-size: clamp(.62rem, 3.3vw, .9rem); }
.word-grid.is-wrong { animation: grid-shake .32s ease; }
.word-bank { display: flex; max-height: 72px; overflow-y: auto; flex-wrap: wrap; gap: 5px; justify-content: center; padding: 1px 0 2px; scrollbar-width: thin; }.word-bank span { padding: 5px 8px; border-radius: 99px; color: #5f4b73; background: #fff; box-shadow: 0 5px 13px #3e2b5010; font-size: .57rem; font-weight: 900; letter-spacing: .04em; }.word-bank span.is-hidden-word { color: #7b6f8e; border: 1px dashed #b9a9ce; background: #ffffff8a; letter-spacing: 0; }.word-bank span.is-found { color: #fff; background: #7960b7; text-decoration: line-through; opacity: .78; }.word-bank span.is-bonus { color: #654900; background: #ffe48a; }
.eyebrow { margin: 0; color: #df3b7f; font-size: .65rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.words-start, .words-finish, .words-locked { position: absolute; z-index: 10; inset: 0; display: flex; flex-direction: column; padding: max(24px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 10%, #784fc1 0, transparent 30%), linear-gradient(155deg, #1d1239, #37205d 60%, #17102e); color: #fff; }
.words-start[hidden], .words-finish[hidden], .words-locked[hidden] { display: none; }.words-locked { z-index: 50; align-items: center; justify-content: center; text-align: center; }.words-locked > span { font-size: 3.3rem; }.words-locked h1 { margin: 8px 0; font-size: clamp(2.4rem, 11vw, 4rem); }.words-locked > p:not(.eyebrow) { max-width: 360px; color: #d8cce9; line-height: 1.55; }.words-locked a { margin-top: 18px; padding: 13px 18px; border-radius: 15px; color: #351f51; background: #ffe276; text-decoration: none; font-weight: 900; }
.words-start { overflow-y: auto; justify-content: flex-start; scrollbar-width: none; }.words-start::-webkit-scrollbar { display: none; }
.words-start-icon { position: relative; display: grid; width: 64px; height: 64px; flex: 0 0 64px; place-items: center; border-radius: 21px; color: #5e327c; background: linear-gradient(145deg, #ffe57d, #ff8eb9); box-shadow: 0 18px 40px #ee579c39; font-size: 1.9rem; font-weight: 1000; transform: rotate(-5deg); }.words-start-icon span { position: absolute; right: 8px; bottom: 6px; font-size: .78rem; }
.words-library-head { display: flex; gap: 17px; align-items: center; margin-bottom: 18px; }.words-library-head > div:last-child { min-width: 0; }.words-start h1, .words-finish h1 { margin: 4px 0 0; font-size: clamp(2.3rem, 10vw, 4rem); line-height: .94; letter-spacing: -.065em; }.words-library-head h1 { font-size: clamp(2rem, 9vw, 3.2rem); }.words-library-head div > p:last-child { margin: 7px 0 0; color: #d8cce9; font-size: .67rem; line-height: 1.35; }
.words-language-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }.words-language-tabs button { display: grid; min-width: 0; gap: 2px; justify-items: center; padding: 9px 4px; border: 1px solid #ffffff18; border-radius: 14px; color: #cbbddc; background: #ffffff0a; font-size: .6rem; font-weight: 900; }.words-language-tabs button span { font-size: 1rem; }.words-language-tabs button.is-active { color: #33204d; border-color: transparent; background: #ffe57f; box-shadow: 0 8px 20px #0b051f30; }
.words-level-list { display: grid; gap: 8px; }.words-level-card { display: grid; width: 100%; grid-template-columns: 36px minmax(0, 1fr) 22px; gap: 11px; align-items: center; padding: 11px; border: 1px solid #ffffff16; border-radius: 17px; color: #fff; background: #ffffff0c; text-align: left; }.words-level-card > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }.words-level-card strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }.words-level-card small { overflow: hidden; color: #cbbfd8; font-size: .59rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.words-level-card em { margin-top: 2px; color: #f2cf70; font-size: .52rem; font-style: normal; font-weight: 900; text-transform: uppercase; }.words-level-card > b { color: #f4d66e; font-size: 1.1rem; }.words-level-number { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; color: #42255f; background: #ffa5c8; font-size: .78rem; font-weight: 1000; }.words-level-card.is-mystery { border-color: #ffe17748; background: linear-gradient(100deg, #f0478a20, #ffe1770e); }.words-level-card.is-mystery .words-level-number { background: #ffe073; }
.words-library-back, .words-finish > a { margin-top: 16px; color: #c7b8d8; font-size: .7rem; font-weight: 800; text-align: center; text-decoration: none; }
.words-finish { z-index: 40; align-items: center; justify-content: center; text-align: center; }.words-finish button { width: 100%; min-height: 52px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--pink), #8452d5); box-shadow: 0 13px 28px #ce3e853d; font-size: .78rem; font-weight: 950; }.words-finish .words-secondary-action { min-height: 46px; margin-top: 8px; border: 1px solid #ffffff26; background: #ffffff0c; box-shadow: none; }
.definition-modal { position: fixed; z-index: 30; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 18px; background: #170c2a9c; backdrop-filter: blur(5px); }.definition-modal > section { width: min(100%, 500px); padding: 24px 19px max(20px, env(safe-area-inset-bottom)); border-radius: 28px; background: #fff; box-shadow: 0 25px 70px #12091f60; animation: sheet-up .28s cubic-bezier(.2,.82,.25,1); }.definition-modal h2 { margin: 5px 0 17px; font-size: 1.55rem; letter-spacing: -.045em; }.definition-modal section > div { display: grid; gap: 8px; }.definition-modal button { min-height: 51px; padding: 10px 13px; border: 2px solid #eee7f2; border-radius: 15px; color: #3d3150; background: #faf8fc; font-size: .72rem; font-weight: 800; text-align: left; }.definition-modal button.is-wrong { color: #a82e50; border-color: #f0a5bb; background: #fff0f4; }.definition-modal button.is-correct { color: #176a4b; border-color: #78d2ab; background: #eaf9f2; }.definition-modal section > p:last-child { min-height: 20px; margin: 10px 2px 0; color: #796d82; font-size: .67rem; font-weight: 800; }
.words-finish > *:not(.words-confetti) { position: relative; z-index: 1; }.words-finish h1 { max-width: 430px; font-size: clamp(2.4rem, 11vw, 4rem); }.words-finish > strong { display: grid; width: 112px; height: 92px; place-items: center; margin: 20px 0 15px; border: 1px solid #ffffff28; border-radius: 28px; color: #ffe47a; background: #ffffff0c; font-size: 2.4rem; }.words-finish > p:not(.eyebrow) { max-width: 360px; margin: 0 0 16px; color: #d6c9e3; font-size: .78rem; line-height: 1.45; }.words-finish > div:not(.words-confetti) { display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 18px; }.words-finish > div span { display: grid; gap: 4px; padding: 11px 5px; border-radius: 15px; background: #ffffff0c; }.words-finish small { color: #baa9ca; font-size: .57rem; }.words-finish b { font-size: 1.05rem; }.words-confetti { position: absolute; inset: 0; pointer-events: none; }.words-confetti i { position: absolute; color: #ffe476; font-size: 1.7rem; font-style: normal; font-weight: 950; opacity: .35; animation: float 3s ease-in-out infinite; }.words-confetti i:nth-child(1) { top: 13%; left: 10%; }.words-confetti i:nth-child(2) { top: 20%; right: 12%; animation-delay: -.8s; }.words-confetti i:nth-child(3) { right: 17%; bottom: 14%; animation-delay: -1.4s; }.words-confetti i:nth-child(4) { bottom: 17%; left: 13%; animation-delay: -2s; }
@keyframes grid-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes sheet-up { from { opacity: 0; transform: translateY(30px); } }
@keyframes float { 50% { transform: translateY(-12px) rotate(9deg); opacity: .7; } }
@keyframes timer-pulse { 50% { transform: scale(1.07); box-shadow: 0 0 0 5px #e7377320; } }
@media (max-height: 690px) { .words-game { gap: 5px; padding-top: 6px; }.word-grid { width: min(100%, calc(100dvh - 185px)); }.words-mission strong { display: none; }.word-bank { max-height: 54px; }.word-bank span { padding: 4px 7px; }.words-start { padding-top: max(17px, env(safe-area-inset-top)); }.words-library-head { margin-bottom: 12px; }.words-start-icon { width: 54px; height: 54px; flex-basis: 54px; }.words-level-card { padding-block: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }