/* === COLOR PALETTES === */ /* To switch palettes: add class to , e.g. */ :root { /* Garden palette (default) */ --color-title: #A5C89E; /* Sage green - titles/headers */ --color-bg: #FFFBB1; /* Pale yellow - backgrounds/dots */ --color-hover: #D8E983; /* Lime green - hover states */ --color-text: #AEB877; /* Olive - text/borders */ --color-page-bg: #ffffff; /* Page background */ } /* Monochrome palette */ body.palette-mono { --color-title: #000000; --color-bg: #ffffff; --color-hover: #000000; --color-text: #000000; --color-page-bg: #ffffff; } /* Orange-blue palette */ body.palette-orange-blue { --color-title: #E2852E; --color-bg: #F5C857; --color-hover: #ABE0F0; --color-text: #FFEE91; --color-page-bg: #ffffff; } body.palette-coral-teal { --color-title: #FF3F33; --color-bg: #FFE6E1; --color-hover: #9FC87E; --color-text: #075B5E; --color-page-bg: #ffffff; } /* Ocean palette */ body.palette-ocean { --color-title: #5B8FB9; --color-bg: #B6D0E2; --color-hover: #87CEEB; --color-text: #36454F; --color-page-bg: #ffffff; } /* Sunset palette */ body.palette-sunset { --color-title: #E07A5F; --color-bg: #F4D1AE; --color-hover: #F2CC8F; --color-text: #81615A; --color-page-bg: #ffffff; } /* === BASE STYLES === */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Walter Turncoat', cursive; background-color: var(--color-page-bg); background-image: radial-gradient(var(--color-bg) 1px, transparent 1px); background-size: 20px 20px; color: var(--color-text); height: 100vh; overflow: hidden; } /* === FLOATING HAMBURGER === */ .floating-hamburger { position: fixed; top: 1.5rem; left: 1.5rem; background: var(--color-bg); border: 2px solid var(--color-text); font-size: 1.5rem; color: var(--color-text); cursor: pointer; padding: 1rem; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 900; } .floating-hamburger:hover { background: var(--color-hover); color: var(--color-text); } .floating-hamburger:active { transform: scale(0.95); } /* === MAIN CONTENT === */ .main-content { max-width: 1000px; margin: 0 auto; padding: 3rem 2rem; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; } .page-header { text-align: center; margin-bottom: 3rem; } .page-header h1 { font-size: 3.5rem; margin-bottom: 0.75rem; color: var(--color-title); font-weight: 800; letter-spacing: -0.02em; } .subtitle { color: var(--color-text); font-size: 1.25rem; font-weight: 400; } /* === GAME SELECTION GRID === */ .game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 800px; margin: 0 auto; } .game-card { background: var(--color-bg); border: 3px solid var(--color-text); border-radius: 0; padding: 3rem; text-decoration: none; color: inherit; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; } .game-card:hover { background: var(--color-hover); color: var(--color-text); transform: translate(-4px, -4px); box-shadow: 4px 4px 0 var(--color-text); } .game-icon { font-size: 4rem; margin-bottom: 1.25rem; filter: none; transition: transform 0.2s ease; } .game-card:hover .game-icon { transform: scale(1.05); } .game-title { font-size: 1.75rem; margin-bottom: 0.75rem; color: inherit; font-weight: 700; } .game-description { color: inherit; font-size: 1rem; line-height: 1.6; opacity: 0.8; } /* === LEVEL SELECTION GRID === */ .level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .level-card { background: var(--color-bg); border: 2px solid var(--color-text); border-radius: 0; padding: 1.5rem 1rem; text-decoration: none; color: inherit; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; } .level-card:hover:not(.locked) { background: var(--color-hover); color: var(--color-text); transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--color-text); } .level-card.locked { opacity: 0.5; cursor: not-allowed; } .level-card.locked:hover { transform: none; } .level-number { font-size: 2rem; font-weight: 700; color: inherit; margin-bottom: 0.25rem; } .level-card.locked .level-number { opacity: 0.3; } .level-name { font-size: 0.85rem; color: inherit; opacity: 0.7; } .lock-icon { position: absolute; top: 0.5rem; right: 0.5rem; font-size: 0.9rem; } /* === BACK LINK === */ .back-link { display: inline-block; color: var(--color-text); text-decoration: none; padding: 0.5rem 0; transition: opacity 0.2s ease; } .back-link:hover { opacity: 0.6; } /* === EMPTY STATES === */ .no-games, .no-levels { text-align: center; color: var(--color-text); opacity: 0.5; padding: 3rem; grid-column: 1 / -1; } /* === SIDEBAR === */ .sidebar { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; background-color: var(--color-text); color: var(--color-bg); border-right: 3px solid var(--color-text); transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; display: flex; flex-direction: column; } body.sidebar-open .sidebar { transform: translateX(0); } .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 2px solid var(--color-bg); } .sidebar-header h2 { font-size: 1.25rem; color: var(--color-bg); margin: 0; font-weight: 600; } .sidebar-header a { text-decoration: none; color: inherit; transition: opacity 0.2s ease; } .sidebar-header a:hover { opacity: 0.7; } .close-sidebar { background: transparent; border: 2px solid var(--color-bg); font-size: 1.5rem; color: var(--color-bg); cursor: pointer; padding: 0.5rem; line-height: 1; transition: all 0.2s ease; border-radius: 0; } .close-sidebar:hover { background: var(--color-bg); color: var(--color-text); } .close-sidebar:active { transform: scale(0.95); } .sidebar-nav { flex: 1; overflow-y: auto; padding: 1rem 0; } .sidebar-section { margin-bottom: 2rem; } .sidebar-section h3 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-bg); opacity: 0.7; padding: 0.5rem 1.5rem; margin-bottom: 0.5rem; } .sidebar-section ul { list-style: none; padding: 0; margin: 0; } .sidebar-section li { margin: 0; } .sidebar-section a { display: block; padding: 0.75rem 1.5rem; color: var(--color-bg); text-decoration: none; transition: background-color 0.2s ease; border-left: 3px solid transparent; } .sidebar-section a:hover { background-color: var(--color-bg); color: var(--color-text); border-left-color: var(--color-bg); } .account-link { display: block; padding: 0.75rem 1.5rem; color: var(--color-bg); text-decoration: none; font-weight: 500; transition: background-color 0.2s ease; border-left: 3px solid transparent; } .account-link:hover { background-color: var(--color-bg); color: var(--color-text); border-left-color: var(--color-bg); } .sidebar-footer { border-top: 2px solid var(--color-bg); padding: 1rem 0; } /* === SIDEBAR OVERLAY === */ .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: color-mix(in srgb, var(--color-text) 50%, transparent); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 999; } body.sidebar-open .sidebar-overlay { opacity: 1; visibility: visible; } /* === ANIMATIONS === */ @keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .game-card, .level-card { animation: fade-in 0.6s ease backwards; } .game-grid .game-card:nth-child(1) { animation-delay: 0.1s; } .game-grid .game-card:nth-child(2) { animation-delay: 0.2s; } .game-grid .game-card:nth-child(3) { animation-delay: 0.3s; } .game-grid .game-card:nth-child(4) { animation-delay: 0.4s; } .level-grid .level-card:nth-child(1) { animation-delay: 0.05s; } .level-grid .level-card:nth-child(2) { animation-delay: 0.1s; } .level-grid .level-card:nth-child(3) { animation-delay: 0.15s; } .level-grid .level-card:nth-child(4) { animation-delay: 0.2s; } .level-grid .level-card:nth-child(5) { animation-delay: 0.25s; } .level-grid .level-card:nth-child(6) { animation-delay: 0.3s; } .page-header { animation: fade-in 0.8s ease; } /* === BUG REPORT BUTTON & MODAL === */ .floating-bug-btn { position: fixed; bottom: 1rem; right: 1rem; background: var(--color-bg); border: 2px solid var(--color-text); color: var(--color-text); cursor: pointer; padding: 0.5rem; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 900; opacity: 0.6; } .floating-bug-btn:hover { opacity: 1; background: var(--color-hover); transform: scale(1.1); } .floating-bug-btn:active { transform: scale(0.95); } .bug-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 1001; } .bug-report-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-page-bg); border: 3px solid var(--color-text); border-radius: 0; padding: 0; z-index: 1002; max-width: 400px; width: 90%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .bug-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 2px solid var(--color-text); background: var(--color-bg); } .bug-modal-header h3 { margin: 0; font-size: 1.1rem; color: var(--color-text); } .bug-modal-close { background: transparent; border: none; font-size: 1.5rem; color: var(--color-text); cursor: pointer; padding: 0; line-height: 1; opacity: 0.7; transition: opacity 0.2s ease; } .bug-modal-close:hover { opacity: 1; } .bug-modal-form { padding: 1.25rem; } .bug-modal-form textarea { width: 100%; padding: 0.75rem; border: 2px solid var(--color-text); background: #ffffff; font-family: inherit; font-size: 0.95rem; color: var(--color-text); resize: vertical; min-height: 100px; } .bug-modal-form textarea:focus { outline: none; border-color: var(--color-title); } .bug-modal-footer { margin-top: 1rem; } .bug-submit-btn { width: 100%; padding: 0.75rem; background: var(--color-text); color: var(--color-bg); border: none; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .bug-submit-btn:hover { background: var(--color-title); } .bug-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; } .bug-success { padding: 1.25rem; text-align: center; color: var(--color-text); font-size: 1rem; }