:root{
  --bg:#0b0b0b;
  --ink:#e8e8e8;
  --dim:#bdbdbd;
  --dim2:#7f7f7f;
  --line:#1e1e1e;

  --lit:#a8ff7a;
  --lit2:#7ad8ff;
  --hot:#ff7a7a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 700px at 50% 35%, #141414 0%, var(--bg) 60%);
  color:var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:32px 16px;
}

.stack{
  width:min(560px, 92vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

/* ---------- pixel scene ---------- */
.cook{
  position:relative;
  width:180px;
  height:180px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#0d0d0d;
  overflow:hidden;
  display:grid;
  place-items:center;
  image-rendering:pixelated;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}

.stars{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 26%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 72%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 78%, rgba(255,255,255,.10) 0 1px, transparent 2px);
  opacity:.55;
  animation: drift 6s linear infinite;
}
@keyframes drift{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(6px); }
  100%{ transform: translateY(0px); }
}

/* steam */
.steam{
  position:absolute;
  width:8px;
  height:8px;
  background: var(--ink);
  border-radius:2px;
  opacity:0;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
  animation: steam 2.6s infinite;
}
.s1{ left:74px; bottom:92px; animation-delay:0s; }
.s2{ left:88px; bottom:90px; animation-delay:.85s; }
.s3{ left:102px; bottom:92px; animation-delay:1.7s; }

@keyframes steam{
  0%   { transform: translateY(0) translateX(0); opacity:0; }
  15%  { opacity:.9; }
  60%  { opacity:.75; }
  100% { transform: translateY(-86px) translateX(-12px); opacity:0; }
}

/* SVG sprite scaling (crisp) */
.pot-sprite{
  width:110px;
  height:110px;
  transform: scale(1.35);
  transform-origin:center;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.35));
  animation: potBob 2.8s ease-in-out infinite;
}
@keyframes potBob{
  0%,100%{ transform: scale(1.35) translateY(0); }
  50%{ transform: scale(1.35) translateY(-2px); }
}

/* sprite palette */
.px{ fill: var(--ink); }
.dim{ fill: var(--dim); }
.dim2{ fill: var(--dim2); }
.lit{ fill: var(--lit); }
.lit2{ fill: var(--lit2); }
.hot{ fill: rgba(255,122,122,.18); }

/* burner heat pulse */
.b1{ animation: heat 1.8s ease-in-out infinite; }
.b2{ animation: heat 1.8s ease-in-out infinite .6s; }
.b3{ animation: heat 1.8s ease-in-out infinite 1.2s; }

@keyframes heat{
  0%,100%{ fill: rgba(255,122,122,.10); }
  50%{ fill: rgba(255,122,122,.28); }
}

/* ---------- text ---------- */
.subtitle{
  margin:0;
  opacity:.82;
  letter-spacing:.10em;
  font-size:1rem;
  text-align:center;
}

.labels{
  width:min(520px, 92vw);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  text-align:center;
  opacity:.90;
  letter-spacing:.12em;
  font-size:.92rem;
  margin-top:2px;
}

/* ---------- icons under labels (bigger) ---------- */
.icons{
  width:min(520px, 92vw);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items:center;
  margin-top:-2px;
}

/* bigger icon base */
.ico{
  width:16px;
  height:16px;
  transform: scale(3);          /* <<< bigger */
  transform-origin:center;
  image-rendering: pixelated;
  position:relative;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
.ico::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:1px; height:1px;
}

/* WEB icon */
.ico.web::before{
  box-shadow:
    3px 3px var(--dim), 4px 3px var(--dim), 5px 3px var(--dim), 6px 3px var(--dim), 7px 3px var(--dim),
    3px 4px var(--dim), 7px 4px var(--dim),
    3px 5px var(--dim), 7px 5px var(--dim),
    3px 6px var(--dim), 7px 6px var(--dim),
    3px 7px var(--dim), 4px 7px var(--dim), 5px 7px var(--dim), 6px 7px var(--dim), 7px 7px var(--dim),
    4px 5px var(--ink), 5px 5px var(--ink), 6px 5px var(--ink),
    4px 6px var(--dim2), 5px 6px var(--dim2),
    10px 6px var(--lit2), 10px 7px var(--lit2), 11px 7px var(--lit2);
}
.ico.web::after{
  content:"";
  position:absolute;
  left:0; top:0;
  width:1px; height:1px;
  box-shadow: 12px 9px var(--lit2);
  opacity:0;
  animation: cursor 1.1s steps(1) infinite;
}
@keyframes cursor{
  0%,49%{opacity:0}
  50%,100%{opacity:1}
}

/* MUSIC icon */
.ico.music::before{
  box-shadow:
    8px 3px var(--ink), 9px 3px var(--ink),
    8px 4px var(--ink),
    8px 5px var(--ink),
    8px 6px var(--ink),
    6px 7px var(--lit), 7px 7px var(--lit),
    10px 5px var(--dim2), 11px 5px var(--dim2),
    10px 6px var(--dim2), 11px 6px var(--dim2);
  animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-1px); }
}

/* CHESS icon */
.ico.chess::before{
  box-shadow:
    5px 3px var(--ink), 6px 3px var(--ink), 7px 3px var(--ink),
    4px 4px var(--ink), 5px 4px var(--ink), 6px 4px var(--ink), 7px 4px var(--ink),
    4px 5px var(--ink), 5px 5px var(--dim), 6px 5px var(--dim), 7px 5px var(--ink),
    4px 6px var(--ink), 5px 6px var(--ink), 6px 6px var(--ink),
    4px 7px var(--dim), 5px 7px var(--dim), 6px 7px var(--dim),
    3px 8px var(--dim2), 4px 8px var(--dim2), 5px 8px var(--dim2), 6px 8px var(--dim2), 7px 8px var(--dim2);
  animation: bounce 1.8s ease-in-out infinite;
}
@keyframes bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-1px); }
}

/* TEXTS icon */
.ico.texts::before{
  box-shadow:
    4px 3px var(--dim), 5px 3px var(--dim), 6px 3px var(--dim), 7px 3px var(--dim),
    4px 4px var(--dim), 7px 4px var(--dim),
    4px 5px var(--dim), 7px 5px var(--dim),
    4px 6px var(--dim), 7px 6px var(--dim),
    4px 7px var(--dim), 7px 7px var(--dim),
    4px 8px var(--dim), 5px 8px var(--dim), 6px 8px var(--dim), 7px 8px var(--dim),
    5px 5px var(--ink), 6px 5px var(--ink),
    5px 6px var(--dim2), 6px 6px var(--dim2),
    5px 7px var(--ink);
}
.ico.texts::after{
  content:"";
  position:absolute;
  left:0; top:0;
  width:1px; height:1px;
  box-shadow:
    3px 5px var(--lit2),
    8px 6px var(--lit2);
  opacity:0;
  animation: scan 1.9s steps(1) infinite;
}
@keyframes scan{
  0%{ transform: translateY(0); opacity:0; }
  20%{ opacity:.85; }
  60%{ transform: translateY(2px); opacity:.85; }
  100%{ transform: translateY(3px); opacity:0; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .stars, .steam, .pot-sprite, .b1,.b2,.b3, .ico::after, .ico.music::before, .ico.chess::before { animation:none !important; }
}

.copy-mail{
  cursor:pointer;
  border-bottom:1px dotted rgba(255,255,255,.35);
  opacity:.75;
}
.copy-mail:hover{
  opacity:1;
}