:root{--primary-color: #ffd200;--secondary-color: #f4fafd;--tertiary-color: #000;--color-black: #000;--color-white: #fff;--color-text: #333;--color-text-muted: #555;--color-text-faint: #aaa;--bg-page: #f4fafd;--comic-border-width: 3px 9px 9px 3px;--comic-border-color: var(--color-black);--comic-border-style: solid;--comic-border-radius: 50px;--comic-border-radius-mobile: 30px;--font-base: "Atkinson Hyperlegible", sans-serif}body{font-family:var(--font-base);background-color:var(--bg-page);width:100%;margin:0;padding:0;min-height:100vh}header{background:var(--bg-page);padding:0 1.5rem;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;border-bottom:3px solid var(--color-black)}.header-left h2{margin:0}.link-home-prop,.link-home-prop:visited{text-decoration:none;color:inherit}.header-right{display:flex;align-items:center;gap:8px}.nav-btn{height:10px;padding:0 16px;background:transparent;border:2px solid var(--color-black);border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;text-decoration:none;color:inherit;display:inline-flex;align-items:center;white-space:nowrap;transition:background .15s}.nav-btn:hover{background:var(--primary-color)}.nav-btn:visited{color:inherit}.help-btn{color:var(--color-text);background-color:var(--primary-color);border:none;border-radius:10px;padding:10px 20px;cursor:pointer;font-size:14px;width:90%;gap:5px}.container,.game-container,.game-not-started{background-color:var(--color-white);border-width:var(--comic-border-width);border-color:var(--comic-border-color);border-style:var(--comic-border-style);border-radius:var(--comic-border-radius);box-sizing:border-box}.first-section{display:flex;flex-direction:column;align-items:center;width:100%;min-height:20vh;justify-content:center;padding:50px 0 0;box-sizing:border-box}.container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin:20px auto;width:50%;height:100%;padding:50px 30px}.container h2{margin:0}.content-left{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex:1;height:100%}.content-right{display:flex;align-items:center;justify-content:center;flex-shrink:0}.mascotte{width:200px;height:auto;transform:scaleX(-1)}.second-section{display:flex;flex-direction:column;align-items:center;width:100%;min-height:20vh;justify-content:center;padding:0 0 50px;box-sizing:border-box}.second-section h2{margin:0 0 10px}.cards-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:20px}.game-card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 0 15px;border:3px solid var(--color-black);border-radius:20px;width:200px;height:300px;background-color:var(--color-white);transition:transform .15s}.game-card:hover{transform:scale(1.05)}.card-top{display:flex;flex-direction:column;align-items:center;width:100%}.img-prop{display:flex;align-items:center;justify-content:center;width:100%;height:150px;border-radius:17px 17px 0 0;overflow:hidden}.img-prop img{width:100%;height:100%;object-fit:cover}.text-prop{display:flex;flex-direction:column;align-items:center;text-align:center}.card-title{font-size:18px;font-weight:700;margin:10px 0 0}.card-desc{font-size:14px;margin:5px 10px 20px}.link-prop,.link-prop:visited{text-decoration:none;display:flex;align-items:center;justify-content:center;color:inherit;width:90%}.btn{color:var(--color-text);border:solid 2px var(--color-black);border-radius:15px;padding:10px 20px;cursor:pointer;font-size:16px;width:90%}.switch{position:relative;display:inline-block;width:52px;height:28px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--border-color, #ccc);transition:.3s}.slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:var(--color-white);transition:.3s}input:checked+.slider{background-color:var(--primary-color)}input:focus-visible+.slider{box-shadow:0 0 0 2px var(--primary-color)}input:checked+.slider:before{transform:translate(24px)}.slider.round{border-radius:28px}.slider.round:before{border-radius:50%}.general-section{display:flex;flex-direction:column;width:min(90%,400px);padding:.75rem 1rem;border-radius:var(--border-radius, 8px);background-color:var(--background-secondary, #f5f5f5);margin:.5rem auto}.game-not-started .general-section{width:100%;box-sizing:border-box}.timer-section{display:flex;align-items:center;justify-content:space-between;padding:10px}.timer-section p{margin:0;font-size:1rem;color:var(--text-color, var(--color-text))}.diff-select{appearance:none;-webkit-appearance:none;background:var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;border:2px solid var(--color-black);border-radius:12px;padding:6px 36px 6px 12px;font-size:14px;font-weight:600;cursor:pointer;color:var(--color-text);width:fit-content}.diff-select:focus,.diff-select:hover{background-color:var(--primary-color)}.diff-select:focus{outline:none}.container-color{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 60px);transition:background-color .3s ease}.points{font-size:20px;font-weight:700;text-align:center}.game-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:20px}.game-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 50px;gap:20px;min-width:500px}.timer h2{font-size:20px;font-weight:700;margin:0}.game-container h2{font-size:48px;margin:0}.buttons-container{display:flex;flex-direction:row;gap:15px;width:100%}.buttons-container .btn{flex:1;font-size:22px;font-weight:700;border-radius:15px;padding:15px 0;border:3px solid var(--color-black);background-color:var(--color-white);cursor:pointer;transition:background-color .15s}.buttons-container .btn:hover{background-color:var(--primary-color)}.buttons-container .btn-color{flex:1;width:100%;height:70px;border-radius:15px;border:3px solid var(--color-black);cursor:pointer;transition:transform .15s}.buttons-container .btn-color:hover{transform:scale(1.05);border-width:4px}.memory-game{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;box-sizing:border-box}.card-memory-game{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1 / 1;border-width:3px 6px 6px 3px;border-color:var(--color-black);border-style:solid;border-radius:15px;cursor:pointer;font-size:14px;font-weight:700;transition:transform .15s;-webkit-user-select:none;user-select:none;box-sizing:border-box}.card-memory-game p{margin:0;text-align:center;visibility:hidden}.card-memory-game:hover{transform:scale(1.05)}.card-memory-game.flipped p{visibility:visible}.card-memory-game.flipped:hover{transform:none;cursor:default}.card-memory-game.matched{visibility:hidden;cursor:default;pointer-events:none}.game-not-started{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 50px;gap:20px;min-width:300px;text-align:center}.game-not-started h2{font-size:36px;margin:0}.game-not-started .buttons-row{display:flex;flex-direction:row;gap:15px}footer{display:flex;flex-direction:column;align-items:center;justify-content:center;border-top:3px solid var(--color-black);padding:30px 1.5rem;background-color:var(--bg-page);gap:10px;text-align:center}.footer-title{font-size:18px;font-weight:700;margin:0}.footer-desc{font-size:14px;margin:0;color:var(--color-text-muted)}.footer-links{display:flex;align-items:center;gap:10px}.footer-link{font-size:14px;color:inherit;text-decoration:none;font-weight:500}.footer-link:hover{text-decoration:none}.footer-link:visited{color:inherit}.footer-divider{color:var(--color-text-faint)}.footer-copy{font-size:12px;color:var(--color-text-faint);margin:0}.anagram-slots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;transition:background-color .2s ease}.letter-slot{width:44px;height:44px;border:3px solid #000;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;background-color:#fff}.anagram-slots.correct .letter-slot{background-color:#a8e6cf}.anagram-slots.wrong .letter-slot{background-color:#ffb3b3}.anagram-letters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px}.letter-tile{width:50px;height:50px;border:3px solid #000;border-radius:12px;background-color:#ffd200;font-size:22px;font-weight:700;cursor:pointer;font-family:Atkinson Hyperlegible,sans-serif;transition:transform .15s,opacity .15s}.letter-tile:hover:not(:disabled){transform:scale(1.08)}.letter-tile.used{opacity:0;pointer-events:none}.anagram-controls{display:flex;gap:10px;margin-top:15px}.anagram-controls .btn{width:auto;padding:10px 18px;font-size:14px}.hint-text{margin-top:10px;font-style:italic;color:#555;text-align:center}@media(max-width:768px){header{padding:0 1rem}.header-left h2{font-size:18px}.nav-btn{font-size:11px;padding:0 10px}.help-btn{font-size:12px;padding:8px 16px}.first-section{padding:30px 1rem 0}.second-section{padding:0 1rem 30px}.container{flex-direction:column;align-items:center;text-align:center;width:90%;padding:30px 20px;border-radius:var(--comic-border-radius-mobile)}.content-left{align-items:center}.content-right{margin-top:10px}.mascotte{width:150px}.cards-container{flex-direction:column;align-items:center;width:100%}.game-card{width:75%;height:auto;min-height:280px}.container-color{padding:20px 1rem;align-items:flex-start;padding-top:40px}.game-container{padding:30px 20px;border-radius:var(--comic-border-radius-mobile);min-width:unset;width:85vw}.game-container h2{font-size:36px}.buttons-container{flex-direction:column;width:100%}.buttons-container .btn{width:100%;font-size:18px}.buttons-container .btn-color{width:100%;height:90px}.memory-game{gap:10px;width:100%;padding:0}.card-memory-game{font-size:12px;border-radius:10px}.game-not-started{padding:30px 20px;border-radius:var(--comic-border-radius-mobile);min-width:unset;width:85vw}.game-not-started h2{font-size:28px}.game-not-started .buttons-row{flex-direction:column;width:100%}.game-not-started .buttons-row .btn{width:100%;text-align:center}}@media(max-width:480px){.header-left h2{font-size:16px}.container{width:95%;padding:25px 15px;border-radius:25px}.mascotte{width:120px}.game-card{width:90%}.game-container{width:95vw;padding:25px 15px}.game-container h2{font-size:28px}.buttons-container .btn{font-size:16px;padding:12px 0}.buttons-container .btn-color{width:100%;height:90px}.game-not-started{width:92vw}.memory-game{gap:6px}.card-memory-game{font-size:10px}.timer-section{width:95%;padding:.6rem .75rem}}
