* { margin:0; padding:0; box-sizing:border-box; }
body {
  overflow:hidden; font-family:'Segoe UI',sans-serif;
  background-image:url('assets/bg.jpg');
  background-size:cover; background-position:center;
  background-attachment:fixed; background-repeat:no-repeat;
}
#bgCanvas {
  position:fixed; top:0; left:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}

/* ── Hero ── */
#content {
  position:fixed; z-index:20; width:100%; top:10vh;
  text-align:center; pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
}

#action-btns {
  position:fixed;
  top:18px;
  right:24px;
  z-index:30;
  display:flex; gap:10px;
  pointer-events:all;
  flex-wrap:wrap;
  justify-content:flex-end;
}
#content h1 {
  font-size:3.2rem; color:#ffe44d;
  text-shadow:2px 2px 8px rgba(0,0,0,0.95), 0 0 24px rgba(255,220,0,0.4);
  letter-spacing:1px;
}
.subtitle { font-size:1.15rem; color:#fff; text-shadow:1px 1px 6px rgba(0,0,0,0.95); margin-top:8px; }
.hint { margin-top:10px; font-size:0.78rem; color:rgba(255,255,255,0.5); }
kbd { background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.3); border-radius:4px; padding:1px 6px; font-family:monospace; font-size:0.85em; }

