.generate-page{display:grid;gap:.5rem;padding:2rem}@media (max-width: 639px){.generate-page{padding:1rem}}.ai-mode{display:grid;gap:1rem;width:100%}.puzzle-block[hidden],.form-error[hidden],[data-game-target][hidden]{display:none}.page-hero{display:flex;flex-direction:column;align-items:center;gap:.85rem;text-align:center;padding:0 0 .75rem}.hero-inner{display:flex;flex-direction:column;align-items:flex-start;width:fit-content;gap:4px}.hero-eyebrow{display:flex;justify-content:flex-start}.page-hero h1{margin:0;font-family:var(--font-display);font-size:var(--text-fluid-xl);line-height:var(--leading-snug)}.page-desc{max-width:56rem;margin:0;color:var(--muted);font-size:var(--text-base);line-height:1.7}.generate-page>*,.ai-mode>*,.generated-area>*,.result-modal-body>*,.puzzle-block>.puzzle-block-game{min-width:0}.generator-panel,.puzzle-block{border-radius:var(--radius-xl)}.form-error,.puzzle-block-title{margin:0}.generated-area{display:grid;gap:1rem}.generate-page>.generated-area{margin-top:.5rem}.results-title{margin:0;font-family:var(--font-display);font-size:var(--text-xl);line-height:var(--leading-snug);text-align:center}.generator-panel{display:grid;gap:1rem;width:100%;padding:3rem 1rem;box-shadow:none}.generator-form{display:grid;gap:.5rem}.field{display:grid;gap:.45rem;color:var(--muted);font-size:var(--text-base);font-weight:600}.field input,.field select{width:100%;min-width:0;min-height:2.7rem;border:1px solid var(--line);border-radius:12px;background:#ffffffdb;color:var(--ink);font:inherit;font-size:var(--text-base);font-weight:500;padding:0 .85rem;transition:border-color .16s ease,box-shadow .16s ease}.field input:focus-visible,.field select:focus-visible{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--bg-accent-soft)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.search-row{display:flex;gap:.6rem;align-items:stretch}.search-row .generate-button{position:absolute;top:50%;right:.2rem;transform:translateY(-50%);min-width:100px;min-height:2.3rem;padding:0 1.2rem;border:0;border-radius:999px}.field-category{position:relative;display:block;flex:1 1 auto;min-width:0;margin:0}.field-category .search-icon{position:absolute;left:1.15rem;top:50%;width:1.2rem;height:1.2rem;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.field-category input{width:100%;min-width:0;min-height:2.7rem;padding:0 8.5rem 0 1.4rem;border:1px solid var(--line);border-radius:999px;background:#ffffffeb;color:var(--ink);font:inherit;font-size:var(--text-base);font-weight:400;box-shadow:0 1px 2px #0000000a;transition:border-color .16s ease,box-shadow .16s ease}.field-category input::placeholder{color:var(--muted);opacity:.5;font-weight:400}.field-category input:focus-visible{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--bg-accent-soft)}.topic-suggest{position:absolute;top:calc(100% + .45rem);left:0;right:0;z-index:30;max-height:15rem;overflow-y:auto;padding:.7rem .75rem;background:var(--surface-strong);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px #0f172a1f,0 2px 6px #0f172a0f}.topic-suggest[hidden]{display:none}.topic-suggest-label{margin:0 0 .5rem;color:var(--muted);font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase}.topic-suggest-list{display:flex;flex-wrap:wrap;gap:.4rem}.topic-suggest-item{padding:.4rem .85rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:border-color .14s ease,color .14s ease,background-color .14s ease}.topic-suggest-item:hover,.topic-suggest-item:focus-visible{border-color:var(--brand-primary);color:var(--brand-primary-hover);background:var(--bg-accent-soft)}.topic-suggest-item[hidden]{display:none}.options-row{display:flex;flex-wrap:wrap;gap:.6rem 1.25rem}.options-row .field{display:flex;align-items:center;gap:.5rem;flex:0 1 auto;color:var(--muted);font-size:var(--text-sm);font-weight:600;white-space:nowrap}.custom-select>select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.custom-select{position:relative;display:inline-flex;align-items:center}.field .custom-select{display:flex;width:100%}.custom-select-trigger{display:inline-flex;align-items:center;gap:.45rem;min-height:1.8rem;padding:0 .15rem;border:0;background:transparent;color:var(--text-primary);font:inherit;font-size:var(--text-sm);font-weight:700;cursor:pointer;border-radius:6px;transition:color .16s ease,background-color .16s ease}.field .custom-select-trigger{width:100%;min-height:2.7rem;padding:0 .15rem;border:0;background:transparent;color:var(--ink);font-size:var(--text-base);font-weight:500;justify-content:space-between;transition:color .16s ease}.custom-select-trigger:after{content:"";width:.5rem;height:.5rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease;opacity:.6}.custom-select[data-open=true] .custom-select-trigger{color:var(--brand-primary)}.custom-select[data-open=true] .custom-select-trigger:after{transform:rotate(225deg) translate(-1px,-1px);opacity:1}.custom-select-trigger:hover{color:var(--brand-primary)}.custom-select-trigger:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}.custom-select-panel{position:absolute;top:calc(100% + .45rem);left:-.5rem;z-index:30;min-width:calc(100% + 1rem);max-height:16rem;overflow-y:auto;padding:.35rem;margin:0;list-style:none;background:var(--surface-strong);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px #0f172a1f,0 2px 6px #0f172a0f;display:none}.custom-select[data-open=true] .custom-select-panel{display:block}.custom-select-option{padding:.45rem .75rem;border-radius:8px;color:var(--ink);font-size:var(--text-sm);font-weight:600;cursor:pointer;white-space:nowrap;transition:background-color .12s ease,color .12s ease}.custom-select-option[data-highlighted=true]{background:var(--bg-accent-soft);color:var(--brand-primary-hover)}.custom-select-option[aria-selected=true]{background:var(--brand-primary);color:var(--text-inverse)}.custom-select-option[aria-selected=true][data-highlighted=true]{background:var(--brand-primary-hover)}.generate-button{min-height:2.7rem;border:0;border-radius:10px;background:var(--brand-primary);color:var(--text-inverse);cursor:pointer;font:inherit;font-size:var(--text-base);font-weight:500;transition:opacity .16s ease,transform .16s ease,background-color .16s ease}.generate-button:hover:not(:disabled),.generate-button:focus-visible:not(:disabled){background:var(--brand-primary-hover)}.generate-button:active{transform:translateY(1px)}.generate-button{padding:0 1.75rem;justify-self:stretch}.generate-button:disabled{cursor:wait;opacity:.68}.generate-button.is-loading{color:transparent}.generate-button.is-loading:after{content:"";position:absolute;inset:0;margin:auto;width:1.15rem;height:1.15rem;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:btn-spin .7s linear infinite}@keyframes btn-spin{to{transform:rotate(360deg)}}.form-error{padding:.8rem .9rem;border-radius:12px;background:var(--color-error-soft);color:var(--color-error);font-weight:800}.puzzle-block{display:grid;gap:1rem;padding:1rem}.puzzle-block-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.difficulty-label{color:var(--muted);font-size:var(--text-sm);font-weight:500}.puzzle-block-title{display:flex;align-items:center;gap:.75rem;font-family:var(--font-display);font-size:var(--text-lg)}.difficulty-badge{display:inline-flex;align-items:center;justify-content:center;height:1.75rem;padding:0 .8rem;border-radius:999px;color:var(--text-inverse);font-size:var(--text-base);font-weight:900;line-height:1;letter-spacing:.02em;white-space:nowrap}.puzzle-block[data-puzzle-block=kids] .difficulty-badge{background:var(--difficulty-kids)}.puzzle-block[data-puzzle-block=easy] .difficulty-badge{background:var(--difficulty-easy)}.puzzle-block[data-puzzle-block=medium] .difficulty-badge{background:var(--difficulty-medium)}.puzzle-block[data-puzzle-block=hard] .difficulty-badge{background:var(--difficulty-hard)}.puzzle-block[data-puzzle-block=master] .difficulty-badge{background:var(--difficulty-master)}.difficulty-score{color:var(--muted);font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-extrabold)}.sample-game{display:grid;gap:1rem;padding:1rem;border-radius:var(--radius-xl)}.result-modal{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:1.25rem}.result-modal[hidden]{display:none}.result-modal-overlay{position:absolute;inset:0;background:#0f172a8c}.result-modal-dialog{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);gap:1rem;width:min(72rem,100%);height:min(92vh,64rem);padding:1.25rem 1.25rem 1.5rem;background:var(--surface-strong);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:0 24px 64px #0f172a47;animation:result-modal-in .24s ease-out both}@keyframes result-modal-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.result-modal-dialog{animation:none}}.result-modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.result-modal-title{margin:0;font-family:var(--font-display);font-size:var(--text-xl);line-height:var(--leading-snug)}.result-modal-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.4rem;height:2.4rem;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.6rem;line-height:1;cursor:pointer;transition:color .14s ease,background-color .14s ease}.result-modal-close:hover,.result-modal-close:focus-visible{color:var(--ink);background:var(--bg-accent-soft)}.result-modal-body{display:grid;gap:1rem;align-content:start;padding:.25rem .25rem .5rem}.difficulty-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.25rem}.difficulty-tabs[hidden]{display:none}.difficulty-tab{margin:0;padding:.2rem .1rem;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:color .18s ease,border-color .18s ease}.difficulty-tab[hidden]{display:none}.difficulty-tab.active{color:var(--brand-primary);border-bottom-color:var(--brand-primary)}.difficulty-tab:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}@media (max-width: 639px){.result-modal{padding:.5rem}.result-modal-dialog{padding:1rem .75rem 1.25rem}}@media (min-width: 860px){.generator-form{gap:.25rem 1.5rem;width:100%;max-width:40rem;justify-self:center}}.generator-howto{margin:3rem 0 0}.generator-howto .section-title,.generator-faq .section-title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--ink);text-align:center;margin:0 0 1.75rem}.howto-steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:howto}@media (min-width: 860px){.howto-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}.howto-step{position:relative;padding:1.25rem 1.25rem 1.25rem 4rem;border-radius:var(--radius-lg);background:var(--surface-strong)}.howto-step-num{position:absolute;top:1.25rem;left:1.25rem;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--brand-primary);color:var(--text-inverse);font-family:var(--font-display);font-weight:var(--weight-bold)}.howto-step h3{font-family:var(--font-display);font-size:var(--text-md);color:var(--ink);margin:0 0 .35rem}.howto-step p{color:var(--muted);line-height:1.7;margin:0}.generator-faq{margin:3rem 0 0}.faq-list{display:flex;flex-direction:column;gap:0}.faq-item{border-bottom:1px solid var(--line);-webkit-tap-highlight-color:transparent}.faq-item:last-child{border-bottom:0}.faq-question{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 0;border:none;background:none;font-family:inherit;font-size:var(--text-md);font-weight:500;line-height:var(--leading-normal);color:var(--text-primary);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}.faq-question-text{line-height:1}.faq-arrow{position:relative;flex:0 0 auto;width:1rem;height:1rem;font-size:var(--text-sm);font-weight:700;line-height:1;color:var(--muted)}.faq-arrow:before,.faq-arrow:after{position:absolute;left:50%;top:50%;font-size:inherit;font-weight:inherit;line-height:1;color:inherit;transition:opacity .18s,transform .18s}.faq-arrow:before{content:"+";transform:translate(-50%,-50%) rotate(0) scale(1)}.faq-arrow:after{content:"−";opacity:0;transform:translate(-50%,-50%) rotate(-90deg) scale(.5)}.faq-item.is-open .faq-arrow:before{opacity:0;transform:translate(-50%,-50%) rotate(90deg) scale(.5)}.faq-item.is-open .faq-arrow:after{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease}.faq-answer p{margin:0;padding:0 0 1rem;color:var(--muted);line-height:var(--leading-relaxed)}