.catalog-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-5px 0 25px}
.catalog-search{width:min(100%,300px);padding:11px 14px;border:1px solid #ffffff35;border-radius:13px;background:#20213e;color:#fff;font:inherit}
.catalog-search::placeholder{color:#aaa8bd}
.catalog-filters{display:flex;gap:7px;flex-wrap:wrap}
.catalog-filters button{padding:9px 12px;border:1px solid #ffffff30;border-radius:999px;background:#ffffff0e;color:#dddbea;cursor:pointer;font-size:.83rem;font-weight:750}
.catalog-filters button.active,.catalog-filters button:hover{background:#8cfdc5;color:#111227;border-color:#8cfdc5}
.catalog-empty{color:#c9c7dc;padding:8px 0 42px}
.ex-game{gap:18px;touch-action:manipulation}
.ex-hero{max-width:100%;min-height:62px;display:grid;place-items:center;color:#8cfdc5;font-size:clamp(1.8rem,7vw,3.25rem);font-weight:900;text-align:center;overflow-wrap:anywhere}
.ex-spaced{letter-spacing:.13em;font-size:clamp(1.4rem,5vw,2.2rem)}
.ex-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.ex-actions button,.ex-form button,.ex-answer button{border:1px solid #ffffff34;border-radius:12px;background:#304363;color:#fff;padding:10px 15px;font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation}
.ex-actions button:hover,.ex-form button:hover,.ex-answer button:hover{background:#466488}
.ex-actions button:disabled,.ex-answer button:disabled{opacity:.5;cursor:default}
.ex-form{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;width:min(100%,430px)}
.ex-form input,.ex-form textarea{min-width:0;flex:1;padding:12px 14px;border:1px solid #ffffff40;border-radius:12px;background:#11182e;color:#fff;font:inherit}
.ex-form input{max-width:180px}
.ex-typing textarea{flex-basis:100%;resize:vertical}
.ex-board{display:grid;gap:5px;width:min(100%,380px);padding:8px;border-radius:16px;background:#101b31}
.ex-three{grid-template-columns:repeat(3,1fr);width:min(100%,320px)}
.ex-four{grid-template-columns:repeat(4,1fr);width:min(100%,350px)}
.ex-five{grid-template-columns:repeat(5,1fr);width:min(100%,340px)}
.ex-six{grid-template-columns:repeat(6,1fr);width:min(100%,360px)}
.ex-eight{grid-template-columns:repeat(8,1fr);width:min(100%,380px);gap:3px}
.ex-nine{grid-template-columns:repeat(9,1fr);width:min(100%,360px);gap:2px}
.ex-cell{aspect-ratio:1;border:1px solid #ffffff27;border-radius:9px;background:#303f62;color:#fff;font-size:clamp(.9rem,4vw,1.5rem);font-weight:850;cursor:pointer;padding:0;display:grid;place-items:center}
.ex-cell:hover:not(:disabled){background:#45608b}
.ex-cell:disabled{cursor:default}
.ex-cell.empty{background:#111a2d;border-color:transparent}
.ex-cell.lit{background:#ffe080;box-shadow:0 0 13px #ffdc65a0}
.ex-cell.given{background:#557b9c;color:#fff}
.ex-cell.selected{background:#9077d9}
.ex-cell.done{background:#37725e;color:#b6ffe3}
.ex-cell.ship-hit{background:#9d4c69}
.ex-cell.ship-reveal{background:#66476f}
.ex-cell.miss{color:#8998b6}
.ex-sudoku .ex-cell:nth-child(4n+2){border-right:3px solid #f6d78a}
.ex-sudoku .ex-cell:nth-child(n+5):nth-child(-n+8){border-bottom:3px solid #f6d78a}
.ex-maze-cell{aspect-ratio:1;display:grid;place-items:center;border-radius:3px;background:#375479;font-size:clamp(.5rem,3vw,1.15rem)}
.ex-maze-cell.wall{background:#14233e}
.ex-maze-cell.player{background:#69cdb2}
.ex-maze-cell.goal{background:#836fd0}
.ex-towers{width:min(100%,440px);display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ex-tower{min-height:180px;position:relative;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:4px;padding:12px 2px 24px;border:1px solid #ffffff33;border-radius:14px;background:#202b49;cursor:pointer}
.ex-tower.selected{border-color:#8cfdc5;background:#304767}
.ex-tower small{position:absolute;bottom:3px;color:#d1cfe4}
.ex-pole{position:absolute;bottom:24px;left:calc(50% - 4px);height:125px;width:8px;border-radius:8px;background:#7786a6}
.ex-disc{position:relative;z-index:1;height:23px;border-radius:100px;background:#8cfdc5}
.ex-disc-1{width:35%}.ex-disc-2{width:50%;background:#75bafa}.ex-disc-3{width:65%;background:#e6ab72}.ex-disc-4{width:80%;background:#cf77af}
.ex-code{display:flex;gap:8px}
.ex-code-dot{height:60px;width:60px;border:1px solid #ffffff30;border-radius:13px;background:#2b3658;font-size:2rem;cursor:pointer}
.ex-history{max-height:140px;overflow:auto;display:grid;gap:5px;color:#dbd9ec;font-size:.88rem;text-align:center}
.ex-letters{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;width:min(100%,440px)}
.ex-letters button{aspect-ratio:1;border:1px solid #ffffff30;border-radius:7px;background:#344b70;color:#fff;font-weight:850;cursor:pointer}
.ex-letters button:disabled{opacity:.35}
.ex-words{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-weight:850;color:#d5d3e9}
.ex-words span.found{text-decoration:line-through;color:#8cfdc5}
.ex-eight .ex-cell{border-radius:5px;font-size:clamp(.8rem,3vw,1.1rem)}
.ex-prompt{max-width:470px;text-align:center;font-size:1.3rem;font-weight:800;line-height:1.4;color:#e9e8f4}
.ex-cups{display:flex;gap:12px;justify-content:center}
.ex-cup{width:90px;min-height:100px;position:relative;border:1px solid #ffffff30;border-radius:14px;background:#2e3658;font-size:3rem;cursor:pointer}
.ex-cup span{position:absolute;right:6px;bottom:4px;font-size:1.1rem}
.ex-cup small{position:absolute;left:7px;bottom:5px;color:#d9d5eb;font-size:.9rem;font-weight:900}
.ex-cup.swapping{background:#665a96;transform:translateY(-7px)}
.ex-cup.ready:hover{background:#49577b}
.ex-order .ex-cell.done{visibility:hidden}
.ex-canvas{display:block;width:min(100%,480px);height:auto;border:1px solid #ffffff30;border-radius:15px;background:#14233f;touch-action:none}
.ex-lanes{width:min(100%,330px);height:280px;position:relative;overflow:hidden;border:1px solid #ffffff30;border-radius:15px;background:repeating-linear-gradient(90deg,#14233f 0,#14233f 32.7%,#486184 33%,#14233f 33.3%)}
.ex-lanes #falling span{position:absolute;transform:translateX(-50%);font-size:2rem;transition:top .28s linear}
.ex-player{position:absolute;bottom:9px;transform:translateX(-50%);font-size:2.3rem;transition:left .14s}
.ex-answer{display:grid;grid-template-columns:repeat(2,minmax(110px,190px));gap:8px}
@media(max-width:500px){.catalog-tools{align-items:stretch}.catalog-search{width:100%}.ex-letters{grid-template-columns:repeat(7,1fr)}.ex-board{gap:3px;padding:5px}.ex-code-dot{width:49px;height:52px}.ex-cup{width:75px}.ex-tower{min-height:150px}}