/* ── Social ── */
#social-links { display:flex; gap:10px; margin-top:18px; pointer-events:all; flex-wrap:wrap; justify-content:center; }
.social-btn {
  display:flex; align-items:center; gap:7px;
  background:rgba(0,0,0,0.55); color:#fff;
  border:1.5px solid rgba(255,255,255,0.25); border-radius:8px;
  padding:7px 14px; font-size:0.8rem; font-weight:600;
  text-decoration:none; font-family:monospace;
  backdrop-filter:blur(6px);
  transition:background 0.2s, border-color 0.2s, transform 0.1s;
}
.social-btn svg { width:15px; height:15px; flex-shrink:0; }
.social-btn:hover { background:rgba(255,220,0,0.18); border-color:rgba(255,220,0,0.6); transform:translateY(-2px); color:#ffe44d; }

/* ── Action buttons ── */
#action-btns { display:flex; gap:10px; margin-top:16px; pointer-events:all; flex-wrap:wrap; justify-content:center; }
.action-btn {
  padding:10px 22px; font-size:0.88rem; font-weight:800;
  font-family:monospace; border-radius:8px; cursor:pointer;
  border:2.5px solid #181818; box-shadow:3px 3px 0 #181818;
  transition:transform 0.1s, box-shadow 0.1s;
  letter-spacing:0.3px;
}
.action-btn:hover  { transform:translate(-2px,-2px); box-shadow:5px 5px 0 #181818; }
.action-btn:active { transform:translate(1px,1px);   box-shadow:1px 1px 0 #181818; }
.btn-projects { background:#1a5fb4; color:#fff; border-color:#0d3d7a; box-shadow:3px 3px 0 #0d3d7a; }
.btn-projects:hover { box-shadow:5px 5px 0 #0d3d7a; }
.btn-skills   { background:#2e7d32; color:#fff; border-color:#1b5e20; box-shadow:3px 3px 0 #1b5e20; }
.btn-skills:hover   { box-shadow:5px 5px 0 #1b5e20; }
.btn-contact  { background:#ffe44d; color:#181818; border-color:#181818; }

/* ── Characters ── */
#world { position:fixed; z-index:10; bottom:33px; left:50%; transform:translateX(-50%); display:flex; align-items:flex-end; gap:16px; }
#ash { position:relative; display:inline-block; width:52px; height:64px; }
#ash::before { content:" "; position:absolute; width:4px; height:4px; top:0; left:0; box-shadow:12px 4px 0 0 #181818, 16px 4px 0 0 #181818, 20px 4px 0 0 #181818, 24px 4px 0 0 #181818, 28px 4px 0 0 #181818, 32px 4px 0 0 #181818, 8px 8px 0 0 #181818, 12px 8px 0 0 #cc2222, 16px 8px 0 0 #cc2222, 20px 8px 0 0 #cc2222, 24px 8px 0 0 #cc2222, 28px 8px 0 0 #cc2222, 32px 8px 0 0 #cc2222, 36px 8px 0 0 #181818, 4px 12px 0 0 #181818, 8px 12px 0 0 #cc2222, 12px 12px 0 0 #cc2222, 16px 12px 0 0 #cc2222, 20px 12px 0 0 #cc2222, 24px 12px 0 0 #cc2222, 28px 12px 0 0 #cc2222, 32px 12px 0 0 #cc2222, 36px 12px 0 0 #cc2222, 40px 12px 0 0 #181818, 4px 16px 0 0 #181818, 8px 16px 0 0 #cc2222, 12px 16px 0 0 #cc2222, 16px 16px 0 0 #cc2222, 20px 16px 0 0 #cc2222, 24px 16px 0 0 #cc2222, 28px 16px 0 0 #cc2222, 32px 16px 0 0 #cc2222, 36px 16px 0 0 #f0f0f0, 40px 16px 0 0 #181818, 44px 16px 0 0 #181818, 4px 20px 0 0 #181818, 8px 20px 0 0 #181818, 12px 20px 0 0 #cc2222, 16px 20px 0 0 #cc2222, 20px 20px 0 0 #cc2222, 24px 20px 0 0 #cc2222, 28px 20px 0 0 #cc2222, 32px 20px 0 0 #f0f0f0, 36px 20px 0 0 #f0f0f0, 40px 20px 0 0 #f0f0f0, 44px 20px 0 0 #f0f0f0, 48px 20px 0 0 #181818, 4px 24px 0 0 #181818, 8px 24px 0 0 #181818, 12px 24px 0 0 #181818, 16px 24px 0 0 #181818, 20px 24px 0 0 #181818, 24px 24px 0 0 #181818, 28px 24px 0 0 #cc2222, 32px 24px 0 0 #cc2222, 36px 24px 0 0 #cc2222, 40px 24px 0 0 #181818, 44px 24px 0 0 #181818, 4px 28px 0 0 #181818, 8px 28px 0 0 #181818, 12px 28px 0 0 #181818, 16px 28px 0 0 #181818, 20px 28px 0 0 #181818, 24px 28px 0 0 #f4c07a, 28px 28px 0 0 #f4c07a, 32px 28px 0 0 #181818, 36px 28px 0 0 #f4c07a, 40px 28px 0 0 #181818, 4px 32px 0 0 #181818, 8px 32px 0 0 #181818, 12px 32px 0 0 #f4c07a, 16px 32px 0 0 #f4c07a, 20px 32px 0 0 #181818, 24px 32px 0 0 #f4c07a, 28px 32px 0 0 #f4c07a, 32px 32px 0 0 #181818, 36px 32px 0 0 #f4c07a, 40px 32px 0 0 #181818, 8px 36px 0 0 #181818, 12px 36px 0 0 #f4c07a, 16px 36px 0 0 #f4c07a, 20px 36px 0 0 #f4c07a, 24px 36px 0 0 #f4c07a, 28px 36px 0 0 #f4c07a, 32px 36px 0 0 #f4c07a, 36px 36px 0 0 #f4c07a, 40px 36px 0 0 #181818, 4px 40px 0 0 #181818, 8px 40px 0 0 #1a5fb4, 12px 40px 0 0 #181818, 16px 40px 0 0 #181818, 20px 40px 0 0 #f0f0f0, 24px 40px 0 0 #f0f0f0, 28px 40px 0 0 #f0f0f0, 32px 40px 0 0 #1a5fb4, 36px 40px 0 0 #181818, 4px 44px 0 0 #181818, 8px 44px 0 0 #1a5fb4, 12px 44px 0 0 #181818, 16px 44px 0 0 #181818, 20px 44px 0 0 #181818, 24px 44px 0 0 #181818, 28px 44px 0 0 #181818, 32px 44px 0 0 #181818, 4px 48px 0 0 #181818, 8px 48px 0 0 #181818, 12px 48px 0 0 #f0f0f0, 16px 48px 0 0 #f0f0f0, 20px 48px 0 0 #181818, 24px 48px 0 0 #181818, 28px 48px 0 0 #181818, 32px 48px 0 0 #181818, 36px 48px 0 0 #181818, 40px 48px 0 0 #181818, 4px 52px 0 0 #5a3010, 8px 52px 0 0 #181818, 12px 52px 0 0 #f0f0f0, 16px 52px 0 0 #f0f0f0, 20px 52px 0 0 #181818, 24px 52px 0 0 #5a3010, 28px 52px 0 0 #5a3010, 32px 52px 0 0 #181818, 36px 52px 0 0 #5a3010, 40px 52px 0 0 #5a3010, 44px 52px 0 0 #181818, 4px 56px 0 0 #5a3010, 8px 56px 0 0 #5a3010, 12px 56px 0 0 #181818, 16px 56px 0 0 #181818, 20px 56px 0 0 #181818, 24px 56px 0 0 #181818, 28px 56px 0 0 #181818, 32px 56px 0 0 #5a3010, 36px 56px 0 0 #5a3010, 40px 56px 0 0 #181818, 4px 60px 0 0 #181818, 8px 60px 0 0 #181818, 28px 60px 0 0 #181818, 32px 60px 0 0 #181818, 36px 60px 0 0 #181818; }
#pikachu { position:relative; display:inline-block; width:60px; height:64px; }
#pikachu::before { content:" "; position:absolute; width:4px; height:4px; top:0; left:0; box-shadow:16px 4px 0 0 #1a1a1a, 20px 4px 0 0 #1a1a1a, 0 8px 0 0 #1a1a1a, 4px 8px 0 0 #1a1a1a, 8px 8px 0 0 #1a1a1a, 12px 8px 0 0 #1a1a1a, 16px 8px 0 0 #1a1a1a, 20px 8px 0 0 #1a1a1a, 24px 8px 0 0 #1a1a1a, 28px 8px 0 0 #1a1a1a, 32px 8px 0 0 #1a1a1a, 0 12px 0 0 #1a1a1a, 4px 12px 0 0 #f8d030, 8px 12px 0 0 #f8d030, 12px 12px 0 0 #f8d030, 16px 12px 0 0 #1a1a1a, 20px 12px 0 0 #1a1a1a, 24px 12px 0 0 #1a1a1a, 28px 12px 0 0 #f8d030, 32px 12px 0 0 #f8d030, 36px 12px 0 0 #1a1a1a, 40px 12px 0 0 #1a1a1a, 44px 12px 0 0 #1a1a1a, 4px 16px 0 0 #1a1a1a, 8px 16px 0 0 #f8d030, 12px 16px 0 0 #f8d030, 16px 16px 0 0 #f8d030, 20px 16px 0 0 #1a1a1a, 24px 16px 0 0 #f8d030, 28px 16px 0 0 #f8d030, 32px 16px 0 0 #f8d030, 36px 16px 0 0 #f8d030, 40px 16px 0 0 #f8d030, 44px 16px 0 0 #f8d030, 48px 16px 0 0 #1a1a1a, 8px 20px 0 0 #1a1a1a, 12px 20px 0 0 #f8d030, 16px 20px 0 0 #f8d030, 20px 20px 0 0 #1a1a1a, 24px 20px 0 0 #1a1a1a, 28px 20px 0 0 #f8d030, 32px 20px 0 0 #f8d030, 36px 20px 0 0 #f8d030, 40px 20px 0 0 #f8d030, 44px 20px 0 0 #f8d030, 48px 20px 0 0 #f8d030, 52px 20px 0 0 #1a1a1a, 12px 24px 0 0 #1a1a1a, 16px 24px 0 0 #f8d030, 20px 24px 0 0 #f8d030, 24px 24px 0 0 #1a1a1a, 28px 24px 0 0 #f8d030, 32px 24px 0 0 #f8d030, 36px 24px 0 0 #f8d030, 40px 24px 0 0 #f8d030, 44px 24px 0 0 #f8d030, 48px 24px 0 0 #f8d030, 52px 24px 0 0 #1a1a1a, 4px 28px 0 0 #1a1a1a, 8px 28px 0 0 #1a1a1a, 12px 28px 0 0 #1a1a1a, 16px 28px 0 0 #f8d030, 20px 28px 0 0 #1a1a1a, 24px 28px 0 0 #f8d030, 28px 28px 0 0 #f8d030, 32px 28px 0 0 #f8d030, 36px 28px 0 0 #f8d030, 40px 28px 0 0 #f8d030, 44px 28px 0 0 #1a1a1a, 48px 28px 0 0 #f8d030, 52px 28px 0 0 #f8d030, 56px 28px 0 0 #1a1a1a, 4px 32px 0 0 #1a1a1a, 8px 32px 0 0 #f8d030, 12px 32px 0 0 #f8d030, 16px 32px 0 0 #1a1a1a, 20px 32px 0 0 #1a1a1a, 24px 32px 0 0 #f8d030, 28px 32px 0 0 #f8d030, 32px 32px 0 0 #f8d030, 36px 32px 0 0 #c03028, 40px 32px 0 0 #f8d030, 44px 32px 0 0 #f8d030, 48px 32px 0 0 #f8d030, 52px 32px 0 0 #f8d030, 56px 32px 0 0 #1a1a1a, 8px 36px 0 0 #1a1a1a, 12px 36px 0 0 #c03028, 16px 36px 0 0 #1a1a1a, 20px 36px 0 0 #c03028, 24px 36px 0 0 #c03028, 28px 36px 0 0 #c03028, 32px 36px 0 0 #f8d030, 36px 36px 0 0 #f8d030, 40px 36px 0 0 #f8d030, 44px 36px 0 0 #f8d030, 48px 36px 0 0 #f8d030, 52px 36px 0 0 #1a1a1a, 4px 40px 0 0 #1a1a1a, 8px 40px 0 0 #c03028, 12px 40px 0 0 #c03028, 16px 40px 0 0 #1a1a1a, 20px 40px 0 0 #f8d030, 24px 40px 0 0 #f8d030, 28px 40px 0 0 #f8d030, 32px 40px 0 0 #f8d030, 36px 40px 0 0 #f8d030, 40px 40px 0 0 #f8d030, 44px 40px 0 0 #1a1a1a, 48px 40px 0 0 #f8d030, 52px 40px 0 0 #1a1a1a, 8px 44px 0 0 #1a1a1a, 12px 44px 0 0 #c03028, 16px 44px 0 0 #1a1a1a, 20px 44px 0 0 #c03028, 24px 44px 0 0 #c03028, 28px 44px 0 0 #c03028, 32px 44px 0 0 #f8d030, 36px 44px 0 0 #f8d030, 40px 44px 0 0 #1a1a1a, 44px 44px 0 0 #1a1a1a, 48px 44px 0 0 #f8d030, 52px 44px 0 0 #1a1a1a, 12px 48px 0 0 #1a1a1a, 16px 48px 0 0 #1a1a1a, 20px 48px 0 0 #1a1a1a, 24px 48px 0 0 #f8d030, 28px 48px 0 0 #f8d030, 32px 48px 0 0 #f8d030, 36px 48px 0 0 #f8d030, 40px 48px 0 0 #f8d030, 44px 48px 0 0 #f8d030, 48px 48px 0 0 #1a1a1a, 52px 48px 0 0 #1a1a1a, 12px 52px 0 0 #1a1a1a, 16px 52px 0 0 #f8d030, 20px 52px 0 0 #1a1a1a, 24px 52px 0 0 #1a1a1a, 28px 52px 0 0 #f8d030, 32px 52px 0 0 #f8d030, 36px 52px 0 0 #f8d030, 40px 52px 0 0 #f8d030, 44px 52px 0 0 #1a1a1a, 48px 52px 0 0 #f8d030, 52px 52px 0 0 #f8d030, 56px 52px 0 0 #1a1a1a, 16px 56px 0 0 #1a1a1a, 20px 56px 0 0 #f8d030, 24px 56px 0 0 #f8d030, 28px 56px 0 0 #1a1a1a, 32px 56px 0 0 #1a1a1a, 36px 56px 0 0 #1a1a1a, 40px 56px 0 0 #1a1a1a, 48px 56px 0 0 #1a1a1a, 52px 56px 0 0 #1a1a1a, 20px 60px 0 0 #1a1a1a, 24px 60px 0 0 #1a1a1a; }
@keyframes ash-walk { 0% { box-shadow:12px 4px 0 0 #181818, 16px 4px 0 0 #181818, 20px 4px 0 0 #181818, 24px 4px 0 0 #181818, 28px 4px 0 0 #181818, 32px 4px 0 0 #181818, 8px 8px 0 0 #181818, 12px 8px 0 0 #cc2222, 16px 8px 0 0 #cc2222, 20px 8px 0 0 #cc2222, 24px 8px 0 0 #cc2222, 28px 8px 0 0 #cc2222, 32px 8px 0 0 #cc2222, 36px 8px 0 0 #181818, 4px 12px 0 0 #181818, 8px 12px 0 0 #cc2222, 12px 12px 0 0 #cc2222, 16px 12px 0 0 #cc2222, 20px 12px 0 0 #cc2222, 24px 12px 0 0 #cc2222, 28px 12px 0 0 #cc2222, 32px 12px 0 0 #cc2222, 36px 12px 0 0 #cc2222, 40px 12px 0 0 #181818, 4px 16px 0 0 #181818, 8px 16px 0 0 #cc2222, 12px 16px 0 0 #cc2222, 16px 16px 0 0 #cc2222, 20px 16px 0 0 #cc2222, 24px 16px 0 0 #cc2222, 28px 16px 0 0 #cc2222, 32px 16px 0 0 #cc2222, 36px 16px 0 0 #f0f0f0, 40px 16px 0 0 #181818, 44px 16px 0 0 #181818, 4px 20px 0 0 #181818, 8px 20px 0 0 #181818, 12px 20px 0 0 #cc2222, 16px 20px 0 0 #cc2222, 20px 20px 0 0 #cc2222, 24px 20px 0 0 #cc2222, 28px 20px 0 0 #cc2222, 32px 20px 0 0 #f0f0f0, 36px 20px 0 0 #f0f0f0, 40px 20px 0 0 #f0f0f0, 44px 20px 0 0 #f0f0f0, 48px 20px 0 0 #181818, 4px 24px 0 0 #181818, 8px 24px 0 0 #181818, 12px 24px 0 0 #181818, 16px 24px 0 0 #181818, 20px 24px 0 0 #181818, 24px 24px 0 0 #181818, 28px 24px 0 0 #cc2222, 32px 24px 0 0 #cc2222, 36px 24px 0 0 #cc2222, 40px 24px 0 0 #181818, 44px 24px 0 0 #181818, 4px 28px 0 0 #181818, 8px 28px 0 0 #181818, 12px 28px 0 0 #181818, 16px 28px 0 0 #181818, 20px 28px 0 0 #181818, 24px 28px 0 0 #f4c07a, 28px 28px 0 0 #f4c07a, 32px 28px 0 0 #181818, 36px 28px 0 0 #f4c07a, 40px 28px 0 0 #181818, 4px 32px 0 0 #181818, 8px 32px 0 0 #181818, 12px 32px 0 0 #f4c07a, 16px 32px 0 0 #f4c07a, 20px 32px 0 0 #181818, 24px 32px 0 0 #f4c07a, 28px 32px 0 0 #f4c07a, 32px 32px 0 0 #181818, 36px 32px 0 0 #f4c07a, 40px 32px 0 0 #181818, 8px 36px 0 0 #181818, 12px 36px 0 0 #f4c07a, 16px 36px 0 0 #f4c07a, 20px 36px 0 0 #f4c07a, 24px 36px 0 0 #f4c07a, 28px 36px 0 0 #f4c07a, 32px 36px 0 0 #f4c07a, 36px 36px 0 0 #f4c07a, 40px 36px 0 0 #181818, 4px 40px 0 0 #181818, 8px 40px 0 0 #1a5fb4, 12px 40px 0 0 #181818, 16px 40px 0 0 #181818, 20px 40px 0 0 #f0f0f0, 24px 40px 0 0 #f0f0f0, 28px 40px 0 0 #f0f0f0, 32px 40px 0 0 #1a5fb4, 36px 40px 0 0 #181818, 4px 44px 0 0 #181818, 8px 44px 0 0 #1a5fb4, 12px 44px 0 0 #181818, 16px 44px 0 0 #181818, 20px 44px 0 0 #181818, 24px 44px 0 0 #181818, 28px 44px 0 0 #181818, 32px 44px 0 0 #181818, 4px 48px 0 0 #181818, 8px 48px 0 0 #181818, 12px 48px 0 0 #f0f0f0, 16px 48px 0 0 #f0f0f0, 20px 48px 0 0 #181818, 24px 48px 0 0 #181818, 28px 48px 0 0 #181818, 32px 48px 0 0 #181818, 36px 48px 0 0 #181818, 40px 48px 0 0 #181818, 4px 52px 0 0 #5a3010, 8px 52px 0 0 #181818, 12px 52px 0 0 #f0f0f0, 16px 52px 0 0 #f0f0f0, 20px 52px 0 0 #181818, 24px 52px 0 0 #5a3010, 28px 52px 0 0 #5a3010, 32px 52px 0 0 #181818, 36px 52px 0 0 #5a3010, 40px 52px 0 0 #5a3010, 44px 52px 0 0 #181818, 4px 56px 0 0 #5a3010, 8px 56px 0 0 #5a3010, 12px 56px 0 0 #181818, 16px 56px 0 0 #181818, 20px 56px 0 0 #181818, 24px 56px 0 0 #181818, 28px 56px 0 0 #181818, 32px 56px 0 0 #5a3010, 36px 56px 0 0 #5a3010, 40px 56px 0 0 #181818, 4px 60px 0 0 #181818, 8px 60px 0 0 #181818, 28px 60px 0 0 #181818, 32px 60px 0 0 #181818, 36px 60px 0 0 #181818; } 50% { box-shadow:8px 4px 0 0 #181818, 12px 4px 0 0 #cc2222, 16px 4px 0 0 #cc2222, 20px 4px 0 0 #cc2222, 24px 4px 0 0 #cc2222, 28px 4px 0 0 #cc2222, 32px 4px 0 0 #cc2222, 36px 4px 0 0 #181818, 4px 8px 0 0 #181818, 8px 8px 0 0 #cc2222, 12px 8px 0 0 #cc2222, 16px 8px 0 0 #cc2222, 20px 8px 0 0 #cc2222, 24px 8px 0 0 #cc2222, 28px 8px 0 0 #cc2222, 32px 8px 0 0 #cc2222, 36px 8px 0 0 #cc2222, 40px 8px 0 0 #181818, 4px 12px 0 0 #181818, 8px 12px 0 0 #cc2222, 12px 12px 0 0 #cc2222, 16px 12px 0 0 #cc2222, 20px 12px 0 0 #cc2222, 24px 12px 0 0 #cc2222, 28px 12px 0 0 #cc2222, 32px 12px 0 0 #cc2222, 36px 12px 0 0 #f0f0f0, 40px 12px 0 0 #181818, 44px 12px 0 0 #181818, 4px 16px 0 0 #181818, 8px 16px 0 0 #181818, 12px 16px 0 0 #cc2222, 16px 16px 0 0 #cc2222, 20px 16px 0 0 #cc2222, 24px 16px 0 0 #cc2222, 28px 16px 0 0 #cc2222, 32px 16px 0 0 #f0f0f0, 36px 16px 0 0 #f0f0f0, 40px 16px 0 0 #f0f0f0, 44px 16px 0 0 #f0f0f0, 48px 16px 0 0 #181818, 4px 20px 0 0 #181818, 8px 20px 0 0 #181818, 12px 20px 0 0 #181818, 16px 20px 0 0 #181818, 20px 20px 0 0 #181818, 24px 20px 0 0 #181818, 28px 20px 0 0 #cc2222, 32px 20px 0 0 #cc2222, 36px 20px 0 0 #cc2222, 40px 20px 0 0 #181818, 44px 20px 0 0 #181818, 4px 24px 0 0 #181818, 8px 24px 0 0 #181818, 12px 24px 0 0 #181818, 16px 24px 0 0 #181818, 20px 24px 0 0 #181818, 24px 24px 0 0 #fdfdfd, 28px 24px 0 0 #fdfdfd, 32px 24px 0 0 #181818, 36px 24px 0 0 #fdfdfd, 40px 24px 0 0 #181818, 4px 28px 0 0 #181818, 8px 28px 0 0 #181818, 12px 28px 0 0 #f4c07a, 16px 28px 0 0 #f4c07a, 20px 28px 0 0 #181818, 24px 28px 0 0 #f4c07a, 28px 28px 0 0 #f4c07a, 32px 28px 0 0 #181818, 36px 28px 0 0 #f4c07a, 40px 28px 0 0 #181818, 8px 32px 0 0 #181818, 12px 32px 0 0 #f4c07a, 16px 32px 0 0 #f4c07a, 20px 32px 0 0 #f4c07a, 24px 32px 0 0 #f4c07a, 28px 32px 0 0 #f4c07a, 32px 32px 0 0 #f4c07a, 36px 32px 0 0 #f4c07a, 40px 32px 0 0 #181818, 4px 36px 0 0 #181818, 8px 36px 0 0 #1a5fb4, 12px 36px 0 0 #181818, 16px 36px 0 0 #181818, 20px 36px 0 0 #f4c07a, 24px 36px 0 0 #f4c07a, 28px 36px 0 0 #f4c07a, 32px 36px 0 0 #1a5fb4, 36px 36px 0 0 #181818, 4px 40px 0 0 #181818, 8px 40px 0 0 #1a5fb4, 12px 40px 0 0 #1a5fb4, 16px 40px 0 0 #181818, 20px 40px 0 0 #181818, 24px 40px 0 0 #181818, 28px 40px 0 0 #181818, 32px 40px 0 0 #181818, 4px 44px 0 0 #181818, 8px 44px 0 0 #1a5fb4, 12px 44px 0 0 #181818, 16px 44px 0 0 #f0f0f0, 20px 44px 0 0 #f0f0f0, 24px 44px 0 0 #181818, 28px 44px 0 0 #181818, 4px 48px 0 0 #181818, 8px 48px 0 0 #1a5fb4, 12px 48px 0 0 #181818, 16px 48px 0 0 #f0f0f0, 20px 48px 0 0 #f0f0f0, 24px 48px 0 0 #181818, 28px 48px 0 0 #181818, 8px 52px 0 0 #181818, 12px 52px 0 0 #181818, 16px 52px 0 0 #181818, 20px 52px 0 0 #181818, 24px 52px 0 0 #5a3010, 28px 52px 0 0 #5a3010, 32px 52px 0 0 #181818, 12px 56px 0 0 #181818, 16px 56px 0 0 #1a5fb4, 20px 56px 0 0 #1a5fb4, 24px 56px 0 0 #1a5fb4, 28px 56px 0 0 #1a5fb4, 32px 56px 0 0 #181818, 16px 60px 0 0 #181818, 20px 60px 0 0 #181818, 24px 60px 0 0 #181818, 28px 60px 0 0 #181818; } 100% { box-shadow:12px 4px 0 0 #181818, 16px 4px 0 0 #181818, 20px 4px 0 0 #181818, 24px 4px 0 0 #181818, 28px 4px 0 0 #181818, 32px 4px 0 0 #181818, 8px 8px 0 0 #181818, 12px 8px 0 0 #cc2222, 16px 8px 0 0 #cc2222, 20px 8px 0 0 #cc2222, 24px 8px 0 0 #cc2222, 28px 8px 0 0 #cc2222, 32px 8px 0 0 #cc2222, 36px 8px 0 0 #181818, 4px 12px 0 0 #181818, 8px 12px 0 0 #cc2222, 12px 12px 0 0 #cc2222, 16px 12px 0 0 #cc2222, 20px 12px 0 0 #cc2222, 24px 12px 0 0 #cc2222, 28px 12px 0 0 #cc2222, 32px 12px 0 0 #cc2222, 36px 12px 0 0 #cc2222, 40px 12px 0 0 #181818, 4px 16px 0 0 #181818, 8px 16px 0 0 #cc2222, 12px 16px 0 0 #cc2222, 16px 16px 0 0 #cc2222, 20px 16px 0 0 #cc2222, 24px 16px 0 0 #cc2222, 28px 16px 0 0 #cc2222, 32px 16px 0 0 #cc2222, 36px 16px 0 0 #f0f0f0, 40px 16px 0 0 #181818, 44px 16px 0 0 #181818, 4px 20px 0 0 #181818, 8px 20px 0 0 #181818, 12px 20px 0 0 #cc2222, 16px 20px 0 0 #cc2222, 20px 20px 0 0 #cc2222, 24px 20px 0 0 #cc2222, 28px 20px 0 0 #cc2222, 32px 20px 0 0 #f0f0f0, 36px 20px 0 0 #f0f0f0, 40px 20px 0 0 #f0f0f0, 44px 20px 0 0 #f0f0f0, 48px 20px 0 0 #181818, 4px 24px 0 0 #181818, 8px 24px 0 0 #181818, 12px 24px 0 0 #181818, 16px 24px 0 0 #181818, 20px 24px 0 0 #181818, 24px 24px 0 0 #181818, 28px 24px 0 0 #cc2222, 32px 24px 0 0 #cc2222, 36px 24px 0 0 #cc2222, 40px 24px 0 0 #181818, 44px 24px 0 0 #181818, 4px 28px 0 0 #181818, 8px 28px 0 0 #181818, 12px 28px 0 0 #181818, 16px 28px 0 0 #181818, 20px 28px 0 0 #181818, 24px 28px 0 0 #f4c07a, 28px 28px 0 0 #f4c07a, 32px 28px 0 0 #181818, 36px 28px 0 0 #f4c07a, 40px 28px 0 0 #181818, 4px 32px 0 0 #181818, 8px 32px 0 0 #181818, 12px 32px 0 0 #f4c07a, 16px 32px 0 0 #f4c07a, 20px 32px 0 0 #181818, 24px 32px 0 0 #f4c07a, 28px 32px 0 0 #f4c07a, 32px 32px 0 0 #181818, 36px 32px 0 0 #f4c07a, 40px 32px 0 0 #181818, 8px 36px 0 0 #181818, 12px 36px 0 0 #f4c07a, 16px 36px 0 0 #f4c07a, 20px 36px 0 0 #f4c07a, 24px 36px 0 0 #f4c07a, 28px 36px 0 0 #f4c07a, 32px 36px 0 0 #f4c07a, 36px 36px 0 0 #f4c07a, 40px 36px 0 0 #181818, 4px 40px 0 0 #181818, 8px 40px 0 0 #1a5fb4, 12px 40px 0 0 #181818, 16px 40px 0 0 #181818, 20px 40px 0 0 #f0f0f0, 24px 40px 0 0 #f0f0f0, 28px 40px 0 0 #f0f0f0, 32px 40px 0 0 #1a5fb4, 36px 40px 0 0 #181818, 4px 44px 0 0 #181818, 8px 44px 0 0 #1a5fb4, 12px 44px 0 0 #181818, 16px 44px 0 0 #181818, 20px 44px 0 0 #181818, 24px 44px 0 0 #181818, 28px 44px 0 0 #181818, 32px 44px 0 0 #181818, 4px 48px 0 0 #181818, 8px 48px 0 0 #181818, 12px 48px 0 0 #f0f0f0, 16px 48px 0 0 #f0f0f0, 20px 48px 0 0 #181818, 24px 48px 0 0 #181818, 28px 48px 0 0 #181818, 32px 48px 0 0 #181818, 36px 48px 0 0 #181818, 40px 48px 0 0 #181818, 4px 52px 0 0 #5a3010, 8px 52px 0 0 #181818, 12px 52px 0 0 #f0f0f0, 16px 52px 0 0 #f0f0f0, 20px 52px 0 0 #181818, 24px 52px 0 0 #5a3010, 28px 52px 0 0 #5a3010, 32px 52px 0 0 #181818, 36px 52px 0 0 #5a3010, 40px 52px 0 0 #5a3010, 44px 52px 0 0 #181818, 4px 56px 0 0 #5a3010, 8px 56px 0 0 #5a3010, 12px 56px 0 0 #181818, 16px 56px 0 0 #181818, 20px 56px 0 0 #181818, 24px 56px 0 0 #181818, 28px 56px 0 0 #181818, 32px 56px 0 0 #5a3010, 36px 56px 0 0 #5a3010, 40px 56px 0 0 #181818, 4px 60px 0 0 #181818, 8px 60px 0 0 #181818, 28px 60px 0 0 #181818, 32px 60px 0 0 #181818, 36px 60px 0 0 #181818; } }
@keyframes pik-walk { 0% { box-shadow:16px 4px 0 0 #1a1a1a, 20px 4px 0 0 #1a1a1a, 0 8px 0 0 #1a1a1a, 4px 8px 0 0 #1a1a1a, 8px 8px 0 0 #1a1a1a, 12px 8px 0 0 #1a1a1a, 16px 8px 0 0 #1a1a1a, 20px 8px 0 0 #1a1a1a, 24px 8px 0 0 #1a1a1a, 28px 8px 0 0 #1a1a1a, 32px 8px 0 0 #1a1a1a, 0 12px 0 0 #1a1a1a, 4px 12px 0 0 #f8d030, 8px 12px 0 0 #f8d030, 12px 12px 0 0 #f8d030, 16px 12px 0 0 #1a1a1a, 20px 12px 0 0 #1a1a1a, 24px 12px 0 0 #1a1a1a, 28px 12px 0 0 #f8d030, 32px 12px 0 0 #f8d030, 36px 12px 0 0 #1a1a1a, 40px 12px 0 0 #1a1a1a, 44px 12px 0 0 #1a1a1a, 4px 16px 0 0 #1a1a1a, 8px 16px 0 0 #f8d030, 12px 16px 0 0 #f8d030, 16px 16px 0 0 #f8d030, 20px 16px 0 0 #1a1a1a, 24px 16px 0 0 #f8d030, 28px 16px 0 0 #f8d030, 32px 16px 0 0 #f8d030, 36px 16px 0 0 #f8d030, 40px 16px 0 0 #f8d030, 44px 16px 0 0 #f8d030, 48px 16px 0 0 #1a1a1a, 8px 20px 0 0 #1a1a1a, 12px 20px 0 0 #f8d030, 16px 20px 0 0 #f8d030, 20px 20px 0 0 #1a1a1a, 24px 20px 0 0 #1a1a1a, 28px 20px 0 0 #f8d030, 32px 20px 0 0 #f8d030, 36px 20px 0 0 #f8d030, 40px 20px 0 0 #f8d030, 44px 20px 0 0 #f8d030, 48px 20px 0 0 #f8d030, 52px 20px 0 0 #1a1a1a, 12px 24px 0 0 #1a1a1a, 16px 24px 0 0 #f8d030, 20px 24px 0 0 #f8d030, 24px 24px 0 0 #1a1a1a, 28px 24px 0 0 #f8d030, 32px 24px 0 0 #f8d030, 36px 24px 0 0 #f8d030, 40px 24px 0 0 #f8d030, 44px 24px 0 0 #f8d030, 48px 24px 0 0 #f8d030, 52px 24px 0 0 #1a1a1a, 4px 28px 0 0 #1a1a1a, 8px 28px 0 0 #1a1a1a, 12px 28px 0 0 #1a1a1a, 16px 28px 0 0 #f8d030, 20px 28px 0 0 #1a1a1a, 24px 28px 0 0 #f8d030, 28px 28px 0 0 #f8d030, 32px 28px 0 0 #f8d030, 36px 28px 0 0 #f8d030, 40px 28px 0 0 #f8d030, 44px 28px 0 0 #1a1a1a, 48px 28px 0 0 #f8d030, 52px 28px 0 0 #f8d030, 56px 28px 0 0 #1a1a1a, 4px 32px 0 0 #1a1a1a, 8px 32px 0 0 #f8d030, 12px 32px 0 0 #f8d030, 16px 32px 0 0 #1a1a1a, 20px 32px 0 0 #1a1a1a, 24px 32px 0 0 #f8d030, 28px 32px 0 0 #f8d030, 32px 32px 0 0 #f8d030, 36px 32px 0 0 #c03028, 40px 32px 0 0 #f8d030, 44px 32px 0 0 #f8d030, 48px 32px 0 0 #f8d030, 52px 32px 0 0 #f8d030, 56px 32px 0 0 #1a1a1a, 8px 36px 0 0 #1a1a1a, 12px 36px 0 0 #c03028, 16px 36px 0 0 #1a1a1a, 20px 36px 0 0 #c03028, 24px 36px 0 0 #c03028, 28px 36px 0 0 #c03028, 32px 36px 0 0 #f8d030, 36px 36px 0 0 #f8d030, 40px 36px 0 0 #f8d030, 44px 36px 0 0 #f8d030, 48px 36px 0 0 #f8d030, 52px 36px 0 0 #1a1a1a, 4px 40px 0 0 #1a1a1a, 8px 40px 0 0 #c03028, 12px 40px 0 0 #c03028, 16px 40px 0 0 #1a1a1a, 20px 40px 0 0 #f8d030, 24px 40px 0 0 #f8d030, 28px 40px 0 0 #f8d030, 32px 40px 0 0 #f8d030, 36px 40px 0 0 #f8d030, 40px 40px 0 0 #f8d030, 44px 40px 0 0 #1a1a1a, 48px 40px 0 0 #f8d030, 52px 40px 0 0 #1a1a1a, 8px 44px 0 0 #1a1a1a, 12px 44px 0 0 #c03028, 16px 44px 0 0 #1a1a1a, 20px 44px 0 0 #c03028, 24px 44px 0 0 #c03028, 28px 44px 0 0 #c03028, 32px 44px 0 0 #f8d030, 36px 44px 0 0 #f8d030, 40px 44px 0 0 #1a1a1a, 44px 44px 0 0 #1a1a1a, 48px 44px 0 0 #f8d030, 52px 44px 0 0 #1a1a1a, 12px 48px 0 0 #1a1a1a, 16px 48px 0 0 #1a1a1a, 20px 48px 0 0 #1a1a1a, 24px 48px 0 0 #f8d030, 28px 48px 0 0 #f8d030, 32px 48px 0 0 #f8d030, 36px 48px 0 0 #f8d030, 40px 48px 0 0 #f8d030, 44px 48px 0 0 #f8d030, 48px 48px 0 0 #1a1a1a, 52px 48px 0 0 #1a1a1a, 12px 52px 0 0 #1a1a1a, 16px 52px 0 0 #f8d030, 20px 52px 0 0 #1a1a1a, 24px 52px 0 0 #1a1a1a, 28px 52px 0 0 #f8d030, 32px 52px 0 0 #f8d030, 36px 52px 0 0 #f8d030, 40px 52px 0 0 #f8d030, 44px 52px 0 0 #1a1a1a, 48px 52px 0 0 #f8d030, 52px 52px 0 0 #f8d030, 56px 52px 0 0 #1a1a1a, 16px 56px 0 0 #1a1a1a, 20px 56px 0 0 #f8d030, 24px 56px 0 0 #f8d030, 28px 56px 0 0 #1a1a1a, 32px 56px 0 0 #1a1a1a, 36px 56px 0 0 #1a1a1a, 40px 56px 0 0 #1a1a1a, 48px 56px 0 0 #1a1a1a, 52px 56px 0 0 #1a1a1a, 20px 60px 0 0 #1a1a1a, 24px 60px 0 0 #1a1a1a; } 50% { box-shadow:16px 8px 0 0 #1a1a1a, 20px 8px 0 0 #1a1a1a, 0 12px 0 0 #1a1a1a, 4px 12px 0 0 #1a1a1a, 8px 12px 0 0 #1a1a1a, 12px 12px 0 0 #1a1a1a, 16px 12px 0 0 #1a1a1a, 20px 12px 0 0 #1a1a1a, 24px 12px 0 0 #1a1a1a, 28px 12px 0 0 #1a1a1a, 32px 12px 0 0 #1a1a1a, 0 16px 0 0 #1a1a1a, 4px 16px 0 0 #f8d030, 8px 16px 0 0 #f8d030, 12px 16px 0 0 #f8d030, 16px 16px 0 0 #1a1a1a, 20px 16px 0 0 #1a1a1a, 24px 16px 0 0 #1a1a1a, 28px 16px 0 0 #f8d030, 32px 16px 0 0 #f8d030, 36px 16px 0 0 #1a1a1a, 40px 16px 0 0 #1a1a1a, 44px 16px 0 0 #1a1a1a, 4px 20px 0 0 #1a1a1a, 8px 20px 0 0 #f8d030, 12px 20px 0 0 #f8d030, 16px 20px 0 0 #f8d030, 20px 20px 0 0 #1a1a1a, 24px 20px 0 0 #f8d030, 28px 20px 0 0 #f8d030, 32px 20px 0 0 #f8d030, 36px 20px 0 0 #f8d030, 40px 20px 0 0 #f8d030, 44px 20px 0 0 #f8d030, 48px 20px 0 0 #1a1a1a, 8px 24px 0 0 #1a1a1a, 12px 24px 0 0 #f8d030, 16px 24px 0 0 #f8d030, 20px 24px 0 0 #1a1a1a, 24px 24px 0 0 #1a1a1a, 28px 24px 0 0 #f8d030, 32px 24px 0 0 #f8d030, 36px 24px 0 0 #f8d030, 40px 24px 0 0 #f8d030, 44px 24px 0 0 #f8d030, 48px 24px 0 0 #f8d030, 52px 24px 0 0 #1a1a1a, 12px 28px 0 0 #1a1a1a, 16px 28px 0 0 #f8d030, 20px 28px 0 0 #f8d030, 24px 28px 0 0 #1a1a1a, 28px 28px 0 0 #f8d030, 32px 28px 0 0 #f8d030, 36px 28px 0 0 #f8d030, 40px 28px 0 0 #f8d030, 44px 28px 0 0 #f8d030, 48px 28px 0 0 #f8d030, 52px 28px 0 0 #1a1a1a, 4px 32px 0 0 #1a1a1a, 8px 32px 0 0 #1a1a1a, 12px 32px 0 0 #1a1a1a, 16px 32px 0 0 #f8d030, 20px 32px 0 0 #1a1a1a, 24px 32px 0 0 #f8d030, 28px 32px 0 0 #f8d030, 32px 32px 0 0 #f8d030, 36px 32px 0 0 #f8d030, 40px 32px 0 0 #f8d030, 44px 32px 0 0 #1a1a1a, 48px 32px 0 0 #f8d030, 52px 32px 0 0 #f8d030, 56px 32px 0 0 #1a1a1a, 4px 36px 0 0 #1a1a1a, 8px 36px 0 0 #f8d030, 12px 36px 0 0 #f8d030, 16px 36px 0 0 #f8d030, 20px 36px 0 0 #1a1a1a, 24px 36px 0 0 #f8d030, 28px 36px 0 0 #f8d030, 32px 36px 0 0 #f8d030, 36px 36px 0 0 #c03028, 40px 36px 0 0 #f8d030, 44px 36px 0 0 #f8d030, 48px 36px 0 0 #f8d030, 52px 36px 0 0 #f8d030, 56px 36px 0 0 #1a1a1a, 8px 40px 0 0 #1a1a1a, 12px 40px 0 0 #c03028, 16px 40px 0 0 #1a1a1a, 20px 40px 0 0 #c03028, 24px 40px 0 0 #c03028, 28px 40px 0 0 #c03028, 32px 40px 0 0 #f8d030, 36px 40px 0 0 #f8d030, 40px 40px 0 0 #f8d030, 44px 40px 0 0 #f8d030, 48px 40px 0 0 #f8d030, 52px 40px 0 0 #1a1a1a, 4px 44px 0 0 #1a1a1a, 8px 44px 0 0 #c03028, 12px 44px 0 0 #c03028, 16px 44px 0 0 #1a1a1a, 20px 44px 0 0 #f8d030, 24px 44px 0 0 #f8d030, 28px 44px 0 0 #f8d030, 32px 44px 0 0 #f8d030, 36px 44px 0 0 #f8d030, 40px 44px 0 0 #f8d030, 44px 44px 0 0 #1a1a1a, 48px 44px 0 0 #f8d030, 52px 44px 0 0 #1a1a1a, 8px 48px 0 0 #1a1a1a, 12px 48px 0 0 #c03028, 16px 48px 0 0 #1a1a1a, 20px 48px 0 0 #c03028, 24px 48px 0 0 #c03028, 28px 48px 0 0 #c03028, 32px 48px 0 0 #f8d030, 36px 48px 0 0 #f8d030, 40px 48px 0 0 #1a1a1a, 44px 48px 0 0 #1a1a1a, 48px 48px 0 0 #f8d030, 52px 48px 0 0 #1a1a1a, 12px 52px 0 0 #1a1a1a, 16px 52px 0 0 #1a1a1a, 20px 52px 0 0 #1a1a1a, 24px 52px 0 0 #f8d030, 28px 52px 0 0 #f8d030, 32px 52px 0 0 #f8d030, 36px 52px 0 0 #f8d030, 40px 52px 0 0 #f8d030, 44px 52px 0 0 #f8d030, 48px 52px 0 0 #f8d030, 52px 52px 0 0 #1a1a1a, 24px 56px 0 0 #1a1a1a, 28px 56px 0 0 #1a1a1a, 32px 56px 0 0 #f8d030, 36px 56px 0 0 #f8d030, 40px 56px 0 0 #f8d030, 44px 56px 0 0 #1a1a1a, 48px 56px 0 0 #1a1a1a, 32px 60px 0 0 #1a1a1a, 36px 60px 0 0 #1a1a1a, 40px 60px 0 0 #1a1a1a; } 100% { box-shadow:16px 4px 0 0 #1a1a1a, 20px 4px 0 0 #1a1a1a, 0 8px 0 0 #1a1a1a, 4px 8px 0 0 #1a1a1a, 8px 8px 0 0 #1a1a1a, 12px 8px 0 0 #1a1a1a, 16px 8px 0 0 #1a1a1a, 20px 8px 0 0 #1a1a1a, 24px 8px 0 0 #1a1a1a, 28px 8px 0 0 #1a1a1a, 32px 8px 0 0 #1a1a1a, 0 12px 0 0 #1a1a1a, 4px 12px 0 0 #f8d030, 8px 12px 0 0 #f8d030, 12px 12px 0 0 #f8d030, 16px 12px 0 0 #1a1a1a, 20px 12px 0 0 #1a1a1a, 24px 12px 0 0 #1a1a1a, 28px 12px 0 0 #f8d030, 32px 12px 0 0 #f8d030, 36px 12px 0 0 #1a1a1a, 40px 12px 0 0 #1a1a1a, 44px 12px 0 0 #1a1a1a, 4px 16px 0 0 #1a1a1a, 8px 16px 0 0 #f8d030, 12px 16px 0 0 #f8d030, 16px 16px 0 0 #f8d030, 20px 16px 0 0 #1a1a1a, 24px 16px 0 0 #f8d030, 28px 16px 0 0 #f8d030, 32px 16px 0 0 #f8d030, 36px 16px 0 0 #f8d030, 40px 16px 0 0 #f8d030, 44px 16px 0 0 #f8d030, 48px 16px 0 0 #1a1a1a, 8px 20px 0 0 #1a1a1a, 12px 20px 0 0 #f8d030, 16px 20px 0 0 #f8d030, 20px 20px 0 0 #1a1a1a, 24px 20px 0 0 #1a1a1a, 28px 20px 0 0 #f8d030, 32px 20px 0 0 #f8d030, 36px 20px 0 0 #f8d030, 40px 20px 0 0 #f8d030, 44px 20px 0 0 #f8d030, 48px 20px 0 0 #f8d030, 52px 20px 0 0 #1a1a1a, 12px 24px 0 0 #1a1a1a, 16px 24px 0 0 #f8d030, 20px 24px 0 0 #f8d030, 24px 24px 0 0 #1a1a1a, 28px 24px 0 0 #f8d030, 32px 24px 0 0 #f8d030, 36px 24px 0 0 #f8d030, 40px 24px 0 0 #f8d030, 44px 24px 0 0 #f8d030, 48px 24px 0 0 #f8d030, 52px 24px 0 0 #1a1a1a, 4px 28px 0 0 #1a1a1a, 8px 28px 0 0 #1a1a1a, 12px 28px 0 0 #1a1a1a, 16px 28px 0 0 #f8d030, 20px 28px 0 0 #1a1a1a, 24px 28px 0 0 #f8d030, 28px 28px 0 0 #f8d030, 32px 28px 0 0 #f8d030, 36px 28px 0 0 #f8d030, 40px 28px 0 0 #f8d030, 44px 28px 0 0 #1a1a1a, 48px 28px 0 0 #f8d030, 52px 28px 0 0 #f8d030, 56px 28px 0 0 #1a1a1a, 4px 32px 0 0 #1a1a1a, 8px 32px 0 0 #f8d030, 12px 32px 0 0 #f8d030, 16px 32px 0 0 #1a1a1a, 20px 32px 0 0 #1a1a1a, 24px 32px 0 0 #f8d030, 28px 32px 0 0 #f8d030, 32px 32px 0 0 #f8d030, 36px 32px 0 0 #c03028, 40px 32px 0 0 #f8d030, 44px 32px 0 0 #f8d030, 48px 32px 0 0 #f8d030, 52px 32px 0 0 #f8d030, 56px 32px 0 0 #1a1a1a, 8px 36px 0 0 #1a1a1a, 12px 36px 0 0 #c03028, 16px 36px 0 0 #1a1a1a, 20px 36px 0 0 #c03028, 24px 36px 0 0 #c03028, 28px 36px 0 0 #c03028, 32px 36px 0 0 #f8d030, 36px 36px 0 0 #f8d030, 40px 36px 0 0 #f8d030, 44px 36px 0 0 #f8d030, 48px 36px 0 0 #f8d030, 52px 36px 0 0 #1a1a1a, 4px 40px 0 0 #1a1a1a, 8px 40px 0 0 #c03028, 12px 40px 0 0 #c03028, 16px 40px 0 0 #1a1a1a, 20px 40px 0 0 #f8d030, 24px 40px 0 0 #f8d030, 28px 40px 0 0 #f8d030, 32px 40px 0 0 #f8d030, 36px 40px 0 0 #f8d030, 40px 40px 0 0 #f8d030, 44px 40px 0 0 #1a1a1a, 48px 40px 0 0 #f8d030, 52px 40px 0 0 #1a1a1a, 8px 44px 0 0 #1a1a1a, 12px 44px 0 0 #c03028, 16px 44px 0 0 #1a1a1a, 20px 44px 0 0 #c03028, 24px 44px 0 0 #c03028, 28px 44px 0 0 #c03028, 32px 44px 0 0 #f8d030, 36px 44px 0 0 #f8d030, 40px 44px 0 0 #1a1a1a, 44px 44px 0 0 #1a1a1a, 48px 44px 0 0 #f8d030, 52px 44px 0 0 #1a1a1a, 12px 48px 0 0 #1a1a1a, 16px 48px 0 0 #1a1a1a, 20px 48px 0 0 #1a1a1a, 24px 48px 0 0 #f8d030, 28px 48px 0 0 #f8d030, 32px 48px 0 0 #f8d030, 36px 48px 0 0 #f8d030, 40px 48px 0 0 #f8d030, 44px 48px 0 0 #f8d030, 48px 48px 0 0 #1a1a1a, 52px 48px 0 0 #1a1a1a, 12px 52px 0 0 #1a1a1a, 16px 52px 0 0 #f8d030, 20px 52px 0 0 #1a1a1a, 24px 52px 0 0 #1a1a1a, 28px 52px 0 0 #f8d030, 32px 52px 0 0 #f8d030, 36px 52px 0 0 #f8d030, 40px 52px 0 0 #f8d030, 44px 52px 0 0 #1a1a1a, 48px 52px 0 0 #f8d030, 52px 52px 0 0 #f8d030, 56px 52px 0 0 #1a1a1a, 16px 56px 0 0 #1a1a1a, 20px 56px 0 0 #f8d030, 24px 56px 0 0 #f8d030, 28px 56px 0 0 #1a1a1a, 32px 56px 0 0 #1a1a1a, 36px 56px 0 0 #1a1a1a, 40px 56px 0 0 #1a1a1a, 48px 56px 0 0 #1a1a1a, 52px 56px 0 0 #1a1a1a, 20px 60px 0 0 #1a1a1a, 24px 60px 0 0 #1a1a1a; } }
.walking #ash::before     { animation:ash-walk 0.4s infinite steps(1,end); }
.walking #pikachu::before { animation:pik-walk 0.2s infinite steps(1,end); }
#world.facing-left        { transform:translateX(-50%) scaleX(-1); }

/* ── Toast ── */
.toast-box { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; width:min(520px,90vw); background:#fff; border:3px solid #181818; border-radius:6px; padding:14px 18px 10px; box-shadow:4px 4px 0 #181818; display:flex; flex-direction:column; gap:5px; animation:toast-in 0.2s ease; font-family:monospace; cursor:pointer; }
.toast-hidden { display:none !important; }
@keyframes toast-in { from { transform:translateX(-50%) translateY(16px); opacity:0; } to { transform:translateX(-50%) translateY(0); opacity:1; } }
.toast-success { border-color:#181818; }
.toast-error   { border-color:#cc2222; background:#fff5f5; }
.toast-info    { border-color:#1a5fb4; background:#f0f4ff; }
.toast-icon    { font-size:1rem; }
.toast-text    { font-size:0.92rem; color:#181818; line-height:1.5; min-height:1.4em; }
.toast-error .toast-text { color:#cc2222; }
.toast-info  .toast-text { color:#1a5fb4; }
.toast-dismiss { font-size:0.68rem; color:#999; text-align:right; }

/* ── Modals ── */
.modal-overlay { position:fixed; inset:0; z-index:150; background:rgba(0,0,0,0.65); backdrop-filter:blur(4px); }
.modal-hidden  { display:none !important; }
.modal {
  position:fixed; z-index:160; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(480px,92vw); background:#fff;
  border:3px solid #181818; border-radius:10px;
  box-shadow:6px 6px 0 #181818; overflow:hidden;
}
.modal-wide { width:min(860px,95vw); }
.modal-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; background:#181818; color:#ffe44d;
  font-family:monospace; font-weight:700; font-size:1rem; flex-shrink:0;
}
.modal-close { background:none; border:none; color:#fff; font-size:1.3rem; cursor:pointer; line-height:1; }
.modal-scroll { overflow-y:auto; max-height:75vh; padding:24px; }

/* ── Contact form ── */
.modal form { padding:20px 18px; display:flex; flex-direction:column; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group label { font-size:0.78rem; font-weight:700; color:#333; letter-spacing:0.5px; font-family:monospace; }
.form-group input, .form-group textarea { border:2px solid #ddd; border-radius:5px; padding:9px 12px; font-size:0.9rem; font-family:'Segoe UI',sans-serif; transition:border-color 0.2s; resize:vertical; }
.form-group input:focus, .form-group textarea:focus { outline:none; border-color:#1a5fb4; }
.btn-primary { background:#181818; color:#ffe44d; border:none; border-radius:5px; padding:11px; font-size:0.95rem; font-weight:700; font-family:monospace; cursor:pointer; transition:background 0.2s,transform 0.1s; }
.btn-primary:hover { background:#333; transform:translateY(-1px); }
.btn-primary:disabled { opacity:0.6; cursor:not-allowed; transform:none; }

/* ── Projects grid ── */
.projects-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.project-card {
  border:2.5px solid #e0e0e0; border-radius:10px; padding:18px;
  display:flex; flex-direction:column; gap:10px;
  transition:border-color 0.2s, transform 0.15s, box-shadow 0.15s;
  background:#fff;
}
.project-card:hover { border-color:#1a5fb4; transform:translateY(-3px); box-shadow:0 6px 20px rgba(26,95,180,0.15); }
.project-card-header { display:flex; align-items:center; gap:10px; }
.project-icon { font-size:1.6rem; }
.project-title { font-size:1rem; font-weight:800; color:#181818; font-family:monospace; }
.project-desc { font-size:0.84rem; color:#555; line-height:1.55; flex:1; }
.project-tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag {
  background:#f0f4ff; color:#1a5fb4; border:1px solid #c5d8f5;
  border-radius:20px; padding:2px 10px; font-size:0.72rem;
  font-family:monospace; font-weight:600;
}
.project-links { display:flex; gap:8px; margin-top:4px; }
.proj-link {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:6px; font-size:0.78rem;
  font-family:monospace; font-weight:700; text-decoration:none;
  border:1.5px solid #181818; color:#181818;
  transition:background 0.15s, color 0.15s;
}
.proj-link:hover { background:#181818; color:#ffe44d; }
.proj-link.primary { background:#181818; color:#ffe44d; }
.proj-link.primary:hover { background:#333; }

/* ── Skills ── */
.skills-section { margin-bottom:28px; }
.skills-section-title {
  font-family:monospace; font-weight:800; font-size:0.8rem;
  letter-spacing:1.5px; text-transform:uppercase;
  color:#888; margin-bottom:14px;
  padding-bottom:6px; border-bottom:2px solid #f0f0f0;
}
.skills-grid { display:flex; flex-direction:column; gap:10px; }
.skill-row { display:flex; align-items:center; gap:12px; }
.skill-name { font-family:monospace; font-size:0.85rem; font-weight:700; color:#181818; width:130px; flex-shrink:0; }
.skill-bar-track { flex:1; height:10px; background:#f0f0f0; border-radius:6px; overflow:hidden; border:1px solid #e0e0e0; }
.skill-bar-fill {
  height:100%; border-radius:6px;
  animation:bar-grow 0.8s ease forwards;
  transform-origin:left;
}
@keyframes bar-grow { from { width:0; } }
.skill-pct { font-family:monospace; font-size:0.75rem; color:#888; width:34px; text-align:right; flex-shrink:0; }

/* Icon grid for tools */
.icon-grid { display:flex; flex-wrap:wrap; gap:10px; }
.icon-chip {
  display:flex; align-items:center; gap:6px;
  background:#f8f8f8; border:1.5px solid #e8e8e8; border-radius:8px;
  padding:7px 13px; font-size:0.82rem; font-family:monospace; font-weight:600;
  transition:border-color 0.15s, background 0.15s;
}
.icon-chip:hover { background:#f0f4ff; border-color:#1a5fb4; color:#1a5fb4; }

/* Admin styles (shared with admin page) */
.adm-btn { background:#181818; color:#ffe44d; border:none; border-radius:5px; padding:9px 16px; font-size:0.85rem; font-weight:700; font-family:monospace; cursor:pointer; }
.adm-btn-sm { background:rgba(0,0,0,0.07); color:#333; border:1px solid #ccc; border-radius:4px; padding:4px 10px; font-size:0.75rem; font-family:monospace; cursor:pointer; white-space:nowrap; }
.adm-btn-sm.danger { color:#cc2222; border-color:#cc2222; }
.adm-filter { background:rgba(0,0,0,0.06); color:#333; border:1px solid #ccc; border-radius:4px; padding:4px 10px; font-size:0.75rem; font-family:monospace; cursor:pointer; }
.adm-filter.active { background:#ffe44d; border-color:#181818; font-weight:700; }
.badge { background:#cc2222; color:#fff; font-size:0.7rem; border-radius:10px; padding:1px 7px; margin-left:6px; }
.contact-card { border:2px solid #eee; border-radius:6px; padding:14px; font-size:0.85rem; margin-bottom:10px; }
.contact-card.unread { border-color:#1a5fb4; background:#f0f4ff; }
.card-top { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:6px; }
.card-email { color:#555; font-family:monospace; font-size:0.8rem; }
.card-date  { color:#888; font-size:0.75rem; margin-left:auto; }
.card-subject { font-weight:600; color:#1a5fb4; margin-bottom:4px; font-size:0.82rem; }
.card-message { color:#333; line-height:1.5; margin-bottom:8px; white-space:pre-wrap; }
.card-note { width:100%; border:1px solid #ddd; border-radius:4px; padding:7px 10px; font-size:0.8rem; resize:vertical; margin-bottom:6px; }
.read-tag { font-size:0.72rem; color:#888; font-family:monospace; }
.no-contacts { color:#888; font-family:monospace; text-align:center; padding:30px 0; }
.admin-login-form { display:flex; flex-direction:column; gap:10px; max-width:320px; margin:40px auto; padding:0 20px; }
.admin-login-form input { border:2px solid #ddd; border-radius:5px; padding:9px 12px; font-size:0.9rem; }
.adm-error { color:#cc2222; font-size:0.82rem; font-family:monospace; }
.admin-filters { display:flex; gap:8px; flex-wrap:wrap; padding:14px 18px 0; }
.admin-contacts { padding:14px 18px; overflow-y:auto; max-height:60vh; }


#dpad {
    display: none;
}

@media (max-width: 600px) {
    #action-btns {
        position: fixed;
        top: auto;
        bottom: 145px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        justify-content: center;
        flex-wrap: wrap;
        width: 90%;
        gap: 7px;
    }

    .action-btn {
        padding: 7px 13px;
        font-size: 0.76rem;
        font-weight: 700;
    }

    #content {
        top: 8vh;
    }

    #content h1 {
        font-size: 2rem;
    }

    #dpad {
        display: flex;
        position: fixed;
        bottom: 24px;
        left: 0;
        width: 100%;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        transform: none;
        gap: 0;
        z-index: 50;
    }

    #dpad button {
        width: 52px;
        height: 52px;
        background: rgba(0,0,0,0.55);
        color: #ffe44d;
        border: 2.5px solid #ffe44d;
        border-radius: 8px;
        font-size: 1.3rem;
        cursor: pointer;
        backdrop-filter: blur(6px);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

@media (max-width: 380px) {
    .action-btn {
        padding: 6px 10px;
        font-size: 0.70rem;
    }
}