.app-layout{color:#f0f0f0;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);flex-direction:column;min-height:100vh;display:flex}.app-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0000004d;border-bottom:1px solid #ffffff1a;align-items:center;gap:1rem;padding:.75rem 1.5rem;display:flex}.logo{color:#f0f0f0;flex-shrink:0;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:700;text-decoration:none;display:flex}.logo-icon{filter:drop-shadow(0 0 8px #ffd70080);font-size:1.6rem}.logo-text{background:linear-gradient(135deg,gold,#fa0);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.page-title{color:#ffffff80;font-size:.9rem;font-weight:400}.nav-links{gap:.5rem;margin-left:auto;display:flex}.nav-link{color:#ffffffb3;border-radius:8px;padding:.5rem 1rem;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .2s}.nav-link:hover{color:#fff;background:#ffffff1a}.nav-link.active{color:gold;background:#ffd70026}.app-main{box-sizing:border-box;flex:1;width:100%;max-width:1200px;margin:0 auto;padding:1.5rem}@media (width<=768px){.app-header{padding:.5rem 1rem}.logo-text,.page-title{display:none}.nav-link{padding:.4rem .75rem;font-size:.85rem}.app-main{padding:1rem}}.home{flex-direction:column;align-items:center;gap:3rem;padding:2rem 0;display:flex}.hero{text-align:center}.hero-piece{filter:drop-shadow(0 0 20px #ffd70066);font-size:5rem;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.hero-title{background:linear-gradient(135deg,#fff,gold);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:.5rem 0;font-size:2.5rem;font-weight:800}.hero-subtitle{color:#ffffffb3;margin:0;font-size:1.1rem;line-height:1.6}.home-cards{grid-template-columns:repeat(2,1fr);gap:1.5rem;width:100%;max-width:700px;display:grid}.home-card{text-align:center;color:#f0f0f0;border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;align-items:center;padding:2rem 1.5rem;text-decoration:none;transition:all .3s;display:flex}.tutorial-card{background:linear-gradient(135deg,#4caf5033,#4caf500d)}.tutorial-card:hover{background:linear-gradient(135deg,#4caf504d,#4caf501a);transform:translateY(-4px);box-shadow:0 8px 32px #4caf5033}.play-card{background:linear-gradient(135deg,#2196f333,#2196f30d)}.play-card:hover{background:linear-gradient(135deg,#2196f34d,#2196f31a);transform:translateY(-4px);box-shadow:0 8px 32px #2196f333}.card-icon{margin-bottom:.75rem;font-size:3rem}.home-card h2{margin:0 0 .5rem;font-size:1.4rem}.home-card p{color:#fff9;margin:0 0 1rem;font-size:.9rem;line-height:1.5}.card-cta{color:gold;font-size:.9rem;font-weight:600}.features{grid-template-columns:repeat(3,1fr);gap:1.5rem;width:100%;max-width:700px;display:grid}.feature{text-align:center;background:#ffffff0d;border-radius:12px;padding:1.25rem}.feature-icon{margin-bottom:.5rem;font-size:1.8rem;display:block}.feature h3{margin:0 0 .3rem;font-size:1rem}.feature p{color:#ffffff80;margin:0;font-size:.8rem;line-height:1.4}@media (width<=600px){.hero-title{font-size:1.8rem}.hero-piece{font-size:3.5rem}.home-cards,.features{grid-template-columns:1fr}}.tutorial-page{max-width:600px;margin:0 auto}.tutorial-header{text-align:center;margin-bottom:2rem}.tutorial-header h1{margin:0 0 .5rem;font-size:2rem}.tutorial-header p{color:#fff9;margin:0}.lesson-list{flex-direction:column;gap:.75rem;display:flex}.lesson-card{color:#f0f0f0;background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;align-items:center;gap:1rem;padding:1rem 1.25rem;text-decoration:none;transition:all .2s;display:flex;position:relative;overflow:hidden}.lesson-card:hover:not(.locked){background:#ffffff1a;transform:translate(4px)}.lesson-card.completed{border-color:#4caf504d}.lesson-card.locked{opacity:.5;cursor:not-allowed}.lock-overlay{font-size:1.2rem;position:absolute;right:1rem}.lesson-number{color:gold;background:#ffd70026;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.9rem;font-weight:700;display:flex}.lesson-card.completed .lesson-number{color:#4caf50;background:#4caf5033}.lesson-icon{flex-shrink:0;font-size:1.8rem}.lesson-info{flex:1;min-width:0}.lesson-info h3{margin:0 0 .2rem;font-size:1rem}.lesson-info p{color:#ffffff80;margin:0;font-size:.8rem}.lesson-steps-count{color:#fff6;flex-shrink:0;font-size:.75rem}.tutorial-footer{text-align:center;border-top:1px solid #ffffff1a;margin-top:2rem;padding-top:1.5rem}.tutorial-footer p{color:#ffffff80;margin:0 0 .75rem;font-size:.85rem}.play-link{color:#64b5f6;background:#2196f333;border-radius:8px;padding:.5rem 1.5rem;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .2s;display:inline-block}.play-link:hover{background:#2196f34d}.chess-board-container{justify-content:center;align-items:center;display:flex}.lesson-page{max-width:900px;margin:0 auto}.lesson-top-bar{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.back-link{color:#fff9;font-size:.85rem;text-decoration:none;transition:color .2s}.back-link:hover{color:#fff}.lesson-title-bar{font-size:1rem;font-weight:600}.step-indicator{color:#ffffff80;background:#ffffff1a;border-radius:12px;padding:.2rem .6rem;font-size:.8rem}.lesson-progress-bar{background:#ffffff1a;border-radius:2px;height:4px;margin-bottom:1.5rem;overflow:hidden}.lesson-progress-fill{background:linear-gradient(90deg,gold,#fa0);border-radius:2px;height:100%;transition:width .3s}.lesson-content{align-items:flex-start;gap:2rem;display:flex}.lesson-board-area{flex-shrink:0}.lesson-text-area{flex:1;min-width:0}.step-title{color:gold;margin:0 0 .75rem;font-size:1.3rem}.step-description p{color:#ffffffd9;margin:0 0 .5rem;font-size:.95rem;line-height:1.7}.practice-hint{background:#ff980026;border:1px solid #ff98004d;border-radius:8px;margin:1rem 0;padding:.75rem 1rem;font-size:.9rem;animation:2s ease-in-out infinite pulse-border}@keyframes pulse-border{0%,to{border-color:#ff98004d}50%{border-color:#ff980099}}.practice-success{background:#4caf5026;border:1px solid #4caf504d;border-radius:8px;margin:1rem 0;padding:.75rem 1rem;font-size:.9rem}.step-tip{color:#ffffffb3;background:#2196f31a;border-left:3px solid #2196f380;border-radius:0 8px 8px 0;margin:1rem 0;padding:.75rem 1rem;font-size:.85rem;line-height:1.5}.lesson-nav-buttons{gap:.75rem;margin-top:1.5rem;display:flex}.nav-btn{cursor:pointer;border:none;border-radius:8px;padding:.6rem 1.25rem;font-size:.9rem;font-weight:600;transition:all .2s}.prev-btn{color:#ffffffb3;background:#ffffff1a}.prev-btn:hover:not(:disabled){background:#ffffff26}.next-btn{color:#1a1a2e;background:linear-gradient(135deg,gold,#fa0);flex:1}.next-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #ffd7004d}.nav-btn:disabled{opacity:.4;cursor:not-allowed}.lesson-not-found{text-align:center;padding:3rem}.lesson-not-found a{color:gold}@media (width<=768px){.lesson-content{flex-direction:column;align-items:center}.lesson-text-area{width:100%}.step-title{font-size:1.1rem}}.play-page{max-width:960px;margin:0 auto}.play-page>h1{text-align:center;margin:0 0 .5rem;font-size:2rem}.play-subtitle{text-align:center;color:#fff9;margin:0 0 2rem}.difficulty-cards{flex-direction:column;gap:1rem;max-width:500px;margin:0 auto;display:flex}.difficulty-card{color:#f0f0f0;cursor:pointer;text-align:left;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:1.25rem 1.5rem;transition:all .2s}.difficulty-card:hover{transform:translateY(-2px)}.difficulty-card.seed:hover{background:#4caf5026;border-color:#4caf504d}.difficulty-card.sprout:hover{background:#ff980026;border-color:#ff98004d}.difficulty-card.tree:hover{background:#f4433626;border-color:#f443364d}.diff-name{margin-bottom:.3rem;font-size:1.3rem;font-weight:700}.diff-desc{color:#fff9;font-size:.9rem}.play-top-bar{align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.back-btn{color:#fff9;cursor:pointer;background:0 0;border:none;padding:0;font-size:.85rem}.back-btn:hover{color:#fff}.diff-badge{color:gold;background:#ffd70026;border-radius:12px;padding:.2rem .75rem;font-size:.85rem}.play-layout{align-items:flex-start;gap:1.5rem;display:flex}.play-board-area{flex-direction:column;flex-shrink:0;gap:.5rem;display:flex}.captured-row{gap:.1rem;min-height:1.5rem;padding:0 .25rem;display:flex}.captured-piece{opacity:.8;font-size:1.1rem}.captured-piece.black{filter:brightness(.7)}.play-sidebar{flex-direction:column;flex:1;gap:.75rem;min-width:0;display:flex}.status-box{text-align:center;background:#ffffff0d;border-radius:8px;padding:.75rem 1rem;font-size:1rem;font-weight:600}.status-box.check{color:#ffb74d;background:#ff980026}.status-box.game-over{color:gold;background:#ffd70026;font-size:1.1rem}.thinking-indicator{text-align:center;color:#fff9;font-size:.85rem;animation:1.5s ease-in-out infinite fade-pulse}@keyframes fade-pulse{0%,to{opacity:.5}50%{opacity:1}}.game-message{text-align:center;background:#4caf5026;border-radius:8px;padding:1rem;font-size:1rem;font-weight:600}.play-actions{gap:.5rem;display:flex}.action-btn{cursor:pointer;border:none;border-radius:8px;flex:1;padding:.6rem;font-size:.85rem;font-weight:600;transition:all .2s}.undo-btn{color:#fffc;background:#ffffff1a}.undo-btn:hover:not(:disabled){background:#ffffff26}.new-btn{color:#64b5f6;background:#2196f333}.new-btn:hover{background:#2196f34d}.action-btn:disabled{opacity:.4;cursor:not-allowed}.move-history{background:#0003;border-radius:8px;flex:1;min-height:120px;padding:.75rem}.move-history h3{color:#fff6;text-transform:uppercase;letter-spacing:.5px;margin:0 0 .5rem;font-size:.8rem}.moves-list{flex-wrap:wrap;gap:.3rem;font-family:Courier New,monospace;font-size:.85rem;display:flex}.no-moves{color:#ffffff4d;font-family:inherit;font-size:.8rem}.move-item{border-radius:3px;padding:.1rem .3rem}.move-number{color:#fff6;margin-right:.15rem}.white-move{color:#ffffffe6}.black-move{color:#fff9}@media (width<=768px){.play-layout{flex-direction:column;align-items:center}.play-sidebar{width:100%}}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{color:#f0f0f0;background:#1a1a2e;min-height:100vh;font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font-family:inherit}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}::selection{color:#fff;background:#ffd7004d}