/*
 * Words Puzzle landing page (layout: words_puzzle). Matches the game and its Play Store art:
 * violet gradient, Nunito, white letter tiles, coral selection, gold highlight on the key words.
 * Everything is scoped under .wp.
 */

@font-face { font-family: Nunito; font-weight: 400; font-display: swap; src: url(../fonts/Nunito-Regular.ttf) format("truetype"); }
@font-face { font-family: Nunito; font-weight: 700; font-display: swap; src: url(../fonts/Nunito-Bold.ttf) format("truetype"); }

.layout-words_puzzle { overflow-x: hidden; background: #F6F5FF; }

.wp {
    --wp-primary: #5A4BE0;
    --wp-deep: #2B2364;
    --wp-lav: #75709A;
    --wp-alt: #EFEDFF;
    --wp-alt2: #DDD8FF;
    --wp-coral: #FF7657;
    --wp-coral-text: #D9532F;
    --wp-gold: #FFC233;
    --wp-correct: #2EB872;
    --wp-shadow: 0 24px 50px rgba(43, 35, 100, .18);
    --wp-grad: linear-gradient(180deg, #4B3FD1 0%, #6F5DF0 39%, #A08BFF 78%, #D8CCFF 100%);

    font-family: Nunito, system-ui, sans-serif;
    color: var(--wp-deep);
    padding-bottom: 6rem; /* room for the fixed navigation bar */
}

.wp *, .wp *::before, .wp *::after { box-sizing: border-box; }
.wp ::selection { color: #fff; background: var(--wp-coral); }
.wp h1, .wp h2, .wp h3 { font-family: inherit; font-weight: 700; color: inherit; letter-spacing: -.02em; text-transform: none; margin: 0; }
.wp p { margin: 0; }
.wp ul { list-style: none; margin: 0; padding: 0; }
.wp svg { width: 1em; height: 1em; flex: none; }

.wp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }
.wp-bleed { position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; }
.wp-section { padding-top: 6rem; }

/* Faint glyph wallpaper, the game's own background pattern */
.wp-pattern { position: absolute; inset: 0; background: var(--wp-pattern) 0 0 / 480px auto repeat; pointer-events: none; }

/* Highlight, chips, buttons */
.wp-hl {
    display: inline-block; color: var(--wp-deep); background: var(--wp-gold); padding: 0 .28em .06em;
    border-radius: .3em; transform: rotate(-2deg); text-shadow: none;
}
.wp-chip {
    display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .85rem .3rem .35rem; border-radius: 999px;
    background: var(--wp-alt); color: var(--wp-primary); font-weight: 700; font-size: .9rem; white-space: nowrap;
}
.wp-chip img { width: 1.6rem; height: 1.6rem; }
.wp-chip span { color: var(--wp-lav); font-weight: 400; }
.wp-muted { color: var(--wp-lav); font-weight: 700; font-size: .9rem; }
.wp-coral { color: var(--wp-coral-text); }

.wp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1.6rem; border-radius: 999px;
    font: 700 1.05rem/1 Nunito, sans-serif; text-decoration: none; border: 0; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
a.wp-btn:hover, button.wp-btn:hover { transform: translateY(-2px); }
.wp-btn:focus-visible, .wp-t:focus-visible { outline: 3px solid var(--wp-gold); outline-offset: 3px; }
.wp-btn-play { background: var(--wp-deep); color: #fff; box-shadow: 0 14px 30px rgba(43, 35, 100, .35); }
.wp-btn-play:hover { color: #fff; box-shadow: 0 18px 36px rgba(43, 35, 100, .45); }
.wp-btn-ghost { background: rgba(255, 255, 255, .9); color: var(--wp-deep); }
.wp-btn-ghost:hover { color: var(--wp-deep); background: #fff; }
.wp-btn-primary { background: var(--wp-primary); color: #fff; width: 100%; }
.wp-btn-primary:hover { color: #fff; }
.wp-btn-white { background: #fff; color: var(--wp-coral-text); width: 100%; margin-top: 1.4rem; }
.wp-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.wp-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .28); }

.wp-card { background: #fff; border-radius: 28px; box-shadow: var(--wp-shadow); padding: 1.75rem; position: relative; }

/* Stars and the time/par boxes (complete screen) */
.wp-stars { display: flex; justify-content: center; align-items: flex-end; gap: .3rem; color: var(--wp-gold); }
.wp-stars svg { width: 2.4rem; height: 2.4rem; }
.wp-stars svg:nth-child(2) { width: 3rem; height: 3rem; }
.wp-stars.big svg { width: 3.6rem; height: 3.6rem; color: var(--wp-alt2); }
.wp-stars.big svg:nth-child(2) { width: 4.6rem; height: 4.6rem; }
.wp-result-card .wp-stars.big svg, .wp-stars.big svg.on { color: var(--wp-gold); }
.wp-stars.big svg.on { animation: wp-pop .5s ease both; }
.wp-stars.big svg.on:nth-child(2) { animation-delay: .1s; }
.wp-stars.big svg.on:nth-child(3) { animation-delay: .2s; }
.wp-result-title { text-align: center; font-size: 2.4rem; font-weight: 700; margin: .4rem 0 1.2rem !important; }
.wp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.2rem; }
.wp-stats > div { background: var(--wp-alt); border-radius: 18px; padding: .8rem 1.1rem; }
.wp-stats small { display: block; color: var(--wp-lav); font-size: .9rem; }
.wp-stats b { font-size: 1.9rem; }
.wp-stats .win { background: #E3F6EB; }
.wp-stats .win b { color: var(--wp-correct); }

/* Word slots under the board */
.wp-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.1rem; }
.wp-slots b { display: flex; gap: .3rem; }
.wp-slots i {
    width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--wp-alt); display: grid; place-items: center;
    font: 700 1.2rem/1 Nunito, sans-serif; color: var(--wp-deep);
}
.wp-slots i.on { background: var(--wp-primary); color: #fff; animation: wp-pop .35s ease both; }

/* ---- Hero ------------------------------------------------------------- */

.wp-hero { background: var(--wp-grad); border-radius: 0 0 48px 48px; padding: 2rem 0 5rem; color: #fff; }
.wp-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.wp-crumbs { font-size: .85rem; opacity: .85; margin-bottom: 2.2rem; }
.wp-crumbs a { color: inherit; text-decoration: none; }
.wp-crumbs a:hover { text-decoration: underline; color: inherit; }
.wp-crumbs span { margin: 0 .45rem; opacity: .7; }
.wp-brand { display: flex; align-items: center; gap: .9rem; font-size: 1.6rem; font-weight: 700; margin-bottom: 1.5rem; }
.wp-brand span { opacity: .75; font-weight: 400; }
.wp-brand img { width: 88px; height: 88px; border-radius: 24px; box-shadow: 0 10px 24px rgba(43, 35, 100, .3); transform: rotate(-4deg); }
.wp-hero h1 { font-size: clamp(2.8rem, 6.4vw, 5rem); line-height: 1.04; text-shadow: 0 6px 24px rgba(43, 35, 100, .25); }
.wp-lead { font-size: 1.3rem; line-height: 1.45; max-width: 32rem; margin: 1.5rem 0 2rem !important; opacity: .95; }
.wp-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem !important; }
.wp-chips li {
    display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: var(--wp-deep); font-weight: 700; font-size: .92rem;
}
.wp-chips svg { width: 1.1rem; height: 1.1rem; color: var(--wp-primary); }

.wp-hero-demo { position: relative; max-width: 440px; width: 100%; justify-self: center; }
.wp-demo { color: var(--wp-deep); transform: rotate(1.5deg); }
.wp-demo.wp-pop { animation: wp-pop .35s ease; }
.wp-demo-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.wp-word { text-align: center; font-size: 1.8rem; font-weight: 700; letter-spacing: .12em; color: var(--wp-coral-text); min-height: 2.6rem; margin: .6rem 0 !important; }
.wp-board { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.4rem; touch-action: none; user-select: none; -webkit-user-select: none; }
.wp-t {
    position: relative; z-index: 2; aspect-ratio: 1; border: 0; border-radius: 22%; background: #fff; color: var(--wp-deep);
    font: 700 clamp(1.8rem, 6vw, 2.6rem)/1 Nunito, sans-serif; cursor: pointer;
    box-shadow: 0 6px 0 var(--wp-alt2), 0 14px 24px rgba(43, 35, 100, .12), inset 0 0 0 2px var(--wp-alt);
    transition: transform .12s ease, background .12s ease, opacity .3s ease;
}
.wp-t:hover { transform: translateY(-2px); }
.wp-t.sel { background: var(--wp-coral); color: #fff; box-shadow: 0 6px 0 #E2603F, 0 14px 24px rgba(217, 83, 47, .3); transform: scale(1.04); }
.wp-t.bad { animation: wp-shake .35s ease; }
.wp-t.gone { opacity: 0; transform: scale(.6); pointer-events: none; }
.wp-line { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 1; overflow: visible; pointer-events: none; }
/* Under the tiles, so it shows in the gaps and never covers a letter */
.wp-line polyline { fill: none; stroke: var(--wp-coral); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.wp-bubble {
    position: absolute; z-index: 2; left: -28px; top: -34px; width: 84px; height: 84px; border-radius: 24px;
    background: var(--wp-coral); color: #fff; font-size: 3rem; font-weight: 700; display: grid; place-items: center;
    transform: rotate(-14deg); box-shadow: 0 12px 24px rgba(43, 35, 100, .3); animation: wp-float 4s ease-in-out infinite;
}
.wp-demo-hint { text-align: center; margin-top: 1.4rem !important; font-weight: 700; opacity: .95; }
.wp-result { text-align: center; padding: .5rem 0; }
.wp-result .wp-muted { margin: .4rem 0 1.2rem !important; line-height: 1.45; }
.wp-result .wp-actions { justify-content: center; }
.wp-result .wp-btn-ghost { background: var(--wp-alt); }

/* ---- Section headers ---------------------------------------------------- */

.wp-head { text-align: center; max-width: 46rem; margin: 0 auto 3rem; }
.wp-head h2, .wp-copy h2, .wp-cta h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.1; }
.wp-head p, .wp-copy p { font-size: 1.2rem; line-height: 1.5; margin-top: 1rem !important; color: var(--wp-lav); }
.wp-head-light { color: #fff; }
.wp-head-light p { color: #fff; opacity: .95; }

/* ---- How it works ------------------------------------------------------- */

.wp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.wp-step { padding: 2rem; text-align: center; }
.wp-step:nth-child(2) { transform: translateY(1.5rem); }
.wp-step-n {
    position: absolute; top: -16px; left: -10px; width: 44px; height: 44px; border-radius: 50%; background: var(--wp-gold);
    display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; transform: rotate(-8deg);
}
.wp-step > div { height: 132px; display: grid; place-content: center; margin-bottom: 1.2rem; }
.wp-step h3, .wp-perk h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.wp-step p, .wp-perk p { color: var(--wp-lav); font-size: 1.05rem; line-height: 1.5; }
.wp-mini { display: grid !important; grid-template-columns: repeat(3, 38px); gap: 6px; justify-content: center; }
.wp-mini i { height: 38px; border-radius: 9px; background: var(--wp-alt); display: grid; place-items: center; font: 700 1.1rem/1 Nunito, sans-serif; font-style: normal; }
.wp-mini i.sel { background: var(--wp-coral); color: #fff; }
.wp-step .wp-slots i { width: 1.9rem; height: 1.9rem; font-size: 1rem; }

/* ---- Split sections (daily, challenge) --------------------------------- */

.wp-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: center; }
.wp-flip .wp-copy { order: 2; }
.wp-stack { display: flex; flex-direction: column; gap: 1.4rem; max-width: 480px; width: 100%; justify-self: center; }
.wp-stack > .wp-card { transform: rotate(var(--r, 0)) translateX(var(--x, 0)); }
.wp-daily { background: var(--wp-coral); color: #fff; }
.wp-daily-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; letter-spacing: .08em; font-size: .9rem; }
.wp-daily-top > span:first-child { display: inline-flex; align-items: center; gap: .45rem; }
.wp-daily-top svg { width: 1.2rem; height: 1.2rem; }
.wp-daily-title { font-size: 2.6rem; font-weight: 700; margin: .8rem 0 .2rem !important; }
.wp-msg { display: flex; align-items: center; gap: 1rem; border-radius: 28px 28px 28px 8px; padding: 1.2rem 1.4rem; font-size: 1.05rem; line-height: 1.5; }
.wp-avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--wp-gold); display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; }
.wp-result-card { padding-top: 1.2rem; }

/* ---- Topics ------------------------------------------------------------- */

.wp-topics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
.wp-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
    padding: 1.5rem .5rem; background: #fff; border-radius: 24px; box-shadow: 0 14px 30px rgba(43, 35, 100, .1);
    font-weight: 700; font-size: 1.05rem; text-align: center; transition: transform .2s ease, box-shadow .2s ease;
}
.wp-tile:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 20px 40px rgba(43, 35, 100, .16); }
.wp-tile img { width: 72px; height: 72px; }

/* ---- Screenshots -------------------------------------------------------- */

.wp-gallery { background: var(--wp-grad); margin-top: 7rem; padding: 5rem 0 4rem; border-radius: 48px; }
.wp-gallery .wp-head { position: relative; margin-bottom: 2.5rem; }
.wp-shots {
    position: relative; display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 1rem max(1.25rem, calc((100vw - 1160px) / 2 + 1.25rem)) 2rem; scrollbar-width: thin;
}
.wp-shots a { flex: none; scroll-snap-align: center; }
.wp-shots img {
    display: block; width: 240px; height: auto; border-radius: 26px; box-shadow: 0 20px 40px rgba(43, 35, 100, .3);
    transition: transform .2s ease;
}
.wp-shots a:nth-child(odd) img { transform: rotate(-1.5deg); }
.wp-shots a:nth-child(even) img { transform: rotate(1.5deg) translateY(14px); }
.wp-shots a:hover img { transform: rotate(0) translateY(-6px) scale(1.03); }

/* ---- Perks -------------------------------------------------------------- */

.wp-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.wp-perk { padding: 1.7rem; }
.wp-perk-ico { width: 60px; height: 60px; border-radius: 50%; background: var(--wp-alt); color: var(--wp-primary); display: grid; place-items: center; margin-bottom: 1.1rem; }
.wp-perk-ico svg { width: 30px; height: 30px; }

/* ---- Final call to action ---------------------------------------------- */

.wp-cta {
    position: relative; overflow: hidden; text-align: center; color: #fff; background: var(--wp-grad);
    border-radius: 40px; padding: 4rem 1.5rem; box-shadow: var(--wp-shadow);
}
.wp-cta > *:not(.wp-pattern) { position: relative; }
.wp-cta img { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 14px 30px rgba(43, 35, 100, .3); margin-bottom: 1.5rem; }
.wp-cta h2 { text-shadow: 0 6px 24px rgba(43, 35, 100, .25); }
.wp-cta > p { font-size: 1.25rem; margin: 1rem 0 2rem !important; }
.wp-cta-links { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1.8rem !important; font-size: .95rem; }
.wp-cta-links a { color: #fff; opacity: .9; }
.wp-cta-links a:hover { color: #fff; opacity: 1; }

/* ---- Motion ------------------------------------------------------------- */

.wp-anim .wp-reveal { opacity: 0; translate: 0 28px; transition: opacity .6s ease, translate .6s ease; transition-delay: calc(var(--d, 0) * 80ms); }
.wp-anim .wp-reveal.in { opacity: 1; translate: 0 0; }
@keyframes wp-float { 50% { translate: 0 -8px; } }
@keyframes wp-pop { from { scale: .9; opacity: .4; } }
@keyframes wp-shake { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
@media (prefers-reduced-motion: reduce) {
    .wp *, .wp *::before { animation: none !important; transition: none !important; }
}

/* ---- Small screens ------------------------------------------------------ */

@media (max-width: 991px) {
    .wp-hero-grid, .wp-split { grid-template-columns: 1fr; gap: 3rem; }
    .wp-flip .wp-copy { order: 0; }
    .wp-copy { text-align: center; }
    .wp-topics { grid-template-columns: repeat(3, 1fr); }
    .wp-steps { grid-template-columns: 1fr; gap: 2rem; max-width: 480px; margin: 0 auto; }
    .wp-step:nth-child(2) { transform: none; }
    .wp-perks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .wp-section { padding-top: 4.5rem; }
    .wp-hero { border-radius: 0 0 32px 32px; }
    .wp-demo, .wp-stack > .wp-card { transform: none; }
    .wp-card { padding: 1.3rem; }
    .wp-topics { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
    .wp-perks { grid-template-columns: 1fr; }
    .wp-bubble { left: -8px; }
    .wp-shots img { width: 200px; }
    .wp-gallery { border-radius: 32px; }
}

/* ---- Challenge link landing page (pages/words-challenge.html) ---------- */

.wp [hidden] { display: none !important; }
.wp-challenge { padding: 4rem 0 5rem; min-height: 70vh; }
.wp-challenge .wp-card { position: relative; max-width: 560px; margin: 0 auto; text-align: center; color: var(--wp-deep); padding: 2.5rem 2rem; }
.wp-challenge .wp-card > img { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 14px 30px rgba(43, 35, 100, .3); margin: -4.5rem auto 1.2rem; display: block; transform: rotate(-4deg); }
.wp-challenge h1 { font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1.1; text-shadow: none; }
.wp-challenge .wp-lead { margin: 1rem auto 1.5rem !important; color: var(--wp-lav); opacity: 1; font-size: 1.15rem; }
.wp-challenge .wp-stats { text-align: left; }
.wp-challenge .wp-stats b { font-size: 1.4rem; }
.wp-challenge .wp-actions { flex-direction: column; margin-bottom: 1.2rem; }
.wp-challenge .wp-cta-links a { color: var(--wp-primary); }