.siralax-logo-header{width:100%;display:flex;justify-content:center;align-items:center;padding:8px 0}.siralax-logo-header.compact{padding:0}.siralax-logo-header.compact .siralax-logo-img{max-width:none;width:auto;height:40px}.siralax-logo-img{max-width:55%;height:auto;display:block}.language-selector{position:relative;font-size:.9rem;color:var(--on-surface-variant)}.language-selector-btn{display:flex;align-items:center;gap:4px;padding:6px 10px;background:var(--surface);border:1px solid var(--outline);border-radius:8px;cursor:pointer;font-family:inherit;color:var(--on-surface)}.language-selector-btn:hover{border-color:var(--primary);background:#6650a40f}.lang-flag{display:block;width:24px;height:18px;object-fit:cover;border-radius:2px}.lang-arrow{font-size:.65rem;color:var(--outline)}.language-selector-menu{position:absolute;top:100%;right:0;margin-top:4px;min-width:120px;background:var(--surface);border:1px solid var(--surface-variant);border-radius:12px;box-shadow:0 4px 12px #0000001f;z-index:100;overflow:hidden}.language-selector-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:none;cursor:pointer;font-family:inherit;font-size:.95rem;color:var(--on-surface);text-align:left}.language-selector-item:hover{background:#6650a414}.language-selector-item.active{background:#6650a41f;color:var(--primary);font-weight:600}.language-selector-item .lang-flag{width:22px;height:16px}.language-selector-item .lang-tag{font-size:.85rem}.register-banner{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.75rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:.9rem;text-align:center;box-shadow:0 2px 8px #0000001a}.register-banner-signin{color:#fff;font-weight:600;text-decoration:none;padding:.25rem .5rem;border:1px solid rgba(255,255,255,.5);border-radius:4px;transition:all .2s;white-space:nowrap}.register-banner-signin:hover{background:#fff3;border-color:#fff}.register-banner-signin:active{background:#ffffff4d}.register-banner-text{flex:1}.register-banner-link{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px;transition:opacity .2s}.register-banner-link:hover{opacity:.8}.register-banner-link:active{opacity:.6}@media(max-width:768px){.register-banner{flex-direction:column;padding:.5rem .75rem;text-align:center}.register-banner-text{width:100%}}.level-page{width:50%;max-width:100%;margin:0 auto;padding:16px;min-height:100vh}.level-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.level-header-left{display:flex;align-items:center;gap:4px}.level-header-center{flex:1;display:flex;justify-content:center;align-items:center}.level-header-right{display:flex;align-items:center}.section-title{margin:0 0 24px;font-size:24px;font-weight:500;color:var(--on-surface);text-align:center}.level-main{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}.level-grid{display:flex;flex-direction:column;gap:8px;width:100%}.level-card{background:var(--surface);border:1px solid var(--surface-variant);border-radius:12px;padding:16px;box-shadow:0 2px 4px #0000000f;background-color:#e7dfea!important}.level-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.level-card h3{margin:0;font-size:20px;font-weight:700;color:var(--on-surface)}.success-badge{background:#6650a426;color:var(--primary);padding:2px 8px;border-radius:6px;font-size:16px;font-weight:500}.level-card-meta{margin:0 0 16px;color:var(--on-surface-variant);font-size:16px}.level-card-actions{display:flex;gap:8px}.level-card-actions .btn{flex:1}.btn-outlined{background:transparent;color:var(--primary);border:1px solid var(--primary);padding:10px 16px;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit}.btn-outlined:hover{background:#6650a414}@media(max-width:768px){.level-page{width:100%;padding:12px}.level-header{flex-direction:column;align-items:flex-start;gap:4px}.level-card{padding:12px}.level-card h3{font-size:18px}.success-badge,.level-card-meta{font-size:14px}.level-card-actions{flex-direction:column}.section-title{font-size:20px}}.game-card{width:100%;aspect-ratio:.7;max-width:72px;border:none;border-radius:8px;color:var(--on-surface);font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:transform .15s,filter .2s}.game-card.closed{background:var(--card-back);color:#fff}.game-card.closed .card-value{color:#fff}.game-card.clickable{cursor:pointer;background:var(--card-clickable);color:#1c1b1f}.game-card.clickable:hover:not(:disabled){transform:scale(1.03);filter:brightness(1.05)}.game-card.open{background:var(--card-open);color:#000}.game-card.open .card-value{color:#000}.game-card:disabled{cursor:default}.card-value{-webkit-user-select:none;user-select:none}.game-board{margin:16px 0}.cards-wrap{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.cards-wrap .game-card{flex:0 0 auto}.game-page{width:50%;max-width:100%;margin:0 auto;padding:16px;min-height:100vh}.game-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.game-container{margin-top:8px}.game-info-card{display:flex;justify-content:space-evenly;background:var(--surface);border:1px solid var(--surface-variant);border-radius:8px;padding:16px;margin-bottom:16px}.game-info-item{display:flex;flex-direction:column;align-items:center}.info-label{font-size:12px;color:var(--on-surface-variant)}.info-value{font-size:18px;font-weight:700;color:var(--on-surface)}.result-banner{text-align:center;padding:16px;border-radius:12px;margin-bottom:16px}.result-banner.won{background:var(--result-won);color:#fff}.result-banner.lost{background:var(--result-lost);color:#fff}.result-title{margin:0 0 8px;font-size:20px;font-weight:700}.result-arrangement{margin:0 0 6px;font-size:15px;opacity:.95}.result-detail{margin:4px 0;font-size:16px}.btn-block{width:100%;margin-top:16px;padding:12px}@media(max-width:768px){.game-page{width:100%;padding:12px}.game-nav{flex-direction:column;align-items:flex-start;gap:4px}.game-info-card{flex-direction:column;gap:8px;align-items:center}.info-value{font-size:16px}.result-title{font-size:18px}}.best-times-page{width:50%;max-width:100%;margin:0 auto;padding:16px;min-height:100vh}.best-times-nav{display:flex;align-items:center;margin-bottom:16px}.best-times-spacer{flex:1}.best-times-title{margin:0;font-size:24px;font-weight:700;color:var(--on-surface)}.best-times-level-name{margin:0 0 16px;font-size:20px;font-weight:500;color:var(--on-surface)}.best-times-empty{display:flex;align-items:center;justify-content:center;min-height:200px}.best-times-empty p{margin:0;font-size:16px;color:var(--on-surface-variant)}.best-times-list{display:flex;flex-direction:column;gap:20px}.arrangement-section{background:#e7e0ec80;border:1px solid var(--surface-variant);border-radius:12px;padding:12px}.arrangement-heading{margin:0 0 12px;font-size:16px;font-weight:600;color:var(--primary)}.best-time-item{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border-radius:8px;padding:16px;margin-bottom:6px;box-shadow:0 1px 2px #0000000f}.best-time-item:last-child{margin-bottom:0}.bti-rank{font-size:18px;font-weight:700;color:var(--primary)}.bti-username{flex:1;min-width:0;margin:0 12px;font-size:15px;color:var(--on-surface-variant);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bti-right{display:flex;flex-direction:column;align-items:flex-end}.bti-time{font-size:18px;font-weight:700;color:var(--on-surface);font-variant-numeric:tabular-nums}.bti-moves{font-size:14px;color:var(--on-surface-variant)}@media(max-width:768px){.best-times-page{width:100%;padding:12px}.best-times-title{font-size:20px}.best-times-level-name{font-size:18px}.best-time-item{flex-direction:column;align-items:flex-start;gap:8px}.bti-right{align-items:flex-start}}.auth-page{width:50%;max-width:100%;margin:0 auto;padding:16px;min-height:100vh}.auth-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.auth-card{width:100%}.auth-title{margin:0 0 16px;font-size:24px;font-weight:500;color:var(--on-surface)}.auth-form{display:flex;flex-direction:column;gap:16px}.auth-form .btn-block{margin-top:0}.form-group label{font-size:.9rem;color:var(--on-surface-variant)}.auth-switch{margin:16px 0 0;text-align:center;color:var(--on-surface-variant);font-size:.95rem}.auth-switch a{color:var(--primary)}.oauth-buttons{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.oauth-button-wrapper{display:flex;justify-content:center;width:100%}.btn-google{background-color:#fff;color:#3c4043;border:1px solid #dadce0;display:flex;align-items:center;justify-content:center;gap:8px}.btn-google:hover{background-color:#f8f9fa;box-shadow:0 1px 3px #0000001a}.btn-google:disabled{background-color:#f5f5f5;color:#ccc;cursor:not-allowed}.btn-facebook{background-color:#1877f2;color:#fff;border:none}.btn-facebook:hover{background-color:#166fe5}.btn-facebook:disabled{background-color:#ccc;cursor:not-allowed}.auth-divider{display:flex;align-items:center;text-align:center;margin:20px 0;color:var(--on-surface-variant)}.auth-divider:before,.auth-divider:after{content:"";flex:1;border-bottom:1px solid var(--outline)}.auth-divider span{padding:0 16px;font-size:.9rem}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--surface);padding:24px;border-radius:8px;max-width:400px;width:90%;box-shadow:0 4px 16px #0003}.modal-content h3{margin:0 0 16px;font-size:20px;color:var(--on-surface)}.modal-content .input{width:100%;margin-bottom:16px}.modal-actions{display:flex;gap:12px;justify-content:flex-end}.modal-actions .btn{min-width:100px}@media(max-width:768px){.auth-page{width:100%;padding:12px}.auth-nav{flex-direction:column;align-items:flex-start;gap:4px}.auth-title{font-size:20px}}.howto-page{width:50%;max-width:100%;margin:0 auto;padding:16px;min-height:100vh}.howto-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.howto-main{display:flex;flex-direction:column;gap:24px}.howto-title{margin:0 0 8px;font-size:28px;font-weight:600;text-align:center;color:var(--on-surface)}.howto-section h2{margin:0 0 8px;font-size:20px;font-weight:600;color:var(--on-surface)}.howto-section p{margin:0 0 8px;color:var(--on-surface-variant);line-height:1.5}.howto-rules{margin:0;padding-left:20px;color:var(--on-surface-variant);line-height:1.5}.howto-rules li+li{margin-top:4px}.howto-animation{position:relative;margin-top:8px;padding:16px;border-radius:12px;background:linear-gradient(135deg,#6650a414,#3700b314);border:1px solid rgba(102,80,164,.2);overflow:visible;pointer-events:none}.howto-cards{display:flex;gap:8px;justify-content:center;margin-bottom:8px}.howto-anim-desc{margin:4px 0 10px;padding:8px 12px;font-size:14px;line-height:1.45;color:var(--on-surface-variant);background:#6650a40f;border-radius:8px;border-left:3px solid var(--primary)}.howto-card{width:40px;height:56px;border-radius:8px;background:#fff;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;font-weight:600;color:#333;box-shadow:0 2px 4px #0000001f}.howto-card-active{border-color:var(--primary);box-shadow:0 0 0 2px #6650a440}.howto-card-win{background:var(--result-won);color:#fff;border-color:var(--result-won)}.howto-card-clicked{background:#6650a440!important;border-color:var(--primary)!important;color:var(--primary)}.howto-card-slot{position:relative}.howto-card-slot .howto-card-number{position:relative;z-index:1}.howto-mouse-icon-float{position:absolute;width:28px;height:28px;margin-left:-14px;margin-top:-14px;color:var(--primary);pointer-events:none;transition:left 1s ease-out,top .8s ease-out}.howto-cursor-off-right{left:100%;top:50%;margin-left:20px;margin-top:-14px}.howto-mouse-icon-float:not(.howto-cursor-off-right){transform:translate(-50%,-50%);margin-left:0;margin-top:0}.howto-card-placeholder{visibility:hidden;pointer-events:none}.howto-row2-phase-1 .howto-card-slot:first-child,.howto-row2-phase-2 .howto-card-slot:first-child,.howto-row3-phase-1 .howto-card-slot:first-child,.howto-row3-phase-2 .howto-card-slot:first-child{animation:howto-slide-in-left 2.8s ease-out both}@keyframes howto-slide-in-left{0%{opacity:0;transform:translate(-48px)}to{opacity:1;transform:translate(0)}}.howto-row2-phase-3 .howto-card-slot:nth-child(4){animation:howto-slide-right-1 1.1s ease-out both}.howto-row2-phase-3 .howto-card-slot:nth-child(5){animation:howto-slide-right-2 1.1s ease-out both}@keyframes howto-slide-right-1{0%{transform:translate(48px)}to{transform:translate(0)}}@keyframes howto-slide-right-2{0%{transform:translate(-48px)}to{transform:translate(0)}}.howto-cards-step2,.howto-cards-step3{opacity:0;transform:translateY(8px);transition:opacity .35s ease-out,transform .35s ease-out}.howto-cards-step2.is-visible,.howto-cards-step3.is-visible{opacity:1;transform:translateY(0)}@media(max-width:768px){.howto-page{width:100%;padding:12px}.howto-title{font-size:22px}.howto-section h2{font-size:18px}.howto-card{width:32px;height:48px}}:root{--card-back: #4A90E2;--card-front: #FFFFFF;--card-clickable: #90EE90;--card-open: #87CEEB;--result-won: #4CAF50;--result-lost: #F44336;--primary: #6650a4;--primary-light: #D0BCFF;--on-primary: #FFFFFF;--surface: #FFFBFE;--surface-variant: #E7E0EC;--on-surface: #1C1B1F;--on-surface-variant: #49454F;--outline: #79747E;--error: #B3261E;--on-error: #FFFFFF}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--surface);min-height:100vh;color:var(--on-surface)}#root{min-height:100vh}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:inherit}button:disabled{cursor:not-allowed;opacity:.6}.input,.btn{padding:.6rem 1rem;border-radius:8px;font-size:1rem}.input{border:1px solid var(--outline);background:var(--surface);color:var(--on-surface);width:100%}.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #6650a433}.btn{border:none;font-weight:600;transition:transform .1s,box-shadow .2s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn-primary{background:var(--primary);color:var(--on-primary)}.btn-secondary{background:transparent;color:var(--primary);border:1px solid var(--primary)}.btn-success{background:var(--result-won);color:var(--on-primary)}.error-message{background:#b3261e1a;color:var(--error);padding:.5rem 1rem;border-radius:8px;margin-bottom:1rem}.loading{text-align:center;padding:2rem;color:var(--on-surface-variant)}.btn-text{color:var(--primary);font-size:1rem;padding:8px 12px;background:none;border:none;cursor:pointer;font-family:inherit}.btn-text:hover{text-decoration:underline}.btn-block{width:100%}