:root{--primary-color: #6366f1;--secondary-color: #06b6d4;--accent1-color: #f87171;--accent2-color: #60a5fa;--accent3-color: #fbbf24;--accent4-color: #34d399;--accent5-color: #ec4899;--accent6-color: #818cf8;--accent7-color: #f97316;--accent8-color: #38bdf8;--text-color: #1e293b;--text-light: #64748b;--bg-color: #f8fafc;--bg-dark: #0f172a;--border-radius: 16px;--box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .1);--transition: all .3s cubic-bezier(.4, 0, .2, 1);--stats-button-bg: #e2e8f0;--stats-button-text: #334155;--stats-button-border: #cbd5e1;--stats-button-hover: #818cf8;--word-font-color: #0f172a;--word-found-color: #9ca3af;--stats-button-clicked: #4ade80;--stats-button-found: #facc15}.puzzle-container{position:relative;width:100%;max-width:800px;margin:0 auto;min-height:100vh;padding:20px;box-sizing:border-box}.grid__puzzle{display:grid;gap:12px;padding:28px;border-radius:var(--border-radius);box-shadow:var(--box-shadow),0 0 0 15px #6366f114;margin:0 auto;width:100%;max-width:600px;aspect-ratio:1;border:6px solid #f1f5f9;grid-template-columns:repeat(auto-fit,minmax(40px,1fr))}.grid__puzzle .cell{aspect-ratio:1;display:flex;justify-content:center;align-items:center;background:#f8fafc;border:3px solid #e2e8f0;border-radius:12px;font-size:3ch;font-weight:700;color:var(--text-color);transition:var(--transition);cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;min-width:40px;min-height:40px}.grid__puzzle .cell:focus{outline:none;user-select:text}.grid__puzzle .cell:hover{transform:translateY(-3px);background:#eef2ff;border-color:var(--primary-color);box-shadow:0 0 16px 4px var(--primary-color),0 8px 20px #6366f126}.grid__puzzle .cell.selected{background:var(--primary-color);color:#fff;transform:scale(1.08);box-shadow:0 8px 20px #6366f166;animation:pulse 1.5s infinite alternate}.grid__puzzle .cell[class*=word-color-]{color:#f3ebeb;border-color:inherit;box-shadow:inset 0 1px 7px #0000004d}.grid__puzzle .cell.word-color-1{background-color:var(--accent7-color)}.grid__puzzle .cell.word-color-2{background-color:var(--secondary-color)}.grid__puzzle .cell.word-color-3{background-color:var(--accent1-color)}.grid__puzzle .cell.word-color-4{background-color:var(--accent4-color)}.grid__puzzle .cell.word-color-5{background-color:var(--accent5-color)}.grid__puzzle .cell.word-color-6{background-color:var(--accent6-color)}.grid__puzzle .cell.word-color-7{background-color:var(--accent3-color)}.grid__puzzle .cell.word-color-8{background-color:var(--accent8-color)}details{width:100%;border-radius:var(--border-radius);background-color:#6366f10d;box-shadow:0 8px 20px #0000000d;margin:20px 0;border-left:4px solid var(--primary-color)}details summary{padding:16px 24px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:12px;position:relative;border-bottom:2px solid rgba(99,102,241,.1);margin-bottom:12px;font-size:2.5vw}details summary:after{content:"";position:absolute;right:24px;width:30px;height:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;transition:var(--transition);transform:rotate(360deg)}details summary::-webkit-details-marker{display:none}details:not([open]) summary{border-bottom:none;margin-bottom:0}details:not([open]) summary:after{transform:rotate(0)}.word-list{display:flex;flex-wrap:wrap;gap:12px;padding:16px}.word-list .word{padding:8px 16px;border-radius:25px;font-weight:600;color:#fff;background-color:#3e18ff;transition:var(--transition);box-shadow:0 6px 12px #0000001a}.word-list .word.found{text-decoration:line-through;opacity:.7;transform:scale(.97)}.stats-container{display:flex;gap:14px;margin:32px 0;justify-content:center;flex-wrap:wrap}.stats-button{background:linear-gradient(135deg,var(--primary-color),var(--accent6-color));border:2px solid transparent;border-radius:var(--border-radius);padding:14px 28px;font-weight:600;transition:var(--transition);color:#fff;position:relative;overflow:hidden;min-width:80px;text-align:center}.stats-button:hover{transform:translateY(-2px);box-shadow:var(--box-shadow);background:linear-gradient(135deg,var(--accent2-color),var(--accent8-color))}.stats-button:nth-child(1){background:var(--accent4-color);background:linear-gradient(135deg,var(--primary-color),var(--accent6-color))}.stats-button:nth-child(2){background:linear-gradient(135deg,var(--accent1-color),var(--accent7-color))}.stats-button:nth-child(3){background:linear-gradient(135deg,var(--accent5-color),var(--accent3-color))}.stats-button:nth-child(4){background:linear-gradient(135deg,var(--accent2-color),var(--accent8-color))}.stats-button.clicked{background-color:var(--stats-button-clicked);color:#fff}.stats-button.found{background-color:var(--stats-button-found);color:#1f2937}@media (max-width: 1024px){.grid__puzzle{gap:6px;padding:16px;grid-template-columns:repeat(auto-fit,minmax(30px,1fr))}.grid__puzzle .cell{font-size:2.5ch;border-width:2px;min-width:30px;min-height:30px}.stats-button{font-size:3vh;padding:11px 18px;min-width:70px}.word-list{gap:10px;padding:10px 14px;margin-top:5px}.word-list .word{font-size:.9rem;padding:5px 14px}}@media (max-width: 768px){.grid__puzzle{gap:4px;padding:12px;grid-template-columns:repeat(auto-fit,minmax(25px,1fr))}.grid__puzzle .cell{font-size:5vw;border-width:2px;min-width:25px;min-height:25px}.stats-button{font-size:3vh;padding:10px 16px;display:flex;align-items:center;gap:6px}}@media (max-width: 480px){.grid__puzzle{gap:3px;padding:3px;grid-template-columns:repeat(auto-fit,minmax(20px,1fr))}.grid__puzzle .cell{font-size:6vw;border-width:2px;min-width:25px;min-height:25px}.stats-container{flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}.stats-button{font-size:4vw;padding:8px 14px;min-width:80px;color:#000;color:#fff;background:var(--accent2-color);display:flex;align-items:center;gap:6px}#solutionBtn{background:none;border:none;max-width:45px;max-height:45px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center}.stats-button .bulb-icon,.stats-button svg{max-width:22px!important;max-height:22px!important;display:inline-block;vertical-align:middle}details summary{font-size:6vw;padding:12px 16px}}.container__setting{container:setting/inline-size;.setting__trigger{position:fixed;anchor-name:--setting;display:flex;justify-items:end;justify-content:center;top:4rem;right:1.5rem;width:max-content;height:3.5rem;border-radius:10%;background-color:unset;border:solid;cursor:pointer;font-size:4rem;transition:transform .33s ease-in-out;&:after{outline:1px solid slateblue}}@media (max-width: 480px){.setting__trigger{font-size:.6rem;width:2.5rem;height:2.5rem;margin-top:12px}}.setting__panel{position:fixed;position-anchor:--setting;top:calc(anchor(bottom) + 15px);right:calc(anchor(left) + 10px);justify-self:anchor-center;width:20rem;height:20rem;background-color:#d6bbad;border-radius:4px;padding:.74rem;transition:all .4s cubic-bezier(.34,1.56,.64,1);color:color(xyz 0 0 1);&::backdrop{background-color:#1a1a1a80;backdrop-filter:blur(2px)}.control__group{display:grid;grid-auto-flow:row;gap:.5rem;width:20rem}button,select{background-color:#393f54;color:#fff;border:none;padding:1.5rem;cursor:pointer;transition:transform .3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:1.5rem;letter-spacing:.01em;touch-action:pinch-zoom;border-radius:9px;&:hover:not(.close){background-color:#380127;transform:translateY(-3px)}&.close{width:2rem;height:3rem;justify-self:end;border-radius:6px;&:hover{font-size:30px}}}&[popover]{position:fixed;inset:unset;width:max-content;right:0;bottom:0;margin:auto;overflow:auto;color:CanvasText;background-color:Canvas;padding:1rem;border:solid;border-radius:1rem;opacity:0;visibility:hidden;transition:translate .7s ease-out,display .7s ease-out allow-discrete,overlay .7s ease-out allow-discrete,height .5s ease-in-out;translate:0 -2rem;&:popover-open{opacity:1;visibility:visible;top:40px;bottom:0;translate:0 0;min-height:30rem;justify-content:center;:where(button,select){background:linear-gradient(90deg,#11fff7,#2760f1);transform:scaleZ(1) rotate(5deg);border-radius:7px}}@starting-style{opacity:0;visibility:hidden}}}&:has(:popover-open){.setting__trigger{background-color:#6aca77;transform:scale(1.05) rotate(45deg)}}}