:root {
  --bg:           hsl(45 20% 92%);
  --fg:           hsl(45 30% 10%);
  --card:         hsl(45 30% 97%);
  --border:       hsl(45 20% 80%);
  --primary:      hsl(45 100% 55%);
  --muted:        hsl(45 20% 35%);
  --radius:       0.5rem;
  --font-mono:    'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 18px;
  min-height: 100vh;
  padding: 2rem 1rem 3rem;
  overflow-y: scroll;
}

.container { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 3rem; }

header { text-align: center; animation: fadeInDown 0.5s ease both; }
header h1 img { width: 135px; height: auto; }
header h1 .project-card { display: inline-block; }
header p { margin-top: 0.5rem; color: var(--muted); font-size: 1.1rem; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; width: fit-content; max-width: 100%; margin: 0 auto; }

.section { width: fit-content; max-width: 100%; margin: 0 auto; }

.section-title {
  display: inline-block;
  margin: 0 0 -1px 1rem;
  padding: 0.3rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.projects { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: center; gap: 1.5rem; animation: fadeIn 0.5s 0.2s ease both; }

.project-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: 120px; }
.project-card { display: block; line-height: 0; }
.project-card img { width: 120px; height: auto; display: block; transition: transform 0.2s, filter 0.2s; }
.project-card--nsilab img { width: 135px; }
.project-card:hover img { transform: scale(1.06); }
.project-card--rwx:hover img  { filter: drop-shadow(0 0 10px hsl(120 100% 50% / 0.9)) drop-shadow(0 0 25px hsl(120 100% 50% / 0.5)); }
.project-card--addr:hover img { filter: drop-shadow(0 0 10px hsl(210 80% 60% / 0.9)) drop-shadow(0 0 25px hsl(210 80% 60% / 0.5)); }
.project-card--bool:hover img { filter: drop-shadow(0 0 10px hsl(185 100% 60% / 0.9)) drop-shadow(0 0 25px hsl(185 100% 60% / 0.5)); }
.project-card--cmd:hover img      { filter: drop-shadow(0 0 10px hsl(135 80% 55% / 0.9)) drop-shadow(0 0 25px hsl(135 80% 55% / 0.5)); }
.project-card--execubot:hover img { filter: drop-shadow(0 0 10px #4a90e2cc) drop-shadow(0 0 25px #4a90e280); }
.project-card--affectabot:hover img { filter: drop-shadow(0 0 10px #e2664acc) drop-shadow(0 0 25px #e2664a80); }
.project-card--copyleft:hover img { filter: drop-shadow(0 0 10px #00000099) drop-shadow(0 0 25px #00000055); }
.project-card--pyterm:hover img   { filter: drop-shadow(0 0 10px #654ff0cc) drop-shadow(0 0 25px #654ff080); }
.project-card--brygame:hover img  { filter: drop-shadow(0 0 10px #2baa12cc) drop-shadow(0 0 25px #2baa1280); }
.project-card--nsilab:hover img   { filter: drop-shadow(0 0 10px hsl(45 100% 55% / 0.9)) drop-shadow(0 0 25px hsl(45 100% 55% / 0.5)); }

.project-info-btn {
  position: absolute;
  bottom: 8px; right: 8px;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  font-size: 0.7rem; font-weight: 700;
  cursor: pointer; line-height: 1;
  transition: opacity 0.15s;
}
.project-info-btn--rwx  { color: hsl(120 100% 50%); }
.project-info-btn--addr { color: hsl(210 100% 70%); }
.project-info-btn--bool { color: hsl(185 100% 60%); }
.project-info-btn--cmd { color: hsl(135 80% 55%); }

.project-name { margin-top: 0.4rem; font-size: 1.2rem; font-weight: 700; cursor: pointer; text-align: center; }
.project-info-btn:hover { opacity: 0.75; }

.project-info-pop {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  padding-bottom: 8px;
  background: hsl(45 5% 10%);
  color: hsl(45 20% 85%);
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  width: max-content;
  max-width: min(280px, 85vw);
  box-shadow: 0 4px 12px hsl(0 0% 0% / 0.3);
  z-index: 10;
}
.project-info-pop.open { display: block; }
@media (hover: hover) {
  .project-info-btn:hover + .project-info-pop,
  .project-name:hover + .project-info-pop,
  .project-info-pop:hover { display: block; }
}
.project-info-pop--rwx  { color: hsl(120 100% 50%); }
.project-info-pop--addr { color: hsl(210 100% 70%); }
.project-info-pop--bool { color: hsl(185 100% 60%); }
.project-info-pop--cmd      { color: hsl(135 80% 55%); }

footer { text-align: center; font-size: 1rem; color: var(--muted); opacity: 0.6; }
footer a, footer a:visited { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s, opacity 0.2s; }
footer a:hover { color: var(--fg); opacity: 1; }

@keyframes fadeIn     { from { opacity: 0; transform: translateY(8px);   } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 500px) {
  .projects { grid-template-columns: repeat(2, 120px); }
}
@media (max-width: 340px) {
  .projects { grid-template-columns: max-content; }
}