:root{--primary-color: #4a90e2;--secondary-color: #9b59b6;--background-color: #ffffff;--text-color: #333333;--text-muted-color: #6c757d;--border-color: #e9ecef;--danger-color: #dc3545;--header-bg-color: #f8f9fa;--hover-bg-color: #f5f5f5;--chip-bg-color: #e9ecef;--chip-hover-bg-color: #dee2e6;--chip-hover-border-color: #e9ecef;--active-filters-bg-color: #f8f9fa}*{margin:0;padding:0;box-sizing:border-box}body{font-size:16px;font-family:Verdana,sans-serif;color:#333;background-color:#fff;display:flex;align-items:center;min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:600;color:navy;text-align:center}button{padding:10px 20px;border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:background-color .3s,transform .2s}input{font-family:Verdana,sans-serif}p{margin:10px 0}ul,ol{list-style-position:inside}a{color:#4a90e2;text-decoration:none}a:hover{text-decoration:underline}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.outerWrapper{max-width:800px;margin:0 auto;padding:20px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-family:Verdana,sans-serif}.gameMeta{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;flex-wrap:wrap;gap:20px}.leftMeta{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;text-align:center}.wrapper{margin:40px auto;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}@media screen and (max-width: 768px){.outerWrapper{padding:15px}.gameMeta{flex-direction:column;align-items:center}.leftMeta{width:100%;text-align:center}}@media screen and (max-width: 480px){h1{font-size:1.5em}}#gameHeader{font-size:2em;color:navy;margin-bottom:20px}.wordLengthInputContainer #wordLengthInput{width:60px;padding:5px 10px;text-align:center;font-size:1.5em;margin:5px;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.wordLengthInputContainer #wordLengthInput::-webkit-outer-spin-button,.wordLengthInputContainer #wordLengthInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#startGame{background-color:#add8e6;border-radius:5px;padding:6px 12px;margin-top:30px;font-size:1.5em}#startGame:hover{background-color:#f0f0f0;cursor:pointer}.actionButtons{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}.timerDifficultyInfo{display:flex;align-items:center;justify-content:space-between;margin:20px 0 0;width:100%;max-width:600px}.timerDifficultyInfo #timerDisplay{text-align:center;font-size:1.2em;font-weight:600;color:#3a80d2;display:none}.timerDifficultyInfo #difficulty{text-align:center;font-size:1.2em;font-weight:600;display:none}.wordRow{border-top:1px solid blue;background-color:#add8e6;padding:3px;margin:0;text-align:center}.wordLetterBox{border:1px solid #000000;padding:3px;margin:5px;background-color:#fff;width:2.25em;height:2.25em;text-align:center;font-size:1.2em;line-height:1.8em;font-weight:600;text-transform:uppercase;touch-action:manipulation;-webkit-appearance:none;appearance:none;display:inline-flex;justify-content:center;align-items:center}.wordLetterBox.contains{background-color:#faedcd;color:#884c00;animation:rotate 1s linear}.wordLetterBox.notContains{background-color:#f5a9a9;color:#7a1c1c;animation:rotate 1s linear}.wordLetterBox.correct{background-color:#adebad;color:#1a531b;animation:rotate 1s linear}.wordLetterBox.hint-provided{animation:highlight-hint 2s ease}#alphabetContainer{border:1px solid blue;background-color:#add8e6;padding:10px;border-radius:4px;margin:20px auto;width:100%;max-width:600px;display:none;flex-direction:column;align-items:center}#alphabetContainer.visible{display:flex}#alphabetContainer .alphabet-label{font-weight:600;font-size:16px;margin-bottom:10px;color:#333;text-align:center}#alphabetContainer .alphabet-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(4,1fr);gap:3px;width:95%;max-width:520px;margin:0 auto;justify-content:center;align-items:center}#alphabetContainer .alphabet-grid .letter-spacer{visibility:hidden;grid-column:span 1}#alphabetContainer .alphabet-grid span{border:1px solid #cccccc;border-radius:4px;padding:3px;text-align:center;text-transform:uppercase;font-weight:600;font-size:.9rem;transition:all .3s ease;display:flex;align-items:center;justify-content:center;cursor:default;aspect-ratio:1/1;min-width:32px;min-height:32px}#alphabetContainer .alphabet-grid span.notGuessed{background-color:#f9f9f9;color:#333;border-color:#ddd}#alphabetContainer .alphabet-grid span.correct{background-color:#adebad;color:#1a531b;border-color:#84e184}#alphabetContainer .alphabet-grid span.notContains{background-color:#f5a9a9;color:#7a1c1c;border-color:#f07b7b}#alphabetContainer .alphabet-grid span.contains{background-color:#faedcd;color:#884c00;border-color:#f5dc9f}#resetGame{display:none;width:150px;align-self:center;background-color:#dc3545;padding:10px 20px;border:none;border-radius:5px;color:#fff;font-size:16px;cursor:pointer;transition:background-color .3s ease}#resetGame:hover{background-color:#c82333}@media screen and (max-width: 768px){#alphabetContainer{padding:5px}#alphabetContainer .alphabet-grid{gap:3px}#alphabetContainer .alphabet-grid span{padding:3px;font-size:.9em}.wordLetterBox{width:1.3em;height:1.3em;margin:2px}}@media screen and (max-width: 480px){#wordLengthInput,#startGame{font-size:1.2em}#alphabetContainer{padding:5px}#alphabetContainer .alphabet-label{font-size:.9em;margin-bottom:5px}#alphabetContainer .alphabet-grid{gap:2px}#alphabetContainer .alphabet-grid span{padding:2px;font-size:.8em}.wordLetterBox{width:1.8em;height:1.8em;margin:2px;padding:2px}}.modal{position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.85);display:flex;align-items:center;display:none}.modal-content{background-color:#fff;margin:auto;padding:20px;border:1px solid #888;width:90%;max-width:300px;border-radius:10px;text-align:center;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;max-width:600px}.how-to-play-btn{padding:10px 20px;border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:background-color .3s,transform .2s;background-color:#4a90e2;color:#fff;margin:10px auto;display:block}.how-to-play-btn:hover:not(:disabled){transform:translateY(-2px)}.how-to-play-btn:active:not(:disabled){transform:translateY(0)}.how-to-play-btn:hover{background-color:#3a80d2}.how-to-play-content{text-align:left;width:90%;max-width:700px}.how-to-play-content h2{font-weight:600;color:navy;text-align:center;margin-bottom:15px;width:100%}.rules-container{max-height:60vh;overflow-y:auto;padding-right:10px;width:100%}.rules-container::-webkit-scrollbar{width:8px}.rules-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.rules-container::-webkit-scrollbar-thumb{background:#4a90e2;border-radius:4px}.rules-container::-webkit-scrollbar-thumb:hover{background:#3a80d2}.rules-container ol,.rules-container ul{margin-left:10px}.rules-container ol li,.rules-container ul li{margin-bottom:5px;line-height:1.5;font-size:16px}.rules-container ul{margin-top:5px}.stats-content{text-align:left;width:90%;max-width:600px}.stats-content h2{font-weight:600;color:navy;margin-bottom:10px;text-align:center}.stats-container{max-height:70vh;overflow-y:auto;padding:10px}.stats-container .no-stats{text-align:center;color:#6c757d;font-style:italic;padding:15px}.stats-container .stats-list{list-style:none;padding:0;margin:0}.stats-container .stat-item{background:#f8f9fa;border-radius:8px;padding:10px;margin-bottom:10px;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:transform .2s ease}.stats-container .stat-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.stats-container .stat-item .stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.stats-container .stat-item .stat-header .stat-rank{font-weight:700;color:#4a90e2;font-size:1.1em}.stats-container .stat-item .stat-header .stat-time{font-weight:700;color:#333}.stats-container .stat-item .stat-details{display:flex;justify-content:space-between;color:#6c757d;font-size:.9em}.stats-container::-webkit-scrollbar{width:8px}.stats-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.stats-container::-webkit-scrollbar-thumb{background:#4a90e2;border-radius:4px}.stats-container::-webkit-scrollbar-thumb:hover{background:#3a80d2}.stats-container .green-highlight{background-color:#4caf50;color:#fff;padding:2px 5px;border-radius:3px}.stats-container .orange-highlight{background-color:#ff9800;color:#fff;padding:2px 5px;border-radius:3px}.stats-container .grey-highlight{background-color:#9e9e9e;color:#fff;padding:2px 5px;border-radius:3px}.close{color:#aaa;float:right;font-size:28px;font-weight:600;position:absolute;top:10px;right:10px;line-height:1}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.alert-buttons{display:flex;justify-content:center;gap:10px;margin-top:10px}#alertTryAgainButton{padding:10px 20px;border:none;border-radius:5px;color:#fff;font-size:16px;cursor:pointer;transition:background-color .3s ease;background-color:#4a90e2}#alertTryAgainButton:hover{background-color:#3a80d2}#alertResetButton{padding:10px 20px;border:none;border-radius:5px;color:#fff;font-size:16px;cursor:pointer;transition:background-color .3s ease;background-color:#28a745}#alertResetButton:hover{background-color:#218838}.invalid-word-alert,.success-alert,.failure-alert{text-align:center;padding:10px;border-radius:5px;margin-bottom:10px}.invalid-word-alert .alert-icon,.success-alert .alert-icon,.failure-alert .alert-icon{font-size:2rem;display:block;margin-bottom:5px}.invalid-word-alert h3,.success-alert h3,.failure-alert h3{margin:5px 0;font-size:1.5em}.invalid-word-alert p,.success-alert p,.failure-alert p{margin:5px 0;font-size:16px}.invalid-word-alert p strong,.success-alert p strong,.failure-alert p strong{font-weight:600}.invalid-word-alert{background-color:#fff3f3;border:2px solid #ff6b6b}.invalid-word-alert h3{color:#e74c3c}.success-alert{background-color:#f0fff0;border:2px solid #4CAF50}.success-alert h3{color:#2e7d32}.failure-alert{background-color:#fffbf0;border:2px solid #FF9800}.failure-alert h3{color:#e65100}@media screen and (max-width: 480px){.modal-content{width:95%;padding:15px}.how-to-play-btn{width:90%;font-size:16px;padding:10px}.rules-container{max-height:70vh}.invalid-word-alert{padding:5px}.invalid-word-alert h3{font-size:16px}.invalid-word-alert p{font-size:.9em}}#statsList{text-align:center;font-size:16px;margin:20px auto;padding:10px;background-color:#add8e6;border:1px solid blue;display:block;max-height:600px;overflow-y:auto;scrollbar-width:thin;width:100%;max-width:600px;border-radius:5px}.stats-table{width:100%;background:var(--background-color);border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1)}.stats-header{display:grid;grid-template-columns:.5fr 1fr 1fr 1fr;background:var(--header-bg-color);position:sticky;top:0;z-index:1}.header-cell{display:flex;align-items:center;height:48px;padding:0 12px;font-weight:600;cursor:pointer;user-select:none;transition:background-color .3s ease}.header-cell:hover{background-color:var(--hover-bg-color)}.header-cell .header-content{flex:1}.stats-body{transition:opacity .3s ease}.stat-row{display:grid;grid-template-columns:.5fr 1fr 1fr 1fr;height:40px;border-bottom:1px solid var(--border-color);animation:fadeIn .5s ease forwards;transition:background-color .3s ease}.stat-row:hover{background-color:var(--hover-bg-color)}.stat-row:last-child{border-bottom:none}.stat-cell{display:flex;align-items:center;justify-content:center;padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.stats-header,.stat-row{grid-template-columns:.3fr 1fr .8fr .8fr}.header-cell,.stat-cell{padding:0 8px}}.hint-button{position:relative;padding:10px 20px;border:none;border-radius:4px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .3s,transform .2s;overflow:hidden;min-width:150px}.hint-button:hover:not(:disabled){transform:translateY(-2px)}.hint-button:active:not(:disabled){transform:translateY(0)}.hint-button:disabled{opacity:.7;cursor:not-allowed}.hint-button.cooldown{background-color:#777}.letter-hint{background-color:#4a90e2;color:#fff}.letter-hint:hover:not(:disabled){background-color:#3a80d2}.position-hint{background-color:#9b59b6;color:#fff}.position-hint:hover:not(:disabled){background-color:#8e44ad}.inactive-hint{opacity:.5;cursor:not-allowed;pointer-events:none}.cooldown-progress{position:absolute;bottom:0;left:0;height:4px;background-color:#2ecc71;width:0%;transition:width .05s linear}.hint-provided{animation:highlight-hint 2s ease}@keyframes highlight-hint{0%,to{background-color:inherit}50%{background-color:gold}}.sort-indicator{position:relative;width:16px;height:16px;margin-left:8px;transition:transform .3s ease}.sort-indicator:before,.sort-indicator:after{content:"";position:absolute;left:50%;width:8px;height:2px;background-color:var(--text-color);border-radius:1px;transition:all .3s ease}.sort-indicator--default:before,.sort-indicator--default:after{width:2px;height:2px;border-radius:50%;background-color:var(--text-muted-color)}.sort-indicator--default:before{top:3px;transform:translate(-50%)}.sort-indicator--default:after{top:7px;transform:translate(-50%)}.sort-indicator--default:before{content:"";top:11px;transform:translate(-50%)}.sort-indicator--asc:before{top:8px;transform:translate(-50%) rotate(-45deg);transform-origin:center}.sort-indicator--asc:after{top:8px;transform:translate(-50%) rotate(45deg);transform-origin:center}.sort-indicator--desc:before{top:8px;transform:translate(-50%) rotate(45deg);transform-origin:center}.sort-indicator--desc:after{top:8px;transform:translate(-50%) rotate(-45deg);transform-origin:center}.header-cell:hover .sort-indicator--default:before,.header-cell:hover .sort-indicator--default:after{background-color:var(--text-color)}.header-cell[data-active=true] .sort-indicator:before,.header-cell[data-active=true] .sort-indicator:after{background-color:var(--primary-color)}.filter-panel{background:var(--background-color);border-radius:5px;padding:10px;margin-bottom:10px;box-shadow:0 2px 5px rgba(0,0,0,.1)}.filter-section+.filter-section{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-color)}.filter-section h3{margin:0 0 5px;font-size:.9em;color:var(--text-muted-color)}.filter-chips{display:flex;flex-wrap:wrap;gap:5px}.filter-chip{height:32px;padding:0 10px;border-radius:16px;background:var(--chip-bg-color);border:1px solid var(--border-color);cursor:pointer;user-select:none;transition:all .3s ease;display:flex;align-items:center}.filter-chip:hover{background:var(--chip-hover-bg-color);border-color:var(--chip-hover-border-color)}.filter-chip.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.active-filters{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;min-height:32px;padding:3px;border-radius:5px;background:var(--active-filters-bg-color)}.active-filter{display:flex;align-items:center;height:24px;padding:0 5px;border-radius:12px;background:var(--primary-color);color:#fff;font-size:.9em}.active-filter .remove-filter{margin-left:3px;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;display:flex;align-items:center;justify-content:center}.active-filter .remove-filter:hover{background:rgba(255,255,255,.3)}.active-filter .remove-filter:before,.active-filter .remove-filter:after{content:"";position:absolute;width:8px;height:2px;background:#fff;border-radius:1px}.active-filter .remove-filter:before{transform:rotate(45deg)}.active-filter .remove-filter:after{transform:rotate(-45deg)}.clear-filters{margin-top:10px;padding:5px 10px;border-radius:5px;background:var(--danger-color);color:#fff;border:none;cursor:pointer;transition:opacity .3s ease}.clear-filters:hover{opacity:.9}.clear-filters:disabled{opacity:.5;cursor:not-allowed}@keyframes chipIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.filter-chip{animation:chipIn .3s ease forwards}@media (max-width: 768px){.filter-panel{padding:5px}.filter-chips{gap:3px}.filter-chip{height:28px;padding:0 5px;font-size:.9em}}
