.header{background-color:#fff;border-bottom:1px solid #e0e0e0;padding:.75rem 1rem;position:sticky;top:0;z-index:100}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.header-logo{text-decoration:none;color:inherit}.header-logo h1{margin:0;font-size:1.5rem;font-weight:700;color:#333}.header-nav{display:flex;align-items:center;gap:1rem}.nav-link{text-decoration:none;color:#555;font-weight:500;padding:.5rem .75rem;border-radius:4px;transition:background-color .2s,color .2s}.nav-link:hover{background-color:#f5f5f5;color:#333}.user-menu{display:flex;align-items:center;gap:.75rem;margin-left:.5rem;padding-left:1rem;border-left:1px solid #e0e0e0}.username{font-weight:500;color:#333}.logout-btn{background:none;border:1px solid #ddd;padding:.4rem .75rem;border-radius:4px;cursor:pointer;font-size:.875rem;color:#666;transition:all .2s}.logout-btn:hover{background-color:#f5f5f5;border-color:#ccc}@media (max-width: 600px){.header-content{flex-direction:column;gap:.75rem}.header-nav{width:100%;justify-content:center;flex-wrap:wrap}.user-menu{margin-left:0;padding-left:0;border-left:none;padding-top:.5rem;border-top:1px solid #e0e0e0;width:100%;justify-content:center}}.layout{min-height:100vh;display:flex;flex-direction:column;background-color:#fafafa}.main-content{flex:1;display:flex;flex-direction:column;max-width:1200px;width:100%;margin:0 auto;padding:1rem}@media (max-width: 600px){.main-content{padding:.5rem}}.loading-container{display:flex;justify-content:center;align-items:center;min-height:200px;flex:1}.loading-spinner{width:40px;height:40px;border:3px solid #e0e0e0;border-top-color:#6aaa64;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;padding:2rem;text-align:center}.error-message{color:#d32f2f;margin-bottom:1rem}.retry-btn{background-color:#6aaa64;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:4px;cursor:pointer;font-size:1rem;transition:background-color .2s}.retry-btn:hover{background-color:#5a9a54}.home-page{display:flex;flex-direction:column;align-items:center;padding:2rem 1rem}.hero-section{text-align:center;margin-bottom:3rem}.hero-title{font-size:2.5rem;font-weight:700;color:#333;margin-bottom:.5rem}.hero-subtitle{font-size:1.25rem;color:#666;margin-bottom:2rem}.hero-actions{display:flex;gap:1rem;justify-content:center}.play-btn{background-color:#6aaa64;color:#fff;text-decoration:none;padding:1rem 2rem;border-radius:8px;font-size:1.125rem;font-weight:600;transition:background-color .2s,transform .1s}.play-btn:hover{background-color:#5a9a54;transform:translateY(-2px)}.how-to-play{max-width:500px;width:100%}.how-to-play h2{text-align:center;margin-bottom:1.5rem;color:#333}.rules-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.rule{display:flex;align-items:center;gap:1rem;padding:1rem;background-color:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.rule-number{width:32px;height:32px;background-color:#6aaa64;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}.rule p{margin:0;color:#555}.tile-examples{display:flex;flex-direction:column;gap:1rem}.example{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background-color:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.example-tile{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:#fff;border-radius:4px;flex-shrink:0}.example-tile.correct{background-color:#6aaa64}.example-tile.present{background-color:#c9b458}.example-tile.absent{background-color:#787c7e}.example p{margin:0;color:#555;font-size:.9rem}@media (max-width: 600px){.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.play-btn{padding:.875rem 1.5rem;font-size:1rem}}.not-found-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;text-align:center}.not-found-page h1{font-size:6rem;font-weight:700;color:#ccc;margin:0}.not-found-page p{font-size:1.5rem;color:#666;margin-bottom:2rem}.home-link{background-color:#6aaa64;color:#fff;text-decoration:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;transition:background-color .2s}.home-link:hover{background-color:#5a9a54}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:#fafafa;color:#333}a{color:inherit}button{font-family:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}