/* 2 farby: čierna pozadie, biela text */
:root{
  --bg: #000;
  --fg: #fff;

  /* ==== RÝCHLE NASTAVENIA ==== */
  --video-width: 500px;     /* šírka videa (max) */
  --video-max-h: 80vh;      /* max výška videa */
  --video-scale: 1;         /* jemné doladenie (1 = default) */
  --video-radius: 0px;      /* ak chceš jemne zaobliť */

  --autonomy-size: 55px;    /* veľkosť textu "autonomy" */
  --autonomy-weight: 600;   /* hrúbka */
  --scratch-pad-x: 18px;    /* padding okolo textu (kvôli škrabaniu) */
  --scratch-pad-y: 12px;
  --scratch-brush: 36px;    /* hrúbka "škrabania" */

  --contact-size: 28px;     /* veľkosť kontaktu */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.stage{
  min-height:100vh;
  display:grid;
  place-items:center; /* všetko v strede */
  padding: 24px;
}

.panel{
  display:none;
  width:100%;
  max-width: 1100px;
  justify-items:center;
  align-items:center;
  text-align:center;
}

.panel.is-active{
  display:grid;
}

/* VIDEO */
.panel--video video{
  width: min(calc(var(--video-width) * var(--video-scale)), 100%);
  height: auto;
  max-height: var(--video-max-h);
  border-radius: var(--video-radius);
  display:block;
}

/* SCRATCH: už len text (wrap sa prispôsobí obsahu) */
.scratchWrap{
  position: relative;
  display: inline-block;
  touch-action: none; /* dôležité pre mobilné škrabanie */
  user-select: none;
}

#scratchCanvas{
  display:block;
  width: 100%;
  height: 100%;
}

/* CONTACT */
.contactText{
  font-size: var(--contact-size);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* IG/FB bez podčiarkovania */
.link{
  color: var(--fg);
  text-decoration: none;
  border-bottom: none;
  padding-bottom: 0;
}
.link:hover{
  border-bottom: none;
}