*{box-sizing:border-box}.roadmap-container{box-sizing:border-box;background-color:#f8f8f8;flex-direction:column;align-items:center;width:100%;min-height:100vh;padding:100px 20px 40px;font-family:Arial,sans-serif;font-size:110%;display:flex}.app-nav{z-index:1000;background-color:#343a40;justify-content:center;width:100%;padding:10px 0;display:flex;position:fixed;top:0;left:0;box-shadow:0 2px 5px #0003}.app-nav a{color:#fff;border-radius:5px;margin:0 10px;padding:8px 15px;font-weight:700;text-decoration:none;transition:background-color .2s}.app-nav a:hover{background-color:#495057}.app-nav span{color:#6c757d;padding:0 5px;line-height:2.2}.main-layout{flex-direction:row;justify-content:center;align-items:flex-start;gap:20px;width:100%;max-width:1200px;display:flex}.game-selector{flex-wrap:wrap;justify-content:center;margin-bottom:20px;display:flex}.game-selector button{cursor:pointer;color:#333;white-space:nowrap;background-color:#e0e0e0;border:none;border-radius:20px;margin:5px;padding:8px 16px;font-size:1em;transition:all .2s}.game-selector button.active{color:#fff;background-color:#ff9800;font-weight:700;transform:translateY(-1px);box-shadow:0 3px #e65100}.roadmap-grid-container{background-color:#fff;border:2px dashed #ccc;border-radius:15px;flex-shrink:0;width:1000px;height:600px;margin:0;position:relative;overflow:hidden auto;box-shadow:0 4px 10px #0000000d}.roadmap-steps{width:100%;position:relative;top:0;left:0}.step-card{z-index:10;text-align:center;cursor:pointer;background-color:#fff;border:2px solid #333;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:140px;height:auto;min-height:100px;padding:10px;transition:transform .1s,box-shadow .1s;display:flex;position:absolute;box-shadow:3px 3px #333}.step-image{object-fit:contain;width:100%;height:auto;max-height:80px;margin-bottom:8px}.step-id{color:#e65100;margin:0 0 4px;font-size:.8em}.step-card h3{color:#e65100;margin:0 0 4px;font-size:1em}.step-title{color:#333;margin:2px 0 0;font-size:.7em;font-weight:700;line-height:1.2}.step-card p{color:#333;margin:0;font-size:.7em;font-weight:700;line-height:1.3}.step-card.active{background-color:#fff3e0;border-color:#ef6c00;transform:translateY(2px);box-shadow:1px 1px #333}.step-card:hover{transform:translateY(-2px);box-shadow:5px 5px #333}.detail-panel{box-sizing:border-box;background-color:#fff;border:2px solid #eee;border-radius:15px;flex:1;min-width:300px;height:600px;padding:20px;overflow-y:auto;box-shadow:0 4px 10px #0000000d}.detail-panel h2{color:#333;border-bottom:2px solid #ff9800;margin-top:0;padding-bottom:10px}.roadmap-lines{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}@media (max-width:768px){.roadmap-container{padding:80px 10px 20px;font-size:100%}.main-layout{flex-direction:column;gap:20px;max-width:100%;padding:0 10px}.roadmap-grid-container{box-sizing:border-box;width:100%;height:auto;min-height:400px;margin:0;overflow-x:auto}.detail-panel{width:100%;min-width:unset;box-sizing:border-box;height:auto;margin-bottom:20px;padding:15px}.step-card{width:120px;min-height:90px;padding:8px;font-size:.9em}}