.app-container{display:flex;flex-direction:column;min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:#f8fafc;border-bottom:1px solid #e2e8f0}.dark header{background-color:#1e293b;border-bottom-color:#334155}.logo{display:flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;color:inherit}.logo-icon{width:2rem;height:2rem;background-color:currentColor;border-radius:50%}nav ul{display:flex;list-style:none;margin:0;padding:0;gap:1.5rem}nav a{text-decoration:none;color:#64748b;font-weight:500;transition:color .2s}.dark nav a{color:#94a3b8}nav a.active,nav a:hover{color:#4f46e5}.dark nav a.active,.dark nav a:hover{color:#818cf8}.header-actions{display:flex;gap:1rem;align-items:center}.game-selectors-container{margin-right:1rem}.main-container{flex:1;padding:1rem;display:flex;flex-direction:column;align-items:center}.game-section{width:100%;max-width:1200px}footer{margin-top:auto;padding:1rem;text-align:center;background-color:#f8fafc;border-top:1px solid #e2e8f0;font-size:.875rem}.dark footer{background-color:#1e293b;border-top-color:#334155}footer a{color:#64748b;text-decoration:none;margin:0 .25rem}.dark footer a{color:#94a3b8}footer a:hover{text-decoration:underline}.btn{display:inline-block;background-color:#4f46e5;color:#fff;padding:.75rem 1.5rem;border-radius:9999px;text-decoration:none;font-weight:700;transition:all .2s}.btn:hover{background-color:#6366f1;transform:translateY(-2px)}.dark .btn{background-color:#6366f1}.dark .btn:hover{background-color:#818cf8}.map-content{line-height:1.8;max-width:1200px;margin:0 auto;text-align:center}.map-placeholder{width:100%;height:600px;background:#0000000d;border-radius:8px;margin:20px 0;position:relative;overflow:hidden;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:1px solid #cbd5e1}.dark .map-placeholder{border-color:#475569;background:#ffffff0d}.map-placeholder:active{cursor:grabbing}#hex-grid-container{position:absolute;transform-origin:0 0;will-change:transform}.zoom-controls{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:100}.zoom-btn{width:40px;height:40px;border-radius:8px;background:#fff;color:#334155;border:1px solid #cbd5e1;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;box-shadow:0 2px 5px #0000001a;transition:all .2s}.dark .zoom-btn{background:#1e293b;color:#e2e8f0;border-color:#334155}.zoom-btn:hover{background:#f8fafc}.dark .zoom-btn:hover{background:#334155}.hex-svg{overflow:visible}.hexagon{fill:transparent;stroke:none!important;transition:fill .3s ease;cursor:pointer;pointer-events:all}.hexagon:hover{fill:var(--hex-hover-color, #cbd5e1);outline:none}.hexagon-hover-stroke{fill:none;stroke:var(--hex-hover-stroke, var(--primary-color));stroke-width:calc(var(--hex-hover-stroke-width, 2px) / var(--map-zoom, 1));stroke-opacity:var(--hex-hover-stroke-opacity, 1);pointer-events:none;display:none}.grid-lines{fill:none;stroke:var(--primary-color);stroke-width:calc(1px / var(--map-zoom, 1));pointer-events:none}.hexagon.colored{fill-opacity:.6}.dark .hexagon.colored{fill-opacity:.7}.rules-content{line-height:1.8;max-width:800px;margin:0 auto}.rules-content h2{margin-top:30px;color:var(--primary-color);border-bottom:2px solid var(--primary-color);display:inline-block;padding-bottom:5px}.rules-content p{margin-bottom:15px}.rules-content ul{margin-left:20px;margin-bottom:20px}.example-grid{display:grid;grid-template-columns:repeat(5,30px);gap:2px;margin:20px 0;background:#ccc;padding:2px;width:-moz-fit-content;width:fit-content}.dark .example-grid{background:#444}.example-cell{width:30px;height:30px;background:#fff}.dark .example-cell{background:#1e293b}.example-cell.filled{background:#4a90e2}.example-cell.cross{position:relative}.example-cell.cross:after{content:"×";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#94a3b8;font-size:20px}