@import url('https://cdnjs.cloudflare.com/ajax/libs/JetBrains-Mono/2.304/jetbrains-mono.min.css'); :root { --bg: #0b0f0c; --panel: #12160f; --panel-border: #2a2f22; --amber: #33ff77; --amber-dim: #1f8a4d; --parchment: #e9dcb8; --ok: #5fbf6b; --bad: #e5484d; --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--parchment); font-family: var(--mono); } /* Applied to only while a Snake run is actively in progress (from the starting double-tap until game-over) -- see the scroll-lock JS in the Snake script. Keeps mobile swipes on the dpad/canvas from dragging the whole page instead of steering the snake. */ body.game-scroll-lock { overflow: hidden; touch-action: none; overscroll-behavior: none; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.5rem; border-bottom: 1px solid var(--panel-border); background: var(--panel); } .brand { color: var(--amber); font-weight: 700; letter-spacing: 0.15em; font-size: 0.95rem; } .brand .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); display: inline-block; margin-right: 0.5rem; animation: blink 2s ease-in-out infinite; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } .login-btn { font-size: 0.78rem; color: #14110a; background: var(--amber); text-decoration: none; font-weight: 700; padding: 0.45rem 0.9rem; border-radius: 3px; letter-spacing: 0.04em; } .login-btn:hover { filter: brightness(1.1); } .topbar-actions { display: flex; align-items: center; gap: 0.5rem; } .login-btn.secondary { background: transparent; color: var(--amber); border: 1px solid var(--amber-dim); } .login-btn.secondary:hover { background: rgba(51, 255, 119, 0.08); filter: none; } .wrap { max-width: 640px; margin: 0 auto; padding: 1.5rem; } .hero { text-align: center; margin: 1.25rem 0 1.75rem; } .hero h1 { color: var(--amber); font-size: 1.3rem; margin: 0 0 0.4rem; letter-spacing: 0.03em; } .hero p { color: var(--amber-dim); font-size: 0.8rem; margin: 0; } .panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 4px; padding: 1.25rem; margin-bottom: 1.5rem; } .panel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; } .panel-head h2 { margin: 0; font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); } .panel-head span { font-size: 0.7rem; color: var(--amber-dim); } /* ---------- SNAKE ---------- */ .game-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; } .canvas-stack { position: relative; width: 100%; max-width: 380px; } #snake-canvas { width: 100%; max-width: 380px; aspect-ratio: 1 / 1; background: #0d1109; border: 1px solid var(--panel-border); border-radius: 3px; touch-action: none; display: block; } .start-popup { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; pointer-events: none; } .start-popup-inner { background: rgba(13, 17, 9, 0.92); border: 1px solid var(--amber); border-radius: 6px; padding: 0.9rem 1.1rem; color: var(--parchment); font-size: 0.78rem; line-height: 1.5; box-shadow: 0 0 14px rgba(51,255,119,0.25); } .start-popup-inner b { color: var(--amber); } .secret-menu { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; padding: 1.25rem; background: rgba(8, 2, 10, 0.88); z-index: 5; border-radius: 3px; } .secret-menu-inner { background: rgba(20, 0, 20, 0.92); border: 1px solid #ff2ee0; border-radius: 6px; padding: 1rem 1.2rem; color: var(--parchment); font-size: 0.76rem; line-height: 1.55; box-shadow: 0 0 20px rgba(255, 46, 224, 0.4); max-width: 300px; } .secret-menu-inner h3 { margin: 0 0 0.5rem; color: #ff5bec; letter-spacing: 0.08em; font-size: 0.82rem; } .secret-menu-select { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.7rem; font-size: 0.72rem; letter-spacing: 0.03em; } .secret-menu-select select { font-family: var(--mono); font-size: 0.72rem; padding: 0.3rem 0.4rem; border-radius: 4px; border: 1px solid #ff2ee0; background: #1a0018; color: #ff85f0; } .secret-menu-btns { display: flex; gap: 0.6rem; justify-content: center; margin-top: 0.9rem; } .secret-menu-btns button { font-family: var(--mono); font-size: 0.72rem; padding: 0.5rem 0.9rem; border-radius: 4px; cursor: pointer; border: 1px solid #ff2ee0; background: #1a0018; color: #ff85f0; letter-spacing: 0.03em; } .secret-menu-btns button.primary { background: #ff2ee0; color: #14000f; font-weight: 700; } .secret-menu-btns button:active { filter: brightness(1.15); } .game-score { font-size: 0.85rem; color: var(--parchment); letter-spacing: 0.05em; } .game-score b { color: var(--amber); } .game-msg { font-size: 0.75rem; color: var(--amber-dim); min-height: 1.2em; text-align: center; } .dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 0.4rem; } .dpad button { font-family: var(--mono); font-size: 1.1rem; background: #0d1109; color: var(--amber); border: 1px solid var(--panel-border); border-radius: 4px; cursor: pointer; } .dpad button:active { background: rgba(51,255,119,0.15); border-color: var(--amber); } .dpad .up { grid-column: 2; grid-row: 1; } .dpad .left { grid-column: 1; grid-row: 2; } .dpad .restart { grid-column: 2; grid-row: 2; font-size: 0.85rem; color: var(--amber-dim); } .dpad .right { grid-column: 3; grid-row: 2; } .dpad .down { grid-column: 2; grid-row: 3; } .hint { font-size: 0.68rem; color: var(--amber-dim); margin: 0.6rem 0 0; text-align: center; } .entry-row { display: none; gap: 0.5rem; } .entry-slot { width: 42px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: var(--amber-dim); background: #0d1109; border: 1px solid var(--panel-border); border-radius: 4px; } .entry-slot.active { color: var(--amber); border-color: var(--amber); box-shadow: 0 0 8px rgba(51,255,119,0.4); } .leaderboard-wrap { width: 100%; margin-top: 1.25rem; } .leaderboard-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .leaderboard-table th { text-align: left; color: var(--amber-dim); font-weight: 400; letter-spacing: 0.05em; font-size: 0.68rem; text-transform: uppercase; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--panel-border); } .leaderboard-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid #1b1f16; } .leaderboard-table tr:first-child td { color: var(--amber); } .leaderboard-table .loading-row { color: var(--amber-dim); text-align: center; padding: 1rem !important; } .crust-section-html { font-size: 0.85rem; line-height: 1.6; } .crust-section-html a { color: var(--amber); }